專業、快速、便捷-微博互動規範的成長

來源:互聯網
上載者:User

  微博的設計師們都知道有一種能夠協助快速搭建原型的內部工具,我們親切的稱之為“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是一個工具,但我們僅提供現成的組件是不夠的,設計師們在使用組件的過程中也有需要瞭解這個組件應用的上下文,有些詳細的互動規則也不是組件本身能夠解說的;再則,一個個有著實用價值的組件,不能僅是供少部分人來使用,它們也需要封裝和推廣不是?能讓更多的內部人員甚至外部合作方都能知道WDL、用到WDL,才是我們製作組件期望發揮最大價值的地方。於是我們有了WDL線上手冊,一個展示組件、查閱功能描述、講解互動規則、使用介紹、為組件包提供線上下載的地方。

  第五步:自訂群組件包。將製作完成的組件通過Axure的自訂群組件功能,按類別產生組件包,可匯出存放於本地或網路,使用者可以下載這些組件包,再存放到Axure自訂群組件庫中,使用就方便了。

  製作工具

  前面多次提到Axure,在整個規範製作的過程中,Axure確實功不可沒,感謝有這樣好的一款設計工具,讓原型的設計工作能夠事半功倍。

  圖(三) Axure工作介面

  簡單介紹一下規範製作過程中Axure發揮的幾項關鍵作用:

  互動功能:Axure是動態原型製作的能手,基本的頁面間跳轉、連結動作、下拉式功能表、彈層、表單輸入均能實現,還能利用變數製作簡單的資料傳遞,添加邏輯條件等。

  線上產生Html:不用編程就能線上示範原型,一鍵產生Html,讓設計交流更直接更方便。這也是WDL線上手冊得以實現的原因。

  自訂群組件:自訂群組件功能方便了Axure使用者之間的資源共用,一些好的組件素材網上都能下到,不用複製粘貼,直接利用Axure自訂群組件的匯入匯出功能就能直接應用到自己的原型中,就像我們用到的WDL組件包一樣,極為方便。

  多人協作:一些大型的項目需要多人蔘與共同完成同一原型的不同部分的製作,Axure特地為這樣的項目開發了多人協作模式。可能多數小型項目很少碰到這種情況,但對於WDL這個龐大的組件規範庫來說,有這個功能真是太貼心不過了,我們現在的規範製作小組採用的合作模式就是基於這一功能實現的。

  現在Axure的應用和推廣已經如火如荼,國內有專業的Axure培訓組織@WebPPD ,已經精熟了Axure的提示。那些還在使用PS、Viso、甚至是PPT製作原型的同仁們,還在等什麼。

  達成目標

  雖說Axure厲害,但不過是原型工具,總不能產生真實的線上產品。YAHOO的YUI最終是以真實的產品形式呈現的,並且加強了組件的視覺封裝,還提供js代碼,是集合設計與開發為一體的規範庫。我們目前實現了原型組件的製作,也完成了部分視覺零件的封裝,但代碼這一塊還是空缺的,有時間有資源的情況下,我們也可以嘗試著填補這個空白,算是想要達成的一個目標吧。

  擴充壯大

  按照製作思路,去年2月份,我們上線了第一版以主站組件為內容的規範庫。在設計團隊及產品團隊中反響都挺不錯,在與外部合作方的洽談中也發揮了作用。

  但這僅僅是開始,3、4月份,隨著主站的改版漸趨成型,整個微博產品線的各項產品升級也拉開了序幕。WDL也應緊跟著形式,開始第二波步伐,除了主站,還納入了更多產品規範,擴充計劃開始了。

  11年7月份,微群、案頭用戶端、開放平台、搜尋、活動、投票加入了規範製作的序列,自此,我們有了規範製作小組,WDL成為了一個多成員的家庭。

  11年10月份,微群組件庫成功上線,感謝是如 ,evil—eric 同學細緻入微的工作;

  11年11月份,由zway 同學負責的案頭用戶端組件庫也正式對內發布;同時,主站組件庫正式更名為“微博公用組件庫”服務於所有微博產品;

  目前即將完成的,還有ss-Susu ,喻莉英 負責的開放平台的組件庫,曳尾魚 負責的搜尋組件庫 ;

  活動和投票組件庫正在籌備中,分別由薔薇島 和青青小懶 同學負責;

  最近,我們又加入了新成員,WEB IM的組件規範,由我們的小帥秦川albert 同學負責;

  感謝以上為WDL做出貢獻的同學們!

  相信關於WDL的一切不會結束,他會隨著微博產品的發展一直走下去,不斷壯大,不斷納入新成員,不斷為更多人服務。相信,即使有一天,微博的使命終將結束,但新的繼承者也不會摒棄WDL的應用價值,WDL模式是可複用於任何互連網產品的。

  是的,一切仍在路上。

  最後,附上WDL組件庫的一些截圖,供大家參考:

  點擊查看大圖

  點擊查看大圖

  點擊查看大圖

  點擊查看大圖

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。