我们的动态

永不畏惧创新,高端火狐体育网页定制,标新立异来自濮阳天天互联助您在网络领域超越同行者。

UI设计师必须知道的四大设计原则

这些原则来自专业设计师在日常工作中的经验积累、对作品集的分析、Facebook和ins上的设计海报、油管上的短视频等等。

 

很多朋友问我,怎么做才能让设计出来的东西看着会更好呢?俗话说得好“授人以鱼,不如授之以渔”,所以比起直接帮你们设计,我更愿意告诉你们一些有价值的设计原则,这样的话,当你们再遇到同类问题时,你们可以运用这些原则更好的解决问题。时间长了,我发现我一直在给设计师们重复的建议,于是我总结出了以下四个UI设计法则。

 

 

http://resource.hellofont.cn/uploadImg/article/1559530434_584740.jpeg

对比

♦ 确保所有元素之间有足够的对比   ♦

 

为什么呢?因为有些设计元素之间只有一点点不同,在差异极小的时候,很容易形成一种类似恐怖谷的感觉。看起来总是觉得不太舒服、难以理解,这肯定不是我们想要的效果,所以设计元素要么完全相同,要么明显不同。

 

 

1、颜色:

 

深色文字用在浅色底上,反之亦然

例:不要把浅灰色放在中灰色背景上,不要把浅粉色和浅蓝色搭配在一起;这样不仅不便观看,也很不协调

http://resource.hellofont.cn/uploadImg/article/1559530434_949621.png

2、尺寸:

 

将 大小完全相同或者 大小差异明显的元素放在一起

例:不要把32pt和36pt的文本放在一起;18pt和36pt文本放在一起会更合适

 

http://resource.hellofont.cn/uploadImg/article/1559530434_714102.png

3、字重:

 

尺寸相同时,要将 粗细完全相同 或者 粗细差异明显 的元素放在一起

例:不要把某种字体的粗体和黑体放在一起,因为它们看起来太相似了;细体和粗体搭配起来会更好

 

http://resource.hellofont.cn/uploadImg/article/1559530434_790933.png

4、字体样式:不要把两个斜体字(或衬线体)放在一起

例:不要把“Times New Roman”和“Georgia”放在一起,因为它们看起来太像了;要搭配不同风格的字体

 

http://resource.hellofont.cn/uploadImg/article/1559530434_544204.png

 

 

http://resource.hellofont.cn/uploadImg/article/1559530434_637065.jpeg

一致性

♦ 确保相似的元素表现形式一致  ♦

 

1、作品通过保持元素的一致性才能保持简洁,应该让用户把注意力集中在设计亮点上,而不是去关注那些无关紧要的东西。

 

2、一致性会增加用户的信任感,让作品看起来是经过精心设计的,而不是随便拼凑在一起的。(需要注意的地方有:字体,色调,网格,对齐,装饰元素、风格等等)

 

http://resource.hellofont.cn/uploadImg/article/1559530434_226206.png

当你在创作系列作品时,要让它们保持风格一致,比如Youtube的视频展示图,或者Medium的文章封面,设计风格都应该保持一致。换句话说,你的作品需要有你自己的风格。

 

 

http://resource.hellofont.cn/uploadImg/article/1559530434_765777.jpeg

奥卡姆剃刀原理

♦ 减少视觉噪声  ♦

 

设计师们总是在强调少即是多。为什么呢?因为人类的大脑的容积是有限的,很难在超负荷的状态下处理信息和做决定,所以简洁的元素更适合大脑接收信息。(元素包括字体、颜色、阴影、结构、笔画、图标、图片等等)

 

奥卡姆剃刀原理可以应用到所有的事中。

比方说,如果只需要用2个元素就能完成某件事,就不要用3个元素;如果某件事可以用10个元素来完成,就不要用20个!

 

http://resource.hellofont.cn/uploadImg/article/1559530434_333158.png

 

 

http://resource.hellofont.cn/uploadImg/article/1559530434_639159.jpeg

空间

♦ 事物所处的位置决定了它是否是关键  ♦

 

为什么位置很重要? 因为元素摆放的位置、元素周围的留白,都会影响设计的复杂性。因此,更好的位置摆放会使产品看起来更加赏心悦目,也更加易于交互。

 

设计中的空间使用表现在这3个方面:

 

1、亲密原则=相关性

 

与其他元素相比,彼此更接近的元素,会被认为存在更多的关联。这个原则很重要,我感觉它常常被专业的设计师忽视。

这个原则有多种实际的案例,例如:

·         行间距应该大于字间距;同样的,段落间距也应该比行间距要更大

http://resource.hellofont.cn/uploadImg/article/1559530435_7349810.png

·         设计元素之间的间距,应小于这些元素与外部边缘的间距

http://resource.hellofont.cn/uploadImg/article/1559530435_4786911.png

·         元素的相关说明信息应该位于相关的元素附近

http://resource.hellofont.cn/uploadImg/article/1559530435_3734712.png

 

2. 负空间

 

结合奥卡姆剃刀原则,尽可能的为你的设计提供负空间,使它们看起来更整齐且、意义更明显。如果将太多元素放在有限的空间内,就好像同时听三首歌一样,听到最后什么都听不到。

 

http://resource.hellofont.cn/uploadImg/article/1559530435_1402613.png

看看Apple的火狐体育网页,人们可以非常清楚地了解所表达的内容

 

3.重要性和秩序

这个原则是非常常见的,但我觉得还是要在这里强调一下!

越重要的元素,越应该放在第一位,或者让它们占据最大的空间;并且用一系列连续的事物来表达出秩序感。

 

 

最后

恭喜你!如果你在做所有的设计过程中遵循了以上这些原则,那么按照行业标准,这是一个好作品了。

 

 

注释:

1、恐怖谷:恐怖谷理论是关于人类对机器人和非人类物体的感觉的假设;其说明了当机器人与人类相似程度超过一定程度的时候,人类对他们的反应便会突然变得极其反感恐惧。本文中所使用的恐怖谷说法是形容设计中元素之间有极高的相似度,让用户产生不舒适感。

2、奥卡姆剃刀定理:这个原理称为“如无必要,勿增实体”,即“简单有效原理”。