第五章 移动端图标与组件设计（课件）-高二《移动端UI设计》同步精品课件（电工版2022）

移动端UI设计 1 初识移动端界面设计 2 色彩在移动的界面中的应用 3 移动端界面设计要素 7 综合案例 6 界面的设计与制作 5 移动端界面图标与组件设计 目 录 4 移动端界面版式设计 5 移动端图标与组件设计 5 图标是具有指代意义的图形符号，具有高度的浓缩性并快捷地传达信息、便于记忆的特性。一个终端应用的功能、目标群体、个性风格等可以从图标上看端倪。由此，图标语义设计如果达不到清晰、准确、易懂，那么就会需要用户去思考及判断，无形中增加了用户的认知负荷和错误操作的概率，容易引起不愉快反应。下面我们就从移动端程序中的图标类型、设计形式、设计规范、设计应注意的问题等四个方面进行学习。 移动端图标与组件设计 5.1认识图标 5.1.1.图标类型 图标是界面传递信息、引导操作的主要内容之一。随着智能产品的大力发展，触屏界面操作方式在现代人生活中地位越来越重要，加之各种各样应用程序的层出不穷，导致图标的数量也在迅猛增长，形状风格也千差万别。根据不同的分类方法有不同的划分标准。通常情况下，我们会根据图表的用途将其分为两大类型：启动图标和功能图标。 启动图标是应用软件的主要入口，具有唯一性，能直接引导用户下载并使用应用程序，如图5-1所示。 5 功能图标没有一个官方的定义，通常我们认为，在移动端程序界面中，传达并具有使用功能含义的图标就是功能图标。不同于启动图标，在一个程序中包含的功能图标数量相对较多，同时不同软件程序的功能图标可以相似甚至相同。功能图标具有传达信息的高度浓缩性、形态抽象简洁、易于理解的特点（图5-2）。 移动端图标与组件设计 5 在具体的设计中，由于图标作用的不同，启动图标与功能图标的设计形式也不尽相同。 通常启动图标，要求设计的唯一性，其形式多样，常见的表现形式有：文字类，如图5-3所示，豆瓣、知乎、头条等程序的启动图标就采用名称缩写文字；图形类，如图5-4所示，贝壳找房、懂车帝、西瓜视频等程序的启动图标就采用的图形化设计；插画类，如图5-5所示，飞猪旅行、百度地图、微信等程序的启动图标就采用插画或者场景的设计方式；拟物类，如图5-6所示，美颜相机、游戏中心、通话等程序的启动图标就是借鉴自然中的实物产品而设计；主题类，如图5-7所示，这类图标通常是设定某一主题，围绕主题而展开的系统启动图标的统一设计。 移动端图标与组件设计 5.1.2 图标设计形式 5 不同于启动图标的个性化与区别性特点，功能图标要求语义表达的直接性、形态的简洁与抽象性。常见的表现形式主要包括线性和填充性两种类型。 线性功能图标，采用线作为造型手法，以轮廓设计为主，造型简约、概括。在具体的设计中，可以对线性进行相应的变化，例如，粗细不一、线性不闭合、双色线性等，如图5-8所示。填充性功能图标，采用点、面作为造型手法，具有体积感。在具体的设计中，可以对填充颜色的数量、填色类型、绘制风格进行变化，例如，采用单色、渐变色、双色、拟物风格等，如图5-9所示。 移动端图标与组件设计 5 图标设计规范通常是指移动端程序设计需要遵循的尺寸规范，不同类型的图标由于所处位置、作用的不同，其尺寸要求也不一样。同时，由于移动产品的品牌、系统、屏幕尺寸、技术的不同，其规范也大不相同。图5-10是现行的iOS系统和Android系统的启动图标设计规范和功能图标设计规范。 移动端图标与组件设计 5.1.3 图标设计规范 5 1．隐喻设计 使用隐喻形象，在图标设计中隐喻是必要的思维方法，特别是在对抽象事物进行理解和表述的过程中起到了重要作用，在具体设计中，设计师要对抽象概念先进行描述，然后提取出关键词，再根据关键词找出物与所指之间的内在含义。例如，从音乐这个概念，可以联想到乐器，由乐器可以联想到乐谱，由乐谱可以联想到乐符。 移动端图标与组件设计 5.1.4 图标设计应注意的问题 5 2．慎用颜色 不要过多使用颜色，过多的颜色数量和细节会