Qzone平台個性相冊設計方法和技巧

QZONE平台的相冊功能為保證加載速度一直以來以簡潔的圖片排列查看模式呈現相片，隨着市場上各類相冊產品推陳出新，用户越來越強烈的要求個人相冊的獨特展示，為了給廣大用户提供更炫更酷的個性體驗，QZONE在2009年5月全新推出了flash動態個性相冊。Vivi有幸參與了個性相冊的設計，項目一期成功推出五套相冊，設計過程令人意猶未盡，下面和大家曬曬項目過程中的設計體會吧。QQ空間

相冊默認的圖片排列查看模式

剛開始就遇到了“不能”QQ空間

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

為了提高加載速度、節省帶寬、方便維護，便於開發，開發gg提出了主程序模版化的建議。需要模板化的程序包括相冊翻頁，播放控制，加載圖片處理，切換效果，小圖列表等等。這意味着個性相冊只有皮膚和過場動畫可以有不同視覺效果的發揮，其餘部分用統一的視覺元素和動畫。經過多輪設計、產品、開發同學的三方會談，最終決定以大局為重，犧牲一部分視覺效果來配合開發。

雖然主程序模板化使很多表現形式和手法無法實現，但是，勤勞的設計師不會因為各種的限制，放棄對視覺效果的追求，設計組同學們開始在限制中尋找激發創意的入口。

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

就這樣開始吧，通過對使用人羣的年齡喜好分析，我們和產品mm確定了休閒，清新，塗鴉，魅惑，年輕，可愛，商務，簡潔，情感這幾個設計方向。顏色上傾向於黑白、多彩、中性、女性青睞的粉、清新的藍、綠。由於項目一期deadline迫在眉睫，上線的相冊模版數量有限，為了能讓第一期上線的相冊能最大化的滿足用户使用需要，我們又從中篩選出大眾更偏愛的風格首先進行設計,如清新，潮流，確定了以個性皮膚＋開場動畫的設計形式展現相冊最個性的部分。

個性相冊“異國風情”皮膚效果

沒有什麼不可能

相片瀏覽是相冊最基本和最重要的功能，主程序模版化需要我們在各類相冊中保持一致的圖片切換效果。我們首先想到的就是要讓用户瀏覽相片時不因動畫展示區域大小限制圖片的查看，簡言之就是圖片的展示區要足夠大，要滿足可能有的大尺寸相片。二是要讓這套動畫適合不同風格的皮膚。三是減少開發開發量。在嘗試了圖片漸隱等幾款圖片切換效果之後，我們最終選擇了類似相紙的設計，圖片切換設計成了紙張翻頁效果，這種切換效果的特點是：瀏覽區域大。大眾化易在不同風格的皮膚下統一。

個性相冊“休閒時光”模板加載圖片區域處理成了相紙效果

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

皮膚是個性相冊設計中最主要的部分，為了追求視覺效果，起初我們使用顏色構圖都很講究的攝影作品作為圖例，將它們按加載後照片的位置結合皮膚進行整體構圖和顏色調整。在設計了兩款相冊後發現：原本色調統一、構圖活潑的畫面卻因為用户相片替代了攝影圖片而變得整體效果雜亂，主次不清，作為主體的相片在豐富的皮膚圖案裏黯然失色。這是為什麼？

用户使用相冊的目的是為了展示相片，他們對相片的關注高於皮膚，所以設計時應多琢磨如何讓畫面元素襯托相片。普通人日常照片的特點是顏色多，構圖亂，放在視覺中心分散的畫面上容易被喧賓奪主。考慮到這些我們調整了設計中的一個小環節，改將日常相片結合皮膚來統一設計。皮膚作為相片的襯托，設計時我們在畫面元素與相片的面積比和位置關係，主體物周圍的裝飾等方面重新調整。之後我們輸出了下面這套“彼岸花”。原來設計皮膚不僅僅是設計一張圖片。

個性相冊“彼岸花”模板

皮膚按照原定計劃設計成不同風格的情景表現。QZONE用户羣很廣，根據用户年齡喜好的要求，輸出了幾套特別版本，如這款活潑歡快的“HAPPY TOGETHER” 。

個性相冊“HAPPY TOGETHER”模板

接下來就是動畫部分，動畫是基於個性皮膚的輔助性設計，目的是讓相片更突出讓相冊更具動感，開場動畫為了表達情景，配合照片的加載動畫適當的誇張生動。加載完成之後的輔助動畫主要烘托氣氛，為了不騷擾用户觀看相片，動態設計的和緩有節奏。設計時吸取了之前的經驗，動畫元素以相片為中心運動，襯托相片，製造視覺的中心。具體動畫效果請登錄　QZONE相冊設置個性相冊後觀看，謝謝！