最近在讀《認(rèn)知與設(shè)計(jì)，理解UI設(shè)計(jì)準(zhǔn)則》，主要的內(nèi)容是從底層分析設(shè)計(jì)原則：設(shè)計(jì)原則為什么是這樣？為什么這個(gè)是原則？

從1976年開始就已經(jīng)有界面設(shè)計(jì)準(zhǔn)則，而到現(xiàn)在網(wǎng)絡(luò)上也到處充斥著“表單設(shè)計(jì)十忌”，“注冊的N種設(shè)計(jì)方式”等等等等類似的文章，看得少還好，看得多了難免會(huì)迷惑：有些準(zhǔn)則，禁忌甚至是沖突的。就好像時(shí)間一樣，你有一塊表，問你幾點(diǎn)了你知道，如果你有兩塊時(shí)間不一樣的表，你知道幾點(diǎn)了嗎？

而這本書試圖從更底層的角度來詮釋設(shè)計(jì)準(zhǔn)則，讓你了解設(shè)計(jì)準(zhǔn)則是由于什么原因推導(dǎo)出的，究其本質(zhì)，還是回歸到人類的心理，視覺，生理等方面的習(xí)慣，方式，本能等因素。而掌握這些因素，會(huì)讓你更深入了解設(shè)計(jì)準(zhǔn)則的意義和目的，甚至歸納自己的設(shè)計(jì)準(zhǔn)則。

再多提一嘴作者：Jeff Johnson，《GUI設(shè)計(jì)禁忌》正是他的作品。

我們感知自己的期望

人類對于外部世界的感知，不是完全真實(shí)的描述，很大程度是我們“期望”感知到的，也會(huì)受到三個(gè)因素的影響

• 過去：我們的經(jīng)驗(yàn)
• 現(xiàn)在：當(dāng)前的環(huán)境
• 將來：我們的目標(biāo)

再舉下例子

被經(jīng)驗(yàn)影響：看看下面這樣隨手潑墨的畫，第一感覺就是各種無序的墨點(diǎn)構(gòu)成

而如果告訴你這是一只花園里的斑點(diǎn)狗，你看出來了嗎？因?yàn)槟銓�場景和主體都已經(jīng)有了自己的概念，即有了自己的理解。

被環(huán)境影響：

同樣的一個(gè)不完整的字母，放到不同的場景下，第一個(gè)會(huì)被認(rèn)為是H，第二個(gè)會(huì)認(rèn)為是A

類似的還有海底撈的一個(gè)說法：在接受到的服務(wù)很好的情況下，客人會(huì)覺得味道也很好~

被目標(biāo)影響：

這個(gè)例子更簡單和直接了：新浪微博大家都用，頂部導(dǎo)航的第三個(gè)是什么？有印象嗎？如果不是那個(gè)頻道的目標(biāo)用戶，基本都不會(huì)有什么印象，因?yàn)槲覀兊哪繕?biāo)明確，不會(huì)關(guān)注其他的；這是目標(biāo)影響視覺的例子。同時(shí)這個(gè)也是“網(wǎng)頁為掃描而不是為閱讀設(shè)計(jì)”的理論支持。

對于設(shè)計(jì)這些意味著什么？

1. 避免歧義：避免顯示有歧義的信息，并通過測試確認(rèn)所有用戶對信息的理解是一致的。
2. 保持一致：在一致的位置擺放信息和控件。這樣的一致性能讓用戶很快的找到和識別
3. 理解目標(biāo)：用戶去用一個(gè)系統(tǒng)是有目標(biāo)的。在一次交互的每個(gè)點(diǎn)上，確保提供了用戶需要的信息，并非常清晰的對應(yīng)到一個(gè)可能的用戶目標(biāo)，是用戶能夠注意到并使用這些信息。

為觀察結(jié)構(gòu)優(yōu)化我們的視覺

20世紀(jì)早期，一個(gè)由德國心理學(xué)家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現(xiàn)象并對它們編訂了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的：我們的視覺系統(tǒng)自動(dòng)對視覺輸入構(gòu)建結(jié)構(gòu)，并且在神經(jīng)系統(tǒng)層面上感知形狀，圖形和物體，而不是只看到互不相連的邊、線和區(qū)域。這些理論統(tǒng)稱為“格式塔”原理，其中包括以下幾條

1. 接近性：物體之間的相對距離會(huì)影響我們感知他們是否以及如何組織在一起
2. 相似性：如果其他因素相同，那么相似的物體看起來歸屬于一組
3. 連續(xù)性：我們的視覺傾向于感知連續(xù)的形式而不是離散的碎片
4. 封閉性：我們的視覺系統(tǒng)自動(dòng)嘗試將敞開的圖形關(guān)閉起來，從而將其感知為完整的物體而不是分散的碎片
5. 對稱性：我們傾向于分解復(fù)雜的場景來降低復(fù)雜度
6. 主體/背景：我們的大腦將區(qū)域分為主體和背景，主體包括一個(gè)場景中占據(jù)我們主要注意力的所有元素，其余的則是背景
7. 共同命運(yùn)：針對運(yùn)動(dòng)的物體，一起運(yùn)動(dòng)的物體被感知為屬于一組或者是彼此相關(guān)的
8. 格式塔原理可以綜合

看看上面這個(gè)界面，可以用格式塔原理去解釋中間很多設(shè)計(jì)方式和方法，比如位置，背景，相似性，接近性等等。

對于設(shè)計(jì)這些意味著什么？

我們平時(shí)做設(shè)計(jì)可能會(huì)導(dǎo)致無意產(chǎn)生的視覺關(guān)系。而為了能夠滿足這些人類視覺的特點(diǎn)，推薦的辦法是在設(shè)計(jì)一個(gè)界面之后，使用每個(gè)格式塔原理，來考量各個(gè)設(shè)計(jì)元素之間的關(guān)系是否復(fù)核設(shè)計(jì)的初衷。

作者：黨韜

文章來源：pd4.me

標(biāo)簽： 設(shè)計(jì)原則 UI設(shè)計(jì)準(zhǔn)則 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。