PureText Blog UI 设计规范
PureText Blog UI 设计规范
设计哲学
- 零装饰:无图标、无背景、无颜色、无圆角、无阴影
- 信息即界面:界面由纯粹的文字和必要的输入区域构成
- 功能外露:通过基础HTML状态(下划线、焦点框)表示交互元素
全局规范
- 字体:系统默认
serif字体 - 颜色:
- 文字:
#000 - 次要文字:
#888 - 链接:
#000+ 下划线 - 编辑区背景:
#f9f9f9
- 文字:
- 交互状态:
- 链接悬停:移除下划线
- 输入框聚焦:左侧显示竖线
| - 按钮:用方括号
[ ]标识
界面组件
1. 阅读视图(读者端)
PureText
————————————————————————————————————————————
[ 搜索... ] [写文章] [登录]
2024.05.23
**极简主义的暴力美学**
当“少即是多”被推向极致,界面本身将消失,只剩下你与信息。任何多余的像素都是噪音。
#设计 #哲学
————————————————————————————————————————————
2024.04.10
**如何停止思考并开始写作**
写作最大的障碍是准备写作。打开一个空白文档,写下第一个句子,无论它有多糟糕。
#写作 #心流
————————————————————————————————————————————
[ 归档 ] [RSS]
————————————————————————————————————————————
元素说明
- 标题:加粗
- 日期:
#888颜色 - 标签:
#设计格式,带下划线 - 按钮:
[按钮文字]格式 - 分隔线:
————————————————————————————————————————————
2. 编辑界面(作者端)
PureText | 书写
————————————————————————————————————————————
[ 返回 ] [预览] [发布 ]
[ 文章标题 ]
[ 用Markdown书写正文... ]
#标签1 #标签2
————————————————————————————————————————————
状态:草稿 | 字数:427
元素说明
- 输入框:无边框,背景色
#f9f9f9 - 标签输入:
#标签格式 - 状态栏:底部显示,包含草稿状态和字数统计
3. 设置页面
PureText | 设置
————————————————————————————————————————————
[ 返回 ]
**博客设置**
[博客标题:..................]
[简介:..................................]
[自定义域名:..................] (高级功能)
**账户**
[用户名:..................]
[更改密码:[旧密码] [新密码] [确认] ]
————————————————————————————————————————————
[ 保存更改 ] [注销]
元素说明
- 分组标题:
**分组标题**格式 - 输入域:
[标签:..................]格式 - 嵌套输入:
[更改密码:[旧密码] [新密码] [确认] ] - 危险操作:独立分隔线下,单独放置
响应式设计
移动端适配
PureText
————————————————————
[ 搜索... ]
[ 写文章 ]
[ 登录 ]
2024.05.23
**极简主义的暴力美学**
内容...
#设计 #哲学
————————————————————
[ 归档 ]
[ RSS ]
————————————————————
变化
- 按钮变为块级元素,宽度100%
- 每行显示元素减少
- 分隔线长度适应屏幕宽度
暗色模式
@media (prefers-color-scheme: dark) {
background-color: #111;
color: #eee;
/* 保持相同的对比度层级 */
}
CSS 实现(≤1KB)
/* 基础重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: serif; line-height: 1.6; padding: 2rem; max-width: 800px; margin: auto; }
/* 交互元素 */
a { color: #000; text-decoration: underline; }
a:hover { text-decoration: none; }
button, [role="button"] {
border: none; background: none;
font: inherit; cursor: pointer;
display: inline-block;
}
input, textarea {
border: none; background: #f9f9f9;
font: inherit; width: 100%;
padding: 0.5rem;
}
input:focus, textarea:focus {
outline: none;
border-left: 2px solid #000;
}
/* 移动端适配 */
@media (max-width: 600px) {
body { padding: 1rem; }
[role="button"] { display: block; width: 100%; text-align: left; }
}
/* 暗色模式 */
@media (prefers-color-scheme: dark) {
body { background: #111; color: #eee; }
a { color: #eee; }
input, textarea { background: #222; }
}
交互逻辑文档
键盘快捷键
Ctrl/Cmd + Enter:发布文章Escape:返回上一页/:聚焦搜索框
状态反馈
- 自动保存:无提示,仅状态栏显示“已保存”
- 发布成功:静默跳转到文章页
- 错误提示:在相关输入框下方显示红色文字
性能规范
- 单个页面加载:≤ 10KB
- 首屏渲染:< 100ms
- CSS 文件大小:≤ 1KB
- 零 JavaScript 依赖
设计原则总结
- 删除:删除所有不必要的元素
- 组织:通过间距和分组组织信息
- 隐藏:将次要功能隐藏在需要时
- 转移:将复杂功能转移给用户(Markdown)
文件结束 | 设计版本:1.0 | 最后更新:2024-05-23