UI设计思路受限?来试试这5个界面设计通用技巧

2022-1-12    周周

做设计是很难的。不仅要创建解决问题的设计,而且理想情况下,它们还应该使人们开心并感到愉悦。设计是一种技能,它是一种手工艺品,而且这种手工艺品做起来并非很容易。

设计UI界面可能具有挑战性,因为我们作为设计师承担着许多责任。我们满足用户,实现他们的操作目的;我们希望引导他们及时完成操作;我们希望减少用户学习和认知的成本;我们希望提高知名度,我们希望他们体会到操作的乐趣。

无论他们的互动是认真的,感兴趣的,强制性的还是无聊,最终我们都希望他们至少对摆在他们面前的界面有愉快的体验。那么我们如何实现这一目标呢?

用户界面提示

网上有很多指南,特别是对于设计师而言。Medium是一个平台,充满了杰出的人才,他们都展示了他们的工作以及如何做自己的工作。
我当然不是专家,我是一位相信始终存在增长空间的设计师。但是,根据我多年的经验,我发现了一些技巧,这些技巧在我每次进行新项目时都会不断地与之相关。当我能够创建成功的设计界面时,这些技巧将有很大的帮助。

创建排版层次结构



层次结构:根据人员或事物的重要性对其进行排列的系统
印刷术应始终遵循基本的层次结构定义。印刷业是(甚至不是)出版视觉印刷体系的第一种媒介。想象一张报纸。它包含一个主要标题-最大的印刷元素,副标题-通常是文章的标题和正文-文章本身。


定义明确,结构良好的类型层次结构可营造秩序感,并帮助用户以自然的阅读模式阅读。由于将重要元素与次要元素区别开来,因此提高了它们的速度和数据定位能力。

如何创建排版层次结构

首先,我建议减少印刷样式的数量。我发现3种标题样式足以满足2种人体样式,总共只能创建5种样式。我还建议仅使用两个粗细的字体。常规和粗体,或轻和中,具体取决于每个字母形式的字符粗细。从本质上讲,重量上的差异应该足以使重要元素与其他元素区分开。

看起来如何?

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

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

保持一致



一致性消除了混乱并减少了学习。

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

采用一致的设计模式有助于消除混淆,并减少用户期望的认知工作量。

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

如何保持一致

在创建界面设计时,重用是一个很好的动词。一旦对表示主按钮等元素的样式感到满意,请将其创建为可视组件,以便您可以一次又一次地重复使用它。如果您需要相同元素的相似实例,但需要进行较小的更改,例如较小版本的主按钮,请使用原始的主按钮组件并减少内部填充以创建新的但几乎相同的版本。

避免更改其他视觉元素,例如边框半径或粗细,甚至避免更改字体粗细,因为这样的细微调整会给用户带来潜在的困惑。

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

一致性是什么样的?



上面说明了如何将主要和次要按钮设计为不同而又一致。一个界面上存在许多元素,因此减少各种不同样式和相关元素的解释非常重要。保持视觉简洁。保持样式一致。

创建自然的灰色



创建调色板时,我总是选择两个主调色板来构建我的界面。第一个是单色调色板,它从同一色调提供不同的状态和阴影。本质上是灰色到黑色的调色板。第二个是单色调色板的复制,仅当我增加颜色组合的蓝色和绿色值时。

在单色调色板中使用均匀混合的红色,绿色和蓝色值没有什么问题,但是在我眼中,一旦更改了蓝色或绿色值,它就会消除一些“刚性”。

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

如何创建更自然的灰色调色板

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

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

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

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

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



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


文章来源:公众号   作者:UI设计派

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档