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