1.布局方法

　?、夙?yè)內(nèi)等分

　　等分快速錄入可以表示為(1~3)行×(4~5)列的矩陣，也有6列(起點(diǎn)選擇頁(yè)面)，但不常見(jiàn)。

　　在設(shè)計(jì)時(shí)，我們優(yōu)先考慮確定每個(gè)背景視圖的大小。怎么會(huì)？首先，是寬度。單個(gè)視圖的寬度并不重要。重要的是總寬度，也就是390減去頁(yè)面兩邊的頁(yè)邊距(頁(yè)邊距不固定，根據(jù)實(shí)際情況設(shè)置)，然后用這個(gè)值除以列數(shù)。這是背景視圖的寬度。

　　高度應(yīng)該根據(jù)圖標(biāo)和文本區(qū)域的總高度來(lái)確定。例如，圖標(biāo)(包括安全區(qū)域或幾何背景)為44×44pt，文本部分12pt的默認(rèn)高度為17pt，圖標(biāo)與文本之間的距離為4pt，上下邊距為8pt，因此視圖的總高度為44+17+4+8×2=81pt。

　　當(dāng)然在身高這一項(xiàng)，上下間距更獨(dú)立。也可以選擇留較小或較大的間距，從視覺(jué)上調(diào)整矩陣的緊密度，尤其是多行矩陣。你需要多注意上下排的距離，會(huì)影響觀感?？傊磺幸栽O(shè)計(jì)師所期望的視覺(jué)效果為準(zhǔn)。

　?、跐L動(dòng)超出范圍。

　　雖然大部分平分的詞條矩陣也可以采用多頁(yè)滾動(dòng)的形式(淘寶，JD。COM)，我們這里說(shuō)的越界滾動(dòng)，更接近于滾動(dòng)卡片的非等差形式，會(huì)在最右邊界切割，比如網(wǎng)易云和Keep。

　　在這個(gè)布局中，我們需要優(yōu)先考慮圖標(biāo)之間的間距，將其調(diào)整為折疊以上4到5，默認(rèn)暴露下一個(gè)圖標(biāo)的一部分。最左邊的圖標(biāo)可以與頁(yè)面元素的其余部分左對(duì)齊。

　　③主輔布局

　　有些app需要更清晰的區(qū)分入口的權(quán)重，所以會(huì)使用強(qiáng)弱對(duì)比的主入口和輔助入口。主門(mén)戶和輔助門(mén)戶屬于同等范疇。兩個(gè)入口的背景視圖可以是不同的高度和寬度(支付寶)，也可以是相同的高度和寬度(馬蜂窩)。

　　在實(shí)際設(shè)計(jì)過(guò)程中，兩類入口的背景視野面積可根據(jù)等分原則確定。

　　2.視覺(jué)形式

　　①圖標(biāo)/文本

　　我們?nèi)粘Ｉ钪惺褂玫腶pp，大多采用上圖下文的視覺(jué)形式，具有更普遍的適用性。

　?、诳ㄆ问?/p>

　　上一篇文章在磁貼區(qū)提到，有些快速入口會(huì)像磁貼區(qū)一樣做成卡片拼貼，指的就是下圖這種視覺(jué)形式。

　　卡片形式的入口對(duì)平面設(shè)計(jì)能力要求很高，尤其是權(quán)重最高的入口。由于快速入口只能使用圖形來(lái)裝飾內(nèi)容，為了配合這些入口的權(quán)重，設(shè)計(jì)師往往需要繪制比一般圖標(biāo)更高精細(xì)度的插畫(huà)，所以我不建議初學(xué)者嘗試這種風(fēng)格。

　?、壑鬏o形式。

　　不同類型的圖標(biāo)通常用于在對(duì)應(yīng)于主布局和輔助布局的視覺(jué)形式中表達(dá)不同的權(quán)重。權(quán)重較高的圖標(biāo)通常使用更復(fù)雜的插圖圖標(biāo)，而權(quán)重較低的圖標(biāo)則使用基本的線性、平面或線-面混合圖標(biāo)。

　　像支付寶、美團(tuán)這樣的app反而用最簡(jiǎn)單的線性圖標(biāo)來(lái)表達(dá)功能的核心和基礎(chǔ)；重量使用不同的背景顏色進(jìn)行物理區(qū)分。

　　3.圖標(biāo)類型

　　①基本坡度

　　通過(guò)在基本圖形上添加相同色調(diào)、不同明度的漸變，可以做出一組簡(jiǎn)單而足夠的快速入門(mén)圖標(biāo)。雖然不適合風(fēng)格化很強(qiáng)的App頁(yè)面，但是比它的多功能性要好，無(wú)論是首頁(yè)還是個(gè)人頁(yè)面都可以使用。

　?、趲缀伪尘?/p>

　　意思是圖標(biāo)有純幾何背景，有圓角矩形或圓形，而實(shí)際圖標(biāo)一般用純色或漸變。這類圖標(biāo)的好處是更容易統(tǒng)一視覺(jué)大小，而且由于實(shí)際圖標(biāo)不需要過(guò)多的裝飾，設(shè)計(jì)起來(lái)也更簡(jiǎn)單。

　　然而，幾何背景圖標(biāo)有一些高級(jí)的變體。背景可以做成不規(guī)則的形狀，更多的細(xì)節(jié)(甚至3D)可以添加到圖標(biāo)上?？傊梢园阉鼈冏龅煤芑ㄉ?，比如美團(tuán)外賣的入口圖標(biāo):

　?、垲伾丿B

　　因?yàn)閳D標(biāo)中有兩個(gè)重疊的部分，所以這個(gè)部分比較暗。這類圖標(biāo)本質(zhì)上和漸變是一樣的，是一種顏色應(yīng)用的手段。但是重疊圖標(biāo)很少使用，所以相對(duì)來(lái)說(shuō)更容易識(shí)別。

　?、芷矫娌鍒D

　　在圖標(biāo)中直接使用插圖，自由度更高，同時(shí)風(fēng)格化更明顯，非常有利于品牌風(fēng)格的塑造。唯一的缺點(diǎn)就是對(duì)設(shè)計(jì)師的要求比較高。舉例來(lái)說(shuō)，平坦或微梯度都是可能的。前者更容易表現(xiàn)場(chǎng)景，后者則傾向于更立體的觀感。

　?、莶ＡM態(tài)

　　最近幾年火的風(fēng)格化設(shè)計(jì)之一，做起來(lái)很簡(jiǎn)單但是很有視覺(jué)效果。功能圖標(biāo)中會(huì)有兩個(gè)層次的上下關(guān)系。下層往往采用漸變或純色塊，上層圖形會(huì)模擬亞克力、云母、磨砂玻璃的質(zhì)感。這是通過(guò)模糊背景并在邊緣添加高光筆畫(huà)來(lái)實(shí)現(xiàn)的。