[移动端UI设计与制作案例教程][张芳芳[电子教案(PPT版本)].pptxVIP

第1篇 基础篇第1章 认识移动UI设计第1篇 基础篇第1章 认识移动UI设计1.1移动UI设计的定义 随着智能家居、智能数码电子产品及智能手机的普及，带有液晶显示屏的产品越来越多，越来越多的产品需要进行UI设计。界面设计的好坏直接影响一款产品的成败，要成为一款有竞争力的产品，界面的使用体验和视觉美观度至关重要，精美的界面设计、良好的用户体验使产品能够焕发生命力、增进用户的使用黏度与口碑传播，将大幅提升了产品的下载量、和用户使用频次。 UI即User Interface缩写，字面直译为用户界面，移动UI设计即对用户使用的移动终端界面的视觉设计及交互设计。移动UI设计的应用终端包含了：手机、PAD、智能电视、智能家居家、车载等，本书中着重讲解手机端UI设计。（图 1-1~图 1-3为常见移动终端）第1章 认识移动UI设计图1-1手机移动端界面设计图1-1手机移动端界面设计第1章 认识移动UI设计图1-2 PAD移动端界面设计图1-1手机移动端界面设计第1章 认识移动UI设计图1-2 智能电视界面设计图1-1手机移动端界面设计第1章 认识移动UI设计1.2移动UI设计的特点 移动UI设计与传统电脑端界面设计相比，有以下几方面的特点： 1.移动UI以手势操作，需保证最小触碰范围在40像素以上。 大家知道，我们常用的电脑鼠标准确度是相当高的，哪怕是再小的按钮，对于鼠标来说，点击的错误率也不会很高。而在移动端界面中，由于使用手指操作，手的操作准确度相对而言就低很多，而且还要照顾一些手指较大的用户，因此对于移动端界面中按钮及触碰区域的设计，就需要一个比较大的范围，以减少错误率。这个数值不是强行要求的范围，而是手指可点击的最小范围，大多数设计师会将最小触碰范围设置为40-60像素之间。（图 1-4～图 1-5为PC电脑端鼠标应用场景及移动终端设备应用场景）图1-4 鼠标操作场景 图1-5 手机操作场景第1章 认识移动UI设计 2.移动UI设计中要将经常触碰的功能入口放到手指方便触碰的范围内。 移动端界面设计，需要考虑的是移动端设备的使用环境，通常人们更加希望单手操作手机（某品牌的7寸大砖头除外），因此，设计的按钮通常在屏幕下方，或左右手大拇指能控制到的区域内。（图1-6 ～图1-7 常用标签栏的位置及常用评论文本框） 图1-6 常用标签栏的位置 图1-7 常用评论文本框 3.移动UI设计中要考虑手指的通用习惯。 我们经常使用鼠标的话，可以知道，通常使用鼠标会有单击，双击，右键这几种操作，而对于移动端界面，使用手指操作，我们习惯于点击、长按和滑动，甚至多点触控。因此在移动端UI设计中，经常设计长按划出或者弹出菜单、滑动翻页或切换、双指的放大缩小、以及双指的旋转等等。第1章 认识移动UI设计图1-8 常用UI交互手势第1章 认识移动UI设计 4.移动UI设计中要考虑按钮常用状态。 对于网页中的按钮，通常有四个状态：默认状态，鼠标经过状态，鼠标点击状态，不可用状态。而在移动端界面中，按钮通常只有三个状态：默认状态，点击状态和不可用状态。因此，在网页设计中，按钮可以与环境以及背景更加和谐的融为一体，不必担心用户找不到按钮，因为当用户找不到的时候，会用鼠标在屏幕上乱画，这时按钮的鼠标经过状态就派上用场了。而在移动端界面中，按钮需要更加的明确，指向性更强，让用户知道什么地方有按钮，因为一旦用户点击，触发按钮的事件就发生了。（图1-9 ～ 图1-10 标签栏ICON默认状态及选中状态）第1章 认识移动UI设计图1-9 标签栏ICON默认状态 图1-10 标签栏ICON选中状态第1章 认识移动UI设计 除此之外，移动端界面主流手机的尺寸则仅仅为3.7-4寸，最大的也不过7寸，界面展示内容有限，因此需要更清晰明确的设计区域划及清晰的操作流程。同时，根据不同产品特性，页面表现形式不同，但页面的设计呈现方式多以权重高的的内容在页面的一屏上方展示，权重低的内容在页面可能会放到三屏或者四屏展示。第1章 认识移动UI设计1.3了解企业中移动产品设计流程 1.移动端应用产品设计流程 在企业中，一款移动端应用产品（英文Application，简称APP）从提出想法到设计，再到上线迭代，需要经过一整套流程： （1）公司战略规划及产品提案阶段 即企业管理层或产品经理分析产品的市场情况，开展市场调查及竞品分析，明确定位用户群体并发现用户需求，提出提案。 需求确定过程中，我们可以参考马斯洛需求层次理论，判断出用户需求级别，从而判断出产品市场规模。越低层级的需求越是刚需，是人类最基本的需求，满足这部分需求的产品的市场规模将越大。第1章 认识移动UI设计图1-11 马斯洛需求层次金字塔第1章 认识移动UI设计 知识拓展：马斯洛需求层次理论是/item/%E4%BA%BA%E6%9C%A