Hi-fi 輸出
上篇文章提到，在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)三大塊。
確定的過程先做好心理準(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ì)說。
字體可以分為標(biāo)題、閱讀文字、注釋三大方面。這方面可以參考一下iOS的規(guī)范。但在實(shí)際工作中（非跨國(guó)大型企業(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)問題）
圖標(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ì)減少后面的工作程序。
在做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ǎ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ì)致。
上篇文章更新到了在設(shè)計(jì)APP的過程中Hi-fi輸出的一些要求，今天來說說APP的UI規(guī)范怎么整理。
要求
如果我們按照市面上最好的規(guī)范去整理的話是極好的一件事情。Apple公司的iOS規(guī)范和Google的Material Design的設(shè)計(jì)規(guī)范就是很好的參考案例。如果有時(shí)間，也是極力推崇大家去學(xué)學(xué)的。但創(chuàng)業(yè)公司不一樣，公司沒有那么多資源給設(shè)計(jì)師去做那么龐大的工作量。
工作中，實(shí)用、省事是第一準(zhǔn)則，怎樣讓開發(fā)、PM、設(shè)計(jì)都能自覺遵守這樣的規(guī)范，讓用戶覺得產(chǎn)品有規(guī)有矩，值得信賴，就很棒了。
1. 前言
前言部分主要交代UI規(guī)范的版本號(hào)，標(biāo)準(zhǔn)頁面的大小，基于哪個(gè)平臺(tái)進(jìn)行設(shè)計(jì)。版本號(hào)一般由PM（即產(chǎn)品經(jīng)理）進(jìn)行規(guī)定。設(shè)計(jì)稿的標(biāo)準(zhǔn)頁面一般用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)景下的用途。以下是樓主找的一些案例
主色的種類控制在一至兩種比較合適，輔色也不能過多，三到五種就足夠。文字色一般分為三個(gè)層級(jí)進(jìn)行設(shè)置，越高層級(jí)的顏色越深，還需要注意的是留一個(gè)反白色，方便用于深色背景下的文字信息顯示。
3. 文字規(guī)范
文字的統(tǒng)一有很多種方式，在此介紹一種按照用途的方法分類的形式。同樣，文字需要介紹出文字的字體（如果有英文的也需要羅列一下英文字體），以及使用場(chǎng)景。
按照用途來分，文字可以分為導(dǎo)航欄、列表、輸入框、按鈕、閱讀類文字。導(dǎo)航欄又可以細(xì)分為頂部、底部、功能區(qū)導(dǎo)航欄。閱讀性的文字，主要分為標(biāo)題，說明文字，注釋三大類，如果在偏向雜志類的APP中可能標(biāo)題又可以進(jìn)行細(xì)分成幾級(jí)。如下案例。
4. 控件
控件用Sketch的Symbol進(jìn)行整理。不知道怎么用Sketch和Symbol的童鞋可以進(jìn)行先自學(xué)一下，如果需要軟件的介紹也可以給樓主留言，這部分的整理需要有一定的基礎(chǔ)的人才能看得懂。分類用腦圖的方式呈獻(xiàn)給大家，來得更直觀。
△ 控件分類
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ī)范里面還將主頁面以頁面布局的一種分類進(jìn)行呈現(xiàn)，但在開發(fā)對(duì)照sketch文件寫代碼的過程中已經(jīng)很仔細(xì)地在看頁面，所以羅列在規(guī)范中，樓主覺得沒有太大的實(shí)際用途，于是也就沒有考慮。但它有它的好處，就是讓團(tuán)隊(duì)外部人員在查看公司的視覺規(guī)范時(shí)更加完整，內(nèi)容更齊全，形象更高端。文件定位不一樣，內(nèi)容也可以不那么相同。
總結(jié)，一切從實(shí)際出發(fā)，滿足某個(gè)階段的需求。
作者簡(jiǎn)介：Sophia的玲瓏閣，一枚愛折騰，愛健身的交互設(shè)計(jì)妹紙。
聯(lián)系客服
