sns視覺設(shè)計(jì)分享:QQ校友視覺設(shè)計(jì)
時(shí)常和sns相關(guān)工作的同事們一起討論社區(qū)類網(wǎng)站的風(fēng)格設(shè)定,logo的設(shè)計(jì),排版等等問題,這里就工作中的實(shí)踐經(jīng)驗(yàn)和大家做分享,還有很多不足之處期望和大家共同努力。
關(guān)于視覺風(fēng)格定位:
當(dāng)時(shí)市面上已經(jīng)有著一大批以不同明度,純度的藍(lán)色為主色調(diào)的sns產(chǎn)品
所以要讓用戶在眾多同類產(chǎn)品一眼中認(rèn)出來,必須給你的產(chǎn)品創(chuàng)造產(chǎn)異化,又根據(jù)校友的用戶定位我們?yōu)樾S堰x擇了綠色作為主色調(diào)。
青蔥歲月、綠色給人輕松、積極、清新的感覺,而且又和同類產(chǎn)品造成了視覺上較高的識(shí)別性。
下圖是對(duì)外發(fā)布的第一版的QQ 校友
校友至上線以來經(jīng)過無數(shù)次小的迭代,下面是去年一次較大的改版:
改版中的過程稿:
關(guān)于logo設(shè)計(jì):
之前我們也給出了多個(gè)方案以及適用環(huán)境的效果比照。大家會(huì)傾向于選擇寫實(shí)四葉草的方案。
在產(chǎn)品推出公測(cè)前,我們對(duì)logo作了一次用戶調(diào)查,得到了一個(gè)比較滿意的反饋。下面是用研的方法和報(bào)告:
方法:以用戶訪談的形式給20名在校大三以上的本科生和研究生看logo的設(shè)計(jì)稿件(包括環(huán)境使用效果圖)請(qǐng)各自說出自己對(duì)各方案logo的理解并給出自己的評(píng)分(10分制)
關(guān)于構(gòu)架布局:
這類網(wǎng)站的信息量很大、在整體界面的搭建上要簡潔便于信息的閱讀。因此網(wǎng)站柵格的搭建和信息的編排布局很重要。
關(guān)于文字編排:
由于大量的信息內(nèi)容,文字的排版很重要,這里舉出一些編排上的細(xì)節(jié)給予參考(以feed為例)。
注意:這類網(wǎng)站會(huì)有很多的子級(jí)頁面所以在模塊的分欄等細(xì)節(jié)設(shè)計(jì)上要考慮周全便于全站的統(tǒng)一。
關(guān)于icon:
這類社區(qū)網(wǎng)站使用到icon的地方會(huì)比較多,但這類圖標(biāo)起的是一定范圍內(nèi)適度上的提醒,而不會(huì)過度打擾到用戶。
因此這期間我們對(duì)icon做了次較大的優(yōu)化,優(yōu)化方向在顏色上更柔,造型上更平穩(wěn)方正。
關(guān)于其他設(shè)計(jì):
常常講到這類網(wǎng)站的設(shè)計(jì)約束性,但設(shè)計(jì)師更要為產(chǎn)品挖掘亮點(diǎn),為產(chǎn)品加分。
以上僅是個(gè)人的實(shí)踐和經(jīng)驗(yàn)總結(jié),歡迎大家指出不足之處并提供更多寶貴建議。
希望這些分享對(duì)大家做sns方面的設(shè)計(jì)能有所幫助。
來源:http://cdc.tencent.com/?p=2400
- 目前還沒評(píng)論,等你發(fā)揮!