• 百圖網免費素材千人群

百圖網 > 設計教程 > 設計技巧 > 視錯覺與UI元素間能產生什么化學反應?

視錯覺與UI元素間能產生什么化學反應?

2017-08-03

評論 0

瀏覽

收藏

@Kana 視覺原理在當下紅火的機械視覺中又是必不可少的,那在我們日常工作的UI產品設計中又有什么可能性的呢?今天,我從“視錯覺”這個角度,探索一下如何運用在UI上。

 

第一篇:視錯覺歷史

古希臘哲學家亞里士多德的《靈魂論》里闡述了人類五感:視覺、觸覺、味覺、嗅覺和聽覺。我們視覺設計師暫時無法在長方形盒子(泛指各種電子設備)內設計味覺、嗅覺和聽覺,而對于觸覺,說到底,我們始終在與這個長方形盒子接觸,并無法通過對設計內物體的真實觸摸而得到感覺,實際伸出手探尋或步行而感受到距離等,去比較大小、距離等進行認知。因為這個客觀存在,也更加需要我們視覺設計師運用視覺原理與技法讓用戶更容易與機器進行交互。因著這樣的認識, 我思考了以下這些可能性:

 

1.蓬佐錯覺-Line

蓬佐錯覺是有關長短的視錯覺。自從意大利心理學家馬里奧.蓬佐(Mario Ponzo,1882~1960)發表了相關論文后,這一視錯覺便被稱為蓬佐錯覺,但在這之前,它就早已被人們所熟知。

上圖上下并列的兩條橫線,上面的看起來比下面的長。有一種觀點認為這是因為橫線外側的斜線使大腦覺得有縱深感,認為上面的線更遠一些。長度相同的線段,位于遠處的應該更長一些,因此上面的橫線會讓人覺得比下面的短。

這一視錯覺在UI運用上,第一個讓我想到的就是Input、Cell或段落間的分割線。各App的長短不同,大多數App都按照iOS或Android Guideline,在各控件左右留P的距離。也有一些不走尋常路的App。

圖1(1.攝影圖片分享APP-IOS系統;2.回家吃飯-IOS系統;3.記賬軟件-ANDROID系統)

 

圖2(1.日志軟件-ANDROID系統;2、3.UBER-IOS系統)

 

圖1截取iOS與Android系統上一些App,設計師使用非常規P距離線。圖2截取了各平臺App左右不留間距的線。從這兩張圖我們可以看到使用各種長短線的都有,并沒有統一標準,最主要是你想要表達什么?在這里蓬佐錯覺是否能幫助到你的UI表達。

手機屏幕的邊界就如蓬佐錯覺中外側斜線,分割線與邊界的距離就能讓人對間隔中左右信息產生或長或短的感受,易讀性也成為考量的一點。在App設計中,全局規范考慮是非常重要的,滿足了單個頁面的視覺需要是遠遠不夠的,前端開發害怕的是沒有邏輯規則的不同,只要定義好功能規范,即使在不同界面使用不同線長短也不是大問題。

簡言之,在定義Line長短時,我們可以更多思考為什么要留邊距,留多少合適,為什么確定這樣的長短,是否有邏輯可循,考慮過全局性了嗎,是否與品牌相合,是否能傳達出視覺故事等等。

 

2.艾賓浩斯錯覺-Space

 

赫爾曼*艾賓浩斯(Hermann Ebbinghaus)是著名的研究人類記憶的心理學家,出生于德國,任職波蘭布雷斯勞大學教授。他主要研究人類如何進行持續性記憶的(題外話:艾賓浩斯記憶曲線非常有名)。上圖是他發現的視錯覺圖。位于中間的兩個橘黃色的圓大小相同,但是看起來右側的明顯偏大。右側橘黃色圓的四周是小圓,所以看起來比實際的大,而左側的橘黃色圓周圍是大圓,因此它看起來比實際的要略小。

REPRESENTATIONS OF THE (A) EBBINGHAUS-TITCHENER SIZE-CONTRAST ILLUSION AND (B) DELBOEUF ILLUSION.

 

艾賓浩斯錯覺在實際應用中非常廣泛,利用我們身邊的東西,進行排列組合,就可以確認發現視錯覺。艾賓浩斯錯覺加上德勃夫錯覺(Joseph Delboeuf illusion)和萬辛克(Dr.Brian Wansink)、薛爾特·梵·依特森博士(Dr.Koert van Ittersum)的研究證實,人們的進食量會被盤子的大小與顏色所影響,也就是說,我們會被這些視錯覺而影響真實行為。

 DESSERTS SERVED ON DIFFERENT COLOURED PLATES AT THE INSTITUT PAUL BOCUSE RESEARCH CENTRE IN THE STUDY BY PIQUERAS-FISZMAN

 

THE STRAWBERRY-FLAVOURED MOUSSE SERVED FROM SQUARE, ROUND AND TRIANGULAR PLATES IN THE STUDY BY PIQUERAS-FISZMAN

 

THE BALANCED AND UNBALANCED PLATE ARRANGEMENTS UTILIZED BY ZELLNER ET AL. 64. IN THE COLOURED PRESENTATIONS, THE LINES OF TAHINI WERE GREEN AND THE DOTS WERE RED. 備注3

 

在食物與餐具的關系中,已經被證實的結果能否在我們UI界面中運用呢?

 

上圖是根據Google color tool搭配出的兩組配色,左右圖中空間格局完全相同,但運用不同深淺,色相會給人有左邊空間更狹窄,而右邊更寬闊的感受。

 

 

左右圖中的原點大小其實是完全一致,但在左圖中感覺較小,而右圖較大。艾賓浩斯錯覺與德勃夫錯覺能在界面空間上起到明顯作用,我們

闪电之神怎么玩