視覺對交互的幫助——提升可用性

1.提升可瀏覽性：

1）信息結構的良好表現
視覺設計在對交互的幫助中，首要滿足對產品與交互信息結構的展現，展現信息的清晰可讀性，然後才是品牌，情感的傳達。視覺語言可以通過分層，分類，對比等語言手段對產品概念及信息進行處理。
例：
pic.01

pic.02





對上面兩圖進行對比，同樣都是文章詳情頁面，相信沒有多少用戶在瀏覽pic01時能快速準確地知道網站想給他什麼信息，或者讓用戶做什麼。信息主次的分 佈，層級，色彩，均無做好有效分佈，用戶一邊迷惑，一邊迷路。而pic02對內容按主次程度來劃分，最重要的文章詳情信息一目瞭然，結構有序，條理清晰。
我們能感受到視覺語言的有效干預，能對信息結構的展現起到很大的幫助作用。

2）增強信噪比
信噪比（Signal to Noise Ratio）又稱為訊噪比，原義是電聲學裡輸出信號的電壓與同時輸出的噪聲電壓的比。
一般來說，信噪比越大，說明混在信號裡的噪聲越小，否則相反。類比到界面設計中，有效的視覺元素就是信號，而其他干擾元素，就是噪音。
界面的噪音是由多餘的干擾信息造成的，會分散用戶注意力，使用戶不能把注意力集中到直接表達產品功能和行為的元素上，導致給用戶帶來認知壓力和妨礙導航的 速度和精確度。不合適的字體，表義不明確的ICON，不必要的裝飾等等，都是界面噪音。在視覺設計中如果保持最高的信噪比來展現信息，能增疆界面的可瀏覽 性。換句話說，如果去掉這些次要的或者干擾的設計元素，並沒有使功能有所影響，那強烈建議縮小這些元素的應用比例，或者直接去掉！
例：
pic.03

圖pic.03中原本需要表述的幾個柱狀數據信息，結果被埋藏在一堆花哨，文字信息堆雜的背景中，典型的信噪比過低。

2.精確與高效地傳遞信息與任務

1）信息引導
良好的視覺設計能用色彩和層次等語言，自然而又清晰的羅列出一條視覺的「路線」，引導用戶流暢的閱讀，而不用自己費力的去疏通條理，或者在密密麻麻信息的忙海中尋找未知的方向。這條指引的路線，我們稱他為「視覺流」。
例：表單中視覺流的形成
pic.04

表單是個關鍵有效信息集中，需要讓用戶集中注意力完成操作以提交數據的地方。各種類型的數據，控件，信息的展現方式都會堆積一起，常給瀏覽和填寫帶來干擾和不順暢感。
通過讓多種信息分類，統一規範處理後的效果有沒有好一點呢？（pic.04）
所有的lab標籤與input輸入框居中軸線對齊，一個表單中，有且只有一條中軸線——這是視覺引導的關鍵。讓用戶需要查看的信息與填寫的內容整齊劃一地羅列下來。視覺引導的形成很好的幫助了用戶在填寫過程中的順暢感。

2）準確直觀的信息符號
有了清晰的視覺引導還不夠，這些視覺引導元素本身需要遵循一定規範，和富有準確的語義，才能起到有效引導的作用。
例：
pic.05

pic.06

精確規範的視覺元素的運用，使得pic.05的閱讀瀏覽清晰，流暢，加強了網頁的可掃瞄性。綠色的標題設計使用戶很輕易得在板塊間快速跳轉，並且結合使用了文案，以問題標題的形式，讓用戶迅速的知曉板塊的內容和有無必要再進行下去。
而Bar沒有語義定義及運用規則的pic.06，則在瀏覽閱讀中給用戶造成了不必要的干擾和混亂感。並沒有起到引導的作用。

3.貼合用戶的心智模型：

將現實生活中的影子，借鑑模擬到產品設計中來，是交互設計中常用的方法，而視覺設計，也能在這方面更好的起到貼近用戶感受的作用。增強用戶的認知熟悉度，和適應性，能讓用戶感受到無縫而舒服的用戶體驗。
1）尊重用戶體驗
例:
pic.07

上圖的窗口關閉、放大、縮小按鈕，是常被拿來當典型的一個例子。明顯的，是將現實生活中的紅綠信號燈演的，延續到了這裡。由於在現實生活中，紅色被用來代 表警示，警告，危險等語義，用戶已經潛移默化的被影響。當看到紅色按鈕時，不需仔細思考，潛意識會小心謹慎點擊該按鈕，以免帶來不好的結果。

1）體現交互的統一性
蘋果公司在PC,MP3,TOUCH,IPHONE等平台界面上，都沿用了相同的視覺風格設計，並且每個不同產品本身的工業設計，也近乎一致，讓用戶在「切換」每個不同產品時，又能找到產品身上相當多的共同語言。

4.讓交互富有情感：

如果說交互是產品的骨骼，視覺就是他美麗的外衣，讓產品看起來有血有肉有性格。也使得產品能和 用戶產生情感上的交流互動。而抓住目標用戶的情感場景而做出的視覺表現，能有效觸動和推進產品和用戶間的交流更順暢。熟悉，親切，喜愛甚至貼心的情感，都由此而建立起來了。
1）符合目標用戶的場景
例：
pic.08

淘寶網搜索頁面無結果時，改良後代設計，用很配合用戶心情，甚至更誇張、可愛的旺旺可憐鬼圖案來表達。讓產品主動站到了用戶這一邊，使用戶覺得，你是理解我，體諒我的，而不是冷冰冰很官方的，化解了用戶本來會產生的不爽情緒。

我們由以上，大體看到了視覺會從哪幾個方面對交互和產品產生積極的影響。那麼，是不是說只要交互無法完成的使命，需要填補的空缺，有視覺來完善，最後都會OK呢？視覺是不是萬能的包裝殺手呢？
答案使否定的！視覺設計不是神話。
我們要知道，一個產品的完成是由「創意＋行為＋外觀」這幾個主要的關鍵步驟來完成的，反映到產品設計裡面，就是產品的創意概念，交互設計，和視覺設計。

每個步驟都是至關重要，並且有著先後順序的。就像一個流水線作業，前一道工序完成與否與質量好壞，影響著後續工序的進行。也就是說，在產品設計裡 面，如果遇到失敗的產品創意，或者糟糕的交互設計，即使賦予再優秀的視覺設計，最終也是個失敗的產品，視覺設計不能改變產品的命運。而在失敗的產品創意與 糟糕的交互設計之上進行的視覺設計，被稱為「屍體彩繪」。
我們要努力讓視覺設計最大程度的發揮能動作用，並且我們也要努力不能讓一個產品中，只有視覺設計。