如何製作一款APP的UI設計規範文件

一、設計規範的撰寫時間
先說說這個設計規範應該什麼時候開始寫設計規範,一定是產品發展到了一定階段,才會開始撰寫製作的產物;通常是主體介面完成,總進度完成大概50%的時候,才可以考慮嘗試整理設計規範。
一個設計師:
一般來說,大部分企業整個部門,可能就搭配了1個啥都乾的UI設計師;這時候如果你一個人需要製作規範文件,可以先簡單做一下,把標準字型、字號、色值、控制元件等等都快速記錄下來,作為規範文件的內容;之後等專案完成,再補全規範文件,作為後續版本的指導手冊。
多個設計師:
一些大型的公司和部門,可能不止一位設計師,比如我目前的設計團隊一共7個人:4個UI,2個UE,1個平面。那這時候,多人協作是最好也是最快的方式,由其中工作經驗豐富的設計師作為規範製作專案的主導者,規劃好各個模組,由其他人協助完成一份比較全面的規範文件。
二、設計規範的作用
1.對設計師而言:為後續版本迭代和多人協作提供指導,保持產品的統一性;
一個專案,從V1.0一直升級到2.0、3.0……,很多時候即使同一位設計師在不同版本里做出的東西也可能會因為版本久遠,記不清而不小心導致視覺風格不統一;而一個專案有時會好幾個設計師共同參與,甚至還有不同時間段先後參與到專案中的,每個人的設計風格都不相同,這樣容易造成視覺介面的不統一,導致體驗不佳。
所以統一的設計規範,能讓後續版本和不同設計師之間保持產品的視覺風格統一。
2.對開發而言:提供標準化的元件樣式,減少開發重複時間
很多標準化的頁面控制元件完全可以做成設計規範裡的標註好的標準組件樣式,這樣就不需要每次設計師都要再標註一遍給開發。而且也可以避免有的開發粗心大意,兩個頁面的同類型元件樣式都寫的不統一。
三、設計規範文件的內容
現在網路上有非常多的知名產品的設計規範文件,幾乎都可以上網搜到。我目前看過差不多有上百份的產品設計規範文件,總結下來,無外乎以下幾項:
標準色:產品用色、字型用色、背景用色、分割線用色,以及各種色值的使用場景;
標準字:字型、字號,字間距、行間距,以及各類使用場景;
圖 標:圖示大小、位置、樣式,以及各類使用場景;
公用控制元件:分級導航樣式、標題欄樣式、輸入框、彈窗、按鈕、列表、toast、載入、loading、空白頁等等各類可作為設計規範的控制元件;
布 局:頁面佈局樣式,這個對設計和開發都很重要。
模 塊:功能模組樣式,這個對設計和開發也很重要。
基本上所有的設計規範文件包含但不限於上述內容;所以你感覺毫無頭緒,可以考慮在編寫設計規範文件時,從以上幾塊內容著手。
四、設計規範文件的適用人群
和之前寫過的互動文件需要人手一份一樣,設計規範文件其實也是要傳達到團隊的每個人手中;並不是UI設計師編寫完成後,就只由UI設計師來使用的。這些人包括但不限於PM、互動設計師、UI、開發、運營等等。給到UI手裡,可能下個版本的視覺設計或則其他人接手都可以和前版本保持一致;給到運營手裡,產品裡的廣告圖用多大的,他也可以明確知道;因為對每個人的作用都不一樣,所以最好的方式依舊是人手一份。
五、設計規範文件的更新迭代
設計規範文件是為了更好的幫助設計師和開發完成工作,而不是限制發揮;
對人來說:
UI有時候根據新的業務需求設計的東西,和原有的設計規範文件的內容並不合適;而開發在實際開發中,也會出現一些文件中規定的內容,因為技術問題無法達成的情況;
對產品來說:
隨著版本一代一代的更新,設計規範中的內容也逐漸會不適合現有的設計風格和技術。要根據實際情況,合理的更新迭代設計規範文件的內容,而不是一成不變。
轉至UI中國。