編者按：《從零開始設計App》系列到這篇已經是第三期了，上期是低保真原型圖，這期@Sophia的玲瓏閣 聊聊如何從零開始制作高保真原型圖和UI 設計規范。
往期回顧：
Hi-fi 輸出
上篇文章提到，在Hi-fi階段大概可以分為前期、中期和后期三個階段。這篇文章就是對Hi-fi階段的詳細解說。
前期
前期的主要任務是hero screen（主功能頁面）的嘗試設計，通過它進行視覺風格上的確定。
APP進入視覺風格確定的時期，主要確定的內容包括顏色、字體、圖標三大塊。
1. 顏色
確定的過程先做好心理准備，很大程度上會來回折騰，改來改去。着手點可以從產品點位出發，結合企業視覺系統進行統一形象設計。
如果企業有自己的logo和產品線，那視覺出發點可以在保持現有產品線的基礎上，進行APP個性定位。通俗點說，就是保持統一的前提下，有所區別。打個比方，Nike+系列的產品，有Nike+RunClub、Nike+Move、Nike+Training、Nike+，從整體上來看，他們都用統一的帶有運動感的熒光綠作為主色調，然后用黑白灰進行搭配。三者又有一定的區別，比如說Nike+RunClub的header是綠色，Nike+Training的header是黑色，前者更有活力運動感，戶外使用閱讀更方便，后者對室內體驗更友好。
如果沒有企業視覺系統，一切從0開始的話，建議從競品分析開始，市面上做得比較成功的產品進行分析，以及從自身產品特性和行業特性進行出發。比方說餐飲行業代表色是橙色，運動行業藍色，高科技領域不同色值的籃等等，也可以另辟蹊徑做出個性化的嘗試，比如keep的綠色與棕色的搭配方案。
在顏色這個領域分為代表色、輔助色、搭配方案這三方面的內容。一般配色方案是，一種彩色作為重要信息的突出色彩，配上不同深淺的黑白灰或者藍、棕色等無色彩或者色彩感比較弱的搭配方案。這樣的搭配方案，在信息呈現方面會比較清晰。
而在做設計方案中，還需要考慮的是，設計出不同底色的搭配方案，方便在不同場景的方案進行統一。如果說得更多的話，可以整理出一套APP的設計規范了，樓主以后再細說。
2. 字體
字體可以分為標題、閱讀文字、注釋三大方面。這方面可以參考一下iOS的規范。但在實際工作中（非跨國大型企業），我們似乎沒有那么多的需求，主要分為Header Title、Button Text、Large、Regular、Small、Micro，分出這幾個種類出來，基本就夠用了。每種可以有4pt的差距。
同一個APP的字體種類不要太多，兩到三種是最合適的，一般突出的數字和字體會需要特別的字體去顯示，其他閱讀性的字體會用粗細不同的同一種字體進行統一。這樣，在設計方案上更加簡潔明了。（使用字體時，注意版權問題）
3. 圖標
圖標在風格上分為色塊和線性兩種，同樣遵循統一原則，同一個APP圖標使用同一種風格。在大小上同字體一樣，做出幾個層級的規划，保持icon尺寸也是固定的幾種。設計師在設計方案時沒有一種標准所在，程序員在實現頁面時也會覺得頁面很凌亂。當然這種統一工作放在最后做視覺規范整理的時候也可以做，提前做會減少后面的工作程序。
4. 附加
在做Hi-fi的過程中，我們的目的是為了盡量做出用戶將來會接觸到的，真實的APP的頁面，所以，在APP里面的圖片同樣起着還原場景的作用。雖然從花瓣網、Pinterest、500px等網站可以找到大量的優質的圖片，讓設計稿看起來逼格更高。但這種做法對APP本身設計來說，弊大於利，影響設計師對視覺本身的判斷。所以，支持在網上搜索現實生活中原場景圖。
中期
中期在確定好了的風格上進行完善APP其他頁面。這一個階段又可以分為輔助功能的完善和單個頁面的完善。
1. 輔助功能
一般APP的輔助功能會有注冊/登錄、個人簡介（Profile）、搜索查找等等的功能，可能搜索查找會放在稍微靠前一點的時間進行考慮。這些都是固定的模塊，相對復雜程度沒有那么高。如果企業有現成的也可以使用現成的，沒有也可以進行簡單的設計，這一塊樓主有專門的文章介紹過，可以翻閱樓主的歷史文章。
2. 單個頁面
單個頁面分為正常情況和異常情況的考慮。
正常情況主要包括頁面的跳轉邏輯和各種Corner Case（極端情況）。Corner Case主要有數據的展示0/1/n、字符的限制（最大/最小）、網絡（Wi-Fi/數據流量）。
異常情況即以上操作被打斷時的問題處理，無網絡（或者網絡信號弱）、中間流程斷掉（比如APP被直接殺掉）、字符超過/小於最低限制/字符不輸入等情況下，APP的處理情況或者說給用戶的反饋。這些是QA（測試工程師）特別會注意到的問題，前期考慮周到，后期會非常省事。
后期
后期繼續完善，做創意性的設計，點睛之筆的設計。在實際項目中，如果時間趕，后期這樣更完善性的工作基本沒有時間去做，除非設計師能加班加點做出不費事又好實現的效果，團隊覺得可以花小的精力又可以達到很好的效果的同時才會去做這個事情。
當然，刨除這些因素不說，這樣的點睛之筆，主要可以應用的有lauch card（即APP的啟動頁）、下拉刷新、loading（即等待頁）、404頁面（即出錯頁面）、默認個性頭像等等。
總的來說，就算是在Hi-fi階段，工作內容的順序也還是從主功能入手進行風格確定，然后再延伸到輔助功能，接着深入到每個頁面的細節設計，有精力再做創意性改善內容。思維仍然是，從整體到局部，從粗糙到細致。
UI規范整理
上篇文章更新到了在設計APP的過程中Hi-fi輸出的一些要求，今天來說說APP的UI規范怎么整理。
要求
如果我們按照市面上最好的規范去整理的話是極好的一件事情。Apple公司的iOS規范和Google的Material Design的設計規范就是很好的參考案例。如果有時間，也是極力推崇大家去學學的。但創業公司不一樣，公司沒有那么多資源給設計師去做那么龐大的工作量。
工作中，實用、省事是第一准則，怎樣讓開發、PM、設計都能自覺遵守這樣的規范，讓用戶覺得產品有規有矩，值得信賴，就很棒了。
UI規范的主要內容
1. 前言
前言部分主要交代UI規范的版本號，標准頁面的大小，基於哪個平台進行設計。版本號一般由PM（即產品經理）進行規定。設計稿的標准頁面一般用iPhone 6S的大小，即750*1344px作為標准，因為這個屏幕大小所占市場份額最大。平台的話，大部分是Mac OS系統（不排除有少部分基於Windows，不同公司情況不一樣）。
2. 顏色規范
顏色從類型上可以分為主色，輔色，文字色三大類。
而每種顏色除了需要要標注RGB的色號之外，最好標注出它的使用場景，以及在該場景下的用途。以下是樓主找的一些案例
主色的種類控制在一至兩種比較合適，輔色也不能過多，三到五種就足夠。文字色一般分為三個層級進行設置，越高層級的顏色越深，還需要注意的是留一個反白色，方便用於深色背景下的文字信息顯示。
3. 文字規范
文字的統一有很多種方式，在此介紹一種按照用途的方法分類的形式。同樣，文字需要介紹出文字的字體（如果有英文的也需要羅列一下英文字體），以及使用場景。
按照用途來分，文字可以分為導航欄、列表、輸入框、按鈕、閱讀類文字。導航欄又可以細分為頂部、底部、功能區導航欄。閱讀性的文字，主要分為標題，說明文字，注釋三大類，如果在偏向雜志類的APP中可能標題又可以進行細分成幾級。如下案例。
4. 控件
控件用Sketch的Symbol進行整理。不知道怎么用Sketch和Symbol的童鞋可以進行先自學一下，如果需要軟件的介紹也可以給樓主留言，這部分的整理需要有一定的基礎的人才能看得懂。分類用腦圖的方式呈獻給大家，來得更直觀。
△ 控件分類
5. 圖標
圖標的統一，主要是尺寸、風格，這一點在上篇文章有提到。風格上，選擇填充或者選擇線性。比較流行的是線性圖標，一般采用3px的粗細。大小常用的有12x12px、24x24px、48x48px、64x64px、96x96px（或者100x100px）。制作參考，大伙根據需要進行調整。
6. 其它
在有的規范里面還將主頁面以頁面布局的一種分類進行呈現，但在開發對照sketch文件寫代碼的過程中已經很仔細地在看頁面，所以羅列在規范中，樓主覺得沒有太大的實際用途，於是也就沒有考慮。但它有它的好處，就是讓團隊外部人員在查看公司的視覺規范時更加完整，內容更齊全，形象更高端。文件定位不一樣，內容也可以不那么相同。
總結，一切從實際出發，滿足某個階段的需求。