首頁技術(shù)文章正文

UI設(shè)計(jì)原則:匯總深入人心的UI設(shè)計(jì)原則

更新時(shí)間:2020-11-25 來源:黑馬程序員 瀏覽量:

UI設(shè)計(jì)教程

引言

自有設(shè)計(jì)崗位以來,一直存在部分設(shè)計(jì)師習(xí)慣于將設(shè)計(jì)視為純粹的視覺藝術(shù)工作,但其背后還是有很多工作要做。所以,美感和靈感其實(shí)不足以創(chuàng)造與支撐出非常嫻熟的設(shè)計(jì)。這也就是為什么UED設(shè)計(jì)師應(yīng)該擁有不同科學(xué)和領(lǐng)域的部分知識和技能來支撐完成工作,這里我們可以將這種學(xué)習(xí)方式與學(xué)習(xí)思維稱之為“多元思維”。

不管是工業(yè)設(shè)計(jì)、產(chǎn)品設(shè)計(jì)、服裝設(shè)計(jì),還是平面設(shè)計(jì)等等都好,這些不同的設(shè)計(jì),其實(shí)本質(zhì)上來講,都不僅僅是純粹的設(shè)計(jì),或者叫做藝術(shù)設(shè)計(jì)?在拋除自身領(lǐng)域的知識外,它們還應(yīng)該涉及其他學(xué)科知識的各個(gè)領(lǐng)域知識,而且,可以確定的說,這些多學(xué)科知識與學(xué)問、知識和實(shí)踐都可以幫助我們更加高效且富有成效地工作。

我們今天要跟大家討論的同樣也是可以幫助設(shè)計(jì)師了解用戶的一些基礎(chǔ)研究之一:心理學(xué),并且,同時(shí)包含講述心理學(xué)在設(shè)計(jì)中所能起到的作用,以及在設(shè)計(jì)過程中我們需要也是必須記住的心理學(xué)原理知識點(diǎn)。

心理學(xué)在設(shè)計(jì)中的作用

現(xiàn)如今,以用戶為中心的設(shè)計(jì)可使設(shè)計(jì)師大幅度提升對工作的效率與對接,并且還可以更深入地了解目標(biāo)受眾與群體?!对O(shè)計(jì)心理學(xué)》(作者:唐納德·諾曼)一書中將設(shè)計(jì)定義為一種交流行為,這意味著設(shè)計(jì)師對正在與之交流的人會(huì)有更加深刻的了解。并且,為了更好地了解人們的需求,我也建議設(shè)計(jì)師牢記人類本性行為,清楚用戶心智、習(xí)慣和動(dòng)機(jī)的心理學(xué)原理。

設(shè)計(jì)原則


如果設(shè)計(jì)師在創(chuàng)作過程中運(yùn)用心理學(xué),那么工作的結(jié)果必將更加有效與匹配,因?yàn)榭茖W(xué)的總結(jié)對目標(biāo)受眾與人群已經(jīng)有了非常深入的了解。同時(shí)心理學(xué)知識也有助于創(chuàng)造設(shè)計(jì),使用戶能夠執(zhí)行設(shè)計(jì)師所期望的操作流程,例如:進(jìn)行點(diǎn)擊購買或滑動(dòng)界面。

UI設(shè)計(jì)原則


部分初級設(shè)計(jì)師在面對這類知識時(shí),可能會(huì)將心理學(xué)視為改善設(shè)計(jì)的復(fù)雜方法,因此可能刻意或無視忽略這部分研究和學(xué)習(xí)。但是,當(dāng)你簡單了解后,就會(huì)發(fā)現(xiàn)這些本應(yīng)就有的知識,在你一看就懂的同時(shí),卻是你日常工作中最容易忽略的。其實(shí),在日常設(shè)計(jì)工作中,你只需簡單且有效地使用它,就可以大幅度提升你的工作效率與產(chǎn)品邏輯,您需要考慮的就是設(shè)計(jì)中不斷提出的基本原理。根據(jù)經(jīng)驗(yàn)和研究學(xué)習(xí),我總結(jié)了在設(shè)計(jì)過程中經(jīng)常應(yīng)用的六項(xiàng)有效的心理學(xué)原理。

格式塔原理

格式塔心理學(xué)也稱為“完形心理學(xué)”,研究內(nèi)容主要是意識體驗(yàn),著名論點(diǎn)是:“整體大于部分之和”。格式塔心理學(xué)明確指出:構(gòu)造主義把心理活動(dòng)分割成一個(gè)個(gè)獨(dú)立的元素進(jìn)行研究并不合理,因?yàn)槿藢κ挛锏恼J(rèn)識具有整體性,心理、意識不等于感覺元素的機(jī)械總和。這一理論到如今已有近100年的歷史了,但它卻從沒有消失現(xiàn)實(shí)性。其中原則包括:

1. 親密性

設(shè)計(jì)原則04-親密性

當(dāng)物體彼此靠近時(shí),這些物體被看作是一個(gè)整體而不是獨(dú)立的。

2. 相似性

設(shè)計(jì)原則05-相似性

相似性原則出現(xiàn)在物體看起來相似的時(shí)候,人們常常會(huì)把他們看作是一個(gè)組或者是一個(gè)模式。

3. 焦點(diǎn)

設(shè)計(jì)原則06-焦點(diǎn)

焦點(diǎn)是畫面中用戶感興趣、強(qiáng)調(diào)或者差異的區(qū)域,能夠抓住用戶的注意力。

4. 共同區(qū)域

設(shè)計(jì)原則07-共同區(qū)域

意思是當(dāng)物體在同一個(gè)封閉區(qū)域內(nèi)時(shí),會(huì)被認(rèn)為是同一組元素。

5.閉合原則

設(shè)計(jì)原則08

有一種常見的視覺歸類方法基于人類的一種完型心理:把局部形象當(dāng)作一個(gè)整體的形象來感知。這種知覺上的特殊現(xiàn)象,稱之為閉合。

6.對稱原則

設(shè)計(jì)原則09-對稱原則

無論距離遠(yuǎn)近,對稱元素都會(huì)被認(rèn)為屬于一體,給我們一種堅(jiān)固和有序的感覺。

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

設(shè)計(jì)原則10-共同命運(yùn)原則

向同一方向運(yùn)動(dòng)的元素被認(rèn)為比向不同方向運(yùn)動(dòng)的元素更相關(guān)。

8.連續(xù)性原則

設(shè)計(jì)原則11-聯(lián)系性原則

排列成直線或柔和曲線的元素被認(rèn)為與隨機(jī)排列或粗糙線排列的元素相關(guān)。

本能反應(yīng)

你曾經(jīng)有沒有過這種感覺,當(dāng)你第一次打開某一網(wǎng)站或app時(shí),就立刻喜歡上了這個(gè)網(wǎng)站或app,或者某個(gè)網(wǎng)站或app會(huì)是你馬上吐槽,并讓你感到非常不適?如果有以上這兩種情況,那么恭喜你,您之前已經(jīng)無意中體驗(yàn)過了本能反應(yīng)。其實(shí)這種反應(yīng)是來自大腦負(fù)責(zé)本能的部分,我們稱之為“舊腦”,它的反應(yīng)比我們的意識要快得多,在我們大腦中,由三部分負(fù)責(zé)我們的情緒或決策,其中有:新腦、舊腦、中腦,而其中舊腦就是負(fù)責(zé)我們本能反應(yīng)的,也就是我們常說的感覺、直覺,這是因?yàn)樗哺谖覀兊腄NA中,因此可以輕松預(yù)測一些外界事物,或者舉例說當(dāng)我們看到一只老虎時(shí),我們本能反應(yīng)是逃跑與害怕,這就是舊腦在起作用。

設(shè)計(jì)原則12-本能反應(yīng)

那么,設(shè)計(jì)師該如何使用這些知識呢?我們的的目標(biāo)是在設(shè)計(jì)中營造并賦予這種積極的審美印象。其實(shí)不難猜測,對人們看起來不錯(cuò)的東西,只要尋找符合用戶需求的內(nèi)容與樣式,就可以達(dá)到這一目標(biāo)。因此,我們推斷一下,那些在網(wǎng)站或app首頁上賦予高質(zhì)量圖片或色彩的界面設(shè)計(jì),他們在設(shè)計(jì)過程中,所運(yùn)用的方式與手法,也就不難理解了。

色彩心理學(xué)

研究顏色對人的思想、行為、反應(yīng)影響的科學(xué)被稱為色彩心理學(xué)。今天,我們不深入討論顏色的本質(zhì)問題與知識點(diǎn),因?yàn)樗珡?fù)雜。簡而言之,這次講解的主要思想是顏色對用戶的感知度和影響力。這也是為什么我們設(shè)計(jì)師應(yīng)該有意識地選擇顏色,以確保我們的作品能呈現(xiàn)正確的信息和色彩。

以下是基本顏色及其通常關(guān)聯(lián)的含義的列表,我在這里給大家做了總結(jié):

紅色:顏色通常與熱情,強(qiáng)烈或激進(jìn)的感覺相關(guān);它象征著好和壞的感覺,包括愛、自信、熱情和憤怒。

橙色:充滿活力的溫暖色彩帶給您興奮的感覺。

黃色:這就是幸福的色彩,它象征著陽光、歡樂和溫暖。

設(shè)計(jì)原則13-色彩心理學(xué)

綠色:大自然的色彩,它帶來平靜和更新的感覺;另外,可能表示經(jīng)驗(yàn)不足。

藍(lán)色:它通常代表一些公司形象,它通常表現(xiàn)出鎮(zhèn)定的感覺,但是作為一種涼快的顏色,它還與距離和悲傷相關(guān)。

紫色:由于許多國王穿著紫色衣服,長期以來與皇室和財(cái)富聯(lián)系在一起,它也是神秘和魔術(shù)的顏色。

設(shè)計(jì)原則14-色彩心理學(xué)

黑色:顏色具有很多含義;它伴隨著悲劇和死亡、它代表著一個(gè)謎、它可以是傳統(tǒng)的也可以是現(xiàn)代的,一切都取決于您如何使用它以及它帶有哪種顏色。
白色:顏色表示純度和純正,以及完整性和清晰度。

設(shè)計(jì)原則15-色彩心理學(xué)黑和白

識別模式

你可能在日常瀏覽網(wǎng)站或者app時(shí)已經(jīng)注意到這一現(xiàn)象,產(chǎn)品界面風(fēng)格或樣式會(huì)與一個(gè)主題結(jié)合在一起,并且網(wǎng)站或app通常在設(shè)計(jì)中都同樣具有共同的模式。這里原因就在于用戶的心理認(rèn)知,事實(shí)是,在用戶訪問網(wǎng)站或使用app前,就已經(jīng)對特定行業(yè)屬性或風(fēng)格做了識別設(shè)定,同樣也期望看到與特定種類產(chǎn)品所相近和相關(guān)的事物信息。

例如,我們在訪問一個(gè)政府型網(wǎng)站時(shí),所已有的認(rèn)知是莊嚴(yán)的、紅色或者藍(lán)色的、且布局是列表形式的,但如果打開網(wǎng)站確實(shí)活潑的、多彩的,我們肯定會(huì)認(rèn)為這個(gè)網(wǎng)站是不可靠或者打開了錯(cuò)誤的網(wǎng)頁,這就是識別模式的作用。

設(shè)計(jì)原則16


這里還有一點(diǎn),一個(gè)網(wǎng)站或app不僅顏色和圖片很重要,而且一些顯而易見的常見事物,例如首頁上的列表、過濾器對于成功導(dǎo)航也很重要,這些同等的因素合在一起,會(huì)使用戶很快就習(xí)慣此產(chǎn)品,并快速上手使用。

掃描圖文

在閱讀網(wǎng)頁之前,用戶基本都會(huì)對其進(jìn)行掃描一遍,以進(jìn)行對產(chǎn)品內(nèi)容的大致了解,這是他們在看此產(chǎn)品界面是否會(huì)讓他們感興趣。根據(jù)不同的研究,包括尼爾森定律(Nielsen Norman Group),有幾種常見的設(shè)計(jì)手法用于界面設(shè)計(jì), 其中有“ F”和“ Z”模式:

設(shè)計(jì)原則17

“F”模式被稱為最常見的眼睛掃描模式,尤其是對于內(nèi)容量很大的網(wǎng)頁。用戶首先掃描屏幕頂部的一條水平線,然后向下移動(dòng)頁面一點(diǎn),然后沿著通常覆蓋較短區(qū)域的水平線進(jìn)行讀取。最后一個(gè)是副本左側(cè)的垂直線,他們在段落的初始句子中查找關(guān)鍵字。它通常應(yīng)用在文本較多的頁面上,例如微博,新聞平臺,社區(qū)類的網(wǎng)頁平臺等。

而“Z”模式適用于不太集中在副本上的頁面。用戶首先從左上角開始掃描頁面頂部,并查找重要信息,然后向下傾斜至對角線的對角,最后以頁面底部的水平線結(jié)束,從左至右瀏覽。這是掃描登錄頁面或二級副本頁面且不需要向下滾動(dòng)頁面的網(wǎng)站的典型模型,這意味著所有核心數(shù)據(jù)在預(yù)滾動(dòng)區(qū)域中都是可見的。

設(shè)計(jì)原則18

當(dāng)設(shè)計(jì)師知道了這些模式后,就可以已有效的方式放置元素與排版來引起用戶的感知,并幫助他們執(zhí)行預(yù)期的操作,從而快速完成任務(wù)。

??硕?/strong>

??硕杀硎荆河脩魮碛械倪x擇權(quán)越多,他們所做出決定所花費(fèi)的時(shí)間也就越長。這意味著設(shè)計(jì)師提供給用戶的選項(xiàng)越多,無論是要選擇的產(chǎn)品還是要查看的圖片,就需要花費(fèi)更多的時(shí)間和精力來決定交互的下一步。可能出現(xiàn)的結(jié)果是,用戶在使用產(chǎn)品后做出了選擇,但感覺不愉快,或者也可能出現(xiàn)更壞的情況,那就是用戶可能不想花那么大的力氣尋找任務(wù)目標(biāo)從而離開此網(wǎng)站。

設(shè)計(jì)原則19


因此,建議設(shè)計(jì)師保留較為重要的選擇,包括按鈕、圖片、頁面。并且刪除不必要的選擇,這樣可以使產(chǎn)品的可用性更有效。

總結(jié)

心理學(xué)是設(shè)計(jì)中的較為有效工具,它可以使設(shè)計(jì)師在創(chuàng)作過程中制作出更加高效的產(chǎn)品樣式,同時(shí)結(jié)果也將更加的人性與好用。以上就是我要介紹的六種有用的心理設(shè)計(jì)原則,但是它們其實(shí)還只是冰山一角,因?yàn)樵谠撝R領(lǐng)域上還有很多東西要學(xué)習(xí)。所以,大家可以根據(jù)基礎(chǔ)的心理知識進(jìn)行延展學(xué)習(xí)與使用,并且合理運(yùn)用于日常工作中,這樣就可以大幅度提升你的設(shè)計(jì)水平與能力。獲取【UI設(shè)計(jì)視頻教程】加播妞1605146928606_課程資料.jpg:435946716。


猜你喜歡:

MBE風(fēng)格是什么?MBE風(fēng)格圖標(biāo)設(shè)計(jì)

又萌又可愛的字體設(shè)計(jì)教程

電商主圖應(yīng)該怎么設(shè)計(jì)?

全鏈路UI/UE設(shè)計(jì)課程

分享到:
和我們在線交談!