拒绝boring,一次表单设计探索.pdf

拒绝 boring ，一次表单设计探索 在大部分用户眼里，表单填写一直是件很枯燥的事情，因为人们总希望用最少的付出换取最大的 回报。 当我们在填写表单时，会变得不耐烦，因为可能会遇到这些情况： 以上都是真实发生的场景，这些 bad experience 令用户在表单填写时不断感到挫败然后放弃。 基本上，当一页密密麻麻需要填写信息的表单出现在用户面前时，他们的内心一开始都是拒绝的。 而填写过程如果给做上弹幕可能是这样的： 另一方面，视觉设计师在项目中遇到表单填写的设计需求也容易缺少激情，更愿意在其他地方大展 拳脚，进行激动人心的尝试。表单设计是否在产品体验中不重要而因此不被重视呢，答案必然是否 定的。 想象一下著名博客 Medium 在手机应用上仅一根下划线设计就花了整整 31 天，每一个精雕细琢的细 节都是帮助产品体验前进的一小步，最终成为产品拉开差距的一大步。除了作为最考验用户对产品 信任感与耐心的环节，在垂直服务行业，很多的表单填写都是跟业务收益紧密捆绑的！ 在移动端，表单填写设计体验的挑战很多，界面区域变小，场景碎片化，用户的操作随时被打断， 表单设计更需要被尽可能地优化以提高成功机率。 前言至此，因为之前的设计项目中涉及到了移动端表单填写内容的设计，在体验了一些产品表单设 计的同时，也做了一些优化的思考与尝试，最终结合具体的设计尝试和案例总结出一些方法。 然后发现即使到了视觉设计阶段，表单设计的优化空间依然如此巨大。如果你也在进行 “boring的 ” 表单设计，或许能够从接下来的内容获得一些思路。 缓解内容压力 减少步骤是最重要的表单设计最基础的原则， PM 或交互同学会在低保真阶段尽可能地做简化。而 到了视觉设计阶段（内容已不可删减），我们还可以用视觉手段让大量的枯燥内容看起来更加轻 量化。比如 优化排版： 虽然常说不要用平面设计的思维做界面设计，但在此运用排版技能给表单营造舒适松散的氛围非常 重要。紧密的信息会让用户喘不过气，可以通过拉开行高、减少不必要的线条，松散，给用户喘息 的机会，从而缓解因内容带来的压力。 渐进呈现： 可以理解为一口气吃不成胖子，要想让用户听话，还得循序渐进。最被拒绝的表单除了个人资料填 写场景还有评价反馈场景（比如 JD 和大众点评）。 Gogobot 在邀请用户进行评价时，即使在一个页 面上操作，也聪明地通过高斯模糊后续内容缓解用户的压力。只有通过完成上一步的操作才渐进展 现更多的选项，让内容的增加顺其自然。图中截取的是入住某酒店后的评价场景，选择你对酒店适 合入住的人群标签（点击背包客标签）后，详细的评价邀请和后续的分享内容才会清晰的展现出来 。 步骤可观察 在web 端，由于屏幕区域开阔，进度设计比较成熟，一般会标明处于第几步，甚至对每一步操作添 加解说。进度展示让用户在一开始和过程中随时了解操作的成本和进程，整个过程令用户不会感觉 过于被动。比如淘宝买家退款的流程，进度条的设计清晰地告知用户退款流程已经进行到了哪里。 回到移动端，用户需要了解步骤的需求同样不能被忽视。被拆解的多步骤表单可以考虑继承 web 的 进度提示，但由于屏幕限制和拒绝视觉干扰，需要被更轻量化设计。全球性的住宿预订应用 Airbnb 租房模式下最重要的步骤 —— 发布房源，价格、位置、图片、交通、供应 …需要用户填写的内容项 有很多，由于主要操作页面都集合在同一界面，因此在 titlebar 上省略了场景的内容标题，直接换成 进度描述，同时设计了类似缓冲的进度条，让一切操作的成果清晰可见。亲身体验后发现不仅加强 了填写的效率感，还兼具鼓励的作用。 营造氛围 曾经很多表单的填写都集中在注册、购买、评价等场景下其实并没有太多内容的压力。随着 O2O 的 不断拓展深入，在手机填写快递单、申请信用卡等逐渐变为可能，这些实际表单转移到移动设备 上时，带来了大量的不可删减的内容项。不过幸运的是它们的行业属性非常明显，从这个角度我们 发现另一个优化方向。 品牌氛围 除了实用性，设计过程中也可以考虑一些预期之外的东西。比如结合商户品牌、出行场景，以此创 造一种情感上的联结