空間版式是為用戶提供個(gè)性化服務(wù)的功能，不同的排列組合都有可能設(shè)計(jì)出不同的版式，給人截然不同的感覺?？臻g版式年久失修，伴隨V8的上線，空間的版式也應(yīng)該注入一些新的血液，同時(shí)，老的版式也應(yīng)該好好的翻修一番，讓用戶住得更加舒服。

設(shè)計(jì)版式如同裝修房屋，搭建的框架如同房子的內(nèi)部結(jié)構(gòu)，在同一空間內(nèi)，裝修設(shè)計(jì)師能通過不同的布局與結(jié)構(gòu)給他人不一樣的空間感，所以我們?cè)谘b修的時(shí)候拆掉一堵墻，或者隔出一個(gè)新的區(qū)域都會(huì)給房子帶來全新的布局感受。

一旦確立了主體框架，其中的內(nèi)容就如同房間里的家具，不一樣的陳設(shè)和風(fēng)格都會(huì)給用戶帶來不一樣的觀感，接下來我們要做的就是把成套的家具放在已經(jīng)布局好的空間里，最后給主人和訪客帶來愉悅舒適的感受。這也正是空間版式和裝扮期望為用戶帶來的體驗(yàn)！

新屋搭建

一件事物達(dá)到了極致，就會(huì)自然而然呈現(xiàn)出一種美感。當(dāng)我們忙碌了一天回到家，看到只用線條、色塊來區(qū)分點(diǎn)綴的房間，沒有冗雜的裝飾，就會(huì)給我們帶來清爽整潔的感受，可以立刻讓人放松下來，沉浸其中。

同樣，我們的空間版式和裝扮就是想給用戶帶來這樣一種舒適的氛圍，不為質(zhì)感所累，以功能主義為第一要素，在功能與形式之間找到新的平衡，注重簡(jiǎn)單、大方、實(shí)用、突出功能、去掉多余的繁瑣裝飾，讓用戶一來到這里就能立刻輕松獲得他想要得到的信息。

上面的裝修風(fēng)格圖片越來越受到大眾的歡迎，在這個(gè)信息膨脹的時(shí)代，人們的訴求是簡(jiǎn)潔高效。在設(shè)計(jì)中我們也推崇這種極簡(jiǎn)主義，在互聯(lián)網(wǎng)中用戶的閱讀方式并不是仔細(xì)閱讀，而是“掃”，我們的目標(biāo)就是通過去除無謂的干擾，提升信噪比，讓用戶在一掃而過的瞬間獲取到他關(guān)注的內(nèi)容！

從Windows7到Windows8,微軟顛覆了我們的視覺感官，從豐富質(zhì)感過渡到扁平化設(shè)計(jì)，微軟引領(lǐng)了設(shè)計(jì)界一個(gè)新的方向，掀起了新的設(shè)計(jì)潮流。iOS7的誕生更是將扁平化設(shè)計(jì)推向了極致，QQ空間也希望跟上設(shè)計(jì)的潮流，帶給用戶最新的視覺體驗(yàn)。

受到Windows8主題風(fēng)格的靈感啟發(fā)，我們?cè)O(shè)計(jì)了扁平化風(fēng)格的主題

扁平化設(shè)計(jì)看似簡(jiǎn)單，但實(shí)際設(shè)計(jì)的過程中才體會(huì)到其中的不易，因?yàn)樵僖矡o法用那些陰影修飾效果來隱藏設(shè)計(jì)上的不足，每一個(gè)細(xì)節(jié)，都必須用心打磨。由于每一個(gè)feed模塊的尺寸是固定的，所以要讓用戶一眼就能區(qū)分日志、相冊(cè)、說說、單圖、多圖等實(shí)屬不易，需要精確計(jì)算字體大小，間距等。

入口型版式的特征是拉取用戶的每一個(gè)模塊的少量信息，引導(dǎo)訪客在訪問時(shí)，通過主頁(yè)內(nèi)容發(fā)現(xiàn)自己對(duì)主人感興趣的模塊，再去看詳情。就好像是無數(shù)扇門擺在用戶面前，你首先要告訴用戶這扇門后擁有哪些美麗的風(fēng)景，達(dá)到對(duì)用戶有足夠的吸引力，用戶才會(huì)推開這扇門去看門后面隱藏的精彩的內(nèi)容。

在裝修中，愛生活，愛攝影的人，家里總會(huì)有一面墻上掛著各式自己的照片，自拍照，他人肖像，或是風(fēng)景，因?yàn)檎掌苡涗涀约荷铧c(diǎn)點(diǎn)滴滴，每一張照片都有背后獨(dú)特的故事，還蘊(yùn)含著攝影者拍攝時(shí)的心情和拍攝的理由。我們有理由給用戶帶來最富溫情和回憶感的版式，讓用戶通過照片來講述自己的故事。

很多攝影愛好者用戶并不缺乏優(yōu)質(zhì)照片，但是我們沒有一個(gè)版式能很好的幫他們呈現(xiàn)。QQ空間需要盡量滿足不同用戶的多樣化需求，因此為攝影愛好者專門設(shè)計(jì)一套版式的想法就此誕生。

V8的改版，增加了cover圖，在攝影控版式中，我們的cover圖是允許用戶自己修改的，這樣，攝影愛好者在整個(gè)版式上設(shè)置自己的攝影作品，會(huì)有很高的滿足和成就感，同時(shí)內(nèi)容區(qū)的照片我們利用html技術(shù)，讓每一橫排都能做到統(tǒng)一高度，讓整個(gè)頁(yè)面更加整潔，該版式還能做到自適應(yīng)。這種版式能為訪客帶來更舒適的視覺享受，更好的幫助訪客認(rèn)識(shí)主人的攝影生活！

舊屋改造

住久了的房子，總是需要點(diǎn)新鮮的翻修，或者趁買了房子，根據(jù)實(shí)現(xiàn)自己夢(mèng)想居住環(huán)境進(jìn)行裝修，版式就是以實(shí)現(xiàn)此目標(biāo)為最終目的。

也許你只是一個(gè)普通家，但是我們可以提供給你典雅的歐式風(fēng)格、古樸的中國(guó)風(fēng)格、溫情的北歐風(fēng)格。

裝扮也是如此，我們需要找到最新的元素，一方面提供更完整的結(jié)構(gòu)服務(wù)，同時(shí)也需要給到更戶更新的感覺。我們提供的不僅僅是一套簡(jiǎn)單的視覺皮膚，而是一整套完整的空間瀏覽體驗(yàn)解決方案。

經(jīng)過對(duì)線上已有版式的體驗(yàn)，發(fā)現(xiàn)已經(jīng)有些陳舊和老化，需要來一次翻新裝修。為了達(dá)到目的，創(chuàng)造更好的用戶體驗(yàn)，針對(duì)這些問題進(jìn)行再設(shè)計(jì)，解決了目前線上版式的一些交互、視覺以及跟膚邏輯混亂導(dǎo)致的問題。

a.跟膚邏輯混亂

QQ空間V6版本在跟膚一直都存在著一些問題，以這套格子拼貼版式為例，在V6版本中，模塊底色是白色半透明的，當(dāng)遇到深色裝扮，為了協(xié)調(diào)色調(diào)自然會(huì)是一套深色配色，深色配色的文本色一般都是淺色，白色半透明底就會(huì)讓這個(gè)正文色不明顯，甚至看不清，這樣會(huì)給用戶帶來極大的閱讀困難。所以在這次版式的調(diào)整中，針對(duì)這一問題，我們會(huì)根據(jù)配色自動(dòng)匹配模塊底色，如果用戶搭配的是深色配色，那么我們會(huì)給用戶搭配黑色半透明底，如果是淺色配色，就搭配白色半透明底。同時(shí)為了滿足既不影響裝扮及版式的美觀，也不影響內(nèi)容的閱讀，設(shè)計(jì)時(shí)，考慮到內(nèi)容區(qū)域的模塊，仔細(xì)調(diào)節(jié)模塊的透明度，讓兩者都能兼顧的情況下達(dá)到視覺的最佳效果。

b.默認(rèn)高度

默認(rèn)高度設(shè)置首先要考慮的是即能讓用戶在首屏看全核心內(nèi)容，同時(shí)不能讓版式過多遮擋裝扮皮膚。

由于每一個(gè)版式的結(jié)構(gòu)和樣式都存在差異化，要讓所有的版式都統(tǒng)一成一樣的高度很難，這樣做會(huì)喪失版式差異化的魅力。

我們會(huì)根據(jù)每一個(gè)裝扮的特點(diǎn)設(shè)定高度，同時(shí)也會(huì)利用新技術(shù)，讓有些版式根據(jù)瀏覽器大小，做到居中顯示，已至于不讓大屏幕的用戶感覺到頁(yè)面不協(xié)調(diào)。

c.左右失衡

這個(gè)問題主要體現(xiàn)在遠(yuǎn)方來信這個(gè)版式上，這個(gè)版式的初衷是為右側(cè)有內(nèi)容的裝扮設(shè)計(jì)，但當(dāng)遇到右側(cè)無內(nèi)容的裝扮時(shí)，左右側(cè)的視覺內(nèi)容就會(huì)不均勻，會(huì)讓用戶感到極度的不平衡。

所以，我們?cè)谠僭O(shè)計(jì)的時(shí)候，考慮到去兼容更多的裝扮，把左側(cè)模塊加寬，這樣整個(gè)重心不會(huì)太過于偏移，同時(shí)如果裝扮右側(cè)有內(nèi)容，就會(huì)使整套版式更協(xié)調(diào)，更完美。同時(shí)在設(shè)計(jì)中加入一些小細(xì)節(jié)，模塊的右上角和左下角加入折角，讓整個(gè)版式更像是信紙，更契合主題。

d.質(zhì)感陳舊，陰影過重

桌面一瞥和簡(jiǎn)約裝修這兩套版式質(zhì)感和投影都是以前的設(shè)計(jì)表現(xiàn)形式，為了讓裝扮更流行，所以設(shè)計(jì)調(diào)整得更加扁平，去掉多余的陰影和質(zhì)感，會(huì)讓用戶覺得更精致，更清爽，視覺感受也會(huì)更加舒心。

整理規(guī)范

房子內(nèi)的家具和裝飾品多了，或多或少會(huì)出現(xiàn)凌亂的感覺，為了盡可能減少這些讓人凌亂的因素，人會(huì)制定一些規(guī)則，讓其看起來更有邏輯性，更合乎情理。比如書應(yīng)該放在書架或者書桌上，衣服放進(jìn)衣柜里等等。

當(dāng)我們的空間里出現(xiàn)了空間名，空間描述，用戶頭像，用戶名時(shí)，不恰當(dāng)?shù)慕M合會(huì)給用戶帶來疑惑，會(huì)思考，這到底是什么。

這時(shí)，規(guī)范的重要性就體現(xiàn)出來了，我們盡可能的要讓這些內(nèi)容有規(guī)律的出現(xiàn)才會(huì)讓用戶一目了然。同時(shí)，有了這些規(guī)則，不同的設(shè)計(jì)師做版式設(shè)計(jì)時(shí)，也不會(huì)有太多的困惑，核心的功能點(diǎn)也不會(huì)遺忘。

感悟

我一直覺得，設(shè)計(jì)的靈感在于生活的點(diǎn)點(diǎn)滴滴，在于觀察，無論我們做什么樣的設(shè)計(jì)，都時(shí)在圍繞著人來展開的，所以我們可以在不同的設(shè)計(jì)行業(yè)里借鑒參考，拓展自己的思路，經(jīng)過思考，轉(zhuǎn)化為自己的一些設(shè)計(jì)思維。

“先文化人，后設(shè)計(jì)師”，這一句話對(duì)我影響蠻深，視覺設(shè)計(jì)只把界面做得好看還遠(yuǎn)遠(yuǎn)不夠，還需要文化底蘊(yùn)，融入以人為本的思想，并將視覺手法與交互和前端技術(shù)有機(jī)結(jié)合，提供完整的視覺解決方案。只有懂得更多了，設(shè)計(jì)才會(huì)更有內(nèi)容，設(shè)計(jì)才會(huì)更有靈魂。

后續(xù)我們還是持續(xù)挖掘更多的版式和裝扮上的創(chuàng)新點(diǎn)，我們期望通過版式和裝扮讓QQ空間像家一樣，帶給用戶更多人性化的體驗(yàn)，幫助用戶在空間沉淀生活點(diǎn)滴， 留住感動(dòng)。