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

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

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

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

image.png

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

image.png

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

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

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

欢迎回帖讨论。

  • 思源笔记

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

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

    22814 引用 • 91609 回帖
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

推荐标签 标签

  • SQLServer

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

    21 引用 • 31 回帖 • 3 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 482 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 220 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖 • 3 关注
  • 导航

    各种网址链接、内容导航。

    41 引用 • 175 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3188 引用 • 8214 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    265 引用 • 666 回帖 • 1 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3576 回帖
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    167 引用 • 1519 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 47 关注
  • MySQL

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

    691 引用 • 535 回帖 • 1 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    6 引用 • 38 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖 • 2 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 7 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖 • 2 关注
  • gRpc
    11 引用 • 9 回帖 • 70 关注
  • 七牛云

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

    27 引用 • 225 回帖 • 169 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 142 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 373 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 137 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    171 引用 • 512 回帖
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 773 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 366 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 1 关注
  • Flume

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

    9 引用 • 6 回帖 • 636 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 289 关注