UI设计技巧:如何提高UI设计的可用性

如何提高UI设计的可用性?无论是网页设计还是APP设计,要确保产品的可访问性是一件知易行难的事情。很多UX设计师的工作都是由一系列的小决定堆叠起来,最终积累构建成一个庞大的产品。但同样这些小决策所带来的小问题也会影响每一个用户,尤其是对身体、认知有障碍的用户,造成巨大的障碍。因此,我们需要善於提升产品的可访问性,继而影响整个产品的可用性。

UI设计技巧:如何提高UI设计的可用性

UI设计技巧

如何提高UI设计的可用性?

UI设计技巧一:给用户提供较大的目标区域

UI设计技巧:如何提高UI设计的可用性

UI设计技巧

每个人面对光标和交互目标时,或多或少都高估或低估自己的交互操作效率。如果给用户设置的目标区域或交互元素太小,也没有提示出发的悬停效果,虽然绝大多数健全用户会在操作过程快速通过微调和校正来尽快达到交互目标,但对有行动或认知障碍的用户而言,会造成非常大的麻烦,甚至是巨大的挑战。

通过给用户提供更大的目标交互区域以及悬停效果,可以让用户更方便地同页面元素交互,从而减少更多不确定性。

UI设计技巧二:使用高对比色彩

UI设计技巧:如何提高UI设计的可用性

UI设计技巧

视力障碍用户在阅读低色彩对比度内容时,会明显感觉到困难,提高UI对比度不仅对这类用户友好,而且对於降低视觉疲劳也有显着效果。

另外,根据W3C规定,高於4.5:1的色彩对比度,能给界面带来更清晰的轮廓,也更利於用户分辨不同元素和控件边界。

UI设计技巧三:不单纯使用色彩表达

UI设计技巧:如何提高UI设计的可用性

UI设计技巧

同样对於视力有障碍的用户而言,单纯使用色彩向他们传递「禁止」、「完成」等含义,在大多情况下会显得不够清晰,甚至他们可能无法直接识别。再者,颜色本身的含义是後天被赋予,部分是被约定俗成,但并不是每个人对此都有足够清晰的认知,甚至同一种色彩在不同文化和场景会表达出截然相反的含义,例如:白色在西方国家代表纯洁,但对於东亚国家而言是死亡、葬礼之意。

因此,通过清晰的文本和符号协助色彩完成信息的传达,会让UI信息更加清晰直观,甚至当你去掉色彩是,UI界面中的内容和文本同样能被用户正确识别。

UI设计技巧四:为连结和按钮添加指引性文本标签

UI设计技巧:如何提高UI设计的可用性

UI设计技巧

按钮和连结上对应的文本不应该是简单的「是否」、「确定」、「取消」,在很多语境中,这些词汇会有多种理解方式,容易给用户带来误解。

为连结和按钮添加指引性更强的文本标签,能帮助用户了解按钮实际的功能和指向性,也便於有视力障碍用户无需过多猜测。

除此之外,按钮和连结文本要控制好色彩对比度,吸引用户快速关注,从而提高UI的可访问性。

UI设计技巧五:使用有意义的标题和结构

UI设计技巧:如何提高UI设计的可用性

UI设计技巧

对用户而言,阅读长篇大论的文本是有门槛的,相反结构化文本在这方面会强很多。

就算文本内容不多,也要确保分段清晰,带有明确主题总结的小标题,能让用户立刻抓住段落的核心信息,保证他们在浏览过程不会因为走神而找不到内容。此外,标题除了具有总结性,最好使用表述性语句,方便用户理解内容功能,保证标题和内容的相关度足够高。

UI设计技巧六:用占位符演示表单内容

UI设计技巧:如何提高UI设计的可用性

UI设计技巧

表单是界面中极为重要的组件之一,为了保持界面乾净整洁,使用占位符描述表单内容是一种常见的手段。如果用户输入时占位符消失,他们可能会忘记应该输入什麽内容或采用什麽样的样式。

为了降低认知负荷,直接使用对应字段格式的占位符来展示给用户,通过字段输入框外确定文本告知用户具体输入的字段。这样不管什麽时候,用户都不会存在不清楚填写什麽问题的情况。

UI设计技巧七:用清晰报错指引帮助用户

UI设计技巧:如何提高UI设计的可用性

UI设计技巧

在填写表单字段时,即使有明确的指引,用户依然有相当大的概率填写错误,这个时候报错提示就显得十分重要。

用户在填写表单过程中难免会出现,这时要确保错误提示的色彩对比度足够强,方便用户能够定位。同时兼顾有视力障碍的用户,尽可能简单用词,告诉用户如何解决这些错过,避免用户去猜。

UI设计技巧八:使用高对比度的焦点指示器

UI设计技巧:如何提高UI设计的可用性

UI设计技巧

虽然绝大多数用户都会使用鼠标和触控板操控,但依然有部分用户习惯使用键盘,再者再进行多字段表单输入时,使用键盘Tab按键快速切换也的确比鼠标交互要快。

当用户使用键盘进行快速切换,选中按键和输入框的焦点指示器,尽可能使用对比度高的色彩,方便用户清楚知道当前选中的控件,以便产生疑惑或模糊不清的感觉。

提高控制界面可访问性,能兼顾更大范围用户,有效延长产品本身的价值,从而提高产品所带来的转换。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/42293.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月25日 01:27
下一篇 2022年6月25日 01:27

相关推荐

  • 我来分享网页设计的误区是什么。

    合理、简洁美观的网页设计就是对搜索引擎发出友好的信号,也方便蜘蛛爬行抓取。好的网页设计对用户而言是必不可少的,也可以说网页设计不仅要符合搜索引擎还要为用户量身定制一套网页设计方案,解决不良体验度,这…

    2023年6月13日
    00
  • 网店网页设计的基本要素案例讲解。

    Online Store在国外很多时尚品牌官网当中被当作是一个品牌网站的分栏目。官网既承担着展示品牌形象与历史文化的职能,也肩负着拓宽品牌销售渠道的用途。在国内例如361、李宁等运动品牌就是如此。今天我们通过耐克ni…

    2023年2月22日 SEO操作
    06
  • 如何高效地进行网页设计?重点关注这7个要素。

    今天为大家分享的是「网页设计要素」,希望能让你有所收获~ 把握中心目标 大多数网页设计是以目标为导向,也就是网页做出来能为用户提供什么、能解决用户的哪些问题。例如电商网站的终极目标是卖出更多的商品,资…

    2023年3月1日 SEO操作
    00
  • 常见3种提升网页层次感的方式

    虚实 虚实之间的合理变化,模拟了用户肉眼看事物的真实情况。这样能够增强层次感,同时能够突出网页设计过程中意图要突出的核心内容和元素。这样的形式无疑能够无声的引导着用户的视觉浏览,更快捷的引导着他们看到…

    2022年6月25日
    0143
  • 分享营销整合方案:网页设计中疏密的变化。

    疏密的变化网络营销策划公司介绍为什么对于12像素的汉字,更适合的行高是18~24像素之间?很多人会说,这是一个便于阅读的行间距。的确,从阅读的角度,低于18个像素的行间距,看起来密密麻麻非常吃力——甚至患有密集…

    2023年6月17日
    00
  • 让动效又快又好落地!5种动效输出格式优缺点分析。

    Halo,这里是设计夹,今天为大家分享的是「动效格式」。文章来源于设计师「三长老」对于 UI 动效输出格式的设计研究。 作为用户体验领域不可缺少的一部分,动效随处可见。日常工作中,我们可能只用 1-2 种动效格式…

    2023年3月7日 SEO操作
    05
  • 使用下拉刷新有什麽讲究  

      对於页面设计来说,下拉刷新是非常常见且易用的用户交互方式。本质上来说,它是一种特定的手动刷新交互形式。与其他的同类操作不同的地方则在於,下拉刷新则更贴近用户的直觉操作形式,所见即所得的视觉效果…

    2022年6月25日
    0114
  • 网页设计知道这几点让你网站建设少走弯路。

    在网页设计中,存在着各式各样的网页,它们承载着不同的目的。设计应追求一种和谐的单纯,即追求清晰的视觉冲击力和巨大的张力,把美的形式规律同网页设计结合起来。然而在网页设计内中中咱们要遵循哪些准则才能设…

    2022年7月4日
    0120

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息