Upgrade to Pro — share decks privately, control downloads, hide ads and more …

响应式设计还不够

lifehacker
December 01, 2013

 响应式设计还不够

lifehacker

December 01, 2013
Tweet

Transcript

  1. 主流屏幕宽度 像素宽度 设备 状态 类型 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
  2. 栅格系统 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
  3. 响应式设计开发流程 1. 确定兼容的设备类型和屏幕尺寸 2. 确定栅格系统 3. 制作不同版式的线框原型、模块设计 4. 产品经理、UI、前端测试和讨论线框原型 5.

    视觉设计 6. 原型设计、视觉设计、前端进行开发迭代 7. 后端开发、测试 • 没叫响应式技术,可见设计的 难度和工作量要大于开发 • 要找到适合产品的响应式设计 方案,比较虚 • 各响应式网站的技术大同小异, 好落地 • 设计合理更利于开发、维护
  4. 响应式设计方法  栅格系统可以避免一部分的排版错误  栅格系统和卡片式设计结合使用  功能减法  重内容、少装饰 

    扁平化? 卡片式设计:http://mobile.51cto.com/design-411028.htm http://mobile.51cto.com/design-410163.htm http://mobile.51cto.com/design-394647.htm
  5. 响应式对广告的影响  iPad不支持flash、  屏幕小,不能投背景和扩展广告  iPad竖屏宽度小于1000,传统的横通广告显示不完 整 应对策略 

    定向iOS、 Android平台投放图片素材或者HTML5素材  在移动端,广告即内容、内容即广告,减少硬广  横通广告居中适应最小版式  半横通广告,竖版时隐藏右侧的小广告
  6. 横版 1000x120 竖版 740x120 半横通 680x120 300x120 DEMO 横通广告 iPad下素材投放需要考虑横竖版显示,

    广 告居中显示,竖版时显示中间740部分内容, 所以素材设计上需要考虑兼容,避免logo等重要元素 被截断 iPad竖版隐藏300x120,680x120居中显示 http://123.103.23.79/wang/rl-test/ad2.html
  7. 困难与挑战  改变思想观念是比较困难的事  适应的分辨率越多工作量越大  目前国内的网站设计很难响应到手机  手机显示内容比例很小,隐藏大量内容, 页面体

    积大,不做手机适配  习惯了之前产品、设计、开发的松耦合  产品、UI设计、前端需要更多配合  项目管理中把产品、UI设计纳入开发的迭代过程