我的日记本开发手记（4）—— UI效果图

前面我已经对配色和布局进行了出版规划，现在是真正动手的时候了，开始漂亮的皮囊设计之旅吧！工欲善其事,必先利其器，我选择的工具是大名鼎鼎的Adobe公司开发的Photoshop软件，版本为Adobe Photoshop CC，19.1.4版。

• 主题色：

黑白灰+加单色黄，具体情况分别为：字体色：灰色，颜色值#2d2d2d，背景色：白色，颜色值#ffffff，主色：黄色颜色值#ffcb3b；辅助色为浅黄色颜色值分别为#EF9D00，#F7F100。

• 布局：

左右型布局，分为三列，第一列宽度80，第二列宽度320,第三列宽度自适应。

首先设计一下日记本的基本功能，这样才能在页面效果图上进行设计和布局。

一、基本功能设计

初步规划日记本的七各功能模块，有些模块是相互交叉使用的：
日记功能：列表、新建、修改、删除、分类转移
日记本分类：列表、新建、修改、删除
分享：列表、日记分享、日记本分享
收藏：列表、日记收藏、取消收藏
社区：列表，评论，收藏，分享，记笔记
背景音乐：列表，添加、删除、修改
设置：加密设置、用户信息设置、背景音乐设置、皮肤设置

二、用PS进行设计

基本功能已初步确定、这样我们的基本要素都已经准备齐全了，真正开始动手设计啦，先看一下最终效果图，图片大小为1560*759。

具体设计过程看下面视频。

我的日记本开发——用phtoshop设计UI界面

想要视频看的更清楚些，请单击。

---

我的日记开发系列手记目录

1.我的日记本开发手记——概述
2.我的日记本开发手记（2）——配色
3.我的日记本开发手记（3）—— 布局
4.我的日记本开发手记（4）—— UI效果图
5.我的日记本开发手机（5）——效果图转HTML