登录 注册

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

提案：界面降噪，减少使用边框

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

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

image.png

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

image.png

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

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

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

欢迎回帖讨论。

  • 思源笔记

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

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

    24881 引用 • 102392 回帖
2 操作
JeffreyChen 在 2024-11-03 10:06:15 更新了该帖
JeffreyChen 在 2024-11-03 09:57:56 置顶了该帖
1 关注
2 操作
30 回帖
2
2
1.1k 351 539 162

相关帖子

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

欢迎来到这里！

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

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

    image.png

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

  • Near • via macOS
    付费者

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

  • Undii •
    付费者 捐赠者

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

    Dark+

    image.png

    Rem

    image.png

    tsundoku

    image.png

    minivlook

    image.png

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者
    • Asri
      image.png
    • Dark+
      image.png
    • 任我行
      image.png
    • Rem
      image.png
    • 写味
      image.png
    • 其他主题很多都是去掉了边框，用颜色来区分的
    1 回复
  • Undii •
    付费者 捐赠者

    赞同你的观点这一点我也发现了，我回复的第一行也指出了，我不支持“仅”隐藏边框，目前的提案没有后续，只是隐藏边框。帖子正文图也只是隐藏边框、没有颜色区分。因此投票我给了反对。

    image.png

    image.png

    1 回复
    1 操作
    Undii 在 2024-11-03 10:29:02 更新了该回帖
  • JeffreyChen • • 1 评论
    付费者 支持者 捐赠者 作者

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

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

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

    PixPin20241103103958.png

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

    PixPin20241103104516.png

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

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

  • muxue • via macOS
    付费者 捐赠者

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

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

    2 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

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

    1 操作
    JeffreyChen 在 2024-11-03 12:14:36 更新了该回帖
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    分隔线可以用这个 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 •
  • tongzi •
    付费者 捐赠者

    没有边框也不太好看，杂乱不是边框的问题，

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

  • Tisamn •
    付费者

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

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

  • TangQi •
    付费者 捐赠者

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

    09296CEB2D1F4D5F8FF34AF092F6BD67.png

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

  • bala1000 •

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

    image.png

  • JeffreyChen •
    付费者 支持者 捐赠者 作者

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

  • AhaluYah • • 1 赞同
    付费者 捐赠者

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

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

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

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

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

  • muxue • via macOS
    付费者 捐赠者

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

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

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者
    1. 我觉得区别蛮大的：
      image.png
    2. 分隔线你可以发起一个投票看看
  • NishikigiReeves •
    订阅者

    我是支持的，因为我不会搞 CSS，也不想为了写笔记去学。

  • paris1943 • • 1 赞同

    我投的“反对”。

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

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

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

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

    你是用默认主题的吗？

  • mozhu •
    订阅者 付费者 支持者 捐赠者

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

    image.png

    image.png

    image.png

  • ACai •
    订阅者 付费者 支持者

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

  • temacc0531 •

    建议直接来波大改trollface

  • Elystraw • via macOS
    订阅者

    试了下去掉边框，个人感觉更好一点。不过我还是投了反对票，因为不想改的人挺多的，而对于想改的人来说，这类简单的需求可以直接 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 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    不过我还是投了反对票，因为不想改的人挺多的

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

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

  • zxkmm •
    付费者 支持者 捐赠者

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

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

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

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    来个图看看 Affine

    1 回复
  • zxkmm •
    付费者 支持者 捐赠者

    整体设计理念不好概括，但好看image.png

请输入回帖内容 ...
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器，不是 Markdown 文件编辑器； 思源笔记同步教程：https://ld246.com/article/1692089679062 爱发电：https://afdian.com/a/JeffreyChen
回帖
8192
 帖子
135
 积分
3048

近期热议

推荐标签 标签

  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 1 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 758 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 46 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖 • 1 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题，项目仓库：https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖 • 2 关注
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 548 关注
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    183 引用 • 1011 回帖 • 1 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 642 关注
  • Flume

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

    9 引用 • 6 回帖 • 653 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 176 关注
  • Docker

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

    494 引用 • 928 回帖
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    159 引用 • 305 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 205 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖 • 2 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 5 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    31 引用 • 97 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 158 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 542 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    31 引用 • 108 回帖
  • 爬虫

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

    106 引用 • 275 回帖
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 176 关注
  • Access
    1 引用 • 3 回帖 • 3 关注
  • Vue.js

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

    267 引用 • 666 回帖 • 3 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 3 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    498 引用 • 1395 回帖 • 254 关注
  • 程序员

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

    586 引用 • 3538 回帖
  • Excel
    31 引用 • 28 回帖 • 1 关注

最新标签