5个UI设计技巧,可帮助创建有效的用户界面设计

2023-05-26 0 320

5个UI设计技巧,可帮助创建有效的用户界面设计

结构设计是一类专业技能,它是一类工艺品,而且这绝非总是容易的工艺品。

我已经出任结构雕塑家十多年了,很幸运地能够在不同领域展开结构设计。在过去的二十年中,我从事界面结构设计和使用者新体验结构设计的组织工作。

结构设计界面可能具有诱惑力,因为她们作为结构雕塑家分担着许多职责。她们要求使用者同时实现她们的最终目标。她们期望鼓励她们及时完成任务。她们期望增加学习和知觉成本。她们期望提升名气。她们期望她们新体验欢乐。不论她们的交互是深入细致,有意思,硬性的还是无趣的结果,最终她们都期望她们至少对摆到她们面前的输入有融洽的新体验。

那么她们怎样同时实现这一最终目标呢?

界面提示信息

互联网上有很多手册,特别是对于结构雕塑家而言。并且充满著了优秀的专业人才,她们都展现了其怎样做积极开展的组织工作。依照我十多年的经验,我辨认出了一些基本功,这些基本功在我每天组织工作时都有很大的协助。

提示信息1.建立排印体系结构

体系结构:依照人员某类的关键性对其展开排序的系统

排印应仍旧遵从基本的体系结构表述。排印是出版发行视觉印刷品体系的第二种传播方式。想像一张报刊。它包涵一个主要书名-最大的印刷品原素,副书名-通常是该文的书名和节录-该文本身。

克雷姆斯兰县,结构良好的类型体系结构可创造社会秩序感,并协助使用者以自然的写作模式写作。由于将关键原素与相对而言原素差别开去,因此提升了它们的速度和数据功能定位能力。

怎样建立排印体系结构

首先,我提议增加印刷品式样的数量。我辨认出3种书名式样不足以满足2种节录式样,一共只能建立5种式样。我还提议仅使用两个厚薄的手写体。常规性和斜体字,杜博韦和中,具体依赖于每个拉丁字母形式的字符串厚薄。从其本质上讲,总重量上的差别应该不足以使关键原素与其他原素区分开。

看起来怎样?

5个UI设计技巧,可帮助创建有效的用户界面设计

这里仅存在三种手写体,但非常容易被吸引到书名上,但是,这并不能阻止眼睛自然地写作随后的故事。此手写体使用较薄和中等总重量,这是因为它具有较重的加粗式样,在我看来,与其他可用总重量相比,对比度太强。仅使用两个权重就可以使主体突出句子的关键部分。

与印刷品术有关的另一个基本功是使印刷术式样降至最低。丰富的风格和家庭风格会给人一类草率和支离破碎的感觉。避免混合使用斜体和斜体字。我也更喜欢只使用一个手写体家族,但是,如果所有书名都使用一个家族,而节录使用另一个手写体,则采用两个手写体家族可能是有效的。在这种实践中,将sans手写体与sans-serif手写体一起使用通常会产生最佳效果。

基本功2.保持一致

一致性消除了混乱并增加了学习。

混乱是一类不舒服的情绪。她们的大脑喜欢划分。混乱需要知觉努力来计算当前的不确定性。具有相同交互作用的原素的多种结构设计式样;例如,多种主要按钮式样或多种输入式样有可能引起使用者混乱和不确定性。

采用一致的结构设计模式有助于消除混淆,并增加使用者期望的知觉组织工作量。

一致的结构设计模式还增加了使用者存在的选项数量,因此增加了单次使用交互行为的数量。删除选项可以增加剩余选项的熟悉度和期望值。

怎样保持一致

在建立界面结构设计时,重用是一个很好的动词。一旦对表示主按钮等原素的式样感到满意,请将其建立为可视组件,以便您可以一次又一次地重复使用它。如果你需要相同原素的相似实例,但需要展开较小的更改,例如较小版本的主按钮,请使用原始的主按钮组件并增加内部填充以建立新的但几乎相同的版本。避免更改其他听觉原素,例如边框半径或厚薄,甚至避免更改手写体厚薄,因为像这样的细微调整会给使用者带来潜在的困惑。

如果使用Sketch,Figma或Adobe XD,则这些工具中的每一个都会促进建立旨在重用的结构设计组件的想法,因此我完全支持使用这些功能。

一致性是什么样的?

5个UI设计技巧,可帮助创建有效的用户界面设计

上面说明了怎样将主要和相对而言按钮结构设计为不同而又一致。一个界面上存在许多原素,因此增加各种不同式样和相关原素的解释非常关键。保持听觉简洁。保持式样一致。

基本功3.建立自然的灰色

建立调色板时,我总是选择两个主调色板来构建我的界面。第一个是单色调色板,它从同一色调提供不同的状态和阴影。其本质上是灰色到黑色的调色板。第二个是单色调色板的复制,仅当我增加颜色组合的蓝色和绿色值时。在单色调色板中使用均匀混合的红色,绿色和蓝色值没有什么问题,但是在我眼中,一旦更改了蓝色或绿色值,它就会消除一些“刚性”。

这种方法还有助于增加对比度的原素所占的表面积较小。对于可能用作<Hr />原素的单个像素边框或其他结构设计修饰(例如无效或禁用的标签),建立现有灰度的第二个版本并增加颜色值会使颜色稍微加深,而无需建立新灰色。

怎样建立更自然的灰色调色板

此过程没有对,错或科学的方法,只需你自己判断即可。

我首先复制灰色单色调色板,然后通常尝试保持“红色”值不变。但是,对于较深的阴影,“红色”值的确会略有增加,因为在向下移动调色板时,需要增加的白色量。

然后,我将“绿色”和“蓝色”值增加到对灰色的自然外观感到满意的程度。我尝试避免将每个值增加5点以上,因为这有可能建立一个全新的阴影,而不是其灰色前身的自然版本。

蓝灰色调色板是什么样的?

下面显示了我用于建立界面结构设计的两个调色板。这些颜色还有其他较暗的混合,但是出于本文的目的,我将图像裁剪为仅显示5。

5个UI设计技巧,可帮助创建有效的用户界面设计

如你所见,此方法将建立更自然的灰色调色板。当她们在自然环境或建筑环境中环顾四周时,灰色永远不会100%是红色,绿色和蓝色。阳光,反射,阴影和明亮的蓝天,都扭曲了她们对颜色的判断,尤其是灰色。建筑物可能只使用了一类色调的灰色油漆;但是,她们的解释并不总是能反映出这一点。

基本功4.不要依赖不透明度

在为诸如导航栏或书名的原素建立结构设计时,增加前景版式和背景之间的对比度的一类常用方法是将手写体涂成白色,然后降低其不透明度。问题是造成不一致。原因是不透明度是两个原素之间的颜色混合。前景和背景。如果这些原素之一是一致的,例如她们的白色nav排印原素,但是背景颜色不一致,即渐变的颜色发生变化,则每个前景nav原素放置在不同背景上方时,它们看起来会彼此不同。颜色。

或者,如果前景色与背景原素来自相同的色相/颜色,但没有应用任何不透明度,则背景渐变将对前景色的外观没有影响,因为不会发生颜色混合。

相同的色相/颜色怎样应用?

首先,使前景类型与背景原素具有相同的颜色。我打开调色板,并停留在顺化的同一区域;但是,我降低了前景色的饱和度。

5个UI设计技巧,可帮助创建有效的用户界面设计

从上面可以看到,我选择了位于同一颜色区域内的前景色(右颜色选择器),但是饱和度(蓝色值)降低了。这将两个对象对齐在一起,从而产生更加和谐的色彩平衡。

实际上这是什么样的?

5个UI设计技巧,可帮助创建有效的用户界面设计

左侧图像使用不透明的白色。正确的图像使用相同的颜色,但饱和度较低。

该图清楚地显示了左侧示例中的“我的帐户”标签看起来比右侧示例中的饱和度更低。结果,该手写体看起来灰暗且无光泽,这也降低了手写体的对比度和可读性。

基本功5.不要害怕空格

来自拉丁语的vacuor恐怖片是对空白空间的恐惧。在艺术和数字结构设计中,填充空白空间的诱惑比看到大面积的白色(负)空间闲置时感到不适的感觉要容易得多。不幸的是,管理人员和客户常常将空白视为浪费的空间,这使得引入和使用空白的组织工作变得更加艰巨,因为还需要一些教育方面的知识。

正确使用时,空白会在对象之间建立关系,表述顺序和优先级,提议移动,并可以协助强调或不强调特定内容,例如横幅,促销,英雄部分等。

怎样处理空白

首先,将空白视为正空间。不要害怕。一旦你对在结构设计中引入空白的想法感到满意,一个好的实践就是从超出你需要的空白开始。大胆。太过分了。在内容或UI组件之间建立空间时,请从所需的更多空间开始,然后逐步向内逐步增加空间像素的数量。您很快就会找到理想的空白区域。

如果以相反的方式开始,即首先将原素紧密地放置在一起,然后慢慢增加它们之间的空白,那么你引入的空间可能比上述以相反的方式开始时要小。

空白是什么样子?

5个UI设计技巧,可帮助创建有效的用户界面设计

你可以从上面的示例中看到,尽管右侧的每张城市卡的尺寸都与左侧的相同,但可以感觉到右侧的尺寸更长。我增加了每张卡中的空白量,在城市名称和城市形象之间,每颗星星之间以及通过将城市价格重新功能定位在右侧来增加了额外的空白。这些调整会在城市名称周围建立更多空白区域,从而提升可见度,突出性和关键性。

我期望你辨认出这些基本功有用。正如我在本文开头提到的那样,这是5个基本功,我总是在新项目开始时就采用这些基本功。这些提示信息将有望协助你建立有效,平衡和成功的界面。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务