網(wǎng)站對(duì)于每個(gè)企業(yè)而言是展現(xiàn)品牌的重要渠道。
當(dāng)你在為你的用戶設(shè)計(jì)網(wǎng)站的時(shí)候,一定要控制好網(wǎng)站的內(nèi)容量。用戶并沒(méi)有必要在塞滿屏幕的大量信息當(dāng)中,費(fèi)勁巴拉地去找自己想要的那一條。極簡(jiǎn)主義風(fēng)格的流行并不是沒(méi)有道理的。
有針對(duì)性地呈現(xiàn)內(nèi)容,為品牌進(jìn)行合理的適配,提供清晰且扣人心弦的視覺(jué)設(shè)計(jì),這樣的網(wǎng)站是令人印象深刻的。
極簡(jiǎn)的設(shè)計(jì)并不意味著你無(wú)法和用戶進(jìn)行更多的溝通,也許你覺(jué)得當(dāng)前的設(shè)計(jì)還不足以滿足你的品牌和用戶進(jìn)行溝通的需求,好在還有許多方法和技巧幫你做到這一點(diǎn)。
彈出框就是為此而出現(xiàn)的。在幾年前,這種設(shè)計(jì)被作為一種不影響當(dāng)前網(wǎng)站內(nèi)容的信息呈現(xiàn)方式而廣泛應(yīng)用,隨后又因?yàn)榇罅康、無(wú)節(jié)制且毫無(wú)美感的濫用,被設(shè)計(jì)師和用戶廣泛吐槽。Google 認(rèn)為彈出框?qū)τ谟脩趔w驗(yàn)造成了明顯的干擾,同時(shí),需要借助彈出框提升信息交互的設(shè)計(jì)師和開發(fā)者因此也困擾不已。
那么,這是不是意味著彈出框已經(jīng)被淘汰了?并非如此。進(jìn)入的文章我們將會(huì)詳細(xì)為你分析彈出框在如今UI/UX設(shè)計(jì)當(dāng)中的真實(shí)情況,并且提供一些可供參考的最佳實(shí)踐。
首先我們應(yīng)該聊聊彈出框的類型,正確用法。
彈出框遵循著一系列模式而存在。它會(huì)在打開網(wǎng)頁(yè)的時(shí)候彈出,滑入網(wǎng)頁(yè),或者干脆就在網(wǎng)頁(yè)加載的時(shí)候就直接加載進(jìn)去了。雖然有的網(wǎng)頁(yè)會(huì)將它置于頁(yè)面的正中間,不過(guò)也有許多設(shè)計(jì)師將它置于頁(yè)面的底部或者角落。
插頁(yè)式和覆蓋式的彈出框會(huì)覆蓋住整個(gè)屏幕,通常會(huì)出現(xiàn)在一打開網(wǎng)頁(yè)的時(shí)候,
另外一種是通知欄式的彈出框,它會(huì)緊貼在頁(yè)面的頂部或者底部,甚至是常駐式的存在。
彈出框有的時(shí)候確實(shí)令人頭疼,作為設(shè)計(jì)師你總想遠(yuǎn)離它。但是,它依然存在于許多網(wǎng)頁(yè)當(dāng)中,并且發(fā)揮著巨大的作用。下面的 5 個(gè)理由,讓設(shè)計(jì)師真正離不開它。
1. 彈出框能夠讓人集中注意力
越來(lái)越多的用戶無(wú)法集中注意力閱讀,彈出框這種打斷式的信息呈現(xiàn)方式,非常抓人眼球,能夠快速直接地傳遞信息。
2. 讓用戶注意到最重要的信息
彈出框讓其中所呈現(xiàn)的信息擁有了額外的價(jià)值,當(dāng)彈出框出現(xiàn)的時(shí)候,其中所展現(xiàn)的信息擁有了超過(guò)其他信息的重要性,至少感覺(jué)上是這樣。
3. 彈出框是多用途的
如今的彈出框擁有多種多樣的玩法和呈現(xiàn)方式,不會(huì)將用戶推開,也不再使用廣告讓用戶頭疼不已。彈出框的觸發(fā)機(jī)制也非常的多變:
在進(jìn)入時(shí)彈出
滾動(dòng)到特定的位置時(shí)彈出
通過(guò)特定操作觸發(fā)
在離開時(shí)候觸發(fā)
4. 保持頁(yè)面干凈整潔
正如我之前所提到的,極簡(jiǎn)主義的設(shè)計(jì)讓網(wǎng)站足夠美觀,但是想要順暢地傳遞信息,彈出框能夠作為不錯(cuò)的載體,確保不會(huì)占用頁(yè)面位置,影響整體風(fēng)格。
5. 提升轉(zhuǎn)化率
根據(jù) Sumo 的研究,彈出框和轉(zhuǎn)化率之間有著清晰的關(guān)系。他們發(fā)現(xiàn),彈出框讓轉(zhuǎn)化率的平均轉(zhuǎn)化速度提升了大概3%,而設(shè)計(jì)得好的彈出框能夠?qū)⑥D(zhuǎn)化率提升到9%,對(duì)于許多網(wǎng)站而言,這個(gè)轉(zhuǎn)化率的意義是非同凡響的。
彈出框提升了網(wǎng)站的參與度。