《写给大家看的设计书》- UI设计必看

四大基本原则

1.对比 避免界面中的元素太过相同。如果元素不相同，那就干脆让他们截然不同。让界面引人注目，对比是一个重要因素 2.重复 让设计中的视觉要素在整个作品中重复出现。重复颜色、形状、材质、空间关系、线宽、大小和图片等。 3.对齐 任何东西不在界面中随意安放，每个元素与页面上其他元素有某种世界联系。建立清晰、精巧和整体性的外观 4、亲密性 彼此相关的项应当互相靠近，归组在一起。如果多项之间有很强的亲密性，将它们视为一个视觉单元，而不是鼓励的元素。 这样有助于建立组织信息，减少混乱，为读者提供清晰结构

亲密性

1.将相关的项组织在一起，指物理位置相互靠近，这样相关的项将被看做一个整体。

2.要依据元素之间的关联性来判断亲密性，元素在内容上有关联性，那么在视觉安排上就要有关联性

3.空白可以表达关系，通过空白可以将有关联的内容分成几个组。

4.亲密性原则需要我们更加关注空间，通过合理利用空白让信息之间进行分类。

小结： 如果项之间存在亲密性，则将他们视为一个视觉单元，而不是多个孤立的元素。要有意的注意到阅读的顺序，视线如何移动，从哪里开始沿着怎样的路线，在哪里结束。

注意问题： 避免界面上出现过多的孤立元素 不属同一组的元素不要建立联系！如果无关，则要分开 不要仅仅因为空白将元素放在角落或中央

对齐

1.原则是任何元素都不能随意安放，每一项与某个内容建立某种视觉联系。 2.页面上只使用一种对齐方式 3.我们的大脑喜欢看有序的东西，这会给人一种平静、安全的感觉。降低大脑处理信息的难度，有助于信息的表达。

图片.png

上图外观强差人意，但是没有对齐

图片.png

图片.png

上图没有明确的右边界，但是将标题居中，看起来会非常杂乱

图片.png

上图以左边界为明确基线，标题和文字都以此基线为准。

图1.png

图2.png

图1虽然在左边有一条明确的基线，但是在右边与图片之间有部分空白，这部分的形状很难看，这部分空白将左边的文字和右边的图片分开 现在图片在左边使基线按照图片右侧为准，这样更加明确清晰

重复

1.设计的某些方面要在整个作品中重复 2.重复的宗旨是将整个作品联系在一起，提供统一性 3.根本目的是统一，增强视觉效果。

避免 过多的使用同一个重复元素

对比

1.页面之间的不同元素有对比效果，以达到吸引读者的对比效果

图片.png

图片.png

图片.png

图片.png

去掉居中对齐，用其他对齐方式 找出最重要的东西加以强调 把最重要的东西放在一起，这样读者就不会错过重点 将有逻辑的东西归为一组，合理利用空间，将各项分开或联系起来

颜色运用

色轮

图片.png

图片.png

图片.png

颜色关系

1.互补：色轮上相对的颜色为互补色，最佳的搭配是一种作为主色，一种用于强调

图片.png

2.三色组：彼此等距的三只种颜色会形成让人愉悦的三色组

图片.png

3.分裂互补三色组 从色轮一边选择一种颜色，再找出它的互补色，不过直接使用，而是使用它两侧的颜色

图片.png

4.类似色 由色轮上相邻的颜色组成

图片.png

5.暗色与亮色 纯色就是色调，向色调添加黑色或者白色，可大幅拓展色轮。添加黑色就是暗色，添加白色就是亮色。

图片.png

6.单色 由一种色调，及对应的多种亮色和暗色组成。

图片.png

7.色质 色质是指某种颜色的特定明暗度、深浅度或色调。如果色质相近，看上去会模糊不清，对比太微弱。

图片.png

8.暖色与冷色 暖色（红色或黄色）冷色（蓝色） 冷色更趋于做背景

更多技巧提示

建立包装品牌