分析總結(jié) UI 設(shè)計(jì)的細(xì)分模塊才能更加深入到每一個細(xì)分設(shè)計(jì)中，在 App 的各模塊中，金剛區(qū)算是比較重要的存在之一。是頁面的核心功能區(qū)域，聚合了業(yè)務(wù)線的功能入口，設(shè)計(jì)的發(fā)揮影響了曝光度的強(qiáng)弱，是設(shè)計(jì)師需要重點(diǎn)深入的模塊。

今天黑馬哥將和大家一起探討一下關(guān)于金剛區(qū)模塊設(shè)計(jì)的千奇百態(tài)，從布局的樣式、圖標(biāo)設(shè)計(jì)的風(fēng)格、不局限于圖形表達(dá)的形式等方向?yàn)榇蠹疫M(jìn)行梳理，希望可以讓你對金剛區(qū)模塊的設(shè)計(jì)有更深入的理解。

分享目錄

• 關(guān)于金剛區(qū)模塊
• 金剛區(qū)圖標(biāo)設(shè)計(jì)類型
• 設(shè)計(jì)指南和注意事項(xiàng)
• 線上優(yōu)秀案例分析
• 總結(jié)

關(guān)于金剛區(qū)模塊

金剛區(qū)模塊是整個界面布局的核心功能區(qū)域，通常布局在頁面頂部 Banner 之下，金剛區(qū)的功能模塊不會固定化，會根據(jù)業(yè)務(wù)目標(biāo)的變更進(jìn)行靈活調(diào)整。這種可變化組合的靈活性就像百變金剛一樣，所以大家才把這個功能區(qū)域稱之為金剛區(qū)。

由于金剛區(qū)所屬位置為核心區(qū)域，相當(dāng)于流量站，可以聚焦業(yè)務(wù)功能為其帶來更好的曝光度。服務(wù)于整個產(chǎn)品架構(gòu)，一方面可以為業(yè)務(wù)進(jìn)行導(dǎo)流，給產(chǎn)品中的各業(yè)務(wù)版塊進(jìn)行引流；另一方面也是一種功能選擇入口，為用戶提供不同功能的選擇和切換，享受功能帶來的服務(wù)。這也是金剛區(qū)在設(shè)計(jì)中需要重點(diǎn)對待的原因，也是迭代更新相對比較頻繁的因素。

金剛區(qū)通常以單行或者多行進(jìn)行宮格布局，以“圖標(biāo)+文字”的形式進(jìn)行展示。一般為 1~3 行圖標(biāo)展示，超過 3 行的比較少。單行的圖標(biāo)展示數(shù)量最佳選擇在 4~5 個，如果超過 5 個的一般會采用左右滑動的交互形式。在后續(xù)也會繼續(xù)為大家梳理設(shè)計(jì)的類型，在設(shè)計(jì)上面的一些技巧和案例分析。

金剛區(qū)圖標(biāo)設(shè)計(jì)類型

金剛區(qū)模塊的設(shè)計(jì)類型通常是以“圖標(biāo)+文字”的形式，而圖標(biāo)的設(shè)計(jì)方向不局限于圖形化的表達(dá)，從視覺表現(xiàn)層分析會有圖形化圖標(biāo)設(shè)計(jì)、商品實(shí)物展示、人物形象引用、混合搭配、文字化結(jié)合、節(jié)日/主題設(shè)計(jì)等形式。格式上來歸類會有靜態(tài)格式和動態(tài)格式，微動效的表達(dá)通常是局部圖標(biāo)動效，接下來我們詳細(xì)的梳理一下。

1. 圖形化圖標(biāo)設(shè)計(jì)

金剛區(qū)圖標(biāo)設(shè)計(jì)以圖形化的形式表達(dá)是最為通用的，圖標(biāo)設(shè)計(jì)的風(fēng)格有線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合、微質(zhì)感等。而面性圖標(biāo)有直接進(jìn)行圖形設(shè)計(jì)的形式，也有以基礎(chǔ)圖形（圓形、圓角矩形等）作為外輪廓加內(nèi)部圖標(biāo)組成。

這種結(jié)合業(yè)務(wù)或者功能模塊的關(guān)鍵詞進(jìn)行圖標(biāo)創(chuàng)作，是金剛區(qū)最為簡單的設(shè)計(jì)切入口，也是考驗(yàn)設(shè)計(jì)師圖標(biāo)設(shè)計(jì)能力的關(guān)鍵。

2. 商品實(shí)物展示

除了圖形化的圖標(biāo)設(shè)計(jì)以外，以主營業(yè)務(wù)為代表的商品實(shí)物照片作為圖標(biāo)運(yùn)用也是一個方向，單獨(dú)展示或配有背景底版展示均可。商品實(shí)物展示可以帶來真實(shí)感，給人一種可靠的感覺，表現(xiàn)形式簡單粗暴，就是缺少一定的設(shè)計(jì)感，商品展示的視覺比重把控有一定的難度。

商品實(shí)物圖展示容易給用戶錯誤的信息傳達(dá)，會誤以為就是配圖的商品，但是功能模塊的傳播并不一定指的是特定的某一個商品。如果經(jīng)常更換商品圖片也很難形成用戶記憶，需要依靠文案信息的傳遞強(qiáng)化記憶，對于用戶來說認(rèn)知壓力增大。

3. 人物形象引用

除了進(jìn)行圖標(biāo)設(shè)計(jì)以外，也有一些產(chǎn)品會用到明星頭像、游戲角色、公眾人物形象等圖片引用為圖標(biāo)進(jìn)行展示，通常為配合特定的運(yùn)營活動推廣出現(xiàn)。比如某部影片上線、某款游戲上線、特別事件紀(jì)念活動等。

4. 混合搭配

在對接業(yè)務(wù)需求的時(shí)候，單一的形式無法滿足差異化的業(yè)務(wù)需求，金剛區(qū)模塊的設(shè)計(jì)會混合搭配。混合搭配雖然可以滿足業(yè)務(wù)需求，但是混合搭配容易在風(fēng)格上互相排斥，感官體驗(yàn)難以掌控。

通常為了視覺效果盡量統(tǒng)一，會選擇基礎(chǔ)圖形作為統(tǒng)一的外輪廓，使其與其它圖標(biāo)設(shè)計(jì)風(fēng)格相對搭配。

5. 文字化結(jié)合

為了配合特定主題活動的推廣，金剛區(qū)圖標(biāo)設(shè)計(jì)也會結(jié)合文字化的形式表達(dá)，突出活動主題。這種形式主題突出，活動針對性強(qiáng)，可以最大化的提高主題活動的曝光度。

當(dāng)然，這種形式只適合在活動期間使用，匹配功能模塊的辨識度較低。

6. 節(jié)日/主題設(shè)計(jì)

在一些節(jié)日主題活動中，為了增強(qiáng)節(jié)日氛圍，除了將節(jié)日主題文字化結(jié)合設(shè)計(jì)以外，也可以將節(jié)日關(guān)聯(lián)性的元素結(jié)合到圖標(biāo)設(shè)計(jì)中。可以在特定的節(jié)日或者主題活動中使設(shè)計(jì)細(xì)節(jié)更豐富，不過時(shí)效性較低，過于依賴文案說明，適合活動期間使用。

7. 圖標(biāo)微動效

金剛區(qū)圖標(biāo)微動效運(yùn)用越發(fā)頻繁，相較于靜態(tài)圖標(biāo)來說更能引起用戶的關(guān)注。適用于需要重點(diǎn)強(qiáng)調(diào)的功能模塊，可以在金剛區(qū)模塊中形成差異。

圖標(biāo)設(shè)計(jì)的類型千奇百態(tài)，豐富的樣式不斷刷新著我們的設(shè)計(jì)認(rèn)知，這里只是列舉了方向性的延展。為大家梳理出大綱方向，期待發(fā)現(xiàn)更多不同的設(shè)計(jì)解決方案。

設(shè)計(jì)指南和注意事項(xiàng)

了解金剛區(qū)模塊的設(shè)計(jì)方向之后，我們在進(jìn)行實(shí)戰(zhàn)設(shè)計(jì)的時(shí)候也需要避免一些因素，更好的還原設(shè)計(jì)需求和增加用戶感官體驗(yàn)。

1. 圖標(biāo)數(shù)量

金剛區(qū)模塊以“圖標(biāo)+文字”的形式展示，圖標(biāo)單行 4~5 個為最佳，低于 4 個顯得松散，高于 5 個通常需要結(jié)合左右滑動交互。一般都控制在 3 行以內(nèi)，超過的相對比較少，版面占用太大，用戶選擇性過于密集。

2. 圖標(biāo)設(shè)計(jì)尺寸

金剛區(qū)圖標(biāo)設(shè)計(jì)尺寸沒有硬性規(guī)定，通過經(jīng)驗(yàn)規(guī)范下來，如果是沒有外輪廓作為背景的情況下，圖標(biāo)尺寸的范圍一般在 44~98px 左右（@2x）；加上外輪廓的情況下一般在 80~98px 左右（@2x）。尺寸的范圍僅為參考，根據(jù)圖標(biāo)造型的繁簡度不同都會形成差異，最終要以預(yù)覽效果為準(zhǔn)。

3. 外輪廓內(nèi)圖形尺寸

如果金剛區(qū)圖標(biāo)使用了帶有外輪廓作為背景來進(jìn)行設(shè)計(jì)，內(nèi)部圖形的尺寸需要結(jié)合外輪廓尺寸來確定。太大會顯得很滿，給人壓抑感；太小會使得負(fù)空間過多，顯得很空。沒有強(qiáng)制的尺寸要求，通常以經(jīng)驗(yàn)來判斷，內(nèi)部圖形的尺寸一般控制在外輪廓大小的 1/2 左右，極小值設(shè)置在 2/5 偏上，極大值設(shè)置在 3/5 偏下，增減誤差一般不會太大。數(shù)字關(guān)系僅為參考，具體還要以實(shí)際預(yù)覽效果為準(zhǔn)，圖標(biāo)的繁簡程度都可能會干擾到數(shù)據(jù)的變化。

4. 圖標(biāo)均分原則

金剛區(qū)圖標(biāo)單行布局一般都是 4 個或者以上，在進(jìn)行布局的時(shí)候我們會根據(jù)一些均分原則來進(jìn)行，這樣更能使得設(shè)計(jì)規(guī)范。

通常有三種均分方式：第一種是寬度等分原則，根據(jù)布局圖標(biāo)數(shù)量將界面寬度等分，每一個圖標(biāo)居中布局在等分內(nèi)部；第二種是邊距固定原則，用相同樣式設(shè)置好左右邊距，然后根據(jù)圖標(biāo)數(shù)量自然均分；第三種是固定間距原則，一般適合帶有左右滑動的情況，固定好圖標(biāo)之間的間距不變，根據(jù)圖標(biāo)數(shù)量自然顯示或者遮擋。

5. 圖標(biāo)配色方向

金剛區(qū)圖標(biāo)顏色的選擇方向除了直接采用品牌色以外，也會使用品牌色作為點(diǎn)綴，通常出現(xiàn)在簡單的線性圖標(biāo)和面性圖標(biāo)中。如果是一些微質(zhì)感的圖標(biāo)設(shè)計(jì)，配色會比較多樣化一些，除了采用同色系變化以外，也可以在鄰近色和類似色中選擇，這些都是容易把控的方向。如果要采用多種顏色且色相角度差異較大的，需要把控好色彩之間的數(shù)字關(guān)聯(lián)性，這個在以后的配色課程可以和大家深入探索。

6. 圖標(biāo)設(shè)計(jì)的差異化

在同質(zhì)化的設(shè)計(jì)中，差異化的設(shè)計(jì)才能拉開與競品的關(guān)系，增加產(chǎn)品的辨識度。除了在本身的圖標(biāo)造型和色彩關(guān)系上進(jìn)行差異以外，結(jié)合自身的品牌基因也是一個重點(diǎn)探索的方向。在外輪廓上面也有一些產(chǎn)品在不斷改變，從圓形輪廓到圓角矩形，再到超橢圓的細(xì)微變化，也有采用橢圓輪廓和特殊圖形輪廓，或者結(jié)合品牌的特征關(guān)系進(jìn)行延展等。從大的造型特征到細(xì)節(jié)的探索改變，設(shè)計(jì)師都在不斷地尋求新的差異化設(shè)計(jì)切入口。

7. 圖標(biāo)樣式如何選擇

金剛區(qū)圖標(biāo)設(shè)計(jì)的主要方向是線性圖標(biāo)、面性圖標(biāo)和微質(zhì)感等，在選擇的時(shí)候要結(jié)合自己的實(shí)際需求來判斷。在屬性層面主要可以劃分為功能型金剛區(qū)和業(yè)務(wù)型金剛區(qū)，一種是以產(chǎn)品核心功能為主，為用戶提供各種服務(wù)；另一種是以業(yè)務(wù)導(dǎo)流為主，提高業(yè)務(wù)模塊的曝光度。

功能型金剛區(qū)：由于以產(chǎn)品提供的功能服務(wù)為主，用戶的自主性較強(qiáng)。通常運(yùn)用較多的是線性風(fēng)格的圖標(biāo)設(shè)計(jì)，在視覺呈現(xiàn)上更加理智沉穩(wěn)，模塊布局也更加統(tǒng)一整體。比如銀行類產(chǎn)品、支付寶、工具型產(chǎn)品等，不過這只是相對而言，也有采用面性圖標(biāo)的設(shè)計(jì)，不過樣式通常不會過于繁瑣，以簡約設(shè)計(jì)為主。

業(yè)務(wù)型金剛區(qū)：由于是以業(yè)務(wù)導(dǎo)流為主，需要視覺沖擊力比較強(qiáng)的設(shè)計(jì)風(fēng)格，而面性圖標(biāo)和微質(zhì)感圖標(biāo)相對比較適合，能夠更快的吸引用戶的關(guān)注度而完成業(yè)務(wù)導(dǎo)流的作用。為了提高用戶關(guān)注度，也會采用圖標(biāo)動效進(jìn)行結(jié)合，增加主推業(yè)務(wù)的曝光度。

8. 推薦設(shè)計(jì)

為了提高金剛區(qū)某個業(yè)務(wù)模塊或者功能服務(wù)，會在金剛區(qū)圖標(biāo)中進(jìn)行推薦設(shè)計(jì)，以強(qiáng)化突出特定功能模塊。

通常有兩種主要的解決方向，一種是添加標(biāo)簽設(shè)計(jì)，一般出現(xiàn)在圖標(biāo)的右上角居多，靜態(tài)和動態(tài)的均可，起到強(qiáng)化突出的目的。第二種就是圖標(biāo)動效的運(yùn)用，給需要突出的圖標(biāo)添加動效來吸引用戶視線，進(jìn)而達(dá)到推薦的目的。不過動效的形式不適合推薦數(shù)過多，會形成相互干擾，反而達(dá)不到推薦的目的。

雖然只是產(chǎn)品設(shè)計(jì)中的一個細(xì)分模塊，我們在設(shè)計(jì)的時(shí)候依然需要深入的探索，增加每一個細(xì)分模塊的設(shè)計(jì)質(zhì)量，帶給用戶更好使用體驗(yàn)。這里只是列舉了一些主要的設(shè)計(jì)注意事項(xiàng)，希望拋磚引玉，帶給大家一些金剛區(qū)的設(shè)計(jì)思路。

線上優(yōu)秀案例分析

當(dāng)我們對金剛區(qū)圖標(biāo)設(shè)計(jì)的知識點(diǎn)有了一定掌握之后，在設(shè)計(jì)的過程中也不會毫無方向。接下來為了強(qiáng)化大家的記憶，為大家總結(jié)了一些優(yōu)秀的設(shè)計(jì)案例，站在優(yōu)秀的基礎(chǔ)上才能思考得更深入，創(chuàng)作出更優(yōu)秀的設(shè)計(jì)方案。

1. 品牌色的強(qiáng)化和點(diǎn)綴

為了突出品牌感，在金剛區(qū)圖標(biāo)設(shè)計(jì)上面采用品牌色強(qiáng)化是最常見的處理形式。直接將品牌色作為圖標(biāo)配色無論是線性圖標(biāo)還是面性圖標(biāo)都適合，不過相對來說在面性圖標(biāo)上面比較多一點(diǎn)。線性圖標(biāo)通常偏向于功能型產(chǎn)品運(yùn)用較多，而品牌色多作為點(diǎn)綴來使用，不僅可以強(qiáng)化品牌感，也能豐富線性圖標(biāo)樣式。

2. 商品實(shí)物替換圖標(biāo)設(shè)計(jì)

除了圖形設(shè)計(jì)層面的表現(xiàn)以外，一些產(chǎn)品會選擇將商品實(shí)物照片作為金剛區(qū)的圖標(biāo)來呈現(xiàn)。比如果蔬類、圖書類、服裝類等，就將商品實(shí)物圖片摳圖處理，直接作為圖標(biāo)展示，也有結(jié)合外輪廓背景呈現(xiàn)，真實(shí)感的體現(xiàn)帶給用戶場景代入感。

3. 微質(zhì)感圖標(biāo)增強(qiáng)層次感

在一些以業(yè)務(wù)導(dǎo)流為主的產(chǎn)品中，業(yè)務(wù)型金剛區(qū)圖標(biāo)設(shè)計(jì)以強(qiáng)視覺感為主。微質(zhì)感的圖標(biāo)設(shè)計(jì)運(yùn)用最為普及，可以讓圖標(biāo)的層次感更強(qiáng)，帶來的視覺吸引力也比較明顯，更能引起用戶的關(guān)注。目前微質(zhì)感的體現(xiàn)主要有兩個方向，無輪廓背景的形式和有輪廓背景的形式，無輪廓背景主要是通過色彩的變化和圖層樣式的調(diào)節(jié)來深入。有輪廓背景的質(zhì)感強(qiáng)化除了在色彩和圖層樣式上面深入以外，利用白色的不透明度變化也是一個不錯的技巧。

4. 立體圖標(biāo)的空間感強(qiáng)化

隨著三維軟件的不斷普及，很多 UI 設(shè)計(jì)師也掌握了一些基本的三維設(shè)計(jì)能力，金剛區(qū)圖標(biāo)采用立體圖標(biāo)來表現(xiàn)，相較于扁平化的設(shè)計(jì)來說空間感更強(qiáng)。在進(jìn)行透視角度把控的時(shí)候，要選擇統(tǒng)一的視角進(jìn)行表達(dá)。現(xiàn)在很多立體圖標(biāo)的效果也并非一定需要三維軟件實(shí)現(xiàn)，只要控制好透視的角度，PS、AI 或者 Sketch 軟件等均可以實(shí)現(xiàn)。

5. 生活中的靈感提煉

俗話說：“靈感來源于生活”，基于生活中的物品進(jìn)行靈感提煉，是圖形創(chuàng)意常用的手法之一。比如自如 App 的金剛區(qū)圖標(biāo)設(shè)計(jì)，就將生活中的物品造型進(jìn)行圖形化提煉而成，場景代入感不僅更好的輔助用戶對功能模塊的理解，設(shè)計(jì)風(fēng)格也十分的清新自然。

6. 微動效的關(guān)注度強(qiáng)化

在需要特別突出單個或者多個功能模塊的時(shí)候，除了進(jìn)行標(biāo)簽設(shè)計(jì)突出以外，圖標(biāo)動效也是最為常見的處理形式。動效的圖標(biāo)可以更好的引起用戶的關(guān)注度，只是需要控制動效的頻率和數(shù)量，太多的動效也容易形成互相干擾，需要有動效重點(diǎn)和主次分離。

7. IP 形象角色的設(shè)計(jì)融入

在一些兒童類產(chǎn)品中，金剛區(qū)會采用一些可愛的 IP 形象進(jìn)行設(shè)計(jì)，除了結(jié)合自身產(chǎn)品的吉祥物進(jìn)行發(fā)揮以外，也會結(jié)合主推業(yè)務(wù)的形象進(jìn)行提煉。比如寶寶巴士旗下的系列產(chǎn)品，采用了眾多 IP 形象作為圖標(biāo)設(shè)計(jì)，童趣可愛的風(fēng)格更能引起小朋友的關(guān)注。

8. 文字化圖標(biāo)設(shè)計(jì)

為了配合運(yùn)營活動推廣，金剛區(qū)圖標(biāo)也會在活動期間結(jié)合活動主題進(jìn)行設(shè)計(jì)，其中主題文字化圖標(biāo)設(shè)計(jì)也是較為常見的形式。直接將文字進(jìn)行圖形化表達(dá)，或者配合活動關(guān)聯(lián)元素進(jìn)行組合創(chuàng)作。這種形式主題突出，活動針對性強(qiáng)，可以最大化的提高主題活動的曝光度。

9. 特殊需求下的混合搭配

為了滿足業(yè)務(wù)需求，固定的形式無法被采用，就會呈現(xiàn)出混合搭配的形式。這種形式雖然可以滿足需求，但是風(fēng)格很難做到統(tǒng)一，如果有固定的外形輪廓作為基礎(chǔ)圖形背景，算是一個相對合理的解決方案。

10. 磨砂玻璃圖標(biāo)設(shè)計(jì)風(fēng)格

磨砂玻璃的圖標(biāo)受到很多設(shè)計(jì)師的追捧，最早在一些設(shè)計(jì)平臺出現(xiàn)，后來國內(nèi)一些產(chǎn)品也都有應(yīng)用，比如自如、騰訊視頻等。這種類似于特殊材質(zhì)的運(yùn)用也是很多設(shè)計(jì)趨勢所表露出來的，介于扁平和寫實(shí)之間的微質(zhì)感，帶給用戶一種輕質(zhì)感的體驗(yàn)。

總結(jié)

金剛區(qū)模塊設(shè)計(jì)無論是從布局樣式還是圖標(biāo)設(shè)計(jì)風(fēng)格上面，都有非常豐富的優(yōu)秀案例作為靈感來源。這里只是為大家進(jìn)行拋磚引玉，分析 UI 設(shè)計(jì)中的細(xì)分模塊，讓我們可以更加深入的探索設(shè)計(jì)細(xì)節(jié)和研究設(shè)計(jì)原理。

希望本文的分享可以帶給你關(guān)于金剛區(qū)模塊設(shè)計(jì)的思路和技巧，我們后續(xù)再和大家探討更多細(xì)分設(shè)計(jì)的技巧和經(jīng)驗(yàn)。

歡迎關(guān)注作者的微信公眾號：「黑馬家族」