视觉设计师关于扁平化表单的想法

当表单赶上扁平化---表单扁平化弊端以及解决办法

发布于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%的用户以为事情变得很困难。

推荐一种方法就是给必答题/必填选项标记上红色星号以下图这样颜色和形状共同向用户传达了某种信息这样那些在颜色识别上有缺陷的用户也能知晓其中的意义。

总结

做为设计师咱们但愿凭借简洁清晰建立伟大的用户体验。那么什么是简洁清晰它就是用户准确知道该作什么以及如何经过最少的努力如何去作。实现这种用户体验意味着找到正确的平衡--并仅是为了扁平化而扁平化。

当说到表格--它意味着减小≠简单。