学习笔记：IDF 移动端UX设计 1.4 响应式设计vs.适应式设计

1.4: Responsive vs. Adaptive Design

响应式设计 vs. 适应式设计

移动端UX设计简介

Mint公司的原顶尖设计师总结：移动端UX设计本质上是情感上吸引人的，高度可视化的；同时需要考虑用户的在移动状态中的目标与任务（该状态下用户缺少足够的交互时间与注意力），以及设计上的简洁。

关心所使用的设备：比如浏览同一个网站，用户在家可能先使用手机，再转移到平板上，之后外出又使用手机，最终到达一个有固定电脑的地方。如何应对这种设备环境的混乱，是个重要问题。

适应式与响应式简介&区别

响应式网页设计：指的是浏览器通过媒体查询对用户的设备做出响应，技术上可使用CSS3。使用响应式设计，可以使得网站将相同的文本或者图片内容以对不同设备和分辨率友好的形式展现出来。

适应式网页设计：是响应式的表亲，可用CSS3实现。适应式会改变排版、内容甚至交互方式以适应使用的背景。这大大提高了可用性（accessibility），可通过HTML5和ARIA（谷歌的一个项目，全称为 Accessible Rich Internet Applications）技术实现。适应式设计可以使得网站/应用同时对残疾人群和普通人群友好，不需要提供不同的访问方法/应用。

以上的两种设计实现了网页的本质之一：通用访问。

两种设计辨析
在手机上阅览使用了响应式设计的网站，可以看到相对于在网站上浏览的页面，其文字图标等被放大且重新排版，因此在小的屏幕上更容易阅读与点击。但对于有些网站，达到完全的响应式很困难，因此会出现仿照响应式的网站（被成为混合的响应式）：为不同设备重新设计不同的网站，但是内容基本一致。
而在手机上阅览适应式设计的网站，可能会出现新的交互方式，比如说“向右滑动屏幕以查看更多信息”：网站会检测到用户正在使用手机设备，因此会使用适合手机的交互方式，比如说摇动手机或者滑动屏幕。适应式设计同时还会考虑使用的环境以及用户正在执行的任务。比如说 地理围栏（Geofencing） 和摇一摇（iBeacon） 技术，假设用户在逛超市，手机可以检测到你到达了洗浴用品区域，并了解到该区域正在销售的商品，并弹出“XX商品在您的购物清单上”之类的消息。因此，适应式设计是通过创造性的思维考虑“如何通过手机在增强UX？如何进一步地提供服务使得动作和任务能够更好地适应用户在当前环境下的目标？”

小练习

A. 设计一个同意某法律条款的页面，使得用户能够快速同意该条款且不需要被大段的文字弄得晕头转向
B. 设计一个分享商品到社交账号的页面，有两种情况：用户正在浏览该商品，用户已经购买了该商品。注意用户可能需要在两个不同的页面上完成该操作。
（感觉这课蛮古老的了，我觉得现在很多app在这两个方便做的都还挺好；而且貌似该课程中的电商平台还都停留在网页式，感觉很多提出的问题都被解决了）