web系统UI效果迅速提升的TIPS

最近所sbas系统的时候,UI总是不满意。

参照客户给出的例子,和其他自己找到的国外系统,发现有以下几点可以作为提升方案

1.字段较多的时候,利用展开、收缩的功能

例如要做customer的add,但是customer有很多1对1的关联表

这个时候,这些关联表,尤其是非必填项目的关联表可以默认收缩,用户点击才展开

2.多利用默认值,客店按钮要高亮

例如之前设计的“monthly income'字段,就是简单的利用了文本框,限定用户只能输入数字而已。

后来客户建议使用下拉选框,预先定义 1000-2000,2000-4000这样的值,显然更好。

3.字段排列不要看起来像电脑自动排的一样。

在做add界面的时候,之前都是每行3个字段,字段名,冒号,文本框这样一行一行排下来。

其实可以改进一下。

例如用户phone,包含 areaCode, access Code, phone Number, ext Code等字段,像上述这么排列显然不合理。

首先建立一个行,行第一列为 PHONE,第二列为phone几个part的文本框,更加合理。

这大概就是中国和欧美的区别吧。国内好像脑袋里面有个框框,欧美的就比较随实际情况来。

4。做内部应用系统,要善于做工具条。把每个页面的可用操作明显的表示出来

5.使用客户熟悉的界面

在做UI设计之前,最好叫客户发送若干他常用的网站、系统截图;或者叫客户指定一些心水效果;这样可以作出客户熟悉的系统,他自然会用,也会觉得不错

6.多利用fieldSet或者类似的东西

其实重点是将字段归类。

7.采用tab页

如果有多个1对多的表,可以采用tab页处理,避免用户寻找字段时候麻烦。

对比设计图:

原来的add界面

web系统UI效果迅速提升的TIPS_第1张图片

新的add界面

web系统UI效果迅速提升的TIPS_第2张图片

原来的view界面

原来的view界面

web系统UI效果迅速提升的TIPS_第3张图片

新的view界面

web系统UI效果迅速提升的TIPS_第4张图片

你可能感兴趣的:(tips)