网站设计中怎样提高UI设计的可用性

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

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


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


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

网站UI设计技巧二：使用高对比色彩


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


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

网站UI设计技巧三：不单纯使用色彩表达


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


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


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


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


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


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

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


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


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

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


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


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

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


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


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

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


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


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


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