<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »網站設計中該如何應對視覺誤差

        網站設計中該如何應對視覺誤差

        至成科技 2015-03-16 訪問量(1361) 評論(0)
        摘要:
        ui-design-parallax-distortion-1

        至成科技(西安網站制作)按:前幾天的“藍黑白金”事件,已經有設計師同學揭秘了誤差的原因,木想到今天百度的同學出了升級版的教程,聊聊界面設計過程中,遇到視覺BUG時的處理方法,非常漲姿勢的一篇實用文,來收 >>>

        較近的“藍黑白金”事件非常的火,引發了大家對視覺誤差的思考。對于做“視覺設計”專業的同學來說,視覺誤差同樣值得研究研究。俗話說:“耳聽為虛,眼見為實”,不可否認眼睛是人的感覺器官中較直接,較能反映事物原貌的。但眼睛看到的是否就一定反映客觀事實呢?其實不一定。人類的眼睛,有它特有的成像原理和信息處理過程。就像所有的計算機程序一樣,再精密的程序也會有BUG,所以眼睛有時候也會產生錯覺,甚至不同人的主觀感受也會有細微差異。

        我們作為視覺設計師需要總結的是:當我們遇到這些視覺BUG的時候,該如何處理呢?

        讓我們來看幾個經典的視覺誤差案例感受一下吧。

        埃冰斯幻覺

        bd2015030511

        黃綠色圓和紫色圓其實一樣大,但是前者看起來小一些,是不是很神奇?

        托蘭斯肯彎曲幻覺

        bd2015030512

        猜猜這三個圓周的直徑哪個較大?其實都一樣 o_O

        平行線錯覺

        bd2015030513

        其實都是平行線 (⊙_⊙)?

        在設計工作中,也難免碰到存在視覺誤差的場景。總的來講,我們在界面設計時處理視覺誤差的方法可以分為三個方面:

        1、有時我們需要避免造成視覺誤差的設計

        例如“流程條”,設計師們一定不陌生,它可以幫助用戶非常清晰的了解完成一個目標的全過程和當下所處的位置,那我們看看下面這個“流程條”的設計

        bd2015030514

        這種設計應該也很常見,但是個人并不太喜歡這樣的形式,看過上面經典視覺誤差案例的同學應該注意到了,它跟第三種“平行線錯覺”形似,“平行線”配合“>>”可能會造成視覺誤差,讓人感覺這個平行線不平行。會給人不舒服的感覺,有強迫癥的人看了更是受不了吧?~>_<~+,雖然錯覺不那么明顯,但是我還是會避免使用這種形式。

        再來看一個例子:界面設計的時候,常常會遇到模塊的劃分,會用到色塊和線框,看下圖,你會感覺到黑線是凸出來的,正常人都喜歡對齊嘛,那么看到這個就會感覺到不舒服了,實際上呢,看放大的部位,其實客觀上看它們真是對齊的,因為人眼的錯覺,導致感受上不對齊,所以我們要避免這種色塊和線框接觸的設計,如果一定需要這樣的形式,那么我們也是有辦法的,那就是降0“色塊”和“線條”的明暗差,來緩和視覺誤差:(見下圖右側)是不是感覺好多了

        bd2015030515

        2、有時我們需要利用視覺誤差

        視覺誤差客觀的存在,那么我們就得按它的規矩來,了解它才能駕馭它。比如說像素畫:

        早在紅白機年代,像素畫風靡全球,它有自己的獨特優點:文件字節數小、占內存小,非常適合當年的“龜速網絡”和“效率0下的CPU”。但是要畫好像素畫,是需要具備一些專業知識的.

        對于直線、點、曲線、立體感、透視等等都有標準的規則,把像素畫拉近了看,其實都是一些像素點,只有遠看整體才能看到較終效果(有點類似油畫)。

        放大看和整體看,像素畫給人的感受差異很大,也存在”視覺誤差”,那么這些像素畫的”規則”,其實就是建立在對視覺誤差的”利用”,如果不守規則,做出來的像素畫那可就要慘不忍睹了,各種鋸齒。

        bd2015030516

        像素畫在表現線條的粗細方面也有講究,因為像素畫1像素線條和2像素線條視覺上的粗細差異是非常大的,那么在表現粗細的時候,更多的是用顏色的明暗來表現. 在像素畫中可以用淡色來表達“細線”, 這就是利用了視覺誤差.  另外還有“膨脹色”、“收縮色”,都是視覺誤差的表現,設計師們可以利用其特點,在自己的作品上更好的進行視覺信息傳達。

        bd2015030518

        3、面對視覺誤差時,我們遵循一條原則“以你的感受為準”

        造成視覺誤差的原因和類型有很多,我很難一一列舉,如果我們不得不面對它們的時候,我們應該如何處理呢?再看看接下來的列子:

        bd2015030517

        做icon是件非常嚴謹的事情,我們看看上圖,先進種情況,看參考線,他們的高度嚴格一致,只是icon的外形不盡相同,第三個icon外形是個圓,“圓”其實能夠給人“滿、脹”的視覺感受,明明同樣的高寬,圓會給人“大一點”的感覺,那么我們遇到這種情況,會尊重我們的眼睛,把“圓”相對縮小一些,也就是我們看到的第三種情況,這樣是不是更加舒服一些呢?

        好了,分享就到這。

        總之視覺設計師需要關注并了解到“視覺誤差”帶來的影響,思考如何更好的處理,為追求“好”增加砝碼。歡迎大家探討。

        uisdc-tuweia-2

            以上內容由至成科技(西安網站制作,西安網站設計)為您提供,更多精彩內容:http://www.vxdmg.com/

        關注“至成科技”微信公眾號,快速獲取互聯網較新資訊


        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划