界面改进提案投票与意见征集

提案:界面降噪,减少使用边框

关联 GitHub Issue:Issue #12970 · siyuan-note/siyuan

这是思源目前的界面,顶栏底栏和侧栏都各自有边框,看起来会有一点杂乱:

image.png

隐藏边框后将会更干净、融合与现代化,用户可以更专注于功能,不需要关心顶栏底栏和侧栏的边界(用颜色区分功能界面和编辑器即可):

image.png

我安装了集市中下载数量最高的 10 个主题,其中 8 个去掉了边框,现在征集意见是否要在本体改进这一点。

是否支持隐藏默认主题中顶栏底栏和侧栏的边框?

单选 公开 永不结束 88 票
支持隐藏边框
32% 29 票
反对隐藏边框
67% 59 票

欢迎回帖讨论。

  • 思源笔记

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

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

    23010 引用 • 92552 回帖
2 操作
JeffreyChen 在 2024-11-03 10:06:15 更新了该帖
JeffreyChen 在 2024-11-03 09:57:56 置顶了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • chenshinshi 1 赞同

    image.png

    支持用色块替代边框区分。

  • Near

    建议开发垂直标签页,参考 edge 浏览器的垂直标签页。

  • 我大概看了一下下载数前 10 的主题,没有边框的都有颜色或间距的区分。我不支持仅隐藏边框。

    Dark+

    image.png

    Rem

    image.png

    tsundoku

    image.png

    minivlook

    image.png

    1 回复
    • Asri
      image.png
    • Dark+
      image.png
    • 任我行
      image.png
    • Rem
      image.png
    • 写味
      image.png
    • 其他主题很多都是去掉了边框,用颜色来区分的
    1 回复
  • 赞同你的观点这一点我也发现了,我回复的第一行也指出了,我不支持“仅”隐藏边框,目前的提案没有后续,只是隐藏边框。帖子正文图也只是隐藏边框、没有颜色区分。因此投票我给了反对。

    image.png

    image.png

    1 回复
    1 操作
    Undii 在 2024-11-03 10:29:02 更新了该回帖
  • JeffreyChen 1 评论

    我的看法是即使仅隐藏边框也会更好看,用户需要的其他样式都能靠 CSS 实现

    明白,这一点我不赞同,当然只是我不赞同而已。 看到你编辑了内容,我只能说隐藏边框也能靠 CSS 实现。我不认为这是理由。
    Undii
  • EmptyLight

    我觉得边框没什么,有没有都可以接受。不过要去掉的话一般情况下我还是喜欢用颜色区分不同的功能区。用自己改的主题演示一下,附图如下。

    PixPin20241103103958.png

    而用了背景图片插件之后我更愿意把界面之间的隔阂去掉,尽可能让整个界面一体化。附图如下。(将标题栏、标签栏和面包屑独立出来主要是不想改了)

    PixPin20241103104516.png

    这个效果也是我打磨几次之后确定使用的效果。全部界面之间的隔断几乎没有。

    至于我平时使用是隐藏停靠栏的,在所有功能确定位置之后就不去修改功能的定位了,所以只需要把鼠标移过去就能用对应的功能,比如文档树、大纲。

  • 既然主题、css 都能解决这个问题,那为啥要在默认主题里面加这种一半人喜欢另外一半人不喜欢的改动?个人不赞同。就算要加最好也弄个开关,但是主题本身加开关好像也不现实。

    默认主题更应该修改一下分行符、代码块的辨识度,现在的辨识度太差了,特别是默认的暗色主题。

    2 回复
  • 就是要投票才知道用户喜不喜欢。本质是为了优化默认主题,不能让默认主题保持难看然后大家都去用第三方主题。

    1 操作
    JeffreyChen 在 2024-11-03 12:14:36 更新了该回帖
  • 分隔线可以用这个 CSS 修改:

    /* 更改分割线样式 CSS片段 */
    .protyle-wysiwyg [data-node-id].hr>div:after {
        height: 2px;
        background-color: #e9e900;
    }
    

    代码块可以自己设置颜色:

    image.png

    1 回复
  • EmptyLight 2 评论

    刚看了 ob 对比视频回来,如果视频里用的 ob 主题是默认主题的话,它也是有边框的。只不过 ob 的界面布局都是纯色的,各个功能区之间没有色差。

    我也看过 OB ,感觉不是很好看,默认主题跟思源一样没有那么“现代”
    JeffreyChen
    @JeffreyChen 我刚用思源的时候觉得默认主题还是耐看的,算是比较“现代”的。比起 dopus 来说好了不止一点(我为什么要这样比)
    EmptyLight
  • 没有边框也不太好看,杂乱不是边框的问题,

    而是设置很多都是重复的,把设置项归类一下就好。还有侧边栏就是感觉是没什么用的

  • Tisamn

    选项不好选啊,个人意见:
    同意隐藏底栏的边框线,上栏和侧栏有边框线的话,看起来会好点

    当然如果通过颜色进行区分的话,隐藏边框线没有意见,并且希望底部的边框的颜色和页面颜色相同

  • 不支持,隐藏边框会让整体设计没有空间感

    09296CEB2D1F4D5F8FF34AF092F6BD67.png

    隐藏边框之后,软件刘海就变成了蘑菇头了,除非像上面一样把刘海剪掉

  • bala1000

    我的建议是给它添加一个快捷键,如 alt +` ,这样久可以快速隐藏,界面就更加简洁。同时我觉得可以适当侧重引导用户去习惯使用快捷键,这样效率更高。

    image.png

  • 看来需求各不相同,大家自行用 CSS 改吧。

  • AhaluYah 1 赞同

    个人观点:可以优化,但不建议直接去掉线条。

    原因 1,现有的边框整体观感虽然不是特别好,但也不坏,影响其实并不大。

    原因 2,线条的功能是分区,如果直接去掉,整个界面就成了一坨,没有边界感。

    原因 3,如果要修改,建议融合色块 + 线框,丰富界面层次感。

    个人比较喜欢的软件界面:滴答清单。

  • 不是代码块颜色的问题,是现在默认主题的代码块和其他块之间的辨识度不好,看起来和引用块一样似的。和 mac 代码块美化插件一比就能感受出来。

    分割线这个 css 我知道,但是默认的那个真的太细了吧?改这个我感觉不会有人有异议吧 😂

    1 回复
    1. 我觉得区别蛮大的:
      image.png
    2. 分隔线你可以发起一个投票看看
  • 我是支持的,因为我不会搞 CSS,也不想为了写笔记去学。

  • paris1943 1 赞同

    我投的“反对”。

    一个是,我真的觉得一些长久以来就有且不影响大部分用户使用的东西就别改了;

    第二个是,如果要改希望往好的方向去改。“去掉线条”怎么看也不是好的方案,不仅没有让界面变得简洁清晰,反而视觉上更臃肿了(不是元素变少了就是“简洁”)。

    1 回复
  • 应该主动改进,而不是用户能习惯就一直保留,否则就会僵化跟不上时代了。

    你是用默认主题的吗?

  • 界面是整体的事情,线条我觉得还是要有的,主要是界面要有层次,有区分度,只是思源目前的整体看起来就很粗糙,间距、颜色、图标、大小远不如借鉴的 ide 编辑器那样美观

    image.png

    image.png

    image.png

  • 我支持再次降低边框对比度,弱化边框的存在感,但移除我不是特别赞同,有一点点分区还是有用的,另外右侧停靠栏的边框支持移除

  • temacc0531

    建议直接来波大改trollface

  • Elystraw

    试了下去掉边框,个人感觉更好一点。不过我还是投了反对票,因为不想改的人挺多的,而对于想改的人来说,这类简单的需求可以直接 CSS 就实现了。

    如果真的改 UI,可以考虑出份设计稿大改一下。不过,相对于这些细枝末节的元素,我倒是觉得不如花心思优化一下界面的逻辑,精简和合并一下入口之类的,目前还是有点乱(比如我始终理解不了文档右上角的“打开菜单”和“更多”是靠什么区分的,为什么导入导出功能不在“更多”里面)。

    上面讨论的边框的问题,感兴趣的可以用这个 CSS 看下效果:

    /* 隐藏界面边框 */
    .layout-tab-bar {
    	border-bottom: none;
    }
    .layout__resize--lr:after {
    	top: 0;
    	width: 0;
    	left: 0;
    	height: 0;
    }
    .toolbar {
     	border-bottom: none;
    }
    .dock#dockLeft {
    	border-right: none;
    }
    .dock#dockRight {
    	border-left: none;
    }
    .status {
    	border-top: none;
    }
    
    1 回复
  • 不过我还是投了反对票,因为不想改的人挺多的

    投票应该投自己的需求而不是别人的需求。投票时不考虑他人是基本准则。

    如果大家实际上都需要且赞同,但都觉得别人会反对所以也投反对,那就倒置了结果,反应不了真实的情况了。

  • 那些线框确实不好看,但是单纯的隐藏的话其实似乎更不协调。

    因为有主题功能存在所以官方肯定不愿意改。

    但如果愿意改的话希望模仿下 affine

    1 回复
  • 来个图看看 Affine

    1 回复
  • 整体设计理念不好概括,但好看image.png

请输入回帖内容 ...
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,不是 Markdown 文件编辑器; 思源笔记同步教程:ld246.com/article/1692089679062

推荐标签 标签

  • 工具

    子曰:“工欲善其事,必先利其器。”

    288 引用 • 734 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1795 回帖
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1435 引用 • 10056 回帖 • 489 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 105 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 484 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖 • 1 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 147 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 445 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    27 引用 • 225 回帖 • 163 关注
  • 996
    13 引用 • 200 回帖 • 10 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 637 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    288 引用 • 4485 回帖 • 663 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 159 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    492 引用 • 926 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 250 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 683 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    196 引用 • 540 回帖 • 1 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 27 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 715 关注