思源默认主题的改进建议

讨论(吐槽)一下思源默认主题让人觉得不够现代化的点:

应用图标

应用图标是让人感受到应用主题风格的第一个东西,思源的应用图标我觉得该更新了,应用图标是红黑风格,而默认主题是蓝色,像 obsdian(紫)、logseq(明亮是蓝,暗黑是灰绿)、notion(黑白)就挺好,符合第一印象

主题控件

切换开关

  • 思源的

    image

  • ob 的

    image

  • logseq 的

    image

  • chrome 的

    image

显然思源的有点古早

标签页

标签页的风格

  • 思源的

    image

  • 思源 savor 主题的

    image

  • chrome 的

    image

  • win11 的 exploere 的

    image

  • ob 的

    image

显然思源的标签页也不够现代化,现代化的标签页都是与下方区域融为一体的,上方是圆角,下方是倒圆角,并且等宽可能感觉更好,也不是说思源这样的不行,不够现代化先不说,本身细节也是不合格的,savor 主题那种更好,不是 savor 特别好,而是 savor 那样才是及格线,思源的那个页签连悬浮高亮都没有

  • 默认

    image

  • savor

    image

我觉得直接改成现代化一点的风格是最好的,直接换吧

标签页的位置

建议与顶栏合并,不然上部空间全浪费了,除了思源,其他软件都是这么做的

像 savor 的那个顶栏合并功能就做得很好

image

输入框

  • 思源

    image

  • logseq

    image

  • ob

    image

思源的像 logseq 的,思源内部那个蓝色框太深,logseq 的颜色更柔和,不过个人更喜欢 ob 的风格,与整体风格更统一

关闭按钮

  • 思源

    image

  • logseq

    image

  • ob

    image

最大的槽点,几乎没有见到应用这样设计关闭按钮,独树一帜,但是,并不算好看

下拉框

  • 思源

    image

  • logseq

    image

  • ob

    image

  • microsoft edge

    image

  • chrome

    image

思源和 ob 的下拉框都延续了输入框的样式,而 logseq 不统一,个人还是偏向于 ob 的样式,与整体风格更加统一,旁边那个小箭头可以改改,思源那个不太行,直接抄 ob 的吧

纯图标按钮

  • 思源

    imageimage

  • logseq

    image

  • ob

    image

思源的图标一是太小了,在大屏上体验不佳,虽然可以整体界面放大,但是其他也会跟着放大,整体感受仍然不佳,所以应该适当调大图标按钮的大小,显得大气一点,也更加方便点击,二是图标太细了,给人的印象是瘦弱,发虚,ob 和 logseq 的图标显然更加饱满,三是图标没有高亮,ob 和 logseq 的激活的图标是偏深色,未激活的偏淡一点,观感更好,而思源没有做这个细节

并且逻辑上还是有 bug 的,有时候会显示主题色,有时候不会显示,我觉得不用主题色,直接做成 ob 那样的灰色背景更加简约,建议是直接抄吧

image

粗细要统一,可以看看,书签 + 插件 dock 内的图标本身就粗细不一致,顶栏插件的图标自成一派,最大化最小化关闭按钮又是自成一派,能不难受吗?反正我是快难受死了

主界面

顶栏

一是之前提过的,标签栏还是和顶栏合并吧

二是,我就称为思源的开始菜单吧,没有区分度,一点都不好看和图标按钮的风格一致,没有区分度

  • 思源默认

    imageimage

  • savor

    image

savor 的明显更有区分度,并且强调了主题风格

image

哪怕像 ob 这样也行呀,反正思源的就总感觉怪怪的,不是说丑,但就是觉得不好看

底栏

  • 思源

    image

  • ob

    image

  • savor

    image

底栏建议直接抄 ob 的,savor 主题就改得非常好,那么长一条就左边一点右边一点,其他啥也没,纯纯浪费

image

底部 dock 栏还不和底栏合并,两条栏,我敢说底部 dock 栏十有八九是没有用户在使用的,个人认为,要么直接取消底部 dock 栏,要么,无底部 dock 的时候,像 ob 那样显示底部状态栏,有底部 dock 的时候,和底部状态栏合并,整条显示,这个时候确实是可以的,至少,省出来了一条栏目的空间

插件图标风格

插件图标风格建议与主界面图标风格保持一致,如果不一致,强制转换一下,不然整体观感实在是不行,太花了

image

dock 栏

dock 栏的布局上

  • 思源

    image

  • ob

    image

思源是顶部有个 dock 的标题栏,然后按钮会显隐,而 ob 的是没有标题栏,按钮常显,固定居中

ob 更简约,我更喜欢 ob 的

想想思源的,按钮看不到,增加操作成本,dock 已经有了图标,dock 面板的标题栏还有再来一个图标,十分没有必要,也没有更加好看,复杂而不简约,可以直接抄 ob 的,或者是合理改进一下,反正我觉得,dock 的标题栏是没有任何存在的必要

image

或者,最低限度,去掉那个多余的图标也好,像 savor

其他

集市卡片的悬浮样式不好看

image

savor 的好看

image

感觉这种稍微变点颜色就好

image

或者是这种轻一点的阴影

默认主题悬浮样式阴影太重了,很突兀很奇怪

逻辑交互

焦点

主窗口焦点的逻辑太复杂了,感觉没有必要

imageimage

image

image

思源主窗口焦点的获得和失去,UI 的改变体现在三个方面,标签栏底部横条,顶栏颜色,dock 栏,太过复杂,逻辑细节上有些问题

大致就是,只有点击 dock 才会显示主题色,点击编辑区或者主窗口以外就不会再显现主题色

标签页只有在点击 dock 时会失去主题色,点击主窗口以外也不会失去主题色

某些点击的细节上,颜色改变也不太符合逻辑

ob 的焦点改变只改变顶栏颜色,chrome 也是这样,其他不会随着焦点改变颜色

确实没有必要,逻辑太麻烦,视觉上也不会有什么特别的提升

要么干脆就灰色的风格就好(这样比较简约),主题色体现在其他方面就好

点击

一些点击后的弹出菜单,例如:思源的开始菜单,插件的菜单

image

image

弹出后,想要菜单消失,由于编辑区可能存在链接或怕误点击,误拖动,一般倾向于点击顶栏,或点击主窗口外部,但是这两个地方点击都是不能让弹出菜单消失的,只有 dock 栏和编辑区可以,这是不合理的,希望改进

结语

有不合理或过于主观和片面的地方欢迎指正

其他更多的细节欢迎讨论交流

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22337 引用 • 89380 回帖
2 操作
Wolke 在 2024-10-20 09:25:13 置顶了该帖
Wolke 在 2024-10-19 19:59:26 置顶了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 切换开关

    确实不好看

    标签页的风格

    太方正了,我也觉得好丑

    标签页的位置
    建议与顶栏合并,不然上部空间全浪费了

    Issue #10749 · siyuan-note/siyuan

    输入框

    蓝色感觉有点突兀,灰色好看点。不过蓝色是思源的主题色,其他很多地方都有蓝色,应该不会改了。

    关闭按钮

    确实感觉很离谱

    下拉框

    感觉思源的最好看(不过那其实不是思源的样式,Win11 会带圆角,Win10 就是方形)

    思源的图标一是太小了,在大屏上体验不佳,虽然可以整体界面放大,但是其他也会跟着放大,整体感受仍然不佳,所以应该适当调大图标按钮的大小,显得大气一点,也更加方便点击

    还有人嫌图标大了

    思源的开始菜单,没有区分度

    我觉得很合适,不会喧宾夺主

    插件图标风格建议与主界面图标风格保持一致,如果不一致,强制转换一下,不然整体观感实在是不行,太花了

    这个是插件作者决定的,思源不会更多干涉

    思源是顶部有个 dock 的标题栏,然后按钮会显隐,而 ob 的是没有标题栏,按钮常显,固定居中
    ob 更简约,我更喜欢 ob 的
    想想思源的,按钮看不到,增加操作成本

    这个我更喜欢思源的,不用的时候就不显示按钮

    集市卡片的悬浮样式不好看

    悬浮太高了,确实感觉好怪

    主窗口焦点的逻辑太复杂了,感觉没有必要

    对我来说还挺有用的,很直观看到焦点是在哪个地方(尤其在很多插件依赖页面焦点的情况下,在使用插件功能前需要确保焦点在某个位置)

    弹出后,想要菜单消失,由于编辑区可能存在链接或怕误点击,误拖动,一般倾向于点击顶栏,或点击主窗口外部,但是这两个地方点击都是不能让弹出菜单消失的,只有 dock 栏和编辑区可以,这是不合理的,希望改进

    再点一次那个按钮就行了

    1 回复
    3 操作
    JeffreyChen 在 2024-10-20 13:08:35 更新了该回帖
    JeffreyChen 在 2024-10-19 19:39:58 更新了该回帖
    JeffreyChen 在 2024-10-19 19:37:03 更新了该回帖
  • Wolke 1 评论

    习惯性想点其他地方 😂

    我更新了一下回帖
    JeffreyChen
  • chenshinshi

    页签样式和集市卡片支持改动,感觉每一个主题都会对这两个地方做优化,原生风格有些老旧了。

  • YHXK

    标签页支持:不够突出

    关闭按钮:黑按钮黑背景,一开始我都找不到按钮

    标签栏还是和顶栏合并 +1:基本没啥用,如果为了显示长文档名,但长文档名文档树中显示效果不佳

    插件菜单:无所谓,打开后不管,点击编辑区和文档树自动取消,是属于提高效率的,节省一个步骤,当然增加一个点击顶栏取消也无所谓

    集市已下载建议要改,单行显示信息密度不够影响效率

  • 其实我觉得这些东西不是审美风格问题,而是放的位置不太符合优秀交互方案,很多按键或者组件就是勉强堆在一起了,没有做很好的循序渐进或者分类

  • 对了,底部 Dock 是可以拿来放反链面板的,竖屏用应该合适

    1 回复
  • EmptyLight 2 评论

    底部 Dock 我压根没显示,找不到在哪(可能是主题的锅,我现在用 VSCodeLite-edit),感觉还是可选去掉或合并好一点。(好像有人在手机端问屏幕底部的白色小条,可能是没放按钮的底部 dock)

    图标显示不一致的原因主要是有好些图标是插件添加的,不是思源自带的。自带图标显示效果还是统一的。

    左右 Dock、标题栏都有自己区域对应的按钮,有自己的功能。

    根据焦点有无变色显示,VSCode 也有类似的功能,我觉得挺喜欢的。

    关闭按钮放在外面可以用来提示空白区域可以点击关闭窗口,还有点作用。

    2 回复
    你需要先把一个按钮移动到底部才会显示
    JeffreyChen
    @JeffreyChen 我试过移到底部不显示,遂放弃
    EmptyLight
  • PiChou 1 赞同

    归根结底,就是删繁就简,一上来就把所有元素都堆砌,很容易给新手造成这软件门槛很高的第一印象。

    还有一点思源的 UI 比较老牌的感觉,就是所有的图标、排版都挤在一起,我简单对比了一下,同样是全屏打开,思源相较 obsidian、notion 等笔记软件,图标更小,各元素间距更窄,也许思源的考量是让各栏位能排列尽可能多的图标?那只能说各有得失了

  • 你看看我的操作:

    就是这个操作没反应,刚才又可以了,想来不是 bug
    EmptyLight
  • Wolke

    插件图标是插件自己的,问题是思源允许这种图标,没有给出规范,也没有去优化处理,这才是问题所在,所以需要改

    1 回复
  • 目前还没有对插件和主题的强制规范,连审核都没有。

    还是靠开发者和用户双向选择吧

  • daloo 1 评论

    很有意思的一个讨论,① 在思源基本素质过硬的前提下,界面美化是俘获用户的重要手段,也是思源用力推广时不能忽略的方面。颜值就是正义,就是力量。在很多人看来,包括我,都愿意为颜值牺牲一些不便的;② 设计是一门技术,应该从整体着手,考虑设计理念、设计思路和具体元素,设计的时候应当以思源本身功能、用户使用习惯、交互特点等为基础;③ 题主提到的很多细节个人表示同意,有益的应该吸取。我也感觉思源现有的不少主题就已经很棒了,比如“玩具”的黑红配色页面就简洁、大方,可惜文档树卡顿一直没能得到优化image.png

    2024 年竟然在评论区看到有人 cuebearlight 了,我真的有重构的冲动呜呜呜等明天班上摸鱼我就建文件夹(
    chenshinshi 1
  • CYKONG2016 2 评论

    确实可以更新一下 ui,但是这工作量想想都可怕,作者还是慢慢来吧,稳定还是第一位的

    唯一想吐槽的就是:左右下三个 dock 栏感觉有点冗余,对于基本上不使用反链面版的用户来说可能用不到

    另外全局关系图这种中看不中用的东西希望可以从系统层面关掉,使用插件总感觉怪怪的。

    爱你杰弗瑞

    关系图按钮可以通过 CSS 代码片段隐藏
    JeffreyChen
    谢谢,但是其实不会 css=。=而且怕搞错了把笔记软件“弄坏了”
    CYKONG2016
  • ACai 1 3 评论

    身边没有电脑,所以先简单提一些我最近修改 css 发现的问题。

    1. 思源的切换开关没有居中对齐。
    2. 思源的界面中 border 和使用 shadow 模拟的 border 的对比度都太强了,这造成思源笔记的界面看起来过碎,我比较建议将 border 的颜色接近背景色,在保证功能区分的职责正常的同时,让思源笔记的界面看起来更统一。
    3. 除编辑器外的所有界面,建议降低文字与背景色的背景色以提高和谐程度,突出主要区域:编辑器。
    4. 有点头重脚轻,思源编辑器的顶部有工具栏、标签页、面包屑三层,我比较建议工具栏和标签页合并。
    5. 简化工具栏的社区插件图标。建议将插件图标全部收纳进一个彩蛋。工具栏的高度本身就比较低,还要放置许多插件图标,会比较挤。
    6. 底部状态栏,ob 的方案也不太合适,它会挡住反链内容。我的建议是在编辑区的右下角放置一个小小的悬浮球,点击或悬浮时悬浮球上方弹出一个信息菜单。双击则隐藏停靠栏图标。
    7. 设置界面,调整字号,可以缩小所有选项解释的字号。
    再评论几点,我认为 ob 和思源这哥俩就是难兄难弟,一个就比另一个好一点
    ACai
    思源内的图标(说的不是 logo)确实可以换换了,目前这个图标看起来宽宽窄窄高高矮矮各不相同的,建议选择大部分图标宽高一致的图标集
    ACai
    但我的意思不是全盘否定 ob 啊,大伙不要误会!我的意思是说如果 v 姐真的打算改进思源的界面,我推荐一手 readwise、mymind、lazy 等软件。
    ACai
  • 建议 1: 选择的样式外侧可以添加一个高亮边框

    image.png

    image.png

  • 建议 2:如果不考虑内置关闭图标的话,我比较建议将浮窗等弹窗的样式向设置页面靠拢(这样还挺省空间的,尤其对于浮窗这种多图标的来说)

    另外,建议保留顶部拖拽的功能,但缩小它的高度,如下图

    image.png

    image.png

请输入回帖内容 ...