web前端技巧解説
一些網頁優於其他網頁,不僅僅是因為它們的內容、可用程度、設計或是特色等等。現代網頁間根本的區別在於它們交互及動畫細節。我們將分享一些從各種模型中獲得的經驗,同時分析為何這些簡單的樣式能夠如此好用。
當我們設計數碼產品時,我們常常使用諸如Photoshop及Sketch這樣的設計軟件。大多數從事此行業多年的人顯然知道設計不僅僅是視覺呈現。然而,很多人依然繼續創造靜止的設計。Steve Jobs曾説了這樣關於設計的話:“設計不僅是外形和感覺,設計關乎如何運作。”
我們對一個產品的體驗印象是由一系列因素綜合作用的結果,其中交互發揮了基礎性的作用。我們再也不能認為用户界面只是是靜態的設計,交互效果是之後才施加的。相反,我們應當從一開始就信奉網頁的交互特性,將其作為網頁的自然組成部分來考慮。
讓我們來看看一些靈活交互形式的例子,以巧妙的動畫,優雅的提升用户體驗。
一、滾動條動畫
人們對於網頁超鏈接總是褒貶不一。當你點擊一個鏈接時,它有可能帶你到任何地方,比如從一個產品頁面到一個令人毛骨悚然的街邊古老木偶商店網站,結果欠缺上下關聯性。
書籍用户體驗的一大好處在於它的線性關係。書中的每一章都是為最後做鋪墊的。讀一本經濟學入門書籍時,你必須閲讀第一章以幫助理解第二章的內容。當跳過一個章節,你會發現自己可能錯過了一些東西,因而使自己對之後的內容缺少一定理解。在網頁上,特別是那些較長的網頁,這種情況不經意間就發生了。增加一個滾動動畫效果能夠彌補這種情況:
對比下面的例子:
對比上面“名稱”錨點鏈接的預設行為和下面的動畫行為。跳過內容不再是一種無意識的行為。它是一種確定操作。事實上,Hope Lies at 24 Frames Per Second這個網頁為其移動顯示設置了一個菜單按鈕,能夠帶你去到頁面頂部,但沒有任何動畫。這讓我花費更多時間去弄清楚實際發生了什麼。
小貼士:界面中突兀的變化會讓用户難以處理。不要讓他們迷失,要時刻讓用户知道發生了什麼。
二、狀態的切換
如我們上面看到的,過渡能夠幫助用户瞭解界面的操作步驟和整套流程。沒有什麼比突然變化更顯不自然的了,因為這種突然的變化在真實世界中是不存在的。讓我們看看另一個例子:切換菜單。用户將“+”與增加內容或是展開一個元素的動作聯繫起來。將“+”翻轉45°,“+”變成了被公認為“關閉”的界面元素——“x”。
這種簡單的過渡完全改變了圖標的意義。這樣一個小小的細節意味着兩種不同的體驗感受,一種是用户必須猜測下一步將會發生什麼,另一種是用户明確瞭解icon兩種狀態下表示的意思。如果你問我傾向於哪種,我會覺得狀態切換那個體驗要好得多。同時值得注意的是,加號反轉方向總是與內容呈現動作保持一致,強化了信息的連貫性。
小貼士:讓你的網頁元素在每一狀態下都能易懂。
三、摺疊表單及評論
很多博客和新聞網站上的.評論表單看上去都不是令人愉悦的元素。為什麼呢?因為它們絕大多數都不夠友好,不是嗎?當你準備發表一條評論,你只是單純希望輸入評論而已。相反的,一種典型的表單會問你各種其他無關的東西,非常煩人。
為了促使用户發表更多評論,我們可以摺疊表單,僅僅展現最為關鍵的元素:評論框。當用户點擊輸入框,你可以相應的展開表單。我們可以在紐約時報測試版網站上找到這種進階展開的實際例子。
你可以更進一步,在展開表單時光標聚焦評論框。然而這一方法有一個問題:一個關鍵的交互設計原則是這樣説的,行為應發生在離交互產生最近的地方(焦點附近)。因此我們還可以再進一步,為評論框增加動畫來引導用户注意到評論框上:
你甚至可以將評論框固定至頂部,根據用户的操作展開,展現它下面更多的內容。
正如你看到的,這減少了雜亂同時令評論表單更具吸引力。那麼如果將所有以往評論也摺疊起來呢?
將評論摺疊,並用滾動條表示正文的長度,而不是整個頁面的長度。一個常見的做法就是當用户到達頁面底部的時候自動加載評論。我們應該避免強制用户點擊,除非有更好的理由這樣做。
小貼士:逐步顯示來減少視覺模塊,只保留其本身的精華部分。在用户需要的時候展現。
四、下拉刷新
最為令人興奮的交互之一便是在iPhone發佈後短時間出現的由Loren Brichter開創“下拉刷新”。它允許用户更新滾動顯示的最新內容。你可以在的app上看到這個設想的效果。一旦你滾動到的頂部,再滾動一小段便可以刷新真個信息流。
為什麼它效果如此好呢?在下拉刷新出現前,用户需要點擊瀏覽器的刷新按鈕來加載更多內容。將用户發現更多內容的期望和刷新動作聯繫起來,這個明顯的刷新動作就可以捨棄掉了。
小貼士:將意圖與行為聯繫起來,體驗將變得更加連續無縫。
五、標籤貼靠
標籤貼靠是另一種用户界面組件中精妙且有用的集合同時也是非常有意義的過渡動畫。看下Edenspiekermann工作室的網站在自己的作品展示上怎樣利用這項技術的。
項目的標籤跟隨內容滾動,從而為右側的圖片提供上下文指示,直到下一項出現。這個動畫跟iOS的聯繫人界面很像,他們對於長列表界面的上下文指示特別有用。這個過渡動畫不僅可以幫助快速定位而且流暢的展示了上下文關係。
小貼士:標籤貼靠適用於那種內容無法很好的適配視窗,而描述或標題會給內容增加有價值信息的長列表中。
六、可供性動畫
可供性這個概念來自於認知心理學,它指的是物體可以指示觀察者操作的特殊屬性。
從用户界面設計角度,EU的在線pdf《可用性詞彙表》對“可供性”定義如下:
可供性是用户界面的理想屬性——如此軟件才能自然的引導人們進行正確的步驟來完成他們的操作目標。
視覺上的突起常被用來增強可供性。突起的按鈕暗示按鈕能操作。這個用户體驗的手法被廣泛應用與iOS的拍照軟件中。
IOS 6的鎖屏界面上,照相機icon上下設計了幾條稜線,暗示這裏可以拖拽。因為用户習慣了這種快速打開照相機的方法,蘋果公司在iOS 7裏去掉了稜線的設計,將相機的icon做得更像是一個獨立的按鈕。它的相關操作還是一樣的:拖拽按鈕的時候,鎖屏界面向上彈起,展示下面的照相機界面。這是一個向用户表明界面中產品特徵的非常棒的方法。
小貼士:將元素的可供性設計得更強能引導用户界面中的操作。
七、情境隱藏
iOS上的chrome從最初版本就有這種情境隱藏的例子,它是這樣處理的:
基本理念是當用户自然的向下滑動頁面開始瀏覽時,chrome的導航工具欄會自動隱藏。當用户回滾頁面時,導航工具欄會再次出現。這樣做既使體驗更加情景化(聚焦在內容本身)也增加了屏幕的顯示區域。而後者在移動終端上顯得尤其重要。
潛在的設想是用户會順勢滑動瀏覽他們專注的內容。一旦用户停止滑動頁面,可能就需要變化用户的操作場景了;因此,導航工具欄再次出現。既然這種技術節省了屏幕空間,你可以試一下在你的操作場景裏是否適用。
iOS在這方面更進一步。當你滑動到頁面底部的時候,工具欄也會再次出現。這是一個非常好的動態結合用户在界面操作需求的例子。
小貼士:情境隱藏能強化用户的操作焦點,節省屏幕空間。
八、焦點轉換
大概一週之前,一位多倫多的UI設計師Nikita Vasilyev,有了一個特別巧妙的想法。他開發了一套頁面焦點跳轉的腳本。儘管方案還在實驗階段,但是概念特別有意思。看下下面的視頻。(記得帶上你的耳機——音效也很華麗)。
查看視頻
當用鍵盤切換焦點的時候,用户光點擊Tab鍵無法知道焦點跳到那裏了。這個小的動畫告訴了人們焦點在位於頁面中的何處。動畫雖然很小但對於引導用户卻有非常大的影響。
小貼士:引導用户,不管用户怎樣操作。
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
javascript的return語句的作用
return語句在js中非常的重要,不僅僅具有返回函數值的功能,還具有一些特殊的用法,有個清晰的把握是非常有必要的。下面就結合實例簡單介紹一下return語句的作用。用來返回控制和函數結果:通常情況,return語句對於一個函數是很有必要的`,因為往往需要函數在一系列的代...
-
javascript中的return和閉包函數
複製代碼代碼如下:functionmakefunc(x){returnfunction(){returnx;}}alert(makefunc(0));其實不是不執行,只是朋友的意思這裏alert出來的`應該是“0”,而不是function(){returnx;}。不是腳本寫錯了,只是沒搞懂return,從當前函數退出,並從那個函數返回一個值。如果返...
-
Dreamweaver輸入的文本字體怎樣加粗
Dreamweaver輸入的文本字體怎麼加粗?Dreamweaver中想要加粗輸入的文本,該怎麼加粗呢?這都是最基礎的教程,很簡單,需要的朋友可以參考下,下面就跟隨小編一起來看看吧!Dreamweaver怎麼給字體加粗,下面我們就來看看詳細的.教程。1、打開我的軟件2、文件新建一個3、新建...