偶爾會(huì)聽到產(chǎn)品經(jīng)理和交互設(shè)計(jì)抱怨，視覺設(shè)計(jì)稿和最初規(guī)劃差別太大，我自己也遇到過類似狀況。究其原因，大多還是溝通中出現(xiàn)了問題。
有效溝通，信息的對(duì)等是很重要的。這個(gè)對(duì)等，既包括讓視覺設(shè)計(jì)盡早了解產(chǎn)品需求，獲得與其他人員對(duì)等的信息;也包括交流雙方知識(shí)領(lǐng)域的對(duì)等，彼此多了解對(duì)方領(lǐng)域內(nèi)容，才能更好地溝通。
對(duì)于交互設(shè)計(jì)師來說，視覺設(shè)計(jì)是合作最多的一環(huán)，交互原型終歸要以視覺的形式呈現(xiàn)在用戶眼前。因此，懂些視覺設(shè)計(jì)，更易于將交互方案傳遞給用戶。同時(shí)，交互設(shè)計(jì)作為多學(xué)科交匯的職位，懂些視覺更是自己能力的提高。諸葛亮有句話說的好，什么都略懂一點(diǎn)，生活會(huì)多彩一些。
切入正題，逐一向各位介紹一些視覺原則，為了更好理解，我都舉微博的例子。
通過字體表達(dá)產(chǎn)品風(fēng)格
視覺設(shè)計(jì)中，字體的選擇對(duì)于產(chǎn)品風(fēng)格的表現(xiàn)是作用明顯的，同一段文字，用不同字體寫出，感覺確實(shí)千差萬別。
微博中最常用的發(fā)布框，上方“有什么新鮮事想告訴大家”采用了華康娃娃體，體現(xiàn)出微博隨時(shí)隨地發(fā)布，很輕松的產(chǎn)品感覺。如果把字體換成“華文新魏體”和“微軟雅黑體”，不是感覺像人民網(wǎng)，就是完全沒有風(fēng)格，體驗(yàn)就差多了。
勛章館首頁這段煽情的文字通過手寫體(FZJingLeiS-R-GB)，以日記的形式，表達(dá)出勛章記錄生活、記錄成長的產(chǎn)品感覺，若換成一般字體，感覺也就沒了。
通過配色展示產(chǎn)品定位
通過配色來展示產(chǎn)品定位，也是設(shè)計(jì)師必用的方法。視覺設(shè)計(jì)前期調(diào)研階段，常常通過情緒版提煉適合目標(biāo)用戶的顏色，形成一整套的配色方案。
紫色，關(guān)鍵詞：優(yōu)雅、高貴、女性、莊重、神圣、成熟、深度、神秘、時(shí)尚。微音樂作為音樂首發(fā)平臺(tái)的定位，紫色更加彰顯時(shí)尚魅力。
紅色，關(guān)鍵詞：藝術(shù)、熱烈、開放、激情、積極、活力、喜慶、生命、成熟。微直播要體現(xiàn)直播的盛況，充滿激情的紅色就非常適合。
藍(lán)色，關(guān)鍵詞：理智、知性、公正、商務(wù)、科技、嚴(yán)格、細(xì)致、嚴(yán)謹(jǐn)、公式化。投票的公正性，以及微數(shù)據(jù)的理性、嚴(yán)謹(jǐn)，注定產(chǎn)品要以藍(lán)色為主色調(diào)。
橙色，關(guān)鍵詞：陽光、輝煌、活動(dòng)、溫暖、記憶、家庭、健康、快樂。微活動(dòng)的參與感、風(fēng)云榜的輝煌，當(dāng)然也少不了橙色調(diào)的烘托。
綠色，關(guān)鍵詞：成長、樸素、公益、生命、安全、新鮮、和平、春天、大自然。微博達(dá)人是面向草根用戶的一款產(chǎn)品，他們通過在微博上的行為，一點(diǎn)點(diǎn)成為某個(gè)領(lǐng)域的草根明星，綠色的配色很符合這種成長的感覺，微公益就不多說了，肯定綠色最適合啦。
營造統(tǒng)一的品牌形象
品牌形象是一個(gè)很大的領(lǐng)域，具體到某個(gè)微博產(chǎn)品的品牌感，更多的還是通過視覺形象來傳達(dá)。這就需要視覺設(shè)計(jì)師制定一套系統(tǒng)的視覺體系，讓用戶看一眼，就能清晰地辨認(rèn)。
微群的品牌形象很受大家認(rèn)可，項(xiàng)目規(guī)劃時(shí)，希望能表現(xiàn)人與群、人與人的關(guān)系，以及群的歸屬感。視覺設(shè)計(jì)師采用了星球、飛船和人的視覺元素，講述了“每個(gè)群都是一個(gè)星球，大家有著共同愛好”的故事。整個(gè)網(wǎng)站以深藍(lán)為主色調(diào)，營造星空的感覺，當(dāng)用戶看到了這種配色和元素，就知道自己來到了微群的頁面。
內(nèi)測時(shí)啟動(dòng)了這套體系，飛船上的人發(fā)現(xiàn)了適合自己的星球，馬上就要降落了。
新手引導(dǎo)中，也巧妙地將這種元素融入進(jìn)來，既形象，又增強(qiáng)了品牌感。
群的等級(jí)，用星球上的樹木來體現(xiàn)，等級(jí)越高，樹木越茂盛。
幫助頁、個(gè)人頁、發(fā)布頁等等… 就不一一介紹了，總之大家自己觀察，就會(huì)發(fā)現(xiàn)微群處處都有體現(xiàn)。
造型讓產(chǎn)品更有沖擊力
視覺設(shè)計(jì)中，夸張的造型對(duì)用戶的沖擊力非常大，很容易一下抓住用戶，這種設(shè)計(jì)常出現(xiàn)在專題頁面和個(gè)性皮膚中。
《帶著微博去旅行》這個(gè)專題，設(shè)計(jì)師在頭圖設(shè)計(jì)中用了斜線處理，就連部分按鍵也是傾斜的，這就和下面規(guī)整的模塊形成了對(duì)比。我們交互設(shè)計(jì)的原型稿，布局上往往是橫平豎直的，有時(shí)視覺表現(xiàn)上打破這種規(guī)則，會(huì)起到絕佳的效果。
推薦閱讀
<b>互聯(lián)網(wǎng)產(chǎn)品運(yùn)營：打造讓用戶流連忘返的產(chǎn)品</b>
曾經(jīng)有一個(gè)著名的心理學(xué)實(shí)驗(yàn)，把電極接在小白鼠的快樂中樞上，然后把開關(guān)放在小白鼠夠得著的地方。然后，小白鼠就會(huì)不停地按開關(guān)，不吃不喝、不眠不休，直到體力衰竭昏死過去。 雖然說出來不太好聽，但這的確是大多數(shù)>>>詳細(xì)閱讀
本文標(biāo)題：網(wǎng)站用戶體驗(yàn)：做交互應(yīng)該知道的視覺幾件事
地址：http://www.sh-jijian.com/a/22/20120613/67462.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示