《認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)準(zhǔn)則》(第二版)筆記二

Chapter Two?我們的視覺(jué)經(jīng)過(guò)優(yōu)化更容易看到結(jié)構(gòu)

????????人類(lèi)是視覺(jué)是整體的:視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu)乾颁,并且在神經(jīng)系統(tǒng)層面上進(jìn)行感知,而不是單純的看到邊、線和區(qū)域蚜迅。例如,我們對(duì)一朵花的感知俊抵,并非純粹單單從對(duì)花的形狀谁不、顏色、大小等感官資訊而來(lái)徽诲,還包括我們對(duì)花過(guò)去的經(jīng)驗(yàn)和印象刹帕,加起來(lái)才是我們對(duì)一朵花的感知吵血。這個(gè)理論叫做視覺(jué)感知的格式塔(Gestalt)原理

重要的格式塔原理有:接近性偷溺、相似性蹋辅、連續(xù)性、封閉性亡蓉、對(duì)稱(chēng)性晕翠、主體/背景、共同命運(yùn)原理砍濒。

1.接近性原理(親密性)

互相靠近(相對(duì)于其他物體)的物體看起來(lái)屬于一組淋肾,距離較遠(yuǎn)的不是。

藍(lán)色星星成行排列 橙色星星成列排列
不用分組框爸邢,明顯可以看出按鈕的關(guān)系

應(yīng)用:不使用可見(jiàn)的邊界樊卓,直接通過(guò)拉近某些對(duì)象之間的距離,拉開(kāi)與其他對(duì)象的距離使它們?cè)谝曈X(jué)上成為一組

優(yōu)點(diǎn):減少凌亂感杠河、減少代碼數(shù)量


2.相似性原理(重復(fù)性)

如果物體看起來(lái)相似碌尔,就感覺(jué)屬于一組。

空心星星感覺(jué)上是一組
方向設(shè)置 即紅框處是一類(lèi)

應(yīng)用:將緊密相關(guān)的元素使用相似外觀表現(xiàn)出來(lái)并且擺放在互相靠近的位置

優(yōu)點(diǎn):用戶(hù)易發(fā)現(xiàn)空間之間的相關(guān)性


3.連續(xù)性原理

人類(lèi)視覺(jué)傾向于看到連續(xù)的形式券敌,必要時(shí)甚至?xí)钛a(bǔ)遺漏唾戚。

左圖 會(huì)看成一籃 一橙 交叉線;右圖 看到的是一只水中的海怪
滑動(dòng)條設(shè)計(jì)

滑動(dòng)條--這一傾向使得我們眼中的滑動(dòng)條是一個(gè)在其某處有個(gè)手柄的狹槽待诅,而不是由手柄分隔開(kāi)的兩個(gè)狹槽叹坦。

補(bǔ)充例子:橫向滑動(dòng)的分段標(biāo)簽或圖片往往通過(guò)顯示被截?cái)嗟臉?biāo)簽或圖片來(lái)暗示用戶(hù)后面還有內(nèi)容。


4. 封閉性原理

????????我們的視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái)卑雁,以看到整個(gè)物體募书,即使它們是不完整的(類(lèi)似連續(xù)性原理)。

左圖看為一個(gè)圓测蹲;右圖看成一個(gè)白三角莹捡、一個(gè)黑邊三角、三個(gè)黑色圓的疊加

應(yīng)用:應(yīng)用于圖形用戶(hù)界面(GUI)中扣甲。例如篮赢,用疊起來(lái)的形式表示對(duì)象的集合,如文檔或者消息文捶。

堆疊的形式構(gòu)成整體

5. 對(duì)稱(chēng)性原理

人類(lèi)視覺(jué)系統(tǒng)將非常復(fù)雜的二維圖像解析成三維場(chǎng)景荷逞。

使用對(duì)稱(chēng)、封閉粹排、連續(xù)性原理表現(xiàn)了一個(gè)立方體

應(yīng)用:在印刷圖片和電腦屏幕上,可以利用視覺(jué)系統(tǒng)對(duì)對(duì)稱(chēng)性原理的依賴(lài)涩澡,用平面來(lái)顯示三維物體顽耳。


6. 主體/背景原理

我們的大腦將視覺(jué)區(qū)域分為主體和背景。主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素,其余則是背景射富。

場(chǎng)景的特點(diǎn)(我們傾向于認(rèn)為小的物體是主體而大的物體是背景)

三角為主體膝迎;圓為背景

觀者的注意力焦點(diǎn)

主體和背景會(huì)隨著我們注意力的轉(zhuǎn)換而交替變化

應(yīng)用:用來(lái)在主要顯示內(nèi)容“之后”放置印象誘導(dǎo)的背景。背景可以傳遞信息(用戶(hù)當(dāng)前所在的位置)或暗示一個(gè)主題胰耗、品牌或者內(nèi)容所表達(dá)的情緒限次。

咖啡制作照片作為背景,暗示了網(wǎng)站的咖啡主題

補(bǔ)充應(yīng)用:用來(lái)在其他內(nèi)容之上彈出信息柴灯。作為用戶(hù)注意力焦點(diǎn)的內(nèi)容臨時(shí)替換成了新信息的背景卖漫,新的信息短暫地作為新的主體(如彈出框,Alert……)

彈出框轉(zhuǎn)移用戶(hù)焦點(diǎn)

前6種原理均是指非運(yùn)動(dòng)的圖形或?qū)ο螅?為運(yùn)動(dòng)圖形或?qū)ο蟆?/i>

7. 共同命運(yùn)原理

一起運(yùn)動(dòng)的物體被感知為屬于一組或者是彼此相關(guān)的赠群。

應(yīng)用:共同的運(yùn)動(dòng)暗示共同的歷程羊始,在一些動(dòng)態(tài)模擬中可用以展示不同實(shí)體的關(guān)系。

Remember me

注:總結(jié)都是根據(jù)個(gè)人理解整理記錄查描,若有疑問(wèn)或異議突委,請(qǐng)參考原著~另外期待各位大大們的指正和討論!~(@^_^@)~

《認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)準(zhǔn)則》(第二版)筆記三

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末冬三,一起剝皮案震驚了整個(gè)濱河市匀油,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌勾笆,老刑警劉巖敌蚜,帶你破解...
    沈念sama閱讀 212,332評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異匠襟,居然都是意外死亡钝侠,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)酸舍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)帅韧,“玉大人,你說(shuō)我怎么就攤上這事啃勉『鲋郏” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,812評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵淮阐,是天一觀的道長(zhǎng)叮阅。 經(jīng)常有香客問(wèn)我,道長(zhǎng)泣特,這世上最難降的妖魔是什么浩姥? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,607評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮状您,結(jié)果婚禮上勒叠,老公的妹妹穿的比我還像新娘兜挨。我一直安慰自己,他們只是感情好眯分,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,728評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布拌汇。 她就那樣靜靜地躺著,像睡著了一般弊决。 火紅的嫁衣襯著肌膚如雪噪舀。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,919評(píng)論 1 290
  • 那天飘诗,我揣著相機(jī)與錄音与倡,去河邊找鬼。 笑死疚察,一個(gè)胖子當(dāng)著我的面吹牛蒸走,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播貌嫡,決...
    沈念sama閱讀 39,071評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼比驻,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了岛抄?” 一聲冷哼從身側(cè)響起别惦,我...
    開(kāi)封第一講書(shū)人閱讀 37,802評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎夫椭,沒(méi)想到半個(gè)月后掸掸,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,256評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蹭秋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,576評(píng)論 2 327
  • 正文 我和宋清朗相戀三年扰付,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片仁讨。...
    茶點(diǎn)故事閱讀 38,712評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡羽莺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出洞豁,到底是詐尸還是另有隱情盐固,我是刑警寧澤,帶...
    沈念sama閱讀 34,389評(píng)論 4 332
  • 正文 年R本政府宣布丈挟,位于F島的核電站刁卜,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏曙咽。R本人自食惡果不足惜蛔趴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,032評(píng)論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望例朱。 院中可真熱鬧夺脾,春花似錦之拨、人聲如沸茉继。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)烁竭。三九已至菲茬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間派撕,已是汗流浹背婉弹。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,026評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留终吼,地道東北人镀赌。 一個(gè)月前我還...
    沈念sama閱讀 46,473評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像际跪,于是被迫代替她去往敵國(guó)和親商佛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,606評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容