一、什么是金剛區(qū)
金剛區(qū)通常指的是 banner 或搜索框下以宮格形式排列的多個圖標，數(shù)量上多采用1-2行，每行展示5個圖標，再多會顯得擁擠。大多數(shù)金剛區(qū)都可以左右滑動，以便查看更多的內(nèi)容。如下圖：

網(wǎng)頁設(shè)計

為什么叫金剛區(qū)呢？這個名稱來源于百變金剛，由于產(chǎn)品迭代或功能調(diào)整變更，金剛區(qū)可以很靈活的進行替換，就像一個百變金剛一樣，故稱之為金剛區(qū)。比如每到春節(jié)等重要節(jié)日，金剛區(qū)就可以很方便換上一身“新衣服”。如下圖：

網(wǎng)頁設(shè)計

二、金剛區(qū)的作用
金剛區(qū)的主要作用就是把多種功能匯聚到一起，方便用戶查看選擇，同時起到導(dǎo)流的作用。
三、金剛區(qū)常見樣式
我粗略地把金剛區(qū)分為兩大類，有底板的和沒有底板的。有底板的通常用一個固定的形狀再加上其他元素組成圖標，更容易做到視覺上的統(tǒng)一，使頁面看起來更整齊規(guī)整，同時對比強烈，更容易吸引注意力。而沒有底板更難把握視覺上的平衡。
1.有底板
1.1.底板形狀
常見底板形狀有圓形、超橢圓形、圓角矩形、三種，歸根到底都是大圓角、非常接近圓形，而很少見以方形作為底板形狀的。這是因為相同尺寸的圓形和正方形，圓形的面積更小，在視覺上會展現(xiàn)出較大的空隙，不會顯得特別擁擠，更容易聚焦內(nèi)容，同時圓形具有很強的親和力，適用于大多數(shù)場景。如下圖：

網(wǎng)頁設(shè)計

1.2.底板顏色
通常采用鄰近色或同類色，并添加漸變提高質(zhì)感。底板使用豐富的色彩使得圖標和頁面對比強烈，更容易吸引用戶的注意力。以貝殼找房為例，進入首頁的第一眼，視線就被頂部的金剛區(qū)所吸引，如下圖：

網(wǎng)頁設(shè)計

1.3.構(gòu)成元素
底板上的元素有很多種，常見的有線性、面形圖標、文字、實物照片、logo等。金剛區(qū)不僅要吸引用戶的注意力，同時還要做到能明確表達它所代表的功能作用，所以盡量使用識別度高、一目了然的圖標，而添加字體或?qū)嵨镎掌鳛閳D標，比較容易讓人理解。如下圖：

網(wǎng)頁設(shè)計

2.沒有底板
2.1.線性圖標
線性圖標在視覺上簡潔、安穩(wěn)沉靜、有質(zhì)感，大多數(shù)金融產(chǎn)品最常使用線性圖標，更容易突出理智、安全可靠的情感，如下圖：

網(wǎng)頁設(shè)計

2.2.圖形圖標
圖形圖標樣式很多，常見的有扁平、擬物、2.5D等，可以展示更多的設(shè)計細節(jié)，增強視覺上的表現(xiàn)力，但是圖標表意容易模糊，對文字的依賴性較大，而且更新迭代替換替換金剛區(qū)的成本較大，如下圖：

網(wǎng)頁設(shè)計

2.3.實物照片
實物照片可以帶來真實、可靠的感覺，表達清晰，用戶一眼就能知道其代表的意思，同時使用實物照片替換金剛區(qū)時所花費的設(shè)計成本較低。

網(wǎng)頁設(shè)計

四、劃重點
今天主要分享的內(nèi)容是關(guān)于金剛區(qū)的一些思考，我總結(jié)了以下幾點：
1.有底板的金剛區(qū)在視覺上更統(tǒng)一、突出，容易吸引用戶的注意力；
2.金剛區(qū)使用圓形底板看起來整潔、不擁擠，且親和力較強，使用場景廣泛；
3.金剛區(qū)的圖標要明確表達出他的功能作用，所以要使用識別度高、一目了然的圖標。

新聞名稱：網(wǎng)頁金剛區(qū)設(shè)計思考
網(wǎng)頁鏈接：http://jinyejixie.com/news24/113524.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站改版、營銷型網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)站設(shè)計公司、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)