非专业设计师的设计原则

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

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

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

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

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

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

对比

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

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

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

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

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

颜色(color)

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

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

大小(size)

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

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

粗细(weight)

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

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

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

风格

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

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

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

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

一致性

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

为何一致性如此重要呢?

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

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

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

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

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

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

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

奥卡姆剃刀(简洁性)

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

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

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

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

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

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

空间

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

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

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

邻近的=相关的

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

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

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

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

负空间

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

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

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

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

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

重要性和顺序

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

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

总结

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

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

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

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

相关推荐
BangRaJun2 天前
LNCollectionView-替换幂率流体
算法·ios·设计
little_fat_sheep3 天前
【Rive】Rive在Android上的简单应用
视觉设计
bobz9653 天前
飞牛云目前最新镜像不可用
设计
我码玄黄9 天前
Figma入门-实战列表页
产品经理·figma·设计·原型设计
编程老船长17 天前
第2章 系统设计实战指南:角色定义、功能模块与接口分析
后端·uml·设计
我码玄黄18 天前
Figma入门-旋转效果
产品经理·设计·交互设计
Goboy19 天前
汽车电子架构 | 故事起源
程序员·架构·设计
Goboy19 天前
汽车电子架构 | 必备技能一文读懂 AUTOSAR
程序员·架构·设计
玩AI的小胡子24 天前
保持角色一致性!flux新模型redux用法(含模型与工作流)
aigc·ai绘画·flux·设计·comfyui
WujieLi1 个月前
独立开发沉思录周刊:vol21.概率的误区:重复不等于必然
程序员·产品·设计