推薦：產(chǎn)品需要合適自己的設(shè)計(jì)
上圖左側(cè)是電梯里的飄柔廣告。把洗發(fā)水的廣告做成一面鏡子的創(chuàng)意著實(shí)很棒。設(shè)計(jì)者清楚的知道：”在鏡子上做廣告更適合自己的品牌性質(zhì)”。不過(guò)，從上圖中不難

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

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

1. 相似的操作放在一起。這樣可以保證較好的內(nèi)容邏輯，讓界面更輕易理解，更輕易使用。
2. 不要讓一個(gè)按鈕在不同的情況下有不同的功能，一個(gè)按鈕一個(gè)功能。
3. 更少的界面更好。
4. 為“新手”用戶服務(wù)需要產(chǎn)品設(shè)計(jì)的簡(jiǎn)單、清楚； “中間用戶”、“專家”則需要高效率。
5. 為一類用戶用戶提供一個(gè)界面，而不是多類用戶共用同一個(gè)界面。

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

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

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

1. 搭建信息構(gòu)架
2. 細(xì)節(jié)設(shè)計(jì)

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

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

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

要設(shè)計(jì)出一個(gè)界面來(lái)，要害問(wèn)題在于如何統(tǒng)一“合成單張”和“合成多張”這兩個(gè)界面。

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

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

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

分享：幾點(diǎn)閃光
出錯(cuò)，也能莞爾一笑～碰到出錯(cuò)頁(yè)面經(jīng)常是讓人討厭的事，不過(guò)撞見(jiàn)些可愛(ài)的頁(yè)面，有時(shí)反而成了種樂(lè)趣。個(gè)人最喜歡的404頁(yè)面，是淘寶UED團(tuán)隊(duì)blog的那個(gè)。“四零