《UI元素图形创意设计》课件-第2章 功能图标

2020年立项金课-UI元素图形创意设计第2章功能图标分为6个部分010203040506功能图标的概念功能图标范例-已上线功能图标的设计原则功能图标的风格类型功能图标的设计步骤功能图标项目实战图标广义是具有明确指代意义的计算机图形符号，应用于计算机软件方面，具有高度浓缩并快捷传达信息、便于记忆的特性。包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。一个图标是一个小的图片或对象，代表一个文件，程序，网页，或命令。图标有助于用户快速执行命令和打开程序文件，用户点击图标以执行一个命令，移动端APP的UI中功能图标的视觉感是实现良好人机交互的重点。图标有一套标准的大小和属性格式，且通常是小尺寸的。功能图标的概念2.1图标无处不在，在电子设备，包含手机和平板电脑的软件，用户点击进入后，就会出现代表不同功能的，可点击操作的小图标。移动端APP界面图标并不是散落在各处，而是有规律地分布于各个区域，右图为移动端APP界面分区图，除顶部状态栏的图标外，APP界面其余区域的图标都需要根据APP界面的整体风格进行设计。功能图标范例-已上线2.2左图为导航栏图标“疑问和帮助”，图标采用了通用符号问号“？”和一个圆圈的组合让表义清晰明了，用户在使用该软件产生疑问的时候一看这个图标便知道它所代表的功能，用户点击后，界面弹出每个区域释义的浮层页文字，让用户根据文字提示进行操作。功能图标范例-已上线2.2下图为标签栏的一组功能图标。左一“联系人”使用了“人形”的剪影，两人并排使画面具有“人气”，表明联系人不止一个，含义准确。左二“设备”用了两个圆角矩形的组合，比例类似“手机”和“平板电脑”，表达“设备”这个意思。左三的图标用了抽象的四个圆点来表现“物品”的含义。左四“我”采用了抽象的图形“人形胸像”，刻画了“我”的形象，这样的图形在用户的心中具有普遍的共识。注意“联系人”和“我”都采用了“人形图案”却有所不同，设计时不同的图标要使用不用的图形体现差异性。图标在界面上的显示并非一直不变的，用户通过“点击”等手势操作，选中了某个图标，对应的图标的图形或色彩会有变化，往往是选中后由线框图标变为线面结合图标，使用了色彩填充。如下图用户点击不同图标之后的显示，用户选中了某个图标，某个图标就由线框图标变为蓝色的线面结合图标，以此提示“已选中”。功能图标范例-已上线2.2UI设计师要有敏锐的洞察力和造型力，把用户对图标的尺寸、色彩、造型等感觉或意象要素转化为设计要素，增强图标的传达性，表义明确，外形美观且规范统一，达到用户与产品的和谐交互。功能图标范例-已上线2.2请同学们拿出手机或平板电脑，打开最常使用的5个APP，使用手机“屏幕截图”功能将自己喜欢的界面截图下来，分析界面截图好在哪里？可以从“色彩、版面布局、图标、动态交互、卡通、短视频”等方面分析。分析的过程中锻炼观察力、审美能力和口头表达能力。2.2.1课堂练习1功能图标范例-已上线2.21传达性强

3具有规范统一性

满足审美需求

2课堂练习2

4功能图标的设计原则2.3图标需要明确地提示功能，每个图标都有它的含义，需要用户正确操作，为了能让用户更加明确图标的含义，图标除了图形元素外，一般会在图形下方添加文字以提示，即“文本标签”，使图标的含义对用户来说更清晰，更便于用户准确操作。由于图标的尺寸限制（44×44像素或48×48像素），图标图形的设计需要尽量简洁，图形具有明确的指代性，简化的图标在小尺寸时更具有可读性和清晰度。图标的识别性和可用性很重要。2.3.1传达性强功能图标的设计原则2.3俄国学者普列汉诺夫指出：“审美享受的主要特点是它的直接性”。好的图标简洁有力，图形看起来很舒服，具有艺术感染力。图标设计有以小见大、以少胜多、以一当十的特点，属于设计“小品”。通过文字、图形的巧妙组合，要求比其他的设计元素更集中、更强烈、更具有代表性。图标设计单纯、简洁、鲜明而又生动有趣，其审美性体现在和谐悦目的形象。图标设计讲究图形美，包含意象美和形式美，给用户视觉上留下良好印象。2.3.2满足审美需求功能图标的设计原则2.32.3.3

具有规范统一性功能图标的设计原则2.3一个区域内的图标，尺寸应是统一的，避免造成视觉上的混乱感，如右图由于同一区域图标的统一，界面给用户呈现的是整洁有序之感风格是艺术概念，艺术作品在整体上呈现的有代表性的面貌。[百度百科：风格]尺寸统一1风格统一2视觉规范统一3APP里的同一组图标给用户的视觉感应该是统一规范的，即同一组图标如果都是圆角，圆角大小也应保持一致；如果有描边，则描边粗细应该相同；如果都是MBE图标，也应有同样的“描边缺口”这里提供iPhone各机型分辨率及各区域高度

各个区域内的图标需控制在高度范围内设备分辨率状态栏高度导航栏工具栏标签栏高度iPhone6s/7/8750×1334px40px88px98pxiPhone6s/7/8Plus1242×2208px60px132px147pxiPhoneX(@3x)1125×2436px132px132px147pxiPhoneX(@2x)750×1624px88px88px98px2.3.3

具有规范统一性功能图标的设计原则2.3风格统一：如果一个APP是一个完整的艺术作品，那界面上所有的图标所带给用户的视觉感受应该是前后一致的，起码一个APP里同一组的图标风格应是一致的。假设把两个APP的图标混在一起，用户通过观察每个图标的外形特征，也能清晰分辨是两个APP的图标并划分成两份。如下图为某电商的图标和某天气的图标呈现出两种完全不同的风格。2.3.3

具有规范统一性功能图标的设计原则2.3视觉规范统一：如图的MBE图标，每个图标下方都有一条中间断开的短横线，且都用了同样的或者同色系的色彩，描边和填色都有一点错位，图形四周都添加了小圆圈和小圆点之类的图形元素。2.3.3

具有规范统一性功能图标的设计原则2.3请同学们认真观察刚才手机“屏幕截图界面”的图标，将图标按照自己的视觉感受进行风格分类。练习过程中锻炼观察力、审美能力和归纳整理分析的能力。2.3.4课堂练习2功能图标的设计原则2.301线框图标02线面组合图标03拟物图标功能图标的风格类型2.42.4.1线框图标功能图标的风格类型2.4线框图标顾名思义就是由“线”这种基本元素组合而成的图标，线框图标具有简洁、干净、大气等特点，线框图标可以由直角构成，也可以由圆角构成，圆角图标也分为小圆角和大圆角，小圆角正式，大圆角有趣。如图两组不同的线框图标。这两组图标色彩不同，线框的粗细不同，第一组的线条半透明，线条连接处能看到连接痕迹，形成统一的视觉风格。2.4.2线面组合图标功能图标的风格类型2.4线面组合图标是指由“线”和“面”这两种基本元素组合而成的图标，线面组合图标相较于线框图标视觉感更丰富，因为有“面”的加入，必将加入色彩元素，图标的视觉感应是层次感丰富或者五彩多姿的。如图四组不同的线面组合图标。同学们可以观察这四组图标的视觉风格、图形和色彩的特点、视觉元素（如渐变、投影、透明度等）的应用，比较它们风格的差异。拟物图标也叫写实图标，就是设计师依据现实世界里的实物模样进行刻画，刻画追求逼真的效果，模拟色彩、质感、光影、立体感等。让用户在观察使用图标时感叹设计师的细致用心。拟物图标往往追求精致的细节，图标精美。2.4.3拟物图标功能图标的风格类型2.4如图是两组不同的拟物图标。两组都是用图形元素表现“食物”。形状和色彩模拟食物本身的形状，制作时使用渐变、投影、色彩的变化等方法表现食物的立体感和表面质感，注意使用点、线、面等元素表现纹理、表面颗粒等细节。0102根据设计元素画出设计草图03根据命题，寻找合适的元素进行设计构思04根据草图绘制电脑稿，修改定稿查阅资料功能图标的设计步骤2.5设计前先多学习设计网站上的图标优秀范例，下方列举3个设计网站：（1）阿里巴巴矢量图标库/（2）IosIconGallery/（3）ICONFINDER/custom-icon-design2.5.1查阅资料功能图标的设计步骤2.5根据设计命题，寻找合适的元素进行设计构思，可以用文字，也可以用图形，最好是具象的便于绘制的图形元素，这一过程是设计构思也是“图形创意”的过程。教师在进行课堂教学时，可采用分组教学法，将同学们进行分组，每个小组根据设计命题展开讨论，每位同学参与其中，积极思考并和同学沟通，集思广益，探索合适的“设计元素”。2.5.2根据命题，寻找合适的元素进行设计构思功能图标的设计步骤2.5同学们通过分组讨论或独立思考寻找合适的设计元素去表现：“创建群聊”图标或“评论和@”图标。提示或解答“创建群聊”图标可以采用人头，人胸像等元素；“评论和@”图标可以采用会话气泡，对话框等元素。2.5.3课堂练习3功能图标的设计步骤2.5在找到合适元素的基础上，选取一些自己容易绘制的元素，绘制设计草图，在绘制的过程中确定图标风格，草图可以多画一些，再进行筛选。遵循功能图标的设计原则，具体请参看2.3功能图标的设计原则。并使同一个区域内的图标风格保持一致，具体请参看2.4功能图标的风格类型。风格没有好坏之分，关键要符合产品的特点。本小节因为是一个图标创意的小练习，就不规定风格了，同学们可以展开想象，不被局限，将所能想到的创意都使用图形元素表现出来。如果在画草图的过程中遇到困难，可以上网查找相关的图片做参考。2.5.4根据设计元素画出设计草图功能图标的设计步骤2.5草图可以使用纸笔完成，推荐使用“方格本”，A4以内的尺寸便于随身携带，以随时记录灵感，内页的小格子便于在绘制时规范图形，如图方格线圈本大小为142×210mm；同学们也可以根据个人习惯选择数位板和Photoshop绘图软件完成。尽量使用自己用得顺手的工具。2.5.4根据设计元素画出设计草图功能图标的设计步骤2.5同学们根据课堂练习3的元素，使用纸笔或数位板绘制“创建群聊”图标或“评论和@”图标的草图。提示或解答根据课堂练习3想到的图形元素，老师使用方格本画出了草图，如图。注意草图并非一蹴而就的，都有一个构思-绘制-修改的过程，不要怕修改草图的过程繁琐，要耐心细致。多画一些草图，在其中选取一些单纯、简洁、鲜明、生动有趣的形象方便绘制电脑稿。2.5.5课堂练习4功能图标的设计步骤2.52.5.5课堂练习4功能图标的设计步骤2.5同学们根据课堂练习4的草图，使用绘图软件Illustrator或Photoshop画出图标的电脑稿，并修改，注意电脑稿要体现“创建群聊”或“评论和@”的含义，电脑稿应注重图形的视觉美感，每个图标可以使用不超过3种色彩（色彩过多会难以把控）。2.5.6根据草图在电脑上绘制电脑稿，修改定稿

2.5.7课堂练习5功能图标的设计步骤2.5提示或解答功能图标的设计步骤2.5草图导入电脑的绘图软件，这里讲解如何使用AdobeIllustrator（下方简称AI）画图标正稿，以草图为例画正稿，列出使用AI工具绘制的步骤。步骤请查word“样章823魏云柯”功能图标项目实战2.6项目实战项目要求：参考学习类或办公类APP标签栏图标，设计小学霸英语APP底部标签栏的四个图标“查词”、“课程”、“考试”、“生词本”，注意四个图标因为都位于标签栏区域，应该具有尺寸、风格和视觉规范的统一性，四个图标的表义应较为明确。2.6.1项目相关知识根据小学霸英语APP底部标签栏图标设计制作这个项目，学生需要在学习的过程中掌握下列几项知识点：功能图标的设计原则，具体请参看2.3功能图标的风格类型，具体请参看2.4功能图标的设计步骤，具体请参看2.5设计构思，并用纸笔或数位板画草图，造型（素描）技能，具体请参看2.6.2根据草图，用AdobeIllustrator软件画电脑稿，软件操作技能，具体请参看2.6.3

这个阶段，先要读懂题目要求，根据题目查找相关界面的范例作为参考，再运用造型（素描）技能，画出设计草图。2.6.2项目准备与设计功能图标项目实战2.6根据项目要求，老师参考某学英语的APP界面如左图，标签栏的四个图标如下图。仔细观察发现标签栏图标为简洁利落的线框图标，每个图标的图形表义准确。查词用了“放大镜”的图形表达查找的含义。课程是英语音频，因此用了通用的“播放”符号。考试用了一面“小锦旗”传达表扬的意思。生词本用了叠加的矩形体现“本子”。功能图标项目实战2.6根据题目，寻找范例，观察范例功能图标项目实战2.62.6.2.2找出合适的图形元素，画出草图将适合于“查词”、“课程”、“考试”、“生词本”这几个词的元素列举出来，寻找具象好画的图形画出草图。这一思考和图形创意的过程可以通过分组讨论完成。画草图时需要确定设计风格，这个项目“小学霸”APP是学英语的软件，属于办公类的软件，注重实用性和功能性。界面的整体风格理性淡雅，使用冷静并带有“学术气息”的蓝色去表现，不使用带有“娱乐气息”的花哨颜色和华丽图形。标签栏图标就采用现在很多A