当表单遇上扁平化---表单扁平化弊端以及解决办法
发布于2013-10-29 15:31阅读数595
虽然一些人不赞同把扁平化当成一种纯粹的时尚但也不少设计师已经拥抱了这种设计风格他们觉得渐变、阴影以及边框等视觉风格的减少让整个界面看起来更为简洁和清晰。 问题是大部
“ ”
虽然一些人不赞同把扁平化当成一种纯粹的时尚但也不少设计师已经拥抱了这种设计风格他们觉得渐变、阴影以及边框等视觉风格的减少让整个界面看起来更为简洁和清晰。
问题是大部分扁平化UI构建的重点是内容并不怎么关注执行的控件。那么当扁平化遇到表格会是怎么样的情形呢
表格相关的事情
说到表格我的意思是说任何交互比如接受产品或者服务时信息的变更包括任何事情比如从网上银行到移动电子商务从注册使用新app到运行一个web 搜索。
从用户需求方面考虑表格设计和内容设计有着很大的不同概括如下
首先表格是关于完成任务的。很多人只是想填完表格来完成注册或者购买一双漂亮的鞋子。内容方面有时候完成任务不是我们优先考虑的我们也会漫无目的的浏览而没有特定的目的。
用户完成任务的方式不同于浏览。我们观察一个正在填表格的人发现他们会放大这个区域会查看指南和技巧甚至文字段的标签和常见问题。这有一个顺序从一个地方开始到一个地方结束。用户会在结束点知道他们是完成了任务还是失败了。
另一方面--内容常常可以通过多种方法或来源访问并且人们也会从多种方式关注内容存在着使用的差异性和多样性。
关注任务完成也意味着用户可能会只有一次机会填写你的表格但会多次查看相关的内容因此用户很少有机会了解表格的视觉语言比如没有按钮只有链接。
扁平化=更少信息
形式和内容是有区别的这和扁平化的UI有什么关系呢
问题是为了追求简单简洁扁平化UI做的有点过了。对于内容阴影、渐变以及边框只不过是一些无用的
装饰品。当阅读一个多页新闻时我们并不在乎是通过按钮还是链接进入下一页。但说到表格/形式按钮和链接之间的区别就重要的多了。
比如表格的“提交”和“取消”操作。这两个操作的结果显然是不一样的并且我们想让用户快速简单地使用它来满足自己的需求。这是为什么我和其他人包括让人尊敬的设计师Luke Wroblewski)推荐主要的操作提交使用按钮次要操作取消使用链接。视觉设计并不是仅仅涉及美学还跟不同功能和相对优先权有关。
下边是
Klout表单示范了扁平化UI经常遇到的信息遗失问题。把“取消”按钮放在“提交”之前是个令人讨厌的模式但现在先把这个放一边不谈。扁平化UI风格把主要操作和次要操作同时设计为链接--相同的文本颜色和背景--这会减慢用户的操作进程他们不得不在执行操作前给予更多关注。
假象一下如果通过视觉设计来传递不同操作之间的差异效果会如何呢
扁平化表格失败的三大方式
Klout的例子阐释了扁平化UI表格在友好型用户体验方面的三大失败之处。
1.功能可见性缺失功能可见性可以向用户传递对象使用方法的信息比如椅子会传达邀请你坐下的信息
2.表格元素间的区别不明显比如字段vs标签vs说明vs按钮。
3.表单元素类别的层次结构不足主要按钮vs次要按钮。
由于忽略了合适的交互性因此Klout的“取消”和“提交”操作功能可见性不足。如果“取消”和“提交”操作是有形的按钮或者至少有下划线在web上下划线符合可点击的惯例那么它们看起来应该是可点击的。
表单元素也没有很好地区分开来唯一在视觉上区分可点击链接和非可点击链接文本的是文本的颜色。
涉及到链接的层次方面Klout的例子非常有趣。首先“取消”操作比“提交”操作更明显既定的规范和固有的心理学认为用户希望首先出现的是最常见的选项。但除了这个微妙的区分这两个链接风格和类型相同但他们的重要性并不一样不管是从Klout的角度还是用户的角度。
所以当你维护一个扁平化UI时该如何避免这些陷阱呢方法是添加足够的视觉效果来传达功能可见性表单元素以及层级。你可以专注于表单上最重要的元素比如字段和按钮它们是表格交互性的核心所在。
调整字段和按钮的设计
如果你把文字段设置成空心的并让按钮突出那么这个扁平化的表格就是可用的。这样的设计为元素凸显了元素的功能可见性并很好地区分了元素。
下面的截图是
Lowdi speaker购买过程的截图数量字段和购买按钮的设计都是扁平化的没有加入适当的交互如果不仔细查看需鼠标滑过购买数量才能发现用户不会意识到他们可以改变购买数量也不会轻易知道点击哪里进行下一步。
以下是关于“如何区分展示字段和按钮的功能可见性”
字段设置
下边第一幅图是Hipstamatic的
Oggl 的首屏--注册表单你得像找复活节彩蛋那样寻找可键入邮箱地址的地方。第二个设计方案在字段周边添加了边框把它变成了一个清晰的元素。第三个包含边框并移除了文本字段的页面背景。这三个都是扁平化设计风格但很显然第二个和第三个的功能可见性要好于第一个--尤其是第三个版本。
当Facebook发布图形搜索时也是多番折腾才找到了合适的方法。最初检索字段没有任何背景颜色和header bar一样的蓝色结果是用户无法找到这项功能。在测试过四个版本后Facebook选择使用白色背景和轻微内置阴影的设计效果。
平衡按钮before and after
以下是房地产移动搜索应用左图是旧版本右边是可替代的版本但我猜想右边的设计方式更可用。在旧版本中扁平化的按钮很容易与标题、页脚以及其他内容块混淆。右图的设计减少了按钮的宽度并增加了圆角整体上提升了按钮的功能可见性。
主要操作vs次要操作
最后不要忘记设计主要操作不同于设计次要操作推荐两个方法
1.主要操作使用按钮次要操作使用链接。
2.相对于次要操作按钮在主要操作按钮上使用更显著的样式。
最佳案例实践方法Fiverr注册表单上次要操作使用了链接。
Riki Tanone在
Dribbble上的博客中阐释了如何区分主要按钮和次要按钮。
更多信息需要更好的可访问性
你可能注意到一个更实用的直观的扁平化UI表格会有某种程度的信息冗余这往往不止是一个视觉设计组件比如颜色信息传达的差异。相反它可能是颜色和形状或者是颜色和尺寸。
比如颜色
大约12%的人口并不能很好地区分颜色。如果颜色是唯一可以用来区别不可点击文本和可点击链接的“工具”那么就像上文Klout的表格展示的那样12%的用户觉得事情变得很困难。
推荐一种方法就是给必答题/必填选项标记上红色星号如下图这样颜色和形状共同向用户传达了某种信息这样那些在颜色识别上有缺陷的用户也能知晓其中的意义。
总结
作为设计师我们希望凭借简洁清晰创建伟大的用户体验。那么什么是简洁清晰它就是用户准确知道该做什么以及如何通过最少的努力如何去做。实现这种用户体验意味着找到正确的平衡--并仅是为了扁平化而扁平化。
当说到表格--它意味着减少≠简单。