上篇文章提到花嘶，在Hi-fi階段大概可以分為前期直奋、中期和后期三個階段产还。這篇文章就是對Hi-fi階段的詳細解說。
前期
前期的主要任務(wù)是hero screen（主功能頁面）的嘗試設(shè)計息堂，通過它進行視覺風(fēng)格上的確定。
APP進入視覺風(fēng)格確定的時期块促，主要確定的內(nèi)容包括顏色荣堰、字體、圖標三大塊竭翠。
1.顏色
確定的過程先做好心理準備振坚，很大程度上會來回折騰，改來改去斋扰。著手點可以從產(chǎn)品點位出發(fā)屡拨，結(jié)合企業(yè)視覺系統(tǒng)進行統(tǒng)一形象設(shè)計。
如果企業(yè)有自己的logo和產(chǎn)品線褥实，那視覺出發(fā)點可以在保持現(xiàn)有產(chǎn)品線的基礎(chǔ)上呀狼，進行APP個性定位。通俗點說损离，就是保持統(tǒng)一的前提下哥艇，有所區(qū)別。打個比方僻澎，Nike+系列的產(chǎn)品貌踏，有Nike+RunClub、Nike+Move窟勃、Nike+Training祖乳、Nike+，從整體上來看秉氧，他們都用統(tǒng)一的帶有運動感的熒光綠作為主色調(diào)眷昆，然后用黑白灰進行搭配。三者又有一定的區(qū)別，比如說Nike+RunClub的header是綠色亚斋，Nike+Training的header是黑色作媚，前者更有活力運動感，戶外使用閱讀更方便帅刊，后者對室內(nèi)體驗更友好纸泡。
如果沒有企業(yè)視覺系統(tǒng)，一切從0開始的話赖瞒，建議從競品分析開始女揭，市面上做得比較成功的產(chǎn)品進行分析，以及從自身產(chǎn)品特性和行業(yè)特性進行出發(fā)栏饮。比方說餐飲行業(yè)代表色是橙色驯鳖，運動行業(yè)藍色罐孝，高科技領(lǐng)域不同色值的籃等等屡律，也可以另辟蹊徑做出個性化的嘗試潘靖，比如keep的綠色與棕色的搭配方案。
在顏色這個領(lǐng)域分為代表色冬竟、輔助色欧穴、搭配方案這三方面的內(nèi)容。一般配色方案是泵殴，一種彩色作為重要信息的突出色彩涮帘，配上不同深淺的黑白灰或者藍、棕色等無色彩或者色彩感比較弱的搭配方案笑诅。這樣的搭配方案调缨，在信息呈現(xiàn)方面會比較清晰。
而在做設(shè)計方案中吆你，還需要考慮的是弦叶，設(shè)計出不同底色的搭配方案，方便在不同場景的方案進行統(tǒng)一妇多。如果說得更多的話伤哺，可以整理出一套APP的設(shè)計規(guī)范了，樓主以后再細說者祖。
2.字體
字體可以分為標題立莉、閱讀文字、注釋三大方面七问。這方面可以參考一下iOS的規(guī)范蜓耻。但在實際工作中（非跨國大型企業(yè)），我們似乎沒有那么多的需求械巡，主要分為Header Title刹淌、Button Text饶氏、Large、Regular芦鳍、Small嚷往、Micro葛账，分出這幾個種類出來柠衅，基本就夠用了。每種可以有4pt的差距籍琳。
同一個APP的字體種類不要太多菲宴，兩到三種是最合適的，一般突出的數(shù)字和字體會需要特別的字體去顯示趋急，其他閱讀性的字體會用粗細不同的同一種字體進行統(tǒng)一喝峦。這樣，在設(shè)計方案上更加簡潔明了呜达。（使用字體時谣蠢，注意版權(quán)問題）
3.圖標
圖標在風(fēng)格上分為色塊和線性兩種，同樣遵循統(tǒng)一原則查近，同一個APP圖標使用同一種風(fēng)格眉踱。在大小上同字體一樣，做出幾個層級的規(guī)劃霜威，保持icon尺寸也是固定的幾種谈喳。設(shè)計師在設(shè)計方案時沒有一種標準所在，程序員在實現(xiàn)頁面時也會覺得頁面很凌亂戈泼。當然這種統(tǒng)一工作放在最后做視覺規(guī)范整理的時候也可以做婿禽，提前做會減少后面的工作程序。
4.附加
在做Hi-fi的過程中大猛，我們的目的是為了盡量做出用戶將來會接觸到的扭倾，真實的APP的頁面，所以挽绩，在APP里面的圖片同樣起著還原場景的作用吆录。雖然從花瓣網(wǎng)、Pinterest琼牧、500px等網(wǎng)站可以找到大量的優(yōu)質(zhì)的圖片恢筝，讓設(shè)計稿看起來逼格更高。但這種做法對APP本身設(shè)計來說巨坊，弊大于利撬槽，影響設(shè)計師對視覺本身的判斷。所以趾撵，支持在網(wǎng)上搜索現(xiàn)實生活中原場景圖侄柔。
中期
中期在確定好了的風(fēng)格上進行完善APP其他頁面共啃。這一個階段又可以分為輔助功能的完善和單個頁面的完善。
1.輔助功能
一般APP的輔助功能會有注冊/登錄暂题、個人簡介（Profile）移剪、搜索查找等等的功能，可能搜索查找會放在稍微靠前一點的時間進行考慮薪者。這些都是固定的模塊纵苛，相對復(fù)雜程度沒有那么高。如果企業(yè)有現(xiàn)成的也可以使用現(xiàn)成的言津，沒有也可以進行簡單的設(shè)計攻人，這一塊樓主有專門的文章介紹過，可以翻閱樓主的歷史文章悬槽。
2.單個頁面
單個頁面分為正常情況和異常情況的考慮怀吻。
正常情況主要包括頁面的跳轉(zhuǎn)邏輯和各種Corner Case（極端情況）。Corner Case主要有數(shù)據(jù)的展示0/1/n初婆、字符的限制（最大/最信钇隆）、網(wǎng)絡(luò)（Wi-Fi/數(shù)據(jù)流量）磅叛。
異常情況即以上操作被打斷時的問題處理屑咳，無網(wǎng)絡(luò)（或者網(wǎng)絡(luò)信號弱）、中間流程斷掉（比如APP被直接殺掉）宪躯、字符超過/小于最低限制/字符不輸入等情況下乔宿，APP的處理情況或者說給用戶的反饋。這些是QA（測試工程師）特別會注意到的問題访雪，前期考慮周到详瑞，后期會非常省事。
后期
后期繼續(xù)完善臣缀，做創(chuàng)意性的設(shè)計坝橡，點睛之筆的設(shè)計。在實際項目中精置，如果時間趕计寇，后期這樣更完善性的工作基本沒有時間去做，除非設(shè)計師能加班加點做出不費事又好實現(xiàn)的效果脂倦，團隊覺得可以花小的精力又可以達到很好的效果的同時才會去做這個事情番宁。
當然，刨除這些因素不說赖阻，這樣的點睛之筆蝶押，主要可以應(yīng)用的有l(wèi)auch card（即APP的啟動頁）、下拉刷新火欧、loading（即等待頁）棋电、404頁面（即出錯頁面）茎截、默認個性頭像等等
總的來說，就算是在Hi-fi階段赶盔，工作內(nèi)容的順序也還是從主功能入手進行風(fēng)格確定企锌，然后再延伸到輔助功能，接著深入到每個頁面的細節(jié)設(shè)計于未，有精力再做創(chuàng)意性改善內(nèi)容撕攒。思維仍然是，從整體到局部沉眶，從粗糙到細致打却。
文章欠缺視覺部分涉及到UI規(guī)范的整理杉适，敬請期待這部分的更新~
Sophia的tips：
事情并不是那么簡單也并不是那么難谎倔，一項項進行拆解，慢慢就會做到了~
相關(guān)文章
《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（四）——Hi-fi輸出（上篇）》
