第五章6-App界面设计布局风格与设计规范-备课笔记.docVIP

编号26 编号26-01 学习任务六、App界面设计布局风格与视觉设计规范 一、课程说明与要求 1.课程说明 本次课主要讲解包括App界面设计风格、App界面视觉设计规范两方面内容，一款良好的界面设计，总能令人赏心悦目，更好地保留用户，增加用户的粘性。APP项目开始启动设计时，首先要做的就是根据主要页面定下整个APP的设计风格，并了解移动App界面设计视觉规范，如尺寸、间距、布局等方面的设计规范，这将影响到一款产品的设计专业度，进而影响用户体验。 二、学情分析与课程导入 1.学情分析 本课程授课对象为艺术专业学生，学生没有接触过交互设计规范方面的理论知识，普遍认知不强，为此我们强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，对所选择的专业感兴趣，获取知识的主动性较强。 2.课程导入 我们讲App界面布局风格和设计规范，对于刚开始接触交互界面设计，碰到最多的就是有关尺寸的问题，界面多大，文字怎么样才合适，要做几套不同大小的才能适应？面对这样的问题，怎样才能设计出用户喜欢的App？我们通过下面的理论知识来为大家进行解答。 三、理论知识讲解 （一）AppUI界面设计风格………………………………………【难点】 1.App界面设计风格 通过颜色搭配、页面布局和品牌形象等， 给用户呈现出的整体视觉感受 2.App界面设计风格的重要性 统一设计风格能给用户呈现整体一致的视觉体验，有利于传达产品整体的品牌形象；也方便设计团队制定设计规范，减少设计风格不一致带来的沟通成本。 编号26 编号26-02 3.App界面设计风格传达的信息 ●整体基调 ●目标人群 微信是黑、绿、白三种主要颜色搭配，界面简洁，即时性强，中规中矩的布局呈现给用户稳重、信赖的感觉，更倾向于成人的沟通工具。 QQ默认皮肤是浅蓝、浅灰、白三种主要颜色搭配，灵活的布局交互呈现给用户活泼、有趣的感觉；比如早期的qq空间、皮肤、以及现在动态里的兴趣部落、游戏等等都是更偏向爱玩、爱新奇的年轻用户。 同样是即时通讯社交应用，设计风格为什么会有这些差别？这就是由产品的定位和目标用户决定的。 编号26-03微信口号是“ 编号26-03 4.主流的设计风格 现行主流的设计风格：扁平化设计 （1）界面美观、简约大方、条理清晰; （2）设计元素上强调抽象、极简、符号化，去除冗余的装饰效果，突显App的文字图片等信息内容; （3）完美兼容pc网站、安卓、ios等不同系统的平台和不同屏幕分辨率的设备，适应性强。 在设计风格表现上，颜色占据了80%以上的视觉体验。因此要做好设计风格，主要做好界面的颜色搭配和分布。 参考来自”面向企业分析服务公司（KISSmetrics）”的调查报告图表 从图表上看大众基本都喜欢蓝色、绿色，这里也说明微信和QQ为什么分别使用绿色和蓝色作为APP重要的配色之一； 编号26 编号26-04 色调冷暖及明暗亮度 ●在为APP设计进行配色时，需要考虑不同用户的喜好和体会配色给用户带来的视觉感受。 ●重视通过冷暖色彩+明暗亮度搭配传递给用户的印象和心理感受……………【思政融入（如图中App，通过色彩代表的含义，（动力、强大，欢庆、幸福），确保配色方案符合APP的定位以及给用户传递APP界面设计正面良好的形象，通过色彩搭配，给设计出符合产品定位的app界面。）】 并不是所有人对色彩的感知都是相同的，当色彩让人感受到各种意义，引起大脑的反应时，色彩才被感知；所以，感知色彩也是“大脑记忆”或者”刺激大脑”的过程; 【互动参与讨论，分析不同的配色和色彩代表的情感间的关联，了解色彩所代表的含义，通过配色方编号26-0 编号26-05 App界面视觉设计规范………………………………………【重点】 在App界面设计风格确定后，在我们设计师进行细化界面设计之前，还需要设计师与前端开发人员一起商讨来确定App设计规范。 APP视觉设计规范是对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计师、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；并且可以减少设计素材，控制安装包的大小。 【思政-专注的精神内涵】 在app页面视觉设计这个过程中，我们要严格遵守设计规范，使设计出的界面更符合用户的操作习惯及并提高交互体验。要体现专注的精神内涵，内心笃定而着眼于细节的耐心、执着、坚持的精神，这是一切“工匠”所必须具备的精神特质。从中外实践经验来看，工匠精神都意味着一种执着，坚持与韧性。“术业有专攻”，一旦选定行业，就一门心思扎根下去，心无旁骛，在一个细分产品上不断积累优势，在各自领域成为“领头羊”。 1、页面布局规范 建议安卓、ios尽量统一，这样可以避免安卓和io