020-29815005
预约专线时间:09:00-23:59

【UI培训分享】:高级有效的UI设计小技巧提升工作效率

新闻来源:优漫动游 日期:2022-05-11
设计是一种技能,它是一种手工艺品,而且这并非总是容易的手工艺品。在过去的十年中,很幸运能够在不同领域进行设计。从事用户界面设计和用户体验设计的工作。设计用户界面可能具有挑战性,因为作为设计师承担着许多责任。要求用户实现他们的目标。希望引导他们及时完成任…
  设计是一种技能,它是一种手工艺品,而且这并非总是容易的手工艺品。在过去的十年中,很幸运能够在不同领域进行设计。从事用户界面设计和用户体验设计的工作。设计用户界面可能具有挑战性,因为作为设计师承担着许多责任。要求用户实现他们的目标。希望引导他们及时完成任务。我们都希望减少学习和认知成本。希望提高知名度。无论他们的互动是认真,有趣,强制性的还是无聊的结果,最终UI设计师都希望他们至少对摆在他们面前的输出有愉快的体验。


【UI培训分享】:高级有效的UI设计小技巧提升工作效率

  那么我们如何实现这一目标呢?

  用户界面提示

  网络上有很多指南,特别是对于设计师而言。并且充满了杰出的人才,他们都展示了其如何做开展的工作。根据我多年的经验,我发现了一些技巧,这些技巧在我每次工作时都有很大的帮助。

  提示1.创建排版层次结构

  层次结构:根据人员或事物的重要性对其进行排列的系统

  排版应始终遵循基本的层次结构定义。排版是出版视觉印刷体系的第一种媒介。想象一张报纸。它包含一个主要标题-最大的印刷元素,副标题-通常是文章的标题和正文-文章本身。

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

  如何创建排版层次结构

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

  看起来如何?

  高级有效的UI设计小技巧提升工作效率

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

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

  技巧2.保持一致

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

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

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

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

  如何保持一致

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

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

  一致性是什么样的?

  高级有效的UI设计小技巧提升工作效率

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

  技巧3.创建自然的灰色

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

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

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

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

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

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

  以上就是优漫教育小编为大家介绍的“【UI培训分享】:高级有效的UI设计小技巧提升工作效率”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解!