您的浏览器Javascript被禁用,需开启后体验完整功能, 请单击此处查询如何开启
网页 资讯 视频 图片 知道 贴吧 采购 地图 文库 |

IxD2013_C5_跨PC和移动的设计_吴春松_互联网_IT/计算机_专业资料

59371人阅读|793次下载

IxD2013_C5_跨PC和移动的设计_吴春松_互联网_IT/计算机_专业资料。由国际体验设计协会(IXDC)主办的2013中国交互设计体验周在6月20~23日在杭州·浙江省人民大会堂隆重举行。吸引到来自国内外150多名主讲人和嘉宾,与行业2500名从业者、高校师生一同参与,规模空前盛大。 阿里巴巴平台事业部交互设计专家吴春松在其题为《跨PC和移动的交互设计》的工作坊中,讲述如何通过统一设计去响应所有设备,并实现多设备之间的联动交互这一跨PC和移动设计的重大趋势。


跨PC和移动的设计 2013中国 交互设计体验周 吴春松 交互设计师 淘宝网、一淘网 http://weibo.com/pigtwo screens 时代变了,我们变成了屏幕人。这是多屏的时代,屏幕构成了一个生态系统。— Kevin Kelly 智能手机增长迅猛并可能保持增速,平板电脑增长更快。— Mary Meeker 多屏时代的设计 你准备好了吗? 响应式 responsive design 跨屏式 cross-screen design ★ ★ ★ 什么是响应式 为什么响应式 响应式怎么做 为什么响应式 52% 23% 31% 笔记本+智能手机 笔记本+平板电脑 智能手机+平板电脑 传统网页 ★ 固定栅格 ★ 固定内容 响应式网页 ★ 弹性内容 ★ 媒介查询 ★ 流体栅格 响应式网页 web standards 结构与表现分离 responsive design 结构不变,表现应需而变 响应式 vs 原生APP APP? 响应式? 响应式 ★ ★ ★ ★ 适配性:对已有/未来设备友好 开放性:对搜索引擎友好 统?一性:对品牌形象有利 成本低:不需要建?立专?门开发团队 + 原生APP ★ ★ ★ ★ 根据设备优化设计 与设备深度结合 部分APP?无需??网络可运?行 下载可收费 响应式怎么做 响应式怎么做 1 内容策略 信息架构 内容优先级 页面类型分析 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 根据价值定位和用户分析,确定站点信息架构 列表类?页?面 操作类?页?面 详情类?页?面 2 移动框架 手机端页面布局模式 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 移动优先,不是说移动更重要,而是一种新的思考方式 屏幕?小、??网速慢 ?用户场景多样 移动增?长迅猛 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 分析页面类型和内容按优先级,制定手机端的页面框架 1-全局导航 2-列表?页:局部导航 详情?页:主?人信息 列表类?页?面 1 2 3 4 全局导航 局部导航 内容列表 - 详情类?页?面 全局导航 主?人信息 内容详情 关联导航 操作类?页?面 全局导航 功能详情 - 3-列表?页:内容列表 详情?页:内容详情 4-关联导航 3 响应式框架 交互:响应式布局模式、栅格系统 视觉:风格探索 前端:页面框架代码 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 3.1 确定布局模式 1-全局导航 2-列表?页:局部导航 详情?页:主?人信息 2列表?页 局部导航 详情?页: 主?人信息 1-全局导航 4-关联导航 3-列表?页:内容列表 详情?页:内容详情 1-全局导航 2-列表?页:局部导航 详情?页:主?人信息 3-列表?页:内容列表 详情?页:内容详情 3-列表?页:内容列表 详情?页:内容详情 4-关联导航 4-关联导航 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 3.1 确定布局模式 模块尽量挤压 模块向下换行 模块切换 布局不变 抽屉式隐藏 模块尽量挤压 模块向下换行 模块切换 布局不变 抽屉式隐藏 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 3.2 制定栅格系统 固定栅格 流体栅格 任意宽度 制定栅格系统 step1.选择栅格列数 8列/10列/12列/16列/24列... 制定栅格系统 step2.确定临界点 以内容为依据确定临界点,主流设备宽度作为参考 制定栅格系统 step2.确定临界点 以内容为依据确定临界点,主流设备宽度作为参考 制定栅格系统 step2.确定临界点 以内容为依据确定临界点,主流设备宽度作为参考 制定栅格系统 step3. 绘制基础栅格 根据临界点确定栅格尺寸 70px 30px d=1170px 65px 15px d=1000px 50px 15px d=750px 制定栅格系统 step4. 根据像素尺寸,计算百分比 页面宽度d,模块宽度c, c÷d=模块百分比宽度 70px 23.07692307% c=270px 30px d=1170px 22.5% c=225px 15px 65px d=1000px 24% c=180px 15px 50px d=750px 制定栅格系统 另?一种算法:固定百分?比 栅格百分?比始终保持不变,d*n%=c 39.04% c=242.048px 39.04% c=128.832px 18.72% 1.6% 18.72% 1.6% 18.72% 1.6% 18.72% 1.6% 18.72% 18.72% 1.6% d=620px d=330px http://www.responsivegridsystem.com/ http://www.responsivegridsystem.com/ http://foundation.zurb.com/grid.php 4 模块设计 交互:PC端交互原型 视觉:风格拼贴稿 前端:组件代码 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 优先完成PC模块细节设计,充分暴露业务逻辑的复杂性 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 风格拼贴稿 5 响应式模块设计 交互:各临界状态交互原型 视觉:各临界状态视觉稿 前端:响应式页面代码 开发:服务端响应式策略 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 根据栅格定义的临界点,完成各临界状态的细节设计 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 弹性图片 ★ 图?片等?比缩放 优势:基本弹性模式,实现简单,应?用??广泛 场景:图?片作为内容 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 弹性图片 ★ 图?片尺?寸不变,裁剪画布 优势:不改变图?片尺?寸 场景:图?片?无重点元素,可随意裁剪时 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 弹性图片 ★ 图?片等?比缩放,裁剪画布 优势:裁剪图?片次要部分,保留重点部分 场景:需要突出图?片重点元素时 http://www.vogue.co.uk/ 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 组件:移动优先 x 浮层 推层 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 - 推层 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 - 推层 6 测试&优化 1.内容策略 2.移动框架 3.响应式框架 4.模块设计 5.响应式模块设计 6.测试&优化 真实设备下测试,小组讨论,优化修改,交付开发环节 触控区域:?至少44*44pt 触屏选择:user-select选区范围 可?用性 ?页?面缩放:禁?用?页?面缩放 悬停状态:避免将内容隐藏,?鼠标悬停后展现 字体单位:建议rem 对?比度:考虑?白天在阳光下,晚上在被窝?里 可访问性 可读性:?小屏幕不等于?小样式,考虑?大号字体 ?页?面?大?小:避免?文件膨胀 设备特性 :触屏、感应器、摄像头、?麦克?风 服务端响应式 功能检测 Modernizr UA检测 WURFL 解决移动端性能问题 发挥移动设备特性 响应式设计利器 http://lab.maltewassermann.com/viewport-resizer/ 响应式设计利器 http://gridpak.com/ 响应式设计利器 http://www.justinmind.com/ http://www.wejustinmind.com/ 10分钟后回来... 练习:试试把微博变成响应式 ★ ★ ★ 跨屏式交互变?革 跨屏式交互模式 跨屏式创新实践 用户跨屏行为 如果说内容为王,跨屏就是皇后 — Google 跨屏式交互变革 过去... 跨屏式交互变革 通信技术 Wifi/3G Cloud Airplay/DLNA NFC 感应技术 距离 重力 陀螺仪 摄像头 GPS 温度 压力 湿度 光线 声音 跨屏式交互变革 跨屏式交互变革 跨屏式交互模式 连贯模式 同步模式 互补模式 http://www.chrome.com/racer 推送模式 控制模式 http://chrome.com/maze/ http://www.chrome.com/supersyncsports/ 谢谢
+申请认证

文档贡献者

国际体验设计协会(IXDC)

广东省善易交互设计研究院

0 0 0.0
文档数 浏览总量 总评分

喜欢此文档的还喜欢