非专业设计师的设计原则

作为一个开发人员,无论是平时自己做一些小软件,还是在一个小团队中工作,

难免会遇到需要自己设计UI的时候,因为专业的设计师总是太忙而不能及时的提供帮助。

这么多年下来,一边从自己惨不忍睹的设计中吸取教训,一边观察别人优秀的UI页面,

总结了几个非专业设计人员切实可用的设计原则,包括:

一致性原则,简洁性原则,对比性原则和空间布局的原则。

如果能遵循这些简单的步骤,保证您的设计会看起来更好。

对比

确保设计中的所有元素之间具备充分的对比度。

为什么呢?因为当元素间的差异微乎其微,却又不足以形成鲜明对比时,对人眼来说显得异常古怪、令人不适,甚至难以捉摸。

这显然不是我们在设计中希望看到的效果。

因此,您的设计元素要么完全相同,要么就截然不同,以形成鲜明的对比。

对比度问题主要体现在以下四个方面:

颜色(color)

在浅色的背景上内容用深色,反之亦然。

比如:切勿使用灰色搭配稍深的灰色或浅粉色搭配浅蓝色的组合 - 它们极难阅读。

大小(size)

把大小完全相同 或大小相差很大 的元素放在一起。

比如:不要将 32pt36pt 文本行并排放置。而18pt36pt 可以很好地协同工作。

粗细(weight)

与大小相同,仅将粗细完全相同或粗细显著不同的元素放在一起。

比如:不要将同一字体的BoldBlack+Weight(设置颜色+粗细) 放在一起 - 因为它们看起来太相似。

而同一字体的LightBold则可以很好地结合在一起。

风格

不要将一种斜体类型放在另一种斜体类型旁边,或者将一种衬线字体放在另一种衬线字体旁边。

而是要将不同的事物结合起来。

比如:不要将"Times New Roman"和"Georgia"放在一起------它们看起来太相似了。

而是要组合风格截然不同的字体。

一致性

一致性就是确保设计中相似的元素以统一、协调的方式呈现。

为何一致性如此重要呢?

首先,保持设计的一致性有助于简化复杂性,使用户能够更轻松地理解和导航。

当元素以可预测和熟悉的方式出现时,人们可以更容易地聚焦于设计的核心要素,而不会被不断变化和不一致的细节所分散注意力。

其次,一致性在设计中建立了信任感。

它传递出一个清晰的信息:这个设计是经过深思熟虑和精心策划的,而非随意拼凑而成。

这种一致性不仅提升了设计的整体美感,还增强了用户对品牌的认知和忠诚度。

因此,在设计中,我们应始终遵循一致性原则,确保相似的元素在外观、功能和交互方式上保持统一,以创造更加和谐、易于理解和值得信赖的用户体验。

需要保持一致性的包括字体,颜色,网格,装饰的元素等等。

奥卡姆剃刀(简洁性)

在设计过程中,力求精简元素的使用是至关重要的。

原因何在?人类的大脑在面对过多信息输入时,处理并做出决策的能力会受到限制。

因此,我们应尽量减少不必要的装饰性元素,如字体、颜色、阴影、框架、笔画、图标和图案等等。

将奥卡姆剃刀原理应用于设计的各个方面是一种明智的选择。

当两个元素足以实现目标时,无需使用三个;当十个元素就能完成任务时,二十个就显得冗余了。

简而言之,设计的精髓在于以最少的元素达到最佳的效果。

空间

事物的布局方式不仅仅关乎美感,更深层次地,它传递了关于事物本质和意图的元信息,这种布局的重要性不容忽视。

通过审慎地决定元素的摆放和它们之间的空间关系,能够降低视觉上的复杂性,进而打造出既悦目又易于互动的空间布局。

为了在设计中巧妙地运用空间表达特定的意义,以下三个要点值得特别关注:

邻近的=相关的

彼此之间靠的越近的元素被认为越相关,这是最重要的,也是最容易被忽视的。

比如,段落之间应当留出空间以区分:

页面中的主要元素应当与边缘之间留出间隔。

标签和它的支持信息应当放在相邻的地方。

负空间

负空间(也被称为"空白空间"或"虚空间")指的是设计作品中没有被任何元素占据的空间。

它可以是周围的空白、两个设计元素之间的间隙,或者是元素内部的空旷部分。

尽管它看起来可能只是简单的空白,但实际上,负空间在设计中扮演着非常重要的角色。

它不仅可以提升设计的视觉效果,还可以帮助传达设计的主题和信息。

比如下面这个Apple网站的设计,一眼就能看出销售的是什么东西。

重要性和顺序

这是一个常识性的问题,相信大家都了解。

也就是,最重要的事情,放在第一位,或让它们占据最多的空间。

总结

最后,想说的是,虽然上面的原则非常简单,如果都能遵循的话,那么你的UI界面很可能看起来效果会非常好。

如果成本允许的话,请一个专业的设计师也不错!

:本文翻译自:Fundamental design principles for non-designers

内容没有直译,而是根据自己的理解和经验做了一些删减和调整,希望阅读原文可以直接点开上面的链接。

相关推荐
云草桑2 天前
WPF UI 界面布局 魔术棒 文字笔记识别 技能提升 布局功能扩展与自定义 继承Panel的对象,测量与排列 系列七
ui·wpf·设计·布局·版式设计
Qq2355614 天前
3ds Max渲染曝光过度怎么办?
3d·3dsmax·vr·设计·效果图
德育处主任5 天前
AI绘画:电子羊被薅秃了?没事,有免费的平替!
人工智能·aigc·设计
MobotStone6 天前
架构之道:合作与分工的核心架构模式
后端·架构·设计
肖哥弹架构15 天前
@RequestParam 和 @PathVariable偏好列出推荐图书案例
java·后端·设计
MobotStone18 天前
架构之道:避免依赖不稳定模块
架构·设计
襄垣22 天前
沸沸扬扬的Stable Diffusion 3 Medium人工评测
人工智能·aigc·设计师
德育处主任1 个月前
『SD』你的电脑带不动Stable Diffusion?试试青椒云
人工智能·aigc·设计
德育处主任1 个月前
『SD』场景变换魔法:InstructP2P控制类型助你一键换天气
人工智能·aigc·视觉设计
德育处主任1 个月前
『SD』文生图基础讲解
人工智能·aigc·视觉设计