你是项目经理、产品经理、运营或交互设计师,否遇到过这样的情境?看了UI同学的设计稿,觉得虽然满足了需求,但是就会觉得哪里别扭,又不知该怎样表达。
你是UI设计师,当去给需求讨论设计稿时,两个方选哪个产生纠结,你根据自己的设计感觉有所判断,但又不知道怎么给对方讲清楚。
这时,你可能需要这几个原理。
因为U设计虽然是展示界面效果,但它并不是纯感性、靠审美的,而是有理可依、能够分析和辨别的。
这就是本文想说的:UI设计的最重要原则,不是美,而是科学。
紧接着,很多人可能要问:
“为什么?”
在回答这个问题之前,请大家先思考另外一个问题:
“美是什么?”
在这里,你可以稍作停顿,先别往下看,给自己个答案之后,再继续阅读。
当然,我们不是做美学论述,你不必顾虑是否会打错,更不必回答的专业而系统,只要把你的观点或直觉的回答写下来即可。
如果你还是不知道该写出什么答案,那我们构想几个场景:
当你辛苦工作一天,忙的饭都没吃,然后饥肠辘辘的回到家里,桌子上是刚出锅的你最爱吃的饭菜,爱人给了你一个温暖的拥抱,跟TA一起坐下来品味这顿晚餐。从味蕾到心灵,是不是都是甜美的?
当你在冷风渐渐消去的春日周末去郊游,看到植物园婴黄嫩粉的花苞,映着水蓝色的天空和几朵淡淡的轻云,你闻到暖阳的气息和草木的香味儿。你觉得大自然,是不是美好的?
当你在记录片里看到支教的乡村老师,为了更多的孩子能够接受教育,而艰难度日的时候,你流下感动的眼泪。你觉得人性,是不是闪着纯良美丽的光辉?
所以,此刻你知道”什么是美“的答案了么?
这些“高效率、满足感、舒适的、愉悦的、安全的、感动的”等等享受的状态,就是美。
让你产生“美”的体验的,是这些积极良好的状态和体验。我们常说,艺术来源于生活,这些产生美感的状态,是在符合人和自然规律的状态下才产生的,所以在设计中,所谓“美感”,并不是飘忽不定的玄学,而是有规可循、有理可依的科学。
下面就用几个案例,来解释一下为什么UI设计是一种,创造美的科学。
第1个例子:乘电梯 - 关于空间感/呼吸感
大家都乘坐过电梯吧!回忆一下“拥挤的电梯”和“不拥挤的电梯”,各自会带给你什么感受?
左:拥挤的电梯:空间剩余少,氧气不足、活动不便,导致气息不畅、情绪紧张、焦虑。
右:不拥挤的电梯:足够且合适的空间,给人生理和心理上的舒适感。
从这两个场景中,我们可以充分理解到“适度空间”对人感受的重要性。这一原理体现在艺术和设计中,也可以成为“空间感、呼吸感”。比如,中国水墨画中的“留白”。
延伸到UI设计中的例子:按钮文字与边缘的间距留白处理:
一张图小结一下:
第2个例子:寻找尾号为1102的记录表 - 关于规律和秩序
如果是下图,把表格混乱的洒落,在你在其中寻找,你会是什么情绪和心理状态呢?
如果换做这样,将表格按序号由小到大排布摆放好,让你去找尾号1102那张呢?
看着这两堆表格,你的情绪应该有着明显的不同。合理的规律和秩序能够提高效率、符合人正常的思维逻辑,能够获得更好的体验,这一点也同样体现在视觉艺术上,比如这张风景照片:
整片的草地,或者是凹凸的山峦,并不足以让我们驻足或赞叹,但当草地有了光影明暗的起伏、山峦有了节奏和规律的线条,画面才显壮丽和神奇。看山的心情是平静的,而看山川是澎湃的,群而又律,则成川。
引申到UI设计中,规律且一致的形状,会在视觉心理上更能体现,或饱满、或自在的美感:
一张图小结一下:
第3个例子:宣布考试内容 - 层次感/关系性
下周要考试,如果我搬出下图中的所有书,告诉你:这些就是考试的内容,复习吧!
你的内心一定不要太奔溃呦~
先别忙着哭。如果我再告诉你:最下面的几摞,是同类备选书籍,选或不选都随你;中间几摞呢,是扩展性读物,不作为考试核心考点;上面的几本呢,是可以带入考场开卷翻看的;而最上面的一本,才是考试要考的核心内容。
是不是开心了点呢?
还有更开心的呢!我拿出上面那边告诉你:这一本中,只有每章节的第一页,划红线的,才是这本书里的重点考点,其他的仅作为了解就好。
此刻,是不是豁然开朗~~~~~
如果把全部书搬出来,说都是参考书,大量信息而没有重点的状态,会让人产生:迷茫、不安、压力和苦恼。
划分书籍的参考重要和次要程度,能够让人获得:轻松、自信、效率、愉快、掌控感等美好的感受。
中国的传统纹样图案,就很好的利用了这一原理,复杂的线条依照主次来疏密有致的排布,花为主体叶为辅助,展现出一个图案的层次性;多而杂的叶子中,通过卷曲方向和疏密程度分出主要叶片和次要叶片,让图案虽然密集丰富,却也简洁易读。
延伸到UI界面设计中,主要体现在层级关系的区分和表达上:
小结一下:
第4个例子:购物 - 精致感/细节性
关于购物,让我们来个真假大比拼吧~
当你想买个名牌包包,让你嫌弃仿品,欣赏正品的原因会是什么呢?
正品的感受:细节感人、喜欢、踏实、品质、尊重、荣耀、满足感或成就感。
仿品的感受:粗糙、嫌弃、凑合糊弄、欺骗、轻视,低质量、愤怒感或失落感。
同样,在绘画艺术中,要拥有打动人的感染力,细节的精致刻画是不二法宝:
延伸到UI设计中,细节的讲究和门道,也是打动人的关键。
小结一下:
第5个例子:红酒与礼服 - 归属感/匹配性
假设,你的男神或女神要给你斟上一杯红酒,你会端起什么样的容器呢?
懂品味的你,应该是这个选择:
如果你用这样的容器装红酒。。。
Excuse me?该不会,左边是酱油,右边是中药吧。。。
再脑补一个场景:
如果马上召开运动会,你的伙伴穿这样的着装出场,你会作何感想?
如果,不是运动会,是去参加一个高级晚宴呢?
礼服搭配运动场:奇怪、滑稽、别扭、蠢笨、愚蠢、不适的违和感。
礼服搭配高端晚宴:优雅、品味、自信、踏实、安心,自然和谐的归属和契合感。
这就是“得体和适合”带给我们的感受,最好的可能不是美,但最得体的,会美。
视觉传达设计中,也蕴含着这个原理。比如无印良品的海报设计,无论色彩、质感、构图、还是字体设计,海报极简、自然、家居、强调舒适感的风格,就体现出品牌的禅意和自然极简主义的气质和调性。
延伸到UI设计中,色彩样式的情绪和大众认知含义,要符合产品本身的属性或用户习惯,安全和工具属性极高的支付宝,蓝色更能产生放心和冷静的情绪,让人潜意识中知道它作为金融是安全的,它作为工具是高效率的。
如果换上淘宝橙,有差强人意了,尽管淘宝色是品牌血脉:
小结一下:
OK,通过举例,大家是不是对“设计来源于生活”,有更直观的理解了呢~~
总结一下,这些来自生活中的,能够产生美感的原理,分别是:
√ 空间/留白 √ 规律/秩序 √ 层次/关系 √ 精致/细节 √ 归属/匹配
以上”“这些体现在UI或视觉设计上的原理,都不是随主观评价或个人喜好创造出来的,而是由生活中的客观现象和生活规律而产生的。这也就是为什么,在本文起始,会倡导说”UI设计是一门科学“。
对于科学,一句话的参考定义是:科学是具体的事物及其客观规则。而UI设计恰恰就是围绕着“产品界面”这个具体事物、按照“用户的行为与心理”规则而展开的一项创造性活动。所以,在UI的本质是科学。
科学主要内容是具体的世界观与具体的方法。希望大家能够理解这种设计观,并能够将其方法合理的运用,合理的创造美。
接下来的几篇文章中,我将从“图形与界面空间留白、UI界面层级分析、字体排版、图形图片处理、界面配色”几个方面,详细来讲解,如何运用以上原则,科学的分析和设计UI界面。
感谢喜欢设计的小伙伴们持续关注~
通过本文,你掌握“因好用而好看”的设计思想了吗?可以试着分析一下你手上的UI设计,它现在是科学的么?有哪些可以改善的地方呢?
欢迎留下你的思考或建议,与大家一起进步。