- xiaozhonghua
- 等级:
- 性别:
- 文章: 104
- 积分: 2090
- 来自: 上海
|
发表时间:2011-01-14
最后修改:2011-01-15
前面两锤后,得到很多朋友的鼓励,并希望继续深入探讨2BizBox这款免费ERP的开发方面的经验。这两天有空,就又写了一锤,欢迎大家拍砖。首先回顾前两锤大家关注的一些问题:
好了,总算可以进入正题了。今天的话题是软件界面要“好看”,更要“好用”,这两点很重要,缺一不可。好看不好看,或者好用不好用,都是比较抽象的概念,仁者见仁智者见智。但是,软件“以用为本”这一点我们都不否认。2BizBox项目在国内外很多人参与,语言不同、文化不同、习惯不同,连IDE工具都不同;要做到成千上万界面的美观一致和专业,需要做很多细致工作,开会、讨论、电话、邮件、skype…烦不胜烦。不过,说到底都是细活儿。其实做高质量软件的唯一秘密也就是 “细节”这仅此一点而已。
风格一致Same Style
2BizBox ERP中的界面成千上万不计其数,开发者众多,如何保证图形界面的布局风格一致?这需要有文档规定,还要开会、培训、测试、检查、评审等等。Windows是图形界面的鼻祖和大家,如下图,随便找一个Windows界面,仔细观察,你会有所收获:
- 界面边缘以及内部边距都很一致(一般都为5或10)。要体现在软件开发中也很简单。例如在使用Swing的FlowLayout进行布局,直接可以指定默认间距,避免不同开发者的设计风格出现差异:
public FlowLayout() {
this(CENTER, 5, 5);
}
public FlowLayout(int align) {
this(align, 5, 5);
}
- 对齐方式都很统一(左对齐)
- 通过带标题的Group对界面元素进行适当分组
此外,在2BizBox客户端开发中,对于所所有界面,都要遵循一些要求和惯例,这些要求有时候都很难用语言描述清楚,更多的是要靠开发者多思考和体会:
- 每个界面都有比较清晰的标题,尽量做到能够“见文生意”。
- 使用统一风格和尺寸的图标;所有界面有一致的颜色和尺寸风格;2BizBox ERP中的所有图标、颜色、字体等甚至都被统一封装到特别的类中,自己是不能随意使用各种颜色、字体、图标的,这样才能做到“风格一致”。
public class IconStore {
public static final Image BB2_FRAME_ICON = ClientUtil.getImage("logoicon.gif");
public static final Image COMPANY_NODE_ICON = ClientUtil.getImage("company.png");
public static final Icon CLOSED_STATUS_ICON = ClientUtil.getIcon("closed_status.gif");
public static final Icon RUN_ICON = ClientUtil.getIcon("run.gif");
public static final Icon STOP_ICON = ClientUtil.getIcon("stop.png");
public static final Icon ROOT_ICON = ClientUtil.getIcon("root.png");
public static final Icon CHART_ICON = ClientUtil.getIcon("chart.png");
public static final Icon REPLY_NOTICE_ICON = ClientUtil.getIcon("notice_re.png");
public static final Icon FORWARD_NOTICE_ICON = ClientUtil.getIcon("notice_fw.png");
public static final Icon PICTURE_ICON = ClientUtil.getIcon("picture.png");
public static final Icon CAPTURE_F4_ICON = ClientUtil.getIcon("capturef4.png");
public class FontStyle {
public static final String KEY_EN_FONT_NAME = "PREFERENCES_EN_FONT_NAME";
public static final String KEY_EN_FONT_SIZE = "PREFERENCES_EN_FONT_SIZE";
public static final String KEY_NATIVE_FONT_NAME = "PREFERENCES_NATIVE_FONT_NAME";
public static final String KEY_NATIVE_FONT_SIZE = "PREFERENCES_NATIVE_FONT_SIZE";
public static final String DEFAULT_EN_FONT_NAME = "Dialog";
public static final String DEFAULT_NATIVE_FONT_NAME = "Dialog";
public static final int DEFAULT_EN_FONT_SIZE = 11;
public static final int DEFAULT_NATIVE_FONT_SIZE = 12;
public static final int DEFAULT_LARGE_FONT_SIZE = 30;
public class ColorStore {
public static final String BACKGROUND_COLOR = "Color";
public static final Color BACKGROUND_ALL_UI = Color.white;
public static final Color BACKGROUND_UPDATE_UI = Color.red;
public static final Color BACKGROUND_HOMEPAGE = BACKGROUND_ALL_UI.darker();
public static final Color FOREGROUND_HIGHLIGHT_FIELD = Color.black;
public static final Color BACKGROUND_ADD_PANE = new Color(0xCC, 0xCC, 0xCC);
- 有操作的界面要有“取消”或“关闭”按钮。
- 除主窗体外,基本不使用工具条和状态条。
- 慎用颜色和各种字体(包括字体大小和类型)。过多的颜色和字体会显得混乱,也会给用户一种不安的情绪。不过,对于一些需要提示用户注意的元素,又要坚定不移的用鲜明甚至刺激的颜色进行标示。这其中的平衡比较不好把握,不过“避免出错”比“好看”总是更重要的。2BizBox的早期版本风格非常朴素,甚至有点“灰头土脸”的。但谁说ERP或管理软件就应当“一脸古板”呢?经过反复尝试,2BizBox还是选择了能让人心情更加舒适愉悦情绪稳定的绿色和灰色作为主颜色,配合橙色、黄色、暗红色来突出一些界面元素,做到搭配合理。总之,界面风格就和穿衣服一样,不在乎花里胡哨,而在乎搭配和协调。
- 弹出消息要友好、清晰。2BizBox中的弹出消息分4个级别,包括询问、信息、警告、错误。
其中,严格慎用error错误级别的消息,除非碰到非常非常严重的情况,例如底层故障、无法继续操作等。过多的error错误信息,会给用户“系统容易崩溃”的感觉,让用户觉得恐慌,不踏实。软件虽然有会有各种异常,但是跟用户解释的时候却要显得“蛋定”,不要总拿“大红叉叉”的message吓唬用户。此外,弹出消息不光要提示发生了什么,还要尽量给出解决办法和后续推荐操作,甚至直接引导用户进行后续操作(如下图,提示设置零件图片FTP设置的提示消息)。
- 按钮要有文字。如果只有icon无文字,必须设置清晰可读的tooltip;
- 减少界面中的边框。有的软件喜欢用边框,大框套小框,最后框框一大堆,内容反而被弱化。边框本意仅仅是做好“组织分类”的作用,过多滥用反而喧宾夺主,造成用户眼花:
- 常用按钮的排列顺序要一致。2BizBox ERP中是大概按照“打印-刷新-编辑-添加-复制-快速查看-关闭”等顺序安排的。关闭按钮统一放在右下方,其他按钮放在左下方,依次横向排列。
- 有远程操作的界面,要有等待或进度条,并可以取消,因为谁也无法说清远程调用会消耗多少时间。执行结果要有明确提示:如失败提示,或成功后界面直接跳转。
- 尽量用内嵌的Tab窗口显示数据,而非独立的JFrame或JDialog,避免界面杂乱并占用资源。我们的经验发现,大量不关闭的JFrame或JDialog将占用大量操作系统资源,导致内存占用严重,系统变慢。而使用Swing轻量的组件如用内嵌Tab界面,则占用资源极少,基本上可以使劲new,毕竟他是轻量的(也就是Swing给Paint出来的),而不是重量的(操作系统的本地对等窗口对象)。除非有必要,才使用弹出对话框,因为模式的弹出对话框会阻断用户的其他交互。例如在模式对话框上填写了一堆数据,突然发现一个数据需要到其他模块差一下,此时会陷入严重的困境。使用对话框弹出必须屏幕居中,且要保持模式状态。个人始终认为,非模式的弹出对话框,是软件中最怪异的做法之一。
- 不要滥用图标。很多人喜欢用图标,感觉用了图标软件会更好看。按钮、菜单、tab、列表、树、下拉框甚至Label等等都大量使用图标。而且大多程序员自己不会设计图标,只是到处google或扣别人的图标,弄的软件界面七拼八凑,风格杂乱、花里胡哨、哗众取宠,界面反而失去了重点。就像女孩子穿衣服不是说把最好看的毛衣、外套、帽子、鞋子一股脑穿上就肯定好看。穿衣戴帽讲究的是“搭配”,Icon也是同样。Icon的作用是起到标示和图示的作用,增加软件的美观性和可理解性,但是不可过多滥用。
- 窗体比例协调。无论是Frame还是Dialog,长宽比例要协调,一般控制在5:3到3:5之内,超过2倍的比例一般都不太推荐。人的上半身和下半身的最佳比例也有一个范围,光靠上半身很长,估计也找不到女朋友不是?
- 界面布局要考虑易维护性、易理解性,而不是只考虑个人喜好甚至炫弄技巧。例如下图例子:用过多的按钮设计省份非常失败,加入增加一个省份则需要修改代码。“黑龙江”由于三个字被迫移动到下方,和“港澳台”一起,引起用户困惑。
减少点击Less Click
软件的一个重要任务就是方便操作,省时省力。所谓“简单、方便、快捷”,可不仅仅是口号。要做这一点,首先要从“减少鼠标点击”开始。鼠标点击动作能省一定要省,能少一定要少。能一目了然的信息,就不要拆的哲理那里、绕来绕去。软件业里面一个极端说法是“3次点击即可调出任意功能”,虽然比较难,但是足以说明“软件以用为本”的思想。以下举一些例子,可能会引来大家的共鸣或争议,不过欢迎大家积极探讨,毕竟软件界面设计没有完全的一定之规,而且也随着时代的变化而发展,有点类似服装设计。要不说我们程序员和服装设计师、建筑师是一类人呢!盖楼造衣服都有各自品牌或设计师特色,但都会遵守一定的基本规则,不会乱来。
- 一个界面上,除非特别必要才使用tab。为什么?减少点击。因为切换tab需要多一次鼠标点击。不过我们可以看到很多软件界面都特喜欢tab:没多少信息,还弄了一个大大的tab;tab上标签页很多,可点来点去,每个tab上东西却寥寥无几,让人恼火。程序员往往喜欢从自己的喜好,想当然的设计这样的界面,完全没有考虑使用者的感受,既不直观,也费时费力,没有体现“软件以用为本”的思想。
- 能一个界面显示完整的信息,就不要拆成多个界面。ERP里面很多单据信息复杂,关联信息众多,如何让用户清晰、一目了然所有的数据,是一个难题。不过,我们的原则是,宁可多现实一些数据,也不拆分成多个需要点击按钮分别呈现的界面。数据多,界面会显得繁杂一点,但是眼睛的移动速度总比鼠标再点击按钮查看新界面的速度更快。况且,通过不断的布局优化和组织重构,总是有办法让信息更加清晰。
- 界面信息饱满,重心稳定,头重脚轻、大面积空白。一个好的例子是2BizBox的“快速访问视图”。大家初次看到这个界面,一定有“密密麻麻”的感觉,其实这是经过精挑细选,把最常用的功能入口都统一组织放在了这个最方便醒目的位置,让用户可以快速进入一个常用的功能,减少点击次数,增加易用性。这就是为什么很多用户习惯了2BizBox后就会爱不释手。“漂亮”和“易用”那个更重要?这就像问找老婆“漂亮”和“善良”哪个更重要一样:如果无法兼得,咱宁可都选择后者。
- 能用复选框,就不用下拉框。为什么?因为多了一次点击。请问,选择一个“YES”、“NO”的选项,用checkbox点击几次,而用ComboBox又是点击几次?
- 能用列表,就不用下拉框。为什么?因为多了一次点击。List可以直接点击选择,而且所有选项可以一目了然,还可以做到多项选择。而下拉框只能单选,还要先点击一次下拉。当然,ComboBox比List有占空间小的优势。所以很多时候,界面设计是一种美观、易用的妥协结果。也许没有多少高深技术问题,但细节对于易用性和软件的品质却很重要。
- 菜单不能深,最多2层。为什么?减少点击次数。超过2层的菜单,功能被隐藏太深,组织结构太复杂,太难用,同时也增加了点击次数。举一个例子:一个大楼,进去一个主走廊,两侧是办公室,或可以再有分支走廊;如果分支走廊两侧还有进一步的“毛细走廊”,你可能直接就晕菜了,这样的迷宫大楼,你敢进么?2BizBox所有功能都集中在主界面的主菜单上,虽然功能众多,却保持两层的设计,简单方便。
- 统一的快捷键操作方式,减少鼠标操作。例如,所有tab内嵌窗体都可以通过ESC关闭,按F5刷新,等等。如果你键盘熟练,则会感觉很快很方便。
- 尽量不用右键菜单。为什么?减少点击。当年一个美国同事这样培训我们:右键菜单被称为“hidden functions”,是比较tricky的stuff,能不用尽量不用,我们印象很深刻。没错,这几年经常看到几近花甲的工厂老人在用2BizBox,他们一生搬零件或画图纸的手拿起鼠标来却可能显得笨拙颤抖,不要说右击菜单,就是单击和双击对他们都很难。对于他们来说,右键菜单这个东西绝对是够tricky的。可千万别说这些人蠢,ERP的用户就是这些制造业的劳苦大众,不都是程序员和游戏狂人,他们甚至整年少碰电脑。我们程序员的任务是让软件适应人,而不是让人适应软件。我们永远都不要嘲笑自己的用户。另外,右键菜单是把固有的功能“藏起来”,如果不动手,光靠眼睛看,是无法观察到这些功能的,违反了“一目了然”的原则。一个界面如果不能通过观察就可以大概猜测出其功能和用法,则是比较失败的。所以右键菜单应当慎用。
为了减少点击,2BizBox对功能的组织可谓费尽心机。在主界面上就有如下体现:
- 主菜单:罗列了所有模块、子模块的所有功能点,并保持了2层菜单结构。这里像一个功能字典,让初次接触2BizBox的用户可以滑动鼠标,快速了解2BizBox的模块和功能。隐藏较深的功能,也可以通过主菜单,快速进入任何功能入口。有人说菜单这个东西很土,有点过时了。不过无论采用什么技术,“易用性”永远不会过时。
- 模块栏:模块栏把2BizBox中所有的模块、子模块经过筛选和组织,直观的放在一起。同时,配合屏幕中间的模块关系流程图,能够更清晰的了解模块的组织结构和关系。
- 快速任务列表:当选中任意模块或子模块,右侧的“快速列表”都会直接过滤并显示当前选中模块的常用功能。“快速列表中”显示的都是经过精挑细选、用户最常用的功能,并通过几个经典易懂的图标来快速标示其“添加”、“修改”、“查询”的功能类别。直接点击,即可进入该功能界面。
- 快速访问视图:如果说“快速任务列表”无法直观的给出每个功能的查询操作参数,那么“快速访问视图”则可以解决这一问题。在这里,罗列了本模块最最常用的一些功能入口,并直接给出了该功能需要输入的各种参数。这样,用户可以一目了然的看到每个功能和参数,直接输入参数并点击按钮进入功能界面。
- 模块快捷按钮:在模块图上,每个模块节点的右边都有三个小图标,对应三个快捷按钮。这三个快捷按钮,是该模块最最最常用的三个功能,可以直接点击进入,进一步减少点击次数。
2BizBox ERP中文版(内部预览)
你可能会说,至于这么大动干戈的减少点击次数么?好,咱们举一个例子吧:假如你做的一个2BizBox界面会被1万人使用,或者说,2BizBox软件足够lucky,可以被100万人使用,而这些人每天都至少操作这个界面一次。如果你的界面设计增加了一次点击,按每次点击用时1秒,你知道这次设计每年会消耗掉多少时间吗?100万人*360天=3.6亿秒=10万小时=12500个工作日=568个工作月=近50工作年。如果按一个人一生工作35年计算,你的这个设计不亚于毁掉了一条半人命。这是在犯罪、在杀人,不是吗?
- 大小: 36.8 KB
- 大小: 8.4 KB
- 大小: 59.3 KB
- 大小: 1.5 KB
- 大小: 28.1 KB
- 大小: 87.8 KB
- 大小: 6.3 KB
- 大小: 15.1 KB
- 大小: 66.9 KB
- 大小: 29.7 KB
- 大小: 133.3 KB
- 大小: 166.9 KB
- 大小: 77.2 KB
- 大小: 38.5 KB
- 大小: 175.9 KB
- 大小: 175.9 KB
- 大小: 192.6 KB
- 大小: 148.9 KB
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
|
返回顶楼 |
|
|
- knightc
- 等级: 初级会员
- 文章: 4
- 积分: 60
- 来自: ...
|
最近老板逼着我们几个兄弟给他搞生产信息管理. NND,我们几个只不过就是信息部的混饭的,哪里会那么多高深的东西,以往买人家软件,都是我们监管.喝人血的老板逼得我只好埋头学什么JEE,不过这两天跟了楼主的这几贴,好像这个东东挺合我们需求的,能给些这个系统具体使用的介绍不
|
返回顶楼 |
|
|
- t007hd
- 等级: 初级会员
- 性别:
- 文章: 1
- 积分: 30
- 来自: 南京
|
好长,减少点击确实能带来不少实用价值,不过大多数人看重的是美观,界面好像过于堆砌,容易审美疲劳,如果能用颜色区分出重要信息会更佳。
|
返回顶楼 |
|
|
- jorneyR
- 等级:
- 性别:
- 文章: 154
- 积分: 110
- 来自: 杭州
|
界面比较精致,但是不太喜欢这样的风格,个人尤其不喜欢里面的那个绿色(记得楼主最中意的就是此绿色哦,*^o^*),个人的品味不同而已,不是指不漂亮
|
返回顶楼 |
|
|
- glovebx
- 等级: 初级会员
- 性别:
- 文章: 89
- 积分: 80
- 来自: 杭州
|
非常不错,对我们做erp也有不少帮组。期待更多图片和细节
|
返回顶楼 |
|
|
- jacksv123
- 等级: 初级会员
- 性别:
- 文章: 16
- 积分: 0
- 来自: 广州
|
减少点击次数,说得十分有理,期待下一锤
|
返回顶楼 |
|
|
- sunway0628
- 等级: 初级会员
- 性别:
- 文章: 23
- 积分: 30
- 来自: 上海
|
发表时间:2011-01-15
最后修改:2011-01-15
期待楼主能多分享下经验,看了很受益。不知道现在能否支持切换风格,毕竟每个人的视觉不同。希望能早点推出汉化版!
|
返回顶楼 |
|
|
- flyfox1982
- 等级: 初级会员
- 性别:
- 文章: 8
- 积分: 30
- 来自: 上海
|
对于楼主的敬佩之情,犹如滔滔江水,连绵不绝。
|
返回顶楼 |
|
|
- zhajie
- 等级: 初级会员
- 性别:
- 文章: 58
- 积分: 20
- 来自: 杭州
|
我提一下问题
1、既然不使用ejb远程通讯,是不是等于不使用会话bean?那ejb用的有的憋屈。spring是不是更适合?
2、希望楼主能解释为什么没有使用hessian,或者spring的httpinvoker进行通讯。
|
返回顶楼 |
|
|
- kingwood2005
- 等级: 初级会员
- 性别:
- 文章: 65
- 积分: 0
- 来自: 韶关
|
不错,期待下一锤
|
返回顶楼 |
|
|