1 | # 设计规范
|
2 |
|
3 | ## YDoc 项目设计规范
|
4 |
|
5 | YDoc 的设计稿经过设计师的几度推敲重做,诞生了现在你看到的默认主题 🤓,YDoc 有如下设计理念:
|
6 |
|
7 | - 💃青春:使用大胆、活泼的配色方案,体现 YMFE 的产品文化
|
8 | - 🤗科学:以科学的态度对待视觉设计、功能设计,让设计有迹可循
|
9 | - 🤔简洁:以 `无形` 代替 `有形`,从 UI 到开发体验,不断去除冗余的设计,使用户专注于写作与阅读
|
10 |
|
11 | 以下是 YDoc 设计过程中总结的一些规则,这些可以帮助你构建优美的文档页面:
|
12 |
|
13 | ### 图片
|
14 |
|
15 | - 禁止使用未经压缩处理的图片
|
16 | - 使用图片的原始高宽比,禁止手动调整高宽比
|
17 | - 在高清屏幕请使用2倍/3倍图,防止图像模糊
|
18 |
|
19 | ### 排版
|
20 |
|
21 | - 文档正文使用 16px 字号,但默认字号为 14px,这是为了增强正文部分的阅读体验
|
22 | - 请限制每行文字的宽度(行宽),以一行 __40-60__ 字为宜:
|
23 | - 行宽过短,用户需要频繁移动视线,影响阅读连贯性
|
24 | - 行宽过长,容易视觉疲劳,用户很难专注于一行文本阅读,从大段文字中找到下一行变得更困难
|
25 | > 行宽的设计参考 [Readability: the Optimal Line Length](https://baymard.com/blog/line-length-readability)
|
26 |
|
27 | ### 项目规范文件
|
28 | 现在将 YDoc 的LOGO、色彩、排版等规范提供给大家,希望能给大家在自定义样式或定制主题的时候提供一些帮助:
|
29 |
|
30 | <div class="filebox">
|
31 | <div class="item" onclick="window.open('https://github.com/YMFE/ydoc/releases/download/v4.0.0/ydoc-design-sketch.zip')">
|
32 | <img src="" alt="" />
|
33 | <h4 class="title">YDoc 项目设计规范</h4>
|
34 | <p>YDoc 规范 sketch 文件</p>
|
35 | </div>
|
36 | <div class="item" onclick="window.open('https://github.com/YMFE/ydoc/releases/download/v4.0.0/ydoc-logo.zip')">
|
37 | <img src="" alt="" />
|
38 | <h4 class="title">YDoc LOGO</h4>
|
39 | <p>Logo sketch 文件</p>
|
40 | </div>
|
41 | </div> |
\ | No newline at end of file |