阿里巴巴交互设计专家李强——跨屏体验融合&响应式设计-P2
2020-02-27 664浏览
- 1.
- 2.
- 3.毛并楠，毕业于香港科技大学，12年进入阿里巴巴。 目前就职于阿里巴巴国际UED，致力于阿里巴巴海外B2C&B2B用户 体验的最优化。 曾经负责搜索&买卖家基础产品的设计，以及两个平台在广告产品 上0-1的全局搭建，承接日均1000万流量。 目前主要负责买卖家后台基础产品以及商业社交领域的设计，专业 方面主要负责响应式研究、跨屏&动效研究领域。
- 4.前言 核心设计关键因素 设计细则 案例应用 Workshop / 01 / 08 / 13 / 22 / 32
- 5.Wikipedia ： Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience— easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones) 01
- 6.为什么需要响应式？ 解决设备的多样性，保持多终端体验的一致性，缩短产品迭代周期，为未知设备做设计 02
- 7.为什么需要响应式？ PC Logic Mobile Site DataBase Logic取消&SEO排名上升 03
- 8.自适应和响应式的区别 自适应(定点响应) <= 响应式 1198 104 104 VS 990 1198 1198 流体栅格 04
- 9.案例 响应式 1200 990 720 480 320 05
- 10.案例 自适应(定点响应) 1200 990 720 480 320 06
- 11.是否要在pad上做响应式 否 是 07
- 12.核心设计关键因素
- 13.Breakpoints 9 拉伸规则标注 08
- 14.断点的分类 设计成本&考虑主流设备屏幕物理尺寸 09
- 15.DP：device independent pixels(设备独⽴立像素) iPhone5s iPhone6 iPhone6 plusw:320dp640＊1136pxw:375dp750＊1334pxw:414dp1242＊2208px 10
- 16.断点的范围 向下兼容&区间布局一致 990 1100 AA BB 320-479 C 480-719 720-989 C 990-1199 1200+ 11
- 17.断点上的对应规则 删除/出现 展开/堆叠 12 123 12 34 1234 12 变更 134 *只在断点触发。 12
- 18.响应式设计细则
- 19.通栏 通栏1 通栏2 可变模块 空白模块 通栏3 通栏4 通栏5 通栏6 通栏 内容 为了简化页面布局而定义出的概念。一个信息 固定模块 区块是一个独立的功能区块，不能做跨区块的 （<=320） 交互行为和信息传达任务。 • 简化内容区块之间的关系。 • 从左至右。 • 前端实现成本低。 • 模块分为固定&可变模块&空白模块。 通栏 模块 内容 13
- 20.等分栅格 N1 6等分 ABCD 5等分 A B 4等分 A B C 3等分 A 2等分 1等分 A A -16 0 E C D B B 1200/990/720: *N1,外边距，16dp **页面根据需求等分成1、 2、3、4、5、6列，模块 宽度可以任意组合。 ***Banner&背景等不 需要考虑边距。 1200 1216 14
- 21.等分栅格 6等分 5等分 4等分 3等分 2等分 1等分 0 12 A A A A B B BC B A A N2 C C D 480/320: *N2,内边距，12dp **页面根据需求等分成1、 2、3、4、5、6列，模块 宽度可以任意组合。 ***Banner&背景等不需 要考虑边距。 308 320 15
- 22.等分栅格 固定模块 固定模块 16.7% 16.7% 100% 16.7% 16.7% 16.7% 16.7% 40% 100% 60% 固定模块 1200/990/720 480/320: *通栏存在固定模块的情况 下，可变区域符合等分栅格 即可。 **因为是流体栅格，可变区 域总体被划分成100%。 ***固定模块大小20n，最大 尺寸320，否则需要硬代码。 16
- 23.间距 外边距：16px 内边距 : 12px -16 0 实际设计页面宽度 页面 1200 1216 0 12页面 实际设计页面宽度 308 320 1200/990/720 480/320 17
- 24.信息优先级 720 A bc DE F 480 A b DE G I H F G 触屏&信息优先级排序&设计沿承性&移动优先 18
- 25.断点间的拉伸规则 定高拉伸 (多适用模块&组件) 12 12 拉伸 等比例拉伸 (多适用图片模块) 1 1 2 2 *拉伸过程不变的为固定模块，即模块2,会发生拉伸的即为可变模块。 无删减拉伸 (多适用文字模块) 1 Take it Easy! 1 Take it Easy! 19
- 26.最大的断点 1500 *特殊情况下，根据终端设备访问的分布，可以有新的BP，比如可能1500作为新BP，响应规则同1200。 20
- 27.Hover的处理 21
- 28.案例应用
- 29.设计关注点 固定模块标注 交互的设计专注点 模块拉伸变化 可变模块百分比 内容拉伸变化 文字行高 视觉的设计专注点 内容间距 固定模块标注 可变模块标注 22
- 30.1200 990 720 23
- 31.标注 >=1200 *交互不需要有额外的响应式 标注。 **视觉需要考虑字体的行高以 及内容间距。 24
- 32.标注 990-1199： "# *A、B、C为固定模块，拉伸空白区域。 $ **固定模块用px，可变模块使用R%标识。 720-989： %& ' ***D、E、F各占33.3%等分拉伸，链接固定居左显 示。 25
- 33.标注 990-1199： 通栏1 通栏2 通栏3 "# $% & "# $ " % *通栏1：A、B、C、D、E保持20%的等分拉伸，链接内容靠左。 **通栏2：A、B、C、D保持33.3%、16.7%、16.7%、33.3%等分拉伸，所有组件本身不发生变化。前三个 模块内容靠左，最后一个内容靠右。 ***通栏3：所有内容居中显示，可换行。 26
- 34.标准输出 交互稿 工具Reflow 交互标注 视觉稿 视觉标注 " " # # $ DPL 27
- 35.设计流程 Step 1 确认是否有多终端场景 需求。且多终端流量是 否占一部分比重，并且 有增大趋势。 确认内容优先级以及不 同BP下的框架&布局 设计。 Step 2 Step 3 设计5个BP下响应式 交互稿&细节，并补 充拉伸细节。 视觉设计，并标注固 定模块以及可变模块。 Step 4 Step 5 前端还原度走查调整。 抽提可复用组件进入 DPL。 *每一步骤最好都能提前跟多方（视觉、前端、copy）确 认，以避免返工。 **设计上内容为王。内容加载顺序，可以视具体需求按照内 容优先级加载。 28
- 36.回顾一下 29
- 37.应用结果
- 38.30
- 39.提升50% 提升近100% 31
- 40.Workshop
- 41.背景： 假设你是Alibaba的设计师，需要对⾸首⻚页进⾏行响应式改版。 通过DA的数据得到，之前流量访问设备分布： 40%分布在1200-1500之间 10%分布在990-1199之间 1%分布在720-989之间 49%分布为⼿手机设备访问。 所有的⻚页⾯面模块以及优先级如下⻚页所⽰示。 那么请根据以上判断条件，设计⼀一套响应式的⻚页⾯面满⾜足⽤用户需求。 32
- 42.1 2 34 5 7 6 33
- 43.26
- 44.26
- 45.tony.liq@alibaba-inc.com bingnan.maobn@alibaba-inc.com 26
- 46.
- 47.
