微博的設(shè)計(jì)師們都知道有一種能夠幫助快速搭建原型的內(nèi)部工具，我們親切的稱之為“WDL”，是微博設(shè)計(jì)規(guī)范庫英文名稱 ” Weibo Design Library” 的頭字母縮寫。至2011年2月28日WDL正式發(fā)布內(nèi)部版本、開放瀏覽之際，我們的設(shè)計(jì)師，還有產(chǎn)品經(jīng)理們一直在使用著它，并且積極的關(guān)注和支持著 WDL的每一次組件更新和版本升級。
我們對WDL的官方定義是：
“WDL是微博設(shè)計(jì)規(guī)范庫，用于微博交互行為的演示，和規(guī)范界面原型設(shè)計(jì)。這是一個(gè)由Axure RP搭建的在線手冊，供在線瀏覽查閱。同時(shí)還提供了“微博組件工具箱”，能讓產(chǎn)品人員和交互設(shè)計(jì)師們避免重復(fù)勞動(dòng)，更加高效、統(tǒng)一、便捷地搭建起專業(yè)的產(chǎn)品原型。”
“WDL涵蓋多個(gè)產(chǎn)品組件規(guī)范，包括微博公共組件庫、微群組件庫、客戶端組件庫、社區(qū)活動(dòng)及投票組件庫、搜索組件庫以及開放平臺組件庫，隨著微博平臺產(chǎn)品線的擴(kuò)張，日后還將繼續(xù)擴(kuò)展。”
圖(一) WDL在線手冊
今日，向大家揭秘一下WDL歷經(jīng)一年多來的一個(gè)成長歷程：
背景時(shí)機(jī)
2011年剛過去，記得是在10年10月份的時(shí)候，微博的一次大的改版計(jì)劃提上日程，
當(dāng)時(shí)許多的微博產(chǎn)品線都將改版，并且還會(huì)增加許多新的社交應(yīng)用類產(chǎn)品。要將如此多的各樣產(chǎn)品緊密團(tuán)結(jié)在以微博主站為核心的平臺周圍，要向外界輸出一個(gè)一致的、統(tǒng)一的微博產(chǎn)品形象。如何建立一套統(tǒng)一的既定的設(shè)計(jì)規(guī)則，讓各產(chǎn)品線的設(shè)計(jì)師們統(tǒng)一遵循而非各自行動(dòng);又如何能在有限的任務(wù)時(shí)間內(nèi)，提高原型的設(shè)計(jì)效率，保證設(shè)計(jì)質(zhì)量，這些都是交互設(shè)計(jì)所面臨的重大挑戰(zhàn)。
前者自然讓人想到了要建立一套規(guī)范體系，但什么樣的規(guī)范形式能夠幫助設(shè)計(jì)師最高效的完成設(shè)計(jì)工作呢，期間，我們參照了大量國內(nèi)外的規(guī)范設(shè)計(jì)案例，其中YAHOO的YUI給了我們很多啟發(fā)：將生硬的文字規(guī)范變成一個(gè)個(gè)可見可得可操作的交互組件，讓設(shè)計(jì)師們直接使用，并能根據(jù)應(yīng)用場景進(jìn)行補(bǔ)充修改。一個(gè)可行的方案擬定了，接下來我們要具體梳理出制作思路。
制作思路
總體的想法是：將一些常用的，各產(chǎn)品通用的功能模塊制作成高保真的交互組件，設(shè)計(jì)師可以直接利用這些組件搭建基礎(chǔ)的界面原型，再在此基礎(chǔ)上進(jìn)行新功能的添加或已有交互動(dòng)作的修改，省去了許多制作基本元素的體力活，設(shè)計(jì)師可將更多精力集中在信息架構(gòu)與交互邏輯的思考上。
由于微博產(chǎn)品線眾多，WDL的第一版，我們選取微博主站為制作對象，因?yàn)檫@里面包含了最多最基礎(chǔ)的組件，是其他產(chǎn)品的衍生地。
圖(二) 微博組件庫制作思路
具體步驟：
第一步：頁面走查。走查主站所有頁面包含的功能模塊，統(tǒng)計(jì)出可能的相關(guān)組件。可以作為組件的評判標(biāo)準(zhǔn)是：獨(dú)立的、可復(fù)用的功能模塊。如一條Feed(包括關(guān)注人頭像、昵稱、文字內(nèi)容、原文或圖片或視頻或音樂、轉(zhuǎn)發(fā)/收藏/評論操作)可以作為組件，因?yàn)樗鼤?huì)在其他產(chǎn)品或同一產(chǎn)品中被多次使用;如Feed流中的轉(zhuǎn)發(fā)/收藏/評論操作就不適合作為組件，因?yàn)樗鼈兪且栏接谡麠lFeed而存在的，不獨(dú)立。
第二步：組件分類。找出這么多的組件，如何讓使用者需要時(shí)能夠方便快速的找到其中的某一個(gè)，我們對組件進(jìn)行了詳細(xì)的歸類。以公共組件庫分類為例，包括了框架布局、導(dǎo)航、標(biāo)簽及頁碼、對話框、列表、消息流、發(fā)布器、表單元素等11類基本組件，公共組件可供所有產(chǎn)品設(shè)計(jì)統(tǒng)一參考，此外，各產(chǎn)品線可根據(jù)各自產(chǎn)品特點(diǎn)制作相應(yīng)的特殊組件分類，將公共庫與各自的組件庫結(jié)合使用，就可以快速搭建各自的產(chǎn)品頁面了。
第三步：組件制作。最核心最耗時(shí)的工作就在這一步。每個(gè)組件我們都要確認(rèn)其現(xiàn)有的產(chǎn)品及交互邏輯是否準(zhǔn)確，因?yàn)樵谛掳嫖⒉┲锌赡軙?huì)根據(jù)某些新的功能需求對其進(jìn)行修改;我們要按照真實(shí)的任務(wù)流程對其進(jìn)行交互動(dòng)作的制作，力爭做到完全的高保真，提高設(shè)計(jì)的傳達(dá)效率，這點(diǎn)上Axure還是很給力的，除了關(guān)于數(shù)據(jù)的模擬比較困難外，一般的線上交互都能完美展示。關(guān)于Axure在組件制作中的應(yīng)用我們在制作工具中還會(huì)提到。
目前已經(jīng)制作完成的組件包有： 公共庫組件包，微群組件包，桌面客戶端組件包
第四步：在線手冊。雖說WDL是一個(gè)工具，但我們僅提供現(xiàn)成的組件是不夠的，設(shè)計(jì)師們在使用組件的過程中也有需要了解這個(gè)組件應(yīng)用的上下文，有些詳細(xì)的交互規(guī)則也不是組件本身能夠解說的;再則，一個(gè)個(gè)有著實(shí)用價(jià)值的組件，不能僅是供少部分人來使用，它們也需要包裝和推廣不是?能讓更多的內(nèi)部人員甚至外部合作方都能知道WDL、用到WDL，才是我們制作組件期望發(fā)揮最大價(jià)值的地方。于是我們有了WDL在線手冊，一個(gè)展示組件、查閱功能描述、講解交互規(guī)則、使用介紹、為組件包提供在線下載的地方。
第五步：自定義組件包。將制作完成的組件通過Axure的自定義組件功能，按類別生成組件包，可導(dǎo)出存放于本地或網(wǎng)絡(luò)，使用者可以下載這些組件包，再存放到Axure自定義組件庫中，使用就方便了。
制作工具
前面多次提到Axure，在整個(gè)規(guī)范制作的過程中，Axure確實(shí)功不可沒，感謝有這樣好的一款設(shè)計(jì)工具，讓原型的設(shè)計(jì)工作能夠事半功倍。
圖(三) Axure工作界面
簡單介紹一下規(guī)范制作過程中Axure發(fā)揮的幾項(xiàng)關(guān)鍵作用：
交互功能：Axure是動(dòng)態(tài)原型制作的能手，基本的頁面間跳轉(zhuǎn)、鏈接動(dòng)作、下拉菜單、彈層、表單輸入均能實(shí)現(xiàn)，還能利用變量制作簡單的數(shù)據(jù)傳遞，添加邏輯條件等。
在線生成Html：不用編程就能在線演示原型，一鍵生成Html，讓設(shè)計(jì)交流更直接更方便。這也是WDL在線手冊得以實(shí)現(xiàn)的原因。
自定義組件：自定義組件功能方便了Axure使用者之間的資源共享，一些好的組件素材網(wǎng)上都能下到，不用復(fù)制粘貼，直接利用Axure自定義組件的導(dǎo)入導(dǎo)出功能就能直接應(yīng)用到自己的原型中，就像我們用到的WDL組件包一樣，極為方便。
多人協(xié)作：一些大型的項(xiàng)目需要多人參與共同完成同一原型的不同部分的制作，Axure特地為這樣的項(xiàng)目開發(fā)了多人協(xié)作模式。可能多數(shù)小型項(xiàng)目很少碰到這種情況，但對于WDL這個(gè)龐大的組件規(guī)范庫來說，有這個(gè)功能真是太貼心不過了，我們現(xiàn)在的規(guī)范制作小組采用的合作模式就是基于這一功能實(shí)現(xiàn)的。
現(xiàn)在Axure的應(yīng)用和推廣已經(jīng)如火如荼，國內(nèi)有專業(yè)的Axure培訓(xùn)組織@WebPPD ，已經(jīng)精熟了Axure的使用技巧。那些還在使用PS、Viso、甚至是PPT制作原型的同仁們，還在等什么。
達(dá)成目標(biāo)
雖說Axure厲害，但不過是原型工具，總不能生成真實(shí)的線上產(chǎn)品。YAHOO的YUI最終是以真實(shí)的產(chǎn)品形式呈現(xiàn)的，并且加強(qiáng)了組件的視覺封裝，還提供js代碼，是集合設(shè)計(jì)與開發(fā)為一體的規(guī)范庫。我們目前實(shí)現(xiàn)了原型組件的制作，也完成了部分視覺零件的封裝，但代碼這一塊還是空缺的，有時(shí)間有資源的情況下，我們也可以嘗試著填補(bǔ)這個(gè)空白，算是想要達(dá)成的一個(gè)目標(biāo)吧。
擴(kuò)展壯大
按照制作思路，去年2月份，我們上線了第一版以主站組件為內(nèi)容的規(guī)范庫。在設(shè)計(jì)團(tuán)隊(duì)及產(chǎn)品團(tuán)隊(duì)中反響都挺不錯(cuò)，在與外部合作方的洽談中也發(fā)揮了作用。
但這僅僅是開始，3、4月份，隨著主站的改版漸趨成型，整個(gè)微博產(chǎn)品線的各項(xiàng)產(chǎn)品升級也拉開了序幕。WDL也應(yīng)緊跟著形式，開始第二波步伐，除了主站，還納入了更多產(chǎn)品規(guī)范，擴(kuò)展計(jì)劃開始了。
11年7月份，微群、桌面客戶端、開放平臺、搜索、活動(dòng)、投票加入了規(guī)范制作的序列，自此，我們有了規(guī)范制作小組，WDL成為了一個(gè)多成員的家庭。
11年10月份，微群組件庫成功上線，感謝是如 ，evil—eric 同學(xué)細(xì)致入微的工作;
11年11月份，由zway 同學(xué)負(fù)責(zé)的桌面客戶端組件庫也正式對內(nèi)發(fā)布;同時(shí)，主站組件庫正式更名為“微博公共組件庫”服務(wù)于所有微博產(chǎn)品;
目前即將完成的，還有ss-Susu ，喻莉英 負(fù)責(zé)的開放平臺的組件庫，曳尾魚 負(fù)責(zé)的搜索組件庫 ;
活動(dòng)和投票組件庫正在籌備中，分別由薔薇島 和青青小懶 同學(xué)負(fù)責(zé);
最近，我們又加入了新成員，WEB IM的組件規(guī)范，由我們的小帥秦川albert 同學(xué)負(fù)責(zé);
感謝以上為WDL做出貢獻(xiàn)的同學(xué)們!
相信關(guān)于WDL的一切不會(huì)結(jié)束，他會(huì)隨著微博產(chǎn)品的發(fā)展一直走下去，不斷壯大，不斷納入新成員，不斷為更多人服務(wù)。相信，即使有一天，微博的使命終將結(jié)束，但新的繼承者也不會(huì)摒棄WDL的應(yīng)用價(jià)值，WDL模式是可復(fù)用于任何互聯(lián)網(wǎng)產(chǎn)品的。
是的，一切仍在路上。
最后，附上WDL組件庫的一些截圖，供大家參考：
點(diǎn)擊查看大圖
點(diǎn)擊查看大圖
點(diǎn)擊查看大圖
點(diǎn)擊查看大圖