Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
响应式设计还不够
Search
lifehacker
December 01, 2013
Design
0
160
响应式设计还不够
lifehacker
December 01, 2013
Tweet
Share
Other Decks in Design
See All in Design
Resolving text accessibility dilemmas in UIs
romanshamin
0
110
実務のための マイクロ インタラクション入門
shingo2000
0
310
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
280
UXデザイナーというものが アジャイルに入ってみた!
muture
2
2k
Concept Art of Pirate Cat
hansolo21
0
2.6k
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
不可分の民藝から可分の工業産業へ
creatorqsf
1
330
Jeremy's First Day
myates3
1
120
Climb Visual Development
rkendrick25
0
100
実案件でのFigmaデータの作り方
xxxkinu
2
200
Space. Ship. Earth. Eintauchen in virtuelle und wahre Welten
mprove
0
120
The Fight
euralisw
0
100
Featured
See All Featured
Designing for Performance
lara
601
67k
Into the Great Unknown - MozCon
thekraken
10
830
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
For a Future-Friendly Web
brad_frost
170
8.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Debugging Ruby Performance
tmm1
68
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Being A Developer After 40
akosma
56
580k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Transcript
响应式设计还不够 前端组
体验区分优化 运营策略调整
可用性 触控区域:大于44pt 触屏选择:user-select选区范围 页面缩放:禁用页面缩放 悬停状态:避免隐藏内容,鼠标悬停显示 手势操作:手势切换slide 可访问性 可读性:突出内容,小屏幕大字体 页面体积:避免文件大小膨胀 漂浮元素:iPad没有漂浮元素遮挡内容
广告:iPad不投放flash广告、不投扩展和背景广告 http://ued.taobao.org/blog/?p=8226
兼顾多屏 Mobile First 单独售卖平板广告 加模块的难度增大,开发的响应速度会变 慢
运营策略调整
响应式是一次思想的蜕变,是一次 技术的洗礼,是一次成长的历练, 是一次前所未有的挑战 http://ued.taobao.org/blog/?p=8101
响应式的核心理念
响应不同用户需求,为了用户更好的获取内容 http://www.microsoft.com/en-us/default.aspx
http://webdesignerwall.com/
移动优先 移动趋势势不可挡 - 截止2013年第一季度,中国智能手机用户规模已经达到4.2亿 - 截至2013年10月,苹果公司共售出1亿7000万部iPad,中国大概2000万台 - 2013年平板出货量达2.29亿 设计上是否从移动版
开始值得商榷
内容优先 ,信息结构简易 淘宝 1220px http://www.taobao.com/
2011年3月淘宝首页 http://www.taobao.com/
小屏幕能看到更多内容而不是更多装饰 淘宝 768px http://www.taobao.com/
响应式设计的基础
主流屏幕宽度 像素宽度 设备 状态 类型 1400 台式显示器 1366 台式显示器 surface
横版 tablet 1280 Nexus 10 横版 tablet Galaxy Note 10 横版 tablet 1024 台式显示器 iPad iPad mini 横版 tablet Galaxy Note 7 横版 tablet 800 Nexus 10 竖版 tablet Galaxy Note 10 竖版 tablet 768 iPad iPad mini 竖版 tablet surface 竖版 tablet 600 Galaxy Note 7 竖版 tablet
GQ网站用户屏幕分辨率
Media query IE8及以下不支持media query IE8需要模拟,浏览器重绘,影响性能 不针对PC上的IE8及以下做响应式,意义不大,节省 开发维护成本
栅格系统 http://chuansongme.com/n/164663 http://lessframework.com/
栅格系统 http://chuansongme.com/n/164663 http://lessframework.com/ W = C * N + G
* (N - 1) + 2 * M 480 = 100 * 4 + 20 * (4 - 1) + 2 * 10 960 = 30 * 24 + 10 * (24 - 1) + 2 * 5 传统960/950 1200 = 70 * 12 + 30 * (12 - 1) + 2 *15 Bootstrap 1200 / 1170 980= 60 * 12 + 20 * (12 - 1) + 2 *20 Bootstrap 980 / 940 768= 42 * 12 + 20 * (12 - 1) + 2 *22 Bootstrap 768
响应式设计的流程及方法
响应式设计开发流程 http://ux.etao.com/posts/802
响应式设计开发流程 1. 确定兼容的设备类型和屏幕尺寸 2. 确定栅格系统 3. 制作不同版式的线框原型、模块设计 4. 产品经理、UI、前端测试和讨论线框原型 5.
视觉设计 6. 原型设计、视觉设计、前端进行开发迭代 7. 后端开发、测试 • 没叫响应式技术,可见设计的 难度和工作量要大于开发 • 要找到适合产品的响应式设计 方案,比较虚 • 各响应式网站的技术大同小异, 好落地 • 设计合理更利于开发、维护
响应式设计方法 栅格系统可以避免一部分的排版错误 栅格系统和卡片式设计结合使用 功能减法 重内容、少装饰
扁平化? 卡片式设计:http://mobile.51cto.com/design-411028.htm http://mobile.51cto.com/design-410163.htm http://mobile.51cto.com/design-394647.htm
样式一 样式二 • 中间模块流动到下方 • 三个模块只能显示两个,隐藏一个 响应式模块一
样式一 样式二 • 右侧模块流动到下方 • 一列变两列 响应式模块二
样式一 样式二 • 三行四列变四行三列 响应式模块三
样式一 样式二 • 宽度使用百分比 响应式模块四
响应式对广告的影响 iPad不支持flash、 屏幕小,不能投背景和扩展广告 iPad竖屏宽度小于1000,传统的横通广告显示不完 整 应对策略
定向iOS、 Android平台投放图片素材或者HTML5素材 在移动端,广告即内容、内容即广告,减少硬广 横通广告居中适应最小版式 半横通广告,竖版时隐藏右侧的小广告
横版 1000x120 竖版 740x120 半横通 680x120 300x120 DEMO 横通广告 iPad下素材投放需要考虑横竖版显示,
广 告居中显示,竖版时显示中间740部分内容, 所以素材设计上需要考虑兼容,避免logo等重要元素 被截断 iPad竖版隐藏300x120,680x120居中显示 http://123.103.23.79/wang/rl-test/ad2.html
响应式设计的挑战
对交互设计和UI设计的挑战 一个模块兼容两种或两种以上的版式 重新构建交互设计和视觉设计的方法论 如何突出重点内容 权衡取舍内容
受限于广告位,版式设计难度变大 如何用少量的装饰性元素表达设计
困难与挑战 改变思想观念是比较困难的事 适应的分辨率越多工作量越大 目前国内的网站设计很难响应到手机 手机显示内容比例很小,隐藏大量内容, 页面体
积大,不做手机适配 习惯了之前产品、设计、开发的松耦合 产品、UI设计、前端需要更多配合 项目管理中把产品、UI设计纳入开发的迭代过程
不同平台下的用户体验得到提升 采用响应式后,后期维护难度增加,开发速度会相应 变慢,增加模块变得不那么简单 广告策略优化,定向投放广告,增加可售卖的广告位 定向投放增加了广告相关工作量,广告业务的复杂度 增加,需要运营上做好准备
对运营带来的变化
欲得其中,必求其上 欲得其上,必求上上
更多案例 http://www.uisdc.com/pop-responsive-design http://www.uisdc.com/70-responsive-sites http://www.uisdc.com/25-beautiful-responsive-websites-inspiration 资料 http://isux.tencent.com/responsive-web-design.html http://ued.taobao.org/blog/?p=5447 http://ued.taobao.org/blog/?p=8101 http://ued.taobao.org/blog/?p=8116 http://ued.taobao.org/blog/?p=8175
http://ued.taobao.org/blog/?p=8175 https://speakerdeck.com/lijing00333/xiang-ying-shi-she-ji-1 https://speakerdeck.com/lijing00333/xiang-ying-shi-she-ji-2
Thx:)