网页表单你设计对了吗？
数十万互联网从业者的共同关注！
微信公众号：百度多酷UED（ID : baidu_dkued）
欢迎投稿到早读课，投稿邮箱：mm@zaodula.com
当设计问题具体到网页表单设计上面，又有着怎样的原则呢？网页表单你设计对了吗？
先来看一个例子。下图是美国航空安全委员会网站的投诉页面，奇怪的是，我们只能找到“预览”和“清空表单”两个按钮。实际上“提交”按钮单独位于表单下方，但这明显不符合我们的常规逻辑，我们一般会习惯右下角是“提交”按钮。因此，用户在网页发布投诉时经常会不小心把内容清空掉，不管这一设计是不是故意为之，它的确减少了用户的投诉数量。
好的表单设计可以让用户更快更准确地完成一个表单。研究表明，当表单设计遵循基本的可用性原则时，用户准确填写所用的时间几乎比填写不遵循可用性原则表单所用的时间少一倍。
那怎样的表单才是好的设计呢？这可能会跟许多因素有关，比如表单长度，表单内容，以及要收集的数据等，实际设计中要根据具体情况来分析。但以下几条基本的可用性原则可以帮助你避免很多问题。
1.保持简短
这一原则对许多事物都适用。缩减不需要的内容需要一些时间，但这样可以减少用户的负担，加快用户的完成速度。要减少(a)可以由其他方式收集到的内容，(b)未来更容易收集到的内容，以及(c)直接省略一些内容。当你减少表单长度时，表单的转化率会增加，这有着很重要的商业意义。
2.标签和输入框相对应
标签应该靠近它对应的输入框，在移动端可能是在输入框的正上方，在PC端可能是和输入框并列一行。一定要避免那些容易引起歧义的间距，比如标签和两个输入框之间距离相同。如果是想要询问两个不同主题的内容，应该划分成两个分开的输入框。
3.输入框对齐
输入框位于多列会打破表格的垂直动量。要让所有的输入框对齐到同一列，而不是让用户来适应凌乱的布局。
4.按照逻辑排序
在表单标签顺序和选项顺便排列上应该按照逻辑顺序，比如“姓名，性别，手机号……”或者是“一日游，两日游，三日游……”。当然，这里也要考虑用户的使用频率，尽量把用户选择最多的选项放到前面。
上图是星巴克的一款手机APP，可以让用户自助点单。但是最下面一栏的Full Decaf选项被放到了最右侧，需要滑动才能看到。如果 Full Decaf是用户使用比较多的选项，它应该被放在最左边才对。
5.避免占位文本
设计师通常喜欢用占位文本因为这样可以有较好地视觉效果。但是占位文本通常会导致很多额外的问题，我们应该尽量避免。
6.输入形式和输入内容相匹配
如果只有两三个选项，就不要用下拉列表，直接用单选按钮比较合适。文本输入框的大小应该和所需要的文本输入长度相匹配。比如姓名一栏一般不会超过四个字，手机号码通常是11位等。
7.区分可选的和必填的内容
首先，根据第一条原则，我们要尽可能地减少可选项。如果有一些内容确实是必要的，但只适用于一部分用户，要给出说明，不要误导大部分用户。将表单中的可选项限制到一个或两个，并且明确标记出它们是可选填的。
8.说明输入或格式要求
如果某个输入需要特定的格式或内容，要给出确切说明。不用让用户去猜你的要求。如下图的网站在用户密码格式错误之后才给出准确要求，这显然违反了这一原则。正确的做法应该是在用户输入的时候就给出详细的格式要求。
9.避免重置和清除按钮
重置或清除所写内容经常会给用户带去不必要的麻烦。如果是在收集敏感信息，比如财政信息的表单中，我们应该为放弃填写并且希望删除个人信息的用户提供一个“取消”按钮。但是也要注意“取消”按钮应该比“提交”按钮在视觉上更不明显一点，以避免意外地点击。
10.提供可见的和具体的错误信息
我们应该通过多种方式来提示用户错误，不仅是颜色，还可以加粗字体，画出错误区域等，以此来保证用户没有忽略错误错误信息。在这件事上不能太含蓄。并且，用户之前的错误输入我们应该保留下来，这样可以方便用户的修改。
本文翻译并整理自Nielsen Norman Group，原作者KATHRYN WHITENTON。
版权声明：早读课文章均来自作者投稿或者授权文章，部分文章为转载均尽量注明作者和来源，文章版权归作者所有，若涉及版权问题，请添加momo微信：qqj5211314，感谢。
收藏！16个高转化率网页UI设计模板，总有一个用得上
= 内容导读 =
网站页面不出彩？或页面看似很帅酷，但就是没有订单转化。这些问题经常困扰着站长与设计们。经过我的总结，有16条实用的建议，分享给大家。
一个网站有好的UI界面可以让用户用得顺心满意，即说明站点体验好，从而获得搜索引擎青睐，流量更不用说，转化率(Conversion Rate)也能很大提高。换句话来说，好的页面设计在使用与销售层面上形成双赢。本文整理了16点优化用户界面的方法建议，希望对大家有所帮助。
1、单栏布局优于多栏样式
单栏式设计让你更能掌握自己的内容，从顶部到底部一气呵成，加上用故事来引导读者，最终可以引诱用户【采取行动】(Call to action，以下简称 CTA，意指下载或消费等目的)；而多栏样式反而可能会让读者分心，削弱了我们的设计效果。
网站单栏布局UI
2、不要直接迎头销售产品
略施小慧给用户，让他们觉得有利可图，但贩卖的意图不要设计得太明显。小小恩惠或礼品，对未来的销售成交会带来很大帮助。
利于成交的UI设计
3、统一相似功能，避免支离破碎的 UI
浏览网站时，我们常看到丰富多彩的元素或配色，但它们的功能却毫无二致，而相似的元素太多，只会增加浏览用户的无所适从感。如果发现自己的站内存在重复相同功能的情况，不妨考虑去重修改或重新设计 UI，把类似功能整合起来。例如下图中【Customer Service(客服)】、【Contact Us(联系我们)】的设计，其实是相同功能，应保留其中一个就好。
功能统一的网站UI设计
4、用户见证或展现销售实据
加强社会认同(Social Proof)是刺激销售转化率的一种很有效策略，无论自己再怎么天花乱坠地诉说一通，还不如用户见证或有力的销售数据更能让人信服，你说呢？
关于用户见证的UI设计
5、有目的意图的交互转化路径请反复强调，别只提一次
网站设计者希望用户点击的交互转化路径或按钮(比如加盟、定制或下载)，别只出现一次，可以考虑放在单栏网页的顶端和底部，或在多个页面的关键版块都展现。
网站交互转化UI设计
6、清楚区别3种功能性元素(可点击、已点击、纯文字)
可点击的元素(链接、按钮)、已点击的元素、纯文字三者彼此应该以颜色、深度、字体或对比等各种设计手法清楚区分，让使用者浏览网站畅行无阻。例如左图，蓝色字体是超链接，黑色字体是使用者点击的选项，或者是使用者正在浏览的页面。
网站点击元素的UI设计
7、突显推荐方案
如果页面中提供有多种选择务，请把最推荐的方案强调出来，如左图就将【Product X】特别放大且以蓝色高亮显示，Y、Z 缩小等。
网站突显按钮UI设计
8、提倡善意提醒，少点唐突确认
如果用户更改了某个选项，用一行文字提醒他们可以【还原】即可，无需大费周章设计【再次确认】的跳出视窗。因为大多情形下使用者的动作都具有意识，后者设计太唐突，可能让使用者觉得被纠正而产生被冒犯的感觉。
可撤销行为UI设计
9、清晰表述目标用户群体
简明地表达出适合使用你服务或产品的用户群体，可以链接到更多相似特征的人，同时也让你的用户感受自己的独特性或被重视。
目标群体选择UI设计
10、直接肯定，避免犹豫不决
页面用语应该表现出直接与肯定，优柔寡断是大忌，讯息中如果出现【也许、或许、可能……】、【有趣吗？】、【想要吗？】等疑问用语，在显示自信与强调权威上可能还有改善空间，建议不用。
页面肯定式元素的UI设计
11、惯用强烈对比手法
CTA设计应该与众不同。请综合运用色调、深度、互补色、元素差异性等方式，将 CTA 跟其他页面元素区别开来，防止类同或重点不突出的设计诟病。
强烈对比法UI设计
12、明确产品的生产地
表达清楚你、你的产品或服务来自哪里，赋予人性化的亲切感受，同时再强调出商品或服务产地，这也能带来质量保证的效果，让用户更信任你的站点。
产品产地网页UI设计
13、表单问题简单化
注册或询盘线索收集表单乱而杂，用户往往容易不耐烦继续看下去而中途放弃，这会让设计意图的功效减弱，所以尽量精简明了，意图直达。
网站表单填写UI设计
14、别把选项隐藏太深
下拉式菜单设计虽不会占太多空间，但却让选项更难被用户发现。适合下拉式菜单选项设计的一般是与可预测性的事物、或者人们都很熟悉的时间(如出生日期)、地点（如省市地县行政地点等），以及与产品或服务相关的重要内容，这些最好并列在页面显眼的位置上。
网站表单选项UI设计
15、页面需连贯顺畅
不要让网站用户产生【已经浏览完，没有了】但实际上根本还未看到底部的错觉。应该营造一种视觉或节奏上页面表现样式，让用户可以顺利浏览完整个页面，这样就不会白费苦工，达到我们的设计目的。
页面连贯性UI设计
16、避免焦点分散
假如你设计网页唯一目的是要触发用户浏览到页底部时发生【CTA行为】，那么中间嵌入的任何链接诱饵都可能导致他们分心，甚至将他们带离你的网站，所以在规划页面的链接诱饵数量和位置时要谨慎。
集中焦点式页面UI设计
本文就网站页面转化率提升的设计技巧给出了本人的16个看法，但这并不代表就是最终设计手段，设计师应该根据网站主题、业务方向及营销推广的目标来设计出利于提高转化的页面，这才不会犯经验主义错误。
本文内容原创，基于CCO协议允许被转载，但请注明信息来源“芒果网络运营”订阅号，谢谢合作！
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
