“为了设计这个产的UI我们已经设计了线框图、原，没有时间和精再在这当中一个环节了！”对于UI设计流程，我少听到这样的抱怨。
在设计APP和页界面的时候，设计团队会直接跳过视觉稿（Mockup）设。的确，从脑风暴，需求分析，到线框图，原型，整设流程后面还不少环节，但视觉稿的设面这些环节同样重，即使按照精益设原则或者速原型设的需求看，它也不可或缺的部分。
今天，我们来聊聊设计流程中的视觉稿是么，及如何创建有效的视觉稿，善设计流程。
视觉稿（Mockup）是什么？
线框图（Wireframe），原型（Prototype）视觉稿（Mockup）这三者之间相互关联，相似性，但截然不同，但对于许多人言，它们依然令人感到迷惑。明白它们之间的差异关联，好的办法通过具体的设流程实际运用了解。
从构思到开发，中间通会经历到个同的设计阶。
- 通过绘制UI草图，从诸多法中筛选出潜力的方案
- 绘制线框图，规划信息的层次结构，将容分组，突核心功
- 绘包含细节的视稿
- 将真实的交互和视觉集一起构建成型
样的几个阶段构成使得设计师以低成、快速地测试和迭代它们的想法，设计产品框架。不仅仅适用新的产品搭建，而且适宜界面的新版更新。
下来，不妨专注于视觉稿的计环节。线框图是低保真的，而视觉稿则是增加了细节，但是并未加入交互，和高保真的型相比，它算得上是中等保真度。视觉稿是静的，细节丰高还度的，所以你可以通过这一征来它。
将线框图视作为骨架，在此基础上加入配色，搭配好体，注入品相关素材，内容布局进适度调，加入样合适导航，视觉稿出来了。
那么为什么要加入视觉稿设计环节呢？为视觉稿是晰传视觉要求最有效法，于、开发等利益相关者而言尤其要，如没有视觉稿，而是转而借助早期低保真线框图来展现品进度，疑是会让觉不舒服。虽然视觉稿不具备交互性，是于经验丰富开发者或者其他参与者，是可以从获大量有效信息。
“视觉稿在线框图基础上发展而来，更具有组织性也更符合团队愿景，它额优势在于，过优秀视觉，利益相关者呈现出更为有效信息。”——Marcello Graciolli
基本上，视觉稿是线框图和原型粘合剂。
制作视觉稿的几种方法
让许多UI设计师抵触视觉稿这设计环节原在于，视觉稿看起来耗费时，是吃力不讨好。
幸运的，几种方法能够确保不降低效率的况下制作视觉稿，这对于UI设师言，就不会太影响整体的效率发度了。
基于代码构建视觉稿
对于懂得码的UI设师言，视觉稿并不一都画出的哦。通过尽早使用码构建，降低后发的时间，不过这需设师娴熟的码使用技巧，否则后码不具备可用性，将会限制的产品研发。
使用可靠的设计工具来构建视觉稿
许多设计师会尽量使用他们所细化你设计工具来制作UI视觉稿，使用Photoshop 和 Sketch 等工具都能制作出像素完美静态视觉稿。
设具中构建视觉稿的决性因素于，作设的可复用性。如果设完视觉稿之后，原型阶段还需重新搭建一遍的话，无疑令人难以接受的。好以Justinmind 表的一些新的原型具能够同PS、AI、Sketch 这些具行无缝接驳，可以这些原型具中直接调用。Justinmind 中，即使SVG文件画板都完全可编辑的。
使用原型工具来制作视觉稿
如果彻底告别具之间差异性，不如使用原型具“降维打击”制作视觉稿。这时候，需筛选出一款具相对完善的UI元素库的具帮制作保真度较高的视觉稿。这款具应该可以让充分调用丰富的字体图标资源（比如Justinmind就集了Google Fonts），确保的设足够顺畅。
注意下列常见的视觉稿设计误区
刚始制作视觉稿的UI设师常常会犯下下面的错误：
- 期待视觉稿能够传出功能。视觉稿看起来是不，是它们实上仅仅是个孤立图像，它们不足以承载网站或者APP体验复杂性。真正能够传功能特是可交互原型。
- 功能膨胀。视觉稿中添加各种控件并不难，不过并不清楚所功能的况下就凭空添加各种按钮，那么这就功能膨胀。
- 未解决问题。许多视觉稿看起来非漂亮，但是并解决实际的问题。将视觉和问题分开的误区千万要踏入进，这一定会在之后坑到自己。
结语
你真正开始将视觉稿视作为连接线框图和原型组织，它要性和功能性会更好地呈现在你前。过视觉稿来消除视觉上可能潜在问题，UI设计师也可以在这个阶段更好释放自己创造力，专注于功能、层结构和体验。
浙公网安备33011002017549号