安卓AppsUI设计实训指导书.doc

安卓AppsUI设计实训指导书

《安卓AppsUI设计》

实 训 指 导 书

漳州职业技术学院计算机工程系
2016年8月8日

目 录
前 言 ………………………………………………………………………………………1
任务一 认知UI设计………………………………………………………………………3
任务二 认知UI设计规范和制作流程…………………………………………………5
任务三 APP图标的设计及制作…………………………………………………………10
任务四 手机UI中主要元素的设计及制作…………………………………………18
任务五 手机APP UI的设计及制作………………………………………………………24

35 / 38
前 言
随着android系统的普及，android应用的需求越来越大，这是一个潜力巨大的市场，吸引了无数软件开发厂商和开发者投身其中，大量的手机游戏和软件的研发和制作都需要Android开发工程师和安卓UI设计师，引发了Android人才荒。软件UI设计属于ID（工业产品设计）的一个特殊形式，只是针对的材质有所不同。但随着智能化电子产品的普及，带有液晶屏显示的产品将越来越多。也就意味着越来越多的产品设计需要软件UI设计。随着技术平准化手机产业出现价格竞争的环境下，手机的人机交互界面（UI）给手机市场提供新的卖点，被认为是新的产业动力。手机UI的新设计及功能开发是根据各种客户群体的喜好及使用习惯而进行的，随着手机用户年龄层的扩大，性别、宗教、环境、生活方式的多样化，其开发范围和潜力正在无限扩大。这些新的趋势使得界面交互可能不再囿于某个具体产品本身，它可能开始涉及了及使用环境及其他用户之间的交流。根据对当前手机技术的分析以及对国外在人机交互及相关领域研究的关注，提出了“泛交互”的概念，并对新的趋势、新的设计进行展望。
本课程是计算机软件技术专业“平面设计制作”教学模块的核心课程，是学生进行平面设计及制作职业能力训练的主要环节，同时为平面制作实训和多媒体整合制作综合实训打下坚实基础。
本课程学习需要具备一定的美工基本知识，在先修课程Photoshop等美工方面的学习及训练后，具备平面设计基本概念和基本常识，再进一步地实现界面设计的能力。
通过本课程的学习及训练，使学生能够利用工具软件adobe illustrator、Photoshop实现手机图标和界面的设计和制作。学生能够根据需要进行作品定位及设计；能够根据需要随心所欲进行作品形象或图标的设计及制作；能够设计出较好的用户体验；能够利用软件进行矢量图绘制、修改及上色，进行图形的色彩处理；能够了解UI设计的规范和制作流程。通过本课程的学习，学生能够：
1、及客户沟通，进行相关需求分析，生成UI设计需求分析书，并收集相关素材；
2、根据UI设计的定位，对设计进行风格设计和用户体验设计；
3、根据风格或用户体验的设计方案，对UI设计进行具体的制作。
4、对UI设计作品进行优化、上传发布、推广及更新维护。

实训指导书主要为学生在移动应用UI设计方面提供一些借鉴，通过对优秀案例的学习，能够提升学生对移动应用界面的设计能力。包括各项工具的熟练掌握和综合应用，该实训分为以下几个部分：

1. 移动UI设计流程
2. APP图标设计
3. 移动界面设计规范
4. 人机界面交互设计指南

任务一 认知UI设计
一、学习目标（必须有）
通过本任务单元的训练，学生应该能够：
1. 了解移动UI设计基础概念，能清楚了解UI设计在整个APP产品应用开发中所处的地位和作用；
2.在教师的指导下，能够对苹果系统，安卓系统和Windows Phone系统这三大系统的发展史以及基本组件和各自特色进行总结；
二、任务描述（必须有）
教师引入UI设计的概念，引导学生对苹果系统，安卓系统和Windows Phone系统这三大系统的发展史以及基本组件和各自特色进行总结，在教师演示及指导下，学生能够分析移动端APP的设计趋势并完成分析报告。
三、使用到的资料及工具
1. 《Photoshop移动UI界面设计实用教程》；
2. 《移动应用UI设计》；
3. 《APP UI设计从入门到精通》
四、实训内容及要求（必须有，重点内容）
（一）子任务1：手机UI及平面UI的区别？
手机UI的平台主要应于在手机的APP客户端上。而平面UI的范围则非常广泛，包括了绝大部分UI的领域。手机UI的设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能和手机参数有所了解。由于手机UI的独特性，使得很多平面设计师需要重新调整审美基础。比如手机UI通常对尺寸有严格要求、对控件和组件类型的特殊要求等。请同学们具体的举下例子说明两者之间的区别。

手机UI设计的特点
手机界面交互过程不宜设计的太复杂，交互步骤不宜太多。
手机的显示屏相对较小，能够支持的色彩也比较有限，可能无法正常显示颜色过渡过于丰富的图像效果。不同型号的手机支持的图像格式、音频格式和动画格式不一样，所以在设计之前要充分收集资料，选择尽可能通用的格式。
不同型号的手机屏幕比例不一致，所以设计时还要考虑图片的自适应问题和界面元素图片的布局问题。

（二）子任务2：手机界面的设计原则主要有哪些？请同学们简单总结。

手机界面在设计的时候要求：
1） 界面效果的整体性、一致性
a.界面的色彩及风格与系统界面统一
b.操作流程系统化
2）界面效果的个性化
特有的界面框架
专用的界面图标
界面色彩的个性化设置
3）界面视觉原色的规范
线条色块与图像的结合
图形图像元素的质量

（三）对苹果系统，安卓系统和Windows Phone系统这三大系统的发展史以及基本组件和各自特色进行总结。

（四）综合任务：手机UI中的计算器界面和密码输入界面、电话拨号盘使用的频率都很高，界面上面的元素也差不多，请同学们发挥创意，自定义色彩方案和设计风格，完成其中一个界面。

五、任务单元完成总结
完成本任务单元的学习之后，同学们对于UI设计是否有比较直观的概念，请同学们进行网上调研，分析移动端APP的设计趋势，并完成分析报告。

任务二 认知UI设计规范和制作流程

一、学习目标
通过本任务单元的训练，学生应该能够：
1. 熟悉移动UI设计规范和制作流程；
2.在教师的指导下，能够根据客户需求，绘制APP界面；
二、任务描述
客户发布需求制作一个界面，学生根据苹果系统，安卓系统和Windows Phone系统这三大系统的界面设计规范，和客户交流确定需求之后，生成UI设计方案，和客户沟通修改之后将APP界面制作出来。
三、使用到的资料及工具
1. 《Photoshop移动UI界面设计实用教程》；
2. 《移动应用UI设计》；
3. 《APP UI设计从入门到精通》
四、实训内容及要求
（一）子任务1：熟悉三大系统的手机界面设计规范。
1.IOS系统的界面设计规范主要有哪些？列举几点简单说明。

2. Android系统的界面设计规范主要有哪些？列举几点简单说明。

知识点梳理
IOS篇
1）尺寸及分辨率
iPhone界面尺寸：320*480、640*960、640*1136
iPhone6：4.7英寸(1334×750)，iPhone6 Plus：5.5英寸(1920×1080)
设计图单位：像素72dpi。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计，现在iphone6和plus出来后有很多人会使用6的设计效果。
2）界面基本组成元素
iPhone的app界面一般由四个元素组成，分别是：状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。这里取用640*960的尺寸设计。
状态栏(status bar)：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px；
导航栏(navigation)：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px；
主菜单栏(submenu，tab)：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px；
内容区域(content)：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px。

3）字体大小
iPhone上的字体英文为：HelveticaNeue 。中文Mac下用的是黑体，Win下则为华文黑体(最新字体称为黑体-简)。下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小。

ANDROID篇
1）尺寸及分辨率
Android界面尺寸：480*800、720*1280、1080*1920
Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。
2）界面基本组成元素
Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。
Android中我们取用的720*1280的尺寸设计。
状态栏高度为：50px
导航栏高度为：96px
主菜单栏高度为：96px
内容区域高度为：1038px(1280-50-96-96=1038)

Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，高度也是和菜单栏一样的：96px；Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。
3）字体大小
Android 上的字体为：Droid sans fallback，是谷歌自己的字体，及微软雅黑很像。百度用户体验的调查中，可以看出用户可接受的文字相应问题。

（二）子任务2：熟悉手机UI的制作流程。
手机界面设计流程分为4部分。分别是确认设计对象、绘制设计草稿、完成界面绘制和输出正确格式。
1）确认设计对象
每一个APP程序都有一个核心功能。太多的功能除了会给程序的编写带来难度外，也会使用户无所适从。
2）绘制设计草稿
确定了设计方案后，可以通过完成界面的草图绘制。是指用最传统的纸笔绘制初稿，帮助我们在设计初期记录和整理思路。
3）完成界面绘制
将扫描后的线稿，置入一些平面设计的工具软件中进行软件绘制。一些视觉设计出身的原型设计人员因为软件使用习惯的原因，会选用Adobe的一些平面和网页设计工具来做原型设计工具，像Photoshop、Illustrator、Flash和3DS Max等。
4）输出正确格式
在UI设计的最后一步是输出正确的图片格式。这时就需要UI设计师在最后交出设计图纸时，要配合开发人员、测试人员进行裁图配合。

（三）子任务3：制作一个简单的主题界面，可以是APP的首页，或者是其他主题界面。下图是音乐播放界面，供同学们参考。

（四）子任务4：完成问卷调查分析报告书。
这项任务需要花费同学们比较多的时间，但是这个阶段在整个APP UI设计过程中是非常重要的。各位同学根据自己想做的APP主题，模拟客户需求，针对客户的意愿，为客户进行市场调研，可以用问卷调查或者上网搜索数据的方式完成此次作业。通过收集的问卷数据，分析使用用户的具体需求，完成问卷调查分析报告书。（这项工作可以帮助对于确定APP的功能结构）。提供装修消费心里问卷调查分析报告书供同学们参考。 

装修消费心理问卷调查分析报告书
抽样消费者的人口特征分析：
我们调查的年龄阶段主要在 15-25 岁，女性占 57%，男性占 43%。 学生占 25%， 专业技术人员占 5%， 个体户占 40%，其他占 30%。个人月收入大多都在 1000-5000 元，少数在 5000 元以上，基本来自上海本地。
根据消费者装修的消费各项满意度作出本问卷的关联分析，具体情况如下：
一、 您理想中的装饰风格是什么？
根据问卷调查的结果，得出结果是 % 77.78% 的消费者在装修时偏向喜欢简约时尚的专修风格，认为房间的装修，要简单，担又不失去现代时尚的风格，给人焕然一新的感觉，看上去也很有品位，而且配合起简单的装修，给人的感觉会很清爽，这只是视觉上的效果，简约的风格，还有就是，在生中，他很好打理，越简单的东西越好打理。
综上分析结果得出：在各种装修风格种，哪种装修风格更受到大家的关注呢？时尚简约、实用、田园风格，这四种风格分别名列前三，可以推出大家对于时尚简约风格认知程度深刻，以及目前消费者对田园风格的钟爱；大家在千变万化的装修风格中也不会忘记一定要实用。
二、 喜欢什么类型的空间? ?
数据显示分析 100 位被调查者中有 57 位选择宽敞占总人数的 57%，35 位选择造型多变占总人数的 52%，11 位选择紧凑占总人数的 11%，25 位选择流动性占总人数的 25%.
综上分析结果得出：宽敞的空间以其夏天没那么热，又不会因为拉上窗帘而使房间变暗等特性抢占绝大部分消费者的眼光，造型多变及流动性的空间则分别以 52%、25%的优势位居第二、第三。
三、 目前您对自己家的室内环境满意吗 ？
数据显示分析 100 位被调查者中有 33 个对自己家里的装修基本满意，13 个对自己家里的装修非常满意，13 个不太满意自己家里的装修，12 个不满意自己家里的装修。
综上分析结果得出：大部分人对自己家里的装修的是基本满意的，由于古老的方式人们看得有点厌烦，想要改变装修风格的也占了不少的一部分。
四、了解装修的渠道？
数据显示分析 100 位被调查者中有 31 位选择广告宣传占总人数的 31%，同样有 38 位选择亲朋介绍占总人数的 38%，有39位选择自己调查对比占总人数的39%，21位选择参加展会活动占总人数的21%，34位选择去装修公司了解占总人数的34%。
综上分析结果得出：对于目前调查来看买装修自己调查对比是大家的首要选择，自然装修自己调查对比也就是让消费者了解装修渠道的首要途径了，综合为 25 岁以下年龄段的青年消费者。对于广告宣传和亲朋介绍这两个渠道，先进的广告宣传给大家带来了生活上的方便，这方面主要表现在 35 岁以下的年轻人身上，朋友的推荐亦是其主要途径之一。公交车广告做为后来者，穿梭在生活中的每时每刻，发展潜力相当大。
五、 您觉得风水在家庭装修中是否重要？
数据显示分析 100 位被调查者中有 30 位认为 很重要 占总人数的 30%，15 位认为一般占总人数的 15%，11 位认为无所谓占总人数的 11%，9 位认为不重要占总人数的 9%。
综上分析结果得出 ：风水是 调节人的思维清析，安神养性，保持和谐的精神状态一种方法，有些人认为风水是迷信，所以不太相信风水。大多数的人都会比较注重风水这一方面。
六、 您希望自己的家是什么样的呢 ？
数据显示分析 100 位被调查者中有 37 位选择“浪漫式的”占总人数的 37%，49 位选择“怀旧式的”占总人数的 49%，48 位选择“个性式的”占总人数的 48%，“华丽式的”则以占总人数 20%的劣势收尾。
综上分析结果得出：生活质量的提高直接改变大家的消费观念，给自家营造浪漫的气氛，使自家变得温馨，赋有诗意让时下当仁不让的生活方式；怀旧式的客厅气氛足以看出现在人们还璞归真的自然心态，文化的沉淀让怀旧式的客厅深深熏陶着现代忙碌的人们，喜爱骤然而生。个性式的客厅更是 25 岁—35 岁年龄阶段年轻人的所倾慕的气氛。
七、装修的主要用途？
数据显示分析 100 位被调查者中有 57 位选择“住房重新装修”占总人数的 95%，55 位选择“新居装修”占总人数的 92%，而相当特殊的一项则是“孝敬父母”也占到总人数的 82%，37 位选择“追求时尚”占总人数的 62%。
综上分析结果得出：住房的重新装修和新房装修还是消费者装修的首要条件及主要用途，可以鲜明的看出装修及房地产的关系相当的紧密，住房问题解决了，装修产业估计也随之繁荣起来。百善孝为先，装修孝敬父母，合乎情理，此行为将被受推崇。
八、 购买材料您会选择去？
数据显示分析 100 位被调查者中有 37 位选择大卖场占总人数的 37%，46 位选择网络平台占总人数的 46%，选择路边的店铺占总人数的 5%，选择展会促销占总人数的 12%。
综上分析结果得出 ：大卖场顾客来选择的机会多，卖家的机会就多，在竞争中生存货物比一般的好，网络平台里的东西可以选择的比较多，花样多。而专卖店里的东西因为更专业买的更放心品质比较有保障。少部分的人会选择在路边的店铺和展会促销的地方买材料，可能是买得不够放心如果有买的话也可能是由于价格比一般的低一点。
九、 消费者选择装修的途径？
大型装修公司的占 25%，适情况而定的占 35%，网络直营的占 40%。
综上分析结果得出 ：从统计数据来看，人们对选择装修的的途径为网络的越来越多，由于最近新兴的各类网络的装修平台的兴起并且由于调查的多半为年轻人可以看出，网络的装修今后可能变成主流。不过也有不少人提出网络装修的真实度和合理性还是有必要改进的，还要有上升的空间。
十、装修的价位？
数据显示分析 100 位被调查者中有 27 位选择“30000—60000”占总人数的 27%，29 位选择“60000—100000”占总人数29%。
综上分析结果得出：生活质量的提高，价廉物美消费者更渴求，怎么让消费者满意，价格的比较很重要，不过原创设计的附加值是少不了的，自然价格也不菲。
十一、 在家居装修中您认为哪个功能空间最重要？
数据显示分析 100 位被调查者中有 31 位选择玄关占总人数的 31%，41 位选择餐厅占总人数的 41%。61 位选择客厅占总人数的 61%。57 位选择卧室占总人数的 57%。30 位选择书房占总人数的 30%。44 位选择卫生间占总人数的 44%。
综上分析结果得出：家居装修的重点在客厅、卧室、卫生间这三个地方主要是因为一个人的家里要体现出装修的好坏客人一到主要是在客厅，有客人访问时难免会去趟卫生间，选择卧室的主要大概是因为卧室是自己的私密空间个人喜好住的舒服一点吧。
十二、 您装修时材料最重视哪些因素? ?
数据显示分析 100 位被调查者中同样有 30 位选择是知名品牌的占总人数的 30%，质量上乘也占到总人数的 56%，款式流行时尚则仅仅占到 27%，价格合理也占到总人数的 45%，风格独特也占到总人数的 38%。
综上分析结果得出：看来大多数还是比较注重装修的质量和装修的价格合理，物美价廉就是各个消费者的心态吧，消费者的大部分心理是物美价廉而且又要有自己的个性。追求一定的攀比喜欢知名品牌。
十三、逛品牌装修商场，最能吸引您眼球的是？
数据显示分析 100 位被调查者中有 52 位选择“门面新颖出彩的装修设计”占总人数的 87%，50 位选择“店内舒适宽敞的室内设计”占总人数的 83%，而“无序的逛，不考虑这个因素”占总人数的 3%。
综上分析结果得出：出彩的店面装修和造型新颖的装修诚然是吸引顾客眼球的第一武器，要想掌握此锐器就得好好把握消费者这一购物特点，那么打好品牌的第一道槛就很容易迈过了。
十四、在自己关注的店内，什么决定您装修？
数据显示分析 100 位被调查者中有 55 位选择“装修的功能实用”占总人数 92%，51 位选择“装修的环保健康”占总人数的 85%，46 位选择“装修的售后服务”占总人数的 76%，“推销员的态度”占到同样的比例。
综上分析结果得出：功能实实在在好用就是关键，环保及健康也是现代社会人们追求的新目标，完善的售后让消费者牢记了这个品牌的。也起了相当关键的是推销员的态度，一个企业的文化素养要把它深化到推销员的思维中，让完美的态度得到消费者的共同认可。
十五、 消费者对家具产品购买注重的细节为？
比较注重品牌 的占 15%，非常注重质量材质的占 40%，比较注重外观的占 15%，比较注重服务的占 10%，非常注重价格的占 20%。
综上分析结果得出：大部分的消费者在购买家具产品时比较注重产品的价格、质量，注重品牌和外观的的消费者占次要地位，由于收入上的差距，也就决定了在消费上的差距，所以在购买经济有限的能力下购买非常好的品牌相对来说占的比重不是很大，但是一般情况下质量和使用价值是大多数人选择购买的首要要求和条件。
十六、 消费者在购买家具产品时主要的意见？
家人 占 35%，朋友，同事占 20%，网络平台占 35%，报刊杂志占 10%。
综上分析结果得出：有以上数据显示，一半以上的消费者对家具产品购买的意见大多数来自于自己的亲戚朋友或者是同事邻居，其中受报刊杂志的影响不是很大，没有购买经历的或者没有看法的基本上没有这样得人群存在。家具自古以来是中国历史的一道重要标准，也体现了一个历史和一个民族的特色。代表着一个民族博大精深的文化。室内设计对家具这块一直在棘手中寻求突破。根据数据显示，朋友和家人和同事的意见对购买者的意向非常明确及重要，所以设计好的适合大众化的家具凸显的很重要。
十七、您最喜欢的品牌装修广告的原因：
数据显示分析 100 位被调查者中有 55 位选择“广告创意新颖、独特”占总人数 92%，51 位选择“广告介绍的装修特色/功能吸引人”占总人数的 85%，46 位选择“广告给人感觉很亲切、温馨”占总人数的 76%。
综上分析结果得出：广告的设计在品牌装修的设计、生产及销售这些环节中是相当关键的，创意的新颖及独特让人印象深刻，这就有助于装修品牌在消费者心目中建立良好的形象，好的广告很有可能成就一个好的品牌推广度。
十八、 您希望您的居室采用哪种色调？
数据显示分析 100 位被调查者中同样有 53 位选择暖色调占总人数的 53%，18 位选择冷色调 占总人数 18%，31 位选择中性色调占总人数的 31%。
综上分析结果得出：暖色调更是目前消费追求家的温暖心态的爱好，相对冷色调是属于那种比较镇静、收缩、遥远的感觉，让人感到安静、沉稳、踏实。
十九、 您对装饰材料有什么要求 ：
数据显示分析 100 位被调查者中有 52 位选择“工艺”及“环保，无毒健康”占总人数 87%，48 位选择 “品牌”占总人数的 80%，40 位选择“价格”占总人数的 67%。
综上分析结果得出：品牌装修是好质量、好工艺、好服务的代名词，买品牌装修就是等于把放心买回家，购买品牌装修是消费者时下的良选；身份的体现恰恰不是消费者对购买品牌装修的初衷。环保，无毒健康更是消费者崇尚的好装修健康理念。
二十、消费者对装修产品售后服务的相关做法：
要求及原装修公司协商 的占 65%，给有关部门投诉的占 20%，不清楚的占 5%，坏了也能凑合的占 10%。
综上分析结果得出：从统计数据来看，现在装修注重售后服务的占了大部分，懂得维护自己切身利益的人越来越多，说明现在人的维护权相对增加许多，装修公司的售后服务性工作进步了不少，市场次序有很大的发展空间。

（五）子任务5：完成竞品分析，通过分析同类型APP产品的优缺点，确定自己要做的APP的功能结构和风格设计规范，并生成APP UI设计方案。
初步的设计方案要求包含：
1.用户定位；2.功能需求设计；3.需求汇总；4.界面风格；5.配色方案
这些要素可以简单阐述，但是必须经过市场调研有一定的数据。

任务三 设计手机APP Logo图标
一、学习目标
通过本任务单元的训练，在教师的指导下，学生应该能够：
1.根据要求搜集资料生成客户需求分析，确定图标的风格和配色方案；
2.根据客户的要求，对图标进行设计，画出草图；
3.和客户沟通后进行修改，最后用软件制作并优化。
二、任务描述
及客户交流，分析客户所要设计的APP的功能，风格及特点，对APP图标进行设计，使用Photoshop中自带的绘图工具、色彩填充工具、滤镜等工具，制作出精美的APP图标。
三、使用到的资料及工具
1. 《Photoshop移动UI界面设计实用教程》；
2. 《移动应用UI设计》；
3. 《APP UI设计从入门到精通》
四、实训内容及要求
（一）子任务1：在实训指导任务2中的子任务4和子任务5完成的基础上，及客户交流，分析客户所要设计的APP图标的风格及特点，对APP的LOGO进行创意和设计。
1.logo图标创意阶段
很多设计师的图标制作过程,基本都是偏向技法的介绍。其实在图标设计过程中除了技法之外最重要的就是图标创意,但这方面的系统介绍网上倒是很少。希望通过这次实训界面设计项目,同学们能对界面图标制作创意阶段的方法加深理解，并能尝试用丰富的图例来阐释自己的想法。
1)根据项目需求,确定图标的风格。

当我们接到设计任务后，我们怎么开始设计图标呢？首先我们要看懂界面需求，对每个功能图标的定义要非常清楚，否则我们设计的结果将导致用户难以理解，这个也是图标设计所关心的可用性问题！差的图标设计最终导致用户界面的操作失败的体验。但视觉审美和可用性有时候存在矛盾的方面，我们不能走极端，只顾及可用性但忽视设计美观的一面，也不能追求设计上的美的需求而忘了这是功能性很强的界面图标，最好是能在两者之间取得平衡！

2)了解客户的功能需求后，进行创意准备。
收集关于“词语——图形”之间能转化的元素，用生活中的物或其他视觉产品来代替所要表达的功能信息、或操作提示。例如音乐：我们会想到，音符、光盘、音乐播放机、耳机等等。但到底选择什么来表达呢？原则上是越贴近用户的心理模型最好，用大家常见的视觉元素无来表达所要传达的信息。隐喻是在图标设计中是必要的思维方法！
2.草图绘制阶段
这个阶段就是把我们的创意绘制出来，检验下视觉关系，也就是在视觉方面多在草图上推敲，这样效率高些，避免在渲染完后来后悔。首先要确定我们图标透视，这是关系到一套方案中的每个图标的透视方向，这是在图标设计一致性方面的基本要求，透视统一。然后一步步的添加细节。
3.草图渲染阶段
及客户进行了充分的沟通之后对图标进行反复修改，如果图标的草图方案通过，可以使用Photoshop完成图标的绘制和渲染。（在实训的过程中，同学们可以把画好的图标作个现场测试，给同学或老师看，同时问他是否能理解我们画的图标含义）

（二）子任务2：制作IOS7风格日记图标
在Iphone4s之后，苹果的图标都向扁平化风格改变了，这样做的好处既可以降低系统资源占用率，提高手机的响应速度，使用户的使用体验更好，也让界面的视觉效果更清晰明了。但是在很多注重设计的网站，还是应用了大量写实风格的图标，写实风格的图标给人感觉更美观，视觉冲击更大。

1）Cttrl + N 创建画布，大小为1024px * 1024px ， 填充背景色为#fcf2da。
然后 → 编辑 → 首选项 → 参考线、网格和切片，设置如下：

2）先创建一个圆角矩形，大小为512px*512px，半径120px，记住左上角是形状。搞定后填充颜色#c47420，命名“icon base”。

 3）添加内阴影，参数如下：

 4）为它做一个长投影效果，创建一个矩形，填充黑色，大小可以自己调整，宽718.22px和高732.74px，Ctrl + T 变换角度。添加图层样式-----渐变叠加，参数如图，顺便把不透明度调整为30%，填充0%。

 然后得到的效果如下：

5）开始创建笔记本，同样先创建圆角矩形，参数如下：

6）然后复制一层，快捷键“A”来到选择工具，减少16px，调整高度为432px。
7）完成后继续复制一层，依上高度改为416px，填充颜色改为 # f3f3f3，完成后如下图。

8）笔记本雏形完成了，现在给它划线，用直线工具，粗细的像素调整为2，填充黑色。完成后调整图层不透明度为20%，笔记本就成型了。

 9）开始创建铅笔。首先，创建矩形，大小为192 x 96px，颜色改成 #00da67或者任何你喜欢的颜色。继续创建两个矩形，高度改为32px，填充黑色，调整不透明度为25%和10%，整齐列到笔身上，如下图：

 10）现在来创建笔头，你可以用多边形工具，双击画布后，参数设置如下：

11）颜色填充为#e39a4d，然后对齐笔身。

 12）现在创建笔尖，如法炮制一个三角形，大小为32x32px，颜色填充为#474f57，移动到笔头处对齐，创建为剪切蒙版，如下图：

 13）现在给它加个橡皮擦。创建一个圆角矩形，宽高是64x96px，半径是20px，颜色填充# f78879，命名为“Rubber”，然后创建一个矩形，大小32x96px，填充颜色# d5d5d5，如图：

14）为它添加点光，创建一个圆角矩形，大小是10* 40px ，填充白色，不透明度改成30%。

 15）好了，现在是给它添加长投影的时间了，创建矩形，大小352x160px，其他的按照前边的长投影一样变换角度，添加渐变就大功告成了。

五、任务单元完成总结
APP Logo的创意阶段是非常困难的，不少同学们都觉得创意不是一件简单容易的事情。完成本任务单元的学习之后，同学们对于图标创意是否有自己独到的见解或者体会，请同学们分享一下自己图标创意和制作过程中的心得。

任务四 制作手机UI中的主要元素
一、学习目标
通过本任务单元的训练，根据客户的要求，学生应该能够：
1.对APP进行整体布局设计，并设计适合的色彩构成和合理的布局，要有良好的创意。
2.进行APP控件的制作，进行相关素材的选取；进行界面中图片，字体排版进行特殊效果的制作。
二、任务描述
根据客户的要求，对APP进行整体布局设计，并设计适合的色彩构成和合理的布局，要有良好的创意。主要任务包括进行APP控件的制作、相关素材的选取，进行界面中图片和字体排版的特殊效果制作。
三、使用到的资料及工具
1. 《Photoshop移动UI界面设计实用教程》；
2. 《移动应用UI设计》；
3. 《APP UI设计从入门到精通》
（一）子任务1：快速制作清新手机导航菜单，通过这个案例的学习，能对手机UI中相似元素的制作有一定的认识。
手机UI中的导航按钮在日常生活中是扮演着很重要的额角色，很多手机UI设计师都在导航的设计上花费了不少心思，有些设计在色彩上都有很多构造，小小的按钮也是创意的凝结。

1）打开下图所示的背景素材，选择菜单：滤镜 > 模糊 > 高斯模糊，数值稍微大一点，在背景图的选择上注意尽量找一些色彩统一的，否则在模糊后，会导致色系太多，没有层次感。

2）把前景色设置为绿色，用圆角矩形工具拉一个合适的圆角矩形，然后选择钢笔工具，在属性栏选择“合并形状”，勾出底部三角形形状，如下图。

3）把当前图层填充改为：0%，此时形状的颜色就消失了，但是你会发现形状路径还在。
4）给当前形状添加图层样式，设置：内发光、内阴影，投影，参数及效果如下图。

5）输入想要的文字，文字用白色，再添加投影样式，如下图。

6）按照下面的过程给顶部边框，边角位置增加高光效果。

7）这样一个透明的质感就完成了，导航的技法是一样的。

8）最终效果如下：

（二）子任务2：快速制作wifi无线图标，通过这个案例的学习，能对手机UI中相似元素的制作有一定的认识。
手机UI中的一些小图标在用户的使用过程中同样也扮演着不可或缺的角色，在不同系统的手机UI中，他们的样式很接近，但是在结构和位置上又有各自一些细小的个性变化。

1）新建一个500*500的画布，填充背景颜色#2b2b2b，然后选择形状工具快捷键中的椭圆工具制作300*300的圆形，圆形填充色为白色。

2）选中图层1，按住Alt（Alt是减去操作，Shift是合并形状操作），在操作区域单击一次。出现菜单，使用路径选择工具，将移动生成的圆形对齐，就变成了一个圆环。
3）继续按照步骤3的方法，不过现在是按Shift+鼠标左键。大小220*220。移动圆形对齐，结果变成下面左图样式。

4）重复步骤3和步骤4，圆的大小为180*180；140*140最后得到上面右图, 然后在上方的工具栏中找到路径操作的按钮，点击合并形状组件。

5) 然后选中椭圆1，选中矩形工具，按住Shift（像步骤3和步骤4），单击鼠标左键，创建一个150*150矩形，用路径选择工具选中矩形，Ctrl+T，在工具栏中把白色的点移动到左下位置，角度输入-45°。变成这样：

6）选中矩形，在工具栏中选择“及形状区域相交”，最后变成下图左。

7）最后一步新建一个50*50的椭圆，放在正确的位置，最终完成图如上右图。
（三）子任务3：在实训任务2中的子任务4和子任务5完成的APP功能结构和UI设计方案的基础上，请同学们为自己的APP设计和制作页面中的图标元素。以装修网为范例，设计出的页面图标元素如下，供同学们参考。
任务五 设计并制作手机APP UI
一、学习目标
通过本任务单元的训练，学生应该能够根据客户的要求，对APP进行整体设计，从图标到用户交互界面，完成比较完整的一个作品。
1.熟悉手机UI交互界面设计规范和制作流程；
2.能够根据具体APP功能要求，对手机交互界面进行设计，使用户体验更舒适。
二、任务描述
及客户交流，分析客户所要建设的APP风格及特点，对从图标到用户界面进行整体设计，确定风格和配色方案，画出草图，和客户沟通后进行修改，最后用软件制作并优化。
三、使用到的资料及工具
1. 《Photoshop移动UI界面设计实用教程》；
2. 《移动应用UI设计》；
3. 《APP UI设计从入门到精通》
4.《Axure RP8网站和APP原型制作从入门到精通》
（一）子任务1：完成问卷调查分析报告书

（二）子任务2：

（三）子任务3：完成APP logo设计。

（四）子任务4：完成APP 高保真图设计。

设计并制作APP首页界面。
手机UI中的首页是一个APP中最重要的一个页面，在APP中扮演着很重要的额角色，很多手机UI设计师都