到目前為止，我們已經(jīng)了解了足夠多的基礎(chǔ)理論，這些內(nèi)容可以幫助你更好的理解那些決定著產(chǎn)品用戶體驗(yàn)的設(shè)計(jì)決策?，F(xiàn)在，我們所面臨的問題是，在實(shí)際項(xiàng)目當(dāng)中，怎樣做出能夠與競(jìng)爭(zhēng)對(duì)手的產(chǎn)品形成鮮明差異化的設(shè)計(jì)決策？怎樣才能實(shí)現(xiàn)具有突破性的產(chǎn)品概念？本章中，我們將對(duì)這些話題進(jìn)行探討。

我們將要介紹的并非是某種能夠立竿見影的快速指南，你無法在看過這部分內(nèi)容之后就立刻掌握了其中的“秘訣”。要打造出令人驚嘆的應(yīng)用，我們?nèi)匀灰M(jìn)行大量扎實(shí)的工作和不懈的思考，以及在這個(gè)過程中對(duì)于創(chuàng)造力的探索。你必須下決心在這些方面做到必要的付出，才有可能使自己的產(chǎn)品真正脫穎而出，取得成功。

“令人驚嘆”究竟指什么？

本書一直會(huì)提到的“令人驚嘆”究竟是指什么呢？很顯然，這個(gè)說法并不是一種可執(zhí)行的設(shè)計(jì)概念，它是用戶對(duì)于那些獨(dú)特而具有吸引力的產(chǎn)品所表達(dá)出的具有贊許色彩的反饋。

具體到iOS應(yīng)用的設(shè)計(jì)當(dāng)中，“令人驚嘆”的設(shè)計(jì)要素主要是指那些給用戶帶來的體驗(yàn)感受可以達(dá)到其心中某個(gè)“情感閥值”的表現(xiàn)層元素。這個(gè)閥值的高低取決于用戶自身，因此，如果對(duì)產(chǎn)品的目標(biāo)用戶人格缺乏清晰的認(rèn)知，便難以對(duì)這個(gè)閥值進(jìn)行準(zhǔn)確地預(yù)估與判斷。以下三個(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ī)物理交互、手勢(shì)以及其他常規(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á)到令人驚嘆的程度。其實(shí)現(xiàn)實(shí)當(dāng)中有不少這方面的例子。你會(huì)發(fā)現(xiàn)，某些應(yīng)用在交互方式和視覺交互效果方面缺乏足夠的創(chuàng)新性與吸引力，但它們的界面外觀卻相當(dāng)出彩，以至于變相地降低了前兩方面因素在用戶感知當(dāng)中所造成的負(fù)面影響。相反，某些應(yīng)用也許會(huì)采用一種幾乎沒有經(jīng)過任何修飾加工的最小化設(shè)計(jì)方案，但在交互方式和視覺交互效果方面卻打造的非常到位，這也同樣會(huì)給用戶帶來良好的體驗(yàn)感知。

當(dāng)然，僅僅依靠其中某個(gè)方面的表現(xiàn)來提升產(chǎn)品整體感知效應(yīng)的做法是相當(dāng)有風(fēng)險(xiǎn)的。特別是在iOS當(dāng)中，這三方面屬性所具有的影響力并不是均等的。漂亮的界面外觀對(duì)于多數(shù)iOS應(yīng)用來說幾乎是一個(gè)既定命題，用戶已經(jīng)很難在這方面產(chǎn)生真正具有突破性的體驗(yàn)感知了。

所以，能夠?qū)Ξa(chǎn)品體驗(yàn)的提升產(chǎn)生最大推進(jìn)作用的仍是交互方式及相關(guān)的交互響應(yīng)行為。正像我們?cè)?span style="color: #0099cc;">第三章里了解到的，如今的用戶對(duì)于那些能夠帶來創(chuàng)新體驗(yàn)的應(yīng)用有著強(qiáng)烈的渴望；要在這方面滿足用戶對(duì)于差異化的渴求，我們必須在設(shè)計(jì)階段對(duì)產(chǎn)品的交互方式進(jìn)行更加深入的探索與分析。

構(gòu)建交互模型的流程概覽

通過構(gòu)建交互模型，我們可以對(duì)產(chǎn)品的基本交互方式及視覺交互效果進(jìn)行規(guī)劃。構(gòu)建交互模型的過程通常包括四個(gè)步驟，其中前三步是必要的前期工作，而最后一步則是建模工作本身。聽上去有些費(fèi)解，不過沒關(guān)系，接下來我將對(duì)這個(gè)流程進(jìn)行簡(jiǎn)要的介紹；在對(duì)它們有了大致的了解之后，我們還將對(duì)其中每一個(gè)步驟進(jìn)行深入而全面的分析。

1.明確需求

首先，我們要對(duì)產(chǎn)品的基本需求有初步的了解。具體的需求內(nèi)容可以在用戶體驗(yàn)策略或是正式的需求分析報(bào)告當(dāng)中體現(xiàn)出來。這些信息是所有后續(xù)設(shè)計(jì)工作的根基，所以我們必須確保需求是足夠明確并且穩(wěn)定的，同時(shí)，它還要得到團(tuán)隊(duì)的一致認(rèn)可。如果你們更加習(xí)慣于敏捷開發(fā)，那么需求發(fā)生變動(dòng)的可能性是相對(duì)較大的，不過你至少需要對(duì)那些定義了產(chǎn)品基本功能的核心需求進(jìn)行確認(rèn)，才可以繼續(xù)接下來的流程。一旦需求確定，我們就可以進(jìn)入交互建模的下一個(gè)環(huán)節(jié)，需求用例與使用場(chǎng)景的構(gòu)建。

2.定義需求用例與測(cè)試腳本

需求用例，特別是那些更具腳本驅(qū)動(dòng)性的需求用例，是整個(gè)交互建模過程的重要組成部分。一個(gè)好的用例能夠幫助團(tuán)隊(duì)了解到用戶在使用產(chǎn)品時(shí)所經(jīng)歷的大致流程，并對(duì)各種需求在這個(gè)過程中的實(shí)現(xiàn)方式有所認(rèn)知。有的用例會(huì)直接將那些涉及到關(guān)鍵交互環(huán)節(jié)的測(cè)試腳本敘述出來，并通過這種方式來為我們提供明確的需求指導(dǎo)。不過，無論是否以測(cè)試腳本的形式出現(xiàn)，需求用例本身的性質(zhì)及其在產(chǎn)品概念前期工作當(dāng)中的作用并不會(huì)發(fā)生變化。如果你對(duì)自己產(chǎn)品的概念已經(jīng)有了比較明確的認(rèn)知，并且清楚它與用戶之間的互動(dòng)模式，那么你可以在需求用例當(dāng)中對(duì)這些進(jìn)行詳細(xì)地描述，從而為交互建模流程中的其他環(huán)節(jié)提供必要的信息。即便你在當(dāng)前階段對(duì)產(chǎn)品概念的細(xì)節(jié)還不能做到心知肚明，那么也不成問題，只要將用戶在使用過程中有可能進(jìn)行的常見行為描述出來即可。

3.規(guī)劃產(chǎn)品工作流

關(guān)于以怎樣的方式規(guī)劃產(chǎn)品工作流的問題，從不同的角度出發(fā)會(huì)得到各種不同的答案；其中，每種方式都有各自的目標(biāo)與價(jià)值。站在設(shè)計(jì)的立場(chǎng)上，我們最關(guān)心的是產(chǎn)品的工作流是否符合用戶的決策邏輯，它能否體現(xiàn)出交互過程中的關(guān)鍵環(huán)節(jié)，與之相關(guān)的功能結(jié)構(gòu)在用戶友好性等方面的表現(xiàn)又如何。這是一種以用戶為中心的規(guī)劃方式，它可以幫助我們通過確立產(chǎn)品的特性與功能這兩者之間的關(guān)聯(lián)來定義整個(gè)應(yīng)用的架構(gòu)。一個(gè)經(jīng)過良好規(guī)劃的產(chǎn)品工作流可以為你的應(yīng)用提供精準(zhǔn)的路線圖，但它不會(huì)對(duì)任何具體的功能或交互機(jī)制做出假設(shè)。

4.構(gòu)建交互模型

這顯然是交互建模流程當(dāng)中最核心和本質(zhì)的環(huán)節(jié)。當(dāng)你明確了應(yīng)用的基本工作流及各功能之間的關(guān)聯(lián)后，就可以進(jìn)一步去思考應(yīng)該通過怎樣的交互方式向用戶呈現(xiàn)產(chǎn)品了。

用戶必須通過某些關(guān)鍵交互行為，來完成工作流中所定義的典型需求任務(wù)，而交互建模正是以這些關(guān)鍵交互行為作為基礎(chǔ)，對(duì)應(yīng)用整體的交互模式進(jìn)行定義的。這其中涉及在不同的用戶界面視覺模態(tài)下對(duì)屏幕的實(shí)際可用面積進(jìn)行的管理 (例如應(yīng)用的布局與功能隨著屏幕方向的調(diào)轉(zhuǎn)而進(jìn)行相應(yīng)的調(diào)整)、導(dǎo)航結(jié)構(gòu)的呈現(xiàn)方式、基本的操作手勢(shì)等等。換句話說，交互建模的過程定義了應(yīng)用的操作方式，但它不會(huì)決定應(yīng)用具體會(huì)做哪些事情。

一套產(chǎn)品工作流往往能衍生出若干數(shù)量的交互模型，它們能夠表現(xiàn)出的交互體驗(yàn)?zāi)Ｊ酱笥胁煌?。關(guān)于這一點(diǎn)，我們會(huì)在本章后面的內(nèi)容當(dāng)中看到一些具體的例子。

對(duì)建模流程的深入分析

對(duì)建模流程當(dāng)中的每個(gè)環(huán)節(jié)進(jìn)行了大致的了解之后，我們將要對(duì)整個(gè)流程進(jìn)行更加細(xì)致和深入的分析，包括對(duì)工作流的思考、交互模型的構(gòu)建方法、相關(guān)問題的解決方案，以及怎樣通過具有標(biāo)志性的交互方式使整個(gè)產(chǎn)品的用戶體驗(yàn)在同類應(yīng)用當(dāng)中脫穎而出。

對(duì)工作流的思考

對(duì)于工作流的規(guī)劃與定義，是產(chǎn)品交互設(shè)計(jì)工作的精髓之一。我們正是在這個(gè)過程中制定了用戶與產(chǎn)品的互動(dòng)規(guī)則的。很多時(shí)候，你只需要在抽象的層面對(duì)其進(jìn)行定義，而不必在意功能細(xì)節(jié)或是某些特定的交互方式；而在另外一些情況下，你必須對(duì)所有的交互方式、行為事件、狀態(tài)變化等方面的邏輯進(jìn)行詳細(xì)地定義，才能為產(chǎn)品的人機(jī)交互方式規(guī)劃出一個(gè)最清晰的畫面。

交互模型的構(gòu)建方法

正如我們?cè)谇拔闹刑岬降模换ソＳ脕韺?duì)應(yīng)用當(dāng)中的交互模式進(jìn)行定義，它同時(shí)還詮釋了這些交互模式是以怎樣的方式被整合成為具有高度一致性的、容易被用戶理解的交互模型的。我們?cè)?jīng)在第二章里對(duì)iOS交互環(huán)境的概念模型和空間模型進(jìn)行了解析。其中，交互空間及其三個(gè)組成層面的概念共同構(gòu)成了iOS中的基礎(chǔ)交互模型 (見圖 6-1)。這個(gè)例子充分地體現(xiàn)出了交互建模的設(shè)計(jì)思想所具有的強(qiáng)大力量。

圖6-1 ?iOS空間模型及它的三個(gè)層面

圖6-2 ?一個(gè)典型的列表

從抽象的層面來說，列表到底是什么呢？列表的基本概念，就是一個(gè)由若干可選擇對(duì)象所組成的隊(duì)列。進(jìn)一步思考，你還會(huì)發(fā)現(xiàn)，其實(shí)列表項(xiàng)并非一定要以縱向的方式進(jìn)行排列，而且每一行也未必只能包含一個(gè)列表項(xiàng)。所以我們可以問問自己，對(duì)于在實(shí)際設(shè)計(jì)方案當(dāng)中需要解決的具體問題來說，是否有更好的列表形式可以勝任？關(guān)于這個(gè)問題的答案通常不是顯而易見的，我們需要思考并嘗試一些不同的方案，看看它們能否帶來有一些意思的變化。如果典型的單列縱向列表無法滿足我們的需求，那么橫向的方案又如何呢？(見圖 6-3)

圖6-3 ?橫向列表

看上去很有趣，不過也許你已經(jīng)注意到了，在這種模式里，屏幕可視區(qū)域當(dāng)中的列表項(xiàng)數(shù)量是非常有限的，特別是在豎屏狀態(tài)下。如果不考慮任何上下文環(huán)境，那么這也算不上是很大的問題；但在實(shí)際使用當(dāng)中，如果沒辦法一次看到很多列表項(xiàng)，那么要對(duì)整個(gè)列表進(jìn)行快速瀏覽的話，用戶必須頻繁的執(zhí)行滾屏操作。很顯然，這種方式在效率方面存在很大問題。在橫屏狀態(tài)下，情況會(huì)相對(duì)好些，但仍然不是很理想。

讓我們繼續(xù)擴(kuò)展思路，看看是否還有其他更加合理的差異化解決方案。如果說單列形式的列表無法令人滿意，那么如果我們將其中的每一行擴(kuò)展為一個(gè)隊(duì)列，使整個(gè)列表變成網(wǎng)格形式，情況又會(huì)如何呢？(見圖 6-4)

圖6-4 ?網(wǎng)格狀的列表模式

事情開始變得有趣了。在這種模式下，我們可以同時(shí)看到更多的列表項(xiàng)，相比于傳統(tǒng)的單列縱向列表，這確實(shí)是一個(gè)不錯(cuò)的改進(jìn)。但它所帶來的弊端也是很明顯的，那就是每個(gè)列表項(xiàng)的實(shí)際尺寸都變小了，這給其中的文本對(duì)象造成了很大的局限。不過我們還是可以通過控制文本對(duì)象的字號(hào)來從一定程度上解決這個(gè)問題。

在這組小練習(xí)當(dāng)中，我們僅僅對(duì)一個(gè)簡(jiǎn)單的列表進(jìn)行了差異化的思考與擴(kuò)展性的嘗試，就幾乎已經(jīng)徹底改變了這個(gè)對(duì)象的基本概念及呈現(xiàn)方式。而實(shí)際上，對(duì)于這個(gè)列表來說，我們能做的還遠(yuǎn)不止這些。接下來，讓我們換一個(gè)角度，對(duì)涉及到列表對(duì)象的交互行為進(jìn)行探索。在iOS當(dāng)中，我們可以通過上下滾屏來瀏覽一個(gè)典型的單列縱向列表，那么這種方式同樣適用于網(wǎng)格狀的列表嗎？(見圖 6-5)

圖6-5 ?縱向滾屏的瀏覽方式應(yīng)用在兩種列表方案中

完全沒問題。不過必須記得，滾屏瀏覽的方式雖然適合于我們當(dāng)前的這個(gè)特定的案例，但它未必在所有的情況下都適用。要在某種新的界面對(duì)象模型當(dāng)中使用現(xiàn)有的交互方式，你必須做好充分的評(píng)估工作。

回到這個(gè)例子當(dāng)中。接下來讓我們對(duì)這個(gè)網(wǎng)格形式的列表進(jìn)行一些抽象化的分析。標(biāo)準(zhǔn)的iOS單列縱向列表對(duì)象通常是支持滾動(dòng)操作的，而且滾動(dòng)的方向僅限于y軸上，因?yàn)榱斜眄?xiàng)都是縱向排列在同一列當(dāng)中的。那么對(duì)于擁有兩個(gè)維度的網(wǎng)格狀列表來說，滾動(dòng)的方式能否得到相應(yīng)的擴(kuò)展呢？

圖6-6 ?多維滾動(dòng)與行內(nèi)滾動(dòng)

如圖所示，我們可以通過多種方式將滾動(dòng)行為運(yùn)用到網(wǎng)格狀的列表當(dāng)中(見圖 6-6)。通過這一系列的實(shí)例，我們可以看出，基于已有的對(duì)象模型及交互方式來構(gòu)建新的概念其實(shí)并不是非常困難的事情。列表的例子只是一個(gè)起點(diǎn)，你還可以對(duì)很多模型和元素進(jìn)行差異化的改造。這種設(shè)計(jì)思路可以幫助我們?cè)诋a(chǎn)品當(dāng)中打造各種豐富的交互方式。

相關(guān)問題的解決方案

我們已經(jīng)大致了解了應(yīng)該怎樣從現(xiàn)有的基本概念出發(fā)，來定義全新的交互對(duì)象。不過在實(shí)際項(xiàng)目當(dāng)中，我們有可能會(huì)在這方面遇到一些潛在的問題，這些問題甚至?xí)?dǎo)致設(shè)計(jì)開發(fā)工作進(jìn)入死胡同。在你的設(shè)計(jì)方案當(dāng)中，一些高度定制化的交互模型也許很難被準(zhǔn)確地實(shí)現(xiàn)出來，而另一方面，你也有可能發(fā)現(xiàn)它們無法很好地被用在產(chǎn)品的其他地方。面對(duì)這些情況，你必須掌握一些最基本的解決方法，才能讓自己擺脫困境。

我們?cè)?jīng)在前一章當(dāng)中了解了一些能夠幫助設(shè)計(jì)師實(shí)現(xiàn)設(shè)計(jì)方案的相關(guān)開發(fā)技術(shù)。其中，核心動(dòng)畫 (Core Animation)為開發(fā)者們提供了一系列強(qiáng)大的工具，用于將高度定制化的動(dòng)畫效果整合到交互元素當(dāng)中。動(dòng)畫的概念，不僅僅是隨便為一些元素添加有趣的視覺效果這么簡(jiǎn)單；對(duì)于交互設(shè)計(jì)來說，它更是一種用來與用戶進(jìn)行互動(dòng)溝通的強(qiáng)大工具。

在最基礎(chǔ)的層面，動(dòng)畫是一種能夠使交互對(duì)象的某種屬性隨著時(shí)間而發(fā)生變化的機(jī)制。“時(shí)間”是這個(gè)概念當(dāng)中的核心，它可以幫助我們解決交互設(shè)計(jì)當(dāng)中的一些關(guān)鍵性的問題。

當(dāng)你發(fā)現(xiàn)交互環(huán)境當(dāng)中的空間過于有限的時(shí)候，以時(shí)間概念為主導(dǎo)的解決方案往往可以發(fā)揮巨大作用。要在狹小的界面當(dāng)中內(nèi)呈現(xiàn)大量的信息是很困難的，通常只會(huì)出現(xiàn)兩種情況，要么是通過縮減字號(hào)來提高單位面積當(dāng)中的內(nèi)容密度，要么保持字號(hào)不變而對(duì)內(nèi)容進(jìn)行截?cái)嗵幚?。這兩種方式都是有很大弊端的。高密度的信息很難被用戶良好的閱讀和理解，而經(jīng)過截?cái)嗵幚淼膬?nèi)容又是不完整的，難以保證信息的準(zhǔn)確傳達(dá)。

我們可以通過之前列表練習(xí)當(dāng)中的實(shí)例來直觀地理解這一點(diǎn)。當(dāng)我們以網(wǎng)格的形式改造了單列縱向列表之后，如果列表項(xiàng)的標(biāo)題文字變長(zhǎng)，我們就必須對(duì)字號(hào)進(jìn)行必要的調(diào)整，才能使內(nèi)容完整地呈現(xiàn)給用戶，正如我們可以在下圖左側(cè)屏幕當(dāng)中看到的。反之，如果不縮減字號(hào)，只進(jìn)行截字處理，那么最終的效果就會(huì)是下圖右側(cè)屏幕所展示的樣子：

圖6-7 ?縮減字號(hào)與截?cái)辔淖值男Ч麑?duì)比

那么，以時(shí)間概念為主導(dǎo)的方案能否幫助我們解決這個(gè)問題呢？我們不妨在這里回憶一下，過去那些小屏幕手機(jī)在這方面通常是怎么做的，也許我們可以從它們身上找到一些答案。

圖6-8 ?將被截?cái)嗟奈淖忠耘荞R燈的形式完整的呈現(xiàn)出來

跑馬燈效果在過去的那些設(shè)備當(dāng)中是非常流行的。在這種解決方案里，“時(shí)間”扮演著重要的角色，因?yàn)槲淖謺?huì)以動(dòng)畫的方式逐步進(jìn)入可視區(qū)域當(dāng)中，隨著文字從右向左的行進(jìn)，用戶最終會(huì)閱讀到完整的信息(見圖 6-8)。在這個(gè)實(shí)例當(dāng)中，“時(shí)間”作為一個(gè)額外的維度，可以在某種程度上幫助我們解決問題。

這種方式確實(shí)適用于一些特定的情況，但出于某些原因，它依然無法徹底解決網(wǎng)格布局當(dāng)中文字空間限制問題。不妨設(shè)想，當(dāng)這個(gè)界面加載完成的時(shí)候，每一個(gè)格子當(dāng)中的標(biāo)題文字都在滾動(dòng)，這種高度密集的文字動(dòng)畫效果對(duì)于用戶來說是難以接受的。你很難將注意力集中在某個(gè)單獨(dú)的格子當(dāng)中，而且必須對(duì)時(shí)間進(jìn)行準(zhǔn)確的把握，才能在最短的時(shí)間內(nèi)，也就是一個(gè)循環(huán)周期當(dāng)中完整的閱讀一串文字，否則你所能看到的仍然是一些被截?cái)嗟膬?nèi)容。我們已經(jīng)在解決方案里加入了以時(shí)間概念為主導(dǎo)的動(dòng)畫效果，那么這個(gè)模型當(dāng)中還缺少哪些關(guān)鍵元素呢？答案就是用戶控制。

用戶控制的概念是很顯而易見的。當(dāng)前話題的重點(diǎn)在于怎樣創(chuàng)建交互設(shè)計(jì)解決方案，而所謂“交互”，自然離不開來自用戶的某種控制行為。不過在這里，我們需要從“狀態(tài)”的角度來思考用戶控制這個(gè)概念。

對(duì)于交互模型來說，“狀態(tài)”是一個(gè)非常重要的概念，它同樣可以幫助我們解決在設(shè)計(jì)過程中遇到的一些棘手的問題。與“時(shí)間”類似，以狀態(tài)概念為主導(dǎo)的解決方案通?？梢酝瓿赡切?duì)于靜態(tài)方案來說幾乎是不可能實(shí)現(xiàn)的任務(wù)。從某種程度上講，它們都可以從另外一個(gè)維度上改變交互模型當(dāng)中的界面元素及信息內(nèi)容。

狀態(tài)究竟是什么呢？它所指代的是當(dāng)某個(gè)交互對(duì)象正在被用戶觀察或是被某種控制機(jī)制管理的時(shí)候所體現(xiàn)出來的屬性和特征。

到目前為止，我們所創(chuàng)建出的網(wǎng)格列表交互模型只擁有唯一的一種狀態(tài)。也就是說，它只有一個(gè)形態(tài)，目前還不會(huì)發(fā)生變化。如果我們可以控制它的狀態(tài)，在必要的時(shí)候?qū)换ツＰ偷慕Y(jié)構(gòu)進(jìn)行調(diào)整，那么就可以真正地解決掉我們之前所遇到的問題。

現(xiàn)在可以將狀態(tài)的概念與用戶控制行為聯(lián)系起來了。前文當(dāng)中之所以會(huì)提到要從“狀態(tài)”的角度來思考用戶控制，是因?yàn)槲覀兛梢酝ㄟ^用戶輸入機(jī)制來改變界面交互對(duì)象的狀態(tài)。

那么，我們應(yīng)該怎樣從用戶控制與狀態(tài)調(diào)整的角度來解決網(wǎng)格列表交互模型當(dāng)中的問題呢？當(dāng)前的狀況是，我們認(rèn)為網(wǎng)格狀的列表非常符合差異化的交互體驗(yàn)設(shè)計(jì)思路，而且在這種模式下，用戶可以同時(shí)看到很多列表項(xiàng)；但同時(shí)，每個(gè)列表項(xiàng)的尺寸都變小了，狹小的空間無法完整地將其中的文本對(duì)象呈現(xiàn)出來。我們?cè)囍ㄟ^以時(shí)間概念為主導(dǎo)的方案，即跑馬燈的動(dòng)畫效果來解決這個(gè)問題。雖然這種方法確實(shí)使文字內(nèi)容擺脫了空間的限制，但從界面整體的角度來看，動(dòng)畫效果的密度過大，視覺體驗(yàn)非常糟糕。那么接下來，就讓我們一同看一看，當(dāng)用戶控制及狀態(tài)的概念被整合進(jìn)當(dāng)前的交互模型之后，事情又會(huì)發(fā)生怎樣的變化。

圖6-9 ?通過輕掃操作，將被遮擋住的文字拖出

如圖所示(圖 6-9)，我們可以保持格子當(dāng)中的文字靜止不動(dòng)，由用戶通過輕掃操作將所需的文字對(duì)象拖出被遮擋的區(qū)域。這種方式將直接操縱的理念融入到了交互模型當(dāng)中，我們就不必讓用戶面對(duì)著充滿文字動(dòng)畫效果的界面了。他們可以在覺得需要的時(shí)候?qū)θ我庖粋€(gè)格子進(jìn)行交互操作，瀏覽其中的完整內(nèi)容。

在這種解決方案當(dāng)中，我們?yōu)槲谋緦?duì)象賦予了一定的交互行為，這是相對(duì)簡(jiǎn)單的一種方式。我們還可以擴(kuò)展一下思路，去嘗試一些更具創(chuàng)意的方式。除了文本對(duì)象以外，我們其實(shí)還可以通過用戶的控制行為使整個(gè)格子單元的狀態(tài)發(fā)生變化。

圖6-10 ?通過雙指張開的操作來擴(kuò)展格子，以獲取完整信息；結(jié)束操作后格子自動(dòng)收回

我們可以讓用戶通過雙指張開的操作將網(wǎng)格單元進(jìn)行擴(kuò)展，從而獲取完整的文字信息；當(dāng)手指離開屏幕之后，格子便會(huì)自動(dòng)恢復(fù)到默認(rèn)的狀態(tài)。只需要一個(gè)簡(jiǎn)單的手勢(shì)，我們就可以人為地創(chuàng)造出更大的空間，這使得整個(gè)交互模型具有了高度的動(dòng)態(tài)性 (見圖 6-10)。通過這種方式，不僅文字內(nèi)容變得完整可讀，而且由于整個(gè)格子的空間都被擴(kuò)大，我們甚至可以在其中加入更多有價(jià)值的信息。

曾經(jīng)一個(gè)最普通的單列縱向列表，到目前儼然已經(jīng)成為在用戶體驗(yàn)方面具有高度潛力的交互模型了。交互模型在這方面所體現(xiàn)出的擴(kuò)展性具有很高的實(shí)際運(yùn)用價(jià)值。那么，除了能夠在某種特定的需求上下文當(dāng)中提升對(duì)象的交互體驗(yàn)以外，這種擴(kuò)展性如何幫助我們實(shí)現(xiàn)更高層次的設(shè)計(jì)目標(biāo)呢？

首先我們需要知道一點(diǎn)，在打造交互模型的過程中，我們不能對(duì)其進(jìn)行子虛烏有的構(gòu)想。交互模型永遠(yuǎn)是一個(gè)完整系統(tǒng)當(dāng)中的一部分，產(chǎn)品最終帶給用戶的交互體驗(yàn)必然是一種整體效應(yīng)的體現(xiàn)。如果你相信設(shè)計(jì)方案當(dāng)中的某個(gè)交互模型所具有的強(qiáng)健性足以驅(qū)動(dòng)一款產(chǎn)品，那么你考慮清楚應(yīng)該以怎樣的方式將它整合到產(chǎn)品的其它地方，才能在整體層面上實(shí)現(xiàn)最佳的體驗(yàn)效應(yīng)。這也正是我們?cè)谇拔漠?dāng)中提到交互模型的彈性與擴(kuò)展性時(shí)所要表達(dá)的意思。如果你所打造的各種交互模型確實(shí)只能適用于各自的功能情景，而無法很好的運(yùn)用在產(chǎn)品當(dāng)中的其他地方，那么你至少要在頭腦中建立一個(gè)更龐大完整的產(chǎn)品級(jí)別的交互模型，其中包含著局部當(dāng)中的各個(gè)獨(dú)立的交互模型；這個(gè)大模型必須為用戶提供清晰并且一致的交互體驗(yàn)。然而另一方面，一個(gè)擁有太多獨(dú)特交互模型的應(yīng)用最終只會(huì)導(dǎo)致用戶產(chǎn)生迷惑和挫敗的感覺，這更是完全地背離了我們的初衷。在這種情況下，其實(shí)談不上任何模型的概念了，整個(gè)產(chǎn)品只是一堆怪異交互模式的組合。

要避免這種情況的發(fā)生，我們?cè)谠O(shè)計(jì)工作中必須始終站在全局的角度對(duì)每一個(gè)交互模型的適應(yīng)能力進(jìn)行考慮。這是一種系統(tǒng)化的設(shè)計(jì)思路，你需要讓自己的思維模式上升到抽象的層面，才能對(duì)某個(gè)交互模型在上下文環(huán)境當(dāng)中的適應(yīng)能力進(jìn)行充分地認(rèn)知。不要只看某個(gè)交互模型能夠解決眼下的哪些局部問題，而是要判斷它所勾畫出的交互模式能否在應(yīng)用中的其他地方同樣適用，有沒有可能成為某種具有普遍適用性的多用途交互行為模板。

一款應(yīng)用產(chǎn)品當(dāng)中使用到的交互類型越少，其交互模型的健壯性就越強(qiáng)。少即是多的原則在移動(dòng)應(yīng)用的設(shè)計(jì)工作當(dāng)中是絕對(duì)適用的。要以降低用戶的認(rèn)知負(fù)荷為目標(biāo)，盡可能使用那些用戶已經(jīng)在你的產(chǎn)品中接觸過并理解了的交互模式。

當(dāng)然，你也不必為了減少交互類型而將某些模式強(qiáng)加在那些確實(shí)不適用的地方。簡(jiǎn)單一致的交互方式固然是我們所追求的，但同時(shí)，你也要了解產(chǎn)品中的哪些地方的確需要相對(duì)獨(dú)特的解決方案，否則在這些地方嘗試通過具有普遍性的交互模式進(jìn)行處理的話只能是浪費(fèi)時(shí)間?？梢哉f，如果某種交互方案在你看來并不是非常明確和易用的，那么在用戶看來多半也會(huì)如此。

也許你已經(jīng)注意到了，我們一直在不同的地方反復(fù)使用著“交互”、“行為”和“模式”這三個(gè)概念。在本書所討論的話題當(dāng)中，這些概念各自包含哪些含義，它們之間又具有怎樣的關(guān)聯(lián)呢？我們?cè)谶@里簡(jiǎn)要地了解一下：

• 交互：?jiǎn)卧?jí)的人機(jī)互動(dòng)行為，例如點(diǎn)擊一個(gè)按鈕或是輕掃屏幕當(dāng)中的某個(gè)區(qū)域。它的本質(zhì)是用戶在系統(tǒng)的某種提示下所做出的輸入操作。
• 行為：包括用戶的輸入操作以及相應(yīng)的系統(tǒng)回饋方式。它是“交互”的一種整體化可感知效應(yīng)，由系統(tǒng)環(huán)境呈現(xiàn)出來。
• 模式：若干“行為”在某種特定的組織方式下共同作用所產(chǎn)生的累加效應(yīng)。

你可以在其中任意一個(gè)層面上對(duì)交互模型的一致性進(jìn)行規(guī)劃。你可以從宏觀的角度出發(fā)，首先思考具有全局性的交互模式，也可以從細(xì)處入手，定義那些相對(duì)獨(dú)立的局部交互模型，并對(duì)它們的交互體驗(yàn)一致性進(jìn)行持續(xù)的考量。你在交互模型相關(guān)工作當(dāng)中所做的規(guī)劃，將決定著最終的產(chǎn)品能否以正確的方式解決某些特定的需求。

本章未完待續(xù)，博主C7210出去溜達(dá)幾日先。