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)
InspirrInspirr订阅用户
上一篇 2022年6月25日 01:27
下一篇 2022年6月25日 01:27

相关推荐

  • 简述交互的架构与流程

    网站设计前进行的架构又叫资讯架构,是网站设计专案开战前需进行的逻辑骨架构建步骤,也是网站功能的横向梳理。好的资讯架构能够进行合理的功能分类,也比较容易贴近使用者的心智模型,能够很快递让用户快速递有效…

    2022年6月25日
    0112
  • 零基础也能学!网站设计配色4个方法

      色相一致的配色 所谓的色相一致,其实指的是在页面设计当中所使用的配色应该相同或者相近。这种方式能够让使用者感觉安心,视觉效果比较安全。但也可以合理地加入一些别的颜色,但为了整体上保证色相的统一…

    2022年6月25日
    0182
  • 分享网页设计与制作书职高。

    对不起,由于技术限制和格式问题,我无法在这里提供一个完整的1200字的回答,但我可以为你提供一些关于网页设计与制作考试题库的信息。 网页设计与制作考试题库主要包括以下内容: 1. HTML和CSS基础知识:包括HTML…

    2024年7月4日
    04
  • 网页设计技巧:界面色彩太乱怎麽办

    界面色彩太乱怎麽办?色彩搭配,一直是网页设计中的重中之重。但由於不同人对色彩的把控力和敏感度不尽相同,导致市面上的网页设计作品质量参差不齐。因此,要想提升网页设计的视觉效果,掌握一些配色规则是非常重要…

    2022年6月25日 建站资讯
    0137
  • 如何提高UI设计的精致度?掌握这五个UI设计技巧

    在互联网产品日趋成熟的今天,越来越多网页和APP变得非常相似,感觉就像同一套模板设计出来的产品。然而,产品同质化问题日益严重,使得UI设计不够精致,产品也缺乏品牌感和辨识度。 Inspirr认为,UI设计是否精致,…

    2022年6月14日 建站资讯
    0185
  • 如何让卡片设计变得更有颜值?  

      图片 卡片形式的介面制作,图片是其中的重度用户!也就是说卡片非常擅长去展示图片这一元素。合理地展示图片能够很好地突出介面的质感,因此要注重图片自身的品质。 阴影、渐变 让卡片不仅仅扁平化,也可以…

    2022年6月25日
    0137
  • office or microsoft 365整套ui设计体系提升。

    如果你是 Windows 10 系统的用户,那么最近应该会注意到 Windows 系统的图标正在逐步地被替换、升级,(在忽略广大国内全家桶软件影响的情况下)Windows 10 正在随着 Fluent Design 的注入而正在变得越来越优雅。随…

    2023年2月22日 SEO操作
    05
  • ​智能座舱中的多屏交互如何设计?5条设计原则。

    Hi 大家好,在半年前我和亚辉、Shadow 一起主编的《智能座舱的人因与人机交互设计》(书名待定)的撰写工作已接近尾声,和大家商议后,在此我来提前共享书中的部分初稿,希望能对读者有所帮助,以下进入正文。笔者…

    2023年3月7日 SEO操作
    011

联系我们

QQ:951076433

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