超實用的12個UI設(shè)計法則，大神都在用！

2022-4-2    周周

1.連續(xù)性法則


連續(xù)性的元素排列形成組織關(guān)系，能夠讓閱讀變得更加的連貫和清晰。目的是為了驅(qū)動用戶完成我們想要的操作，如左滑可以看到更多卡片。通過連續(xù)性的方式進行引導(dǎo)告知，用戶隱藏的部分。 


例如：導(dǎo)航分類、列表、輪播圖、卡片中都有運用。提示了用戶查看更多信息，在輪播圖中經(jīng)常會用到這個方法設(shè)計。 







2.相似性法則


我們的視覺感官會把相似的元素聯(lián)系在一起，主觀認(rèn)為這些元素有同樣的意圖，所以在設(shè)計相同狀態(tài)或相同功能元素時，我們需要保持視覺的統(tǒng)一性，讓用戶認(rèn)為是一樣的功能按鈕或模塊。 



看到導(dǎo)航欄下方的圖標(biāo)，因為形狀大小一致，用戶會認(rèn)為他們的功能屬于同一類型，并且可以點擊。 





3.封閉性法則


在我們看到一個殘缺的圖形時，我們會腦補出它完整的樣子。這種表現(xiàn)方式經(jīng)常會用到LOGO的設(shè)計中，同樣在界面設(shè)計中也會運用。 


例如圖標(biāo)、可視化圖表等。 


4.鄰近性法則


我們的眼睛會把相鄰的內(nèi)容組成一組，從而減少內(nèi)容帶來的閱讀壓力。這是設(shè)計中必不可少的排版方法，特別是復(fù)雜的信息流頁面，經(jīng)常會運用鄰近性方法進行設(shè)計，保證信息傳遞更有條理性。 


在設(shè)計的時候，利用間距將元素組合在一起，這種方法通常會運用在內(nèi)容信息、卡片、橫幅中。 





5.對稱性法則


對稱的圖形會讓我們感覺穩(wěn)定可靠。我在界面設(shè)計中為了提高穩(wěn)定性會運用對稱法則進行設(shè)計。但是過度使用對稱會讓人感覺單調(diào)和乏味，所有需要合理運用對稱性法則，在適當(dāng)時候出現(xiàn)。 


這個方法通常會運用在焦點圖、產(chǎn)品展示、列表、導(dǎo)航中。 

6.組合性法則


為了提高頁面中內(nèi)容關(guān)系，會進行視覺性分組。采用卡片框的形式進行區(qū)分，從而讓多種元素整合成塊，讓布局更加的規(guī)整。 


組合性法則經(jīng)常會用到內(nèi)容、列表的設(shè)計中。 


7.同屬性法則


在同一個方向移動的元素，會感覺到它們是有聯(lián)系的。如點擊折疊菜單后，同時出現(xiàn)的多個元素，它們是有聯(lián)系的。這樣的規(guī)律可以有效建立元素的關(guān)系，從心理上認(rèn)為它們的屬性一致，這樣的方式經(jīng)常會出現(xiàn)在導(dǎo)航、下拉菜單、折疊菜單中。 





8. 焦點性法則


通過加強對比度或?qū)υ胤糯髞硗癸@重點，從而吸引眼球。目的是為了讓用戶聚焦到我們想讓他看到的信息上，從而引導(dǎo)用戶關(guān)注重點信息。特別是在詳情頁中或提示性框中，會使用“焦點法”進行設(shè)計。 





9. 生理性法則


越真實的感觀越容易被接受，同樣也能吸引注意力。就像文字不如圖片好閱讀，而圖片不如視頻更加直觀一樣。通過圖像可以多感知傳遞信息，所以很多產(chǎn)品會用照片或視頻來激發(fā)用戶購買。為了讓體驗更有趣，還會通過震動或音效來強化感知。 



照片對比圖能讓用戶直觀的看到整容前后的效果，激發(fā)整容的欲望。 

10. 隔離性法則


人的視線容易被不同元素或突出元素吸引，并且能很快的記住。這個法則很容易與焦點法則相混淆。不同的地方是，應(yīng)用這個規(guī)則的元素往往是獨立存在的，并沒有額外的功能和信息。 


11. 色彩心理學(xué)


顏色對我們的潛意識有特別的影響。不同性別、不同宗教、不同文化的人對色彩的看法也不同。例如紅色代表的是錯誤、綠色代表了成功、藍色代表著進行中、黃色代表活力同時隱含著危險感。 





12. 形狀心理學(xué)

形狀是所有設(shè)計中無法忽略的關(guān)鍵因素。研究表明，每種形狀有著它們的含義。和顏色一樣，人的潛意識對不同的形狀也有不同的反應(yīng)。 


方形和矩形


由于我們會看的物體墻壁、家具、圖書都是方形和矩形的形狀，潛意識會認(rèn)為直角帶來可靠和安全的感覺。但過度使用會造成“死板”的感覺，所以在活潑的產(chǎn)品調(diào)性中避免使用。 

給人的感受：力量、勇氣、安全、可靠 



三角形


三角形給人的感受是充滿陽剛之氣、活力和動感。三角形的的夾角還會吸引用戶的視線，起到指引方向的左右。朝向上的三角會讓人安心，而相反的倒三角會感覺到危險。 

給人的感受：權(quán)利、運動、穩(wěn)定、危險。 


圓形和橢圓


圓形會給人帶來永恒的感覺，由于沒有尖角，會看起來更加的溫和柔軟，好親近。所以在社交產(chǎn)品或女性產(chǎn)品中經(jīng)常使用圓形。同時看到圓形我們會聯(lián)想到宇宙、太陽、地球元素，因此圓形會給人帶來科技感。另外橢圓相對圓形更加有趣味性，比圓形更加有活力。 

給人的感受：神秘、親近、宇宙 


平行線


平行線和矩形一樣給人感覺比較的穩(wěn)定，相對矩形層次更加的豐富。平行線給人的感受是冷靜，所以多用于硬件設(shè)計或工具類的產(chǎn)品中。 

給人的感受：冷靜、穩(wěn)重 


垂直線


和平行線不同，垂直的線條會讓人感覺高大。人心理面對高大的物體的時候都會感覺到侵略感。所以在制作友好的界面中我們很少用到。 

給人的感受：力量、侵略性、霸道。 


對角線


對角線的設(shè)計會打破安靜的設(shè)計，帶給我們動感和活力。所以很多運動類的產(chǎn)品會使用到對角線的設(shè)計。 

給人的感受：活力、成長、動力。 


今天分享的12個心理學(xué)法則，它們本質(zhì)都是一樣的，就是通過設(shè)計引導(dǎo)幫助用戶。通過法則我們可以影響用戶的行為，管控好用戶的使用路徑，達到設(shè)計的目的。好的設(shè)計源自細節(jié)，也源自用戶心理。注重用戶的反饋，避免糟糕的體驗，積極引導(dǎo)用戶情緒，才能做出更好的產(chǎn)品。

文章來源：站酷 作者：micu設(shè)計

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


分享本文至：

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔