今天看啥  ›  专栏  ›  Hozin

组件创新与吐槽:浮动式 Label 文本框

Hozin  · 公众号  · 设计  · 2024-09-02 08:20

主要观点总结

文章讨论了Google的Material Design中文本框的设计演变,包括其用户研究和设计改进。文章介绍了文本框设计的主要问题,包括识别性、查找能力和用户偏好等方面。通过用户研究,Google设计团队发现了一些设计原则,如文本框应具有矩形框体封闭结构、线条对比度等。然而,一些设计师对浮动式Label的设计持批评态度,认为这种设计存在隐患,而传统的文本框更易于使用和阅读。尽管美观也很重要,但将Label藏进框体可能会导致组件更难使用。

关键观点总结

关键观点1: Google Material Design的文本框设计经历了改进,以解决用户识别和使用的问题。

改进内容包括矩形框体封闭结构、半透明填充和线条对比度的使用等。

关键观点2: 通过用户研究,Google找到了改善文本框设计的关键指标,如可识别性、查找能力和用户偏好。

测试过程中使用了热力图等数据分析工具。

关键观点3: 一些设计师对浮动式Label的设计持批评态度。

他们认为这种设计存在隐患,可能导致用户难以记住文本框的用途、误认为是已输入的文字等问题。

关键观点4: 传统的文本框被认为是更推荐的设计方案。

它提供了一个清晰、随时显示的Label,且易于阅读和易用性。

关键观点5: Google的测试未包括传统的文本框方案。

一些设计师认为这反映了Google可能过于关注美学而忽略了可用性。


文章预览

在2017年之前,Google 的 Material Deisgn 文本输入框,设计特点是仅显示底部线条,大概如下图: 这个设计受到了诟病,如下图:如果段落中夹杂着一个文本框,用户会误以为是分隔线,并不会想到存在可输入的表单域。 针对这个问题,Google的设计团队在2016年11月至2017年2月进行了两项用户研究: ※ 研究课题之一 包含3项测试,外加一项偏好排名,共有158+位参与者。 测试项目:在以上界面中找到目标输入框,比如 Item L 然后填写并清空它们。 测试目标:将原始设计与三种探索方案进行比较,找到其中的最佳方案。 结果:得到了4种设计方案的视觉偏好排名。 ※  研究课题之二 包含2项测试,外加一项偏好排名,共有400位参与者。 测试项目:基于 Label 位置、对比度、边框样式……等7个维度,产生了140种不同的样式组合。在规定的时间内,测试者对这些 ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览