彈出框里的設計門道,你是否都知道? - 特级毛片www,色综合天天综合网,国产成人综合亚洲 - UISDC

彈出框里的設計門道,你是否都知道?

2018/06/21 18763評論區

網站對于每個企業而言是展現品牌的重要渠道。

當你在為你的用戶設計網站的時候,一定要控制好網站的內容量。用戶並沒有必要在塞滿屏幕的大量信息當中,費勁巴拉地去找自己想要的那一條。極簡主義風格的流行並不是沒有道理的。

有針對性地呈現內容,為品牌進行合理的適配,提供清晰且扣人心弦的視覺設計,這樣的網站是令人印象深刻的。

極簡的設計並不意味著你無法和用戶進行更多的溝通,也許你覺得當前的設計還不足以滿足你的品牌和用戶進行溝通的需求,好在還有許多方法和技巧幫你做到這一點。

彈出框就是為此而出現的。在幾年前,這種設計被作為一種不影響當前網站內容的信息呈現方式而廣泛應用,隨後又因為大量的、無節制且毫無美感的濫用,被設計師和用戶廣泛吐槽。Google 認為彈出框對于用戶體驗造成了明顯的干擾,同時,需要借助彈出框提升信息交互的設計師和開發者因此也困擾不已。

那麼,這是不是意味著彈出框已經被淘汰了?並非如此。進入的资讯我們將會詳細為你分析彈出框在如今UI/UX設計當中的真實情況,並且提供一些可供參考的最佳實踐。

彈出框的設計現狀

首先我們應該聊聊彈出框的類型,正確用法。

彈出框的類型

彈出框遵循著一系列模式而存在。它會在打開網頁的時候彈出,滑入網頁,或者干脆就在網頁加載的時候就直接加載進去了。雖然有的網頁會將它置于頁面的正中間,不過也有許多設計師將它置于頁面的底部或者角落。

插頁式和覆蓋式的彈出框會覆蓋住整個屏幕,通常會出現在一打開網頁的時候,

另外一種是通知欄式的彈出框,它會緊貼在頁面的頂部或者底部,甚至是常駐式的存在。

使用彈出框的5個原因

彈出框有的時候確實令人頭疼,作為設計師你總想遠離它。但是,它依然存在于許多網頁當中,並且發揮著巨大的作用。下面的5個理由,讓設計師真正離不開它。

1. 彈出框能夠讓人集中注意力

越來越多的用戶無法集中注意力閱讀,彈出框這種打斷式的信息呈現方式,非常抓人眼球,能夠快速直接地傳遞信息。

2. 讓用戶注意到最重要的信息

彈出框讓其中所呈現的信息擁有了額外的價值,當彈出框出現的時候,其中所展現的信息擁有了超過其他信息的重要性,至少感覺上是這樣。

3. 彈出框是多用途的

如今的彈出框擁有多種多樣的玩法和呈現方式,不會將用戶推開,也不再使用廣告讓用戶頭疼不已。彈出框的觸發機制也非常的多變︰

  • 在進入時彈出
  • 滾動到特定的位置時彈出
  • 通過特定操作觸發
  • 在離開時候觸發

4. 保持頁面干淨整潔

正如我之前所提到的,極簡主義的設計讓網站足夠美觀,但是想要順暢地傳遞信息,彈出框能夠作為不錯的載體,確保不會佔用頁面位置,影響整體風格。

5. 提升轉化率

根據 Sumo 的研究,彈出框和轉化率之間有著清晰的關系。他們發現,彈出框讓轉化率的平均轉化速度提升了大概3%,而設計得好的彈出框能夠將轉化率提升到9%,對于許多網站而言,這個轉化率的意義是非同凡響的。

彈出框提升了網站的參與度。

移動端UI中的彈出框

值得一提的是,Google 在分析報告中並不反感移動端的彈出框,而是建議讓設計師和開發者盡可能巧妙地進行移動端彈出框的設計,降低彈出框對于用戶體驗的損害,而是盡量去提升用戶體驗。

因此,Google 將會對采用下面3種彈出框的網站予以處罰︰

  • 當用戶一打開首頁就彈出的彈出框
  • 彈出框蓋住了幾乎全部頁面
  • 彈出框廣告

明白了吧?現在,我們要聊聊彈出框的設計技巧了。

18個彈出框設計的最佳實踐

不要為了跟隨某個趨勢,展現某種設計元素而使用彈出框,它一定要是功能性的,不要浪費用戶的時間,這樣會降低用戶對你的信任。

彈出框的設計應該和網站本身保持一致,無論是風格還是素質上。

確保彈出框是可交互,有響應的。

確保彈出框中的文案是簡短而重點突出的。

不要使用被動的或者過于生硬的「是/否」式的行為召喚文案,除非你的品牌個性本就如此。如果彈出框中包含兩個 CTA,請盡量采用積極的方式來展現。

如果你在搜集用戶的聯系信息,最好只讓他們提供電子郵件地址。

確保彈出框的內容和對應的頁面保持一致。

如果可以,盡量避免在首頁上就使用彈出框。盡量讓用戶先適應所處的頁面環境。這是 Google 所允許的彈出框設計之一。

遵循 Google 對于移動端網頁的設計規則︰不要有插頁式的廣告,不要設置首頁彈出框。

不要讓移動端彈出框和桌面端的完全一樣,有針對性地進行設計。

總是使用簡單統一的方式來關閉彈出框,即在右上角設置一個X關閉按鈕。

讓所有的彈出框都在恰當的時候才彈出,比如關閉頁面的時候。

設置頻率規則,確保訪客不會在每個頁面或者每次訪問的時候都會踫到彈出框。

將彈出框設置在正確的位置,根據網站的狀況和體驗的度量來進行判斷。

如果你想讓彈出框醒目,盡量讓它出現在屏幕的正中心。

如果你想推送優惠信息,可以使用頂部懸浮式的彈出框。

如果你想在用戶瀏覽的時候推送信息,彈出框盡量出現在屏幕的一側。

根據用戶類型細分來自定義彈出框信息。

結語

如果你真的希望用戶知悉一些關鍵的、重要的信息,不要吝嗇使用彈出框,你可以盡量讓彈出框體驗更好,提供更加有用的、他們需要的內容。不要害怕 A/B測試,這樣的方法會讓彈出框更加優秀。一個優質的彈出框需要你考慮很多因素,包括整體的設計,文案、位置、CTA等等。

「2018年設計趨勢,一個都不要錯過」

================明星欄目推薦================

優優教程網︰ UiiiUiii.com 是儒墨堂旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手並制作出酷炫的視覺效果。

設計導航︰國內人氣最高的設計网站架设,設計師必備︰ http://hao.rumotanartist.com

儒墨堂大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址︰http://www.rumotanartist.com/website-pop-ups-18-rules

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 儒墨堂專訪 儒墨堂大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規範 用戶體驗設計 海報設計 平面設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

儒墨堂啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!特级毛片www,色综合天天综合网,国产成人综合亚洲是極具人氣的設計師平台
2012年成立至今,一直專注于設計師的學習成長交流

特级毛片www|色综合天天综合网|国产成人综合亚洲

打開微信,掃碼分享
學設計 特级毛片www,色综合天天综合网,国产成人综合亚洲 在這里