熟悉我的朋友都知道,这些年,我用MATLAB写过的大大小小的GUI工具,不下一百个。
其中有自己用的,也有通过百度云分享给大家用的,还有在公司内部用的。
其实,对于GUI开发者来说,最头疼的,肯定不是功能算法的实现,而是自己写的GUI工具要开放给别人使用。
分享给别人使用,就意味着,人人都将会是这款工具的产品经理。你会收到永无止尽的“建议”:
“我按这个按钮,为什么会报错,你的工具怎么不考虑这种情况”
“你这个返回按钮怎么放右边,你见过哪个App的返回放右边的?”
“你能不能帮我加个类似于格式刷的按钮,每次点,好累”
无数次,我内心OS + 翻白眼
“妈卖批,我真特么是闲的,秀什么工具,留着自己用不就行了”
不过,这么多年来,我GUI开发技术开始突飞猛进,也正是从工具分享开始的。
早些年写过的工具,虽然功能上很给力,可是界面也实在丑的没法描述。
有给电池系统开发的参数计算工具
有自己造轮子写的录屏工具
还有开发的扫描工具。不服扫描王的会员去水印,是我作为程序员最后的倔强!
那么,今天我就来总结一下,这些年来,我常用的几种方式来包装自己的GUI工具。
前阵子,我老板让我把HaoFind在组里推广一下。于是,我打算,把HaoFind做得稍微国际化一些。
在我研究了将近一个小时的Google的Logo之后,我决定要给我的工具加一个特有逼格的开机动画,最好是能让人虎躯一震的那种!
好吧......虽然看起来确实有些山寨,不过每次我在用HaoFind看到开机动画的时候,心情还是蛮好的
从以前的工具界面上看,觉得那时候的界面设计很不美观的其中一个原因是,满屏幕都是冷冰冰的按钮。
所以,在之后的GUI开发过程中,我通常不会把所有按钮都集中在同一层界面上,会根据调用的先后顺序,进行划分。
同样,在界面的设计上,会增加一些图形与色彩的元素。
举一个HaoTemplate的例子
除了按钮功能的划分之外,在按钮的定义上,我也不再只是简单的通过按钮与单词的组合来定义了,而是用一个个图标来代替。当然,这里需要注意的是,图标背后所对应的用户习惯与刻板印象。
这类的图标很多,也很常见,你可以比较各个App,在其中,很多按钮都会有同样或类似的图标,比如返回按钮,添加照片按钮,等等。
还是举HaoTemplate的例子
因为这是一款针对Excel生成模板脚本的工具,所以其中大部分的按钮,我都不需要通过定义名字,而是直接加入图标就行。甚至有时候,英文版Excel用不习惯的朋友,反而认不得Merge是什么意思,相反,看一眼图标就知道对应的功能了。
在我开发GUI工具的后几年,我在研究用户友好度所花的时间,丝毫不亚于本身算法功能开发。
一个蛮深刻的例子是,曾经有一段时间,我一直在思考,怎么让用户一下子就明白,这个编辑栏是干什么用的,应该输入写什么,但是又不会额外费劲去删掉这些提示词。
后来,我在有道词典上找到了答案。
同样,我把这个小细节,几乎运用到了大部分的工具中,举个HaoModelling的例子
最后再举一个关于用户友好度的例子,关于曾经我模仿过老罗的锤子手机里的一项功能,叫做大爆炸。大爆炸的功能体现是,长按一段话,一段话就会按照词组拆分开,方便后续的选择,复制,或再编辑。
我觉得,这个功能实在是太适合我的AutoSAR缩写词典了,于是就把功能加入了HaoNaming中。
以上,就是关于我对GUI工具界面设计的一些分享,虽然我并不是设计专业出身,不过这是我在很长一段时间里 ,通过自己的学习,理解,模仿然后到最后的总结。希望对大家的GUI开发有所帮助。
同时,我还想分享的是,像我这样本职工作并不是工具开发或者是设计方面的朋友,平时没有机会得到专业的指导,其实可以多加留意生活中经常使用的软件和App,它们的成功与普及不无道理,最起码,在用户友好度和界面设计上,还是很值得我们学习与模仿的。
最后,介绍一下最近我举办的一个关于MATLAB GUI的实战训练营。今天所分享的内容,也将会是这个训练营之后的练习题。
这个训练营很有意思,虽说是我举办的,但是我不提供任何代码,每期任务结束也没有任何答案。
而我在其中要做的,就是掌握进度,确定下阶段要掌握的技能,以及Review结果。
目前看来,实战训练营的效果还是很不错的。同时,我打算在结束这次GUI实战训练营之后,将会陆续开展<提高工作效率的训练>,<Simulink入门训练>等等。