網站使用者體驗：做交互應該知道的視覺幾件事

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

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

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

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

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

通過字體表達產品風格

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

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

　　

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

　　

通過配色展示產品定位

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

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

　　

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

　　

藍色，關鍵字：理智、知性、公正、商務、科技、嚴格、細緻、嚴謹、公式化。 投票的公正性，以及微資料的理性、嚴謹，註定產品要以藍色為主色調。

　　

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

　　

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

　　

營造統一的品牌形象

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

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

　　

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

　　

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

　　

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

　　

説明頁、個人頁、發佈頁等等... 就不一一介紹了，總之大家自己觀察，就會發現微群處處都有體現。

造型讓產品更有衝擊力

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

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

　　

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

　　

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

重要內容留在首屏

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

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

　　

　　

#p#副標題#e#

由於使用者顯示器大多還是1024*768以及1280*800的解析度，除去瀏覽器高度，重要內容還是儘量放在600高以內吧。

讓頁面有層次有重點

交互設計師完成頁面配置設計，突出頁面重點，方便使用者流覽資訊、完成任務。 視覺設計階段，好的設計稿對於延續前期交互理念，引導使用者操作是非常有説明的。

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

　　

　　

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

　　

類比現實世界匹配使用者心智模型

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

　　

微電臺首頁中，節目下方的刻度就類比了收音機的調頻設計。 而音樂盒的設計更精彩，唱片機的樣式與轉動效果，讓使用者感覺真的在聽唱片一樣。

　　

　　

插圖讓產品更有情感

插圖在微博中很多，我這裡只舉錯誤頁的例子。 大家都有感觸，錯誤的體驗是非常不好的，但設計師卻用一張張插圖，讓這種挫敗和焦躁的感覺降到了最低。 毛衣針斷掉的尷尬、面面相覷的活動氣球和投票柱子，都幽默地化解了使用者的負面情緒，同時產品也更有味道了。

　　

值得一提的是微群的設計，前面我們說到，微群的品牌要素是：星球、飛船和人。 在這個品牌定位下，幾種錯誤情況就很好表現啦，我不說，大家自己看吧。

　　

巧用Icon，頁面更精彩

Icon設計是視覺設計非常重要的一部分，很多晦澀難懂的內容，配上Icon圖形化解釋，會更容易理解。 相反，如果圖示的設計項目不合適，或是將圖示將背景亂用，也會干擾使用者理解。

微博大螢幕首頁，設計師用了3個Icon，配合文案解釋了什麼是大螢幕。

　　

各產品説明頁，也常常出現Icon。 説明頁類似于產品的說明書，很多內容堆在裡面，通過圖示的區分，使用者很容易按類別查找到所需要的資訊。

　　

　　

柵格化提升使用者體驗和開發成本

柵格化在視覺設計中，越來越受重視，究其原來，主要是三點：一是可以統一頁面的佈局，提升使用者的流覽操作體驗;二是將頁面模組的尺寸標準化，降低開發和維護的成本;最後，柵格化也是網頁設計專業度的體現。

　　

微博主站的設計中採用了柵格化體系，柵格寬度為20px，間隙為10px(整個頁面寬為950px)。 寫博文時，我翻看了一下各產品的遵循情況，大多不錯，其中最好的應該是微公益。

至此，視覺設計原則講完了。

說了這麼多，最後簡單談談作為交互設計師的我們該怎麼做吧。 思考這個問題之前，還請大家把以上的原則再複習一遍：

1. 通過字體表達產品風格

2. 通過配色展示產品定位

3. 營造統一的品牌形象

4. 造型讓產品更有衝擊力

5. 重要內容留在首屏

6. 讓頁面有層次有重點

7. 類比現實世界匹配使用者心智模型

8. 插圖讓產品更有情感

9. 巧用Icon頁面更精彩

10. 柵格化提升使用者體驗和開發成本

總的來說，我們可以把這10個內容歸成兩類，一個完全是視覺設計師的領域，以溝通為主;另一個，交互可以和視覺設計配合完成，溝通以外注重交付物的傳遞。

第一類包括：通過字體表達產品風格、通過配色展示產品定位、營造統一的品牌形象、造型讓產品更有衝擊力、類比現實世界匹配使用者心智模型。

瞭解這些內容，瞭解視覺設計師能做哪些提升體驗的事情，才能更好地和他們溝通。 讓視覺設計師提早瞭解需求，獲得對等的產品資訊，才能更好地發揮設計的力量。

第二類包括：重要內容留在首屏、讓頁面有層次有重點、插圖讓產品更有情感、巧用Icon頁面更精彩、柵格化提升使用者體驗和開發成本。

這類原則，除了和視覺設計師有效溝通，最好在自己的交付物——原型以及講解中有所體現。 比如原型中通過不同灰度色塊表現設計重點、注重各個元件的柵格化、為重點內容設置插圖和Icon的預留位置等等。 通過這種對視覺設計的理解、交付物形式的傳遞，配合視覺設計師做出更符合產品需求以及使用者體驗的產品。

(微博UDC原創博文，歡迎轉載並注明出處，歡迎訂閱 )