移动端APPUI设计与交互基础教程第1章APPUI设计与交互概述课件.pptx

1、设计与交互基础教程MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE 移动端APP UIAPP UI设计与交互概述本章从职业发展角度出发，立足职位需求，向读者介绍有关UI设计与交互所涉及到的入门知识。1.1 UI设计行业的发展前景 1UI（User Interface）用户界面1.1.1 认识相关概念1.1 UI设计行业的发展前景 2ID（Interaction Design）交互设计 交互指的是人和机器互动的过程，交互设计通过了解人的心理、目标和期望，使用有效的交互方式来让整个过程可用、易用。3UE（User Experience）用户体验 U

2、E是指用户使用一个产品时的全部体验，这种体验主要来自用户和人机界面的交互过程。1.1.1 认识相关概念1.1 UI设计行业的发展前景 4移动端UI的操作系统（1）Android（2）iOS（3）Windows1.1.1 认识相关概念1.1 UI设计行业的发展前景1.1.2 就业前景1.2 如何学习UI设计1.2.1 “UI设计师”常用软件介绍1Photoshop2Illustrator3Axure4MockingBot（墨刀）5Sketch6Cutterman7PxCook（像素大厨）8Ps Play1.2 如何学习UI设计1色彩理论知识储备色彩和形象是用户视觉感知中最快也是最直接的元素，无需

3、语言和文字，色彩会在第一时间通过眼球反馈到大脑，触发感受，影响情绪。2心理学与交互理论知识储备在做产品设计和交互设计时，通常从人的感知、注意、记忆、思维、动机等方面出发，直接剖析认知心理，才能全面深入了解目标用户。1.2.2 “UI设计师”设计理论知识储备1.3 UI设计理论基础1色相色相指的就是色彩的品相。2明度明度指的是色彩的“明亮程度”。3饱和度饱和度是指色彩的鲜艳程度，也称色彩的纯度。1.3.1 色彩三要素1.3 UI设计理论基础1APP中一般包含多少颜色经研究，大多数人更倾向于仅依赖23种色彩的简单色彩组合。2配色方案单色单色是单一色系的搭配，它在色彩的深浅、明暗或饱和度上有所调整而

4、形成明暗的层次关系。3饱和度相近色的配色方案是选取相互不冲突的相关色彩，一种色彩用作主色，而其它色彩用于辅色丰富该方案。1.3.2 UI设计配色基础1.3 UI设计理论基础4.配色方案补色在色环中，两个对立的颜色称之为补色。5配色方案自定义配色创建自定义配色方案最简单的方法是将一个明亮的主色添加到一组中性色中，这种处理方法最能够引起视觉冲击。1.3.2 UI设计配色基础1.4 APP页面分类及其作品欣赏1引导页APP应用在启动时会有一小段时间的初始化过程，开发者可以利用这个初始化的过程使用引导页的方式传递给用户一些品牌信息之类内容.1.4 APP页面分类及其作品欣赏2主页（1）以浏览引导为主型（2）提高浏览效率为主型（3）信息展示为主型1.4 APP页面分类及其作品欣赏3菜单导航1.4 APP页面分类及其作品欣赏4详情页1.4 APP页面分类及其作品欣赏5注册登录1.5 浅析APP产品开发流程1团队成员及其作用（1）产品经理（2）设计师团队2开发流程1.3.2 UI设计配色基础1.6 职场经验分享1.别让设计成为“井底之蛙”2.尽量快速融入团队3.负责到底4.不要过于追求完美5.适当补充程序开发基本知识谢谢观看！