打造网站视觉稿的三种方式

创建网站视觉稿（mockup）有很多种方式。当然这并没有所谓“最好的”方法，但依据部分UI和UX设计师的风格与偏好（以及设计流程），我们可以总结出几个相对比较好的方法。

本文将介绍几个视觉稿工具、图表设计工具，以及与原型十分近似的编码的视觉稿的优缺点。

01. 使用专门的工具

使用UXPin或者Moqups 、Balsamiq 这样的解决方案，能够为你提供创建视觉稿所需要的一切，让整个流程变得简单。这些工具的存在，就是为了让创建过程尽量简单，这样你就可以把时间和精力花在风格

UXPin这样的工具能让你轻松快速地创建视觉稿

资深专家和初学者都喜欢使用视觉稿工具，初学者在意的是它们的简单易用，专家欣赏的是专门针对高级需求定制的设计。

比起用于线框图和视觉稿的其他非设计类工具（比如Keynote ），Moqups和Balsamiq的功能更为强大，但也仅限于低保真设计。当然，如果原本的目标就是快速创建低保真线框图，这些工具是非常实用的。

视觉稿工具其实大部分是针对线框图的。通过内置协作，UXPin提供了数十个元素库来节省时间，这样就可以通过简单的拖拽和自定义来创建视觉稿。

02. 使用平面设计软件

有的设计人员习惯使用Photoshop、Sketch或者Illustrator这样的工具，尤其是那些对于那些可以精准控制到像素的工具非常熟悉的人。如果你追求的是高水平的现实主义和视觉保真，平面设计平台是很好的选择。

平面设计软件中，你可以访问无数的高度界定的颜色，因此，如果你被要求使用预设的配色方案--比如说由于品牌形象的限制--那么这些软件可能是你最好的选择。除了颜色选择之外，这些软件还提供更多的视觉工具，可以帮助用户解决一些细节问题。

然而，使用这一类软件的缺点是当开始编码设计时，可能会遇到难以转换的问题。在Photoshop中正常的功能可能并不总是适用于代码（诸如字体、阴影、渐变效果等元素），这可能会在原型设计阶段花点时间来找出解决方案。

学习如何在Sketch中创建视觉稿

如果你设计的是一个样式复杂的页面，最好能在设计视觉稿的过程中敲定具体的视觉细节（这种情况下，Photoshop和SKetch这类的工具能为你提供更多的选择）。

看看Hubspot上最美主页的名单，你就会理解为什么早一点处理视觉细节会更好。类似的，如果你正在接洽的是一个挑剔的、难以取悦的客户，向他们展示一个美观大方的视觉稿可能会帮你获得客户的青睐。

在Photoshop或Sketch中创建的视觉稿可以拖放到免费的UXPin应用程序中

值得一提的是，Photoshop或Sketch中创建的视觉稿可以通过UXPin拖拽至原型设计阶段。这能让你轻轻松松几个点击就能将操作所有图层，并确保你不需要从头开始做原型。

如果视觉不是你唯一的优先考虑，使用一个能处理线框图、视觉稿和原型的工具会更有效率。除非你追求的是最右的视觉效果，那么使用平面设计软件来做视觉稿带来的麻烦要比便利多--所有一定要定期与开发人员联系，因为这些工具并不是为了协作而设计出来的。

03. 视觉稿编码

对于初学者来说，如果你的职责更多的是设计人员，并不擅长编码，那么这个选择显然不适合你。编码视觉稿并不是一个默认选择。

大多数编码工作都可以等到原型开发阶段（如果是HTML/Javascript原型）或者更晚（如果使用原型设计工具）。尽管有其复杂性和潜在的障碍，但许多知名设计师都主张在视觉稿阶段就引入编码工作。

在HTML中构建结构，然后在CSS中进行基础布局，能够简化整个开发流程。至少是在理论上。很多人会争论，说在视觉稿阶段集中精力做视觉方面的工作能够节省将来花在决策和结构上的时间。但那些支持在早期引入编码的人则认为，如果代码先行写好，后续的一些数学上的变化，比如大小的调整等，就会很简单。

Ash Maurya拥护HTML/CSS路径来创建视觉稿

编码模型的大支持者之一是Spark59的创始人兼首席执行官Ash Mauria。在描述他喜欢的创建视觉稿的方式的时候，他拥护HTML / CSS路径，并提出了一些不错的观点：

可行性：仅仅为了好看而设计的“华丽的”视觉稿在转换为代码时比较困难，由此会造成时间和精力的浪费。渐变、字体与效果等元素--在其他工具中很容易实现--在编码时可能会很难处理，甚至无法重现。从代码开始能让你能马上知道自己能做什么不能做什么。

快速迭代：Maurya表示，通过简化迭代流程编码实际上能够节省不少时间。当然，也有人认为这拖延了设计决策，实际上增加了工作时间。

最少的浪费：“在产品交付的最终技术以外的其他任何产品中创建视觉稿都会造成浪费。”因为这个视觉稿最终都会在HTML / CSS里，Maurya建议增加保真。

但就像我们先前说过的，视觉稿编码并不是常见的策略，而原因并不是编码工作的难度。过早地开始编码可能限制你的创造力及进行实验的意愿，因为你会担心创意在代码中的可行性，而不是它看起来会多好。

何时引入编码工作取决于你。只要你先了解设计流程的轻重缓急，并及时告知开发人员你制定的优先排序。