必做作业三_ShareX结构化原型设计
由于之前一直做的对于屏幕图像的截取与绘制作业,本次作业在网上下载了shareX的源码进行编译运行,并给出有关界面的相应修改,因为功能已经很完善,相应附加功能也做的很棒,但是界面还是很原始的用的C#中winform自带的原始控件进行的设计。这一点让该软件的UI设计和一些其他同类产品包括付费产品的竞争变得无力。所以这次作业想在这个开源项目的基础上进行一些分析改进,因为之前做过C#的Winform的程序,所以对于一些界面的更改以及插件的变动会比较熟悉,另外会去尝试添加新的更人性化一些的功能。
程序编译运行结果原图:
程序主界面原图:
一 对于启动的优化
首先可以对该程序做一个启动页面,原因一方面可以使得软件看起来更加正规,另外能够给人一些及时的反馈,提升用户体验。启动页分为两种,比较简洁一点的像anaconda等程序一样,用logo的png图片作为启动会给人一种该软件反馈快,并且简洁赏心悦目的感觉。如下图
或者偏设计一点的,用一些设计好的图片作为启动页。下面是这个启动页自己设计的效果。
二 对于界面的美展示了
现对于Win form程序进行美化的工具很多,方式也很多。在这里我选择下载了DevExpresss来对于该项目进行界面上的优化。
首先是对于主界面的优化,打算做成如下图所示的案例一样,把原来在左侧的选择栏放到上边顶格,然后把在其内的每一个功能都做成如图中第二排所示的样例。由于此工程需要花费较多时间,目前还没有完工,现在只是示例样品。
其实这个项目完全可以撑得起这样的设计,因为就现在程序所有的功能而言,已经够多。这样做的好处是可以把ShaerX越做越大,能够满足使用者关于图像和视频各方面的需求,从而取得更大的成功。(此案例原型来自于DevExpress中的winform demo,由于这种demo有现成的插件可以使用,可以大大提高开发效率,并且这个软件也是专门针对于这方面需求所设计的)
另外对于目前窗口布局和大小的改进,对其中一些不合适的弹出框窗口做了调整。
资源下载
自己编译运行的ShareX下载地址:https://pan.baidu.com/s/1PrJ-pWnWl4QjQhD5xoe4YA 密码:m1gx
官方的下载运行ShareX地址:https://getsharex.com/downloads/
Evcexpress破解下载
ShareX Github开源地址:
https://github.com/ShareX/ShareX
参考资料
另外现在有提供的关于C# winform自动去美化界面的工具 参考:
https://blog.csdn.net/kevinmeanscool/article/details/74010908
https://www.codeproject.com/Articles/43181/A-Serious-Outlook-Style-Navigation-Pane-Control
https://blog.csdn.net/abstract_js/article/details/80657997
https://blog.csdn.net/david_520042/article/details/50621659
https://blog.csdn.net/u010786215/article/details/52915803
C# Winform 窗体美化(二、LayeredSkin 界面库)
https://blog.csdn.net/arrowzz/article/details/70182395
http://www.dxper.net/documents/
--------------------------------------------------------------------------------------
补充内容:
上次已经阐述大部分工作的主要内容,现就主要界面更改做gif动图演示
这个30秒的GIF动图主要展示了关于修改后的界面的大致布局
但是有部分功能还没有实现 如果把SharX移植过来需要非常多的时间去做,而目前做的只是一个大致框架 要把原来的界面结构形式转为这种管理形式
打算对于图片 动图 以及视频的整理查看可以分为相册 文件夹 和其他的分类 这个按钮都放到了左下角 然后还可以对于该图片进行评分 进行多选等操作 十分方便使用者去管理该软件
右边操作界面还有对于上边缩略图的显示 右下加还有一些小工具的显示 由于ShareX的小工具非常多,可以在这里进行展示。
利用这种缩略图的形式也更加直观形象地表现出软件特色,呈现出一种易于操作地感觉。
另外关于源码的更改在上面已经说过了 ,对于具体界面的调整上边有提到不再赘述。