中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

視覺原理在當(dāng)下紅火的機(jī)械視覺中是必不可少的，那在我們?nèi)粘９ぷ鞯腢I產(chǎn)品設(shè)計(jì)中又有什么可能性的呢？今天，我從“視錯(cuò)覺”這個(gè)角度，探索下如何運(yùn)用在UI上。

第一篇：視錯(cuò)覺歷史

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

1. 蓬佐錯(cuò)覺-Line

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

上圖上下并列的兩條橫線，上面的看起來比下面的長。有一種觀點(diǎn)認(rèn)為這是因?yàn)闄M線外側(cè)的斜線使大腦覺得有縱深感，認(rèn)為上面的線更遠(yuǎn)一些。長度相同的線段，位于遠(yuǎn)處的應(yīng)該更長一些，因此上面的橫線會讓人覺得比下面的短。

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

圖1（1.攝影圖片分享app－iOS系統(tǒng)；2.回家吃飯－iOS系統(tǒng)；3.記賬軟件－Android系統(tǒng)）

?圖2（1.日志軟件－Android系統(tǒng)；2、3.Uber-iOS系統(tǒng)）

圖1截取iOS與Android系統(tǒng)上一些App，設(shè)計(jì)師使用非常規(guī)P距離線。圖2截取了各平臺App左右不留間距的線。從這兩張圖我們可以看到使用各種長短線的都有，并沒有統(tǒng)一標(biāo)準(zhǔn)，最主要是你想要表達(dá)什么？在這里蓬佐錯(cuò)覺是否能幫助到你的UI表達(dá)。

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

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

2. 艾賓浩斯錯(cuò)覺-Space

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

Representations of the (A) Ebbinghaus-Titchener size-contrast illusion and (B) Delboeuf illusion.

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

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

在食物與餐具的關(guān)系中，已經(jīng)被證實(shí)的結(jié)果能否在我們UI界面中運(yùn)用呢？

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

左右圖中的原點(diǎn)大小其實(shí)是完全一致，但在左圖中感覺較小，而右圖較大。艾賓浩斯錯(cuò)覺與德勃夫錯(cuò)覺能在界面空間上起到明顯作用，我們可以遵循這個(gè)理論工具為我們的設(shè)計(jì)服務(wù)，更好的表達(dá)功能重點(diǎn)，在空間中體現(xiàn)結(jié)構(gòu)關(guān)系。

3.卡尼莎三角–Iconography & Texture

蓋塔諾*卡尼莎（Gaetano Kanizsa,1913~1993）是意大利心理學(xué)家。他在意大利的里雅斯特建立了“心理學(xué)研究所”，為意大利心理學(xué)研究做出了巨大貢獻(xiàn)。

在卡尼莎發(fā)現(xiàn)的視錯(cuò)覺中，最有名的是發(fā)表于1955年大家所熟知的下面的“卡尼莎三角”。這個(gè)視錯(cuò)覺表明我們的大腦把實(shí)際上不存在的三角形輪廓線畫了出來。我們把根本不存在的輪廓線稱為“主觀輪廓”。

上圖可以看到，在圖形的中心有一個(gè)實(shí)際上并不存在的白色三角形。這是因?yàn)榇竽X在觀察的時(shí)候自發(fā)將線段連接起來形成了完整的圖形，而且這個(gè)視錯(cuò)覺在各種類似圖形上都成立。

卡尼莎不僅作為心理學(xué)家取得了巨大的成就，他也是一位活躍的畫家。在她的繪畫中也不乏利用視覺錯(cuò)創(chuàng)作的作品。

?Gaetano Kanizsa,[Omenone] 1977- olio su tela.?cm50x70

Gaetano Kanizsa,[Uovo] 1975- olio su tela. cm50x70

卡尼莎錯(cuò)覺其實(shí)可以在UI的Graphic中運(yùn)用，當(dāng)然，每個(gè)設(shè)計(jì)師都要評估這個(gè)工具是否與公司品牌與視覺語言相和。

在市面上暫未看到完全運(yùn)用卡尼莎錯(cuò)覺的icon作品，但我們時(shí)常看到未鏈接完成的icon設(shè)計(jì)，但這些未鏈接完全的icon并不會造成我們認(rèn)知上困難，這是因?yàn)榇竽X幫助我們自動(dòng)補(bǔ)全。

而說到材質(zhì)，我們不得不提到Google推出Material Design（之后簡稱為MD）后，MD在Graphic明暗交界處使用了顆粒狀來表達(dá)材質(zhì)，這是MD紙質(zhì)表達(dá)的延續(xù)。

在Graphic中，大家也慢慢開始沿用MD的材質(zhì)表達(dá)，之前某廠App升級也在Graphic的材質(zhì)上做了更加大顆粒全圖片材質(zhì)表達(dá).

從圖形、顏色、材質(zhì)本身來說沒有任何問題，在手機(jī)上顯示也是挺漂亮，但這個(gè)顆粒感材質(zhì)是如何與全局視覺體系聯(lián)系的？在仔細(xì)閱讀了他們設(shè)計(jì)概念／思路中“視覺打法”這一段，并沒有找到答案。作為同行，也沒能在產(chǎn)品中看出些材質(zhì)統(tǒng)一性的端倪來，現(xiàn)在看只是為了做材質(zhì)而做材質(zhì)，在整體材質(zhì)上并沒有貫通。

提出卡尼莎錯(cuò)覺可以嘗試運(yùn)用在icon或graphic設(shè)計(jì)中，可以更開闊思維，多做嘗試，小小圖片也有大大世界。

4. 馮*貝措爾德效應(yīng)–Color

在太陽照射的光波中，可見光是非常狹小的，我們只能看到區(qū)間在400-700nm的波長

在了解色彩視錯(cuò)覺前，我們需要知道什么是色彩。在學(xué)習(xí)什么是色彩時(shí)，有一個(gè)理論讓我非常詫異——色彩是大腦的感覺。感覺？什么！我看到的花花世界都是感覺？

接著，我來轉(zhuǎn)述一下為什么說色彩是大腦的感覺?！肮庹丈涞教O果上，而蘋果表面只反射特定波長的光，其他光會被吸收，所反射的特定波長的紅光被人收入眼簾，那么感覺就是紅色。

現(xiàn)代科學(xué)表明，由于不同對象反射光的波長不一樣，人類才能感受到各種各樣的色彩。而且，映入眼簾的光北視網(wǎng)膜細(xì)胞轉(zhuǎn)換成信號，通過神經(jīng)傳達(dá)給大腦，至此才第一次有“是紅色”的感覺。但是，有時(shí)候?qū)ο嗤ㄩL的光也會有不同的色彩感覺，那就是視錯(cuò)覺?！?/p>

也就是說，在日常生活中，如衣服上看到的色彩，并非色彩本身，而是吸收波長后再反射的色彩，染料本身的顏色未必是最終我們看到的顏色，其中的原理如同上面那個(gè)蘋果的光學(xué)反應(yīng)。

上圖看到 1.那里有一條明顯的豎著的亮線，2.那里有一條明顯的豎著的暗線。但是將線與其他部分相比較，并非更亮或更暗一點(diǎn)。從1.到2.只是慢慢變暗。這種視錯(cuò)覺被稱為馬赫帶，是大腦為了清除區(qū)分明暗分界線而產(chǎn)生的。

了解了我們大腦是如何認(rèn)知色彩后，我們再來看一下什么是色彩同化？

上圖中左右兩邊顏色完全一致，但中間顏色被周遭顏色影響。

當(dāng)一種顏色被另一種顏色包圍，或者另一種顏色作為背景的時(shí)候，那么這種顏色就會看起來很接近周圍的顏色或者背景顏色，我們把這一現(xiàn)象稱之為色彩同化。它屬于一種色彩視錯(cuò)覺，又被稱作馮*貝措爾德（Wilhelm von Bezold，德國氣象學(xué)家，1837-1907）效應(yīng)。

通常我們定義App色彩調(diào)性有幾種常用類型：無色彩、單一主色、主次色彩搭配。色彩視錯(cuò)覺的色彩搭配讓我想到了MD的色彩Guild-line，在不同色彩環(huán)境中無論哪種類型，都能通過周圍色彩來影響主色，并讓周圍色幫助你表達(dá)App的情感。

所有的理論工具都是服務(wù)與你想要表達(dá)的中心思想，無論這個(gè)思想是為了推品牌，還是只想把單個(gè)頁面功能做好，我們需要記得要在視覺各細(xì)節(jié)中始終讓其貫徹。在此，我只是拋一些磚，一切都只是個(gè)開始，希望能幫助到大家在各自的產(chǎn)品上有更多的嘗試?；ヂ?lián)網(wǎng)視覺設(shè)計(jì)才剛剛開始，需要我們一起努力！

最后附上彩蛋，讓我們一同看看在未意識到有視錯(cuò)覺這一概念的公元前，人們創(chuàng)造出的藝術(shù)作品。

在意大利首都羅馬的人民廣場（Piazza del Popolo）上有兩座建于17世紀(jì)的雙子教堂。右側(cè)的教堂面積大于左側(cè)的，但右側(cè)的教堂屋頂扁為橢圓形，因此看起來保持了平衡。

生于16世紀(jì)佛蘭德地區(qū)（現(xiàn)跨越比利時(shí)、荷蘭、法國的一個(gè)區(qū)域）的畫家彼得*保羅*魯本斯（Peter Paul Rubens）的《耶穌下十字架》。右側(cè)穿黑色衣服的人物所登的梯子，在人物的上方和下方錯(cuò)開了（下圖）。有一種觀點(diǎn)認(rèn)為，魯本斯注意到如果畫成直線的話就會出現(xiàn)波跟多夫錯(cuò)覺（大家自己去查吧～），梯子會看起來上下錯(cuò)開，因此才特意將梯子上下錯(cuò)開畫。這個(gè)觀點(diǎn)由加拿大溫尼伯大學(xué)的陶珀（D.R.Topper）發(fā)表于1984年。

紅色線是下面的梯子向上的豎直延伸。原本應(yīng)該按照這個(gè)線畫出來的，但實(shí)際上梯子畫在藍(lán)色線位置。

• 注1：1990年代，整個(gè)網(wǎng)絡(luò)向公眾開放。1991年8月，蒂姆·伯納斯-李在瑞士歐洲核子研究組織創(chuàng)建了HTML、HTTP和最初幾個(gè)網(wǎng)頁之后兩年，他開始宣揚(yáng)其萬維網(wǎng)項(xiàng)目。在1993年，Mosaic網(wǎng)頁瀏覽器被發(fā)布了，在1994年晚期，公共利益在前學(xué)術(shù)和技術(shù)的互聯(lián)網(wǎng)上穩(wěn)步增長。1996年，“Internet”（互聯(lián)網(wǎng)）一詞被廣泛的流傳，不過是指幾乎整個(gè)的萬維網(wǎng)。文中的21年是從1996年互聯(lián)網(wǎng)這次名詞被廣泛傳播開始算的。
• 注2：最為大家所熟悉的心理學(xué)初期的視錯(cuò)覺“弗雷澤錯(cuò)覺”。1908年由詹姆斯*弗雷澤發(fā)表。看起來是一個(gè)向中心旋轉(zhuǎn)的漩渦，但實(shí)際上只是大小不同的圓排列在一起，沿著線并不能走到中心點(diǎn)。
• 注3:圖片選自論文Plating manifesto(II):The art and science of plating

作者：Kana

本文由@點(diǎn)融黑幫（ID：DianrongMafia）原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議