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ù)期。