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