交互设计师画稿时需要充分考虑输入输出(反馈)的状态,保证输入无障碍、反馈清晰易懂,使整个交互体验流畅。刚好近期做了一些表单的优化设计,整个优化过程中就疏忽了很多细节体验,今天做个复盘,以表单举例来聊聊设计时应该如何拆解完善细节体验。

进阶阅读:

输入前

输入前的页面重点是传达需要做什么、一般达成传达的目的有两种形式,一种是通过标题文字+辅助文字来说明,比如:需要输入文字、数字、需要点击、需要上传图片...;另一种是直接将输入控件直接采用特定的控件,比如:邮箱输入框、电话输入框...,这类控件一看就知道要填入啥信息。

设计师如何培养细节思考的能力?

辅助说明更多是为了帮助用户提前了解,减少出错率,如:需要上传 png 格式图片

设计师如何培养细节思考的能力?

帮助用户做决策,如:微信红包的群人数就是为了帮助用户输入红包个数,避免用户需要确认人数而返回看群人数,也算是一种提醒信息

设计师如何培养细节思考的能力?

输入

输入部分除了常见的快捷输入、输入联想、自动识别等方式帮助用户快速输入外,在涉及输入数字的时候,需要关注数字键盘上的输入行为可能会有哪些情况,而这些情况同时也需要和我们的输入项字段要求有关。举个例子:

例 1:微信红包个数字段与总金额字段对应的键盘设计不同,因为个数不会有小数点

设计师如何培养细节思考的能力?

根据特定的字段信息属性提供相应的数字键盘,减去多余内容,干扰、造成错误输入

例 2:能够根据输入要求智能判断,当总金额输入 0 后在此输入其他数字,自动去 0;首次输入小数点,则默认为 0.

设计师如何培养细节思考的能力?

这就是能够根据用户输入的内容结合输入项的输入要求,智能判断,呈现最终合理结果

例 3:实时判断输入内容,有问题即时报错反馈,微信红包通过顶部常驻提示及表单标红高亮展示错误

设计师如何培养细节思考的能力?

输入后

到这一步表示前几部输入行为已完成,但还存在用户需要重新调整输入的可能,这里就需要考虑修改的交互方式,考虑如何帮助用户更顺畅的对已输入字段的重新调整。

例 1:很多输入框当用户重新触发后会有“一键删除”的按钮,这就是为了方便用户快速修改,提高效率,有时候这种短字符的输入项一键删除重新输入比找到问题点删除再输入快许多。

设计师如何培养细节思考的能力?

例 2:QQ 红包这边,当点击已输入完成的个数、金额时,就会默认选中已有内容,重新输入直接是覆盖输入,相信这边也是考虑到在这么小的区域用户很难精准将光标插到数字中间吧

设计师如何培养细节思考的能力?

例 3:为了帮助用户拖动光标,苹果的原生键盘就支持长按键盘后移动,直接将移动热区从小小的输入框的面积扩大到整个键盘,真的是非常巧妙与贴心的设计

设计师如何培养细节思考的能力?

像以上说了这些都是非常细节的点,这些细节的点都是要基于大框架,大流程没问题的前提下我们要去花时间去思考,去改善的点,可能很多人会说这些细节其实对大框架的使用影响很小,事实确实如此,但我要表达的是我们可以将这种关注细节的喜欢,考虑多重场景放到我们平时框架、流程的设计中可以让我们发现更多设计需要思考的延伸点,只有这样不断的考虑场景、用户可能发生的行为、可能面临的问题可以帮助我们画稿过程中养成主动去思考更多,推敲更多的习惯,这样方案会在日积月累的锻炼中画的越来越好。

所以要逐渐养成这样的习惯的方法是多问,盯着页面多看,看看竞品。

  • 这样设计能满足需求吗?
  • 符合用户使用场景吗?
  • 用户可能会怎样操作?是否都能满足?
  • 别人是怎么做的?
  • 这个步骤我是否有缺了什么页面或规则没想清楚?

养成这样的习惯,慢慢的就会让自己一点点的考虑地更加深入,做出的方案也会更加完整。

欢迎关注作者微信公众号:「小发的设计笔记」

设计师如何培养细节思考的能力?

收藏 35
点赞 20

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。