作为一个开发人员,无论是平时自己做一些小软件,还是在一个小团队中工作,
难免会遇到需要自己设计UI的时候,因为专业的设计师总是太忙而不能及时的提供帮助。
这么多年下来,一边从自己惨不忍睹的设计中吸取教训,一边观察别人优秀的UI页面,
总结了几个非专业设计人员切实可用的设计原则,包括:
一致性原则,简洁性原则,对比性原则和空间布局的原则。
如果能遵循这些简单的步骤,保证您的设计会看起来更好。
对比
确保设计中的所有元素之间具备充分的对比度。
为什么呢?因为当元素间的差异微乎其微,却又不足以形成鲜明对比时,对人眼来说显得异常古怪、令人不适,甚至难以捉摸。
这显然不是我们在设计中希望看到的效果。
因此,您的设计元素要么完全相同,要么就截然不同,以形成鲜明的对比。
对比度问题主要体现在以下四个方面:
颜色(color)
在浅色的背景上内容用深色,反之亦然。
比如:切勿使用灰色搭配稍深的灰色或浅粉色搭配浅蓝色的组合 - 它们极难阅读。
大小(size)
把大小完全相同 或大小相差很大 的元素放在一起。
比如:不要将 32pt
和 36pt
文本行并排放置。而18pt
和 36pt
可以很好地协同工作。
粗细(weight)
与大小相同,仅将粗细完全相同或粗细显著不同的元素放在一起。
比如:不要将同一字体的Bold
和 Black+Weight
(设置颜色+粗细) 放在一起 - 因为它们看起来太相似。
而同一字体的Light
和Bold
则可以很好地结合在一起。
风格
不要将一种斜体类型放在另一种斜体类型旁边,或者将一种衬线字体放在另一种衬线字体旁边。
而是要将不同的事物结合起来。
比如:不要将"Times New Roman
"和"Georgia
"放在一起------它们看起来太相似了。
而是要组合风格截然不同的字体。
一致性
一致性就是确保设计中相似的元素以统一、协调的方式呈现。
为何一致性如此重要呢?
首先,保持设计的一致性有助于简化复杂性,使用户能够更轻松地理解和导航。
当元素以可预测和熟悉的方式出现时,人们可以更容易地聚焦于设计的核心要素,而不会被不断变化和不一致的细节所分散注意力。
其次,一致性在设计中建立了信任感。
它传递出一个清晰的信息:这个设计是经过深思熟虑和精心策划的,而非随意拼凑而成。
这种一致性不仅提升了设计的整体美感,还增强了用户对品牌的认知和忠诚度。
因此,在设计中,我们应始终遵循一致性原则,确保相似的元素在外观、功能和交互方式上保持统一,以创造更加和谐、易于理解和值得信赖的用户体验。
需要保持一致性的包括字体,颜色,网格,装饰的元素等等。
奥卡姆剃刀(简洁性)
在设计过程中,力求精简元素的使用是至关重要的。
原因何在?人类的大脑在面对过多信息输入时,处理并做出决策的能力会受到限制。
因此,我们应尽量减少不必要的装饰性元素,如字体、颜色、阴影、框架、笔画、图标和图案等等。
将奥卡姆剃刀原理应用于设计的各个方面是一种明智的选择。
当两个元素足以实现目标时,无需使用三个;当十个元素就能完成任务时,二十个就显得冗余了。
简而言之,设计的精髓在于以最少的元素达到最佳的效果。
空间
事物的布局方式不仅仅关乎美感,更深层次地,它传递了关于事物本质和意图的元信息,这种布局的重要性不容忽视。
通过审慎地决定元素的摆放和它们之间的空间关系,能够降低视觉上的复杂性,进而打造出既悦目又易于互动的空间布局。
为了在设计中巧妙地运用空间表达特定的意义,以下三个要点值得特别关注:
邻近的=相关的
彼此之间靠的越近的元素被认为越相关,这是最重要的,也是最容易被忽视的。
比如,段落之间应当留出空间以区分:
页面中的主要元素应当与边缘之间留出间隔。
标签和它的支持信息应当放在相邻的地方。
负空间
负空间(也被称为"空白空间"或"虚空间")指的是设计作品中没有被任何元素占据的空间。
它可以是周围的空白、两个设计元素之间的间隙,或者是元素内部的空旷部分。
尽管它看起来可能只是简单的空白,但实际上,负空间在设计中扮演着非常重要的角色。
它不仅可以提升设计的视觉效果,还可以帮助传达设计的主题和信息。
比如下面这个Apple网站的设计,一眼就能看出销售的是什么东西。
重要性和顺序
这是一个常识性的问题,相信大家都了解。
也就是,最重要的事情,放在第一位,或让它们占据最多的空间。
总结
最后,想说的是,虽然上面的原则非常简单,如果都能遵循的话,那么你的UI界面很可能看起来效果会非常好。
如果成本允许的话,请一个专业的设计师也不错!
注 :本文翻译自:Fundamental design principles for non-designers
内容没有直译,而是根据自己的理解和经验做了一些删减和调整,希望阅读原文可以直接点开上面的链接。