视觉稿是网站设计流程中关键的一步

视觉稿（mockup）又称高保真效果图，是线框图和原型之间的粘合剂。通过优秀的视觉稿，能给利益相关者呈现更为有效的信息，它是基础草图、线框图以及原型的基础上发展起来的，视觉稿是更具有组织性，也更符合团队的愿望。在我们国内企业建站的流程中，通常分为线框图或原型-视觉稿-前端制作-程序开发等。不同企业或者根据企业建站项目的不同需求有所不同，但整体上网站设计流程基本都是一致的。

从事企业建站的网页设计师们，视觉稿是每天都触碰的艺术品。2018我们素马自媒体重新梳理一下关于视觉稿相关的事情，希望对大家都有所帮助。

在设计APP和网页界面的时候，不少设计团队会直接跳过视觉稿（Mockup）设计。的确，从头脑风暴，需求分析，到线框图，原型，整个设计流程后面还有不少环节，但是视觉稿的设计和前面这些环节同样重要，即使是按照精益设计原则或者快速原型设计的需求来看，它也是不可或缺的部分。

-1-

视觉稿（Mockup）是什么？

线框图（Wireframe），原型（Prototype）和视觉稿（Mockup）这三者之间相互关联，有相似性，但是截然不同，但是对于许多人而言，它们依然令人感到迷惑。想要明白它们之间的差异和关联，最好的办法是通过具体的设计流程和实际运用来了解。

从构思到开发，中间通常会经历三到四个不同的设计阶段。

-通过绘制UI草图，从诸多想法中筛选出最有潜力的方案

-绘制线框图，规划信息的层次结构，将内容分组，突出核心功能

-绘制包含细节的视觉稿

-将真实的交互和视觉汇集到一起构建成原型

这样的几个阶段构成使得设计师可以低成本、快速地测试和迭代它们的想法，设计产品框架。这不仅仅适用于全新的产品搭建，而且适宜于界面的新版本更新。

接下来，我们不妨专注于视觉稿的设计环节。线框图是低保真的，而视觉稿则是增加了细节，但是并未加入交互，和高保真的原型相比，它算得上是中等保真度。视觉稿是静态的，细节丰富高还原度的，所以你可以通过这一特征来区分它。

将线框图视作为骨架，在此基础上加入配色，搭配好字体，注入品牌相关的素材，对内容布局进行适度调整，加入样式合适的导航，视觉稿就出来了。

那么为什么要加入视觉稿的设计环节呢？因为视觉稿是清晰传达视觉要求的最有效方法之一，对于甲方、开发等利益相关者而言尤其重要，如果没有视觉稿，而是转而借助早期的低保真线框图来展现产品进度，无疑是会让人觉得不舒服的。虽然视觉稿不具备交互性，但是对于经验丰富的开发者或者其他参与者，是可以从中获得大量的有效信息的。

“视觉稿在线框图的基础上发展而来，更具有组织性也更符合团队的愿景，它额外的优势在于，通过优秀的视觉，向利益相关者呈现出更为有效的信息。”——Marcello Graciolli

基本上，视觉稿是线框图和原型之间的粘合剂。

-2-

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

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

01. 使用专门的工具

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

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

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

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

02. 使用平面设计软件

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

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

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

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

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

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

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

03. 视觉稿编码

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

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

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

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

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

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

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

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

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

-3-

注意下列常见的视觉稿设计误区

刚开始制作视觉稿的UI设计师常常会犯下下面的错误：

-期待视觉稿能够传达出功能。视觉稿看起来是不错，但是它们实际上仅仅只是一个孤立的图像，它们不足以承载网站或者APP的体验的复杂性。真正能够传达功能特点的是可交互的原型。

-功能膨胀。在视觉稿中添加各种控件并不难，不过在你并不清楚所有功能的情况下就凭空添加各种按钮，那么这就是功能膨胀。

-未能解决问题。许多视觉稿看起来非常漂亮，但是并不能解决实际的问题。将视觉和问题分开的误区千万不要踏入进去，这一定会在之后坑到自己。

-4-

结语

当你真正开始将视觉稿视作为连接线框图和原型的中间组织，它的重要性和功能性会更好地呈现在你面前。通过视觉稿来消除视觉上可能潜在的问题，UI设计师也可以在这个阶段更好的释放自己的创造力，专注于功能、层次结构和体验。