快好知 kuaihz

5Tips–助力管理平台的信息设计

首先我们来看下面这幅图:左边是Dribbble联合创始人设计师Dan Cederholm的办公桌,非常干净整洁。右边是天才工程师 Jim Williams的办公桌,大家第一眼感觉如何?是不是很凌乱。我们常说设计要谨记“Less is More”,简洁干净是人人都追求的,但有时有些复杂是不可避免的,比如下图中工程师的桌面。仔细观察其桌面,你会发现虽然这些物件看起来杂乱无章,但其 摆放还是有规律可寻的。

我进入公司的两年时间里,一直在做管理平台的设计工作,而目标用户就是工程师。这些管理平台都有共同的特点:业务逻辑复杂,信息数据海量,而且还要考虑用户特定的使用场景和操作习惯。所以在设计中首要的两个目标就是:

1、保证功能完整流畅,同时兼顾易用性。

2、保证信息组织合理,同时兼顾可读性。

在实现这些目标的过程中,我总结了5条设计小技巧。下面,我将用一些产品实践和案例来详解设计过程中小技巧的应用。

Tip1:合理组织表单内容

管理平台的功能大部分需要通过填写表单来实现,但由于其业务特点,它的表单填写内容繁多,逻辑复杂。若直接罗列所有表单内容,一定会让用户望而生 畏,且容易出错。这时可以根据内容类型,关联逻辑等维度将表单分成多个主题,再根据前后逻辑关联性,将这些主题分到多个网页或单个网页的不同部分,如果是 多个网页,最好配以进程提示,告知用户需要的填写步骤以及当前所处进度。有研究表明,比起完成一项大任务,人们更愿意去完成10个小任务,因为每完成一个 小任务就能给人带来一定成就感。

云计算-云主机服务中,创建云主机的过程需要填写15项内容,根据信息类型和业务逻辑将内容分为了三类,再加上一个确认步骤,将整个表单填写分到了四个网页,虽然步骤变多,但却可以让信息更加有序,减少错误的发生。

运维平台中添加监控项需完成9项内容,但前后主题之间没有很强的逻辑关联,因此在一个网页中分成3个主题,即可添加成功。

Tip2:选择合适的标签对齐方式

最贵的不一定是最适合自己的,标签的对齐方式也是如此。根据不同的使用场景也要选择不同的对齐方式。业界比较认可的标签对齐方式有顶对齐、左对齐和 右对齐三种,Matteo Penzo的眼动实验比较了三种方式的完成速度,顶部对齐标签方式,标签移动到输入框需50毫秒,比左对齐标签方式(500毫秒)快了10倍,比右对齐标 签方式(240毫秒)快了5倍左右。通过下表,可以看出三种对齐方式各有其优缺点。但有时,完成时间并不是表单设计的唯一考虑因素。

(引用自Justin Mifsud的《An Extensive Guide To Web Form Usability》)

对于简易表单可以使用顶对齐;对于较复杂表单,更倾向于选择右对齐,而对于布局复杂的表单则可以用左对齐的方式。

云计算-关系型数据库的创建实例中标签都较长,且要填写的表单项数较多,综合考虑后,为了让用户在一屏环境下填完,我选择了更适合的标签右对齐方式。

虽然标签右对齐比左对齐的完成效率高些,但若在布局复杂的情况下标签右对齐会让界面显得非常混乱,从而影响整体的信息浏览阅读。所以在布局复杂的表单中一般会选择左对齐

当然,对于一些空间受限,内容又繁多的表单,还有一些创意的处理方法,如Matt D. Smith的设计。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:助力  助力词条  设计  设计词条  5Tips  5Tips词条  管理  管理词条  平台  平台词条  
交互

 App动效类型,其实就是五部分

App中的动效设计不是具体的需求设计,不能对产品本身产生很大的变化和改进,只是能在设计层面和体验层面为用户创造多一点的价值。所以在做相关设计的时候,不可为做动效...(展开)

交互

 20个实用便捷的CSS3工具、库...

接上文:20个实用便捷的CSS3工具、库及实例(上)11. 彩色CSS3动画导航在我们早期的教程中,我们向你展示了如何创建一个使用动画下拉菜单的多彩导航菜单。没...(展开)