移动UI设计

不同的应用市场对于应用的文字描述做了信息架构的梳理。例如，iOS6的应用市场把文字内容分为“内容提要”、“最新动态”、“信息”、“开发商信息”、“更新历史”几个部分；Google Play中，把文字内容分为“说明”、“新功能”、“评论”、“更多内容”、“开发者”、“用户还查看了一下内容”、“”用户还安装了以下应用”、“Google Play内容”几个部分。

1）基本功能描述

注意描述文字在应用市场中的排版形式，在版式上让用户更易读

2）运营吸引描述

例如，在内容上为自己标记5颗星，并在首句中强调“已有大量的用户已经在使用本应用”

ii、其次是图片

图片是比文字描述更重要的展示方式。设计师可以根据你的应用所处的环境以及背景来确定如何设置内容。

使用期：制造第一眼的好感

（1）应用图标

应用图标是移动应用的名片，非常值得花大力气来打造

（2）程序闪屏

点击应用图标后展示给用户的第一个界面就是闪屏，一般传递的是应用的功能、应用的品牌特征、应用的使用说明，或者最新情况等。在设计时需要充分考虑闪屏以及应用内容的结合，使它们能够一脉相承。

迭代器：引导用户跟着产品更新

一般认为3周到一个月的更新周期比较合理。

转变交互设计思维

PC端与移动应用，两者在设计方法论上是类似的，要有以人为中心的设计理念，从用户的核心价值、目标和用户的特征出发来思考设计，有自己的设计原则，关注产品内容的组织，提供符合用户期望的信息架构，使用用户熟悉和高效的导航操作，以及进行有趣的细节设计。

移动应用多样化的使用情景

一般考虑三种主要的情景：休闲中、等候中、忙碌中

移动设备与PC不一样的物理和交互特征

电量、展现的信息有限、网络流量、传感器技术、手势精度

小而美的移动应用框架
海量屏幕尺寸下的用户体验
发掘意想不到的产品创意
决定应用品质与神韵的动效设计
尊重、保护好用户隐私

特征

人-机-环协同的交互系统

bubuko.com,布布扣

应用的使用情景特征

光线

同一个屏幕内容，在环境光低照度下，屏幕亮度过亮，长时间阅读会损伤视力；而在环境光照度较高，屏幕亮度过低时，用户则会看不清屏幕内容。

环境噪音

网络状态

用户的使用姿态

躺着、坐着、站着

单双手

横竖屏

持续时间

干扰任务

点错了别的地方、车晃动……

移动网络的特性

网络载入速度对比

网络类型	2G	3G	Wi-Fi	无网络
网速（kbit/s）	9-30	20-250	>125	-

全页面加载

整个页面一起下载的，页面会处于全空白，或者只有一个加载动画在动的状态。一般适用于一屏只有一个元素的载入情形。

分布加载

先进行全页面加载，而后页面的元素可以分布加载，让用户先看到部分内容，其他内容再逐步加载。一般见于图文的排列界面。

懒加载

经常使用在无尽列表中。懒加载一般由用户的浏览行为来唤起内容的加载，当滚动到页面的顶部或者底部尽头时，会自动加载内容。

需要注意的是一次加载的内容的数量，一般是根据内容的大小和高度来决定，既能较快载入内容，又能让用户更顺畅地查看而不用一直等到加载；另一方面是加载的时间，好的懒加载会根据用户的浏览速度去自动调节加载的时间点，而不是在浏览加载完的内容后才开始继续加载。

智能加载

智能加载则根据不同的网络来加载内容。对于2G网络，给用户提供最核心的少量内容，更多内容允许用户主动加载；对于wifi网络，则可以给用户载入更多地内容，减少用户的点击次数。

另外，在智能加载中，根据网络的特性，也会采用对图片降级的策略。

离线加载

设计师们在处理重复使用的内容时，可以更多地考虑使用离线存储的方式来提升用户的体验。

在设计离线功能时，还需要根据产品的需求，设计一些离线存储的测试，适当地减少存储的开销，使好钢用在刀刃上。

设备的物理特性

小而繁多的屏幕尺寸

因平台而异的手机按键

功能键

被指派为特定的功能，用户按了后触发对应的功能，一般与屏幕内容关系不大。

导航键

被赋予了特定的逻辑规则，其操作与屏幕有一个逻辑映射的关系，但操作与操作对象分离。用户按键后，在屏幕中得到对应的反馈，例如Back键。

各个平台的功能键

平台	导航键	功能键
iOS	Home	Power、Volume……
Android	Home、Back	Power、Search……
Windows Phone	Start、Back	Power、Search……

许多公司在开发移动全平台应用时，由于时间和资源的限制，都会在各个平台上沿用一套设计，一般来说都会根据iOS的风格设计。因为iOS上硬键较少，如果能够支持iOS平台，则Android平台上能见较容易地迁移。但是，对于Android的应用主要进行Back键的适配，使习惯使用Android的Back键的用户也能顺畅地使用。

手机硬键功能设计需要注意：

? 应用的交互导航设计应该支持平台的导航按键操作。

? 应用用到了平台功能键对应的功能，应该支持功能键的操作。

? 所有应用对按键的操作都必须保持一致，不要随意互用。

丰富的传感器体验

触摸手势交互特性

用户的手指喜欢往哪点

bubuko.com,布布扣

屏幕的不同区域用户的最小点击区域是不一样的，如上图。

ü 对于拇指的操作，建议使用11mm的最小对象

ü 对于食指的操作，建议使用8-9mm的最小对象

ü 各个不同区域的位置，可以根据上图进行适当的选择

bubuko.com,布布扣

从上图可以看出：

ü 手机的所有屏幕区域不是同样程度地易于操作的，这跟拇指与手指的划动弧度正相关

ü 食指在操作时，也有一些难于操作的区域，就是在屏幕的右侧空间

ü 对于食指与拇指都是易于操作的区域（右侧图的红色区域）是值得关注的，对于（右侧图的蓝色区域）也应该在设计上进行一定的思考，应该把对应的触摸对象设计得更大些

手势交互不只是点击

各个平台支持的手势

平台	支持的手势
iOS	点击、拖曳、滑动、轻扫、双击、双指缩放、长按、摇动
Android	点击、长按、滑动、拖曳、双击、双指缩放
Windows Phone	点击、长按、滑动、轻扫、双指缩放、双指旋转

各种手势具有以下特征：

? 延时

? 运动

? 压力

? 方位

? 触点数

? 序列

为手势设计时避免犯的错

良好的手势交互设计，要遵循的设计特性：

2 自然性

手势本身是从人的基本行为中延伸出来的交互技术，如果手势本身符合用户自然的操作特征，那么用户既容易学会，也自然觉着有趣。

2 可发现型

如何在界面上给用户提示，使用户能快速上手，是衡量手势是否足够好的一个重要特征。

2 反馈

人一般认为100ms以内的反馈时间是瞬时的。

2 有趣的

2 合适的

设计时也需要考虑用户的不同文化背景。

原则

主流移动操作系统的基本原则

Android	iOS	Windows Phone
令人陶醉	美学完整性	时尚
简化我的生活	一致性	能够随时随地使用
让我惊叹	直接操作	整洁
	反馈	动态效果
	隐喻	简单、可读、简约
	用户控制	保持一致
		真实
		创新

a) iOS作为新一代智能手机平台的鼻祖，强调直接的交互操作，鼓励设计师们使用隐喻和拟物化的设计手法，在图标和界面上使用高质感的特性，以此给用户带来了全新的体验。

b) Android在全平台的统一上做了很多努力，每一板的设计都在追求系统操作的流畅性、界面的简洁性，并且在视觉上进一步突出了与其他平台的差异。

c) Windows Phone则独辟蹊径地使用了Metro的视觉风格，配以简洁、流畅的用户界面，给用户留下了深刻的印象。

移动设计八原则

内容优先

? 重组内容，使内容符合移动的特征

? 优先突出用户需要的信息，而简化界面的导航

? 适时提高屏幕空间的利用率

应该把屏幕资源更多地给内容而不是导航；只在适当的时候，可以让用户呼出导航即可。

为触摸而设计

? 以信息架构为基础，建立手势交互规范

让用户在应用的任何界面中都知道怎么使用手势，并达到预期的结果。这需要设计师提供一套基于应用信息架构的手势规范，它将是导航与交互的基础。

? 优先设计自然的手势交互，而不只是Tap点击

? 引导用户在情景中学习手势操作

除了基本的用户都熟知的手势外，其他手势在使用时都需要给出提示和引导。

? 特殊手势不是必须的

? 可触区域必须大于7x7mm，尽量大于9x9mm

? 手势操作要提供过程反馈提示

转换输入方式

? 减少文本输入，转换输入方式

? 简化输入选项，变填空为选择

? 使用手机已有的传感器输入

语音、扫描识别（二维码、条码、文字等）、LBS技术等

流畅性

? 手指及手势的操作流

操作路径短能在一定程度上被认为是操作效率更高，流畅性更好。

? 用户的注意流

用户在操作界面时，注视点转移形成的焦点流连起来就是注意流，注意流是否圆滑也是判断界面是否流畅的重要标志。

? 界面反馈的转场流畅性

让应用的界面转场过渡以及反馈都是流畅的。

多通道设计

多通道设计是指系统的输入输出都可以由视觉、听觉、触觉等来协作完成。

易学性

使用前引导界面，其实完全没有必要。如果实在需要，也建议最好不要超过3屏内容，要有快速退出的操作。

对于功能性引导设计，更好地帮助设计是把新功能的提示与产品本身做更完美的结合，这样用户在他刚好要使用的情境下获得提示，让用户感到友好而不突兀，这样的设计更合理。

在用户需要的时候才提供对应的帮助。

为中断而设计

? 保存用户的操作，减少重复劳动

a) 网络中断操作

b) 编辑中断操作

? 衔接用户的记忆而不是让用户重头开始

智能有爱

评价一个移动应用体验的好坏，除了要看它是否满足用户需求和是否具有友好的可用性外，能够让用户感受到惊喜是在移动应用设计中最为推崇的。

惊喜有趣、智能高效、贴心

贴心的设计往往会帮助用户提前想到一些事情，并满足用户还未意识到的需求，在用户在犯错误的时候能自动弥补、纠正用户的操作，并提出温馨的提醒。

框架

产品的框架设计是将信息合理组织、有效展示的一种方式，这种方式将影响到整个产品的稳定和扩展。

框架的深度和广度

一个好的框架设计是建立优秀的等级式系统，将信息按用户熟悉易理解的方式进行分类，并建立等级层次关系。

广度框架&深度框架

bubuko.com,布布扣

广度越大，同一层及的入口越多，用户在搜索入口时，需要更多的识别时间，也会占用更多地屏幕空间。但多入口的方式，也容易让用户知道产品主要是用来做什么的。同时由于是展开式的入口，用户可以更快捷、更容易获取到自己需要的信息。无限制的广度，会让用户对产品提供的核心价值迷惑。

而深度越深，内容的层级越多，用户获取信息的路径就越长，操作起来更繁琐。由于相关入口较深，对于新手会有搜索目标难度的增加。深度型的框架，必然也给屏幕更多地空间，留给用户最关心的内容，让用户能更快地获取信息。

在进行框架设计的时候，权衡好深度和广度，要考虑的因素很多，包括产品的核心价值、内容的数量、用户的熟练程度、内容组织的有效性、目标内容的使用频率、内容之间的语义相关性、使用情景特征，甚至是手机的反应时间等。

最简单和流程的产品框架，是浅而窄的方式。

移动应用的框架分析

? 从应用场景角度来看，产品框架可以更浅一点

手机场景碎片化时间的特性以及情境的复杂性

? 从硬件设备来看，产品框架可以更窄一点

小屏幕，应该突出对用户来说重要的内容

产品框架的移动型

怎样设计浅而窄的产品框架？

? 移动化

根据业务功能，分析移动特征，提供给用户最合适的基于情境的设计。在交互设计阶段，更是要应用信息组织方式，敢于再简洁功能，组合同类信息，隐藏次要功能，转移一些功能到系统平台中。

? 路径扁平化

甄别出用户需要的核心内容，使核心内容的路径扁平化，可以使用户的连续性和效率得到提升。

? 层及信息合并

? 隐藏

移动应用导航的设计模式

从立体空间的维度来看，导航元素可以在页面中，也可以在界面前后。从同一平面的维度来看，导航元素可以在页面中，也可以在上下左右四个方位扩展。

标签式

bubuko.com,布布扣

一般信息被明确分为几类，此分类根据逻辑和重要性一般控制在5个以内，其他部分汇聚到一个分类标签中。

适用项：入口选项数目不多，且用户需要在选项间频繁切换来执行多任务。

注意项：这种模式不适合太过复杂和不稳定的结构。

辐射式

bubuko.com,布布扣

将全应用信息进行独立分类，做到信息互斥，类别各自有独立入口，内容间基本并列。这些入口聚合在中心页面，此页面一般是首页。

这种方式比较清晰，每个格子的位置都是固定的，用户通过对方位的记忆可以很快找到所要内容的位置并进行操作。缺点是切换功能时，必须返回首页，增加了操作的步骤。

适用项：分类清晰，入口独立且固定。

注意项：不适合在交叉类别中使用。

列表式

bubuko.com,布布扣

将信息梳理为多个条目，条目直接没有概念上的交集，一般数量保持在15个以内，超过15个最好另分一级（例如，树状列表）。如果不想再分一级，可以将条目分组分块，在视觉上加以处理区分，最好再给每一组定义一个名词。

除了在主框架使用外，列表式结构在移动应用中主要在局部位置使用较多。它以文字描述为主，内容较多且相对不是太重要，会以列表的形式布局。

适用项：较适合展示层次分明的等级结构。

注意项：控制好列表的个数和分组方式。

平铺式

bubuko.com,布布扣

简单的层级框架，适用于整体性比较强的内容，在一个界面中能完全展现一块内容，且多个内容直接是并列关系。一般界面控制在5个以内。有页面指示器，显示总共有几个界面，当前是第几个。

适用项：平铺页面适用于少而精的内容和随意浏览的页面，易于实用滑动即可，界面占用空间少。

注意项：无法立即跳到非相邻页面，不适合较多页面的加载。

抽屉式

bubuko.com,布布扣

抽屉式导航是将层级框架中的分类内容进行隐藏。现在使用最多的是屏幕的左右两侧，扩展了屏幕的平面大小。

适用项：以当前内容为核心展示的应用。

注意项：隐藏的导航内容，需要更好的方式调出，比如手势。

点聚式

bubuko.com,布布扣

当层级框架比较复杂，几个并列的模块中都有用户频繁使用的核心内容时，会考虑使用点聚式导航。通过一个点的方式，汇聚和这些入口，这个点可以以更有趣的方式来展现，且不受个数的限制，更灵活，也让界面空间更开阔。

适用项：需要提取最核心的几个点来展示产品的特性。

注意项：汇聚后将使部分导航隐藏，需要良好的引导。

模式之外的因素

用户持机和拇指使用

在设计产品框架时，必须考虑到拇指的最佳操作区域，同时也要考虑到操作时的视线干扰。可以考虑将最核心的功能点放在屏幕底部，即易于用户操作，并能减少操作时的视线干扰。

扩展屏幕之外的导航

边缘的合理利用，可以将点击效率和误操作得到更好的改善。

移动平台特性

需要去了解相应平台的设计原则和规范，以及硬件的配置。

细节

让人机交互更多样

? 指尖与界面的互动

ü 点击

在移动界面设计时要保证让用户感觉到可以直接操控的元素，而且还需要一眼就能让用户认得它们。

ü 拖曳和拨动

被拖曳的元素始终跟随着屏幕的指尖，而被波动的元素在指尖离开屏幕后还会因为惯性继续运动。

对于可拖曳、波动的界面元素，应该将其跟按钮等可以点击的控件区分开，在设计上强化其可拖动的感觉。

ü 多指手势

如果你设计的多指手势缺少与现实的联系，那它们应该是为专家用户而创造的快捷操作，对于普通的使用者，最好能提供其他可以完成同样功能的交互方式。

? 虚拟键盘中的设计

ü 要分析界面在使用场景中的需求，再合理选择使用何种键盘。

ü 一般键盘右下角的功能键也是可以配置的，例如Go、Join、Next、Route、Search、Send、Done等。

ü 注意项：

a) 输入项的相关内容在键盘浮起后不能被遮挡

b) 需要安排足够的空间来显示动态内容，如反馈信息

c) 在输入项较多的表单中，要注意多个输入框之间切换的便利性

d) 既然移动设备中的软键盘需要根据场景呼出，那自然也要在适当的时候将其隐藏

? 让设备产生存在感

? 用声音与界面交流

? 打开摄像头看世界

? 创造虚拟现实的界面

传感器能够实现的功能

陀螺仪	重力感应	光线感应	麦克风	摄像头	GPS
记录移动轨迹	摇晃手机	亮度变化	语音输入	拍摄视频	地点定位
水平旋转角度	倾斜手机		声音输入	捕获图片
加速度				抓取颜色

将界面可视化

? 可视化的信息结构

信息结构的可视化就像绘制一张地图，用户可以方便地看到哪里是自己需要的，可以从哪里走从哪里回。

? 内容信息的图形化

? 可感知的操作线索

操作可视化是让用户在界面中能够更直观地感受到所能操控元素，可以通过视觉上的强化或者动画上的引导达到这样的目的。

? 看得见的反馈

用隐喻引导用户

隐喻设计存在着多种设计形态——拟物、线索、环境——这几种形态给用户的直观感受度是不一样的，它们对于用户的引导依次降低。但相反，越低的引导提示越是能让用户沉浸在使用环境中，专注于自己的任务。

? 拟物化降低用户认知

在拟物的界面中，用户能通过一些熟悉的元素产生相应的通感，他们在生活中是怎样的感受，就会在界面中有所映射。

形状、材质、颜色……

? 用线索搭建隐喻系统

通常应用了线索式设计的功能并非主流程的操作，更多的是可以让部分用户更方便地完成快捷操作。

? 营造环境的隐喻

通过营造一个使用环境甚至可以让用户在不知不觉中被引导到我们所希望的状态。

在移动界面的设计中，屏幕内的空间只是设计的一部分，我们常常会将屏幕外的空间利用起来，以扩展屏幕内的内容。

另外一种隐喻可以想象在内容块的下方还隐藏着一些界面元素。

声音的互动

? 降低用户注意力

声音在移动设计中最基本的应用就是像在物理世界中一样，及时反馈用户的操作结果。

? 制造产品的使用氛围

? 树立品牌认知

? 机器间的交流

动效

动效有什么作用？

? 告诉用户应该做什么

? 提醒用户将要去哪里

? 帮助用户减少焦虑

? 引导用户经历故事

? 引导用户触碰感知

? 营造应用独有气质

适合动效的应用场景

分类

按照动效类型：运动、形变

按照动效场景：转场、引导、反馈、加载、启动画面

转场

需要从目的、场合、产品整体特点、实现性能等多方面考虑。

a) 形变

翻页：模拟现实生活中的翻页，适合在拟物化较强的应用中使用。

开关门效果：有进入、出来的隐喻。适合在一级页面和二级页面之间使用。

缩小放大效果：体现了空间感，在平级、父子级页面间可以使用。

折叠效果：适合对同一个对象进行变化或者两个关联的场景。

翻转效果：在iOS平台中相当常见。变化幅度大、节奏紧凑明快，适合大场景的转换，要求翻转前后的两个界面存在一定的联系。

b) 运动

运动动效的设计主要考虑的是运动方式，从方向上入手，可以是左右、上下、前后；从形态上看，可以是直线、曲线、旋转，此外还有更多形式的组合。在此基础上，还可以根据运动的目的使用淡入淡出、亮度的变化、缓动的效果等使运动更自然，更引人注目，或者更贴近现实。

运动的方向最好在整个应用中保持单纯和一致，过多的变化反而会让用户觉得疑惑。

运动的形态、特效，也需要根据界面的元素特点，或者在场景转换中要达到的目的进行设计，而不是随意使用。

在运动的形态、效果中，缓动以其贴近现实的质感和灵动变化的节奏，获得众多设计师的青睐。

一方面要控制运动的时间，另一方面，运动的节奏很重要。

c) 无技巧转场

无技巧专场是指场面的过渡不依靠后期的特效制作，而是在前一个场景里埋入一些线索，使两个场面实现视觉、心理上的流程转换。

利用相似因素转场，即通过两个场景间的相似因素作为转换的纽带，它可以不需要前后两个场景间具有相同的主体，只需从中寻找相似的因素就可以完成这一连接。

引导

包括两个方面：（1）对于隐藏内容、操作的引导；（2）新手帮助

ü 适时出现和离开

· 不要中断用户的操作

· 当用户可能触发这一操作时在进行提醒

· 如果提醒不会对进一步的操作造成影响，最好出现一下（建议3秒）就离开

ü 突出主要功能

ü 新手帮助的亮点

反馈

分为过程反馈和结果反馈——过程反馈是在操作过程中，界面对操作进行的反馈，告知用户操作上的状态变化；结果反馈是完成操作后，根据结果给出的反馈。

ü 轻量、具有生命感的反馈

ü 连贯、有一定过渡的形变

ü 模拟现实、情感体验

ü 不要忽略过程反馈

加载

ü 对于等待时间，有0.1秒、1秒、10秒3个关键点。

· 当等待时间小于0.1秒时，我们可以不用作任何处理，否则会有画蛇添足之感

· 当等待时间在0.1秒到1秒之间时，可以使用动效为用户提供等待提示，但此时的动效应尽量简单，否则还未播放完毕就已经到达了操作结果。

· 当等待时间超过1秒，就会打断用户原来的思路，从而降低效率。

· 当等待时间超过10秒，就会有大量用户失去耐心转而去做其他的事情。

ü 加载动效的方式有两种，一种是将自己的品牌颜色质感等附加到期抽象的形状中，然后让这些抽象的形状进行变化；另外一种是直接利用自己品牌的Logo进行动作或者形状的变化，比如填充、旋转等，甚至可以利用形象特点编出一个“迷你故事”。

ü 一般需要提供等待时间，即呈现动效的同时带有剩余时间的提示，最简单的就是出现进度条的同时显示还剩余多少时间。

启动画面

ü 通过动效的辅助做出与众不同、凸显应用特质、贴近内心情感的设计

ü 在设计中主要不要过于复杂、过于慢、过于繁琐，否则不仅加重系统的负载，而且给人拖沓之感

ü 可以是一个“小而美的故事”——比较适合特殊的场合，比如新版本上线、大的活动、节日等。在平时的启动时可以简化为单幅的图片。

如何描述一段动效效果

运动动效的基本规范

ü 位置

起始位置和终止位置

ü 运动方式

过程是怎样的，例如直线、曲线、旋转

ü 触发行为

ü 速度和节奏

ü 明确各个运动对象的关系

形变动效的基本规范

ü 大小

ü 形状

ü 透明度

ü 明暗

ü 颜色的改变

ü 组合效果

还需要事先考虑技术的可行性

动效设计方法

? 运动形变，万变不离其宗

? 节奏速度，掌控曲线时长

? 情感故事，拟物、隐喻、品牌

? 结合操作，关联轻量自然

? 点到为止，切忌过犹不及

? 尊重习惯，谨慎进行创新

? 快速原型，多方沟通权衡

适配

客户端产品的适配设计

适配的核心就是在多样性的设备环境中追求体验的一致，但这里的体验并非交互、视觉上的一致，而是心理感受的一致。

移动设备的屏幕特点

每块屏幕都是由屏幕尺寸、分辨率、屏幕密度三者相互组合而成。

分辨率：表示移动设备显示屏上点的数量，单位是像素px

物理尺寸：在屏幕中，每个像素都有一定的尺寸，因此这么多的像素点组成的屏幕就会有长度和宽度，这个长宽就是我们时机感受到的屏幕物理尺寸大小。物理尺寸一般以屏幕的对角线长度表示，一般用英寸表示。

屏幕密度：每平方英寸中含有的像素点数量就是屏幕密度，屏幕密度其实是由每个像素点的大小决定。像素点的尺寸越小，屏幕密度越大。

各种屏幕尺寸的界面适配

? 整体缩放：首页

? 间距增加：九宫格导航

? 单向拉伸：列表

? 智能调控：栅格列表

? 扩展性：启动画面

横竖屏状态下的界面设计

如果没有足够的资源，可以考虑直接锁定屏幕的旋转，只提供给用户横屏/竖屏的使用模式。否则可以考虑单独为其设计横屏和竖屏的界面，以达到更好的效果。

横屏相对竖屏更适合双手持机操作。在设计横屏时，应该充分利用屏幕宽度，创造更有利于横向双手操作的界面。

多设备的响应式设计

响应式设计倡导用一种全新的的方式去思考设计。它的理念是页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相当的响应与调整。无论用户正在使用PC，平板还是手机，页面应该都能够自动调整布局、自动切换分辨率、图片尺寸以及相关脚本功能等，以适应不同设备。

响应式设计首先考虑的是产品要兼容的设备类型和屏幕尺寸。并且要具体考虑到布局结构、导航、图片、文字。

响应式布局模式

? 左右双列布局模式

bubuko.com,布布扣

? 左右三列布局模式

bubuko.com,布布扣

内容多、层级多的网页并不适合这种布局模式。

? 综合布局模式

bubuko.com,布布扣

适合于导航比较重要、内容层次比较多的大型复杂的网页。

bubuko.com,布布扣

这种结构现在在网页中应用的比较少，在客户端中比较常见。

? 封面式布局模式

bubuko.com,布布扣

? 标题布局模式

bubuko.com,布布扣

适当地遵循用户的认知和使用习惯是响应式设计要遵循的潜在规则。

首先通过对交互架构整体的组织，可以使菜单栏、工具栏、导航栏不管在哪些设备上，都可以满足用户使用相同或相似的规则进行操作，可以说给用户一个各处皆适用的操作方式；其次可以通过对各个设备内容的组织，对内容的优先级做出判断并给予适当的位置，减少用户的记忆负担。

隐藏可以有效地整合空间，让小屏幕上的内容不拥挤，内容优先。但是隐藏必须遵循用户的使用惯性和认知，让用户可以轻易地找到隐藏后的内容并进行操作。如隐藏的图片总会依靠露出的缺图来告诉用户的内容还没有浏览完，或者通过视觉元素的左右按键告诉用户可以查看上下内容。

导航的响应式组织

? 导航响应多种隐藏模式

bubuko.com,布布扣

? 复杂网站的分布式导航响应设计模式

bubuko.com,布布扣

这样的导航形式显得复杂，有些条目被隐藏后，用户很难确切地知道从哪里去找到它。需要与搜索紧密结合来弥补这种方式带来的缺陷。

? 精简导航元素的响应模式

bubuko.com,布布扣

图片的响应式变化

? 图片的响应可以结合前面讲到的布局结构，屏幕由大到小，结构由多列到单列，这是图片响应设计的基础形式。

? 在PC上页面可以展示较多图片，屏幕尺寸逐渐变小后，还可以采用隐喻的技术来实现在不同页面大小下对图片组的响应。隐藏的意义在于显示主题信息，同时在需要的时候显示被隐藏的内容。

? 由文字信息是否比图片重要来决定是否要删除图片。

文字的响应式展现

文字的组织形式包括响应后大篇幅文字内容的展示。文字的大小、长度、显示形式（是否折行）、显示位置、交互方式都是响应时需要处理的问题。

理性地看待响应式

? 优势

l 开发、维护、运营成本优势

l 兼容性优势

l 改动灵活

? 劣势

l 用户需求

l 开发成本

l 加载速度

创新

创新技法详解

? 逆反法

打破习惯的思维方式

? 离散法

将研究对象予以分离，创造出新概念新产品

? 移植法

将一个研究对象的概念原理方法应用于另一个研究对象

? 还原法

抓住事物的本质，回到根本，抓住关键，将最主要的功能抽出来

? 强化法

强化事物属性的某一个或某几个方面

? 组合法

将两种或两种以上的学说、技术、产品的一部分或全部进行适当结合，形成新原理、新技术、新产品的创造法则

? 对应法

模拟相似、仿形仿生设计、类比联想