新手科普！4個方面幫你快速熟悉UI組件中的「快速入口」

編者按：本文從組件介紹、使用場景、設計要點、樣式拓展4個方面，幫你快速熟悉UI組件中的金剛區設計。

上期回顧：

一、組件介紹

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

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

二、使用場景

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

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

快速入口在頁面中的地位應該無需贅述，各位用多了 APP 也能總結出它常常出現在主要頁面中中間靠上的核心區域。如果有 Banner，則通常會出現在 Banner 下方，如果沒有 Banner，則會直接置于標題欄下方。

三、設計要點

1. 布局方法

① 頁面內等分

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

設計時我們優先確定每個背景視圖的尺寸，如何確定呢？首先是寬度，單個視圖的寬度具體是多少其實并不重要，重要的是總寬度，即 390 減去頁面兩側邊距的大小（邊距不固定，根據實際情況設置），再用這個數值除以列數，這就是背景視圖的寬度。

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

當然高度這一項中，上下間距的自主性比較大，你也可以選擇留更小或更大的間距來調節矩陣在視覺上的松緊程度，尤其是多行矩陣，更需要注意上下行之間的遠近，這會影響觀感。總之一切都以設計師預期的視覺效果為準。

② 超范圍滾動

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

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

③ 主副型布局

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

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

2. 視覺形式

① 圖標 / 文字

我們日常使用的絕大多數 APP 都采用了上圖標下文字的視覺形式，這種形式具有更普遍的適用性。

② 卡片形式

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

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

③ 主副形式

與主副型布局相對應的視覺形式，通常會采用不同類型的圖標來表達不同的權重，權重高者往往使用更精細的插畫圖標，權重低者則使用基礎的線性、面性或線面混合圖標。

而像支付寶、美團這樣的 App，反而使用最簡單的線性圖標來表達功能之核心，之基礎；權重則使用不同的背景色來物理區分。

3. 圖標類型

① 基礎漸變

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

② 幾何背景

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

不過幾何背景的圖標也有進階的變體，背景上可以做成不規則形狀，圖標上也能加入更多細節 (甚至 3D)，總之能做得非常花哨，例如美團外賣的入口圖標：

③ 色彩交疊

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

④ 扁平插畫

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

⑤ 玻璃擬態

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

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

⑥ 實物圖片

實物圖片一般多用于電商類 APP，在進行商品分類時會直接采用特征典型的商品，優點是比圖標更直觀、易辨認，缺點是對圖片的要求較高，對視覺大小統一的調整也需要更加細致。

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

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

四、樣式拓展

1. 自如

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

2. 起點

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

3. 其他樣式

結尾

快速入口的組件就介紹到這，后續所有有關組件的介紹都會同步更新！