首頁 > 新聞 > 網(wǎng)站設(shè)計(jì) > 看看設(shè)計(jì)師是如何思考ui對(duì)話設(shè)計(jì)的
看看設(shè)計(jì)師是如何思考ui對(duì)話設(shè)計(jì)的
何謂 對(duì)話框
" 對(duì)話框 " 是一種以文字與使用者對(duì)話的使用者介面。其中，「警告對(duì)話框」（Alerts，以下簡(jiǎn)稱警告框）通常用于通知使用者發(fā)生了錯(cuò)誤或警告，并詢問接下來的操作（同意、不同意等等）。使用警告框時(shí)必須十分注意，因?yàn)槭褂谜卟⒉幌Ｍ谶M(jìn)行中的工作受到打擾。
「確定 " 執(zhí)行取消 “」和「取消 " 執(zhí)行取消 “」
首先請(qǐng)看以下的圖片：
對(duì)話框
這是一個(gè)警告框的例子，首先以說明文字詢問使用者是否要中斷目前的操作，接著給了「取消」和「好」兩個(gè)作為行動(dòng)的選項(xiàng)�？戳诉@個(gè)例子之后有沒有覺得哪里怪怪的？
文字內(nèi)容意思
問句確定要取消編輯中的內(nèi)容嗎？確認(rèn)是否要舍棄編輯中的內(nèi)容（兩個(gè)選項(xiàng)）
同意好舍棄編輯中的內(nèi)容
不同意取消保留編輯中的內(nèi)容
在這個(gè)語境中，系統(tǒng)向使用者確認(rèn)是否同意執(zhí)行「取消編輯中的內(nèi)容」。大部分同意執(zhí)行的使用者，可能會(huì)直覺地按下相同文字的「取消」按鈕�？墒沁@樣的話并不會(huì)取消編輯。
因?yàn)檫@個(gè)取消按鈕指的是「取消『取消編輯中的內(nèi)容』」。也就是說，若想要如使用者所想的舍棄編輯中的內(nèi)容的話，必須選擇另外一邊的按鈕。像是「取消執(zhí)行取消 」這種具有雙重否定意思的對(duì)話框，會(huì)讓文字的意思變得復(fù)雜，應(yīng)該要避免使用。
那么我們?cè)囍淖儼粹o的用詞來避免「取消執(zhí)行取消」。
這樣應(yīng)該就不會(huì)造成混亂了吧……？
但這樣的修正方式并不好。只從「是」、「否」的文字，很難想像按下按鈕后的結(jié)果，用在對(duì)話框的按鈕并不適當(dāng)。
接著我們來試試看大家一定都看過的警告框。為了防止被大家吐槽說明不夠清楚，我們加長(zhǎng)說明文字，如同以下的圖片：
是！咦，等等，否？
因?yàn)檫@個(gè)警告框在最后說了「建議您事先儲(chǔ)存」，想要這么做的使用者想必會(huì)直覺地按下「是」。然而，若是選了「是」的話，就會(huì)執(zhí)行原本詢問的問題「取消編輯中的內(nèi)容」，這樣不要說儲(chǔ)存了，編輯中的內(nèi)容反而會(huì)被刪除，對(duì)使用者來說是最糟的情況。
設(shè)計(jì)簡(jiǎn)短、有邏輯且適當(dāng)?shù)奈陌?/strong>
剛才的例子可以說是因不適當(dāng)?shù)奈陌付斐傻模骸肝淖謆ug」。在 UI 設(shè)計(jì)的過程中，往往容易忽視文案的設(shè)計(jì)，若是能夠注意幾個(gè)重點(diǎn)，「文字bug」是能夠避免的。
我們?cè)倏匆淮巫畛醯木婵颍?/strong>
這個(gè)警告框的說明文字并不恰當(dāng)，并且選項(xiàng)的按鈕用語也是錯(cuò)誤的。
為什么都不對(duì)呢？首先，在說明文字中直接使用「取消」這樣的字眼并不好，因?yàn)椤溉∠惯@個(gè)詞經(jīng)常用于表示否定意思的按鈕上，應(yīng)該避免使用在問句中，以免造成混亂。另外，按鈕的文字應(yīng)該要能對(duì)應(yīng)說明文字要求的動(dòng)詞。在前面的例子中使用的「是」、「否」不是動(dòng)詞，使用者很難想像按下按鈕后的結(jié)果是什么。為了理解意思所需的時(shí)間會(huì)比以直接以動(dòng)詞表示（例如「刪除」、「舍棄」）的按鈕還要久。
將「是」、「否」這種沒有邏輯性的文字用于按鈕并不適當(dāng)。具有否定意思的動(dòng)作名稱，請(qǐng)盡可能地統(tǒng)一稱作「取消」。在各作業(yè)系統(tǒng)中（iOS、macOS等），「取消」也是用來表示否定意思的統(tǒng)一用詞。至于具有同意意涵的按鈕，若是使用「好」這個(gè)字在語境上讀起來不會(huì)覺得奇怪的話，則可以放心使用；需要更具體地傳達(dá)意思的話，將「能夠?qū)?yīng)說明文字內(nèi)容的動(dòng)詞」直接用于按鈕的文字是最好的。
簡(jiǎn)潔地?cái)⑹稣f明文字
在說明文字中，盡量不要頻繁地使用太過禮貌但不直接的句子。例如剛才的例子中「確定要～嗎？」的問句，從使用情境來看，決定要舍棄編輯中的內(nèi)容的是使用者自己，因此我們可把說明文字再縮短成「要～嗎？」的形式。
使用者并不是想要閱讀文章，而是想要盡快地獲得自己想要的內(nèi)容，太拐彎抹角的說明只會(huì)讓使用者跟內(nèi)容之間的距離變得更遠(yuǎn)。
看過上面這些討論，我們可將這個(gè)警告框的說明文字中的「確定要取消編輯中的內(nèi)容嗎？」改寫成「要舍棄編輯中的內(nèi)容嗎？」
讀者覺得如何呢？雖然跟最初的警告框比起來已變得比較好懂了，但似乎還有改善的空間。
考慮到破壞性操作
在警告框上的同意操作「舍棄」同時(shí)也是破壞性操作，因此我們將它的按鈕樣式改成 Destructive Style（紅色的文字）
如此一來就成為下圖這樣：
因?yàn)椤干釛墶钩耸瞧茐男圆僮�，在這個(gè)說明的語境中也具有同意的意思，我們遵照 HIG（Human Interface Guideline）將它放在右邊，表示不同意的「取消」則放在左邊。 （在舊版的iOS HIG中，規(guī)定若是具有破壞性操作的按鈕，應(yīng)該放在左邊，而取消則放在右邊，但在iOS 10中只規(guī)定將使用者最有可能選擇的動(dòng)作放在右邊。因此，像是在主畫面刪除App 時(shí)會(huì)出現(xiàn)的警告框，也像上圖一樣把取消放在左邊，并把套用了Destructive Style 的破壞性操作放在右邊。）
看起來很像一回事了吧？不過其實(shí)還有一個(gè)大問題。
Action Sheet 的功能
上面的警告框看起來似乎很完美了，但其實(shí)一開始使用警告框可能就是不對(duì)的。警告框是在使用者不經(jīng)意觸發(fā)事件（錯(cuò)誤等）時(shí)，用來詢問使用者的判斷的一種 Modal View（模態(tài)視圖）。考慮到這點(diǎn)后，這次的內(nèi)容「舍棄編輯中的內(nèi)容」并不符合這種情境。這個(gè)警告框是因?yàn)槭褂谜咧鲃?dòng)地按下關(guān)閉按鈕才出現(xiàn)的，不能說是「使用者不經(jīng)意觸發(fā)的事件」。
在這里，Action Sheet 登場(chǎng)了。 Action Sheet 也是一種對(duì)話框，它能夠提供兩種以上的操作選項(xiàng)，適合在使用者主動(dòng)操作的情境中用來詢問是否要?jiǎng)h除內(nèi)容。另外，即使適合使用警告框的情境，若是選項(xiàng)很多的話，也可以考慮改用 Action Sheet。
在 Action Sheet 中，一定至少有一個(gè)同等于取消的按鈕，因此選項(xiàng)包含了取消按鈕后，總是有兩個(gè)以上。使用者隨時(shí)都有中斷即將執(zhí)行的動(dòng)作的權(quán)力。
是不是看起來更像一回事了呢。
考慮 Action Sheet 的按鈕配置
在剛才完成的 Action Sheet 中，進(jìn)一步詢問使用者是否要儲(chǔ)存內(nèi)容似乎也不錯(cuò)。因此我們需要增加一個(gè)按鈕，如下面的表格，我們有兩種增加的方式：
經(jīng)過以上的討論，這次 Action Sheet 的設(shè)計(jì)，A才是正確答案。當(dāng)然定義 App 本身的設(shè)計(jì)語言并且展現(xiàn)出獨(dú)特的部分也很重要，但首先更應(yīng)該遵照系統(tǒng)平臺(tái)的設(shè)計(jì)語言。
思考沒有選項(xiàng)時(shí)，警告框的按鈕文字
有的時(shí)候警告框只是用來傳達(dá)訊息，比如在說明新功能的時(shí)候，會(huì)用到只有一個(gè)按鈕的警告框。我們可想想在這種時(shí)候該如何設(shè)計(jì)按鈕的文字。一般來說，使用「OK（好）」雖然沒有問題，但在不同的語境中也有可能需要改成其他文字。
另外，只有一個(gè)按鈕的時(shí)候，將按鈕設(shè)定為預(yù)設(shè)的樣式（粗體字）會(huì)比較好。
避免針對(duì)警告框本身的動(dòng)作
請(qǐng)避免在按鈕上使用「關(guān)閉」或「返回」等用來表示跳出警告框意思的文字。
讀者可仔細(xì)想想「關(guān)閉」、「返回」所代表的語境，都是指涉「警告框」這個(gè)對(duì)象。用句子描述的話其實(shí)就是「關(guān)閉警告框」、「關(guān)閉警告框，并返回到之前的狀態(tài)」的意思。但其實(shí)「關(guān)閉警告框」這件事是理所當(dāng)然的，沒有必要特別提供一個(gè)「關(guān)閉警告框」的選項(xiàng)給使用者去按。不管選項(xiàng)是代表同意或不同意的按鈕，只要按下就一定會(huì)關(guān)閉警告框，因此提供說明文字來說明按下按鈕后的結(jié)果是比較適當(dāng)?shù)摹?/span>
如果想要在按鈕上使用「關(guān)閉」、「返回」等文字的話，請(qǐng)改用「OK（好）」就可以了。大部分的情況下使用「OK（好）」都不會(huì)有問題。
不要頻繁地使用對(duì)話框
對(duì)話框是在使用者進(jìn)行操作時(shí)強(qiáng)行介入的一種「模式」。在 App 中盡量不要使用警告框，也不要毫不思考地使用對(duì)話框。例如在 App 開啟時(shí)跳出的「新消息」警告框，或者只是告知使用者操作的結(jié)果的警告框等，都應(yīng)該避免使用。
結(jié)論
若是需要在 App 中使用對(duì)話框時(shí)，請(qǐng)注意以下要點(diǎn)來設(shè)計(jì)：
注意文字是否簡(jiǎn)潔易懂并具一致性
避免使用像是「取消的取消」這樣的雙重否定表現(xiàn)。尊重在作業(yè)系統(tǒng)中使用的文字表現(xiàn)，并注意不要偏離。 「取消」是在系統(tǒng)中經(jīng)常用于表示對(duì)于問句的否定，如同「保留字」一般的詞，請(qǐng)不要在其他地方使用它。
在按鈕的文字上，建議使用能夠讓使用者預(yù)測(cè)到結(jié)果的動(dòng)詞。
想要在警告框中加入標(biāo)題以外的補(bǔ)充文字時(shí)，請(qǐng)將文字寫在 messageLabel（內(nèi)文）中而不是 titleLabel（標(biāo)題）。
遵守作業(yè)系統(tǒng)的規(guī)范
在 iOS 與 macOS 中，有「將表示同意的動(dòng)作放在右邊，表示不同意的動(dòng)作放在左邊」的定義，請(qǐng)遵守這個(gè)資訊的排列規(guī)則。但注意在 Windows 或者舊版的 Android 中，這個(gè)規(guī)則剛好是反過來的。
在 iOS 中，也有「請(qǐng)?jiān)谄茐男圆僮鞯陌粹o上使用 Destructive Style（紅色文字）」的規(guī)則，若使用了會(huì)執(zhí)行刪除等操作的按鈕，請(qǐng)考慮使用 Destructive Style。
在使用者主動(dòng)選擇行動(dòng)時(shí)，使用 Action Sheet 而不是警告框。
主角是使用者與內(nèi)容
不只是對(duì)話框，所有的使用者介面都不應(yīng)該是主角。介面應(yīng)該是連接使用者與內(nèi)容之間的橋梁，并且要盡量保持透明，不干擾使用者。
避免讓使用者意識(shí)到「關(guān)閉對(duì)話框」這個(gè)行為。在使用者主動(dòng)采取行動(dòng)的同時(shí)，順便也關(guān)閉警告框才是正確的，而不是讓使用者去關(guān)閉警告框。
不要頻繁地使用
避免什么訊息都用警告框表示。無論是跟 App 有關(guān)的新訊息，成功收藏內(nèi)容時(shí)的通知，開啟 App 時(shí)的新功能介紹等等，在思考使用者的核心體驗(yàn)之后，再考慮是否真的需要。
但在發(fā)生系統(tǒng)障礙、連線錯(cuò)誤等無法預(yù)期的嚴(yán)重情況時(shí)，則可使用警告框。
- 基于用戶創(chuàng)新
界面設(shè)計(jì)日新月異，夢(mèng)創(chuàng)義堅(jiān)持基于用戶需求的界面創(chuàng)新設(shè)計(jì)……
- 服務(wù)設(shè)計(jì)思維
互聯(lián)網(wǎng)的格局發(fā)生的改變，在我們進(jìn)行設(shè)計(jì)服務(wù)時(shí)更是考慮不同用戶、不同……
- 洞察用戶心理
洞察用戶有意識(shí)和無意識(shí)的行為以及心理特征通過構(gòu)造一系列的服務(wù)來促進(jìn)……
- 查看更多 >>
最新新聞Latest News
- 中小型企業(yè)網(wǎng)站建設(shè)完應(yīng)該如何營(yíng)銷
- 很多中小型企業(yè)往往糾結(jié)于以下10個(gè)問題：一、我們起步比別人晚，我們的……
- 做企業(yè)網(wǎng)站到底做給誰看？
- 設(shè)計(jì)經(jīng)常時(shí)不時(shí)的遇到一些企業(yè)客戶，常常搞不清楚誰會(huì)真正看你的企業(yè)網(wǎng)……
- 傳統(tǒng)企業(yè)進(jìn)軍移動(dòng)互聯(lián)網(wǎng)，從移動(dòng)云網(wǎng)站開始
- 移動(dòng)互聯(lián)網(wǎng)是移動(dòng)通信和互聯(lián)網(wǎng)融合的產(chǎn)物，其發(fā)展的重要基礎(chǔ)便是智能手……
- 網(wǎng)站建設(shè)和運(yùn)營(yíng)五大細(xì)節(jié)決定用戶黏性
- 網(wǎng)站的成功離不開搜索引擎優(yōu)化，更離不開最基礎(chǔ)最根本的用戶群體，如何……
- 2015年值得關(guān)注的電子商務(wù)5大趨勢(shì)
- 線上線下銷售的界線正在變得越來越模糊。在2015年，這一趨勢(shì)仍將繼續(xù)。……
|
公安部備案號(hào) 11010502032413
