UI中的平面设计原则

很多设计师在大学时期都是学习绘画，动画，或者视觉传达类的学科，大学里一般也没有UI的专门学科。因为人机界面交互，用户体验，都是非常综合的领域，需要方方面面的知识。

我以前做游戏时，UI更多是凭借视觉感觉。现在做互联网产品时，UI更像是一种接近工业的学科。它不是一张海报，一张原画，或者是动画短片，强烈的艺术风格可以说明一切。UI在互联网十几年的发展下，从电脑软件界面，到手机移动界面，已经形成了标准化视觉。用户已经习惯，设计师不必造轮子。抛开交互，在阅读体验上，比如，信息的排版，网格系统，都需要向已经发展的很成熟的平面设计学习。

搜一搜UI，就像工厂里的零件，这些基本的零件本身的质量早已经有了行业标准，通过各种官方规范文档就可以了解。

这些零件该如何组装起来，让它可以舒服的被人使用；以及如何打造出可以给人留下印象的东西。这是设计师需要主要思考的地方。

无论是在什么客户端上，无论是什么类型的UI，平面设计中基本的，通用的准则，是每个设计师都需要具备的知识。

UI设计 首先要保证信息的清晰呈现，让信息易读，让操作易用。
其次才是在信息清晰呈现的基础上，加入视觉设计，增加表现力。让UI提现产品的气质，风格或者文化。

这个主次关系不可以颠倒。

---

同时，如果你看过一些设计书，就会知道在平面设计领域的四大原则：

• 亲密性
• 对齐
• 重复
• 对比

简要说明下这四个原则：

亲密性

彼此相关的项应当靠近，归组在一起，组成视觉单元
有助于组织信息，减少混乱，为阅读者呈现清晰的结构

对齐

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。
能从排版中看到虚拟的“线”和“边框”

对齐

表格的对齐原则

重复

视觉要素重复出现，可以重复颜色，形状，材质，空间关系，线宽，字体，大小和图片等等。
增加条理性和统一性。

重复代表是经过思考的重复

对比

对比的基本思想是，要避免页面上的元素太过相似。如果元素不相同，那就让他们截然不同。
在需要引人注目的地方，一定要加强对比。

字号的对比

色相对比 如互补色对比

同样也可使用邻近色，和对比色对比，同一颜色的明度和纯度对比。不多加赘述。

排版中的实例

在实际排版中，尤其是文字的排版，有一个很重要的概念就是注意行高。

在前端开发中，文字都有默认的行高数值。在使用PS等设计工具时，设计师容易忽略这个数值的变化， 当文字字号变大时，其行高也要相应的变化。（PS默认的行高多为「自动」，距离较小。当文本内容较多时，需要手动将行高调整到字号的1.5~2倍）

行高与行间距

如下图，当我们拿到最左边这样的文本内容后，虽然它已经给标题加粗处理了，但是仍然不易阅读，所以我们需要按照亲密性原则，讲文本内容分组，调大它们之间的距离。

同时，将加大标题字号，加强对比。（此时比较重要的是，当文字字号变大时，文字行高也变大了，所以我们要相应的加大它的行间距） 这样就是一个相对舒适的排版了。
也可以考虑增加一些缩进来加强从属关系。

文字排版中的间距

另一组实例

以下是一个抽奖转盘的活动规则页面。

某活动规则页面案例

• 首先这种长文本一般不适用于第二张图的居中，阅读视线会非常忙乱。
• 第三张图是公司的实习生交给我的成品，当时看了强迫症就要犯。文字没有分组，同时各种不对齐，（另外乱打AAABBB是很不好的习惯，因为有时候字间距和标点也是要考虑的）
• 第四张图调整了文字和对齐和行间距，阅读体验好了很多。
• 第五张图则更加加强了标题的对比，弱化分割线，利用文本的分组和对比来做区分，更好一步。

文本排布过于松散平均时，可按照亲密性缩小间距，上下留白加大，形成视觉单元

亲密性与视觉单元

利用移动端8px原则，设置网格

网格系统有秩序之美，在传统书籍平面中，网格是排版的基础。而在界面设计中，我们可以将网格设置成我们需要的像素单元，实现有规律的对齐。

8px原理由来
1.由于IOS技术开发是以320*480px为标准开发的，所以设定此尺寸为1，算出各个尺寸的比例。
2.各个尺寸比例的值乘以4时，各个尺寸都能够满足是整数，且保证开发时不会模糊。
3.设计稿尺寸为开发尺寸的2倍，所以我们选择为最小尺寸单位。

8px基准

利用网格布局

字号推荐

相比网页而言，手机屏幕小，信息集中。所以字号不宜过小，而且现在也有流行大字的趋势。很多新闻类APP的内容也已经有杂志化的走向，标题文字都会相应加大。
还是那句强调，文字加大时，间距一定也要加大。要留足空间。

再看一组综合实例

排版细节变化的设计思路

• 图1乍一眼看没什么毛病，但是仔细看，排版间距略平均，标题无对比，阅读视线无重点。
• 图2 调整了间距亲密关系，让新闻列表区域作为整体，靠的更近，同时加强了标题文字的颜色对比。
• 图3 进一步加强文字对比，弱化板块标题，将视线重点留在 “晨报”和新闻标题上。同时将新闻列表间距更加靠近。
• 图4 为了使界面排版更加简洁，将缩略图边距去掉，并放大图片尺寸，图片所带来的垂直空间，可以帮助标题文本拉出空间，不至于像图3过度拥挤。

设计中同样可以利用网格。快速完成准确的布局。然后在此基础上再做进一步的需求化，风格化调整。

在此主要分享了一些最基本的平面设计的小注意点，这些细节看似简单易懂，但是实际设计中很容易被忽略无视，新人设计师更是会信马由缰，全凭感觉。UI设计不是学几个软件，抄几个界面，做几个ICON就可以了。
仅仅从平面视觉的易读性来讲，需要学习平面设计原理；
另一个层面，为了易用性，在产品需求，人机交互，用户感官心理方面需要不断研究；
进一步实现艺术和创意的表现，体现产品的风格，品牌和文化。

扯两句名言：
设计是为了解决问题；
真正的设计并非令人从表象察觉到有何不同，而在于无形中从设计上受益。

当然，我们不是要被这些规则限死，从而让所有的设计都看起来一样。
而是在打破规则之前，首先明白规则是什么。