5个技巧,辨别UI设计是否合理

你是项目经理、产品经理、运营或交互设计师,否遇到过这样的情境?看了UI同学的设计稿,觉得虽然满足了需求,但是就会觉得哪里别扭,又不知该怎样表达。

你是UI设计师,当去给需求讨论设计稿时,两个方选哪个产生纠结,你根据自己的设计感觉有所判断,但又不知道怎么给对方讲清楚。

这时,你可能需要这几个原理。

因为U设计虽然是展示界面效果,但它并不是纯感性、靠审美的,而是有理可依、能够分析和辨别的。

这就是本文想说的:UI设计的最重要原则,不是美,而是科学。

紧接着,很多人可能要问:

“为什么?”

在回答这个问题之前,请大家先思考另外一个问题:

“美是什么?”

在这里,你可以稍作停顿,先别往下看,给自己个答案之后,再继续阅读。

当然,我们不是做美学论述,你不必顾虑是否会打错,更不必回答的专业而系统,只要把你的观点或直觉的回答写下来即可。

如果你还是不知道该写出什么答案,那我们构想几个场景:

当你辛苦工作一天,忙的饭都没吃,然后饥肠辘辘的回到家里,桌子上是刚出锅的你最爱吃的饭菜,爱人给了你一个温暖的拥抱,跟TA一起坐下来品味这顿晚餐。从味蕾到心灵,是不是都是甜美的?

当你在冷风渐渐消去的春日周末去郊游,看到植物园婴黄嫩粉的花苞,映着水蓝色的天空和几朵淡淡的轻云,你闻到暖阳的气息和草木的香味儿。你觉得大自然,是不是美好的?

当你在记录片里看到支教的乡村老师,为了更多的孩子能够接受教育,而艰难度日的时候,你流下感动的眼泪。你觉得人性,是不是闪着纯良美丽的光辉?

所以,此刻你知道”什么是美“的答案了么?

这些“高效率、满足感、舒适的、愉悦的、安全的、感动的”等等享受的状态,就是美。

让你产生“美”的体验的,是这些积极良好的状态和体验。我们常说,艺术来源于生活,这些产生美感的状态,是在符合人和自然规律的状态下才产生的,所以在设计中,所谓“美感”,并不是飘忽不定的玄学,而是有规可循、有理可依的科学。

下面就用几个案例,来解释一下为什么UI设计是一种,创造美的科学。

第1个例子:乘电梯 - 关于空间感/呼吸感

大家都乘坐过电梯吧!回忆一下“拥挤的电梯”和“不拥挤的电梯”,各自会带给你什么感受?

图片来自网络

左:拥挤的电梯:空间剩余少,氧气不足、活动不便,导致气息不畅、情绪紧张、焦虑。

右:不拥挤的电梯:足够且合适的空间,给人生理和心理上的舒适感。

从这两个场景中,我们可以充分理解到“适度空间”对人感受的重要性。这一原理体现在艺术和设计中,也可以成为“空间感、呼吸感”。比如,中国水墨画中的“留白”。

吴冠中先生的水墨画

延伸到UI设计中的例子:按钮文字与边缘的间距留白处理:

图示 by 劲草蒹葭

一张图小结一下:

来自生活的科学美1:空间感/呼吸感/留白

第2个例子:寻找尾号为1102的记录表 - 关于规律和秩序

如果是下图,把表格混乱的洒落,在你在其中寻找,你会是什么情绪和心理状态呢?

混乱的手册:需要逐一翻看,散乱寻找,导致混乱、烦躁、没有头绪的焦灼感。

如果换做这样,将表格按序号由小到大排布摆放好,让你去找尾号1102那张呢?

按序号排列的手册:按数字由小到大迅速找到1102。高效、顺畅、满足的成就感。

看着这两堆表格,你的情绪应该有着明显的不同。合理的规律和秩序能够提高效率、符合人正常的思维逻辑,能够获得更好的体验,这一点也同样体现在视觉艺术上,比如这张风景照片:

图片来自unsplash网站

整片的草地,或者是凹凸的山峦,并不足以让我们驻足或赞叹,但当草地有了光影明暗的起伏、山峦有了节奏和规律的线条,画面才显壮丽和神奇。看山的心情是平静的,而看山川是澎湃的,群而又律,则成川。

引申到UI设计中,规律且一致的形状,会在视觉心理上更能体现,或饱满、或自在的美感:

图示来自“网易音乐”首页截屏

一张图小结一下:

来自生活的科学美2:规律感/秩序性


第3个例子:宣布考试内容 - 层次感/关系性

下周要考试,如果我搬出下图中的所有书,告诉你:这些就是考试的内容,复习吧!

你的内心一定不要太奔溃呦~

图片来自unsplash网站

先别忙着哭。如果我再告诉你:最下面的几摞,是同类备选书籍,选或不选都随你;中间几摞呢,是扩展性读物,不作为考试核心考点;上面的几本呢,是可以带入考场开卷翻看的;而最上面的一本,才是考试要考的核心内容。

是不是开心了点呢?

图片来自unsplash网站

还有更开心的呢!我拿出上面那边告诉你:这一本中,只有每章节的第一页,划红线的,才是这本书里的重点考点,其他的仅作为了解就好。

此刻,是不是豁然开朗~~~~~

图片来自unsplash网站

如果把全部书搬出来,说都是参考书,大量信息而没有重点的状态,会让人产生:迷茫、不安、压力和苦恼。

划分书籍的参考重要和次要程度,能够让人获得:轻松、自信、效率、愉快、掌控感等美好的感受。

中国的传统纹样图案,就很好的利用了这一原理,复杂的线条依照主次来疏密有致的排布,花为主体叶为辅助,展现出一个图案的层次性;多而杂的叶子中,通过卷曲方向和疏密程度分出主要叶片和次要叶片,让图案虽然密集丰富,却也简洁易读。

图片来自新浪微博

延伸到UI界面设计中,主要体现在层级关系的区分和表达上:

图示来自简书截图

小结一下:

来自生活的科学美3:层次感/关系性


第4个例子:购物 - 精致感/细节性

关于购物,让我们来个真假大比拼吧~

当你想买个名牌包包,让你嫌弃仿品,欣赏正品的原因会是什么呢?


正品:轮廓清晰、雕刻均匀的logo(图片来自网络)
正品:方向、长度、线条 都精细一致的接缝压脚;品质考究的拉链,造型清晰的线条。(图片来自网络)

正品的感受:细节感人、喜欢、踏实、品质、尊重、荣耀、满足感或成就感。

仿品的感受:粗糙、嫌弃、凑合糊弄、欺骗、轻视,低质量、愤怒感或失落感。

同样,在绘画艺术中,要拥有打动人的感染力,细节的精致刻画是不二法宝:

一双睫毛层次分明、瞳孔倒影清澈,细节丰富、精致细腻。(图片来自新浪微博)

延伸到UI设计中,细节的讲究和门道,也是打动人的关键。

右图icon来自站酷作者:黑桃K

小结一下:

来自生活的科学美4:层次感/关系性


第5个例子:红酒与礼服 - 归属感/匹配性

假设,你的男神或女神要给你斟上一杯红酒,你会端起什么样的容器呢?

懂品味的你,应该是这个选择:

图片来自unsplash网站

如果你用这样的容器装红酒。。。

Excuse me?该不会,左边是酱油,右边是中药吧。。。

图片DIY by 劲草蒹葭

再脑补一个场景:

如果马上召开运动会,你的伙伴穿这样的着装出场,你会作何感想?

图片来自网络

如果,不是运动会,是去参加一个高级晚宴呢?

图片来自网络

礼服搭配运动场:奇怪、滑稽、别扭、蠢笨、愚蠢、不适的违和感。

礼服搭配高端晚宴:优雅、品味、自信、踏实、安心,自然和谐的归属和契合感。

这就是“得体和适合”带给我们的感受,最好的可能不是美,但最得体的,会美。

视觉传达设计中,也蕴含着这个原理。比如无印良品的海报设计,无论色彩、质感、构图、还是字体设计,海报极简、自然、家居、强调舒适感的风格,就体现出品牌的禅意和自然极简主义的气质和调性。

图片来自网络

延伸到UI设计中,色彩样式的情绪和大众认知含义,要符合产品本身的属性或用户习惯,安全和工具属性极高的支付宝,蓝色更能产生放心和冷静的情绪,让人潜意识中知道它作为金融是安全的,它作为工具是高效率的。

如果换上淘宝橙,有差强人意了,尽管淘宝色是品牌血脉:

图片来自网络

小结一下:

来自生活的科学美5:归属感/匹配性

OK,通过举例,大家是不是对“设计来源于生活”,有更直观的理解了呢~~

总结一下,这些来自生活中的,能够产生美感的原理,分别是:

√ 空间/留白    √ 规律/秩序    √ 层次/关系    √ 精致/细节    √ 归属/匹配

以上”“这些体现在UI或视觉设计上的原理,都不是随主观评价或个人喜好创造出来的,而是由生活中的客观现象和生活规律而产生的。这也就是为什么,在本文起始,会倡导说”UI设计是一门科学“。

对于科学,一句话的参考定义是:科学是具体的事物及其客观规则。而UI设计恰恰就是围绕着“产品界面”这个具体事物、按照“用户的行为与心理”规则而展开的一项创造性活动。所以,在UI的本质是科学

科学主要内容是具体的世界观与具体的方法。希望大家能够理解这种设计观,并能够将其方法合理的运用,合理的创造美。

接下来的几篇文章中,我将从“图形与界面空间留白、UI界面层级分析、字体排版、图形图片处理、界面配色”几个方面,详细来讲解,如何运用以上原则,科学的分析和设计UI界面。

感谢喜欢设计的小伙伴们持续关注~


通过本文,你掌握“因好用而好看”的设计思想了吗?可以试着分析一下你手上的UI设计,它现在是科学的么?有哪些可以改善的地方呢?

欢迎留下你的思考或建议,与大家一起进步。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345