本文格式為Word版，下載可任意編輯——web前端技巧解說web前端技巧闡明

一些網(wǎng)頁優(yōu)于其他網(wǎng)頁，不僅僅是由于它們的內(nèi)容、可用程度、設(shè)計或是特色等等?，F(xiàn)代網(wǎng)頁間根本的識別在于它們交互及動畫細節(jié)。我們將共享一些從各種模型中獲得的閱歷，同時分析為何這些簡樸的樣式能夠如此好用。

當我們設(shè)計數(shù)碼產(chǎn)品時，我們往往使用諸如Photoshop及Sketch這樣的設(shè)計軟件。大多數(shù)從事此行業(yè)多年的人鮮明知道設(shè)計不僅僅是視覺呈現(xiàn)。然而，好多人照舊持續(xù)創(chuàng)造靜止的設(shè)計。SteveJobs曾說了這樣關(guān)于設(shè)計的話：“設(shè)計不僅是形狀和感覺，設(shè)計關(guān)乎如何運作?！?/p>

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

讓我們來看看一些生動交互形式的例子，以高明的動畫，優(yōu)雅的提升用戶體驗。

一、滾動條動畫

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

書籍用戶體驗的一大好處在于它的線性關(guān)系。書中的每一章都是為結(jié)果做鋪墊的。讀一本經(jīng)濟學入門書籍時，你務(wù)必閱讀第一章以扶助理解其次章的內(nèi)容。當跳過一個章節(jié)，你會察覺自己可能錯過了一些東西，因而使自己對之后的內(nèi)容缺少確定理解。在網(wǎng)頁上，更加是那些較長的網(wǎng)頁，這種處境不經(jīng)意間就發(fā)生了。增加一個滾動動畫效果能夠彌補這種處境：

比較下面的例子：

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

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

二、狀態(tài)的切換

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

這種簡樸的過渡完全變更了圖標的意義。這樣一個小小的細節(jié)意味著兩種不同的體驗感受，一種是用戶務(wù)必推測下一步將會發(fā)生什么，另一種是用戶明確了解icon兩種狀態(tài)下表示的意思。假設(shè)你問我傾向于哪種，我會覺得狀態(tài)切換那個體驗要好得多。同時值得留神的是，加號反轉(zhuǎn)方向總是與內(nèi)容呈現(xiàn)動作保持一致，強化了信息的連貫性。

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

三、折疊表單及評論

好多博客和新聞網(wǎng)站上的.評論表單看上去都不是令人愉悅的元素。為什么呢?由于它們絕大多數(shù)都不夠友好，不是嗎?當你打定發(fā)表一條評論，你只是單純夢想輸入評論而已。相反的，一種典型的表單會問你各種其他無關(guān)的東西，分外煩人。

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

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

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

正如你看到的，這裁減了雜亂同時令評論表單更具吸引力。那么假設(shè)將全體以往評論也折疊起來呢?

將評論折疊，并用滾動條表示正文的長度，而不是整個頁面的長度。一個常見的做法就是當用戶到達頁面底部的時候自動加載評論。我們理應(yīng)制止強制用戶點擊，除非有更好的理由這樣做。

小貼士：逐步顯示來裁減視覺模塊，只留存其本身的精華片面。在用戶需要的時候呈現(xiàn)。

四、下拉刷新

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

為什么它效果如此好呢?在下拉刷新展現(xiàn)前，用戶需要點擊欣賞器的刷新按鈕來加載更多內(nèi)容。將用戶察覺更多內(nèi)容的期望和刷新動作聯(lián)系起來，這個明顯的刷新動作就可以舍棄掉了。

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

五、標簽貼靠

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

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

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

六、可供性動畫

可供性這個概念來自于認知心理學，它指的是物體可以指示查看者操作的特殊屬性。

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

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

視覺上的突起常被用來鞏固可供性。突起的按鈕示意按鈕能操作。這個用戶體驗的手法被廣泛應(yīng)用與iOS的拍照軟件中。

IOS6的鎖屏界面上，照相機icon上下設(shè)計了幾條棱線，示意這里可以拖拽。由于用戶習慣了這種快速開啟照相機的方法，蘋果公司在iOS7里去掉了棱線的設(shè)計，將相機的icon做得更像是一個獨立的按鈕。它的相關(guān)操作還是一樣的：拖拽按鈕的時候，鎖屏界面向上彈起，表示下面的照相機界面。這是一個向用戶說明界面中產(chǎn)品特征的分外棒的方法。

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

七、情境暗藏

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

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

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

iOS在這方面更進一步。當你滑動到頁面底部的時候，工具欄也會再次展現(xiàn)。這是一個分外好的動態(tài)結(jié)合用戶在界面操作需求的例子。

小貼士：情境暗藏能強化用戶的操作焦點，節(jié)省屏幕空間。

八、焦點轉(zhuǎn)換

約莫一周之前，一位多倫多的UI設(shè)計師NikitaVasilyev，有了一個更加高明的想法。他開發(fā)了一套頁面焦點跳轉(zhuǎn)的