小而美的過(guò)場(chǎng)
2014-11-18 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
有些網(wǎng)站無(wú)論在內(nèi)容，可用性，設(shè)計(jì)或者功能等方面勝人一籌，其取勝之道在于交互和動(dòng)效的細(xì)節(jié)上。在這里通過(guò)各種模型和大家分享一些案例，并分析為什么這些簡(jiǎn)單的方式能產(chǎn)生讓人難忘的效果。
我們常常會(huì)用Photoshop和Sketch這一類(lèi)軟件來(lái)設(shè)計(jì)數(shù)字產(chǎn)品。大多數(shù)在這個(gè)行業(yè)工作過(guò)幾年的人都應(yīng)該知道設(shè)計(jì)不僅僅是視覺(jué)傳達(dá)而已。盡管如此，還是有許多人在進(jìn)行靜態(tài)的設(shè)計(jì)。對(duì)于設(shè)計(jì)，喬布斯就說(shuō)過(guò)這樣的話(huà)：
“設(shè)計(jì)并非外觀怎樣，感覺(jué)如何。設(shè)計(jì)的是產(chǎn)品的工作原理?！?/p>
我們對(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)容是線(xiàn)性的。書(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)簽
項(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)?！?/p>
凸起經(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)。
原文地址：http://uxdesign.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/
