TileTool icon indicating copy to clipboard operation
TileTool copied to clipboard

WIP: 设计阶段:设计漂亮的 UI

Open walterlv opened this issue 4 years ago • 16 comments

目前的 UI 尚在设计阶段,当前代码还是空的。设计稿如下。

主界面

  1. 允许设置界面亮色或暗色,这样可预览亮和暗色下开始菜单磁贴的样子;
  2. 主界面仅包含磁贴相关的选项;
  3. 已引用了我的源码包,可实现鼠标滑过的高光效果。

image

image

关于界面

设计中……

  1. 包含 GitHub 页面;
  2. 包含版本和作者信息;
  3. 包含开源相关的声明。

设置界面

设计中……

  1. 添加移除右键菜单;
  2. 对于 Windows 10 (2004),可设置磁贴背景类型(主题色 / 亮暗)
  3. 设置自动检查更新;
  4. 立即更新。

walterlv avatar Oct 12 '20 14:10 walterlv

@XIU2 看着感觉如何?

walterlv avatar Oct 13 '20 01:10 walterlv

哇奥,果然比我这个业余的强很多!

因为我以前没用过 WPF ,所以可能在 WPF 方面我没办法提供帮助,不过可以提供一些界面设计的建议,以及功能上的代码。

我只知道 WPF 是把 界面设计和软件开发 分开了,不知道写的代码和以前是不是一样。。。

XIU2 avatar Oct 13 '20 03:10 XIU2

@XIU2 我在整理现有 Form.cs 里的代码,将它拆成跟界面无关的。WPF 界面部分的代码只会跟 UI 相关,代码应该不多。

你原有的代码大部分会保留,只是去掉了界面部分,并且拆到了不同的文件中。

walterlv avatar Oct 13 '20 03:10 walterlv

目前的进展:

  1. 样式如下图(实测截图)
  2. 尚未移植任何逻辑进来
  3. 鼠标划过、点击特效、键盘操作等样式都已加入

image

walterlv avatar Oct 18 '20 12:10 walterlv

所以现在是只剩下功能代码了吗?

还有个问题就是是否有必要多个磁贴预览框?
你预想多个预磁贴览框的使用方式是什么样的?

我当初写这个软件的时候想过,两种需求,一种是现在使用的单个单个添加/修改磁贴,一种是批量操作。
只不过批量操作时操作逻辑可能比较复杂,特别是在新版磁贴取消自定义磁贴背景颜色后,应用途径就窄了。
以前的话,可能批量修改背景颜色才会用到批量操作。
现在的话,感觉意义不是很大。

我想要操作尽量简单,无论是单个预览框还是多个,依然需要一个个操作,只是预览效果的话,软件也无法知道用户的磁贴摆放位置,旁边都是哪些磁贴,所以这多个磁贴预览框感觉有点。。。

XIU2 avatar Oct 18 '20 12:10 XIU2

@XIU2 目前,放到旁边的,都只是纯色块的示意,不提供定制。

另外,看到你自定义磁贴的代码是修改了应用程序的磁贴清单,而这种方式是能单独修改一个程序的磁贴背景色的(至少我之前为我的 Win32 程序设计磁贴是是可以定制的)。

walterlv avatar Oct 18 '20 13:10 walterlv

是我理解错了么,我看你的示意图有多个磁贴预览框,我以为是点击或拖入 软件/快捷方式 ,然后再修改磁贴样式。
选中 预览框A 则编辑对应的软件磁贴样式,选中预览框B、C、D... 同上...

你的意思是其他的磁贴预览框仅仅只是放上去看,而不是来一个个编辑磁贴样式的吗?
感觉有点多余,我当初写软件的时候,磁贴预览框想过两种情况。

一种是当前这样,简单,但是只能看到单个磁贴的效果。 一种是读取磁贴信息模拟开始菜单环境,这样可以看到这个磁贴放在开始菜单中的整体效果,但是很显然微软没有提供相应的接口,虽然可以通过开始菜单目录下的快捷方式去知道有哪些磁贴(但并不一定是),但是无法知道磁贴的排版情况,也就无从模拟,所以妥协后就选择了前者,让用户大概预览一下,然后再添加到开始菜单预览总体效果。


Win10 2004 手动注册表开启新版磁贴样式后,就不再支持自定义磁贴背景颜色了,统一为系统主题色。
后续的系统版本已经默认开启新版磁贴样式了。

我原本 C# 重写后就以新版磁贴样式为主,去掉了自定义背景颜色功能,但是目前还有不少人停留在 2004 以前,所以我后来又给加上了。

XIU2 avatar Oct 18 '20 14:10 XIU2

当初 C# 重写的时候,就想着搞好看点,但事实证明我确实没这方面天赋,折腾半天直到现在我也始终不满意,但是我也不知道该怎么搞。

我就想找个好看点的软件,抄一抄界面设计,但是抄都不知道从哪里抄。。。
我也想过,用 HTML+CSS 搞界面可能还好发挥点,但显然对于这种几十KB的小工具而言,加个浏览器内核有点夸张了。。。

XIU2 avatar Oct 18 '20 14:10 XIU2

@XIU2 你说得有道理。

左边的那些示意性的磁贴很可能会造成误解。我想想看能否有办法解决。

办法一:如你所说,去掉多个磁贴只留一个

好处,当然是没有理解成本了。

不过,我这里弄了旁边的一些磁贴是为了“可玩性”,因为他们是把开始菜单的交互特效都做出来了的,鼠标划过、点击有好玩的效果。所以去掉了之后,就会显得单调些。

去掉之后,我需要想想布局怎么设计会显得好看些。如果你打算这么做,我可以试试。

办法二:真的做个历史记录功能出来,从第二排开始,就放之前曾定制过的磁贴

也要把历史记录的标题给写上去,这样用户能通过文字提示知道这些磁贴是有功能的,能避免歧义。

于是用户选中历史磁贴可以切换当前正在编辑的磁贴。然后,提供右键删除历史和清除历史。

办法三:预设一些不可编辑也能一眼看出来跟自定义无关的磁贴

这样,也许很容易能知道这只是示意而不是真的在定制磁贴吧……

walterlv avatar Oct 18 '20 14:10 walterlv

方法二的话,操作逻辑有点麻烦。

  • 首先,直接打开软件,显示历史记录,是所有预览框都占用了,还是预留一个空的,而这个空的位置是哪里比较好。
  • 其次,[历史记录] 这个提示放哪里比较好值得商榷。
  • 最后,是否要定下主预览框和次预览框(即有个预览框是专门用来处理当前磁贴,剩下的为历史记录),两者是否要分开,如果要分开那么编辑历史记录的磁贴时,是否要交互两个预览框;如果不分开,那么用户是否会迷糊当前的磁贴预览框。

这些处理不好容易出现 BUG ,以及用户操作复杂。


方法一的话,最简单,延续以往的操作。

但是如何设计布局是个问题(就像现在一样,细长,宽度和高度比例差距太大,看起来不协调)。


我个人是倾向于 方法一,主要是简单,界面大改后不会再出现什么 BUG,因为目前已经是最稳定的版本了(近一个月没有任何人向我反馈 BUG 了,仅我的网盘平均每天有近百人下载吧),明显的 BUG 都已经修复完成。

我不想再完成一次界面大更新后,又出现一堆小 BUG,然后又有用户来向我反馈,我再去修复 BUG,这样折腾就得不偿失了。

所以我想的是,这次主要是对界面进行更新,功能/操作逻辑依旧延续以往。


我是始终认为这个软件的定位就是个小工具,软件功能限制了它只能是个小众的小工具。
而作为一个小工具,简单才是最重要

XIU2 avatar Oct 18 '20 14:10 XIU2

01

我在看 磁贴效果演示图 的时候突发灵感,于是用 PS 改了下图片,这才有点我当初重写软件时理想的界面
可惜我当初没想到去模仿磁贴的样式去设计软件界面。。。当初只想着扁平化,结果搞了个四不像。。。

软件背景颜色比主题色深一点,磁贴、输入框、按钮的背景颜色比主题色浅一些。(就像开始菜单一样)

就是开始菜单的毛玻璃透明效果我不知道怎么实现。


我在想,你能不能把软件鼠标焦点高光效果放到输入框上面,把输入框做成磁贴的感觉,虽然是细长细长的。

另外,输入框的名称(程序路径 这种),能不能做到输入框内,就像我原来那样(虽然我是硬仿的 HTML 输入框效果)。

基于下面这张图修改的。

XIU2 avatar Oct 18 '20 15:10 XIU2

@XIU2 我的QQ,***,细节较多,建议即时沟通。

以你的建议为准,所以我想沟通下细节。

walterlv avatar Oct 18 '20 23:10 walterlv

@walterlv 加了。

XIU2 avatar Oct 19 '20 03:10 XIU2

@XIU2 不好意思,发现 QQ 号给错了……重新加一下

walterlv avatar Oct 19 '20 03:10 walterlv

@walterlv 加了。
我说怎么等了一个小时都没人呢。

XIU2 avatar Oct 19 '20 03:10 XIU2

别的我不会,只能喊666了

Sukariui avatar Nov 06 '20 08:11 Sukariui