【 設計理論】淺談如何讓你的設計富有未來時尚科技感 - PS筆刷工廠PS筆刷工廠

淺談如何讓你的設計富有未來時尚科技感

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自優設的設計理論類文章，寫教學的作者是情非得已，感謝情非得已提供設計理論的實作教學。

教學大綱:

是因為這些產品、服務在內容、外觀、設計、可用性、功能等方面具有無可匹敵的優勢。其實，所有的這些層面都屬於交互設計的細節，其中一個關鍵點便是動效。

設計理論教學開始

為何有的產品、服務特別受歡迎?

是因為這些產品、服務在內容、外觀、設計、可用性、功能等方面具有無可匹敵的優勢。其實，所有的這些層面都屬於交互設計的細節，其中一個關鍵點便是動效。

本文將介紹幾種常見的動效模式(用GIF圖演示)，分析一下為何這些簡單的設計模式在實際應用中能夠奏效。

當我們設計數碼產品時，我們一般用PS或者Sketch這種設計軟件來進行設計。

了解設計的人明白這樣一個道理：設計不光只是視覺表達。設計也不應該是靜態的。喬布斯說過這樣一句話：

設計並非外觀怎樣，感覺如何。核心在於，它是怎樣工作的。

影響用戶對產品的體驗與印象的因素有很多，交互在其中扮演着關鍵性角色。我們不能再簡單的把用戶界面當成一種靜態界面而設計。我們應該順應互聯網動態的本質，打造更加動態的圖形用戶界面。

好了，廢話不多說，我們來看看，什麼叫做更智能的交互、更精緻的動效。看看這些設計模式是怎樣提高用戶體驗的。

動效滾動

超鏈接是互聯網的雙刃劍，當你點擊鏈接時，你可以在互聯網中任意遨遊，隨心所欲。

可是過度自由好嗎?不見得，比方說你在瀏覽一款精美的產品頁面，然後你點擊了一下頁面中的鏈接，突然導入了一款令人毛骨悚然的木偶商店頁面。這就是超鏈接的弊端，有時候的頁面轉換太突然，缺少過度，讓用戶一時不能接受。

我們可以看看書籍的用戶體驗：故事發展一般是線性的，每一章都和上文有所聯繫。想要閱讀第二章，必須先閱讀第一章，以便大致了解書中的環境與人物關係。如果你”跳章”閱讀，不可避免的會錯過一些關鍵劇情，因此無法理解有些內容。

在網頁設計中，同理，尤其是那種內容比較大，頁面比較長得網站，這種情況經常無意識的發生：用戶會錯過之前的某些關鍵內容，而且又缺少提示，因此很難理解當前內容，通過添加動效滾動，可以修正這一問題。

再來和這種設計比較一下：

第一種動效，錨鏈接的”名稱”會有從左向右移動的行為。這樣進行”跳章”時，用戶便能做好心理準備。因為從”Home”移動到了”Contact”，用戶便能了解，從主頁轉到了聯繫方式頁面。而如果突然轉變，毫無過度的動效，用戶很難理解發生了什麼。

注意：界面的突然改變會讓用戶難以適應，千萬不要這麼設計這不符合用戶的預期。要滿足用戶的預期，同時合理的引導。

狀態切換

正如上面提到的那樣，突然改變，毫無過渡，這樣的局面用戶是無法接受的，我們需要讓界面動態一點，達成圓滑的過度。動效能夠幫助用戶理解界面之間的轉換。我們可以字面的想一下，突然往往不自然，因為太快了，而且現實世界中萬物的運轉也都是緩慢、協調、自然的，很少有突兀的改變。我們再來看看切換菜單。這個”加號”有效的引起了行為召喚，用戶會忍不住點擊，點擊后便側拉出另外一個界面。這時加號會旋轉45度，變成”叉號”，再點一下便回到原頁面。很協調的設計，也符合用戶顯示生活中的預期：加號是添加，叉號是刪除。

這種簡單的過度，需要圖標承載更多的意義。設計師首先需要掌握用戶心理，知曉用戶的預期，然後選擇合適的圖標，在細節上狠下功夫。結果呢?看看上面這個小動圖，這種切換模式非常的友好，而且讓用戶對信息層級有了更深刻的認識。同時，圖標能夠有效的引導用戶操作。

注意：你的頁面元素在各個狀態下都要易於理解。

下拉填表、評論動效

很多網站的填表和評論設計的並不好。為何?因為有時候你只想評論，結果跳轉至其他頁面，填寫了一大堆不相干的個人信息后才能評論。非常煩人。

為了鼓勵用戶評論，增加網站的互動性，我們可以設計一些下拉評論動效。這樣用戶不用切換界面，而且只需填寫最基本的個人信息即可。可以看看下面這個New York Times的網站：

但其實我們可以更進一步，這種設計還有個不便之處：用戶若想評論，還需要拉到頁面最低端進行評論。應該滿足用戶隨時隨地評論的需求。可通過下面的動效實現。

可以把這個評論域固定在頂部，然後根據用戶需求，選擇是否動效顯示。

這樣，就能減少評論時的界面繁雜感，讓人感覺你是誠心誠意邀請用戶評論。而第一種方法需要拉到頁底，加之慣例是由上到下自動載入最新評論，如果一篇文章的評論很多，用戶若想評論，必定要經歷痛苦的翻頁。這就是這個辦法解決的問題。

注意： 有些UI組件可以簡化成最基本的形式，當用戶需要時通過動效來進行拓展。

基於情景的消隱

這是iOS上的Chrome，有着基於情景的消隱動效。

當向下滾動時，導航控件自動消隱。用戶向上滾動時，導航控件出現。優設哥發現這一點上，騰訊網的新聞詳情頁已經採用了。案例圍觀地址(上下滾動鼠標滑輪，注意頁面頂部導航的變化)：http://news.qq.com/a/20131104/001730.htm 。這種方法既能提高瀏覽體驗、也拓展了有限的瀏覽空間。這對於空間限制較大的移動設備來說，尤為重要。

用戶會快速掃描內容，略過不感興趣的內容。當用戶停止快速瀏覽時，說明上面或者當前有用戶感興趣的內容，為了便於導航，導航控件再次出現。這是一種動態的界面。

注意： 基於情景的消隱，目的在於提高用戶的注意力以及節省屏幕空間。

拉動刷新

可能這則動效大家最為熟悉，也就是下拉刷新。通過該動效，用戶可以刷新最新內容。下圖是Twitter的應用，看看是怎樣利用這個動效刷新信息流的。

為什麼這種動效效果如此好?因為下拉刷新是有依據的，首先，桌面時代，用戶就喜歡按刷新鍵來載入新內容。其次用戶渴望把舊內容向下拉開，這樣就給更多的新內容騰出了地方。所以下拉和刷新結合了起來。

注意： 在設計中，將用戶的習慣/預期與行為結合，能打造無縫的體驗。

可接受的轉換

可接受性的概念來自認知學理論，主要面向引導用戶這一問題。

用戶界面需要一種可接受性——軟件界面能夠自然、合乎用戶情理的完成轉換。

我們可在iOS的照相應用中發展這種UX理論。

比如說解鎖漣漪效果，便說明操作有效。這給用戶以提示，用戶便能接受下一步的轉換。然而在iOS7中，蘋果移除了這一特性，因為用戶已經全盤習慣、熟知了這種操作，用戶已經適應了這種轉換，因此動效作為”引導”已經沒有存在的必要。我想這大概就是扁平取代擬物的原因——之前iOS的擬物隱喻眾人熟知，已無引導用戶的必要。但是還是要贊一下曾經的漣漪效果，用戶引導效果非常棒。推薦閱讀《全世界都被拍扁!你應如何理性對待扁平化設計》

注意: 賦予元素高可接受性，能為用戶指明操作方法。

焦點轉換動效

一周前，Nikita Vasilyev，這位多倫多的UI設計師提出了一個理念。寫了一個腳本，賦予焦點元素動效。仍處於試驗中，但是非常有趣，感興趣的可以自行youtube這位仁兄的實驗。

當使用鍵盤進行導航時，用戶按Tab往往無法很好的掌握”自己在頁面中的所處”，這種動效設計會賦予焦點動效，能夠讓轉換更清晰，讓用戶更能明白自己所處的元素位置

這個腳本的地址：http://n12v.com/focus-transition/

注意：引導用戶，無論用戶以何種方式導航，都能一清二楚。

結論

本文例舉的事例不是很多。目的並不是為了展示最新的交互技術，而是要突出一點：一切交互技術的更新、變革，目的都是為了更好的用戶體驗。以提高用戶體驗為出發點，你的設計會更棒。

我們不能固步自封，應該保持探索和實驗。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 淺談如何讓你的設計富有未來時尚科技感