不卖关子，在展开观点之前，先告诉大家重要原则是什么：
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设计，它现在是科学的么？有哪些可以改善的地方呢？
欢迎留下你的思考或建议，与大家一起进步。
网友评论