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

2021-04-02 09:57:17 浏览数 (1)

四大基本原则

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.暖色与冷色 暖色(红色或黄色)冷色(蓝色) 冷色更趋于做背景

更多技巧提示

建立包装品牌

png

0 人点赞