網頁金剛區設計思考
2021-05-14 分類： 網站建設
一、什么是金剛區
金剛區通常指的是 banner 或搜索框下以宮格形式排列的多個圖標，數量上多采用1-2行，每行展示5個圖標，再多會顯得擁擠。大多數金剛區都可以左右滑動，以便查看更多的內容。如下圖：
金剛區的主要作用就是把多種功能匯聚到一起，方便用戶查看選擇，同時起到導流的作用。
三、金剛區常見樣式
我粗略地把金剛區分為兩大類，有底板的和沒有底板的。有底板的通常用一個固定的形狀再加上其他元素組成圖標，更容易做到視覺上的統一，使頁面看起來更整齊規整，同時對比強烈，更容易吸引注意力。而沒有底板更難把握視覺上的平衡。
1.有底板
1.1.底板形狀
常見底板形狀有圓形、超橢圓形、圓角矩形、三種，歸根到底都是大圓角、非常接近圓形，而很少見以方形作為底板形狀的。這是因為相同尺寸的圓形和正方形，圓形的面積更小，在視覺上會展現出較大的空隙，不會顯得特別擁擠，更容易聚焦內容，同時圓形具有很強的親和力，適用于大多數場景。如下圖：
通常采用鄰近色或同類色，并添加漸變提高質感。底板使用豐富的色彩使得圖標和頁面對比強烈，更容易吸引用戶的注意力。以貝殼找房為例，進入首頁的第一眼，視線就被頂部的金剛區所吸引，如下圖：
底板上的元素有很多種，常見的有線性、面形圖標、文字、實物照片、logo等。金剛區不僅要吸引用戶的注意力，同時還要做到能明確表達它所代表的功能作用，所以盡量使用識別度高、一目了然的圖標，而添加字體或實物照片作為圖標，比較容易讓人理解。如下圖：
2.1.線性圖標
線性圖標在視覺上簡潔、安穩沉靜、有質感，大多數金融產品最常使用線性圖標，更容易突出理智、安全可靠的情感，如下圖：
圖形圖標樣式很多，常見的有扁平、擬物、2.5D等，可以展示更多的設計細節，增強視覺上的表現力，但是圖標表意容易模糊，對文字的依賴性較大，而且更新迭代替換替換金剛區的成本較大，如下圖：
2.3.實物照片
實物照片可以帶來真實、可靠的感覺，表達清晰，用戶一眼就能知道其代表的意思，同時使用實物照片替換金剛區時所花費的設計成本較低。
今天主要分享的內容是關于金剛區的一些思考，我總結了以下幾點：
1.有底板的金剛區在視覺上更統一、突出，容易吸引用戶的注意力；
2.金剛區使用圓形底板看起來整潔、不擁擠，且親和力較強，使用場景廣泛；
3.金剛區的圖標要明確表達出他的功能作用，所以要使用識別度高、一目了然的圖標。
金剛區通常指的是 banner 或搜索框下以宮格形式排列的多個圖標，數量上多采用1-2行，每行展示5個圖標，再多會顯得擁擠。大多數金剛區都可以左右滑動，以便查看更多的內容。如下圖：
網頁設計
為什么叫金剛區呢？這個名稱來源于百變金剛，由于產品迭代或功能調整變更，金剛區可以很靈活的進行替換，就像一個百變金剛一樣，故稱之為金剛區。比如每到春節等重要節日，金剛區就可以很方便換上一身“新衣服”。如下圖：
網頁設計
二、金剛區的作用金剛區的主要作用就是把多種功能匯聚到一起，方便用戶查看選擇，同時起到導流的作用。
三、金剛區常見樣式
我粗略地把金剛區分為兩大類，有底板的和沒有底板的。有底板的通常用一個固定的形狀再加上其他元素組成圖標，更容易做到視覺上的統一，使頁面看起來更整齊規整，同時對比強烈，更容易吸引注意力。而沒有底板更難把握視覺上的平衡。
1.有底板
1.1.底板形狀
常見底板形狀有圓形、超橢圓形、圓角矩形、三種，歸根到底都是大圓角、非常接近圓形，而很少見以方形作為底板形狀的。這是因為相同尺寸的圓形和正方形，圓形的面積更小，在視覺上會展現出較大的空隙，不會顯得特別擁擠，更容易聚焦內容，同時圓形具有很強的親和力，適用于大多數場景。如下圖：
網頁設計
1.2.底板顏色通常采用鄰近色或同類色，并添加漸變提高質感。底板使用豐富的色彩使得圖標和頁面對比強烈，更容易吸引用戶的注意力。以貝殼找房為例，進入首頁的第一眼，視線就被頂部的金剛區所吸引，如下圖：
網頁設計
1.3.構成元素底板上的元素有很多種，常見的有線性、面形圖標、文字、實物照片、logo等。金剛區不僅要吸引用戶的注意力，同時還要做到能明確表達它所代表的功能作用，所以盡量使用識別度高、一目了然的圖標，而添加字體或實物照片作為圖標，比較容易讓人理解。如下圖：
網頁設計
2.沒有底板2.1.線性圖標
線性圖標在視覺上簡潔、安穩沉靜、有質感，大多數金融產品最常使用線性圖標，更容易突出理智、安全可靠的情感，如下圖：
網頁設計
2.2.圖形圖標圖形圖標樣式很多，常見的有扁平、擬物、2.5D等，可以展示更多的設計細節，增強視覺上的表現力，但是圖標表意容易模糊，對文字的依賴性較大，而且更新迭代替換替換金剛區的成本較大，如下圖：
網頁設計
2.3.實物照片
實物照片可以帶來真實、可靠的感覺，表達清晰，用戶一眼就能知道其代表的意思，同時使用實物照片替換金剛區時所花費的設計成本較低。
網頁設計
四、劃重點今天主要分享的內容是關于金剛區的一些思考，我總結了以下幾點：
1.有底板的金剛區在視覺上更統一、突出，容易吸引用戶的注意力；
2.金剛區使用圓形底板看起來整潔、不擁擠，且親和力較強，使用場景廣泛；
3.金剛區的圖標要明確表達出他的功能作用，所以要使用識別度高、一目了然的圖標。
（鄭重聲明：本文版權歸原作者海鹽社青山所有，轉載文章僅為傳播更多信息之目的，如有侵權，請聯系我們刪除；如作者信息標記有誤，請聯系我們修改。）
本文名稱：網頁金剛區設計思考
瀏覽路徑：http://m.2m8n56k.cn/news/113524.html
成都網站建設公司_創新互聯，為您提供企業網站制作、品牌網站建設、網站內鏈、網站策劃、云服務器、外貿建站
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- 實體經濟怎樣更好的接受“產業互聯網” 2021-05-14
- SEO對于網站轉化率作用有多大？ 2021-05-14
- 網站生成靜態頁面的兩種方式 2021-05-13
- 網絡時代就是信息之戰 2021-05-13
- 注冊.com域名的優勢？注冊.com域名需要注意什么？ 2021-05-13
- APP應用設計注意事項 2021-05-13
- seo網站關鍵詞排名多久可以上首頁 2021-05-14
- 電商小程序能承擔起其扭虧為盈的重任嗎 2021-05-14
- 影響新站推廣的四個因素 2021-05-14
- 為什么我的網站備案沒有通過？ 2021-05-13
- JAVA網站開發——創新互聯 2021-05-13
- 根據商業利益設計網站 2021-05-13
- 爆款文章教會你網站開發的設計精髓 2021-05-13
- “商務網站”UI設計堵的幾點要素 2021-05-13
- 新手如何開發小程序？ 2021-05-13
- 企業必須要投入很多精力去進行官網建設 2021-05-13
- 如何更新高質量的網站內容，提升網站流量 2021-05-13
- 導航設計就如同網站的點“睛”之筆第一章 2021-05-13
- 淺談網站開發設計的效果和難度 2021-05-13