中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

今天分享的內(nèi)容是app 的「對話框」如何影響我們使用（甚至流氓軟件如何利用它來阻止我們下載），希望能為你帶來啟發(fā)。

在使用移動產(chǎn)品時，經(jīng)常會遇到一個經(jīng)典界面——對話框。優(yōu)秀的對話框有助用戶理解產(chǎn)品，并在關(guān)鍵節(jié)點幫助用戶作出正確選擇。而糟糕的對話框則會「幫倒忙」。

本文將重點談?wù)勎覍Α笇υ捒颉沟挠^察，并告訴大家它將如何影響我們?nèi)粘Ｊ褂谩?/p>

目錄：

1. 對話框如何影響我們的使用？（親身經(jīng)歷）
2. 影響對話框的 3 個因素
3. 如何避免和利用「失誤」

一、「心驚膽寒」的選擇

春節(jié)與友相聚。他是海量，我知其酒后不可開車，就用某個代駕服務(wù)來幫他開車。此前我用過該服務(wù)，但因為很少喝酒，早就卸載了 app 改用微信服務(wù)號。對其操作不太熟悉，也因此出現(xiàn)了這么一段經(jīng)歷：

春節(jié)約代駕不易，搶了數(shù)次才成，司機電話打來確認(rèn)定位，曰等半刻便至。

與朋友在車邊等候時，一個不慎，誤觸「取消」。彈出一個界面問：是否取消？

我當(dāng)然不要取消了！

但是，此時卻遇到一個難題。竟將我們幾人酒意嚇得半醒——

界面畫風(fēng)如下：

此時的界面，宛如一道充滿哲學(xué)智慧的兩難選擇題。

這個選擇不僅關(guān)乎我們能否保住辛苦搶來的代駕，也關(guān)乎我們能否在寒冬順利回家，更關(guān)乎我作為一個交互設(shè)計師的尊嚴(yán)……

通常來說，在交互設(shè)計邏輯中，二選一是最簡單的，無非是 Yes or No。但此時的情況卻很復(fù)雜：

推測 a

如果按「彈窗標(biāo)題」與「選擇的答案」關(guān)聯(lián)來看：

• 標(biāo)題：是否取消訂單？
• 答案：取消 | 繼續(xù)

結(jié)論：

• 取消 = 取消（訂單）
• 繼續(xù) = 繼續(xù)（訂單）

但是經(jīng)驗告訴我，產(chǎn)品設(shè)計者的意思也可能是：

推測 b

如果按彈窗的一般原則來說，這個「繼續(xù)」應(yīng)該指「Yes」，而「取消」應(yīng)該指「No」，而 Yes 和 No 的描述對象應(yīng)該是指「是否取消訂單？」。

結(jié)論：

• 繼續(xù) = Yes，是的，取消（約司機）
• 取消 = No，不要取消，繼續(xù)（約司機）

你這樣講，好像也很有道理的樣子呀？

等等！繼續(xù) = 取消？取消 = 不要取消？為什么感覺到哪里不太對？

來，我們一起再看看這個神奇的界面，你能肯定地說出它就代表哪個意思嗎？

朋友們都笑了，說你丫想太多了！我們不能取消訂單！小明以迅雷不及掩耳盜鈴之勢，果斷出手，將「繼續(xù)」點了下去。

……

界面顯示：我們的訂單被取消了。

取消了……

誤操作在用戶交互過程中是很常見的，如何將誤操作的損失降低至最小，是我們應(yīng)該思考的問題。長久以來其實我們常常會遇到這些「小問題」，不過一笑而過罷了。

但有時間，它不是一個小問題：

二、發(fā)生了什么？對話框的幾個小問題

本文中提到的這個「彈窗」，標(biāo)準(zhǔn)名稱是「對話框」，是人機交互中的重要概念。在 Wiki 中的定義是：

……對話框是圖形用戶界面中一種特殊的視窗, 用來向用戶顯示信息以獲得用戶的響應(yīng)，使計算機和用戶之間構(gòu)成了一個對話——以提供警告、通知、請求用戶授權(quán)操作、或請求用戶的輸入等。

早期的 Windows 圖形界面中，對話框一般長這個樣子：

圖：Windows 對話框 via UCDC 163

1. 文字描述的問題

選擇性對話框通常是由一個肯定事件 一個否定事件（即與肯定的事件對立）共同組成，通過選擇點擊按鈕來實現(xiàn)事件執(zhí)行。

肯定事件不一定是積極的，也可能是消極的，或者破壞性的，比如刪除、格式化等。以 Windows 為例，通常用「是」/「否」（Yes / No）來表示肯定和否定，如上圖。

但有時候也用「確定」/「取消」（OK / Cancel）來表示，如下圖。

如果一直就用「是」/「否」兩選一，估計出錯反而低一些，比如：

你確定刪除是這個文件嗎？
是 | 否

你確定要退出？
確定 | 取消

你確定要移動這個文件嗎？
是 | 否

看上去沒有問題，對嗎？

以上例子中：

• 是 = 確定（肯定事件，繼續(xù)當(dāng)前動作）
• 否 = 取消（否定事件，中止當(dāng)前動作）

接下來這個對話框中，新的情況出現(xiàn)了：

原本「是」對應(yīng)「否」，「確定」對應(yīng)「取消」，現(xiàn)在卻變成了三個同時出現(xiàn)，而且分別代表不同的意思：

• 是 = 保存
• 否 = 不保存
• 取消 = 中止當(dāng)前動作（等同于右上角的紅叉）

這種由簡單的「是」或「否」式的按鈕文字表述，不能精確指向操作動作，需要用戶在腦中理解翻譯。于是，在圖形界面的發(fā)展過程中逐漸出現(xiàn)了「用事件本身」來描述按鈕。比如這樣：

伴隨著移動互聯(lián)網(wǎng)的來臨，人們要在小小的屏幕上完成一系列復(fù)雜操作，這對交互設(shè)計和產(chǎn)品體驗提出了更高的要求，而上文中所用的「用事件本身」描述的原則被逐漸保留下來。

下圖是移動界面中的一些對話框示范。

進而又變化出更多的形式（下圖），但無論如何，都是以「描述得更精準(zhǔn)」為目標(biāo)。

但究竟如何才算「描述得更精準(zhǔn)」呢？難道取決于設(shè)計人員或者開發(fā)人員的文字功底嗎？

Google 的 Material Design 原則中有非常優(yōu)秀的定義，這也是我近年看到最好的設(shè)計指導(dǎo)。

圖源：Google Design

在這個官方的例子中，明確地定義了什么是「好的描述」：

The affirmative action text “Discard” clearly indicates the outcome of the decision.

合理的文字描述應(yīng)該呈現(xiàn)是的選擇所帶來的結(jié)果（而不僅僅是描述選擇本身）。

同時，文檔中還對標(biāo)題的提出了明確的要求：必須描述清楚這個行為，以及行為所帶來的影響。

界面中的文字，絕不是修辭問題，而是事關(guān)信息傳遞是否正確的問題。

據(jù)以上的內(nèi)容，我們可以定義出按鈕文字的正確原則：「能描述行為本身，以及行為將帶來的結(jié)果」。要避免 UI 界面的文字描述失誤，最重要的是遵照正確的原則。

2. 按鈕布局排序問題

你可能注意到了，Windows 的「肯定」行為在左，「否定」在右。

而 macOS 的布局排序似乎與此相反？

我沒有找到 Windows 按鈕布局排序的原因說明，也無法解釋為是什么 Windows 的對話框的「肯定」行為是在左邊。

但就江湖故事來推理的話，早年 Windows 大量抄襲了 macOS 的系統(tǒng)界面，但又不好意思全盤抄襲，于是來了個全盤大鏡像，這也就是為什么它們的窗口關(guān)閉/最小化這些按鈕一家在左上角，一家在右上角的原因……

而考慮到 macOS 的界面又來源于 Xerox，所以這事也沒法細(xì)說……

圖：Xerox 8100 的界面 via COOLSHELL

為什么我要這樣在意布局排序的問題？

這涉及到交互的一致性原則，我認(rèn)為一致性是產(chǎn)品設(shè)計中最重要的原則之一：人的認(rèn)知是有慣性的，在同一套系統(tǒng)里，相關(guān)屬性應(yīng)該保持一致，能大大降低用戶的學(xué)習(xí)成本，減輕記憶負(fù)擔(dān)。（相關(guān)屬性包括但不限于顏色、尺寸、形狀、位置、層級關(guān)系、形式等）

比如：家里所有的冷熱水龍頭，都應(yīng)該保持左熱右冷的方向一致原則，我們使用起來就會很方便。試想一下，家里所有的冷熱水管都接反了——其實還好，稍為適應(yīng)一下就會習(xí)慣。

最糟糕的情況是，只有部分龍頭的冷熱水管被裝反了——這將嚴(yán)重的破壞方向一致原則，使我們無法無法習(xí)慣操作所有的龍頭。

同理，當(dāng)我們使用 app 時，這種一致性會幫助我們快速反應(yīng)。

圖：iOS、Android 也繼承 Unix 系的布局原則：肯定行為在右，否定行為在左。

Material Design 里也對布局做了進一步規(guī)范：

Affirmative actions are placed on the right side and continue the process.

當(dāng)然，移動系統(tǒng)的早期階段，也經(jīng)歷了一段時間的混亂期 —— 不同的系統(tǒng)的按鈕布局排序時而在左，時而在右。

下圖分別是 Windows Phone、黑莓、iOS 8，針對同一問題的對話框界面。

Windows Phone 保持了 Windows 的一致性習(xí)慣，「肯定」行為在右側(cè)；黑莓繼承了 Unix 系的布局原則，「肯定」行為在右。

而 iOS 竟然采用了采取了「肯定」行為在左，與 macOS 相反。后來這個問題在 iOS 10 的更新修正了：將「肯定」行為操作用改至右側(cè)，并將「破壞」行為使用了紅色警示。如下圖所示：

圖：iOS 8 與 iOS 10 的對話框按鈕布局改變

當(dāng)我們學(xué)習(xí)和使用這些原則時，應(yīng)該理解原則背后的精髓，而不是表象。從設(shè)計和體驗的創(chuàng)新來講，形式可以千變?nèi)f化，但是在同一系統(tǒng)內(nèi)，這些變化應(yīng)該遵守同樣的原則。

比如在這個設(shè)計中，「取消」沒有采用「按鈕」而是使用了「X」形的圖標(biāo)——但只要整個 app 中保持統(tǒng)一的范式，同樣符合一致性原則，并不會造成用戶的困擾。

圖：水滴清單的草稿版本

如果突然破壞了這種位置一致性，就很容易造成操作失誤。一般常見于新手交互設(shè)計師，在排放按鈕時很容易出現(xiàn)這種問題。

有時候，破壞一致性原則的問題不僅是新手會犯，在一些成熟產(chǎn)品中偶爾也會遇到。比如在微信中就有這樣的矛盾：

微信朋友圈的「刪除已發(fā)表消息」不符合「肯定行為放右側(cè)」的原則，與「微信電話本刪除聯(lián)系人」和「群成員刪除」的對話框布局也是相反的。

圖：微信對話框中的一致性矛盾

進一步查看的話，會發(fā)現(xiàn)「通訊錄」Tag 編輯的放棄界面，以及「收藏」的編輯放棄界面中，「肯定」行為在右，與「朋友圈」消息刪除的「肯定」行為在左也是不一致的。如下圖：

同時，在「微信」產(chǎn)品內(nèi)部，各個子功能所采用的刪除界面，與聊天內(nèi)容的刪除界面形式不一致，提問標(biāo)題與選項的文字描述也不一致，如下圖：

而在 Android 版微信中，上圖的兩個界面風(fēng)格卻是一致的，按鈕布局也是一致的。在此不再列舉圖例。

定義具有一致性的原則的好處就是：在交互的細(xì)節(jié)優(yōu)化和查錯過程中，僅靠「細(xì)心」肯定是不夠的，一定是通過「原則」來排查。

當(dāng)定義了控件和布局的規(guī)范，就能避免按鈕排布的失誤。

3. 按鈕聚焦的問題

這個世界有許多人是選擇困難癥——特別是在今天這樣一個物質(zhì)豐富，信息過載的時代。要確保用戶少犯錯的另一種方法就是：永遠(yuǎn)不要將用戶置于并列選擇的困境之中。

圖：并列選擇帶來的困擾

因此，在對話框或者選擇界面中，不要給用戶提供形式、色彩、灰度相似的選項。而是引導(dǎo)用戶注意到目標(biāo)選項。這里有些典型的例子。

用線框差異聚焦目標(biāo)元素：

用色塊差異聚焦目標(biāo)元素：

用字重差異聚焦目標(biāo)元素：

用按鈕形式差異聚焦目標(biāo)元素：

用色彩差異聚焦目標(biāo)元素：

通過具有差異性的按鈕，突出用戶「應(yīng)該做」的行為，引導(dǎo)用戶按產(chǎn)品設(shè)計邏輯進行處理，同時也能減少誤操作。讓用戶在使用過程中按預(yù)設(shè)流程流暢操作，避免不必要的辨認(rèn)和理解。

三、如何避免和創(chuàng)造差錯？

設(shè)計領(lǐng)域最有影響力的心理學(xué)家諾曼提到「差錯」最重要的兩種形式是「錯誤」(mistake) 和「失誤」(slip)，并將失誤細(xì)分為 7 種情況，有興趣的朋友閱讀其經(jīng)典著作《the Design of Everyday Things》（設(shè)計心理學(xué)）。

我們在交互過程中的差錯通常都是由「失誤」引起的，即目標(biāo)正確，但執(zhí)行過程出錯。（錯誤則相反），而失誤通常都是由下意識、誤操作引起。

在第 2 部分，我歸納了?3 個問題，分別是「文字描述」、「布局排序」、「選項聚焦」，如果能將這?3 個層級的一致性處理好，在交互過程中將能有效改善對話框引發(fā)失誤的情況。

下面，來點刺激的：

如果我們將這三種形式組合，反向思考，就能「創(chuàng)造」出各種失誤——比如在連續(xù)操作環(huán)節(jié)中，將一直在右邊的「確定」突然換到左邊（布局排序），或者將用戶不想操作的按鈕故意強調(diào)（按鈕聚焦），故意使用混淆的文字等。

是否感覺到很熟悉？很多流氓軟件都用這些方法來阻止你卸載。

打亂布局一致性創(chuàng)造失誤：

利于聚焦創(chuàng)造失誤：

描述混淆，再加上讓我永生難忘的「臨門一腳」：

注：現(xiàn)在很少使用 Win 系統(tǒng)所以沒找到上文所述的無恥界面，因此繪制線稿說明。如果你能電腦有類似的誤導(dǎo)操作界面，歡迎截屏分享，直接發(fā)到我的微信公眾號「田飛」。

最后

最后，讓我們回到一開始的「慘痛代駕故事」。事后，我終于反應(yīng)了過來——當(dāng)時最好的選擇就是：什么也不做。

交互的難處就在于它所服務(wù)的人，具有分類太復(fù)雜，多樣化的特點——很難有一種真正適合所有人的原則，最終決定都是針對自己的產(chǎn)品和目標(biāo)人群，趨利避害，做出最優(yōu)選擇。

回到當(dāng)時的場景，你覺得這個對話框應(yīng)該如何設(shè)計呢？

PS：原本想寫「失誤」這個話題的，但這個概念太廣了，于是縮焦到「對話框失誤」這個更小的命題上。我想做的是盡量避免術(shù)語名詞，用自己的理解來解釋和重現(xiàn)觀察。

文中所提到的定義和問題，部分屬于推薦和猜想，不具學(xué)術(shù)考據(jù)的標(biāo)準(zhǔn)。而文末提到的幾個反例所涉及的設(shè)計道德問題，則又是另一個話題了。

作者：田飛，MindStore 周榜冠軍「水滴清單」創(chuàng)始人，其作品「方片收集」被評為蘋果 2016 年度精選應(yīng)用。

來源：http://www.ifanr.com/app/786607

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@愛范兒，作者@田飛