界面設(shè)計(jì)時(shí)該如何面對(duì)視覺(jué)誤差?

2018-01-25 1409 0
編者按:前幾天的“藍(lán)黑白金”事件,已經(jīng)有設(shè)計(jì)師同學(xué)揭秘了誤差的原因,木想到今天百度的同學(xué)出了升級(jí)版的教程,聊聊界面設(shè)計(jì)過(guò)程中,遇到視覺(jué)BUG時(shí)的處理方法,非常漲姿勢(shì)的一篇實(shí)用文,來(lái)收 >>> 最近的“藍(lán)黑白金”事件非常的火,引發(fā)了大家對(duì)視覺(jué)誤差的思考。對(duì)于做“視覺(jué)設(shè)計(jì)”專業(yè)的同學(xué)來(lái)說(shuō),視覺(jué)誤差同樣值得研究研究。俗話說(shuō):“耳聽(tīng)為虛,眼見(jiàn)為實(shí)”,不可否認(rèn)眼睛是人的感覺(jué)器官中最直接,最能反映事物原貌的。但眼睛看到的是否就一定反映客觀事實(shí)呢?其實(shí)不一定。人類的眼睛,有它特有的成像原理和信息處理過(guò)程。就像所有的計(jì)算機(jī)程序一樣,再精密的程序也會(huì)有BUG,所以眼睛有時(shí)候也會(huì)產(chǎn)生錯(cuò)覺(jué),甚至不同人的主觀感受也會(huì)有細(xì)微差異。 我們作為視覺(jué)設(shè)計(jì)師需要總結(jié)的是:當(dāng)我們遇到這些視覺(jué)BUG的時(shí)候,該如何處理呢? 讓我們來(lái)看幾個(gè)經(jīng)典的視覺(jué)誤差案例感受一下吧。 埃冰斯幻覺(jué) bd2015030511 黃綠色圓和紫色圓其實(shí)一樣大,但是前者看起來(lái)小一些,是不是很神奇? 托蘭斯肯彎曲幻覺(jué) bd2015030512 猜猜這三個(gè)圓周的直徑哪個(gè)最大?其實(shí)都一樣 o_O 平行線錯(cuò)覺(jué) bd2015030513 其實(shí)都是平行線 (⊙_⊙)? 在設(shè)計(jì)工作中,也難免碰到存在視覺(jué)誤差的場(chǎng)景??偟膩?lái)講,我們?cè)诮缑嬖O(shè)計(jì)時(shí)處理視覺(jué)誤差的方法可以分為三個(gè)方面:
1、有時(shí)我們需要避免造成視覺(jué)誤差的設(shè)計(jì) 例如“流程條”,設(shè)計(jì)師們一定不陌生,它可以幫助用戶非常清晰的了解完成一個(gè)目標(biāo)的全過(guò)程和當(dāng)下所處的位置,那我們看看下面這個(gè)“流程條”的設(shè)計(jì)
bd2015030514 這種設(shè)計(jì)應(yīng)該也很常見(jiàn),但是個(gè)人并不太喜歡這樣的形式,看過(guò)上面經(jīng)典視覺(jué)誤差案例的同學(xué)應(yīng)該注意到了,它跟第三種“平行線錯(cuò)覺(jué)”形似,“平行線”配合“>>”可能會(huì)造成視覺(jué)誤差,讓人感覺(jué)這個(gè)平行線不平行。會(huì)給人不舒服的感覺(jué),有強(qiáng)迫癥的人看了更是受不了吧?~>_<~+,雖然錯(cuò)覺(jué)不那么明顯,但是我還是會(huì)避免使用這種形式。 再來(lái)看一個(gè)例子:界面設(shè)計(jì)的時(shí)候,常常會(huì)遇到模塊的劃分,會(huì)用到色塊和線框,看下圖,你會(huì)感覺(jué)到黑線是凸出來(lái)的,正常人都喜歡對(duì)齊嘛,那么看到這個(gè)就會(huì)感覺(jué)到不舒服了,實(shí)際上呢,看放大的部位,其實(shí)客觀上看它們真是對(duì)齊的,因?yàn)槿搜鄣腻e(cuò)覺(jué),導(dǎo)致感受上不對(duì)齊,所以我們要避免這種色塊和線框接觸的設(shè)計(jì),如果一定需要這樣的形式,那么我們也是有辦法的,那就是降低“色塊”和“線條”的明暗差,來(lái)緩和視覺(jué)誤差:(見(jiàn)下圖右側(cè))是不是感覺(jué)好多了
bd2015030515
2、有時(shí)我們需要利用視覺(jué)誤差 視覺(jué)誤差客觀的存在,那么我們就得按它的規(guī)矩來(lái),了解它才能駕馭它。比如說(shuō)像素畫(huà): 早在紅白機(jī)年代,像素畫(huà)風(fēng)靡全球,它有自己的獨(dú)特優(yōu)點(diǎn):文件字節(jié)數(shù)小、占內(nèi)存小,非常適合當(dāng)年的“龜速網(wǎng)絡(luò)”和“效率低下的CPU”。但是要畫(huà)好像素畫(huà),是需要具備一些專業(yè)知識(shí)的. 對(duì)于直線、點(diǎn)、曲線、立體感、透視等等都有標(biāo)準(zhǔn)的規(guī)則,把像素畫(huà)拉近了看,其實(shí)都是一些像素點(diǎn),只有遠(yuǎn)看整體才能看到最終效果(有點(diǎn)類似油畫(huà))。 放大看和整體看,像素畫(huà)給人的感受差異很大,也存在”視覺(jué)誤差”,那么這些像素畫(huà)的”規(guī)則”,其實(shí)就是建立在對(duì)視覺(jué)誤差的”利用”,如果不守規(guī)則,做出來(lái)的像素畫(huà)那可就要慘不忍睹了,各種鋸齒。 bd2015030516 像素畫(huà)在表現(xiàn)線條的粗細(xì)方面也有講究,因?yàn)橄袼禺?huà)1像素線條和2像素線條視覺(jué)上的粗細(xì)差異是非常大的,那么在表現(xiàn)粗細(xì)的時(shí)候,更多的是用顏色的明暗來(lái)表現(xiàn). 在像素畫(huà)中可以用淡色來(lái)表達(dá)“細(xì)線”, 這就是利用了視覺(jué)誤差.  另外還有“膨脹色”、“收縮色”,都是視覺(jué)誤差的表現(xiàn),設(shè)計(jì)師們可以利用其特點(diǎn),在自己的作品上更好的進(jìn)行視覺(jué)信息傳達(dá)。 bd2015030518
3、面對(duì)視覺(jué)誤差時(shí),我們遵循一條原則“以你的感受為準(zhǔn)” 造成視覺(jué)誤差的原因和類型有很多,我很難一一列舉,如果我們不得不面對(duì)它們的時(shí)候,我們應(yīng)該如何處理呢?再看看接下來(lái)的列子: bd2015030517 做icon是件非常嚴(yán)謹(jǐn)?shù)氖虑?,我們看看上圖,第一種情況,看參考線,他們的高度嚴(yán)格一致,只是icon的外形不盡相同,第三個(gè)icon外形是個(gè)圓,“圓”其實(shí)能夠給人“滿、脹”的視覺(jué)感受,明明同樣的高寬,圓會(huì)給人“大一點(diǎn)”的感覺(jué),那么我們遇到這種情況,會(huì)尊重我們的眼睛,把“圓”相對(duì)縮小一些,也就是我們看到的第三種情況,這樣是不是更加舒服一些呢? 好了,分享就到這。 總之視覺(jué)設(shè)計(jì)師需要關(guān)注并了解到“視覺(jué)誤差”帶來(lái)的影響,思考如何更好的處理,為追求“完美”增加砝碼。歡迎大家探討。 
26
評(píng)論區(qū)(0)
正在加載評(píng)論...