Joevan's

PureText Blog UI 设计规范

PureText Blog UI 设计规范

设计哲学


全局规范


界面组件

1. 阅读视图(读者端)

PureText
————————————————————————————————————————————
[ 搜索... ]  [写文章]  [登录]

2024.05.23
**极简主义的暴力美学**
当“少即是多”被推向极致,界面本身将消失,只剩下你与信息。任何多余的像素都是噪音。

#设计 #哲学
————————————————————————————————————————————
2024.04.10
**如何停止思考并开始写作**
写作最大的障碍是准备写作。打开一个空白文档,写下第一个句子,无论它有多糟糕。

#写作 #心流
————————————————————————————————————————————
[ 归档 ]  [RSS]
————————————————————————————————————————————

元素说明


2. 编辑界面(作者端)

PureText | 书写
————————————————————————————————————————————
[ 返回 ]  [预览]  [发布 ]

[ 文章标题 ]
[ 用Markdown书写正文... ]

#标签1 #标签2
————————————————————————————————————————————
状态:草稿 | 字数:427

元素说明


3. 设置页面

PureText | 设置
————————————————————————————————————————————
[ 返回 ]

**博客设置**
[博客标题:..................]
[简介:..................................]
[自定义域名:..................] (高级功能)

**账户**
[用户名:..................]
[更改密码:[旧密码] [新密码] [确认] ]

————————————————————————————————————————————
[ 保存更改 ]  [注销]

元素说明


响应式设计

移动端适配

PureText
————————————————————
[ 搜索... ]
[ 写文章 ]
[ 登录 ]

2024.05.23
**极简主义的暴力美学**
内容...

#设计 #哲学
————————————————————
[ 归档 ]
[ RSS ]
————————————————————

变化


暗色模式

@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; }
}

交互逻辑文档

键盘快捷键

状态反馈

  1. 自动保存:无提示,仅状态栏显示“已保存”
  2. 发布成功:静默跳转到文章页
  3. 错误提示:在相关输入框下方显示红色文字

性能规范


设计原则总结

  1. 删除:删除所有不必要的元素
  2. 组织:通过间距和分组组织信息
  3. 隐藏:将次要功能隐藏在需要时
  4. 转移:将复杂功能转移给用户(Markdown)

文件结束 | 设计版本:1.0 | 最后更新:2024-05-23