聊聊界面設(shè)計(jì)過(guò)程中,遇到視覺(jué)BUG時(shí)的處理方法(2)
在設(shè)計(jì)工作中,也難免碰到存在視覺(jué)誤差的場(chǎng)景。總的來(lái)講,我們?cè)诮缑嬖O(shè)計(jì)時(shí)處理視覺(jué)誤差的方法可以分為三個(gè)方面:
1、有時(shí)我們需要避免造成視覺(jué)誤差的設(shè)計(jì)
例如“流程條”,設(shè)計(jì)師們一定不陌生,它可以幫助用戶(hù)非常清晰的了解完成一個(gè)目標(biāo)的全過(guò)程和當(dāng)下所處的位置,那我們看看下面這個(gè)“流程條”的設(shè)計(jì)
這種設(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é)好多了
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à),是需要具備一些專(zhuān)業(yè)知識(shí)的.
對(duì)于直線、點(diǎn)、曲線、立體感、透視等等都有標(biāo)準(zhǔn)的規(guī)則,把像素畫(huà)拉近了看,其實(shí)都是一些像素點(diǎn),只有遠(yuǎn)看整體才能看到最終效果(有點(diǎn)類(lèi)似油畫(huà))。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 用戶(hù)體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 圖片畫(huà)冊(cè)平面設(shè)計(jì)排版ps理論教程
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- Photoshop初級(jí)教程-命令的技巧
- 用戶(hù)體驗(yàn),如何讓用戶(hù)心動(dòng)?