淘寶總監教你打造一份用得上的設計規範

如何制作出一份對設計師、産品經理、程序員都有價值的設計規範?今天奇維(手淘設計總監)用淘寶2015的規範優化實戰案例,結合之前在騰訊CDC經曆過的雅虎、QQ、金蝶等設計規範,給同學們聊聊他所理解的規範,以及如何完成一套産品性質的規範,全文高能幹貨,收!

奇維(手淘客戶端設計總監):別人常問我的花名是什麽意思,是否期望具備奇特思維?然而並沒有,那是前公司昵稱的音譯,以感恩及懷念志同道合的逗逼們一起成長的日子。別人也常問kiwi是什麽意思,是否期望像kiwi鳥一樣沒有條件創造條件具備前行飛翔永不停歇的精神?然而並沒有,誠懇的星座實事求是的告知那只是猕猴桃的翻譯。

(注:下個月會有奇維總監的訪談,透露一下,他曾是N版手機QQ的主設計師,現爲手淘設計總監,還是顔值王唷)

想象和現實總是如此生分。在界面的設計規範身上也同樣適用。

界面的設計規範是爲了促成産品體驗以自身爲主體的統一和延續,減少用戶的認知成本。項目人員避免個體的重複思考,減少不必要的溝通。

問題是對于制定者而言,日常項目之外還有規範可以産出,職級晉升時撐撐場面,也可算作設計價值的一部分。

對于使用者而言,查閱麻煩,內容更新不透明。日常使用時規範不嚴謹。迫于大佬的淫威不敢多言抑或信于大神的權威照單全收,執行和推動受到具體業務情況的質疑,導致進展不順暢。

對間接受到影響的産品經理和其他人員,規範不嚴謹總在限制偉大産品的光芒萬丈或實現的成本,負面情緒甚重。漸漸的,部分設計師對于規範會有一種我最愛的人傷我有多深的迷茫 。

坦白說設計在流程中的環節導致地位相對被動。如果提升設計價值單純只依靠尋求另外方式而忽視解決眼下的實際問題,不能不被看作是一種逃避。回到設計規範,需要解決上述問題,促使各方能了解規範背後的産生原因和用意,基于規範爲前提形成項目設計中靈活思辨的動能。

今天就來講講我所理解的界面設計規範,以及根據這套原則如何呈現手機淘寶(壽桃)的設計規範。

我所經曆的規範

06年得益于團隊之間的交流,機緣巧合跪拜了大雅虎的設計規範,分別是閃著光輝的英、韓、繁、簡四版。恰逢工作中完成QQmobile需要交接,同時參與QQ內部版本的研發,作爲一個向往成熟但還沒熟透的設計團隊是必須要有規範的。玩不起大的,針對單一的産品還是很有必要。

在參照Windows自身規範,以及標叔甩出的金蝶規範,外加加了密的MTK系統規範,可以說有了公司第一份針對産品的設計規範《Hummer界面視覺設計規範》,結合交互組的規範,成了公司後續其他産品設計規範的範本。

關于標叔,那就是另外一個傳奇了:《騰訊CDC標叔力作!聊聊我與交互設計的那10年》

07年規範從無到有令人歡喜,解決日常設計中的常規問題,使內容更加貼合業務。比如根據使用強度和頻率對內容結構進行調整,以及統一參數和描述。但也暴露浏覽體驗不太高效,更新後信息同步並不及時。因此嘗試將所有內容搬到線上來,滿足不同浏覽訴求。還將內容打印出來彰顯具體的工作量。

09年至今在整體規範基礎上,針對各功能模塊所産生的細節規範應運而生,規範越來越精細。對于工具産品的設計師來說避免了機械問題重複發生,同時團隊不用再將缜密思索的寶貴時間浪費在重複性的功能設計上。但無論工具産品還是內容産品,在考慮規範時大都只考慮控組件本身的情況,所以規範的設定一者和業務沒有多大聯系,二者不能匹配業務訴求在合理範疇內的多樣性,何況內容性産品本身由控組件構成的頁面比重在産品的叠代過程中會變的越來越少。

這就是我們遇到的設計與業務的矛盾。包括自己的切身感受,且從不同的渠道和不同的團隊中發現這個問題一直存在。此時産品流程裏面的其他角色對于規範本身有無的訴求已經不是首要了。也因爲這個矛盾使業務的內容呈現受到限制,而團隊內的設計師夾在業務和規範之間執行起來很累,長此以往開始質疑規範本身。

我理解的規範概念

這次在開始設計手淘2015整體優化時,試圖把過往的設想和辦法在項目中嘗試一遍,找到設定合理規範的解決方式。我想爲了解決這個矛盾首先要厘清主要幾個核心:

1. 設定規範爲了解決什麽問題?

規範的目的都是一致的,細分之下會略有側重。設定之前首先要判斷規範是屬于系統性質和還是産品性質。這關系到使用的時間和能力的成本。

IOS和Android就是系統性質的規範,包括微信錢包界面、支付寶錢包的首頁的入口以及裏面的內容都屬于這個範疇,所以他們的入口形式異曲同工。作爲系統是開放的,爲了確保系統本身和在此生存的産品保持面對單一用戶時的完整,他一定期望系統中的産品都符合他的設計體系,而單純的規範沒法控制將來系統中應用的品牌和形態,所以試圖用設計語言的方式來引導,將界面的組成內容拆分成不帶情感嵌入的控組件方式。盡可能地促成未來系統中的産品能有延續的使用習慣和一致的用戶體驗。單一産品的設計師從使用者的角度願意去依照系統規範的目的也是爲了融入系統的環境,從而使産品在體驗上更順手更友好。

而諸如手機淘寶就屬于産品性質的規範。單一産品基本上都有一個完整的設計團隊和關聯的設計團隊在負責。産品特性以及品牌和內容都是已知且可控。這是確保産品性質的規範能否有序執行的根本。只要滿足在合理範疇內匹配業務訴求的多樣性。規範就不需要對界面呈現進行引導和建議。那麽産品性質的規範除了滿足産品的業務需求,增強設計的體驗一致,更重要的是有了團隊因素從而使整個團隊在完成單一産品時減少問題的重複發生,提升團隊的工作效率。

2. 它主要滿足哪些角色的訴求?

設計團隊對單一産品裏的內容是否可控決定該選擇使用系統性質的規範還是産品性質的規範。系統性質的規範有現成的參照。今天側重描述産品性質的規範。其實我們工作中受限産品類型,大量接觸的也都是産品性質的規範。

常規概念裏,規範在産品版本不斷叠代的階段中完善,在這個階段中需要同時滿足以下角色的訴求:産品經理、技術人員和設計師。大而全的內容針對的人群很多,看似事半功倍其實非常不可取,勢必造成規範文本的可讀性差,技術和設計等不同角色對于內容定義的標准不一致也會造成參照數值交叉錯誤。對于産品經理來說,規範是匹配不同産品經理之間對于同一模塊的理解,說明業務的背景和原理,而不是嚴格意義上的執行。而對技術人員可以用統一的控組件庫來調用,那麽日常工作也就基本擺脫對規範的訴求。

所以實際上産品性質的規範主要還是不同項目和不同階段的設計師來使用和執行。

3. 如何來呈現規範的最終樣式?

沒有意識區分系統性質的規範和産品性質的規範,導致我們在整理産品性質的規範時參照的範例卻是系統性質的規範,確實我們所能找到的範例也只有他們。所以將規範內容拆分成控組件,導致設計師在面對各自的業務時依舊需要花費精力去思考如何組合這些內容。很依賴業務對接設計師的能力。而我認爲不同階段和能力的設計師對于規範的使用只有熟悉與否,而不應有能力的要求。

團隊內部使用的産品性質規範首要考慮的是使用效率,其次才是內容的沈澱和傳播,而我們以往更在乎內容沈澱,看重數量、傳播和影響力。恰恰忽略了最本質的作用而放棄了對這部分隱形能力的體現。

完成一套針對産品性質的規範

無線端設計因爲設備的原因橫向尺寸相對固定,uikit的形式比較容易去布置這些內容。將原先控組件的內容組合成産品中的內容模塊,最後細分最常用的業務場景。形成一份針對自身産品的完整源文件。團隊內部設計師以及需要使用的關聯團隊,對于日常業務能快速的拖動源文件裏的模塊搭建業務界面,在此基礎上去填充業務需要的界面。如對應的文字、圖片、icon等不同用的元素。而規範的制定者只需隨時更新源文件形成並同步到每一位設計師。

目前實踐效果來看uikit的形式能快速的覆蓋到産品的每個業務。設計師逐漸熟悉這種方式後節省不少時間,釋放的時間能投入到如何更好的理解業務概念從而選擇或者增加最爲合適的業務模塊。最後提供整體規範下的細節規範,給到外部願意使用的關聯團隊。如手機淘寶裏的外部接入市場的設計。縮小了內容範圍規範可以變的更加的豐富。但同樣使用uikit的源文件形式。

當然uikit的形式不是産品性質規範的全部,整體內容的沈澱同樣需要。設計師應對不同需求會有不同的界面反饋,這些內容決定了設計的結果是動態的。所以需要了解靜態內容模塊的源文件在真實業務場景裏的變化規則。

壽桃(手機淘寶)設計規範

壽桃設計規範同樣由語言、素材庫、指南構成。

設計語言概括了自然、有序、無痕三個關鍵詞,手淘2015整體優化設計在先前的文章已經有了詳細的描述。這裏只對關鍵詞做簡單的釋義。

自然:針對産品設計體驗。我把他理解成産品和用戶之間默認的普世價值。堅信界面設計的一切都是在模擬自然屆的真實存在。具象的視覺效果無論是擬物還是扁平,不變的是界面都是自然界一切物理規則下的視覺效果。

有序:針對業務內容特性。我把他定義成業務與業務之間設定的樣式標准。無線界面相對pc界面的優勢是橫向尺寸的相對固定,如單一産品中不同業務的內容版式都能遵循一致的連續原則,界面的複雜程度不會因爲內容組合而成比例的上升。

無痕:針對團隊協作效率。我把他期待成設計與技術之間建立的匹配要求。在業務模塊的設計中去掉一切無需出現的修飾元素,呈現界面的必要信息,盡可能的做到效果的無情感。逐步將這些內容轉變成代碼後互相的組合就能無縫對接。

設計語言和系統性質的規範最大的區別就是內容和原理更加貼近産品,可以明確的給出執行內容,而不需要用語言概念來引導和建議。

素材庫由界面中的內容模塊構成,如商品單圖、商品雙圖、商品信息流等。手淘重新設計時各個模塊都重新進行分類和歸納,按照使用的緯度來劃分。並且隨著模塊多樣性的補充將單一素材庫拓展出基礎産品素材庫、接入素材庫和模塊素材庫。基礎産品素材庫針對手淘裏常用的視覺元素。接入素材庫針對手淘中其他團隊接入的業務,此類業務在手淘中是獨立功能,因此以基礎産品素材庫爲基礎擴展更多符合此模塊的精細化內容。産品模塊素材庫針比較完整且通用不同業務的內容模塊,比如商品評價、信息評價、信息詳情。

這是産品性質的規範需要補充的組成部分。設計師的日常需求就是在素材庫的基礎上直接使用,選擇符合需求的內容,補充符合此業務的真實信息。甚至交互設計師可以在此基礎上直接輸出視覺設計。

指南是對元素如何組合呈現的原理描述進行沈澱。讓設計師在有需要時了解規範設定的原理。比如顔色、文字、熱區、圖文版式,及控組件如何使用。

這個步驟的內容在版本的叠代中和問題發現中不斷的完善。他和系統性質的規範沒有本質區別,只是相對于系統性質的規範不需要考慮各種可能性,內容會更加聚焦自身産品。所展示的案例也可以完全使用産品裏的真實場景,便于更好的理解産生的原因。

結尾:

規範是給願意使用的人使用。否則遇到問題就真的成了不解的問題。

規範不是萬能的,他是通過解決問題來提升設計的體驗和審美,而不是單純提升體驗和審美。

規範不是一成不變,需要制定者和使用者根據産品的叠代情況與時俱進。

設定者在推進時不能被規範綁架,設定和需求內容沖突時,對于用戶的自然體驗是違背的。

 
手把手教你包裝一份高大上的設計稿
手把手教你包裝一份高大上的設計稿
接了一個200萬的單,最後給甲方幾張PNG?當然不行,學會包裝設計稿是一個設計師最基礎的技能,讓甲方看懂你的設計,體驗你的用心,才不會無休止地改改改,過稿率也能迅速提高。今天@庫倪Qoli 做了一份詳盡的教程,從...查看完整版>>手把手教你包裝一份高大上的設計稿
 
淘寶經驗:教你15天打造月銷過萬爆款的秘訣
淘寶經驗:教你15天打造月銷過萬爆款的秘訣
任誰都想爲店鋪打造出爆款,但打造爆款談何容易,不僅需要金錢砸各種引流工具,而且還得有一套秘訣才行,在時間上也是越快打造出爆款越好,下面就來分享一下15天打造月銷過萬爆款的秘籍1. 圈人做一份店鋪海報,經過好...查看完整版>>淘寶經驗:教你15天打造月銷過萬爆款的秘訣
 
淘寶經驗:教你如何設計一個牛逼的詳情頁
淘寶經驗:教你如何設計一個牛逼的詳情頁
淘寶經驗1:文案一個成熟的大店,他們的文案以及産品體驗系統已經做到了非常優秀的地步,而你要做的事情僅僅是站在巨人的肩膀上來學習他們的文案系統。舉個例子:1丶水仙電風扇拆分文案:水仙電風扇、品質源于背後的力...查看完整版>>淘寶經驗:教你如何設計一個牛逼的詳情頁
 
教你打造靠譜的設計團隊
教你打造靠譜的設計團隊
做設計和撸LOL一樣,獨自Solo固然自由,但是團隊作案才是王道呀!今天這篇文章來自InVision負責用戶體驗的高級副總裁Ben Jordan,爲我們分享了他組建設計團隊的經驗。也許你現在只是一名普通設計師,萬一你升級做主管...查看完整版>>教你打造靠譜的設計團隊
 
長篇論道-電商設計之路-第二篇:教你打造完美首頁!(原創)
長篇論道-電商設計之路-第二篇:教你打造完美首頁!(原創)
如果你支持慕歌繼續創作,請輕輕的點下方的大拇指給予慕歌最大的支持...查看完整版>>長篇論道-電商設計之路-第二篇:教你打造完美首頁!(原創)