安卓AppsUI设计实训指导书

漳州职业技术学院 信息工程学院安卓 AppsUI设计实 训 指 导 书漳州职业技术学院计算机工程系2016年 8月 8日漳州职业技术学院 信息工程学院目 录前 言 1任务一 认知 UI 设计3任务二 认知 UI 设计规范和制作流程5任务三 APP 图标的设计与制作10任务四 手机 UI 中主要元素的设计与制作18任务五 手机 APP UI 的设计与制作24漳州职业技术学院 信息工程学院1前 言随着 android 系统的普及，android 应用的需求越来越大，这是一个潜力巨大的市场，吸引了无数软件开发厂商和开发者投身其中，大量的手机游戏和软件的研发和制作都需要 Android 开发工程师和安卓 UI 设计师，引发了 Android 人才荒。软件 UI 设计属于 ID（工业产品设计）的一个特殊形式，只是针对的材质有所不同。但随着智能化电子产品的普及，带有液晶屏显示的产品将越来越多。也就意味着越来越多的产品设计需要软件 UI 设计。随着技术平准化手机产业出现价格竞争的环境下，手机的人机交互界面（UI）给手机市场提供新的卖点，被认为是新的产业动力。手机 UI 的新设计与功能开发是根据各种客户群体的喜好及使用习惯而进行的，随着手机用户年龄层的扩大，性别、宗教、环境、生活方式的多样化，其开发范围和潜力正在无限扩大。这些新的趋势使得界面交互可能不再囿于某个具体产品本身，它可能开始涉及了与使用环境及其他用户之间的交流。根据对当前手机技术的分析以及对国外在人机交互及相关领域研究的关注，提出了“泛交互”的概念，并对新的趋势、新的设计进行展望。本课程是计算机软件技术专业“平面设计制作”教学模块的核心课程，是学生进行平面设计与制作职业能力训练的主要环节，同时为平面制作实训和多媒体整合制作综合实训打下坚实基础。本课程学习需要具备一定的美工基本知识，在先修课程 Photoshop 等美工方面的学习与训练后，具备平面设计基本概念和基本常识，再进一步地实现界面设计的能力。通过本课程的学习与训练，使学生能够利用工具软件 adobe illustrator、Photoshop 实现手机图标和界面的设计和制作。学生能够根据需要进行作品定位及设计；能够根据需要随心所欲进行作品形象或图标的设计及制作；能够设计出较好的用户体验；能够利用软件进行矢量图绘制、修改及上色，进行图形的色彩处理；能够了解 UI 设计的规范和制作流程。通过本课程的学习，学生能够：1、与客户沟通，进行相关需求分析，生成 UI 设计需求分析书，并收集相关素材；2、根据 UI 设计的定位，对设计进行风格设计和用户体验设计；3、根据风格或用户体验的设计方案，对 UI 设计进行具体的制作。4、对 UI 设计作品进行优化、上传发布、推广及更新维护。实训指导书主要为学生在移动应用 UI 设计方面提供一些借鉴，通过对优秀案例的学习，能够提升学生对移动应用界面的设计能力。包括各项工具的熟练掌握和综合漳州职业技术学院 信息工程学院2应用，该实训分为以下几个部分：1. 移动 UI 设计流程2. APP 图标设计3. 移动界面设计规范4. 人机界面交互设计指南漳州职业技术学院 信息工程学院3任务一 认知 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 通常对尺寸有严格要求、对控件和组件类型的特殊要求等。请同学们具体的举下例子说明两者之间的区别。漳州职业技术学院 信息工程学院4（二）子任务 2：手机界面的设计原则主要有哪些？请同学们简单总结。手机界面在设计的时候要求：1） 界面效果的整体性、一致性 a.界面的色彩及风格与系统界面统一 b.操作流程系统化2）界面效果的个性化 特有的界面框架 专用的界面图标 界面色彩的个性化设置 3）界面视觉原色的规范 线条色块与图像的结合 图形图像元素的质量 手机 UI 设计的特点 手机界面交互过程不宜设计的太复杂，交互步骤不宜太多。 手机的显示屏相对较小，能够支持的色彩也比较有限，可能无法正常显示颜色过渡过于丰富的图像效果。不同型号的手机支持的图像格式、音频格式和动画格式不一样，所以在设计之前要充分收集资料，选择尽可能通用的格式。 不同型号的手机屏幕比例不一致，所以设计时还要考虑图片的自适应问题和界面元素图片的布局问题。 漳州职业技术学院 信息工程学院5（三）对苹果系统，安卓系统和 Windows Phone 系统这三大系统的发展史以及基本组件和各自特色进行总结。（四）综合任务：手机 UI 中的计算器界面和密码输入界面、电话拨号盘使用的频率都很高，界面上面的元素也差不多，请同学们发挥创意，自定义色彩方案和设计风格，完成其中一个界面。漳州职业技术学院 信息工程学院6五、任务单元完成总结完成本任务单元的学习之后，同学们对于 UI 设计是否有比较直观的概念，请同学们进行网上调研，分析移动端 APP 的设计趋势，并完成分析报告。漳州职业技术学院 信息工程学院7任务二 认知 UI设计规范和制作流程一、学习目标通过本任务单元的训练，学生应该能够：1. 熟悉移动 UI 设计规范和制作流程；2.在教师的指导下，能够根据客户需求，绘制 APP 界面；二、任务描述客户发布需求制作一个界面，学生根据苹果系统，安卓系统和 Windows Phone 系统这三大系统的界面设计规范，和客户交流确定需求之后，生成 UI 设计方案，和客户沟通修改之后将 APP 界面制作出来。三、使用到的资料与工具1. Photoshop 移动 UI 界面设计实用教程 ；2. 移动应用 UI 设计 ；3. APP UI 设计从入门到精通四、实训内容与要求（一）子任务 1：熟悉三大系统的手机界面设计规范。1.IOS 系统的界面设计规范主要有哪些？列举几点简单说明。2. Android 系统的界面设计规范主要有哪些？列举几点简单说明。漳州职业技术学院 信息工程学院8知识点梳理IOS 篇1）尺寸及分辨率iPhone 界面尺寸：320*480、640*960、640*1136iPhone6：4.7 英寸(1334750)，iPhone6 Plus：5.5 英寸(19201080)设计图单位：像素 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 。漳州职业技术学院 信息工程学院93）字体大小iPhone 上的字体英文为：HelveticaNeue 。中文 Mac 下用的是黑体，Win 下则为华文黑体(最新字体称为黑体-简)。下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小。ANDROID 篇1）尺寸及分辨率Android 界面尺寸：480*800、720*1280、1080*1920Android 比 iPhone 的寸尺多了很多套，建议取用 720*1280 这个尺寸，这个尺寸720*1280 中显示完美，在 1080*1920 中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。2）界面基本组成元素Android 的 app 界面和 iPhone 的基本相同：状态栏、导航栏、主菜单、内容区域。Android 中我们取用的 720*1280 的尺寸设计。状态栏高度为：50px导航栏高度为：96px主菜单栏高度为：96px内容区域高度为：1038px(1280-50-96-96=1038)漳州职业技术学院 信息工程学院10Android 最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，高度也是和菜单栏一样的：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 设计师在最后交出设计图纸时，要配合开发人员、测试人员进行裁图配合。 漳州职业技术学院 信息工程学院11（三）子任务 3：制作一个简单的主题界面，可以是 APP 的首页，或者是其他主题界面。下图是音乐播放界面，供同学们参考。（四）子任务 4：完成问卷调查分析报告书。这项任务需要花费同学们比较多的时间，但是这个阶段在整个 APP UI 设计过程中是非常重要的。各位同学根据自己想做的 APP 主题，模拟客户需求，针对客户的意愿，为客户进行市场调研，可以用问卷调查或者上网搜索数据的方式完成此次作业。通过收集的问卷数据，分析使用用户的具体需求，完成问卷调查分析报告书。 （这项工作可以帮助对于确定 APP 的功能结构） 。提供装修消费心里问卷调查分析报告书供同学们参考。 装修消费心理问卷调查分析报告书抽样消费者的人口特征分析：我们调查的年龄阶段主要在 15-25 岁，女性占 57%，男性占 43%。 学生占 25%， 专业技术人员占 5%， 个体户占 40%，其他占 30%。个人月收入大多都在 1000-5000 元，少数在 5000 元以上，基本来自上海本地。根据消费者装修的消费各项满意度作出本问卷的关联分析，具体情况如下：一、 您理想中的装饰风格是什么？漳州职业技术学院 信息工程学院12根据问卷调查的结果，得出结果是 % 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 岁以下的年轻人身上，朋友的推荐亦是其主要途径之一。公交车广告做为后来者，穿梭在生活中的每时每刻，发展潜力相当大。五、 您觉得风水在家庭装修中是否重要？漳州职业技术学院 信息工程学院13数据显示分析 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%。漳州职业技术学院 信息工程学院14综上分析结果得出 ：从统计数据来看，人们对选择装修的的途径为网络的越来越多，由于最近新兴的各类网络的装修平台的兴起并且由于调查的多半为年轻人可以看出，网络的装修今后可能变成主流。不过也有不少人提出网络装修的真实度和合理性还是有必要改进的，还要有上升的空间。十、装修的价位？数据显示分析 100 位被调查者中有 27 位选择“3000060000”占总人数的 27%，29 位选择“60000100000”占总人数 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综上分析结果得出：功能实实在在好用就是关键，环保与健康也是现代社会人们追求的新目标，完善的售后让消费者牢记了这个品牌的。也起了相当关键的是推销员的态度，一个企业的文化素养要把它深化到推销员的思维中，让完美的态度得到消费者的共同认可。十五、 消费者对家具产品购买注重的细节为？比较注重品牌 的占 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%。漳州职业技术学院 信息工程学院16综上分析结果得出：品牌装修是好质量、好工艺、好服务的代名词，买品牌装修就是等于把放心买回家，购买品牌装修是消费者时下的良选；身份的体现恰恰不是消费者对购买品牌装修的初衷。环保，无毒健康更是消费者崇尚的好装修健康理念。二十、消费者对装修产品售后服务的相关做法：要求与原装修公司协商 的占 65%，给有关部门投诉的占 20%，不清楚的占 5%，坏了也能凑合的占 10%。综上分析结果得出：从统计数据来看，现在装修注重售后服务的占了大部分，懂得维护自己切身利益的人越来越多，说明现在人的维护权相对增加许多，装修公司的售后服务性工作进步了不少，市场次序有很大的发展空间。（五）子任务 5：完成竞品分析，通过分析同类型 APP 产品的优缺点，确定自己要做的 APP 的功能结构和风格设计规范，并生成 APP UI 设计方案。初步的设计方案要求包含：1.用户定位；2.功能需求设计；3.需求汇总；4.界面风格；5.配色方案这些要素可以简单阐述，但是必须经过市场调研有一定的数据。漳州职业技术学院 信息工程学院17任务三 设计手机 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)根据项目需求,确定图标的风格。当我们接到设计任务后，我们怎么开始设计图标呢？首先我们要看懂界面需求，对每个功能图标的定义要非常清楚，否则我们设计的结果将导致用户难以理解，这个也是图标设计所关心的可用性问题！差的图标设计最终导致用户界面的操作失败的体验。但视觉审美和可用性有时候存在矛盾的方面，我们不能走极端，只顾及可用性但忽视设计美观的一面，也不能追求设计上的美的需求而忘了这是功能性很强的界面图标，最好是能在两者之间取得平衡！漳州职业技术学院 信息工程学院182)了解客户的功能需求后，进行创意准备。收集关于“词语图形”之间能转化的元素，用生活中的物或其他视觉产品来代替所要表达的功能信息、或操作提示。例如音乐：我们会想到，音符、光盘、音乐播放机、耳机等等。但到底选择什么来表达呢？原则上是越贴近用户的心理模型最好，用大家常见的视觉元素无来表达所要传达的信息。隐喻是在图标设计中是必要的思维方法！2.草图绘制阶段这个阶段就是把我们的创意绘制出来，检验下视觉关系，也就是在视觉方面多在草图上推敲，这样效率高些，避免在渲染完后来后悔。首先要确定我们图标透视，这是关系到一套方案中的每个图标的透视方向，这是在图标设计一致性方面的基本要求，透视统一。然后一步步的添加细节。3.草图渲染阶段与客户进行了充分的沟通之后对图标进行反复修改，如果图标的草图方案通过，可以使用Photoshop 完成图标的绘制和渲染。（在实训的过程中，同学们可以把画好的图标作个现场测试，给同学或老师看，同时问他是否能理解我们画的图标含义）（二）子任务 2：制作 IOS7 风格日记图标1）Cttrl + N 创建画布，大小为 1024px * 1024px ， 填充背景色为#fcf2da。然后 编辑 首选项 参考线、网格和切片，设置如下：2）先创建一个圆角矩形，大小为 512px*512px，半径 120px，记住左上角是形状。搞定后填充颜色#c47420，命名“icon base” 。在 Iphone4s 之后，苹果的图标都向扁平化风格改变了，这样做的好处既可以降低系统资源占用率，提高手机的响应速度，使用户的使用体验更好，也让界面的视觉效果更清晰明了。但是在很多注重设计的网站，还是应用了大量写实风格的图标，写实风格的图标给人感觉更美观，视觉冲击更大。漳州职业技术学院 信息工程学院193）添加内阴影，参数如下：4）为它做一个长投影效果，创建一个矩形，填充黑色，大小可以自己调整，宽718.22px 和高 732.74px，Ctrl + T 变换角度。添加图层样式-渐变叠加，参数漳州职业技术学院 信息工程学院20如图，顺便把不透明度调整为 30%，填充 0%。然后得到的效果如下：5）开始创建笔记本，同样先创建圆角矩形，参数如下：漳州职业技术学院 信息工程学院216）然后复制一层，快捷键“A”来到选择工具，减少 16px，调整高度为 432px。7）完成后继续复制一层，依上高度改为 416px，填充颜色改为 # f3f3f3，完成后如下图。8）笔记本雏形完成了，现在给它划线，用直线工具，粗细的像素调整为 2，填充黑色。完成后调整图层不透明度为 20%，笔记本就成型了。漳州职业技术学院 信息工程学院229）开始创建铅笔。首先，创建矩形，大小为 192 x 96px，颜色改成 #00da67 或者任何你喜欢的颜色。继续创建两个矩形，高度改为 32px，填充黑色，调整不透明度为25%和 10%，整齐列到笔身上，如下图：10）现在来创建笔头，你可以用多边形工具，双击画布后，参数设置如下：漳州职业技术学院 信息工程学院2311）颜色填充为#e39a4d，然后对齐笔身。12）现在创建笔尖，如法炮制一个三角形，大小为 32x32px，颜色填充为#474f57，移动到笔头处对齐，创建为剪切蒙版，如下图：13）现在给它加个橡皮擦。创建一个圆角矩形，宽高是 64x96px，半径是 20px，颜色填充# f78879，命名为“Rubber” ，然后创建一个矩形，大小 32x96px，填充颜色# d5d5d5，如图：漳州职业技术学院 信息工程学院2414）为它添加点光，创建一个圆角矩形，大小是 10* 40px ，填充白色，不透明度改成 30%。15）好了，现在是给它添加长投影的时间了，创建矩形，大小 352x160px，其他的按照前边的长投影一样变换角度，添加渐变就大功告成了。漳州职业技术学院 信息工程学院25五、任务单元完成总结APP Logo 的创意阶段是非常困难的，不少同学们都觉得创意不是一件简单容易的事情。完成本任务单元的学习之后，同学们对于图标创意是否有自己独到的见解或者体会，请同学们分享一下自己图标创意和制作过程中的心得。漳州职业技术学院 信息工程学院26任务四 制作手机 UI 中的主要元素一、学习目标通过本任务单元的训练，根据客户的要求，学生应该能够：1.对 APP 进行整体布局设计，并设计适合的色彩构成和合理的布局，要有良好的创意。2.进行 APP 控件的制作，进行相关素材的选取；进行界面中图片，字体排版进行特殊效果的制作。二、任务描述根据客户的要求，对 APP 进行整体布局设计，并设计适合的色彩构成和合理的布局，要有良好的创意。主要任务包括进行 APP 控件的制作、相关素材的选取，进行界面中图片和字体排版的特殊效果制作。三、使用到的资料与工具1. Photoshop 移动 UI 界面设计实用教程 ；2. 移动应用 UI 设计 ；3. APP UI 设计从入门到精通（一）子任务 1：快速制作清新手机导航菜单，通过这个案例的学习，能对手机UI 中相似元素的制作有一定的认识。1）打开下图所示的背景素材，选择菜单：滤镜 模糊 高斯模糊，数值稍微大一点，在背景图的选择上注意尽量找一些色彩统一的，否则在模糊后，会导致色系太多，没有层次感。手机 UI 中的导航按钮在日常生活中是扮演着很重要的额角色，很多手机 UI 设计师都在导航的设计上花费了不少心思，有些设计在色彩上都有很多构造，小小的按钮也是创意的凝结。漳州职业技术学院 信息工程学院272）把前景色设置为绿色，用圆角矩形工具拉一个合适的圆角矩形，然后选择钢笔工具，在属性栏选择“合并形状” ，勾出底部三角形形状，如下图。3）把当前图层填充改为：0%，此时形状的颜色就消失了，但是你会发现形状路径还在。4）给当前形状添加图层样式，设置：内发光、内阴影，投影，参数及效果如下图。漳州职业技术学院 信息工程学院285）输入想要的文字，文字用白色，再添加投影样式，如下图。6）按照下面的过程给顶部边框，边角位置增加高光效果。漳州职业技术学院 信息工程学院297）这样一个透明的质感就完成了，导航的技法是一样的。8）最终效果如下：漳州职业技术学院 信息工程学院30（二）子任务 2：快速制作 wifi 无线图标，通过这个案例的学习，能对手机 UI 中相似元素的制作有一定的认识。1）新建一个 500*500 的画布，填充背景颜色#2b2b2b，然后选择形状工具快捷键中的椭圆工具制作 300*300 的圆形，圆形填充色为白色。2）选中图层 1，按住 Alt（Alt 是减去操作，Shift 是合并形状操作） ，在操作区域单击一次。出现菜单，使用路径选择工具，将移动生成的圆形对齐，就变成了一个圆环。3）继续按照步骤 3 的方法，不过现在是按 Shift+鼠标左键。大小 220*220。移动圆形对齐，结果变成下面左图样式。手机 UI 中的一些小图标在用户的使用过程中同样也扮演着不可或缺的角色，在不同系统的手机 UI 中，他们的样式很接近，但是在结构和位置上又有各自一些细小的个性变化。漳州职业技术学院 信息工程学院314）重复步骤 3 和步骤 4，圆的大小为 180*180；140*140 最后得到上面右图, 然后在上方的工具栏中找到路径操作的按钮，点击合并形状组件。5) 然后选中椭圆 1，选中矩形工具，按住 Shift（像步骤 3 和步骤 4），单击鼠标左键，创建一个 150*150 矩形，用路径选择工具选中矩形，Ctrl+T，在工具栏中把白色的点移动到左下位置，角度输入-45。变成这样：6）选中矩形，在工具栏中选择“与形状区域相交” ，最后变成下图左。漳州职业技术学院 信息工程学院327）最后一步新建一个 50*50 的椭圆，放在正确的位置，最终完成图如上右图。（三）子任务 3：在实训任务 2 中的子任务 4 和子任务 5 完成的 APP 功能结构和 UI设计方案的基础上，请同学们为自己的 APP 设计和制作页面中的图标元素。以装修网为范例，设计出的页面图标元素如下，供同学们参考。漳州职业技术学院 信息工程学院33任务五 设计并制作手机 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 设计。漳州职业技术学院 信息工程学院34（四）子任务 4：完成 APP 高保真图设计。设计并制作 APP 首页界面。 手机 UI 中的首页是一个 APP 中最重要的一个页面，在 APP 中扮演着很重要的额角色，很多手机 UI 设计师都在首页的设计上花费了不少心思，不单单是布局，还包括色彩搭配，文字颜色，大小，图片风格，整体的风格设计都必须非常的用心，是创意的凝结。