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

本贴最后更新于 414 天前,其中的信息可能已经时异事殊

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

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

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

image.png

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

image.png

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

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

单选 公开 永不结束 89 票
支持隐藏边框
33% 30 票
反对隐藏边框
66% 59 票

欢迎回帖讨论。

  • 思源笔记

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

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

    28442 引用 • 119759 回帖
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 更新了该回帖
  • 我的看法是即使仅隐藏边框也会更好看,用户需要的其他样式都能靠 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

  • veee

    试了下去掉边框,个人感觉更好一点。不过我还是投了反对票,因为不想改的人挺多的,而对于想改的人来说,这类简单的需求可以直接 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 回复
  • 整体设计理念不好概括,但好看image.png

请输入回帖内容 ...
JeffreyChen
目前作为思源笔记的半个客服、测试、开发、评审,在爱发电接受捐赠:https://afdian.com/a/JeffreyChen

推荐标签 标签

  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖 • 1 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 27 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 11 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 548 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 838 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    135 引用 • 798 回帖 • 2 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    188 引用 • 833 回帖 • 2 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 598 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 197 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    203 引用 • 4024 回帖
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 404 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    43 引用 • 130 回帖 • 259 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    695 引用 • 538 回帖 • 2 关注
  • Outlook
    1 引用 • 5 回帖 • 1 关注
  • CSS

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

    200 引用 • 545 回帖
  • Visio
    1 引用 • 2 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 430 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    599 引用 • 3541 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 429 关注
  • TGIF

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

    293 引用 • 4496 回帖 • 688 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 99 关注
  • Folo

    Folo 是一个 RSS 阅读和信息聚合应用,整合多种内容源到统一时间线。

    项目地址:https://github.com/RSSNext/Folo

    1 引用 • 3 回帖 • 2 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有机会重制。

    14 引用 • 258 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 1 关注