微交互：細(xì)節(jié)設(shè)計(jì)成就卓越產(chǎn)品

微交互細(xì)節(jié)設(shè)計(jì)成就卓越產(chǎn)品目錄\h第1章設(shè)計(jì)微交互\h1.1微交互不是功能，但很重要\h微交互不容小視\h1.2微交互秘史\h1.3微交互的結(jié)構(gòu)\h1.4微交互的設(shè)計(jì)理念\h1.5小結(jié)\h第2章觸發(fā)器\h2.1手動(dòng)觸發(fā)器\h2.1.1提前展示數(shù)據(jù)\h2.1.2觸發(fā)器的構(gòu)成\h2.2系統(tǒng)觸發(fā)器\h系統(tǒng)觸發(fā)器的規(guī)則\h2.3小結(jié)\h第3章規(guī)則\h3.1設(shè)計(jì)規(guī)則\h3.1.1生成規(guī)則\h3.1.2動(dòng)詞與名詞\h3.1.3屏幕與狀態(tài)\h3.1.4約束條件\h3.1.5不要從零開始\h3.1.6理解復(fù)雜性\h3.2有限的選項(xiàng)和聰明的默認(rèn)項(xiàng)\h3.2.1控件和用戶輸入\h3.2.2預(yù)防錯(cuò)誤\h3.3微文案\h3.4算法\h3.5小結(jié)\h第4章反饋\h4.1反饋闡釋規(guī)則\h4.1.1以人為本\h4.1.2少即是多\h4.2反饋體現(xiàn)個(gè)性\h4.3反饋方法\h4.3.1視覺方法\h4.3.2聽覺方法\h4.3.3觸覺方法\h4.4反饋的規(guī)則\h4.5小結(jié)\h第5章循環(huán)與模式\h5.1模式\h彈簧模式與一次性模式\h5.2循環(huán)\h5.2.1循環(huán)分類\h5.2.2長(zhǎng)循環(huán)\h5.3小結(jié)\h第6章綜合實(shí)例\h6.1例1：鬧鈴移動(dòng)應(yīng)用\h6.2例2：在線共享播放列表\h6.3例3：洗碗機(jī)控制面板\h6.4微交互的原型與文檔\h6.5編排微交互\h6.5.1微交互與功能\h6.5.2改進(jìn)呆板的微交互\h6.6往小處想\h附錄測(cè)試微交互\hA.1測(cè)試中的注意事項(xiàng)\hA.2定量測(cè)試\hA.3微交互測(cè)試流程第1章設(shè)計(jì)微交互“天下沒有大作品。”——維克多·帕帕奈克（VictorPapanek）樂隊(duì)指揮中止了演奏，觀眾席爆發(fā)出一陣陣的怒吼。紐約愛樂樂團(tuán)已經(jīng)演奏到了馬勒《第九交響曲》最后那舒緩、沉寂的慢板。為欣賞這場(chǎng)音樂會(huì)，很多觀眾不惜重金，幾百美元買一張票。一個(gè)多小時(shí)的樂曲接近尾聲，觀眾全神貫注地聆聽著這首曲子最安靜、最莊嚴(yán)的時(shí)刻。就在此時(shí)，出狀況了。前排某位觀眾那兒傳來iPhone手機(jī)的“馬林巴琴”鈴聲，就是那種叮叮咚咚的高調(diào)木琴的聲響，而且一遍又一遍，反復(fù)不停。這是手機(jī)鬧鈴響了。過了一會(huì)兒，沒有停。又過了一會(huì)兒，還沒有停。樂隊(duì)指揮AlanGilbert示意停止演奏，但鬧鈴仍然響個(gè)不?！，F(xiàn)場(chǎng)開始有觀眾大罵那個(gè)拿手機(jī)的人。后來樂團(tuán)年長(zhǎng)的管理者稱，這個(gè)人是“贊助商X”，而且還是一個(gè)長(zhǎng)期贊助交響樂團(tuán)的人。紐約愛樂的主場(chǎng)地，林肯表演藝術(shù)中心艾弗里·費(fèi)雪廳，本來是要迎來一片平靜和安寧的，結(jié)果卻變得人聲鼎沸，罵聲四起。2012年1月的《紐約時(shí)報(bào)》注1報(bào)道，贊助商X一天前剛換了手機(jī)，他們公司把他原來使用的黑莓換成了iPhone。演出開始前，他把手機(jī)調(diào)成了靜音，但他不知道iPhone的鬧鈴在靜音模式下也會(huì)響。因此在鬧鈴響起時(shí)，甚至在令人難以忍受地響了很長(zhǎng)時(shí)間后，他都沒意識(shí)到是自己的iPhone在響。而當(dāng)他意識(shí)到是自己的手機(jī)并關(guān)掉鬧鈴時(shí)，已經(jīng)太晚了，整個(gè)演出都被搞砸了。注1：2012年1月12日《紐約時(shí)報(bào)》，DanielJ.Wakin：“RingingFinallyEnded,butThere'sNoButtontoStopShame”（鬧鈴不響了，臉也丟盡了）。第二天，消息傳開，引發(fā)了互聯(lián)網(wǎng)上很多人的批評(píng)，有人也在拿這件事找樂。作曲家DanielDorff發(fā)推文說：“為防萬一，我把手機(jī)鈴聲改成了馬勒《第九》。”很多博客也就此事發(fā)表意見，其中有些人贊成要靜音，就禁止一切響聲。比如在2012年1月份的一篇文章“DaringFireball:OntheBehavioroftheiPhoneMuteSwitch”（關(guān)于iPhone靜音開關(guān)的行為）中，技術(shù)專欄作家AndyIhnatko寫道：“我認(rèn)為，與其讓設(shè)備錯(cuò)誤的決定招致難堪，還不如自己干傻事兒造成難堪更好些。”還有一些人則認(rèn)為，就算靜音，鬧鈴該響還是要響（我認(rèn)為這是對(duì)的）。正如蘋果專家JohnGruber指出的（\h/zQHeaA6）：“如果靜音開關(guān)禁止一切響聲，那么每天都將有上千人睡過頭，因?yàn)樗麄冞M(jìn)入夢(mèng)鄉(xiāng)的時(shí)候，可能意識(shí)不到手機(jī)處于靜音模式。”蘋果的iOSHumanInterfaceGuidelines（\h/apfVq1）也說明了為什么靜音要這樣處理：例如，用戶在劇院中要把設(shè)備切換成靜音模式，以免打擾其他觀眾。此時(shí)，用戶仍然希望能在設(shè)備上使用應(yīng)用，只是不想被意外或沒有明確要求的聲音（比如響鈴或短信提示音）驚擾。響鈴/靜音（或靜音）開關(guān)不會(huì)禁止用戶專門或明確要求產(chǎn)生的聲音。換句話說，手機(jī)靜音不會(huì)禁止那些用戶特別要求發(fā)出的聲音，而只會(huì)禁止非用戶主觀意愿下發(fā)出的聲音（比如短信提示音、來電鈴聲）。這就是規(guī)則。與很多規(guī)則一樣，它并不為人所知，而且除了開關(guān)上橙色的標(biāo)記之外，屏幕上也沒有任何指示說明鈴聲關(guān)閉了。假如蘋果原來規(guī)定了不同的規(guī)則，即靜音就禁止設(shè)備發(fā)出所有聲音，那么還得為此規(guī)定其他規(guī)則和反饋機(jī)制。鬧鈴不響了那手機(jī)振動(dòng)嗎？手機(jī)處于靜音模式時(shí)，需要某種提醒裝置嗎，比如喚醒手機(jī)時(shí)在屏幕上顯示一個(gè)圖標(biāo)，或者點(diǎn)亮一個(gè)硬件的小LED指示燈？設(shè)計(jì)手機(jī)靜音的方式太多了。手機(jī)靜音就是微交互的一個(gè)例子。微交互，就是產(chǎn)品中涉及一種使用場(chǎng)景的交互，只體現(xiàn)為一種功能，只完成一件事（圖1-1展示了一個(gè)例子）。微交互可以是啟動(dòng)應(yīng)用，也可以啟動(dòng)設(shè)備，但更常見的則是伴隨或內(nèi)置于另一個(gè)更大的功能。微交互只需瞬間，可能沒人注意，甚至沒人知道，也可能妙趣橫生，令人愉快。修改設(shè)置、同步數(shù)據(jù)或設(shè)備、設(shè)定鬧鐘、更換密碼、打開家用電器、登錄、設(shè)置狀態(tài)消息、收藏或標(biāo)注“喜歡”……都是微交互。我們隨身攜帶的設(shè)備里，家里的各種電器內(nèi)，手機(jī)或電腦的應(yīng)用中，乃至我們每天工作生活的環(huán)境中，到處都可以發(fā)現(xiàn)微交互。圖1-1：常見的微交互：登錄。社交網(wǎng)站Disqus的登錄表單能根據(jù)你的電子郵件猜測(cè)你的名字（蒙JakobSkjerning和“LittleBigDetails”惠允使用）微交互就是產(chǎn)品中這種通過交互來實(shí)現(xiàn)功能的細(xì)節(jié)，而正如CharlesEames的名言注2所說，細(xì)節(jié)不僅僅是細(xì)節(jié)，而是設(shè)計(jì)。細(xì)節(jié)可以讓用戶更方便、更愉快地使用產(chǎn)品，盡管人們事后不會(huì)記得它們。有些微交互實(shí)際上或者事實(shí)上是看不見的，也不太可能成為你購(gòu)買一款產(chǎn)品的理由。相反，它們通常都是一些零零碎碎的功能，或者正式一點(diǎn)說，屬于支持性或所謂的“完整性”功能。比如說，人們不可能因?yàn)橐豢钍謾C(jī)的靜音功能而購(gòu)買它，但這個(gè)功能卻是必需的。而且，諸如此類的微交互帶給用戶的體驗(yàn)卻千差萬別，有的很好，有的很差。有些微交互設(shè)計(jì)得很難用，有些根本沒人知道或者讓人想不起來，最好的微交互都是吸引人而又聰明乖巧的。本書要討論的就是最后一類，即怎么設(shè)計(jì)出最好的微交互。注2：見100QuotesbyCharlesEames，CharlesEames（EamesOffice,2007）?！百澲蘕”是因微交互而聲名遠(yuǎn)播的一個(gè)例子，但這樣的例子并不多。正如“贊助商X”一樣，盡管我們每天都生活在各種微交互中，但往往只有在它們給我們帶來麻煩之后，我們才會(huì)注意它們。然而，無論多么不起眼，多么難發(fā)現(xiàn)，微交互卻是至關(guān)重要的。想想看，你喜歡某個(gè)產(chǎn)品或討厭某個(gè)產(chǎn)品，往往就是因?yàn)檫@些產(chǎn)品中的某些細(xì)節(jié)。好的微交互能讓我們的生活更加便捷、更有樂趣。這就是本書要討論的主題：怎么設(shè)計(jì)好微交互？這一章會(huì)告訴大家怎么區(qū)分什么是功能，什么是微交互，順便簡(jiǎn)單介紹一下微交互的淵源。然后開始討論微交互的結(jié)構(gòu)，也就是本書的結(jié)構(gòu)。作為一個(gè)模型，它為我們討論和分析微交互的各個(gè)方面，進(jìn)而設(shè)計(jì)好自己的微交互提供了參照。最后，我們會(huì)談一談微交互的設(shè)計(jì)流程。1.1微交互不是功能，但很重要微觀交互與宏觀功能完美契合是最強(qiáng)大的。用戶體驗(yàn)設(shè)計(jì)的本質(zhì)就在于此：既要關(guān)注細(xì)節(jié)，又要關(guān)注大局，只有這樣用戶才能獲得最好的體驗(yàn)（見圖1-2）。圖1-2：Twitter的密碼選擇表單就是微交互的一個(gè)典型范例，反饋消息清楚明白（蒙“LittleBigDetails”惠允使用）微交互與功能的區(qū)別，主要在于規(guī)模和范圍。功能一般都比較復(fù)雜（多種用途），需要花較多時(shí)間熟悉，而且涉及認(rèn)知的塑造。微交互一般都簡(jiǎn)單明了，認(rèn)知上毫無壓力（見圖1-3）。比如，音樂播放器就是功能，而調(diào)整音量則是這個(gè)功能中的一個(gè)微交互。微交互適合如下應(yīng)用場(chǎng)景：只完成一項(xiàng)任務(wù)；連接不同的設(shè)備；只影響一個(gè)數(shù)據(jù)，比如股票價(jià)格或溫度；控制正在進(jìn)行的過程，比如切換電視頻道；調(diào)整某項(xiàng)設(shè)置；查看或創(chuàng)建一小部分內(nèi)容，比如狀態(tài)消息；打開或關(guān)閉某個(gè)功能。圖1-3：如果有人在你的Facebook主頁(yè)上用非默認(rèn)語言發(fā)表了評(píng)論，F(xiàn)acebook會(huì)顯示“SeeTranslation”（查看翻譯）鏈接（蒙MarinaJaneiko和“LittleBigDetails”惠允使用）微交互不容小視微交互可以是產(chǎn)品的組成部分，也可以是整個(gè)產(chǎn)品。以烤面包機(jī)為例，它只做烤面包這一件事?？久姘鼨C(jī)只有一個(gè)使用場(chǎng)景：把面團(tuán)放進(jìn)去并按啟動(dòng)開關(guān)。然后，烤面包機(jī)就開始烤面包?？竞弥?，倉(cāng)門打開。僅此而已。當(dāng)然，現(xiàn)在有的機(jī)器有了新的烘烤目標(biāo)（比如烤百吉餅）。不過從本質(zhì)上說，這種設(shè)備就只是一個(gè)微交互。類似地，小應(yīng)用也可以只是一個(gè)微交互。數(shù)以千計(jì)的小應(yīng)用（包括桌面和移動(dòng)設(shè)備中的應(yīng)用）都只專注于做一件事，有的是轉(zhuǎn)換溫度（比如圖1-4所示的Convertbot），有的是計(jì)算器，有的則顯示天氣預(yù)報(bào)。圖1-4：Tapbot的Convertbot是基于一個(gè)微交互構(gòu)建的應(yīng)用，它只專注于把一個(gè)值轉(zhuǎn)換成另一個(gè)值微交互經(jīng)常是在設(shè)計(jì)和開發(fā)產(chǎn)品的最后階段才被考慮的事情，因此往往不受重視。但忽視微交互是個(gè)錯(cuò)誤。最早的Android手機(jī)（G1）之所以讓人覺得像個(gè)半成品，原因就在于微交互做得很差勁，跟iPhone簡(jiǎn)直無法相提并論。比如，有很多不一致的方式可以觸發(fā)刪除操作，此外在某些應(yīng)用中按搜索鍵沒有任何反應(yīng)。如果微交互設(shè)計(jì)得很差勁，那么無論主功能如何完美，使用該功能的過程都是讓人難以忍受的。產(chǎn)品設(shè)計(jì)得好壞，取決于產(chǎn)品中最小的那一部分設(shè)計(jì)得如何。再想一想，幾乎所有操作系統(tǒng)，包括桌面操作系統(tǒng)和移動(dòng)操作系統(tǒng)，實(shí)際上都在做同樣的事情：安裝和啟動(dòng)應(yīng)用程序、管理文件、連接軟件和硬件、管理打開的應(yīng)用程序和窗口，等等。但操作系統(tǒng)之間的差別，至少?gòu)挠脩艚嵌葋碇v，則體現(xiàn)在你每天甚至每小時(shí)都要與之接觸的微交互上（見圖1-5和圖1-6）。圖1-5：本書作者OSX中的菜單欄，這些圖標(biāo)中的任何一個(gè)都對(duì)應(yīng)著一個(gè)微交互當(dāng)然，有些功能的確是特別有用或者特別強(qiáng)大的（或者受到知識(shí)產(chǎn)權(quán)法的特別保護(hù)），以至于微交互顯得并不重要。很多醫(yī)療設(shè)備就是典型的例子，就像大多數(shù)技術(shù)剛剛誕生時(shí)一樣，人們更多關(guān)注的是這些技術(shù)能做什么，而不是怎么做。比如2002年上市的第一代“魯姆巴”（Roomba）家庭保潔機(jī)器人既不會(huì)計(jì)算房間大小，也不能檢測(cè)障礙物和臟物，但無論如何它在當(dāng)時(shí)都是新奇的技術(shù)。而后來的機(jī)型（特別是在市場(chǎng)上有了競(jìng)爭(zhēng)產(chǎn)品后的機(jī)型）則越來越專注于人類和機(jī)器人的微交互。圖1-6：在網(wǎng)頁(yè)中搜索某個(gè)詞時(shí)，Chrome會(huì)在滾動(dòng)條中顯示目標(biāo)詞所在的位置（蒙SaulCozens和“LittleBigDetails”惠允使用）在競(jìng)爭(zhēng)激烈的市場(chǎng)環(huán)境下，微交互顯得格外重要。如果產(chǎn)品的功能類似，那只能靠使用產(chǎn)品的體驗(yàn)來擴(kuò)大銷量并提升品牌的忠誠(chéng)度。而產(chǎn)品的整體體驗(yàn)嚴(yán)重依賴于微交互。微交互是產(chǎn)品觀感中的“感”。Google+與Facebook相比，之所以讓人覺得單薄乏味，追根究底在于其微交互不夠好。比如把用戶歸入圈子，一開始還讓人覺得有點(diǎn)意思，時(shí)間一長(zhǎng)就變得特別無聊和小兒科。另外一個(gè)重視微交互的原因，就是在如今多平臺(tái)共存的生活環(huán)境下，微交互起到了至關(guān)重要的連接作用。微交互可以把多個(gè)移動(dòng)設(shè)備、電視、桌面電腦、筆記本電腦、家用電器，以及Web應(yīng)用中的功能連接在一起。雖然這些微交互可能因平臺(tái)而有所不同，但它們體積小巧，因此可以保持某種一致性，而大型的功能卻做不到這一點(diǎn)。特別是家用電器和移動(dòng)設(shè)備，它們的小屏幕（或根本沒有屏幕）看起來就像是專門為微交互量身打造的一樣。小巧的微交互完美契合小設(shè)備。就拿Twitter來說吧。Twitter本身就構(gòu)建于一個(gè)微交互：發(fā)送140字以內(nèi)的短信。而用戶幾乎可以通過任何設(shè)備、在任何地方來做這件事。有些實(shí)體甚至可以獨(dú)立地發(fā)推文，或者代表我們發(fā)。Twitter可以用來傳播八卦新聞，也可以成為引導(dǎo)革命的消息平臺(tái)。設(shè)計(jì)良好的微交互能夠完美地適合各種平臺(tái)，適應(yīng)數(shù)百萬用戶（見圖1-7）。圖1-7：貼心的微消息。在Harvest網(wǎng)站上尋求幫助時(shí)，你會(huì)在他們公布的辦公時(shí)間旁邊看到當(dāng)?shù)啬壳笆菐c(diǎn)鐘（蒙NicolasBouliane惠允使用）微交互也完美契合我們擁擠、復(fù)雜、碎片化的生活。我們需要甚至樂于快速瀏覽數(shù)據(jù)，在餐館迅速簽到、在地鐵上隨意評(píng)論。（“休閑游戲”這個(gè)類別實(shí)際上就代表著一類專門針對(duì)娛樂的微交互。）微交互強(qiáng)迫設(shè)計(jì)師簡(jiǎn)化工作、注重細(xì)節(jié)，要求設(shè)計(jì)師比拼誰的設(shè)計(jì)更輕巧、更簡(jiǎn)明、更流暢，而不是更笨重（見圖1-8）。圖1-8：在MicrosoftOffice中，文本旋轉(zhuǎn)之后，相關(guān)的格式按鈕也會(huì)隨之旋轉(zhuǎn)（蒙“LittleBigDetails”惠允使用）1.2微交互秘史1974年，一位年輕的工程師LarryTesler在為XeroxAlto計(jì)算機(jī)開發(fā)一個(gè)名為Gypsy的應(yīng)用程序。Gypsy屬于第一代文字處理程序，在它之前則是具有開創(chuàng)意義的Bravo。Bravo是第一個(gè)真正“所見即所得”的文字處理程序，也是第一個(gè)具有更改字體功能的程序。雖然都是文字處理程序，但Gypsy卻很不一樣，因?yàn)樗褂昧耸髽?biāo)和圖形用戶界面（GUI）。Larry的任務(wù)是減少界面中的感覺體（modality），以便用戶不必切換到其他模式去執(zhí)行操作。此后數(shù)十年，Larry一直為這個(gè)目標(biāo)而奔走呼號(hào)。你看，他的網(wǎng)站是\h，Twitter是@nomodes，就連他的汽車牌照也是NOMODES（\h/zQHeT28）。Larry希望用戶在按下字母鍵時(shí)，總能在屏幕上看到相應(yīng)的字母以文本形式顯示出來——這對(duì)文字處理程序而言，可不算是過分的要求。但Bravo就做不到這一點(diǎn)。在Bravo中，用戶只能在特定的模式下輸入文本，而在這個(gè)模式之外，敲擊鍵盤會(huì)觸發(fā)其他某種功能。圖1-9：Bravo的“屏幕截圖”（寶麗萊照片）。通過下方的窗口在上方窗口中生成表單（蒙DigiBarnComputerMuseum惠允使用）3譯注3：此處翻譯參考了如下鏈接：\h/collections/systems/xerox-alto/把文本從文檔的一個(gè)部分移動(dòng)到另一個(gè)部分也是文字處理程序的功能。在Bravo中（見圖1-9），用戶必須先選擇目標(biāo)，然后按“I”或“R”鍵，進(jìn)入“插入”或“替換”模式，再查找并選擇要移動(dòng)的文本，最后按Esc鍵執(zhí)行復(fù)制4。Larry想出了一個(gè)更好的辦法來執(zhí)行這種操作，他的方案不僅利用了鼠標(biāo)，而且大大簡(jiǎn)化了整個(gè)微交互。在Gypsy中，用戶可以選擇一段文本，然后按“復(fù)制”功能鍵，選擇目標(biāo)，最后再按“粘貼”功能鍵。不需要模式。剪切和粘貼就此誕生。注4：詳見BravoCourseOutline（作者SuzanJerome，Xerox公司1976出版）交互設(shè)計(jì)以及人機(jī)交互的歷史，實(shí)際上就是微交互的歷史。今天，我們?cè)谧烂婧凸P記本電腦中、在移動(dòng)設(shè)備中習(xí)以為常的那些交互方式，都曾引發(fā)過微交互設(shè)計(jì)的革命。無論是保存文檔，還是把文件拖放到文件夾，還是連接到Wi-Fi網(wǎng)絡(luò)，都曾經(jīng)是精心設(shè)計(jì)的微交互。就連滾動(dòng)和打開多個(gè)窗口這么“基本的”交互方式，也都要經(jīng)過設(shè)計(jì)。技術(shù)在快速發(fā)展，不斷對(duì)微交互提出創(chuàng)新的要求。用戶習(xí)慣了拿來就用，他們只會(huì)關(guān)注更好的交互方式，或者是那些由于技術(shù)發(fā)展催生的或強(qiáng)制必須使用的微交互方式。沒錯(cuò)，技術(shù)不斷發(fā)展，支持這些技術(shù)實(shí)現(xiàn)的微交互同樣也在不斷發(fā)展。以滾動(dòng)為例，Bravo最早支持一種原始的滾動(dòng)機(jī)制，但直到AlanKay、AdeleGoldberg和DanIngalls在XeroxPARC的另一個(gè)產(chǎn)品SmallTalk中引入滾動(dòng)條才算基本成熟，時(shí)間大約在1973年到1976年之間。SmallTalk支持的滾動(dòng)更加平滑，可以一個(gè)像素一個(gè)像素地滾動(dòng)，而不是只能一行一行地滾動(dòng)。（這是PARC當(dāng)時(shí)給史蒂夫·喬布斯以及他帶來的工程師演示的一個(gè)著名的功能，后來蘋果在Lisa以及Mac中都內(nèi)置了這個(gè)功能，參見圖1-10。）注2注2：參見MichaelA.Hiltzik所著的DealersofLightning:XeroxPARCandtheDawnoftheComputerAge（HarperBusiness，2005）。隨著文檔變長(zhǎng)，滾動(dòng)條上會(huì)增加一個(gè)箭頭圖標(biāo)，點(diǎn)擊可以直接跳轉(zhuǎn)到文檔底部。此外，還會(huì)出現(xiàn)一個(gè)提示條，告訴你當(dāng)前在文檔中的什么位置。真正的變化開始于觸控板和移動(dòng)設(shè)備中的觸摸屏技術(shù)。你現(xiàn)在是不是通過手指滑上滑下來滾動(dòng)界面？蘋果公司在發(fā)布iPhone之后，為了讓筆記本電腦和移動(dòng)設(shè)備統(tǒng)一成“自然滾動(dòng)”，從OSXLion開始改變了滾動(dòng)方向（從上到下）。（可以讀一讀MichaelAgger在Slate雜志上發(fā)表的文章“Apple'sMousetrap:WhydidApplereversethewaywescrollupanddown?”，鏈接為：\hhttp://slate.me/10nnZN8。）蘋果還不惜引發(fā)眾怒地隱藏了滾動(dòng)條，只在滾動(dòng)過程中或者在光標(biāo)靠近可滾動(dòng)窗口右邊界時(shí)才顯示它。這些都推動(dòng)了微交互向前發(fā)展。圖1-10：蘋果1982年發(fā)布的Lisa個(gè)人電腦推出了一系列（從市場(chǎng)角度說）“新”的微交互（來源：LisaGraphicalUserInterfaceGalleryGuidebook）微交互并不局限于數(shù)字產(chǎn)品。實(shí)際上，微交互起源于第一代電子設(shè)備，比如收音機(jī)（1893年）、手電筒（1986年）和洗衣機(jī)（1900年）。正像設(shè)計(jì)師BillDeRouchey在他的演講“TheHistoryofTheButton”中指出的，在（電子機(jī)械出現(xiàn)之前的）機(jī)械時(shí)代，用戶可以直接跟蹤自己的操作并看到結(jié)果。比如，拉動(dòng)控制桿，可以看到齒輪轉(zhuǎn)動(dòng)，齒輪轉(zhuǎn)動(dòng)又帶動(dòng)車輪轉(zhuǎn)動(dòng)。輸入和輸出的關(guān)聯(lián)很直觀。電子技術(shù)的應(yīng)用改變了一切。按一下墻上的按鈕，房間另一邊的燈應(yīng)聲點(diǎn)亮。沒錯(cuò)，反饋是實(shí)時(shí)的，但實(shí)現(xiàn)方法卻不是。正如DeRouchey在“TheHistoryoftheButton”（\hhttp://slidesha.re/1049o1K）中所說：“按鈕是一個(gè)標(biāo)志，標(biāo)志著人類動(dòng)作的結(jié)果第一次完全不同于引發(fā)這個(gè)結(jié)果的動(dòng)作。”動(dòng)作變得抽象起來了。進(jìn)入數(shù)字時(shí)代，特別是GUI出現(xiàn)之前，動(dòng)作甚至更加抽象。插入一疊穿孔卡片，或者撥動(dòng)一排開關(guān)，產(chǎn)生的結(jié)果幾乎無法預(yù)知。終于有一天，GUI誕生了，微交互得以簡(jiǎn)化。但是，摩爾定律（處理器速度每18個(gè)月增長(zhǎng)一倍）、庫(kù)米定律（硬件的耗電量每18個(gè)月降低50%）、克萊德定律（存儲(chǔ)空間呈指數(shù)級(jí)增長(zhǎng)），以及越來越快的網(wǎng)速和越來越便利的網(wǎng)絡(luò)接入（先是局域網(wǎng)，后有無線網(wǎng)絡(luò)，包括無線局域網(wǎng)和移動(dòng)無線網(wǎng)），都對(duì)更多的微交互提出了需求，而這些微交互涉及的控制操作遠(yuǎn)比開燈抽象得多。比如在設(shè)備之間同步數(shù)據(jù)，這個(gè)概念本身就是抽象的，現(xiàn)實(shí)當(dāng)中沒有什么對(duì)應(yīng)的類比。輸入方法同樣大大改變了微交互。按鍵、開關(guān)、鍵盤、鼠標(biāo)，這些傳統(tǒng)的物理裝置可以觸發(fā)微交互；觸摸屏、傳感器、語音和手勢(shì)，這些新興的交互手段同樣可以觸發(fā)微交互?；厥撞贿h(yuǎn)的過去，我們與身邊環(huán)境交互的唯一方式只有通過物理裝置手工調(diào)整它。從1956年RobertAdler發(fā)明ZenithSpaceCommander，即第一個(gè)電視遙控器起，這種局面被徹底打破（見圖1-11），人類有史以來第一次可以不通過接觸就能控制物體。圖1-11：遙控飛機(jī)、遙控輪船早就有了（主要是軍用），但讓遙控器走進(jìn)普通家庭的則是SpaceCommander電視（蒙PeterHa惠允使用）今天，要觸發(fā)一次微交互，甚至不必在同一個(gè)房間。只要使用適當(dāng)?shù)脑O(shè)備，你可以在地球的另一邊調(diào)整自己家里的溫度（見圖1-12）。再比如，到了合適的地點(diǎn)，進(jìn)入某個(gè)街區(qū)，你的手機(jī)就可以提醒你該做什么，或者你的GPS設(shè)備就可以告訴你在哪里往左拐。在公共洗手間，只要把手伸進(jìn)洗手池，水龍頭就會(huì)噴出水來。你可以讓自己的手機(jī)在附近找一家餐館，可以在觸摸屏上滑動(dòng)手指顯示出一個(gè)搜索條，可以在柜臺(tái)上按一下手機(jī)買杯咖啡。這樣的例子太多了。圖1-12：NestLearningThermostat（學(xué)習(xí)型恒溫器）通過距離傳感器感知有人進(jìn)入房間，然后開燈并顯示溫度，讓人無需觸碰，一目了然（蒙Nest惠允使用）技術(shù)發(fā)展史的背景隱藏著微交互的發(fā)展史。微交互與技術(shù)之間的關(guān)系就像共生生物，它與技術(shù)相伴而生，如影隨形，但卻能影響、管理和控制技術(shù)。1.3微交互的結(jié)構(gòu)有效的微交互不僅表現(xiàn)在大小上，更表現(xiàn)在它們的構(gòu)成上。一個(gè)設(shè)計(jì)完善的微交互必須適當(dāng)?shù)靥幚硭膫€(gè)不同的部分，接下來我們會(huì)依次討論（見圖1-13）。圖1-13：微交互的結(jié)構(gòu)這四個(gè)部分是設(shè)計(jì)和分解微交互的一種方式：觸發(fā)器啟動(dòng)微交互、規(guī)則規(guī)定微交互的工作過程、反饋向用戶說明規(guī)則、循環(huán)與模式是影響微交互的元規(guī)則。任何微交互的第一部分都是觸發(fā)器。對(duì)于關(guān)閉iPhone的鈴聲而言，觸發(fā)器是由用戶撥動(dòng)的，也就是說用戶必須要做點(diǎn)什么（在這里就是撥動(dòng)開關(guān)）才能開始微交互。因此，很多微交互都始于對(duì)用戶需求的理解：用戶想要做什么，什么時(shí)候會(huì)這么想，有多頻繁。用戶需求決定了觸發(fā)器的使用情境、操作方式和存在時(shí)間。以手機(jī)靜音為例，用戶任何時(shí)候都有可能想要關(guān)閉鈴聲，而且是快速關(guān)閉。因此，觸發(fā)器（響鈴/靜音開關(guān)）必須隨時(shí)待命，無論當(dāng)前運(yùn)行著什么應(yīng)用，都需要能夠立即打開或關(guān)閉聲音。這個(gè)功能實(shí)在太重要了，因此iPhone僅有的5個(gè)物理按鍵中就有一個(gè)專門用作靜音的觸發(fā)器?？丶瑹o論數(shù)字的還是物理的，都是用戶啟動(dòng)的觸發(fā)器中最重要的組成部分，它不僅能讓用戶發(fā)起微交互（有時(shí)候還能讓用戶在過程中調(diào)整微交互），而且通常還能從視覺上表明微交互還在持續(xù)（見圖1-14）。如果iPhone沒有鈴聲開啟/關(guān)閉開關(guān)，盡管你想要這個(gè)功能，也不知道去哪里找。在很多老款手機(jī)（甚至今天的很多手機(jī)）中，靜音控件都被層層掩埋在了設(shè)置菜單里。就算用戶知道到哪里去設(shè)置，打開或關(guān)閉鈴聲都需要多達(dá)10秒鐘時(shí)間。而撥動(dòng)物理開關(guān)則只需不到1秒鐘。圖1-14：觸發(fā)器的例子。在iOS（以及WindowsMobile）中，手機(jī)鎖屏?xí)r也可以使用相機(jī)。按一下相機(jī)圖標(biāo)，底部的滑動(dòng)條就會(huì)向上抬起一段距離，表示向上滑動(dòng)可以觸發(fā)相機(jī)。當(dāng)然，滑動(dòng)解鎖也可以當(dāng)然，物理控件不一定非得是開關(guān)。盡管總能評(píng)出最佳設(shè)計(jì)方案，但再好的設(shè)計(jì)也能換種思路重新再設(shè)計(jì)一次。在WindowsPhone中，靜音觸發(fā)器就是一個(gè)可以按下的搖桿按鈕（也用于控制音量）。按下這個(gè)按鈕，屏幕上會(huì)顯示一個(gè)覆蓋層，讓用戶選擇響鈴狀態(tài)是“振動(dòng)”還是“響鈴+振動(dòng)”。而且，觸發(fā)器也不一定由用戶啟動(dòng)。如果設(shè)備或應(yīng)用檢測(cè)到某些條件，同樣可以由系統(tǒng)啟動(dòng)觸發(fā)器，從而開始一次微交互。這種系統(tǒng)啟動(dòng)的觸發(fā)器越來越多。觸發(fā)條件多種多樣，比如收到新郵件、到了預(yù)定時(shí)間，或者股票價(jià)格、用戶位置變動(dòng)，等等。比如手機(jī)靜音，讓手機(jī)與日程關(guān)聯(lián)可以使它在開會(huì)的時(shí)候自動(dòng)靜音?；蛘吲c位置關(guān)聯(lián)，讓它在你進(jìn)入電影院或音樂廳時(shí)自動(dòng)靜音。隨著應(yīng)用和設(shè)備的感應(yīng)范圍越來越廣泛、環(huán)境感知能力越來越強(qiáng)，讓它自己做決定的機(jī)會(huì)就越來越多。第2章將介紹觸發(fā)器。就算不是所有用戶都愿意了解能夠啟動(dòng)觸發(fā)器的各種手機(jī)元件，至少他們?cè)敢饬私膺@些功能的運(yùn)作方式。就像“贊助商X”一樣，他可能就想知道自己的手機(jī)靜音之后到底會(huì)怎么樣。換句話說，用戶需要了解微交互的規(guī)則。微交互被啟動(dòng)之后，就會(huì)引發(fā)一系列行為。換句話說，總會(huì)發(fā)生一些事情（見圖1-15）。通常，這意味著要開始某種功能或者交互，而視覺上只會(huì)看到應(yīng)用或設(shè)備的當(dāng)前狀態(tài)。微交互此時(shí)或許會(huì)根據(jù)數(shù)據(jù)來猜測(cè)用戶想干什么。無論如何，此時(shí)都會(huì)有一條規(guī)則起作用，而這些規(guī)則通常是由設(shè)計(jì)師規(guī)定的。圖1-15：規(guī)則的示例。使用音樂流播放服務(wù)Spotify并在另一個(gè)平臺(tái)打開它，先前打開的Spotify應(yīng)用會(huì)暫停。如果恢復(fù)第一個(gè)實(shí)例的播放狀態(tài)，另一個(gè)平臺(tái)上的實(shí)例就會(huì)暫停。這樣就形成了非常一致的跨平臺(tái)的體驗(yàn)（蒙SebastianHall惠允使用）就拿目前最簡(jiǎn)單的微交互——開燈來說，只要一按下觸發(fā)器（開關(guān)），燈就會(huì)打開。對(duì)簡(jiǎn)單的照明系統(tǒng)而言，此時(shí)只有一條規(guī)則：按下開關(guān)，開燈。如果增加一個(gè)調(diào)光器或運(yùn)動(dòng)檢測(cè)器（在檢測(cè)到?jīng)]有運(yùn)動(dòng)的物體時(shí)關(guān)閉開關(guān)），就可以修改這條規(guī)則。但“按下開關(guān)就可以開燈”這條規(guī)則實(shí)在太簡(jiǎn)單了，簡(jiǎn)單到就連一個(gè)孩子都知道怎么開燈。如果是應(yīng)用程序或者電子數(shù)字設(shè)備，那么就算是很小的微交互，其規(guī)則都要微妙得多，而且也更不容易理解。比如“贊助商X”，他由于不了解自己手機(jī)靜音的規(guī)則而導(dǎo)致了交響樂演出意外終止，如果他能得到反饋就好了（接下來我們會(huì)講反饋），因?yàn)橐?guī)則本身是看不見的。與19世紀(jì)的機(jī)械設(shè)備不同，今天的用戶通常都看不到觸發(fā)器啟動(dòng)之后的過程。（這個(gè)“特性”被黑客無數(shù)次地利用，從而讓受害者在不知情的情況下把病毒安裝到自己的計(jì)算機(jī)上。）第3章將介紹規(guī)則。在使用數(shù)字設(shè)備時(shí)，我們看到和聽到的都很抽象。只有極少數(shù)用戶知道自己在使用軟件和設(shè)備時(shí)到底發(fā)生了什么。比如說，你根本就沒有把“文件”放到過“文件夾”里，而你的“郵箱”里也從來沒有收到過“郵件”。這些詞不過是比喻，都是為了讓用戶理解交互過程才發(fā)明的。你所看到、聽到或感受到的能夠幫助你理解系統(tǒng)規(guī)則的東西，就是反饋，也就是微交互的第三部分。反饋的形式可以多種多樣，比如可以是視覺上的，可以是聽覺上的，也可以是觸覺上的（振動(dòng)）。有時(shí)候，反饋會(huì)很突出也很明顯，比如撥動(dòng)開關(guān)時(shí)亮起的燈光；有時(shí)候，反饋會(huì)很微妙也很難發(fā)現(xiàn)，比如郵件應(yīng)用或移動(dòng)應(yīng)用中的“未讀”圖標(biāo)；有時(shí)候，在使用導(dǎo)航儀做好路線規(guī)劃后，它會(huì)通過語音明確告訴你什么時(shí)候轉(zhuǎn)彎；有時(shí)候，在某種復(fù)雜的情況下，閃爍的LED燈光又容易讓人誤解；有時(shí)候，口袋里的手機(jī)在收到短信時(shí)，會(huì)像放屁一樣“噗”地一響，引來別人異樣的目光；有時(shí)候，數(shù)字屏打開時(shí)的聲音又像是“竊竊私語”。反饋?zhàn)钪匾氖桥c動(dòng)作相配，盡可能以最合適的方式傳達(dá)信息。在關(guān)閉手機(jī)鈴聲的例子中，讓手機(jī)靜音有兩個(gè)反饋：一是開關(guān)在被打開和關(guān)閉時(shí)，屏幕上會(huì)短暫顯示一個(gè)覆蓋層；二是手機(jī)在靜音狀態(tài)下，開關(guān)上會(huì)顯示橙色的細(xì)條。而根本看不見的，同時(shí)也讓“贊助商X”顏面掃地的，則是鈴聲雖然關(guān)閉，但設(shè)定的鬧鈴照樣會(huì)響。屏幕上也沒有任何提示（除了只會(huì)顯示幾秒鐘的覆蓋層之外）說明鈴聲已經(jīng)關(guān)閉。這些都是設(shè)計(jì)權(quán)衡的結(jié)果。觸發(fā)器和反饋更重要的地方在于表達(dá)產(chǎn)品的個(gè)性。實(shí)際上，可以說反饋（連同整個(gè)外觀一起）完全決定了產(chǎn)品的個(gè)性。反饋不局限于圖片、聲音和振動(dòng)，還可以是動(dòng)畫（見圖1-16）。微交互該如何出現(xiàn)又如何消失？物體移動(dòng)時(shí)會(huì)怎么樣：它跑得有多快？物體移動(dòng)的方向有意義嗎？圖1-16：反饋的例子。在Coda2中，“ProcessMyOrder”（提交訂單）按鈕會(huì)在被按下時(shí)變成進(jìn)度條。不過，按鈕文本應(yīng)該依次變成“ProcessingOrder”（正在提交訂單）和“OrderProcessed!”（訂單提交完畢?。蒀hristopheHermann和“LittleBigDetails”惠允使用）反饋也可以有自己的規(guī)則，比如什么時(shí)候出現(xiàn)，如何改變顏色，如何（在用戶旋轉(zhuǎn)手中的平板電腦時(shí)）旋轉(zhuǎn)屏幕。這些規(guī)則本身也可以發(fā)展成微交互，因?yàn)橛脩艨赡芟Ｍ止ぴO(shè)置它們。第4章將介紹反饋。微交互的最后一部分是循環(huán)與模式，它們構(gòu)成了元規(guī)則。微交互隨著時(shí)間推移會(huì)怎么樣：交互狀態(tài)要等到手工關(guān)閉才結(jié)束（就像響鈴/靜音開關(guān)那樣），還是說等一小會(huì)兒就退出交互狀態(tài)？有事件打斷交互時(shí)或者條件變化時(shí)又會(huì)怎么樣？圖1-17展示了一個(gè)例子。有些微交互會(huì)包含不同的模式（盡管通常不太受歡迎）。例如一個(gè)天氣應(yīng)用，其主（默認(rèn)）模式就是顯示天氣，但用戶有可能必須要進(jìn)入另外一個(gè)模式，才能輸入地名查看某地天氣。圖1-17：循環(huán)的例子。在eBay上，如果你曾經(jīng)買過相同的商品，購(gòu)買按鈕就會(huì)由“Buyitnow”（馬上購(gòu)買）變成“Buyanother”（再次購(gòu)買）（蒙JasonSeney和“LittleBigDetails”惠允使用）第5章將討論循環(huán)與模式。1.4微交互的設(shè)計(jì)理念把微交互集成到產(chǎn)品中有三種方式。第一種方式是逐個(gè)設(shè)計(jì)微交互。在設(shè)計(jì)產(chǎn)品的過程中，或者在簡(jiǎn)化既有產(chǎn)品時(shí)，盡量找出所有可能的微交互。列一個(gè)微交互的單子，然后各個(gè)擊破。針對(duì)每個(gè)微交互，按照本書已經(jīng)介紹的結(jié)構(gòu)周密考慮，爭(zhēng)取讓每個(gè)部分都有上佳表現(xiàn)。最終你會(huì)得到一流的微交互，可能還會(huì)創(chuàng)造出標(biāo)志性時(shí)刻（SignatureMoments）。標(biāo)志性時(shí)刻就是那些成為產(chǎn)品差異化標(biāo)志的微交互。一個(gè)自定義的觸發(fā)器控件（比如iPod早期版本中的滾動(dòng)輪）或者一段漂亮的“加載中……”動(dòng)畫或者一種好聽的聲音（“您有新的郵件，請(qǐng)注意查收！”），都可以像功能一樣加以宣傳和營(yíng)銷，而且可以跨平臺(tái)使用，或者在同一品牌下不同的產(chǎn)品中使用。這種標(biāo)志性時(shí)刻有助于提升客戶忠誠(chéng)度和品牌差異化。就像Facebook的“Like”按鈕，已經(jīng)成為其品牌不可分割的一部分。各個(gè)擊破方式的挑戰(zhàn)在于如何限定每個(gè)微交互的范圍。有一種將微交互轉(zhuǎn)換成功能的趨勢(shì)，畢竟大多數(shù)設(shè)計(jì)師對(duì)設(shè)計(jì)功能都很熟悉。我們都恨不得抓住一些大問題，把一切都解決掉。微交互就是在限定條件下做設(shè)計(jì)的實(shí)踐，而且要盡可能做小。應(yīng)該明確各種約束條件，專注于把一件事件做好。極簡(jiǎn)主義建筑大師密斯·凡德羅（MiesvanderRohe）的名言“少即是多”，也應(yīng)該成為微交互設(shè)計(jì)師的座右銘。第二種看待微交互的方式，是把復(fù)雜的應(yīng)用程序簡(jiǎn)化為個(gè)別的產(chǎn)品，每個(gè)產(chǎn)品構(gòu)建于一個(gè)微交互之上。這是一種把微交互作為產(chǎn)品的策略，即讓產(chǎn)品專注于一件事，而且把這件事做好。把產(chǎn)品簡(jiǎn)化到極至，盡顯佛性（Buddhanature）。如果你覺得需要給產(chǎn)品增加另一個(gè)功能，那另一個(gè)功能本身就該做成一個(gè)產(chǎn)品。很多家電、應(yīng)用和設(shè)備，包括早期的iPod，都遵循這個(gè)理念。這也是很多創(chuàng)業(yè)公司（至少是創(chuàng)業(yè)之初）的理念，比如Instagram和Nest：他們都堅(jiān)持把一件事做好。這種“最小化的可行產(chǎn)品”可能就是一種微交互。這種方式可以保證和驅(qū)使你從根本上簡(jiǎn)化產(chǎn)品，讓你能夠?qū)θ魏卧黾庸δ艿穆曇粽f不。當(dāng)然，堅(jiān)守這種理念不容易，特別是在那些喜歡滿足用戶一切需求的公司里，就更難了。想象一下：你該怎么把MicrosoftWord簡(jiǎn)化成一個(gè)個(gè)單獨(dú)的產(chǎn)品？實(shí)際上，很多競(jìng)爭(zhēng)性產(chǎn)品正在這么做。比如，WriteApp只負(fù)責(zé)寫，剔除了文字處理程序的大多數(shù)功能，最后只專注于寫，只為寫作者服務(wù)。Evernote最初也源自一個(gè)簡(jiǎn)單的微交互：跨平臺(tái)記事。還有第三種看待微交互的方式，那就是把最復(fù)雜的數(shù)字產(chǎn)品掰開揉碎，發(fā)現(xiàn)它由幾十甚至幾百個(gè)微交互構(gòu)成?？梢园旬a(chǎn)品當(dāng)成所有這些微交互和諧共處的結(jié)果。這也是CharlesEames說細(xì)節(jié)是設(shè)計(jì)的真正含義。一切都是細(xì)節(jié)，一切都是微交互。微交互就是取悅于人的機(jī)會(huì)，微交互就是給用戶驚喜的機(jī)會(huì)。正如德國(guó)著名工業(yè)設(shè)計(jì)師迪特·拉姆斯（DieterRams）所說：在我內(nèi)心深處，永遠(yuǎn)有一塊地方為細(xì)節(jié)而保留。我認(rèn)為細(xì)節(jié)比藍(lán)圖更重要。沒有細(xì)節(jié)，一切皆空談。細(xì)節(jié)是本質(zhì)，是評(píng)價(jià)質(zhì)量的標(biāo)準(zhǔn)。注6注6：出自DieterRams與RidoBusse的對(duì)話（1980），Design:DieterRams（1981）中也有記載。簡(jiǎn)言之，把每個(gè)功能性的細(xì)節(jié)都看成一個(gè)微交互，把整個(gè)產(chǎn)品看成一整套微交互的集合。這種方式下的產(chǎn)品設(shè)計(jì)之美，在于它反映了很多公司都大力倡導(dǎo)的小型化、敏捷式的工作方法（見圖1-18）。當(dāng)然，缺點(diǎn)就是可能會(huì)迷失在微交互中，只見樹木而不見森林，最終導(dǎo)致所有細(xì)節(jié)不能構(gòu)成一個(gè)整體。這種工作方式需要更多時(shí)間和努力。圖1-18：無論是以標(biāo)準(zhǔn)模式（“Plain”）還是衛(wèi)星模式（“Satellite”）查看谷歌地圖，用于切換視圖的部件都會(huì)顯示相應(yīng)區(qū)域的地圖，而且顯示的是當(dāng)前視圖背后的另一個(gè)視圖的預(yù)覽（蒙HugoBouquard和“LittleBigDetails”惠允使用）對(duì)于那些以快速完工而著稱的公司來說，這條路并不容易走通。說實(shí)話，這種方式對(duì)任何設(shè)計(jì)師也同樣都是挑戰(zhàn)，因?yàn)榭蛻艉透上等藭?huì)更關(guān)注全局，而不是那些能夠增強(qiáng)功能或改進(jìn)全局體驗(yàn)的小細(xì)節(jié)。沒錯(cuò)，很難有足夠的時(shí)間讓你專注于微交互。要說服業(yè)務(wù)和開發(fā)團(tuán)隊(duì)，讓他們認(rèn)可在微交互設(shè)計(jì)上多花時(shí)間可不容易。對(duì)設(shè)計(jì)和開發(fā)而言，這就意味著延長(zhǎng)工期。但這時(shí)間確實(shí)值得花?！百澲蘕”那令人尷尬的故事提醒我們微交互很重要，而設(shè)計(jì)師的任務(wù)就是把它們?cè)O(shè)計(jì)好，否則就會(huì)給用戶帶來挫折和困難。LarryTesler在想明白可以更好地在文檔內(nèi)移動(dòng)文本時(shí)也知道了這一點(diǎn)，因此剪切和粘貼才得以誕生。微交互可以讓世界變得更好，每次只改變一點(diǎn)點(diǎn)。所有改變都始于觸發(fā)器。1.5小結(jié)微交互就是產(chǎn)品那些功能性的細(xì)節(jié)。專注于微交互是創(chuàng)建優(yōu)秀用戶體驗(yàn)的必由之路。說起微交互的歷史，可以追溯到第一臺(tái)電子設(shè)備。當(dāng)前數(shù)字產(chǎn)品很多約定俗成的交互標(biāo)準(zhǔn)，都曾是微交互領(lǐng)域革命的戰(zhàn)果。一個(gè)微交互由四個(gè)部分構(gòu)成：觸發(fā)器啟動(dòng)微交互、規(guī)則規(guī)定微交互如何起作用、反饋傳達(dá)規(guī)則信息，而循環(huán)和模式構(gòu)成微交互的元規(guī)則。有三種看待微交互的方式：找到它們并各個(gè)擊破、把復(fù)雜的功能簡(jiǎn)化為基本的微交互，以及把每個(gè)功能當(dāng)作一組相互聯(lián)系的微交互。第2章觸發(fā)器20世紀(jì)90年代，紐約市公共運(yùn)輸局開始在公交車和地鐵中推行MetroCard（交通卡），取代自1904年實(shí)行的代幣付費(fèi)制度。當(dāng)時(shí)紐約市公交地鐵系統(tǒng)每日運(yùn)送乘客700萬人次，而MetroCard就是一張薄薄的像名片一樣的塑料卡片。主管部門認(rèn)為，分布在5個(gè)區(qū)的幾百臺(tái)自動(dòng)售貨機(jī)可以滿足乘客購(gòu)買和充值的需要。但這件事沒有想象的那么順利。紐約市常住人口超過800萬，還有數(shù)千萬人居住在三州交界區(qū)。根據(jù)紐約市城市規(guī)劃局的報(bào)告，2000年紐約常住人口中有36%是國(guó)外出生的。由于不說英語的人很多，2002年的小語種雜志和報(bào)紙就有40種注1。此外，還有幾萬人有視力障礙、行動(dòng)不便，識(shí)字很少或根本不識(shí)字，當(dāng)然其中有些人兼具幾種特征。據(jù)官方報(bào)告，紐約市每年有3500多萬名游客（某些年份達(dá)到過5000萬），其中相當(dāng)一部分人會(huì)選擇地鐵出行，而這些人里只有少數(shù)熟悉地鐵線路，或者知道怎么購(gòu)買MetroCard。事實(shí)上，紐約大都會(huì)運(yùn)輸署（MTA，MetropolitanTransitAuthority）曾經(jīng)針對(duì)MetroCard售賣機(jī)做過調(diào)研，用戶認(rèn)為其外形難看，而且操作界面也不好理解。注1：參見2002年7月10日Editor&Publisher的文章“EthnicPressBoomsInNewYorkCity”。設(shè)計(jì)師MasamichiUdagawa、SigiMoeslinger，還有他們?cè)贏ntenna設(shè)計(jì)公司的團(tuán)隊(duì)接受了這一挑戰(zhàn)，擔(dān)負(fù)起設(shè)計(jì)MetroCard售卡機(jī)的任務(wù)。正如Moeslinger后來提到的注2，她們必須排除用戶有使用觸摸屏自動(dòng)終端的經(jīng)驗(yàn)。那是90年代中期，服務(wù)業(yè)之外的人很少有機(jī)會(huì)使用觸摸屏（當(dāng)時(shí)的觸摸屏一般在酒吧或快餐店柜臺(tái)），只有一個(gè)例外：ATM機(jī)，也就是銀行的自動(dòng)取款機(jī)。設(shè)計(jì)師假設(shè)用戶至少都應(yīng)該用過ATM機(jī)，但后來才知道也不是那么回事。當(dāng)時(shí)，紐約公交系統(tǒng)的乘客中有50%的人根本沒有銀行賬號(hào)，自然就沒有ATM卡。這些人很可能怎么也不會(huì)適應(yīng)MetroCard售卡機(jī)?！坝|摸屏對(duì)這些人來說是不可想象的?！盡oeslinger說。僅僅是讓這幾百萬人了解和使用這種新機(jī)器就是一個(gè)難題。注2：完整的內(nèi)容請(qǐng)見她2008年在Interaction08上的演講“Intervention-Interaction”。Antenna決定讓這種機(jī)器的每個(gè)屏幕只做一件事?！八M對(duì)話框，每個(gè)屏幕只問一個(gè)問題?！盡oeslinger說。（換句話說，她們把每個(gè)屏幕都當(dāng)成了一個(gè)微交互。）紐約大都會(huì)運(yùn)輸署認(rèn)為這樣做有問題，因?yàn)闀?huì)導(dǎo)致每次交易時(shí)間太長(zhǎng)。數(shù)百萬人使用這種機(jī)器，每個(gè)人多耽擱幾秒鐘就會(huì)導(dǎo)致運(yùn)輸公司和乘客們抱怨。但不這樣做恰恰更會(huì)導(dǎo)致這個(gè)問題?！芭c交易過程中顯示屏幕的數(shù)量相比，能否讓乘客快速地理解屏幕信息對(duì)交易速度的影響更大?！盇ntenna研究了兩種交互模型。一種是先放錢，再選擇做什么（類似自動(dòng)售貨機(jī)）；另一種是先選擇做什么，然后再放錢。用戶更偏向第二種，而真正的問題在于怎么讓用戶上手使用這種新機(jī)器。她們的方式是把整塊觸摸屏做成一個(gè)巨大的觸發(fā)器（見圖2-1）。第1章提到過，觸發(fā)器指的就是啟動(dòng)微交互的物理或數(shù)字控件。在這個(gè)例子中，整個(gè)空閑屏幕（每次交易完成后或者機(jī)器空閑時(shí)顯示的屏幕）變成了一個(gè)巨大的行動(dòng)召喚（calltoaction）：按一下開始。如圖2-1所示，Antenna去掉了屏幕上一切花里胡哨的東西，只專注于吸引用戶看到觸發(fā)器。單詞“start”出現(xiàn)三次，而“touch”出現(xiàn)兩次。手指動(dòng)畫也指向“Start”按鈕。但實(shí)際上，整個(gè)屏幕都是觸發(fā)器。不管你按哪里，都可以馬上開始使用機(jī)器?！癝tart”按鈕只是一個(gè)視覺提示，或者一個(gè)人造的功能點(diǎn)（affordance），為的只是讓人知道“按”屏幕可以啟動(dòng)（實(shí)際上只需要輕輕碰一下）。雖然表面上看只有按鈕是觸發(fā)器，但實(shí)際上整個(gè)屏幕都布滿了觸發(fā)器。這個(gè)為應(yīng)對(duì)巨大挑戰(zhàn)而提出的解決方案非常經(jīng)典，一直沿用十多年。圖2-1：MetroCard售卡機(jī)的空閑屏幕。Antenna設(shè)計(jì)公司有意強(qiáng)調(diào)屏幕上的觸發(fā)器，但跟表面上看起來不一樣的是，并非只有右上角的按鈕才是觸發(fā)器，實(shí)際上整個(gè)屏幕都是（蒙AntennaDesign惠允使用）MetroCard售卡機(jī)引入了第一條關(guān)于觸發(fā)器的規(guī)則：觸發(fā)器必須讓用戶在使用情境下認(rèn)出來其是觸發(fā)器。觸發(fā)器可以是物理的控件，也可以是像MetroCard售卡機(jī)上的假“Start”按鈕一樣的按鈕圖像，或者是任務(wù)欄、菜單欄中的一個(gè)圖標(biāo)。要把它設(shè)計(jì)得讓人一看就知道能通過它做什么，而且要吸引人。雖然大多數(shù)微交互都沒有必要弄一個(gè)發(fā)光的手指指向開始按鈕，但在其使用情境下，這種觸發(fā)器是有用的，而且非常有效。2.1手動(dòng)觸發(fā)器微交互從哪里開始呢？通常都是從用戶打開設(shè)備或啟動(dòng)應(yīng)用時(shí)最先碰到的東西開始。最早的觸發(fā)器是有開和關(guān)兩個(gè)狀態(tài)的開關(guān)（以及功能等價(jià)的數(shù)字化界面控件）。開關(guān)和MetroCard售卡機(jī)的“Start”屏幕一樣，都是手動(dòng)觸發(fā)器。（稍后我們介紹由系統(tǒng)發(fā)起的自動(dòng)觸發(fā)器。）手動(dòng)觸發(fā)器通常源自用戶的期待或需求：“我想打開電視。”“我想關(guān)掉手機(jī)鈴聲?！薄拔业冒堰@一段文字從一個(gè)地方移動(dòng)到另一個(gè)地方?！薄拔蚁胭I一張MetroCard?！睆目傮w來看，理解用戶想要（或需要）做什么、什么時(shí)候想做，以及在什么情境下想做是非常重要的。這些問題決定了手動(dòng)觸發(fā)器在什么時(shí)候、什么地方出現(xiàn)。或許任何情況下都必須可用，比如開關(guān)按鈕；或許跟使用情境緊密相關(guān)，只有各種條件具備的時(shí)候，比如進(jìn)入特定的模式或者進(jìn)入應(yīng)用的特殊功能區(qū)域時(shí)才出現(xiàn)。MicrosoftOffice的“迷你格式化工具條”只在你選中文本時(shí)才會(huì)出現(xiàn)。理解用戶需求的方式有很多，借助設(shè)計(jì)研究（觀察、訪問、演習(xí)）或憑借對(duì)相關(guān)領(lǐng)域的直覺和理解去體察是常見的方式，而等到產(chǎn)品測(cè)試、產(chǎn)品發(fā)布或上市時(shí)再認(rèn)識(shí)到用戶需求就為時(shí)已晚。所以，讓觸發(fā)器的位置跟用戶需求（何時(shí)、何地）相吻合是非常關(guān)鍵的。（參見2.1.2節(jié)的“手動(dòng)觸發(fā)器要引人注目”。）觸發(fā)器的第二條規(guī)則：保證觸發(fā)器每次都觸發(fā)相同的動(dòng)作。這還用得著說嗎？有讀者可能會(huì)感到不可思議。事實(shí)上，唯有如此才能保證用戶對(duì)微交互形成準(zhǔn)確的心智模型。而且，現(xiàn)實(shí)當(dāng)中違反這一條的現(xiàn)象不勝枚舉。技術(shù)評(píng)論家DavidPogue曾這樣評(píng)論過Samsung的筆記應(yīng)用SNote：SNote中的某些圖標(biāo)不同的時(shí)候按會(huì)顯示不同的菜單。我可不是瞎說的注1。注1：參見2012年8月15日《紐約時(shí)報(bào)》的報(bào)道“ATabletStrainingtoDoItAll”（\hhttp://nyti.ms/17Szx8y）。還有一個(gè)例子就是iPhone和iPad的主屏幕按鈕，按這個(gè)按鈕會(huì)返回主屏幕；如果本來就在主屏幕上，那么就會(huì)轉(zhuǎn)到搜索屏幕。（暫且不說按兩次或按住不放又會(huì)執(zhí)行什么動(dòng)作。參見5.1節(jié)中“彈簧模式與一次性模式”。）雖然在一個(gè)按鈕上綁定多個(gè)功能是為了重用有限的硬件，但在主屏幕狀態(tài)下按一次就跑到搜索屏幕恐怕也太離譜了，這時(shí)候應(yīng)該什么也不做才對(duì)（或者給出“嘿，您已經(jīng)在主屏幕了！”之類的提示）。說起效果最差的可見觸發(fā)器，恐怕要數(shù)下拉菜單中的菜單項(xiàng)了。菜單項(xiàng)因?yàn)樵诓藛卫?，所以?shí)際上是不可見的。它們對(duì)應(yīng)的微交互一般都不常用，而把它們隱藏在菜單里會(huì)給用戶查找?guī)硪恍┎槐?。?dāng)然，把一個(gè)不常用的微交互的觸發(fā)器直接放到屏幕上似乎也不太好。“設(shè)置”就是一個(gè)典型的例子，用戶不會(huì)每天都用到它，但它對(duì)某些應(yīng)用又非常重要（比如圖2-2中的桌面就是通過“設(shè)置”決定的）。因此，設(shè)計(jì)這樣一個(gè)觸發(fā)器，特別是權(quán)衡其可見性從來都是個(gè)設(shè)計(jì)難題。圖2-2：在Gnome桌面上，文件圖標(biāo)不是靜態(tài)的，而是會(huì)顯示內(nèi)容的前三行（蒙DrazenPeric和“LittleBigDetails”惠允使用）2.1.1提前展示數(shù)據(jù)手動(dòng)觸發(fā)器的第三個(gè)規(guī)則是提前展示數(shù)據(jù)。觸發(fā)器本身可以反映微交互中包含的數(shù)據(jù)。問問自己，在微交互開始之前或者啟動(dòng)過程中，有什么內(nèi)部狀態(tài)可以展示？什么信息最有價(jià)值，可以在這時(shí)候展示出來？要回答這個(gè)問題，必須知道大多數(shù)用戶使用微交互干什么，而且必須在微交互開始之前就要掌握那個(gè)關(guān)鍵的信息。比如股市應(yīng)用，它可以通過顏色或箭頭表示當(dāng)前市場(chǎng)或股票的狀態(tài)，提醒用戶是否有必要啟動(dòng)微交互。此時(shí)的觸發(fā)器本身就是一個(gè)背景信息，用戶掃視時(shí)注意到它就可能啟動(dòng)微交互。觸發(fā)器也可以表示產(chǎn)品中任務(wù)的進(jìn)度（見圖2-3）。比如啟動(dòng)烤面包機(jī)的按鈕時(shí)，它應(yīng)該告訴用戶烤好面包需要多長(zhǎng)時(shí)間。圖2-3：谷歌的Chrome瀏覽器圖標(biāo)（啟動(dòng)瀏覽器的觸發(fā)器）也會(huì)顯示當(dāng)前的下載任務(wù)和下載進(jìn)度2.1.2觸發(fā)器的構(gòu)成手動(dòng)觸發(fā)器包含三個(gè)部分：控件、控件狀態(tài)、文本或圖示標(biāo)簽。1.控件手動(dòng)觸發(fā)器至少要有一個(gè)控件（見圖2-4）。至于選擇什么樣的控件，取決于你想給出多少個(gè)控件。對(duì)于一個(gè)動(dòng)作（例如“快進(jìn)”），一個(gè)按鈕或簡(jiǎn)單手勢(shì)足矣。這里的“按鈕”可以是圖標(biāo)或菜單項(xiàng)，而手勢(shì)可以是輕擊、滑動(dòng)或搖動(dòng)。當(dāng)然，按鈕同樣也可以是（或者搭配）一個(gè)鍵盤命令或一個(gè)手勢(shì)。對(duì)于有兩個(gè)狀態(tài)（例如“開”或“關(guān)”）的動(dòng)作，一個(gè)撥動(dòng)開關(guān)足矣。撥動(dòng)按鈕當(dāng)然也可以，但問題是按鈕很難表現(xiàn)狀態(tài)，因此不能讓人一目了然，甚至用戶不會(huì)想到按鈕還有另一種狀態(tài)。第三種（或許也是最差的）可能是使用常規(guī)按鈕，按一下改變狀態(tài)。如果你想使用這種方法，那應(yīng)該保證按鈕狀態(tài)絕對(duì)清楚。燈本身就有清楚的開關(guān)狀態(tài)，因此常規(guī)（非撥動(dòng)）按鈕可以用于控制燈的打開和關(guān)閉。對(duì)于有多個(gè)狀態(tài)的動(dòng)作，可以使用撥號(hào)盤。除了有一個(gè)止動(dòng)裝置，撥號(hào)盤還有一個(gè)推/拉狀態(tài)。另外，也可以使用一組按鈕，每個(gè)按鈕代表一個(gè)選項(xiàng)。對(duì)于在一定范圍內(nèi)連續(xù)進(jìn)行的動(dòng)作（例如調(diào)整音量），滑動(dòng)條或撥號(hào)盤（特別是能夠快速旋轉(zhuǎn)的JogDial轉(zhuǎn)點(diǎn)通滾輪）是最佳選擇。另外，特別是在沒有一定范圍的情況下，可以使用兩個(gè)按鈕來改變值的大小或高低。有些手動(dòng)觸發(fā)器由多個(gè)控件或表單字段（單選按鈕、復(fù)選框、文本輸入字段）之類的元素組織。比如，登錄這種微交互就需要文本輸入字段來填寫用戶名和密碼。多個(gè)控件組成的觸發(fā)器要盡量少用，如果要用，最好也要能自動(dòng)填充之前輸入過的值或者智能的默認(rèn)值。圖2-4：控件的組成部分除了按鈕、開關(guān)、撥號(hào)盤等傳統(tǒng)控件之外，還可以有自定義的控件，比如最早（非觸摸）iPod上的滾輪。自定義控件可以讓微交互顯得別具一格，甚至可以使微交互成為標(biāo)志性時(shí)刻。自定義控件也可以是手勢(shì)或觸摸方式（參見本節(jié)后面“不可見的觸發(fā)器”）。微交互的目標(biāo)是使選項(xiàng)最少，而不是提供智能默認(rèn)值和非常有限的選項(xiàng)。選作觸發(fā)器的控件應(yīng)該體現(xiàn)這一理念?？丶c視覺使用情境（visualaffordance），即用戶期待能看到什么，緊密相關(guān)。觸發(fā)器的第四條規(guī)則就是不要破壞視覺使用情境。換句話說，如果觸發(fā)器看起來像按鈕，那它就應(yīng)該像按鈕一樣能被按下去。手動(dòng)觸發(fā)器要引人注目。關(guān)于觸發(fā)器的最重要問題是：觸發(fā)器要有多引人注目？觸發(fā)器的第五條規(guī)則是用得越多的觸發(fā)器越要引人注目。暢銷書作者ScottBerkun對(duì)引人注目這一點(diǎn)有過精彩的評(píng)述，以下是我移植到微交互的版本：多數(shù)人經(jīng)常要用的微交互，應(yīng)該最引人注目。少數(shù)人有時(shí)會(huì)用的微交互，應(yīng)該容易注意到。極少數(shù)人不常用的微交互，應(yīng)該通過搜索找。注1注1：改編自ScottBerkun的文章“TheMythofDiscoverability”（\h/zHrpa0k）。這是判斷觸發(fā)器需要多引人注目的黃金規(guī)則。可是，我們到底怎么發(fā)現(xiàn)事物呢？人類注意周圍環(huán)境中事物的情況分兩種。第一種，周圍的事物如果正在移動(dòng)或發(fā)出了聲響，會(huì)讓人不自覺地注意它們。這種對(duì)于刺激的反應(yīng)是我們祖先生存的本能，正因?yàn)橛羞@個(gè)本能，他們才會(huì)注意到周圍的犀牛和其他危險(xiǎn)動(dòng)物。設(shè)計(jì)師可以利用這一點(diǎn)，通過移動(dòng)和聲響來吸引人注意觸發(fā)器。但這樣做有時(shí)會(huì)令人討厭，特別是在桌面或網(wǎng)頁(yè)中。由于人類對(duì)移動(dòng)和聲響會(huì)不自覺地關(guān)注，因此較高優(yōu)先級(jí)的微交互的觸發(fā)器才可以使用這種方式。而能夠不斷這樣做的，只有那些最高優(yōu)先級(jí)的微交互，比如出錯(cuò)和警告。人類關(guān)注事物的第二種情況是主動(dòng)搜尋，即有目的地尋找。我們會(huì)盯住某些東西或區(qū)域，希望從中找到滿足自己需要的內(nèi)容。只要視力沒有問題，這種發(fā)現(xiàn)事物的方式是最直觀的。我們會(huì)運(yùn)用身體、大腦，或者只用眼睛去尋找自己想要的東西。要注意的是，人類對(duì)聽覺的反應(yīng)要快過對(duì)視覺的反應(yīng)。聽覺刺激只需8~10毫秒即可傳達(dá)到大腦，而視覺刺激則需要20~40毫秒。注2人類對(duì)聽覺的反應(yīng)需要140~160毫秒，而對(duì)視覺的反應(yīng)需要180~200毫秒，同樣是前者更快。注3人眼的視角是水平180度，垂直100度，而聽覺則是360度的。我們的祖先看不到來自身后的捕食者，但卻可以聽到。（某些爬行動(dòng)物和鳥類的視角則也是360度。）雖然理論上可以使用某種聲音來幫助用戶定位觸發(fā)器，但在實(shí)踐中則很難實(shí)行。注2：Marshall,W.H.、S.A.Talbot和H.W.Ades.“Corticalresponseoftheanaesthesizedcattogrossphoticandelectricalafferentstimulation.”JournalofNeurophysiology6:1–15.(1943)。注3：Welford,A.T.“Choicereactiontime:Basicconcepts.”（選擇反應(yīng)時(shí)間：基本概念）A.T.Welford(Ed.),ReactionTimes.AcademicPress,NewYork,pp.73–128.(1980)。我們?cè)趯ふ覗|西時(shí)，視野會(huì)變窄，甚至達(dá)到1度注4或者只有平常視野的1%。這么窄的視野堪比聚光燈注5和放大鏡注6。此時(shí)，我們專注于辨別物體，即對(duì)環(huán)境中的事物進(jìn)行識(shí)別和歸類。注4：Eriksen,C;Hoffman,J.“Temporalandspatialcharacteristicsofselectiveencodingfromvisualdisplays”（視覺顯示選擇性編碼的時(shí)空特征）Perception&Psychophysics12(2B):201–204.(1972)。注5：同上。注6：Eriksen,C;StJames,J.“Visualattentionwithinandaroundthefieldoffocalattention:Azoomlensmodel”（注意領(lǐng)域之內(nèi)及周圍的視覺集中：變焦鏡頭模型）Perception&Psychophysics40(4):225–240.(1986)。我們?cè)诒鎰e物體時(shí)，眼睛會(huì)尋找熟悉的小幾何體（geon）形狀。所謂小幾何體，就是正方形、三角形、立方體、圓柱體等簡(jiǎn)單的幾何形狀，我們的大腦把它們組合起來就能辨別出物體。注7注7：小幾何體最早見于“Recognition-by-components:Atheoryofhumanimageunderstanding”，作者IrvingBiederman，刊載于PsychologicalReview94(2):115–47.(1987)。既然人眼以小幾何體為基本識(shí)別單位，那么一些圖標(biāo)形觸發(fā)器就特別適合設(shè)計(jì)成某種幾何形狀。一般來說，只具備一種特征的目標(biāo)比具備多種特征的目標(biāo)更容易被找到。注8因此，要盡量保證觸發(fā)器看起來簡(jiǎn)單，尤其是在復(fù)雜擁擠的環(huán)境下（比如混在一大堆圖標(biāo)中間）。注8：Treisman,A.“Featuresandobjectsinvisualprocessing”（視覺處理中的特性與對(duì)象）《科學(xué)美國(guó)人》,255,114B–125.(1986).辨別出某個(gè)物體之后（“那是個(gè)按鈕”），我們一般會(huì)將其與對(duì)應(yīng)的使用情境關(guān)聯(lián)（“按鈕可以按”），除非還有其他視覺提示表明使用情境不適用，比如變灰或上面放個(gè)大紅叉（X）。手動(dòng)觸發(fā)器的第六條規(guī)則就是不要引起用戶對(duì)使用情境的錯(cuò)覺。如果有一個(gè)圖標(biāo)看起來像按鈕，那么它就應(yīng)該表現(xiàn)得像按鈕一樣。微交互的目標(biāo)就是把識(shí)別成本降到最低，千萬別讓用戶猜你的觸發(fā)器怎么工作。因此要盡量使用標(biāo)準(zhǔn)的控件。正如CharlesEames所說：“創(chuàng)新是沒有辦法的辦法?！弊钜俗⒛康挠|發(fā)器依次是：移動(dòng)的物體，比如脈動(dòng)圖標(biāo)；帶使用情境和標(biāo)簽的物體，比如帶標(biāo)簽的按鈕；帶標(biāo)簽的物體，比如帶標(biāo)簽的圖標(biāo)；只有一個(gè)物體，比如圖標(biāo)；只有一個(gè)標(biāo)簽，比如菜單項(xiàng)；什么也沒有——不可見的觸發(fā)器。不可見的觸發(fā)器。手動(dòng)觸發(fā)器也可以是不可見的。換句話說，就是沒有標(biāo)簽，也沒有使用情境讓用戶知道怎么去觸發(fā)相應(yīng)的微交互。不可見的觸發(fā)器通常都離不開傳感器，比如觸摸屏、攝像頭、麥克風(fēng)、加速計(jì)等（見圖2-5）。此外，不可見的觸發(fā)器也可以只是一個(gè)命令鍵（見圖2-6）或鼠標(biāo)移動(dòng)（比如，移動(dòng)到屏幕一角）。圖2-5：在iPhone手機(jī)的Tumblr應(yīng)用中，手指向左掃過（而不是按下）按鈕，可以創(chuàng)建一篇新博客；向上掃過按鈕則可以創(chuàng)建一篇新圖片博客（蒙Robinvan'tSlot和“LittleBigDetails”惠允使用）圖2-6：在Alfred的設(shè)置中，如果禁用可見的觸發(fā)器，則不可見的觸發(fā)器也會(huì)被選中（蒙HansPetterEikemo和“LittleBigDetails”惠允使用）當(dāng)前的觸摸屏用戶界面隱藏著最多的不可見控件。沒有可見的使用情境表明各種多點(diǎn)觸摸手勢(shì)的存在，而輕擊和滑動(dòng)之外的自定義手勢(shì)則往往要通過試錯(cuò)來發(fā)現(xiàn)（見圖2-7）。圖2-7：在iOS系統(tǒng)的GoogleMaps中，搖晃就是一個(gè)發(fā)表反饋的不可見觸發(fā)器（蒙“LittleBigDetails”惠允使用）語音輸入也是不可見控件的例子，有三種語音輸入。始終監(jiān)聽產(chǎn)品的麥克風(fēng)始終開啟，用戶只要對(duì)著它說出指令即可（通常要提到產(chǎn)品的名字）。微軟KinectforXbox就屬于這種情況，其“Xbox,play!”就是始終監(jiān)聽控件的典型例子。對(duì)話產(chǎn)品的麥克風(fēng)只在特定的時(shí)候開啟，以監(jiān)聽對(duì)某個(gè)提示的響應(yīng)。（“要繼續(xù)使用英語，請(qǐng)說‘yes’?！保┳詣?dòng)化程度最高的客服電話就屬于這種情況。與控件配合為發(fā)出語音指令，必須有某個(gè)物理控件配合。蘋果的Siri大致就是這樣：用戶必須按住主屏幕按鈕才能發(fā)出語音指令。另外，擺手或者搖晃等觸發(fā)器通常也是不可見的。比如語音控件，有時(shí)要使用手勢(shì)必須先有一個(gè)初始動(dòng)作（比如擺手）或通過某個(gè)物理控件讓設(shè)備就緒。配戴谷歌眼鏡時(shí)，向上昂頭或觸摸一下鏡架即可開啟屏幕。觸摸或接近設(shè)備也可以作為不可見觸發(fā)器，比如把手伸到水龍頭下就會(huì)自動(dòng)出水。類似地，遠(yuǎn)離物體也可以是觸發(fā)器，比如馬桶在人走之后會(huì)自動(dòng)沖水。為什么還會(huì)有不可見觸發(fā)器呢？事實(shí)上，無論什么交互界面都不可能保證所有東西能夠被立即發(fā)現(xiàn)。讓一切可見經(jīng)常會(huì)導(dǎo)致屏幕上雜亂無章，沒有頭緒。隱藏一些東西可以讓屏幕或物體看起來更簡(jiǎn)單，同時(shí)還不會(huì)舍棄功能（見圖2-8）。不可見控件能夠起到強(qiáng)調(diào)可見控件的作用，讓重要和不重要控件得以區(qū)別。不過要知道，不可見并非微交互（以及任何交互）設(shè)計(jì)過程中直接追求的目標(biāo)，而是上下文和技術(shù)的副產(chǎn)品：在這種情境下，最好把什么隱藏起來？或者基于技術(shù)條件限制，如果不把什么隱藏起來，可見控件就沒有地方顯示？最好的微交互應(yīng)該具有恰到好處的界面，而不是控件越多越好。圖2-8：Akismet有一個(gè)合適的不可見觸發(fā)器。在用戶右擊其標(biāo)志圖片時(shí)（有可能是想要保存這張圖片），Akismet就會(huì)顯示一個(gè)窗口，提供幾種不同分辨率的圖片供下載（蒙FabianBeiner惠允使用）不可見觸發(fā)器應(yīng)該能夠習(xí)得。發(fā)現(xiàn)微交互之后（不管是意外發(fā)現(xiàn)、聽別人說，還是查幫助學(xué)會(huì)的），用戶經(jīng)常只能依賴于自己（有問題）的記憶再次將其啟動(dòng)。能夠習(xí)得意味著不可見觸發(fā)器應(yīng)該隨處可用，或者退而求其次，必須在特定條件下是可用的（見圖2-9）。不可見觸發(fā)器應(yīng)該容易猜到，或者說，在理想情況下可以讓用戶在執(zhí)行其他動(dòng)作時(shí)偶然發(fā)現(xiàn)。比如，向上滾動(dòng)到列表頂部，顯示“重新加載”微交互。圖2-9：KanaSwirl的設(shè)置中支持禁用不可見的觸發(fā)器（ShaketoPause，搖晃暫停）（蒙ShawnM.Moore和“LittleBigDetails”惠允使用）除非真沒有地方或屏幕空間放置可見控件（比如谷歌眼鏡），否則絕不要把不可見觸發(fā)器用于最高優(yōu)先級(jí)的微交互。無論如何，至少都要為微交互創(chuàng)建一個(gè)可見的觸發(fā)器，比如命令鍵或菜單項(xiàng)。2.控件狀態(tài)有些手動(dòng)觸發(fā)器有多個(gè)狀態(tài)。作為用戶，不一定能全都碰上這些狀態(tài)，但作為設(shè)計(jì)師，則應(yīng)該全部考慮到。默認(rèn)狀態(tài)不活動(dòng)的空閑狀態(tài)?；顒?dòng)狀態(tài)如果后臺(tái)有活動(dòng)（比如下載、更新或同步），可以通過觸發(fā)器來表示。懸停狀態(tài)可以給出一個(gè)提示條式的說明、擴(kuò)展觸發(fā)器的大小以展示更多控件或表單字段，或者就簡(jiǎn)單地顯示為當(dāng)前控件是可以點(diǎn)擊的。更進(jìn)一步，還可以通過懸停展示微交互中的數(shù)據(jù)（見圖2-10）。比如，懸停在天氣預(yù)報(bào)應(yīng)用的圖標(biāo)上時(shí)，不用啟動(dòng)應(yīng)用就可以提前展示數(shù)據(jù)，顯示當(dāng)前的天氣。圖2-10：在Rdio播放器上，懸停在快進(jìn)和快退按鈕上會(huì)顯示下一首和上一首歌曲（蒙NicholasKreidberg和“LittleBigDetails”惠允使用）翻轉(zhuǎn)狀態(tài)

經(jīng)常用于表示存在或活動(dòng)，或者只添加一個(gè)指示器，表明光標(biāo)位置正確，可以繼續(xù)操作（見圖2-11）。圖2-11：未登錄時(shí)點(diǎn)擊評(píng)論輸入框，YouTube會(huì)提示登錄或注冊(cè)（蒙MarianBuhnici和“LittleBigDetails”惠允使用）鼠標(biāo)單擊/手指輕擊/進(jìn)行中

鼠標(biāo)單擊、手指輕擊觸發(fā)器，或者觸發(fā)器正在啟動(dòng)微交互。此時(shí)，可以讓觸發(fā)器消失、打開、改變顏色，或者變成表示微交互加載過程的進(jìn)度條（見圖2-12到圖2-14）。另一種可能是觸發(fā)器不立即啟動(dòng)微交互，而是擴(kuò)展顯示更多控件。比如，點(diǎn)擊“保存”按鈕可以打開一個(gè)窗體詢問是“覆蓋”還是“另存為”。圖2-12：?jiǎn)螕鬚ath的SignUp按鈕會(huì)出現(xiàn)笑臉圖標(biāo)（蒙“LittleBigDetails”惠允使用）切換狀態(tài)

開關(guān)和按鈕可以表明自己當(dāng)前的狀態(tài)（左/右、上/下或按過/未按過）。實(shí)體設(shè)備上的開關(guān)可以讓人一目了然，按鈕則需要有其他搭配的指示裝置，比如用發(fā)光LED表示按鈕被按下。設(shè)置狀態(tài)

撥號(hào)盤、開關(guān)和滑動(dòng)條可以顯示微交互當(dāng)前的設(shè)置和階段（見圖2-13）。圖2-13：蝦米的播放/暫?？丶硎疽皇赘璧牟シ艜r(shí)間（蒙“LittleBigDetails”惠允使用）圖2-14：在CloudApp中，登錄按鈕在被單擊后會(huì)改變狀態(tài)，讓用戶知道后臺(tái)已經(jīng)開始處理了（蒙“LittleBigDetails”惠允使用）以上這些狀態(tài)通常由觸發(fā)器改變外觀或展示動(dòng)畫來表示，但有時(shí)候也可以通過指示燈（如觸發(fā)器旁邊的LED燈）來表示。比如，開關(guān)旁邊的紅光LED可以用來表示設(shè)置關(guān)閉。切記，跟觸發(fā)器不是一體的狀態(tài)指示器一定要放在觸發(fā)器旁邊。擴(kuò)展觸發(fā)器時(shí)也一樣：不要隨處打開窗口，要把焦點(diǎn)放在觸發(fā)器上。3.標(biāo)簽對(duì)某些觸發(fā)器而言，標(biāo)簽也是非常重要的部分。標(biāo)簽可以是微交互的名稱（例如菜單項(xiàng)或微軟功能區(qū)的名稱），也可以作為狀態(tài)指示器，比如撥號(hào)盤每個(gè)止動(dòng)裝置的名稱。標(biāo)簽就是界面。標(biāo)簽的作用顯而易見：我是不是在做自己想做的事？標(biāo)簽說明動(dòng)作，幫助消除歧義。不過，鑒于標(biāo)簽會(huì)增添觸發(fā)器的復(fù)雜性，需要額外的關(guān)注和思考，因此若非擔(dān)心引發(fā)歧義，不要使用標(biāo)簽。最好的結(jié)果當(dāng)然是把控件設(shè)計(jì)得毫無歧義（見圖2-15）。圖2-15：Vimeo的表示“取消/待會(huì)兒/現(xiàn)在不行”的按鈕幽默地寫著“Ihatechange”（我討厭改變）（蒙JoeOrtenzi和“LittleBigDetails”惠允使用）手動(dòng)觸發(fā)器的第七條規(guī)則是：僅在觸發(fā)器本身無法提供相應(yīng)信息的情況下才使用標(biāo)簽。想一想，如果不添加，那在視覺上如何表現(xiàn)標(biāo)簽？比如，要設(shè)計(jì)一個(gè)1~5星的評(píng)分系統(tǒng)，可以采用帶有1~5標(biāo)簽的滑動(dòng)條，也可以讓觸發(fā)器帶5顆星星，然后隨著鼠標(biāo)懸停，一個(gè)一個(gè)地點(diǎn)亮。不使用標(biāo)簽在某些情況下是不可能或不合適的。一個(gè)沒有標(biāo)簽的按鈕很難與周圍的其他按鈕區(qū)別開來，因此很難獲得點(diǎn)擊。與其他產(chǎn)品相關(guān)的（培訓(xùn)性或營(yíng)銷性的）方案不同，微交互不是品牌創(chuàng)意的用武之地；相反，微交互非常注重實(shí)用性，目的就是清楚明確地傳達(dá)功能（見圖2-16和圖2-17）。這并不是說微交互不重視奇思妙想或個(gè)性設(shè)計(jì)，而是說前提必須確保標(biāo)簽清楚明確。谷歌“手氣不錯(cuò)”按鈕的標(biāo)簽很有意思，但它卻沒有告訴你點(diǎn)擊按鈕之后會(huì)發(fā)生什么。因?yàn)闆]有事前反饋，不能在事件發(fā)生前就讓人知道會(huì)出現(xiàn)什么結(jié)果。注9注9：關(guān)于事前反饋的更多信息，可參考“Buthow,Donald,tellushow?:Onthecreationofmeaningininteractiondesignthroughfeedforwardandinherentfeedback”，作者TomDjajadiningrat、KeesOverbeeke和StephanWensveen,Proceedingsofthe4thconferenceonDesigninginteractivesystems:processes,practices,methods,andtechniques,ACM,NewYork,NY,USA(2002).圖2-16：巴諾書店（Barnes&Noble）的網(wǎng)站在密碼字段上使用標(biāo)簽表明區(qū)分大小寫（蒙PaulClip和“LittleBigDetails”惠允使用）圖2-17：蘋果iOSSpeakSelection設(shè)置界面上有一個(gè)新奇但明確的圖示標(biāo)簽，它借用了“龜兔賽跑”的寓言。然而，在文化背景中沒有這個(gè)成語的地方，這兩個(gè)圖示可能會(huì)讓人感到迷惑（蒙VictorBoaretto和“LittleBigDetails”惠允使用）一般來說，標(biāo)簽應(yīng)該簡(jiǎn)潔明了（見圖2-18）?！疤峤弧弊鳛榘粹o標(biāo)簽可能夠簡(jiǎn)潔，但在非技術(shù)情境中恐怕意思并不明確。在微交互中，特指度（specificity，或具體程度）非常重要。含糊其辭是標(biāo)簽最大的忌諱，標(biāo)簽必須明確。（關(guān)于這一點(diǎn)，請(qǐng)參見第3章3.3節(jié)“微文案”。）圖2-18：iPhone的“滑動(dòng)解鎖”觸發(fā)器會(huì)隨著滑動(dòng)而逐漸消失（蒙“LittleBigDetails”惠允使用）一致性同樣重要。由于標(biāo)簽可能是名稱，所以一定要保證所有地方（微交互本身、狀態(tài)、設(shè)置、數(shù)據(jù)）的標(biāo)簽名稱統(tǒng)一。不要這里叫“警告”，那里又變成了“警示”。把標(biāo)簽用好的根本就是要以使用者的語言來撰寫它。如果標(biāo)簽中包含技術(shù)術(shù)語，那用戶也應(yīng)該是技術(shù)人士；否則，不如用隨意的大白話。另外，還要讓目標(biāo)用戶測(cè)試標(biāo)簽（參見附錄）。毫不夸張地說，大多數(shù)可用性問題都是由于濫用標(biāo)簽（或根本沒有標(biāo)簽）導(dǎo)致的。2.2系統(tǒng)觸發(fā)器并非所有觸發(fā)器都是手動(dòng)的。事實(shí)上，當(dāng)前我們身邊的觸發(fā)器大都不是用戶而是系統(tǒng)發(fā)起的。系統(tǒng)觸發(fā)器無需用戶介入，只要滿足條件（一個(gè)或多個(gè)）就會(huì)自動(dòng)觸發(fā)，如圖2-19和圖2-20所示。圖2-19：發(fā)貨應(yīng)用Deliveries會(huì)在啟動(dòng)時(shí)檢測(cè)剪貼板中是否有快遞單號(hào)，如果有則通過系統(tǒng)觸發(fā)器啟動(dòng)微交互。而且，它還能夠智能地指出單號(hào)來自哪個(gè)快遞員（蒙PatrickPatience和“LittleBigDetails”惠允使用）圖2-20：由他人引發(fā)的觸發(fā)器。在Tumblr上，當(dāng)你關(guān)注的某個(gè)人提到另一個(gè)你沒有關(guān)注的人時(shí)，會(huì)出現(xiàn)一個(gè)關(guān)注按鈕（蒙BrianJacobs和“LittleBigDetails”惠允使用）系統(tǒng)觸發(fā)器啟動(dòng)的常見條件如下。錯(cuò)誤系統(tǒng)出錯(cuò)時(shí)，經(jīng)常會(huì)通過微交互來解決問題，比如詢問用戶想怎么辦，或者只是顯示一條消息說明出了什么毛?。ㄒ妶D2-21）。位置位置可能是各種尺度：國(guó)家、城市、街道，甚至特定的房間。滿足其中任何尺度的用戶都可能觸發(fā)微交互。收到數(shù)據(jù)電子郵件、狀態(tài)消息、軟件更新、天氣預(yù)報(bào)、亮度變化等進(jìn)入聯(lián)網(wǎng)設(shè)備和應(yīng)用的數(shù)據(jù)，都可能觸發(fā)“您有一封新郵件！”之類的微交互。內(nèi)部數(shù)據(jù)時(shí)間或系統(tǒng)資源等內(nèi)部數(shù)據(jù)也可能是觸發(fā)器啟動(dòng)的條件（見圖2-22）。比如，過一定時(shí)間屏幕自動(dòng)降低亮度。其他微交互這是一種特殊的觸發(fā)器，由其他微交互觸發(fā)。最簡(jiǎn)單的例子就是向?qū)浇缑妫旱谝徊剑ㄎ⒔换ィ┙Y(jié)束觸發(fā)第二步（另一個(gè)微交互），依此類推。（參見第6章6.5節(jié)“編排微交互”。）其他人在諸多社交關(guān)系中，其他人的行為（例如，回應(yīng)聊天、發(fā)表照片或消息、申請(qǐng)成為朋友），也可以成為觸發(fā)器。圖2-21：在WindowsPhone中，如果發(fā)送短信失敗，則短信圖標(biāo)（觸發(fā)器）會(huì)由笑臉變成哭臉（蒙WojtekSiudzinski和“LittleBigDetails”惠允使用）圖2-22：在Ubuntu中，如果屏幕因設(shè)定時(shí)間到而鎖定，會(huì)出現(xiàn)一個(gè)讓訪問者給所有者留言的觸發(fā)器（蒙HermanKoosScheele和“LittleBigDetails”惠允使用）雖然用戶不必手動(dòng)啟動(dòng)這些觸發(fā)器，但最好是（比如在“設(shè)置”里）提供選項(xiàng)讓用戶能夠調(diào)整它們。系統(tǒng)啟動(dòng)的每個(gè)觸發(fā)器都應(yīng)該有手動(dòng)管理及禁用它們的選項(xiàng)。理想情況下，應(yīng)該在微交互已經(jīng)觸發(fā)的時(shí)候給出這些選項(xiàng)（“不再顯示這些提示”），至少有相應(yīng)的設(shè)置。此外，即使存在系統(tǒng)觸發(fā)器，用戶也可能需要一個(gè)手動(dòng)控件（見圖2-23）。比如，用戶可能需要手動(dòng)同步文本，而不是等待系統(tǒng)自動(dòng)同步。手動(dòng)控件可以提供一個(gè)保障，同時(shí)也能在系統(tǒng)出錯(cuò)（網(wǎng)絡(luò)連接斷開或傳感器未指示）時(shí)保證能夠觸發(fā)微交互。圖2-23：在iPhone的Instapaper應(yīng)用中，如果你不小心把豎屏變成橫屏，然后又很快轉(zhuǎn)回去，就會(huì)出現(xiàn)一個(gè)Rotation（旋轉(zhuǎn)）鎖定控件（蒙RichardHarrison和“LittleBigDetails”惠允使用）系統(tǒng)觸發(fā)器的規(guī)則某些系統(tǒng)觸發(fā)器本身需要遵循自己的規(guī)則，其中最常見的就是啟動(dòng)時(shí)間和啟動(dòng)頻率（見圖2-24）。太過頻繁地讀取傳感器數(shù)據(jù)或持續(xù)連接遠(yuǎn)程服務(wù)器，可能會(huì)消耗過多的系統(tǒng)資源，比如耗費(fèi)電量、占用帶寬或處理器時(shí)間。系統(tǒng)觸發(fā)器的規(guī)則需要回答以下問題。這個(gè)觸發(fā)器多長(zhǎng)時(shí)間啟動(dòng)一次？已經(jīng)知道哪些與用戶相關(guān)的數(shù)據(jù)？怎么利用這些數(shù)據(jù)才能讓觸發(fā)器效率更高、更令人愉快或更能體現(xiàn)用戶個(gè)性？比如，知道用戶