Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 12 commits into
base: master
Choose a base branch
from

Conversation

walterlv
Copy link
Contributor

@walterlv walterlv commented Oct 12, 2020

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

主界面

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

image

image

关于界面

设计中……

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

设置界面

设计中……

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

@walterlv walterlv changed the title 设计阶段:设计漂亮的 UI WIP: 设计阶段:设计漂亮的 UI Oct 12, 2020
@walterlv
Copy link
Contributor Author

@XIU2 看着感觉如何?

@XIU2
Copy link
Owner

XIU2 commented Oct 13, 2020

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

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

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

@walterlv
Copy link
Contributor Author

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

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

@walterlv
Copy link
Contributor Author

walterlv commented Oct 18, 2020

目前的进展:

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

image

@XIU2
Copy link
Owner

XIU2 commented Oct 18, 2020

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

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

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

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

@walterlv
Copy link
Contributor Author

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

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

@XIU2
Copy link
Owner

XIU2 commented Oct 18, 2020

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

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

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


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

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

@XIU2
Copy link
Owner

XIU2 commented Oct 18, 2020

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

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

@walterlv
Copy link
Contributor Author

@XIU2 你说得有道理。

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

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

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

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

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

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

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

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

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

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

@XIU2
Copy link
Owner

XIU2 commented Oct 18, 2020

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

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

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


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

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


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

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

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


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

@XIU2
Copy link
Owner

XIU2 commented Oct 18, 2020

01

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

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

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


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

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

基于下面这张图修改的。

@walterlv
Copy link
Contributor Author

walterlv commented Oct 18, 2020

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

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

@XIU2
Copy link
Owner

XIU2 commented Oct 19, 2020

@walterlv 加了。

@walterlv
Copy link
Contributor Author

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

@XIU2
Copy link
Owner

XIU2 commented Oct 19, 2020

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

@Sukariui
Copy link

Sukariui commented Nov 6, 2020

别的我不会,只能喊666了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants