QQ空間V8新版即將發(fā)布了，界面清新簡潔，裝扮更是美輪美奐：提供5種新版式，多達(dá)50套新皮膚，將給大家?guī)砣碌捏w驗(yàn)。
提到QQ空間V8，相信Q友們最感興趣的是有什么改進(jìn)，特別是裝扮方面，就像騰訊社交用戶體驗(yàn)設(shè)計師所講的“我們做的一切都是為了用戶在裝扮上有耳目一新的感覺，我們希望以后也會有更多有創(chuàng)意的裝扮繼續(xù)誕生，讓每次用戶換裝扮時都有驚喜�！�，下面帶來官方關(guān)于QQ空間V8的裝扮說明。
相關(guān)點(diǎn)擊：免費(fèi)開通QQ空間V8版體驗(yàn)資格的方法
裝扮是QQ空間里的重要特性，關(guān)系到用戶進(jìn)入空間時的感受，我們追求為用戶帶來更優(yōu)質(zhì)的體驗(yàn)，因此V8新版本的設(shè)計，我們想讓裝扮有更新的方向，更酷的形式，讓裝扮更有特點(diǎn)。同時個人中心和個人主頁的裝扮和風(fēng)格能保持一致，這些都是我們這次嘗試創(chuàng)新裝扮的動力來源。
一、前期探索和風(fēng)格嘗試
既然要做創(chuàng)新，首先應(yīng)該滿足的點(diǎn)就是要有足夠的新意去吸引到用戶的眼球，在用戶第一次接觸時就會被觸動“這套裝扮太有意思了，好適合我，好喜歡，好想用。”
為了匯集各位設(shè)計師的奇思妙想，我們組織了一次腦暴會，希望裝扮不僅僅只是替換圖片，而應(yīng)該有更多互動體驗(yàn)。
下面是對腦暴后奇思妙想的整理：
隨著Html5技術(shù)的成熟，我們可以利用越來越多技術(shù)來實(shí)現(xiàn)特效，比如視差滾動，空間裝扮當(dāng)然也要與時俱進(jìn)。
來看看這套裝扮的構(gòu)思，它利用了簡單的視差原理，當(dāng)用戶滾動鼠標(biāo)將頁面下滑時，背景的星空也會隨之緩緩旋轉(zhuǎn)，帶用戶進(jìn)入到極光的世界。
這套裝扮同樣利用了簡單的互動原理，眼球能跟著你鼠標(biāo)指針的方向，定位到眼球所在的位置，給用戶俏皮的感覺“你指哪兒我就能看到哪兒。”
我們都知道空間裝扮的核心體驗(yàn)是讓用戶自主選擇搭配，每一個裝扮元素都是獨(dú)立的，將自己喜愛的裝扮配件自由組合起來，搭配出屬于自己最具個性的裝扮；這樣高自由的體驗(yàn)，突出了用戶個性的同時也帶來一定的問題——那就是裝扮自定義的尺度過大，導(dǎo)致大多數(shù)裝扮最終成品沒有主題，散亂而不夠整體。
于是在新的V8裝扮方案設(shè)計中，提出“場景主題化”的裝扮概念，由專業(yè)設(shè)計師根據(jù)不同用戶群體以及場景來整體包裝，打造出獨(dú)具主題個性的空間裝扮，提升空間裝扮整體的品質(zhì)感。
二、視覺輸出
通過一段時間的設(shè)計，我們終于把概念轉(zhuǎn)化成了現(xiàn)實(shí)。
1.海洋進(jìn)化論
這套裝扮僅僅只呈現(xiàn)了海底的世界，除了魚和水母之外，會讓用戶覺得太單調(diào)乏味的。
加入藍(lán)天、海平面、海底和小島。初步有了雛形，但是波浪太激烈了，會給用戶不平靜的感覺。
靜止的海景已經(jīng)完成差不多，為了讓用戶有真實(shí)感受，那就需要裝扮里的內(nèi)容是動起來，魚能在海底游動，海浪翻滾，天空中的云朵飄動，這些都是通過Html5技術(shù)來完成。
在動畫的制作中，魚的游動難點(diǎn)是最大的。
整套裝扮中都是寫實(shí)風(fēng)格，為了保持風(fēng)格的統(tǒng)一，魚也不例外。所有的魚都是PNG的圖片，怎么才讓它動得更真實(shí)呢，在看完很多海底世界的視頻之后，才開始著手設(shè)計。
動畫都是有Html5技術(shù)完成，所以我們需要提供給前端哥哥的是魚游動時候的關(guān)鍵幀，要讓魚游動的更流暢，根據(jù)觀察視頻得出的魚游動動作尾巴和身體的變化，用一張靜止的魚的圖片，通過PS變形，微調(diào)出5張魚游動的關(guān)鍵幀，然后給他們排好順序，做成GIF動畫，邊播放邊微調(diào)，直到魚的游動接近真實(shí)。
我們希望讓所有用戶都能看到完整的海洋全景圖，利用前端的自適應(yīng)技術(shù)，讓海洋能適應(yīng)幾乎所有分辨率。
空間的用戶在看完動態(tài)后，都不會直接關(guān)閉，而是掛機(jī)去做其他事情，鮮活的海底動畫依然栩栩如生迎接用戶歸來。
2.星空
前期資料收集，看了許多星空、極光、太空等，開始設(shè)計之前，先要對自己要設(shè)計的內(nèi)容有足夠多的了解。
腦暴時候的星空裝扮優(yōu)化和深入，星空隨著頁面滾動以不同的速率移動，時而有流星滑過。
樹木的剪影在一開始會隨著鼠標(biāo)滾動越來越大，經(jīng)過多次調(diào)試，效果都不太好，為了不讓用戶有眩暈感，最后決定樹木剪影固定不動。
要做到自適應(yīng)，底部的樹木兩頭就需要能對接起來實(shí)現(xiàn)能無限延展，無論你屏幕有多大，媽媽再也不用擔(dān)心我看到的整個星空裝扮是不完整的了。
為了讓用戶有流暢的體驗(yàn)，我們不得不損失部分視覺效果，在技術(shù)能實(shí)現(xiàn)的前提下，始終堅持視覺最優(yōu)效果。
3.角色化裝扮
不同用戶會有不同的身份和愛好，同一個用戶也會有不同的愛好，對用戶的身份進(jìn)行分類，挖掘用戶愛好，進(jìn)行專屬裝扮的設(shè)計。
a.角色類型
廚師
烹飪與食物帶給人們一種溫暖的感覺，所以在整體用色上，我們選用了紅色、黃色等暖色系；背景選擇了偏居家的格子底紋去做鋪墊烘托；在Cover圖的選擇上，我們也偏向一些食材以及烹飪工具的圖片，希望以此營造一種現(xiàn)實(shí)生活中廚房場景的氛圍；最后是把一些設(shè)計的細(xì)節(jié)融入到整個裝扮當(dāng)中，為整個裝扮增加亮點(diǎn)；
學(xué)生
學(xué)生大多數(shù)時候都是通過老師在黑板上的文字來收獲知識，所以講臺上的黑板能帶給我們學(xué)習(xí)的氛圍。Cover圖設(shè)計了一塊被老師擦過無數(shù)次的舊黑板，黑板上幾個大字母便是受過高等教育的學(xué)生都學(xué)過的愛因斯坦著名的質(zhì)能方程式E=mc^2。 細(xì)節(jié)上，天氣掛件區(qū)域用手繪畫出邊框，讓整個天氣掛件就是整個黑板上的一員一樣，背景也選擇了墻壁紋理平鋪，使整套裝扮里更加整體。
白領(lǐng)
白領(lǐng)給人的感覺就會是很商務(wù)化，商務(wù)普遍給人的第一感覺就是藍(lán)色，但是棕色和黑色給人更加符合白領(lǐng)氣質(zhì)的感覺，所以最后選擇了和咖啡相近的棕色做為主色調(diào)。Cover圖則選擇了一棟商務(wù)大廈的外墻，建筑外墻的結(jié)構(gòu)同時也具有構(gòu)成感，整個風(fēng)格也較簡潔，不做多的修飾。
b.社交關(guān)系
再來看看這套主題定位為“親子”的裝扮，是為那些用空間記錄自己寶寶成長故事的爸爸、媽媽而設(shè)計的。整體的設(shè)計上，我們想通過整體柔和的色調(diào)、局部輕微的擬物效果、以及添加可愛的小元素，體現(xiàn)出一種嬰兒房中溫馨，柔美，充滿濃濃愛意的氛圍。 在用色上，我們主要選用了粉橙色、粉紅色這類暖色系色調(diào)。在Cover圖的選擇上，我們選用了一張熊偶的照片，那是嬰兒房中各式各樣的可愛小玩具中的一員。 在細(xì)節(jié)方面，我們采用了一個嬰兒房常見的掛飾的剪影作為天氣模塊的承載，在內(nèi)容區(qū)域用嬰兒服飾上常見的小動物圖案來平鋪，等等。這些元素、局部的設(shè)計都為了更加的凸顯我們這套裝扮的主題。
表達(dá)愛情的物品挺多的，比如：玫瑰、戒指、心等等。
我們想帶給用戶一些不一樣感覺，人們常常通過疊千紙鶴來表達(dá)對自己愛人的思念，本套裝扮則恰恰想通過兩個千紙鶴來表達(dá)對對方的思念，天氣掛件的背景巧妙的做成郵票則是為了表達(dá)我想把我的思念寄給你。通過散落的桃心、桃心外輪廓的導(dǎo)航加上粉紅色背景更能烘托主題。
c.興趣愛好
游戲迷
在設(shè)計前期對部分游戲進(jìn)行了分析，比如“斗戰(zhàn)神”、“軒轅傳奇”等游戲，它們的風(fēng)格都是酷炫、暗黑、玄幻的整體氛圍； 在一開始，我們將這款游戲主題的目標(biāo)用戶定為男性游戲玩家，如果反饋良好，再推出女性游戲主題；所以就考慮將暗黑系列的游戲UI元素復(fù)用到裝扮中，以增強(qiáng)用戶的游戲即視感。 比如個人主頁左側(cè)模塊的花紋邊框，就是直接復(fù)用游戲中“人物狀態(tài)欄”的邊框，帶著玄幻與破舊的感覺； 而背景紋理也是選用了和游戲感比較貼切的暗黑風(fēng)格；Cover直接用了游戲畫面，天氣模塊用旗幟作為底板；希望裝扮的設(shè)計效果，和游戲操作界面的氛圍貼切，讓用戶感受是在玩游戲的體驗(yàn)感。
足球迷
作為一個忠實(shí)的足球迷，極力的想把這套裝扮做好，讓我們廣大的球迷同好們再也不用擔(dān)心沒有好看的足球裝扮可用。
設(shè)計之初，覺得有太多太多的足球元素可用，就什么都想往上放，在平鋪的草地上想把整個足球場的邊線，中線都畫出來，角球旗、球門和球網(wǎng)都做上去，后來發(fā)現(xiàn)其實(shí)東西越多非但沒能表現(xiàn)好整個足球場的氛圍，反倒是影響了用戶閱讀里面的內(nèi)容。
于是開始做減法，把足球場上面積最大，深淺交替的草坪做為背景，導(dǎo)航下平鋪的是用石灰在草坪上畫出的中線，在草坪上放上足球，再在頭像上加上球迷帽，是不是就已經(jīng)有想在上面踢球的沖動了。球迷朋友們趕緊去商城裝扮上這套足球裝扮吧！
三、感悟
在整個設(shè)計中，最核心的點(diǎn)就是主題化與空間品質(zhì)。
所有的用色、材質(zhì)、設(shè)計細(xì)節(jié)等等都是圍繞著這個核心來進(jìn)行。我們不會選用過于個性與異化的元素去包裝空間，但所有的設(shè)計都是為主題而服務(wù)，設(shè)計上的取舍都是為了烘托整個空間裝扮的場景感、品質(zhì)感。
我們做的一切都是為了用戶在裝扮上有耳目一新的感覺，我們希望以后也會有更多有創(chuàng)意的裝扮繼續(xù)誕生，讓每次用戶換裝扮時都有驚喜。
這次的裝扮的設(shè)計中領(lǐng)悟到一點(diǎn)道理，要做出打動用戶的裝扮，首先你應(yīng)該打動你自己。其實(shí)所有的設(shè)計都是一樣，連設(shè)計師自己都不能打動的設(shè)計，你又該怎么去引起別人的共鳴呢。
使用QQ瀏覽器7訪問 搶先體驗(yàn)QQ空間V8新版特權(quán)
關(guān)于騰牛 | 聯(lián)系方式 | 發(fā)展歷程 | 版權(quán)聲明 | 下載幫助(？) | 廣告聯(lián)系 | 網(wǎng)站地圖 | 友情鏈接
Copyright 2005-2018 QQTN.com 【騰牛網(wǎng)】 版權(quán)所有 鄂ICP備17010784號-1 | 
鄂公網(wǎng)安備 42011102000245號
聲明： 本站非騰訊QQ官方網(wǎng)站 所有軟件和文章來自互聯(lián)網(wǎng) 如有異議 請與本站聯(lián)系 本站為非贏利性網(wǎng)站 不接受任何贊助和廣告
