项目三 智能家居APP的界面配色设计与原型交互设计.pptxVIP

教学PPTUI体验设计实战上海交通大学出版社

项目三智能家居APP的界面配色设计与原型交互设计

3.1任务一智能家居APP的界面配色设计光学三原色（显示屏RGB）：红、绿、蓝。光学三原色混合后，组成显示屏颜色，三原色同时相加为白色，白色属于无色系（黑白灰）中的一种。色彩三原色：红、黄、蓝。色彩三原色可以混合出所有的颜色，同时相加为黑色，黑色属于无色系（黑白灰）中的一种1.色彩关系光学三原色色彩三原色

2.色彩的属性（1）色相色相其实就是颜色的“相貌”,各类色彩的相貌称谓，如大红、普蓝、柠檬黄等。色相明度饱和度3.1任务一智能家居APP的界面配色设计（2）饱和度饱和度通常是指色彩的鲜艳度，也就是色彩本身纯净的程度。饱和度高的色感强，饱和度低的色感就相对要弱。（3）明度明度是指色彩的明暗程度。色彩明度最高为：白色色彩明度最低为：黑色

3.配色法则（1）同色系配色法则色环上相距0°的色彩为同类色，是以一个颜色为主，然后利用颜色的深浅来进行搭配的方法，即色轮中，一种色相的暗、中、明三种色调，如蓝与浅蓝，红与粉红等。同类色搭配视觉效果统一、清新、含蓄。优点：画面统一，搭配时相对简单而且一般都不会给人难看的感觉。3.1任务一智能家居APP的界面配色设计

（2）邻近色配色法则色环上处于90°之间的两种色彩为邻近色，如红与黄，绿与蓝等。采用邻近色搭配效果柔和、文静、和谐，但处理不当也会产生单调、模糊的感觉，此时可通过调节色彩的明度和纯度来增强视觉效果。3.配色法则3.1任务一智能家居APP的界面配色设计

（3）互补色配色法则互补色是在色相环上180°相对的两个颜色，而对比色则是在色相环上120°到180°范围内相对的两个颜色。在选择APP界面的色彩，控制补色的明度、纯度和使用比例，可使界面产生明显的对比和视觉冲击，如下图所示。3.配色法则3.1任务一智能家居APP的界面配色设计

界面由各种色彩搭配而成，色彩所占的比例决定了色彩的级别，一般界面的色彩可分为主色、辅助色和点睛色3个级别。它们的作用不同，应用位置也各有讲究。如图所示。主色：决定界面色彩基调，能直接影响视觉传达效果和用户情绪，通常占界面视觉比例的75%左右，一般用在Logo和导航栏。辅助色：可以是一种或多种色彩，用于辅助主色，使界面更加完整。通常占界面视觉比例的20%左右，一般用在各种控件、图标和插图上。点睛色：是界面中最为醒目的色彩，通常占界面视觉比例的5%左右，一般应用在提示性图标位置。4.UI设计中的颜色类型点睛色主色辅助色3.1任务一智能家居APP的界面配色设计

【任务实施】通过对项目任务提供的首页原型图分析，发现该页面主要采用了扁平化的设计风格，为体现智能家居产品的科技感，在制定配色方案时可以考虑选择以蓝色为主，采用同色系配色法则进行色彩搭配，使整体界面干净利落。3.1任务一智能家居APP的界面配色设计

图标设计从某个角度来说，图标有点类似标志、徽标都是为了让人们能够被它吸引记住。广义：用来传达意义的图形符号。狭义：指显示在计算机屏幕上表示命令、程序的符号。3.2任务二智能家居APP的图标设计1.什么是图标？

01启动图标02功能图标按照应用类型分类3.2任务二智能家居APP的图标设计

1、图标的分类——启动图标能够启动一个应用的图标。也就是我们在手机主屏幕上看到的图标，点击它可以进入到移动应用中。3.2任务二智能家居APP的图标设计

2、图标的分类——功能图标功能图标可理解为界面上表示指代意义的图形。替代文字或者辅助文字来指导用户的行为，图标要设计的简洁，直观，易懂易记，符合用户的认知习惯，有助于提高APP的易用性3.2任务二智能家居APP的图标设计功能图标案例

功能图标从外观形状上划分，通常分为：面形图标、线形图标和扁平线形图标，根据实际需要绘制不同的风格类型。面形图标线形图标线面结合图标3.2任务二智能家居APP的图标设计

【任务实施】请为“智能家居”APP设计一个启动图标，要求图标简洁、直观，贴近用户心理，能够有效传达企业信息或产品功能。图标大小为1024px*1024px。3.2任务二智能家居APP的图标设计

可视性原则：确保用户能够看到并理解界面上的所有元素反馈原则：提供即时反馈，让用户了解他们的操作是否成功效率原则：帮助用户快速完成任务，减少不必要的操作记忆原则：减少用户的记忆负担，让用户能够轻松记住如何使用产品错误处理原则：帮助用户识别并纠正错误，避免用户感到沮丧易学性原则：让用户能够轻松学习如何使用产品灵活性和效率原则：允许用户根据自己的习