QZONE平臺(tái)的相冊功能為保證加載速度一直以來以簡潔的圖片排列查看模式呈現(xiàn)相片，隨著市場上各類相冊產(chǎn)品推陳出新，用戶越來越強(qiáng)烈的要求個(gè)人相冊的獨(dú)特展示，為了給廣大用戶提供更炫更酷的個(gè)性體驗(yàn)，QZONE在2009年5月全新推出了flash動(dòng)態(tài)個(gè)性相冊。Vivi有幸參與了個(gè)性相冊的設(shè)計(jì)，項(xiàng)目一期成功推出五套相冊，設(shè)計(jì)過程令人意猶未盡，下面和大家曬曬項(xiàng)目過程中的設(shè)計(jì)體會(huì)吧。
相冊默認(rèn)的圖片排列查看模式
剛開始就遇到了“不能”
接到需求之初，項(xiàng)目組的同學(xué)們對個(gè)性相冊的頭緒還不明晰，開發(fā)對設(shè)計(jì)的約束也還沒有具體的說明。為了大家在討論時(shí)能有圖可依，我以迅雷不及掩耳盜鈴（囧）的速度輸出了以文件袋中的相片為情景的版本，拿著草稿便找到了產(chǎn)品和開發(fā)的同學(xué)討論了。果然一百個(gè)人心中有一百個(gè)“個(gè)性相冊”，討論很激烈，這個(gè)未經(jīng)過深思熟慮的版本順理成章的被pk掉了，換來的是我們對相冊風(fēng)格樣式，照片瀏覽方式細(xì)致的梳理。
為了提高加載速度、節(jié)省帶寬、方便維護(hù)，便于開發(fā)，開發(fā)gg提出了主程序模版化的建議。需要模板化的程序包括相冊翻頁，播放控制，加載圖片處理，切換效果，小圖列表等等。這意味著個(gè)性相冊只有皮膚和過場動(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的限制，放棄對視覺效果的追求，設(shè)計(jì)組同學(xué)們開始在限制中尋找激發(fā)創(chuàng)意的入口。
天馬行空尋找各種“可能”
就這樣開始吧，通過對使用人群的年齡喜好分析，我們和產(chǎn)品mm確定了休閑，清新，涂鴉，魅惑，年輕，可愛，商務(wù)，簡潔，情感這幾個(gè)設(shè)計(jì)方向。顏色上傾向于黑白、多彩、中性、女性青睞的粉、清新的藍(lán)、綠。由于項(xiàng)目一期deadline迫在眉睫，上線的相冊模版數(shù)量有限，為了能讓第一期上線的相冊能最大化的滿足用戶使用需要，我們又從中篩選出大眾更偏愛的風(fēng)格首先進(jìn)行設(shè)計(jì),如清新，潮流，確定了以個(gè)性皮膚＋開場動(dòng)畫的設(shè)計(jì)形式展現(xiàn)相冊最個(gè)性的部分。
個(gè)性相冊“異國風(fēng)情”皮膚效果
“異國風(fēng)情”體驗(yàn)地址：http://user.qzone.qq.com/845048408/photo/personal/1/42180/1/4369bc1b-5efc-4b2a-8d88-75f705980785
沒有什么不可能
相片瀏覽是相冊最基本和最重要的功能，主程序模版化需要我們在各類相冊中保持一致的圖片切換效果。我們首先想到的就是要讓用戶瀏覽相片時(shí)不因動(dòng)畫展示區(qū)域大小限制圖片的查看，簡言之就是圖片的展示區(qū)要足夠大，要滿足可能有的大尺寸相片。二是要讓這套動(dòng)畫適合不同風(fēng)格的皮膚。三是減少開發(fā)開發(fā)量。在嘗試了圖片漸隱等幾款圖片切換效果之后，我們最終選擇了類似相紙的設(shè)計(jì)，圖片切換設(shè)計(jì)成了紙張翻頁效果，這種切換效果的特點(diǎn)是：瀏覽區(qū)域大。大眾化易在不同風(fēng)格的皮膚下統(tǒng)一。
個(gè)性相冊“休閑時(shí)光”模板,加載圖片區(qū)域處理成了相紙效果
相片瀏覽模式處理成了紙張效果，瀏覽區(qū)域大
“休閑時(shí)光”體驗(yàn)地址： http://user.qzone.qq.com/845048408/photo/personal/1/42176/1/7d646538-ac0b-4c73-b2c5-9a0ecc223164
皮膚是個(gè)性相冊設(shè)計(jì)中最主要的部分，為了追求視覺效果，起初我們使用顏色構(gòu)圖都很講究的攝影作品作為圖例，將它們按加載后照片的位置結(jié)合皮膚進(jìn)行整體構(gòu)圖和顏色調(diào)整。在設(shè)計(jì)了兩款相冊后發(fā)現(xiàn)：原本色調(diào)統(tǒng)一、構(gòu)圖活潑的畫面卻因?yàn)橛脩粝嗥娲藬z影圖片而變得整體效果雜亂，主次不清，作為主體的相片在豐富的皮膚圖案里黯然失色。這是為什么？
用戶使用相冊的目的是為了展示相片，他們對相片的關(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í)我們在畫面元素與相片的面積比和位置關(guān)系，主體物周圍的裝飾等方面重新調(diào)整。之后我們輸出了下面這套“彼岸花”。原來設(shè)計(jì)皮膚不僅僅是設(shè)計(jì)一張圖片。
個(gè)性相冊“彼岸花”模板
“彼岸花”體驗(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è)性相冊“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ì)，目的是讓相片更突出讓相冊更具動(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)畫效果請登錄 QZONE相冊設(shè)置個(gè)性相冊后觀看，謝謝！ㄟ(￣▽￣ㄟ)
個(gè)性相冊“印象@China”效果
“印象@China” 體驗(yàn)地址：http://user.qzone.qq.com/845048408/photo/personal/1/42757/1/edaf26e7-18c7-43fc-96ab-3d7ece94e6f2
個(gè)性相冊前后有五位設(shè)計(jì)師傾情參與：菜花，海味，vivi，柱子(平臺(tái)設(shè)計(jì))，三目(活動(dòng)設(shè)計(jì))，一期的整個(gè)版面雖因項(xiàng)目周期等原因不得不做些設(shè)計(jì)方面的妥協(xié)，部分設(shè)計(jì)元素復(fù)用，但是我們在有限的可發(fā)揮的位置盡可能保證了設(shè)計(jì)精美和豐富。個(gè)性相冊上線后，用戶反饋滿意度高，用戶使用率高于預(yù)期。
