高二机工社UI设计项目教程课件学习单元2 UI图标设计

学习单元2——UI图标设计. UI设计项目教程 单元概述 用户界面中，图标绝对是不可或缺的元素。图标是用来解释和阐明特定功能或者内容类别的视觉标记。在进行UI图标设计前必须先弄清楚三个问题：需要设计的图标主要适用于什么设备？客户需要什么风格的图标？有没有其他设计要求？本单元通过扁平化图标和拟物化图标的设计和制作流程的介绍，使读者能够熟悉图标设计的流程及设计规范，并对图标设计形成整体的概念。 学习目标 1．能够说出图标设计制作的流程 2．通过项目制作，学习图标设计制作的规范 3．灵活使用Photoshop软件表现实物的质感、纹理及细节 扁平化图标设计 项目1. ONE 项目描述 E-Design设计公司近期承接“酷我回声—— 潮流生活音乐”的音乐类APP的设计项目。“酷我回声—— 潮流生活音乐”是一款专注于音乐娱乐新体验的的音乐类APP，此款APP最大的特点是“可以任意发弹幕、爆美图的音乐娱乐平台，在这里可以发现潮流音乐，记录听歌轨迹，结识音乐好友”。本项目中，音乐类APP的设计风格要求扁平化，内容大体分为音乐体验、听觉与弹幕、收藏专辑、社区与粉丝、音乐新姿势几个模块。经过公司讨论，项目总监将此APP的图标设计任务分配给β小组，由Amy负责，助理设计师Sunny辅助Amy完成该项目。 UI设计项目教程 任务1：　实体图标设计 图标制作过程 UI设计项目教程 任务1：　实体图标设计 最终效果 UI设计项目教程 必备知识 图标设计常识 1.图标绘制格式　在使用Photoshop软件绘制图标时，要使用“形状工具”绘制矢量格式，不要将格式转换成位图格式或智能对象格式，这样能有效避免拉伸或切图过程中所导致的边缘模糊情况。 2.图标尺寸使用偶数，要避免奇数的使用 图标尺寸大多数采用偶数，主要是为了适配不同的分辨率。如果图标尺寸为奇数，缩小一半之后会出现小数点，图标也就模糊了。 3.图标状可单击的部件与屏幕的四周要保持一定的距离，通常会控制为20～30px。 4.态要有所区分　每个按钮都有四种状态：默认、按下、选中、不可选，至少考虑“默认”和“选中”两种状态。 UI设计项目教程 必备知识 设计尺寸 1. iOS　苹果公司开发的移动操作系统，iOS设计尺寸。 2. Android　基于Linux的开源操作系统，主要用于移动设备，如智能手机和平板计算机，Android设计尺寸。 UI设计项目教程 必备知识 界面元素 1.Android和iOS的APP界面元素基本是相同的，包括状态栏、导航栏、标签栏、内容区四个部分。 UI设计项目教程 任务拓展 公司近期承接“铃声滴滴答”APP图标的设计项目。“铃声滴滴答”是一款手机铃声应用类APP，此APP的特点是“官方推荐、百万铃声；曲库超全、分类清晰；自己剪辑、狂拽炫酷”。设计风格要求扁平化，内容大体分为首页面、我的铃音、铃音设置向导、社区与粉丝四个模块。 1．请根据项目需求，收集同类型APP的图标并进行分析 2．设计“铃声滴滴答”APP的扁平化图标 3．设计“铃声滴滴答”APP页面内的功能实体化图标 UI设计项目教程 任务2：　实体图标设计 图标制作过程 UI设计项目教程 任务2：　实体图标设计 图标制作过程 UI设计项目教程 任务2：　实体图标设计 最终效果 UI设计项目教程 必备知识 dpi、分辨率、屏幕尺寸、ppi、px、pt、dp、sp dpi：dot per inch，每英寸可分辨的点数，也叫屏幕密度。这个值越大，屏幕越清晰。 分辨率：横纵两个方向的像素点的数量。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细。 屏幕尺寸：屏幕对角线的长度。 ppi：pixel per inch，像素密度，即每英寸所拥有的像素数目。 px：pixel，像素，电子屏幕上组成一幅图画或照片的最基本单元。 pt：point，点，印刷行业常用单位，等于1/72英寸。 dp：dip，density-independent pixel，是安卓开发用的长度单位，1dp表示在屏幕像素点密度为160ppi时的1px的长度。 sp：scale-independent pixel，安卓开发用的字体大小单位。 UI设计项目教程 必备知识 配置AI首选项 AI是基于矢量的绘图软件。图标的绘制是基于像素点进行绘制的，需要精准把握像素点，以防在界面中出现虚边。 1.键盘增量设置　执行菜单→编辑→首选项，在常规中设置键盘增量为1pt，去掉勾选缩放描边和效果。 2.单位设置。常规和描边设置为pt，文字和亚洲文字设置为像素。 3.新建文档设置。画布尺寸单位选择像素，“高级”选项组中的预览模式为“默认值”，让画面的渲染基于像素而不是矢量。 UI设计项目教程 任务拓展 1．收集各