移动UI交互设计03界面设计课件.pptx

1、03 界面设计移动UI交互设计3.1 界面设计概述3.2 界面设计分类3.3 界面设计规范目录 CONTENTS3.4 界面设计项目实战3.1界面设计概述界面设计概述界面是人与机器之间传递和交换信息的媒介，是人与机器互动的接口。我们通过手机界面来浏览信息，通过在手机界面上点击、拖曳等方式来实现各种操作，所以，手机界面是我们与手机发生互动的中间介质，如图所示。3.1界面设计概述界面设计概述界面设计开始于软件设计之后，UI界面设计的发展过程是与软件设计慢慢分化的。随着人们对界面易用性、简洁性的要求越来越高，界面设计的重要性才越来越被重视，如图所示的是“搜狐”网站界面十年前后的对比效果，可以看出，简

2、洁、美观、高效已经成为界面设计的主流趋势。53.1.1 界面设计的内容启动图标是手机应用程序的入口，它会出现在手机解锁后的主界面上。如果需要启动应用程序，只需点击该图标即可。启动页是指从用户启动应用之后到应用程序主界面打开之前看到的过渡页面或动画，如图所示。启动图标是用户认识应用程序的第一步，是应用程序的标志和门户，其重要性不言而喻。其设计的原则和方法与我们前面讲到的图标设计是一致的。1.启动图标和启动页63.1.1 界面设计的内容启动页的作用是为了增强应用程序启动时的用户体验。最常见的启动页形式如图所示，这些页面主要用来体现应用程序的名称及价值，让用户能迅速熟记该应用。1.启动图标和启动页7

3、3.1.1 界面设计的内容还有一些启动页，并没有文字内容，如图所示。曾经有调查数据显示，启动时间超过3秒用户就会有焦急感。所以，启动页停留的时间最好控制在3秒以下。1.启动图标和启动页83.1.1 界面设计的内容并不是所有应用程序的启动时间都能控制在3秒以下，所以我们要使用其他方法来进行处理，如可以添加状态提醒，如左图所示，或者利用渐隐效果拖延时间等，如右图所示。1.启动图标和启动页93.1.1 界面设计的内容框架设计也称为结构设计，框架是指界面的骨架，框架设计是在进行用户研究和任务分析后制订出的界面整体架构。对于手机界面来说，其基本的结构可以分为4 个部分，状态栏、标题栏、标签栏和内容区域，

4、如图所示。界面中的状态栏主要用于显示手机信号、电池容量、时间等信息，标题栏用于显示标题信息和放置返回、设置等按钮，标签栏用于显示选项信息。2.框架设计103.1.1 界面设计的内容界面中除了状态栏、标题栏、标签栏之外的区域就是内容区域，所以我们这里说的框架设计，主要是指内容区域的架构设计。通俗而言，框架设计就是界面里的信息和元素位置如何摆放、大小如何设置、颜色如何搭配等。框架设计没有定式，但会因界面类型、功能的不同而有一些常见的形式，在接下来的界面设计分类中会有所阐述。2.框架设计113.1.1 界面设计的内容在进行框架设计时，很多设计方面的原理、法则会对我们有所帮助，如在设计中应用比较广泛的

5、格式塔原理，就非常适合应用于框架设计。下面，先介绍两种在界面设计常用的法则。2.框架设计（2）相似法则（1）接近法则123.1.1 界面设计的内容（1）接近法则。接近法则是指人的潜意识里常常倾向于将空间上或时间上接近的元素整合成集合或整体。例如，右图所示的图形中，虽然所有的圆形大小都一样，但是能够清晰地看出将其分成了3 组，这是由于它们之间不同的距离为我们的视觉创造了分组效果。2.框架设计133.1.1 界面设计的内容（2）相似法则。相似法则是指人的潜意识里会将视线内一些相似的元素（如相似的形状、颜色、大小、亮度等）自动整合成集合或整体。如图所示，图中各行图形虽然间距相等，但是每行图形的形状有

6、所不同，在视觉上就形成了分组效果。2.框架设计143.1.1 界面设计的内容利用相似法则，即使界面中各元素摆放得杂乱无序，也可以很容易地进行区分并分组，如图所示，虽然文件类型多样，但是通过图标的形状和颜色就能非常容易地将其分成若干组合，一目了然。2.框架设计153.1.1 界面设计的内容相似法则是基于共同的视觉特征出发的，在界面设计中，可以利用相似法则给予不同的布局元素相同或相似的视觉特征，激发用户对界面进行适当的分组和联结的本能。右图所示的两个界面就很好地运用了相似法则，通过形状、颜色等区别对界面元素进行分组，使界面的结构变得灵活。2.框架设计163.1.1 界面设计的内容控件是指在框架设计

7、中出现的各种元素，如按钮、菜单、对话框、列表、信号条、电池状态、标签、面板、滑块等都是控件，如图所示。这些控件的功能相对独立，并且可以重复使用。3.控件设计173.1.1 界面设计的内容如果细化来说，在界面上出现的所有元素都可以称为控件。在完成了框架设计，并对界面的结构有所把握之后，就要通过控件的制作来填充框架，完成界面设计了。控件的效果主要依赖于界面设计的规范和控件细节的表现。界面设计的规范主要是指适合于手机设备和系统特性的、合理的设计标准，包括控件的大小和间距、界面的布局等内容。控件细节的表现主要是指控件的颜色、特效、材质等效果，需要通过Photoshop、Illustrator 等制作软

8、件来完成。3.控件设计183.1.1 界面设计的内容需要强调的是，控件的表现看似简单，实则不然。为了将控件效果做好，细节的表现尤为重要，右图所示的两个按钮是使用Photoshop 软件来制作的，左侧的按钮只添加了“斜面和浮雕”的图层样式，右侧的按钮在此效果上又增加了高光和阴影线，立刻增强了按钮的质感，在细节表现上要优于左侧的按钮效果。手机的界面空间有限，在有限的界面中要想将所有控件表现出最佳效果，每一个像素都是关键，所以需要细致、耐心、考虑周到。3.控件设计193.1.2 界面设计的注意要点界面设计首先要关注的就是目标平台，也就是说，做界面设计要明确手机、Pad、电脑等设备的特性，要明确iOS

9、、Android、Windows 等不同系统的设计规范。如图所示，左侧为该应用程序在Pad上的界面，右侧为其在手机上的界面。同一款应用程序在不同设备上布局一样并不合适，而是要因设备的不同，适当修改布局方式。1.适用性203.1.2 界面设计的注意要点界面是人与机器交互的接口，为用户提供简便、易懂的操作才是最终目的。界面的易用性表现在界面的功能、信息、层级等方面。在进行界面设计时，要以满足用户的目标需要为准，避免嵌套过深的多级菜单，缩减不必要的功能，同时尽可能创建多种信息访问途径。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。如图所示的Windows8系统界面，就很好地体

10、现了界面信息层级扁平化的原则，用户关注的信息一目了然，易用性强。2.易用性213.1.2 界面设计的注意要点界面设计要能够预测用户可能出现的错误，提供相应的机制尽可能避免用户出错，在用户操作错误或产生迷惑时可以自己寻求解决方法。右图所示的某程序注册界面提供了友好的信息提示，使注册过程变得简单、出错率小，提高了用户对该应用程序的信任度和好感。3.友好性223.1.3 界面设计的表现手法唯一主色调是指在一个界面中，只采用一种色相，通过不同的亮度、饱和度的调整，配以黑色、白色和灰色来展现信息层次，绝不使用更多的颜色，如右图所示。唯一主色调的颜色一般会出现在界面的状态栏、标题栏、标签栏或其他重要区域提

11、醒的位置。1.唯一主色调233.1.3 界面设计的表现手法多彩色与唯一主色调的区别在于，不同页面、不同信息组块采用多彩色撞色，或同一个界面的局部采用多彩色，如右图所示。多彩色的设计方法比唯一主色调的设计方法要难很多，颜色的使用主要取决于想表现的风格和意境。颜色的搭配有很多可参考的理论知识，如邻近色、对比色、暖色调、冷色调等。但这些理论也不是绝对的。归根结底，颜色的运用需要依靠长时间的积累与实践，如果运用得当，多彩色的界面还是非常美观的。2.多彩色243.1.3 界面设计的表现手法现在，越来越多的App 在数据的呈现方式上，开始尝试数据的可视化、信息的图表化，让枯燥的数据和文字变得直观，增强了用

12、户体验，如图所示。数据的可视化只是用来辅助进行界面设计的，不能单纯地为了数据能可视化，而大量地使用图表，却忽视了这些图表是否有存在价值，或者说是否能够准确表达你所要呈现给用户的信息。3.数据的可视化253.1.3 界面设计的表现手法（1）在界面设计时，可以将不同的内容信息放置于不同的卡片上，使用空白间隔将不同的内容块划分开，如图所示，这样的设计使得各部分内容清晰，没有多余的元素影响视觉，界面简洁。4.内容至上263.1.3 界面设计的表现手法（2）还有一种表现形式是干脆将卡片也去掉，只保留图片和文字，如图所示。这样的设计可突出内容，放大图片和字号，视觉体验更加清晰，提高了界面的易用性。4.内容

13、至上273.1.3 界面设计的表现手法5.大视野背景图这种表现手法是用图片作为界面的背景，以渲染氛围，丰富情感化元素，如图所示。大视野背景图对字体和排版设计的要求比较高，难度也比较大，使用的背景效果不能喧宾夺主，影响界面内容的清晰度。使用大视野背景图最简单的方法是可以将背景图做模糊处理，这样可以起到很好的衬托作用。3.1 界面设计概述3.2 界面设计分类3.3 界面设计规范目录 CONTENTS3.4 界面设计项目实战3.2界面设计分类界面设计分类在一个App中，界面可以分为两类：一类是典型界面，是指在 App（应用程序）中经常出现的、有代表性的界面；另一类是特殊界面，是指App 中的启动、登

14、录、注册界面等。例如，在QQ 软件中，信息列表页、个人设置页就是典型界面，如左图所示；启动页、登录页就是特殊界面，如右图所示。303.2.1 主界面主界面是指打开应用程序后的第一个界面，在这个界面上一般会呈现该应用程序的核心功能，如右图所示。在主界面上，用户应该能够轻易找到该款App 最主要的功能。在设计主界面时，最先做的应该是了解App 的开发目的和用户使用的心理，在挖掘核心功能后，再进行布局设计。313.2.1 主界面这种布局方式泛指对界面进行横纵等分的布局类型，如图所示。所有的核心功能井然有序、间隔合理、清晰呈现，用户能够快速查看和选择，视觉效果稳定。1.九宫格式323.2.1 主界面最

15、早的九宫格是指横纵各3个格，但是慢慢地这种布局方式也发生了改变，不再绝对地控制格子的数量。如果App的功能个数少于或多于9个，也可以改变横纵的格子数量，让布局更加合理，如图所示。1.九宫格式333.2.1 主界面这种布局方式是将信息以竖排列表的方式进行呈现，如图所示。列表可以包含比较多的信息，在视觉上整齐美观，视觉流线从上向下，浏览体验快捷，用户接受度很高。列表式的界面常用于并列元素的展示，包括目录、分类、内容等。2.列表式343.2.1 主界面这种布局方式表面上和列表式很相似，但是它可展开显示二级内容，在不用的时候，这些内容可以隐藏，如图所示。它的优势在于能够在一屏内显示更多细节，无需进行页

16、面的跳转，既能保持界面简洁又能提高操作效率。3.手风琴式353.2.1 主界面手风琴式和列表式在符号表示上是有所区别的。如果有二级内容，则右侧的符号通常会用向下的箭头来表示，如果是界面要发生跳转，则右侧的符号会用向右的箭头来表示。当然，这只是常用的表现形式，在一些页面中，也会看到右图所示的手风琴式界面。3.手风琴式363.2.1 主界面这种布局方式是将部分内容先藏在界面边缘，在需要时再展开，如左所示。它的优势是不占用宝贵的屏幕空间，让用户聚焦于内容，在交互体验上更加自然，和原界面融合得较好，如右图所示。4.侧滑式373.2.1 主界面这种布局方式是利用了格式塔原理中的相似法则，通过形状进行分组

17、，如图所示。它的优势在于形式活泼、不拘谨，常用于分类较多、不好管理的界面布局。5.混合式383.2.2 详情界面详情界面是指除了主界面以外的承载信息的界面，根据其实现的功能，主要分为查看界面和编辑界面。其中，查看界面是指用来浏览、查看信息的界面；编辑界面是指用来编辑、修改信息的界面。观察我们使用的App，其实除了主界面、特殊的登录与注册界面、弹窗界面以外，应该都属于详情界面。详情界面的布局方式可以参考主界面，也就是说，前面介绍的几种布局方式并不是主界面所特有的，它也适用于功能相似的详情界面。此外，还可根据界面功能的需求，在框架符合界面设计规范的情况下，设计形式各异、风格独特的详情界面。393.

18、2.2 详情界面这类App 的查看界面以浏览查看物品为主，有的是图片列表，有的是内容至上的大图展示，目的就是让消费者的目光聚焦于物品，激发购买欲望。所以它的界面往往如图所示。1.购物类App403.2.2 详情界面它的编辑界面一般包括编辑个人信息、购买参数设置、购物评价等，注意要界面简洁、操作简单，让用户感到方便、快捷，如图所示。1.购物类App413.2.2 详情界面这类App 的查看界面主要是以浏览信息、查看分类、阅读详情为主，所以在设计时，要便于浏览和阅读，列表式、图文混排的形式应该比较适合，如图所示。2.新闻类App423.2.2 详情界面这类App 的编辑界面主要包括个人设置、评论、

19、反馈、搜索等，应该便于操作、提供记忆帮助、界面友好，如图所示。2.新闻类App433.2.2 详情界面这类App 的查看界面主要是以查看、分类、播放为主，界面多采用列表式、手风琴式等便于浏览、节省界面空间的类型。因其分类较多，也会有类似于Pad 端界面的菜单形式，如图所示。3.音乐类App443.2.2 详情界面音乐类App 的编辑界面与新闻类的相似，主要用来搜索、编辑、设置等，操作简单、界面友好应该是设计中需要关注的问题，如图所示。3.音乐类App453.2.2 详情界面从上面分析的3 种类型App 的详情界面可以看出，详情界面的设计会根据App 的不同需求，在界面布局、功能上有所区别。界面

20、设计不能脱离用户的需求和体验，有人说，“最好的设计应该是用户在使用过程中感受不到设计”。也就是说，只有从用户的角度出发，充分考虑用户的需求，最大限度地满足用户操作的方便，这种界面设计才是最好的设计。463.2.3 弹窗界面弹窗界面是指App中用于实现提示、输入等功能的窗口，如图所示。473.2.3 弹窗界面弹窗界面的呈现方式是在界面上覆盖一层黑色半透明层，然后出现弹窗。常见功能如下。（1）确认信息，如图所示。（2）选择和设置，如图所示。483.2.3 弹窗界面弹窗界面的呈现方式是在界面上覆盖一层黑色半透明层，然后出现弹窗。常见功能如下。（3）提示和广告，如图所示。（4）分享，如图所示。3.1

21、界面设计概述3.2 界面设计分类3.3 界面设计规范目录 CONTENTS3.4 界面设计项目实战503.3.1 系统规范界面设计规范主要规定界面的状态栏、标题栏、标签栏、图标、字体、字号等视觉元素的信息。下表列出了iOS手机界面设计的参数规范。1.iOS界面设计规范适用机型分辨率状态栏高度标题栏高度标签栏高度iPhone 6/7/8 plus1080px1920px54px132px132pxiPhone 6/7/8750px1334px40px88px98pxiPhone 5/5C/5S640px1136px40px88px98pxiPhone 4/4S640px960px40px88px

22、98px513.3.1 系统规范在界面中还会出现一些图标设计，不仅可以辅助用户进行选择，而且可以增强界面的美观性。下表列出了iOS手机界面图标设计规范。1.iOS界面设计规范适用机型APP Store主屏幕标签栏导航栏和工具栏iPhone 6/7/8 plus1024px1024px114px114px75px75px66px66pxiPhone 6/7/81024px1024px114px114px50px50px44px44pxiPhone 5/5C/5S1024px1024px114px114px50px50px44px44pxiPhone 4/4S1024px1024px114px11

23、4px50px50px44px44px523.3.1 系统规范在字体方面，iOS 系统中主要使用的中文字体是苹方（平时练习可以使用微软雅黑），英文字体是San Francisco。出现在不同位置的文字，在字号上有所区别，下表是以iPhone 6/7/8 为例的文字设计规范。1.iOS界面设计规范标题栏标签栏正文列表、表单等3442px2024px2836px3234px533.3.1 系统规范手机的屏幕密度有所不同，状态栏、标题栏、标签栏、图标、字号等视觉元素就会有所区别。下面介绍一种通用的布局格式作为参考，如表3-4 所示。在实际应用中，最好根据不同的屏幕尺寸提供34个布局方案，根据密度提供

24、不同分辨率的图片。2.Android界面设计规范高度图标状态栏标题栏标签栏标签栏工具图标小图标36px64px74px32px32px48px48px16px16px543.3.2 设计制作规范颜色搭配在界面设计中非常重要，对它的熟练运用，会让设计事半功倍。在移动端界面设计中的颜色选取主要分为主题层、辅助层、阅读层和提醒层的颜色。主题层颜色是决定界面风格的颜色，这种颜色一般不会大面积使用，主要出现在状态栏、标题栏、标签栏、主要区域提醒等地方，如图所示。1.颜色553.3.2 设计制作规范不同的颜色带给用户的视觉感受是不同的，如冷色调会让人觉得平静、理智，暖色调会让人觉得热情、有活力，图所示即为

25、这两种色调的对比效果。1.颜色563.3.2 设计制作规范辅助层颜色是对主题层颜色的补充，一般选用不会与主题色发生冲突的颜色，如邻近色、延伸色、协调的补色等，如图所示。1.颜色573.3.2 设计制作规范阅读层的配色主要考虑信息的视觉清晰、层次清楚，所以灰度是最适合体现该特性的颜色。灰度的对比要兼顾视觉的舒适感、层级的清晰度，不要过于强烈，也不要明度过于接近，如图所示。1.颜色583.3.2 设计制作规范提醒层的目的是能快速引起用户的注意，一般会使用纯度较高的颜色，但也要根据界面的整体配色进行分析，把握合适的对比，不要引起用户的不舒适感，如图所示。1.颜色593.3.2 设计制作规范界面设计的

26、布局主要是考虑元素之间的对齐、分布方式。我们在制作界面时，往往需要借助参考线，以保证相同元素能够对齐、各元素间的距离能够合理，如左图所示。此外，每个控件都需要考虑空间布局。例如，右图所示的界面，我们在放置标题栏左侧的小图标时，要保证其与标题栏上、左、下边缘的距离一致，这样才会让布局看起来规范。2.布局603.3.2 设计制作规范如图所示，标签栏处的几个图标在分布上也需要注意间距的相等，这样才会让布局协调，达到良好的视觉效果。2.布局613.3.2 设计制作规范界面设计涉及的图形主要有图标、头像等。这里的图标与前面章节讲到的图标从设计上来说有所不同，在界面中出现的图标强调简洁、一致和易识别性，如

27、图所示。3.图标样式623.3.2 设计制作规范在同一个App 中出现的小图标应该是一套的，就是说它们的透视角度、表达形式、附加元素等应该一致，不需要刻画太多的细节，要提炼出最易识别的部分构成图标的形状。这些图标除了能够浓缩文字信息外，还起到了美化界面的作用，是界面设计中不可缺少的部分，如图所示。3.图标样式3.1 界面设计概述3.2 界面设计分类3.3 界面设计规范目录 CONTENTS3.4 界面设计项目实战643.4.1 设计思路界面设计，一般分为原创设计和优化设计两部分。原创设计是从零开始，对界面进行设计制作；优化设计是在已有界面设计的基础上，提出修改或改进意见，进行二次设计。本项目是

28、对“智力题大考问”这款App 进行的基于iOS 系统（iPhone 6/7/8 屏幕尺寸）的原创设计。该款App 是休闲益智类的应用程序，通过智力题问答、与朋友分享的形式增强娱乐性。653.4.1 设计思路主题层的颜色定义为UI 界面中最常用的蓝色，这种颜色会增强用户的信赖感，也会给人以冷静、有智慧的感觉。辅助层、提醒层的颜色信息如图所示。阅读层使用灰度颜色，字体为微软雅黑。663.4.2 主界面设计制作（1）打开Photoshop 软件，新建文件，文件的宽为750px，高为1334px，分辨率为72ppi。（2）在制作之前，参照iOS 系统规范，用参考线将画布进行分割。状态栏高为40px，标

29、题栏高为88px，标签栏高为98px。左右各留出18px边距，如右图所示。673.4.2 主界面设计制作（3）使用“矩形”工具，绘制状态栏、标题栏区域，填充主题层颜色（R：23，G：167，B：254）。虽然两处的颜色一致，但为了后期方便控件的对齐，建议分别绘制和填充，如右图所示。683.4.2 主界面设计制作（4）参看iPhone 手机的状态栏，绘制状态栏处的控件，包括信号、时间、电池等，如右图所示。在绘制过程中，要注意各控件的位置和分布，要水平居中对齐。693.4.2 主界面设计制作（5）在“编辑”“首选项”菜单中，将文字单位修改为“像素”，如下图所示。703.4.2 主界面设计制作（6）

30、制作标题栏处的文字和控件。文字大小为34px，在标题栏中水平、垂直居中显示。右侧的图标大小为44px44px，放置在标题栏右侧，注意其与标题栏上、右、下的距离要一致，如图所示。（7）使用“矩形选框”工具绘制标签栏处的形状，填充浅灰色（R：248，G：248，B：248），为其设置描边的图层样式，描边宽度为1px，颜色为深灰色（R：134，G：134，B：134）。713.4.2 主界面设计制作（8）设计3个标签，分别为“首页”“发现”和“我”，并为每个标签设计一个小图标，如图所示，图标的大小为50px50px，文字大小为20px。需要注意的是，3个标签要将标签栏处三等分，才会让视觉效果达到最佳

31、。同时，首页标签的颜色与主题层颜色一致，表明了首页为当前界面。723.4.2 主界面设计制作（6）制作标题栏处的文字和控件。文字大小为34px，在标题栏中水平、垂直居中显示。右侧的图标大小为44px44px，放置在标题栏右侧，注意其与标题栏上、右、下的距离要一致，如图所示。（7）使用“矩形选框”工具绘制标签栏处的形状，填充浅灰色（R：248，G：248，B：248），为其设置描边的图层样式，描边宽度为1px，颜色为深灰色（R：134，G：134，B：134）。733.4.2 主界面设计制作（9）制作界面内容区域部分，继续使用参考线做分割。将界面分为“热门推荐”和“全部分类”两部分，如图所示。文

32、字大小为24px，颜色为深灰色（R：134，G：134，B：134）。743.4.2 主界面设计制作（1 0）使 用“圆 角 矩 形”工 具，绘 制144px144px大小、圆角半径为20px 的圆角矩形，制作右图所示的“热门推荐”部分的分类。为每个分类设计一个小图标，并添加文字内容，文字大小为20px。（如果分类内容多，我们会让最后一个图形显示一半，表示该处内容可以向左滑动继续查看。）753.4.2 主界面设计制作（11）“全部分类”部分的内容使用列表式的界面布局方式制作。使用“圆角矩形”工具绘制列表的形状，高为120px，圆角半径为10px，填充颜色为浅灰色（R：248，G：248，B：2

33、48）。并为其设置描边的图层样，描边宽度为1px，颜色为深灰色（R：134，G：134，B：134），如右上图所示。（12）将这个列表按照同样的间距向下复制，直到标签栏处。为了显示还有更多的列表，会将最后一个列表做成只显示一小部分的效果，如右下图所示。763.4.2 主界面设计制作（13）根据分类信息，在列表上制作图标和文字信息，如图所示，左侧图标大小为50px50px，文字大小为32px，颜色为深灰色（R：134，G：134，B：134）。在列表右侧，添加方向向右的三角符号，表示单击该列表可以进行界面的跳转。773.4.2 主界面设计制作（14）以此方法，可以完成其他列表的制作，如右上图所示

34、。（15）在标签栏中添加两个提醒标记，颜色为提醒色。这样，我们就完成了主界面的制作，最终效果如右下图所示。783.4.3 详情界面设计制作1.编辑界面的制作（1）制作设置界面。可以将前面完成的主界面另存为“设置界面”文件，保留界面中的状态栏、标签栏，将标题栏处的文字改为“设置”，右侧的图标删除，如图所示。793.4.3 详情界面设计制作1.编辑界面的制作（2）该设置界面的启动按钮位于主界面标题栏的右侧，单击启动按钮进入该界面后，应该有用于回到主界面的返回按钮。所以，我们在标题栏的左侧添加用于返回的图标，如图所示。803.4.3 详情界面设计制作1.编辑界面的制作（3）将背景层填充浅灰色（R：2

35、43，G：243，B：243）。使用参考线对界面进行分割，制作列表式的界面，如图所示。列表的高度为96px，根据功能对其进行分组，每组间的距离为40px。813.4.3 详情界面设计制作1.编辑界面的制作（4）按照参考线，使用“矩形选框”工具绘制列表形状，将其填充为白色，描边为1px，颜色为深灰色（R：134，G：134，B：134），如图所示。823.4.3 详情界面设计制作1.编辑界面的制作（5）给每个列表添加文字信息，文字的大小为34px，颜色为黑色。在列表的右侧添加用于界面跳转的图标，用开关控制的功能在列表右侧添加设置开关，如图3-75所示。833.4.3 详情界面设计制作1.编辑界面

36、的制作（6）在列表的右侧添加相关的文字信息，文字的大小为30px，颜色为深灰色（R：134，G：134，B：134）。至此，完成了编辑界面最终效果的制作，如图所示。843.4.3 详情界面设计制作2.查看界面的制作（1）制作答题界面。将设置页面另存为“答题”页面，去掉下面标签栏部分，将标题栏处的文字改为“侦探推理”，在标题栏右侧添加用于更多选项的图标，如图所示。853.4.3 详情界面设计制作2.查看界面的制作（2）使用参考线分割画布。题目处高为100px，题干处高为340px，各答案处高为96px，每部分间距为40px，如图所示。863.4.3 详情界面设计制作2.查看界面的制作（3）在题目

37、部分，绘制70px70px 的圆形，颜色填充为橙色（R：228，G：126，B：44），制作标题数字。同时在右侧绘制用于分享的图标，大小为44px44px，如图所示。873.4.3 详情界面设计制作2.查看界面的制作（4）制作题干部分，文字大小为30px，颜色为黑色。要注意文字的排版和对齐，在空间内做好布局，如图所示。883.4.3 详情界面设计制作2.查看界面的制作（5）制作答案部分，将答案部分做成带有复选框的形式，如图 所示。文字大小为34px。893.4.3 详情界面设计制作2.查看界面的制作（6）在标签栏部分，制作“提交”按钮，可以用橙色来填充，文字大小为40px，颜色为白色。同时完成

38、“上一题”“下一题”的文字制作，大小为28px，颜色为深灰色，如图所示。903.4.3 详情界面设计制作2.查看界面的制作（7）这样就完成了查看界面的制作，最终效果如图所示。913.4.4 弹窗界面设计制作（1）先制作一个用来显示答题正确的弹窗界面。打开上面制作的查看界面，新建图层，填充黑色，将图层不透明度设置为30%，如图所示。923.4.4 弹窗界面设计制作（2）选择“图角矩形”工具，将圆角半径设置为20px，绘制图所示的圆角矩形，填充白色。933.4.4 弹窗界面设计制作（3）拖拽参考线，新建图层，绘制高为88px 的矩形选区，填充主题层颜色（R：23，G：167，B：254）。以圆角矩

39、形为选区，修改蓝色的矩形边缘，将其制作成上面是圆角的矩形，如图所示。943.4.4 弹窗界面设计制作（4）添加文字，字体为黑体，大小为34px，颜色为白色，如右上图所示。（5）输入右下所示的文字，将“正确答案”字样的字号设置为36px，颜色设置为黑色；将“智力值：”“当前智力值：”字样的字号设置为28px，颜色设置为深灰色（R：83，G：83，B：83）。953.4.4 弹窗界面设计制作（6）绘制圆角半径为10px 的圆角矩形，填充主题层蓝色。添加文字“题目解析”，设置文字大小为30px，颜色为白色，如右上图所示。（7）为了增加互动性，可以添加“考考朋友”这样的文字选项，实现互动功能。设置其文

40、字大小为26px，颜色为浅灰色（R：147，G：147，B：147），如右下图所示。963.4.4 弹窗界面设计制作（8）微调各部分位置，完成答题正确的弹窗界面制作，如图所示。973.4.4 弹窗界面设计制作（9）答题错误的弹窗界面与答题正确的弹窗界面类似，只是在功能上有所区别，界面效果如图所示。课后习题请运用本章所学的知识点，完成一款App的界面设计，要求如下。（1）设计主界面、编辑界面、查看界面、弹窗界面各一个。（2）界面美观，符合界面设计的原则。课后习题样例：本样例是为一款美颜相机设计的界面，界面的颜色定义为暖色，符合年轻人的审美需求。在延续大众对于拍照类App 使用习惯的同时，加入一些新的功能和设计，极大地提高了App的易用性，如图所示。课后习题界面设计案例欣赏案例1：“360 安全路由”界面设计欣赏界面设计案例欣赏界面设计案例欣赏案例2：“FRESH IT UP”界面设计欣赏界面设计案例欣赏界面设计案例欣赏案例3：“西山居游戏”界面设计欣赏界面设计案例欣赏案例4：“Map My Run”界面设计欣赏界面设计案例欣赏界面设计案例欣赏案例5：界面优化设计欣赏界面设计案例欣赏 学 习 进 步！移动UI交互设计