第五章7-App界面版式设计规范及交互设计原则-备课笔记.doc

编号27 编号27-01 学习任务七、App界面版式设计规范与交互设计原则 一、课程说明与要求 1.课程说明 本次课主要讲解包括App界面版式设计规范、交互设计经验法则及解析两方面内容；一个好的排版要考虑到用户的阅读习惯和设计美感，通过掌握版式设计的规范，可以帮助我们设计出更符合用户使用和视觉体验的产品；同时通过对交互设计原则的理解和实例分析，希望大家能从中学习到一些设计经验和技巧，也为我们自己做app产品时增加些知识储备。 二、学情分析与课程导入 1.学情分析 本课程授课对象为艺术专业学生，学生没有接受过交互设计原则等方面的知识，普遍认知不强，为此我们强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，对所选择的专业感兴趣，获取知识的主动性较强。 2.课程导入 我们讲版式设计规范和交互原则，那么什么是版式设计，版式设计都有哪些规范，这些规范在App中是如何体现的，实际在我们日常生活中使用的上线的App，看到的内容布局、对齐、分组等都是设计规范的体现。 三、理论知识讲解 （一）App界面版式设计规范………………………………………【重点】 1.内容布局 （1）列表式布局 特点是能够在较小的屏幕中显示多条信息，用户可以通过上下滑动手势来获得大量的信息反馈。 编号27 编号27-02 特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片来承载不同的内容。而且由于每张卡片都是独立存在的，所以它的信息量可以相对于列表更加丰富些。 ……………【思政融入（我们通过戏曲案例分析列表式和卡片式布局的应用，戏曲作为我国优秀的传统艺术,有着广泛的民众基础，戏曲包含的艺术形式,在娱乐大众的同时,也在潜移默化地影响着人们世界观、人生观及价值观的形成。我国自古以来就重视艺术作品的教育作用,对于戏曲更是如此，随着网络的广泛发展，未来在交互设计领域也会有更多相应类型的产品。）】 【互动参与讨论，不同App中的列表高度带来的不同体验分析，教师做总结】 2.界面图片设计比例 常见的图片尺寸有：16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。 编号27 编号27-03 对齐是版式设计基础、重要的原则之一，通过整齐的外观，给用户一种有序一致的浏览体验。 4.对称 对称设计传达出页面的平衡、安静和稳定，同时表达了完整性、专业性和一致性。 5.分组 常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。 编号27 编号27-04 【互动参与讨论，版式设计规范在不同App中的交互设计，教师做总结】 6.设计适配 （1）显示分辨率： 分辨率是度量位图图像内数据量多少的一个参数。通常表示成每英寸像素（Pixel per inch, ppi）和每英寸点（Dot per inch, dpi）。包含的数据越多，图形文件的长度就越大，也能表现更丰富的细节。 “分辨率”被表示成每一个方向上的像素数量，比如1920X1080等。 （2）逻辑分辨率： 由于市面上手机种类比较多，有不同的屏幕尺寸和不同的显示分辨率，给开发提供了很多不便；为了减少开发人员的工作成本，开发人员需要一套统一的分辨率和尺寸单位，因此衍生出一个新的分辨率——逻辑分辨率（单位是虚拟尺寸单位)。 Android 的虚拟尺寸单位是dp （用于元素）和sp（用于字体），iOS 的虚拟尺寸单位是pt 。 （3）设计尺寸选择： 计师需要设计一套基准设计图来达到适配多个分辨率的目的，我们可以选择中间尺寸750 x1134px作为基准，向下可以适配640x1136px，向上可以适配1242x2208px和750x1624px／1125x2436px。 ios切片常见为： @2x切图（以750px为宽度尺寸为基准切图） @3x切图（以1242px为宽度尺寸为基准切图） 编号27 编号27-05 （二）App交互设计经验法则及解析………………………………………【难点】 1、状态可见原则 系统应该让用户快速的了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解； 一般的方法是在合适的时间给用户适当的反馈。 编号27 编号27-06 2、环境贴切原则 软件系统应该使用用户熟悉的语言、文字、语句，而非系统语言。 软件中的信息应该尽量贴近真实世界，让信息更自然，逻辑上也更容易被用户理解。 3、用户可控原则 用户误触到某些功能，应该让用户可以方便的退出。 用户发送一条消息、总会有意识到自己不对的地方，这个叫做临界效应；支持撤销/重做功能。 编号27 编号27-07 4、一致性原则 （1）结构一致性 保持一种类似的结构，新的结构变化会让用户思考，规则的排列顺序能减轻用户的思考负担 （2）色彩一致性 产品所使用的主要色调应该是统一的，而不是换一个页面颜