第2章 有源設計
◎李偉巍
有源設計是讓設計有據可依，而不是讓設計者天馬行空。設計中的點、線、面、色塊、互動、動效等每個元素都凝聚着設計師的心血，每一處設計細節都有其依據。有源設計中的“源”就是指設計語言，代表設計師思考的次元，可能是産品需求、架構邏輯、資料分析、使用者回報、設計思想、習慣的力量等，這些都可以是設計語言的基礎。
2.1 設計語言的概念
語言是用來對話的，設計語言的價值展現在産品中，就是讓産品可以說話，即使用者同産品對話。設計語言會在無形中傳遞給使用者成熟的操作方式及整體形象。既然把設計語言稱為一種語言，那麼它勢必要具備語言的特點。我們把它分解為三個層級：設計理念、設計架構、設計表達，在語言中的對應關系分别如下：
（1）設計理念
設計的原則，就是語言中的文法，也是設計中的地基，比如：我們要在設計中打造一種“?自然?”理念的設計原則。
（2）設計架構
設計的元素，就是語言中的詞典，也是溝通的主要工具，比如：控件、清單、布局、導航、排列等。
（3）設計表達
設計的視覺，就是語言的溝通，也是設計展現出來的形象，比如：字型、色彩、間距、栅格、情感等。
2.2 設計語言帶來的好處
為什麼要提出設計語言的概念呢？
設計語言是設計的基礎，是為設計的想象力打好一個地基。設計語言的建立，能在設計層面建立一個全面的視角，幫助整個設計團隊遵循相同的方法和模式，確定公司平台産品設計的統一。這就是為什麼要建立設計語言的概念。
建立好設計語言有什麼好處呢？
對企業而言，可以塑造統一的品牌形象、確定産品線的體驗設計一緻、讓對外傳播的語言具有互通性。好的設計語言可以直接影響企業的生死存亡，可見其影響力有多大。
比如：無印良品最早的設計語言是提倡節約、樸素、舒适的生活，拒絕盲目的品牌崇拜，直抵生活本質。無印良品的衣物沒有标簽，不離黑、白、灰、藍等天然色系，吊牌用未漂白的本色紙片。省略一切過剩裝飾，挑戰商品的真正價值。這一與衆不同的設計語言還原了商品追求自然的本質，以一種日常、低調的姿态根植人心，關心消費者的飲食冷暖，貼近消費者呼吸的節奏，賦予了産品獨特的文化。無印良品的資深設計師深澤直人強調，物品的最高境界是追求自然，樸素、簡單，還原産品的本質，處處暗示着樸實無華的設計理念。
對設計師而言，統一的設計語言可以創造平台的一緻性、系統性，同時效率也會有所提升，還能幫助業務更進一步。從設計層面分析，具體可以帶來以下幾點好處：
- 專注：設計師更專注在項目上，不被其他細碎工作所幹擾。
- 清晰：設計師更清楚地思考設計理念，及整個形象的傳播思想。
- 一緻：設計師更系統地保持整個産品線的一緻性，給使用者傳遞一緻的體驗。
- 高效：設計師更高效了解整個産品的設計思路，減少很多不必要的溝通。
比如Android 5.0系統引用了Material Design全新設計語言，新增了Ripple類型的波紋動效，上線後就有使用者表示觸發控件後呈現出了波紋的動效，卻沒有進入下一層級互動，是不是應該算是系統的Bug？Material Design設計語言強調根據使用者行為突顯核心功能，進而為使用者提供操作指引。動畫效果（簡稱動效）可以有效地暗示、指引使用者。動效的設計要根據使用者行為而定，能夠改變整體設計的觸感。應當在獨立的場景呈現，讓物體的變化以更連續、更平滑的方式呈現給使用者，讓使用者能夠充分知曉所發生的變化。
動效應該是有意義的、合理的，動效的目的是為了吸引使用者的注意力，以及維持整個系統的連續性體驗。動效回報需細膩、清爽。轉場動效需高效、明晰。是以隻要使用者觸碰了控件，就應該予以觸碰後的回報，不能因為沒有事件就不給觸發回報，如果那樣的話，使用者根本就不知道自己到底有沒有完成觸發，可能會不斷地去觸發好多次，很影響使用者體驗。
2.3 制定設計語言需要遵循6個設計原則
有源設計在資訊化時代變得愈發重要，對設計師也提出了更高的要求，設計師的風格不盡相同，每個人都在表達自己的想法，這才使我們眼中的世界豐富多彩。但不能全靠大資料來告訴我們怎麼設計，我們應該有一套自己的設計規則，是以有的設計可以打動人心，有的卻平淡無奇。那到底怎麼做才能有自己的設計語言呢？我們總結了6個制定設計語言的設計原則。
1.遵循使用者的真實需求
任何設計都要建立在使用者的真實需求之上，我們可以通過多種方式擷取使用者需求。現在用得比較多的是線下調研、網上問卷、資料分析、場景分析等。當然不可能每次都會有機會去做調研，最直接的方式就是去了解業務，進而來了解整個産品的邏輯。不同領域間的業務邏輯是存在很多相似之處的。轉換到設計層面，即都需要先考慮到使用者的需求，然後再結合我們自身的經驗積累做權衡，這對于喜歡思考的設計師還是比較容易達成的。
我們曾經做一個産品的視覺呈現時，負責人對首頁的要求是采用全屏滾動的切換方式，理由是這樣顯得上檔次、酷炫。但從使用者需求層面考慮，産品本身就可以一頁呈現全部内容，為什麼要人為分割出很多塊來呢？這不符合我們定義産品“?輕?”的設計語言。需求方遵循我們的設計語言，最終産品上線後，通過資料統計發現，使用者都是通過管道直接進入詳情頁，直接通路首頁再進入詳情頁的流量很少，首頁存在的意義并不大。是以，設計師如果不是正确地運用設計語言來做設計，可能就要花上幾倍的工作量，卻得不到成效。
2.遵循産品的設計初衷
設計語言是圍繞産品的設計初衷制定的。産品的發展和外界的改變有時會影響我們的設計初衷，忘記最初為什麼出發。設計初衷是産品發展的主旋律，市場中不斷會有新東西出來，不能什麼火就跟風做什麼，不停地改變自己的産品需求，這樣到最後可能連自己都不知道在做什麼，更何談使用者的忠誠度呢？設計語言定義的也要遵循産品的某些特性，如果産品的方向都改變了，設計語言的使用場景也會随之變化。
比如我們之前做過一個好久沒疊代的産品，其營運資料一直穩定在一個區間。開評審會的時候，産品經理就想重新定一個方向，最終确定為資訊類型的屬性，愣是把一個工具型産品轉變成了一個資訊為導向的媒體産品，這就違背了我們設計産品的初衷。産品在特定的階段可能會摸索前行，但産品本身就有其特定的标簽屬性，定位于有需求的使用者群體，如果我們把這個方向改變了，勢必會影響到産品的各方資料。設計語言适合工具型産品的高效，不一定适用閱讀場景下的産品。
3.遵循成熟的使用者體驗習慣
體驗設計是産品設計中最最重要的一環，也已形成了一套标準的設計體系。使用者在使用各種産品的過程中，慢慢形成了一套熟悉的體驗習慣，這種習慣就是設計語言需要遵循的體驗方向。
比如，飲水機、冷熱水龍頭都是左邊為熱水，右邊為冷水，這已經是形成了國際通用标準的設計，如果某産品特立獨行改變這樣的習慣，很可能要發生燙傷類的事故。産品可以與衆不同，但調整使用者已經習慣的體驗，結果可想而知了。使用者為什麼要忍受你的改變而做出體驗上的讓步呢？我們看到齒輪圖示就知道這是設定，看到左箭頭就知道這是傳回，把這種已經形成觀念的視覺體驗改為另類一點的設計，勢必會給使用者帶來不必要的困擾。改變體驗設計不僅僅是改變使用者的習慣，還涉及使用者的學習成本。是以設計語言不是要打破使用者熟悉的習慣，而是在使用者習慣的基礎上更加高效。
4.設計語言的誤解
設計語言不是簡單學習競品的設計，将其引用到自己的産品中，還标榜這是自己的創新。我們來舉個例子說明這種了解的誤區。
比如《刀塔傳奇》出來後，遊戲的設計風格、互動體驗、遊戲政策邏輯，被各大遊戲公司争相學習。這反倒給玩家帶來了福利，玩過刀塔傳奇再去玩這些遊戲，很容易就上手了。這也使玩家培養了一套熟悉的體驗習慣，很多遊戲在抄襲這種模式，可是對玩家來說我已經在“?刀塔?”中發展得很好了，為什麼要切換到一個從零開始的類似遊戲上呢？這樣的話，抄襲的遊戲很難能異軍突起。設計語言不是一味地去借鑒，而是在産品中創新，利用好産品間的場景差異，轉變為自己在市場競争中的利器。比如《王者榮耀》就是以這樣的模式出現的，完全形成了自己的設計語言體系。
5.有選擇地接受使用者回報
設計語言的好壞也需要通過使用者回報來評判。産品基本都有使用者回報的入口，這樣可以有效地幫助使用者解決問題并改進産品中的不足。針對産品類型的不同，可以采用不同的回報形式。産品開發出的模型基本都要經曆壓力測試、場景測試、灰階測試等。一遍遍測試都是為了得到使用者的回報，各方都沒問題了才會推向市場，同時也是為了驗證設計語言的方向。
比如我們在設計搜狐門戶網站的大改版時，就采用了A/B Test來看資料回報，反複經曆了好幾輪疊代。當時99%的使用者應該都察覺不到，因為我們隻随機選擇了1%的使用者，分析這部分使用者的資料回報，這足夠幫助我們統計到新版資料可能帶來的變化，及時調整設計語言的方向，做出有效的調整和優化。
6.工作中高效溝通的語言
設計師在很多時候都想把設計思路清楚地傳達給他人，但這似乎并不是件很容易的事情。你認為自己的設計意圖完全符合使用者的需求，别人可能并不這麼認為，甚至用自身感受作為使用者的感受來舉證沒有這樣的需求，雖然我們可以反駁他不能代表使用者，但這樣很可能就沒法再溝通下去了。
就溝通而言，說不出理由的設計可能是設計者考慮得不夠全面，這會讓設計師在溝通中缺少底氣。這在産品的溝通中是最常見的場景，經常會聽到有人問“你為什麼要這麼設計”，當你的設計意圖不能傳達出設計語言，将很難得到項目組的認可。試想一下别人可以對你的設計方案提出異議，如果你覺得自己的方案沒有問題，那你是不是就要拿出具說服力的舉證呢？如果我們的方案經過深思熟慮，如果我們在設計中定好設計語言體系，是不是會讓溝通變得更加順暢呢？可見，設計語言可以讓溝通更加高效，變成工作中的産品語言，帶動整個工作流程的高效。
2.4 設計語言推動評審案例
設計評審，就是讨論設計方案的溝通會。對設計師來說可能會有點小壓力，因為每個人對設計的了解層次不同，可能會出現吐槽設計作品的現象，這往往是因為他們沒了解設計意圖。當設計師表達自己的設計思路後，如果還是不能被接受，很有可能是設計真的有問題，需要設計師換位思考，想想大家為什麼會覺得不好。很多人可能都不懂設計，不會設計技法，更不可能有針對你的嫌疑，是以這種聲音恰恰可能代表部分使用者群體的聲音，設計問題反映的是設計語言體系的不完善或者壓根就沒有仔細地思考過。
比如我們有個頻道主站的改版項目，涉及的業務部門比較多，是以設計方案需要得到所有業務部門的确認才行。方案經過幾輪修改最終出爐，我們召集業務部門來評審。各業務部門的意見衆說紛纭：字型太大、顔色太單一、整體太簡單、缺乏設計感、沒有視覺沖擊力、圖意表達不清、子產品分割不清、沒有框線等。設計師聽到這些建議後，開始闡述自己的設計理念完全迎合了設計的主流趨勢，遵循展現品牌、輕量化、去除裝飾、弱化表現等設計原則，在閱讀體驗上更直接地給使用者呈現内容。但這種闡述在評審會上顯得徒勞，沒有任何成效。
項目負責人并沒有反駁别人的觀點，而是直接展示了我們線上的設計規範，傳達了我們設計遵循的準則，然後與競品的設計語言進行對比，展現了整個産品線體驗設計的統一性，強化了品牌形象的一緻性。之後大家好像恍然大悟，隻提了涉及自身利益的一些問題，而不再糾結設計本身的問題。設計語言勝過诠釋若幹别人聽不懂的專業術語，别人并非設計專業出身，對這套設計理念又怎麼會有感覺呢？設計語言就是高效溝通的簡單方式，不僅很好地傳達了産品的設計理念，還減少了溝通不暢帶來的負面影響。
2.5 資料驗證設計語言的方向
我們移動端的WAP頁面，在首屏最重要的區域，每天都能有幾百萬的流量。想在體驗上優化可不是那麼容易的事情，因為改變使用者的浏覽習慣，很可能會得不償失。首屏的流量很大，可進入篩選入口的流量卻并不多，通過篩選入口來找到合适的車型又是使用者的剛需，這就需要我們找到一些提高篩選入口流量的方法。
下圖黃色界面是舊版的首屏，有個快速找車的入口，産品設計了幾種分類區間，用Tab的體驗形式呈現，依次按品牌、價格、級别、車型四個次元分類。這幾個分類對快速找車而言都非常重要，第二、三、四的Tab在設計上被弱化，提示性很弱，很容易被使用者忽略，是以通過這幾個Tab找車也就變得沒那麼快速。
我們梳理産品時發現這非常不符合我們定義的高效為使用者解決問題的設計語言，目前的設計顯現出了一種違和感，于是想從體驗設計上優化一下，更加符合我們設計語言的基調。我們做了如下體驗上的優化，将多個Tab整合成一個，這樣就不需要使用者去切換多個Tab分類，所有重要的标簽一目了然。
我們将新版設計方案（圖中藍色的）拿過去與項目負責人溝通，沒想到負責人并不認可這個方案，他認為新設計方案并不能解決之前頁面的篩選入口流量小的問題，還認為目前的（黃色版）分類很合理，通過分類呈現很多複雜的選項，化繁為簡，很有條理性，并給我們找了一些競品的例子做舉證，說大家都是通過舊版的分類标簽的方案來處理很多選項。這樣的溝通結果，我想很多人都遭遇過，而且大機率的結果就是要把新方案擱淺了。
突然想起邁克爾·傑克遜在歌曲《Scream》裡的一句歌詞：“You tell me I’m wrong.Then you’d better prove you’re right.（你說我是錯的，那你最好證明你是對的。）”于是我們就想了一個辦法，請技術人員幫忙導出這幾個子產品某一時段的資料。資料統計顯示預設（即第一個）标簽通路量16萬多，第二個标簽就降到了7千多，第三個降到4千多，第四個隻有300多，如上圖。
看到這樣的資料結果，我們确實沒想到資料差距這麼大，我想目前的設計不符合設計語言的規則，很可能就是導緻轉化率低的原因之一。這促使我們對設計方案做一次灰階測試，在強有力的資料源舉證面前，大家都選擇接受我們對設計語言的了解。最終我們将前三塊Tab裡的标簽有選擇性地整合到了一起，優化後比對資料發現，轉化率提升了近3倍之多。這次利用資料優化了産品體驗上的不足，直接驗證了我們的設計語言方向的準确性，關鍵是這種方法可以引領我們更好地做體驗設計。我們把這個案例分享出來，希望大家利用資料驗證設計語言，而不是簡單地通過合理性來解釋。
設計任何東西都需要設計師認真地去思考，産品經理給我們需求，也不希望看到我們不假思索地照着UE圖去默默做完，這樣的設計态度顯得很不專業。整理出設計的思考邏輯、系統性的設計語言顯得尤為重要，這是作為優秀設計師的基本職業素養。
設計語言歸根結底就是設計師的“意識”。每設計一步可以多問幾個為什麼，想想這麼設計在使用者需求或整個産品政策邏輯上有沒有不違和的地方。如果自己都說不出來，那還真得要好好完善一下自己的設計思路。普通設計師與優秀設計師的一個重要差別就在于，後者懂得從“?為什麼?”這個角度拓開思路，當你運用好設計語言的設計原則後，在表現層的設計就水到渠成了。
設計師的成長需要積累，更需要個人的思考和領悟，了解産品的需求邏輯至關重要，獨特的體驗設計也會影響到産品的整體形象，要學會利用設計語言來提高工作效率。