数字媒体交互设计（中级）—— App产品交互设计方法与案例 第7章 组件设计.pptx

数字媒体交互设计（中级）—— App产品交互设计方法与案例 第7章 组件设计.pptx

《数字媒体交互设计（中级）—— App产品交互设计方法与案例 第7章 组件设计.pptx》由会员分享，可在线阅读，更多相关《数字媒体交互设计（中级）—— App产品交互设计方法与案例 第7章 组件设计.pptx（55页珍藏版）》请在冰点文库上搜索。

DIGITALMEDIA数字媒体交互设计初级第7章组件设计CONTENTS目录020304本章内容本章小结课后作业01知识回顾知识回顾01在第6章中，我们学习了移动端App产品的设计规范（基于iOS和Android系统），本章将要学习组件化的设计流程及组件的使用方法。

本章内容011.认识移动端UI设计组件2.导航3.引导4.加载5.网络异常6.空数据类型7.提示8.操作9.单元控件10.App组件库应用案例1.认识认识移移动动端端UI设计组设计组件件

（1）UI设计组件在可视化界面设计中，UI设计组件是指界面特定元素组成的可被重复利用的控件或元件。

例如，QQ聊天就是一个组件系统，这个系统中又分了很多组件模块，包括输入聊天内容、查看聊天记录、发送文件等。

在这些组件模块中又包含了最基础的组件元素，包括按钮和图标等。

根据按钮的使用场景又分为按钮的默认状态、悬停状态，禁用状态、点击状态、忙碌状态。

而按钮组件是可以重复使用在一些需要点击确认的界面中，所以组件具有独立性、完整性、可自由组合的特性。

（2）组件的优势1保持一致性。

在界面设计中所有元素和结构需要保持一致性，如文本和图标的设计样式，元素的位置等。

2反馈用户。

操作页面后，通过页面元素的变化清晰地展现当前状态。

通过界面按钮或交互动效让用户可以清晰地感知自己的操作。

3提高效率，减少成本。

设计简洁、直观的操作流程，界面简单、直白，便于用户快速识别，减少记忆负担；界面上的语言清晰且表意明确，便于用户快速理解并做出决策。

（3）基于组件的设计方法基于组件的设计方法是指由元素、组件、构成和页面共同协作以创造出更有效的用户界面系统的一种设计方法。

1.一致性。

要基于品牌的元素，将字体、排版和颜色都定义好，并贯穿整个项目中，保持组件的一致性。

2.布局。

可以理解为图文排列的设计规范，包括图文之间的间距，构成组件的元素数量等，通过设计规范来帮助其他设计师快速进入项目中。

3.元素。

项目中重复使用的最小单位，比如按钮、图标、输入框等，它的特点是最小元素不可再切割。

它们的设计形式，包括各种状态都需要设定好，比如按钮悬停状态，点击状态等，设定好之后需要在整个项目中循环重复使用它们。

4.组件。

当设计App或Web界面时，在页面上最多的就是组件，一个组件至少需要几个元素构成。

5.构成。

由许多不同的组件组成，定义了组件的运用方式。

6.页面。

每一个页面都包含了组件和构成的排列组合。

在收到修改意见时，只在页面这一层级做改动，元素、组件、构成都不做改变。

案例给3个不同的产品做展示图，并加上购买入口，每个产品的表现形式相同，包含了一个购买按钮，一张图片和几段文本内容，这几个元素组合起来构成了产品展示图组件需要在首页上以3列布局来展示这3个产品项目上线后，其中一个产品售罄，需要改变产品展示图的状态一是在产品开始前就建立组件化，一般依附于旧产品，设计师从以前的项目组件库中直接套用并修改到新产品里，这样项目前期设计做起来会比较节约时间和成本二是产品成熟后，开始做组件化。

组件化搭建一般分为以下几个步骤：

整理目录制定模板设计规范生成组件库（4）引入组件化的时间（5）使用组件化的方法在使用组件的过程中，当新需求来临时，根据应用场景选择合适的组件组合成对应的模板。

根据实际产品，组件模板形成对应的产品页面。

一个个产品页面形成页面操作流程，根据最终完成的产品页面操作流程形成用户体验。

（1）底部标签式导航底部标签式导航位于页面底部，属于一级导航，作用是清晰地告诉用户当前访问位置并且方便用户切换不同的模块。

底部标签式导航到的优点是无论用户是单手还是双手都能轻松操作，从而实现各个功能模块之间的跳转；其缺点是由于尺寸的限制，标签式导航的数量上限是5个，超过5个就要考虑产品的分组是否合理或者更换框架。

2.导导航航

（2）分段控制式导航分段控制式导航通常用于同一模块下不同类别的信息，属于二级导航。

其优点是扁平化的展现信息内容，同时提供进入不同信息的入口，用户可以快速地在同一模块下进入不同类别的信息且不会迷失方向。

其缺点有两个，一是分段控制式导航通常位于页面顶部，切换起来不方便，虽然iOS操作系统可由左右滑动手势来切换导航，但很多用户不知道该操作方式；二是占据控件，导致页面能承载的内容区域变少。

（3）列表式导航列表式导航通常是指对某个模块的内容进行分类，以列表的形式呈现。

列表的展现形式使内容结构清晰，便于用户理解，适用于大量的信息分类展现。

列表式导航的优点是列表式的结构具有很强的延展性，可以不断地增加信息，而且信息格式一致，可调整性强。

列表式的结构可以引入字母索引，并且方便进行分组。

列表式导航的缺点是列表所承载的信息种类比较单一，容易让用户觉得乏味，很难让用户长时间停留。

如果信息量比较大，还需要加入搜索或索引功能，否则用户很难找到需要的信息。

（4）抽屉式导航抽屉可以形象地理解为整理、收藏。

抽屉式导航是将除了核心功能以外的次要功能都收进抽屉里，使用户获得沉浸式的体验，让用户集中注意力去完成核心功能的操作。

抽屉式导航适用于偏沉浸式阅读的App产品。

抽屉式导航的优点是最大限度地利用屏幕空间，用户可以将注意力放在页面上，减少因为其他类型的导航带来分散用户注意力的情况，给用户更沉浸式的操作感和阅读感。

其缺点是抽屉式导航里的功能容易被用户遗忘，不利于整个产品页面流量的最大化。

如果需要同时推广产品的多个功能，则不适合用抽屉式导航。

（5）宫格式导航宫格式导航是将每个模块作为独立的入口放在页面上，用户进入一个入口后，只处理与此入口相关的内容，如果要跳转至其他内容，则需要回到主页面。

宫格式导航的优点是具有较强的延展性，可以无限扩展内容。

它可以承载不同种类的内容，并且可以由不同团队独立开发，然后再聚合在一起。

其缺点是由于宫格式的结构只是信息的入口，具体的信息隐藏在下一级界面中，用户无法第一时间看到信息，造成用户选择压力大。

（6）卡片式导航卡片式导航是宫格式导航的一种延展形式，是一种可视化导航，它能根据页面内容的变化及时更新图片，适合以图片为主的内容，在新闻、旅行、美食、视频类App产品中经常使用，通常作为二级导航。

卡片式导航的优点是信息可视化，让每个单独的内容的转发率相应提高。

其缺点是当内容较多时，这种结构会降低用户寻找信息的效率。

（7）下拉菜单式导航下拉菜单式导航通常用于将同一模块的信息分类，或是快速启动某些常用功能。

这种形式的导航多使用在浏览类App产品的二级导航中，如微博，用户在浏览微博时，下拉式菜单可以节省屏幕空间，它用一个可以展开的图标将标签集合在一起，为浏览类App产品提供更多展示内容的空间。

3.引引导导

（1）嵌入式引导嵌入式引导是指为了让用户了解当前页面或者操作处于何种状态，直接将引导内容嵌入到页面中，既保留了当前页面的内容，同时又增加了引导提示。

嵌入式引导可以嵌入到状态栏和主题内容中、导航栏、工具栏，比较常见的是嵌入到主题内容中。

（2）幻灯片式引导幻灯片式引导也称为引导页引导，一般出现在App产品首次启动的时候，内容通常是产品的宣传、解说或帮助等。

在用户初次使用App产品时，通过引导页给与用户一些必须性的帮助，减少用户对产品的陌生感，让用户以愉悦的心情了解产品的功能和具体的操作方式，以便留住用户。

在设计引导页时，建议文案要清晰、易懂，突出重点。

内容可以是图片、视频和插画的形式，且内容和文案一定要有关联性。

引导页一般是25个，且提供可以直接跳过引导页的操作，不强制用户一定要全部浏览完。

（3）浮层式引导浮层式引导一般以文案结合浮层的形式，类似气泡样式出现在页面上。

这种引导方式通常目的性比较强，提示用户新增功能或页面调整后该功能如何使用，提示用户某些重要功能或一些隐藏功能如何操作。

浮层式引导的设计形式一般采用文案加上带有指示箭头的气泡设计，在页面上显示3秒左右会自动消失，对用户干扰较小。

引导内容要尽量简洁、清晰，字数一般控制在20字以内。

4.加加载载

（1）全屏加载全屏加载一般用在内容比较单一的页面上，通过一次性加载完所有数据后再显示内容。

全屏加载的优点是保证内容的整体性，全部加载完内容才能进行整体阅读。

其缺点是加载速度比较缓慢，如果在网络信号不稳定的地方，将无法显示页面内容。

（2）上拉/下拉加载上拉加载是指用户在浏览页面的过程中，通过上拉页面完成自动加载的过程。

上拉加载方式适用于瀑布流、长列表和商品列表的模式。

上拉加载的优点是把用户带入无尽的浏览模式，让用户一直滑动页面。

其缺点是没有尽头的加载，让用户不能快速定位到某个内容。

下拉加载是指当用户下拉页面时，会出现加载动画，对整个页面重新加载刷新。

现在的加载动画设计更具有情感化、人性化和品牌化，使用户在等待的过程中没有那么枯燥。

下拉加载的优点是方便用户刷新当前页面。

其缺点是有些页面无法进行下拉刷新的操作。

（3）分步加载分步加载是指当页面中有文字和图片时，通常会先加载文字，图片在加载的过程中使用占位符，直到图片加载成功。

当加载的页面内容有固定的框架时，先加载框架，让用户提前知道整个页面的架构，提高产品的体验感。

分步加载适方式多用于多图的页面或比较耗费流量的页面。

分布加载的优点是有助于用户快速了解整个页面的布局。

其缺点是让初次使用产品的用户错误认为产品出现了问题。

5.网网络络异常异常

（1）整页提示用户在使用App产品的过程中，网络突然中断无法正常加载页面时给出的整页提示。

整页提示包含的元素有图标（icon）或插画，网络异常的文案，重新刷新网络的按钮等。

在设计整页提示时，文案要尽量说明当前所发生的问题，并引导用户做出操作，所配的图片或者插画要符合当前场景。

（2）占位符由于网络信号弱或者网络中断无法加载界面时，可以用事先预设好的图标或者占位符来代替文字和图片的位置，以此告知用户此处有内容，只是没有加载出来。

另外，可以从占位符上看出界面的布局。

（3）警示框提示警示框提示的作用是告知用户当前设备或网络的使用情况。

例如，如果继续使用，会消耗大量的移动数据流量，用户需要点击警示框上的按钮才可以继续使用。

警示框提示包含的元素有标题、描述信息、输入框、按钮等。

警示框的设计样式一般都是磨砂效果的圆角白框。

（4）界面内嵌提示界面内嵌提示是指将需要消耗移动数据流量的提示内嵌到视频、直播界面中，告知用户如果继续使用将消耗大量的流量。

界面内嵌提示的好处是减少干扰，让用户更专注地获取信息。

在设计界面内嵌提示时，文案要尽量简洁、易懂，并且摆放在用户能一眼看到的位置上。

（5）Toast提示当网络中断或是网络不稳定，用户点击页面进行操作时，出现Toast提示，告知用户现在网络异常。

（6）Tips提示Tips提示通常出现在导航栏或搜索栏下方，通过Tips提示告知用户网络异常。

Tips的设计形式有3种：

Tips提示一直存在；Tips提示出现12秒后隐藏，用户操作后会再次出现；点击Tips提示会跳转到系统网络设置界面。

6.空数据空数据类类型型

（1）清空状态通过删除操作清空当前的页面内容，产生了空页面，这时候需要给出明确的提示，并告知用户该如何处理。

清空状态设计和初始状态设计很相似，只是提示文案不同。

（2）初始状态初始化状态没有任何内容，需要用户操作以后才能产生内容。

初始状态主要由插画、解说文案、操作入口按钮或可点击的文字组成。

初始状态的设计通常是简单的插画配合简洁的文案，必要时给出按钮，引导用户操作。

（3）出错状态由于网络、服务器或者其他原因导致无法加载内容，产生了空页面，这时候需要给出明确的提示，告知用户该如何处理。

如果用户操作后产生无结果页面也可以给出类似的提示告知用户。

7.提示提示1数字提示数字提示是指通过数字让用户知道更新的信息数量，同时引导用户点击，从而达到给用户传递信息的目的。

在以下3种情况下，可使用数字提示：

1通过数字来提示用户新功能的数量；2通过数字来提示用户收到信息的数量；3功能图标右上角的数字让用户在进入App之前就知道收到的信息数量。

（2）红点提示红点提示是指通过红点引导用户点击，从而达到给用户传递信息的目的。

在以下3种情况下，可使用红点提示：

1产品更新，想让用户知道并使用，通过使用红点提示用户点击；2新消息的提示，通过红点让用户知道有新消息；3想告知用户产品的某些功能，通过红点让用户点击操作。

（3）弹框提示弹框提示可以让用户知道一些重要的信息，同时通过弹框为其他业务提供一个入口。

使用弹框提示通常是为了满足产品的运营需求，提供一个直接的入口，或者是重要功能、重要信息的入口，或者只是单纯的提示信息。

例如，抢红包弹框提示，软件升级弹框提示等。

（4）系统推送提示系统推送提示的前提是iOS操作系统和安卓操作系统推送权限打开，通过系统推送让用户获取App产品想要传达的信息，属于强制提示。

用户通过系统推送的消息进入App产品页面获取消息，提高产品的活跃度。

使用系统推送提示通常是重要的信息需要提示用户，或者是App产品运营活动提示用户，吸引用户去消费。

8.操作操作

（1）底部操作列表底部操作列表是当用户触发一个操作时出现在底部的浮层，通过该浮层可以完成当前任务的操作。

浮层的形式不会永久占用页面空间。

底部操作列表通常包含两个或两个以上的按钮。

（2）底部浮层视图底部浮层视图主要展示与被用户触发的操作直接相关的一系列选项，选项的功能大多对当前页面的分享。

例如，点击页面上的分享按钮以后，出现底部浮层视图，其中包含【发送给朋友】【分享到朋友圈】和【投诉】等按钮。

（3）底部工具栏底部工具栏是指在页面底部放置当前情境下最常用的操作功能。

例如，在键盘被唤起、用户上下滑动界面或者当前视图变为竖屏的情况下，工具栏可以被隐藏。

工具栏的设计形式可以是文字、图片或者图标加上文字，操作功能建议不超过5个。

（4）编辑菜单编辑菜单是指用户通过长按或者点击能调出一个浮层，通过浮层可以完成诸如复制、转发、收藏和删除等一系列操作。

编辑菜单的好处是不占用当前页面的空间，适合非高频的使用场景。

（5）按钮按钮是告知用户按下按钮后可以进行操作。

按钮由文字或图标组成。

按钮主要分为3种，分别是悬浮响应式按钮、浮动按钮和文字按钮。

悬浮响应式按钮代表一个应用中最重要的操作，如创建、共享、拍照等。

按钮通常是圆形并且浮在页面上，每个页面只能有一个悬浮式响应按钮，而且并非每个页面都需要该按钮。

浮动按钮通常采用方形，根据页面布局，固定在页面上，点击后带有效果。

文字按钮只有文字属性样式，没有边框。

在设计时，其应与主题颜色保持一致。

（6）选择器选择器是通过滑动滑轮来选择时间、日期、地点等信息。

滑轮承载的信息量大，可以承载很多选项。

选择器一般位于页面的底部，或者位于选项列表的下方，同一个滑轮间的选项属性相同。

如果选择信息有误，可以通过来回滑动滑轮调整，非常方便。

（7）下拉菜单通过点击一个操作按钮弹出下拉菜单。

下拉菜单通常由箭头和浮层列表组成。

下拉菜单可以为其他功能提供一个快捷的入口。

（8）文本框文本框用于输入单行或多行的文本。

点击文本框后会出现光标，并自动显示键盘。

文本框还可以进行其他操作，如文本的剪切、复制和粘贴。

9.单单元控件元控件

（1）开关控件开关控件只在列表中使用。

在列表中使用开关控件的目的是让用户指定当前应用的状态是“开”还是“关”。

在设计开关控件时，需要表现出“开”和“关”的两种状态。

（2）搜索框用户通过搜索框输入关键词，搜到到用户想要的信息。

当App产品内包含大量的信息时，就需要用搜索框快速地定位到特定的内容。

一般带有放大镜图标的文本框即为搜索框。

（3）图标图标是指界面中的图形元素，当点击图标时，能执行指定的功能操作。

图标通常由图形或图形加上文字组成，并且图标要让用户能识别出是按钮，并且图标的图形要与点击后展开的内容有所联系。

（4）滑块滑块是指可以让用户在连续或者间断的区间内通过滑动锚点来选择一个合适数值的控件。

区间内，通常最小值放在左边，最大值放在右边。

在不要求精准并以主观感觉为主的设置中如音量、亮度、色彩饱和度等设置可以使用连续滑块。

如果用户需要精准设定数值，可以使用带有可编辑数值的滑块，通过点触缩略图或文本框编辑数值。

间断滑块可以在滑动条上平均分布标记，使用户在滑动锚点到标记上时能看到显而易见的效果。

（5）进度在刷新加载或者提交内容时，需要有一个表示时间的进度控件。

进度控件通常有两种类型，一种是线形进度控件，也称为进度系；另一种是圆形进度控件。

在做刷新操作时只能使用其中一种表现形式。

（6）选框用户可以通过选框来进行项目选择。

选框有两种类型，一种是单选框，另一种是复选框。

单选框只允许用户从一组选项中选择一个。

复选框可以允许用户从一组选项中选择多个。

（7）页面控件页面控件用于告知用户当前共有几个视图，并且其中正在展示的视图处于所有视图中的哪一个。

页面控件通常用在轮播图上，并用圆点（或方点）表示，其中圆点（或方点）的个数代表视图的数量；从左到右，圆点（或方点）的顺序代表了视图打开的先后顺序。

为了避免太多圆点，建议圆点（或方点）的数量不超过8个，因为超过8个很难让用户一目了然。

10.App组组件件库应库应用案例用案例1新建画板2制作按钮组件3制作文本框和搜索框4制作分段式控制导航5制作开关、页面控制和评分按钮6制作滑块和进度条7制作复选框和单选框8制作下拉菜单本章小节03本章主要讲解组件的优势，搭建组件的设计理论，组件的使用方法，以及各个组件的功能。

课后作业04根据本章所学的绘制组件的方法绘制Iphone界组件，也可以进行拓展，寻找更多的iPhone界面组件进行绘制练习。

核心知识点：

图形工具组、对齐、iOS界面设计规范等。

颜色模式：

RGB色彩模式。

分辨率：

72ppi背景颜色：

自定义。