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

2024-06-14 02:36:03

前面我已经对配色和布局进行了出版规划，现在是真正动手的时候了，开始漂亮的皮囊设计之旅吧！工欲善其事,必先利其器，我选择的工具是大名鼎鼎的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

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

第10节_我的日记本开发手记（10）——使用自定义图标字体
各位朋友大家好,这小结我们主要实现绘制自己的图标字体,像使用字体那样使用我们的小图标,不但可以调整大小,而且可以调整颜色,下看一下最终效果,最终效果如图1所示. 一.FontCreatorPortab ...
第八节_我的日记本开发手记（8）——sqlite数据库与c#
一.SQLite介绍 (一)基本介绍 1. 数据库(database,DB):一个以某种有组织的方式存储的数据集合.数据库中的数据按一定的数学模型组织.描述和存储,具有较小的冗余,较高的数据独立性和易 ...
我的日记本开发手记——概述
随着计算机技术的普及,我们的生活发生了翻天覆地的变化,好多生活习惯也随之改变,记录生活的方式也在改变.例如,还记得小时候记日记的习惯吗?确切的说,是老师强迫写日记,虽然是被迫写日记,但是随着时间的推移 ...
我的日记本开发手记（2）——配色
我们的这个社会绝大部分人都是外贸主义者,选择看起来更加美好的事物是人的天性,"好看的皮囊"显得十分重要.所以呢,我也不会违反人类的天性,首先要为软件设计一个好看的皮囊.虽然我的美工 ...
我的日记本开发手记（3）—— 布局
配色已搞定,现在进行页面布局.那什么是布局呢?布局就是将文字.图形.图片等版面构成元素合理.有秩序地安放在限定的空间内,使页面兼具易读性和美观性,让读者产生一种舒适愉悦感,从而产生继续读下去的念头,而 ...
第七节_我的日记本开发手记（7）——Javascript与c#交互
这一节我们主要实现JavaScript与c#交互,都是一些基本知识,为我们后面的程序开发做好准备. 一.c#调用Javascript 在Formium 窗体中,使用ExecuteJavaScript和 ...
Unity 2D独立开发手记（九）：UGUI仿GTA地图系统
一直觉着GTA的小地图很方便,在地图上的图标能够实时反映出各种任务点.设施等的方位,那么我也仿照它的地图系统做一个简陋的. 还有,提前说一下,这篇文章面向至少用UGUI做过按钮点击事件的读者,因为一些 ...
DTS北洋曳舞社网站开发手记
关于我的第一次WEB开发手记: 主页已经开发完成跳转地址 www.study.shengjunli.com 版块: header: 二级菜单: 舞团纪实舞团队员曳舞教学优秀视频友谊社团 ...
安卓APP课程设计源码和报告——个人日记本开发
Android开发基础题目: 个人日记本开发题目个人日记本开发??? 关键技术开发过程中使用到的技术:利用SQLite存储数据主要体现类:DbHelper类继承自SQLiteOpenHelp ...

最新文章

热门文章