域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)
說(shuō)實(shí)話，我還真沒(méi)在公共場(chǎng)合真正好好說(shuō)說(shuō)白社會(huì)誕生的過(guò)程，她的樣子是如何被我們一步一步勾勒出來(lái)的。這次，借助UED Blog的即將開(kāi)張，算是正式的公布出來(lái)吧。
在接到白社會(huì)設(shè)計(jì)任務(wù)的時(shí)候，當(dāng)時(shí)的SNS漫天飛舞的設(shè)計(jì)樣式都是facebook、開(kāi)心、校內(nèi)的樣式，那時(shí)，我們就想，如何突破?如何脫離那隨處可見(jiàn)的信息架構(gòu)、頁(yè)面布局模式以及視覺(jué)元素，讓人起碼在第一感受上不覺(jué)得這是一個(gè)市面上千篇一律的SNS的皮。
這其中，我們嘗試了很多的創(chuàng)新，情境故事般的界面，蘋(píng)果的Dock似的導(dǎo)航條，很炫很酷的交互方式，看著簡(jiǎn)直就像電影《鋼鐵俠》一般高科技的界面。但一段時(shí)間的發(fā)散后，我們發(fā)現(xiàn)，我們走在一條誤區(qū)上，視覺(jué)設(shè)計(jì)不是那些表面光鮮亮麗為了炫耀技法的工具，視覺(jué)設(shè)計(jì)應(yīng)該是通過(guò)適合的手法，更好的滿(mǎn)足用戶(hù)的需求，傳遞信息。所謂視覺(jué)傳達(dá)，是在用戶(hù)和信息之間搭建的一座橋梁，幫助用戶(hù)快速、高效、愉快的接受信息，而不是獨(dú)自一個(gè)人翩翩起舞，無(wú)視其它。
于此同時(shí)，白社會(huì)的虛擬用戶(hù)角色設(shè)計(jì)也在如火如荼的展開(kāi)之中，作為參與者，我們也想到了既然虛擬用戶(hù)角色可以幫助產(chǎn)品設(shè)計(jì)和交互設(shè)計(jì)更準(zhǔn)確的定位用戶(hù)需求，那么是不是也能幫助視覺(jué)設(shè)計(jì)在茫茫的大海中尋找目標(biāo)用戶(hù)的視覺(jué)喜好，滿(mǎn)足他們的視覺(jué)品味，更有針對(duì)性的為他們?cè)O(shè)計(jì)呢?沒(méi)錯(cuò)!隨即我們便開(kāi)始啟動(dòng)了一個(gè)叫做“虛擬用戶(hù)視覺(jué)模型”的項(xiàng)目，為的就是通過(guò)模擬目標(biāo)用戶(hù)的視覺(jué)品味和喜好，將設(shè)計(jì)風(fēng)格準(zhǔn)確定位。無(wú)論是對(duì)產(chǎn)品的顏色質(zhì)地風(fēng)格，還是對(duì)其中文字風(fēng)格，APP小插件的設(shè)計(jì)，都能具有一定的指導(dǎo)作用。
我們是這樣定義一個(gè)視覺(jué)模型的：
1. 用戶(hù)角色視覺(jué)模型是在虛擬用戶(hù)角色卡片的基礎(chǔ)上建立起來(lái)的，是對(duì)用戶(hù)角色的一個(gè)視覺(jué)填充。
2. 視覺(jué)模型只在用一系列圖片說(shuō)話，進(jìn)一步豐富用戶(hù)角色，使其更加直觀的得到展現(xiàn)。
3. 通過(guò)每張圖片所包含的顏色信息、質(zhì)感表達(dá)和氛圍烘托，逐漸摸索出用戶(hù)角色在視覺(jué)放面的喜好。
4. 視覺(jué)模型會(huì)隨著人物角色信息的不斷完善而完善，形成一個(gè)持續(xù)填充的庫(kù)。
5. 模型中也會(huì)存在一些主觀的意識(shí)形態(tài)，根據(jù)一些建議意見(jiàn)，持續(xù)進(jìn)行修訂完善。
以下是我們的視覺(jué)模型流程圖：
在這個(gè)視覺(jué)模型庫(kù)中，我們逐漸找到了感覺(jué)。我們的全部視覺(jué)元素不是來(lái)自于設(shè)計(jì)師的個(gè)人偏好，不是老板的喜好，不來(lái)自于任何人的個(gè)人主義，而是全部來(lái)自目標(biāo)用戶(hù)的喜好，他們的期望。
在經(jīng)過(guò)了視覺(jué)模型的幫助之后，我們逐漸找到了屬于白社會(huì)目標(biāo)人群的一套視覺(jué)表達(dá)方式，并開(kāi)始了一系列的設(shè)計(jì)嘗試。
首先，我們發(fā)現(xiàn)淡雅的色彩能讓白領(lǐng)上班族舒張壓力、精神放松，既然白社會(huì)是一個(gè)白領(lǐng)“生活在別處”的地方，那首先在視覺(jué)傳遞上要讓人感到輕松愉悅，以及一些貼心的溫暖。在第一版草稿設(shè)計(jì)的時(shí)候，我們嘗試用一些小清新的顏色來(lái)傳遞這種感覺(jué)，甚至視覺(jué)設(shè)計(jì)師提出了一些像是實(shí)時(shí)天氣、簡(jiǎn)單輕松的小功能的想法豐富在頁(yè)面的整體調(diào)調(diào)中，同時(shí)對(duì)一些頁(yè)面的布局也有了不小的改變，比如一句話的位置，導(dǎo)航條的位置等。
但由于第一版草稿很多細(xì)節(jié)具有局限性，傳統(tǒng)的頁(yè)面布局雖常見(jiàn)，但也不失它的道理在，于是我們根據(jù)實(shí)際情況調(diào)整了一版草稿。這一次，我們還提出了添加白天版和夜晚版的小設(shè)計(jì)，功能雖小，但能讓用戶(hù)感受到一些貼心的溫暖嘛～細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)，因?yàn)殚_(kāi)發(fā)時(shí)間比較緊張，我們都還沒(méi)有名字呢，logo都是搜狐SNS呵呵。
這里是白天版：
這里是夜晚版噢。
之前的這一版，還是沒(méi)覺(jué)得表達(dá)透徹，于是我們決定換換思路，從白領(lǐng)身邊的辦公文化下手，接下來(lái)的這一版是我們改變比較大的一版，也是在內(nèi)測(cè)時(shí)候一直持續(xù)使用的一版。這一版的視覺(jué)風(fēng)格會(huì)比較重，木紋桌面、折紙便簽等，使用久了會(huì)讓人有些壓抑，畢竟深色調(diào)還是會(huì)容易有些憋著的感覺(jué)。同時(shí)，這版我們也開(kāi)始加入了IM，左右APP LIST和IM的面板都做成了收縮的方式。雖然這樣擴(kuò)展了中間的內(nèi)容區(qū)，但操作上還是不夠直觀方便。
我最喜歡的是白天版照在頁(yè)面上的那道陽(yáng)光，就像早晨的陽(yáng)光照在辦公桌上的感覺(jué)，讓人覺(jué)得好有生機(jī)呀。
夜晚版的射燈感覺(jué)也是我很中意的，溫暖的咖啡紅，在夜里最有味道了。
在連續(xù)對(duì)著這版設(shè)計(jì)一個(gè)多月之后，連最開(kāi)始很喜歡這個(gè)設(shè)計(jì)的工程師某某都會(huì)跟我說(shuō)，他天天對(duì)著這個(gè)頁(yè)面有些覺(jué)得壓抑了。從各方面的反饋來(lái)看，這版設(shè)計(jì)雖然在短時(shí)間內(nèi)比較吸引眼球，但長(zhǎng)時(shí)間的使用下來(lái)卻不是讓人舒心的。于是在離上線還有一個(gè)月的時(shí)間內(nèi)，我們一咬牙，改!全站改!
還是回歸了，經(jīng)過(guò)了長(zhǎng)時(shí)間的壓抑后，釋放的輕松比原來(lái)更輕松，也就是現(xiàn)在大家看到的白社會(huì)整體設(shè)計(jì)。我們添加了很多的釋放元素，擴(kuò)大渲染氣氛的logo頭圖，結(jié)合實(shí)時(shí)天氣和手繪logo以及一個(gè)顯著的NO BOSS小標(biāo)標(biāo)，充分的渲染了一種簡(jiǎn)單輕松的氛圍。同時(shí)，為了能讓右側(cè)的IM面板不和瀏覽器的右側(cè)滾動(dòng)條混在一起，有一些視覺(jué)空間，我們還添加了一個(gè)可愛(ài)的老板鍵，小細(xì)節(jié)的設(shè)置也是為了增強(qiáng)氣氛渲染。白天和夜晚版的詮釋也更加明顯了。
整體頁(yè)面的視覺(jué)層次通過(guò)一個(gè)小折疊的處理將中間的內(nèi)容區(qū)域明顯的突出，讓用戶(hù)輕易的將視覺(jué)中心放在feed區(qū)域。IM的列表因?yàn)橛泻芏嗄X袋，容易讓頁(yè)面變得花和亂，我們也盡量的減弱了其背景顏色，讓他不要打擾用戶(hù)。在除了首頁(yè)的其它頁(yè)面將它收了起來(lái)。
之后，我們還有一個(gè)彩蛋噢，節(jié)能版。
白社會(huì)的設(shè)計(jì)誕生過(guò)程就說(shuō)到這里吧，在短短的時(shí)間內(nèi)，我們的視覺(jué)設(shè)計(jì)團(tuán)隊(duì)接受了一次不小的挑戰(zhàn)，收獲也是很多的，無(wú)論是設(shè)計(jì)方法還是設(shè)計(jì)流程又或是視覺(jué)體驗(yàn)設(shè)計(jì)等等，當(dāng)然，我們還在繼續(xù)，繼續(xù)優(yōu)化繼續(xù)修改，繼續(xù)為用戶(hù)帶來(lái)最好的視覺(jué)感受。歡迎大家直接去白社會(huì)直接體驗(yàn)看看。
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
