文章看了那麼多，依然寫不好的設計規範
很多人覺得最厲害的設計來源於天馬行空的想像，但其實它們來源於條條框框的限制下；在這個小小的區域里，你能做出什麼？任何人都能在大的盒子裡面做設計，但現在你的盒子這麼丁點，你能設計出什麼？
——Alex Jaeger
學生時代的認知，設計師應該是隨性、自由、充滿想像力與創造力的。然而在實際的工作中，需要我們跟自己小夥伴兒溝通、協作，那麼設計規範便顯得尤為重要。這裡想說的規範分三個部分：平台設計規範、設計流程規範、公司產品的設計規範，先來講講不作為本次重點的前兩點。
第一點，大部分的設計師入行都是從學習設計規範開始的，移動設備兩大移動系統 iOS、Android都為設計師提供了詳盡、完善、高質的設計準則：《iOS Human Interface Guildeline》以及《Material Design》。遵守平台設計規範會讓用戶得到跟系統一致的交互體驗，降低用戶學習成本等等，意義老生常談，這裡不再贅述。
第二點，在一個設計團隊裡面，設計師之前往往需要彼此共用一個源文件，所以從項目的整理，圖層管理，命名規範都要做到清晰統一，項目文件公司內部達成一致，存放統一路徑。命名統一採用「項目名_平台_版本號_內容_日期」，每個項目備註負責人名字，方便第一時間找到負責人；
源文件和標註我們採用把一個項目／模塊的頁面放到一個文件中，方便管理，切圖我們放棄了按照模塊存放的形式，利用命名區分：「模塊_類別_icon_功能_狀態」，如sdk_mail_icon_search_pressed，文件會根據命名自動排序。
頁面命名採用「模塊_內容_備註」的形式；圖層命名清楚，避免重現Group、Group copy 1等默認命名，既不專業又影響識別；icon的命名清晰統一，這會讓後期的切圖與標註受益多多。
這次最想要講的就是公司產品的設計規範,那我們為什麼要做設計規範？四個方面：
做流程化通用設計，建立設計秩序，有參考、不隨意，通用重複的組件無需重新設計。
維護視覺繼承和統一，避免同樣的樣式／組件出現兩種設計的情況。
簡化設計工作量，設計不是從0到1而是 從60到100的過程，每個人的精力有限，從0到60的部分交給設計規範，不必再消耗精力時間去思考，設計中真正有價值的是60到100的部分，這才是值得設計師去花精力的地方，也是做出在市場上有競爭力的設計的關鍵。
減少產品開發溝通成本，與開發達成共識，避免設計稿變來變去，增加研發工作量，也避免的不同設計師在相同的地方作出不同的設計。
公司的設計規範因人而異，因地制宜，我們根據公司金融科技的屬性，給出了設計原則關鍵詞：保持克制、降噪、連貫性。
我們調研了金融相關從業人員的工作習慣等，根據其在交易操作中會比較習慣且傾向於在一屏中儘可能地看到需要的信息並進行操作，那麼保持克制與降噪就是希望避免不必要的信息的干擾，避免過度設計，連貫性則是指操作習慣與視覺指引的統一。
例如，在我們產品的桌面版中我們採用了多屏幕的設計，讓用戶可以在一屏中可以同時多人溝通，並且設計了多種快捷鍵的操作，這也是考慮目標用戶多習慣於鍵盤操作，降低用戶的學習成本。
具體的設計規範製作並不難，從刪格、文字、icon、按鈕、列表、彈窗等組件作出相應規範，包括組件大小、顏色、間距、不同狀態作出符合設計要求的規範。最理想的規範甚至包含了組件的代碼。
完成了這一步就萬事大吉了？Naive！
設計規範若沒有用起來那就是一張廢紙，在制定設計規範之初，我們也走了很多彎路，花了時間精力作出了設計規範文檔，因為查閱困難，研發小夥伴懶得看，設計小夥伴不遵守，活脫脫成了一張廢紙。經過不斷試錯與調研後，依據設計原子理論，我們採取了UI kit庫的形式，把規範的內容拆分放進libraries，做好每一個kit的命名，在設計師需要時拿過來即可，libraries里的每一個改動也會同步更新，靈活性得到保障。這是給團隊內設計師用的部分，研發小夥伴還是會需要有文檔的部分，這裡需要有一個命名，給每一個組件命名，例如文字可以是h1，其中標註包含了文字大小和顏色，按鈕是b1，研發小夥伴兒看到便可以找出對應的組件，既保證了落地設計的統一性，也節省了研發小伙兒的時間。
一個產品由很多的頁面組成，一個頁面由不同的組件組成，大大小小的組件像堆積木一樣通過不同的組合組成了不同的界面。
如果說設計規範就是開頭提到的盒子，聽起來雖然是滿滿的束縛感，實際上，設計規範讓視覺更加可視化，數據化，讓設計更加理性。
但規範不是標註，設計規範是為了對內統一，對外區分； 簡化，優化，糾正執行錯誤；讓管理與合作變得容易；就像toast提示是安卓的平台交互形式，但是顯然我們很經常也在iOS中看到。
設計規範本質上是為了得到更好的設計，若在規範中不滿足當下的需要時，該變通就變通。
TAG:郭一條 |