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