“設(shè)計(jì)并非外觀怎樣，感覺(jué)如何。設(shè)計(jì)的是產(chǎn)品的工作原理。”
我們對(duì)產(chǎn)品的體驗(yàn)和印象是由綜合因素影響的，其中交互起著根本性的作用。我們?cè)僖膊荒芟葟撵o態(tài)的角度考慮用戶(hù)界面，然后再加入交互效果。相反，我們需要從一開(kāi)始就考慮到互動(dòng)，并把這個(gè)當(dāng)作界面的天然屬性。
讓我們來(lái)看看一些小而美的交互實(shí)例，看看這些巧妙的動(dòng)效是如何優(yōu)雅地改善了用戶(hù)體驗(yàn)。
動(dòng)態(tài)滾動(dòng)
網(wǎng)頁(yè)上的超鏈接既有好處又有缺點(diǎn)。當(dāng)你點(diǎn)擊一個(gè)鏈接，你無(wú)法預(yù)期會(huì)帶你到怎樣的頁(yè)面，也許是一個(gè)產(chǎn)品的頁(yè)面，也可能是一家令人毛骨悚然的沿街老木偶店面的網(wǎng)站。前后的關(guān)聯(lián)是斷開(kāi)的。
閱讀書(shū)籍的一個(gè)很棒的體驗(yàn)就是內(nèi)容是線性的。書(shū)中每個(gè)章節(jié)是遞進(jìn)的。比如，你必須閱讀第一章中的經(jīng)濟(jì)學(xué)入門(mén)來(lái)幫助你理解第二章。當(dāng)你跳過(guò)一個(gè)章節(jié)，你很 清楚你可能會(huì)遺漏一些信息，從而會(huì)缺乏對(duì)后續(xù)內(nèi)容的理解。在網(wǎng)頁(yè)上，尤其是在很長(zhǎng)的網(wǎng)頁(yè)上，這種現(xiàn)象常常無(wú)意識(shí)地發(fā)生。這時(shí)通過(guò)添加一個(gè)滾動(dòng)的動(dòng)效，就可 以解決這個(gè)問(wèn)題：
對(duì)比下這個(gè)效果：
對(duì)比下錨定鏈接的默認(rèn)方式和動(dòng)態(tài)方式，快速下滑到內(nèi)容處不再是一種無(wú)意識(shí)的動(dòng)作，這是一種決策。在 Hope Lies at 24 Frames Per Second的手機(jī)視圖上有一個(gè)菜單按鈕，點(diǎn)擊后能回到頁(yè)面頂部，但是沒(méi)有任何的過(guò)渡動(dòng)效。我花了不止一分鐘才弄明白究竟發(fā)生了什么。
謹(jǐn)記：界面上任何突兀的變化會(huì)讓用戶(hù)感覺(jué)很難進(jìn)行，別把他們搞得暈頭轉(zhuǎn)向;清晰的顯示發(fā)生了什么事。
狀態(tài)切換
正如上個(gè)例子里我們所看到的，切換的過(guò)程能幫助用戶(hù)了解界面的路徑和指向。沒(méi)有什么能比一個(gè)突發(fā)變化更讓人感覺(jué)到不自然了，因?yàn)樗沧冊(cè)诂F(xiàn)實(shí)世界中是不存 在的。讓我們來(lái)看看另一個(gè)例子：切換菜單。用戶(hù)看到“+”這個(gè)符號(hào)，會(huì)聯(lián)想到添加內(nèi)容或擴(kuò)展元素。旋轉(zhuǎn)45°后，加號(hào)變?yōu)橐粋�(gè)叉叉，這個(gè)元素被廣泛地理解 為“關(guān)閉”：
這個(gè)簡(jiǎn)單的過(guò)渡，徹底改變了圖標(biāo)的含義。這樣一個(gè)小小的細(xì)節(jié)意味著不必猜測(cè)接下來(lái)會(huì)發(fā)生什么，用戶(hù)知道圖標(biāo)在兩種狀態(tài)下的含義。如果你問(wèn)我，我覺(jué)得這樣的切換是相當(dāng)人性化的。此外，請(qǐng)注意加號(hào)的旋轉(zhuǎn)和內(nèi)容的出現(xiàn)是在同一方向，加強(qiáng)了信息的指向。
謹(jǐn)記：保證你的網(wǎng)站元素在每個(gè)狀態(tài)下都易于理解。
收縮表單和評(píng)論
許多博客和新聞網(wǎng)站的評(píng)論表單不是一個(gè)讓人看著愉悅的組件。為什么呢?好吧，大部分還是不夠友好的，對(duì)吧?當(dāng)你準(zhǔn)備發(fā)表評(píng)論時(shí)，你只是想開(kāi)始輸入評(píng)論。然而，一個(gè)典型的表單卻要求你先提供其他的各種信息，這樣多煩人。
為了激勵(lì)人們參與評(píng)論，我們可以把表單折疊，并只顯示最關(guān)鍵的元素：評(píng)論框。當(dāng)用戶(hù)點(diǎn)擊了評(píng)論框，你可以相應(yīng)地?cái)U(kuò)大表單。這種逐步披露的方式可以在紐約時(shí)報(bào)的測(cè)試版網(wǎng)站上找到一個(gè)實(shí)例：
當(dāng)表格擴(kuò)展時(shí)，有種更好的方式是可以設(shè)置光標(biāo)的焦點(diǎn)在評(píng)論框上。不過(guò)會(huì)有一個(gè)問(wèn)題：交互設(shè)計(jì)的一個(gè)重要原則是，反饋動(dòng)作應(yīng)該發(fā)生在交互產(chǎn)生的附近(或者是在關(guān)注點(diǎn)的軌跡上)。我們?cè)賰?yōu)化一下，給評(píng)論框的展開(kāi)加上過(guò)渡的動(dòng)畫(huà)來(lái)幫助用戶(hù)定位：
你甚至可以把評(píng)論框放在區(qū)域的頂部，相應(yīng)地?cái)U(kuò)大框的大小并把其他字段展示在評(píng)論框下方。
正如你所見(jiàn)，這樣能減少干擾，讓評(píng)論表單更加引人注意。但是把評(píng)論內(nèi)容也全部折疊起來(lái)會(huì)怎么樣呢?
通過(guò)折疊評(píng)論，我們可以憑借滾動(dòng)條得知正文的長(zhǎng)度而不是整個(gè)頁(yè)面。通常的做法是，當(dāng)用戶(hù)到達(dá)頁(yè)面底部會(huì)自動(dòng)加載評(píng)論。我們應(yīng)該避免強(qiáng)迫用戶(hù)點(diǎn)擊，除非有很好的理由。
謹(jǐn)記：逐步披露信息的方式是為了減少UI上的干擾從而突出用戶(hù)需要的功能。
下拉刷新
在iPhone面世后不久出現(xiàn)的一個(gè)最令人興奮的交互操作就是“下拉刷新”(開(kāi)發(fā)者：Loren Brichter)。用戶(hù)下拉后內(nèi)容會(huì)根據(jù)發(fā)布時(shí)間倒序更新。你可以在Twitter的app里看到這樣的應(yīng)用了。只要你在推文的頂部稍微向下拉動(dòng)就能刷新所有內(nèi)容。
為什么這個(gè)設(shè)計(jì)如此受歡迎?在下拉刷新存在之前，用戶(hù)不得不點(diǎn)擊瀏覽器的“刷新”按鈕去加載更多內(nèi)容。通過(guò)下拉的方式滿(mǎn)足了用戶(hù)的探索欲，從而讓進(jìn)行明確操作的需要逐漸被淘汰。
謹(jǐn)記：當(dāng)操作符合了意圖，體驗(yàn)會(huì)變得更加無(wú)縫。
黏性標(biāo)簽
黏性標(biāo)簽是另一個(gè)微妙又實(shí)用的用戶(hù)界面組件，并且也很有意思。來(lái)看看 Edenspiekermann’s use of this technique 的介紹頁(yè)面
項(xiàng)目標(biāo)簽會(huì)跟隨內(nèi)容滾動(dòng)，從而為右側(cè)圖片提供了目錄，直到出現(xiàn)下一個(gè)項(xiàng)目。這種行為和iOS里的地址簿很類(lèi)似，特別是對(duì)長(zhǎng)內(nèi)容的索引非常有幫助。這種過(guò)渡既提升了定位也讓基于上下文的描述更流暢。
謹(jǐn)記：在很長(zhǎng)的內(nèi)容視圖里不適合用描述或者標(biāo)題的方式來(lái)添加有價(jià)值的信息，這時(shí)可以考慮用黏性標(biāo)簽。
預(yù)示性過(guò)渡
預(yù)示性的概念源自認(rèn)知心理學(xué)，意指通過(guò)特定的對(duì)象的特征來(lái)引導(dǎo)觀眾。
在用戶(hù)界面設(shè)計(jì)的背景下，歐盟網(wǎng)站的可用性術(shù)語(yǔ)表(PDF下載)中給出了如下定義：
“預(yù)示性是用戶(hù)界面(軟件)中的一個(gè)理想屬性 ，能很自然的引導(dǎo)人們采取正確的步驟，來(lái)完成目標(biāo)。”
凸起經(jīng)常被用來(lái)增強(qiáng)預(yù)示。按鈕周?chē)耐蛊鹁桶凳玖诉@個(gè)按鈕可以操作。這個(gè)用戶(hù)體驗(yàn)技術(shù)在iOS的相機(jī)應(yīng)用程序里被廣泛推廣。
iOS 6鎖屏里的相機(jī)圖標(biāo)周?chē)陀衅鸱募y理暗示用戶(hù)可以拖動(dòng)。在iOS7里，這個(gè)設(shè)計(jì)被刪除了，使圖標(biāo)看起來(lái)更像是一個(gè)獨(dú)立的按鈕，這是因?yàn)橛脩?hù)的習(xí)慣已經(jīng)建 立起來(lái)了。顯然，會(huì)發(fā)生什么事仍然是一樣的：當(dāng)你拖動(dòng)按鈕，鎖屏彈起，露出攝像頭下方。這是一個(gè)偉大的技術(shù)，向用戶(hù)指示出界面的功能。
謹(jǐn)記：在界面里給控件提高預(yù)示來(lái)幫助用戶(hù)學(xué)習(xí)。
隱藏索引
谷歌Chrome的iOS版本有個(gè)隱藏索引的設(shè)計(jì)，就像這樣：
其基本思路是，一旦用戶(hù)向下拖動(dòng)，Chrome瀏覽器的導(dǎo)航控件自動(dòng)隱藏。只要用戶(hù)再次向上拖動(dòng)，導(dǎo)航重新出現(xiàn)。這種方法既提升了瀏覽上下文的體驗(yàn)(聚焦內(nèi)容本身)，也增加了屏幕空間。當(dāng)然，后者在移動(dòng)設(shè)備上特別重要。
一個(gè)毋庸置疑的說(shuō)法是，用戶(hù)會(huì)一直瀏覽他們非常感興趣的內(nèi)容。一旦他們停止繼續(xù)瀏覽，極有可能是要更換瀏覽內(nèi)容了，因此，這時(shí)導(dǎo)航條需要出現(xiàn)。雖然這項(xiàng)技術(shù)節(jié)省了屏幕空間，但請(qǐng)確認(rèn)這種場(chǎng)景是否會(huì)出現(xiàn)在你的產(chǎn)品里。
iOS更進(jìn)了一步。當(dāng)你到達(dá)一個(gè)頁(yè)面的底部，控制欄會(huì)再次擴(kuò)大。這是動(dòng)態(tài)地根據(jù)場(chǎng)景滿(mǎn)足用戶(hù)需求的一個(gè)很好的例子。
謹(jǐn)記：使用隱藏索引的方式讓用戶(hù)更聚焦內(nèi)容，并節(jié)省屏幕空間。
總結(jié)
這些僅是大量案例的其中幾個(gè)。本文的主旨不是顯示最新奇的交互技術(shù)，而是突出小交互細(xì)節(jié)如何顯著提高用戶(hù)的體驗(yàn)。
如果我們要設(shè)計(jì)出更好的數(shù)字產(chǎn)品，那么我們就需要挑戰(zhàn)我們目前的信念和探索交互模式可以如何緩解用戶(hù)的生活。我不是說(shuō)我們應(yīng)該推倒重來(lái)，但如果停止探索那就太目光短淺了。所以，走出你的安樂(lè)窩，繼續(xù)探索和試驗(yàn)。
我們的承諾：
天惠公司將一如既往，秉承專(zhuān)業(yè)服務(wù)精神，一切從客戶(hù)利益出發(fā)，為您率先建站,令您把握先機(jī)，長(zhǎng)遠(yuǎn)的眼光定使您在商海搏擊中穩(wěn)操勝券。