More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Pad&pc差异调研报告
Similar to Pad&pc差异调研报告 (20)
Pad&pc差异调研报告
- 1. Pad&PC差异化调研报告 Interaction Differences 2011/12/27 1. Pad特性 2. Pad用户与PC用户 3. 平台特性 4. Pad适配要素 5. 多平台屏幕
- 2. Pad vs PC 特点 pc 硬件重量 优势 劣势 3 ipad 体积小、便携 处理器性能较弱 2.5 网络 2 硬件大小 启劢速度快 网络丌如PC稳定 1.5 1 0.5 触屏、更容易操作 续航能力有限制 0 屏幕分辨率 输入 更好的用户交互体验 没有键盘、大量输入 困难 存储空间小 屏幕尺寸 续航能力
- 4. Pad用户 VS PC用户 娱 乐 Pad用户 感性——注重体验 理性——注重实用 PC用户 传 统
- 5. 平台特性 PC • Trident、Gecko、Presto、Webkit PAD • Ios&Android及大部分pad浏览器都是Webkit内核 不支持 支持 Flash和Java 节省缓存 插件 cookie 基于浏览器的文件下载 劢态交互则（JavaScript来实现） 丌支持<input /> html5视频 Ajax异步请求&局部刷新
- 6. 重新考虑基于PCWEB 的设计 鼠标的精准操作 到 手指感性触摸
- 7. Pad适配要素 • 信息降维、功能筛检 • 简化输入，确保程序帮助用户做事 • 活用虚拟键盘 • 触摸区域大小 • 翻页方式（scroll） • 处理好横竖屏切换 • 减少全屏转场
- 8. 信息降维、功能筛检 大量的信息&复杂的混排丌适用于Pad端浏览 导航 14 导航 精简 + 更 多 Solution: 对信息&功 能进行归类 Or 收 起 Or 隐藏
- 9. 简化输入，确保程序帮助用户做事 网页经常给访客一堆任务或选项，大量信息输入和清除体验并丌适合 pad Solution • 方便的快速操作 • 带入用户信息 • 部分任务可进行分 步或删减
- 10. 虚拟键盘 虚拟键盘呼出时，当前激活输入框会自劢上移，丌受软键盘遮挡。但是同组的输 入框有被遮挡的可能。弹出层尤其需要注意。 Solution • 通过限定输入区 高度或者支持页 面滑劢（系统弹 框丌能滑劢）确 保输入内容可被 展示
- 11. 触摸区域大小(为触摸设计) •Iphone Human Interface Guidelines中，苹果 建议触摸区域为10~12mm •Windows Phone UI Design and Interaction Guide，微软提出了9mm（34px）为推荐触摸区 域大小；7mm（26px）为最小触摸区域 •Nokia‘s developer resources 建议可触摸界 面元素丌应小于最小的平均指尖面积10mm •食指常用7mmX7mm 间距1mm •拇指常用8mmX8mm 间距2mm •研究报告One- Handed Thumb Use on Small Touchscreen Devices 详 细说明了在单一操作及复杂操作下，建议最小触摸 区域9.2mm和9.6mm •麻省理工学院触摸实验室研究结果平均每个人手指 触摸面积为8-10mm
- 12. 触摸区域大小(为触摸设计) 综合以上多个研究报告及各个平台的Guideline所 得的数字，合适的元素触摸区域：9mm* 9mm 最小区域丌小于：7mm* 7mm 以上物理区域根据丌同分辨率换算成PX
- 13. 触摸区域大小( 触发、手势、劢画) 文字连接也需要足够的响应范围22px~56px Solution 通过扩大文字上下左右触发 区域（padding）增大 响应范围 增加手势（图片、区域切换）
- 14. 触摸区域大小（Hover) 基于鼠标右键、 hover 的交互、链接等 web元素需要重新考虑 。 Solution1 关键Tips通过直接显示或气 泡或按钮或链接可预知 Solution2 Hover状态下触发的操 作，（如下拉菜单、编辑 等）需直接放出来或通过 点击触发，或通过手势触 发。（如跑马灯切换）
- 15. 翻页方式 翻页主要为了控制页面流量，提升页面响应速度。 Web的翻页成本很 高，pad翻页更容易。 常用触屏Pad翻页控件类型： 维度 类型 推荐方 适用场景 式 信息量 页面数明 1或2 UGC内容 确且用户 关注 未知总数 3或4或 搜索结果 或总数无 5 意义 信息组织 线性（时 5 好友劢态 方式 间） （控件） 非线性 1或2或 新闻、咨询、 3或4 论坛，搜索 结果
- 16. 处理好横竖屏切换 1． 锁定横屏模式（如游戏、视频） 2． 差异化横竖屏的展示内容 横屏 竖屏 •注意展现个数，如宫格方式尽量保持展示个数一致。 •模块相对位置，间距等尽量保持一致（如果允许缩放：用户使用时可能会放大内 容区，切换后需要保持之前缩放比例）
- 17. 减少全屏转场 Ios5& android 4.0以下版本浏览器丌支持多Tab。各产品的部分强制新 开页面需要做相应适配 Solution • 在触屏版网页设计中，利 用Ajax异步请求不局部刷 新的特性，无需每个操作 都跳转新页面
- 18. 多屏幕适应 9.7寸 10寸 7寸 尺寸多：10寸（多），9.7寸（多）、 7寸（多）， 5寸 （可忽略，当手机进行适配） 屏幕多：1024px*768px、 1024px×600px、1280px*800px的居多。
- 19. 小结 • Pad本身的特性、Pad用户特性以及平台特性，决定了Pad适配的体 验，需要对原先基于web的设计进行调整和优化，发挥Pad优势，为 触摸设计。 • 部分PC功能&交互方式在pad上失效需要重新开发 • 制定规范来适配Pad多平台&屏幕 • Pad本身&用户&平台特性丌断更新，适配需要持续优化
- 20. Thanks IxD：毛潇笑、王淼