快速入口?(Quick Links / Quick Access)，國內(nèi)也會用頗具東方特色的「金剛區(qū)」來稱呼。在一個結(jié)構(gòu)比較復(fù)雜的APP首頁或者主頁面中，快速入口往往扮演著功能導(dǎo)航、曝光和引流的運(yùn)營角色，通常表現(xiàn)為一組有序排列的圖形入口。

快速入口不管是位置還是權(quán)重都處于頁面的中心地帶，所以設(shè)計時需要格外注意基礎(chǔ)和細(xì)節(jié)。這里我會介紹一些快速入口通用且基礎(chǔ)的設(shè)計方法，但因為這個組件變化非常多樣，所以可能無法面面俱到。諸如更符合頁面需要的布局方式，以及圖標(biāo)如何繪制等，這些將是大家需要長期打磨練習(xí)的地方。

當(dāng)一個頁面內(nèi)除開本身需要承載的內(nèi)容之外，還需置入超過四個功能模塊的入口時，我們就可以考慮使用快速入口這個占用空間小，信息密度大且美觀的入口展示形式，故而在多數(shù)App中快速入口集中出現(xiàn)在主頁和個人頁；而在諸如美團(tuán)、大眾點評等綜合性更強(qiáng)的App中，下級分類頁面也會使用快速入口。

所以總結(jié)下來，快速入口大多出現(xiàn)在：首頁、下級主頁、個人頁這三個地方。

快速入口在頁面中的地位應(yīng)該無需贅述，各位用多了APP也能總結(jié)出它常常出現(xiàn)在主要頁面中中間靠上的核心區(qū)域。如果有Banner，則通常會出現(xiàn)在Banner下方，如果沒有Banner，則會直接置于標(biāo)題欄下方。

布局方法

1.頁面內(nèi)等分

等分的快速入口可以表現(xiàn)為一個 (1~3)行× (4~5)列的矩陣，6列的也有 (起點精選頁)，但是比較不常見。

設(shè)計時我們優(yōu)先確定每個背景視圖的尺寸，如何確定呢？首先是寬度，單個視圖的寬度具體是多少其實并不重要，重要的是總寬度，即390減去頁面兩側(cè)邊距的大?。ㄟ吘嗖还潭?，根據(jù)實際情況設(shè)置），再用這個數(shù)值除以列數(shù)，這就是背景視圖的寬度。

高度則需要根據(jù)圖標(biāo)和文字區(qū)域的總高來確定，例如圖標(biāo) (包含安全區(qū)域或幾何背景) 為44×44pt，文字段12pt蘋方默認(rèn)高17pt，圖標(biāo)和文字之間給4pt間距，上下邊距8pt，那么視圖的總高就是44+17+4+8×2=81pt。

當(dāng)然高度這一項中，上下間距的自主性比較大，你也可以選擇留更小或更大的間距來調(diào)節(jié)矩陣在視覺上的松緊程度，尤其是多行矩陣，更需要注意上下行之間的遠(yuǎn)近，這會影響觀感?？傊磺卸家栽O(shè)計師預(yù)期的視覺效果為準(zhǔn)。

2.超范圍滾動

盡管大多數(shù)等分的入口矩陣同樣可以采用多分頁滾動的形式 (淘寶、京東)，不過我們這里說的超范圍滾動則更接近于滾動卡片那種非等分的，會在最右側(cè)邊界被裁斷的形式，例如網(wǎng)易云、Keep。

在這種布局下，我們需要優(yōu)先確定圖標(biāo)與圖標(biāo)之間的間距，將它們調(diào)整到第一屏有4至5個，且默認(rèn)露出下一個圖標(biāo)的一部分。最左側(cè)的圖標(biāo)與其余頁面元素左對齊即可。

3.主副型布局

有些APP需要更加明確地區(qū)分入口的權(quán)重，則會采用強(qiáng)弱對比的主副型入口，主副型入口屬于等分的一種，兩類入口的背景視圖可以不同高且不同寬 (支付寶)，也可以同高也高寬 (馬蜂窩)。

在實際設(shè)計過程中，按照等分的規(guī)則各自確定兩類入口的背景視圖區(qū)域即可。

視覺形式

1.圖標(biāo) / 文字

我們?nèi)粘Ｊ褂玫慕^大多數(shù)APP都采用了上圖標(biāo)下文字的視覺形式，這種形式具有更普遍的適用性。

2.卡片形式

之前在瓷片區(qū)的文章中有提到過，一些快速入口會像瓷片區(qū)一樣做成卡片拼貼的樣式，指的就是如下圖所示的這種視覺形式。

卡片形式的入口對圖形設(shè)計能力要求頗高，尤其是幾個權(quán)重最高的入口，由于快速入口只能使用圖形來修飾內(nèi)容，為了匹配這幾個入口的權(quán)重，設(shè)計師往往需要繪制精細(xì)度比一般圖標(biāo)更高的插畫，所以我并不推薦新手嘗試這種樣式。

3.主副形式

與主副型布局相對應(yīng)的視覺形式，通常會采用不同類型的圖標(biāo)來表達(dá)不同的權(quán)重，權(quán)重高者往往使用更精細(xì)的插畫圖標(biāo)，權(quán)重低者則使用基礎(chǔ)的線性、面性或線面混合圖標(biāo)。

而像支付寶、美團(tuán)這樣的App，反而使用最簡單的線性圖標(biāo)來表達(dá)功能之核心，之基礎(chǔ)；權(quán)重則使用不同的背景色來物理區(qū)分。

圖標(biāo)類型

1.基礎(chǔ)漸變

在基礎(chǔ)圖形上加入了同色相不同明度的漸變，就可以做出一套簡單、夠用的快速入口圖標(biāo)，盡管不適合風(fēng)格化強(qiáng)烈的App頁面，但勝在通用性強(qiáng)，首頁、個人頁都能采用。

2.幾何背景

指的是圖標(biāo)擁有一個圓角矩形或者圓形的純幾何背景，實際圖標(biāo)則一般使用純色或漸變。這種類型的圖標(biāo)好處是更容易做到視覺大小的統(tǒng)一，并且由于實際圖標(biāo)方面不需要太多的修飾，設(shè)計起來也更加簡單。

不過幾何背景的圖標(biāo)也有進(jìn)階的變體，背景上可以做成不規(guī)則形狀，圖標(biāo)上也能加入更多細(xì)節(jié) (甚至3D)，總之能做得非?；ㄉ冢缑缊F(tuán)外賣的入口圖標(biāo)：

3.色彩交疊

因圖標(biāo)中存在重疊的兩部分而使得這部分色彩更深。這個類型的圖標(biāo)本質(zhì)上與漸變沒有區(qū)別，都是色彩運(yùn)用的一種手段，只不過交疊類圖標(biāo)使用得比較少見，所以會相對更具辨識度。

4.扁平插畫

在圖標(biāo)中直接使用插畫，自由度更高的同時，風(fēng)格化也更明顯，非常有利于品牌風(fēng)格的塑造，唯一的缺點是對設(shè)計師的要求相對偏高。對插畫來說，純扁平或是微漸變都是可以的，前者更易表達(dá)場景，后者則往往會有更加立體的觀感。

5.玻璃擬態(tài)

近年來大火的風(fēng)格化設(shè)計之一，做起來簡單卻很有視覺效果。特征是圖標(biāo)中的會出現(xiàn)兩個上下關(guān)系的層級，下層往往采用漸變或純色的色塊，上層圖形則會模擬亞克力、云母、磨砂玻璃的質(zhì)感。具體做法為背景模糊，以及為自身邊緣添加高光描邊。

近年來越來越多的在主流App中出現(xiàn)，例如飛豬、站酷。

6.實物圖片?

實物圖片一般多用于電商類APP，在進(jìn)行商品分類時會直接采用特征典型的商品，優(yōu)點是比圖標(biāo)更直觀、易辨認(rèn)，缺點是對圖片的要求較高，對視覺大小統(tǒng)一的調(diào)整也需要更加細(xì)致。

當(dāng)然，人像也算是實物圖片的一種，多用于影視類App。

除了上述6個比較常見的分類，快速入口這個區(qū)域的圖標(biāo)還有很多奇特的類型，例如2.5D軸測圖、文字類、3D類，甚至多種類型圖標(biāo)混合使用等等。因組件本身的設(shè)計開放性極大，幾乎沒法全部涵蓋到。所以圖標(biāo)類型方面的知識，還需要大家自己在工作和學(xué)習(xí)中慢慢積累。

自如

自如APP的快速入口設(shè)計向來別出心裁，值得大家一直放在手機(jī)里觀察它的設(shè)計改版。自如在這一版本中，將12個格子其中的兩個格子合并成了一個寬格，既強(qiáng)調(diào)了這個格子的內(nèi)容，又讓這三行圖標(biāo)發(fā)生了一定變化，不至于枯燥。

起點

在快速入口中加入動效聽起來是個很多余的做法，因為對這些圖標(biāo)的交互幾乎沒有觀察后續(xù)反饋的必要(都直接跳到另一個頁面了)。不過起點在這里做了一個動效的示例——在某個你想強(qiáng)調(diào)的圖標(biāo)中加入循環(huán)動效，可以起到吸引用戶注意力的作用。

其他樣式

結(jié)尾

快速入口的組件就介紹到這，后續(xù)所有有關(guān)組件的介紹都會同步更新到我們的知識庫中！為了方便大家記得到里面查看。