将来无论你是否用我的框架,你都会掌握做一套自己的软件的能力。但是无论你用什么工具开发,都离不开用户交互设计。
软件的美观程度,也许不能决定项目费用的上限,但绝对能保住你的下限。
学我的东西,学的不只是几段框架代码的复制,而是一种良好的思维习惯。
很多新手做的软件,功能很好,但是界面都不咋样,他们也不知道为什么会这样,想变好,也不知道怎么入手。
虽然狐表的UI不算漂亮(例如跟ElementUi、iViewUi比),但是我们还是有办法做到工整美观的。
又或者说,就算用最潮流的UI,没有好的产品设计布局理念,用户操作体验非常反人类,产品一样很难用,给人很垃圾的感觉。
这次分享的E1迷你库存管理系统,是结合以下设计理念的实战,每个理念都在源码里有所体现,大家可以仔细观察。
每款软件都有自己的主体色调,所以我们在一开始,选好狐表的主体后,再从下面挑一组配色,然后做图的时候,都尽量只从里面选颜色,就能达到一个很好的颜色协调。整体色调一致后,软件就不会看起来很山寨
所以这个软件界面颜色是这样的
千万不要用花里胡哨的颜色,不然你的软件就会看起来像个山寨手机,浓浓的跑马灯风格,见下图
你上下对比一下,感受一下,你懂的…
尽量把相同的功能、相似元素的,靠近放在一起
每一个元素尽量都有一个对齐基准线,不要毫无依附随便放一个位置,慎重居中这种毫无准线的东西
把功能不同的,尽量形成鲜明对比
有时候对比,也不一定是功能不同,也可能是很具有对称性功能的,让人一眼区分出它们相反的含义
有规律相似性的元素,用完全一样的风格,重复出现
多写几个字,多一份关怀,尽量不要让用户产生困惑,少一些售后。
很多人乱用图标,甚至删除按钮都放个绿色新建的图标,这种情况还不如不放。
图标能更吸引用户,且更直观表达意思,所以一定要用好图标。
例如本案例里用的图标是这样的:彩色+圆形+统一尺寸,尽量保持一致(也没叫你必须绝对一致,做人不能这么死板)
推荐一个我找图标的网站:https://www.flaticon.com/
还有,注意图标也尽量保持一致性,例如你看我很多都是圆形背景+彩色。你不要彩色、黑白、缕空混搭,一样很丑,类似下面几个就不要混用,选中一种风格,就一路走到黑
更新日志,显得你做事有交代,公司软件开发流程规范,软件售后有保证,能大大增加客户信任度。(就好比每次狐表更新,大家都想知道更新了什么,修了什么,而不是无端端又更新)
别偷懒,哪怕你写几个字,说修了个极其罕见的bug,客户也会更放心。而不是无端端更新,以为你偷偷加了什么代码进去偷我数据,或者卡我使用想搞钱。
长时间执行的代码,加个等待窗口,让用户等待,增加友好度,一般这在web领域叫遮罩层。虽然狐表Exe的UI框架里并没有集成这个,但是可以自己变通实现试下,代码也很简单,参考我之前发的分享https://www.mbldt.com/ExpShare/212.html
该遮罩层特色:
代码简单,控制开关也简单。
支持圆角和透明窗体效果。
可以自定义加载中的gif动画,添加你的自己的logo,(需要你有PS功底)。
提供通用简约的GIF图,能用于任何项目场合,不搞怪异化。
弹出位置在屏幕中间+向上偏移150像素,这就不会挡住业务代码出错时的MessageBox窗口
无内存泄露【重要】。试过连续打开关闭500次,内存在10M内波动,不会无限增加,程序不崩。