一、什么是金剛區(qū)金剛區(qū)通常指的是 banner 或搜索框下以宮格形式排列的多個(gè)圖標(biāo),數(shù)量上多采用1-2行,每行展示5個(gè)圖標(biāo),再多會(huì)顯得擁擠。大多數(shù)金剛區(qū)都可以左右滑動(dòng),以便查看更多的內(nèi)容。如下圖:
網(wǎng)頁設(shè)計(jì)
為什么叫金剛區(qū)呢?這個(gè)名稱來源于百變金剛,由于產(chǎn)品迭代或功能調(diào)整變更,金剛區(qū)可以很靈活的進(jìn)行替換,就像一個(gè)百變金剛一樣,故稱之為金剛區(qū)。比如每到春節(jié)等重要節(jié)日,金剛區(qū)就可以很方便換上一身“新衣服”。如下圖:
網(wǎng)頁設(shè)計(jì)
二、金剛區(qū)的作用金剛區(qū)的主要作用就是把多種功能匯聚到一起,方便用戶查看選擇,同時(shí)起到導(dǎo)流的作用。
三、金剛區(qū)常見樣式我粗略地把金剛區(qū)分為兩大類,有底板的和沒有底板的。有底板的通常用一個(gè)固定的形狀再加上其他元素組成圖標(biāo),更容易做到視覺上的統(tǒng)一,使頁面看起來更整齊規(guī)整,同時(shí)對(duì)比強(qiáng)烈,更容易吸引注意力。而沒有底板更難把握視覺上的平衡。
1.有底板1.1.底板形狀常見底板形狀有圓形、超橢圓形、圓角矩形、三種,歸根到底都是大圓角、非常接近圓形,而很少見以方形作為底板形狀的。這是因?yàn)橄嗤叽绲膱A形和正方形,圓形的面積更小,在視覺上會(huì)展現(xiàn)出較大的空隙,不會(huì)顯得特別擁擠,更容易聚焦內(nèi)容,同時(shí)圓形具有很強(qiáng)的親和力,適用于大多數(shù)場景。如下圖:
網(wǎng)頁設(shè)計(jì)
1.2.底板顏色通常采用鄰近色或同類色,并添加漸變提高質(zhì)感。底板使用豐富的色彩使得圖標(biāo)和頁面對(duì)比強(qiáng)烈,更容易吸引用戶的注意力。以貝殼找房為例,進(jìn)入首頁的第一眼,視線就被頂部的金剛區(qū)所吸引,如下圖:
網(wǎng)頁設(shè)計(jì)
1.3.構(gòu)成元素底板上的元素有很多種,常見的有線性、面形圖標(biāo)、文字、實(shí)物照片、logo等。金剛區(qū)不僅要吸引用戶的注意力,同時(shí)還要做到能明確表達(dá)它所代表的功能作用,所以盡量使用識(shí)別度高、一目了然的圖標(biāo),而添加字體或?qū)嵨镎掌鳛閳D標(biāo),比較容易讓人理解。如下圖:
網(wǎng)頁設(shè)計(jì)
2.沒有底板2.1.線性圖標(biāo)線性圖標(biāo)在視覺上簡潔、安穩(wěn)沉靜、有質(zhì)感,大多數(shù)金融產(chǎn)品最常使用線性圖標(biāo),更容易突出理智、安全可靠的情感,如下圖:
網(wǎng)頁設(shè)計(jì)
2.2.圖形圖標(biāo)圖形圖標(biāo)樣式很多,常見的有扁平、擬物、2.5D等,可以展示更多的設(shè)計(jì)細(xì)節(jié),增強(qiáng)視覺上的表現(xiàn)力,但是圖標(biāo)表意容易模糊,對(duì)文字的依賴性較大,而且更新迭代替換替換金剛區(qū)的成本較大,如下圖:
網(wǎng)頁設(shè)計(jì)
2.3.實(shí)物照片實(shí)物照片可以帶來真實(shí)、可靠的感覺,表達(dá)清晰,用戶一眼就能知道其代表的意思,同時(shí)使用實(shí)物照片替換金剛區(qū)時(shí)所花費(fèi)的設(shè)計(jì)成本較低。
網(wǎng)頁設(shè)計(jì)
四、劃重點(diǎn)今天主要分享的內(nèi)容是關(guān)于金剛區(qū)的一些思考,我總結(jié)了以下幾點(diǎn):
1.有底板的金剛區(qū)在視覺上更統(tǒng)一、突出,容易吸引用戶的注意力;
2.金剛區(qū)使用圓形底板看起來整潔、不擁擠,且親和力較強(qiáng),使用場景廣泛;
3.金剛區(qū)的圖標(biāo)要明確表達(dá)出他的功能作用,所以要使用識(shí)別度高、一目了然的圖標(biāo)。
(鄭重聲明:本文版權(quán)歸原作者海鹽社青山所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如有侵權(quán),請聯(lián)系我們刪除;如作者信息標(biāo)記有誤,請聯(lián)系我們修改。)
新聞名稱:網(wǎng)頁金剛區(qū)設(shè)計(jì)思考
網(wǎng)頁鏈接:http://m.rwnh.cn/news24/113524.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、網(wǎng)站改版、營銷型網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)站設(shè)計(jì)公司、外貿(mào)建站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)