觸屏版
全國(guó)服務(wù)熱線:0571-87205688
登錄
注冊(cè)
客戶中心
關(guān)注云客
近幾年來(lái),隨著移動(dòng)用戶的不斷增加,卡片式設(shè)計(jì)越來(lái)越受到人們的歡迎。一方面,卡片式設(shè)計(jì)可以輕松容納多種不同類型的元素,將各種元素以整齊劃一的布局呈現(xiàn)出來(lái),提供良好的視覺(jué)效果,另一方面,卡片在調(diào)整高度和寬度上很是靈活,對(duì)移動(dòng)端的兼容性很高,能輕松適應(yīng)不同大小的屏幕,實(shí)現(xiàn)真正的響應(yīng)式。這一點(diǎn)小飛在《解密網(wǎng)站設(shè)計(jì)潮流:為什么卡片式設(shè)計(jì)這么火?》中已經(jīng)進(jìn)行了詳細(xì)的介紹。遺憾的是,小飛發(fā)現(xiàn)在實(shí)際的設(shè)計(jì)過(guò)程中,不少站長(zhǎng)進(jìn)入了一些誤區(qū),使卡片式設(shè)計(jì)的強(qiáng)大效用大打折扣。因此,小飛今天特意總結(jié)了一些大家在做卡片式設(shè)計(jì)經(jīng)常會(huì)出現(xiàn)的5個(gè)錯(cuò)誤,希望能給大家一點(diǎn)啟發(fā)。
1.卡片間距過(guò)大
在理想的狀態(tài)之中,每張卡片應(yīng)該都是大小相同、整齊一致的,這就要求卡片上的各種元素要保持協(xié)調(diào),但實(shí)際狀況常常沒(méi)有那么完美。在實(shí)際設(shè)計(jì)過(guò)程中,我們可能會(huì)發(fā)現(xiàn)這張卡片的標(biāo)題太長(zhǎng),那張卡片的文字描述太短。當(dāng)這些卡片在大屏幕設(shè)備上顯示時(shí),間距過(guò)大的問(wèn)題就顯露出來(lái)了。你可不要傻乎乎的認(rèn)為這是“留白”的藝術(shù),這種不恰當(dāng)?shù)拈g距往往不能做到“以無(wú)勝有”,更會(huì)影響網(wǎng)站的整體排版,讓布局雜亂無(wú)序,有損信息的密度,甚至還會(huì)妨礙訪客們的瀏覽體驗(yàn),這使得卡片式設(shè)計(jì)的優(yōu)勢(shì)蕩然無(wú)存。
遇到這種情況,我們應(yīng)該怎么辦呢?小飛總結(jié)了兩個(gè)方法。其一,我們應(yīng)該考慮卡片上的元素是否可以縮減:簡(jiǎn)練標(biāo)題或描述文字是否會(huì)影響用戶對(duì)重要信息的獲???盡量確保每張卡片在尺寸、涵蓋內(nèi)容上相差無(wú)幾。其二,我們可以看看卡片式設(shè)計(jì)是否可以應(yīng)用到砌體布局中。目前我們一般都是在柵格系統(tǒng)中使用卡片式布局,固定的格子設(shè)計(jì)更能保證網(wǎng)站的整潔,而砌體布局是指將網(wǎng)站中的元素自動(dòng)填充在頁(yè)面的空白區(qū)域,就像是墻上堆砌的石頭一樣。如果卡片式設(shè)計(jì)可以與砌體布局結(jié)合起來(lái),卡片就自動(dòng)適應(yīng)空白區(qū)域,間距過(guò)大的問(wèn)題也就不存在了。
2.一次性展示太多卡片
對(duì)很多站長(zhǎng)來(lái)說(shuō),多使用卡片填滿網(wǎng)站就等同于充分利用網(wǎng)站的空間,盡可能給用戶提供更多信息。其實(shí),這是個(gè)錯(cuò)誤的想法。在柵格系統(tǒng)的卡片式布局中,如果一次性展示許多張卡片,常會(huì)帶來(lái)兩種負(fù)面結(jié)果,一是用戶被密密麻麻的信息墻嚇到,直接退出離開(kāi),還有一種情況就是用戶勉強(qiáng)瀏覽,但過(guò)多卡片帶來(lái)的負(fù)擔(dān)會(huì)嚴(yán)重影響用戶的體驗(yàn)效果。
和第一個(gè)誤區(qū)一樣,在遇到這種情況的時(shí)候,我們也要仔細(xì)考慮一番:頁(yè)面上放置這么多的卡片有必要的嗎?用戶合理的閱讀容量是多少?用戶在瀏覽屏幕時(shí)可能的注意范圍有多廣?除此以外,小飛還有一個(gè)建議,我們可以給單張頁(yè)面可放置卡片的數(shù)量設(shè)置一個(gè)限額,當(dāng)數(shù)量超過(guò)這個(gè)范圍時(shí)就會(huì)彈出提醒的對(duì)話框,防止我們無(wú)意識(shí)的犯錯(cuò)。不過(guò)這個(gè)方法的難度在于卡片的限額數(shù)量應(yīng)該設(shè)為多少,這可能需要我們?cè)谧约旱木W(wǎng)站上進(jìn)行測(cè)試,發(fā)現(xiàn)自己網(wǎng)站的規(guī)律所在。
3.卡片上行為引導(dǎo)太多
熟悉卡片式設(shè)計(jì)的朋友們都知道每張卡片只是某個(gè)功能或內(nèi)容的入口點(diǎn),常展示一些摘要而不是所有細(xì)節(jié),所以我們通常會(huì)在卡片上放置一些如“閱讀全文”等其他鏈接,引導(dǎo)用戶做出預(yù)期的行為。但是,在很多糟糕的卡片式設(shè)計(jì)實(shí)例中,不少人在卡片上設(shè)置了太多的行為引導(dǎo),比如“閱讀全文”的鏈接、“查看視頻”的鏈接、CTA按鈕、主頁(yè)鏈接等等。小飛可以很負(fù)責(zé)任的告訴你:這么多的行為引導(dǎo)不會(huì)有助于延長(zhǎng)用戶在網(wǎng)頁(yè)上停留的時(shí)長(zhǎng),增加網(wǎng)站流量或提高轉(zhuǎn)化率,卻會(huì)讓用戶更加困惑、手足無(wú)措。
站長(zhǎng)們?cè)谟龅竭@個(gè)問(wèn)題時(shí)也要多想想每個(gè)行為引導(dǎo)的存在是否是必要的,或者可以按照不同的重要程度或類型將行為引導(dǎo)分類,按優(yōu)先次序進(jìn)行擺放,這樣更便于作出取舍。
4.卡片上各種元素過(guò)多
這個(gè)誤區(qū)和卡片上行為引導(dǎo)太多有點(diǎn)類似,從更宏觀的角度來(lái)說(shuō),行為引導(dǎo)可以歸納為元素的一種,但由于行為引導(dǎo)在網(wǎng)站流量和銷量等方面扮演的重要作用,小飛特意將它拎出來(lái)講了。現(xiàn)在我們來(lái)看一下元素過(guò)多的問(wèn)題吧!卡片式設(shè)計(jì)廣受歡迎的其中一個(gè)原因就是它很靈活,能夠整合各種形式的內(nèi)容: 圖片、文本、動(dòng)畫(huà)效果、視頻、按鈕、鏈接等。但這并不意味著我們一定要將多種不同的元素一股腦兒放到卡片上,這樣不僅不能給用戶提供有用的信息,反而容易干擾用戶,分散他們的注意力,讓他們找不到重點(diǎn)。
因此卡片涵蓋元素的多少應(yīng)該把握一個(gè)度。這一點(diǎn)可以通過(guò)對(duì)網(wǎng)站元素進(jìn)行優(yōu)先等級(jí)分類做到,將內(nèi)容分為首要信息,次要信息等等,這樣一來(lái)我們就能有目的的安排卡片元素。為了做到這一點(diǎn),我們還可以深入了解一下自身產(chǎn)品的目標(biāo)用戶群以及他們可能的喜好。
5.過(guò)度使用圖片
在卡片式設(shè)計(jì)中使用圖片似乎已經(jīng)成為了一種思維定勢(shì)。雖然我們經(jīng)常在卡片中使用圖片、插圖和圖標(biāo)等,它也確實(shí)能夠增加網(wǎng)站的視覺(jué)表現(xiàn)力,是卡片式設(shè)計(jì)的最佳拍檔。但我們可不能過(guò)度使用圖片,不能為了圖片而放置圖片,卡片上圖片的存在應(yīng)該是有一定意義的。
當(dāng)我們?cè)诳ㄆ咸砑訄D片時(shí),記得問(wèn)問(wèn)自己,這張圖片是必要的嗎?這真的能夠幫助用戶更好的獲取想要的信息嗎?或者說(shuō)它反而會(huì)造成視覺(jué)上的干擾?最好的解決方法就是實(shí)事求是,先確定每張卡片上圖片的真正需求,然后根據(jù)網(wǎng)站的整體布局探索一下卡片的最佳排版,與此同時(shí)也要注重內(nèi)容的優(yōu)先等級(jí),思考怎樣能讓卡片的呈現(xiàn)更加平衡、更加清楚易懂。
卡片式設(shè)計(jì)能夠給網(wǎng)站帶來(lái)很多益處,但這要求我們能夠成功避免設(shè)計(jì)的誤區(qū)。小飛今天介紹的這5個(gè)錯(cuò)誤,大家一定要牢記,可不能掉進(jìn)“坑”里啦!起飛頁(yè)自助建站平臺(tái)最近新增加了不少卡片式風(fēng)格的模板,您無(wú)需絞盡腦汁考慮排版(起飛頁(yè)的大牛們已經(jīng)幫您想好了),只要仔細(xì)挑選自己滿意的就可以輕松建站。
小說(shuō)網(wǎng)站從建立到盈利全解析(帶案例)
移動(dòng)互聯(lián)網(wǎng)時(shí)代 企業(yè)需要什么樣的手機(jī)網(wǎng)站
首頁(yè)設(shè)計(jì)制作在網(wǎng)站建設(shè)中的重要性應(yīng)引起足夠重視
企業(yè)網(wǎng)站怎么做? 知道這些事情讓你少走冤枉路
網(wǎng)站建設(shè)需把設(shè)計(jì)技巧融合用戶體驗(yàn)中
出錯(cuò)不尷尬:怎樣設(shè)計(jì)404頁(yè)面快速提升用戶體驗(yàn)?
服務(wù)器的穩(wěn)定性決定網(wǎng)站運(yùn)行速度
企業(yè)網(wǎng)站建設(shè)跳出率多少合適呢?
網(wǎng)站價(jià)格沒(méi)必要看的太重 揭秘低價(jià)網(wǎng)站建設(shè)危害!
如何打造出一個(gè)高端網(wǎng)站 這幾個(gè)基本要素要有
評(píng)論(0人參與,0條評(píng)論)
發(fā)布評(píng)論
最新評(píng)論