大頭貼是QQ空間里的一個照片合成的小工具。讓用戶將自己給自己的照片加個畫框合成一個形象照。07年6-7月，大頭貼進(jìn)行了重新設(shè)計，改善了之前的一些設(shè)計并添加了一些新功能。在此，將這個重新設(shè)計的過程總結(jié)下來，通過這個實例來闡述愚下對交互設(shè)計的一些理解。

改版面臨的問題一：舊版設(shè)計的缺陷

舊版大頭貼有一些設(shè)計上的缺陷。我們可以通過界面截圖了解一二。

默認(rèn)首頁（照片合成頁）：

點擊中間左排的“高級圖像處理”按鈕（“照片”圖標(biāo)按鈕），界面變?yōu)椋?/p>

在主界面上點擊中間右列的“文字設(shè)定”按鈕（A圖標(biāo)按鈕），界面變?yōu)椋?/p>

“攝像頭拍照”頁簽：

其中存在的缺陷就不詳述了，相信您也都能看到了。

（前面說到了，大頭貼是讓用戶將照片加上外框的一個圖像編輯工具，這里的截圖只是整個界面左側(cè)部分，界面右側(cè)是大頭貼外框的物品列表。這次改版的設(shè)計主要在于左側(cè)部分，所以，這篇總結(jié)沒有提及右側(cè)列表部分。）

#p#

改版面臨的問題二：合成單張VS合成多張；攝像頭拍攝VS上傳現(xiàn)有照片，兩個維度的交叉。

這是一個由新功能引發(fā)的問題。舊版只允許插入單張的照片合成大頭貼，新版則提供給用戶合成動畫大頭貼的功能，允許用戶上傳多張照片合成逐幀動畫的大頭貼。要合成動畫，需要一個“時間軸”，用來順序排列多張照片，編輯動畫。界面大致是這樣的：

對于舊版中合成單張大頭貼的功能，通過用戶反饋，決定加入多張對比的功能。即，用戶可以相中了某一個外框，然后嘗試著搭配多張照片，反復(fù)對比，最終選擇一個滿意的搭配。這就需要一個備選照片列表，讓用戶隨時點擊對比。界面大致是這樣的：

合成單張與合成動畫是兩個不同的任務(wù)，各自有各自的界面。聽上去很合理。

無論是合成動畫還是合成單張，都有兩種插入照片的方法：用攝像頭拍攝和上傳現(xiàn)有照片。這樣一來就出現(xiàn)了兩個維度：合成單張VS合成動畫；攝像頭拍攝VS上傳現(xiàn)有照片。

如果直接將上面這個維度關(guān)系轉(zhuǎn)化成界面，是這樣的：

這樣設(shè)計有很多缺陷：

用戶看到了“用攝像頭拍照”功能，但是只能拍攝單張，要想拍攝多張，合成動畫，就得先選擇頁簽“合成多張動畫”，再點擊“用攝像頭拍攝”?！盀槭裁船F(xiàn)在不可以用攝像頭拍攝多張？”“我怎么知道要進(jìn)到合成多張動畫頁簽里才能拍攝多張？”

原本要合成單張大頭貼的用戶如果發(fā)現(xiàn)可以合成動畫大頭貼也很可能想嘗試一下。而用戶面對現(xiàn)在界面很可能發(fā)現(xiàn)不了“用攝像頭拍攝多張照片”的功能。

原本合成動畫的用戶拍攝了多張照片之后改變主意了，本以為刪除其他的照片，只留一張就是合成單張了，但是卻不行（按這樣的設(shè)計，需要用戶去點擊合成單張的那個頁簽）。

#p#

重新設(shè)計大頭貼面臨的主要問題大致就是這樣的了。下面我們需要通過設(shè)計解決這些問題。這樣的設(shè)計工作，我們稱之為“交互設(shè)計”。

在開始設(shè)計之前，我們先來明確幾條相關(guān)的原理：

1. 相似的操作放在一起。這樣可以保證較好的內(nèi)容邏輯，讓界面更容易理解，更容易使用。

2. 不要讓一個按鈕在不同的情況下有不同的功能，一個按鈕一個功能。

3. 更少的界面更好。

4. 為“新手”用戶服務(wù)需要產(chǎn)品設(shè)計的簡單、清楚； “中間用戶”、“專家”則需要高效率。

5. 為一類用戶用戶提供一個界面，而不是多類用戶共用同一個界面。

這幾條原則，在《about face 2.0》中都能找到。當(dāng)然，交互設(shè)計的原理有很多，這里列出來的這幾條，只是和當(dāng)前這個大頭貼設(shè)計有關(guān)的。在下面的設(shè)計過程中，您將看到，我們是如何運用這些原理指導(dǎo)具體的設(shè)計的。

開始設(shè)計！讓我們滾動！（let’s roll!—摘自盜版《兄弟連》DVD中的字幕）

交互設(shè)計工作往往可以分為兩步：

1. 搭建信息構(gòu)架

2. 細(xì)節(jié)設(shè)計

大頭貼的信息構(gòu)架就是關(guān)于“單張VS多張”、“攝像頭拍攝VS上傳現(xiàn)有照片”這兩個維度的表現(xiàn)。第4條設(shè)計原理是關(guān)于“新手用戶”“中間用戶”“專家”的。這個產(chǎn)品面對的是“新手”用戶（沒誰會天天都來合成大頭貼），更需要產(chǎn)品表現(xiàn)的簡單、清楚，或者說表現(xiàn)的直白一些、傻瓜一些。之前根據(jù)內(nèi)容邏輯關(guān)系畫出的界面顯然難度太高了。

通過第4條設(shè)計原理，我們可以判定，這樣的設(shè)計還不夠好，而不要給自己找接口“用戶應(yīng)該能看到合成多張的那個頁簽的?！?/p>

第5條設(shè)計原理說：為一類用戶設(shè)計一個頁面。合成單張大頭貼的用戶和合成多張的用戶是不是兩類用戶呢？不是。前面提到了，在合成大頭貼的過程中，合成單張與合成多張的操作很可能會互相切換。那么，無論是“單張”還是“多張”都是一類用戶，想要合成大頭貼的用戶。因此，我們應(yīng)該設(shè)計出一個界面來，而不是兩個。更少的界面更好（原理3）。

要設(shè)計出一個界面來，關(guān)鍵問題在于如何統(tǒng)一“合成單張”和“合成多張”這兩個界面。

將它們統(tǒng)一成一個界面，這里需要一些思想的火花。在一次和產(chǎn)品經(jīng)理的討論中，我們畫出了下面這個界面：

縮略圖的列表里可以存放多張照片，既可以當(dāng)作時間軸，又可當(dāng)作備選照片庫。點擊“合成單張”按鈕，把當(dāng)前幀輸出，合成單張的。點擊“合成動畫”按鈕，則把全部照片一起輸出，合成動畫。

把“單張”和“多張”整到了一個界面里之后，只剩下“插入現(xiàn)有照片”和“用攝像頭拍攝”這一個維度了。在界面中同時提供這兩種添加照片的功能按鈕就可以了。

#p#

信息構(gòu)架的問題解決了，再來設(shè)計細(xì)節(jié)。

設(shè)計原則1說：相似的操作放在一起，可以使內(nèi)容之間的邏輯關(guān)系更清晰。
“現(xiàn)有照片”和“攝像頭”這兩個按鈕都是添加照片的功能，放在一起。大頭貼有很多編輯照片的功能（比如，放大、縮小照片），也應(yīng)該放在一起?，F(xiàn)在又有了動畫合成功能，相應(yīng)的一個操作也應(yīng)該歸在一起。這樣界面上就應(yīng)該有三組功能按鈕了：

編輯照片的功能中有“高級圖像設(shè)置”和“文字設(shè)定”這兩個功能操作起來比較復(fù)雜，需要較大的界面來展示。在舊版中，點擊這些按鈕，界面替換：

點擊中間左排的“高級圖像處理”按鈕（“照片”圖標(biāo)按鈕），界面變?yōu)椋?/p>

之前的“選擇本地照片”按鈕變成了“返回”按鈕。雖然充分利用了空間，但是不好用。用戶剛剛形成了一些隱約的印象：下面中間那里是個“選擇本地…”的功能。想要“返回”就不會上那兒去找了。

設(shè)計原則2中說：一個按鈕一個功能。把這個原理引申可以理解為：某個位置上的按鈕應(yīng)該是固定的。

無論是設(shè)計理論還是對實際的分析，都說明在統(tǒng)一位置上變換按鈕不是件好事。那么，“高級圖像設(shè)置”和“文字設(shè)定”的具體功能怎么顯示？給它們另外一個單獨浮起的界面就行了?！安迦氍F(xiàn)有照片”和“用攝像頭拍攝”兩相功能也是類似的。

至此，大頭貼的主要設(shè)計完成了。最終的設(shè)計效果：

新版的大頭貼已于7月27日正式發(fā)布了。訪問方式：

• 訪問qzone.qq.com，

• 登錄，

• 點擊“進(jìn)入空間”（如果您之前沒有開通過qq空間，則需要先“開通”），

• 在您個人的qq空間中點擊右上角的“裝扮空間”進(jìn)入qq空間商城，

• 在商城導(dǎo)航中選擇“大頭貼”。

有點復(fù)雜哈，顯然，設(shè)計上要做的事情還很多。

愚下希望能借此總結(jié)反應(yīng)出一些設(shè)計原理在實際中的應(yīng)用，或許其中只言片語與您有益。