header_v0.7.32

监控系统PC软件界面设计过程简要

262天前发布

原创作品 / UI / 软件界面
作品版权由ciqingyijiu1314 解释, 禁止匿名转载;禁止商业使用;禁止个人使用。 临摹作品,同人作品原型版权归原作者所有。

一个成都本地的客户需求,甲方需要一个监控危险易爆物品的监控软件,能对监控器进行管理和查看,并附带一些监控器远程操作,今天将这个项目放出来是想给各位同学提供一下PC软件的设计思路和注意事项。

监控系统全局DEMO这里给大家一个全局的样式供查看。

PC登录窗口
一个产品肯定离不开一套设计规范,我们从登录注册界面开始,首先整个软件的主色调是天蓝色,定好主色调之后,我就可以开干了。

登录窗口扩展—因为登录的方式和连接的IP需要各种不同的参数,所以登录界面有动态的扩展设置效果,在这个登录界面之后便是我们的加载动效界面

登录加载界面—这个界面的设计是因为在登录过程中可能会有长时间等待的情况出现,这个网络电脑有关,为了避免用户在使用的时候枯燥所以设计了 这么一个界面,它还有一个作用就是提示当前进度情况,排除是不是电脑顿卡或者电脑卡死的情况,因为我们在使用一个软件的时候,有时候等的时间很长明明是电脑卡死了,但我们还以为是在软件启动中,这造成了我们浪费过多的等待时间,而有这个loading界面的存在则可以表现是软件是否正常启动。

监控软件主界面—成功登陆过后这就是主界面了,从主界面能我们能看到 大部分应用功能和设计布局,在这个界面我们要关注的是,任何一个PC软件的设计 图标和状态都有4种交互行为分别为:可用、禁用、选中、点击,所以需要对这些功能项的图标和状态进行4种设计。
PC端软件设计还有一个需要同学们注意的就是,全屏尺寸和窗口尺寸,所以市面上的PC软件没有统一的尺寸规范,这导致让我这个菜鸟绕了很多的弯路,比如我天真的以为桌面软件和Web设计一样,就设计一个全屏的尺寸就好(小Tips:一般网页设计的尺寸是1920x1080)现在回忆起来我真的是Too young Too simple。当我以全屏的思路去设计这款软件时,整个软件根本没法直视。在开始设计之前,我要给大家几点建议,第一,要和开发定好最小窗口尺寸,就拿我做的这个产品来说,我们设置的最小窗口尺寸为1300x750。因为你只有定好最小窗口后,设计才好进行,开发的同学也才能去做适配。定好最小窗口后,我们就可以开始设计整体的框架了。

全尺寸为1920,兼容最小PC尺寸适配
因为我们的开发团队技术都是老司机了,所以这次在开发环节少走了很多弯路,设计桌面软件的切图远比APP要轻松太多,你们只要照着你设计出来的icon来切图就OK,标注的话就以最小窗口化来标注,如果产品过程中遇着加载动效,建议直接AE撸GIF,WPF框架是支持直接加载GIF的,我们整个软件用C#语言完成,因为现在WPF这个框架已经比较成熟,我感觉PC设计火起来指日可待。

5

作品信息

  • 创作时间

    2017/03/07

相关作品 收录收藏夹 TA的主页
监控系统PC软件界面设计过程简要
Hello PM 意见反馈
没有新消息
密码登录
短信登录
微信二维码登录

提示文案

提示文案

提示失败
提示成功