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

2022-09-21 07:54:09 字數 2473 閱讀 6737

**對於每個企業而言是展現品牌的重要渠道。

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

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

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

彈出框就是為此而出現的。在幾年前,這種設計被作為一種不影響當前**內容的資訊呈現方式而廣泛應用,隨後又因為大量的、無節制且毫無美感的濫用,被設計師和使用者廣泛吐槽。google

認為彈出框對於使用者體驗造成了明顯的干擾,同時,需要借助彈出框提公升資訊互動的設計師和開發者因此也困擾不已。

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

彈出框的設計現狀首先我們應該聊聊彈出框的型別,正確用法。

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

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

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

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

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

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

2. 讓使用者注意到最重要的資訊

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

3. 彈出框是多用途的

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

4. 保持頁面乾淨整潔

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

5. 提公升轉化率

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

彈出框提公升了**的參與度。

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

因此,google 將會對採用下面 3 種彈出框的**予以處罰:

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

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

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

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

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

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

如果你在蒐集使用者的聯絡資訊,最好只讓他們提供電子郵件位址。

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

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

遵循 google 對程式設計客棧於移動端網頁的設計規則:不要有插頁式的廣告,不要設定首頁彈出框。

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

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

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

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

將彈出框設定在正確的位置,根據程式設計客棧**的狀況和體驗的度量來進行判斷。

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

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

如果你想在使用者瀏覽的時候推送資訊,彈出框盡量出現在螢幕的一側。

根據使用者型別細分來自定義彈出框資訊。

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

本文標題: 彈出框裡的設計門道,你是否都知道?

本文位址:

業務密碼裡的一丁點門道

很簡單的幾個小小細節。今天在做乙個修改密碼的功能,粗想的邏輯很簡單 1 客戶端輸入舊密碼,新密碼,確認密碼,規則是 新密碼不得與舊密碼相同,確認密碼與新密碼必須相同,新密碼須符合一些密碼規則類似於包含數字英文標點啥的。2 傳送密碼前,對上述密碼進行加密,這裡採用非對稱加密rsa進行加密,客戶端用公鑰...

selenium彈出框的處理

1.頁面彈出框的處理 頁面彈出框獲取 1.獲取登入元素定位 2.顯性等待 3.直到登入彈出框出現 self.driver.find element by xpath div id u1 a name tj login click 進行顯性等待,使得操作的元素可見 ele locator tangra...

關於iframe的彈出框

開發中遇到的各種關於iframe的問題,在此記錄 1.頁面中包含iframe,在iframe中操作需彈出父頁面的彈出層 可以用parent.zhezhao show 2.頁面中包含iframe,在父頁面中需要獲得iframe中的相關引數 可以用 mainframe contents find id ...