前面我已经对配色和布局进行了出版规划，现在是真正动手的时候了，开始漂亮的皮囊设计之旅吧！工欲善其事,必先利其器，我选择的工具是大名鼎鼎的Adobe公司开发的Photoshop软件，版本为Adobe Photoshop CC，19.1.4版。
- 主题色：
黑白灰+加单色黄，具体情况分别为：字体色：灰色，颜色值#2d2d2d，背景色：白色，颜色值#ffffff，主色：黄色颜色值#ffcb3b；辅助色为浅黄色颜色值分别为#EF9D00，#F7F100。
- 布局：
左右型布局，分为三列，第一列宽度80，第二列宽度320,第三列宽度自适应。
首先设计一下日记本的基本功能，这样才能在页面效果图上进行设计和布局。
一、基本功能设计
初步规划日记本的七各功能模块，有些模块是相互交叉使用的：
日记功能：列表、新建、修改、删除、分类转移
日记本分类：列表、新建、修改、删除
分享：列表、日记分享、日记本分享
收藏：列表、日记收藏、取消收藏
社区：列表，评论，收藏，分享，记笔记
背景音乐：列表，添加、删除、修改
设置：加密设置、用户信息设置、背景音乐设置、皮肤设置
二、用PS进行设计
基本功能已初步确定、这样我们的基本要素都已经准备齐全了，真正开始动手设计啦，先看一下最终效果图，图片大小为1560*759。
具体设计过程看下面视频。
<iframe allowfullscreen="true" data-mediaembed="bilibili" id="KO4Sv3v8-1618239488113" src="https://player.bilibili.com/player.html?aid=802568665"></iframe>我的日记本开发——用phtoshop设计UI界面
我的日记开发系列手记目录
1.我的日记本开发手记——概述
2.我的日记本开发手记（2）——配色
3.我的日记本开发手记（3）—— 布局
标签：列表,效果图,日记本,手记,UI,开发,设计,日记 来源： https://blog.csdn.net/zhaoyang314/article/details/115622389
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。