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

前期

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

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

1.顏色

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

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

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

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

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

2.字體

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

同一個(gè)APP的字體種類不要太多，兩到三種是最合適的，一般突出的數(shù)字和字體會(huì)需要特別的字體去顯示，其他閱讀性的字體會(huì)用粗細(xì)不同的同一種字體進(jìn)行統(tǒng)一。這樣，在設(shè)計(jì)方案上更加簡(jiǎn)潔明了。（使用字體時(shí)，注意版權(quá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í)沒有一種標(biāo)準(zhǔn)所在，程序員在實(shí)現(xiàn)頁面時(shí)也會(huì)覺得頁面很凌亂。當(dāng)然這種統(tǒng)一工作放在最后做視覺規(guī)范整理的時(shí)候也可以做，提前做會(huì)減少后面的工作程序。

4.附加

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

中期

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

1.輔助功能

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

2.單個(gè)頁面

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

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

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

后期

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

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

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

文章欠缺視覺部分涉及到UI規(guī)范的整理，敬請(qǐng)期待這部分的更新~

Sophia的tips：事情并不是那么簡(jiǎn)單也并不是那么難，一項(xiàng)項(xiàng)進(jìn)行拆解，慢慢就會(huì)做到了~

相關(guān)閱讀

《創(chuàng)業(yè)公司設(shè)計(jì)師怎樣從0到1設(shè)計(jì)一款A(yù)PP（一）——概述》

《創(chuàng)業(yè)公司設(shè)計(jì)師怎樣從0到1設(shè)計(jì)一款A(yù)PP（二）——立項(xiàng)》

《創(chuàng)業(yè)公司設(shè)計(jì)師怎樣從0到1設(shè)計(jì)一款A(yù)PP（三）——Low-fi輸出》

《創(chuàng)業(yè)公司設(shè)計(jì)師怎樣從0到1設(shè)計(jì)一款A(yù)PP（四）——Hi-fi輸出（上篇）》

專欄作家

作者：Sophiallg，人人都是產(chǎn)品經(jīng)理專欄作家，微信公眾號(hào)：Sophia的玲瓏閣。

本文由 @Sophiallg 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。