界面信息的化“繁”为“简”
在《设计学概论》一书中提到:设计的终极目的永远是功能性和审美性的统一。就设计的功能性而言,设计要对相关数学、物理学、材料学、机械学、工程学、经济学等做理论研究;就设计的审美性而言:设计学要对相关的色彩学、构成学、心理学、美学、民俗学等进行研究。我想这与当下产品设计师需要懂交互、产品知识以及各种涉猎心理学、经济学、用户体验等的行业趋势是不谋而合的。
-----------------前言
对于时下盛行的“扁平化”风格和曾经风靡一时的“拟物化”风格,如果追溯到设计的发展史上来看,可视化设计领域的流行风格趋势往往在“简”和“繁”之间不断交替变化。
“扁平化”摒弃高光、阴影、纹理、材质等能造成透视感的效果,通过抽象、简化、符号化的设计元素来表现。给人的感觉是简洁明了,更加突出主要内容;减弱装饰性的元素对于用户视觉感知的干扰,让用户更加专注于内容本身,其交互核心在于功能本身的使用,所以去掉了冗余的界面和交互,从用户体验上也更简单明了。
但从人性化体贴的角度来看,“拟物化”因为模拟现实中的物品,使得用户更容易辨识和接纳其所指向的事物,也减少了新用户对于产品的恐惧感和障碍感,但大多数拟物化界面并没有实现拟物的功能化,试想一下,外观相似的物体,实际使用的方式确是不一样的,在一定程度上也会降低用户体验,再加上当今视觉信息爆炸的年代,过多的装饰性元素对于用户快速准确获取需要的信息都是一种干扰,好看却不实用。
说到“简”不得不提到20世纪20年代前后,由欧洲一批先进的设计家、建筑家和理论家兴起的探求20世纪新的审美观。现在主义的主要特点是理性主义,已经从19世纪突然崛起的客观精神。现代设计运动,本质上现代主义设计的基础是功能主义,主张形式服从功能 (Form Follows Function),这一主张反映了此项运动理性的、有秩序的现代设计方式。现代设计运动所提倡的“形式服从功能”与现在产品设计的“可用性”都有不谋而合之处。
今天就来说说界面信息中的化“繁”为“简”,化“繁”为“简”并不是简单的简化元素,追求简明清晰的视觉效果那么简单,除此之外还应该对界面信息进行合理分类、组合、删减、隐藏等,高效的向用户传递有用的信息,在用户浏览界面时能够快速的了解界面结构,获取到关键信息点。更进一步的提升用户的视觉体验和产品的可用性、易用性等。比如:界面信息各功能模块间的关系要有逻辑性,分类要合理、命名也要准确易懂。可以减少不必要的装饰性的元素,减少界面信息结构层级和增加单层信息幅度(也就是在同一层级上增加信息目录,以来减少目录的总层级数量)来优化结构层级。
其次是把交互中的任务流程图和信息结构设计的清晰明了,易于理解,并且在用户使用过程中,符合用户的心理预期,让用户愉快的使用,如果有多次跳转页面的行为,则必须要在页面中清晰显示出口和入口,保证用户流畅的操作,这也是可用性的基础。
任务流程图示用图示的方式反映出特定主体为了满足特定需求而进行的有特定逻辑关系的一系列操作过程。例如:淘宝的购物流程,特定主体是买家、特定需求是购物、特定逻辑关系是买家购物过程中的逻辑。
(小知识提示:产品设计中的流程图包括三种:业务流程图、任务流程图、页面流程图)信息结构设计就是通过信息的页面布局、信息视觉层次等表现出来的视觉效果。下面详细叙述。
合理清晰的信息页面布局和信息视觉层次能够保证用户获取信息和操作时的准确性和高效。信息层级越多,信息筛选与摆放的难度就越大,但是画面节奏感就越强,所以只有多参考优秀作品结合自己的理论知识,提升积累关于设计界面信息这方面的能力。
我们可以从信息组织归纳的各元素(文字、图片...)的优先级、关联性、位置、大小、距离、内容形式、表现方法、色彩、对比、视觉流等来入手设计优化。(各页面和元素需保持风格统一。)
优先级就是重要的、核心的信息内容优先级高,视觉层次就高;比如:文字就可以相比其他次要信息的文字大且字重也粗,也可以在颜色、距离或者底色上做区分。图标的话就可以在表现形式上做区分。
在关联性上就是相关信息的距离区分、父子集、兄弟集等的区分也可以使用颜色、大小、图片、内容形式、表现方法、对比(动静对比、大小对比...)等方式来表现。
视觉流上按照人眼点到点跳跃式浏览信息的规律,而非平滑移动,从左到右,从上到下,视觉流程F型,而且越往下注意力越低等。
前半部分简要说明了界面视觉方面的“繁”与“简”,后半部分是界面信息方面的“繁”与“简”。还是想要大量的实践和广泛的阅读以及和优秀其他同行交流,才能提升专业能力,成长的路上只有静下心来去钻研和坚持,别无他法。