在成熟的UI设计流程中,视觉稿是绕不开的环节 - 优设-UISDC

在成熟的UI设计流程中,视觉稿是绕不开的环节

2018/02/14 评论区

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

【2018年设计趋势,一个都不要错过】

  1. 《2018年,这10个LOGO设计趋势值得你关注》
  2. 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
  3. 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
  4. 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/mockup-in-ui-design-flow

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里