網(wǎng)頁(yè)設(shè)計(jì)準(zhǔn)則從何而來(lái)
從1976年開(kāi)始就已經(jīng)有界面設(shè)計(jì)準(zhǔn)則,而到現(xiàn)在網(wǎng)絡(luò)上也到處充斥著“表單設(shè)計(jì)十忌”,“注冊(cè)的N種設(shè)計(jì)方式”等等等等類似的文章,看得少還好,看得多了難免會(huì)迷惑:有些準(zhǔn)則,禁忌甚至是沖突的。就好像時(shí)間一樣,你有一塊表,問(wèn)你幾點(diǎn)了你知道,如果你有兩塊時(shí)間不一樣的表,你知道幾點(diǎn)了嗎?
而這本書(shū)試圖從更底層的角度來(lái)詮釋設(shè)計(jì)準(zhǔn)則,讓你了解設(shè)計(jì)準(zhǔn)則是由于什么原因推導(dǎo)出的,究其本質(zhì),還是回歸到人類的心理,視覺(jué),生理等方面的習(xí)慣,方式,本能等因素。而掌握這些因素,會(huì)讓你更深入了解設(shè)計(jì)準(zhǔn)則的意義和目的,甚至歸納自己的設(shè)計(jì)準(zhǔn)則。
再多提一嘴作者:Jeff Johnson,《GUI設(shè)計(jì)禁忌》正是他的作品。
我們感知自己的期望
人類對(duì)于外部世界的感知,不是完全真實(shí)的描述,很大程度是我們“期望”感知到的,也會(huì)受到三個(gè)因素的影響
- 過(guò)去:我們的經(jīng)驗(yàn)
- 現(xiàn)在:當(dāng)前的環(huán)境
- 將來(lái):我們的目標(biāo)
再舉下例子
被經(jīng)驗(yàn)影響:看看下面這樣隨手潑墨的畫(huà),第一感覺(jué)就是各種無(wú)序的墨點(diǎn)構(gòu)成
而如果告訴你這是一只花園里的斑點(diǎn)狗,你看出來(lái)了嗎?因?yàn)槟銓?duì)場(chǎng)景和主體都已經(jīng)有了自己的概念,即有了自己的理解。
被環(huán)境影響:
同樣的一個(gè)不完整的字母,放到不同的場(chǎng)景下,第一個(gè)會(huì)被認(rèn)為是H,第二個(gè)會(huì)認(rèn)為是A
類似的還有海底撈的一個(gè)說(shuō)法:在接受到的服務(wù)很好的情況下,客人會(huì)覺(jué)得味道也很好~
被目標(biāo)影響:
這個(gè)例子更簡(jiǎn)單和直接了:新浪微博大家都用,頂部導(dǎo)航的第三個(gè)是什么?有印象嗎?如果不是那個(gè)頻道的目標(biāo)用戶,基本都不會(huì)有什么印象,因?yàn)槲覀兊哪繕?biāo)明確,不會(huì)關(guān)注其他的;這是目標(biāo)影響視覺(jué)的例子。同時(shí)這個(gè)也是“網(wǎng)頁(yè)為掃描而不是為閱讀設(shè)計(jì)”的理論支持。
對(duì)于設(shè)計(jì)這些意味著什么?
- 避免歧義:避免顯示有歧義的信息,并通過(guò)測(cè)試確認(rèn)所有用戶對(duì)信息的理解是一致的。
- 保持一致:在一致的位置擺放信息和控件。這樣的一致性能讓用戶很快的找到和識(shí)別
- 理解目標(biāo):用戶去用一個(gè)系統(tǒng)是有目標(biāo)的。在一次交互的每個(gè)點(diǎn)上,確保提供了用戶需要的信息,并非常清晰的對(duì)應(yīng)到一個(gè)可能的用戶目標(biāo),是用戶能夠注意到并使用這些信息。
為觀察結(jié)構(gòu)優(yōu)化我們的視覺(jué)
20世紀(jì)早期,一個(gè)由德國(guó)心理學(xué)家組成的研究小組試圖解釋人類視覺(jué)的工作原理。他們觀察了許多重要的視覺(jué)現(xiàn)象并對(duì)它們編訂了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺(jué)是整體的:我們的視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu),并且在神經(jīng)系統(tǒng)層面上感知形狀,圖形和物體,而不是只看到互不相連的邊、線和區(qū)域。這些理論統(tǒng)稱為“格式塔”原理,其中包括以下幾條
- 接近性:物體之間的相對(duì)距離會(huì)影響我們感知他們是否以及如何組織在一起
- 相似性:如果其他因素相同,那么相似的物體看起來(lái)歸屬于一組
- 連續(xù)性:我們的視覺(jué)傾向于感知連續(xù)的形式而不是離散的碎片
- 封閉性:我們的視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái),從而將其感知為完整的物體而不是分散的碎片
- 對(duì)稱性:我們傾向于分解復(fù)雜的場(chǎng)景來(lái)降低復(fù)雜度
- 主體/背景:我們的大腦將區(qū)域分為主體和背景,主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素,其余的則是背景
- 共同命運(yùn):針對(duì)運(yùn)動(dòng)的物體,一起運(yùn)動(dòng)的物體被感知為屬于一組或者是彼此相關(guān)的
- 格式塔原理可以綜合
看看上面這個(gè)界面,可以用格式塔原理去解釋中間很多設(shè)計(jì)方式和方法,比如位置,背景,相似性,接近性等等。
對(duì)于設(shè)計(jì)這些意味著什么?
我們平時(shí)做設(shè)計(jì)可能會(huì)導(dǎo)致無(wú)意產(chǎn)生的視覺(jué)關(guān)系。而為了能夠滿足這些人類視覺(jué)的特點(diǎn),推薦的辦法是在設(shè)計(jì)一個(gè)界面之后,使用每個(gè)格式塔原理,來(lái)考量各個(gè)設(shè)計(jì)元素之間的關(guān)系是否復(fù)核設(shè)計(jì)的初衷。
本文地址:http://m.likemindfilms.com/tutorial/di1126.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏