做交互應該知道的視覺幾件事

　　偶爾會聽到產品經理和交互設計抱怨，視覺設計稿和最初規劃差別太大，我自己也遇到過類似狀況。究其原因，大多還是溝通中出現了問題。

　　有效溝通，信息的對等是很重要的。這個對等，既包括讓視覺設計盡早了解產品需求，獲得與其他人員對等的信息;也包括交流雙方知識領域的對等，彼此多了解對方領域內容，才能更好地溝通。

　　對於交互設計師來說，視覺設計是合作最多的一環，交互原型終歸要以視覺的形式呈現在用戶眼前。因此，懂些視覺設計，更易於將交互方案傳遞給用戶。同時，交互設計作為多學科交匯的職位，懂些視覺更是自己能力的提高。諸葛亮有句話說的好，什麼都略懂一點，生活會多彩一些。

　　切入正題，逐一向各位介紹一些視覺原則，為了更好理解，我都舉微博的例子。

　　通過字體表達產品風格

　　視覺設計中，字體的選擇對於產品風格的表現是作用明顯的，同一段文字，用不同字體寫出，感覺確實千差萬別。

　　微博中最常用的發布框，上方"有什麼新鮮事想告訴大家"采用了華康娃娃體，體現出微博隨時隨地發布，很輕松的產品感覺。如果把字體換成"華文新魏體"和"微軟雅黑體"，不是感覺像人民網，就是完全沒有風格，體驗就差多了。

　　勳章館首頁這段煽情的文字通過手寫體(FZJingLeiS-R-GB)，以日記的形式，表達出勳章記錄生活、記錄成長的產品感覺，若換成一般字體，感覺也就沒了。

　　通過配色展示產品定位

　　通過配色來展示產品定位，也是設計師必用的方法。視覺設計前期調研階段，常常通過情緒版提煉適合目標用戶的顏色，形成一整套的配色方案。

　　紫色，關鍵詞：優雅、高貴、女性、莊重、神聖、成熟、深度、神秘、時尚。微音樂作為音樂首發平台的定位，紫色更加彰顯時尚魅力。

　　紅色，關鍵詞：藝術、熱烈、開放、激情、積極、活力、喜慶、生命、成熟。微直播要體現直播的盛況，充滿激情的紅色就非常適合。

　　藍色，關鍵詞：理智、知性、公正、商務、科技、嚴格、細致、嚴謹、公式化。投票的公正性，以及微數據的理性、嚴謹，注定產品要以藍色為主色調。

　　橙色，關鍵詞：陽光、輝煌、活動、溫暖、記憶、家庭、健康、快樂。微活動的參與感、風雲榜的輝煌，當然也少不了橙色調的烘托。

　　綠色，關鍵詞：成長、樸素、公益、生命、安全、新鮮、和平、春天、大自然。微博達人是面向草根用戶的一款產品，他們通過在微博上的行為，一點點成為某個領域的草根明星，綠色的配色很符合這種成長的感覺，微公益就不多說了，肯定綠色最適合啦。

　　營造統一的品牌形象

　　品牌形象是一個很大的領域，具體到某個微博產品的品牌感，更多的還是通過視覺形象來傳達。這就需要視覺設計師制定一套系統的視覺體系，讓用戶看一眼，就能清晰地辨認。

　　微群的品牌形象很受大家認可，項目規劃時，希望能表現人與群、人與人的關系，以及群的歸屬感。視覺設計師采用了星球、飛船和人的視覺元素，講述了" 每個群都是一個星球，大家有著共同愛好"的故事。整個網站以深藍為主色調，營造星空的感覺，當用戶看到了這種配色和元素，就知道自己來到了微群的頁面。

　　內測時啟動了這套體系，飛船上的人發現了適合自己的星球，馬上就要降落了。

　　新手引導中，也巧妙地將這種元素融入進來，既形象，又增強了品牌感。

　　群的等級，用星球上的樹木來體現，等級越高，樹木越茂盛。

　　幫助頁、個人頁、發布頁等等… 就不一一介紹了，總之大家自己觀察，就會發現微群處處都有體現。

　　造型讓產品更有沖擊力

　　視覺設計中，誇張的造型對用戶的沖擊力非常大，很容易一下抓住用戶，這種設計常出現在專題頁面和個性皮膚中。

　　《帶著微博去旅行》這個專題，設計師在頭圖設計中用了斜線處理，就連部分按鍵也是傾斜的，這就和下面規整的模塊形成了對比。我們交互設計的原型稿，布局上往往是橫平豎直的，有時視覺表現上打破這種規則，會起到絕佳的效果。

　　《微博有愛》專題也是個很好的例子，緊握的雙手與標題形成了倒三角形，"獲取情人節勳章"放在三角形尖部，一下就把主題和最重要的操作，推到了用戶眼前。

　　《微身份勳章》和《2012來了》專題中，感覺就要跳出屏幕的模特和大船，也是表現頁面沖擊力很好的例子。

　　重要內容留在首屏

　　這是視覺和交互設計師中都要注意的，有時往往原型中放在了首屏，視覺設計時由於一些原因(加模塊或是加高頭圖)又被擠到了下面，這點大家在視覺審核與測試中要格外注意。

　　大家看下圖，大屏幕是一個反面教材，首屏居然放了一個廣告，而微博桌面做得就好多了。

 

　　由於用戶顯示器大多還是1024*768以及1280*800的分辨率，除去浏覽器高度，重要內容還是盡量放在600高以內吧。

　　讓頁面有層次有重點

　　交互設計師完成頁面布局設計，突出頁面重點，方便用戶浏覽信息、完成任務。視覺設計階段，好的設計稿對於延續前期交互理念，引導用戶操作是非常有幫助的。

　　先看微博主站的例子。視覺設計師通過色塊把頁面中的左導、主內容區和右側模塊區分開，用戶浏覽微博信息時，視線不會被兩側干擾。而同樣布局的微博相冊就差一些，淡灰色左導很不清晰，右側和主內容區也沒有一個清晰的分界，用戶浏覽時很難發現重點。

　　再看微直播首頁，最重要是頁面上方的推薦區，設計師用延展的紅色模塊，與下方的淺灰色形成對比，一下就把重點突出了。

　　模擬現實世界匹配用戶心智模型

　　原型設計中常說，操作方式要符合用戶的心智模型，其實視覺設計也一樣。把一些現實元素拿來，模擬真實世界，會給用戶身臨其境的感覺。