界面设计(一):完成命令模式

初入产品,在我们了解完需求和分析用户需求,了解了产品的架构等流程之后,就需要交互设计师对产品进行设计,但是在小公司和创业公司中,很少会专门的设有交互设计师岗位,大部分时候都是由产品经理或者产品助理完成,因此需要懂一些交互设计的知识,同时熟悉了和掌握了交互设计,对于产品经理来说属于锦上添花的事情,为了提高自己交互设计方面的能力,我在学习交互设计方面的知识,后面会将自己的读书笔记分享出来,今天分享界面设计中,完成命令模式。

界面设计(一):完成命令模式

按钮组:

把相关动作组成一组按钮,彼此对齐,并采用相同的视觉设计,通过使用按钮组可以避免界面上的按钮或链接过于混乱。

使用方法:

将有关的按钮分成一组

用简短、含义明确动词或动词短语作为标签

一组中所有的按钮采用相同的视觉设计,边框、颜色、宽度、高度、图标风格、动态效果等。

悬浮工具:

紧挨着对象放置可对该对象执行操作的按钮和其他动作,但在用户鼠标没有掠过对象之前不显示它们。

使用方法:

  1. 悬浮工具通常用在列表型界面上
  2. 比较适合用在通过鼠标驱动的界面上
  3. 如果应用同时支持web端和移动端时,采用悬浮工具时,要考虑在移动端替代方式
  4. 用户在相关区域上悬停鼠标指针时显示对象,快速响应悬停动作,在用户将鼠标指针开后,立即隐藏对象,让悬停动作尽可能的轻量和快捷。
  5. 使用悬浮工具可以让UI的界面保持整洁,

使用实例:

在我设计产品时,经常用的悬浮工具是悬浮按钮和浮层,当表中内容较多无法承载相关操做时,我会考虑将操作按钮隐藏,当需要操作时,鼠标移动到相关区域,显示相关操作按钮,从而完成操作;对于浮层的使用,也是当数据量大时,表格无法满足显示需要时,会先对数据进行截断,然后通过浮层显示全部内容。在使用悬浮工具时,需要注意就是悬浮工具的可发现性。

动作面板:

将多种类型的动作汇总在一个面板上,而且这个面板始终显示在界面上,没有隐藏。

使用方法:

  1. 将不同的动作在面板上进行分类,然后全部显示在面板中
  2. 使用动作面板时,会占用屏幕较大的空间,因此要合理规划界面空间
  3. 使用动作面板代替菜单或逐个显示对象的按钮的好处在于,可见性和更多可用空间和以及可以自由的展示。
  4. 在进行页面布局时,要考虑到相邻原则,面板和目标对象的距离不能太远,否则用户看不出面板和目标对象之间的关系。
  5. 面板中的动作可以采用图标、文字标签和图标+文字的形式为动作添加标签。

突出完成按钮:

将完成某个任务的按钮放在视觉流的末尾,加大尺寸并提供一个合适的标签,比如“确定”,“提交任务”等

使用方法:

  1. 在任何任务的最后一步,都使用一个从视觉上看非常醒目的按钮,让用户有种任务完成得感觉,
  2. 使用该模式要从视觉层次,任务流、视觉流、分组和对齐等方面合理布局。
  3. 在任何情况下,该按钮要和最有一个输入框或者空间相邻,不然用户在完成任务后无法快速定位到它

智能菜单项:

动态改变菜单的标签,以便适时的在调用之前显示其功能。

使用方法:

系统会记住用户在某菜单中经常使用的动作,在下一次用户在打开菜单时,优先调用之前的某个动作。

确切地表明它们将做什么地菜单项会让用户界面更加容易理解,用户不必停下来思考,它会影响哪些对象。

使用实例:

在我进行产品设计时,在进行一个数据统计界面地设计时,运用了类似智能菜单地这个模式。在进行数据统计分析时,需要运用到各种类型地图表,比如饼状图和折线统计图等等,对于不同层级地人,看的统计图也是不同地,因此无法把所有地图表都在界面上显示,所以我向导地解决方案就是切换,然后系统会记住每个管理人员查看图表的习惯,当用户再一次登录查看时,界面直接显示上一次查看的数据界面,如需要改变时,通过切换按钮进行切换即可。

预览:

在用户执行某个动作之前,为其显示执行结果的预览或结果,如像word和excel中提供的打印预览。

使用方法:

在用户提交一个操作之前,根据使用场景为用户提供一个将会发生什么的信息。

为了减少用户的操作成本,在预览页面上为用户提供直接执行操作的方式,没必要让用户预览后,再关闭预览页进行操作。

也要为用户提供可以在预览页返回的操作,方便用户在预览时发现问题后,返回页面进行修改。或者在预览也上直接增加一个“修改”按钮,让用户完成修改操作。

使用实例:

在接触的产品中也采用过预览的模式,在web应用中,将相关数据汇总到表格中,需要支持导出功能,但是因为表格数据容量过大,有些数据采用了数据截断+浮层的模式展示的,为了在导出表格之前能够看到表格中的全部内同容,所以使用了预览模式。但是在这个案例中,忽略了为用户提供在预览页面就能够导出内容和更改信息的操作。

进度提示:

在需要长时间才能够完成的操作中为用户显示该操作的当前进度

使用方法:

  1. 耗时超过两秒的操作就应该使用进度提示,如果没有提示,会增加用户的心理焦虑
  2. 试验显示,当用户看到一个指示器,表示某个动作正在进行,会耐心得多
  3. 采用图形或文字指示器告诉用户:当前正在做什么;已经完成了多少比例,还需要多长久能完成;如何让停止这项任务。
  4. 要注意线程问题-进度指示的更新应当与当前的进度一直,然而操作本身的进展可能是没有规律的。
  5. 如果有可能取消正在监控的操作,在进度指示器上或附近的地方提供一个取消按钮。

可取消性:

提供某种方式快速取消一个耗时的操作,而没有什么负面影响

使用方法:

  1. 如果一个耗时的操作会打断当前的操作界面,耗时两秒就可以使用可取消性模式了
  2. 用户正在忙于某个操作,该操作阻塞了与系统其他的交互
  3. 可取消性可以帮助防止错误的发生和从错误中恢复,用户可以取消某个明知道会失败的操作。
  4. 在任何情形下,如果知道任何操作都可以取消,用户可以更放心的在界面上探索,试试各种功能。
  5. 使用该模式之前,首先应该找出可以让该耗时的操作加快速度,让他看起来更快一下,不一定是真的加快,只要让用户感觉它加快了就行。解决方案:预先载入数据或者代码,客户端请求之前就发送给它,或者采用递增的方式发送数据,一边接收一边发送给用户;也可以使用载入的时间让用户阅读第一页所需要的数据,然后再让用户读下一页,以此类推。
  6. 在使用可取消性模式时,当用户进行取消操作后,应该立即响应,取消某个操作,如果等待的时间过长,会让用户怀疑取消按钮是否起作用。同时也要告诉用户操作已经取消。

多级撤销:

提供一种方式方便用户撤销所执行的一系列操作,如在很多软件中使用ctrl+z,进行多级撤销。

使用方法:

1.能够撤销复杂的操作,会让用户觉得可以对这样的界面进行安全探索,可以帮助用户免去时间上的浪费和某些精神上的困扰。

2.多级撤销可以让专家用户更快更容易地探索工作路径。

3.在大部分应用中人们期望可以执行撤销操作的场景:

  • 文字或电子表单的文字输入
  • 数据库事务
  • 图片或画布的修改
  • 布局上的变化(位置、大小、顺序或分组)
  • 文件操作,例如删除或修改。
  • 对象的创建、删除和重新组织,例如邮件消息或电子表单的列
  • 任何剪切、复制、粘贴操作等。

4.在某些场景下,是不需要进行撤销的,增加撤销按钮,范围会使用户更加恼火:

  • 文本或对象选择
  • 窗口或页面之间的导航
  • 鼠标光标和文本光标的定位
  • 滚动条的位置
  • 窗口或面板的位置和尺寸。
  • 在一个未提交的对话框或模态对话框上的改动。

命令历史:

在用户进行某些操作的时候,将这些操作的记录保存下来,包括操作,对像和时间

使用方法:

  1. 在某种场景下,用户需要记住或回顾做了哪些操作
  2. 在进行记录保存时最好加上时间戳。

使用实例:

在设计的产品中有一个需求就是我要知道系统在什么时间段都有哪些人进行了访问,进行了哪些操作,我就采用了命令历史这个模式。

业界动态

日活千万的陌生人社交产品变现

2020-3-29 10:33:41

业界动态

跨境电商:商品模块的隐性知识梳理

2020-3-29 11:01:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索