編者按：《從零開(kāi)始設(shè)計(jì)App》系列到這篇已經(jīng)是第三期了，上期是低保真原型圖，這期@Sophia的玲瓏閣?聊聊如何從零開(kāi)始制作高保真原型圖和UI 設(shè)計(jì)規(guī)范。

往期回顧：

1. 《設(shè)計(jì)師怎樣從零開(kāi)始設(shè)計(jì)一款A(yù)PP？》
2. 《從零開(kāi)始設(shè)計(jì)一款A(yù)PP之如何做原型圖》

Hi-fi 輸出

上篇文章提到，在Hi-fi階段大概可以分為前期、中期和后期三個(gè)階段。這篇文章就是對(duì)Hi-fi階段的詳細(xì)解說(shuō)。

前期

前期的主要任務(wù)是hero screen（主功能頁(yè)面）的嘗試設(shè)計(jì)，通過(guò)它進(jìn)行視覺(jué)風(fēng)格上的確定。

APP進(jìn)入視覺(jué)風(fēng)格確定的時(shí)期，主要確定的內(nèi)容包括顏色、字體、圖標(biāo)三大塊。

1. 顏色

確定的過(guò)程先做好心理準(zhǔn)備，很大程度上會(huì)來(lái)回折騰，改來(lái)改去。著手點(diǎn)可以從產(chǎn)品點(diǎn)位出發(fā)，結(jié)合企業(yè)視覺(jué)系統(tǒng)進(jìn)行統(tǒng)一形象設(shè)計(jì)。

如果企業(yè)有自己的logo和產(chǎn)品線，那視覺(jué)出發(fā)點(diǎn)可以在保持現(xiàn)有產(chǎn)品線的基礎(chǔ)上，進(jìn)行APP個(gè)性定位。通俗點(diǎn)說(shuō)，就是保持統(tǒng)一的前提下，有所區(qū)別。打個(gè)比方，Nike+系列的產(chǎn)品，有Nike+RunClub、Nike+Move、Nike+Training、Nike+，從整體上來(lái)看，他們都用統(tǒng)一的帶有運(yùn)動(dòng)感的熒光綠作為主色調(diào)，然后用黑白灰進(jìn)行搭配。三者又有一定的區(qū)別，比如說(shuō)Nike+RunClub的header是綠色，Nike+Training的header是黑色，前者更有活力運(yùn)動(dòng)感，戶外使用閱讀更方便，后者對(duì)室內(nèi)體驗(yàn)更友好。

如果沒(méi)有企業(yè)視覺(jué)系統(tǒng)，一切從0開(kāi)始的話，建議從競(jìng)品分析開(kāi)始，市面上做得比較成功的產(chǎn)品進(jìn)行分析，以及從自身產(chǎn)品特性和行業(yè)特性進(jìn)行出發(fā)。比方說(shuō)餐飲行業(yè)代表色是橙色，運(yùn)動(dòng)行業(yè)藍(lán)色，高科技領(lǐng)域不同色值的籃等等，也可以另辟蹊徑做出個(gè)性化的嘗試，比如keep的綠色與棕色的搭配方案。

在顏色這個(gè)領(lǐng)域分為代表色、輔助色、搭配方案這三方面的內(nèi)容。一般配色方案是，一種彩色作為重要信息的突出色彩，配上不同深淺的黑白灰或者藍(lán)、棕色等無(wú)色彩或者色彩感比較弱的搭配方案。這樣的搭配方案，在信息呈現(xiàn)方面會(huì)比較清晰。

而在做設(shè)計(jì)方案中，還需要考慮的是，設(shè)計(jì)出不同底色的搭配方案，方便在不同場(chǎng)景的方案進(jìn)行統(tǒng)一。如果說(shuō)得更多的話，可以整理出一套APP的設(shè)計(jì)規(guī)范了，樓主以后再細(xì)說(shuō)。

2. 字體

字體可以分為標(biāo)題、閱讀文字、注釋三大方面。這方面可以參考一下iOS的規(guī)范。但在實(shí)際工作中（非跨國(guó)大型企業(yè)），我們似乎沒(méi)有那么多的需求，主要分為Header Title、Button Text、Large、Regular、Small、Micro，分出這幾個(gè)種類出來(lái)，基本就夠用了。每種可以有4pt的差距。

同一個(gè)APP的字體種類不要太多，兩到三種是最合適的，一般突出的數(shù)字和字體會(huì)需要特別的字體去顯示，其他閱讀性的字體會(huì)用粗細(xì)不同的同一種字體進(jìn)行統(tǒng)一。這樣，在設(shè)計(jì)方案上更加簡(jiǎn)潔明了。（使用字體時(shí)，注意版權(quán)問(wèn)題）

3. 圖標(biāo)

圖標(biāo)在風(fēng)格上分為色塊和線性兩種，同樣遵循統(tǒng)一原則，同一個(gè)APP圖標(biāo)使用同一種風(fēng)格。在大小上同字體一樣，做出幾個(gè)層級(jí)的規(guī)劃，保持icon尺寸也是固定的幾種。設(shè)計(jì)師在設(shè)計(jì)方案時(shí)沒(méi)有一種標(biāo)準(zhǔn)所在，程序員在實(shí)現(xiàn)頁(yè)面時(shí)也會(huì)覺(jué)得頁(yè)面很凌亂。當(dāng)然這種統(tǒng)一工作放在最后做視覺(jué)規(guī)范整理的時(shí)候也可以做，提前做會(huì)減少后面的工作程序。

4. 附加

在做Hi-fi的過(guò)程中，我們的目的是為了盡量做出用戶將來(lái)會(huì)接觸到的，真實(shí)的APP的頁(yè)面，所以，在APP里面的圖片同樣起著還原場(chǎng)景的作用。雖然從花瓣網(wǎng)、Pinterest、500px等網(wǎng)站可以找到大量的優(yōu)質(zhì)的圖片，讓設(shè)計(jì)稿看起來(lái)逼格更高。但這種做法對(duì)APP本身設(shè)計(jì)來(lái)說(shuō)，弊大于利，影響設(shè)計(jì)師對(duì)視覺(jué)本身的判斷。所以，支持在網(wǎng)上搜索現(xiàn)實(shí)生活中原場(chǎng)景圖。

中期

中期在確定好了的風(fēng)格上進(jìn)行完善APP其他頁(yè)面。這一個(gè)階段又可以分為輔助功能的完善和單個(gè)頁(yè)面的完善。

1. 輔助功能

一般APP的輔助功能會(huì)有注冊(cè)/登錄、個(gè)人簡(jiǎn)介（Profile）、搜索查找等等的功能，可能搜索查找會(huì)放在稍微靠前一點(diǎn)的時(shí)間進(jìn)行考慮。這些都是固定的模塊，相對(duì)復(fù)雜程度沒(méi)有那么高。如果企業(yè)有現(xiàn)成的也可以使用現(xiàn)成的，沒(méi)有也可以進(jìn)行簡(jiǎn)單的設(shè)計(jì)，這一塊樓主有專門(mén)的文章介紹過(guò)，可以翻閱樓主的歷史文章。

2. 單個(gè)頁(yè)面

單個(gè)頁(yè)面分為正常情況和異常情況的考慮。

正常情況主要包括頁(yè)面的跳轉(zhuǎn)邏輯和各種Corner Case（極端情況）。Corner Case主要有數(shù)據(jù)的展示0/1/n、字符的限制（最大/最?。?、網(wǎng)絡(luò)（Wi-Fi/數(shù)據(jù)流量）。

異常情況即以上操作被打斷時(shí)的問(wèn)題處理，無(wú)網(wǎng)絡(luò)（或者網(wǎng)絡(luò)信號(hào)弱）、中間流程斷掉（比如APP被直接殺掉）、字符超過(guò)/小于最低限制/字符不輸入等情況下，APP的處理情況或者說(shuō)給用戶的反饋。這些是QA（測(cè)試工程師）特別會(huì)注意到的問(wèn)題，前期考慮周到，后期會(huì)非常省事。

后期

后期繼續(xù)完善，做創(chuàng)意性的設(shè)計(jì)，點(diǎn)睛之筆的設(shè)計(jì)。在實(shí)際項(xiàng)目中，如果時(shí)間趕，后期這樣更完善性的工作基本沒(méi)有時(shí)間去做，除非設(shè)計(jì)師能加班加點(diǎn)做出不費(fèi)事又好實(shí)現(xiàn)的效果，團(tuán)隊(duì)覺(jué)得可以花小的精力又可以達(dá)到很好的效果的同時(shí)才會(huì)去做這個(gè)事情。

當(dāng)然，刨除這些因素不說(shuō)，這樣的點(diǎn)睛之筆，主要可以應(yīng)用的有l(wèi)auch card（即APP的啟動(dòng)頁(yè)）、下拉刷新、loading（即等待頁(yè)）、404頁(yè)面（即出錯(cuò)頁(yè)面）、默認(rèn)個(gè)性頭像等等。

總的來(lái)說(shuō)，就算是在Hi-fi階段，工作內(nèi)容的順序也還是從主功能入手進(jìn)行風(fēng)格確定，然后再延伸到輔助功能，接著深入到每個(gè)頁(yè)面的細(xì)節(jié)設(shè)計(jì)，有精力再做創(chuàng)意性改善內(nèi)容。思維仍然是，從整體到局部，從粗糙到細(xì)致。

UI規(guī)范整理

上篇文章更新到了在設(shè)計(jì)APP的過(guò)程中Hi-fi輸出的一些要求，今天來(lái)說(shuō)說(shuō)APP的UI規(guī)范怎么整理。

要求

如果我們按照市面上最好的規(guī)范去整理的話是極好的一件事情。Apple公司的iOS規(guī)范和Google的Material Design的設(shè)計(jì)規(guī)范就是很好的參考案例。如果有時(shí)間，也是極力推崇大家去學(xué)學(xué)的。但創(chuàng)業(yè)公司不一樣，公司沒(méi)有那么多資源給設(shè)計(jì)師去做那么龐大的工作量。

工作中，實(shí)用、省事是第一準(zhǔn)則，怎樣讓開(kāi)發(fā)、PM、設(shè)計(jì)都能自覺(jué)遵守這樣的規(guī)范，讓用戶覺(jué)得產(chǎn)品有規(guī)有矩，值得信賴，就很棒了。

UI規(guī)范的主要內(nèi)容

1. 前言

前言部分主要交代UI規(guī)范的版本號(hào)，標(biāo)準(zhǔn)頁(yè)面的大小，基于哪個(gè)平臺(tái)進(jìn)行設(shè)計(jì)。版本號(hào)一般由PM（即產(chǎn)品經(jīng)理）進(jìn)行規(guī)定。設(shè)計(jì)稿的標(biāo)準(zhǔn)頁(yè)面一般用iPhone 6S的大小，即750*1344px作為標(biāo)準(zhǔn)，因?yàn)檫@個(gè)屏幕大小所占市場(chǎng)份額最大。平臺(tái)的話，大部分是Mac OS系統(tǒng)（不排除有少部分基于Windows，不同公司情況不一樣）。

2. 顏色規(guī)范

顏色從類型上可以分為主色，輔色，文字色三大類。

而每種顏色除了需要要標(biāo)注RGB的色號(hào)之外，最好標(biāo)注出它的使用場(chǎng)景，以及在該場(chǎng)景下的用途。以下是樓主找的一些案例

主色的種類控制在一至兩種比較合適，輔色也不能過(guò)多，三到五種就足夠。文字色一般分為三個(gè)層級(jí)進(jìn)行設(shè)置，越高層級(jí)的顏色越深，還需要注意的是留一個(gè)反白色，方便用于深色背景下的文字信息顯示。

3. 文字規(guī)范

文字的統(tǒng)一有很多種方式，在此介紹一種按照用途的方法分類的形式。同樣，文字需要介紹出文字的字體（如果有英文的也需要羅列一下英文字體），以及使用場(chǎng)景。

按照用途來(lái)分，文字可以分為導(dǎo)航欄、列表、輸入框、按鈕、閱讀類文字。導(dǎo)航欄又可以細(xì)分為頂部、底部、功能區(qū)導(dǎo)航欄。閱讀性的文字，主要分為標(biāo)題，說(shuō)明文字，注釋三大類，如果在偏向雜志類的APP中可能標(biāo)題又可以進(jìn)行細(xì)分成幾級(jí)。如下案例。

4. 控件

控件用Sketch的Symbol進(jìn)行整理。不知道怎么用Sketch和Symbol的童鞋可以進(jìn)行先自學(xué)一下，如果需要軟件的介紹也可以給樓主留言，這部分的整理需要有一定的基礎(chǔ)的人才能看得懂。分類用腦圖的方式呈獻(xiàn)給大家，來(lái)得更直觀。

△ 控件分類

5. 圖標(biāo)

圖標(biāo)的統(tǒng)一，主要是尺寸、風(fēng)格，這一點(diǎn)在上篇文章有提到。風(fēng)格上，選擇填充或者選擇線性。比較流行的是線性圖標(biāo)，一般采用3px的粗細(xì)。大小常用的有12x12px、24x24px、48x48px、64x64px、96x96px（或者100x100px）。制作參考，大伙根據(jù)需要進(jìn)行調(diào)整。

6. 其它

在有的規(guī)范里面還將主頁(yè)面以頁(yè)面布局的一種分類進(jìn)行呈現(xiàn)，但在開(kāi)發(fā)對(duì)照sketch文件寫(xiě)代碼的過(guò)程中已經(jīng)很仔細(xì)地在看頁(yè)面，所以羅列在規(guī)范中，樓主覺(jué)得沒(méi)有太大的實(shí)際用途，于是也就沒(méi)有考慮。但它有它的好處，就是讓團(tuán)隊(duì)外部人員在查看公司的視覺(jué)規(guī)范時(shí)更加完整，內(nèi)容更齊全，形象更高端。文件定位不一樣，內(nèi)容也可以不那么相同。

總結(jié)，一切從實(shí)際出發(fā)，滿足某個(gè)階段的需求。

作者簡(jiǎn)介：Sophia的玲瓏閣，一枚愛(ài)折騰，愛(ài)健身的交互設(shè)計(jì)妹紙。

職場(chǎng)設(shè)計(jì)技能，更多教程搶先看，請(qǐng)關(guān)注作者的微信公眾號(hào)：「Sophia的玲瓏閣」

「想自學(xué)UI ，建議閱讀這3篇精華文章」

1. 《新年自學(xué)計(jì)劃！寫(xiě)給UI設(shè)計(jì)新人的知識(shí)體系指南》
2. 《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
3. 《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com