Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. UI Design
Webdesign

界面设计指南

by
Length:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

让我们来看看数字领域的功能可用性,我们可以把这些原则应用到我们所设计的UI元素中,比如按钮,表格,图标和其他元素。

认知是什么?

认识到物体和个体之间的功能可供性。列如,门把手提供扭转动作。个体是否能意识到这一动作的功能可供性?

另一方面,认知科学介绍了用户是如何认知到推、拉、扭等动作的可能性。 认知科学应该是认识到实际可以做到的动作的组合。

事物的外观给予了人一种如何去使用它的认知,比如圆形意味着可以扭动。

为什么认知科学是重要的?

像门把手这样的物体是非常常见的,它们在日常生活中无处不在。而我们所要做的就创新,比如不用钥匙而进入车内。 它们是许多人正在探索的领域。因此认知能力非常重要,一个微小的凸起可能会提供如何使用的认知。

  1. 1.打开车门
  2. 2.锁定车门

而不是通过用户手册来告知用户如何使用,我们将依据过去的产品认知习惯而为客户开发新的产品。

界面设计

用户界面设计中的认知科学也十分重要。在这篇文章里,我就讨论如何在界面中合理设计,并给予相关案列指导如何改进。 由于他们没有实际的物理外观,就像在工业设计中我所提出来的认知科学一样,基于认知。

扁平化设计

扁平化设计是有问题的,它们经常过度扁平,然后被诠释为扁平化设计。

下面注册界面中的一些元素

  1. 1.标题
  2. 2文字
  3. 3主要按钮
  4. 4次要按钮

这里有很多种元素,但很难区别它们之间的可供功能性。它表明存在按钮和输入两种行动,但用户无法区分哪一个才是可行的具体行动。

主要按钮改进

我们将如何改进,让用户更容易察觉到新建的指令?它可能有助于执行以下操作:

  • 添加一个微妙的阴影来表达可按动。我并不是盲目使用阴影和渐变特效,而是正确的使用它们并提高功能可见性。
  • 在边缘位置,使得按钮变小,这样就不会被误认为横条的一部分或者子部分。
  • 提高对比度,浅灰色和浅浅灰色之间难以区分。较暗的灰色设置成按钮可提高功能可见性。


次要按钮

这个次要按钮会丢失行为意义,难以和表单内容区分开来。改进建议如下:

  • 圆角表示它是一个可以按压的按钮
  • 靠近:将按钮更靠近选项将更清楚的传达它们的相关性
  • 标签:用更直接的东西来表示按钮的作用。

表格文字输入控件

另一种例子,输入文字的时候,形状的改变似乎并不显眼,但是它们可以产生相当大的影响。

一些改进建议有: 

  • 考虑各种字段大小之间的关联性。 在任何情况下,调整文字大小使得文本内容长度接近更易被用户阅读。
  • 这里扁平化设计是有效的,但是如果我们添加一些阴影,它可能会被准确的看作是一系列待输入字段。而不会被人认作是按钮。
  • 更高的对比度有助于提高内容的可读性,尽管这和功能可用性没有直接关系。

结论

在本文中,我们研究了举例,以及他们的UI和UI设计中的功能可用性相结合。了解用户的认知,让你更加了解应该如何去设计! 你的设计不能混淆用户的认知,而是要帮助他们完成使用。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.