一些網(wǎng)頁優(yōu)于其他網(wǎng)頁，不僅僅是因?yàn)樗鼈兊膬?nèi)容、可用程度、設(shè)計(jì)或是特色等等?，F(xiàn)代網(wǎng)頁間根本的區(qū)別在于它們交互及動(dòng)畫細(xì)節(jié)。我們將分享一些從各種模型中獲得的經(jīng)驗(yàn)，同時(shí)分析為何這些簡單的樣式能夠如此好用?！盎ヂ?lián)網(wǎng)的一些事”推薦此文，向大家分享一些設(shè)計(jì)心得。

　　當(dāng)我們設(shè)計(jì)數(shù)碼產(chǎn)品時(shí)，我們常常使用諸如Photoshop及Sketch這樣的設(shè)計(jì)軟件。大多數(shù)從事此行業(yè)多年的人顯然知道設(shè)計(jì)不僅僅是視覺呈現(xiàn)。然而，很多人依然繼續(xù)創(chuàng)造靜止的設(shè)計(jì)。Steve Jobs曾說了這樣關(guān)于設(shè)計(jì)的話：“設(shè)計(jì)不僅是外形和感覺，設(shè)計(jì)關(guān)乎如何運(yùn)作。”

　　我們對一個(gè)產(chǎn)品的體驗(yàn)印象是由一系列因素綜合作用的結(jié)果，其中交互發(fā)揮了基礎(chǔ)性的作用。我們再也不能認(rèn)為用戶界面只是是靜態(tài)的設(shè)計(jì)，交互效果是之后才施加的。相反，我們應(yīng)當(dāng)從一開始就信奉網(wǎng)頁的交互特性，將其作為網(wǎng)頁的自然組成部分來考慮。

　　讓我們來看看一些靈活交互形式的例子，以巧妙的動(dòng)畫，優(yōu)雅的提升用戶體驗(yàn)。

　　滾動(dòng)條動(dòng)畫

　　人們對于網(wǎng)頁超鏈接總是褒貶不一。當(dāng)你點(diǎn)擊一個(gè)鏈接時(shí)，它有可能帶你到任何地方，比如從一個(gè)產(chǎn)品頁面到一個(gè)令人毛骨悚然的街邊古老木偶商店網(wǎng)站，結(jié)果欠缺上下關(guān)聯(lián)性。

　　書籍用戶體驗(yàn)的一大好處在于它的線性關(guān)系。書中的每一章都是為最后做鋪墊的。讀一本經(jīng)濟(jì)學(xué)入門書籍時(shí)，你必須閱讀第一章以幫助理解第二章的內(nèi)容。當(dāng)跳過一個(gè)章節(jié)，你會(huì)發(fā)現(xiàn)自己可能錯(cuò)過了一些東西，因而使自己對之后的內(nèi)容缺少一定理解。在網(wǎng)頁上，特別是那些較長的網(wǎng)頁，這種情況不經(jīng)意間就發(fā)生了。增加一個(gè)滾動(dòng)動(dòng)畫效果能夠彌補(bǔ)這種情況：

　　對比下面的例子：

　　對比上面“名稱”錨點(diǎn)鏈接的預(yù)設(shè)行為和下面的動(dòng)畫行為。跳過內(nèi)容不再是一種無意識(shí)的行為。它是一種確定操作。事實(shí)上，Hope Lies at 24 Frames Per Second這個(gè)網(wǎng)頁為其移動(dòng)顯示設(shè)置了一個(gè)菜單按鈕，能夠帶你去到頁面頂部，但沒有任何動(dòng)畫。這讓我花費(fèi)更多時(shí)間去弄清楚實(shí)際發(fā)生了什么。

　　小貼士：界面中突兀的變化會(huì)讓用戶難以處理。不要讓他們迷失，要時(shí)刻讓用戶知道發(fā)生了什么。

　　狀態(tài)的切換

　　如我們上面看到的，過渡能夠幫助用戶了解界面的操作步驟和整套流程。沒有什么比突然變化更顯不自然的了，因?yàn)檫@種突然的變化在真實(shí)世界中是不存在的。讓我們看看另一個(gè)例子：切換菜單。用戶將“+”與增加內(nèi)容或是展開一個(gè)元素的動(dòng)作聯(lián)系起來。將“+”翻轉(zhuǎn)45°，“+”變成了被公認(rèn)為“關(guān)閉”的界面元素——“x”。

　　這種簡單的過渡完全改變了圖標(biāo)的意義。這樣一個(gè)小小的細(xì)節(jié)意味著兩種不同的體驗(yàn)感受，一種是用戶必須猜測下一步將會(huì)發(fā)生什么，另一種是用戶明確了解icon兩種狀態(tài)下表示的意思。如果你問我傾向于哪種，我會(huì)覺得狀態(tài)切換那個(gè)體驗(yàn)要好得多。同時(shí)值得注意的是，加號(hào)反轉(zhuǎn)方向總是與內(nèi)容呈現(xiàn)動(dòng)作保持一致，強(qiáng)化了信息的連貫性。

　　小貼士：讓你的網(wǎng)頁元素在每一狀態(tài)下都能易懂。

　　折疊表單及評(píng)論

　　很多博客和新聞網(wǎng)站上的評(píng)論表單看上去都不是令人愉悅的元素。為什么呢?因?yàn)樗鼈兘^大多數(shù)都不夠友好，不是嗎?當(dāng)你準(zhǔn)備發(fā)表一條評(píng)論，你只是單純希望輸入評(píng)論而已。相反的，一種典型的表單會(huì)問你各種其他無關(guān)的東西，非常煩人。

　　為了促使用戶發(fā)表更多評(píng)論，我們可以折疊表單，僅僅展現(xiàn)最為關(guān)鍵的元素：評(píng)論框。當(dāng)用戶點(diǎn)擊輸入框，你可以相應(yīng)的展開表單。我們可以在紐約時(shí)報(bào)測試版網(wǎng)站上找到這種進(jìn)階展開的實(shí)際例子。

　　你可以更進(jìn)一步，在展開表單時(shí)光標(biāo)聚焦評(píng)論框。然而這一方法有一個(gè)問題：一個(gè)關(guān)鍵的交互設(shè)計(jì)原則是這樣說的，行為應(yīng)發(fā)生在離交互產(chǎn)生最近的地方(焦點(diǎn)附近)。因此我們還可以再進(jìn)一步，為評(píng)論框增加動(dòng)畫來引導(dǎo)用戶注意到評(píng)論框上：

　　你甚至可以將評(píng)論框固定至頂部，根據(jù)用戶的操作展開，展現(xiàn)它下面更多的內(nèi)容。

　　正如你看到的，這減少了雜亂同時(shí)令評(píng)論表單更具吸引力。那么如果將所有以往評(píng)論也折疊起來呢?

　　將評(píng)論折疊，并用滾動(dòng)條表示正文的長度，而不是整個(gè)頁面的長度。一個(gè)常見的做法就是當(dāng)用戶到達(dá)頁面底部的時(shí)候自動(dòng)加載評(píng)論。我們應(yīng)該避免強(qiáng)制用戶點(diǎn)擊，除非有更好的理由這樣做。

　　小貼士：逐步顯示來減少視覺模塊，只保留其本身的精華部分。在用戶需要的時(shí)候展現(xiàn)。

　　下拉刷新

　　最為令人興奮的交互之一便是在iPhone發(fā)布后短時(shí)間出現(xiàn)的由Loren Brichter開創(chuàng)“下拉刷新”。它允許用戶更新滾動(dòng)顯示的最新內(nèi)容。你可以在twitter的app上看到這個(gè)設(shè)想的效果。一旦你滾動(dòng)到twitter的頂部，再滾動(dòng)一小段便可以刷新真?zhèn)€信息流。

　　為什么它效果如此好呢?在下拉刷新出現(xiàn)前，用戶需要點(diǎn)擊瀏覽器的刷新按鈕來加載更多內(nèi)容。將用戶發(fā)現(xiàn)更多內(nèi)容的期望和刷新動(dòng)作聯(lián)系起來，這個(gè)明顯的刷新動(dòng)作就可以舍棄掉了。

　　小貼士：將意圖與行為聯(lián)系起來，體驗(yàn)將變得更加連續(xù)無縫。

　　標(biāo)簽貼靠

　　標(biāo)簽貼靠是另一種用戶界面組件中精妙且有用的集合同時(shí)也是非常有意義的過渡動(dòng)畫?？聪翬denspiekermann工作室的網(wǎng)站在自己的作品展示上怎樣利用這項(xiàng)技術(shù)的。

　　項(xiàng)目的標(biāo)簽跟隨內(nèi)容滾動(dòng)，從而為右側(cè)的圖片提供上下文指示，直到下一項(xiàng)出現(xiàn)。這個(gè)動(dòng)畫跟iOS的聯(lián)系人界面很像，他們對于長列表界面的上下文指示特別有用。這個(gè)過渡動(dòng)畫不僅可以幫助快速定位而且流暢的展示了上下文關(guān)系。

　　小貼士：標(biāo)簽貼靠適用于那種內(nèi)容無法很好的適配視窗，而描述或標(biāo)題會(huì)給內(nèi)容增加有價(jià)值信息的長列表中。

　　可供性動(dòng)畫

　　可供性這個(gè)概念來自于認(rèn)知心理學(xué)，它指的是物體可以指示觀察者操作的特殊屬性。

　　從用戶界面設(shè)計(jì)角度，EU的在線pdf《可用性詞匯表》對“可供性”定義如下：

　　可供性是用戶界面的理想屬性——如此軟件才能自然的引導(dǎo)人們進(jìn)行正確的步驟來完成他們的操作目標(biāo)。

　　視覺上的突起常被用來增強(qiáng)可供性。突起的按鈕暗示按鈕能被操作。這個(gè)用戶體驗(yàn)的手法被廣泛應(yīng)用與iOS的拍照軟件中。

　　iOS 6的鎖屏界面上，照相機(jī)icon上下設(shè)計(jì)了幾條棱線，暗示這里可以拖拽。因?yàn)橛脩袅?xí)慣了這種快速打開照相機(jī)的方法，蘋果公司在iOS 7里去掉了棱線的設(shè)計(jì)，將相機(jī)的icon做得更像是一個(gè)獨(dú)立的按鈕。它的相關(guān)操作還是一樣的：拖拽按鈕的時(shí)候，鎖屏界面向上彈起，展示下面的照相機(jī)界面。這是一個(gè)向用戶表明界面中產(chǎn)品特征的非常棒的方法。

　　小貼士：將元素的可供性設(shè)計(jì)得更強(qiáng)能引導(dǎo)用戶界面中的操作。

　　情境隱藏

　　iOS上的chrome從最初版本就有這種情境隱藏的例子，它是這樣處理的：

　　基本理念是當(dāng)用戶自然的向下滑動(dòng)頁面開始瀏覽時(shí)，chrome的導(dǎo)航工具欄會(huì)自動(dòng)隱藏。當(dāng)用戶回滾頁面時(shí)，導(dǎo)航工具欄會(huì)再次出現(xiàn)。這樣做既使體驗(yàn)更加情景化(聚焦在內(nèi)容本身)也增加了屏幕的顯示區(qū)域。而后者在移動(dòng)終端上顯得尤其重要。

　　潛在的設(shè)想是用戶會(huì)順勢滑動(dòng)瀏覽他們專注的內(nèi)容。一旦用戶停止滑動(dòng)頁面，可能就需要變化用戶的操作場景了;因此，導(dǎo)航工具欄再次出現(xiàn)。既然這種技術(shù)節(jié)省了屏幕空間，你可以試一下在你的操作場景里是否適用。

　　iOS在這方面更進(jìn)一步。當(dāng)你滑動(dòng)到頁面底部的時(shí)候，工具欄也會(huì)再次出現(xiàn)。這是一個(gè)非常好的動(dòng)態(tài)結(jié)合用戶在界面操作需求的例子。

　　小貼士：情境隱藏能強(qiáng)化用戶的操作焦點(diǎn)，節(jié)省屏幕空間。

　　焦點(diǎn)轉(zhuǎn)換

　　大概一周之前，一位多倫多的UI設(shè)計(jì)師Nikita Vasilyev，有了一個(gè)特別巧妙的想法。他開發(fā)了一套頁面焦點(diǎn)跳轉(zhuǎn)的腳本。盡管方案還在實(shí)驗(yàn)階段，但是概念特別有意思?？聪孪旅娴囊曨l。(記得帶上你的耳機(jī)——音效也很華麗)。

　　查看視頻

　　當(dāng)用鍵盤切換焦點(diǎn)的時(shí)候，用戶光點(diǎn)擊Tab鍵無法知道焦點(diǎn)跳到那里了。這個(gè)小的動(dòng)畫告訴了人們焦點(diǎn)在位于頁面中的何處。動(dòng)畫雖然很小但對于引導(dǎo)用戶卻有非常大的影響。

　　小貼士：引導(dǎo)用戶，不管用戶怎樣操作。

　　結(jié)語

　　本文只列了少數(shù)幾個(gè)案例，實(shí)際上還有許多許多。關(guān)鍵不是展現(xiàn)最新最炫的交互技術(shù)，而是強(qiáng)調(diào)一個(gè)小小的交互細(xì)節(jié)如何能夠顯著的提升用戶體驗(yàn)。

　　如果我們是為了設(shè)計(jì)更好的數(shù)碼產(chǎn)品，我們就需要不斷挑戰(zhàn)我們現(xiàn)在的信仰，以此來看交互模式怎樣潛在的優(yōu)化用戶的生活。我不是說我們要徹底推翻現(xiàn)在，而是如果停止探索真的會(huì)變得無知。所以，離開我們的安樂窩，來不斷的探索和實(shí)驗(yàn)。

　　你覺得哪種動(dòng)畫在你的項(xiàng)目中是最實(shí)用的呢?

新聞標(biāo)題：用戶體驗(yàn)中巧妙的過場動(dòng)畫
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/news/163905.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有用戶體驗(yàn)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)