聚焦當(dāng)前任務(wù)

三星ONE UI 2.0今年系統(tǒng)更新，著手打造輕應(yīng)用體驗(yàn)。其中一項(xiàng)更新如下面圖所示；當(dāng)你在看視頻時(shí)候，不會(huì)被來(lái)電給打斷，而是以一種對(duì)話(huà)框的形式出現(xiàn)，問(wèn)候您是否要接電話(huà)。這種設(shè)計(jì)大大提高了用戶(hù)體驗(yàn)，解決之前全屏來(lái)電的困擾。

增強(qiáng)手勢(shì)交互

今年Android Q更新系統(tǒng)，新增手勢(shì)操作功能，試想平時(shí)我們喜歡坐在沙發(fā)或者躺著看電影，手機(jī)放在一邊，恰巧這時(shí)候你很累，想切換正在觀看的電視劇或者正在聽(tīng)的歌曲，使用手勢(shì)操作將大大提高便捷性。

Android Q 音樂(lè)播放器手勢(shì)切換歌曲

BYTON 概念汽車(chē)設(shè)計(jì)

以后如果智能家居領(lǐng)域引入手勢(shì)識(shí)別技術(shù)，比如在智能電視，空調(diào)，窗簾等等，那么將是多么方便的事情（如早上睡醒就可以躺在床上通過(guò)手勢(shì)打開(kāi)窗簾，比你去找遙控器方便很多呢），其實(shí)想想還是非常有可能的，我們技術(shù)不斷突破都是為了解決人類(lèi)需求問(wèn)題。比如誰(shuí)曾經(jīng)會(huì)想到手機(jī)可以折疊屏？

Use  Gestures on an OPPO

超強(qiáng)折疊多任務(wù)處理

2019年5月，安卓手機(jī)生態(tài)系統(tǒng)發(fā)生巨大變化，以Android Q為例子，手機(jī)多任務(wù)折疊處理任務(wù)革命開(kāi)始，之前我們?cè)谑褂肁PP的時(shí)候，是無(wú)法同時(shí)使用其他APP的，比如我在看視頻時(shí)候,我是無(wú)法使用通訊軟件發(fā)消息的，但是現(xiàn)在安卓多任務(wù)處理革命開(kāi)啟。以后我們將可以一個(gè)屏幕使用2個(gè)產(chǎn)品了，這也正符合未來(lái)大屏手機(jī)、PAD、折疊屏手機(jī)開(kāi)啟技術(shù)先例。

Android Q :Powering foldables

new ipad Pro（apple已實(shí)現(xiàn)一屏多app任務(wù)模式）

安卓生態(tài)系統(tǒng)今年打開(kāi)多任務(wù)折疊處理模式，后續(xù)將會(huì)有更多應(yīng)用來(lái)適配這種模式，畢竟目前還是安卓市場(chǎng)最大。

AR與VR技術(shù)逐漸普及

華為、谷歌、微軟、FB都在造智能眼鏡，AR增強(qiáng)現(xiàn)實(shí)技術(shù)與VR虛擬現(xiàn)實(shí)技術(shù)已經(jīng)逐漸在我們生活中越來(lái)越多了的場(chǎng)景出現(xiàn)，其中谷歌smart glasses能與AI語(yǔ)音、通訊軟件、ins、臉書(shū)，導(dǎo)航等等很多應(yīng)用相連接，這樣你在路上就不需要掏出手機(jī)來(lái)查看短信郵件，且你在導(dǎo)航時(shí)候不需掏出手機(jī)，想看時(shí)間直接語(yǔ)音喚起（大大減少了低頭族，安全性提高）。

Google ar smart glasses

smart glasses 智能提醒與導(dǎo)航

也許有些伙伴說(shuō)不方便，比如如何查看回復(fù)消息，其實(shí)這些不必?fù)?dān)心，通過(guò)頭部去控制，比如左推獲取最近應(yīng)用通知，右推可以看到回復(fù)的短信等。

AR增強(qiáng)現(xiàn)實(shí)技術(shù)(隨處可以投射現(xiàn)場(chǎng)會(huì)議！驚呆了)

VR虛擬現(xiàn)實(shí)技術(shù)

辦公室?guī)蟅R眼鏡可以做早操鍛煉！

智能響應(yīng)微交互

是什么？我們都知道微交互動(dòng)畫(huà)， 但是這種智能的微交互動(dòng)畫(huà)，加強(qiáng)情感化元素特征，來(lái)自三星 ONE UI 2.0系統(tǒng)中的帶來(lái)生動(dòng)的運(yùn)動(dòng)圖標(biāo)，讓用戶(hù)清晰知道目前運(yùn)行的應(yīng)用。

Samsung One UI 2 Offical

更自然的AI語(yǔ)音

語(yǔ)音交互使用在越來(lái)越多的場(chǎng)景，在車(chē)載場(chǎng)景設(shè)計(jì)中，移動(dòng)端設(shè)計(jì)，AI語(yǔ)音助手（Siri、Alexa、Cortana、Google Assistant）或者家庭智能助手等，給我們帶來(lái)極大便利，那么在2020年這一趨勢(shì)將持續(xù)迅猛發(fā)展，惠及更多用戶(hù)群體，伴隨著大數(shù)據(jù)逐步全面覆蓋，技術(shù)成熟，自然語(yǔ)言處理能力增強(qiáng)，今后智能助手真的可能懂你的心！

產(chǎn)品設(shè)計(jì)中的規(guī)則一直是無(wú)摩擦的界面，這些界面使完成任務(wù)變得盡可能快捷和容易。但是，在一個(gè)可以學(xué)習(xí)用戶(hù)需求和習(xí)慣（并為他們完成工作）的更智能技術(shù)時(shí)代，我們需要功能之外的新模型來(lái)與用戶(hù)進(jìn)行交互，現(xiàn)在該進(jìn)行連接設(shè)計(jì)了。

智能讀取視頻字幕與翻譯

之前很痛苦，下載的視頻聽(tīng)不懂語(yǔ)言，現(xiàn)在這個(gè)不必?fù)?dān)心了，2019年 Andriod Q已經(jīng)在其系統(tǒng)解決這個(gè)問(wèn)題，可以智能讀取視頻中的聲音轉(zhuǎn)化成字幕顯示。你還在擔(dān)心下載的國(guó)外教程看不懂了嗎？

Google Pixel Buds

帶著谷歌今年出Google Pixel Buds耳機(jī)出門(mén)旅游，不擔(dān)心聽(tīng)不懂說(shuō)他國(guó)語(yǔ)言了。

滑動(dòng)式輸入

2019-ipad OS 

滾動(dòng)視差布局

2019-Apple News

總結(jié)

新技術(shù)的誕生必將帶來(lái)新一波的設(shè)計(jì)趨勢(shì)，我們作為設(shè)計(jì)師要時(shí)刻觀察互聯(lián)網(wǎng)流行趨勢(shì)，并且對(duì)未來(lái)的科技與生活時(shí)刻保持前瞻性！通過(guò)以此來(lái)提升自身對(duì)各大互聯(lián)網(wǎng)產(chǎn)品的悟性，更是培養(yǎng)對(duì)設(shè)計(jì)更深刻的領(lǐng)悟。

原文地址：功夫UX（公眾號(hào)）

作者：LoveXiaoTao

在 iPhone 發(fā)布之前，很多手機(jī)廠(chǎng)商都在尋找真正適合手機(jī)的觸摸屏設(shè)計(jì)。但它們看起來(lái)都不太智能，因?yàn)槭謾C(jī)有40%的區(qū)域都是實(shí)體鍵盤(pán)，那就意味著，固定的按鈕無(wú)法為 App 提供定制化功能。

2007. 革命性的滑動(dòng)解鎖

– 初代 iPhone 

2007年第一代 iPhone 掀起了智能手機(jī)的革命，具有高分辨率、多點(diǎn)觸控 Multi-Touch 功能的 iPhone，真正確立了手勢(shì)交互的標(biāo)準(zhǔn)。Jobs 放出領(lǐng)先對(duì)手5年的狂言，經(jīng)典的滑動(dòng)解鎖設(shè)計(jì)，更是讓人們贊嘆不已。

初代 iPhone

2009. 經(jīng)典的多任務(wù)

– webOS 卡片式交互

2011. 三大金剛鍵

– Android 4.0

2011年10月19日，三星與Google聯(lián)合在香港正式發(fā)布了首款搭載了Android4.0 的手機(jī)GALAXY Nexus。最新的 Android 操作系統(tǒng)引入了屏幕內(nèi)虛擬導(dǎo)航欄，最終，返回鍵、主頁(yè)鍵和多任務(wù)鍵的組合日漸深入人心，“三大金剛鍵”的名號(hào)應(yīng)運(yùn)而生。

虛擬導(dǎo)航欄的優(yōu)勢(shì)其實(shí)不少，順應(yīng)了觸摸屏成為主流的發(fā)展趨勢(shì)。但缺點(diǎn)就是 App 程序內(nèi)的底欄會(huì)和虛擬導(dǎo)航欄組成“雙下巴”，讓人難以忍受。

2012. 魅族的小圓圈

– 小圓圈 

魅族獨(dú)特的交互方式一直是它的優(yōu)勢(shì)，在安卓陣營(yíng)都使用三大金剛鍵的背景下，魅族率先做出了小圓圈的設(shè)計(jì)。它可以實(shí)現(xiàn)多種手勢(shì)功能，例如鎖屏，返回，呼出語(yǔ)音等功能。

– mBack

「mBack，觸摸返回上一級(jí)，按壓返回桌面。」

魅族 mBack 是繼小圓點(diǎn)后又一標(biāo)志性設(shè)計(jì)，魅族用一顆實(shí)體按鍵同時(shí)實(shí)現(xiàn)了返回和回到桌面兩個(gè)功能，多任務(wù)則交給了屏幕底部上滑呼出。

2012. 英雄末路

– 為觸屏而生的 BlackBerry OS 10

2012 年 5 月，黑莓在美國(guó)召開(kāi)發(fā)布會(huì)，展示了其專(zhuān)門(mén)為 Z10 研發(fā)的全新移動(dòng)操作系統(tǒng) BB 10。

黑莓 Z10 整個(gè)機(jī)身正面沒(méi)有 Home 鍵或者菜單鍵來(lái)干擾視線(xiàn)，因?yàn)槭謩?shì)滑動(dòng)是 BB 10 的核心交互，到現(xiàn)在為止這個(gè)操作依然讓我記憶深刻，那可是2012年！

黑莓曾經(jīng)把這個(gè)功能叫做flow，也就是上劃解鎖，向上滑動(dòng)返回主頁(yè)，和 iPhone X 一樣的操作方式。但由于應(yīng)用生態(tài)軟件匱乏，最終宣告失敗。

2013. 懸浮手勢(shì)

– 索尼 Xperia  Sola

索尼在 Xperia  Sola 上引入 “浮空觸屏技術(shù)”（Floating touch），你不需要觸摸到屏幕就能滑動(dòng) Web 網(wǎng)頁(yè)，當(dāng)手指進(jìn)入到距離屏幕 15 毫米的范圍內(nèi)就能觸發(fā)操作手勢(shì)。而且它的感應(yīng)器很靈敏，能夠識(shí)別有效的點(diǎn)擊，滑動(dòng)，輕掃等手勢(shì)。

這項(xiàng)功能之后在三星 Galaxy S4 也得到了應(yīng)用：

2017. 手勢(shì)的崛起

– iPhone X 開(kāi)啟全面屏?xí)r代

2018. 擁抱全面屏手勢(shì)

– vivo

– 小米 MIUI

– 魅族 Flyme

2019. 一統(tǒng)江湖

– Android Q

在今年的 Google I/O 大會(huì)上，新版本 Android Q 除了保留傳統(tǒng)的三大虛擬按鍵和 Android P 的二鍵設(shè)計(jì)之外，啟用新手勢(shì)交互方案，屏幕底部便不會(huì)再出現(xiàn)返回鍵和導(dǎo)航欄，只會(huì)剩下一個(gè)指示條，所有手勢(shì)也都改成了和 iOS 系統(tǒng)一樣的操作邏輯，兩大陣營(yíng)在交互上終于達(dá)成一致。

– 未來(lái)已來(lái)：隔空手勢(shì)交互

LG 在今年 MWC 發(fā)布的 G8 ThinQ 帶來(lái) Air Motion 隔空手勢(shì)操作，而 Google 方面也證實(shí) Pixel 4 將支持人臉解鎖和隔空手勢(shì)。Pixel 4 整合了 Soli 雷達(dá)遙控方案，讓你能利用手勢(shì)進(jìn)行靜音、切歌等等操作。你看，這個(gè)功能在吃小龍蝦的時(shí)候，是不是很方便呢？

總結(jié)

隨著時(shí)間的推移，手機(jī)相關(guān)技術(shù)和功能都在不斷向前發(fā)展。在全面屏的潮流之后，手勢(shì)交互未來(lái)又會(huì)往哪方面發(fā)展呢？讓我們一起期待新的技術(shù)革命早點(diǎn)到來(lái)。

By the way，如果你喜歡我的文章的話(huà)，歡迎點(diǎn)贊、轉(zhuǎn)發(fā)，謝謝大家！

原文地址： 洋爺（公眾號(hào)）

 

顯示系統(tǒng)狀態(tài)

JakobNielsen的第一個(gè)啟發(fā)式用戶(hù)界面設(shè)計(jì)聲明：“系統(tǒng)應(yīng)該始終在合理的時(shí)間內(nèi)做出適當(dāng)?shù)姆答佔(zhàn)層脩?hù)了解正在發(fā)生的事情。”這意味著用戶(hù)界面應(yīng)該通過(guò)提供反饋?zhàn)層脩?hù)及時(shí)了解正在發(fā)生的事情。應(yīng)用程序不應(yīng)該讓用戶(hù)猜測(cè)——它應(yīng)該告訴用戶(hù)發(fā)生了什么，微交互可以通過(guò)適當(dāng)?shù)囊曈X(jué)反饋幫助用戶(hù)理解。

數(shù)據(jù)上傳和下載過(guò)程是應(yīng)用微交互動(dòng)畫(huà)的絕佳機(jī)會(huì)。

數(shù)據(jù)下載動(dòng)畫(huà) (Image: Nick Buturishvili)

另一個(gè)動(dòng)畫(huà)是“下拉刷新”，它在移動(dòng)設(shè)備上表示內(nèi)容更新過(guò)程。一個(gè)令人愉快的刷新動(dòng)畫(huà)可以讓用戶(hù)咯咯地笑。

下拉刷新（圖片：Toma Reznichenko）

重點(diǎn)：動(dòng)畫(huà)提供應(yīng)用程序進(jìn)程狀態(tài)的實(shí)時(shí)通知，使用戶(hù)能夠快速了解正在發(fā)生的事情。

使按鈕和操作可感知

用戶(hù)界面元素，如按鈕和控件，即使它們位于一層玻璃的后面，也應(yīng)該是可感知的。按鈕可以模仿常見(jiàn)物理對(duì)象的交互。簡(jiǎn)單的說(shuō)，你可以通過(guò)對(duì)用戶(hù)輸入的視覺(jué)響應(yīng)來(lái)增加清晰度。

（圖片來(lái)源：谷歌）

重點(diǎn)：視覺(jué)反饋之所以起作用，是因?yàn)樗軡M(mǎn)足用戶(hù)對(duì)確認(rèn)的自然需求。點(diǎn)擊一個(gè)應(yīng)用程序感覺(jué)很好，因?yàn)槟阒腊l(fā)生了什么。

創(chuàng)建有意義的過(guò)度

你可以在導(dǎo)航之間平滑的動(dòng)畫(huà)向用戶(hù)傳遞信息，解釋屏幕上元素排列的變化或強(qiáng)化元素的層次結(jié)構(gòu)。

圖標(biāo)可以從一種形狀變成列外一種形狀，在不同的時(shí)間提供雙重功能。

（圖片來(lái)源：谷歌）

動(dòng)效設(shè)計(jì)可以有效的引導(dǎo)用戶(hù)的注意力，既可以提供信息，也可以給用戶(hù)帶來(lái)快樂(lè)。這對(duì)移動(dòng)設(shè)備和智能手表幫助非常大，因?yàn)樵谶@些屏幕上無(wú)法輸入大量的信息。

Apple的ios UI 的轉(zhuǎn)場(chǎng)就是一個(gè)很棒的例子。在下面的示例中，用戶(hù)選擇文件夾或應(yīng)用程序并放大到其詳細(xì)視圖（或直接到應(yīng)用程序的主屏幕），

（圖片來(lái)源：Rian Van Der Merwe）

另一個(gè)很好的例子是通過(guò)顏色和持久元素在兩個(gè)狀態(tài)之間創(chuàng)建視覺(jué)連接的動(dòng)畫(huà)。這使得過(guò)渡平穩(wěn)而輕松。

重點(diǎn)：微交互能夠在頁(yè)面之間建立可視連接，并增加UI的清晰度。

幫助用戶(hù)開(kāi)始使用

微交互在用戶(hù)入門(mén)期間是非常有用的。入門(mén)流程中完美的用戶(hù)體驗(yàn)和動(dòng)畫(huà)會(huì)對(duì)首次使用該應(yīng)用程序的用戶(hù)產(chǎn)生巨大影響。他們通過(guò)突出顯示最重要的功能和控件，在應(yīng)用程序啟動(dòng)后指導(dǎo)和教育用戶(hù)。

圖片：Ramotion

重點(diǎn)：微交互可以展示信息并幫助用戶(hù)有效地實(shí)現(xiàn)目標(biāo)。

突出顯示UI界面中的變化

微交互能夠引起用戶(hù)的注意。在很多情況下，動(dòng)畫(huà)用于吸引他們注意重要的細(xì)節(jié)（例如消息通知）。但是，請(qǐng)確保動(dòng)畫(huà)具有功能性，適用你的用戶(hù)。

通知（圖片來(lái)源：Arjun Kani）

重點(diǎn)：微交互可以為用戶(hù)提供良好的視覺(jué)提示。

添加令人愉快的細(xì)節(jié)

微交互動(dòng)畫(huà)的最基本用途是過(guò)渡。但是，當(dāng)動(dòng)畫(huà)以超出標(biāo)準(zhǔn)操作范圍的方式使用時(shí)，應(yīng)用程序能夠真正的取悅用戶(hù)。下面的按鈕能夠完美地改變狀態(tài)并提供雙重功能：通知用戶(hù)并創(chuàng)造一個(gè)奇跡。

社交媒體分享（圖片：Kei Sato）

重點(diǎn)：時(shí)刻關(guān)注用戶(hù)情感，這在交互中起著非常重要的作用。

設(shè)計(jì)微交互時(shí)應(yīng)該考慮什么？

當(dāng)你創(chuàng)建包含過(guò)多元素的視覺(jué)設(shè)計(jì)時(shí)，請(qǐng)記住以下幾點(diǎn)：

1、使微交互幾乎不可見(jiàn)且完全正常。

確保動(dòng)畫(huà)符合功能目的，不會(huì)感到尷尬或惱人。對(duì)于頻繁和次要的操作，響應(yīng)應(yīng)該是適度的，而對(duì)于不常見(jiàn)和主要的操作，響應(yīng)應(yīng)該更加強(qiáng)烈。

2、保持持久

微交互必須能夠長(zhǎng)期使用。在第一百次使用后，第一次看起來(lái)有趣的東西也可能會(huì)變得煩人。

3、遵循Kiss原則

過(guò)渡設(shè)計(jì)的微交互可能是致命的。微交互不應(yīng)該使屏幕過(guò)載，導(dǎo)致長(zhǎng)時(shí)間的加載過(guò)程。相反，他們應(yīng)該通過(guò)即時(shí)傳遞有價(jià)值的信息來(lái)節(jié)省時(shí)間。

4、不要從零開(kāi)始

你要時(shí)刻了解目標(biāo)受眾及其背景。利用這些知識(shí)使你的微交互更加精確和有效。

5、與其他UI元素創(chuàng)建視覺(jué)和諧

微交互應(yīng)該與應(yīng)用程序的風(fēng)格相匹配，幫助產(chǎn)品建立品質(zhì)感。

作者：Nick Babich
原文：www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
譯者：Coldrain1
個(gè)人主頁(yè)：i.ui.cn/ucenter/310170.html

場(chǎng)景是真實(shí)的以人為中心的體驗(yàn)細(xì)節(jié)。場(chǎng)景依賴(lài)于人，沒(méi)有人的意識(shí)和動(dòng)作就不存在場(chǎng)景。

——《場(chǎng)景革命》

場(chǎng)景賦予行為意義，每一種新鮮的行為體驗(yàn)的背后，都伴隨著新的場(chǎng)景洞察。在傳統(tǒng)的產(chǎn)品設(shè)計(jì)與交互設(shè)計(jì)之間的一個(gè)重要區(qū)別是，看待環(huán)境和行為引導(dǎo)對(duì)于塑造人的體驗(yàn)所起的作用的重要性不同，所以交互設(shè)計(jì)師在設(shè)計(jì)過(guò)程中，需聚焦于用戶(hù)使用場(chǎng)景中的服務(wù)流程和行為引導(dǎo)設(shè)計(jì)，預(yù)期用戶(hù)目標(biāo)，為用戶(hù)提供符合心智模型的流暢體驗(yàn)。

對(duì)于使用場(chǎng)景的思考是交互設(shè)計(jì)的基礎(chǔ)。在不同的場(chǎng)景下，用戶(hù)對(duì)于同一功能的心理預(yù)期和交互模式會(huì)有所不同。基于場(chǎng)景思維做設(shè)計(jì)，可以有效的幫助設(shè)計(jì)師：

• 判斷功能需求是否真實(shí)，解決了用戶(hù)什么問(wèn)題
• 深入地思考場(chǎng)景細(xì)節(jié)，包括：發(fā)生地點(diǎn)、使用頻率、情緒狀態(tài)、行為模式，用戶(hù)是否借助其他外力
• 發(fā)掘功能的延伸性及其價(jià)值，做好迭代設(shè)計(jì)

場(chǎng)景思維的細(xì)節(jié)體驗(yàn)設(shè)計(jì)

“場(chǎng)景”通俗地講是，誰(shuí)，在何時(shí)，在哪里，做了什么事情。在移動(dòng)互聯(lián)網(wǎng)時(shí)代，場(chǎng)景是真實(shí)的以人為中心的體驗(yàn)細(xì)節(jié)。場(chǎng)景依賴(lài)于人，沒(méi)有人的意識(shí)和動(dòng)作就不存在場(chǎng)景。通過(guò)對(duì)場(chǎng)景的因素思考，可以幫助設(shè)計(jì)師更好的理解用戶(hù)真實(shí)需求。

通過(guò)充分的理解這些場(chǎng)景，并以此為基礎(chǔ)，我們可以基于用戶(hù)的使用場(chǎng)景，為用戶(hù)找到更直觀的方式，提供有效的互動(dòng)，使他們能夠流暢地完成預(yù)期目標(biāo)。

1.只有當(dāng)使用場(chǎng)景與用戶(hù)感知接近乃至完全吻合時(shí)，用戶(hù)才沒(méi)有拒絕的理由

獲取位置權(quán)限

在獲取用戶(hù)位置權(quán)限的設(shè)計(jì)中，大部分設(shè)計(jì)都會(huì)在第一次打開(kāi)app時(shí)，通知用戶(hù)需要獲取位置權(quán)限。在這種使用場(chǎng)景中，用戶(hù)的普遍認(rèn)知是：困惑，為什么我需要給你獲取我的通訊資料和位置信息的權(quán)限。但對(duì)于新用戶(hù)來(lái)說(shuō)，場(chǎng)景的應(yīng)用主要表現(xiàn)為簡(jiǎn)單、輕、快體驗(yàn)，所以在獲取位置權(quán)限時(shí)，用戶(hù)需要明白，在獲取權(quán)限后，我將獲得什么，因?yàn)橛脩?hù)更容易許可他們想要使用的功能。

圖1，獲取用戶(hù)位置權(quán)限設(shè)計(jì)

在這個(gè)設(shè)計(jì)中，有兩種出發(fā)角度的邏輯，分別是從功能出發(fā)的邏輯思維和場(chǎng)景出發(fā)的邏輯思維：

圖2，功能和場(chǎng)景邏輯思維對(duì)比

同樣是開(kāi)啟獲取位置權(quán)限的設(shè)計(jì)目標(biāo)，場(chǎng)景思維下的設(shè)計(jì)方案更傾向于將設(shè)計(jì)放在用戶(hù)的使用場(chǎng)景中，從與之相關(guān)的用戶(hù)需求出發(fā)，注重結(jié)合產(chǎn)品的使用場(chǎng)景與產(chǎn)品功能的結(jié)合，做引導(dǎo)和暗示，告訴用戶(hù)開(kāi)啟此功能的效用，從而使用戶(hù)清楚的知道我將會(huì)獲得什么，實(shí)現(xiàn)用戶(hù)需求與產(chǎn)品功能的自然過(guò)渡，不允許用戶(hù)say no。

錯(cuò)誤反饋

同樣的例子還有錯(cuò)誤反饋。用戶(hù)在出現(xiàn)錯(cuò)誤的場(chǎng)景中，大部分用戶(hù)的認(rèn)知是：我哪里錯(cuò)了，該如何修正。在下圖中有兩種設(shè)計(jì)方案：

圖3，在情境里反饋，用戶(hù)更容易修改

左邊的設(shè)計(jì)邏輯是，填寫(xiě)完之后再修改。流程是：用戶(hù)填寫(xiě)表單，彈出popup，通知錯(cuò)誤。在這種設(shè)計(jì)方案下，在用戶(hù)提交表單后，再?gòu)棾鰌opup提示用戶(hù)錯(cuò)誤，使用戶(hù)脫離表單場(chǎng)景，且不可在當(dāng)前頁(yè)進(jìn)行針對(duì)性的修改，打斷用戶(hù)流程，用戶(hù)需返回后再尋找哪里錯(cuò)誤，并進(jìn)行修改。

還有一種設(shè)計(jì)邏輯是：邊填寫(xiě)邊修改。在這種場(chǎng)景下，用戶(hù)可以實(shí)時(shí)的知道數(shù)據(jù)的正確性，還可以針對(duì)性的獲取修改建議，直接在錯(cuò)誤表單上進(jìn)行修改。這種設(shè)計(jì)方案使用戶(hù)不會(huì)收到干擾，更專(zhuān)注于當(dāng)前任務(wù)，順利完成表單填寫(xiě)。

這兩種設(shè)計(jì)方案的區(qū)別在于：前者更注重完成產(chǎn)品功能而后者更注重用戶(hù)體驗(yàn)。在場(chǎng)景思維下，以用戶(hù)使用交互的具體環(huán)境為基礎(chǔ)，讓使用場(chǎng)景與用戶(hù)需求感知接近乃至完全吻合時(shí)來(lái)引導(dǎo)用戶(hù)實(shí)現(xiàn)預(yù)期目標(biāo)，讓產(chǎn)品具有更優(yōu)越的體驗(yàn)。

2.場(chǎng)景是流動(dòng)的，交互過(guò)程應(yīng)該符合用戶(hù)的直覺(jué)

相對(duì)于用戶(hù)當(dāng)前的任務(wù)來(lái)說(shuō)，場(chǎng)景是一個(gè)不斷變化的概念。隨著場(chǎng)景的不斷變化，用戶(hù)的需求也不斷改變，所以，用戶(hù)需要通過(guò)簡(jiǎn)約的交互來(lái)幫助自己快速定位內(nèi)容或功能，整個(gè)過(guò)程應(yīng)該符合用戶(hù)的直覺(jué)，而不是層層挖掘。應(yīng)盡量用少的頁(yè)面使用戶(hù)以更簡(jiǎn)單的操作來(lái)完成目標(biāo)。

簡(jiǎn)化流程，漸進(jìn)自然

當(dāng)場(chǎng)景發(fā)生變化時(shí)，我們應(yīng)該讓用戶(hù)決定下一步該做什么。在下一場(chǎng)景插入變化時(shí)，會(huì)使用戶(hù)處于被動(dòng)的位置，而我們要做的是，改變布局，使其非常直觀自然的來(lái)滿(mǎn)足他們的需求。

圖4，INSTAGRAM 將濾鏡整合入流程中

這里最好的例子，便是在Instagram中。現(xiàn)今，用戶(hù)發(fā)布照片的普遍的現(xiàn)象是：要先去美圖。那么在發(fā)布照片的功能流程中，可以來(lái)對(duì)比一下微信發(fā)布朋友圈照片流程和Instagram的發(fā)布流程：

圖5，微信 VS. INSTAGRAM發(fā)布照片流程

從流程中可以看出，ins的用戶(hù)在用戶(hù)在完成照片選擇之后，可以直接通過(guò)濾鏡完成對(duì)相片的美顏功能。相比于微信，要去切換至其他美圖的app，這種功能的自然過(guò)渡符合用戶(hù)美顏照片的心智模型。在整個(gè)流程中，他們將濾鏡控件整合為用戶(hù)發(fā)布照片的流程的之一，而不是單獨(dú)的作為一個(gè)獨(dú)立的功能，放置在另一個(gè)位置，這種無(wú)縫添加的微交互流程，是基于對(duì)用戶(hù)使用場(chǎng)景的洞察，使用戶(hù)感覺(jué)時(shí)刻可以在可控制的范圍內(nèi)，而不是偏離他們?cè)镜念A(yù)期。

從上可看出，基于使用場(chǎng)景的思考，可以更好的洞察用戶(hù)在使用場(chǎng)景中的需求，使交互流程更加靈活多變，設(shè)計(jì)方案跟隨場(chǎng)景變化而變化，用場(chǎng)景代替功能，將需求自然而然過(guò)渡到功能體驗(yàn)上來(lái)，使功能更加具有意義。

3.情感化細(xì)節(jié)設(shè)計(jì)，激發(fā)用戶(hù)動(dòng)機(jī)與決策

情感化設(shè)計(jì)一直是增強(qiáng)用戶(hù)體驗(yàn)的“引爆點(diǎn)”。在一些場(chǎng)景下，加入社交元素、游戲元素以及個(gè)性化元素，可以大大增強(qiáng)用戶(hù)的參與度。

Gogobot 是一款移動(dòng)旅游分享應(yīng)用，他通過(guò)地理定位功能，記錄用戶(hù)去過(guò)的地方，并且讓用戶(hù)點(diǎn)評(píng)商店、景點(diǎn)、分享在gogobot平臺(tái)上。除此之外，在旅游場(chǎng)景下，她捕捉了用戶(hù)在旅途中習(xí)慣于收藏旅游明信片這樣的一個(gè)細(xì)節(jié)行為，為app提供了一個(gè)直覺(jué)且簡(jiǎn)單的功能－制作明信片，這樣不僅可以提供用戶(hù)定制化服務(wù)，還可以激發(fā)和引導(dǎo)用戶(hù)為其他旅客提供旅游資訊，通過(guò)場(chǎng)景化的思維方式解決了用戶(hù)在平臺(tái)上獲取真實(shí)旅游資訊的真實(shí)需求。

圖6，GOGOBOT制作明信片

小結(jié)

場(chǎng)景化思維是思考用戶(hù)需求，尋求解決方案的重要技能。通過(guò)場(chǎng)景化的思考，可以幫助設(shè)計(jì)師重新定義用戶(hù)的真實(shí)需求，探索場(chǎng)景中用戶(hù)、地點(diǎn)、事物之間的內(nèi)在關(guān)系，通過(guò)這種方式逐步去理解設(shè)計(jì)，探索新的交互方式的可能性。

原文鏈接:dianrong

交互設(shè)計(jì)從來(lái)都不容易。它包括了用戶(hù)行為的深度分析，和一絲不茍的規(guī)劃。隨著新技術(shù)和交互設(shè)計(jì)模式的出現(xiàn)，事情并不會(huì)變?nèi)菀住?/p>

艷麗的圖片、順暢的鼠標(biāo)懸停效果和意外的動(dòng)畫(huà)，不再那么容易引起用戶(hù)注意了。但難題卻沒(méi)有解決——如何創(chuàng)造令人愉快的用戶(hù)體驗(yàn)，讓用戶(hù)面帶笑容完成轉(zhuǎn)化？如果你對(duì)常見(jiàn)的設(shè)計(jì)陷阱有所警覺(jué)，就能更少犯錯(cuò)。

為了方便——可能也為了讓你知道你不是獨(dú)自一人——以下總結(jié)了最常見(jiàn)的交互設(shè)計(jì)誤區(qū)。

1. 鋪天蓋地的創(chuàng)新

網(wǎng)頁(yè)設(shè)計(jì)師都非常有創(chuàng)造力。我們希望通過(guò)作品來(lái)表達(dá)自我。我們總是在尋求創(chuàng)新的設(shè)計(jì)方法來(lái)脫穎而出。但是，當(dāng)涉及到交互設(shè)計(jì)時(shí)，創(chuàng)新并不總是好事。甚至?xí)o你的網(wǎng)站帶來(lái)壞的影響。用戶(hù)渴望熟悉的事物，他們總是會(huì)遵循一些特定的操作方式。

Randy J. Hunt，Etsy的創(chuàng)意總監(jiān)和Product Design for the Web作者，清晰地陳述過(guò)：“嘿，設(shè)計(jì)師：別再TM自作聰明了。”在文章中，他詳細(xì)解釋了為什么別在網(wǎng)頁(yè)設(shè)計(jì)上過(guò)分熱衷創(chuàng)新。

以Iotorama網(wǎng)站為例。它挺漂亮，音樂(lè)深情，但是看著滿(mǎn)屏幕移動(dòng)的球，用戶(hù)不知所措。不要誤解我的意思，這個(gè)項(xiàng)目非常出色，超級(jí)有創(chuàng)造力！我喜歡這個(gè)大膽的創(chuàng)意，但它一點(diǎn)也不直觀。

還有一個(gè)例子。Safety on the Slopes項(xiàng)目背后的創(chuàng)作者想到一個(gè)巧妙的交互式圖形，用來(lái)警告用戶(hù)冬季運(yùn)動(dòng)的危險(xiǎn)。非常創(chuàng)新，同時(shí)也很直觀、有趣、令人印象深刻。

2. 令人困惑的導(dǎo)航

“不要自作聰明”的準(zhǔn)則也可以沿用到導(dǎo)航上。有些設(shè)計(jì)師試圖使用折衷的名稱(chēng)來(lái)尋求新穎。比如Chijoff網(wǎng)站就讓用戶(hù)不知道他們究竟提供什么，如何聘請(qǐng)他們。需要看上好一陣子，才能理解“共同創(chuàng)造”頁(yè)面實(shí)際上就等同于“服務(wù)”。甚至還有，通讀整頁(yè)后用戶(hù)仍然不知道該怎么做……頁(yè)面末尾只有個(gè)小注冊(cè)表單用來(lái)獲取最新的行業(yè)新聞和提示！在“聯(lián)系”頁(yè)面也沒(méi)有表單，只有郵編和郵箱地址。使人們聯(lián)絡(luò)或聘用他們非常困難。

你能猜出“Universe”在Maison Margiela網(wǎng)站中是什么意思嗎？實(shí)際上它鏈接到他們的Facebook主頁(yè)。誰(shuí)能想到？

相反，看看legworkstudio的網(wǎng)站。它的創(chuàng)意與超凡令人震撼。導(dǎo)航非常清晰不含糊。用戶(hù)絕對(duì)不會(huì)迷路。

3. 雜亂無(wú)章

有一段時(shí)期，網(wǎng)站都試圖把一切可能的東西擺上臺(tái)面。那些日子已經(jīng)一去不復(fù)返，但是很多網(wǎng)站仍然在犯這個(gè)錯(cuò)誤。看看這個(gè)在線(xiàn)商城：

設(shè)計(jì)師試圖堅(jiān)持一種單色配色，但是大量顏色不同的色塊、logo和字體，在這個(gè)頁(yè)面上就足夠讓用戶(hù)步履蹣跚。搜索框有著醒目的文案：“那么，今天你想要什么？”，但整個(gè)布局的外觀和感覺(jué)非常過(guò)時(shí)。

EBay是主要在在線(xiàn)零售商之一，在這點(diǎn)上做得不錯(cuò)。沒(méi)有用產(chǎn)品圖片、促銷(xiāo)和各種行動(dòng)召喚塞滿(mǎn)整個(gè)頁(yè)面，而是保持它干凈簡(jiǎn)潔，強(qiáng)調(diào)他們確實(shí)希望用戶(hù)首先關(guān)注的東西，并附上清晰的提示，接下來(lái)該怎么做。

4. 注意對(duì)比，大哥！

對(duì)比是創(chuàng)造視覺(jué)層級(jí)、吸引用戶(hù)注意特定元素的最重要的方式之一。在網(wǎng)頁(yè)設(shè)計(jì)中，對(duì)比不僅僅意味著顏色使用，也包括尺寸、形狀和位置。

這個(gè)網(wǎng)站是最簡(jiǎn)單生動(dòng)的例子。他們做到了統(tǒng)一一致，但整體背景和按鈕并不夠吸引人，尤其是在訂購(gòu)按鈕上。

相比來(lái)看這個(gè)。顏色選用很接近，但結(jié)果卻完全不同。而且，創(chuàng)新的滾動(dòng)效果，流暢地介紹了產(chǎn)品的新功能——反光材料。很酷，對(duì)吧？

5. 忽視表單樣式

表單設(shè)計(jì)是用戶(hù)體驗(yàn)最基本的部分。每個(gè)網(wǎng)站都有一個(gè)目標(biāo)——無(wú)論是樹(shù)立榜樣、直接售賣(mài)產(chǎn)品或是提供信息。不幸的是，許多網(wǎng)站有著光鮮的首頁(yè)，卻寧可用長(zhǎng)表單和復(fù)雜的驗(yàn)證碼來(lái)使用戶(hù)厭煩致死。除非用戶(hù)有強(qiáng)烈的先導(dǎo)動(dòng)機(jī)，否則他們就會(huì)離開(kāi)。

有了JCF這樣的有效的跨瀏覽器的解決方案，是時(shí)候忘記那些丑陋的默認(rèn)表單元素了，轉(zhuǎn)向一種更加沉浸的用戶(hù)體驗(yàn)吧。

另一件氣人的事，是表單要求太多信息，或者沒(méi)通過(guò)完善測(cè)試。例如sketchybusiness.io的表單高亮顯示了所有的空白框，甚至包括非必填項(xiàng)。

如果你看了mostlyserious.io的表單，你絕對(duì)會(huì)喜歡它的鼠標(biāo)懸停和按鈕按下?tīng)顟B(tài)。而且，“別害羞”的提示文案增加了一絲親切幽默的感覺(jué)。

最后……

不要懶于測(cè)試！對(duì)你重要的對(duì)于顧客未必重要。他們?cè)谀睦镉龅絾?wèn)題卡住？是導(dǎo)航、奇特的視覺(jué)差滾動(dòng)效果、還是長(zhǎng)時(shí)間加載的視頻？用戶(hù)測(cè)試的最大好處之一，是你可以通過(guò)用戶(hù)的視角來(lái)觀察，關(guān)注他們的需求、做出改進(jìn)。不要抑制你的創(chuàng)造力。要牢記網(wǎng)站訪(fǎng)客可能會(huì)感到困惑和沮喪。

你見(jiàn)過(guò)最糟的交互設(shè)計(jì)錯(cuò)誤是什么？可以在評(píng)論中分享你的想法和故事。

原文鏈接：http://designmodo.com/5-interaction-design-mistakes/

譯文鏈接：http://colachan.com/post/3458

在交互設(shè)計(jì)中如何加以利用時(shí)間？它是可控的嗎？

元素的時(shí)間控制難以描述，但我們都能感覺(jué)得到，從令人厭煩的等待加載，到令人愉快的輕松穿梭于頁(yè)面間。時(shí)間控制的范圍很廣，大到可感受到的時(shí)間增量，小到區(qū)區(qū)毫秒。單獨(dú)看似乎沒(méi)有意義，但無(wú)論如何，它積累起來(lái)就能影響用戶(hù)的看法。

本文中我們討論的內(nèi)容涵蓋一切隨時(shí)間變化的元素：視頻、音頻、動(dòng)畫(huà)等等。我們會(huì)從時(shí)間為何重要講起，然后討論時(shí)間控制的要素，還有如何改善它們，之后我們會(huì)探索快速和簡(jiǎn)潔如何發(fā)揮作用。

時(shí)間為何重要

時(shí)間是個(gè)難以掌控的概念，因?yàn)樗姆秶绱藦V闊。就像一個(gè)電子的大小，相對(duì)于我們銀河系幾乎無(wú)法察覺(jué)。一毫秒的跨度也一樣，相比一個(gè)千年，根本感受不到。

但是數(shù)字世界的時(shí)間與人類(lèi)的時(shí)間不同。幾秒的差距，就決定了體驗(yàn)是令人沮喪還是令人愉悅。我們可以把它歸為基本的人類(lèi)心理學(xué)：

1. 記憶與注意力是有限的——正如我們?cè)?a tabindex="-1" target="_blank">交互設(shè)計(jì)最佳實(shí)踐中描述的，設(shè)計(jì)師應(yīng)當(dāng)評(píng)估界面的認(rèn)知負(fù)荷。否則，用戶(hù)會(huì)苦于短暫記憶導(dǎo)致的信息丟失，使他們沮喪。
2. 人們必須感到一切盡在掌控——沒(méi)有人愿意受科技的支配。正如我們最新的博文中陳述的，有些人仍然把計(jì)算機(jī)作為黑盒子對(duì)待。讓人等待的電子產(chǎn)品，會(huì)給人一種不夠格的傲慢印象。

用戶(hù)的操作是有節(jié)奏的。在用戶(hù)體驗(yàn)領(lǐng)域，時(shí)間的度是以10的量級(jí)來(lái)丈量的。用戶(hù)判斷是否值得在一個(gè)網(wǎng)站花費(fèi)時(shí)間，只需要0.05秒。如果它們決定留下，通常會(huì)在2-4分之內(nèi)離開(kāi)。

無(wú)論目標(biāo)是更新你的Facebook信息流，或是在Amazon上對(duì)比購(gòu)買(mǎi)產(chǎn)品，每項(xiàng)體驗(yàn)都可以分解為一系列的交互，交互操作之間的耗時(shí)對(duì)用戶(hù)體驗(yàn)會(huì)產(chǎn)生復(fù)合影響。

交互設(shè)計(jì)中的時(shí)間要素

那時(shí)間和交互設(shè)計(jì)具體有什么關(guān)系？設(shè)計(jì)顧問(wèn)David Malouf相信，時(shí)間把交互設(shè)計(jì)與其他用戶(hù)體驗(yàn)學(xué)科區(qū)分開(kāi)來(lái)。時(shí)間遠(yuǎn)非線(xiàn)性的過(guò)程，因?yàn)殡S時(shí)間流逝所有交互都會(huì)發(fā)生。Malouf建議，我們可以具體從3個(gè)不同角度來(lái)檢驗(yàn)時(shí)間：步調(diào)、響應(yīng)和環(huán)境。

1. 步調(diào)

在設(shè)計(jì)方面，步調(diào)與固定時(shí)間內(nèi)完成的事情息息相關(guān)。你馬上就會(huì)想到，“那么用戶(hù)完成的事情當(dāng)然越多越好”，但這未必正確。

來(lái)源：席克定律

根據(jù)經(jīng)驗(yàn)，操作流程遠(yuǎn)比可用的操作數(shù)量重要。席克定律說(shuō)到，過(guò)多的界面元素實(shí)際上阻礙決策（因此也影響目標(biāo)的完成）。

想一想，比如有一組龐大的注冊(cè)表單，和另一組分成多頁(yè)面的小表單，兩者信息相同，會(huì)有怎樣的區(qū)別。長(zhǎng)表單會(huì)花費(fèi)更少的時(shí)間，但一系列小表單似乎更容易掌控，對(duì)用戶(hù)也不那么復(fù)雜。

下面的例子來(lái)自LinkedIn，結(jié)合表單引導(dǎo)和進(jìn)度條是個(gè)很不錯(cuò)的策略，改善了體驗(yàn)的步調(diào)。創(chuàng)建一套專(zhuān)業(yè)檔案所需的冗長(zhǎng)過(guò)程被分為4個(gè)可掌控的步驟。用戶(hù)也能看到它們的進(jìn)度到了什么地步，這會(huì)激勵(lì)他們繼續(xù)進(jìn)行。步調(diào)與效率關(guān)系不大，更多是用戶(hù)是否對(duì)體驗(yàn)感到舒適——不會(huì)使他們負(fù)擔(dān)過(guò)重，也不會(huì)減慢它們的速度。

來(lái)源：LinkedIn表單引導(dǎo)

2. 響應(yīng)

產(chǎn)品的反應(yīng)時(shí)間與用戶(hù)的掌控程度直接相關(guān)。Jakob Nielsen說(shuō)過(guò)，電子產(chǎn)品最重要的3個(gè)響應(yīng)時(shí)間范圍是：

• 1秒——直接控制——用戶(hù)感覺(jué)他們?cè)谥苯硬倏v這個(gè)系統(tǒng)，就像使用真實(shí)的工具一樣。除了結(jié)果的視覺(jué)呈現(xiàn)外，不需要任何反饋。
• 1秒——間接控制——用戶(hù)會(huì)注意到延遲，但在網(wǎng)站的體驗(yàn)中仍然感覺(jué)盡在掌握。比如對(duì)于加載新頁(yè)面，這個(gè)延遲是可以接受的。
• 10秒——部分控制——用戶(hù)的注意力已經(jīng)轉(zhuǎn)移，操作流程中斷。反饋對(duì)于減少半途而廢至關(guān)重要，這就是加載界面如此流行的原因。

響應(yīng)時(shí)間中的延遲必須與任務(wù)的重要性相稱(chēng)。例如，加載云端面板，5秒是可以接受的。但是觸發(fā)一個(gè)下拉菜單就不可忍受了。延遲越長(zhǎng)，用戶(hù)與界面之間的關(guān)系就越趨于分裂。

來(lái)源：UXPin

3. 環(huán)境

如何、何時(shí)、何地，甚至為何使用一個(gè)應(yīng)用，都對(duì)時(shí)間感知有所影響。

比如，網(wǎng)站的平均停留為2-4分鐘，盡管電商銷(xiāo)售流程的平均要持續(xù)28分鐘（這甚至都沒(méi)有考慮銷(xiāo)售的品類(lèi)——買(mǎi)一輛車(chē)可得花上幾個(gè)月）。同樣的，那些在商場(chǎng)購(gòu)物會(huì)通過(guò)移動(dòng)設(shè)備比價(jià)的人，比坐在家中沙發(fā)里購(gòu)物的人更重視速度。

來(lái)源：理解企業(yè)中移動(dòng)運(yùn)算的時(shí)間、地點(diǎn)與環(huán)境

如果你發(fā)現(xiàn)用戶(hù)過(guò)早離開(kāi)你的網(wǎng)站，你就得修改鏈接文案了。你還可以檢查頁(yè)面的視覺(jué)層級(jí)（顏色、對(duì)比、字體），確保重要的信息得到了強(qiáng)調(diào)。

但是，這些吸引眼球的方法，在單獨(dú)一頁(yè)沉浸式內(nèi)容中或許有違直覺(jué)，例如博客。這種情況下，你最好善加利用留白來(lái)強(qiáng)調(diào)內(nèi)容（就像Medium那樣）。同一個(gè)獲取注意力的策略，依據(jù)網(wǎng)站類(lèi)型的不同，會(huì)產(chǎn)生兩種不同的效果——這都取決于環(huán)境。

越快越好……在某種程度上

討論一個(gè)界面的步調(diào)時(shí)，我們提到過(guò)并非總是越快越好。

坦言之，絕大多數(shù)時(shí)間相關(guān)的可用性問(wèn)題，都由于系統(tǒng)反應(yīng)太慢。但是，也有些情況速度太快反而不好。通常，速度太快的界面會(huì)導(dǎo)致兩個(gè)問(wèn)題：錯(cuò)過(guò)信息，或是用戶(hù)跟不上。

來(lái)源：FourSquare_

1. 用戶(hù)錯(cuò)過(guò)信息

信息變化太快時(shí)，用戶(hù)只要看一眼屏幕的其他地方，就會(huì)錯(cuò)過(guò)它。這些通常適用于并非由用戶(hù)觸發(fā)的意外操作，而且通常這個(gè)變化離相關(guān)操作越遠(yuǎn)，越容易被忽略。有簡(jiǎn)單的補(bǔ)救方法可以將注意力引向這些變化，通過(guò)恰當(dāng)處理的動(dòng)畫(huà)效果（我們稍后會(huì)討論）。

我們可以把西門(mén)子作為界面速度過(guò)快的例子。此例中，向用戶(hù)展示了如下頁(yè)面，然后詢(xún)問(wèn)他們是否發(fā)現(xiàn)了西門(mén)子有洗衣機(jī)的特別促銷(xiāo)。

來(lái)源：Auto Forwarding

正如Jakob Nielsen，Nielsen-Norman Group的聯(lián)合創(chuàng)始人所描述的，即使頁(yè)面頂部以巨大文字展示了促銷(xiāo)信息，用戶(hù)還是沒(méi)看到。為什么會(huì)發(fā)生這種事情？因?yàn)檩啿D（其實(shí)更像手風(fēng)琴效果）每5秒自動(dòng)切換一張。每次屏幕切換，唯一的指示器就是右側(cè)的邊欄——它通常都被忽略了，因?yàn)檫@兩個(gè)行動(dòng)召喚看起來(lái)像是banner（從而引發(fā)了banner盲區(qū)）。

2. 用戶(hù)跟不上

即使用戶(hù)注意到屏幕上快速切換的動(dòng)畫(huà)，也未必能理解。這通常發(fā)生在輪播圖、旋轉(zhuǎn)體和其他自動(dòng)切換功能中——用戶(hù)被圖片激起了好奇心，當(dāng)他們把鼠標(biāo)移上去，它已經(jīng)變成了另一張不怎么有吸引力的圖。

可以發(fā)現(xiàn)，先前西門(mén)子的案例就是糟糕的用戶(hù)體驗(yàn)決策的綜合體。無(wú)論如何，5秒的輪播圖是其中最糟糕的。因?yàn)樗计聊恢鲗?dǎo)地位，輪播圖立刻就能吸引用戶(hù)注意。但是這個(gè)輪播圖每5秒改變一次，使用戶(hù)迷失方向，并沒(méi)有清晰表達(dá)出促銷(xiāo)信息。用戶(hù)并沒(méi)有觸發(fā)這個(gè)操作，于是為了努力贏回用戶(hù)體驗(yàn)的控制權(quán)，他們對(duì)用戶(hù)體驗(yàn)的其他不足更加敏感（比如糟糕的文案）。

來(lái)源：應(yīng)該使用輪播圖嗎？

實(shí)際上，最好是擯棄自動(dòng)切換的輪播圖，因?yàn)樗鼈?a tabindex="-1" target="_blank">最擅長(zhǎng)分散注意力，最讓人沮喪。目標(biāo)與輪播圖內(nèi)容無(wú)關(guān)的用戶(hù)，會(huì)發(fā)現(xiàn)它令人分心。真正需要了解其內(nèi)容的用戶(hù)，又無(wú)法及時(shí)反應(yīng)。

對(duì)于非母語(yǔ)用戶(hù)，響應(yīng)問(wèn)題更嚴(yán)重。年紀(jì)越大，或越不熟悉科技產(chǎn)品，越難以使用。要確保你的界面反應(yīng)不至于太快，這些建議很有幫助：

1. 讓用戶(hù)手動(dòng)控制——屏幕上的快速變化，必須限制為由用戶(hù)的操作觸發(fā)。否則，這就違反了最少意外原則，這是指用戶(hù)通常都不喜歡突發(fā)事件。
2. 用動(dòng)畫(huà)來(lái)減慢速度——用800毫秒到1秒之間的動(dòng)畫(huà)來(lái)表現(xiàn)屏幕上的變化。
3. 給每個(gè)輪播圖留出足夠的時(shí)間——如果你必須用自動(dòng)切換的輪播圖，要大聲朗讀其中文案，然后所花時(shí)間再乘以2.5。這就是每張輪播圖應(yīng)該停留的時(shí)間。還有當(dāng)鼠標(biāo)指在輪播圖上，要確保切換暫停。

記住，交互設(shè)計(jì)中，感知到的就是真實(shí)的。令人愉快的等待，遠(yuǎn)比推著用戶(hù)列隊(duì)前進(jìn)要好。

點(diǎn)擊要簡(jiǎn)單，而非快速

既然提到速度，很有必要糾正另一個(gè)普遍的設(shè)計(jì)誤區(qū)，3次點(diǎn)擊原則——這個(gè)原則指出，用戶(hù)通過(guò)3次及以?xún)?nèi)的點(diǎn)擊，應(yīng)該要能查看網(wǎng)站的任何內(nèi)容。對(duì)于這個(gè)3次點(diǎn)擊原則的最佳描述，可以說(shuō)“意圖是好的，但造成了誤導(dǎo)”。

來(lái)源：你仍在信守的5個(gè)用戶(hù)體驗(yàn)謊言

Hubspot的前用戶(hù)體驗(yàn)總監(jiān)，Joshua Porter創(chuàng)作的這張圖表表明，點(diǎn)擊次數(shù)與用戶(hù)的滿(mǎn)意程度并不存在確切的關(guān)聯(lián)。其中的教訓(xùn)是，設(shè)計(jì)師應(yīng)當(dāng)少考慮讓用戶(hù)盡快完成任務(wù)，多考慮讓用戶(hù)盡可能容易地完成任務(wù)——目的不同，是界面設(shè)計(jì)存在差異的依據(jù)。

為了進(jìn)一步印證我們的觀點(diǎn)，看看這張圖表。它遵循了3次點(diǎn)擊原則，因?yàn)槿魏雾?yè)面確實(shí)可以通過(guò)3次點(diǎn)擊到達(dá)，但這種模式真的提升了可用性嗎？它其實(shí)損害了可用性，因?yàn)橛脩?hù)得從過(guò)多的導(dǎo)航中過(guò)濾出他們的選擇。而且，當(dāng)他們到達(dá)新頁(yè)面，他們需要再次從眾多選項(xiàng)中過(guò)濾。

來(lái)源：Oracle

看看上面的Oracle網(wǎng)站。當(dāng)然，你可以在3次點(diǎn)擊內(nèi)進(jìn)入任何產(chǎn)品類(lèi)目（例如數(shù)據(jù)庫(kù)或Java），但你真的想這么做嗎？

相反，我們建議遵循1次點(diǎn)擊原則：每一項(xiàng)交互都讓用戶(hù)離目標(biāo)更接近一步。這種策略有助于縮減頂級(jí)導(dǎo)航的項(xiàng)目數(shù)量，而不會(huì)使用戶(hù)迷惑。它有助于讓人關(guān)注探索的體驗(yàn)，而非探索路徑本身。

來(lái)源：Chase

1. 打開(kāi)了我的帳號(hào)頁(yè)面。我看見(jiàn)一個(gè)行動(dòng)召喚，Ultimate Rewards，我點(diǎn)擊了。

來(lái)源：Chase

1. 進(jìn)入了獎(jiǎng)勵(lì)頁(yè)面。我看見(jiàn)選項(xiàng)Use Points和Earn Points。我點(diǎn)了Use Points。

來(lái)源：Chase

1. 當(dāng)來(lái)到點(diǎn)數(shù)兌換頁(yè)面，我能看到有多少點(diǎn)數(shù)可用，有多數(shù)可以?xún)稉Q。我選定了數(shù)量，兌換現(xiàn)金，然后達(dá)成了目標(biāo)。

來(lái)源：Chase

這需要3次以上的點(diǎn)擊，但每次點(diǎn)擊都只花很少的精力。而且每次點(diǎn)擊都讓用戶(hù)在通向目標(biāo)的道路上更進(jìn)一步。現(xiàn)在，如果你仍然堅(jiān)持3次點(diǎn)擊原則，你可能會(huì)把頂級(jí)導(dǎo)航其中一項(xiàng)設(shè)為“使用獎(jiǎng)勵(lì)”。點(diǎn)擊次數(shù)當(dāng)然減少了，但這種扁平式的策略實(shí)際上會(huì)展現(xiàn)過(guò)多的項(xiàng)目，難以同時(shí)篩選過(guò)濾。因此為了更短的點(diǎn)擊路徑，犧牲了可用性。

我們想要強(qiáng)調(diào)3次點(diǎn)擊原則背后的精神：點(diǎn)擊應(yīng)該盡可能簡(jiǎn)單和直觀。并非確保用戶(hù)在網(wǎng)站上所花的時(shí)間最少，而是值得的。

總結(jié)

提到交互設(shè)計(jì)，一秒的延遲就能左右成功與失敗。如果用戶(hù)體驗(yàn)太慢，人們會(huì)感到沮喪。如果太快，人們會(huì)錯(cuò)過(guò)重要信息（或者不明白它的意思）。理解人類(lèi)對(duì)于時(shí)間的認(rèn)知、速度（和輪播圖）的限制，還有直接點(diǎn)擊的重要性。

如果有疑問(wèn)，記住這條簡(jiǎn)單的可用性原則：清晰就會(huì)順暢，順暢就會(huì)快。

原文鏈接

譯文鏈接

作者信息：
Jerry Cao
Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content for the wireframing and prototyping platform.

科幻作家艾薩克·阿西莫夫在他的機(jī)器人系列故事中創(chuàng)造了“機(jī)器人學(xué)三大法則”。這些法則被永久性地植入每個(gè)機(jī)器人，作為防止災(zāi)難、保護(hù)人類(lèi)的最后一道保險(xiǎn)。我很好奇，我們最后一道保險(xiǎn)是什么？對(duì)于交互設(shè)計(jì)師而言，三大法則又是什么？

用戶(hù)對(duì)于界面的感知，離不開(kāi)它的形式、內(nèi)容和行為。就像工業(yè)與平面設(shè)計(jì)師專(zhuān)注于形式那樣，交互設(shè)計(jì)師將行為作為最重要的元素來(lái)考慮。要通過(guò)設(shè)計(jì)來(lái)左右用戶(hù)的體驗(yàn)，首先要考慮我們的三大法則，界面的行為如何表現(xiàn)，它對(duì)用戶(hù)的行為產(chǎn)生什么影響。它們必須得作為穩(wěn)固的基礎(chǔ)，在它之上構(gòu)建其他交互設(shè)計(jì)原則。幸運(yùn)的是，我將要運(yùn)用的三大法則早已有人提出——三大法則的主人，Mac電腦項(xiàng)目背后的大腦，Jef Raskin。他在他的著作The Humane Interface的某一頁(yè)中寫(xiě)下了這三條鐵律，本書(shū)在交互設(shè)計(jì)中的地位接近圣經(jīng)。細(xì)細(xì)品讀，你會(huì)發(fā)現(xiàn)現(xiàn)代最流行的用戶(hù)界面，都采用了這本里程碑式的著作中的概念與技巧，其中也包括微軟和蘋(píng)果的設(shè)備。

第一法則

善加利用阿西莫夫的三大法則本身，Raskin寫(xiě)道“交互設(shè)計(jì)第一法則應(yīng)該是：電腦不應(yīng)該妨礙你的工作，或由于不作為而使你的工作受到損害”[1]。我們都應(yīng)該牢記，電腦是一件用來(lái)完成任務(wù)的工具；最終目標(biāo)不可能或極少情況下是使用軟件本身。因此，我們可以一致同意，在電腦上最?lèi)毫拥捏w驗(yàn)就是讓工作蒙受損失。唯一一件比丟失已完成的工作更糟的，是丟失無(wú)法精確還原的數(shù)據(jù)，比如創(chuàng)意類(lèi)的工作。

當(dāng)你鍵入時(shí)，應(yīng)用應(yīng)當(dāng)如實(shí)反映數(shù)據(jù)，并盡可能防止你丟失工作。可能你會(huì)覺(jué)得這只是工程師該考慮的。開(kāi)發(fā)者應(yīng)該確保他們的軟件有防護(hù)措施和冗余，來(lái)防止數(shù)據(jù)丟失（還有一些潛在bug），不是嗎？實(shí)際上，數(shù)據(jù)保護(hù)與工作保存也是界面設(shè)計(jì)的任務(wù)，作為設(shè)計(jì)師必須預(yù)先行動(dòng)——通過(guò)用戶(hù)研究——發(fā)現(xiàn)用戶(hù)會(huì)如何損失工作，或是不得不重復(fù)工作。這就意味著要加入一些保護(hù)，比如強(qiáng)大的撤銷(xiāo)功能和破壞性操作保護(hù)，來(lái)防止無(wú)意的數(shù)據(jù)丟失。很棒的一個(gè)例子就是GitHub倉(cāng)庫(kù)的刪除對(duì)話(huà)框，它確實(shí)發(fā)揮作用，不同于其他確認(rèn)對(duì)話(huà)框，它強(qiáng)迫你輸入倉(cāng)庫(kù)名稱(chēng)才能繼續(xù)。這個(gè)技巧很聰明，在刪除過(guò)程中迫使用戶(hù)的注意力集中到倉(cāng)庫(kù)名上。安全措施防止用戶(hù)習(xí)慣性的操作導(dǎo)致?lián)p失。

GitHub刪除確認(rèn)對(duì)話(huà)框。

第一法則也適用于保存用戶(hù)的工作相關(guān)與內(nèi)容本身。比如，要選擇一系列項(xiàng)目進(jìn)行操作（比如說(shuō)文件），需要大量的精力。因此，建議在工作流程中保留選中狀態(tài)，將它們保存在一個(gè)可以撤銷(xiāo)的操作列表中。類(lèi)似的，如果界面允許用戶(hù)對(duì)元素進(jìn)行自定義或排序，這些排序或自定義都應(yīng)該保存下來(lái)。

為什么Apple的Time Machine和自動(dòng)保存，還有Dropbox的歷史版本這么棒，就因?yàn)樽袷亓说谝?ldquo;法則”。它們承認(rèn)人類(lèi)會(huì)犯錯(cuò)這個(gè)事實(shí)，盡管用戶(hù)可能會(huì)觸發(fā)一個(gè)破壞工作或數(shù)據(jù)的操作，那并非他們的意圖。

Apple的“瀏覽所有版本”功能非常棒。

第二法則

Raskin繼續(xù)寫(xiě)道，好的第二法則應(yīng)該是“電腦不該浪費(fèi)時(shí)間，或要求你做非必要的工作”[2]。很常見(jiàn)的情況，用戶(hù)肩負(fù)眾多任務(wù)，因?yàn)槿斯?zhí)行一項(xiàng)任務(wù)比編寫(xiě)一個(gè)系統(tǒng)讓它自動(dòng)執(zhí)行簡(jiǎn)單的多。這些情況下，如果技術(shù)允許，電腦應(yīng)該承擔(dān)起這些工作。比如迫使用戶(hù)選擇信用卡的類(lèi)型，雖然從卡號(hào)就可以推斷出來(lái)。

Stripe就做對(duì)了，自動(dòng)檢測(cè)信用卡的類(lèi)型。

用戶(hù)學(xué)習(xí)一套新的界面或系統(tǒng)數(shù)據(jù)模型，所花的時(shí)間與精力也要納入考慮，要與總工作量取得平衡。用效率較低的方式執(zhí)行一項(xiàng)操作，或許比學(xué)習(xí)一種高效的新方式再操作工作量少。用戶(hù)只原意與少量界面進(jìn)行交互。至于其他，稍加犧牲效率，換取更加直觀的操作或許是值得的。

假設(shè)某種狀況下你需要迫使用戶(hù)改變他們自己的思維模式，這時(shí)需要謹(jǐn)慎。因?yàn)檫@項(xiàng)設(shè)計(jì)抉擇會(huì)影響用戶(hù)的內(nèi)容結(jié)構(gòu)（通常出于技術(shù)要求），而非讓他們自己決定如何組織信息，或是使用他們熟悉的結(jié)構(gòu)。優(yōu)秀的界面以用戶(hù)最想要最易懂的形式展現(xiàn)信息系統(tǒng)。以多數(shù)銀行希望你存錢(qián)的方式為例。通常，你需要把錢(qián)分幾個(gè)賬戶(hù)存，或是存在一個(gè)賬戶(hù)上，然后自己判斷哪些不該花。Simple用了另一個(gè)方案。相比強(qiáng)迫用戶(hù)思考存款的運(yùn)轉(zhuǎn)方式（比如在銀行賬戶(hù)中），Simple讓你簡(jiǎn)單通過(guò)“目的”設(shè)置任意數(shù)量的錢(qián)，這些數(shù)目與之后的交易一起，都在“可使用”余額的追蹤下。

Simple的“可使用”能辨認(rèn)出人們確切的用錢(qián)方式。

第三法則

我相信，Raskin的書(shū)余下的所有部分，講的就是第三法則。他說(shuō)界面應(yīng)該是人道主義的；它應(yīng)當(dāng)“響應(yīng)人類(lèi)的需要，并且體諒人類(lèi)的弱點(diǎn)”[3]。這是整部以用戶(hù)為中心的設(shè)計(jì)的核心定律，由此得到其他的交互設(shè)計(jì)原則。好的交互設(shè)計(jì)永遠(yuǎn)都會(huì)尊重人腦和身體的局限。它有必要對(duì)我們的本能物理反應(yīng)和文化價(jià)值保持敏感。

讓界面變得人道主義的一個(gè)例子，是圍繞人們同時(shí)只能注意一件事情進(jìn)行設(shè)計(jì)。比如，鍵盤(pán)大寫(xiě)鎖定鍵上的指示燈。它本身并不是個(gè)好的解決方法，無(wú)法避免誤觸開(kāi)啟大寫(xiě)鎖定模式，因?yàn)橛脩?hù)按下時(shí)，關(guān)注點(diǎn)通常不在按鍵上。Mac的密碼輸入就處理得很好，它在輸入框內(nèi)提供了視覺(jué)指示，表明大寫(xiě)鎖定被開(kāi)啟了，用戶(hù)此時(shí)就在看輸入框。

大寫(xiě)鎖定的信息就在你需要的地方。

“響應(yīng)用戶(hù)需求”的一個(gè)例子，是在他們進(jìn)行操作或執(zhí)行工作流程時(shí)，持續(xù)展示用戶(hù)關(guān)心的內(nèi)容（注意：他們關(guān)心的是目的，而不是你的應(yīng)用）。看看Amazon，它自動(dòng)顯示你查看的鏡頭是否匹配你近期購(gòu)買(mǎi)的相機(jī)。

Amazon的相機(jī)鏡頭匹配組件。

最后一條“定律”是交互設(shè)計(jì)定律的精髓。在今天的世界，要知道設(shè)計(jì)界面非常重要的一點(diǎn)就是人道主義，從認(rèn)知的格式塔原則和平面設(shè)計(jì)原則，到相關(guān)的文化心理學(xué)。我們的工作永無(wú)止境。隨著時(shí)間流逝，技術(shù)前景和我們的文化環(huán)境在緩慢改變，我們將顛簸前行，繼續(xù)演進(jìn)我們的設(shè)計(jì)與設(shè)計(jì)流程。

無(wú)論如何，這三條定律是我不斷回溯的基本準(zhǔn)則，它們?cè)偃蔀槌晒Φ慕缑娴脑嚱鹗Ｔ谀銢Q策界面的外觀和行為時(shí)，牢記它們很有幫助，不論你最終設(shè)計(jì)的美學(xué)樣式如何。

總結(jié)

1. 電腦不應(yīng)該妨礙你的工作，或由于不作為而使你的工作受到損害。
2. 電腦不該浪費(fèi)時(shí)間，或要求你做非必要的工作。
3. 界面應(yīng)該是人道主義的；它應(yīng)當(dāng)響應(yīng)人類(lèi)的需要，并且體諒人類(lèi)的弱點(diǎn)。

原文鏈接

譯文鏈接

來(lái)自UXPin的Jerry Cao，通過(guò)本文向我們解釋了如何保持視覺(jué)與交互的協(xié)調(diào)。

我不想貶低文字的重要性，但也不想忽視視覺(jué)。兩者是同等重要的交互設(shè)計(jì)元素。文字就是交互，但那些視覺(jué)元素（比如圖標(biāo)、菜單、圖像等）才是用戶(hù)實(shí)際上操作的東西。雖然有些可用性專(zhuān)家會(huì)提及Craigslist甚至Amazon，作為丑陋但可用（而且受歡迎）的網(wǎng)站案例。但毫無(wú)疑問(wèn)，美感總會(huì)有所幫助。

情感是用戶(hù)體驗(yàn)的關(guān)鍵：視覺(jué)設(shè)計(jì)優(yōu)秀的網(wǎng)站能使用戶(hù)放松，提升可信度和易用性。考慮到多數(shù)用戶(hù)注意力短暫，認(rèn)知往往成為事實(shí)：如果視覺(jué)做得很糟糕，用戶(hù)不會(huì)費(fèi)神去深入研究你的交互設(shè)計(jì)。

讓我們來(lái)細(xì)說(shuō)視覺(jué)的重要性，因?yàn)樗P(guān)系到交互，保證了清晰的方向指引和一致性。

01. 尊重視覺(jué)的主導(dǎo)地位

我們從案例展示開(kāi)始。看看下面的文字：

很顯然，我們都知道“黃色”一詞所指的顏色。但當(dāng)多數(shù)人看到它時(shí)，他們理解到的可能只有紅色。文字的外觀取代了它的真正含義。

信息圖專(zhuān)家David McCandless表明，我們大部分的腦力資源都花在了視覺(jué)上。

作為人類(lèi)，視覺(jué)是我們的主要感觀。但是其他動(dòng)物更多依賴(lài)聽(tīng)覺(jué)與嗅覺(jué)，我們是視覺(jué)主導(dǎo)的生物。正如數(shù)據(jù)記者兼信息圖專(zhuān)家David McCandless在一場(chǎng)引人入勝的TED演講中提到的，我們會(huì)調(diào)動(dòng)全部感觀，但多數(shù)的腦力都花在了視覺(jué)上——雖然我們很難察覺(jué)。他用計(jì)算機(jī)進(jìn)行了類(lèi)比……

“視覺(jué)是感觀中最迅速的。它和計(jì)算機(jī)網(wǎng)絡(luò)的速度相同。之后是觸覺(jué)，相當(dāng)于一個(gè)U盤(pán)的速度。然后才是聽(tīng)覺(jué)與嗅覺(jué)，約等于硬盤(pán)的速度。

“后面才是可憐的味覺(jué)，運(yùn)算速度幾乎近似便攜式計(jì)算器。角落里那個(gè)小方塊，百分之0.7，那就是我們實(shí)際了解的量。所以你的很多感觀——絕大多數(shù)感觀都是視覺(jué)上的，它蜂擁而來(lái)——你卻渾然不覺(jué)。”

視覺(jué)影響行為，也影響體驗(yàn)，Stephen P. Anderson說(shuō)。

但是對(duì)于交互設(shè)計(jì)這意味著什么？它意味著你對(duì)產(chǎn)品做出的每一項(xiàng)視覺(jué)上的決策，都對(duì)交互有極大的影響，即使是在不知不覺(jué)間。

產(chǎn)品設(shè)計(jì)顧問(wèn)Stephen P. Anderson指出，視覺(jué)影響的不只是體驗(yàn)，也會(huì)影響用戶(hù)的行為。

這就是說(shuō)好的視覺(jué)設(shè)計(jì)可以提升銷(xiāo)量，提高注冊(cè)量和轉(zhuǎn)化率，激發(fā)某些特定的用戶(hù)行為。看看下面這兩個(gè)表單：

表單A

表單B

記住，交互設(shè)計(jì)的目標(biāo)之一就是讓用戶(hù)盡可能少地思考。你認(rèn)為哪個(gè)更有利于銷(xiāo)售？哪個(gè)視覺(jué)上看更舒服？

第一例中，那密集恐懼癥般的間距和過(guò)量的文字，讓用戶(hù)望而卻步。第二例則色彩豐富、優(yōu)美，看起來(lái)更簡(jiǎn)潔（盡管用戶(hù)都得輸入這些信息）。

由于交互設(shè)計(jì)就是要?jiǎng)?chuàng)造人們想用的東西，有吸引力的事物更激發(fā)人的渴求，因此更能發(fā)揮作用。

圖片和導(dǎo)航在這個(gè)在線(xiàn)香料商店中相互協(xié)調(diào)。

不過(guò)除了吸引人的交互，優(yōu)美的設(shè)計(jì)也提供了一層額外的理解。看看上面這個(gè)Old Town Spice Shop案例，你會(huì)發(fā)現(xiàn)這個(gè)網(wǎng)站的櫥柜式布局立刻暗示了這家公司的意圖和香料產(chǎn)品。

盡管你可能會(huì)質(zhì)疑，用戶(hù)先看到櫥柜還是“Spices”和“Extracts”這些文字。毫無(wú)疑問(wèn)的是，兩者相互協(xié)調(diào)。

02. 提供清晰的方向與指引

用戶(hù)不會(huì)漫無(wú)目的瀏覽網(wǎng)站。人們通常都有個(gè)大體概念他們要去哪，但還需要一些指引和線(xiàn)索。他們會(huì)在腦海中創(chuàng)建地圖，既然我們剛剛提到人是視覺(jué)生物，那么就需要一些視覺(jué)路標(biāo)來(lái)指路。

某種程度而言，你的導(dǎo)航要像GPS那樣。用戶(hù)需要了解他們當(dāng)前位置，哪些路線(xiàn)是可行的，下一步該怎么做。

面包屑導(dǎo)航是滿(mǎn)足上述3項(xiàng)需求的最直接的方式。就像下面的Newegg 這種常見(jiàn)的UI模式，這種方式給用戶(hù)留下了清晰的視覺(jué)蹤跡，來(lái)追蹤他們的訪(fǎng)問(wèn)過(guò)程。

但面包屑導(dǎo)航應(yīng)該作為備選方式，因?yàn)閷?duì)于頁(yè)面間的點(diǎn)擊跳轉(zhuǎn)，它們?cè)谝曈X(jué)上并不直觀。它們多用于層級(jí)復(fù)雜的網(wǎng)站，比如電商網(wǎng)站，簡(jiǎn)單的網(wǎng)站不需要它。如果對(duì)此持疑，回顧你的網(wǎng)站地圖，看看加入面包屑導(dǎo)航能不能提升易用性，或者只是添亂。

面包屑導(dǎo)航、鏈接——還有菜單、搜索框和可點(diǎn)擊的圖標(biāo)——都是基于視覺(jué)的手段，讓你建立方向和指引。談到主導(dǎo)航時(shí)，你需要讓它給人留下強(qiáng)烈的視覺(jué)印象。

如果要學(xué)習(xí)更多導(dǎo)航的最佳實(shí)踐，請(qǐng)看我們的免費(fèi)電子書(shū)Web UI Design Best Practices，還有這本5-part series，講的是交互設(shè)計(jì)中對(duì)導(dǎo)航的簡(jiǎn)化。

03. 確保視覺(jué)統(tǒng)一

一致性在交互設(shè)計(jì)的所有方面都非常重要，不只是視覺(jué)。無(wú)論如何，視覺(jué)上的不一致是非常醒目的（看看世上最糟糕的網(wǎng)站），見(jiàn)證一下設(shè)計(jì)的地獄。

有些事是不該做的。

一致性展現(xiàn)了網(wǎng)站在設(shè)計(jì)和排列方面的邏輯，創(chuàng)造更加令人愉悅的體驗(yàn)（我們都知道，開(kāi)心的用戶(hù)是會(huì)回頭的）。

我們之前提過(guò)，人們更喜歡統(tǒng)一是因?yàn)樗黾恿丝深A(yù)知性（降低學(xué)習(xí)成本）。如果你的界面容易學(xué)習(xí)，它也會(huì)更容易使用。人們不喜歡令人不快的驚喜，正如驚訝最小化原則中所說(shuō)：

不一致引發(fā)的問(wèn)題，是它增加了“認(rèn)知負(fù)荷”。Nielson Norman Group的用戶(hù)體驗(yàn)專(zhuān)家，Kathryn Whitenton，在熱議博文中解釋過(guò)，認(rèn)知負(fù)荷是用戶(hù)在使用產(chǎn)品時(shí)需要思考的量。

一致性展現(xiàn)了網(wǎng)站在設(shè)計(jì)和排列方面的邏輯。

每項(xiàng)不一致都迫使用戶(hù)停下腳步，來(lái)處理此處不同所表達(dá)的含義，它為何不同，又是如何影響他們的行為。因此，不一致的地方越少，交互越順暢，體驗(yàn)越好。不一致的現(xiàn)象幾乎無(wú)處不在：UX Matters的Michael Zuschlag有一張有用的圖表。

例如，單選按鈕在界面某部分只允許單選，那么它在其他部分就不應(yīng)該多選。文案也該如此，既然在某個(gè)部分用了“保存”作為名稱(chēng)，在其他部分里就不該稱(chēng)作“儲(chǔ)存”。如果某張圖片觸發(fā)了一個(gè)彈窗，那它在別處就不該打開(kāi)新窗口。時(shí)刻要問(wèn)自己，“我希望用戶(hù)如何操作？”

04. 將UI設(shè)計(jì)模式作為基準(zhǔn)

UI設(shè)計(jì)模式，可以理解為特定情況的最佳設(shè)計(jì)實(shí)踐。既然用戶(hù)已經(jīng)熟悉各種設(shè)計(jì)模式，使用它們降低了界面的學(xué)習(xí)曲線(xiàn)。常見(jiàn)的UI模式包括旋轉(zhuǎn)木馬、相關(guān)鏈接、幻燈片……還有更多（可以從這個(gè)網(wǎng)站看到，它致力于給它們分門(mén)別類(lèi)）。

Netflix用了相關(guān)內(nèi)容模式，來(lái)幫你找到其他可能感興趣的節(jié)目。

比如，Netflix使用了“相關(guān)內(nèi)容”UI模式，幫助用戶(hù)找到其他可能感興趣的電影或節(jié)目。由于內(nèi)容是智能生成的，用戶(hù)交互感覺(jué)更像是有人在推薦有用的內(nèi)容。這并不是一項(xiàng)開(kāi)創(chuàng)性的設(shè)計(jì)，但它是個(gè)快速有效的解決方案，讓你的界面鮮活起來(lái)。

當(dāng)然，UI模式并非即插即用的模塊，你還是得基于網(wǎng)站的外觀與感覺(jué)為它們特殊定制。

要為產(chǎn)品尋找正確的模式，你可以查看各種模式庫(kù)，通過(guò)它們的分類(lèi)來(lái)瀏覽各種模式，比如“導(dǎo)航”或“輸入框”。今年，我們發(fā)布了兩個(gè)單獨(dú)的UI模式系列（還有財(cái)富榜500強(qiáng)企業(yè)的使用案例分析）：2014網(wǎng)頁(yè)UI設(shè)計(jì)模式和2014移動(dòng)UI設(shè)計(jì)模式。

05. 通過(guò)風(fēng)格指南創(chuàng)建一致性

雖然UI模式有助于提升熟悉感，風(fēng)格指南才能確保全站統(tǒng)一。

風(fēng)格指南是一部手冊(cè)，列出了產(chǎn)品的特殊偏好，這些部分很難記憶——比如全站內(nèi)容的尺寸和字體、主導(dǎo)航的主色與輔助色的顏色梯度、按鈕點(diǎn)擊狀態(tài)的表現(xiàn)，等等。

來(lái)這里www.yelp.co.uk/styleguide看看Yelp的風(fēng)格指南。

在UXPin，更新網(wǎng)站時(shí)我們會(huì)創(chuàng)建風(fēng)格指南。這能幫助我們估計(jì)出額外的工作量，因?yàn)槲覀兛梢园褞в屑夹g(shù)細(xì)節(jié)的截圖添加到公司內(nèi)部wiki中。正如我們?cè)?a tabindex="-1" target="_blank">從風(fēng)格指南到效果圖中描述的，這種“拼拼湊湊”的方法對(duì)于簡(jiǎn)易的風(fēng)格指南非常有效，可以分享給整個(gè)公司。

我們?cè)?a tabindex="-1" target="_blank">網(wǎng)頁(yè)UI設(shè)計(jì)最佳實(shí)踐中充分討論了風(fēng)格指南，包括如何制定、需要包含什么。要了解關(guān)于風(fēng)格指南的更多案例，請(qǐng)看以下幾項(xiàng)絕佳資源：

• Starbucks
• MailChimp
• Yelp
• BBC Gel

要深入學(xué)習(xí)交互設(shè)計(jì)中的一致性，請(qǐng)看這篇全領(lǐng)域創(chuàng)建用戶(hù)體驗(yàn)一致性，還有這篇系統(tǒng)、平臺(tái)和現(xiàn)實(shí)世界的統(tǒng)一。

精華總結(jié)

人們上網(wǎng)時(shí)，他們說(shuō)自己在“看”網(wǎng)站，而不是與它“互動(dòng)”，盡管后者更準(zhǔn)確。我們嚴(yán)重依賴(lài)視覺(jué)，視覺(jué)引導(dǎo)我們建立觀念、解決問(wèn)題，我們所相信的會(huì)引導(dǎo)我們的行為。由于交互設(shè)計(jì)如此貼近用戶(hù)體驗(yàn)，通過(guò)視覺(jué)打造最佳的用戶(hù)體驗(yàn)，雖然間接，但確信無(wú)疑促成了更好的交互。

要深入學(xué)習(xí)，可以下載這本電子書(shū)Interaction Design Best Practices: Words, Visuals, Space。視覺(jué)案例研究包含了30多家公司，其中有Google、AirBnB、Facebook、Yahoo。還有一些專(zhuān)家的建議，比如Stephen P. Anderson、Jared Spool等等。

原文鏈接

VIA: 可樂(lè)橙