第五章4-App页面设计视觉层次结构和视觉引导-备课笔记.doc

编号24-01【App产品交互设计开发制作】 编号24-01 学习任务四、App页面设计视觉层次结构和视觉引导 一、课程说明与要求 1.课程说明 App页面设计视觉层次结构和视觉引导主要包括视觉层次结构的构建方法及内容、界面设计的视觉引导以及反馈设计这三大块内容；视觉层次结构是内容的构成布局，便于更有效的传达信息和含义，要把握好文字和组件的排版布局，来引导用户的视线，并且通过用户的操作，让用户知道反馈的结果是什么，让我们设计的APP产品看起来更加舒适，用户使用起来更加方便。 二、学情分析与课程导入 1.学情分析 本课程授课对象为艺术专业学生，学生没有系统的接受过关于视觉层次构建和引导等交互设计方面的知识，普遍认知不强，为此我们强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，对所选择的专业感兴趣，获取知识的主动性较强。 2.课程导入 我们讲App视觉层次结构的构建，那么视觉层次结构有哪些构成元素？如何使用这些元素来区分视觉层次？实际在我们通常用到的主流App中，比如：放大主体内容、色彩对应的认知、字体及字重的大小等，都可以看到通过这些基础元素的组合使用，从而达到满足用户交互体验的设计要求。? 三、理论知识讲解 （一）App页面视觉层次结构的构建………………………………………【重点】 1.视觉层次结构以及重要性 视觉层次结构是内容的构成布局，便于更有效地传达信息和含义。 依据重要性顺序排列，对构成的元素：尺寸、颜色、字重、布局，进行相应处理，来形成视觉关系，从而在整个设计中建立视觉层次。 2.阅读模式 F型是最常见的浏览模式，代表浏览的路线顺序。 人的眼睛通常会在左上角开始，沿水平线移动，然后向下移动到另一条水平线，在没有感兴趣的内容时，会保持沿垂直线移动。 尼尔森·诺曼集团（NNG）的用户体验研究小组对人眼的移动路径做了研究，当用户浏览大段文字时的阅读轨迹 看起来像是字母F或E。 红色区域代表用户集中阅读，黄色代表注意力没那么集中，蓝色区域代表一扫而过，灰色区域代表根本没注意到。 3.视觉层次结构构建常用元素…………… （1）尺寸 放大主体内容或者标题来突出视觉层次关系，突出主要内容 因为我们通常是先阅读更大的东西,而且这种方式实际上甚至比自上而下的浏览模式更能引起我们的注意； 编号24-03 编号24-03 （2）颜色 具有高对比度的颜色将显得更重，视觉上更接近用户，从而使这些内容更具有重要性。 通常，更鲜艳的颜色更吸引人们的注意力 每种色彩对应的认知是不一样的，比如：UI界面设计中，蓝色文字代表可点击，红色代表是出错或警示，在排版中黑色和红色比较吸引注意力。 （3）字体 使用字体的粗细来创建视觉层次结构，这样使信息结构更加清晰。 举例说明：从“斗栱App”，可以看到视觉层次构建从尺寸、颜色、字体等方面在App中的体现 【思政融入（传统建筑美学App，树立民族自信和文化自信）】 编号24-04透过传统建筑丰富多彩的形式，我们还可以发现其中的传统技艺之美。传统建筑主要以木结构为承重结构，根据地域分布分为井干式、抬梁式、穿斗式等。建筑之美，既包含有形层面的营建创造，更兼有无形层面的观念意蕴。传统建筑的发展，体现的是中国人的宇宙观、自然观、价值观和以“和”为美的审美理念。 编号24-04 （4）布局 通过使用参考线和网格来布局设计，可以使每组元素都可以紧密关联。 （5）分组和对齐 分组和对齐的用意在于哪些元素可以组合在一起，以什么形式排布，体现页面之间元素的关联或区别。 分组和对齐在一定程度上可以引导视觉流。可以运用格式塔原理中的相似、接近、连续、封闭性原理进行布局。常用的方式有色块划分、宫格、线框、列表等等。 编号24-05 编号24-05 【互动参与讨论，引导学生通过样例图片对各个构建元素的了解，并讨论各个元素在App中的应用，教师做总结】 （二）App界面设计的视觉引导和反馈………………………………………【难点】 1、视觉引导 在快节奏的生活方式下，花大量的时间对内容进行精细阅读的人很少，用户通常是以扫描的方式快速获取页面的信息。通过简洁与繁杂的交互体验对比，我们需要知道，如何让我们的APP更加高效、快速的使用户能够自然、轻松的浏览到所需要的信息； 编号24-06当我们在设计APP作品或者产品中会看到各种样式不同的图标，有些图标给设计锦上添花，与内容比较贴合、标识、引导性强；同时也让内容显得谨慎、专业； 编号24-06 图标在颜色的构成、元素的形状、丰富的程度等细节方面 遵循一致性的原则，图标可以显得更加专业。 2、视觉反馈设计 反馈设计的目的是通过用户的操作，让用户知道操作的结果是什么，发生了什么； 反馈设计可以分为几个步骤来完成，让反馈设计可以恰当、清晰、及时地传达给用户。