視覺對交互的幫助——提升可用性
2011-08-26 文章來源: 深達(dá)設(shè)計
Tags:
視覺,交互,可用性,用戶
在整個產(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)品概念及信息進行處理。
例:
例:
pic.01
pic.02
對上面兩圖進行對比,同樣都是文章詳情頁面,相信沒有多少用戶在瀏覽pic01時能快速準(zhǔn)確地知道網(wǎng)站想給他什么信息,或者讓用戶做什么。信息主次的分布,層級,色彩,均無做好有效分布,用戶一邊迷惑,一邊迷路。而pic02對內(nèi)容按主次程度來劃分,最重要的文章詳情信息一目了然,結(jié)構(gòu)有序,條理清晰。
我們能感受到視覺語言的有效干預(yù),能對信息結(jié)構(gòu)的展現(xiàn)起到很大的幫助作用。
我們能感受到視覺語言的有效干預(yù),能對信息結(jié)構(gòu)的展現(xiàn)起到很大的幫助作用。
2)增強信噪比
信噪比(Signal to Noise Ratio)又稱為訊噪比,原義是電聲學(xué)里輸出信號的電壓與同時輸出的噪聲電壓的比。
一般來說,信噪比越大,說明混在信號里的噪聲越小,否則相反。類比到界面設(shè)計中,有效的視覺元素就是信號,而其他干擾元素,就是噪音。
界面的噪音是由多余的干擾信息造成的,會分散用戶注意力,使用戶不能把注意力集中到直接表達(dá)產(chǎn)品功能和行為的元素上,導(dǎo)致給用戶帶來認(rèn)知壓力和妨礙導(dǎo)航的速度和精確度。不合適的字體,表義不明確的ICON,不必要的裝飾等等,都是界面噪音。在視覺設(shè)計中如果保持最高的信噪比來展現(xiàn)信息,能增強界面的可瀏覽性。換句話說,如果去掉這些次要的或者干擾的設(shè)計元素,并沒有使功能有所影響,那強烈建議縮小這些元素的應(yīng)用比例,或者直接去掉!
例:
界面的噪音是由多余的干擾信息造成的,會分散用戶注意力,使用戶不能把注意力集中到直接表達(dá)產(chǎn)品功能和行為的元素上,導(dǎo)致給用戶帶來認(rèn)知壓力和妨礙導(dǎo)航的速度和精確度。不合適的字體,表義不明確的ICON,不必要的裝飾等等,都是界面噪音。在視覺設(shè)計中如果保持最高的信噪比來展現(xiàn)信息,能增強界面的可瀏覽性。換句話說,如果去掉這些次要的或者干擾的設(shè)計元素,并沒有使功能有所影響,那強烈建議縮小這些元素的應(yīng)用比例,或者直接去掉!
例:
pic.03
圖pic.03中原本需要表述的幾個柱狀數(shù)據(jù)信息,結(jié)果被埋藏在一堆花哨,文字信息堆雜的背景中,典型的信噪比過低。
2.精確與高效地傳遞信息與任務(wù)
良好的視覺設(shè)計,能增強信息條理的清晰度。這里的清晰度有兩方面的含義:清晰的視覺引導(dǎo),和視覺引導(dǎo)元素本身的精確性。
1)信息引導(dǎo)
良好的視覺設(shè)計能用色彩和層次等語言,自然而又清晰的羅列出一條視覺的“路線”,引導(dǎo)用戶流暢的閱讀,而不用自己費力的去疏通條理,或者在密密麻麻信息的忙海中尋找未知的方向。這條指引的路線,我們稱他為“視覺流”。
例:表單中視覺流的形成
例:表單中視覺流的形成
pic.04
表單是個關(guān)鍵有效信息集中,需要讓用戶集中注意力完成操作以提交數(shù)據(jù)的地方。各種類型的數(shù)據(jù),控件,信息的展現(xiàn)方式都會堆積一起,常給瀏覽和填寫帶來干擾和不順暢感。
通過讓多種信息分類,統(tǒng)一規(guī)范處理后的效果有沒有好一點呢?(pic.04)
所有的lab標(biāo)簽與input輸入框居中軸線對齊,一個表單中,有且只有一條中軸線——這是視覺引導(dǎo)的關(guān)鍵。讓用戶需要查看的信息與填寫的內(nèi)容整齊劃一地羅列下來。視覺引導(dǎo)的形成很好的幫助了用戶在填寫過程中的順暢感。
所有的lab標(biāo)簽與input輸入框居中軸線對齊,一個表單中,有且只有一條中軸線——這是視覺引導(dǎo)的關(guān)鍵。讓用戶需要查看的信息與填寫的內(nèi)容整齊劃一地羅列下來。視覺引導(dǎo)的形成很好的幫助了用戶在填寫過程中的順暢感。
2)準(zhǔn)確直觀的信息符號
有了清晰的視覺引導(dǎo)還不夠,這些視覺引導(dǎo)元素本身需要遵循一定規(guī)范,和富有準(zhǔn)確的語義,才能起到有效引導(dǎo)的作用。
例:
例:
pic.05
pic.06
精確規(guī)范的視覺元素的運用,使得pic.05的閱讀瀏覽清晰,流暢,加強了網(wǎng)頁的可掃描性。綠色的標(biāo)題設(shè)計使用戶很輕易得在板塊間快速跳轉(zhuǎn),并且結(jié)合使用了文案,以問題標(biāo)題的形式,讓用戶迅速的知曉板塊的內(nèi)容和有無必要再進行下去。
而Bar沒有語義定義及運用規(guī)則的pic.06,則在瀏覽閱讀中給用戶造成了不必要的干擾和混亂感。并沒有起到引導(dǎo)的作用。
而Bar沒有語義定義及運用規(guī)則的pic.06,則在瀏覽閱讀中給用戶造成了不必要的干擾和混亂感。并沒有起到引導(dǎo)的作用。
深圳網(wǎng)站建設(shè)設(shè)計公司-深達(dá)設(shè)計(m.ttlfr.cn),擁有專業(yè)設(shè)計團隊為企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站設(shè)計,網(wǎng)站制作,FLASH網(wǎng)站建設(shè)設(shè)計,Flash互動設(shè)計,網(wǎng)頁制作,品牌設(shè)計.