UI界面设计 ·

创造视觉上更美UI的7个设计规则

平面设计、界面设计本应该是一个化繁为简,解决问题的工具,但是我们经常通过设计把问题变得更加复杂,为了设计而设计。所以,25学堂整理了7条设计规则,帮助ui设计师做出更好的设计。

 

#1 极简主义,尽可能的留白

设计师喜欢留白,但是客户想填满。。。

留白是构成一个好的视觉布局重要元素,但也是最容易被忽视使用的元素。通常情况下,留白意味着浪费屏幕空间。但实际上,留白对于设计更加简化的布局非常有用,因为这样可以让用户专注他们看的内容。

来看一个留白使用得不错的例子:

 

#2 微交互设计

推动用户参与网站/网络应用/移动应用的方法有很多,但是经常被忽视的一点就是“微交互”。

微交互的基本原则是:行动-反应。在真实物理环境中,每个动作都会有相应的反应。所以这个也适用于设计,这样的小交互设计能让界面看起来更加有生机和活力。

来看一下哪些地方需要用到微交互

1,打开/关闭

2,调整设置偏好

3,上传和下载

4,通知

5,社交媒体分享

6,下拉菜单和隐藏菜单

7,突出显示CTA号召性用语

修改文本的色彩代码,文本的颜色跟着改变。

收到新邮件时,邮件计数器会微妙地增加。

 

#3 不知道怎么选择颜色时,请使用安静的颜色

我记得我制作的第一个UI设计方案是黑色系,从那以后,我对黑暗色调就有来一种偏好。我的大多数设计都是暗色调的。黑色能够为设计赋予了一种其它颜色无法替代的优雅。

有些设计方案,在开始设计之前就必须确定设计的配色方案,这里有一个诀窍,那就是使用柔和的颜色。

柔和的颜色指南

安静的颜色让设计师在不违背极简主义的原则下,在页面内创建出深度。用户可以很容易地在深度较浅的蓝色之上使用柔和的蓝色,让页面有层次感,而不需要只使用阴影的层次结构效果。

 

#4 光是来自顶端

阴影为用户查找界面元素提供了宝贵的线索。

设计师们最常犯的错误就是忘记了光线是从顶端照下来的。照亮了顶部,并在下面有投影,物体的顶部较亮,底部较暗。

我们的屏幕是平面的,但是我们投入很了精力去让所有的内容都能以3D的效果呈现出来。即使在平面设计、界面设计,我们也一直尝试着不破坏扁平设计的原则下融入3D的元素:

 

#5 为每个页面添加一个聚焦点

突出重点是吸引用户注意特定设计元素的不错策略。这可能涉及到内容、图像、链接、按钮等方面。在大多数的设计领域,比如建筑设计、景观设计、时尚设计等,都会使用这个策略,突出重点都是非常有效的。

平面设计师和摄影师广泛使用 “三分原则”来创造艺术和设计上的重点内容。

在上图中,突出重点是通过颜色来实现的。

 

#6 让用户感觉到他们自己很聪明

设计不应该是复杂的。当用户能够预测某个事物的设计行为时,他们会感到很开心,因为这让他们认识到自己很聪明。

用户喜欢能让他们感到自己聪明的产品和服务。他们花费的宝贵注意力,时间和金钱越值得,他们就会觉得自己更聪明。用户在与您的产品互动时感觉越聪明,他们就越会喜欢上您的产品。

下面图片的小例子。相比左边的盐和胡椒瓶,用户更喜欢右边的。因为用户更容易区分哪个是盐,哪个是胡椒粉。

界面设计时,如果汉堡包图标是用来表示来自左侧的菜单,则不要用它来表示配置文件的详细信息。

 

#7 保持一致

一致性的设计是直观的设计。

当设计是一致时,人们可以毫无压力的将原有认识迁移到新的环境中,并快速学习新的事物。这样,他们可以专注于执行任务,而不是花大量的时间去学习新的UI界面的。

在整个设计系统中使用熟悉的设计模式是保持一致的最佳方法。如果一个网站有两个页面都是显示博客内容的,那么两个页面的设计应该具有共通性,这样用户看到新的页面时,能够明白是什么含义。25学堂改版后,文章列表页采用了博客排列,而设计素材资源则采用了卡片式排列,让用户一下就能明白哪些是文章哪些是资源。

了解和实施设计一致性的真正有用的指南请参考:https://www.uxpin.com/studio/ebooks/consistency-ui-design-creativity/

参与评论