为UX、UI设计师量身打造的三大原型设计方案

　

“做网站原型的最好方式是什么”的问题就像“怎样做最出色的网站”一样，它们都没有一个可以作为捷径的“最好方式”。但按照设计师们的风格和偏好，某些原型设计方式的确在某种程度上来说更占优势。网络上随处可见的“PSD to HTML”教程看起来像天书般晦涩，而讽刺的是即便你硬着头皮把它们看完之后你才会发现本身仍然对网站原型设计一筹莫展。

关键在于，你有没有重视本身UI/UX设计师的身份?如果有，那么你就理应捍卫本身选择工具的权利。PhotoShop的确流传很广，也是一大助力，然而我们是否就能给Photoshop贴上“网站原型首选全能工具”的标签呢?各位，，现在已经 2017 年了，各类工具每天都在以雨后春笋般的速度诞生，何愁找不到替代品呢?在这篇文章中，笔者将介绍三种最为常见的网站原型设计方法。

1. 代码

用代码来作为设计方式实在过于枯燥了，这几乎成了当今今新一代设计师们的共识。但是，我们不能否认代码的设计功能且很多设计师并未放弃使用这一方式进行设计，这其中肯定是有着一些门道的。

我们实际上可以发现一些用代码进行设计带来的好处。最显而易见的就是代码制作的原型支持任何操作系统，并且无需任何外部软件即可运行。设计师在设计过程中会将注意力更多地放在使代码完美运行上而非卖弄本身的创造力。这样来理解整件事情就变得非常有趣了。代码设计原型其实可以被称作一种“预开发”，这在网站后期的开发阶段还会提供很高的价值。

2. 线框图工具

网站原型制作和玩乐高比较类似，前期规划的改变往往比后期令人抓狂的修正来的划算。线框图因其快速迭代的特性广受设计师欢迎。如果您是一位经常会和差别风格的团队合作的自由设计师，做好熟练使用各种主流线框图工具的准备是极其须要的。

笔者个人偏爱使用纸笔进行设计，个人认为这是最快速直不雅观的方式。当碰到需要快速进行团队合作的时候我也会偶尔用一下国产的Mockplus，反正都大同小异，何不支持国产呢?况且这款工具确实比较出色。言归正传，事实上代码的陡峭学习曲线很容易就把产品向的设计师们拒之门外了。线框图工具中现成的封装组件和图标恰恰解决了设计的繁琐部分而将一个快速展现创造性的舞台还原给设计师。线框图工具因此成为当今最具竞争力的网站原型设计途径之一。

3.演示软件

本文一开始就提到了世界上没有所谓“最佳网站设计途径”，当细化到差别阶段的设计师时更是如此。所以，对于刚踏入设计业的新手们来说，类似PowerPoint和Keynote这样的演示软件也能称作“最佳”。换句话说，演示软件可以说是新手进阶的最佳途径。几乎人人都使用过它们，你只需下点功夫就能熟练掌握其中的一些进阶技巧，好比动效和页面交互。演示软件提供的基本素材库也能使新手们对网站原型设计所需的元素有一个大致的了解。新手们通过使用演示软件很快就能成长为使用专业线框图工具的设计人才。