隱藏在背後的交互設計

 　　外行人對交互設計的第一印象是什麼?畫線框圖的?做草稿的?

　　的確，大家所看到交互設計師的日常工作成果都是一些線框圖，從表面上理解的確是這樣。

　　其實，交互設計師做的遠遠不止這些。往深一步想，信息架構、界面、流程，都是設計師需要考慮的問題。下面，想談一下我理解的交互設計。

　　交互設計最重要的兩個因素：信息&互動

　　一：信息

　　人們每天面對那麼多信息，在雜亂的信息中篩選出對用戶有價值的，呈現給用戶，幫助用戶做選擇，指引用戶完成任務。信息的篩選直接影響著用戶使用，在用戶需要的時候無法提供有用的信息，將導致任務無法進行下去。所以信息是交互設計師需要關注的第一要素。

　　二：互動

　　有了信息後，就需要設計用戶如何與這些信息進行互動了。信息的分類、布局將影響用戶與信息的交互。用戶獲取信息後，做出了反應，采取了行動，應用也需要有來有往地給予足夠的反饋，來協助用戶完成任務。

　　以上2要素，都是從用戶直觀感受上去體現的，也就是說往往是表現在用戶界面上。我們可以把它稱之為“看得見的交互設計”。

　　具體的形式包括：

　　信息架構：把篩選好的信息進行分類，通過頁面來承載這些信息，並且把信息(頁面)的層次規劃好

　　界面設計：把信息在一個頁面上進行布局

　　流程設計：把一個任務中涉及的頁面信息串聯起來，使任務形成一個線性流的關系

　　以上三個關鍵點，是對交互設計師的基本要求，很多情況下，非專業人員也能做得7788，但還有一部分的交互設計，並不是直觀能看到的，也許用戶會輕微感受到，但他總在不經意間使用戶使用得更加流暢。我們可以把它稱之為“看不見的交互設計”。而這些看不見的交互設計，也是初級交互設計師容易忽略的。

　　如今移動互聯網發展迅速，移動產品對這些看不見的交互設計更為注重。因為移動應用的使用場景、網絡環境、使用心態都與用戶在使用web產品時有著大大的不同。所以在了解這些看不見的交互設計時前，需要對移動應用的情景有一定的了解。

　　1.使用場景

　　用戶在使用移動產品，有可能會在戶外人多的公眾場合使用，這時候需要特別注意移動應用設計的隱私安全。

　　用戶有可能在家裡、在床上、在廁所，用著各種姿態使用產品，所以對交互的便利性和容錯性要特別注意

　　2.網絡環境

　　網絡環境是“看不見的交互設計中”非常關鍵的一點。用戶會在2G、3G、wifi甚至無聯網的情況下使用產品，所以對於各種網絡環境進行合理的交互設計是移動產品交互設計師需要考慮的重中之重

　　3.使用心態

　　產品的存在是為了解決用戶的問題，而移動產品是用戶的貼身工具，當用戶需要時，能立刻開始運作，需要快速、直接、有效，用戶不喜歡等待。有研究結果表示：

　　在移動產品這種特殊的環境下，“看不見的交互設計”會相較於web產品更為重要，特別是針對網絡環境和用戶等待的體驗需要特別注意

　　下面將展開討論一下“看不見的交互設計”

　　總的來講，可以歸結為三大點：

　　1.加載機制

　　2.刷新機制

　　3.緩存機制

　　加載機制

　　通常情況下，我們使用的絕大部分是網絡App，他的工作原理是這樣的：

　　用戶在客戶端的界面上進行操作，客戶端發送請求到服務器，服務器處理請求，返回數據給客戶端，並顯示給用戶。

　　其中，客戶端和服務器的交互過程，用戶是感知不到的，而他確實會耗費時間，在不同的網絡環境下耗費的時間也會有所差異，如何讓用戶在這段時間裡有友好的體驗呢?這時候“加載過程”起了作用。

　　加載過程的關鍵可以總結為：

　　1.讓用戶感知產品正在努力為他運作

　　2.讓用戶有基本的心理預期需要等待的時間長短

　　3.讓用戶在無聊的等待中獲得更多樂趣

　　進度條是一個針對加載過程很好的設計。

　　動態的加載進度表示產品正在工作，總進度和當前進度能讓用戶及時了解情況，讓用戶能根據這些信息預判時間，有了心理預期。

　　有趣的進度條設計or在加載過程中展示一些功能介紹提示(常用於游戲)能有效減少用戶等待時的焦躁心理，也能有效地提高用戶的容忍度。

　　這裡我們收集了幾組不同風格但同樣有趣的進度條，你可以找下靈感。

　　進度條是web產品時代的產物，還有另外一種加載設計，就是加載圖標

　　由於移動產品請求的數據量並不大，所以進度條往往會在一瞬間就完成了，在這種情境下，簡化了加載的設計，很多移動產品轉而使用加載圖標來表示加載過程

　　以上為兩種比較常用的加載方式，下面將具體介紹他們與移動產品結合的用法

　　1、頁面加載機制

　　移動產品的信息都是通過頁面來承載的，頁面的加載方案設計是交互設計師面臨的一個重要難題。

　　方案一：單頁面整體加載

　　這種加載比較簡單，一般運用在頁面內容比較單一的情況下，所以直接一次性加載完所有數據後再顯示內容。

　　單頁面加載失敗的狀態也比較好處理。

　　方案二：單頁面分塊加載

　　這種方案的特點是，能讓用戶逐步看到內容，在這個漸進的過程中降低用戶的焦慮心理。

　　其中又可以分為，模塊間有關聯性的，先加載父內容，再加載子內容。

　　如優酷，先把欄目加載出來，再加載各欄目的內容。

　　模塊間沒有絕對關聯性的，可獨自加載各自模塊內容，根據請求的速度不同分別顯示。這樣處理有一定幾率讓用戶在沒完全刷出數據的情況下就能找到自己需要的功能，如大眾點評、淘寶客戶端。

　　框架固定，內容更新的，可先把框架顯示出來，再把各模塊的數據各自加載顯示，如各種iOS自帶應用，雲音樂。

　　這種分模塊加載的需要特別注意加載失敗的狀態，畢竟每個模塊都提示加載失敗，點擊重試是很挫的一件事，可以根據信息的優先級來決定哪些數據失敗了采用默認狀態，哪些數據采用失敗提示。

　　方案三：跨頁面加載

　　父頁面&子頁面 or 同一app內，頁面間字段可以復用的，在加載子頁面時不需要重新加載新數據。

　　方案四：預加載

　　這種加載方式的特點是，在加載一個頁面內容的同時，預測用戶的下一步行為，並為他下一步需要使用的頁面加載內容，使得他在下一步的操作中能立刻獲取信息而不需要加載等待。

　　預加載提供給用戶無縫的產品使用體驗，使得用戶在使用產品的過程中更直接流暢，沒有被打斷的感覺。

　　具體的例子有：

　　在浏覽圖集的時候，當看到第一張的圖片時，就自動後台加載第二第三第四張圖片，用戶浏覽完第一張圖片切換到第二張時就不會有加載等待的過程。

　　在浏覽新聞列表時，就把每篇新聞的內容在後台進行預加載，用戶選擇看某篇新聞時，能立刻閱讀到內容。

　　但是這種方案需要面臨很多的問題，最直接的是流量問題，因為會自動跑掉很多用戶可能根本用不上的數據流量，所以一般情況下可以設定在wifi環境才采用這種加載模式。又或者設定加載規則，只把主要內容預加載，而部分次要內容可以在用