位置：西安设计培训学校 > 学校动态 > 西安成熟的UI设计视觉稿是绕不开的环节

西安成熟的UI设计视觉稿是绕不开的环节

来源：西安设计培训学校时间：2022/3/14 9:01:56

　　“为了设计这个产品的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设计师也可以在这个阶段更好的释放自己的创造力，专注于功能、层次结构和体验。

领取试听课

每天限量名额，先到先得

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/454/news/498149/违者必究！以上就是西安设计培训学校小编为您整理 西安成熟的UI设计视觉稿是绕不开的环节的全部内容。