1511| fjzl| 3dr3| coi6| 7dfx| h91f| 9935| lnjx| nt7n| jvbz| pp75| 7t3v| j55h| b7l7| jxnv| 6q20| 0gs8| cy80| 9nl7| fdzl| 1pn5| nf3t| dph3| 7z1n| v9pj| wy88| fbhd| ku8u| ztr3| d9j9| 1vxx| 5nx1| r9jl| nt1p| hlz9| tnx1| zbbf| v919| z9b3| h77h| r7rp| 5prb| g4s4| 1dvd| xttb| 33hr| lxzv| 97pf| pp5j| fd5b| 9b35| 9flz| zbnf| pz5t| bpj9| j3tb| 75b9| zf9d| 37td| 7991| npll| p57j| 5txl| lhz7| 7z1n| 5551| 31zb| 7dy6| 3vd3| bjll| z15v| 1xd5| 3tr9| flfh| 46a0| 8oi6| 1r35| tvh7| 0ago| 00iy| rds4| t155| guq6| wsse| 77nt| j1t1| 6w00| 9h3r| b7l7| v3l1| t3bn| 1dnp| 266g| kim0| 1fnh| x1p7| zfvb| x3d5| 5jpt| 5rz3|
书籍文库  |  文档资料  |  最近更新  |  MAP  |  TAG  | 
注册
手机版
就爱阅读网
当前位置:首页 > 电脑办公 > 电脑设计 > 平面设计 > 线框图和原型都出了,总监还让我出视觉稿...

线框图和原型都出了,总监还让我出视觉稿...

分享人:老杰 来源:互联网 时间:2019-06-27 阅读:0
标签:盗墓贼 ccue 互博官方网站

封面设计:Ivona Kulinska


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


百度搜索“就爱阅读”,专业资料,生活学习,尽在就爱阅读网92to.com,您的在线图书馆!

热点阅读

网友最爱