隱藏在背后的交互設(shè)計

外行人對交互設(shè)計的第一印象是什么?畫線框圖的?做草稿的?

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

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

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

　　1.信息

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

　　2.互動

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

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

　　具體的形式包括：

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

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

　　流程設(shè)計： 把一個任務(wù)中涉及的頁面信息串聯(lián)起來，使任務(wù)形成一個線性流的關(guān)系

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

　　如今移動互聯(lián)網(wǎng)發(fā)展迅速，移動產(chǎn)品對這些看不見的交互設(shè)計更為注重。因為移動應(yīng)用的使用場景、網(wǎng)絡(luò)環(huán)境、使用心態(tài)都與用戶在使用web產(chǎn)品時有著大大的不同。所以在了解這些看不見的交互設(shè)計時前，需要對移動應(yīng)用的情景有一定的了解。

　　1.使用場景

　　用戶在使用移動產(chǎn)品，有可能會在戶外人多的公眾場合使用，這時候需要特別注意移動應(yīng)用設(shè)計的隱私安全。

　　用戶有可能在家里、在床上、在廁所，用著各種姿態(tài)使用產(chǎn)品，所以對交互的便利性和容錯性要特別注意

　　2.網(wǎng)絡(luò)環(huán)境

　　網(wǎng)絡(luò)環(huán)境是“看不見的交互設(shè)計中”非常關(guān)鍵的一點。用戶會在2G、3G、wifi甚至無聯(lián)網(wǎng)的情況下使用產(chǎn)品，所以對于各種網(wǎng)絡(luò)環(huán)境進行合理的交互設(shè)計是移動產(chǎn)品交互設(shè)計師需要考慮的重中之重

　　3.使用心態(tài)

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

　　在移動產(chǎn)品這種特殊的環(huán)境下，“看不見的交互設(shè)計”會相較于web產(chǎn)品更為重要，特別是針對網(wǎng)絡(luò)環(huán)境和用戶等待的體驗需要特別注意

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

　　總的來講，可以歸結(jié)為三大點：

　　1.加載機制

　　2.刷新機制

　　3.緩存機制

　　加載機制

　　通常情況下，我們使用的絕大部分是網(wǎng)絡(luò)App，他的工作原理是這樣的

　　用戶在客戶端的界面上進行操作，客戶端發(fā)送請求到服務(wù)器，服務(wù)器處理請求，返回數(shù)據(jù)給客戶端，并顯示給用戶

　　其中，客戶端和服務(wù)器的交互過程，用戶是感知不到的，而他確實會耗費時間，在不同的網(wǎng)絡(luò)環(huán)境下耗費的時間也會有所差異，如何讓用戶在這段時間里有友好的體驗?zāi)?這時候“加載過程”起了作用。

　　加載過程的關(guān)鍵可以總結(jié)為：

　　1.讓用戶感知產(chǎn)品正在努力為他運作

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

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

　　進度條是一個針對加載過程很好的設(shè)計

　　動態(tài)的加載進度表示產(chǎn)品正在工作，總進度和當(dāng)前進度能讓用戶及時了解情況，讓用戶能根據(jù)這些信息預(yù)判時間，有了心理預(yù)期

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

　　進度條是web產(chǎn)品時代的產(chǎn)物，還有另外一種加載設(shè)計，就是加載圖標(biāo)

　　由于移動產(chǎn)品請求的數(shù)據(jù)量并不大，所以進度條往往會在一瞬間就完成了，在這種情境下，簡化了加載的設(shè)計，很多移動產(chǎn)品轉(zhuǎn)而使用加載圖標(biāo)來表示加載過程

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

　　頁面加載機制

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

　　方案一：單頁面整體加載

　　這種加載比較簡單，一般運用在頁面內(nèi)容比較單一的情況下，所以直接一次性加載完所有數(shù)據(jù)后再顯示內(nèi)容

　　單頁面加載失敗的狀態(tài)也比較好處理

　　方案二：單頁面分塊加載

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

　　其中又可以分為，模塊間有關(guān)聯(lián)性的，先加載父內(nèi)容，再加載子內(nèi)容

　　如優(yōu)酷，先把欄目加載出來，再加載各欄目的內(nèi)容

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

　　框架固定，內(nèi)容更新的，可先把框架顯示出來，再把各模塊的數(shù)據(jù)各自加載顯示，如各種iOS自帶應(yīng)用，云音樂

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

　　方案三：跨頁面加載

　　父頁面&子頁面 or 同一app內(nèi)，頁面間字段可以復(fù)用的，在加載子頁面時不需要重新加載新數(shù)據(jù)

　　方案四：預(yù)加載

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

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

　　具體的例子有：

　　在瀏覽圖集的時候，當(dāng)看到第一張的圖片時，就自動后臺加載第二第三第四張圖片，用戶瀏覽完第一張圖片切換到第二張時就不會有加載等待的過程

　　在瀏覽新聞列表時，就把每篇新聞的內(nèi)容在后臺進行預(yù)加載，用戶選擇看某篇新聞時，能立刻閱讀到內(nèi)容

　　但是這種方案需要面臨很多的問題，最直接的是流量問題，因為會自動跑掉很多用戶可能根本用不上的數(shù)據(jù)流量，所以一般情況下可以設(shè)定在wifi環(huán)境才采用這種加載模式。又或者設(shè)定加載規(guī)則，只把主要內(nèi)容預(yù)加載，而部分次要內(nèi)容可以在用戶真的用到的時候才加載，例如預(yù)加載新聞?wù)牡那闆r，可以只加載文本信息，圖片信息等到用戶進入內(nèi)頁才加載。這種預(yù)加載與分塊加載結(jié)合的方式也普遍運用在各個場景。

　　另外，預(yù)加載也需要時間的，他只是不在客戶端顯示給用戶，默默在后臺運作而已，需要特殊考慮未加載完用戶就使用到那些信息的情況，所以在做預(yù)加載設(shè)計時需要同時考慮另一種適合該情況的普通加載方式。

　　預(yù)加載需要根據(jù)具體的場景來進行設(shè)計，設(shè)定好信息優(yōu)先級，綜合考慮各種類型信息的具體大小流量，整體考慮預(yù)加載的方式，這些都是需要經(jīng)過精心分析思考的。

　　隨著網(wǎng)絡(luò)環(huán)境的發(fā)展，預(yù)加載將成為以后產(chǎn)品普遍的加載方式，他提供給用戶的無縫使用體驗大大地提升了產(chǎn)品的可用性。

　　操作加載機制

　　除了頁面的信息需要加載，頁面內(nèi)的操作也是需要通過給服務(wù)器發(fā)送請求記錄的

　　方案一：加載層

　　進行一個操作后，彈出模態(tài)的提示層，告知用戶正在加載。

　　采用模態(tài)的提示主要是防止用戶在該過程中進行其他操作，導(dǎo)致當(dāng)前加載出錯。由于采用模態(tài)的提示，并且有可能因為網(wǎng)絡(luò)原因?qū)е麻L時間處于加載狀態(tài)，建議提供一個“關(guān)閉”的操作，中止本次加載，恢復(fù)App可用狀態(tài)。加載失敗時可在當(dāng)前浮層變換為失敗提示。

　　模態(tài)提示層是最穩(wěn)妥的方式，但他會使用戶在使用過程中有打斷的感覺。

　　方案二：控件自身加載狀態(tài)

　　這種方式是把操作加載的狀態(tài)與控件的樣式結(jié)合起來了，對某個控件進行操作后，控件變換為加載狀態(tài)，此時控件不能重復(fù)操作

　　由于這種加載方式是控件的自身狀態(tài)，不影響其他操作，所以用戶也可以對頁面進行其他操作，可能會導(dǎo)致同時有多個請求的情況，增加了加載失敗的風(fēng)險，這也算是這種方式的弊端，不過這種極端情況很少出現(xiàn)。請求失敗后，可配合Toast提示告知用戶失敗的原因。

　　方案三：后臺加載

　　用戶在操作后，客戶端立刻反饋操作成功，然后把請求放到后臺與服務(wù)器交互，這一過程用戶不需要了解，不需要等待，在正常情況下體驗是非常棒的。

　　但是在極端情況下會出現(xiàn)一些莫名其妙的狀況，由于是后臺記錄請求并與服務(wù)器交互，所以實際請求是否成功客戶端是不說明的，全部以操作成功來顯示，這就會導(dǎo)致用戶誤以為操作成功了，但實際上下次來看發(fā)現(xiàn)沒有成功。所以這種加載方式是需要根據(jù)具體使用場景來權(quán)衡使用的，對于一些重要的操作，建議還是使用模態(tài)的方式加載，對于一些小操作，如點贊、訂閱、關(guān)注，可采用后臺加載的方式。

　　刷新機制

　　刷新機制也是設(shè)計師很容易忽略的問題，合理的刷新機制能讓產(chǎn)品使用起來更流暢

　　普遍情況下，刷新機制有以下三種：

　　方案一：手勢刷新

　　通過手指在屏幕上的左劃右劃上劃下劃達到刷新的目的，也包括一些瀏覽器產(chǎn)品的自定義手勢，如橫折折勾，進行刷新

　　最常見的下拉刷新也屬于手勢刷新的一種

　　方案二：點擊刷新

　　通過點擊一個按鈕達到刷新數(shù)據(jù)的目的，但是如今刷新按鈕的存在已經(jīng)成為一種過時的表現(xiàn)，況且在手機那么小的界面上還需要為刷新按鈕騰出空間，會挺費勁的。不過避免形式主義，用得恰到好處才是設(shè)計的精髓，這種刷新方案還是按需使用吧。

　　方案三：自動刷新

　　根據(jù)設(shè)定好的規(guī)則，如時間、事件規(guī)則自動向服務(wù)器獲取新數(shù)據(jù)并替換舊數(shù)據(jù)。使用自動刷新需要根據(jù)場景來考慮是否合適

　　場景一——對于頻繁更新的內(nèi)容、有時效性的內(nèi)容，用戶在一個設(shè)定的時間沒有使用，則可考慮在下次使用時，自動刷新，把新的內(nèi)容推送給用戶

　　類似微博、新聞這種具有時效性的產(chǎn)品，用戶在24小時內(nèi)未打開產(chǎn)品，則在下次打開時幫用戶自動更新Timeline

　　場景二——對于一個相對穩(wěn)定，數(shù)據(jù)不會經(jīng)常變化的頁面，可以考慮設(shè)定時間規(guī)則，在后臺為用戶默默更新數(shù)據(jù)并替換舊數(shù)據(jù)

　　緩存機制

　　“緩存”這個詞在web時代也經(jīng)常聽到，但在移動產(chǎn)品上，他的重要性得到了很好的重視

　　一張圖解釋什么是緩存和緩存的作用

　　“緩存”就是把已經(jīng)加載過的數(shù)據(jù)保存起來，并在下次需要重復(fù)使用的時候，不需要向服務(wù)器加載，直接獲取本地數(shù)據(jù)

　　我理解的“緩存”可如下分類

　　臨時緩存常用于一個功能頁面內(nèi)，保存各欄目的緩存。同一個功能里會把子功能分為多個欄目進行劃分，每個標(biāo)簽欄目下的內(nèi)容在本次使用中都可保存為臨時緩存，在該功能里切換欄目，不需要重新加載數(shù)據(jù)，使用緩存顯示。對于用戶來說，使用時達到了無縫切換瀏覽，對于服務(wù)器來說，在短時間內(nèi)數(shù)據(jù)很少會有更新，所以在一般情況下能滿足用戶的正常需求，并達到體驗優(yōu)秀

　　臨時緩存的清理機制是：退出該功能模塊就清除之前的緩存。也就是說下次進入該功能模塊，需要重新獲取一次數(shù)據(jù)

　　很多時候我們都會用到臨時緩存，因為那些信息真的不是那么重要，而且不需要經(jīng)常反復(fù)查看，那對于那些我們經(jīng)常使用而且經(jīng)常需要反復(fù)查看的信息，我們就會采取固定緩存保存在本地，方便下次翻閱時不需要再一次向服務(wù)器請求數(shù)據(jù)了

　　其中又會細分為可手動清理的緩存，和不可手動清理的緩存

　　第一種是我們最常見的緩存，幾乎所有產(chǎn)品都采用這種緩存方式。平時用戶瀏覽文章、圖集加載的數(shù)據(jù)就以這種形式緩存在本地，下次看回這篇文章、圖集時就不需要加載了。用戶也可以手動把這些緩存清理了，釋放空間。

　　而對于某些特殊場景，例如一些相對固定的數(shù)據(jù)，我們不愿意一開始就打包進App里，這樣會占太大容量，造成產(chǎn)品包很大，也不愿意每次進入頁面都向服務(wù)器加載這些信息，那怎么辦?解決方法就是我們可以只加載一次就永遠存在本地了，這樣安裝包也不會大，以后也不用加載了。

　　例如一些頁面的背景圖，相對固定不常更換，所以在用戶首次進入該頁面時就加載背景圖并保存在本地，這種緩存是不可清理的，下次再進入該頁面就讀取本地緩存顯示即可。

　　這種緩存方案使用得很少，因為場景太少，具體使用場景還有待開發(fā)。

　　對于這些保存在本地的緩存，都是會占空間的，手機的容量是有限的，那產(chǎn)品是通過怎樣的方式清理緩存的呢?

　　大家熟知的有手動清理，一般App都會在“設(shè)置”里提供一個清理緩存的功能，一鍵把空間釋放。除此之外，App最好要設(shè)計自動清理機制。

　　可以通過兩個維度來設(shè)計這個機制。

　　時間

　　通過設(shè)定一個固定的時間，或者根據(jù)用戶使用周期靈活設(shè)定時間來清理緩存。每個產(chǎn)品的場景不一，用戶使用頻率不一，設(shè)定這個機制的時候就需要結(jié)合實際情況考慮了

　　容量

　　一般是設(shè)定一個容量上限，采用堆棧的設(shè)計原理進行緩存清理，溢出堆棧的舊數(shù)據(jù)將自動清除

　　小結(jié)

　　這些“看不見的交互設(shè)計”就是糾結(jié)在那些細節(jié)，但作為交互設(shè)計師千萬不要以為這些是很細小的點，其實他是有大文章可作的。

　　刷新、加載、緩存機制的設(shè)計，我不清楚是否應(yīng)該歸納進交互設(shè)計師的職業(yè)范疇，但是作為一名用戶體驗設(shè)計師，這些點或多或少地影響著用戶的使用體驗，我們都應(yīng)該給予足夠多的重視。

　　這些機制，獨立來看都有現(xiàn)有模式可參考，但是交互設(shè)計師不應(yīng)該把他們割裂地設(shè)計，他們往往是合并在一起時才會有意義。不同機制的結(jié)合，往往有妙用，這就需要設(shè)計師根據(jù)每個產(chǎn)品的不同場景來特殊制定了。

網(wǎng)站標(biāo)題：隱藏在背后的交互設(shè)計
瀏覽路徑：http://www.muchs.cn/news25/169575.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站改版、定制開發(fā)、ChatGPT、搜索引擎優(yōu)化、網(wǎng)站導(dǎo)航

廣告

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