2014-11-19 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( m.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
外行人對(duì)交互設(shè)計(jì)的第一印象是什么？畫(huà)線框圖的？做草稿的？
的確，大家所看到交互設(shè)計(jì)師的日常工作成果都是一些線框圖，從表面上理解的確是這樣。
其實(shí)，交互設(shè)計(jì)師做的遠(yuǎn)遠(yuǎn)不止這些。往深一步想，信息架構(gòu)、界面、流程，都是設(shè)計(jì)師需要考慮的問(wèn)題。下面，想談一下我理解的交互設(shè)計(jì)。
/
交互設(shè)計(jì)最重要的兩個(gè)因素：信息&互動(dòng)
人們每天面對(duì)那么多信息，在雜亂的信息中篩選出對(duì)用戶(hù)有價(jià)值的，呈現(xiàn)給用戶(hù)，幫助用戶(hù)做選擇，指引用戶(hù)完成任務(wù)。信息的篩選直接影響著用戶(hù)使用，在用戶(hù)需要的時(shí)候無(wú)法提供有用的信息，將導(dǎo)致任務(wù)無(wú)法進(jìn)行下去。所以信息是交互設(shè)計(jì)師需要關(guān)注的第一要素。
有了信息后，就需要設(shè)計(jì)用戶(hù)如何與這些信息進(jìn)行互動(dòng)了。信息的分類(lèi)、布局將影響用戶(hù)與信息的交互。用戶(hù)獲取信息后，做出了反應(yīng)，采取了行動(dòng)，應(yīng)用也需要有來(lái)有往地給予足夠的反饋，來(lái)協(xié)助用戶(hù)完成任務(wù)。
/
以上2要素，都是從用戶(hù)直觀感受上去體現(xiàn)的，也就是說(shuō)往往是表現(xiàn)在用戶(hù)界面上。我們可以把它稱(chēng)之為“看得見(jiàn)的交互設(shè)計(jì)”。
具體的形式包括：
信息架構(gòu)：把篩選好的信息進(jìn)行分類(lèi)，通過(guò)頁(yè)面來(lái)承載這些信息，并且把信息（頁(yè)面）的層次規(guī)劃好
界面設(shè)計(jì)：把信息在一個(gè)頁(yè)面上進(jìn)行布局
流程設(shè)計(jì)：把一個(gè)任務(wù)中涉及的頁(yè)面信息串聯(lián)起來(lái)，使任務(wù)形成一個(gè)線性流的關(guān)系
以上三個(gè)關(guān)鍵點(diǎn)，是對(duì)交互設(shè)計(jì)師的基本要求，很多情況下，非專(zhuān)業(yè)人員也能做得7788，但還有一部分的交互設(shè)計(jì)，并不是直觀能看到的，也許用戶(hù)會(huì)輕微感受到，但他總在不經(jīng)意間使用戶(hù)使用得更加流暢。我們可以把它稱(chēng)之為“看不見(jiàn)的交互設(shè)計(jì)”。而這些看不見(jiàn)的交互設(shè)計(jì)，也是初級(jí)交互設(shè)計(jì)師容易忽略的。
/
如今移動(dòng)互聯(lián)網(wǎng)發(fā)展迅速，移動(dòng)產(chǎn)品對(duì)這些看不見(jiàn)的交互設(shè)計(jì)更為注重。因?yàn)橐苿?dòng)應(yīng)用的使用場(chǎng)景、網(wǎng)絡(luò)環(huán)境、使用心態(tài)都與用戶(hù)在使用web產(chǎn)品時(shí)有著大大的不同。所以在了解這些看不見(jiàn)的交互設(shè)計(jì)時(shí)前，需要對(duì)移動(dòng)應(yīng)用的情景有一定的了解。
用戶(hù)在使用移動(dòng)產(chǎn)品，有可能會(huì)在戶(hù)外人多的公眾場(chǎng)合使用，這時(shí)候需要特別注意移動(dòng)應(yīng)用設(shè)計(jì)的隱私安全。
用戶(hù)有可能在家里、在床上、在廁所，用著各種姿態(tài)使用產(chǎn)品，所以對(duì)交互的便利性和容錯(cuò)性要特別注意
網(wǎng)絡(luò)環(huán)境是“看不見(jiàn)的交互設(shè)計(jì)中”非常關(guān)鍵的一點(diǎn)。用戶(hù)會(huì)在2G、3G、wifi甚至無(wú)聯(lián)網(wǎng)的情況下使用產(chǎn)品，所以對(duì)于各種網(wǎng)絡(luò)環(huán)境進(jìn)行合理的交互設(shè)計(jì)是移動(dòng)產(chǎn)品交互設(shè)計(jì)師需要考慮的重中之重
產(chǎn)品的存在是為了解決用戶(hù)的問(wèn)題，而移動(dòng)產(chǎn)品是用戶(hù)的貼身工具，當(dāng)用戶(hù)需要時(shí)，能立刻開(kāi)始運(yùn)作，需要快速、直接、有效，用戶(hù)不喜歡等待。有研究結(jié)果表示：
/
在移動(dòng)產(chǎn)品這種特殊的環(huán)境下，“看不見(jiàn)的交互設(shè)計(jì)”會(huì)相較于web產(chǎn)品更為重要，特別是針對(duì)網(wǎng)絡(luò)環(huán)境和用戶(hù)等待的體驗(yàn)需要特別注意
下面將展開(kāi)討論一下“看不見(jiàn)的交互設(shè)計(jì)”
總的來(lái)講，可以歸結(jié)為三大點(diǎn)：
1.加載機(jī)制
2.刷新機(jī)制
3.緩存機(jī)制
/
/
通常情況下，我們使用的絕大部分是網(wǎng)絡(luò)App，他的工作原理是這樣的
用戶(hù)在客戶(hù)端的界面上進(jìn)行操作，客戶(hù)端發(fā)送請(qǐng)求到服務(wù)器，服務(wù)器處理請(qǐng)求，返回?cái)?shù)據(jù)給客戶(hù)端，并顯示給用戶(hù)
其中，客戶(hù)端和服務(wù)器的交互過(guò)程，用戶(hù)是感知不到的，而他確實(shí)會(huì)耗費(fèi)時(shí)間，在不同的網(wǎng)絡(luò)環(huán)境下耗費(fèi)的時(shí)間也會(huì)有所差異，如何讓用戶(hù)在這段時(shí)間里有友好的體驗(yàn)?zāi)兀窟@時(shí)候“加載過(guò)程”起了作用。
/
加載過(guò)程的關(guān)鍵可以總結(jié)為：
1.讓用戶(hù)感知產(chǎn)品正在努力為他運(yùn)作
2.讓用戶(hù)有基本的心理預(yù)期需要等待的時(shí)間長(zhǎng)短
3.讓用戶(hù)在無(wú)聊的等待中獲得更多樂(lè)趣
/
進(jìn)度條是一個(gè)針對(duì)加載過(guò)程很好的設(shè)計(jì)
動(dòng)態(tài)的加載進(jìn)度表示產(chǎn)品正在工作，總進(jìn)度和當(dāng)前進(jìn)度能讓用戶(hù)及時(shí)了解情況，讓用戶(hù)能根據(jù)這些信息預(yù)判時(shí)間，有了心理預(yù)期
有趣的進(jìn)度條設(shè)計(jì)or在加載過(guò)程中展示一些功能介紹提示（常用于游戲）能有效減少用戶(hù)等待時(shí)的焦躁心理，也能有效地提高用戶(hù)的容忍度
/
進(jìn)度條是web產(chǎn)品時(shí)代的產(chǎn)物，還有另外一種加載設(shè)計(jì)，就是加載圖標(biāo)
由于移動(dòng)產(chǎn)品請(qǐng)求的數(shù)據(jù)量并不大，所以進(jìn)度條往往會(huì)在一瞬間就完成了，在這種情境下，簡(jiǎn)化了加載的設(shè)計(jì)，很多移動(dòng)產(chǎn)品轉(zhuǎn)而使用加載圖標(biāo)來(lái)表示加載過(guò)程
以上為兩種比較常用的加載方式，下面將具體介紹他們與移動(dòng)產(chǎn)品結(jié)合的用法
/
移動(dòng)產(chǎn)品的信息都是通過(guò)頁(yè)面來(lái)承載的，頁(yè)面的加載方案設(shè)計(jì)是交互設(shè)計(jì)師面臨的一個(gè)重要難題
這種加載比較簡(jiǎn)單，一般運(yùn)用在頁(yè)面內(nèi)容比較單一的情況下，所以直接一次性加載完所有數(shù)據(jù)后再顯示內(nèi)容
單頁(yè)面加載失敗的狀態(tài)也比較好處理
/
這種方案的特點(diǎn)是，能讓用戶(hù)逐步看到內(nèi)容，在這個(gè)漸進(jìn)的過(guò)程中降低用戶(hù)的焦慮心理
其中又可以分為，模塊間有關(guān)聯(lián)性的，先加載父內(nèi)容，再加載子內(nèi)容
如優(yōu)酷，先把欄目加載出來(lái)，再加載各欄目的內(nèi)容
模塊間沒(méi)有絕對(duì)關(guān)聯(lián)性的，可獨(dú)自加載各自模塊內(nèi)容，根據(jù)請(qǐng)求的速度不同分別顯示。這樣處理有一定幾率讓用戶(hù)在沒(méi)完全刷出數(shù)據(jù)的情況下就能找到自己需要的功能，如大眾點(diǎn)評(píng)、淘寶客戶(hù)端
框架固定，內(nèi)容更新的，可先把框架顯示出來(lái)，再把各模塊的數(shù)據(jù)各自加載顯示，如各種iOS自帶應(yīng)用，云音樂(lè)
這種分模塊加載的需要特別注意加載失敗的狀態(tài)，畢竟每個(gè)模塊都提示加載失敗，點(diǎn)擊重試是很挫的一件事，可以根據(jù)信息的優(yōu)先級(jí)來(lái)決定哪些數(shù)據(jù)失敗了采用默認(rèn)狀態(tài)，哪些數(shù)據(jù)采用失敗提示
/
父頁(yè)面&子頁(yè)面 or 同一app內(nèi)，頁(yè)面間字段可以復(fù)用的，在加載子頁(yè)面時(shí)不需要重新加載新數(shù)據(jù)
/
這種加載方式的特點(diǎn)是，在加載一個(gè)頁(yè)面內(nèi)容的同時(shí)，預(yù)測(cè)用戶(hù)的下一步行為，并為他下一步需要使用的頁(yè)面加載內(nèi)容，使得他在下一步的操作中能立刻獲取信息而不需要加載等待。
預(yù)加載提供給用戶(hù)無(wú)縫的產(chǎn)品使用體驗(yàn)，使得用戶(hù)在使用產(chǎn)品的過(guò)程中更直接流暢，沒(méi)有被打斷的感覺(jué)。
具體的例子有：
在瀏覽圖集的時(shí)候，當(dāng)看到第一張的圖片時(shí)，就自動(dòng)后臺(tái)加載第二第三第四張圖片，用戶(hù)瀏覽完第一張圖片切換到第二張時(shí)就不會(huì)有加載等待的過(guò)程
在瀏覽新聞列表時(shí)，就把每篇新聞的內(nèi)容在后臺(tái)進(jìn)行預(yù)加載，用戶(hù)選擇看某篇新聞時(shí)，能立刻閱讀到內(nèi)容
/
但是這種方案需要面臨很多的問(wèn)題，最直接的是流量問(wèn)題，因?yàn)闀?huì)自動(dòng)跑掉很多用戶(hù)可能根本用不上的數(shù)據(jù)流量，所以一般情況下可以設(shè)定在wifi環(huán)境才采用這種加載模式。又或者設(shè)定加載規(guī)則，只把主要內(nèi)容預(yù)加載，而部分次要內(nèi)容可以在用戶(hù)真的用到的時(shí)候才加載，例如預(yù)加載新聞?wù)牡那闆r，可以只加載文本信息，圖片信息等到用戶(hù)進(jìn)入內(nèi)頁(yè)才加載。這種預(yù)加載與分塊加載結(jié)合的方式也普遍運(yùn)用在各個(gè)場(chǎng)景。
另外，預(yù)加載也需要時(shí)間的，他只是不在客戶(hù)端顯示給用戶(hù)，默默在后臺(tái)運(yùn)作而已，需要特殊考慮未加載完用戶(hù)就使用到那些信息的情況，所以在做預(yù)加載設(shè)計(jì)時(shí)需要同時(shí)考慮另一種適合該情況的普通加載方式。
預(yù)加載需要根據(jù)具體的場(chǎng)景來(lái)進(jìn)行設(shè)計(jì)，設(shè)定好信息優(yōu)先級(jí)，綜合考慮各種類(lèi)型信息的具體大小流量，整體考慮預(yù)加載的方式，這些都是需要經(jīng)過(guò)精心分析思考的。
隨著網(wǎng)絡(luò)環(huán)境的發(fā)展，預(yù)加載將成為以后產(chǎn)品普遍的加載方式，他提供給用戶(hù)的無(wú)縫使用體驗(yàn)大大地提升了產(chǎn)品的可用性。
/
除了頁(yè)面的信息需要加載，頁(yè)面內(nèi)的操作也是需要通過(guò)給服務(wù)器發(fā)送請(qǐng)求記錄的
進(jìn)行一個(gè)操作后，彈出模態(tài)的提示層，告知用戶(hù)正在加載。
采用模態(tài)的提示主要是防止用戶(hù)在該過(guò)程中進(jìn)行其他操作，導(dǎo)致當(dāng)前加載出錯(cuò)。由于采用模態(tài)的提示，并且有可能因?yàn)榫W(wǎng)絡(luò)原因?qū)е麻L(zhǎng)時(shí)間處于加載狀態(tài)，建議提供一個(gè)“關(guān)閉”的操作，中止本次加載，恢復(fù)App可用狀態(tài)。加載失敗時(shí)可在當(dāng)前浮層變換為失敗提示。
模態(tài)提示層是最穩(wěn)妥的方式，但他會(huì)使用戶(hù)在使用過(guò)程中有打斷的感覺(jué)。
/
這種方式是把操作加載的狀態(tài)與控件的樣式結(jié)合起來(lái)了，對(duì)某個(gè)控件進(jìn)行操作后，控件變換為加載狀態(tài)，此時(shí)控件不能重復(fù)操作
由于這種加載方式是控件的自身狀態(tài)，不影響其他操作，所以用戶(hù)也可以對(duì)頁(yè)面進(jìn)行其他操作，可能會(huì)導(dǎo)致同時(shí)有多個(gè)請(qǐng)求的情況，增加了加載失敗的風(fēng)險(xiǎn)，這也算是這種方式的弊端，不過(guò)這種極端情況很少出現(xiàn)。請(qǐng)求失敗后，可配合Toast提示告知用戶(hù)失敗的原因。
/
用戶(hù)在操作后，客戶(hù)端立刻反饋操作成功，然后把請(qǐng)求放到后臺(tái)與服務(wù)器交互，這一過(guò)程用戶(hù)不需要了解，不需要等待，在正常情況下體驗(yàn)是非常棒的。
但是在極端情況下會(huì)出現(xiàn)一些莫名其妙的狀況，由于是后臺(tái)記錄請(qǐng)求并與服務(wù)器交互，所以實(shí)際請(qǐng)求是否成功客戶(hù)端是不說(shuō)明的，全部以操作成功來(lái)顯示，這就會(huì)導(dǎo)致用戶(hù)誤以為操作成功了，但實(shí)際上下次來(lái)看發(fā)現(xiàn)沒(méi)有成功。所以這種加載方式是需要根據(jù)具體使用場(chǎng)景來(lái)權(quán)衡使用的，對(duì)于一些重要的操作，建議還是使用模態(tài)的方式加載，對(duì)于一些小操作，如點(diǎn)贊、訂閱、關(guān)注，可采用后臺(tái)加載的方式。
/
/
刷新機(jī)制也是設(shè)計(jì)師很容易忽略的問(wèn)題，合理的刷新機(jī)制能讓產(chǎn)品使用起來(lái)更流暢
普遍情況下，刷新機(jī)制有以下三種：
通過(guò)手指在屏幕上的左劃右劃上劃下劃達(dá)到刷新的目的，也包括一些瀏覽器產(chǎn)品的自定義手勢(shì)，如橫折折勾，進(jìn)行刷新
最常見(jiàn)的下拉刷新也屬于手勢(shì)刷新的一種
/
通過(guò)點(diǎn)擊一個(gè)按鈕達(dá)到刷新數(shù)據(jù)的目的，但是如今刷新按鈕的存在已經(jīng)成為一種過(guò)時(shí)的表現(xiàn)，況且在手機(jī)那么小的界面上還需要為刷新按鈕騰出空間，會(huì)挺費(fèi)勁的。不過(guò)避免形式主義，用得恰到好處才是設(shè)計(jì)的精髓，這種刷新方案還是按需使用吧。
/
根據(jù)設(shè)定好的規(guī)則，如時(shí)間、事件規(guī)則自動(dòng)向服務(wù)器獲取新數(shù)據(jù)并替換舊數(shù)據(jù)。使用自動(dòng)刷新需要根據(jù)場(chǎng)景來(lái)考慮是否合適
場(chǎng)景一——對(duì)于頻繁更新的內(nèi)容、有時(shí)效性的內(nèi)容，用戶(hù)在一個(gè)設(shè)定的時(shí)間沒(méi)有使用，則可考慮在下次使用時(shí)，自動(dòng)刷新，把新的內(nèi)容推送給用戶(hù)
類(lèi)似微博、新聞這種具有時(shí)效性的產(chǎn)品，用戶(hù)在24小時(shí)內(nèi)未打開(kāi)產(chǎn)品，則在下次打開(kāi)時(shí)幫用戶(hù)自動(dòng)更新Timeline
場(chǎng)景二——對(duì)于一個(gè)相對(duì)穩(wěn)定，數(shù)據(jù)不會(huì)經(jīng)常變化的頁(yè)面，可以考慮設(shè)定時(shí)間規(guī)則，在后臺(tái)為用戶(hù)默默更新數(shù)據(jù)并替換舊數(shù)據(jù)
/
/
“緩存”這個(gè)詞在web時(shí)代也經(jīng)常聽(tīng)到，但在移動(dòng)產(chǎn)品上，他的重要性得到了很好的重視
一張圖解釋什么是緩存和緩存的作用
“緩存”就是把已經(jīng)加載過(guò)的數(shù)據(jù)保存起來(lái)，并在下次需要重復(fù)使用的時(shí)候，不需要向服務(wù)器加載，直接獲取本地?cái)?shù)據(jù)
我理解的“緩存”可如下分類(lèi)
臨時(shí)緩存常用于一個(gè)功能頁(yè)面內(nèi)，保存各欄目的緩存。同一個(gè)功能里會(huì)把子功能分為多個(gè)欄目進(jìn)行劃分，每個(gè)標(biāo)簽欄目下的內(nèi)容在本次使用中都可保存為臨時(shí)緩存，在該功能里切換欄目，不需要重新加載數(shù)據(jù)，使用緩存顯示。對(duì)于用戶(hù)來(lái)說(shuō)，使用時(shí)達(dá)到了無(wú)縫切換瀏覽，對(duì)于服務(wù)器來(lái)說(shuō)，在短時(shí)間內(nèi)數(shù)據(jù)很少會(huì)有更新，所以在一般情況下能滿(mǎn)足用戶(hù)的正常需求，并達(dá)到體驗(yàn)優(yōu)秀
臨時(shí)緩存的清理機(jī)制是：退出該功能模塊就清除之前的緩存。也就是說(shuō)下次進(jìn)入該功能模塊，需要重新獲取一次數(shù)據(jù)
很多時(shí)候我們都會(huì)用到臨時(shí)緩存，因?yàn)槟切┬畔⒄娴牟皇悄敲粗匾也恍枰?jīng)常反復(fù)查看，那對(duì)于那些我們經(jīng)常使用而且經(jīng)常需要反復(fù)查看的信息，我們就會(huì)采取固定緩存保存在本地，方便下次翻閱時(shí)不需要再一次向服務(wù)器請(qǐng)求數(shù)據(jù)了
其中又會(huì)細(xì)分為可手動(dòng)清理的緩存，和不可手動(dòng)清理的緩存
第一種是我們最常見(jiàn)的緩存，幾乎所有產(chǎn)品都采用這種緩存方式。平時(shí)用戶(hù)瀏覽文章、圖集加載的數(shù)據(jù)就以這種形式緩存在本地，下次看回這篇文章、圖集時(shí)就不需要加載了。用戶(hù)也可以手動(dòng)把這些緩存清理了，釋放空間。
而對(duì)于某些特殊場(chǎng)景，例如一些相對(duì)固定的數(shù)據(jù)，我們不愿意一開(kāi)始就打包進(jìn)App里，這樣會(huì)占太大容量，造成產(chǎn)品包很大，也不愿意每次進(jìn)入頁(yè)面都向服務(wù)器加載這些信息，那怎么辦？解決方法就是我們可以只加載一次就永遠(yuǎn)存在本地了，這樣安裝包也不會(huì)大，以后也不用加載了。
例如一些頁(yè)面的背景圖，相對(duì)固定不常更換，所以在用戶(hù)首次進(jìn)入該頁(yè)面時(shí)就加載背景圖并保存在本地，這種緩存是不可清理的，下次再進(jìn)入該頁(yè)面就讀取本地緩存顯示即可。
這種緩存方案使用得很少，因?yàn)閳?chǎng)景太少，具體使用場(chǎng)景還有待開(kāi)發(fā)。
/
對(duì)于這些保存在本地的緩存，都是會(huì)占空間的，手機(jī)的容量是有限的，那產(chǎn)品是通過(guò)怎樣的方式清理緩存的呢？
大家熟知的有手動(dòng)清理，一般App都會(huì)在“設(shè)置”里提供一個(gè)清理緩存的功能，一鍵把空間釋放。除此之外，App最好要設(shè)計(jì)自動(dòng)清理機(jī)制。
可以通過(guò)兩個(gè)維度來(lái)設(shè)計(jì)這個(gè)機(jī)制。
時(shí)間
通過(guò)設(shè)定一個(gè)固定的時(shí)間，或者根據(jù)用戶(hù)使用周期靈活設(shè)定時(shí)間來(lái)清理緩存。每個(gè)產(chǎn)品的場(chǎng)景不一，用戶(hù)使用頻率不一，設(shè)定這個(gè)機(jī)制的時(shí)候就需要結(jié)合實(shí)際情況考慮了
容量
一般是設(shè)定一個(gè)容量上限，采用堆棧的設(shè)計(jì)原理進(jìn)行緩存清理，溢出堆棧的舊數(shù)據(jù)將自動(dòng)清除
/
/
這些“看不見(jiàn)的交互設(shè)計(jì)”就是糾結(jié)在那些細(xì)節(jié)，但作為交互設(shè)計(jì)師千萬(wàn)不要以為這些是很細(xì)小的點(diǎn)，其實(shí)他是有大文章可作的。
刷新、加載、緩存機(jī)制的設(shè)計(jì)，我不清楚是否應(yīng)該歸納進(jìn)交互設(shè)計(jì)師的職業(yè)范疇，但是作為一名用戶(hù)體驗(yàn)設(shè)計(jì)師，這些點(diǎn)或多或少地影響著用戶(hù)的使用體驗(yàn)，我們都應(yīng)該給予足夠多的重視。
這些機(jī)制，獨(dú)立來(lái)看都有現(xiàn)有模式可參考，但是交互設(shè)計(jì)師不應(yīng)該把他們割裂地設(shè)計(jì)，他們往往是合并在一起時(shí)才會(huì)有意義。不同機(jī)制的結(jié)合，往往有妙用，這就需要設(shè)計(jì)師根據(jù)每個(gè)產(chǎn)品的不同場(chǎng)景來(lái)特殊制定了。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.gyxygd.cn