表单交互设计

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

本文作者分享了自己参与的新web端表单项目，enjoy~

一、项目可行性1.1情况

CRM用户在应用“客户”微网页时，显示其表的某个预置字段无法考虑其需求。比如有些用户期望输入客户的传真号码，但是大家都不显示这个字段名。

1.2总体目标

(1)用户的总体目标

您可以添加、删除和更改“客户”表单的内容。

(2)设计方案的总体目标

添加、删除和更改表中字段的功能

改善web端客户对自定义域名页面的体验。

1.3感受指标值

二、 分析报告2.1发觉

(1)基本要求不能考虑，必须兼容旧电脑浏览器。

目前用户只能应用默认模板，不能自定义。所以不能考虑用户的反馈需求。很多公司用户使用笔记本，显示屏很可能比较小。此外，对于一些公司用户来说，电脑 *** 作系统很可能非常陈旧，必须兼容一些IE用户。

(2)用户没有反馈的途径。

CRM产品是新升级的产品，没有用户反馈方式。

2.2推断与提议

(1)设计总体需求，考虑添加、删除和更改表中某个字段的需求。

(2)构建安全的用户反馈渠道。

三、方案设计

我还在设计方案页面的时候就用了很多“拖放式”的设计方案。用户可以根据拖动方式将页面左侧的一些预设控件拖动到手机上，此外，用户还可以更改控制的主题和口号。然后用户可以根据自己的需要添加和删除表格。(系统软件默认设置的少量字段名，用户无法删除。)

四、计划方案汇总

在设计方案的整个过程中，我发现拖拽看起来很简单。但实际上，整个拖放过程涉及到很多关键点。例如:

用户如何判断能够拖动拖放目标的目地是啥？在哪儿能够或不能置放拖动的目标？根据哪些视觉效果原素来表明拖动工作能力？拖动期内，如何表明合理和失效的置放总体目标？是不是容许用户拖动具体的目标？還是只容许用户拖动具体目标的幻像？全部拖动与置放期内，要对用户得出什么视觉效果意见反馈？

在整个设计过程中，我参考了TheresaNeil(2015)的BillScott&WebInterfaceDesign。在本书中，创作者在第26条中提到:

在拖放期间，必须解决许多特殊情况。大家都称这种情况为有趣的时刻。书中提到，一个搞笑瞬间由15个恶性事件和6个相关元素组成。

这15种恶性事件是:

⻚面载入：在全部实际 *** 作产生以前，能够预告片拖放作用。比如，能够在⻚表面显示信息一条信息提示，告诉用户能够拖放一些原素。鼠标悬停：鼠标箭头悬停在可拖动的目标上边。电脑鼠标按住：在可拖动目标上按住鼠标键。拖动起动：电脑鼠标刚开始挪动。(在目标被拖动3清晰度或电脑鼠标按住超出0.5秒时起动拖动。)拖动离去初始部位：可拖动目标离开原先的部位或包括它的器皿。拖动再次进到初始部位：可拖动目标又进入了原先的部位。拖动进到合理总体目标：可拖动目标坐落于合理的置放总体目标上边。拖动撤出合理总体目标：可拖动目标离去合理的置放总体目标。拖动进到失效总体目标：可拖动目标坐落于失效的置放总体目标上边。拖动进到非特殊总体目标：可拖动目标坐落于置放总体目标和非置放总体目标以外的地区。在于是不是将合理总体目标以外的地区统统当做失效总体目标。拖动悬停于合理总体目标：可拖动目标临时驻足于合理总体目标以上，但用户沒有释放出来电脑鼠标。这时，合理的置放总体目标一般会忽然开启。比如，拖动并在一个文件夹名称上边中止，文件夹名称会开启以表能够接纳上边目标。拖动悬停于失效总体目标：可拖动目标临时驻足于失效总体目标以上，但用户沒有释放出来电脑鼠标。这一恶性事件有效吗？或许能够在这时对用户得出意见反馈，表明为何下边并不是一个合理总体目标。置放被接纳：可拖动目标坐落于合理总体目标以上，并且置放早已被接纳。置放被拒绝：可拖动目标坐落于失效总体目标以上，并且置放早已被拒绝。这时用无需把被拖动目标移回原来地方？置放在父器皿上：拖动目标时的部位一般来说不容易有哪些独特之处，但是在个别情况下，不一样部位会出现不一样的含意。

当每个恶性事件发生时，它实际上可以 *** 作视觉效果上的一些相关元素，这些元素包括:

⻚面（比如，在⻚表面显示信息静态数据信息）鼠标光标专用工具提示条拖动目标(或拖动目标的某一一部分，比如控制模块的题目区)拖动目标的父器皿置放总体目标

最后，把这个恶性事件和要素整理成一个报告，你会得到:

每一个恶性事件和元素的交集，都是可以完成的个人行为。以上就像一个记事本，可以保证互动期间所有必须解决的情况不被忽略。但是，充分考虑到简单性的需要，我们不一定要为每个交接点设计一个个人行为。另外，在设计个体行为时，也要考虑个体行为是否适合拖拽。

《网页界面设计》中也提到有以下五种适合拖拽的情况:

拖放控制模块（重新排序⻚表面的控制模块）拖放目录（重新排序目录项的次序）拖放目标（更改目标间的主从关系）拖放实际 *** 作（在被置放目标上实行实际 *** 作，例如：拖动提交作用）拖放结合（根据拖放实际 *** 作结合，例如：买东西⻋作用）

如果你的设计方案的页面属于以上几类，那么拖拽的实际 *** 作会是一个非常好的选择。

五、项目建设后

1.最后的项目建设，由于时间原因，只完成了一部分需求——增加、删除、更改表中的一个字段。然而，反馈渠道的建设却因为时间和资源的原因而处于闲置状态。但仍在推广。

2.此外，由于时间的原因，它与较旧的IE及其特别小或怪异的显示器(例如方形显示器)不兼容。

3.经过一对一的可用性测试，也发现在没有适当引导的情况下，“拖”的交互手势特别弱。很多用户一上来就“点击”。所以也考虑到以后会把“拖”的姿势改成“点”。

创作者:王，云之家用户体验部网页设计师。之前那货王，还偷偷撸了两行代码。经常做梦，想改变命运。怀着这个理想，我跌跌撞撞，各种尝试。录制视频、播放播客和播放博客。最终，改变命运并不太难。从我做起，帮助能帮助的人，改变能改变的人，就够了。

文中人人都是产品运营协作新闻媒体@金蝶云家居体验店(微信ID:uxd-cloudhub)，创作者@王

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/779432.html