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界面





新的add界面





原来的view界面

原来的view界面









新的view界面