交互实战|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

相关推荐

  • 【UI交互设计】首月结课作业展示

    花瓣美素是全国最大的版权素材平台,本文章内学生作品图片,未经允许,严禁抄袭和转载。花瓣网丨花瓣美素教学中心,承担天津市大学软件学院数字媒体专业UI交互设计方向120人的教实训任务,在刚刚过去的第一个月里,通过同学们和教师团队的不断努力,专业核心课程《图形图像基础》和《用户体验设计》等两门课程教学任务圆满完成。《图形图像基础》是UI交互设计专业的专业必修课。通过企业教师的认真指导和对该课程的学习,同学们对UI交互有了进一步的了解,在企业教...

    2018-04-17
  • 《用户体验要素》 读书笔记 (3)第四章 范围层

    范围层主要解决功能规格和内容需求只有明确定义出来,你和你的团队才知道你正们在做什么同时你才知道你不需要做什么1. 范围层定义1)范围层需要同时做两件事情:规定过程(日程安排和里程碑);生产产品。2)范围层的功能和内容要明确的定义出来:只有明确定义出来,你和你的团队才知道你们正在做什么,团队中的不同角色才能有共同的参照标准;同时你才知道你们不需要做什么,同时你才知道你不需要做什么,因为这个过程中会不断出现新的需求,要结合你的规划、新需求与...

    2018-04-09
  • 「这个控件叫什么」系列之动作菜单/动作面板

    @龙爪槐守望者 :鉴于国内交互设计 名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计 发展,做出一点微小的贡献。

    2017-08-14
  • 交互设计丛书分享:《从零开始做交互》告诉入门交互师具体操作的的一本书籍。

    内容简介   遇到很多的人来咨询我什么是用户体验设计师,什么是交互设计师,UI与UE设计师有什么区别?为什么一个新生派的交互设计师职位一上来就在IT界有8000起的薪资待遇? 那么说了那么多,怎么才能成为一个…

    2015-07-15
  • 从构图、字体、配色和装饰来分析:为何网易云和虾米APP的banner设计如此好看?

    小白想进阶成为高手,学会发现高手作品的优点是关键。今天这篇从构图、字体、配色和装饰四大Banner 关键要素教你如何发掘高手作品中的优点。

    2017-05-11
  • 由UI/UX设计师向产品设计师演变

    为了创造出伟大的产品,UI/UX设计师应该期待并成为能够生成和处理更多额外信息以获得最佳设计成果的产品设计师。

    2017-05-09
  • 交互案例分享-Spring音乐播放器

    在设计流程的过程中,我们往往会把流程设计的越短越好,最好一步完成,这样用户在流程中停留的时间越短,流程的转化率越高。 最近在试用一款叫「Spring」的音乐播放 App,它根据要你要进行的运动类型,节奏频率,偏…

    2014-09-16
  • 交互设计 | Tmall金妆奖 交互体验装置

    天猫金妆奖 · 体验交互装置中国上海· 3.04.2018***装置交互体验概念***Step 1: 待机状态Step 2: 装置检测到观众体验,即将展开体验流程Step 3: 系统提示拍摄区域Step 4: 实时检测体验者面部表情Step 5: 拍摄表情即将开始Step 6: 拍摄完成,正在为观众制作纪念卡***纪念卡设计***纪念卡/拍摄表情等级1:平静纪念卡/拍摄表情等级2:微笑纪念卡/拍摄表情等级3:开心纪念卡/拍摄表情等级4:...

    2018-03-15
  • iOS 9人机界面指南(二):设计策略

    译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

    2017-06-01
  • 百度UED:运营设计那些事儿

    数十万互联网从业者的共同关注!作者:百度搜索用户体验中心 授权早读课发表,转载请注明出处。在现如今的社会中,每天都在进行着一场场没有硝烟的商战。运营设计则是至关重要的一部分。那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的。设计的目的是什么?设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到所得,从而实现转化。知道设计的目的了,在项目中自然形成了一些思路流程。1、需求分析需求分析分为:产...

    2018-01-31