彈窗設計的5條基本原則

作者:佚名 來源:點融設計中心DDC 時間:2016-07-06 標簽: 彈窗設計



當你將彈窗設計及使用得恰到好處時,它們就會是非常有效的用戶界面元素。它們能幫助用戶快速且便捷地達成目標。然而當錯誤使用時,彈窗卻會困擾你的用戶。知曉如何設計彈窗,會幫助你在使用時避免那些可能對用戶造成的困擾。
 

什么是彈窗?

彈窗是一個為激起用戶的回應而被設計、需要用戶去與之交互的浮層。它可以告知用戶關鍵的信息,要求用戶去做決定,抑或是涉及到多個操作。彈窗越來越廣泛地被應用于軟件、網頁、以及移動設備中,它可以在不把用戶從當前頁面帶走的情況下,指引用戶去完成一個特定的操作。

圖1,會話過期彈窗
 

現在讓我們來看看有哪些優秀的彈窗設計和使用方法。
 

原則1. 減少干擾

由于彈窗會中斷操作,要盡可能地少使用彈窗。突然出現的彈窗會強迫用戶去停止他們當下正在進行的任務,并轉而專注于彈窗中的內容。在繼續之前,用戶必須要面對這個彈窗,否則將無法對彈窗之下的頁面進行操作。當這個用戶必須要確認一個關鍵的操作時,這就是好的,但是在大部分情況下彈窗是不太有必要的,甚至會引起用戶反感。
 

需要確認

在你需要用戶去互動才可繼續時,或當犯一個錯誤的成本會很高時,使用彈窗是最合適且最合理的。

圖2,這里告知了用戶一個情況,需要用戶確認
 

不要突然打開彈窗

在用戶沒有做任何操作時突然打開彈窗,是非常糟糕的設計。許多網站用訂閱框來轟炸它們的用戶,就如下面的例子:

圖3,諸如此類的彈窗給沒有鍵盤的用戶造成了數不清的麻煩
 

彈窗的出現應該永遠基于用戶的某個操作。這個操作也許是點擊了一個按鈕,也許是進入了一個鏈接,也可能是選擇了某個選項。
 

小結

  • 不是每個選擇、設置、或細節都有必要中斷用戶當前的操作。
  • 彈窗的備選方案有菜單以及同框內的擴展,這兩種控件都可以保持當前頁面的延續。
  • 可不要突然跳出彈窗,應該讓用戶對彈窗的每次出現都有心理預期。

原則2. 彈窗應與現實世界相關連

彈窗應該使用用戶的語言(用戶熟悉的文字,短語和概念),而不是一些系統特有的專有名詞。
 

表述清晰的問題和選項

在彈窗的內容區域,應該使用一個表述清晰的問題或陳述,例如“清除您的存檔?”或“刪除您的賬戶?”總之,應該避免使用含有歉意的、模凌兩可的、或者是反問式的語氣,如“警告!”“你確定嗎?”

圖4,左邊的彈窗提出了一個很模凌兩可的問題,并且這個操作可能影響的范圍并不明確;右邊的彈窗提出的問題相當明確,它解釋了此次操作對用戶的影響,并且提供了指向清晰的選項
 

盡可能不要給用戶提供可能產生混淆的選項,而應該使用那些文意清晰的選項。大部分情況下,用戶應該能夠只通過彈窗的標題和按鈕,就了解他們有哪些選項。

反例:這個按鈕的文字“不”的確回答了彈窗內的問題,但是并沒有直接告訴用戶點擊后會發生什么。

圖5,安卓的系統彈窗 來源:MATERIAL DESIGN
 

改成這樣:肯定的操作文字“放棄” 很明確地指示了選擇這個選項的后果。

圖6,安卓的系統彈窗 來源:MATERIAL DESIGN
 

提供重要的信息

一個彈窗不應該把對用戶有用的信息說得含糊不清。舉個例子,如果一個彈窗要讓用戶確認刪除某些條目,就應該把這些條目都列出來。

圖7,這個彈窗很簡要地指明了這個操作的結果
 

另外,避免使用“了解更多”按鈕去連接到幫助文檔;在彈窗同一頁面展開則是更好的選擇。如果還需要顯示更多的信息,則將其放在進入彈窗之前的頁面。
 

提出有(關鍵)信息的反饋

當一個流程結束時,記得顯示一條提示信息(或視覺反饋),讓用戶知道自己已經完成了所有必要的步驟。

圖8,在完成一個操作后成功的例子
 

小結

  • 在彈窗中使用語意清晰的問題和選項。
  • 設計促進操作完成的彈窗。
  • 在操作完成后,提示用戶操作已經完成了。


原則3. 講求極簡

別試著把太多東西擠在一個彈窗內。要保持干凈和簡約(遵從KISS原則)。然而極簡主義并不意味著被局限住,你提供的所有信息都該是有價值并且與之相關的。
 

元素與選項的數量

彈窗絕不應該只是部分顯示在屏幕上。因此不要使用有滾動控件的彈窗。

反例:巴克萊銀行的付款處理彈窗包括了許多的選項和元素,部分的選項只有滾動后才能看到(特別是對于屏幕通常較小的移動設備)

圖9,來源:巴克萊
 

好的例子:Stripe使用了一個簡單并且聰明的彈窗,只顯示了最基本的信息,這樣不管在桌面端上還是移動屏幕上看起來都會很不錯。

圖10
 

操作的數量

彈窗不該提供超過兩種選項。第三個選項,例如下圖的“了解更多”,有可能會將用戶帶離此彈窗,如此用戶將沒有辦法完成當前的任務。

圖11,“LEARN MORE”操作將用戶從這個彈窗指引到其它頁面,進而把當前的彈窗置入一個不確定的狀態
 

勿將多個步驟放置在一個彈窗內

把一個復雜的任務分解成多個步驟是一個極好的想法。然而這也會給用戶傳達一個信號,這個任務太復雜了,以至于根本沒法再一個彈窗界面中完成。

圖12
 

如果一個交互行為復雜到需要多個步驟才能完成(如下圖的例子),那么它就有必要單獨使用一個頁面(而不是作為彈窗存在)。

圖13,有多個步驟的彈窗 來源:DRIBBBLE
 

小結

  • 如果你發現你在很努力地把許多元素擠進一個彈窗,這通常代表彈窗已經不是最優的設計方案了。
  • 將那些不必要的、不能夠幫助用戶完成任務的元素或內容從彈窗中去除,以達到簡化的目的。
  • 盡量避免在彈窗內安置多個步驟。

原則4. 選擇適當的彈窗種類

彈窗大致分兩個大類。第一大類為吸引用戶關注的模態彈窗,強制用戶與之交互后才能繼續。模式彈窗通常被用在獨立、強制的流程中:

  • 當不需要上下文就可以決定怎么做的時候。
  • 需要明確的“接受”或“取消”動作才能關閉。在點擊這種彈窗的外部時,它并不會關閉。
  • 當我們不允許此用戶的進程處于部分完成狀態(即用戶必須完成此進程才可做其他任何的操作)。

第二大類則是非模態彈窗,它允許用戶通過點擊或輕觸周圍就可關閉。

第一種模式彈窗只在特別重要的交互操作時才須使用,(比如:刪除帳戶,同意協議)。

圖14,模態彈窗:用戶必須輸入“DELETE”才能確認刪除
 

另外移動系統的彈窗通常是模態的,并且含有如下的基本元素:內容,操作,和標題。

圖15,安卓模態彈窗
 

原則5. 視覺一致性


彈窗下的背景

當打開一個彈窗時,后面的頁面一定要稍微地變暗。它有兩個功能,第一它把用戶的注意力轉移到了浮層上,第二它讓用戶知道后面的這個頁面是不再可用的。

圖16,安卓的模態彈窗
 

在調節背景深度時要注意了。如果你把它變得太暗,用戶就沒法看清背景的內容。如果你調得太淺,用戶可能會認為這個頁面仍然可操作,并且甚至不會注意到彈窗的存在。
 

清晰的關閉選項

在彈窗的右上角應該有一個關閉的選項。許多彈窗會在右上角有一個“x”的按鈕,方便用戶關閉窗口。然而,這個“x”按鈕對于一般的用戶而言并不是一個顯而易見的退出通道。這是由于“x”按鈕通常較小,它需要用戶準確地定位到該處,才能夠成功的退出,而這一過程通常很費事。

因而讓用戶通過點擊非模態彈窗的背景區域去退出,就是一個更好的方法。

圖17,TWITTER同時使用了點擊X按鈕和點擊背景區域的退出方式
 

避免在彈窗內啟動彈窗

應該避免在彈窗內再啟動附加的小彈窗,這是因為此舉會加深用戶所感知到的網站或app的層級深度,從而增大了視覺的復雜性。

圖18,反例:彈窗中的彈窗
 

小結

  • 在大部分情景下,都允許用戶通過點擊或輕觸來關閉彈窗(除了模態彈窗)。
  • 應該避免在彈窗內再啟動附加的小彈窗(即彈窗中的彈窗)。


總結

希望這些有關彈窗的使用案例和使用方法還算有趣,并能在你們設計原型時派上用場。要記住,用戶體驗是為用戶而做的設計,而非為技術。要想知道什么樣的設計最適合你的用戶、最適合他們將進行的任務,其實不是一件難事:你只需要模仿那些領先產品的彈窗,然后找到你的用戶做一些相關的測試。

英文原文:NICK BABICH, UX DESIGN: 5 ESSENTIAL UX RULES FOR DIALOG DESIGN

原文地址:

譯文地址:

相關文章:

推薦文章

最新文章

熱門標簽

快乐炸金花 甘德县 | 苏尼特左旗 | 合山市 | 吴江市 | 吉安市 | 青阳县 | 融水 | 永嘉县 | 义马市 | 鹤壁市 | 乐东 | 曲麻莱县 | 南康市 | 西盟 | 大方县 | 杭锦旗 | 开封市 | 城固县 | 沙湾县 | 宁夏 | 应城市 | 湖北省 | 沈丘县 | 通化市 | 沁源县 | 绥江县 | 宝山区 | 黎平县 | 孟津县 | 鸡泽县 | 周宁县 | 涟源市 | 天柱县 | 喀喇 | 上犹县 | 西华县 | 广安市 | 治多县 | 武陟县 | 苏尼特右旗 | 尚志市 | 凤阳县 | 平定县 | 阿克苏市 | 朝阳市 | 嘉鱼县 | 霍邱县 | 天柱县 | 江孜县 | 油尖旺区 | 麟游县 | 涿鹿县 | 蓬莱市 | 大洼县 | 榆中县 | 正镶白旗 | 清新县 | 施秉县 | 镇平县 | 敦煌市 | 逊克县 | 石渠县 | 正定县 | 卢湾区 | 浏阳市 | 五华县 | 黄大仙区 | 宁蒗 | 韶山市 | 江安县 | 通渭县 | 温宿县 | 田林县 | 尉氏县 | 慈溪市 | 涞源县 | 南华县 | 平邑县 | 广宗县 | 台山市 | 乌鲁木齐县 | 宁陵县 | 开江县 | 资阳市 | 夏河县 | 金沙县 | 岳阳市 | 常山县 | 辽源市 | 湟源县 | 犍为县 | 通许县 | 临海市 | 崇信县 | 苏州市 | 南雄市 | 同仁县 | 赤峰市 | 大新县 | 山阳县 | 沈丘县 | 临清市 | 桐柏县 | 雷州市 | 田阳县 | 句容市 | 武宣县 | 信丰县 | 寻乌县 | 牡丹江市 | 保山市 | 济宁市 | 原平市 | 红原县 | 邢台县 | 新郑市 | 商洛市 | 英吉沙县 | 伊吾县 | 松桃 | 汉源县 | 清水县 | 鲁甸县 | 怀集县 | 清新县 | 云霄县 | 阿勒泰市 | 固始县 | 开原市 | 富顺县 | 肥西县 | 马尔康县 | 辽宁省 | 沐川县 | 天柱县 | 革吉县 | 金塔县 | 丹寨县 | 和静县 | 宕昌县 | 哈密市 | 北流市 | 泰宁县 | 廊坊市 | 安多县 | 即墨市 | 涡阳县 | 马龙县 | 盱眙县 | 基隆市 | 滁州市 | 临高县 | 罗城 | 观塘区 | 龙泉市 | 衡阳市 | 鄂托克前旗 | 阳春市 | 永靖县 | 铜鼓县 | 罗定市 | 洞口县 | 凤城市 | 甘泉县 | 乐陵市 | 景东 | 万全县 | 通山县 | 鄯善县 | 东至县 | 洪江市 | 美姑县 | 三江 | 洛扎县 | 沙河市 | 涟水县 | 闽侯县 | 托克托县 | 彰化市 | 乃东县 | 新兴县 | 巴彦县 | 云南省 | 宝清县 | 平江县 | 安泽县 | 滕州市 | 乌苏市 | 如皋市 | 河南省 | 东方市 | 扶风县 | 崇左市 | 宜良县 | 兴文县 | 海南省 | 浦江县 | 且末县 | 醴陵市 | 永泰县 | 开阳县 | 赣榆县 | 会泽县 | 扬州市 | 梅州市 | 咸阳市 | 壶关县 | 舞钢市 | 晴隆县 | 北京市 | 中超 | 南开区 | 江山市 | 翼城县 | 称多县 | 德阳市 | 利津县 | 大连市 | 镇坪县 | 南平市 | 莫力 | 集安市 | 武隆县 | 开原市 | 灵宝市 | 新安县 | 慈利县 | 宁明县 | 井研县 | 芦山县 | 胶南市 | 西丰县 | 汾西县 | 宣化县 | 安多县 | 惠来县 | 含山县 | 华池县 | 新民市 | 辰溪县 | 清涧县 | 平顺县 | 鄂托克前旗 | 威宁 | 三门县 | 西林县 | 乐至县 | 大荔县 | 巴塘县 | 德清县 | 武川县 |