Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Ähnlich wie 阿里巴巴无线端设计
Ähnlich wie 阿里巴巴无线端设计 (20)
阿里巴巴无线端设计
- 1. 阿里巴巴无线端设计 刘宸寰（为一 ） 2011-12-11
- 2. Process Position Analysis Low-fidelity Hi-fidelity Test Release Accumulation Agile
- 4. 01 Position 产品定位 项目之初，我们尝试定位出网站、app以及wap之间的关 1688.com 系，初步结论如下： (1)无线端产品迁移部分网站业务的同时需拓展无线端场 景的独有需求，eg.基于solomo的创新业务； Wap 触屏版 基础支持; (2)wap相比于app优势在于低成本的全平台覆盖和信息展 标准版 全平台覆盖; 示，定位为基础支持，是网站行为在无线场景的延续; App android SoLoMo; 网站在无线场 iOS 景的延生; (3)native app体验佳，适合做个性化推送，更易产生高 体验最优; Pad 黏度，方便我们touch到用户。同时成本体验平衡情况 无线场景 WP7/8 创新业务; 下，部分功能模块仍可考虑嵌入适合wap展示的页面。
- 5. 02 Scenarios 移动需求场景 线下移动场景强目的性操作（采购、走访） 个性化即时notification定向推送 碎片时间商情资讯弱目的性浏览 线下商务场合互动支持
- 6. 03 Dimension app产品拆解 为了更加清晰app产品方向，我们将其按照业务、信息、 互动三个维度拆解分析。 (1)基于交易的业务, 后续流程和实际场景中决策模型复杂, app对交易做基础支持以及紧急处理需求; 业务 信息 (2)信息方面, 碎片话时间弱目的性的浏览以及个性化的信 闭环支持， 碎片时间弱目的浏览 息定向推送是重点，但由网站分析可知b2b在海量上比不 基础简化 个性化定向推送 上百度, 专业度上低于行业b2b, 信息服务仍不是app的亮 点； (3) 互动类产品则主要立足于商务人脉的构建和商务信息 互动 分享展开。首先B类用户在我们的B2B网站带有B用户的身 商务人脉 份，其功利性、行业特性决定了他们关注上下游以及同行 （同行还存在战略联盟和竞争对手），商圈的划分十分明 商务信息 确。且，对于对应的关系，信息的隐私和选择性尤为重 要，后续将进一步了解其interaction model。
- 7. 04 Roles 其他纬度考虑 供应商 采购商 消费品 工业品 原材料 买、卖目的对信息关注点有显著差异。 不同行业对信息展示形式、信息要点差异大。 （如:原材料更关注产品属性, 服装行业更关注产品图片细节）
- 9. 工具平台形态 运营显性化 ＋ 05 Architecture 产品形态
- 10. 操作准确率分布： 右手拇指行为分析： 操作死角 较高 低 模糊区域 中 易操作区 高 06 Analysis 手机屏幕分析
- 11. 07 Difference 平台特性 backwards gesture dialogue menu iOS layout ... ... primary/secondary action widget notification
- 12. 08 Logic&layout 架构逻辑 (1) 众多android app开发过程中出于设计成本 考虑，将ios上的app生搬硬套(或者认为具有 通用性)，并没有发挥android的平台特性。实 际上，在我们之前做的手机屏幕分析结论 中，左上角属于用户盲点区域；且根据两个 平台app的最新眼动试验结论，ios平台app在 点击准确率、操作时间上表现劣于android的 典型应用。 (2) 手机屏幕的面积注定了它典型的“卡 片”设计思路。其Navi Bar布局对信息层级的 引导切换极其明了和清晰，这样的布局也要 求其各级操作之间的卡片切换。
- 13. 09 Gesture 富手势 基于multi-touch主流手势如右; 富手势的运用作用主要有二: (1)更natural的 shortcut (2)将一些操作隐形化, 减轻页面负 Tap DoubleTap Press Drag 担。 对手势运用一方面基于用户习惯和自然认 知上互相借鉴趋于统一, 另一方面仍有基于 不同平台的求同存异, 例: contextual action bar在android上为长按显性化，而ios则为滑 动显示，同样在删除这个单一功能上也是 Flick Pinch Spread 如此。
- 14. 10 Notification 消息通知集合 android palm banner pop-up toast dialogue win7 ios toast tile badge alert
- 15. 11 Notification 消息通知分析 interactive goal1 2 5 9 7 3 8 notification按其后续操可分为可操作和纯提醒类, 根据友好程度 (即是否打断用户现有taskflow或对干 4 扰当前任务) 分析并将android、palm、ios、win7 平 台上的notification 对应到坐标图中, 并map出具体 根据信息优先级和信息即时紧急程度的goal，结果 既一目了然了。 6 1 goal 2 friendly android: (1)toast; (2)dialogue; (3)status bar; palm: (4) banner; (5)pop-up; ios: (6)badge; (7)alert; win7: (8)tile; (9)toast;
- 17. 12 IA 信息架构 根据Position阶段的无线场景和产品拆解两个 维度交叉，即可分析得出右侧的信息架构图， 之后的版本规划、迭代更新、拓展性考虑都是 基于这个大的information architecture。 个性化推送 页面架构上，也能清晰映射出对应信息模块之 间的关系。 信息 业务 互动 强目的性 弱目的性 买卖家工具 我的名片 搜索 最新资讯 采购速配 名片夹 收藏夹 类目引导 物流查询 价格行情 交易管理 ... ... 问答百科 ... ... ... ...
- 18. 13 Constructure 版本规划 由于无线端项目迭代更新速度快，并且项目 初期版本： 架构稳定后版本： 规划的分期开发不是一蹴而就的，这就要求 我们在一开始进行页面架构方案时就同时考 虑后期拓展性和尽可能低成本地升级版本 (包括视觉、开发、培养用户习惯的成本)。 首页即集合了信息维度的弱目的性浏览和 强目的性搜索； 消息中心为个性化即时信息的定向推送 聚合，同时分流直各个功能模块； 业务维度做工具类的九宫格形态整合， 三期之后构建关系的互动为主打抓手，也 将体现在一级tab上。
- 19. 14 Details 细节深入 情境例一：使用物流查询功能 TaskFlow: input运单号 跟踪查询 +物流公司 物流状态 痛点: 物流单量大 需快速查找， 手动输入 需联络物流公司 解决方案：(1)条码扫描输入并添加至我的运单，和线 上订单打通，即时推送状态变更 (2) 状态变更视觉highlight (3) 加入物流联络方式，可直接调用 低保真原型便于我们深入细节的讨论优化和深入，而理据主要来自于两方面：网站行为数据分析和积累下来对用户行为和 使用场景的分析，根据用户痛点的分析或数据洞见的结论，优化和深入低保真原型的细节，如上两个情境的深入考虑。
- 20. 15 Details 细节深入 情境例二：搜索list的竟比行为 数据说: 用户经常在搜索list页的中间某几页反复来 回点击查看 洞见: 需通览之后再缩小查看detail范围, 难以定位 到之前感兴趣的产品 解决方案: (1) 尊重web端行为，slide行为中模拟当前 页码的指示, 如:12/30页； (2) 增加快速scroll，方便定位； (3) contextual action中提供收藏button，便 捷收藏。 低保真原型便于我们深入细节的讨论优化和深入，而理据主要来自于两方面：网站行为数据分析和积累下来对用户行为和 使用场景的分析，根据用户痛点的分析或数据洞见的结论，优化和深入低保真原型的细节，如上两个情境的深入考虑。
- 21. ⋯⋯
- 22. Next Steps 1. 业务拓展支持以及上线功能跟踪优化； 2. 不同平台平铺后的差异化统一； 3. 建立无线端relationship/interaction model, persona，做scenario-based design； 4. 无线端设计规范持续建立和积累分享； 5. 体现品牌和专业性的产品运营；
- 23. thank U 刘宸寰（为一 ） 2011-12-11