前言
在上一篇《如何搭建个人博客（1）- 需求分析》文章中，我们已经梳理了博客的基本功能。下一步需要简单规划一下的博客 UI 设计，对于非专业的 UI 同学而言，这可能是最难的一个步骤。通过此前搭博客经历，总结了一些血与泪的教训：
-
一定要有耐心去设计
-
一定要有耐心去多看别人的设计
-
less is more，简单就是美
-
代码别写死，高配置性
-
保持良好的编码风格，为自己写的代码负责
-
......
利器
“工欲善其事，必先利其器”，作为非专业的 UI 设计师，我们必须先调研有哪些工具可以提高我们的设计效率：
页面版本布局设计
-
Draw.io：免费、上手快、一个页面一个文件
-
Axure：付费、上手快、所有页面一个文件
UI 参考
-
站酷网：白嫖别人的 UI 设计
-
花瓣网：白嫖别人的 UI 设计
-
wallpaperscraft：白嫖的配图素材
-
iconfont：白嫖 icon 图标
-
从别人的博客、网站获取设计灵感......
博客前台（ PC ）
页面规划
前台 PC 共计 5 个页面
-
博客首页
-
文章列表页
-
文章详情页
-
生活记录页
-
博客登陆页（仅支持 PC 即可）
UI 设计
功能分析
1、左上角菜单，点击后全屏菜单展示
2、点击右上角，可完成「白天」/「黑夜」 模式切换
3、文章列表页、文章详情页、生活记录页，顶部共用轮播图
4、文章详情页，可通过锚点快速定位文章
5、文章支持点赞、分享、评论等常见功能
6、登录博客管理系统除了输入账号密码外，还需要邮箱验证
博客前台（ 移动端 ）
页面规划
前台 移动端 共计 4 个页面
-
博客首页
-
文章列表页
-
文章详情页
-
生活记录页
UI 设计
功能分析
1、同 PC 博客功能：功能 1、功能 2、功能 5
2、文章列表页向下懒加载
后台管理系统
页面规划
后台管理系统共分为 4 个模块，12 个页面，仅支持 PC 端即可
-
监控管理
- 流量统计页
- 性能分析页
- 日志查询页
- 告警配置页
-
文章管理
- 文章管理页
- 文章分类页
- 文章发布页
- 文章评论页
-
生活管理
- 生活列表页
- 生活发布页
-
博客管理
- 个人信息页
- 博客配置页
UI 设计
功能分析
1、完善的日志系统，具有日志上报，监控告警，可视化监控等功能
2、具有文章管理的功能（以 markdown 编写文章即可）
3、具有生活管理的功能
4、高度定制化，以配置项的形式抽离个人信息数据、博客展示相关的数据
结尾
有了博客设计图的参照以及基本功能的分析，对我们后续的设计与开发有很大帮助。在下一篇文章中，我们将开始设计后台数据字段。
