设计的UI界面总感觉乱糟糟?从这7个问题里找原因!

翻译:Siyang  审校:ArialXu  |   UXRen翻译组 #376译文
原作者:Denislav Jeliazkov
原标题:《Is Your UI Messy? 7 Common Mistakes to Avoid》

 

当我们设计高品质产品时,任何微小的细节都是至关重要的。

很多人会争论好的用户体验和好的用户界面哪个更重要,而我则认为两者都非常重要。如果其中一个失败了,你就无法对用户产生影响。然而,很多时候用户并不会考虑用户体验是什么,而是基于外观来评价一款产品。

 

1. 忽视边界/糟糕的规划

Ignoring Scope/Bad Planning

那些含有lorem ipsum(模板里填充的默认文本)的产品和库存照片,你多久使用一次? 我想大家都从来没用过。如果你想提升你的技能,设计时请注入真实内容。网页会展示哪些真实的图片,真实的标题可能有多长字符?一旦你美丽的设计被真实的内容填满,它就会面目全非。

具体来说,在开始UI设计之前,你需要知道页面的每个部分将显示什么类型的内容。你还需要知道内容的最小和最大尺寸。这些转折点(turning point)被称为极限情况(edge case),因为它们决定了界面何时以及如何改变。

图片的选择

你还需要提前研究图片的使用限制。如果你的客户没有任何定制照片或不打算购买任何照片,那你就没必要使用来自Unsplash的漂亮但毫无意义的照片。

为什么毫无意义? 因为这些照片都是纯概念性的。用漂亮的东西是不够的。相反,你需要选择那些能够创造故事情节或具有深远意义的图像。

无论你做什么,不要使用那些毫无必要的照片。如今,人们被大量信息淹没。额外一点无用的视觉信息只会激怒他们。

 

理解重复模块

另一种极限情况与重复模块有关。例如,图像+文本、图标+文本、数字+文本…。你应该考虑两行文本和十行文本时这些模块会是什么样子,以及它们是否会一个接一个地出现。

对于描述性功能的小型文本模块,使用三列布局是一个很好的选择。然而,如果你的文本超过五行,并且不能使用省略号(…)来收起文本,你就必须想出另一种视觉解决方案。为什么?因为又窄又长的大段文本只适合原始的报纸阅读,而对网络阅读十分不友好。可能的解决方案包括这两种:水平滑动的轮播模式(Slides)和两列布局。。

提前为扩展性做规划

了解内容的极限情况有助于更有效地使用屏幕空间,并为界面的各个模块选择正确的界面处理方式。但是要记住,极限情况并不仅仅是你当前已经遇到的情况。优秀的设计师总是会主动思考客户将来扩展UI的可能性。

 

 

2. 没有区分操作行为的主次

No difference between primary and secondary actions

设计应用程序时,会涉及到很多需要用户完成的操作。强化主操作(primary actions)的视觉重要性非常重要。所有的导航都是通过按钮完成,所以你必须通过加粗和突出的方式让用户更容易识别主操作,次要操作(Secondary actions)则不要那么突出,但如果用户需要寻找它们,它们是可见的即可。

以下是区分主操作和次要操作的方法:

  • 在主按钮和次要按钮上采用不同的视重(visual weights),视重最强的按钮会得到更多的关注。
  • 因此,使用强烈的颜色、粗体文本和按钮大小来强化主按钮的视重,次级按钮正好相反。

 

3. 令人沮丧的出错状态

Frustrating error states

当你在设计用户界面时,不要忘记任何用户界面的核心目标:在用户和服务之间提供尽可能流畅的交互。界面不应存在疑惑、没有答案的问题,亦或是任何的不确定性。

设计师应该向用户提供产品状态的清晰反馈,特别是在产品处于出错状态时。因此,出错时的提醒应满足以下的几个简单规则:

  • 它们应该是可识别的和引人注目的。(例如,红色是表示错误的常见 UI 模式)
  • 它们应该清楚地解释发生了什么,以及用户可以如何修复。
  • 它们应该与上下文相关联。(显示错误提示的地方最好紧邻出错的UI元素)
  • 它们不应该是带刺激性的。(你的用户对这个错误还不够恼火吗?)

设计师还应该注意那些意外错误情况(如服务器错误、页面未找到)。任何错误都是用户使用流程上的障碍。这就是我们需要帮助用户处理它的原因,提供任何可能的解决方案,并试图消减糟糕的体验,尤其是那些非用户自身原因造成的错误。例如,对于404和500错误(页面未找到),一个可能的好方案是为这些页面设计插图或动画。

 

慎重对待表单校验

在设计错误状态时,尽你的最大努力不要惹恼用户。特别要注意那些所有可能发生的表单校验情况。

举例而言,假设你有一个包含必需字段的表单。这意味着开发人员有一个相应的校验:“所有的必填字段不能为空。”假设用户试图以随机的顺序填写表单,当第1个必填字段失去焦点状态时,它会弹出一个错误提示:“请填写此字段,该选项是必填项!”

看到这个反馈的可怜用户惊叫道:“等一下伙计,我只是在表单项之间切换,还没有点击‘提交’呢!”事情甚至可能变得更糟,例如,假设你有另一个校验设置:在所有必需字段全部填写前,“提交”按钮是禁用状态。

想想看吧!你那些可怜的用户什么也没做,就无法提交表单,但是你已经将好几个错误归咎于他。这肯定会激怒所有人,你最好避免这种情况的出现。

衡量成本与价值

不要听那些开发工程师忽悠:“按你想要的交互方式开发程序,这需要耗费大量精力”。请记住: 如果不能避免这个问题会让你付出代价,“失去用户”的巨大代价!即使它的开发成本很低,没有用户的产品一文不值。

 

4. 没有对齐

Poor alignment

好吧,我承认,我是个对齐狂魔。但这只是因为一旦你发现了对齐的魔力,你就会意识到它是让任何布局看起来漂亮和和谐的关键。

许多设计师认为使用栅格系统(grid)会限制你的创造力,在某种程度上,这的确是真的。然而,如果你是一名刚入行的UI设计师,我认为你十分有必要在打破这些规则之前,先学会它们。

适当的填充(padding)和间距(spacing)可以让你的版面保持整洁有序,同时也能让读者更容易地阅读和理解信息。

在逻辑块(logical blocks)周围应该设置相同尺寸的间距(例如,在顶部和底部,以及在左边和右边)。如果间距尺寸不一,你的页面看起来会很混乱,导致用户对不同部分投入不均等的注意力。

而填充太小则意味着用户无法将内容分解成更多的逻辑模块。为了防止逻辑模块混杂在一起,你需要把它们分开,并在它们之间插入一个大的间距。

维持视觉层级结构的一个简单方法,是遵循如下的简单规则:不同逻辑模块之间的填充尺寸应该大于每个模块内标题和文本之间的填充尺寸。例如,假设你有一个包含主标题、副标题和段落的超长文本,那么你需要:

  • 将标题的底部填充(padding-bottom)设置为40px,然后再在后面在插入文本段落。
  • 段落的底部填充(padding-bottom)设置为10px。
  • 如果段落后面有一个副标题,副标题的顶部填充(padding-top)设置为30px(也即,段落与副标题之间的间隔是30px),并将其底部填充(padding-bottom)设置为20px(也即,副标题与下一个段落之间的间隔是20px)。

这样的设计可以很好的强调重点。主标题是最大号的文本,周围有相对较大的空间,但仍与紧随其后的元素保持相近的距离。

 

5. 弱对比度

Low Contrast

设计产品和设计一座公共建筑(如图书馆、学校等)有些相似之处,产品需要很高的包容性,能满足不同人的需求,这也包括了盲人、色盲和弱视群体。

你可以问问达美乐披萨是否认同产品包容性的重要价值。达美乐的网站设计一点也不无障碍(accessible),他们被一位无法通过网站订购披萨的盲人告上法庭。请不要学达美乐,做设计一定要考虑无障碍。

我们作为设计师,往往关注如何做好看的设计,而忽视了多元化用户的交互需求。

作为一个成熟的设计师,我已经能够心平气和地对待那些限制我做出“完美设计”的条条框框了,这其中就包括ADA(美国残疾人士法案)的相关条例。

为了让文字和水平空间更协调,而把字号缩小到8px;或是仅仅为了美观而使用浅灰色,这些行为都忽视了弱视访客的使用需求。

为了在Dribbble集赞,设计时我们可以忽略无障碍,但是当我们在为真实的用户设计产品的时候,忽略无障碍显然不是个好主意。

按照网络端内容无障碍设计指南(WCAG)的要求,我们至少需要提供4.5:1的色彩对比度。这份指南还阐述了针对运动、听觉和认知障碍用户的视觉设计指导方针。

为确保符合这些规范要求,你可以下载Stark软件,它可以帮助检查你的设计是否满足了无障碍设计的要求。

使用留白

我的意思是,如果你把两个完全不同的元素紧挨着排列,用户无法搞清楚哪个元素是“主要”的,哪个是“次要的”。这就是为什么我们会说,强调对比不仅仅是将不同的视觉效果应用到各个元素上,也需要使用留白的艺术。有时候为了使元素形成对比,你需要用留白来分隔它们。

留白很重要,它使内容更便于用户阅读。当然,有时候留白也会使用不当,比如有太多的空白或者在一个小区域内塞进了太多的内容,这都不是正确使用留白的例子。许多充斥各种广告的网站也缺乏足够的留白。

 

确保文本和图像之间有足够的对比度

避免把低对比度的文本放置在图像上。文字和背景之间应该有足够的对比。为了使文本突出,可以在图像上放置一个提高对比度的滤镜。黑色很流行,但你也可以使用明亮的色彩,搭配使用。

另一种做法是从一开始就使用高对比度的图像。在这种情况下,你可以把文本放在照片或图像的深色区域。

 

6. 糟糕的图标设计

Poor Iconography

当你需要通过一个小符号来表达意思或简单说明一种含义时,图标非常有用。它们也是现代界面设计的基本组成部分,特别是在移动终端上。

在应用程序中,图标通常相当于按钮。看看Instagram,你只会看到图标和文字。

这就是选择正确的视觉图标来呼应元素含义如此重要的原因。听起来很简单,对吧?其实并不简单。找到正确图标的过程是非常痛苦的。

你需要用大家都能理解的、简单的、常见的图标来表达语义。其次,你还需要将这些图标与整体UI风格相匹配,最后,你需要以SVG格式把图标提供给开发人员。

或许你曾经搜索过免费图标,当你为所有元素找到对应的漂亮图标时,你会很兴奋。你想,它们是多么完美地吻合啊! 它们会被每个人理解!遗憾的是,你所选择的图标库给人的整体印象往往是凌乱的。如何才能避免这种凌乱呢?以下是一个简要策略:

  • 线宽(Line width)
    调整尺寸后,所有图标的线宽应该都是一样的。否则,用户会明显感受到线宽不等所带来的混乱。
  • 圆角半径(Corner radius)
    如果你的图标包含一些矩形形状,仔细核对你图标库中每个图标的圆角半径。如果它们尺寸不同,你最好把它们调成一样的。
  • (针对线型图标的)线段末端形状(Line cap shape)
    它可以是矩形的,也可以是圆形的。
  • (针对线型图标的)线段转角形状(Corners join shape)
    它可以是矩形的,也可以是圆形的。

确实,没那么细心的用户可能不会特别注意到线宽或圆角半径的不统一。尽管如此,设计给人的整体印象还是哪里怪怪的,用户能感觉得到。

换句话说,虽然使用免费图标并没有错,但最好还是不要用太多。使用免费图标会让产品看起来很廉价,甚至是不专业的。另外,还有很多免费的图标,人们很容易一下子认出来。为什么? 因为他们早就发现这些图标被到处滥用。

这也是我建议严格筛选免费图标的原因,当然,如果能自己设计图标就更好了。自定义图标总是为用户提供更优越的体验。

 

7. 未考虑多终端

Not thinking cross platform

是的,理想情况下,这在当下应该不再是一个问题。

我们都知道,大多数用户通过移动设备访问网络服务。不幸的是,许多设计师仍然会忘记这一事实。(我猜或许是因为客户不愿意花钱去做移动端设计的优化?)

然而,对于专业的设计师来说,不考虑多设备的兼容优化,这种情况不应该发生。在创建UI时,你应该始终牢记“手机端优先”的法则。

请关注一下不同的用户在每个页面上所看到的内容。然后,问自己:“为了展示某个特定的内容,我选用的UI控件是否合适?”

你可能选了一个很好的UI控件,它可以完美地在桌面设备上工作,但对于手机用户来说,它就并不是那么好用了。反之亦然。这就是为什么我们必须时刻牢记现今设计必须考虑多设备终端的原因。

 

糟糕的触摸区域

微小的点触目标会让用户感到沮丧,因为它们导致用户难以完成预期的操作。我们都经历过在智能手机上点错按钮,等待错误页面加载时的沮丧感!

所以,在设计可点击元素时,请记住用户的手指大小都是不同的:

  • 记住成年人食指的平均宽度是1.6-2cm,要设计适合手指点触的目标。
  • 保证你的点触目标至少有45-57px的宽度。这将给用户足够的空间击中目标,而不必担心准确性。

 

原文来源:https://uxplanet.org/is-your-ui-messy-7-common-mistakes-to-avoid-31ae18689b61(2021.04.10)
版权声明:该文章在UXRen公众号(cnUXRen)首发后方可转载,转载时请注明出处及译者、审校者信息,如有违背,UXRen社区保留侵权追责的权力。

订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论