設計師應該如何設計「關閉」按鈕?

2020-12-14 騰訊網

視覺設計師應該如何設計「關閉」按鈕呢?在討論這個問題之前,我們不妨先看看另外兩個問題。

第一個問題來自知乎,在Mac OS中,彈出窗口的關閉按鈕是放在左上角的,Windows則是放在右上角,這兩種不同的做法是基於什麼樣的考慮呢?

設計師應該如何設計「關閉」按鈕?,我們可以從四個角度進行分析:

以大多數人的操作使用習慣來說,右邊更合適,這尊重了用戶的習慣;從視覺設計理論的角度來說,Mac OS是考慮到人的視覺瀏覽線是從左往右、從上而下的,而且大部分的文字內容、菜單也都是左對齊的,所以將關閉按鈕放在窗口的左上在視覺上是理所當然的。Windows 居右的理由是雖然人的視覺中心偏左,但滑鼠在屏幕上往往靠右,故點擊關閉按鈕時,指針移動距離更短,更便於操作。從產品需求來說,要根據具體頁面的業務需求而定,如果不希望用戶太快的關閉彈窗,最好放在相對邊緣的角落;如果希望用戶閱讀完內容後關閉,則應放置在內容結尾處,方便關閉。所以,至於放在左上角或右上角對前者影響並不大,而後者的情況完全可以通過「確定|取消」按鈕實現彈窗的關閉,居左居右倒顯得不那麼重要了。還有一個原因是因為兩個系統在最初的設計時候,存在專利和版權問題。在具體設計時,如果是web頁面彈窗,最好遵守Windows平臺規範,把關閉按鈕[x]放在右上角;如果是桌面應用,最好遵守各自平臺的規範。如下圖是「有道雲筆記」在刪除回收站中筆記內容時的二次確認彈窗,從左至右依次是網頁版、Mac版、Windows版,處理方法可見一斑。

第二個問題,[x]是如何作為通用的關閉按鈕逐漸成為用戶界面設計中的一個標準元素的?

早期Windows系統中的關閉窗口的按鈕並非[x],一直到windows95的時候,[x]才真正出現在windows系統的界面上,見下圖。這個時候的關閉按鈕和最大化、最小化一同出現在窗口的右上角上,這一經典的按鈕組合就此定型。

再往前追溯,[x]極有可能來自於日本的兩種標識符「Batsu」和「Maru」。Batsu也就是[x],表示不正確的,也可以表示錯誤、壞的和攻擊;而Maru也就是[o],意思是正確、真是、好的、完整的、珍貴的。

所以,在未來,也許會有一個新的符號代替[x]去引導用戶完成「關閉」彈窗的行為。

下面我們來看具體的設計方法。

關閉的定義

關閉的定義很難描述,我們可以通過幾個詞組好好體會其中含義。

關閉、退出與註銷無需登錄即可使用的應用,退出即程序停止運行;

需要登錄才能使用的應用,對用戶而言,退出是指程序退出運行且帳號退出登錄(需要經常性記住帳號登錄狀態的應用除外,退出也只是代表關閉);

此外,退出還有強制退出的含義,在遇到卡頓等情況時,可以通過「強制退出」解決;而「退出登錄」是單純的退出登錄狀態,程序不會關閉。

關閉指關閉當前窗口,程序不一定退出運行,可能會在後臺運行,一般會讓用戶進行選擇是「只關閉窗口」還是「關閉且退出程序」,如果有登錄帳號,帳號也不會退出;如下圖,網易雲音樂既能在設置中定義關閉面板是「僅關閉面板」還是「退出程序」,也會在關閉時給出確認彈窗供用戶再次選擇確認。

註銷指只退出當前登錄的帳號,不退出軟體,返回登錄頁面後還可以用別的用戶名登錄(web端更常見用「退出帳號」字眼代替註銷)。用電腦舉例,退出就是關機(徹底關閉計算機),註銷是為了切換到其他用戶進行使用。註銷還有一層含義,就是銷戶(永久銷毀、刪除帳戶),比如QQ最近上線的註銷帳號功能,所有資料都會被清空。

關閉/開啟、展開/收起關閉/開啟、停用/啟用一般指動作;表示狀態則會使用已開啟/已關閉、on/off等含義明確的詞彙,比如switch開關控制項。樹狀結構中文件夾節點圖標有打開/關閉的區別,不過它更像分組列表的展開/收起。所以開啟、打開、展開還是有些差別的。

關閉按鈕的位置

通過開頭的兩個問題,已經基本明確了彈窗中關閉按鈕位置的通用處理方法。即:網頁中彈窗的關閉按鈕放在右上角,以符合大多數用戶習慣;桌面應用中,如果採用各自系統默認的彈窗樣式,自然是「Mac版居左,Windows版居右」,如果是定製開發,最好遵守各自平臺的習慣。除了大方位,以彈窗邊緣為界,關閉按鈕又可以放在彈窗內部、彈窗外部或與彈窗邊緣交疊位置。

當然,有些情況「不需要關閉按鈕去關閉彈窗」,而是通過業務性操作「取消|確定」關閉彈窗,如下圖所示,移動端還可以通過點擊返回鍵、或點擊遮蔽層的方式關閉,這不僅符合極簡設計原則,也能更明確的告知用戶操作的具體含義。

關閉按鈕的狀態

關閉按鈕同樣具有一般按鈕的四種狀態:normal普通狀態、hover 滑鼠懸停狀態、active 點擊狀態、focus 取得焦點狀態。所以關閉按鈕也應按照這些狀態進行不同形式的設計,通過視覺樣式的區分,達到引導用戶的目的。各個狀態的樣式區分這裡不再展開討論。

關閉按鈕的形狀

除了純文字的關閉按鈕,更常見的是圖標按鈕,畢竟圖標按鈕所佔空間更少、語義傳達明確、又能避免頁面單調。通過收集整理,進行了簡單的分類,如下圖。普通的關閉按鈕都是以[x]為基礎元素進行設計的,讓後增加不同的背景輪廓、反白、斷點修飾等。退出性關閉則圍繞生活中常見的「電源關閉」圖標進行變形。功能關閉則是功能圖標加上「X\/-」等圖形,稍有不慎就很容易破壞圖標原有的美感。

其他可借鑑的設計方式

1.用倒計時防止用戶見到彈窗就關閉

彈窗廣告對用戶造成了太多傷害,以至於看不都不看,見到就點關閉。可借鑑以下做法,拼多多商家用戶登錄商家後臺後有時會彈出重要通知彈窗,該彈窗不能直接關閉,必須等倒計時結束後才能關閉,以保證用戶意識到通知的重要性,完成信息傳遞。

2.通過hover控制關閉按鈕的顯示/隱藏、放大/縮小

當應用中同時打開多個tab時,所有頁籤的關閉按鈕都常顯必定佔據一定的頁面空間、且會破壞頁面美感。Chrome瀏覽器中,標籤數量少的時候,每個標籤都顯示關閉按鈕;達到一定數量時就只顯示當前標籤的關閉按鈕,其他的隱藏,不過這種情況下要關閉其他標籤只能通過右鍵打開上下文菜單或者點擊進入相應標籤再關閉。QQ瀏覽器無論標籤多少,只顯示當前標籤的關閉按鈕,不過當滑鼠滑過其他標籤時,關閉按鈕就會顯示出來。WPS的做法則是用常顯小圓點代替隱藏[x]的做法。

3.移動端利用相關手勢進行關閉

移動端可結合設備特性,採用不同的交互方式完成關閉動作,包括點擊(退出微信位置共享)、長按(keep結束跑步、騎行等活動)、側滑(iPhone滑動關機)。

4.小程序的關閉按鈕

BAT和頭條都做起了小程序,在設計關閉按鈕這件事上,設計師們可謂絞盡腦汁。微信小程序搶佔了「⊙」,其他幾家只好變著花樣設計[X]。此外,設計師們還糾結於使用多大的圓角,如何表現更多「≡」「…」「┇」。幾種小程序的設計規範見下圖。

小程序的火爆給關閉按鈕在移動端帶來了復興,設計師們紛紛嘗試讓[x]回歸右上角,說是探索新交互形式也不算,畢竟合適的才是最好的,但確實威脅了「

小結

關閉按鈕只是用戶界面設計中的小元素,往往容易忽略。掌握必要的設計技巧的同時,結合業務需求進行設計處理方能不忘初心、更好服務用戶,實現從設計關閉按鈕到設計關閉行為的跨越。

相關焦點

  • B端設計指南03——按鈕,究竟應該如何設計
    在日常生活中,按鈕也是隨處可見的,一個電燈開關、遙控器按鈕,現實生活中按鈕反覆的出現也可以幫助我們不斷去理解屏幕世界中按鈕應該如何操作,從而衍生出屏幕世界中的按鈕的具體形態。 人機互動中最重要的就是把我們從小到大對於這個世界的認識映射到屏幕世界中,比如蘋果最為經典ios的滑動解鎖。
  • 按鈕設計的七大原則
    按鈕就是按鈕當涉及到與用戶界面交互時,用戶需要立即知道什麼是「可點擊的」,什麼不是。設計中的每一個項目都需要用戶進行解碼,一般來說,用戶解碼需要的時間越多,可用性就越差。但是用戶如何理解某個元素是否具有交互性呢?
  • 設計師如何做無障礙設計?從這五個方面出發!
    網際網路設計師如何著手發起無障礙優化?信息無障礙,是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著網際網路覆蓋越來越廣,對於身體有局限的群體而言,更加迫切通過網際網路獲取信息,而這就需要網際網路產品進行信息無障礙的優化。在我國其受益人群至少包括:8500多萬殘障人士,2億多60歲以上的老年人,數量龐大。
  • UIMAX設計思考:從「注意力」的角度,談體驗設計如何避免入坑
    接下來我們討論一下「用戶的注意力」如何影響用戶的感知和行為,用戶體驗設計中怎樣思考才能避免入坑。最近閱讀到《認知與設計》這本書,裡面的一些觀點也幫助我們對用戶的「注意力」有更深刻的理解。先從一個心理學實驗說起以下是2個籃球隊的傳球視頻,請認真觀看視頻並數出身穿白色球衣的球隊傳球的次數。
  • B端設計指南04——彈窗 究竟應該如何設計
    而在關閉入口的設計中,需要注意以下幾點: a.多形態的關閉 一個體驗良好的彈窗需要提供多個關閉入口,讓用戶進行退出。因此建議不需要改變關閉按鈕的位置,一般會有在彈窗內與彈窗外兩種形式可供大家進行選擇。 入口二:取消按鈕 取消按鈕一般和確定按鈕成對出現,取消按鈕的出現主要是為了輔佐確定按鈕,當用戶看到確定並想要反悔時,能夠給他提供給他相應的回退機制。
  • 單選按鈕的設計思考
    提供一個默認的選項UI設計的10條啟發(10 heuristics of UI design)中的一條提到過:要給予用戶撤銷的權利。這表明要加入一個幫助用戶回到默認狀態的按鈕。而在單選按鈕中,則可以通過設置一個默認的預選按鈕來達到這個目的。
  • 如何正確設計「按鈕」,看完這些公式你就知道!
    今天給大家分享這篇文章,主要講解在設計按鈕時我們應該考慮哪些因素,包括視覺上,有哪些萬能的方法及公式,能夠正確的制定按鈕的設計標準,來提升整個設計的系統性。 這裡需要注意的是,吸底的按鈕,需要產出兩套設計稿,一套為常規稿,一套為iPhoneX的適配稿。iPhoneX底部控制項的區域高度為68px,所以iPhoneX設計稿的吸底高度=常規設計稿吸底高度+68px
  • 思考|工業設計師不能不懂的·設計心理學
    - 02 - MODIFY 系列按鈕 設計:Matthias Pinkert 設計師將人們對五種觸覺操作(轉動、拉動、翻轉、推動、按下)的直覺認知與按鈕的形態設計相互關聯
  • 電梯急停按鈕在哪 如何正常使用電梯急停按鈕
    電梯的出現給了我們的生活帶來很多的方便,但是我們在乘坐電梯的時候,也必須要了解使用電梯的一些方法,如果遇到緊急的情況,也要知道如何去處理,一般電梯都會有急停按鈕的,這個按鈕就是為了在緊急情況的時候使用的,那麼,我們來說說電梯急停按鈕在哪?如何正常使用電梯急停按鈕?
  • UX設計師應該掌握的頂級技能
    UX設計師應該掌握的頂級技能摘要:初級UX設計師如何自我提升?
  • UI設計規範:單選按鈕 vs 複選框,沒那麼簡單
    無論是網頁設計,還是移動app設計,都經常用到單選按鈕和複選框這兩個組件。
  • 2013扁平化設計終極指南——UI設計師必看
    沒關係,WebdesignerDepot將幫助你!我們精心收集了一些扁平化資源,從UI套件到調色工具,再到字體選擇和WP主題,從理論文章再到創意圖庫,我們將呈遞給您體系化的扁平化資源!如果想要試水扁平化設計,或者想要更進一步,這篇文章都適合您,應有盡有。
  • 設計沉思錄|設計師應該了解的響應式知識
    上圖中每條線代表一個斷點,那麼應該如何選擇斷點?斷點的設置一定是基於頁面具體內容,並參考網站用戶的設備解析度數據。設計過程中在一定區間內拉升或壓縮,已經無法用相同的布局內容時,必須改變內容展現方式時,而產生的關鍵尺寸的節點。請參考文章上結構模塊變化參考圖。需要注意的是,在選擇斷點時,不應選擇將斷點設置為與某些常見設備寬度相同,而是應該確保常見設備寬度能夠很簡單地落入到某一設計範圍之內。可以在各類設備上對設計進行測試並以此來調整斷點。那麼完全不考慮設備嗎?
  • 如何正確設計「按鈕」,看完這些公式你就知道
    今天給大家分享這篇文章,主要講解在設計按鈕時我們應該考慮哪些因素;包括視覺上,有哪些萬能的方法及公式,能夠正確的制定按鈕的設計標準,來提升整個設計的系統性。一、按鈕有哪些作用?在設計按鈕之前,需要先理解按鈕起到的代表含義——什麼地方該加按鈕,什麼地方不加按鈕,在系統化設計思路中需要非常有講究。
  • UI設計師如何助力PM的原型圖?
    本文筆者將從產品分析五要素——用戶、行為、目標、場景、媒介,來講述:UI設計師如何在產品設計之前對產品進行分析?前段時間準備跟朋友開發一個垂直領域新聞類的產品,在產品的設計過程當中有很多值得思考的地方,尤其是站在UI設計師的角度,如何去助力產品的設計,所以總結了一下跟幫友們分享。
  • 如何設計一個美觀又易用的食譜APP?
    在這個項目當中,主要的設計師是 Anton Morozov, Ernest Asanov 和 Vlad Taran,他們將會通過分析和探討來尋求最合理的內容和導航的設計。項目目標關於烹飪和食譜的移動端APP 的 UI 設計。
  • 如何成為一名室內設計師,成為室內設計師你應該知道的10件事
    但是,在你開始夢想房間改造之前,首先考慮如何成為一名室內設計師。室內設計師和其他專業人士一樣,每天都面臨挑戰。雖然有些可能對你沒有吸引力,但其他人可能會激勵和激勵你。讓我們來看看如何成為一名室內設計師,以及你在為之努力之前應該知道的事情。室內設計是你的夢想嗎?
  • 空間設計師沈雷:餐飲如何與設計有效溝通
    餐飲走向品牌化,空間設計也越來越受重視。那麼餐飲界該如何與設計界有效溝通呢,內建築設計事務所合伙人、設計總監沈雷,在12月1-5日舉辦的「首屆中國餐飲品牌節」上,與現場1000+位餐飲從業者進行了深度探討,主題為《餐廳?設計?或是其他》。商業的盡頭是人性,好的設計師永遠關注人,關注人的體驗,關注人的感受。設計師在餐飲行業中充當著什麼樣的角色?
  • 為什麼單選按鈕和複選框不能共存?
    因此,單選按鈕和複選框同時存在違反了用戶體驗中的一致性原則。設計師和開發人員從來沒有質疑過它們的共存,因為一直以來都是這樣的。然而,如果它們的共存引起了用戶的困惑並違反了用戶體驗原則,那麼就需要進行邏輯分析和重新考慮了。
  • 設計師如何為老年人創造成熟的UI/UX用戶體驗
    這對設計師意味著什麼從長遠來看,我們應該把重點放在不同的年齡段上,從不同的角度去思考用戶體驗,而不僅僅是迎合使用iPhone的千禧人,畢竟,為老年人做設計可以讓我們獲得更多的潛在用戶。那麼問題來了,到底該如何更好的為老年人用戶設計更好的用戶體驗呢?在為老年人設計網站或者產品時,重點應該放在用戶的使用能力上,例如有的老年人可以自如的在奈飛上瀏覽視頻節目,而有些則完全無法操作使用,這不單是年齡問題,隨著年齡的增加,老年人在視力、聽力或者運動能力都有可能出現問題,所以年齡只是一個概括性的描述。