偶爾會聽到產品經理和互動設計抱怨，視覺設計稿和最初規劃差別太大，我自己也遇到過類似狀況。究其原因，大多還是溝通中出現了問題。
有效溝通，資訊的對等是很重要的。這個對等，既包括讓視覺設計盡早了解產品需求，獲得與其他人員對等的資訊；也包括交流雙方知識領域的對等，彼此多了解對方領域內容，才能更好地溝通。
對於互動設計師來說，視覺設計是合作最多的一環，互動原型終歸要以視覺的形式呈現在使用者眼前。因此，懂些視覺設計，更易於將互動方案傳遞給使用者。同時，互動設計作為多學科交匯的職位，懂些視覺更是自己能力的提高。諸葛亮有句話說的好，什麼都略懂一點，生活會多彩一些。
切入正題，逐一向各位介紹一些視覺原則，為了更好理解，我都舉微博的例子。
視覺設計中，字型的選擇對於產品風格的表現是作用明顯的，同一段文字，用不同字型寫出，感覺確實千差萬別。
微博中最常用的發布框，上方「有什麼新鮮事想告訴大家」採用了華康娃娃體，體現出微博隨時隨地發布，很輕鬆的產品感覺。如果把字型換成「華文新魏體」和「微軟雅黑體」，不是感覺像人民網，就是完全沒有風格，體驗就差多了。
勳章館首頁這段煽情的文字通過手寫體（fzjingleis-r-gb），以日記的形式，表達出勳章記錄生活、記錄成長的產品感覺，若換成一般字型，感覺也就沒了。
通過配色來展示產品定位，也是設計師必用的方法。視覺設計前期調研階段，常常通過情緒版提煉適合目標使用者的顏色，形成一整套的配色方案。
品牌形象是乙個很大的領域，具體到某個微博產品的品牌感，更多的還是通過視覺形象來傳達。這就需要視覺設計師制定一套系統的視覺體系，讓使用者看一眼，就能清晰地辨認。
微群的品牌形象很受大家認可，專案規劃時，希望能表現人與群、人與人的關係，以及群的歸屬感。視覺設計師採用了星球、飛船和人的視覺元素，講述了「每個群都是乙個星球，大家有著共同愛好」的故事。整個**以深藍為主色調，營造星空的感覺，當使用者看到了這種配色和元素，就知道自己來到了微群的頁面。
內測時啟動了這套體系，飛船上的人發現了適合自己的星球，馬上就要降落了。
新手引導中，也巧妙地將這種元素融入進來，既形象，又增強了品牌感。
群的等級，用星球上的樹木來體現，等級越高，樹木越茂盛。
幫助頁、個人頁、發布頁等等… 就不一一介紹了，總之大家自己觀察，就會發現微群處處都有體現。
視覺設計中，誇張的造型對使用者的衝擊力非常大，很容易一下抓住使用者，這種設計常出現在專題頁面和個性**中。
《帶著微博去旅行》這個專題，設計師在頭圖設計中用了斜線處理，就連部分按鍵也是傾斜的，這就和下面規整的模組形成了對比。我們互動設計的原型稿，布局上往往是橫平豎直的，有時視覺表現上打破這種規則，會起到絕佳的效果。
《微博有愛》專題也是個很好的例子，緊握的雙手與標題形成了倒三角形，「獲取情人節勳章」放在三角形尖部，一下就把主題和最重要的操作，推到了使用者眼前。
《微身份勳章》和《2012來了》專題中，感覺就要跳出螢幕的模特和大船，也是表現頁面衝擊力很好的例子。
這是視覺和互動設計師中都要注意的，有時往往原型中放在了首屏，視覺設計時由於一些原因（加模組或是加高頭圖）又被擠到了下面，這點大家在視覺審核與測試中要格外注意。
大家看下圖，大螢幕是乙個反面教材，首屏居然放了乙個廣告，而微博桌面做得就好多了。
由於使用者顯示器大多還是1024*768以及1280*800的解析度，除去瀏覽器高度，重要內容還是盡量放在600高以內吧。
互動設計師完成頁面布局設計，突出頁面重點，方便使用者瀏覽資訊、完成任務。視覺設計階段，好的設計稿對於延續前期互動理念，引導使用者操作是非常有幫助的。
先看微博主站的例子。視覺設計師通過色塊把頁面中的左導、主內容區和右側模組區分開，使用者瀏覽微博資訊時，視線不會被兩側干擾。而同樣布局的微博相簿就差一些，淡灰色左導很不清晰，右側和主內容區也沒有乙個清晰的分界，使用者瀏覽時很難發現重點。
再看微直播首頁，最重要是頁面上方的推薦區，設計師用延展的紅色模組，與下方的淺灰色形成對比，一下就把重點突出了。
原型設計中常說，操作方式要符合使用者的心智模型，其實視覺設計也一樣。把一些現實元素拿來，模擬真實世界，會給使用者身臨其境的感覺。
微電台首頁中，節目下方的刻度就模擬了收音機的調頻設計。而**盒的設計更精彩，唱片機的樣式與轉動效果，讓使用者感覺真的在聽唱片一樣。
插圖在微博中很多，我這裡只舉錯誤頁的例子。大家都有感觸，錯誤的體驗是非常不好的，但設計師卻用一張張插圖，讓這種挫敗和焦躁的感覺降到了最低。毛衣針斷掉的尷尬、面面相覷的活動氣球和投票柱子，都幽默地化解了使用者的負面情緒，同時產品也更有味道了。
值得一提的是微群的設計，前面我們說到，微群的品牌元素是：星球、飛船和人。在這個品牌定位下，幾種錯誤情況就很好表現啦，我不說，大家自己看吧。
icon設計是視覺設計非常重要的一部分，很多晦澀難懂的內容，配上icon圖形化解釋，會更容易理解。相反，如果圖示的設計元素不合適，或是將圖示將背景亂用，也會干擾使用者理解。
微博大螢幕首頁，設計師用了3個icon，配合文案解釋了什麼是大螢幕。
各產品幫助頁，也常常出現icon。幫助頁類似於產品的說明書，很多內容堆在裡面，通過圖示的區分，使用者很容易按類別查詢到所需要的資訊。
柵格化在視覺設計中，越來越受重視，究其原來，主要是三點：一是可以統一頁面的布局，提公升使用者的瀏覽操作體驗；二是將頁面模組的尺寸標準化，降低開發和維護的成本；最後，柵格化也是網頁設計專業度的體現。
微博主站的設計中採用了柵格化體系，柵格寬度為20px，間隙為10px（整個頁面寬為950px）。寫博文時，我翻看了一下各產品的遵循情況，大多不錯，其中最好的應該是微公益。
至此，視覺設計原則講完了。
說了這麼多，最後簡單談談作為互動設計師的我們該怎麼做吧。思考這個問題之前，還請大家把以上的原則再複習一遍：
1. 通過字型表達產品風格
2. 通過配色展示產品定位
3. 營造統一的品牌形象
4. 造型讓產品更有衝擊力
5. 重要內容留在首屏
6. 讓頁面有層次有重點
7. 模擬現實世界匹配使用者心智模型
8. 插圖讓產品更有情感
9. 巧用icon頁面更精彩
10. 柵格化提公升使用者體驗和開發成本
總的來說，我們可以把這10個內容歸成兩類，乙個完全是視覺設計師的領域，以溝通為主；另乙個，互動可以和視覺設計配合完成，溝通以外注重交付物的傳遞。
第一類包括：通過字型表達產品風格、通過配色展示產品定位、營造統一的品牌形象、造型讓產品更有衝擊力、模擬現實世界匹配使用者心智模型。
了解這些內容，了解視覺設計師能做哪些提公升體驗的事情，才能更好地和他們溝通。讓視覺設計師提早了解需求，獲得對等的產品資訊，才能更好地發揮設計的力量。
第二類包括：重要內容留在首屏、讓頁面有層次有重點、插圖讓產品更有情感、巧用icon頁面更精彩、柵格化提公升使用者體驗和開發成本。
這類原則，除了和視覺設計師有效溝通，最好在自己的交付物——原型以及講解中有所體現。比如原型中通過不同灰度色塊表現設計重點、注重各個元件的柵格化、為重點內容設定插圖和icon的佔位符等等。通過這種對視覺設計的理解、交付物形式的傳遞，配合視覺設計師做出更符合產品需求以及使用者體驗的產品。
做互動應該知道的視覺幾件事
偶爾會聽到產品經理和互動設計抱怨，視覺設計稿和最初規劃差別太大，我自己也遇到過類似狀況。究其原因，大多還是溝通中出現了問題。有效溝通，資訊的對等是很重要的。這個對等，既包括讓視覺設計盡早了解產品需求，獲得與其他人員對等的資訊 也包括交流雙方知識領域的對等，彼此多了解對方領域內容，才能更好地溝通。對於...
剛入職的你，應該知道的幾件事
很多初入職場的讀者都比較迷茫，今天就寫一下我對初入職場的信任的一些建議，希望對初入職場的你有所幫助。剛進入職場，這個時候，學習自己本職工作內容是關鍵。一般進入技術崗位，技術上面是有很大的差距的。此時，你的重心就是適應公司的環境，適應工作的強度。需要保持學習的心態，融入大的團隊之中。什麼是本職工作？本...
關於lazyman你還應該知道這幾件事
lazyman hank hi this is hank lazyman hank sleep 10 eat dinner hi this is hank 等待10秒.wake up after 10 eat dinner lazyman hank eat dinner eat supper hi ...