• 
• 
• 
• 
• 
• 
• 

返回貼子列表		發(fā)表新貼
主題： 在不能中尋找個(gè)性相冊設(shè)計(jì)的始末	共有1242人瀏覽過本貼	主貼管理 置　頂 加　精 結(jié)　貼 轉(zhuǎn)　貼

昵稱：奈薇建站網(wǎng) 論壇積分：108000 發(fā)貼等級(jí)：21 發(fā)貼數(shù)：1156 回貼數(shù)：1282 被砸雞蛋：1 獲贈(zèng)鮮花：182

發(fā)表時(shí)間：2019/7/18 13:00:00 樓　主 在不能中尋找個(gè)性相冊設(shè)計(jì)的始末 　　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é)們對(duì)個(gè)性相冊的頭緒還不明晰，開發(fā)對(duì)設(shè)計(jì)的約束也還沒有具體的說明。為了大家在討論時(shí)能有圖可依，我以迅雷不及掩耳盜鈴（囧）的速度輸出了以文件袋中的相片為情景的版本，拿著草稿便找到了產(chǎn)品和開發(fā)的同學(xué)討論了。果然一百個(gè)人心中有一百個(gè)“個(gè)性相冊”，討論很激烈，這個(gè)未經(jīng)過深思熟慮的版本順理成章的被pk掉了，換來的是我們對(duì)相冊風(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的限制，放棄對(duì)視覺效果的追求，設(shè)計(jì)組同學(xué)們開始在限制中尋找激發(fā)創(chuàng)意的入口。 　　天馬行空尋找各種“可能” 　　就這樣開始吧，通過對(duì)使用人群的年齡喜好分析，我們和產(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.yuhou.cn/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ū)域大 　　皮膚是個(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影圖片而變得整體效果雜亂，主次不清，作為主體的相片在豐富的皮膚圖案里黯然失色。這是為什么？ 　　用戶使用相冊的目的是為了展示相片，他們對(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í)我們在畫面元素與相片的面積比和位置關(guān)系，主體物周圍的裝飾等方面重新調(diào)整。之后我們輸出了下面這套“彼岸花”。原來設(shè)計(jì)皮膚不僅僅是設(shè)計(jì)一張圖片。 奈薇建站網(wǎng)致力于，讓每個(gè)中國人、每個(gè)中國企業(yè)都擁有自己的“官方網(wǎng)站”！ 回復(fù)此貼 單貼管理 修　改 刪　除 清理簽名 TOP

共0個(gè)回貼   分0頁

上一頁 / 下一頁   當(dāng)前第頁

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶