交互实战|Web端表单项目总结

本文作者分享了其所参与的Web端表单项目,enjoy~在拖放期间,需要处理许多特定的状态。我们把这些状态称为趣味瞬间(interesting moment)。书中提到,趣味瞬间是由15个事件与6个相关元素组合而成。


本文作者分享了其所参与的Web端表单项目,enjoy~

交互实战|Web端表单项目总结

一、项目背景

1.1 背景

CRM 用户在使用「客户」轻应用的时候,反映我们预设给他们的表单字段不能满足他们的需求。比如,一些用户希望能录入客户的传真号码,而我们没有提供此字段。

1.2 目标

(1)用户目标

能够添加、删除以及修改「客户」表单内容。

(2)设计目标

实现添加、删除和修改表单字段功能

优化Web端客户自定义字段界面体验。

1.3 体验指标

交互实战|Web端表单项目总结

二、 现状分析

2.1 发现

(1)基本需求得不到满足,需要适配旧版浏览器

目前用户只能使用默认模板,无法自定模板,所以用户反馈需求得不到满足。 很多企业用户使用的是笔记本电脑,屏幕可能相对比较小。同时,对于某些企业用 户来说,电脑系统可能会很好旧,需要适配一些 IE 用户。

(2)用户没有反馈渠道

CRM 产品是全新的产品,还没有用户反馈渠道。

2.2 推测与建议

(1)完成整体需求设计,满足添加、删除以及修改表单字段需求。

(2)构建用户反馈通道。

三、设计方案

我在设计界面的时候,我使用了大量的「拖放」设计。 用户可以通过拖拽的形式,将左侧预设的一些控 件拖到界面中的手机内,同时用户还能修改控件的标题及提示语等。这样用户就可以根据自身需求,增添、删改表单。(少部分系统默认的字段用户无法删改。)

交互实战|Web端表单项目总结

四、 方案总结

在设计的过程中,我发现拖放看似很简单。但事实上,拖放过程涉及了大量细节。比如:

  • 用户怎么知道可以拖动
  • 拖放对象的目的是什么?
  • 在哪里可以或不可以放置拖动的对象?
  • 通过什么视觉元素来表示拖动能力?
  • 拖动期间,怎样表示有效和无效的放置目标?
  • 是否允许用户拖动实际的对象?
  • 还是只允许用户拖动实际对象的幻影?
  • 整个拖动与放置期间,要对用户给出哪些视觉反馈?

在设计的过程中,我参考了Bill Scott & Theresa Neil(2015)所著的《Web界面设计》。在此书 中,作者在第26⻚中提到:

在拖放期间,需要处理许多特定的状态。我们把这些状态称为趣味瞬间(interesting moment)。书中提到,趣味瞬间是由15个事件与6个相关元素组合而成。

这15个事件分别是:

  1. ⻚面加载:在所有操作发生之前,可以预告拖放功能。例如,可以在⻚面上显示一条提示信息,告 诉用户可以拖放某些元素。
  2. 鼠标悬停:鼠标指针悬停在可拖动的对象上方。
  3. 鼠标按下:在可拖动对象上按下鼠标键。
  4. 拖动启动:鼠标开始移动。(在对象被拖动3像素或鼠标按下超过0.5秒时启动拖动。)
  5. 拖动离开原始位置:可拖动对象离开了原来的位置或包含它的容器。
  6. 拖动重新进入原始位置:可拖动对象又进入了原来的位置。
  7. 拖动进入有效目标:可拖动对象位于有效的放置目标上方。
  8. 拖动退出有效目标:可拖动对象离开有效的放置目标。
  9. 拖动进入无效目标:可拖动对象位于无效的放置目标上方。
  10. 拖动进入非特定目标:可拖动对象位于放置目标和非放置目标之外的区域。取决于是否将有效目标 之外的区域全都看成无效目标。
  11. 拖动悬停于有效目标:可拖动对象暂时停驻于有效目标之上,但用户没有释放鼠标。此时,有效的放置目标通常会突然打开。例如,拖动并在一个文件夹上方暂停,文件夹会打开以示可以接受上方 对象。
  12. 拖动悬停于无效目标:可拖动对象暂时停驻于无效目标之上,但用户没有释放鼠标。这个事件有用 吗?也许可以在此时对用户给出反馈,说明为什么下面不是一个有效目标。
  13. 放置被接受:可拖动对象位于有效目标之上,而且放置已经被接受。
  14. 放置被拒绝:可拖动对象位于无效目标之上,而且放置已经被拒绝。此时用不用把被拖动对象移回原处?
  15. 放置在父容器上:拖动对象时的位置一般来说不会有什么特殊之处,不过在个别情况下,不同位置会有不同的含义。

在上述的每个事件发生时,都可以在视觉上操作一些相关元素,这些元素包括:

  1. ⻚面(例如,在⻚面上显示静态消息)
  2. 光标
  3. 工具提示条
  4. 拖动对象(或拖动对象的某个部分,例如模块的标题区)
  5. 拖动对象的父容器
  6. 放置目标

最后,将这些事件与元素放进一个表格中,就会得到:

交互实战|Web端表单项目总结

每一个事件与元素的交叉点,都是可实现的行为。而上表就像一个备忘录,可以确保不遗漏交互期间需要 处理的任何情况。但是,考虑到简洁的需求,我们不一定需要为每一个交叉点都设计一个行为。同时,在 设计行为的时候,我们还需要考虑该行为是否适合拖放。

《Web界面设计》中也提到,适合拖放的情况有以下五种:

  1. 拖放模块(重新排列⻚面上的模块)
  2. 拖放列表(重新排列列表项的顺序)
  3. 拖放对象(改变对象间的从属关系)
  4. 拖放操作(在被放置对象上执行操作,比如:拖动上传功能)
  5. 拖放集合(通过拖放操作集合,比如:购物⻋功能)

如果你设计的界面是属于以上几种,那么拖放操作会是很好的选择。

五、 项目落地后

1. 最后项目落地,因为时间的原因只完成了需求部分——添加、删除以及修改表单字段。而反馈通路的搭建则因时间与资源的原因,被搁置。不过现在仍然在推动中。

2. 也因为时间的原因,没有适配较旧的 IE,以及特别小的或奇怪的屏幕(比如正方形的屏幕)。

3. 在经过一对一的可用性测试后,也发现在没有引导的情况下,「拖拽」这一交互动作的功能可供性特别弱。很多用户一上来就是「点击」。所以也考虑未来会将「拖拽」动作改为「点击」。

 

作者:王梓铭,云之家用户体验部交互设计师。前产品汪, 还能偷偷撸几行代码。时常做梦,想改变世界。怀揣着这个梦想,跌跌撞撞尝试了各种各样的东西。录过视频,开过 Podcast,玩过博客。 最后发现,其实改变世界并不难。从小事做起,帮助能帮助的人,改变能改变的人就已经足够了。

本文来源于人人都是产品经理合作媒体@金蝶云之家体验中心(微信ID:UXD-Cloudhub),作者@王梓铭

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21643/

(0)
CatherineCatherine
上一篇 2017-04-28 23:54
下一篇 2017-04-29 01:51

相关推荐

  • 专业的网页风格指南应该如何制作?

    文案规范
    视觉指南

    配色方案,包括每种色彩的具体参数,以及其他可接受的色调
    字体和排版方案,包括每个部分的字体类型、尺寸、字重以及具体用法
    LOGO,包括它的样式、变体、尺寸以及位置的说明
    拼写、关键词的选择、文案的风格(包括按钮、社交媒体等)
    图片使用规范,包括色彩、裁剪规则和视觉表现方面的标准
    SEO信息,比如可选的标签和关键词
    栅格标准(主要用作网页排版和印刷)
    空间与留白方面的说明(设计的松紧度等)
    关键点的说明(团队成员可能会提出的问题或者有待澄清的点)

    在内容表述上不要限制太多,这毕竟是风格指南,重点是视觉上的引导,设计是核心;
    将相关、相联的条目整合到一起做快速指引:一个页面介绍色彩,在另外一个页面做排版的规范等等;
    用图片案例来展示界面应有的外观,而不要单纯用枯燥的文字来做介绍;
    提供可用的具体说明。比如配色方案中提供色彩的RGB或者CMYK的具体值,确保色彩的运用能够一致;
    将一部分的设计案例分解说明,确保每个元素的功能和使用规则都足够明晰;

    2017-05-22
  • [自译]强大的省略号-为什么三个小点表达如此丰富

    原文链接:The Mighty Ellipsis - How 3 little dots can say so much 原文作者:John Saito 每当我告诉人们省略号(...)是最让人惊奇的字符时,大多数人都像看疯子一样看我。在你给我打上这个标签之前,让我试着…

    2016-10-09
  • 如何使交互稿的体验更好

    上周偶然的机会,看到老大在帮别的团队筛选简历,看到了一个同学的简单交互稿,只有界面信息的排版和页面跳转流程,缺省了很多交互稿应有的内容。后来,想起之前和同事聊起交互稿到底该如何表现的问题,就想着可以…

    2016-09-02
  • 立足用户体验 “好换灯”助力雷士赢得好口碑

    2018注定是不平凡之年。全面开展质量提升行动,推进与国际先进水平对标达标,弘扬工匠精神,来一场中国制造的品质革命。2018年,雷士照明将迎来20周年庆典。雷士照明正在以此为契机,潜心修练,以促进雷士品牌再上新台阶。2018年被雷士照明定义为“品质服务提升年”,并于近期在全国开展了“诚信3·15,惠民大行动”为主题的“好换灯”主题推广活动,帮助千家万户升级改造居家光环境,传递雷士照明“全国性升级服务”“免费服务”理念。雷士“好换灯”全国...

    2018-03-16
  • 美国交互设计“综合类&艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-30
  • 用交互体验方式感受人类智慧结晶

    2017年9月26日,中国科技馆“华夏之光”展厅经过为时半年的更新改造后,将面向公众进行试运行,并于10月1日正式重新开放。“华夏之光”展厅位于中国科技馆主展厅一层,设有“中国古代的技术创新”、“中国古代的科学探索”、“华夏科技与世界文明的交流”三大主题分区,围绕不同主题,讲述中华民族在生存发展过程中不断创造与发明、探索与发现、交流与融合的科技故事。此次封厅改造是在原有展览的基础上进行的局部性升级换代。“华夏之光”展厅维持原有展览框架,...

    2018-01-30
  • 腾讯干货!从四个方面帮你做好移动页面性能优化

    随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情。

    2017-05-27
  • 以人为中心的沉浸式交互设计如何做?

    对于VR的产品中很多的的问题,我们并没有一个通用的解决方式,最好的办法依然是迭代、迭代、迭代!比如头部参考系:它通常定义了一个透明的光标来定位屏幕坐标系。
    又比如虚拟现实坐标系:由于我们容易在虚拟世界中迷路,所以放一个指南针在脚下使得用户一直有方向感是个不错的选择。
    还有躯干参考系:我们可以把信息和工具放在躯干的周围,使它一直跟随着用户,这样当用户低下头时就能看见他需要的东西。
    此外,现实世界参考系:我们可以提供和现实世界有着稳固联系的线索来减少VR眩晕,通过现实参考系可以减少用户看到的和感觉到的感知冲突。

    2017-05-21
  • 交互新人眼中的交互设计

    从一开始选择做交互设计这个岗位,我就一直在思考:“交互设计究竟是什么东西”。近段时间以来参加了一些面试,每次面试都会让我去重新思考一下这个问题。加上最近又做了一些工作,看了一些资料,对这个问题又有了一…

    2015-12-25
  • 在进入网易后,我对用户体验界限的思考

    作为一个用户体验设计师,除了接需求做需求之外,需要定期的对自己的项目进行反思,在反思的过程中,总结经验教训,这是在专业上成长的一个重要方式。这篇文章,就是来自于对自己进入网易后的一个反思。在我日常的反思中,比较天马行空,并没有特定的线索,也许是页面上一个按钮的使用方式,也许是当前业务的商业化路线。而本文的这个题目是今年最常思考的一个问题,主要关于自己对于界限的理解。

    2017-05-10