QZONE平臺(tái)的相冊(cè)功能為保證加載速度一直以來以簡潔的圖片排列查看模式呈現(xiàn)相片，隨著市場上各類相冊(cè)產(chǎn)品推陳出新，用戶越來越強(qiáng)烈的要求個(gè)人相冊(cè)的獨(dú)特展示，為了給廣大用戶提供更炫更酷的個(gè)性體驗(yàn)，QZONE在2009年5月全新推出了flash動(dòng)態(tài)個(gè)性相冊(cè)。Vivi有幸參與了個(gè)性相冊(cè)的設(shè)計(jì)，項(xiàng)目一期成功推出五套相冊(cè)，設(shè)計(jì)過程令人意猶未盡，下面和大家曬曬項(xiàng)目過程中的設(shè)計(jì)體會(huì)吧。

相冊(cè)默認(rèn)的圖片排列查看模式

剛開始就遇到了“不能”

接到需求之初，項(xiàng)目組的同學(xué)們對(duì)個(gè)性相冊(cè)的頭緒還不明晰，開發(fā)對(duì)設(shè)計(jì)的約束也還沒有具體的說明。為了大家在討論時(shí)能有圖可依，我以迅雷不及掩耳盜鈴（囧）的速度輸出了以文件袋中的相片為情景的版本，拿著草稿便找到了產(chǎn)品和開發(fā)的同學(xué)討論了。果然一百個(gè)人心中有一百個(gè)“個(gè)性相冊(cè)”，討論很激烈，這個(gè)未經(jīng)過深思熟慮的版本順理成章的被pk掉了，換來的是我們對(duì)相冊(cè)風(fēng)格樣式，照片瀏覽方式細(xì)致的梳理。

為了提高加載速度、節(jié)省帶寬、方便維護(hù)，便于開發(fā)，開發(fā)gg提出了主程序模版化的建議。需要模板化的程序包括相冊(cè)翻頁，播放控制，加載圖片處理，切換效果，小圖列表等等。這意味著個(gè)性相冊(cè)只有皮膚和過場動(dòng)畫可以有不同視覺效果的發(fā)揮，其余部分用統(tǒng)一的視覺元素和動(dòng)畫。經(jīng)過多輪設(shè)計(jì)、產(chǎn)品、開發(fā)同學(xué)的三方會(huì)談，最終決定以大局為重， 犧牲一部分視覺效果來配合開發(fā)。

雖然主程序模板化使很多表現(xiàn)形式和手法無法實(shí)現(xiàn)，但是，勤勞的設(shè)計(jì)師不會(huì)因?yàn)楦鞣N的限制，放棄對(duì)視覺效果的追求，設(shè)計(jì)組同學(xué)們開始在限制中尋找激發(fā)創(chuàng)意的入口。

天馬行空尋找各種“可能”

就這樣開始吧，通過對(duì)使用人群的年齡喜好分析，我們和產(chǎn)品mm確定了休閑，清新，涂鴉，魅惑，年輕，可愛，商務(wù)，簡潔，情感這幾個(gè)設(shè)計(jì)方向。顏色上傾向于黑白、多彩、中性、女性青睞的粉、清新的藍(lán)、綠。由于項(xiàng)目一期deadline迫在眉睫，上線的相冊(cè)模版數(shù)量有限，為了能讓第一期上線的相冊(cè)能最大化的滿足用戶使用需要，我們又從中篩選出大眾更偏愛的風(fēng)格首先進(jìn)行設(shè)計(jì),如清新，潮流，確定了以個(gè)性皮膚＋開場動(dòng)畫的設(shè)計(jì)形式展現(xiàn)相冊(cè)最個(gè)性的部分。

個(gè)性相冊(cè)“異國風(fēng)情”皮膚效果

“異國風(fēng)情”體驗(yàn)地址：http://user.qzone.qq.com/845048408/photo/personal/1/42180/1/4369bc1b-5efc-4b2a-8d88-75f705980785

沒有什么不可能

相片瀏覽是相冊(cè)最基本和最重要的功能，主程序模版化需要我們?cè)诟黝愊鄡?cè)中保持一致的圖片切換效果。我們首先想到的就是要讓用戶瀏覽相片時(shí)不因動(dòng)畫展示區(qū)域大小限制圖片的查看，簡言之就是圖片的展示區(qū)要足夠大，要滿足可能有的大尺寸相片。二是要讓這套動(dòng)畫適合不同風(fēng)格的皮膚。三是減少開發(fā)開發(fā)量。在嘗試了圖片漸隱等幾款圖片切換效果之后，我們最終選擇了類似相紙的設(shè)計(jì)，圖片切換設(shè)計(jì)成了紙張翻頁效果，這種切換效果的特點(diǎn)是：瀏覽區(qū)域大。大眾化易在不同風(fēng)格的皮膚下統(tǒng)一。

個(gè)性相冊(cè)“休閑時(shí)光”模板,加載圖片區(qū)域處理成了相紙效果

相片瀏覽模式處理成了紙張效果，瀏覽區(qū)域大

“休閑時(shí)光”體驗(yàn)地址： http://user.qzone.qq.com/845048408/photo/personal/1/42176/1/7d646538-ac0b-4c73-b2c5-9a0ecc223164

皮膚是個(gè)性相冊(cè)設(shè)計(jì)中最主要的部分，為了追求視覺效果，起初我們使用顏色構(gòu)圖都很講究的攝影作品作為圖例，將它們按加載后照片的位置結(jié)合皮膚進(jìn)行整體構(gòu)圖和顏色調(diào)整。在設(shè)計(jì)了兩款相冊(cè)后發(fā)現(xiàn)：原本色調(diào)統(tǒng)一、構(gòu)圖活潑的畫面卻因?yàn)橛脩粝嗥娲藬z影圖片而變得整體效果雜亂，主次不清，作為主體的相片在豐富的皮膚圖案里黯然失色。這是為什么？

用戶使用相冊(cè)的目的是為了展示相片，他們對(duì)相片的關(guān)注高于皮膚，所以設(shè)計(jì)時(shí)應(yīng)多琢磨如何讓畫面元素襯托相片。普通人日常照片的特點(diǎn)是顏色多，構(gòu)圖亂，放在視覺中心分散的畫面上容易被喧賓奪主?？紤]到這些我們調(diào)整了設(shè)計(jì)中的一個(gè)小環(huán)節(jié)，改將日常相片結(jié)合皮膚來統(tǒng)一設(shè)計(jì)。皮膚作為相片的襯托，設(shè)計(jì)時(shí)我們?cè)诋嬅嬖嘏c相片的面積比和位置關(guān)系，主體物周圍的裝飾等方面重新調(diào)整。之后我們輸出了下面這套“彼岸花”。原來設(shè)計(jì)皮膚不僅僅是設(shè)計(jì)一張圖片。

 個(gè)性相冊(cè)“彼岸花”模板

“彼岸花”體驗(yàn)地址：http://user.qzone.qq.com/845048408/photo/personal/1/42311/1/e7181887-1260-4e2a-90da-b4cba5274ef9

皮膚按照原定計(jì)劃設(shè)計(jì)成不同風(fēng)格的情景表現(xiàn)。QZONE用戶群很廣，根據(jù)用戶年齡喜好的要求，輸出了幾套特別版本，如這款活潑歡快的“HAPPY TOGETHER” 。

個(gè)性相冊(cè)“HAPPY TOGETHER”模板

“HAPPY TOGETHER”體驗(yàn)地址：http://user.qzone.qq.com/845048408/photo/personal/1/42920/1/3f270cef-a69a-4fa5-b792-429b3bdfbdec

接下來就是動(dòng)畫部分，動(dòng)畫是基于個(gè)性皮膚的輔助性設(shè)計(jì)，目的是讓相片更突出讓相冊(cè)更具動(dòng)感，開場動(dòng)畫為了表達(dá)情景，配合照片的加載動(dòng)畫適當(dāng)?shù)目鋸埳鷦?dòng)。加載完成之后的輔助動(dòng)畫主要烘托氣氛，為了不騷擾用戶觀看相片，動(dòng)態(tài)設(shè)計(jì)的和緩有節(jié)奏。設(shè)計(jì)時(shí)吸取了之前的經(jīng)驗(yàn)，動(dòng)畫元素以相片為中心運(yùn)動(dòng)，襯托相片，制造視覺的中心。具體動(dòng)畫效果請(qǐng)登錄　QZONE相冊(cè)設(shè)置個(gè)性相冊(cè)后觀看，謝謝！ㄟ(￣▽￣ㄟ)

個(gè)性相冊(cè)“印象@China”效果

“印象@China” 體驗(yàn)地址：http://user.qzone.qq.com/845048408/photo/personal/1/42757/1/edaf26e7-18c7-43fc-96ab-3d7ece94e6f2

個(gè)性相冊(cè)前后有五位設(shè)計(jì)師傾情參與：菜花，海味，vivi，柱子(平臺(tái)設(shè)計(jì))，三目(活動(dòng)設(shè)計(jì))，一期的整個(gè)版面雖因項(xiàng)目周期等原因不得不做些設(shè)計(jì)方面的妥協(xié)，部分設(shè)計(jì)元素復(fù)用，但是我們?cè)谟邢薜目砂l(fā)揮的位置盡可能保證了設(shè)計(jì)精美和豐富。個(gè)性相冊(cè)上線后，用戶反饋滿意度高，用戶使用率高于預(yù)期。

原文：http://webteam.tencent.com/?p=1175