欢迎光临散文网 会员登陆 & 注册

BioSciTools重新设计美化UI

2023-03-09 20:50 作者:BioSciTools  | 我要投稿
  • 1.Update Description

  • 2.Design Beautiful UI

    • 2.1 Re-Design Menu and Submenu

    • 2.2 Re-Design ChoiceBox

    • 2.3 Re-Design Tools Drawer

    • 2.4 Re-Design Activated Tool Tab

    • 2.5 Re-Design Tool Cards

1.Update Description

BioSciTool v1.2.3
Website: https://bioscitools.github.io
Github: https://github.com/bioscitools/bioscitools.github.io

亲爱的BioSciTools用户:
此次更新带来前段时间开始筹划的BioSciTools重新设计用户界面(User Interface, UI),在克服Java原生比较丑的界面中付出了一定的心思,希望给用户带来现代化的、美观的、逻辑完善的操作界面,细节更细如下罗列。

2.Design Beautiful UI

重新设计BioSciToolsUI界面主要为了将自己的审美体现在程序的细节之处,优化用户的使用体验,完善程序的操作逻辑,最终美化效果如下。

图片
Figure.1 Re-Design BioSciTools

2.1 Re-Design Menu and Submenu

1.重新设计程序菜单分类和逻辑,将统计学可视化、转录组可视化、临床可视化、富集分析可视化皆归属到可视化菜单;
2.美化菜单栏展开后的颜色为淡蓝色带有些许科技风,并设置带有阴影的透明度类似毛玻璃效果,设计菜单栏下落位置为5px以及设计所有子菜单栏为圆角矩形;
3.应该会有用户注意到现在总菜单栏中可视化菜单栏包括了几乎所有程序,这是因为确实我有进一步增加其它分类的分析内容不仅可视化部分。

图片
Figure.2 Re-Design Menu and Submenu

2.2 Re-Design ChoiceBox

1.原生自带的Choicebox选择框过于生硬,因此我想着需要实现两点以实现灵动的效果,将下来选择框设计为圆角矩形,及将下拉选择框设计为透明淡蓝色,最终效果如下。

图片
Figure.3 Re-Design ChoiceBox

2.3 Re-Design Tools Drawer

1.工具箱重写Java原生界面,同样以淡蓝色背景设计科技风,字体和图标增加深蓝色阴影凸显;
2.工具箱每个分类增加对应的彩色图标,这也是上述菜单栏美化需要提到的重点,方便用户快速识别分类。
3.每个分类增加程序数量标签。

图片
Figure.4 Re-Design Tools Drawer

2.4 Re-Design Activated Tool Tab

1.之前打开多个程序的时候激活的Tab按钮显示不够突出,此次设计为未激活的Tab为淡绿色,激活的Tab为淡红色,效果如下。

图片
Figure.5 Re-Design Activated Tool Tab

2.5 Re-Design Tool Cards

1.为首页的所有Tool Cards添加淡蓝色辉光,展示科技风;
2.为工具卡片的标签添加淡红色背景;
3.淡化工具分类的背景颜色。

图片
Figure.6 Re-Design Tool Cards

国庆节愉快!

BioSciTools重新设计美化UI的评论 (共 条)

分享到微博请遵守国家法律