在不能中尋找個性相冊設計的始末 - 網頁設計 |
http://webdesign.zoapcon.com
|
|
QZONE平臺的相冊功能為保證加載速度一直以來以簡潔的圖片排列查看模式呈現相片,隨著市場上各類相冊產品推陳出新,用戶越來越強烈的要求個人相冊的獨特展示,為了給廣大用戶提供更炫更酷的個性體驗,QZONE在2009年5月全新推出了flash動態個性相冊。Vivi有幸參與了個性相冊的設計,項目一期成功推出五套相冊,設計過程令人意猶未盡,下面和大家曬曬項目過程中的設計體會吧。
剛開始就遇到了“不能” 接到需求之初,項目組的同學們對個性相冊的頭緒還不明晰,開發對設計的約束也還沒有具體的說明。為了大家在討論時能有圖可依,我以迅雷不及掩耳盜鈴(囧)的速度輸出了以文件袋中的相片為情景的版本,拿著草稿便找到了產品和開發的同學討論了。果然一百個人心中有一百個“個性相冊”,討論很激烈,這個未經過深思熟慮的版本順理成章的被pk掉了,換來的是我們對相冊風格樣式,照片瀏覽方式細致的梳理。
雖然主程序模板化使很多表現形式和手法無法實現,但是,勤勞的設計師不會因為各種的限制,放棄對視覺效果的追求,設計組同學們開始在限制中尋找激發創意的入口。 天馬行空尋找各種“可能” 就這樣開始吧,通過對使用人群的年齡喜好分析,我們和產品mm確定了休閑,清新,涂鴉,魅惑,年輕,可愛,商務,簡潔,情感這幾個設計方向。顏色上傾向于黑白、多彩、中性、女性青睞的粉、清新的藍、綠。由于項目一期deadline迫在眉睫,上線的相冊模版數量有限,為了能讓第一期上線的相冊能最大化的滿足用戶使用需要,我們又從中篩選出大眾更偏愛的風格首先進行設計,如清新,潮流,確定了以個性皮膚+開場動畫的設計形式展現相冊最個性的部分。
沒有什么不可能 相片瀏覽是相冊最基本和最重要的功能,主程序模版化需要我們在各類相冊中保持一致的圖片切換效果。我們首先想到的就是要讓用戶瀏覽相片時不因動畫展示區域大小限制圖片的查看,簡言之就是圖片的展示區要足夠大,要滿足可能有的大尺寸相片。二是要讓這套動畫適合不同風格的皮膚。三是減少開發開發量。在嘗試了圖片漸隱等幾款圖片切換效果之后,我們最終選擇了類似相紙的設計,圖片切換設計成了紙張翻頁效果,這種切換效果的特點是:瀏覽區域大。大眾化易在不同風格的皮膚下統一。
“休閑時光”體驗地址: http://user.qzone.qq.com/845048408/photo/personal/1/42176/1/7d646538-ac0b-4c73-b2c5-9a0ecc223164 皮膚是個性相冊設計中最主要的部分,為了追求視覺效果,起初我們使用顏色構圖都很講究的攝影作品作為圖例,將它們按加載后照片的位置結合皮膚進行整體構圖和顏色調整。在設計了兩款相冊后發現:原本色調統一、構圖活潑的畫面卻因為用戶相片替代了攝影圖片而變得整體效果雜亂,主次不清,作為主體的相片在豐富的皮膚圖案里黯然失色。這是為什么? 用戶使用相冊的目的是為了展示相片,他們對相片的關注高于皮膚,所以設計時應多琢磨如何讓畫面元素襯托相片。普通人日常照片的特點是顏色多,構圖亂,放在視覺中心分散的畫面上容易被喧賓奪主。考慮到這些我們調整了設計中的一個小環節,改將日常相片結合皮膚來統一設計。皮膚作為相片的襯托,設計時我們在畫面元素與相片的面積比和位置關系,主體物周圍的裝飾等方面重新調整。之后我們輸出了下面這套“彼岸花”。原來設計皮膚不僅僅是設計一張圖片。 TAG: 網頁設計 | web design |
|
- Aug 01 Wed 2012 13:36
在不能中尋找個性相冊設計的始末_網頁設計
close
文章標籤
全站熱搜
留言列表
發表留言