提高设计一致性的7个小贴士

Date 2025-02-27 18:43:08

对于一致性,在某些情况下,理解和实践它几乎不需要伤害大脑,而在其他情况下,理解可能有点复杂。简单地说,一致性是交互设计的基本规范,它涉及到设计中的所有元素,可以用于活动计划的规划,也可以用于独立品牌的设计,简而言之,就是创建一个高可用性和统一协调的产品。我们应该特别注意以下示例,因为每个品牌都是最好的一致性和可用性设计。

对于一致性,在某些情况下,理解和实践它几乎不需要伤害大脑,而在其他情况下,理解可能有点复杂。简单地说,一致性是交互设计的基本规范,它涉及到设计中的所有元素,可以用于活动计划的规划,也可以用于独立品牌的设计,简而言之,就是创建一个高可用性和统一协调的产品。我们应该特别注意以下示例,因为每个品牌都是最好的一致性和可用性设计。

1、主色、次色和整体色调

1.jpg

为什么有这么多关于如何创建一个优秀的调色板的信息?这是因为颜色可以作为传达品牌效应的关键视觉因素之一。

一个特殊的颜色标识符可以很快告诉用户你是谁。想想世界上那些大品牌——Coca-Cola, Facebook,T-Mobile ,它们都有独特的品牌色彩。没有这些颜色,你还能认出它们吗?

此外,使用良好的颜色也可以帮助用户知道他们是否在使用你的网站的过程中处于正确的位置。想象一下,如果每个点击动作都把你带到一个使用新颜色的页面上,你会想知道你是否在正确的地方吗?

为了创建一个非常好的颜色调整板,你应该首先选择一个主色,然后使用颜色理论添加一到两个次要颜色。然后为每种颜色设置一组样式和规则,并在以后的设计中使用这些规则,以确保您在颜色上的一致性。

2、字体大小、间距和位置

2.jpg

就像颜色应该是基于一定风格规则的调色板一样,字体也需要设置规则,思路也是一样的。

(1)选择主要字体和大小。

(2)选择次要字体和大小。

字体的设置规则可能比颜色稍微复杂一些。 对于 web 对于端式风格,你应该使用它 CSS 为每个标签(如h1、h2、h3、body等)调用正确的属性值,设置元素的大小、间距和位置。).

显示在相对固定位置的字体,如导航中的字体,应始终保持一致性。如果每个导航元素使用不同的字体,用户会感到相当困惑。这种一致性规则应该贯穿整个网站,所有类似的项目都应该使用相同的字体形式。

3、元素的大小与关系有关

3.jpg

你设计的界面元素有多大?所有按钮都一样大吗?标题和图片的大小是什么?

元素的大小应由其风格决定,同一元素的大小应保持一致。

7、一致的界面元素

7.jpg

虽然这不是粘性导航,但想法是相似的。

对于你的网站,每个交互动作和界面元素都应该以同样的方式工作。

(1)链接直接在当前标签页打开或在新标签页打开(为每个链接选择相同的打开方式)。

(2)按钮自始至终使用相同的颜色。

(3)导航位置固定,选项不变。

(4)页脚和侧栏应该有一个特定的位置和大小(页脚不应该在一个页面上很大,而是在另一个页面上很小)。

(5)所有图标易于识别,其指向符合用户预期。

(6)可点击的元素应始终可点击(如有链接的图片)。

这些项目显示了你在考虑用户粘性和网站可用性时需要注意的所有细节。一定要记住,如果你允许一个元素执行一个动作,元素本身的风格和交互动作应该是统一的。

结论

设计的一致性可以创建符合用户心理模型的产品结构。它还可以创建一个框架,帮助提高产品的可用性,用户理解并愿意与之互动。

对于每个项目,一致性始于一些规则和风格指南。即使你是个人,你也必须首先创建一套规则,指出如何在设计中使用颜色、字体、尺寸、间距、界面元素和交互动作。这将加快你的设计过程,并让你设计一个更可用的好设计。

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计

Floating Image