聚焦當(dāng)前任務(wù)
三星ONE UI 2.0今年系統(tǒng)更新，著手打造輕應(yīng)用體驗(yàn)。其中一項(xiàng)更新如下面圖所示；當(dāng)你在看視頻時(shí)候，不會(huì)被來電給打斷，而是以一種對話框的形式出現(xiàn)，問候您是否要接電話。這種設(shè)計(jì)大大提高了用戶體驗(yàn)，解決之前全屏來電的困擾。
ONE UI 2.0 Feature
增強(qiáng)手勢交互
今年Android Q更新系統(tǒng)，新增手勢操作功能，試想平時(shí)我們喜歡坐在沙發(fā)或者躺著看電影，手機(jī)放在一邊，恰巧這時(shí)候你很累，想切換正在觀看的電視劇或者正在聽的歌曲，使用手勢操作將大大提高便捷性。
Android Q 音樂播放器手勢切換歌曲
BYTON 概念汽車設(shè)計(jì)
以后如果智能家居領(lǐng)域引入手勢識(shí)別技術(shù)，比如在智能電視，空調(diào)，窗簾等等，那么將是多么方便的事情（如早上睡醒就可以躺在床上通過手勢打開窗簾，比你去找遙控器方便很多呢），其實(shí)想想還是非常有可能的，我們技術(shù)不斷突破都是為了解決人類需求問題。比如誰曾經(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ù)革命開始，之前我們在使用APP的時(shí)候，是無法同時(shí)使用其他APP的，比如我在看視頻時(shí)候,我是無法使用通訊軟件發(fā)消息的，但是現(xiàn)在安卓多任務(wù)處理革命開啟。以后我們將可以一個(gè)屏幕使用2個(gè)產(chǎn)品了，這也正符合未來大屏手機(jī)、PAD、折疊屏手機(jī)開啟技術(shù)先例。
Android Q :Powering foldables
new ipad Pro（apple已實(shí)現(xiàn)一屏多app任務(wù)模式）
安卓生態(tài)系統(tǒng)今年打開多任務(wù)折疊處理模式，后續(xù)將會(huì)有更多應(yīng)用來適配這種模式，畢竟目前還是安卓市場最大。
AR與VR技術(shù)逐漸普及
華為、谷歌、微軟、FB都在造智能眼鏡，AR增強(qiáng)現(xiàn)實(shí)技術(shù)與VR虛擬現(xiàn)實(shí)技術(shù)已經(jīng)逐漸在我們生活中越來越多了的場景出現(xiàn)，其中谷歌smart glasses能與AI語音、通訊軟件、ins、臉書，導(dǎo)航等等很多應(yīng)用相連接，這樣你在路上就不需要掏出手機(jī)來查看短信郵件，且你在導(dǎo)航時(shí)候不需掏出手機(jī)，想看時(shí)間直接語音喚起（大大減少了低頭族，安全性提高）。
Google ar smart glasses
smart glasses 智能提醒與導(dǎo)航
也許有些伙伴說不方便，比如如何查看回復(fù)消息，其實(shí)這些不必?fù)?dān)心，通過頭部去控制，比如左推獲取最近應(yīng)用通知，右推可以看到回復(fù)的短信等。
AR增強(qiáng)現(xiàn)實(shí)技術(shù)(隨處可以投射現(xiàn)場會(huì)議！驚呆了)
VR虛擬現(xiàn)實(shí)技術(shù)
辦公室?guī)蟅R眼鏡可以做早操鍛煉！
智能響應(yīng)微交互
是什么？我們都知道微交互動(dòng)畫， 但是這種智能的微交互動(dòng)畫，加強(qiáng)情感化元素特征，來自三星 ONE UI 2.0系統(tǒng)中的帶來生動(dòng)的運(yùn)動(dòng)圖標(biāo)，讓用戶清晰知道目前運(yùn)行的應(yīng)用。
Samsung One UI 2 Offical
更自然的AI語音
語音交互使用在越來越多的場景，在車載場景設(shè)計(jì)中，移動(dòng)端設(shè)計(jì)，AI語音助手（Siri、Alexa、Cortana、Google Assistant）或者家庭智能助手等，給我們帶來極大便利，那么在2020年這一趨勢將持續(xù)迅猛發(fā)展，惠及更多用戶群體，伴隨著大數(shù)據(jù)逐步全面覆蓋，技術(shù)成熟，自然語言處理能力增強(qiáng)，今后智能助手真的可能懂你的心！
產(chǎn)品設(shè)計(jì)中的規(guī)則一直是無摩擦的界面，這些界面使完成任務(wù)變得盡可能快捷和容易。但是，在一個(gè)可以學(xué)習(xí)用戶需求和習(xí)慣（并為他們完成工作）的更智能技術(shù)時(shí)代，我們需要功能之外的新模型來與用戶進(jìn)行交互，現(xiàn)在該進(jìn)行連接設(shè)計(jì)了。
智能讀取視頻字幕與翻譯
之前很痛苦，下載的視頻聽不懂語言，現(xiàn)在這個(gè)不必?fù)?dān)心了，2019年 Andriod Q已經(jīng)在其系統(tǒng)解決這個(gè)問題，可以智能讀取視頻中的聲音轉(zhuǎn)化成字幕顯示。你還在擔(dān)心下載的國外教程看不懂了嗎？
Andriod Q
Google Pixel Buds
帶著谷歌今年出Google Pixel Buds耳機(jī)出門旅游，不擔(dān)心聽不懂說他國語言了。
滑動(dòng)式輸入
2019-ipad OS
滾動(dòng)視差布局
2019-Apple News
總結(jié)
新技術(shù)的誕生必將帶來新一波的設(shè)計(jì)趨勢，我們作為設(shè)計(jì)師要時(shí)刻觀察互聯(lián)網(wǎng)流行趨勢，并且對未來的科技與生活時(shí)刻保持前瞻性！通過以此來提升自身對各大互聯(lián)網(wǎng)產(chǎn)品的悟性，更是培養(yǎng)對設(shè)計(jì)更深刻的領(lǐng)悟。
原文地址：功夫UX（公眾號）
作者：LoveXiaoTao
在 iPhone 發(fā)布之前，很多手機(jī)廠商都在尋找真正適合手機(jī)的觸摸屏設(shè)計(jì)。但它們看起來都不太智能，因?yàn)槭謾C(jī)有40%的區(qū)域都是實(shí)體鍵盤，那就意味著，固定的按鈕無法為 App 提供定制化功能。
“智能手機(jī)們”
2007. 革命性的滑動(dòng)解鎖
– 初代 iPhone
2007年第一代 iPhone 掀起了智能手機(jī)的革命，具有高分辨率、多點(diǎn)觸控 Multi-Touch 功能的 iPhone，真正確立了手勢交互的標(biāo)準(zhǔn)。Jobs 放出領(lǐng)先對手5年的狂言，經(jīng)典的滑動(dòng)解鎖設(shè)計(jì)，更是讓人們贊嘆不已。
初代 iPhone
2009. 經(jīng)典的多任務(wù)
– webOS 卡片式交互
webOS 多任務(wù)演示
操作系統(tǒng)多任務(wù)后臺(tái)
雖然 WebOS 已經(jīng)死了，但卡片式界面已經(jīng)蓬勃發(fā)展。此外，Safari 和 Chrome 還將其標(biāo)簽視圖替換為具有相同手勢的卡片視圖。坦率地說，說這些操作系統(tǒng)不受WebOS的影響都是騙人的。
2011. 三大金剛鍵
– Android 4.0
2011年10月19日，三星與Google聯(lián)合在香港正式發(fā)布了首款搭載了Android4.0 的手機(jī)GALAXY Nexus。最新的 Android 操作系統(tǒng)引入了屏幕內(nèi)虛擬導(dǎo)航欄，最終，返回鍵、主頁鍵和多任務(wù)鍵的組合日漸深入人心，“三大金剛鍵”的名號應(yīng)運(yùn)而生。
Android 三大金剛鍵
虛擬導(dǎo)航欄的優(yōu)勢其實(shí)不少，順應(yīng)了觸摸屏成為主流的發(fā)展趨勢。但缺點(diǎn)就是 App 程序內(nèi)的底欄會(huì)和虛擬導(dǎo)航欄組成“雙下巴”，讓人難以忍受。
2012. 魅族的小圓圈
– 小圓圈
魅族獨(dú)特的交互方式一直是它的優(yōu)勢，在安卓陣營都使用三大金剛鍵的背景下，魅族率先做出了小圓圈的設(shè)計(jì)。它可以實(shí)現(xiàn)多種手勢功能，例如鎖屏，返回，呼出語音等功能。
魅族 MX 2
– mBack
「mBack，觸摸返回上一級，按壓返回桌面。」
魅族 mBack 是繼小圓點(diǎn)后又一標(biāo)志性設(shè)計(jì)，魅族用一顆實(shí)體按鍵同時(shí)實(shí)現(xiàn)了返回和回到桌面兩個(gè)功能，多任務(wù)則交給了屏幕底部上滑呼出。
2012. 英雄末路
– 為觸屏而生的 BlackBerry OS 10
2012 年 5 月，黑莓在美國召開發(fā)布會(huì)，展示了其專門為 Z10 研發(fā)的全新移動(dòng)操作系統(tǒng) BB 10。
BlackBerry Z10
黑莓 Z10 整個(gè)機(jī)身正面沒有 Home 鍵或者菜單鍵來干擾視線，因?yàn)槭謩莼瑒?dòng)是 BB 10 的核心交互，到現(xiàn)在為止這個(gè)操作依然讓我記憶深刻，那可是2012年！
黑莓曾經(jīng)把這個(gè)功能叫做flow，也就是上劃解鎖，向上滑動(dòng)返回主頁，和 iPhone X 一樣的操作方式。但由于應(yīng)用生態(tài)軟件匱乏，最終宣告失敗。
2013. 懸浮手勢
– 索尼 Xperia Sola
索尼在 Xperia Sola 上引入 “浮空觸屏技術(shù)”（Floating touch），你不需要觸摸到屏幕就能滑動(dòng) Web 網(wǎng)頁，當(dāng)手指進(jìn)入到距離屏幕 15 毫米的范圍內(nèi)就能觸發(fā)操作手勢。而且它的感應(yīng)器很靈敏，能夠識(shí)別有效的點(diǎn)擊，滑動(dòng)，輕掃等手勢。
這項(xiàng)功能之后在三星 Galaxy S4 也得到了應(yīng)用：
Samsung Galaxy S4
2017. 手勢的崛起
– iPhone X 開啟全面屏?xí)r代
iPhone X
2018. 擁抱全面屏手勢
– vivo
– 小米 MIUI
– 魅族 Flyme
2019. 一統(tǒng)江湖
– Android Q
在今年的 Google I/O 大會(huì)上，新版本 Android Q 除了保留傳統(tǒng)的三大虛擬按鍵和 Android P 的二鍵設(shè)計(jì)之外，啟用新手勢交互方案，屏幕底部便不會(huì)再出現(xiàn)返回鍵和導(dǎo)航欄，只會(huì)剩下一個(gè)指示條，所有手勢也都改成了和 iOS 系統(tǒng)一樣的操作邏輯，兩大陣營在交互上終于達(dá)成一致。
– 未來已來：隔空手勢交互
LG 在今年 MWC 發(fā)布的 G8 ThinQ 帶來 Air Motion 隔空手勢操作，而 Google 方面也證實(shí) Pixel 4 將支持人臉解鎖和隔空手勢。Pixel 4 整合了 Soli 雷達(dá)遙控方案，讓你能利用手勢進(jìn)行靜音、切歌等等操作。你看，這個(gè)功能在吃小龍蝦的時(shí)候，是不是很方便呢？
總結(jié)
隨著時(shí)間的推移，手機(jī)相關(guān)技術(shù)和功能都在不斷向前發(fā)展。在全面屏的潮流之后，手勢交互未來又會(huì)往哪方面發(fā)展呢？讓我們一起期待新的技術(shù)革命早點(diǎn)到來。
By the way，如果你喜歡我的文章的話，歡迎點(diǎn)贊、轉(zhuǎn)發(fā)，謝謝大家！
原文地址： 洋爺（公眾號）
顯示系統(tǒng)狀態(tài)
JakobNielsen的第一個(gè)啟發(fā)式用戶界面設(shè)計(jì)聲明：“系統(tǒng)應(yīng)該始終在合理的時(shí)間內(nèi)做出適當(dāng)?shù)姆答佔(zhàn)層脩袅私庹诎l(fā)生的事情。”這意味著用戶界面應(yīng)該通過提供反饋?zhàn)層脩艏皶r(shí)了解正在發(fā)生的事情。應(yīng)用程序不應(yīng)該讓用戶猜測——它應(yīng)該告訴用戶發(fā)生了什么，微交互可以通過適當(dāng)?shù)囊曈X反饋幫助用戶理解。
數(shù)據(jù)上傳和下載過程是應(yīng)用微交互動(dòng)畫的絕佳機(jī)會(huì)。
數(shù)據(jù)下載動(dòng)畫 (Image: Nick Buturishvili)
另一個(gè)動(dòng)畫是“下拉刷新”，它在移動(dòng)設(shè)備上表示內(nèi)容更新過程。一個(gè)令人愉快的刷新動(dòng)畫可以讓用戶咯咯地笑。
下拉刷新（圖片：Toma Reznichenko）
重點(diǎn)：動(dòng)畫提供應(yīng)用程序進(jìn)程狀態(tài)的實(shí)時(shí)通知，使用戶能夠快速了解正在發(fā)生的事情。
使按鈕和操作可感知
用戶界面元素，如按鈕和控件，即使它們位于一層玻璃的后面，也應(yīng)該是可感知的。按鈕可以模仿常見物理對象的交互。簡單的說，你可以通過對用戶輸入的視覺響應(yīng)來增加清晰度。
（圖片來源：谷歌）
重點(diǎn)：視覺反饋之所以起作用，是因?yàn)樗軡M足用戶對確認(rèn)的自然需求。點(diǎn)擊一個(gè)應(yīng)用程序感覺很好，因?yàn)槟阒腊l(fā)生了什么。
創(chuàng)建有意義的過度
你可以在導(dǎo)航之間平滑的動(dòng)畫向用戶傳遞信息，解釋屏幕上元素排列的變化或強(qiáng)化元素的層次結(jié)構(gòu)。
圖標(biāo)可以從一種形狀變成列外一種形狀，在不同的時(shí)間提供雙重功能。
（圖片來源：谷歌）
動(dòng)效設(shè)計(jì)可以有效的引導(dǎo)用戶的注意力，既可以提供信息，也可以給用戶帶來快樂。這對移動(dòng)設(shè)備和智能手表幫助非常大，因?yàn)樵谶@些屏幕上無法輸入大量的信息。
Apple的ios UI 的轉(zhuǎn)場就是一個(gè)很棒的例子。在下面的示例中，用戶選擇文件夾或應(yīng)用程序并放大到其詳細(xì)視圖（或直接到應(yīng)用程序的主屏幕），
（圖片來源：Rian Van Der Merwe）
另一個(gè)很好的例子是通過顏色和持久元素在兩個(gè)狀態(tài)之間創(chuàng)建視覺連接的動(dòng)畫。這使得過渡平穩(wěn)而輕松。
重點(diǎn)：微交互能夠在頁面之間建立可視連接，并增加UI的清晰度。
幫助用戶開始使用
微交互在用戶入門期間是非常有用的。入門流程中完美的用戶體驗(yàn)和動(dòng)畫會(huì)對首次使用該應(yīng)用程序的用戶產(chǎn)生巨大影響。他們通過突出顯示最重要的功能和控件，在應(yīng)用程序啟動(dòng)后指導(dǎo)和教育用戶。
圖片：Ramotion
重點(diǎn)：微交互可以展示信息并幫助用戶有效地實(shí)現(xiàn)目標(biāo)。
突出顯示UI界面中的變化
微交互能夠引起用戶的注意。在很多情況下，動(dòng)畫用于吸引他們注意重要的細(xì)節(jié)（例如消息通知）。但是，請確保動(dòng)畫具有功能性，適用你的用戶。
通知（圖片來源：Arjun Kani）
重點(diǎn)：微交互可以為用戶提供良好的視覺提示。
添加令人愉快的細(xì)節(jié)
微交互動(dòng)畫的最基本用途是過渡。但是，當(dāng)動(dòng)畫以超出標(biāo)準(zhǔn)操作范圍的方式使用時(shí)，應(yīng)用程序能夠真正的取悅用戶。下面的按鈕能夠完美地改變狀態(tài)并提供雙重功能：通知用戶并創(chuàng)造一個(gè)奇跡。
社交媒體分享（圖片：Kei Sato）
重點(diǎn)：時(shí)刻關(guān)注用戶情感，這在交互中起著非常重要的作用。
設(shè)計(jì)微交互時(shí)應(yīng)該考慮什么？
當(dāng)你創(chuàng)建包含過多元素的視覺設(shè)計(jì)時(shí)，請記住以下幾點(diǎn)：
1、使微交互幾乎不可見且完全正常。
確保動(dòng)畫符合功能目的，不會(huì)感到尷尬或惱人。對于頻繁和次要的操作，響應(yīng)應(yīng)該是適度的，而對于不常見和主要的操作，響應(yīng)應(yīng)該更加強(qiáng)烈。
2、保持持久
微交互必須能夠長期使用。在第一百次使用后，第一次看起來有趣的東西也可能會(huì)變得煩人。
3、遵循Kiss原則
過渡設(shè)計(jì)的微交互可能是致命的。微交互不應(yīng)該使屏幕過載，導(dǎo)致長時(shí)間的加載過程。相反，他們應(yīng)該通過即時(shí)傳遞有價(jià)值的信息來節(jié)省時(shí)間。
4、不要從零開始
你要時(shí)刻了解目標(biāo)受眾及其背景。利用這些知識(shí)使你的微交互更加精確和有效。
5、與其他UI元素創(chuàng)建視覺和諧
微交互應(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è)人主頁：i.ui.cn/ucenter/310170.html
場景是真實(shí)的以人為中心的體驗(yàn)細(xì)節(jié)。場景依賴于人，沒有人的意識(shí)和動(dòng)作就不存在場景。
——《場景革命》
場景賦予行為意義，每一種新鮮的行為體驗(yàn)的背后，都伴隨著新的場景洞察。在傳統(tǒng)的產(chǎn)品設(shè)計(jì)與交互設(shè)計(jì)之間的一個(gè)重要區(qū)別是，看待環(huán)境和行為引導(dǎo)對于塑造人的體驗(yàn)所起的作用的重要性不同，所以交互設(shè)計(jì)師在設(shè)計(jì)過程中，需聚焦于用戶使用場景中的服務(wù)流程和行為引導(dǎo)設(shè)計(jì)，預(yù)期用戶目標(biāo)，為用戶提供符合心智模型的流暢體驗(yàn)。
對于使用場景的思考是交互設(shè)計(jì)的基礎(chǔ)。在不同的場景下，用戶對于同一功能的心理預(yù)期和交互模式會(huì)有所不同?；趫鼍八季S做設(shè)計(jì)，可以有效的幫助設(shè)計(jì)師：
- 判斷功能需求是否真實(shí)，解決了用戶什么問題
- 深入地思考場景細(xì)節(jié)，包括：發(fā)生地點(diǎn)、使用頻率、情緒狀態(tài)、行為模式，用戶是否借助其他外力
- 發(fā)掘功能的延伸性及其價(jià)值，做好迭代設(shè)計(jì)
場景思維的細(xì)節(jié)體驗(yàn)設(shè)計(jì)
“場景”通俗地講是，誰，在何時(shí)，在哪里，做了什么事情。在移動(dòng)互聯(lián)網(wǎng)時(shí)代，場景是真實(shí)的以人為中心的體驗(yàn)細(xì)節(jié)。場景依賴于人，沒有人的意識(shí)和動(dòng)作就不存在場景。通過對場景的因素思考，可以幫助設(shè)計(jì)師更好的理解用戶真實(shí)需求。
通過充分的理解這些場景，并以此為基礎(chǔ)，我們可以基于用戶的使用場景，為用戶找到更直觀的方式，提供有效的互動(dòng)，使他們能夠流暢地完成預(yù)期目標(biāo)。
1.只有當(dāng)使用場景與用戶感知接近乃至完全吻合時(shí)，用戶才沒有拒絕的理由
獲取位置權(quán)限
在獲取用戶位置權(quán)限的設(shè)計(jì)中，大部分設(shè)計(jì)都會(huì)在第一次打開app時(shí)，通知用戶需要獲取位置權(quán)限。在這種使用場景中，用戶的普遍認(rèn)知是：困惑，為什么我需要給你獲取我的通訊資料和位置信息的權(quán)限。但對于新用戶來說，場景的應(yīng)用主要表現(xiàn)為簡單、輕、快體驗(yàn)，所以在獲取位置權(quán)限時(shí)，用戶需要明白，在獲取權(quán)限后，我將獲得什么，因?yàn)橛脩舾菀自S可他們想要使用的功能。
圖1，獲取用戶位置權(quán)限設(shè)計(jì)
在這個(gè)設(shè)計(jì)中，有兩種出發(fā)角度的邏輯，分別是從功能出發(fā)的邏輯思維和場景出發(fā)的邏輯思維：
圖2，功能和場景邏輯思維對比
同樣是開啟獲取位置權(quán)限的設(shè)計(jì)目標(biāo)，場景思維下的設(shè)計(jì)方案更傾向于將設(shè)計(jì)放在用戶的使用場景中，從與之相關(guān)的用戶需求出發(fā)，注重結(jié)合產(chǎn)品的使用場景與產(chǎn)品功能的結(jié)合，做引導(dǎo)和暗示，告訴用戶開啟此功能的效用，從而使用戶清楚的知道我將會(huì)獲得什么，實(shí)現(xiàn)用戶需求與產(chǎn)品功能的自然過渡，不允許用戶say no。
錯(cuò)誤反饋
同樣的例子還有錯(cuò)誤反饋。用戶在出現(xiàn)錯(cuò)誤的場景中，大部分用戶的認(rèn)知是：我哪里錯(cuò)了，該如何修正。在下圖中有兩種設(shè)計(jì)方案：
圖3，在情境里反饋，用戶更容易修改
左邊的設(shè)計(jì)邏輯是，填寫完之后再修改。流程是：用戶填寫表單，彈出popup，通知錯(cuò)誤。在這種設(shè)計(jì)方案下，在用戶提交表單后，再彈出popup提示用戶錯(cuò)誤，使用戶脫離表單場景，且不可在當(dāng)前頁進(jìn)行針對性的修改，打斷用戶流程，用戶需返回后再尋找哪里錯(cuò)誤，并進(jìn)行修改。
還有一種設(shè)計(jì)邏輯是：邊填寫邊修改。在這種場景下，用戶可以實(shí)時(shí)的知道數(shù)據(jù)的正確性，還可以針對性的獲取修改建議，直接在錯(cuò)誤表單上進(jìn)行修改。這種設(shè)計(jì)方案使用戶不會(huì)收到干擾，更專注于當(dāng)前任務(wù)，順利完成表單填寫。
這兩種設(shè)計(jì)方案的區(qū)別在于：前者更注重完成產(chǎn)品功能而后者更注重用戶體驗(yàn)。在場景思維下，以用戶使用交互的具體環(huán)境為基礎(chǔ)，讓使用場景與用戶需求感知接近乃至完全吻合時(shí)來引導(dǎo)用戶實(shí)現(xiàn)預(yù)期目標(biāo)，讓產(chǎn)品具有更優(yōu)越的體驗(yàn)。
2.場景是流動(dòng)的，交互過程應(yīng)該符合用戶的直覺
相對于用戶當(dāng)前的任務(wù)來說，場景是一個(gè)不斷變化的概念。隨著場景的不斷變化，用戶的需求也不斷改變，所以，用戶需要通過簡約的交互來幫助自己快速定位內(nèi)容或功能，整個(gè)過程應(yīng)該符合用戶的直覺，而不是層層挖掘。應(yīng)盡量用少的頁面使用戶以更簡單的操作來完成目標(biāo)。
簡化流程，漸進(jìn)自然
當(dāng)場景發(fā)生變化時(shí)，我們應(yīng)該讓用戶決定下一步該做什么。在下一場景插入變化時(shí)，會(huì)使用戶處于被動(dòng)的位置，而我們要做的是，改變布局，使其非常直觀自然的來滿足他們的需求。
圖4，INSTAGRAM 將濾鏡整合入流程中
這里最好的例子，便是在Instagram中?，F(xiàn)今，用戶發(fā)布照片的普遍的現(xiàn)象是：要先去美圖。那么在發(fā)布照片的功能流程中，可以來對比一下微信發(fā)布朋友圈照片流程和Instagram的發(fā)布流程：
圖5，微信 VS. INSTAGRAM發(fā)布照片流程
從流程中可以看出，ins的用戶在用戶在完成照片選擇之后，可以直接通過濾鏡完成對相片的美顏功能。相比于微信，要去切換至其他美圖的app，這種功能的自然過渡符合用戶美顏照片的心智模型。在整個(gè)流程中，他們將濾鏡控件整合為用戶發(fā)布照片的流程的之一，而不是單獨(dú)的作為一個(gè)獨(dú)立的功能，放置在另一個(gè)位置，這種無縫添加的微交互流程，是基于對用戶使用場景的洞察，使用戶感覺時(shí)刻可以在可控制的范圍內(nèi)，而不是偏離他們原本的預(yù)期。
從上可看出，基于使用場景的思考，可以更好的洞察用戶在使用場景中的需求，使交互流程更加靈活多變，設(shè)計(jì)方案跟隨場景變化而變化，用場景代替功能，將需求自然而然過渡到功能體驗(yàn)上來，使功能更加具有意義。
3.情感化細(xì)節(jié)設(shè)計(jì)，激發(fā)用戶動(dòng)機(jī)與決策
情感化設(shè)計(jì)一直是增強(qiáng)用戶體驗(yàn)的“引爆點(diǎn)”。在一些場景下，加入社交元素、游戲元素以及個(gè)性化元素，可以大大增強(qiáng)用戶的參與度。
Gogobot 是一款移動(dòng)旅游分享應(yīng)用，他通過地理定位功能，記錄用戶去過的地方，并且讓用戶點(diǎn)評商店、景點(diǎn)、分享在gogobot平臺(tái)上。除此之外，在旅游場景下，她捕捉了用戶在旅途中習(xí)慣于收藏旅游明信片這樣的一個(gè)細(xì)節(jié)行為，為app提供了一個(gè)直覺且簡單的功能－制作明信片，這樣不僅可以提供用戶定制化服務(wù)，還可以激發(fā)和引導(dǎo)用戶為其他旅客提供旅游資訊，通過場景化的思維方式解決了用戶在平臺(tái)上獲取真實(shí)旅游資訊的真實(shí)需求。
圖6，GOGOBOT制作明信片
小結(jié)
場景化思維是思考用戶需求，尋求解決方案的重要技能。通過場景化的思考，可以幫助設(shè)計(jì)師重新定義用戶的真實(shí)需求，探索場景中用戶、地點(diǎn)、事物之間的內(nèi)在關(guān)系，通過這種方式逐步去理解設(shè)計(jì)，探索新的交互方式的可能性。
原文鏈接:dianrong
]]>
交互設(shè)計(jì)從來都不容易。它包括了用戶行為的深度分析，和一絲不茍的規(guī)劃。隨著新技術(shù)和交互設(shè)計(jì)模式的出現(xiàn)，事情并不會(huì)變?nèi)菀住?/p>
艷麗的圖片、順暢的鼠標(biāo)懸停效果和意外的動(dòng)畫，不再那么容易引起用戶注意了。但難題卻沒有解決——如何創(chuàng)造令人愉快的用戶體驗(yàn)，讓用戶面帶笑容完成轉(zhuǎn)化？如果你對常見的設(shè)計(jì)陷阱有所警覺，就能更少犯錯(cuò)。
為了方便——可能也為了讓你知道你不是獨(dú)自一人——以下總結(jié)了最常見的交互設(shè)計(jì)誤區(qū)。
1. 鋪天蓋地的創(chuàng)新
網(wǎng)頁設(shè)計(jì)師都非常有創(chuàng)造力。我們希望通過作品來表達(dá)自我。我們總是在尋求創(chuàng)新的設(shè)計(jì)方法來脫穎而出。但是，當(dāng)涉及到交互設(shè)計(jì)時(shí)，創(chuàng)新并不總是好事。甚至?xí)o你的網(wǎng)站帶來壞的影響。用戶渴望熟悉的事物，他們總是會(huì)遵循一些特定的操作方式。
Randy J. Hunt，Etsy的創(chuàng)意總監(jiān)和Product Design for the Web作者，清晰地陳述過：“嘿，設(shè)計(jì)師：別再TM自作聰明了。”在文章中，他詳細(xì)解釋了為什么別在網(wǎng)頁設(shè)計(jì)上過分熱衷創(chuàng)新。
以Iotorama網(wǎng)站為例。它挺漂亮，音樂深情，但是看著滿屏幕移動(dòng)的球，用戶不知所措。不要誤解我的意思，這個(gè)項(xiàng)目非常出色，超級有創(chuàng)造力！我喜歡這個(gè)大膽的創(chuàng)意，但它一點(diǎn)也不直觀。
還有一個(gè)例子。Safety on the Slopes項(xiàng)目背后的創(chuàng)作者想到一個(gè)巧妙的交互式圖形，用來警告用戶冬季運(yùn)動(dòng)的危險(xiǎn)。非常創(chuàng)新，同時(shí)也很直觀、有趣、令人印象深刻。
2. 令人困惑的導(dǎo)航
“不要自作聰明”的準(zhǔn)則也可以沿用到導(dǎo)航上。有些設(shè)計(jì)師試圖使用折衷的名稱來尋求新穎。比如Chijoff網(wǎng)站就讓用戶不知道他們究竟提供什么，如何聘請他們。需要看上好一陣子，才能理解“共同創(chuàng)造”頁面實(shí)際上就等同于“服務(wù)”。甚至還有，通讀整頁后用戶仍然不知道該怎么做……頁面末尾只有個(gè)小注冊表單用來獲取最新的行業(yè)新聞和提示！在“聯(lián)系”頁面也沒有表單，只有郵編和郵箱地址。使人們聯(lián)絡(luò)或聘用他們非常困難。
你能猜出“Universe”在Maison Margiela網(wǎng)站中是什么意思嗎？實(shí)際上它鏈接到他們的Facebook主頁。誰能想到？
相反，看看legworkstudio的網(wǎng)站。它的創(chuàng)意與超凡令人震撼。導(dǎo)航非常清晰不含糊。用戶絕對不會(huì)迷路。
3. 雜亂無章
有一段時(shí)期，網(wǎng)站都試圖把一切可能的東西擺上臺(tái)面。那些日子已經(jīng)一去不復(fù)返，但是很多網(wǎng)站仍然在犯這個(gè)錯(cuò)誤?？纯催@個(gè)在線商城：
設(shè)計(jì)師試圖堅(jiān)持一種單色配色，但是大量顏色不同的色塊、logo和字體，在這個(gè)頁面上就足夠讓用戶步履蹣跚。搜索框有著醒目的文案：“那么，今天你想要什么？”，但整個(gè)布局的外觀和感覺非常過時(shí)。
EBay是主要在在線零售商之一，在這點(diǎn)上做得不錯(cuò)。沒有用產(chǎn)品圖片、促銷和各種行動(dòng)召喚塞滿整個(gè)頁面，而是保持它干凈簡潔，強(qiáng)調(diào)他們確實(shí)希望用戶首先關(guān)注的東西，并附上清晰的提示，接下來該怎么做。
4. 注意對比，大哥！
對比是創(chuàng)造視覺層級、吸引用戶注意特定元素的最重要的方式之一。在網(wǎng)頁設(shè)計(jì)中，對比不僅僅意味著顏色使用，也包括尺寸、形狀和位置。
這個(gè)網(wǎng)站是最簡單生動(dòng)的例子。他們做到了統(tǒng)一一致，但整體背景和按鈕并不夠吸引人，尤其是在訂購按鈕上。
相比來看這個(gè)。顏色選用很接近，但結(jié)果卻完全不同。而且，創(chuàng)新的滾動(dòng)效果，流暢地介紹了產(chǎn)品的新功能——反光材料。很酷，對吧？
5. 忽視表單樣式
表單設(shè)計(jì)是用戶體驗(yàn)最基本的部分。每個(gè)網(wǎng)站都有一個(gè)目標(biāo)——無論是樹立榜樣、直接售賣產(chǎn)品或是提供信息。不幸的是，許多網(wǎng)站有著光鮮的首頁，卻寧可用長表單和復(fù)雜的驗(yàn)證碼來使用戶厭煩致死。除非用戶有強(qiáng)烈的先導(dǎo)動(dòng)機(jī)，否則他們就會(huì)離開。
有了JCF這樣的有效的跨瀏覽器的解決方案，是時(shí)候忘記那些丑陋的默認(rèn)表單元素了，轉(zhuǎn)向一種更加沉浸的用戶體驗(yàn)吧。
另一件氣人的事，是表單要求太多信息，或者沒通過完善測試。例如sketchybusiness.io的表單高亮顯示了所有的空白框，甚至包括非必填項(xiàng)。
如果你看了mostlyserious.io的表單，你絕對會(huì)喜歡它的鼠標(biāo)懸停和按鈕按下狀態(tài)。而且，“別害羞”的提示文案增加了一絲親切幽默的感覺。
最后……
不要懶于測試！對你重要的對于顧客未必重要。他們在哪里遇到問題卡住？是導(dǎo)航、奇特的視覺差滾動(dòng)效果、還是長時(shí)間加載的視頻？用戶測試的最大好處之一，是你可以通過用戶的視角來觀察，關(guān)注他們的需求、做出改進(jìn)。不要抑制你的創(chuàng)造力。要牢記網(wǎng)站訪客可能會(huì)感到困惑和沮喪。
你見過最糟的交互設(shè)計(jì)錯(cuò)誤是什么？可以在評論中分享你的想法和故事。
]]>
在交互設(shè)計(jì)中如何加以利用時(shí)間？它是可控的嗎？
元素的時(shí)間控制難以描述，但我們都能感覺得到，從令人厭煩的等待加載，到令人愉快的輕松穿梭于頁面間。時(shí)間控制的范圍很廣，大到可感受到的時(shí)間增量，小到區(qū)區(qū)毫秒。單獨(dú)看似乎沒有意義，但無論如何，它積累起來就能影響用戶的看法。
本文中我們討論的內(nèi)容涵蓋一切隨時(shí)間變化的元素：視頻、音頻、動(dòng)畫等等。我們會(huì)從時(shí)間為何重要講起，然后討論時(shí)間控制的要素，還有如何改善它們，之后我們會(huì)探索快速和簡潔如何發(fā)揮作用。
時(shí)間為何重要
時(shí)間是個(gè)難以掌控的概念，因?yàn)樗姆秶绱藦V闊。就像一個(gè)電子的大小，相對于我們銀河系幾乎無法察覺。一毫秒的跨度也一樣，相比一個(gè)千年，根本感受不到。
但是數(shù)字世界的時(shí)間與人類的時(shí)間不同。幾秒的差距，就決定了體驗(yàn)是令人沮喪還是令人愉悅。我們可以把它歸為基本的人類心理學(xué)：
- 記憶與注意力是有限的——正如我們在交互設(shè)計(jì)最佳實(shí)踐中描述的，設(shè)計(jì)師應(yīng)當(dāng)評估界面的認(rèn)知負(fù)荷。否則，用戶會(huì)苦于短暫記憶導(dǎo)致的信息丟失，使他們沮喪。
- 人們必須感到一切盡在掌控——沒有人愿意受科技的支配。正如我們最新的博文中陳述的，有些人仍然把計(jì)算機(jī)作為黑盒子對待。讓人等待的電子產(chǎn)品，會(huì)給人一種不夠格的傲慢印象。
用戶的操作是有節(jié)奏的。在用戶體驗(yàn)領(lǐng)域，時(shí)間的度是以10的量級來丈量的。用戶判斷是否值得在一個(gè)網(wǎng)站花費(fèi)時(shí)間，只需要0.05秒。如果它們決定留下，通常會(huì)在2-4分之內(nèi)離開。
無論目標(biāo)是更新你的Facebook信息流，或是在Amazon上對比購買產(chǎn)品，每項(xiàng)體驗(yàn)都可以分解為一系列的交互，交互操作之間的耗時(shí)對用戶體驗(yàn)會(huì)產(chǎn)生復(fù)合影響。
交互設(shè)計(jì)中的時(shí)間要素
那時(shí)間和交互設(shè)計(jì)具體有什么關(guān)系？設(shè)計(jì)顧問David Malouf相信，時(shí)間把交互設(shè)計(jì)與其他用戶體驗(yàn)學(xué)科區(qū)分開來。時(shí)間遠(yuǎn)非線性的過程，因?yàn)殡S時(shí)間流逝所有交互都會(huì)發(fā)生。Malouf建議，我們可以具體從3個(gè)不同角度來檢驗(yàn)時(shí)間：步調(diào)、響應(yīng)和環(huán)境。
1. 步調(diào)
在設(shè)計(jì)方面，步調(diào)與固定時(shí)間內(nèi)完成的事情息息相關(guān)。你馬上就會(huì)想到，“那么用戶完成的事情當(dāng)然越多越好”，但這未必正確。
來源：席克定律
根據(jù)經(jīng)驗(yàn)，操作流程遠(yuǎn)比可用的操作數(shù)量重要。席克定律說到，過多的界面元素實(shí)際上阻礙決策（因此也影響目標(biāo)的完成）。
想一想，比如有一組龐大的注冊表單，和另一組分成多頁面的小表單，兩者信息相同，會(huì)有怎樣的區(qū)別。長表單會(huì)花費(fèi)更少的時(shí)間，但一系列小表單似乎更容易掌控，對用戶也不那么復(fù)雜。
下面的例子來自LinkedIn，結(jié)合表單引導(dǎo)和進(jìn)度條是個(gè)很不錯(cuò)的策略，改善了體驗(yàn)的步調(diào)。創(chuàng)建一套專業(yè)檔案所需的冗長過程被分為4個(gè)可掌控的步驟。用戶也能看到它們的進(jìn)度到了什么地步，這會(huì)激勵(lì)他們繼續(xù)進(jìn)行。步調(diào)與效率關(guān)系不大，更多是用戶是否對體驗(yàn)感到舒適——不會(huì)使他們負(fù)擔(dān)過重，也不會(huì)減慢它們的速度。
2. 響應(yīng)
產(chǎn)品的反應(yīng)時(shí)間與用戶的掌控程度直接相關(guān)。Jakob Nielsen說過，電子產(chǎn)品最重要的3個(gè)響應(yīng)時(shí)間范圍是：
- 1秒——直接控制——用戶感覺他們在直接操縱這個(gè)系統(tǒng)，就像使用真實(shí)的工具一樣。除了結(jié)果的視覺呈現(xiàn)外，不需要任何反饋。
- 1秒——間接控制——用戶會(huì)注意到延遲，但在網(wǎng)站的體驗(yàn)中仍然感覺盡在掌握。比如對于加載新頁面，這個(gè)延遲是可以接受的。
- 10秒——部分控制——用戶的注意力已經(jīng)轉(zhuǎn)移，操作流程中斷。反饋對于減少半途而廢至關(guān)重要，這就是加載界面如此流行的原因。
響應(yīng)時(shí)間中的延遲必須與任務(wù)的重要性相稱。例如，加載云端面板，5秒是可以接受的。但是觸發(fā)一個(gè)下拉菜單就不可忍受了。延遲越長，用戶與界面之間的關(guān)系就越趨于分裂。
來源：UXPin
3. 環(huán)境
如何、何時(shí)、何地，甚至為何使用一個(gè)應(yīng)用，都對時(shí)間感知有所影響。
比如，網(wǎng)站的平均停留為2-4分鐘，盡管電商銷售流程的平均要持續(xù)28分鐘（這甚至都沒有考慮銷售的品類——買一輛車可得花上幾個(gè)月）。同樣的，那些在商場購物會(huì)通過移動(dòng)設(shè)備比價(jià)的人，比坐在家中沙發(fā)里購物的人更重視速度。
來源：理解企業(yè)中移動(dòng)運(yùn)算的時(shí)間、地點(diǎn)與環(huán)境
如果你發(fā)現(xiàn)用戶過早離開你的網(wǎng)站，你就得修改鏈接文案了。你還可以檢查頁面的視覺層級（顏色、對比、字體），確保重要的信息得到了強(qiáng)調(diào)。
但是，這些吸引眼球的方法，在單獨(dú)一頁沉浸式內(nèi)容中或許有違直覺，例如博客。這種情況下，你最好善加利用留白來強(qiáng)調(diào)內(nèi)容（就像Medium那樣）。同一個(gè)獲取注意力的策略，依據(jù)網(wǎng)站類型的不同，會(huì)產(chǎn)生兩種不同的效果——這都取決于環(huán)境。
越快越好……在某種程度上
討論一個(gè)界面的步調(diào)時(shí)，我們提到過并非總是越快越好。
坦言之，絕大多數(shù)時(shí)間相關(guān)的可用性問題，都由于系統(tǒng)反應(yīng)太慢。但是，也有些情況速度太快反而不好。通常，速度太快的界面會(huì)導(dǎo)致兩個(gè)問題：錯(cuò)過信息，或是用戶跟不上。
來源：FourSquare_
1. 用戶錯(cuò)過信息
信息變化太快時(shí)，用戶只要看一眼屏幕的其他地方，就會(huì)錯(cuò)過它。這些通常適用于并非由用戶觸發(fā)的意外操作，而且通常這個(gè)變化離相關(guān)操作越遠(yuǎn)，越容易被忽略。有簡單的補(bǔ)救方法可以將注意力引向這些變化，通過恰當(dāng)處理的動(dòng)畫效果（我們稍后會(huì)討論）。
我們可以把西門子作為界面速度過快的例子。此例中，向用戶展示了如下頁面，然后詢問他們是否發(fā)現(xiàn)了西門子有洗衣機(jī)的特別促銷。
正如Jakob Nielsen，Nielsen-Norman Group的聯(lián)合創(chuàng)始人所描述的，即使頁面頂部以巨大文字展示了促銷信息，用戶還是沒看到。為什么會(huì)發(fā)生這種事情？因?yàn)檩啿D（其實(shí)更像手風(fēng)琴效果）每5秒自動(dòng)切換一張。每次屏幕切換，唯一的指示器就是右側(cè)的邊欄——它通常都被忽略了，因?yàn)檫@兩個(gè)行動(dòng)召喚看起來像是banner（從而引發(fā)了banner盲區(qū)）。
2. 用戶跟不上
即使用戶注意到屏幕上快速切換的動(dòng)畫，也未必能理解。這通常發(fā)生在輪播圖、旋轉(zhuǎn)體和其他自動(dòng)切換功能中——用戶被圖片激起了好奇心，當(dāng)他們把鼠標(biāo)移上去，它已經(jīng)變成了另一張不怎么有吸引力的圖。
可以發(fā)現(xiàn)，先前西門子的案例就是糟糕的用戶體驗(yàn)決策的綜合體。無論如何，5秒的輪播圖是其中最糟糕的。因?yàn)樗计聊恢鲗?dǎo)地位，輪播圖立刻就能吸引用戶注意。但是這個(gè)輪播圖每5秒改變一次，使用戶迷失方向，并沒有清晰表達(dá)出促銷信息。用戶并沒有觸發(fā)這個(gè)操作，于是為了努力贏回用戶體驗(yàn)的控制權(quán)，他們對用戶體驗(yàn)的其他不足更加敏感（比如糟糕的文案）。
實(shí)際上，最好是擯棄自動(dòng)切換的輪播圖，因?yàn)樗鼈?a tabindex="-1" target="_blank">最擅長分散注意力，最讓人沮喪。目標(biāo)與輪播圖內(nèi)容無關(guān)的用戶，會(huì)發(fā)現(xiàn)它令人分心。真正需要了解其內(nèi)容的用戶，又無法及時(shí)反應(yīng)。
對于非母語用戶，響應(yīng)問題更嚴(yán)重。年紀(jì)越大，或越不熟悉科技產(chǎn)品，越難以使用。要確保你的界面反應(yīng)不至于太快，這些建議很有幫助：
- 讓用戶手動(dòng)控制——屏幕上的快速變化，必須限制為由用戶的操作觸發(fā)。否則，這就違反了最少意外原則，這是指用戶通常都不喜歡突發(fā)事件。
- 用動(dòng)畫來減慢速度——用800毫秒到1秒之間的動(dòng)畫來表現(xiàn)屏幕上的變化。
- 給每個(gè)輪播圖留出足夠的時(shí)間——如果你必須用自動(dòng)切換的輪播圖，要大聲朗讀其中文案，然后所花時(shí)間再乘以2.5。這就是每張輪播圖應(yīng)該停留的時(shí)間。還有當(dāng)鼠標(biāo)指在輪播圖上，要確保切換暫停。
記住，交互設(shè)計(jì)中，感知到的就是真實(shí)的。令人愉快的等待，遠(yuǎn)比推著用戶列隊(duì)前進(jìn)要好。
點(diǎn)擊要簡單，而非快速
既然提到速度，很有必要糾正另一個(gè)普遍的設(shè)計(jì)誤區(qū)，3次點(diǎn)擊原則——這個(gè)原則指出，用戶通過3次及以內(nèi)的點(diǎn)擊，應(yīng)該要能查看網(wǎng)站的任何內(nèi)容。對于這個(gè)3次點(diǎn)擊原則的最佳描述，可以說“意圖是好的，但造成了誤導(dǎo)”。
Hubspot的前用戶體驗(yàn)總監(jiān)，Joshua Porter創(chuàng)作的這張圖表表明，點(diǎn)擊次數(shù)與用戶的滿意程度并不存在確切的關(guān)聯(lián)。其中的教訓(xùn)是，設(shè)計(jì)師應(yīng)當(dāng)少考慮讓用戶盡快完成任務(wù)，多考慮讓用戶盡可能容易地完成任務(wù)——目的不同，是界面設(shè)計(jì)存在差異的依據(jù)。
為了進(jìn)一步印證我們的觀點(diǎn)，看看這張圖表。它遵循了3次點(diǎn)擊原則，因?yàn)槿魏雾撁娲_實(shí)可以通過3次點(diǎn)擊到達(dá)，但這種模式真的提升了可用性嗎？它其實(shí)損害了可用性，因?yàn)橛脩舻脧倪^多的導(dǎo)航中過濾出他們的選擇。而且，當(dāng)他們到達(dá)新頁面，他們需要再次從眾多選項(xiàng)中過濾。
來源：Oracle
看看上面的Oracle網(wǎng)站。當(dāng)然，你可以在3次點(diǎn)擊內(nèi)進(jìn)入任何產(chǎn)品類目（例如數(shù)據(jù)庫或Java），但你真的想這么做嗎？
相反，我們建議遵循1次點(diǎn)擊原則：每一項(xiàng)交互都讓用戶離目標(biāo)更接近一步。這種策略有助于縮減頂級導(dǎo)航的項(xiàng)目數(shù)量，而不會(huì)使用戶迷惑。它有助于讓人關(guān)注探索的體驗(yàn)，而非探索路徑本身。
來源：Chase
- 打開了我的帳號頁面。我看見一個(gè)行動(dòng)召喚，Ultimate Rewards，我點(diǎn)擊了。
來源：Chase
- 進(jìn)入了獎(jiǎng)勵(lì)頁面。我看見選項(xiàng)Use Points和Earn Points。我點(diǎn)了Use Points。
來源：Chase
- 當(dāng)來到點(diǎn)數(shù)兌換頁面，我能看到有多少點(diǎn)數(shù)可用，有多數(shù)可以兌換。我選定了數(shù)量，兌換現(xiàn)金，然后達(dá)成了目標(biāo)。
來源：Chase
這需要3次以上的點(diǎn)擊，但每次點(diǎn)擊都只花很少的精力。而且每次點(diǎn)擊都讓用戶在通向目標(biāo)的道路上更進(jìn)一步。現(xiàn)在，如果你仍然堅(jiān)持3次點(diǎn)擊原則，你可能會(huì)把頂級導(dǎo)航其中一項(xiàng)設(shè)為“使用獎(jiǎng)勵(lì)”。點(diǎn)擊次數(shù)當(dāng)然減少了，但這種扁平式的策略實(shí)際上會(huì)展現(xiàn)過多的項(xiàng)目，難以同時(shí)篩選過濾。因此為了更短的點(diǎn)擊路徑，犧牲了可用性。
我們想要強(qiáng)調(diào)3次點(diǎn)擊原則背后的精神：點(diǎn)擊應(yīng)該盡可能簡單和直觀。并非確保用戶在網(wǎng)站上所花的時(shí)間最少，而是值得的。
總結(jié)
提到交互設(shè)計(jì)，一秒的延遲就能左右成功與失敗。如果用戶體驗(yàn)太慢，人們會(huì)感到沮喪。如果太快，人們會(huì)錯(cuò)過重要信息（或者不明白它的意思）。理解人類對于時(shí)間的認(rèn)知、速度（和輪播圖）的限制，還有直接點(diǎ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ù)人類的最后一道保險(xiǎn)。我很好奇，我們最后一道保險(xiǎn)是什么？對于交互設(shè)計(jì)師而言，三大法則又是什么？
用戶對于界面的感知，離不開它的形式、內(nèi)容和行為。就像工業(yè)與平面設(shè)計(jì)師專注于形式那樣，交互設(shè)計(jì)師將行為作為最重要的元素來考慮。要通過設(shè)計(jì)來左右用戶的體驗(yàn)，首先要考慮我們的三大法則，界面的行為如何表現(xiàn)，它對用戶的行為產(chǎn)生什么影響。它們必須得作為穩(wěn)固的基礎(chǔ)，在它之上構(gòu)建其他交互設(shè)計(jì)原則。幸運(yùn)的是，我將要運(yùn)用的三大法則早已有人提出——三大法則的主人，Mac電腦項(xiàng)目背后的大腦，Jef Raskin。他在他的著作The Humane Interface的某一頁中寫下了這三條鐵律，本書在交互設(shè)計(jì)中的地位接近圣經(jīng)。細(xì)細(xì)品讀，你會(huì)發(fā)現(xiàn)現(xiàn)代最流行的用戶界面，都采用了這本里程碑式的著作中的概念與技巧，其中也包括微軟和蘋果的設(shè)備。
第一法則
善加利用阿西莫夫的三大法則本身，Raskin寫道“交互設(shè)計(jì)第一法則應(yīng)該是：電腦不應(yīng)該妨礙你的工作，或由于不作為而使你的工作受到損害”[1]。我們都應(yīng)該牢記，電腦是一件用來完成任務(wù)的工具；最終目標(biāo)不可能或極少情況下是使用軟件本身。因此，我們可以一致同意，在電腦上最惡劣的體驗(yàn)就是讓工作蒙受損失。唯一一件比丟失已完成的工作更糟的，是丟失無法精確還原的數(shù)據(jù)，比如創(chuàng)意類的工作。
當(dāng)你鍵入時(shí)，應(yīng)用應(yīng)當(dāng)如實(shí)反映數(shù)據(jù)，并盡可能防止你丟失工作。可能你會(huì)覺得這只是工程師該考慮的。開發(fā)者應(yīng)該確保他們的軟件有防護(hù)措施和冗余，來防止數(shù)據(jù)丟失（還有一些潛在bug），不是嗎？實(shí)際上，數(shù)據(jù)保護(hù)與工作保存也是界面設(shè)計(jì)的任務(wù)，作為設(shè)計(jì)師必須預(yù)先行動(dòng)——通過用戶研究——發(fā)現(xiàn)用戶會(huì)如何損失工作，或是不得不重復(fù)工作。這就意味著要加入一些保護(hù)，比如強(qiáng)大的撤銷功能和破壞性操作保護(hù)，來防止無意的數(shù)據(jù)丟失。很棒的一個(gè)例子就是GitHub倉庫的刪除對話框，它確實(shí)發(fā)揮作用，不同于其他確認(rèn)對話框，它強(qiáng)迫你輸入倉庫名稱才能繼續(xù)。這個(gè)技巧很聰明，在刪除過程中迫使用戶的注意力集中到倉庫名上。安全措施防止用戶習(xí)慣性的操作導(dǎo)致?lián)p失。
GitHub刪除確認(rèn)對話框。
第一法則也適用于保存用戶的工作相關(guān)與內(nèi)容本身。比如，要選擇一系列項(xiàng)目進(jìn)行操作（比如說文件），需要大量的精力。因此，建議在工作流程中保留選中狀態(tài)，將它們保存在一個(gè)可以撤銷的操作列表中。類似的，如果界面允許用戶對元素進(jìn)行自定義或排序，這些排序或自定義都應(yīng)該保存下來。
為什么Apple的Time Machine和自動(dòng)保存，還有Dropbox的歷史版本這么棒，就因?yàn)樽袷亓说谝?ldquo;法則”。它們承認(rèn)人類會(huì)犯錯(cuò)這個(gè)事實(shí)，盡管用戶可能會(huì)觸發(fā)一個(gè)破壞工作或數(shù)據(jù)的操作，那并非他們的意圖。
Apple的“瀏覽所有版本”功能非常棒。
第二法則
Raskin繼續(xù)寫道，好的第二法則應(yīng)該是“電腦不該浪費(fèi)時(shí)間，或要求你做非必要的工作”[2]。很常見的情況，用戶肩負(fù)眾多任務(wù)，因?yàn)槿斯?zhí)行一項(xiàng)任務(wù)比編寫一個(gè)系統(tǒng)讓它自動(dòng)執(zhí)行簡單的多。這些情況下，如果技術(shù)允許，電腦應(yīng)該承擔(dān)起這些工作。比如迫使用戶選擇信用卡的類型，雖然從卡號就可以推斷出來。
Stripe就做對了，自動(dòng)檢測信用卡的類型。
用戶學(xué)習(xí)一套新的界面或系統(tǒng)數(shù)據(jù)模型，所花的時(shí)間與精力也要納入考慮，要與總工作量取得平衡。用效率較低的方式執(zhí)行一項(xiàng)操作，或許比學(xué)習(xí)一種高效的新方式再操作工作量少。用戶只原意與少量界面進(jìn)行交互。至于其他，稍加犧牲效率，換取更加直觀的操作或許是值得的。
假設(shè)某種狀況下你需要迫使用戶改變他們自己的思維模式，這時(shí)需要謹(jǐn)慎。因?yàn)檫@項(xiàng)設(shè)計(jì)抉擇會(huì)影響用戶的內(nèi)容結(jié)構(gòu)（通常出于技術(shù)要求），而非讓他們自己決定如何組織信息，或是使用他們熟悉的結(jié)構(gòu)。優(yōu)秀的界面以用戶最想要最易懂的形式展現(xiàn)信息系統(tǒng)。以多數(shù)銀行希望你存錢的方式為例。通常，你需要把錢分幾個(gè)賬戶存，或是存在一個(gè)賬戶上，然后自己判斷哪些不該花。Simple用了另一個(gè)方案。相比強(qiáng)迫用戶思考存款的運(yùn)轉(zhuǎn)方式（比如在銀行賬戶中），Simple讓你簡單通過“目的”設(shè)置任意數(shù)量的錢，這些數(shù)目與之后的交易一起，都在“可使用”余額的追蹤下。
Simple的“可使用”能辨認(rèn)出人們確切的用錢方式。
第三法則
我相信，Raskin的書余下的所有部分，講的就是第三法則。他說界面應(yīng)該是人道主義的；它應(yīng)當(dāng)“響應(yīng)人類的需要，并且體諒人類的弱點(diǎn)”[3]。這是整部以用戶為中心的設(shè)計(jì)的核心定律，由此得到其他的交互設(shè)計(jì)原則。好的交互設(shè)計(jì)永遠(yuǎn)都會(huì)尊重人腦和身體的局限。它有必要對我們的本能物理反應(yīng)和文化價(jià)值保持敏感。
讓界面變得人道主義的一個(gè)例子，是圍繞人們同時(shí)只能注意一件事情進(jìn)行設(shè)計(jì)。比如，鍵盤大寫鎖定鍵上的指示燈。它本身并不是個(gè)好的解決方法，無法避免誤觸開啟大寫鎖定模式，因?yàn)橛脩舭聪聲r(shí)，關(guān)注點(diǎn)通常不在按鍵上。Mac的密碼輸入就處理得很好，它在輸入框內(nèi)提供了視覺指示，表明大寫鎖定被開啟了，用戶此時(shí)就在看輸入框。
大寫鎖定的信息就在你需要的地方。
“響應(yīng)用戶需求”的一個(gè)例子，是在他們進(jìn)行操作或執(zhí)行工作流程時(shí)，持續(xù)展示用戶關(guān)心的內(nèi)容（注意：他們關(guān)心的是目的，而不是你的應(yīng)用）。看看Amazon，它自動(dòng)顯示你查看的鏡頭是否匹配你近期購買的相機(jī)。
Amazon的相機(jī)鏡頭匹配組件。
最后一條“定律”是交互設(shè)計(jì)定律的精髓。在今天的世界，要知道設(shè)計(jì)界面非常重要的一點(diǎn)就是人道主義，從認(rèn)知的格式塔原則和平面設(shè)計(jì)原則，到相關(guān)的文化心理學(xué)。我們的工作永無止境。隨著時(shí)間流逝，技術(shù)前景和我們的文化環(huán)境在緩慢改變，我們將顛簸前行，繼續(xù)演進(jìn)我們的設(shè)計(jì)與設(shè)計(jì)流程。
無論如何，這三條定律是我不斷回溯的基本準(zhǔn)則，它們再三成為成功的界面的試金石。在你決策界面的外觀和行為時(shí)，牢記它們很有幫助，不論你最終設(shè)計(jì)的美學(xué)樣式如何。
總結(jié)
- 電腦不應(yīng)該妨礙你的工作，或由于不作為而使你的工作受到損害。
- 電腦不該浪費(fèi)時(shí)間，或要求你做非必要的工作。
- 界面應(yīng)該是人道主義的；它應(yīng)當(dāng)響應(yīng)人類的需要，并且體諒人類的弱點(diǎn)。
來自UXPin的Jerry Cao，通過本文向我們解釋了如何保持視覺與交互的協(xié)調(diào)。
我不想貶低文字的重要性，但也不想忽視視覺。兩者是同等重要的交互設(shè)計(jì)元素。文字就是交互，但那些視覺元素（比如圖標(biāo)、菜單、圖像等）才是用戶實(shí)際上操作的東西。雖然有些可用性專家會(huì)提及Craigslist甚至Amazon，作為丑陋但可用（而且受歡迎）的網(wǎng)站案例。但毫無疑問，美感總會(huì)有所幫助。
情感是用戶體驗(yàn)的關(guān)鍵：視覺設(shè)計(jì)優(yōu)秀的網(wǎng)站能使用戶放松，提升可信度和易用性?？紤]到多數(shù)用戶注意力短暫，認(rèn)知往往成為事實(shí)：如果視覺做得很糟糕，用戶不會(huì)費(fèi)神去深入研究你的交互設(shè)計(jì)。
讓我們來細(xì)說視覺的重要性，因?yàn)樗P(guān)系到交互，保證了清晰的方向指引和一致性。
01. 尊重視覺的主導(dǎo)地位
我們從案例展示開始。看看下面的文字：
很顯然，我們都知道“黃色”一詞所指的顏色。但當(dāng)多數(shù)人看到它時(shí)，他們理解到的可能只有紅色。文字的外觀取代了它的真正含義。
信息圖專家David McCandless表明，我們大部分的腦力資源都花在了視覺上。
作為人類，視覺是我們的主要感觀。但是其他動(dòng)物更多依賴聽覺與嗅覺，我們是視覺主導(dǎo)的生物。正如數(shù)據(jù)記者兼信息圖專家David McCandless在一場引人入勝的TED演講中提到的，我們會(huì)調(diào)動(dòng)全部感觀，但多數(shù)的腦力都花在了視覺上——雖然我們很難察覺。他用計(jì)算機(jī)進(jìn)行了類比……
“視覺是感觀中最迅速的。它和計(jì)算機(jī)網(wǎng)絡(luò)的速度相同。之后是觸覺，相當(dāng)于一個(gè)U盤的速度。然后才是聽覺與嗅覺，約等于硬盤的速度。
“后面才是可憐的味覺，運(yùn)算速度幾乎近似便攜式計(jì)算器。角落里那個(gè)小方塊，百分之0.7，那就是我們實(shí)際了解的量。所以你的很多感觀——絕大多數(shù)感觀都是視覺上的，它蜂擁而來——你卻渾然不覺。”
視覺影響行為，也影響體驗(yàn)，Stephen P. Anderson說。
但是對于交互設(shè)計(jì)這意味著什么？它意味著你對產(chǎn)品做出的每一項(xiàng)視覺上的決策，都對交互有極大的影響，即使是在不知不覺間。
產(chǎn)品設(shè)計(jì)顧問Stephen P. Anderson指出，視覺影響的不只是體驗(yàn)，也會(huì)影響用戶的行為。
這就是說好的視覺設(shè)計(jì)可以提升銷量，提高注冊量和轉(zhuǎn)化率，激發(fā)某些特定的用戶行為?？纯聪旅孢@兩個(gè)表單：
表單A
表單B
記住，交互設(shè)計(jì)的目標(biāo)之一就是讓用戶盡可能少地思考。你認(rèn)為哪個(gè)更有利于銷售？哪個(gè)視覺上看更舒服？
第一例中，那密集恐懼癥般的間距和過量的文字，讓用戶望而卻步。第二例則色彩豐富、優(yōu)美，看起來更簡潔（盡管用戶都得輸入這些信息）。
由于交互設(shè)計(jì)就是要?jiǎng)?chuàng)造人們想用的東西，有吸引力的事物更激發(fā)人的渴求，因此更能發(fā)揮作用。
圖片和導(dǎo)航在這個(gè)在線香料商店中相互協(xié)調(diào)。
不過除了吸引人的交互，優(yōu)美的設(shè)計(jì)也提供了一層額外的理解?？纯瓷厦孢@個(gè)Old Town Spice Shop案例，你會(huì)發(fā)現(xiàn)這個(gè)網(wǎng)站的櫥柜式布局立刻暗示了這家公司的意圖和香料產(chǎn)品。
盡管你可能會(huì)質(zhì)疑，用戶先看到櫥柜還是“Spices”和“Extracts”這些文字。毫無疑問的是，兩者相互協(xié)調(diào)。
02. 提供清晰的方向與指引
用戶不會(huì)漫無目的瀏覽網(wǎng)站。人們通常都有個(gè)大體概念他們要去哪，但還需要一些指引和線索。他們會(huì)在腦海中創(chuàng)建地圖，既然我們剛剛提到人是視覺生物，那么就需要一些視覺路標(biāo)來指路。
某種程度而言，你的導(dǎo)航要像GPS那樣。用戶需要了解他們當(dāng)前位置，哪些路線是可行的，下一步該怎么做。
面包屑導(dǎo)航是滿足上述3項(xiàng)需求的最直接的方式。就像下面的Newegg 這種常見的UI模式，這種方式給用戶留下了清晰的視覺蹤跡，來追蹤他們的訪問過程。
但面包屑導(dǎo)航應(yīng)該作為備選方式，因?yàn)閷τ陧撁骈g的點(diǎn)擊跳轉(zhuǎn)，它們在視覺上并不直觀。它們多用于層級復(fù)雜的網(wǎng)站，比如電商網(wǎng)站，簡單的網(wǎng)站不需要它。如果對此持疑，回顧你的網(wǎng)站地圖，看看加入面包屑導(dǎo)航能不能提升易用性，或者只是添亂。
面包屑導(dǎo)航、鏈接——還有菜單、搜索框和可點(diǎn)擊的圖標(biāo)——都是基于視覺的手段，讓你建立方向和指引。談到主導(dǎo)航時(shí)，你需要讓它給人留下強(qiáng)烈的視覺印象。
如果要學(xué)習(xí)更多導(dǎo)航的最佳實(shí)踐，請看我們的免費(fèi)電子書Web UI Design Best Practices，還有這本5-part series，講的是交互設(shè)計(jì)中對導(dǎo)航的簡化。
03. 確保視覺統(tǒng)一
一致性在交互設(shè)計(jì)的所有方面都非常重要，不只是視覺。無論如何，視覺上的不一致是非常醒目的（看看世上最糟糕的網(wǎng)站），見證一下設(shè)計(jì)的地獄。
有些事是不該做的。
一致性展現(xiàn)了網(wǎng)站在設(shè)計(jì)和排列方面的邏輯，創(chuàng)造更加令人愉悅的體驗(yàn)（我們都知道，開心的用戶是會(huì)回頭的）。
我們之前提過，人們更喜歡統(tǒng)一是因?yàn)樗黾恿丝深A(yù)知性（降低學(xué)習(xí)成本）。如果你的界面容易學(xué)習(xí)，它也會(huì)更容易使用。人們不喜歡令人不快的驚喜，正如驚訝最小化原則中所說：
不一致引發(fā)的問題，是它增加了“認(rèn)知負(fù)荷”。Nielson Norman Group的用戶體驗(yàn)專家，Kathryn Whitenton，在熱議博文中解釋過，認(rèn)知負(fù)荷是用戶在使用產(chǎn)品時(shí)需要思考的量。
一致性展現(xiàn)了網(wǎng)站在設(shè)計(jì)和排列方面的邏輯。
每項(xiàng)不一致都迫使用戶停下腳步，來處理此處不同所表達(dá)的含義，它為何不同，又是如何影響他們的行為。因此，不一致的地方越少，交互越順暢，體驗(yàn)越好。不一致的現(xiàn)象幾乎無處不在：UX Matters的Michael Zuschlag有一張有用的圖表。
例如，單選按鈕在界面某部分只允許單選，那么它在其他部分就不應(yīng)該多選。文案也該如此，既然在某個(gè)部分用了“保存”作為名稱，在其他部分里就不該稱作“儲(chǔ)存”。如果某張圖片觸發(fā)了一個(gè)彈窗，那它在別處就不該打開新窗口。時(shí)刻要問自己，“我希望用戶如何操作？”
04. 將UI設(shè)計(jì)模式作為基準(zhǔn)
UI設(shè)計(jì)模式，可以理解為特定情況的最佳設(shè)計(jì)實(shí)踐。既然用戶已經(jīng)熟悉各種設(shè)計(jì)模式，使用它們降低了界面的學(xué)習(xí)曲線。常見的UI模式包括旋轉(zhuǎn)木馬、相關(guān)鏈接、幻燈片……還有更多（可以從這個(gè)網(wǎng)站看到，它致力于給它們分門別類）。
Netflix用了相關(guān)內(nèi)容模式，來幫你找到其他可能感興趣的節(jié)目。
比如，Netflix使用了“相關(guān)內(nèi)容”UI模式，幫助用戶找到其他可能感興趣的電影或節(jié)目。由于內(nèi)容是智能生成的，用戶交互感覺更像是有人在推薦有用的內(nèi)容。這并不是一項(xiàng)開創(chuàng)性的設(shè)計(jì)，但它是個(gè)快速有效的解決方案，讓你的界面鮮活起來。
當(dāng)然，UI模式并非即插即用的模塊，你還是得基于網(wǎng)站的外觀與感覺為它們特殊定制。
要為產(chǎn)品尋找正確的模式，你可以查看各種模式庫，通過它們的分類來瀏覽各種模式，比如“導(dǎo)航”或“輸入框”。今年，我們發(fā)布了兩個(gè)單獨(dú)的UI模式系列（還有財(cái)富榜500強(qiáng)企業(yè)的使用案例分析）：2014網(wǎng)頁UI設(shè)計(jì)模式和2014移動(dòng)UI設(shè)計(jì)模式。
05. 通過風(fēng)格指南創(chuàng)建一致性
雖然UI模式有助于提升熟悉感，風(fēng)格指南才能確保全站統(tǒng)一。
風(fēng)格指南是一部手冊，列出了產(chǎn)品的特殊偏好，這些部分很難記憶——比如全站內(nèi)容的尺寸和字體、主導(dǎo)航的主色與輔助色的顏色梯度、按鈕點(diǎn)擊狀態(tài)的表現(xiàn)，等等。
來這里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中。正如我們在從風(fēng)格指南到效果圖中描述的，這種“拼拼湊湊”的方法對于簡易的風(fēng)格指南非常有效，可以分享給整個(gè)公司。
我們在網(wǎng)頁UI設(shè)計(jì)最佳實(shí)踐中充分討論了風(fēng)格指南，包括如何制定、需要包含什么。要了解關(guān)于風(fēng)格指南的更多案例，請看以下幾項(xiàng)絕佳資源：
要深入學(xué)習(xí)交互設(shè)計(jì)中的一致性，請看這篇全領(lǐng)域創(chuàng)建用戶體驗(yàn)一致性，還有這篇系統(tǒng)、平臺(tái)和現(xiàn)實(shí)世界的統(tǒng)一。
精華總結(jié)
人們上網(wǎng)時(shí)，他們說自己在“看”網(wǎng)站，而不是與它“互動(dòng)”，盡管后者更準(zhǔn)確。我們嚴(yán)重依賴視覺，視覺引導(dǎo)我們建立觀念、解決問題，我們所相信的會(huì)引導(dǎo)我們的行為。由于交互設(shè)計(jì)如此貼近用戶體驗(yàn)，通過視覺打造最佳的用戶體驗(yàn)，雖然間接，但確信無疑促成了更好的交互。
要深入學(xué)習(xí)，可以下載這本電子書Interaction Design Best Practices: Words, Visuals, Space。視覺案例研究包含了30多家公司，其中有Google、AirBnB、Facebook、Yahoo。還有一些專家的建議，比如Stephen P. Anderson、Jared Spool等等。
VIA: 可樂橙
]]>