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

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