前言:前面简单的发了几张项目的效果图。接下来将美工参与设计的界面发出来分享。我会尽量分出时间将发表在TWaver中文社区里文章一个个挪过来。当然里边其他美文在这不方便拷贝,对UI技术感兴趣的朋友可以进去看看。
对Swing的抱怨和批评从来就没有停止过。不过从以前的铺天盖地,到后来的见怪不怪,到现在的冷冷清清。似乎人们早就已经浸淫在无处不在的web和满天飞的RIA之中,懒得去理会Swing这个老古董了。难道Swing真的到了日薄西山、穷途末路的地步?
大家对待Swing的态度从来就不缺乏偏见。作为Java的桌面UI技术,其实它和MFC、VCL、Winform、WPF以及Flex、Silverlight一样,只是做界面的技术工具而已,本身并没有什么不好。只要计算机还用屏幕、键盘、鼠标来进行交互,这些UI技术(或其后续改良继任者)就会始终存在。无论哪个UI技术,说到底都是在屏幕上画图,本质上都是画点、划线而已,只是有的用起来复杂,有的简单,有的功能强,有的功能弱。不过对于技艺高超者来说,给个邮票大的地方也能跳出激动人心的舞蹈,Flex不就是在Flash这块邮票上面不停的折腾么?这又和脚下的空间有多少关系呢?相比Flash/Flex这张小邮票,Swing则给了我们一个巨大的足球场。如果我们还是不能在这个舞台上吸引更多的观众,还是多反思一下自己的舞技吧,就算脚下的场地有点湿滑不平,我们也没必要喋喋不休。
Swing的设计的确有点过于概念化,导致结构比较抽象,对初学者来说确实比较费劲。记得最开始学习Swing时,弄个table还要创建什么TableModel,还有个AbstractTableModel,还有个DefaultTableModel…一头雾水。为什么不是table.addRow(String[] row)就ok么?直到慢慢理解了MVC,理解了更多设计模式,理解了action和listener监听,renderer/editor机制,UI代理、事件派发线程…才慢慢理解和掌握了Swing,编程水平也有了很大提高。而回头再看十年前用VB6写程序,DIM一个ADO、连接ODBC、拖拽一个文本框、设置属性绑定….简直就是工具的奴隶,一点软件设计的内涵也没学到,不客气的说真是害了一代人。
人类能发展在于善用工具。要把各种UI技术比喻成工具刀,Swing是哪类刀呢?有人说Swing连个TreeTable、日期控件都没有,真是原始社会(夸张点吧,怎么也算封建社会吧)!那么Swing就是这样一把刀了?
这把刀实在是吓坏了不少人。不过一些痛恨Swing的人会觉得很解气。要说有偏见吧,确实偏见是无处不在的。就像美国人鄙视日本人,日本人鄙视韩国人,韩国人鄙视中国人,中国上海人鄙视北京人,北京人鄙视天津人,天津人鄙视河南人,河南人鄙视新疆人,新疆人鄙视所有人…………..扯远了。其实熟悉一段时间Swing后,只要掌握了一些基本的MVC设计思路和常用组件的使用方法,就会发现,这把刀可以很锋利,可以说是“宝刀未老”,而不是“锈迹斑斑”:
不过对于很多非常简单的UI任务来说,Swing会显得很啰嗦、很繁琐。API浩如烟海,文档缺乏,一头扎进去半天出不来。我们头大,我们发狂:我要拧一个螺丝而已,你却给我下面这把刀:
所以,你家里需要准备一个单独的螺丝刀,用来拧螺丝;准备一把剪刀,用来剪纸张;一个刮胡刀,用来刮胡子;一把菜刀,用来切菜;还要一个指甲刀,用来剪指甲。虽然菜刀也能凑合割指甲,刮胡刀剁饺子馅也没意见(疯了),但是你显然不想这么做。所以,别抱怨Flex这把剪刀功能不够强,Silverlight这个螺丝刀功能不够多,Swing太复杂。作为Java平台的厂商,Sun除了推出Swing这样的全功能工具刀,还能如何呢?现实世界需求很复杂,只能尽量全满足。这就是生活。
所以,上战场除了带上冲锋枪,扛上火箭筒的同时,挎上GPS,腿上还要再绑上一把刀。程序员也是一样,多一项技能就是多一项武器,关键时刻一个都不能少,一个武器就多一个生存的机会。
工作原因,使用Swing好多年了。我很喜欢Swing。它复杂,它啰嗦,它功能强,它发展慢。不过我还是很喜欢,并在一些项目中使用。慢慢的,积累了一些在项目中使用Swing的经验。不这里先秀一个今天上午还在改的项目界面,希望大家喜欢。
首先说明一下,这是一个免费的ERP产品界面,只是一个原型和Demo,还没有被最终确认。图上面的功能、模块、数据都是假的,大家不要较真。由于ERP软件的模块和产品功能众多、业务逻辑复杂,程序的界面需要体现“友好、方便、易用”的原则。再加上其“免费”的重要特性,这里选择了绿色和灰色为基本色调,以橙色作为主要的辅助色,既不过于死板,也不过于花哨,体现了“绿色、环保、低碳(好像不太搭边哦)”的软件设计理念。
上图是ERP软件的主界面。窗口上下分别是菜单和状态栏,左侧是模块树,右侧是快捷功能列表,中间是具体数据和内容的显示区域,用多tab方式显示每个页面。为了考虑到绝大多数用户的屏幕尺寸,这里都以1024*768作为基本尺寸进行设计和抓图。可以看到中间的数据显示区域已经不是很宽裕。所以,程序加了一个功能:双击中间的tab头可以将左右闭合,增大中间内容页面的可见区域,如下图效果。可以看到,左右区域闭合后,还会露出图标以及tooltip文字,不影响继续使用:
中间的内容页可以显示任意Swing组件,例如放一些销售业绩图、报表、股票图(ERP里头不管股票吧,懂行的纠正一下下)之类,例如下图:
当然在ERP系统中,最多的还是各种枯燥的数据和报表,这时候表格还是最常见和重要的呈现方法。但是放在咱这里,表格也要做的清新、耐看一点,不能太审美疲劳:
或者,查找一下全球供应商或者客户分布及其业务情况:
好了,先上这几张图。如果大家喜欢,以后再上传更多。
做了很多项目和界面,有几个体会:
界面设计,一定要“美工先行”。也就是美术设计和效果图的设计工作要先于软件开发去做。在美工设计的阶段,大家一定不要考虑技术上的问题,别冲上去第一眼就“哎呦,这个不好搞”,”这个圆角和渐变咋弄?“,这是我们程序员的职业通病。大家是否发现,光靠程序员自己,几乎是无法做出真正好的UI?因为程序设计和艺术设计几乎用不同的大脑部位(具体是前脑后脑左脑右脑我还真没仔细研究),而我们程序员擅长的是逻辑思维,对发散思维的艺术设计则基本都“缺根弦”。比如我们写程序时候,要突出一个数据,我们就直接给设置颜色,先上setColor(Color.red);难看?换setColor(Color.green);靠,还不行?你啰嗦不啊?干脆直接setColor(Color.black)了事。你说,这界面怎么能好看。
严格执行美工的设计。一旦美工设计好了效果图,程序员应当”一个像素不差“的把它实现出来,而不要自作聪明的随意修改,或以”技术上不好搞“为借口退缩。要把界面设计当做艺术品一样对待。记住细节才是成败的关键和真正出彩的地方。上面的抓图,我们都是把运行结果抓图放大后逐个边框圆角甚至像素比对审核,做到”一丝不差”,这样才能真正的出设计精品。
把握”以用为本“的原则。软件是艺术,但不是艺术品,光看不碰;软件之本在于用。如果脱离了”易用“和”以用户体验为中心“的设计宗旨,一味的追求华丽、花哨,忽视了用户的使用体验,则容易本末倒置,哗众取宠,结果自然是一败涂地。
统一的风格。软件的整个界面设计要有鲜明的主题,甚至上升到其理念是什么。然后由专业的美工形成具体的色系,规定其使用方法,并体现到每个页面、每个按钮、每个像素中去。
相信通过这些手段,我们每个人每个团队都可以制作出高质量的软件界面,让使用者赏心悦目,让开发者心旷神怡,让老板心花怒放,让竞争对手心惊胆战!
后记:
如果大家对以上界面感兴趣,我将在后续文章中介绍本项目的设计思路、功能、实现方法,以及相关源代码。本项目主要用到的第三方的包有JGoodies和TWaver。同时希望通过这一系列文章,能够让大家重新认识Swing这把刀,用好这把刀,一路披荆斩棘、砍瓜切菜、攻城拔寨、再创辉煌!