本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第六章譯文精選的第二部分，其余章節(jié)將陸續(xù)放出。上一篇：Wow體驗(yàn) – 第六章 – 交互模型與創(chuàng)新的產(chǎn)品概念(1)

全文由C7210自發(fā)翻譯(編譯)，并首發(fā)于Beforweb.com，如需轉(zhuǎn)載，請(qǐng)注明譯者及出處信息。英文原書版權(quán)由Apress所有，中文引進(jìn)版的版權(quán)由相關(guān)出版社所有。

面對(duì)競爭對(duì)手的產(chǎn)品，積極主動(dòng)地尋求具有差異化的用戶體驗(yàn)設(shè)計(jì)之道——這個(gè)過程會(huì)順理成章地引出“標(biāo)志性的交互模式”這一話題。所謂“標(biāo)志性的交互模式”，就是指那些能夠幫助用戶對(duì)你的應(yīng)用產(chǎn)品及公司品牌產(chǎn)生辨識(shí)和認(rèn)知效應(yīng)的獨(dú)特交互模式。

這項(xiàng)工作并不意味著要在現(xiàn)有的產(chǎn)品設(shè)計(jì)開發(fā)流程當(dāng)中做出某種額外的技術(shù)投入，它所關(guān)系到的是一種能夠在設(shè)計(jì)方案當(dāng)中體現(xiàn)出來的觀念模式和設(shè)計(jì)目標(biāo)。其實(shí)，打造具有差異化的用戶體驗(yàn)這個(gè)過程本身就是對(duì)標(biāo)志性的交互模式的定義，只不過我們一直以來所討論的對(duì)象都是單一的應(yīng)用產(chǎn)品。如果你所在的公司或團(tuán)隊(duì)同時(shí)擁有數(shù)款系列化的應(yīng)用產(chǎn)品，那么你在系統(tǒng)層面的全局化設(shè)計(jì)思路就必須同時(shí)擴(kuò)展到其他產(chǎn)品及相關(guān)功能當(dāng)中。這也意味著你需要擴(kuò)展交互模型設(shè)計(jì)方案的作用范圍；其中的每一個(gè)設(shè)計(jì)決策都有可能影響到產(chǎn)品家族當(dāng)中的其他成員。

打造標(biāo)志性的交互模式

回顧一下我們?cè)?a >前文中探索的網(wǎng)狀列表交互模型，其中，網(wǎng)格單元的展開瀏覽方式以及相應(yīng)的操作手勢的運(yùn)用，其實(shí)算得上是一種標(biāo)志性的交互模式了。當(dāng)時(shí)，我們的主要目的還是解決文字內(nèi)容無法完整顯示的問題；現(xiàn)在，站在產(chǎn)品全局的角度進(jìn)行思考，我們還可以將這樣的交互模式通過怎樣的方式運(yùn)用在哪些地方呢？不妨在導(dǎo)航方面試試它的可行性。假設(shè)這個(gè)網(wǎng)狀列表其實(shí)是應(yīng)用中的導(dǎo)航結(jié)構(gòu)，其中每一個(gè)單元格都對(duì)應(yīng)著一個(gè)導(dǎo)航項(xiàng)，那么這種展開并瀏覽的交互方式用在這里是否得當(dāng)呢？答案是肯定的。

圖 6-11 通過雙指張開的方式展開一個(gè)導(dǎo)航項(xiàng)，超過一定程度之后，格子自動(dòng)擴(kuò)展為全屏

圖 6-12 將交互模型文檔化

案例學(xué)習(xí)

接下來，我們將通過一個(gè)虛擬案例來進(jìn)一步理解這些理論知識(shí)在實(shí)際工作中的運(yùn)用方法，并籍此梳理出一套具有普遍適用性的工作模型。案例中的客戶和產(chǎn)品都是虛構(gòu)出來的，我們將通過完整的交互模型設(shè)計(jì)過程來了解實(shí)戰(zhàn)中的設(shè)計(jì)思路和問題解決方式。

X公司

首先，讓我們假設(shè)出一個(gè)客戶，也就是X公司。該公司目前有一款桌面軟件產(chǎn)品，并且已經(jīng)在相關(guān)市場中取得了一定的成功。X公司最近意識(shí)到，他們必須通過一款iPhone應(yīng)用來打入移動(dòng)市場，以保持公司業(yè)績的增長。另外，來自用戶的呼聲以及投資方的壓力也迫使著他們必須盡快地做出這方面的決策。

X公司了解到你是一名出色的移動(dòng)應(yīng)用交互設(shè)計(jì)師，所以決定把這個(gè)項(xiàng)目外包給你做。他們希望最終的產(chǎn)品可以在應(yīng)用商店中一鳴驚人，并一舉戰(zhàn)勝他們的競爭對(duì)手剛剛推出的一款同類應(yīng)用。

X公司的主要業(yè)務(wù)方向是文化娛樂。在他們的桌面應(yīng)用中，用戶可以瀏覽那些來自各方面內(nèi)容源的文娛信息。內(nèi)容形式以視頻為主，音頻和圖片也會(huì)占一定的比重。這款桌面應(yīng)用能夠很好地組織和管理大量的內(nèi)容，使用戶可以很輕松地檢索到自己感興趣的信息。比起競爭對(duì)手而言，這也是X公司所具有的優(yōu)勢。

現(xiàn)在，X公司面臨著新的挑戰(zhàn)：雖然他們的桌面應(yīng)用很棒，但要對(duì)其進(jìn)行移動(dòng)化改造，使之成為一款同樣成功的iPhone應(yīng)用，卻不是一件很容易的事。桌面應(yīng)用的用戶界面當(dāng)中有大量按鈕一類的控制元素，而且它們顯然都是針對(duì)鍵鼠輸入方式而設(shè)計(jì)的。在內(nèi)容的組織與瀏覽方面，導(dǎo)航結(jié)構(gòu)多數(shù)都超過了三層。

X公司的需求

了解了這些背景情況之后，你就可以著手準(zhǔn)備實(shí)際的設(shè)計(jì)工作了。首先，你要根據(jù)客戶的實(shí)際需求來定義產(chǎn)品的核心功能。經(jīng)過了與X公司相關(guān)決策者的訪談交流，并對(duì)其桌面應(yīng)用做了進(jìn)一步的了解之后，你認(rèn)識(shí)到，他們的iPhone應(yīng)用需要滿足以下幾個(gè)方面的需求：

• 幫助用戶訪問內(nèi)容庫當(dāng)中的全部信息。
• 為用戶提供一種機(jī)制，幫助他們快速高效地發(fā)現(xiàn)新內(nèi)容。
• 用戶可以將內(nèi)容分享給朋友。
• 用戶可以對(duì)內(nèi)容發(fā)表評(píng)論。
• 用戶可以發(fā)布他們?cè)趇Phone上創(chuàng)作或拍攝到的內(nèi)容，并通過內(nèi)容庫分享給全部用戶。

這些需求目標(biāo)已經(jīng)得到了X公司相關(guān)團(tuán)隊(duì)及決策人員的確認(rèn)。雖然其桌面應(yīng)用的很多功能并沒有體現(xiàn)在這個(gè)列表中，但是根據(jù)移動(dòng)應(yīng)用上下文環(huán)境中的用戶實(shí)際需求來看，目前的這些功能已經(jīng)足夠了。

明確了產(chǎn)品需求，我們就可以對(duì)工作流的組織方式進(jìn)行構(gòu)思了。在這方面，最好多花些時(shí)間和心思，從細(xì)節(jié)層面對(duì)工作流進(jìn)行深入地挖掘與定義，這樣做可以使接下來所創(chuàng)建的交互模型能夠最大程度地發(fā)揮出自身的潛力和價(jià)值。

這份需求列表可以幫我們看出這款應(yīng)用的本質(zhì)。其中，絕大部分需求與內(nèi)容有著直接的關(guān)聯(lián)，而類似分享和評(píng)論這樣的輔助功能也是依托于內(nèi)容的基礎(chǔ)之上的。所以我們可以得出結(jié)論，內(nèi)容是這款應(yīng)用在功能與用戶體驗(yàn)等方面的核心。當(dāng)你與客戶進(jìn)行溝通交流的時(shí)候，還會(huì)對(duì)一些將要在后續(xù)工作當(dāng)中面對(duì)的關(guān)鍵問題有所預(yù)見。例如，我們可以了解到，對(duì)于這款以內(nèi)容檢索和瀏覽為核心的應(yīng)用來說，用戶所做出的交互行為多數(shù)是為了獲取內(nèi)容而在層級(jí)化的信息結(jié)構(gòu)中進(jìn)行的導(dǎo)航操作。

要將這一點(diǎn)體現(xiàn)在工作流文檔中，有兩種方式供我們選擇。一是在文檔中準(zhǔn)確地反映出涉及內(nèi)容瀏覽和導(dǎo)航的層級(jí)結(jié)構(gòu)；另外還可以將這方面的工作流簡化成為文檔中的一個(gè)節(jié)點(diǎn)。讓我們通過一張流程圖來看看這兩種方式之間的區(qū)別(見圖 6-13)：

圖 6-13流程圖被簡化前后的信息結(jié)構(gòu)對(duì)比

這給我們帶來了一個(gè)值得思考的問題：究竟是否有必要將工作流完整無缺地體現(xiàn)在文檔中？ 這個(gè)問題的答案還要視具體情況而定。對(duì)于那些會(huì)對(duì)用戶界面設(shè)計(jì)方案產(chǎn)生直接影響的交互流程 ，你需要在文檔中將它們盡可能完整而詳細(xì)地體現(xiàn)出來。而對(duì)于那些有可能在用戶界面設(shè)計(jì)過程中得到一定程度簡化的交互流程，不妨直接在工作流文檔中將它們打包成為一個(gè)節(jié)點(diǎn)，避免工作流的組織方式被復(fù)雜化。

在當(dāng)前的案例中，我們需要為用戶提供一種機(jī)制，幫助他們?cè)谝苿?dòng)應(yīng)用的上下文環(huán)境中快速高效地發(fā)現(xiàn)并瀏覽內(nèi)容?？梢灶A(yù)見的是，為了實(shí)現(xiàn)這個(gè)需求，我們必須在將來的某個(gè)設(shè)計(jì)環(huán)節(jié)當(dāng)中將桌面版應(yīng)用原有的信息結(jié)構(gòu)進(jìn)行最大程度地簡化，例如可以在構(gòu)建交互模型時(shí)，將內(nèi)容的導(dǎo)航與瀏覽整合到同一個(gè)交互過程當(dāng)中。在這種情況下，我們完全可以選擇簡化版的流程圖來指導(dǎo)我們接下來的工作(見圖 6-14)。

圖 6-14 做出了信息結(jié)構(gòu)會(huì)被簡化的預(yù)見之后，采用簡化版本的流程圖

隨著核心需求的基本工作流被逐步確定，我們也能越發(fā)清晰地看到，這個(gè)案例帶給我們的一個(gè)很大的挑戰(zhàn)，就是能否找到一種與移動(dòng)應(yīng)用上下文環(huán)境的關(guān)聯(lián)更加緊密的方式，來幫助用戶獲取內(nèi)容。接下來，我們將帶著這個(gè)問題進(jìn)入到交互模型的構(gòu)建階段。

應(yīng)用的細(xì)節(jié)

為了能夠在X公司的iPhone應(yīng)用中實(shí)現(xiàn)更加合理的內(nèi)容瀏覽機(jī)制，你決定首先從他們的桌面應(yīng)用入手，進(jìn)行更加細(xì)致的分析。經(jīng)過一番實(shí)際的使用，你發(fā)現(xiàn)，在桌面應(yīng)用當(dāng)中，內(nèi)容被劃分為十個(gè)主類別，其中每個(gè)類別之下都有十個(gè)左右的子類，而每一個(gè)子類當(dāng)中又包含著若干獨(dú)立的內(nèi)容對(duì)象。整個(gè)系統(tǒng)當(dāng)中大約有幾千個(gè)內(nèi)容節(jié)點(diǎn)。

桌面應(yīng)用中的交互模型是很容易理解的。它會(huì)向用戶呈現(xiàn)一個(gè)網(wǎng)格狀的選項(xiàng)列表，其中每個(gè)單元格都對(duì)應(yīng)著一個(gè)內(nèi)容主類別。選擇了其中的某個(gè)主類之后，整個(gè)列表會(huì)被刷新，這個(gè)主類所包含的子類會(huì)依次填充到每個(gè)單元格當(dāng)中。繼續(xù)選擇其中的某個(gè)子類，整個(gè)列表會(huì)再次刷新，并且被這個(gè)子類所對(duì)應(yīng)的內(nèi)容對(duì)象重新填充。這些內(nèi)容對(duì)象通?？梢蕴顫M多個(gè)界面，你可以不同的界面中切換瀏覽。

另外，這款桌面應(yīng)用在導(dǎo)航方面做的不是很理想。用戶必須至少進(jìn)入到子類列表界面之后才能發(fā)現(xiàn)一個(gè)所謂的全局導(dǎo)航，而且當(dāng)你深入到內(nèi)容層面之后，會(huì)發(fā)現(xiàn)這個(gè)導(dǎo)航只能幫你回到頂級(jí)的主類列表界面。另外，在內(nèi)容層面當(dāng)中缺乏必要的上下文指示，用戶很難發(fā)現(xiàn)當(dāng)前的內(nèi)容對(duì)象從屬于哪個(gè)子類。

在你對(duì)這些流程進(jìn)行實(shí)際體驗(yàn)的時(shí)候，要記得將自己的觀察和想法及時(shí)地記錄下來。這些記錄也許會(huì)對(duì)交互模型的創(chuàng)建起到重要的指導(dǎo)作用。正像我們?cè)诹斜砟Ｐ透脑炀毩?xí)當(dāng)中了解到的，某些在表面看來無關(guān)緊要的零星想法，卻有可能被擴(kuò)展成為很有價(jià)值的交互概念。在某些情況下，你完全可以將那些從觀察記錄里歸納出的想法加入到交互模型文檔當(dāng)中。

根據(jù)當(dāng)前案例的實(shí)際情況，你有針對(duì)性地在內(nèi)容層級(jí)結(jié)構(gòu)這方面做了特別的記錄與分析；這些信息將對(duì)交互模型的構(gòu)建方案產(chǎn)生決定性的影響。目前，我們對(duì)于內(nèi)容結(jié)構(gòu)的理解大致是這樣的(見圖 6-15)：

圖 6-15 X公司桌面應(yīng)用當(dāng)中的內(nèi)容結(jié)構(gòu)

桌面應(yīng)用的交互模型當(dāng)中有一個(gè)很嚴(yán)重的問題。正如我們?cè)谇拔漠?dāng)中了解到的，當(dāng)用戶處于內(nèi)容層面的時(shí)候，必須首先通過全局導(dǎo)航回到主類列表界面，才能再次進(jìn)入子類列表界面或是某個(gè)子類當(dāng)中的內(nèi)容對(duì)象列表界面。而這只是眾多問題當(dāng)中的一個(gè)。你現(xiàn)在還不清楚桌面應(yīng)用當(dāng)中的這種網(wǎng)狀模型能否適用于iPhone的用戶體驗(yàn)?zāi)Ｊ健?/p>

既然我們已經(jīng)在之前的練習(xí)中打造過一個(gè)網(wǎng)狀模型，那么不妨試著對(duì)這個(gè)概念進(jìn)行再利用，并且將我們先前定義好的交互機(jī)制運(yùn)用到當(dāng)前案例的信息結(jié)構(gòu)當(dāng)中。(見圖 6-16)。

圖 6-16 在網(wǎng)狀模型中，從主類列表界面導(dǎo)航至子類列表界面

由于具有幾乎相同的網(wǎng)格結(jié)構(gòu)，這個(gè)交互模型與X公司的桌面應(yīng)用在體驗(yàn)方面是具有很大相似之處的。對(duì)于那些已經(jīng)熟悉了桌面應(yīng)用的用戶來說，這是好事。不過畢竟，這種模型在小屏幕設(shè)備當(dāng)中受到的空間局限還是很大的。在iPhone當(dāng)中，我們最多只能使用3行3列的網(wǎng)格，而在桌面應(yīng)用中，網(wǎng)格可以達(dá)到10行15列，具體的列數(shù)還會(huì)隨著顯示器的規(guī)格不同而變化。

正像我們之前在模型改造練習(xí)當(dāng)中定義過的，用戶可以通過雙指張開的方式展開網(wǎng)格單元，也可以直接點(diǎn)擊單元格進(jìn)入下層結(jié)構(gòu)。不過在當(dāng)前的案例中，我們要降低第一種方式當(dāng)中的那個(gè)狀態(tài)閥值，使系統(tǒng)在接收到雙指張開的手勢之后，能夠立刻將單元格進(jìn)行擴(kuò)展，直至全屏狀態(tài)。

這個(gè)交互過程中的關(guān)鍵要素就是單元格在展開時(shí)所表現(xiàn)出的過渡動(dòng)畫效果。我們希望給用戶帶來一種感覺，仿佛每一層界面都是嵌套在上一層界面當(dāng)中的一個(gè)網(wǎng)格單元里的；當(dāng)用戶使用雙指對(duì)某個(gè)單元格進(jìn)行展開操作的時(shí)候，可以看到下層界面正在從格子當(dāng)中呈現(xiàn)出來，并隨著單元格的擴(kuò)展而填滿全屏。這種視覺交互效果可以準(zhǔn)確地體現(xiàn)出這款應(yīng)用的信息組織方式，而且對(duì)用戶來說，這種交互模式也是非常直觀的。

遺憾的是，這個(gè)模型當(dāng)中還存在一些弊端，例如回到上層結(jié)構(gòu)的導(dǎo)航方式問題。使用相反的操作手勢，也就是雙指捏合的方式進(jìn)行回退操作是具有一定的可行性的，但是對(duì)于內(nèi)容較為復(fù)雜的界面來說，這種交互方式的視覺效果缺乏干凈利落的感覺。所以，網(wǎng)格模型的概念也許可以在某些特定的需求當(dāng)中發(fā)揮其真正的潛力，但它似乎不適合當(dāng)前案例中的應(yīng)用?？梢哉f，這種交互模型的擴(kuò)展性并不是很強(qiáng)，我們無法將它很好地運(yùn)用到一些常見的需求當(dāng)中。

另外，這個(gè)交互模型是一種典型的雙手解決方案，用戶必須一手持機(jī)，同時(shí)使用另外一只手進(jìn)行相關(guān)操作。這種交互方式本身談不上不好，但是考慮到最終產(chǎn)品所處的移動(dòng)上下文環(huán)境，這并不是一個(gè)很理想的模式。

對(duì)于當(dāng)前的案例，有沒有其他更加適用的交互模型呢？讓我們回過頭來重新思考一下常規(guī)列表的可能性。傳統(tǒng)的單列縱向列表非常便于單手操作，而且很適合用來展現(xiàn)層級(jí)化的信息結(jié)構(gòu)。這種特性幾乎使其成為了iPhone當(dāng)中最具普遍適用性的導(dǎo)航方案。不過也正是因?yàn)樗倪m用性太強(qiáng)，所以通過這種方式打造的交互方案通常會(huì)缺乏足夠的創(chuàng)新性。有什么辦法可以幫助我們以全新的方式來使用傳統(tǒng)的列表模型呢？

在之前的練習(xí)中，我們?cè)?jīng)對(duì)單列縱向列表進(jìn)行過天馬行空般的改造，這次，我們不妨在保持標(biāo)準(zhǔn)列表原貌的基礎(chǔ)上尋求一些局部當(dāng)中的改進(jìn)方法。在實(shí)際產(chǎn)品中，我們不能僅僅為了標(biāo)新立異而刻意吹捧差異化的原則，尤其是不能在還有相關(guān)問題沒有得到解決的情況下片面地采用并不適宜的方案。在當(dāng)前的案例中，網(wǎng)格模型不能很好地幫助用戶實(shí)現(xiàn)回退方面的導(dǎo)航功能，而且不便于單手操作。另外，正像我們?cè)谇拔漠?dāng)中提到的，目前的桌面應(yīng)用當(dāng)中還存在著其他方面的問題，例如在內(nèi)容層面當(dāng)中缺乏必要的上下文指示，用戶很難發(fā)現(xiàn)當(dāng)前的內(nèi)容對(duì)象從屬于哪個(gè)子類，而且當(dāng)你深入到內(nèi)容層面之后，只能通過現(xiàn)有的導(dǎo)航機(jī)制回到頂級(jí)的主類列表界面等等。接下來，我們將致力于打造一個(gè)能夠解決所有這些問題的新模型。

圖 6-17 擁有獨(dú)特交互方式的傳統(tǒng)單列縱向列表。用戶可以在某個(gè)列表項(xiàng)中向左輕掃，使原本處于隱藏狀態(tài)的二級(jí)列表結(jié)構(gòu)呈現(xiàn)在這個(gè)列表項(xiàng)當(dāng)中。

這個(gè)解決方案第一眼看上去很普通，也很容易理解，它似乎就是一個(gè)內(nèi)容類別列表。然而這個(gè)模型在很多方面都與iOS當(dāng)中的標(biāo)準(zhǔn)列表有所區(qū)別。用戶在前兩層信息結(jié)構(gòu)當(dāng)中進(jìn)行導(dǎo)航操作的時(shí)候，整個(gè)列表的視圖模式是不會(huì)發(fā)生變化的。當(dāng)用戶選擇了某個(gè)主類之后，對(duì)應(yīng)的子類列表會(huì)直接出現(xiàn)在這個(gè)主類所在的列表項(xiàng)當(dāng)中。這個(gè)過程所涉及到的狀態(tài)變化只會(huì)發(fā)生在當(dāng)前列表項(xiàng)的可視區(qū)域里。用戶可以在這個(gè)列表項(xiàng)區(qū)域當(dāng)中通過上下滾動(dòng)的方式來瀏覽子類列表，而當(dāng)前區(qū)域以外的部分則始終保持不變，也就是說，用戶無需離開當(dāng)前界面就能隨時(shí)訪問其他主類當(dāng)中的子級(jí)分類。

我們可以讓用戶通過向左輕掃的方式將子類列表“拖入”主類所在的列表項(xiàng)可視區(qū)域當(dāng)中，也可以讓他們對(duì)某個(gè)其他位置上的目標(biāo)對(duì)象進(jìn)行相關(guān)操作，來觸發(fā)某種動(dòng)畫效果，使子類列表移入可視區(qū)域。你可以對(duì)各種方式進(jìn)行構(gòu)思和嘗試，并從中找到一種操作體驗(yàn)最自然的、誤操作幾率最低的來加以使用。

這種交互模型在導(dǎo)航和瀏覽方面的效率很高，用戶可以在同一個(gè)界面當(dāng)中同時(shí)查看兩個(gè)層面的信息。不過這里同樣存在一些很明顯的問題，例如子類列表會(huì)被局限在一個(gè)非常有限的可視區(qū)域當(dāng)中，用戶一次最多能完整看到一到兩個(gè)條目。另外，這種模式本身只支持兩個(gè)類別層面之間的導(dǎo)航，要查看最終的內(nèi)容對(duì)象，我們還需要使用另外一個(gè)模型將內(nèi)容完整的呈現(xiàn)在屏幕當(dāng)中。所以，這種模式也難以很好地適用于當(dāng)前的案例。

我們希望找到一種新的方式，它即可以沿用上面這種模型在導(dǎo)航方面的靈活性，同時(shí)又能使內(nèi)容具有更好的可讀性。另外，在上面的模型當(dāng)中，主類條目的表現(xiàn)形式以及對(duì)有效空間的占用率也可以得到適當(dāng)?shù)膬?yōu)化。需要記住，這款應(yīng)用的核心需求當(dāng)中要求我們提供一種快速高效的機(jī)制，以幫助用戶更好的瀏覽內(nèi)容。我們對(duì)于交互模式的思考必須圍繞著這個(gè)中心思想進(jìn)行展開。

我們繼續(xù)在列表的概念上做文章，不過這次，我們可以試著為列表增加一些不同的屬性，使閱讀方式更具流動(dòng)性。如下圖所示，這種模型當(dāng)中不存在彼此分離的視圖狀態(tài)變化，它是一種連貫的、更具動(dòng)態(tài)化的解決方案，而且對(duì)用戶的交互行為具有更好的響應(yīng)性。

圖 6-18 該模型將主類與子類列表整合到同一個(gè)層面中，使瀏覽更加迅速。用戶可以通過縱向滾動(dòng)來瀏覽主類列表，在某個(gè)主類當(dāng)中通過橫向滾動(dòng)來瀏覽子類列表。

這個(gè)交互模型與之前的那些有所不同。初始狀態(tài)下，界面為導(dǎo)航結(jié)構(gòu)和其他功能保留了一定的空間。說到這款應(yīng)用當(dāng)中的其他功能，我們并沒有進(jìn)行過相關(guān)的描述，因?yàn)閷?duì)于當(dāng)前的案例練習(xí)來說，那些細(xì)節(jié)問題并不重要，我們的主要目的是站在一個(gè)較高的層面上，構(gòu)筑整個(gè)產(chǎn)品的核心體驗(yàn)?zāi)Ｊ?。所以目前，我們只需要將注意力放在與內(nèi)容的導(dǎo)航與瀏覽相關(guān)的交互模型上就可以了，因?yàn)檫@些方面才是整個(gè)產(chǎn)品的基礎(chǔ)與核心。

最初，這個(gè)模型只會(huì)呈現(xiàn)出一部分主類導(dǎo)航項(xiàng)。每個(gè)主類都以文字標(biāo)簽的形式出現(xiàn)，用戶無需任何操作即可直接獲得子類列表當(dāng)中的分類信息。這種二維導(dǎo)航結(jié)構(gòu)可以幫助用戶以非線型的方式在同一個(gè)層面中瀏覽原本屬于不同層面的信息。

要查看更多的主類以及它們對(duì)應(yīng)的子類列表，用戶只需執(zhí)行縱向滾屏操作。當(dāng)主類列表接觸到屏幕的上邊緣時(shí)，排在最前面的幾個(gè)主類條目就會(huì)自動(dòng)收起，以便為后面的留出顯示空間。在這個(gè)過程中，用戶不需要進(jìn)行任何控制，縱向滾屏這個(gè)操作本身就會(huì)觸發(fā)這種類似手風(fēng)琴風(fēng)箱折疊一樣的效果。

要查看某個(gè)子類當(dāng)中所包含的內(nèi)容對(duì)象也是很容易的。當(dāng)用戶在默認(rèn)視圖中選擇了某個(gè)子類時(shí)，界面會(huì)過渡成為一個(gè)新的網(wǎng)格內(nèi)容模型，這個(gè)模型即可以像默認(rèn)視圖那樣對(duì)內(nèi)容進(jìn)行分類呈現(xiàn)，同時(shí)也支持沒有文字標(biāo)簽的單列網(wǎng)格單元(見圖 6-19)。要查看某個(gè)內(nèi)容對(duì)象，用戶只需要點(diǎn)擊橫向列表當(dāng)中的某個(gè)單元格，內(nèi)容對(duì)象就會(huì)擴(kuò)展至全屏。

圖 6-19 子類列表視圖。在橫向的內(nèi)容對(duì)象列表當(dāng)中點(diǎn)擊某個(gè)單元格，內(nèi)容對(duì)象就會(huì)擴(kuò)展至全屏。

在這個(gè)模型當(dāng)中，我們可以將用于回退的導(dǎo)航控制元素放在界面頂部。這個(gè)控制元素既可以是一個(gè)簡單的返回按鈕，也可以是相對(duì)復(fù)雜的類似面包屑的形式。最重要的是，相比于之前的幾個(gè)模型，這次我們終于能夠以一種比較合理的方式來實(shí)現(xiàn)導(dǎo)航控制機(jī)制了。

可以說，這是到目前為止我們能夠找到的最佳解決方案了。你可以將這套方案落實(shí)在交互文檔當(dāng)中，并直接通過這個(gè)文檔向X公司的相關(guān)決策人員及團(tuán)隊(duì)做以講解，引導(dǎo)他們站在用戶的角度去理解這款模型的出色之處。從這個(gè)交互模型當(dāng)中，他們也能很直觀地體會(huì)到這款應(yīng)用與競爭對(duì)手的產(chǎn)品相比所具有的創(chuàng)新性。你完全不用花費(fèi)時(shí)間去打造線框原型、視覺稿或是高保真原型來完成這項(xiàng)工作。

對(duì)交互模型的創(chuàng)建過程進(jìn)行了完整的了解之后，你還可以沿用在這個(gè)案例當(dāng)中學(xué)到的方法，繼續(xù)通過其他產(chǎn)品概念進(jìn)行練習(xí)和嘗試，看看能否從中得到一些新的感悟。

總結(jié)

令人驚嘆的設(shè)計(jì)要素

“令人驚嘆”的設(shè)計(jì)要素是指那些給用戶帶來的體驗(yàn)感受可以達(dá)到其心中某個(gè)“情感閥值”的產(chǎn)品表現(xiàn)層元素。要使應(yīng)用產(chǎn)品達(dá)到令人驚嘆的效果，你必須讓用戶對(duì)于設(shè)計(jì)方案產(chǎn)生某種特別的反應(yīng)。以下三個(gè)方面的因素將決定著產(chǎn)品帶來的體驗(yàn)感受能否跨越用戶心中的“情感閥值”：

• 符合直覺：設(shè)計(jì)方案必須能夠引導(dǎo)用戶做出最符合直覺的反應(yīng)行為。
• 差異化創(chuàng)新特征：設(shè)計(jì)方案中要有明顯的創(chuàng)新特征，至少要讓用戶感受到某些不同尋常的產(chǎn)品體驗(yàn)。
• 積極響應(yīng)：設(shè)計(jì)方案本身要能以積極的姿態(tài)去緩解那些由于差異化所導(dǎo)致的與用戶預(yù)期或舊有習(xí)慣不符的陌生感。

而“令人驚嘆”的體驗(yàn)效應(yīng)以及上述三點(diǎn)推動(dòng)因素又會(huì)受到設(shè)計(jì)方案自身所具有的一些屬性的影響：

• 界面外觀：也就是設(shè)計(jì)方案所呈現(xiàn)出來的界面布局結(jié)構(gòu)、渲染方式以及所有相關(guān)的靜態(tài)視覺組成元素。
• 交互方式：包括人機(jī)物理交互、手勢以及其他常規(guī)的用戶界面輸入方式。
• 視覺交互效果：包括那些能夠?yàn)樵O(shè)計(jì)方案賦予生機(jī)的動(dòng)態(tài)的界面元素及視覺效果。這些交互效果通常與某些特定的響應(yīng)行為相關(guān)，對(duì)設(shè)計(jì)方案的整體質(zhì)量也會(huì)起到重要的影響作用，甚至包括那些與交互行為沒有直接關(guān)聯(lián)的臨時(shí)狀態(tài)。

如果我們能夠在這其中的某一方面做到出類拔萃，那么產(chǎn)品體驗(yàn)就完全有可能達(dá)到令人驚嘆的程度。當(dāng)然，這種做法是相當(dāng)有風(fēng)險(xiǎn)的，要更加有效地提升產(chǎn)品整體的感知效應(yīng)，這三個(gè)方面的良好表現(xiàn)是缺一不可的。

交互模型

通過構(gòu)建交互模型，我們可以對(duì)產(chǎn)品的基本交互方式及視覺交互效果進(jìn)行規(guī)劃。構(gòu)建交互模型的過程通常包括四個(gè)步驟，其中前三步是必要的前期工作，而最后一步則是建模工作本身。這四個(gè)步驟包括：

• 確定需求
• 定義需求用例與測試腳本
• 規(guī)劃產(chǎn)品工作流
• 構(gòu)建交互模型

在打造具有高度差異化的交互模型的過程中，我們會(huì)遇到很多挑戰(zhàn)。有一些基本的設(shè)計(jì)思路和方法可以幫助我們將這項(xiàng)工作進(jìn)行的更加卓有成效：

• 抽象：試著將用戶界面當(dāng)中的交互對(duì)象抽象成為基礎(chǔ)的邏輯形態(tài)，拋開表現(xiàn)層的干擾，對(duì)其本質(zhì)進(jìn)行思考。
• 改造與重組：以交互對(duì)象的基礎(chǔ)邏輯形態(tài)作為組件來構(gòu)造交互模式。結(jié)合產(chǎn)品的實(shí)際需求，在必要的時(shí)候?qū)换ソM件進(jìn)行合理的改造和重組。
• 可行性驗(yàn)證：將這些交互模式放到已經(jīng)規(guī)劃好的工作流當(dāng)中檢驗(yàn)其可行性。
• 解決方案：通過以空間、時(shí)間或狀態(tài)變化等概念為主導(dǎo)的方案來解決交互模型當(dāng)中的問題。
• 擴(kuò)展：提升交互模型的普遍適用性，使其能夠運(yùn)用到產(chǎn)品當(dāng)中的其他功能領(lǐng)域。
• 記錄：詳細(xì)記錄下自己在交互模型構(gòu)建工作當(dāng)中的各種感受和想法。
• 文檔化：通過可視化的文檔對(duì)交互模型進(jìn)行直觀的描述。