起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識QQ空間V8項目總結之版式篇
空間版式是為用戶提供個性化服務的功能，不同的排列組合都有可能設計出不同的版式，給人截然不同的感覺。空間版式年久失修，伴隨V8的上線，空間的版式也應該注入一些新的血液，同時，老的版式也應該好好的翻修一番，讓用戶住得更加舒服。
設計版式如同裝修房屋，搭建的框架如同房子的內部結構，在同一空間內，裝修設計師能通過不同的布局與結構給他人不一樣的空間感，所以我們在裝修的時候拆掉一堵墻，或者隔出一個新的區域都會給房子帶來全新的布局感受。
一旦確立了主體框架，其中的內容就如同房間里的家具，不一樣的陳設和風格都會給用戶帶來不一樣的觀感，接下來我們要做的就是把成套的家具放在已經布局好的空間里，最后給主人和訪客帶來愉悅舒適的感受。這也正是空間版式和裝扮期望為用戶帶來的體驗！
新屋搭建
一件事物達到了極致，就會自然而然呈現出一種美感。當我們忙碌了一天回到家，看到只用線條、色塊來區分點綴的房間，沒有冗雜的裝飾，就會給我們帶來清爽整潔的感受，可以立刻讓人放松下來，沉浸其中。
同樣，我們的空間版式和裝扮就是想給用戶帶來這樣一種舒適的氛圍，不為質感所累，以功能主義為第一要素，在功能與形式之間找到新的平衡，注重簡單、大方、實用、突出功能、去掉多余的繁瑣裝飾，讓用戶一來到這里就能立刻輕松獲得他想要得到的信息。
上面的裝修風格圖片越來越受到大眾的歡迎，在這個信息膨脹的時代，人們的訴求是簡潔高效。在設計中我們也推崇這種極簡主義，在互聯網中用戶的閱讀方式并不是仔細閱讀，而是“掃”，我們的目標就是通過去除無謂的干擾，提升信噪比，讓用戶在一掃而過的瞬間獲取到他關注的內容！
從Windows7到Windows8,微軟顛覆了我們的視覺感官，從豐富質感過渡到扁平化設計，微軟引領了設計界一個新的方向，掀起了新的設計潮流。iOS7的誕生更是將扁平化設計推向了極致，QQ空間也希望跟上設計的潮流，帶給用戶最新的視覺體驗。
受到Windows8主題風格的靈感啟發，我們設計了扁平化風格的主題
扁平化設計看似簡單，但實際設計的過程中才體會到其中的不易，因為再也無法用那些陰影修飾效果來隱藏設計上的不足，每一個細節，都必須用心打磨。由于每一個feed模塊的尺寸是固定的，所以要讓用戶一眼就能區分日志、相冊、說說、單圖、多圖等實屬不易，需要精確計算字體大小，間距等。
入口型版式的特征是拉取用戶的每一個模塊的少量信息，引導訪客在訪問時，通過主頁內容發現自己對主人感興趣的模塊，再去看詳情。就好像是無數扇門擺在用戶面前，你首先要告訴用戶這扇門后擁有哪些美麗的風景，達到對用戶有足夠的吸引力，用戶才會推開這扇門去看門后面隱藏的精彩的內容。
在裝修中，愛生活，愛攝影的人，家里總會有一面墻上掛著各式自己的照片，自拍照，他人肖像，或是風景，因為照片能記錄自己生活點點滴滴，每一張照片都有背后獨特的故事，還蘊含著攝影者拍攝時的心情和拍攝的理由。我們有理由給用戶帶來最富溫情和回憶感的版式，讓用戶通過照片來講述自己的故事。
很多攝影愛好者用戶并不缺乏優質照片，但是我們沒有一個版式能很好的幫他們呈現。QQ空間需要盡量滿足不同用戶的多樣化需求，因此為攝影愛好者專門設計一套版式的想法就此誕生。
V8的改版，增加了cover圖，在攝影控版式中，我們的cover圖是允許用戶自己修改的，這樣，攝影愛好者在整個版式上設置自己的攝影作品，會有很高的滿足和成就感，同時內容區的照片我們利用html技術，讓每一橫排都能做到統一高度，讓整個頁面更加整潔，該版式還能做到自適應。這種版式能為訪客帶來更舒適的視覺享受，更好的幫助訪客認識主人的攝影生活！
舊屋改造
住久了的房子，總是需要點新鮮的翻修，或者趁買了房子，根據實現自己夢想居住環境進行裝修，版式就是以實現此目標為最終目的。
也許你只是一個普通家，但是我們可以提供給你典雅的歐式風格、古樸的中國風格、溫情的北歐風格。
裝扮也是如此，我們需要找到最新的元素，一方面提供更完整的結構服務，同時也需要給到更戶更新的感覺。我們提供的不僅僅是一套簡單的視覺皮膚，而是一整套完整的空間瀏覽體驗解決方案。
經過對線上已有版式的體驗，發現已經有些陳舊和老化，需要來一次翻新裝修。為了達到目的，創造更好的用戶體驗，針對這些問題進行再設計，解決了目前線上版式的一些交互、視覺以及跟膚邏輯混亂導致的問題。
a.跟膚邏輯混亂
QQ空間V6版本在跟膚一直都存在著一些問題，以這套格子拼貼版式為例，在V6版本中，模塊底色是白色半透明的，當遇到深色裝扮，為了協調色調自然會是一套深色配色，深色配色的文本色一般都是淺色，白色半透明底就會讓這個正文色不明顯，甚至看不清，這樣會給用戶帶來極大的閱讀困難。所以在這次版式的調整中，針對這一問題，我們會根據配色自動匹配模塊底色，如果用戶搭配的是深色配色，那么我們會給用戶搭配黑色半透明底，如果是淺色配色，就搭配白色半透明底。同時為了滿足既不影響裝扮及版式的美觀，也不影響內容的閱讀，設計時，考慮到內容區域的模塊，仔細調節模塊的透明度，讓兩者都能兼顧的情況下達到視覺的最佳效果。
b.默認高度
默認高度設置首先要考慮的是即能讓用戶在首屏看全核心內容，同時不能讓版式過多遮擋裝扮皮膚。
由于每一個版式的結構和樣式都存在差異化，要讓所有的版式都統一成一樣的高度很難，這樣做會喪失版式差異化的魅力。
我們會根據每一個裝扮的特點設定高度，同時也會利用新技術，讓有些版式根據瀏覽器大小，做到居中顯示，已至于不讓大屏幕的用戶感覺到頁面不協調。
c.左右失衡
這個問題主要體現在遠方來信這個版式上，這個版式的初衷是為右側有內容的裝扮設計，但當遇到右側無內容的裝扮時，左右側的視覺內容就會不均勻，會讓用戶感到極度的不平衡。
所以，我們在再設計的時候，考慮到去兼容更多的裝扮，把左側模塊加寬，這樣整個重心不會太過于偏移，同時如果裝扮右側有內容，就會使整套版式更協調，更完美。同時在設計中加入一些小細節，模塊的右上角和左下角加入折角，讓整個版式更像是信紙，更契合主題。
d.質感陳舊，陰影過重
桌面一瞥和簡約裝修這兩套版式質感和投影都是以前的設計表現形式，為了讓裝扮更流行，所以設計調整得更加扁平，去掉多余的陰影和質感，會讓用戶覺得更精致，更清爽，視覺感受也會更加舒心。
整理規范
房子內的家具和裝飾品多了，或多或少會出現凌亂的感覺，為了盡可能減少這些讓人凌亂的因素，人會制定一些規則，讓其看起來更有邏輯性，更合乎情理。比如書應該放在書架或者書桌上，衣服放進衣柜里等等。
當我們的空間里出現了空間名，空間描述，用戶頭像，用戶名時，不恰當的組合會給用戶帶來疑惑，會思考，這到底是什么。
這時，規范的重要性就體現出來了，我們盡可能的要讓這些內容有規律的出現才會讓用戶一目了然。同時，有了這些規則，不同的設計師做版式設計時，也不會有太多的困惑，核心的功能點也不會遺忘。
感悟
我一直覺得，設計的靈感在于生活的點點滴滴，在于觀察，無論我們做什么樣的設計，都時在圍繞著人來展開的，所以我們可以在不同的設計行業里借鑒參考，拓展自己的思路，經過思考，轉化為自己的一些設計思維。
“先文化人，后設計師”，這一句話對我影響蠻深，視覺設計只把界面做得好看還遠遠不夠，還需要文化底蘊，融入以人為本的思想，并將視覺手法與交互和前端技術有機結合，提供完整的視覺解決方案。只有懂得更多了，設計才會更有內容，設計才會更有靈魂。
后續我們還是持續挖掘更多的版式和裝扮上的創新點，我們期望通過版式和裝扮讓QQ空間像家一樣，帶給用戶更多人性化的體驗，幫助用戶在空間沉淀生活點滴， 留住感動。
感謝你的閱讀，本文出自騰訊ISUX?。
??