小而美的過場

2014-11-18    藍藍設(shè)計的小編

藍藍設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務

有些網(wǎng)站無論在內(nèi)容,可用性,設(shè)計或者功能等方面勝人一籌,其取勝之道在于交互和動效的細節(jié)上。在這里通過各種模型和大家分享一些案例,并分析為什么這些簡單的方式能產(chǎn)生讓人難忘的效果。

 

我們常常會用Photoshop和Sketch這一類軟件來設(shè)計數(shù)字產(chǎn)品。大多數(shù)在這個行業(yè)工作過幾年的人都應該知道設(shè)計不僅僅是視覺傳達而已。盡管如此,還是有許多人在進行靜態(tài)的設(shè)計。對于設(shè)計,喬布斯就說過這樣的話:

 

“設(shè)計并非外觀怎樣,感覺如何。設(shè)計的是產(chǎn)品的工作原理?!?/p>

 

我們對產(chǎn)品的體驗和印象是由綜合因素影響的,其中交互起著根本性的作用。我們再也不能先從靜態(tài)的角度考慮用戶界面,然后再加入交互效果。相反,我們需要從一開始就考慮到互動,并把這個當作界面的天然屬性。

 

讓我們來看看一些小而美的交互實例,看看這些巧妙的動效是如何優(yōu)雅地改善了用戶體驗。

 

動態(tài)滾動

 

網(wǎng)頁上的超鏈接既有好處又有缺點。當你點擊一個鏈接,你無法預期會帶你到怎樣的頁面,也許是一個產(chǎn)品的頁面,也可能是一家令人毛骨悚然的沿街老木偶店面的網(wǎng)站。前后的關(guān)聯(lián)是斷開的。

 

閱讀書籍的一個很棒的體驗就是內(nèi)容是線性的。書中每個章節(jié)是遞進的。比如,你必須閱讀第一章中的經(jīng)濟學入門來幫助你理解第二章。當你跳過一個章節(jié),你很清楚你可能會遺漏一些信息,從而會缺乏對后續(xù)內(nèi)容的理解。在網(wǎng)頁上,尤其是在很長的網(wǎng)頁上,這種現(xiàn)象常常無意識地發(fā)生。這時通過添加一個滾動的動效,就可以解決這個問題:
113838mvlaylyvlkm50eak
對比下這個效果:
113839h28dcmlbzboz8dxo
對比下錨定鏈接的默認方式和動態(tài)方式,快速下滑到內(nèi)容處不再是一種無意識的動作,這是一種決策。在 Hope Lies at 24 Frames Per Second的手機視圖上有一個菜單按鈕,點擊后能回到頁面頂部,但是沒有任何的過渡動效。我花了不止一分鐘才弄明白究竟發(fā)生了什么。


謹記:界面上任何突兀的變化會讓用戶感覺很難進行,別把他們搞得暈頭轉(zhuǎn)向;清晰的顯示發(fā)生了什么事。
狀態(tài)切換
正如上個例子里我們所看到的,切換的過程能幫助用戶了解界面的路徑和指向。沒有什么能比一個突發(fā)變化更讓人感覺到不自然了,因為瞬變在現(xiàn)實世界中是不存在的。讓我們來看看另一個例子:切換菜單。用戶看到“+”這個符號,會聯(lián)想到添加內(nèi)容或擴展元素。旋轉(zhuǎn)45°后,加號變?yōu)橐粋€叉叉,這個元素被廣泛地理解為“關(guān)閉”:
113839d9qtagmtmyqhngr4
這個簡單的過渡,徹底改變了圖標的含義。這樣一個小小的細節(jié)意味著不必猜測接下來會發(fā)生什么,用戶知道圖標在兩種狀態(tài)下的含義。如果你問我,我覺得這樣的切換是相當人性化的。此外,請注意加號的旋轉(zhuǎn)和內(nèi)容的出現(xiàn)是在同一方向,加強了信息的指向。

謹記:保證你的網(wǎng)站元素在每個狀態(tài)下都易于理解。
收縮表單和評論
許多博客和新聞網(wǎng)站的評論表單不是一個讓人看著愉悅的組件。為什么呢?好吧,大部分還是不夠友好的,對吧?當你準備發(fā)表評論時,你只是想開始輸入評論。然而,一個典型的表單卻要求你先提供其他的各種信息,這樣多煩人。


為了激勵人們參與評論,我們可以把表單折疊,并只顯示最關(guān)鍵的元素:評論框。當用戶點擊了評論框,你可以相應地擴大表單。這種逐步披露的方式可以在紐約時報的測試版網(wǎng)站上找到一個實例:
113839wkywdkdudwuwktns
當表格擴展時,有種更好的方式是可以設(shè)置光標的焦點在評論框上。不過會有一個問題:交互設(shè)計的一個重要原則是,反饋動作應該發(fā)生在交互產(chǎn)生的附近(或者是在關(guān)注點的軌跡上)。我們再優(yōu)化一下,給評論框的展開加上過渡的動畫來幫助用戶定位:
113839ch337isv91329h0h
你甚至可以把評論框放在區(qū)域的頂部,相應地擴大框的大小并把其他字段展示在評論框下方。


正如你所見,這樣能減少干擾,讓評論表單更加引人注意。但是把評論內(nèi)容也全部折疊起來會怎么樣呢?


通過折疊評論,我們可以憑借滾動條得知正文的長度而不是整個頁面。通常的做法是,當用戶到達頁面底部會自動加載評論。我們應該避免強迫用戶點擊,除非有很好的理由。


謹記:逐步披露信息的方式是為了減少UI上的干擾從而突出用戶需要的功能。
下拉刷新
在iPhone面世后不久出現(xiàn)的一個最令人興奮的交互操作就是“下拉刷新”(開發(fā)者:Loren Brichter)。用戶下拉后內(nèi)容會根據(jù)發(fā)布時間倒序更新。你可以在Twitter的app里看到這樣的應用了。只要你在推文的頂部稍微向下拉動就能刷新所有內(nèi)容。
6.Twitter.gif
為什么這個設(shè)計如此受歡迎?在下拉刷新存在之前,用戶不得不點擊瀏覽器的“刷新”按鈕去加載更多內(nèi)容。通過下拉的方式滿足了用戶的探索欲,從而讓進行明確操作的需要逐漸被淘汰。


謹記:當操作符合了意圖,體驗會變得更加無縫。
黏性標簽
黏性標簽是另一個微妙又實用的用戶界面組件,并且也很有意思。來看看 Edenspiekermann’s use of this technique 的介紹頁面
113839ow6604ck54kmmcdz
項目標簽會跟隨內(nèi)容滾動,從而為右側(cè)圖片提供了目錄,直到出現(xiàn)下一個項目。這種行為和iOS里的地址簿很類似,特別是對長內(nèi)容的索引非常有幫助。這種過渡既提升了定位也讓基于上下文的描述更流暢。


謹記:在很長的內(nèi)容視圖里不適合用描述或者標題的方式來添加有價值的信息,這時可以考慮用黏性標簽。
預示性過渡
預示性的概念源自認知心理學,意指通過特定的對象的特征來引導觀眾。
 
在用戶界面設(shè)計的背景下,歐盟網(wǎng)站的可用性術(shù)語表(PDF下載)中給出了如下定義:

“預示性是用戶界面(軟件)中的一個理想屬性 ,能很自然的引導人們采取正確的步驟,來完成目標。”

凸起經(jīng)常被用來增強預示。按鈕周圍的凸起就暗示了這個按鈕可以操作。這個用戶體驗技術(shù)在iOS的相機應用程序里被廣泛推廣。
113839muszne6essdxc82r




iOS 6鎖屏里的相機圖標周圍就有起伏的紋理暗示用戶可以拖動。在iOS7里,這個設(shè)計被刪除了,使圖標看起來更像是一個獨立的按鈕,這是因為用戶的習慣已經(jīng)建立起來了。顯然,會發(fā)生什么事仍然是一樣的:當你拖動按鈕,鎖屏彈起,露出攝像頭下方。這是一個偉大的技術(shù),向用戶指示出界面的功能。

 

謹記:在界面里給控件提高預示來幫助用戶學習。

 

隱藏索引

 

谷歌Chrome的iOS版本有個隱藏索引的設(shè)計,就像這樣:
113840m7k9jy25bjttudy2
其基本思路是,一旦用戶向下拖動,Chrome瀏覽器的導航控件自動隱藏。只要用戶再次向上拖動,導航重新出現(xiàn)。這種方法既提升了瀏覽上下文的體驗(聚焦內(nèi)容本身),也增加了屏幕空間。當然,后者在移動設(shè)備上特別重要。


一個毋庸置疑的說法是,用戶會一直瀏覽他們非常感興趣的內(nèi)容。一旦他們停止繼續(xù)瀏覽,極有可能是要更換瀏覽內(nèi)容了,因此,這時導航條需要出現(xiàn)。雖然這項技術(shù)節(jié)省了屏幕空間,但請確認這種場景是否會出現(xiàn)在你的產(chǎn)品里。
 
iOS更進了一步。當你到達一個頁面的底部,控制欄會再次擴大。這是動態(tài)地根據(jù)場景滿足用戶需求的一個很好的例子。
 
謹記:使用隱藏索引的方式讓用戶更聚焦內(nèi)容,并節(jié)省屏幕空間。
總結(jié)
這些僅是大量案例的其中幾個。本文的主旨不是顯示奇的交互技術(shù),而是突出小交互細節(jié)如何顯著提高用戶的體驗。
 
如果我們要設(shè)計出更好的數(shù)字產(chǎn)品,那么我們就需要挑戰(zhàn)我們目前的信念和探索交互模式可以如何緩解用戶的生活。我不是說我們應該推倒重來,但如果停止探索那就太目光短淺了。所以,走出你的安樂窩,繼續(xù)探索和試驗。

原文地址:http://uxdesign.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔