如何將視錯覺運用到UI設計界面中?
如何將視錯覺運用到UI設計界面中?
視覺原理在當下紅火的機械視覺中是必不可少的,那么在我們日常工作的UI產品設計中又有什么可能性的呢?今天,時間財富網小編從「視錯覺」這個角度,探索下如何運用在UI上。
視錯覺歷史
古希臘哲學家亞里士多德的《靈魂論》里闡述了人類五感:視覺、觸覺、味覺、嗅覺和聽覺。我們視覺設計師暫時無法在長方形盒子(泛指各種電子設備)內設計味覺、嗅覺和聽覺,而對于觸覺,說到底,我們始終在與這個長方形盒子接觸,但是無法通過對設計內物體的真實觸摸而得到感覺,實際伸出手探尋或步行而感受到距離等,去比較大小、距離等進行認知。因為這個客觀存在,也更加需要我們視覺設計師運用視覺原理與技法讓用戶更容易與機器進行交互。因為這樣的認識, 我思考了以下這些可能性:
一. 蓬佐錯覺-Line
蓬佐錯覺是有關長短的視錯覺。自從意大利心理學家馬里奧·蓬佐(Mario Ponzo,1882~1960)發(fā)表了相關論文后,這一視錯覺便被稱為蓬佐錯覺,但在這之前,它就早已被人們所熟知。
上圖上下并列的兩條橫線,上面的看起來比下面的長。有一種觀點認為這是因為橫線外側的斜線使大腦覺得有縱深感,認為上面的線更遠一些。長度相同的線段,位于遠處的應該更長一些,因此上面的橫線會讓人覺得比下面的短。
手機屏幕的邊界就如蓬佐錯覺中外側斜線,分割線與邊界的距離就能讓人對間隔中左右信息產生或長或短的感受,易讀性也成為考量的一點。在App設計中,全局規(guī)范考慮是非常重要的,滿足了單個頁面的視覺需要是遠遠不夠的。前端開發(fā)害怕的是沒有邏輯規(guī)則的不同,只要定義好功能規(guī)范,即使在不同界面使用不同線長短也不是大問題。
簡言之,在定義Line長短時,我們可以更多思考為什么要留邊距、留多少合適、為什么確定這樣的長短、是否有邏輯可循、考慮過全局性了嗎、是否與品牌相合、是否能傳達出視覺故事等等。
二. 艾賓浩斯錯覺-Space
赫爾曼·艾賓浩斯(Hermann Ebbinghaus)是著名的研究人類記憶的心理學家,出生于德國,任職波蘭布雷斯勞大學教授。他主要研究人類如何進行持續(xù)性記憶的(題外話:艾賓浩斯記憶曲線非常有名)。上圖是他發(fā)現(xiàn)的視錯覺圖。位于中間的兩個橘黃色的圓大小相同,但是看起來右側的明顯偏大。右側橘黃色圓的四周是小圓,所以看起來比實際的大,而左側的橘黃色圓周圍是大圓,因此它看起來比實際的要略小。
艾賓浩斯錯覺在實際應用中非常廣泛,利用我們身邊的東西,進行排列組合,就可以確認發(fā)現(xiàn)視錯覺。艾賓浩斯錯覺加上德勃夫錯覺(Joseph Delboeuf illusion)和萬辛克(Dr.Brian Wansink)、薛爾特·梵·依特森博士(Dr.Koert van Ittersum)的研究證實,人們的進食量會被盤子的大小與顏色所影響,也就是說,我們會被這些視錯覺而影響真實行為。
三.卡尼莎三角–Iconography & Texture
蓋塔諾·卡尼莎(Gaetano Kanizsa,1913~1993)是意大利心理學家。他在意大利的里雅斯特建立了「心理學研究所」,為意大利心理學研究做出了巨大貢獻。
在卡尼莎發(fā)現(xiàn)的視錯覺中,最有名的是發(fā)表于1955年大家所熟知的下面的「卡尼莎三角」。這個視錯覺表明我們的大腦把實際上不存在的三角形輪廓線畫了出來。我們把根本不存在的輪廓線稱為「主觀輪廓」。
四. 馮·貝措爾德效應–Color
在太陽照射的光波中,可見光是非常狹小的,我們只能看到區(qū)間在400-700nm的波長。
在了解色彩視錯覺前,我們需要知道什么是色彩。在學習什么是色彩時,有一個理論讓我非常詫異——色彩是大腦的感覺。感覺?什么!我看到的花花世界都是感覺?
接著,我來轉述一下為什么說色彩是大腦的感覺。光照射到蘋果上,而蘋果表面只反射特定波長的光,其他光會被吸收,所反射的特定波長的紅光被人收入眼簾,那么感覺就是紅色。
現(xiàn)代科學表明,由于不同對象反射光的波長不一樣,人類才能感受到各種各樣的色彩。而且,映入眼簾的光北視網膜細胞轉換成信號,通過神經傳達給大腦,至此才第一次有「是紅色」的感覺。但是,有時候對相同波長的光也會有不同的色彩感覺,那就是視錯覺。
也就是說,在日常生活中,如衣服上看到的色彩,并非色彩本身,而是吸收波長后再反射的色彩,染料本身的顏色未必是最終我們看到的顏色,其中的原理如同上面那個蘋果的光學反應。
通常我們定義App色彩調性有幾種常用類型:無色彩、單一主色、主次色彩搭配。色彩視錯覺的色彩搭配讓我想到了MD的色彩Guild-line,在不同色彩環(huán)境中無論哪種類型,都能通過周圍色彩來影響主色,并讓周圍色幫助你表達App的情感。

關于UI設計師必看的面試經驗和技巧
很多UI設計師找不到自己的定位,或者說不清楚自己的能力所對應的價值,在面試時容易栽跟頭,所以這次來說說有關UI設計面試的一些經驗和技巧。以下是時間財富網小編為大家整理的關于UI設計師必看的5個面試經驗和技巧,歡迎大家閱讀,我們經常可以在脈脈的匿名區(qū),或者QQ群還有知乎等平臺上面發(fā)現(xiàn)一類朋友:我面試了10幾家公司了,都等了半個月了還沒有回復,現(xiàn)在UI市場飽和了嗎,工作也太難找了吧!,這都找了兩個月了。
這里要說一下,之所以沒有公司發(fā)你offer,本質原因就是你的能力和公司要求的崗位不匹配。
接下來,看一組數(shù)據(jù):波士頓咨詢指出,截止2013年,世界設計師人數(shù)為9000萬,而中國設計師人數(shù)就有1700萬,互聯(lián)網設計師的占比就有50%以上。UI設計在2000年的時候就在中國開始發(fā)展,2009年蘋果公司正式把iPhone帶入中國,移動UI開始紅火,在2012-2015年這幾年發(fā)展的最為迅速,各種培訓班紛紛出爐,口號是畢業(yè)包工作,月薪6k+,這對于剛畢業(yè)的學生和轉行的朋友們無疑是一根救命稻草,加上當時許許多多的公司高薪聘請一些學過點規(guī)范但只會用PS的UI設計師,導致整個UI市場的供不應求,培訓班大量的崛起,流水線式的培訓“UI設計師”。我們已經發(fā)現(xiàn),2015年下半年開始UI市場的泡沫開始消散,但是依舊許許多多的人趨之若鶩,以為培訓完就能拿高薪,我們都知道數(shù)量多的時候,質量決定價值,所以你還找不到工作是因為你的價值還不夠高。
那么講這么多,我們如何順利拿下面試這個終極副本:
1. 優(yōu)秀的作品(頂級的裝備)
2. 優(yōu)秀的邏輯和表達能力(操作,手速)
3. 優(yōu)秀抗壓及任務分解能力(應變能力)
4. 優(yōu)秀的IQ和EQ
5. 彩蛋問題(運氣)
優(yōu)秀的作品
首先,請帶上你認為你做的最優(yōu)秀的2-3個左右的作品,當然是優(yōu)秀的都可以帶,但是請不要將陳年過氣的作品都帶上,第一,如果面試官問你你回答不出來,你也只能說一句這是很早以前做的,當時可能考慮的不周到,還不是給自己減分?第二,不成熟的作品拿出來會讓面試官覺得你不夠”聰明”。
其次,可能面試官會把你的效果圖和最終上線產品的頁面相比較,為什么?這是看你的執(zhí)行力與推動能力,也看看你是不是一個對自己項目負責的人。當然效果圖和上線圖有差距是由很多因素決定的,不一定效果圖好看,落地圖一般,就說明這個人能力不行,還是要綜合來看的。
手機UI設計規(guī)范以及注意事項
手機已經成為我們生活中不可缺少的一部分了,在與手機共同生活的每一天里,我們只顧著玩弄手機,卻不曾對其研究過,了解過,其實手機也有他們的規(guī)范,下面時間財富網小編就來說一說手機UI設計規(guī)范 以及他的注意事項。
最常用的Photoshop、Ai和一些3D軟件是制作的常用工具,在最終輸入時會需要一些模擬程序以及平臺程序的支持,不過在GUI設計階段可以暫不考慮尺寸:建議選擇240x320大小的屏幕尺寸進行設計,自由度和發(fā)揮空間會大一點概念:設計的概念是設計中尤其重要的部分,敢于嘗試新穎的交互模型和GUI視覺元素是設計的重要工作。
一、什么是Mobile GUI設計
簡單來說Mobile GUI設計就是手持設備的圖形用戶界面設計,狹義上來看是手機和PPC,廣義上可以推廣至手機,移動電視,車載系統(tǒng),手持游戲機,MP3,GPS等一切手持移動設備。
Mobile GUI的設計基于對手持設備產品的使用特性的理解,對用戶的研究和對界面使用情景的深入研究。GUI的設計分為平臺內置和主題設計部分,前者需要專業(yè)的design house根據(jù)廠家的實際產品進行設計分析后進行整體設計,后者則可以經由任何用戶進行自主設計,當然后者的設計限制和平臺限制都比較大。目前索愛和三星以及Nokia的S60平臺支持用戶的Theme自定義設計。
設計研究的流程為:產品特性--用戶心理--市場背景--圖形設計策略--設計檢驗--實際設計投放二、界面基本要素
手機界面層級: idle(待機界面) Mainmenu(主菜單) Submenu(二級菜單)Third level menu(三級菜單) 界面除了包括圖標和文字外,比較重要的還有function animation(呼叫,發(fā)送信息等) 以及 function interface(計算器,日歷界面等)明確意義的圖標,風格鮮明的版面設計是手機界面設計的重要工作,目前較為流行的是以Motorola,Nokia等為代表的歐洲簡單風格,以及韓國的時尚絢麗的風格。
在更新穎的交互操作和與手機Id設計的整體結合上,韓系手機作的比較好,而在可用性和體驗難度上,歐系手機則比較優(yōu)秀。
三、設計注意事項
尺寸問題: 128x160, 176x220, 240x320 象素尺寸是目前較常見的手機屏幕尺寸,在設計時可以根據(jù)實際產品要求進行設計,更大的屏幕可以有更多的交互表現(xiàn)和視覺元素的支持,較為自由。
色彩問題:由于手機lcd本身的限制,在色彩的還原程度上沒有pc如此完善,因此在選用色彩時要根據(jù)使用的屏幕進行調節(jié)。
可實現(xiàn)性問題:受到硬件運算速度和內存的影響,以及不可預計的后臺程序開發(fā)難度,過于復雜的效果將很難進行實現(xiàn),與程序工程師和ui工程師,硬件工程師的溝通顯得尤為重要。
通過了解了手機UI設計規(guī)范 以及他的注意事項,我們也知道了手機大概的設計,知道這些,有助于我們使用手機甚至是保護手機,使我們能安全的使用他。