移動(dòng)設(shè)計(jì)八原則

移動(dòng)設(shè)計(jì)八原則

   近幾年，交互設(shè)計(jì)專業(yè)也有了蓬勃發(fā)展，Alan Cooper、Donald Norman等人為交互設(shè)計(jì)提供了許多理論上的支持，Ben Shneiderman 提出的交互設(shè)計(jì)“黃金八法”和Nielsen 的“啟發(fā)式評(píng)估10 條原則”為交互設(shè)計(jì)的評(píng)估提供了標(biāo)準(zhǔn)，所有這些理論和原則在移動(dòng)應(yīng)用的設(shè)計(jì)上依然是通用的。但移動(dòng)應(yīng)用有其特殊性，在設(shè)備和情景上都與普通的設(shè)計(jì)不同。因此，我們?cè)诳紤]其他原則的基礎(chǔ)上，整理了八條移動(dòng)應(yīng)用設(shè)計(jì)的針對(duì)性原則。

一、內(nèi)容優(yōu)先

   對(duì)于手機(jī)而言，屏幕空間資源顯得非常珍貴。為了提升屏幕空間的利用率，界面布局應(yīng)以內(nèi)容為核心，而提供符合用戶期望的內(nèi)容是移動(dòng)應(yīng)用獲得成功的關(guān)鍵。如何設(shè)計(jì)和組織內(nèi)容，使用戶能快速理解移動(dòng)應(yīng)用所提供的內(nèi)容，使內(nèi)容真正有意義，這是非常重要的。
重組內(nèi)容，使內(nèi)容符合移動(dòng)的特征

   在PC 上的網(wǎng)頁內(nèi)容往往相對(duì)復(fù)雜，在進(jìn)行內(nèi)容移動(dòng)化時(shí)，并不合適把內(nèi)容直接照搬到手機(jī)端。在進(jìn)行移動(dòng)應(yīng)用設(shè)計(jì)時(shí)，應(yīng)該重組內(nèi)容，使其符合移動(dòng)應(yīng)用的特征。

移動(dòng)應(yīng)用的內(nèi)容應(yīng)使用用戶的語言，以用戶熟悉的維度來組織內(nèi)容，這樣更容易查找目標(biāo)信息，提升內(nèi)容的利用率；刪除無關(guān)的多余內(nèi)容，讓內(nèi)容更簡(jiǎn)潔清晰，考慮在小屏幕空間可以合理的布局，增加屏幕的利用率；內(nèi)容要是清晰和具體的，是用戶恰好需要的；內(nèi)容要是有情景特征的，可以在不同的情景下給用戶提供不同的情景下的內(nèi)容。
優(yōu)先突出用戶需要的信息，而簡(jiǎn)化界面的導(dǎo)航

   一個(gè)應(yīng)用提供給用戶的信息往往是太多而不是太少，設(shè)計(jì)師們的關(guān)注重點(diǎn)也會(huì)轉(zhuǎn)移到如何讓用戶找到內(nèi)容，而忽略了能給用戶獲得價(jià)值的是內(nèi)容，而不是導(dǎo)航。

書城閱讀軟件

   上圖是兩個(gè)書城閱讀軟件的首頁，左圖應(yīng)用在設(shè)計(jì)上以導(dǎo)航和框架為基礎(chǔ)，用戶想要看到內(nèi)容，則需要再次進(jìn)行操作。而右圖應(yīng)用則直接以用戶要看的內(nèi)容（書）為主體，突出了內(nèi)容的設(shè)計(jì)。

   在移動(dòng)應(yīng)用設(shè)計(jì)時(shí)，我們更為關(guān)注的是用戶需要的內(nèi)容，其次才是導(dǎo)航。在內(nèi)容本身復(fù)雜而多變的時(shí)候，如何讓用戶能更快速地獲取恰當(dāng)?shù)男畔ⅲ谝苿?dòng)情景中會(huì)顯得很重要。

適時(shí)提升屏幕空間的利用率
   即使用戶的視覺注意點(diǎn)集中在內(nèi)容上，在設(shè)計(jì)方面也要把屏幕資源更多的給內(nèi)容而不是導(dǎo)航。只是在恰當(dāng)?shù)臅r(shí)候，可以讓用戶呼出導(dǎo)航即可。

在天貓客戶端的搜索列表界面，當(dāng)用戶剛進(jìn)入搜索列表時(shí)，應(yīng)用會(huì)給用戶顯示篩選和標(biāo)題欄。當(dāng)用戶向上滑動(dòng)列表查看列表中更多內(nèi)容時(shí)，篩選和標(biāo)題欄會(huì)自動(dòng)收起，給出最大的空間來展示用戶需要的內(nèi)容。當(dāng)用戶需要導(dǎo)航時(shí)，向下滾動(dòng)列表就可以顯示出來。在設(shè)計(jì)上充分考慮了內(nèi)容優(yōu)先，只是在恰當(dāng)?shù)臅r(shí)候才顯示導(dǎo)航和篩選等信息。

搜索列表設(shè)計(jì)

二、為觸摸而設(shè)計(jì)

   點(diǎn)擊操作是PC 時(shí)代交互的基礎(chǔ)，在觸屏設(shè)備上基于手指的手勢(shì)操作已經(jīng)代替了鼠標(biāo)的點(diǎn)擊操作。手勢(shì)操作靈活多變、交互自然，但也帶來識(shí)別性差、操作精度不高等缺點(diǎn)，都需要一些手勢(shì)設(shè)計(jì)的基本原則來指導(dǎo)和完善。
以信息架構(gòu)為基礎(chǔ)，建立手勢(shì)交互規(guī)范

   在一個(gè)移動(dòng)應(yīng)用中，手勢(shì)的統(tǒng)一性非常重要。讓用戶在應(yīng)用的任何界面中都知道怎么使用手勢(shì)，并達(dá)到預(yù)期的結(jié)果。這需要設(shè)計(jì)師提供一套基于應(yīng)用信息架構(gòu)的手勢(shì)規(guī)范，它將是導(dǎo)航與交互的基礎(chǔ)。下面我們以Clear 為例來講述一下手勢(shì)的架構(gòu)設(shè)計(jì)。

Clear 的手勢(shì)架構(gòu)

   Clear 這個(gè)應(yīng)用的三層導(dǎo)航架構(gòu)在整個(gè)交互架構(gòu)上，都是以手勢(shì)為基礎(chǔ)。這里可以對(duì)Clear 的交互設(shè)計(jì)進(jìn)行分析。

   第一部分就是它的導(dǎo)航邏輯。它的導(dǎo)航邏輯以手勢(shì)架構(gòu)為基礎(chǔ)，層級(jí)導(dǎo)航向下時(shí)為Tab 點(diǎn)擊，層級(jí)向上返回時(shí)為在List 頂部向下在拖動(dòng)一定距離。整個(gè)應(yīng)用的導(dǎo)航邏輯統(tǒng)一，用戶只要在一個(gè)地方學(xué)會(huì)了操作，在整個(gè)應(yīng)用中都能快速上手。

   第二部分就是細(xì)節(jié)交互。它也是以手勢(shì)為基礎(chǔ)，新增操作就是在列表頂部向上拖動(dòng)一個(gè)項(xiàng)目距離，刪除操作是從右向左拖動(dòng)項(xiàng)目到一定距離，設(shè)置是從左向右拖動(dòng)項(xiàng)目到一定距離。

總的來說，Clear 這款應(yīng)用的導(dǎo)航架構(gòu)與手勢(shì)架構(gòu)邏輯都比較清晰，操作一致性較高，易學(xué)性強(qiáng)。

   在應(yīng)用設(shè)計(jì)時(shí)，完成信息架構(gòu)設(shè)計(jì)后，也要思考應(yīng)用手勢(shì)的架構(gòu)，使基于手勢(shì)的導(dǎo)航能與信息架構(gòu)整合一體，讓用戶方便、快捷地找到內(nèi)容。
優(yōu)先設(shè)計(jì)自然的手勢(shì)交互，而不只是Tap 點(diǎn)擊

   在移動(dòng)應(yīng)用的設(shè)計(jì)過程中，我們可以發(fā)現(xiàn)大多數(shù)的應(yīng)用在手勢(shì)的使用上都是非常保守的，基本上以Tap 點(diǎn)擊為主，模擬在PC 上的操作方式。但是，作為以觸屏為基礎(chǔ)的設(shè)計(jì)，如果只使用Tap 點(diǎn)擊的形式，不能完全體現(xiàn)出自然的交互操作。我們建議在設(shè)計(jì)時(shí)，能更多地思考出一套適合自己應(yīng)用的手勢(shì)交互形式，使用戶在操作的過程中能更自然、更高效。
引導(dǎo)用戶在情景中學(xué)習(xí)手勢(shì)操作

   由于手勢(shì)在界面上是相對(duì)隱藏的操作類型，需要用戶的探索和學(xué)習(xí)。因此，除了基本的用戶都熟知的手勢(shì)外，其他手勢(shì)在使用時(shí)都需要給出提示和引導(dǎo)。手勢(shì)操作基于程序性操作知識(shí)，最好的學(xué)習(xí)方式就是通過實(shí)際操作來理解和記憶。因此在手勢(shì)引導(dǎo)設(shè)計(jì)上，更多的是以指導(dǎo)用戶操作的方式來做，能讓用戶快速掌握。

手勢(shì)引導(dǎo)

   在Fantastical 的操作提示界面中，有一個(gè)藍(lán)色的小點(diǎn)一直從上到下落下，提示用戶向下拖曳來切換視圖。由于結(jié)合了實(shí)際操作，這個(gè)手勢(shì)更容易被記憶。
特殊手勢(shì)不是必須的

   蘋果的Mac OS 提供了很多快捷操作方式及手勢(shì)的交互形式，這些多指的手勢(shì)能讓專家用戶的操作效率得到大幅度提升。新手卻很難記住所有的手勢(shì)，但是這并不影響他們使用Mac 系統(tǒng)，因?yàn)橄到y(tǒng)都提供了滿足于新手的交互解決方案。在移動(dòng)應(yīng)用的設(shè)計(jì)上也會(huì)采用一些個(gè)性化的、不屬于各個(gè)操作系統(tǒng)規(guī)范里定義的手勢(shì)，在某些情景中使用也會(huì)非常合適。但是特殊手勢(shì)應(yīng)作為快捷操作的形式存在，用戶不使用它也能完成任務(wù)。特殊手勢(shì)的使用能提升產(chǎn)品的交互效率，或者給出有趣的體驗(yàn)，但是它們不是必須的。
可觸區(qū)域必須大于7×7 mm，盡量大于 9×9mm

   在觸摸操作設(shè)計(jì)時(shí)，我們已經(jīng)知道在界面中的可觸物理區(qū)域不應(yīng)小于7~9mm。為了讓用戶能在各種情景下都能容易操作，我們建議可觸區(qū)域不應(yīng)小于9mm。但是可觸區(qū)域不同于在屏幕中直接呈現(xiàn)的物理大小，為了視覺及審美的需要，有時(shí)設(shè)計(jì)師會(huì)把屏幕元素設(shè)計(jì)得較小，這也是允許的，實(shí)際的可觸區(qū)域可以大于屏幕元素呈現(xiàn)給我們的大小。我們需要控制可觸區(qū)域的空間，在可觸區(qū)域中都可以觸發(fā)用戶的操作。
手勢(shì)操作要提供過程反饋提示

   在觸屏界面上，由于手勢(shì)操作是隱藏在界面中的，用戶必須去嘗試才能知道真實(shí)的效果如何。因此，在用戶手勢(shì)操作過程中反饋顯得非常重要，他們需要反饋才能知道手勢(shì)是否有效，也才能知道操作后獲得的結(jié)果。

三、轉(zhuǎn)換輸入方式

   文字輸入是移動(dòng)端的軟肋之一，不管是手寫輸入還是鍵盤輸入，操作效率都相對(duì)較低。在行走或者單手操作時(shí)，輸入的出錯(cuò)率也比較高。如何在應(yīng)用設(shè)計(jì)時(shí)避免文字輸入，或者使用一些代替方案來提升輸入效率，在移動(dòng)應(yīng)用設(shè)計(jì)中顯得尤為重要。
減少文本輸入，轉(zhuǎn)化輸入形式

   在數(shù)字輸入過程中，常常會(huì)把文字的輸入轉(zhuǎn)化為基本的手勢(shì)輸入。手勢(shì)操作會(huì)以更快的形式進(jìn)行輸入，提升了輸入的效率。如下面的兩個(gè)例子在移動(dòng)輸入的改進(jìn)方面提供了幫助，天貓客戶端的價(jià)格輸入轉(zhuǎn)化為手勢(shì)拔動(dòng)；在Black Berry 的輸入法中，當(dāng)用戶輸入某個(gè)字母后，系統(tǒng)會(huì)給用戶提供該字符串開始的推薦詞，用戶手指拔動(dòng)就可以完成詞語輸入，省去了后面字符串的點(diǎn)擊輸入，提升了效率。

價(jià)格選擇的手勢(shì)BlackBerry 快捷輸入
簡(jiǎn)化輸入選項(xiàng)，變填空為選擇

   在設(shè)置輸入或者對(duì)于一些已知項(xiàng)目的輸入中，盡量把用戶要輸入的內(nèi)容變成選擇。如已有帳戶的登錄過程，讓用戶選擇而不是輸入。日期、地址等本身可以轉(zhuǎn)化為選擇項(xiàng)的內(nèi)容，盡量使用選擇輸入。盡量把用戶的常用選項(xiàng)篩選出來讓用戶選擇，而不是直接讓用戶輸入。
使用手機(jī)已有的傳感器輸入

   使用語音、掃描識(shí)別（二維碼、條碼、文字等）、LBS 技術(shù)來減少用戶的輸入，給用戶提供便利。我們?cè)谶M(jìn)行輸入設(shè)計(jì)時(shí)，多轉(zhuǎn)換思維，發(fā)揮各個(gè)傳感器的基本特性并靈活運(yùn)用，把難以輸入轉(zhuǎn)化為簡(jiǎn)單智能的輸入形式，使用戶能更便捷地使用。

四、流暢性

   在移動(dòng)應(yīng)用的操作過程中會(huì)碰到多種多樣的情況——找不到目標(biāo)、不知道該怎么操作、操作后沒有及時(shí)反饋，等等，這都會(huì)對(duì)應(yīng)用的流暢性造成影響。在移動(dòng)應(yīng)用的設(shè)計(jì)中主要從三個(gè)方面來考慮應(yīng)用的流暢性，即手指及手勢(shì)的操作流、用戶的注意流和界面反饋的轉(zhuǎn)場(chǎng)流暢性。

流的對(duì)比

   當(dāng)把用戶完成任務(wù)的操作觸點(diǎn)連接起來就能組成一個(gè)完整的操作流，我們可以通過操作路徑來判斷界面的流暢性，操作路徑短能在一定程度上被認(rèn)為是操作效率更高、流暢性更好。用戶在操作界面時(shí)，注視點(diǎn)轉(zhuǎn)移形成的焦點(diǎn)流連起來后就形成了注意流，注意流是否圓滑也是判斷界面是否流暢的重要標(biāo)志。注意流大幅跳躍的界面一般被認(rèn)為是界面元素的布局不夠合理，需要讓界面元素重新布局或者設(shè)計(jì)更好的注意引導(dǎo)機(jī)制，讓注意流更圓滑。在本書的番外篇“流”中我們將探討了一種移動(dòng)應(yīng)用的流設(shè)計(jì)方法，就是在操作流和注意流的基礎(chǔ)上來討論更自然流暢的設(shè)計(jì)體驗(yàn)。

   除了注意流和操作流外，要讓界面保持流暢性，更重要的一條是讓應(yīng)用的界面轉(zhuǎn)場(chǎng)過渡和反饋都是及時(shí)流暢的，轉(zhuǎn)場(chǎng)動(dòng)效的設(shè)計(jì)在《移動(dòng)設(shè)計(jì)》第5 章“細(xì)節(jié)”中會(huì)有詳細(xì)闡述。除了完成理想的動(dòng)效外，設(shè)計(jì)師們?cè)谧鐾暝O(shè)計(jì)后，還需要時(shí)刻跟進(jìn)項(xiàng)目，試用開發(fā)的中間版本，體驗(yàn)應(yīng)用的設(shè)計(jì)是否流暢，及時(shí)調(diào)整界面和轉(zhuǎn)場(chǎng)動(dòng)效中不流暢的地方。

五、多通道設(shè)計(jì)

   多通道設(shè)計(jì)是指系統(tǒng)的輸入和輸出都可以由視覺、聽覺、觸覺等來協(xié)作完成，協(xié)同的多通道界面和交互也會(huì)讓用戶更有真實(shí)感和沉浸感。當(dāng)前各個(gè)系統(tǒng)平臺(tái)下的基礎(chǔ)技術(shù)已經(jīng)越來越成熟，語音輸入、手勢(shì)識(shí)別及其他由多種傳感器組成的綜合識(shí)別系統(tǒng)也會(huì)給用戶帶來更自然的感覺。設(shè)計(jì)師們?cè)谒伎紩r(shí)，也可以從其他通道的角度來思考設(shè)計(jì)，給用戶一個(gè)更好的交互方式。

   多通道的設(shè)計(jì)在多數(shù)情況下都需要有深厚的技術(shù)功底做支持，新創(chuàng)團(tuán)隊(duì)也需要較多的積累才可能達(dá)到。

Chirp

   上圖是兩部手機(jī)正在使用應(yīng)用Chirp 來傳遞圖片的界面，發(fā)起和接收?qǐng)D片使用的信號(hào)是鳥叫聲。發(fā)起方發(fā)出一個(gè)聲音，接收方接收到聲音后，就完成了圖片的傳遞。這是一個(gè)比較生動(dòng)的多通道配合的例子。通過聲音發(fā)送信息的方法是一個(gè)理所當(dāng)然的形式，它和我們對(duì)溝通的理解很一致（不同的鳥叫聲會(huì)傳遞不同的信息），而像藍(lán)牙、Wi- Fi 等復(fù)雜的協(xié)議對(duì)人們來說是看不見的、高深莫測(cè)的、不可愛的，它們讓人困擾或不爽。而通過Chirp得到的結(jié)果卻使設(shè)計(jì)更加有愛。

六、易學(xué)性

   對(duì)于移動(dòng)應(yīng)用產(chǎn)品，提倡的是簡(jiǎn)單、直接的操作，傾向于清晰地表達(dá)產(chǎn)品目標(biāo)和價(jià)值。讓用戶快速學(xué)會(huì)使用，盡量不要讓他們查看幫助文檔。保持界面架構(gòu)簡(jiǎn)單、明了，導(dǎo)航設(shè)計(jì)清晰易理解，操作簡(jiǎn)單可見，通過界面元素的表意的和界面提供的線索就能讓用戶清晰地知道操作方式。只有這樣的設(shè)計(jì)，才能讓用戶的學(xué)習(xí)使用沒有負(fù)擔(dān)，而不是通過幫助系統(tǒng)來教會(huì)用戶操作。

使用前引導(dǎo)

   現(xiàn)在移動(dòng)應(yīng)用的幫助頁面幾乎成了必不可少的元素，在應(yīng)用中都植入了操作引導(dǎo)界面，其實(shí)這完全沒有必要。有些產(chǎn)品會(huì)出于各種原因，不得不設(shè)計(jì)幫助頁面，以免用戶在打開后不清楚應(yīng)用是做什么的、不知道是怎么操作的而放棄使用。其實(shí)這些頁面在設(shè)計(jì)時(shí)就要考慮移動(dòng)端的用戶行為和使用情境，因?yàn)橛脩艨赡軟]有那么多時(shí)間仔細(xì)去看說明，而是試圖快速地了解應(yīng)用本身。許多應(yīng)用更新后，都會(huì)發(fā)現(xiàn)啟動(dòng)頁后有許多幫助內(nèi)容，有些應(yīng)用甚至提供了8、9 屏的內(nèi)容或者各種操作說明，用戶既沒有耐心看，也很難記得住這些操作，我們建議最好不要超過3 屏內(nèi)容，且要有快速退出的操作。

   對(duì)于功能引導(dǎo)設(shè)計(jì)，更好的幫助設(shè)計(jì)是把新功能的提示與產(chǎn)品本身做更完美的結(jié)合，這樣用戶在他剛好要使用的情境下獲得提示，讓用戶感到友好并不突兀，這樣的設(shè)計(jì)更合適。

七、為中斷而設(shè)計(jì)

   在玩手機(jī)時(shí)突然沒電了、寫微博時(shí)又被老板叫去做重要的事情、在搜索商品時(shí)收到了一條重要的信息……在移動(dòng)情境中，被各種其他的事情打斷是很平常的。
保存用戶的操作，減少重復(fù)勞動(dòng)

   網(wǎng)絡(luò)中斷狀態(tài)：移動(dòng)網(wǎng)絡(luò)時(shí)常不穩(wěn)定，當(dāng)用戶在操作過程中，突然斷網(wǎng)則會(huì)給用戶帶來干擾，那是否要在設(shè)計(jì)上考慮保存用戶之前的勞動(dòng)成果呢？如果當(dāng)用戶正在發(fā)送一條評(píng)論內(nèi)容，突然網(wǎng)絡(luò)中斷了，那應(yīng)該如何處理呢？

   在移動(dòng)應(yīng)用上行服務(wù)端數(shù)據(jù)時(shí)，都需要考慮網(wǎng)絡(luò)狀態(tài)出現(xiàn)異常的狀況。例如新浪微博客戶端，當(dāng)博文發(fā)送不成功時(shí)會(huì)暫存到草稿箱中，用戶可以在草稿箱里再次發(fā)送，iPhone 發(fā)送信息不成功，也會(huì)保存內(nèi)容，標(biāo)記為發(fā)送失敗，允許用戶重復(fù)發(fā)送。這都是暫存用戶輸入信息的好案例。在網(wǎng)站狀態(tài)不好時(shí)，應(yīng)用需要保存用戶編輯的內(nèi)容，允許用戶在網(wǎng)絡(luò)狀態(tài)良好時(shí)繼續(xù)發(fā)送，甚至自動(dòng)在后臺(tái)繼續(xù)完成。

   編輯中斷狀態(tài)：當(dāng)用戶在編輯內(nèi)容時(shí)，由于其他的即時(shí)消息或者事件必須中斷當(dāng)前的操作，則已編輯的內(nèi)容該如何處理呢？在手機(jī)文本輸入上還沒有很好的體驗(yàn)，那保存用戶已輸入成果，不丟失用戶輸入的數(shù)據(jù)就顯得尤為重要。

   在Line 等即時(shí)通信工具的對(duì)話輸入界面切換到其他界面，再返回后，信息都一直保存，而不丟失。在編輯內(nèi)容的界面中，要考慮在各種中斷事件后，保存已編輯的內(nèi)容，減少用戶的重復(fù)操作。
銜接用戶的記憶而不是讓用戶重頭開始

   當(dāng)用戶在閱讀時(shí)被打斷，該如何處理返回的狀態(tài)呢？在閱讀狀態(tài)下，基于內(nèi)容可以分為不同的情況：

書籍類的閱讀——用戶再次進(jìn)入界面后，銜接上一次正在閱讀的頁面，而不是書本的首頁。

新聞?lì)惖拈喿x——需要根據(jù)間隔時(shí)間來判斷，超過一天時(shí)間沒有閱讀，再次進(jìn)入后，可以讓用戶選擇是否繼續(xù)閱讀或者返回首頁最新內(nèi)容。若時(shí)間間隔很短，則直接返回之前的頁面內(nèi)容繼續(xù)閱讀。

   對(duì)于閱讀類的應(yīng)用，要判斷用戶是否要持續(xù)閱讀，使內(nèi)容能更好地銜接起來。
無縫切換不同設(shè)備的內(nèi)容

   當(dāng)用戶使用PC 瀏覽了某個(gè)產(chǎn)品的內(nèi)容，之后打開對(duì)應(yīng)的手機(jī)應(yīng)用，如何讓用戶感覺到在不同設(shè)備中訪問同一個(gè)內(nèi)容能無縫銜接？

   Chrome 的手機(jī)瀏覽器可以查看PC 瀏覽器中打開的網(wǎng)頁，讓手機(jī)瀏覽器能快速地瀏覽PC 中已看的內(nèi)容。那對(duì)于同類產(chǎn)品來說也很有必要。很多時(shí)候用戶都是匆匆地切換設(shè)備，但還想繼續(xù)之前的操作，如何能在多個(gè)不同設(shè)備之間無縫切換，會(huì)對(duì)體驗(yàn)的提升產(chǎn)生很重要的作用。用戶可以主動(dòng)發(fā)起內(nèi)容切換到其他的設(shè)備上，也可以在用戶打開應(yīng)用時(shí)，又可以提示用戶“是否要繼續(xù)其他設(shè)備上未完的操作？”未來多設(shè)備的用戶會(huì)越來越多，如何能在這方面提升用戶的切換體驗(yàn)也是值得設(shè)計(jì)師們考慮的。

八、智能有愛

   在E-mail 的設(shè)計(jì)中，郵件內(nèi)容中有“附件”文字時(shí)，如果沒有貼附件，則會(huì)提醒用戶“是否忘記附件了？”這是一個(gè)被大家廣為稱贊的貼心設(shè)計(jì)。在移動(dòng)應(yīng)用的設(shè)計(jì)中，更需要這樣的設(shè)計(jì)來提升應(yīng)用的競(jìng)爭(zhēng)力。評(píng)價(jià)一個(gè)移動(dòng)應(yīng)用體驗(yàn)的好壞，除了要看它是否滿足用戶需求和是否具有友好的可用性之外，能讓用戶感受到驚喜是在移動(dòng)應(yīng)用設(shè)計(jì)中最為推崇的。這樣的設(shè)計(jì)往往是超越了用戶的期望，它的表現(xiàn)是功能、交互或者操作流雖不是用戶預(yù)期的，但是用戶能很好地理解，并更高效、更有趣地完成任務(wù)。移動(dòng)應(yīng)用的設(shè)計(jì)應(yīng)是驚喜有趣、智能高效和貼心的。讓人驚喜的有趣的設(shè)計(jì)主要是通過設(shè)計(jì)手法來實(shí)現(xiàn)的。設(shè)計(jì)師是一個(gè)生活的觀察家，對(duì)生活中有趣和美的事物有非常好的積累，當(dāng)需要在產(chǎn)品設(shè)計(jì)中表現(xiàn)時(shí)，會(huì)時(shí)常把這類好的想法遷移過來。

……

   智能高效的設(shè)計(jì)主要是通過設(shè)計(jì)師們對(duì)移動(dòng)設(shè)備的特點(diǎn)和產(chǎn)品使用情境做深刻分析后才會(huì)產(chǎn)生的結(jié)果。

Line 通過手機(jī)掃碼登錄PC 客戶端

   Line 在手機(jī)與PC 切換時(shí)，設(shè)計(jì)了一個(gè)二維碼掃描登錄功能。設(shè)計(jì)師們要去發(fā)現(xiàn)用戶的使用情境與行為表現(xiàn)，例如用戶在電腦邊上時(shí)，更希望能通過電腦來使用Line，以提升操作效率。

   同時(shí)設(shè)計(jì)師們也要去分析移動(dòng)設(shè)備的特點(diǎn)，發(fā)揮移動(dòng)的特點(diǎn)來解決這個(gè)切換的問題。貼心的設(shè)計(jì)往往會(huì)幫用戶提前想到一些事情，并滿足用戶還未意識(shí)到的需求，在用戶在犯錯(cuò)誤的時(shí)候能自動(dòng)彌補(bǔ)、糾正用戶的操作，并給出溫馨的提醒。例如，Sync.ME（原名Smartsync）是一個(gè)很有趣的社交信息同步應(yīng)用。當(dāng)朋友給你打電話時(shí)，該應(yīng)用會(huì)將其最新的Facebook 狀態(tài)或照片顯示在手機(jī)屏幕上，讓你提前知道朋友最近的狀態(tài)。然后你如果看到朋友最新滑雪的照片，那么你接電話就可以說：“怎么樣，滑雪玩的爽不爽？”

Sync.ME 在來電時(shí)提示來電者的狀態(tài)更新

   總之，設(shè)計(jì)在很多時(shí)候都是靠靈感的閃現(xiàn)，移動(dòng)應(yīng)用的設(shè)計(jì)則更加的靈活多變，如何能更好地設(shè)計(jì)出一個(gè)應(yīng)用，沒有具體的方法和成規(guī)。但是，為了能更好地避免設(shè)計(jì)師們走彎路，設(shè)計(jì)原則的學(xué)習(xí)是有必要的，它給了設(shè)計(jì)師們一定的參考和指導(dǎo)。各個(gè)移動(dòng)平臺(tái)提供的設(shè)計(jì)是各大公司累積的移動(dòng)設(shè)計(jì)的重要經(jīng)驗(yàn)的集合，可以給我們很多的參考和啟發(fā)，在學(xué)習(xí)了這些平臺(tái)的設(shè)計(jì)原則后，我們總結(jié)下上述八條移動(dòng)應(yīng)用設(shè)計(jì)原則，希望可以為移動(dòng)應(yīng)用的設(shè)計(jì)提供幫助。

原則一——內(nèi)容優(yōu)先：界面布局應(yīng)以內(nèi)容為核心，提供符合用戶期望的內(nèi)容。

原則二——為觸摸而設(shè)計(jì)：界面的交互系統(tǒng)以自然手勢(shì)為基礎(chǔ)建構(gòu)，符合人體工學(xué)并保持一致性。

原則三——轉(zhuǎn)換輸入方式：使用各種手機(jī)的設(shè)備特性和設(shè)計(jì)手段，減少在應(yīng)用內(nèi)的文字輸入。

原則四——流暢性：保持應(yīng)用交互的手指及手勢(shì)的操作流、用戶的注意流和界面反饋轉(zhuǎn)場(chǎng)的流暢性。

原則五——多通道設(shè)計(jì)：發(fā)揮設(shè)備的多通道特性、協(xié)同的多通道界面和交互，讓用戶更有真實(shí)感和沉浸感

原則六——易學(xué)性：保持界面架構(gòu)簡(jiǎn)單、明了，導(dǎo)航設(shè)計(jì)清晰易理解，操作簡(jiǎn)單可見，通過界面元素的表意的和界面提供的線索就能讓用戶清楚地知道其操作方式。

原則七——為中斷而設(shè)計(jì)：考慮應(yīng)用的使用情境，確保在各個(gè)產(chǎn)出中斷的情境下，讓用戶恢復(fù)之前的操作，保持用戶的勞動(dòng)付出。

原則八——智能有愛：給用戶提供讓他感到驚喜有趣的、智能高效的、貼心的設(shè)計(jì)。

作者簡(jiǎn)介

傅小貞，浙大心理系畢業(yè)，03年起在UT斯達(dá)康，中國(guó)移動(dòng)研究院，淘寶網(wǎng)等多家公司從事移動(dòng)交互設(shè)計(jì)和用戶研究工作，曾組建過淘寶移動(dòng)設(shè)計(jì)團(tuán)隊(duì)，領(lǐng)導(dǎo)淘寶移動(dòng)主站和主客戶端的設(shè)計(jì)；現(xiàn)負(fù)責(zé)斯凱UXC部門，推動(dòng)冒泡系列產(chǎn)品設(shè)計(jì)。

胡甲超，交互設(shè)計(jì)師，來自阿里UX團(tuán)隊(duì)。06年加入阿里巴巴，從事過網(wǎng)站、桌面軟件、無線客戶端的交互設(shè)計(jì)，參與了阿里軟件、淘寶Android客戶端、阿里旺旺等產(chǎn)品的設(shè)計(jì)。在移動(dòng)領(lǐng)域擁有多平臺(tái)的設(shè)計(jì)經(jīng)驗(yàn)，關(guān)注跨界設(shè)計(jì)和移動(dòng)體驗(yàn)創(chuàng)新。

鄭元攏，無線領(lǐng)域設(shè)計(jì)專家，一線實(shí)戰(zhàn)經(jīng)驗(yàn)豐富。目前任職于淘寶，從事無線方面的創(chuàng)意產(chǎn)品設(shè)計(jì)，負(fù)責(zé)過淘寶系列產(chǎn)品移動(dòng)端的交互設(shè)計(jì)。


本文節(jié)選自《移動(dòng)設(shè)計(jì)》一書

傅小貞胡甲超鄭元攏著
電子工業(yè)出版社出版