专业、快速、便捷-微博交互规范成长.pdf

专业、快速、便捷-微博交互规范的成 长 微博的设计师们都知道有一种能够帮助快速搭建原型的内部工具，我们亲切的 称之为“WDL”，是微博设计规范库英文名称 ” Weibo Design Library” 的 头字母缩写。至2011 年2 月28 日WDL 正式发布内部版本、开放浏览之际，我 们的设计师，还有产品经理们一直在使用着它，并且积极的关注和支持着WDL 的每一次组件更新和版本升级。 我们对WDL 的官方定义是： “WDL 是微博设计规范库，用于微博交互行为的演示，和规范界面原型设计。 这是一个由Axure RP 搭建的在线手册，供在线浏览查阅。同时还提供了“微博 组件工具箱”，能让产品人员和交互设计师们避免重复劳动，更加高效、统 一、便捷地搭建起专业的产品原型。” “WDL 涵盖多个产品组件规范，包括微博公共组件库、微群组件库、客户端组 件库、社区活动及投票组件库、搜索组件库以及开放平台组件库，随着微博平 台产品线的扩张，日后还将继续扩展。” 图(一) WDL 在线手册 今日，向大家揭秘一下WDL 历经一年多来的一个成长历程： 背景时机 2011 年刚过去，记得是在10 年10 月份的时候，微博的一次大的改版计划提上 日程， 当时许多的微博产品线都将改版，并且还会增加许多新的社交应用类产品。要 将如此多的各样产品紧密团结在以微博主站为核心的平台周围，要向外界输出 一个一致的、统一的微博产品形象。如何建立一套统一的既定的设计规则，让 各产品线的设计师们统一遵循而非各自行动;又如何能在有限的任务时间内，提 高原型的设计效率，保证设计质量，这些都是交互设计所面临的重大挑战。 前者自然让人想到了要建立一套规范体系，但什么样的规范形式能够帮助设计 师最高效的完成设计工作呢，期间，我们参照了大量国内外的规范设计案例， 其中YAHOO 的YUI 给了我们很多启发：将生硬的文字规范变成一个个可见可得 可操作的交互组件，让设计师们直接使用，并能根据应用场景进行补充修改。 一个可行的方案拟定了，接下来我们要具体梳理出制作思路。 制作思路 总体的想法是：将一些常用的，各产品通用的功能模块制作成高保真的交互组 件，设计师可以直接利用这些组件搭建基础的界面原型，再在此基础上进行新 功能的添加或已有交互动作的修改，省去了许多制作基本元素的体力活，设计 师可将更多精力集中在信息架构与交互逻辑的思考上。 由于微博产品线众多，WDL 的第一版，我们选取微博主站为制作对象，因为这 里面包含了最多最基础的组件，是其他产品的衍生地。 图(二) 微博组件库制作思路 具体步骤： 第一步：页面走查。走查主站所有页面包含的功能模块，统计出可能的相关组 件。可以作为组件的评判标准是：独立的、可复用的功能模块。如一条 Feed(包括关注人头像、昵称、文字内容、原文或图片或视频或音乐、转发/收 藏/评论操作)可以作为组件，因为它会在其他产品或同一产品中被多次使用;如 Feed 流中的转发/收藏/评论操作就不适合作为组件，因为它们是依附于整条 Feed 而存在的，不独立。 第二步：组件分类。找出这么多的组件，如何让使用者需要时能够方便快速的 找到其中的某一个，我们对组件进行了详细的归类。以公共组件库分类为例， 包括了框架布局、导航、标签及页码、对话框、列表、消息流、发布器、表单 元素等11 类基本组件，公共组件可供所有产品设计统一参考，此外，各产品线 可根据各自产品特点制作相应的特殊组件分类，将公共库与各自的组件库结合 使用，就可以快速搭建各自的产品页面了。 第三步：组件制作。最核心最耗时的工作就在这一步。每个组件我们都要确认 其现有的产品及交互逻辑是否准确，因为在新版微博中可能会根据某些新的功 能需求对其进行修改;我们要按照真实的任务流程对其进行交互动作的制作，力 争做到完全的高保真，提高设计的传达效率，这点上Axure 还是很给力的，除 了关于数据的模拟比较困难外，一般的线上交互都能完美展示。关于Axure 在 组件制作中的应用我们在制作工具中还会提到。 目前已经制作完成的组件包有：公共库组件包，微群组件包，桌面客户端组件 包 第四步：在线手册。虽说WDL 是一个工具，但我们仅提供现成的组件是不够 的，设计师们在使用组件的过程中也有需要了解这个组件应用的上下文，有些 详细的交互规则也不是组件本身能够解说的;再则，一个个有着实用价值的组 件，不能仅是供少部分人来使