網(wǎng)站地圖|客服中心|設(shè)為首頁|加入收藏

行業(yè)新聞

首頁 > 新聞 > 網(wǎng)站設(shè)計 > 看看設(shè)計師是如何思考ui對話設(shè)計的

看看設(shè)計師是如何思考ui對話設(shè)計的



  何謂 對話框


  " 對話框 " 是一種以文字與使用者對話的使用者介面。其中,「警告對話框」(Alerts,以下簡稱警告框)通常用于通知使用者發(fā)生了錯誤或警告,并詢問接下來的操作(同意、不同意等等)。使用警告框時必須十分注意,因為使用者并不希望正在進行中的工作受到打擾。

  「確定 " 執(zhí)行取消 “」和「取消 " 執(zhí)行取消 “」

  首先請看以下的圖片:




  對話框

  這是一個警告框的例子,首先以說明文字詢問使用者是否要中斷目前的操作,接著給了「取消」和「好」兩個作為行動的選項。看了這個例子之后有沒有覺得哪里怪怪的?

  文字內(nèi)容意思

  問句確定要取消編輯中的內(nèi)容嗎?確認是否要舍棄編輯中的內(nèi)容(兩個選項)

  同意好舍棄編輯中的內(nèi)容

  不同意取消保留編輯中的內(nèi)容

  在這個語境中,系統(tǒng)向使用者確認是否同意執(zhí)行「取消編輯中的內(nèi)容」。大部分同意執(zhí)行的使用者,可能會直覺地按下相同文字的「取消」按鈕?墒沁@樣的話并不會取消編輯。

  因為這個取消按鈕指的是「取消『取消編輯中的內(nèi)容』」。也就是說,若想要如使用者所想的舍棄編輯中的內(nèi)容的話,必須選擇另外一邊的按鈕。像是「取消執(zhí)行取消 」這種具有雙重否定意思的對話框,會讓文字的意思變得復雜,應該要避免使用。

  那么我們試著改變按鈕的用詞來避免「取消執(zhí)行取消」。

  

  這樣應該就不會造成混亂了吧……?

  但這樣的修正方式并不好。只從「是」、「否」的文字,很難想像按下按鈕后的結(jié)果,用在對話框的按鈕并不適當。

  接著我們來試試看大家一定都看過的警告框。為了防止被大家吐槽說明不夠清楚,我們加長說明文字,如同以下的圖片:

  

  是!咦,等等,否?

  因為這個警告框在最后說了「建議您事先儲存」,想要這么做的使用者想必會直覺地按下「是」。然而,若是選了「是」的話,就會執(zhí)行原本詢問的問題「取消編輯中的內(nèi)容」,這樣不要說儲存了,編輯中的內(nèi)容反而會被刪除,對使用者來說是最糟的情況。

  設(shè)計簡短、有邏輯且適當?shù)奈陌?/strong>

  剛才的例子可以說是因不適當?shù)奈陌付斐傻模骸肝淖謆ug」。在 UI 設(shè)計的過程中,往往容易忽視文案的設(shè)計,若是能夠注意幾個重點,「文字bug」是能夠避免的。

  我們再看一次最初的警告框:

  

  這個警告框的說明文字并不恰當,并且選項的按鈕用語也是錯誤的。

  為什么都不對呢?首先,在說明文字中直接使用「取消」這樣的字眼并不好,因為「取消」這個詞經(jīng)常用于表示否定意思的按鈕上,應該避免使用在問句中,以免造成混亂。另外,按鈕的文字應該要能對應說明文字要求的動詞。在前面的例子中使用的「是」、「否」不是動詞,使用者很難想像按下按鈕后的結(jié)果是什么。為了理解意思所需的時間會比以直接以動詞表示(例如「刪除」、「舍棄」)的按鈕還要久。

  將「是」、「否」這種沒有邏輯性的文字用于按鈕并不適當。具有否定意思的動作名稱,請盡可能地統(tǒng)一稱作「取消」。在各作業(yè)系統(tǒng)中(iOS、macOS等),「取消」也是用來表示否定意思的統(tǒng)一用詞。至于具有同意意涵的按鈕,若是使用「好」這個字在語境上讀起來不會覺得奇怪的話,則可以放心使用;需要更具體地傳達意思的話,將「能夠?qū)f明文字內(nèi)容的動詞」直接用于按鈕的文字是最好的。

  簡潔地敘述說明文字

  在說明文字中,盡量不要頻繁地使用太過禮貌但不直接的句子。例如剛才的例子中「確定要~嗎?」的問句,從使用情境來看,決定要舍棄編輯中的內(nèi)容的是使用者自己,因此我們可把說明文字再縮短成「要~嗎?」的形式。

  使用者并不是想要閱讀文章,而是想要盡快地獲得自己想要的內(nèi)容,太拐彎抹角的說明只會讓使用者跟內(nèi)容之間的距離變得更遠。

  看過上面這些討論,我們可將這個警告框的說明文字中的「確定要取消編輯中的內(nèi)容嗎?」改寫成「要舍棄編輯中的內(nèi)容嗎?」

  

  讀者覺得如何呢?雖然跟最初的警告框比起來已變得比較好懂了,但似乎還有改善的空間。

  考慮到破壞性操作

  在警告框上的同意操作「舍棄」同時也是破壞性操作,因此我們將它的按鈕樣式改成 Destructive Style(紅色的文字)

  如此一來就成為下圖這樣:

  

  因為「舍棄」除了是破壞性操作,在這個說明的語境中也具有同意的意思,我們遵照 HIG(Human Interface Guideline)將它放在右邊,表示不同意的「取消」則放在左邊。 (在舊版的iOS HIG中,規(guī)定若是具有破壞性操作的按鈕,應該放在左邊,而取消則放在右邊,但在iOS 10中只規(guī)定將使用者最有可能選擇的動作放在右邊。因此,像是在主畫面刪除App 時會出現(xiàn)的警告框,也像上圖一樣把取消放在左邊,并把套用了Destructive Style 的破壞性操作放在右邊。)

  

  看起來很像一回事了吧?不過其實還有一個大問題。

  Action Sheet 的功能

  上面的警告框看起來似乎很完美了,但其實一開始使用警告框可能就是不對的。警告框是在使用者不經(jīng)意觸發(fā)事件(錯誤等)時,用來詢問使用者的判斷的一種 Modal View(模態(tài)視圖)。考慮到這點后,這次的內(nèi)容「舍棄編輯中的內(nèi)容」并不符合這種情境。這個警告框是因為使用者主動地按下關(guān)閉按鈕才出現(xiàn)的,不能說是「使用者不經(jīng)意觸發(fā)的事件」。

  在這里,Action Sheet 登場了。 Action Sheet 也是一種對話框,它能夠提供兩種以上的操作選項,適合在使用者主動操作的情境中用來詢問是否要刪除內(nèi)容。另外,即使適合使用警告框的情境,若是選項很多的話,也可以考慮改用 Action Sheet。

  在 Action Sheet 中,一定至少有一個同等于取消的按鈕,因此選項包含了取消按鈕后,總是有兩個以上。使用者隨時都有中斷即將執(zhí)行的動作的權(quán)力。

  

  是不是看起來更像一回事了呢。

  考慮 Action Sheet 的按鈕配置

  在剛才完成的 Action Sheet 中,進一步詢問使用者是否要儲存內(nèi)容似乎也不錯。因此我們需要增加一個按鈕,如下面的表格,我們有兩種增加的方式:

  

  經(jīng)過以上的討論,這次 Action Sheet 的設(shè)計,A才是正確答案。當然定義 App 本身的設(shè)計語言并且展現(xiàn)出獨特的部分也很重要,但首先更應該遵照系統(tǒng)平臺的設(shè)計語言。

  

  思考沒有選項時,警告框的按鈕文字

  

  有的時候警告框只是用來傳達訊息,比如在說明新功能的時候,會用到只有一個按鈕的警告框。我們可想想在這種時候該如何設(shè)計按鈕的文字。一般來說,使用「OK(好)」雖然沒有問題,但在不同的語境中也有可能需要改成其他文字。

  另外,只有一個按鈕的時候,將按鈕設(shè)定為預設(shè)的樣式(粗體字)會比較好。

  避免針對警告框本身的動作

  

  請避免在按鈕上使用「關(guān)閉」或「返回」等用來表示跳出警告框意思的文字。

  讀者可仔細想想「關(guān)閉」、「返回」所代表的語境,都是指涉「警告框」這個對象。用句子描述的話其實就是「關(guān)閉警告框」、「關(guān)閉警告框,并返回到之前的狀態(tài)」的意思。但其實「關(guān)閉警告框」這件事是理所當然的,沒有必要特別提供一個「關(guān)閉警告框」的選項給使用者去按。不管選項是代表同意或不同意的按鈕,只要按下就一定會關(guān)閉警告框,因此提供說明文字來說明按下按鈕后的結(jié)果是比較適當?shù)摹?/span>

  如果想要在按鈕上使用「關(guān)閉」、「返回」等文字的話,請改用「OK(好)」就可以了。大部分的情況下使用「OK(好)」都不會有問題。

  不要頻繁地使用對話框

  對話框是在使用者進行操作時強行介入的一種「模式」。在 App 中盡量不要使用警告框,也不要毫不思考地使用對話框。例如在 App 開啟時跳出的「新消息」警告框,或者只是告知使用者操作的結(jié)果的警告框等,都應該避免使用。

  結(jié)論

  若是需要在 App 中使用對話框時,請注意以下要點來設(shè)計:

  注意文字是否簡潔易懂并具一致性

  避免使用像是「取消的取消」這樣的雙重否定表現(xiàn)。尊重在作業(yè)系統(tǒng)中使用的文字表現(xiàn),并注意不要偏離。 「取消」是在系統(tǒng)中經(jīng)常用于表示對于問句的否定,如同「保留字」一般的詞,請不要在其他地方使用它。

  在按鈕的文字上,建議使用能夠讓使用者預測到結(jié)果的動詞。

  想要在警告框中加入標題以外的補充文字時,請將文字寫在 messageLabel(內(nèi)文)中而不是 titleLabel(標題)。

  遵守作業(yè)系統(tǒng)的規(guī)范

  在 iOS 與 macOS 中,有「將表示同意的動作放在右邊,表示不同意的動作放在左邊」的定義,請遵守這個資訊的排列規(guī)則。但注意在 Windows 或者舊版的 Android 中,這個規(guī)則剛好是反過來的。

  在 iOS 中,也有「請在破壞性操作的按鈕上使用 Destructive Style(紅色文字)」的規(guī)則,若使用了會執(zhí)行刪除等操作的按鈕,請考慮使用 Destructive Style。

  在使用者主動選擇行動時,使用 Action Sheet 而不是警告框。

  主角是使用者與內(nèi)容

  不只是對話框,所有的使用者介面都不應該是主角。介面應該是連接使用者與內(nèi)容之間的橋梁,并且要盡量保持透明,不干擾使用者。

  避免讓使用者意識到「關(guān)閉對話框」這個行為。在使用者主動采取行動的同時,順便也關(guān)閉警告框才是正確的,而不是讓使用者去關(guān)閉警告框。

  不要頻繁地使用

  避免什么訊息都用警告框表示。無論是跟 App 有關(guān)的新訊息,成功收藏內(nèi)容時的通知,開啟 App 時的新功能介紹等等,在思考使用者的核心體驗之后,再考慮是否真的需要。

  但在發(fā)生系統(tǒng)障礙、連線錯誤等無法預期的嚴重情況時,則可使用警告框。
  • 基于用戶創(chuàng)新

    界面設(shè)計日新月異,夢創(chuàng)義堅持基于用戶需求的界面創(chuàng)新設(shè)計……

  • 服務(wù)設(shè)計思維

    互聯(lián)網(wǎng)的格局發(fā)生的改變,在我們進行設(shè)計服務(wù)時更是考慮不同用戶、不同……

  • 洞察用戶心理

    洞察用戶有意識和無意識的行為以及心理特征通過構(gòu)造一系列的服務(wù)來促進……

  • 查看更多 >>

最新新聞Latest News

中小型企業(yè)網(wǎng)站建設(shè)完應該如何營銷
很多中小型企業(yè)往往糾結(jié)于以下10個問題:一、我們起步比別人晚,我們的……
做企業(yè)網(wǎng)站到底做給誰看?
設(shè)計經(jīng)常時不時的遇到一些企業(yè)客戶,常常搞不清楚誰會真正看你的企業(yè)網(wǎng)……
傳統(tǒng)企業(yè)進軍移動互聯(lián)網(wǎng),從移動云網(wǎng)站開始
移動互聯(lián)網(wǎng)是移動通信和互聯(lián)網(wǎng)融合的產(chǎn)物,其發(fā)展的重要基礎(chǔ)便是智能手……
網(wǎng)站建設(shè)和運營五大細節(jié)決定用戶黏性
網(wǎng)站的成功離不開搜索引擎優(yōu)化,更離不開最基礎(chǔ)最根本的用戶群體,如何……
2015年值得關(guān)注的電子商務(wù)5大趨勢
線上線下銷售的界線正在變得越來越模糊。在2015年,這一趨勢仍將繼續(xù)!

銷售熱線

7x24小時全國售前咨詢熱線:010-57281389

7x24小時全國售后服務(wù)熱線:13020085953 15313016798

手機 | 微信同號:18600846206   QQ:523313456

立即咨詢 網(wǎng)站建設(shè)業(yè)務(wù)咨詢|客服熱線:010-57281389 13020085953

點這里給我發(fā)消息 電子郵箱:cnet99@cnet99.com

營業(yè)地址(東部):北京市朝陽區(qū)伊莎文心廣場A座3層B-22

位置分享

營業(yè)地址(西部):北京市豐臺區(qū)汽車博物館東路1號諾德中心9-605

標準網(wǎng)站,網(wǎng)站建設(shè),域名注冊,虛擬主機,獨享主機,企業(yè)云郵箱,網(wǎng)站維護一條龍,北京網(wǎng)站建設(shè)中心


  掃一掃 加微信
  微信號:cnet99com

  掃一掃 加關(guān)注
  微信平臺

天潤智力-專注于互聯(lián)網(wǎng)平臺建設(shè)與服務(wù)領(lǐng)域 中國互聯(lián)網(wǎng)平臺建設(shè)服務(wù)提供商

萬網(wǎng)阿里云金牌首席合作伙伴站點 全線代理萬網(wǎng)阿里云產(chǎn)品及服務(wù)

中國萬網(wǎng)正式通過ISO9001國際標準質(zhì)量體系認證

Copyright©1999-2025 天潤智力 備案/許可證編號 京ICP備2020040216號-3

公安部備案號 11010502032413