AIGC创意：移动UI设计（微课版）-课件 第4-7章 图标与控件设计-移动UI综合设计实践

图标与控件设计第4章在移动UI设计体系中，图标与控件是App界面最重要的组成部分之一，是任何UI中不可或缺的视觉元素。了解和学习图标与控件相关的概念、设计形式和设计尺寸及设计制作方法，是读者进入UI设计行业的必备条件。在界面设计中，图标设计是其中的一个重要模块，容易识别、清晰且美观的图标更是有助于用户操作，也有助于产品向用户传递信息，提升用户的使用体验。不同位置的图标在界面中所起到的作用不同、风格也不同。其设计思路更是有所区别，例如核心功能区(金刚区)、分类、标签栏、服务工具等，如图4-1所示。用图标准确地表达出实际含义，仅仅学其“形”是不够的，需要对图标有较为全面、系统的认识，了解图标的相关概念、正确的绘制方法及处理好一系列的细节，本节将介绍图标设计的具体方法及要点，帮你规避掉一些常见的问题，让图标设计有理有据。4.1界面图标设计概述界面中应用图标基于其功能性划分，可以分为互动图标、装饰图标和描述性图标。互动图标：具有双向信息传递能力。它不仅可以将某些信息传递给用户，引导用户执行特定的操作，还可以将控制信息传递给程序。从功能的重要性来看，它的重要性是最高的。比如登录注册按钮、开关按钮、数量按钮、点赞、转发分享等。都是互动图标。装饰图标：主要是提高页面设计，加深个性化设计风格。同时，提高用户在线体验，迎合受众偏好，提高设计亲和力。比如页面升级、空页面、奖励、用户等级都是装饰图标。描述性图标：澄清信息图标类型，区分不同功能或内容的视觉标记。简单来说，就是对功能的解释。例如，金刚区或个别功能区的icon设计在展示行业特征时。面对不同的用户群体，选择风格设计:早期教育应用与健康应用相比明显。目的是增强页面的层次感和认可度。4.1.1界面图标的分类

图标是任何设计系统中都不可或缺的一部分。使用图标的主要原因就在于它可以帮助用户快速解释想法、快速导肮、解决语言障碍等问题，以此让用户使用便捷且愉快。对于界面图标设计主要原则有：准确的表意、清晰的轮廓、一致性等。准确的表达：就像字面意义一样，要清楚地表达核心思想。如果用户看到你的图标时感到困惑，那么这个设计无疑是失败的。轮廓清晰：在设计图标时，最避免角落不清晰，有虚拟像素。用户认为他们的眼睛花了，或者他们的手机有问题。一致性：当您需要在设计中设计多个图标时，这些图标必须保持一致。如果每个图标的风格和颜色不同，用户不仅会眼花缭乱，而且容易头脑负荷。4.1.2图标设计的原则

在界面设计中，图标设计是其中的一个重要模块，容易识别、清晰且美观的图标更是有助于用户操作，也有助于产品向用户传递信息，提升用户的使用体验。图标设计是一门学问，在我们的认知中，通常是将图标理解为某个概念的抽象图形，通过设计清晰易懂的图形传达出比文字更高效率的信息，同时提升界面的美观程度。想要将图标设计的更加出色，则需要频繁练习、不断试错、持续探究并尝试新的风格，所以很值得我们花费大量的时间去钻研练习。设计的过程是思维发散的过程，一般遵循固定的设计流程。在实际工作中，设计流程并不是绝对的。有的流程可能会被跳过或忽略，如调研与讨论；有的流程会反复停留，如修改与扩展。本节通过讲解图标设计的流程为读者提供一个关于设计流程的思路，为日后的设计工作奠定基础。4.2图标设计流程不同风格、样式的图标能让界面看起来更美观，提高用户的视觉舒适度。根据产品属性及目标用户并结合应用场景，找到最符合自身产品性格、气质的图标设计风格，例如粗线条、直角拐点，给人一种力量、狂野的感觉，常适用于体育、健身、机械类型的产品；细线条、曲线、圆润的拐角，柔和、干净、纤细且精致的感觉，适用于女性产品等。定义主题寻找隐喻抽象图形4.2.1确定风格

经过对实物的抽象化汲取后，便可以进行草图的绘制。在这个过程中，主设计师需要将实物转化成视觉形象，即最初的草图。当然草稿可能有很多方案，这时需要筛选出若于种满意的方案继续下面的流程。4.2.2绘制草图

图标的绘制方式主要有两种：布尔运算和贝塞尔曲线。4.2.3电脑制作

遵循图标设计规范有利于设计师之间的合作及接下来的设计，以及产品整体图标风格的统一性，起到约束的作用，即便在更换设计师的情况下，也不至于出现较大的问题。在制定合理的设计规范前需要先了解图标到底有哪些规范，应从哪些方面入手，以便接下来的图标设计顺利进行。4.3图标设计规范控件（Controls）控件，是用于触发操作并传达信息的。例如：按钮、开关、文本框和进度条，都属于典型的控件。界面控件是界面重要的构建模块。即使用户从来没有接触过一款新产品，通过巧妙地使用控件可以引导用户按照设计意图来进行操作。作为设计师，熟悉这些界面控件对于良好的用户体验是至关重要的。4.4界面控件分类输入控件允许用户通过键盘或触摸来输入信息。按钮是用户最熟悉的控件之一，通过按钮可以直接下达操作命令，如登录界面中的“登录”按钮。输入框是用户在界面中输入文字的地方，例如输入搜索内容、账号、密码等的文本框，如图4-65所示。下拉菜单，又称为组合框、选取器，目的是给用户一个可供选择的项目列表。下拉菜单是表单、设置页面和测验中的常见用户界面UI控件。开关：开关通常出现在功能设置页面中，用于操控某个功能的开启或关闭。选框：选框分为单选框和复选框。单选框是指只允许用户从一组选项中选择一个，复选框是指允许用户从一组选项中选择多个。4.4.1输入控件

导航控件允许用户在网站或应用程序中跳转移动。链接是一个非常通用的用户界面UI控件，可以用于主要导航。链接可以表现为文字按钮的形式，把用户带到更详细的页面。面包屑是在有分层导航的网站上使用的一连串链接。面包屑能够使用户在整个平台上移动时确定自己的方向。如面包屑导航为“首页/列表页/搜索列表/搜索列表（应用）”，用户可以随意点击其中的任意一个层级到达相应页面。标签是一种导航形式，允许用户在一个页面的不同子部分之间移动，可以用来对信息进行分组和作为分类过滤器。当有多层次的导航或导航类别很多的时候，树形面板用户界面UI控件是一个很好的选择。树形面板应该位于屏幕的左边并显示嵌套。如“个人设置”的一级菜单下又划分了不同的导航类别，以树形面板的形式展示。菜单允许用户使用类别和子类别进行导航。导航菜单是内容类别或功能的列表，通常显示为一组链接或图标，这些链接或图标与设计的其余视觉样式组合在一起。手风琴控件有两个主要用途：显示、隐藏信息和导航。4.4.2导航控件

显示用户界面UI控件在屏幕上向用户展示信息。文本不仅指页面上的书面内容，而且指标题、信息和标签。列表用户界面UI控件是一种很好的展示方式，以用户熟悉和容易阅读的方式来展示有序的信息。数据网格用户界面UI控件，也叫表视图或表，使用列和行来显示网格中的相关信息。如数据网格包含表头、单元格、行列分割线三要素。工具提示是一种常见的上下文帮助形式用户界面UI控件，它利用了"按需提供细节"的用户体验模式。任何能够吸引用户注意力的用户界面UI控件都可以被认为是一个警报。警报提示通常出现在页面的右上角。图标无处不在，无论是在软件中还是在软件之外。图标可以帮助用户快速而准确地识别事物。4.4.3显示控件

作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。4.5常见控件设计规范在移动设备中，有3种按钮状态，分别是Normal(常态)、Pressed(点击)和Disable(不可用)。通常点击状态的按钮颜色为常态状态按钮颜色的50%，不可用状态时，按钮呈现灰色。在一款产品中，按钮的大小不尽相同，需要将所有的按钮都罗列出来制定统一规范。按钮的尺寸、字号、描边(一般为1px)、圆角(一般为8px)等都要统一。4.5.1按钮控件规范

分割线的颜色需要根据背景颜色确定。一般情况下，在白色背景下，分割线颜色为浅灰色(R:225G:225B:225)，线粗为1px；在灰色背景下，分割线颜色为深灰色(R:204G:204B:204)。4.5.2分割线规范

常见的用户头像边框有带圆角的方形或圆形两种。为了保持产品的统一性，在不同场景页面中对的头像设计也应该统一，如图所示社交类产品运用头像的时候比较多，在个人中心页中，头像大小为120px×120px；个人资料页中，头像大小为96px×96px；在消息列表中，头像大小为72px×72px；在详情页、导航页中，头像大小为60px×60px；在帖子列表页中，头像大小为40px×40px。方形的头像边框边缘看起来会比较明显，容易造成视觉干扰，而圆形的头像边框则会将实现引导到画面中心位置，减少用户的阅读时间。4.5.3头像规范

提示框的类型可分为带按钮、不带按钮、进度提示和加载提示4种。带按钮的提示框可呈现单独按钮或多个按钮，若是出现两个按钮，要区分主次，引导用户完成操作。提示框的主标题字号为34px，副标题字号为26px。4.5.4提示框规范

输入框是比较常用的元素之一，它和按钮有接近的外形。最常见的就是登录账号、密码输入框，以及搜索栏等。输入栏的使用高度尺寸通常在36~56pt之间。搜索框中的文字字号、颜色和输入完成后的文字字号、颜色也要进行规范。将这些元素都进行标注，以便统一设计。当需要输入文字时，就必须使用输入框。输入框可以出现在导航区域或是页面底部的评论区域。当输入的文字过多时，还需要规范文字输入框的文字显示个数、文字与边框的间距等信息。在一些聊天界面中会出现消息对话框，可以发送文字或图片。文字发送会以气泡效果呈现，自己说的话和对方说的话的气泡方向相反。发送中和发送失败时，会在气泡的前方出现相应的图标样式。4.5.5输入框规范

在同一款应用程序中，经常会用到许多图标，而这些图标在不同的页面中，有不同的设计要求。图标按功能可以分为两类，分别是可点击图标和描述性图标。可点击图标的最小范围为40px×40px，其中最常见的是48px×48px的图标，点击之后可以跳转到相应的页面或产生反馈，此外还有32px×32px的图标；描述性图标的大小一般为24px×24px，其目的是用来增强易读性，并不具备独立操作。48px×48px的图标通常用在顶部导航栏和底部的菜单栏中。在一些分享页面中也会将图标设定为48px×48px，这样会显得整个页面很整齐。4.5.6图标规范

界面设计第5章界面是我们认识一个移动端App的第一印象，是APP的“面子”，设计师需要根据移动APP的特点和时下趋势，做出独特的设计，以建立有效的界面设计。由于设计潮流时时变化，没有统一的设计规范，紧跟时尚潮流才能吸引用户。本章主要介绍移动端界面所包含的几种常见页面设计。与传统PC桌面不同，移动端的屏幕尺寸更加小巧操作，方式也已触控为主。因此，App界面设计不但要保证App功能的完整性和合理性，又要保证App的功能性和实用性，在保证其拥有流畅的操作感受的同时，也要满足人们的审美需求。5.1界面设计概述本节主要介绍手机端App界面设计，主要包括启动图标、启动页设计、框架设计和控件设计。启动图标和启动页设计框架设计控件设计5.1.1界面设计的内容

用户在操作手机时，主要以用户的意识为主体，手机起到辅助作用。在进行界面设计时，设计师应考虑到用户与手机的各自特点，使得两者之间相互协调，从而使工作条件达到最优。在使用手机的过程中应尽量减少用户的操作和记忆负担，从而有效地提高对手机的使用效率。保证功能性和实用性内涵丰富，寓意明确图形简洁，易识别5.1.2界面设计的要点

通常来说，界面作为人机交互的重要工具台，能够起到基本的信息传递功能。因此，界面设计要兼顾逻辑和界面美观度等不同要求。在界面设计中，没有哪种风格是固定的，也没有哪种表现手法是万能的，但是一些常用的表现手法值得我们借鉴，这些表现手法可以帮助我们设计出美观的界面。单一主色调多色彩数据可视化内容至上视野背景5.1.3界面设计的表现手法

启动页是指用户进入应用程序时立刻出现的页面，是应用程序打开前的有效过渡页面。该页面承载了用户对App的第一印象，因此对设计的要求十分讲究。启动页给用户观看的时间很短，通常只有1~3秒的时间，因此如何在这么短的时间内表达App的定位就是设计师需要重点考虑的问题。只有设计出定位明确且富有吸引力的启动页，才能加深用户对App的认知度。启动页分为品牌宣传型、节假关怀型和广告运营型3种类型，不同类型的启动页承载的内容信息和表达方式也不一样。5.2启动页App的启动页主要是为了传达品牌定位而设的，主要组成部分包括App名称、标语和主题宣传画，如图5-12所示。品牌宣传型的启动页设计力求精简，凸显品牌特点。5.2.1品牌宣传型

每逢节假日、节气，很多App会通过推出一些与节假日、节气相关的插图作为启动页，给用户营造节假日的气氛来体现人文关怀，如图5-13所示。这种设计不仅能够加强与用户的情感交流，提升品牌的亲和力，还能够加深用户对品牌的印象。这种类型的启动页在设计上更具自由度与创新性。5.2.2节假关怀型

广告运营型启动页主要是利用闪屏的形式进行活动或广告宣传，引流变现，如图5-14所示。由于用户对广告的接收程度不同，因此在视觉设计上尽量创新，吸引用户。同时，设计“跳过”或“倒计时”按钮，避免因广告影响用户体验感。5.2.3广告运营型

引导页是为引导新用户了解App界面的使用流程，帮助新用户快速了解App功能的介绍与初体验的交互设计。因此，引导页通常只会在用户第一次点击进入应用程序时出现，之后不再显示。优秀的引导页能与用户建立良好的情感联系，并提高App的使用率。因此，根据引导页所要表达的内容和方式，引导页大致可分为功能介绍型和情感代入型两大类。5.3引导页功能介绍型引导页是最基础的一种引导页。通常在新产品发布及新功能上线时使用，主要针对新功能进行演示介绍，让用户快速了解其具体使用方法，如图5-57所示。设计师需要把简洁明了、通俗易懂的文案和界面呈现给用户。采用的形式大多是在界面上插入说明文字、引导性的图形符号让用户更容易识别和理解。5.3.1功能介绍型

情感代入型引导页主要通过文案和配图，将用户的需求通过某种形式表现出来，以突出App的价值，如图5-58所示。这类型的引导页通过形象化、生动化、立体化的设计吸引用户，增强用户对产品的了解。5.3.2情感带入型

浮层引导页一般出现在App功能操作提示中，是为了能够让用户在使用过程中更好地解决问题，如图5-59所示。这种引导页的浮层通常会以蒙版的形式，并用高亮的颜色来突出功能信息。5.3.3浮层引导页

可输入页面需要使用键盘输入文字信息与页面产生交互，如登录页面、信息发布页面和聊天窗口等都是常见的可输入页面。这些页面中都会预留需要填写信息的输入框，并通过简单的文字提示用户在输入框中输入相应的信息。设计这类页面时，界面务必要做到简洁明了，操作简单易用。过于复杂的设计会大大降低用户的使用感受，影响应用程序的后续使用。5.4可输入页登录页面是App中常见的可输入页面，需要输入用户的账户、密码和一些其他相关信息。在登录页面的输入框中输入文字内容时需要拉起键盘，这时需要考虑键盘会不会遮挡文字信息，还要考虑输入框的宽度是否方便操作、输入框的文字提示是否精简准确等。5.4.1登录页面

信息发布页面会出现很多内容填写的输入框，设计此类页面时需要注意类别分组，如地址为一组、物品相关信息为一组及付款方式为一组等。在分类比较多的情况下，分割线和背景的颜色不宜过重，否则会影响整体的视觉性。5.4.2信息发布页面

聊天页面会在页面底部设计输入框和一些相关组件，输入框是可以拉起的。在设计这类页面时，需要将组件设计的更简洁易用，尽量少占用页面空间。5.4.3聊天页面

首页是App的第一交互界面，主要体现产品属性、展示主要功能、传达品牌形象，是App的门面，如图5-182所示。首页不仅能加深用户对品牌的认知，还能帮助用户快速了解App的主要内容。因此，选择合适的首页展示方式是非常重要的。首页的类型大致可分为列表型、图标型、卡片型和综合型4类。5.5首页列表型首页是在一个页面上展示同一个级别内容的分类模块。模块由文案和图像组成，如图5-183所示。列表型首页上下划动可以查看更多的内容，更方便点击操作。5.5.1列表型

当首页主要展示几个主要的功能时，可以采用图标的形式进行展示。图标型首页最好在第一屏完整展示，且尽量保证操作简单。5.5.2图标型

当遇到操作信息较为复杂时，可以选用卡片型首页。卡片型首页可以让分类中的按钮、信息、图像紧密联系在一起，让用户一目了然，还能有效地强调信息内容，方便操作。5.5.3卡片型

综合型首页大多用于电商类App，既有图标形式，又有卡片形式。综合型首页要让多块的内容在页面中显示的有条不紊、清晰易读，因此设计师要特别注意分割线和背景颜色的反差不宜过大，这样可以保证页面模块的整体性。5.5.4综合型

列表页通常是在应用程序中搜索或点击分类查找后跳转的页面，页面中会呈现搜索后的信息内容。列表页最常见的模式是“图片+名称+介绍”。另外，还可以用时间轴和图库的形式来设计列表页。5.6

列表页

单行列表是列表页最常见的形式，大多数消费类的页面都会以单行列表的形式进行展示。左边为图，右边为文字信息、评价和价格等内容，清晰明了的列表可以吸引用户点击并购买相关产品。列表中的图片可以为用户提供消费内容的直观感受，文字信息则可以为用户提供相关的重要信息和参考依据。5.6.1单行列表

双行列表相比于单行列表更为节省版面空间，常出现在购物类App中。以卡片的形式进行排列，上面是图片，下面是文字介绍，可以让页面显得更为紧凑、饱满。5.6.2双行列表

使用时间轴方式设计的列表页可以加强内容信息之间的前后关系，用户在阅读时更有条理性。时间轴列表页通常在左边展示时间节点，右边是与之相对应的内容。5.6.3时间轴

图库列表主要使用在相册、图库或图片编辑类的App中，有文档和图片平铺两种显示方式。为了放页面分布更加均匀，大多会采用正方形的外框显示图片。5.6.4图库列表

在App中，个人中心页通常会显示用户的头像、昵称、个人信息、私信和关注等内容。个人中心页除了可以显示用户本身的一些信息外，还可以修改App的一些系统设置，方便用户更好地使用应用程序。个人中心页主要有头像、个人信息和内容模块组成，通常会采用头像居中对齐的方式进行设计，目的是为了体现当前页门面的信息都与本人有关。头像一般会采用圆形，这样看起来更协调，同时画面也会显得更为饱满。还有一种设计是以头像居左对齐为主，通常在信息较多的情况下会采用这种设计，不仅能更高效地利用版面空间，还能将内容在屏幕中条理清晰的进行展示。5.7

个人中心

详情页是整个App中信息内容详细展示的页面，图文结合，注重文字的可读性。详情页根据页面属性大致可分为普通型和销售型两种类型。普通型详情页的页面样式较多，出现在各种类型的App中。日常生活中常见的新闻类、天气类，流媒体类和阅读类等App中都是用这种普通的详情页，通过文字和图片向用户传达详细内容。在阅读类App中，详情页更注重文字信息的条理性、可读性。销售型的详情页多出现在电商类App中。详情页会详细展示商品的款式、颜色、型号及其他属性以方便用户购买。为了引导用户快速下单，“购买”的按钮会出一直呈现在界面中，突出显示，方便用户将商品添加到购物车或一键下单。5.8

详情页

在音乐类和视频类的App中都会有相应的播放页面。不同类型的App，播放页的设计上也会有所不同。播放页面大致分为音频播放页和视频播放页两种类型。音频播放页主要用于播放音乐、广播、评书等音频类文件。音乐播放页中，通常会将歌手或CD的大图居中对齐放在页面的中上部，底部摆放进度条和可操作性的按钮。广播、评书类播放页的设计相对简单，操作性按钮是必不可少的部分。这类界面在手机录音和广播类App中比较常见。视频播放页通常会采用两种播放形式：一种是在信息流或详情页中直接预览；另一种是全屏预览视频。前者在内容页面中进行播放可加强界面的操作性，如选集、评论和分享等功能，而全屏播放视频能让用户得到更佳的沉浸式观赏效果，增强用户体验的舒适感。5.9

播放页

空白页是使用App的过程中遇到网络问题或跳转到没有内容的页面时显示的页面。一般情况下，空白页会通过文字信息提示用户当前页面的需要进行的操作，或错误的类型，如没有信息、无网络、列表为空等。空白页分为首次进入型和错误提示型两种。5.10

空白页用户在初次打开App时，App会利用空白页指引用户进行一些必要操作，并且引导用户找到一些需要的内容。这类的空白页会通过有特点、明显的按钮引导用户进行下一步操作，并且在满足条件后支持使用某些功能。设计师在设计这类空白页时，一定要考虑设计跳转按钮的位置。5.10.1首次进入型

错误提示型的空白页在App中经常出现，如显示“找不到页面”或者“网络中断”等。这类页面中一定会有引导用户刷新网页的操作按钮或返回上一级页面的操作按钮。5.10.2错误提示型

交互设计第6章随着移动互联网技术的发展和移动设备性能的提升，越来越多的交互设计被应用于App项目中。本章将向读者介绍有关移动App交互设计的相关基础知识，使读者熟知移动App交互类型，并了解制作移动App的交互的绘制软件和表现方法。时下的移动App中使用交互动效设计已经成为一大趋势，但设计师需要注意的是，交互动效应该是以提高产品的可用性为前提，并且以使用户觉得自然、含蓄的方式提供有效用户反馈的一种机制。好的交互设计会给市场带来增值、会提高用户对品牌的忠诚度、会促进销量，从而使公司业务带来良性循环。6.1了解交互设计交互设计是指设计人和产品或服务互动的一种机制，以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计作为一种提高用户体验的方法，近些年来越受到重视，国内外各大企业都在自己的产品中加入了交互设计。6.1.1交互设计的概念

交互动效的核心功能是传达信息并阐释界面跳转之间的逻辑，帮助用户更好的和产品进行信息互动。交互动效的实用性需要根据场景来区分，分别有转场动效、反馈动效、加载动效、引导动效四种最常见的场景：转场动效。转场动效是指从一个界面过渡到另一个界面的过程。转场动效帮助用户理解界面间的层级关系，也给用户方位感和空间感。通过转场动效用户可以更清晰地了解产品的界面框架、逻辑架构，以及界面和元素之间的空间关系并随时感受界面和元素的空间变化。转场动效常见的变化形式包括位移、变形、旋转、缩放。反馈动效。反馈动效是用户进行某个操作之后，系统以动态的形式向用户传达信息的过程。通过反馈动效用户可以了解系统的运行状态，使用户操作移动应用反馈结果更加可视化，以此可以方便用户的操纵。加载动效。加载动效常用于应用系统还在运行状态的场景，其主要的目的是利用动效的表现形式降低用户的等待感。如下图的Bilibili加载动效，延缓用户等待的同时强调品牌形象。引导动效。引导用户操作的动效是引导动效，常用在新手引导。引导动效的主要目的是通过运动的元素来吸引用户注意，达到引导用户操作的目的。6.1.2基础交互动效类型

通过交互动效可以有效地进行信息传递并实现用户与产品的实时交流。同时动效虚拟现实的时空感、营造界面空间的真实性，使用户在交互的过程中感受到操作的合理性，从而降低界面使用的学习成本。除此之外，动效设计也能够彰显产品品牌特性与差异化。实用性——提升产品易用性认知性——更有效地传达信息动效的审美性——提升产品品牌6.1.3交互设计的作用

好的动效设计应用首先服务于用户体验，其次是要适当设计，再次就是要让用户感受到产品的情感互动，最后就是要具有视觉上的美感。那么初学者如何才能进行动效设计呢？6.2交互设计流程要想设计出一个好的动效，首选必须拥有一个出色的想法。想法怎么来？怎么构思？读者可以从以下这6个方面进行构思。结合产品去设计了解动效的基本常识观察生活多看多思考6.3.1提出交互设计创意想法

前面介绍了如何构思想法，有了想法接下来就是去实现想法。实现想法的过程主要依靠技术和技巧，这样就需要读者不断地进行学习和积累。动手尝试，孰能生巧多临摹，多练习注重细节使动效富有节奏感先加后减6.3.2实现创意想法

一个好的交互动效设计应该是自然、舒适的，绝对不是仅仅为了吸引目光而生搬硬套。所以要把握好在交互过程中动效设计的轻与重，应先考虑用户使用的尝尽、频率和使用程度，再确定动效的醒目程度，并且还需要重视界面交互整体性的编排。6.3常用的交互设计类型用户的大脑会对动态事物(例如对象的移动、变形、变色等)保持敏锐的捕捉感知。在App界面中加入一些平滑、舒适的过渡转场效果，不仅能够让界面显得更加生动，还能够帮助用户理解界面前后变化的逻辑关系。如界面中的图片列表可以通过左右滑动的方式切换显示，并且在图片切换过程中会表现出三维空间的效果，使界面的过渡转场效果自然、流畅，为用户带来良好的浏览体验。6.3.1转场过渡

在现实空间中，物体存在近大远小的原则，运动则表现为近快远慢。当界面中的元素存在不同的层级时，恰当的动效可以帮助用户理清前后位置关系，体现出整个界面的空间感。6.3.2层级展示

在移动端UI设计中，由于有限的屏幕空间难以承载大量的信息内容，因此设计师可以通过动效的形式(在界面中以折叠、翻转和缩放等形式)拓展附加内容的界面空间，以渐进展示的方式来减轻用户的认知负担。6.3.3空间扩展

关注聚焦是指在界面中通过元素的动作变化，提醒用户关注界面中特定的信息内容。这种提醒方式不仅可以降低视觉元素的干扰，使界面更加清爽、简洁，还可以自然地吸引用户的注意力。例如，在天气App界面中，通过界面上半部分的天气动画表现天气状况，同时界面下方未来几天的天气状况也采用了位移入场的动画形式，按照元素缓动的原理，为内容赋予弹性处理。6.3.4关注聚焦

界面中的内容元素按照一定的秩序规律逐级呈现，引导用户视觉焦点走向，帮助用户更好地感知页面布局、层级结构和重点内容，同时也能够让界面的操作流程更加流畅，增添界面的表现活力。例如在App界面中，各功能选项以风格统一但颜色不同的图标整齐排列表现，当用户在界面中单击某个功能图标时，将切换过渡到相应的信息列表界面中，而信息列表的呈现方式同样通过动效的形式来表现，并且不同的信息使用了不同的背景颜色，使界面的信息内容表现非常清晰。6.3.5内容呈现

在App界面中进行点击、长按、拖曳和滑动等交互操作都应该得到系统的即时反馈，并将其以视觉动效的方式呈现，帮助用户了解当前系统对用户交互操作的响应情况，为用户带来安全感。例如一款App应用界面中常见的“收藏”功能图标的交互设计。当用户点击“收藏”图标时，红色的实心心形图标会逐渐放大并替换默认状态下的灰色线框心形图标。这个简单的交互操作动效，能够给用户带来非常明确的操作反馈。6.3.6操作反馈

移动UI综合设计实践第7章经过前面章节的学习，读者已经大致了解移动UI的设计方法和制作技巧。本章将通过设计与制作移动App的UI，帮助读者巩固前面所学的知识，同时加深读者对移动App的UI设计规范的理解。移动互联网的迅猛发展改变着人们的生活方式，成为我们生活中不可或缺的一部分。传统线下实体店交易模式已经不能满足和适应现在商品交易市场的需求，商家应该转型线上线下相结合的交易模式，来扩大商品交易范围，创造更加方便、快捷、个性化的互联网购物模式，使得放心、安全的移动APP购物更快的进入消费者的生活。7.1电商App项目设计与制作电商APP主要为用户提供一个商品展示、商品分类、商品搜索、商品按条件排序等功能；用户注册登陆后还可以进行物品在线下单、使用购物车、记录浏览记录、商品收藏、查看订单、查看已分享商品，个人信息管理等功能，是一个集商品交易管理和互动的商品交易APP。本案例将设计制作一款美妆商品销售App，美妆商品的关键词是精致和漂亮，符合女性购物者的消费需求。因此，购买这类商品的用户大多数是女性。为了能够让用户全面了解App项目的制作流程，本例将完成“首页”页面、“分类”页面、“购物车”页面、“我的”页面和“直播”页面的制作。7.1.1分析项目

为了确保最后完成的App界面与产品经理的策划书保持一致，在开始设计制作之前，可以先按照策划书的内容，将App产品的草图绘制出来，得到产品经理和开发人员的认可后，再开始界面的设计制作。7.1.2草图原型设计

根据策划方案的内容完成了美妆App的草图绘制后，交给各部门进行确认，确认后即可开始UI界面的设计制作。在开始设计工作之前，首先要确定App界面的配色方案，以确保整个项目风格的统一，配色方案通常包含主色、辅助色、强调色和文本色。本项目为一款美妆App产品，要向用户展示各类美妆产品给用户传递时尚、品味和精致的感觉。洋红色既具有红色的热情色彩意向，又能够很好地与其他颜色相互搭配，给人以精致与女性的心理感受，因此本项目采用洋红色作为主色。确定主色后，接下来可以根据主色确定辅助色。