狐表软件如何设计才漂亮?用实战项目教你10个必须掌握的技巧

发表日期: 2022-09-05

为什么要掌握设计?

将来无论你是否用我的框架,你都会掌握做一套自己的软件的能力。但是无论你用什么工具开发,都离不开用户交互设计

软件的美观程度,也许不能决定项目费用的上限,但绝对能保住你的下限。


学我的东西,学的不只是几段框架代码的复制,而是一种良好的思维习惯。


这次分享的E1迷你库存管理系统,是结合以下设计理念的实战,每个理念都在源码里有所体现,大家可以仔细观察。


技巧1.学会用色

每款软件都有自己的主体色调,所以我们在一开始,选好狐表的主体后,再从下面挑一组配色,然后做图的时候,都尽量只从里面选颜色,就能达到一个很好的颜色协调。整体色调一致后,软件就不会看起来很山寨

image.png

所以这个软件界面颜色是这样的

image.png

image.png


image.png


千万不要用花里胡哨的颜色,不然你的软件就会看起来像个山寨手机,浓浓的跑马灯风格,见下图

image.png

你上下对比一下,感受一下,你懂的…

image.png

技巧2.设计四大原则1:亲密性

尽量把相同的功能、相似元素的,靠近放在一起

image.png

image.png

image.png

技巧3.设计四大原则2:对齐性

每一个元素尽量都有一个对齐基准线,不要毫无依附随便放一个位置,慎重居中这种毫无准线的东西

image.png

image.png

技巧4.设计四大原则3:对比性

把功能不同的,尽量形成鲜明对比

image.png

有时候对比,也不一定是功能不同,也可能是很具有对称性功能的,让人一眼区分出它们相反的含义

image.png

技巧5.设计四大原则4:重复性

有规律相似性的元素,用完全一样的风格,重复出现

image.png

image.png

image.png

image.png

image.png

技巧6.多一些说明文字

多写几个字,多一份关怀,尽量不要让用户产生困惑,少一些售后。

image.png

image.png

image.png

技巧7.找合适的图标

很多人乱用图标,甚至删除按钮都放个绿色新建的图标,这种情况还不如不放。

图标能更吸引用户,且更直观表达意思,所以一定要用好图标。

例如本案例里用的图标是这样的:彩色+圆形+统一尺寸,尽量保持一致(也没叫你必须绝对一致,做人不能这么死板)

image.png

推荐一个我找图标的网站:https://www.flaticon.com/

image.png

image.png

还有,注意图标也尽量保持一致性,例如你看我很多都是圆形背景+彩色。你不要彩色、黑白、缕空混搭,一样很丑,类似下面几个就不要混用,选中一种风格,就一路走到黑

image.png

技巧8.注意Tab按键顺序

image.png

技巧9.为用户写更新日志

更新日志,显得你做事有交代,公司软件开发流程规范,软件售后有保证,能大大增加客户信任度。(就好比每次狐表更新,大家都想知道更新了什么,修了什么,而不是无端端又更新)

别偷懒,哪怕你写几个字,说修了个极其罕见的bug,客户也会更放心。而不是无端端更新,以为你偷偷加了什么代码进去偷我数据,或者卡我使用想搞钱。

image.png

技巧10.为长时间执行的业务增加等待窗口

长时间执行的代码,加个等待窗口,让用户等待,增加友好度,一般这在web领域叫遮罩层。虽然狐表Exe的UI框架里并没有集成这个,但是可以自己变通实现试下,代码也很简单,参考我之前发的分享https://www.mbldt.com/ExpShare/212.html

image.png

loading.gif1-221129163Z6164.gif

该遮罩层特色:

  1. 代码简单,控制开关也简单。

  2. 支持圆角和透明窗体效果。

  3. 可以自定义加载中的gif动画,添加你的自己的logo,(需要你有PS功底)。

  4. 提供通用简约的GIF图,能用于任何项目场合,不搞怪异化。

  5. 弹出位置在屏幕中间+向上偏移150像素,这就不会挡住业务代码出错时的MessageBox窗口

  6. 无内存泄露【重要】。试过连续打开关闭500次,内存在10M内波动,不会无限增加,程序不崩。


随便看看
商务联系QQ : 2385350359

Copyright 2016-2023 江门蓬江区华越科技公司 版权所有 | 承接软件定制开发,欢迎联系
粤ICP备19148806号-5