在整個產(chǎn)品設(shè)計的過程中，視覺設(shè)計與交互設(shè)計的“工序”非常緊密，兩者關(guān)系也是相輔相成，互相影響。而視覺界面作為最直接與用戶交流的層面，如何把交互設(shè)計以良好表現(xiàn)形態(tài)展現(xiàn)給用戶，這里主要集中探討視覺在提升交互的可用性方面的作用：

提升可瀏覽性 精確與高效地傳遞信息與任務(wù) 貼合用戶的心智模型 讓交互富有情感 1.提升可瀏覽性：

1）信息結(jié)構(gòu)的良好表現(xiàn)

視覺設(shè)計在對交互的幫助中，首要滿足對產(chǎn)品與交互信息結(jié)構(gòu)的展現(xiàn)，展現(xiàn)信息的清晰可讀性，然后才是品牌，情感的傳達(dá)。視覺語言可以通過分層，分類，對比等語言手段對產(chǎn)品概念及信息進(jìn)行處理。

同樣都是文章詳情頁面，相信沒有多少用戶在瀏覽pic01時能快速準(zhǔn)確地知道網(wǎng)站想給他什么信息，或者讓用戶做什么。信息主次的分布，層級，色彩，均無做好有效分布，用戶一邊迷惑，一邊迷路。而pic02對內(nèi)容按主次程度來劃分，最重要的文章詳情信息一目了然，結(jié)構(gòu)有序，條理清晰。 我們能感受到視覺語言的有效干預(yù)，能對信息結(jié)構(gòu)的展現(xiàn)起到很大的幫助作用

2）增強(qiáng)信噪比

信噪比（Signal to Noise Ratio）又稱為訊噪比，原義是電聲學(xué)里輸出信號的電壓與同時輸出的噪聲電壓的比。

一般來說，信噪比越大，說明混在信號里的噪聲越小，否則相反。類比到界面設(shè)計中，有效的視覺元素就是信號，而其他干擾元素，就是噪音。 界面的噪音是由多余的干擾信息造成的，會分散用戶注意力，使用戶不能把注意力集中到直接表達(dá)產(chǎn)品功能和行為的元素上，導(dǎo)致給用戶帶來認(rèn)知壓力和妨礙導(dǎo)航的速度和精確度。不合適的字體，表義不明確的ICON，不必要的裝飾等等，都是界面噪音。在視覺設(shè)計中如果保持最高的信噪比來展現(xiàn)信息，能增強(qiáng)界面的可瀏覽性。換句話說，如果去掉這些次要的或者干擾的設(shè)計元素，并沒有使功能有所影響，那強(qiáng)烈建議縮小這些元素的應(yīng)用比例，或者直接去掉！

原本需要表述的幾個柱狀數(shù)據(jù)信息，結(jié)果被埋藏在一堆花哨，文字信息堆雜的背景中，典型的信噪比過低。

2.精確與高效地傳遞信息與任務(wù)

良好的視覺設(shè)計，能增強(qiáng)信息條理的清晰度。這里的清晰度有兩方面的含義：清晰的視覺引導(dǎo)，和視覺引導(dǎo)元素本身的精確性。

1）信息引導(dǎo)

良好的視覺設(shè)計能用色彩和層次等語言，自然而又清晰的羅列出一條視覺的“路線”，引導(dǎo)用戶流暢的閱讀，而不用自己費(fèi)力的去疏通條理，或者在密密麻麻信息的忙海中尋找未知的方向。這條指引的路線，我們稱他為“視覺流”。

表單中視覺流的形成

表單是個關(guān)鍵有效信息集中，需要讓用戶集中注意力完成操作以提交數(shù)據(jù)的地方。各種類型的數(shù)據(jù)，控件，信息的展現(xiàn)方式都會堆積一起，常給瀏覽和填寫帶來干擾和不順暢感。

通過讓多種信息分類，統(tǒng)一規(guī)范處理后的效果有沒有好一點(diǎn)呢？（pic.04） 所有的lab標(biāo)簽與input輸入框居中軸線對齊，一個表單中，有且只有一條中軸線——這是視覺引導(dǎo)的關(guān)鍵。讓用戶需要查看的信息與填寫的內(nèi)容整齊劃一地羅列下來。視覺引導(dǎo)的形成很好的幫助了用戶在填寫過程中的順暢感

2）準(zhǔn)確直觀的信息符號

有了清晰的視覺引導(dǎo)還不夠，這些視覺引導(dǎo)元素本身需要遵循一定規(guī)范，和富有準(zhǔn)確的語義，才能起到有效引導(dǎo)的作用。

精確規(guī)范的視覺元素的運(yùn)用，使得pic.05的閱讀瀏覽清晰，流暢，加強(qiáng)了網(wǎng)頁的可掃描性。綠色的標(biāo)題設(shè)計使用戶很輕易得在板塊間快速跳轉(zhuǎn)，并且結(jié)合使用了文案，以問題標(biāo)題的形式，讓用戶迅速的知曉板塊的內(nèi)容和有無必要再進(jìn)行下去。 而Bar沒有語義定義及運(yùn)用規(guī)則的pic.06，則在瀏覽閱讀中給用戶造成了不必要的干擾和混亂感。并沒有起到引導(dǎo)的作用

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

將現(xiàn)實生活中的影子，借鑒模擬到產(chǎn)品設(shè)計中來，是交互設(shè)計中常用的方法，而視覺設(shè)計，也能在這方面更好的起到貼近用戶感受的作用。增強(qiáng)用戶的認(rèn)知熟悉度，和適應(yīng)性，能讓用戶感受到無縫而舒服的用戶體驗。

1）尊重用戶體驗

窗口關(guān)閉、放大、縮小按鈕，是常被拿來當(dāng)?shù)湫偷囊粋€例子。明顯的，是將現(xiàn)實生活中的紅綠信號燈演的，延續(xù)到了這里。由于在現(xiàn)實生活中，紅色被用來代表警示，警告，危險等語義，用戶已經(jīng)潛移默化的被影響。當(dāng)看到紅色按鈕時，不需仔細(xì)思考，潛意識會小心謹(jǐn)慎點(diǎn)擊該按鈕，以免帶來不好的結(jié)果。

2）體現(xiàn)交互的統(tǒng)一性 蘋果公司在PC,MP3,TOUCH,IPHONE等平臺界面上，都沿用了相同的視覺風(fēng)格設(shè)計，并且每個不同產(chǎn)品本身的工業(yè)設(shè)計，也近乎一致，讓用戶在“切換”每個不同產(chǎn)品時，又能找到產(chǎn)品身上相當(dāng)多的共同語言。

4.讓交互富有情感：

如果說交互是產(chǎn)品的骨骼，視覺就是他美麗的外衣，讓產(chǎn)品看起來有血有肉有性格。也使得產(chǎn)品能和 用戶產(chǎn)生情感上的交流互動。而抓住目標(biāo)用戶的情感場景而做出的視覺表現(xiàn)，能有效觸動和推進(jìn)產(chǎn)品和用戶間的交流更順暢。熟悉，親切，喜愛甚至貼心的情感，都由此而建立起來了。

1）符合目標(biāo)用戶的場景

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

我們由以上，大體看到了視覺會從哪幾個方面對交互和產(chǎn)品產(chǎn)生積極的影響。那么，是不是說只要交互無法完成的使命，需要填補(bǔ)的空缺，有視覺來完善，最后都會OK呢？視覺是不是萬能的包裝殺手呢？ 答案使否定的！視覺設(shè)計不是神話。

我們要知道，一個產(chǎn)品的完成是由“創(chuàng)意＋行為＋外觀”這幾個主要的關(guān)鍵步驟來完成的，反映到產(chǎn)品設(shè)計里面，就是產(chǎn)品的創(chuàng)意概念，交互設(shè)計，和視覺設(shè)計。

每個步驟都是至關(guān)重要，并且有著先后順序的。就像一個流水線作業(yè)，前一道工序完成與否與質(zhì)量好壞，影響著后續(xù)工序的進(jìn)行。也就是說，在產(chǎn)品設(shè)計里面，如果遇到失敗的產(chǎn)品創(chuàng)意，或者糟糕的交互設(shè)計，即使賦予再優(yōu)秀的視覺設(shè)計，最終也是個失敗的產(chǎn)品，視覺設(shè)計不能改變產(chǎn)品的命運(yùn)。而在失敗的產(chǎn)品創(chuàng)意與糟糕的交互設(shè)計之上進(jìn)行的視覺設(shè)計，被稱為“尸體彩繪”。 我們要努力讓視覺設(shè)計大程度的發(fā)揮能動作用，并且我們也要努力不能讓一個產(chǎn)品中，只有視覺設(shè)計。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

分享文章：論視覺設(shè)計與交互設(shè)計
分享網(wǎng)址：http://jinyejixie.com/news32/309632.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)