ydoc
Version:
基于 Markdown 的静态站点生成工具
46 lines • 7.28 kB
HTML
<html><head><meta charSet="UTF-8"/><meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><link rel="apple-touch-icon" sizes="180x180" href="../ydoc/images/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="../ydoc/images/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="../ydoc/images/favicon-16x16.png"/><link rel="manifest" href="../ydoc/images/manifest.json"/><link rel="mask-icon" href="../ydoc/images/safari-pinned-tab.svg"" color="#5bbad5"/><meta name="theme-color" content="#ffffff"/><meta http-equiv="Cache-Control" content="no-transform"/><meta http-equiv="Cache-Control" content="no-siteapp"/><title>设计规范</title><link rel="stylesheet" href="../ydoc/styles/style.css"/><meta name="author" content="ymfe"/><meta name="keywords"/><meta name="description" content="ydoc description demo"/><meta id="releativePath" content=".."/><link rel="stylesheet" href="../ydoc/ydoc-plugin-search/search.css"/><link rel="stylesheet" href="../custom.css"/></head><body><div class="g-doc"><div class="m-main" id="js-panel"><header class="m-header" id="js-header"><div class="m-header-title js-logo"><a href="../index.html" target="_self"><img class="logo" src="../ydoc/images/dog@1x.png" srcSet="../ydoc/images/dog@2x.png 2x"/><h6 class="name">YDoc</h6></a></div><div><div class="m-search">
<div class="icon"></div>
<input type="text" class="input js-input" placeholder="搜索文档内容" />
<div class="m-search-result js-search-result"></div>
</div></div><nav class="m-header-nav js-nav"><ul class="m-header-items"><li class="item "><a class="href" href="../documents/index.html">文档</a></li><li class="item "><a class="href" href="../plugin/index.html">插件</a></li><li class="item "><span class="href">规范</span><ul class="m-header-subtitle"><li class="item"><a href="" class="link">设计规范</a></li><li class="item"><a href="index.html" class="link">文档规范</a></li></ul></li></ul></nav><div id="js-nav-btn" class="m-header-btn ui-font-ydoc"></div></header><div class="m-content" id="js-content"><div id="markdown-body" class="m-content-container markdown-body"><h1>设计规范</h1>
<h2 id="ydoc-项目设计规范">YDoc 项目设计规范</h2>
<p>YDoc 的设计稿经过设计师的几度推敲重做，诞生了现在你看到的默认主题 🤓，YDoc 有如下设计理念：</p>
<ul>
<li>💃青春：使用大胆、活泼的配色方案，体现 YMFE 的产品文化</li>
<li>🤗科学：以科学的态度对待视觉设计、功能设计，让设计有迹可循</li>
<li>🤔简洁：以 <code>无形</code> 代替 <code>有形</code>，从 UI 到开发体验，不断去除冗余的设计，使用户专注于写作与阅读</li>
</ul>
<p>以下是 YDoc 设计过程中总结的一些规则，这些可以帮助你构建优美的文档页面：</p>
<h3 id="ydoc-项目设计规范-图片">图片</h3>
<ul>
<li>禁止使用未经压缩处理的图片</li>
<li>使用图片的原始高宽比，禁止手动调整高宽比</li>
<li>在高清屏幕请使用2倍/3倍图，防止图像模糊</li>
</ul>
<h3 id="ydoc-项目设计规范-排版">排版</h3>
<ul>
<li>文档正文使用 16px 字号，但默认字号为 14px，这是为了增强正文部分的阅读体验</li>
<li>请限制每行文字的宽度(行宽)，以一行 <strong>40-60</strong> 字为宜：
<ul>
<li>行宽过短，用户需要频繁移动视线，影响阅读连贯性</li>
<li>行宽过长，容易视觉疲劳，用户很难专注于一行文本阅读，从大段文字中找到下一行变得更困难</li>
</ul>
</li>
</ul>
<blockquote>
<p>行宽的设计参考 <a href="https://baymard.com/blog/line-length-readability">Readability: the Optimal Line Length</a></p>
</blockquote>
<h3 id="ydoc-项目设计规范-项目规范文件">项目规范文件</h3>
<p>现在将 YDoc 的LOGO、色彩、排版等规范提供给大家，希望能给大家在自定义样式或定制主题的时候提供一些帮助：</p>
<div class="filebox">
<div class="item">
<img src="" alt="">
<h4 class="title">YDoc LOGO</h4>
<p>Logo sketch 文件</p>
</div>
<div class="item">
<img src="" alt="">
<h4 class="title">YDoc 项目设计规范</h4>
<p>YDoc 规范 sketch 文件</p>
</div>
</div></div></div></div></div><script src="../ydoc/scripts/plugins/dollar.min.js"></script><script src="../ydoc/scripts/plugins/responsive-nav.min.js"></script><script src="../ydoc/scripts/plugins/slideout.min.js"></script><script src="../ydoc/scripts/app.js"></script><script src="../ydoc/ydoc-plugin-search/core.js"></script><script src="../ydoc/ydoc-plugin-search/search.js"></script><script src="../search_json.js"></script></body></html>