用戶體驗 ? 打動用戶的 12 條 UI 設計法則

打動用戶的 12 條 UI 設計法則

發表于: 用戶體驗, 視覺設計. 評論 (1)
Sponsor

前言:不少設計師看到好看的設計,第一時間是保存起來,或粗略瀏覽、或不再過問。但草草地瀏覽并不意味著我們真正理解這樣設計的內涵,或者真正了解設計背后的技巧。要讓用戶動心,還需要了解設計心理學,從用戶心理去引導用戶行為。今天設計達人分享的這篇文章,分別從格式塔心理學、色彩心理、形狀心理學角度進行案例分析,希望能給你一些幫助!

打動用戶的 12 條 UI 設計法則

1. 連續性法則

連續性的元素排列形成組織關系,能夠讓閱讀變得更加的連貫和清晰。目的是為了驅動用戶完成我們想要的操作,如左滑可以看到更多卡片。通過連續性的方式進行引導告知,用戶隱藏的部分。例如:導航分類、列表、輪播圖、卡片中都有運用。提示了用戶查看更多信息,在輪播圖中經常會用到這個方法設計。

打動用戶的 12 條 UI 設計法則

打動用戶的 12 條 UI 設計法則

2. 相似性法則

我們的視覺感官會把相似的元素聯系在一起,主觀認為這些元素有同樣的意圖,所以在設計相同狀態或相同功能元素時,我們需要保持視覺的統一性,讓用戶認為是一樣的功能按鈕或模塊。

打動用戶的 12 條 UI 設計法則

看到導航欄下方的圖標,因為形狀大小一致,用戶會認為他們的功能屬于同一類型,并且可以點擊。

打動用戶的 12 條 UI 設計法則

3. 封閉性法則

在我們看到一個殘缺的圖形時,我們會腦補出它完整的樣子。這種表現方式經常會用到 LOGO 的設計中,同樣在界面設計中也會運用。

打動用戶的 12 條 UI 設計法則

例如圖標、可視化圖表等。

打動用戶的 12 條 UI 設計法則

4. 鄰近性法則

我們的眼睛會把相鄰的內容組成一組,從而減少內容帶來的閱讀壓力。這是設計中必不可少的排版方法,特別是復雜的信息流頁面,經常會運用鄰近性方法進行設計,保證信息傳遞更有條理性。在設計的時候,利用間距將元素組合在一起,這種方法通常會運用在內容信息、卡片、橫幅中。

打動用戶的 12 條 UI 設計法則

5. 對稱性法則

對稱的圖形會讓我們感覺穩定可靠。我在界面設計中為了提高穩定性會運用對稱法則進行設計。但是過度使用對稱會讓人感覺單調和乏味,所有需要合理運用對稱性法則,在適當時候出現。這個方法通常會運用在焦點圖、產品展示、列表、導航中。

打動用戶的 12 條 UI 設計法則

6. 組合性法則

為了提高頁面中內容關系,會進行視覺性分組。采用卡片框的形式進行區分,從而讓多種元素整合成塊,讓布局更加的規整。組合性法則經常會用到內容、列表的設計中。

打動用戶的 12 條 UI 設計法則

7. 同屬性法則

在同一個方向移動的元素,會感覺到它們是有聯系的。如點擊折疊菜單后,同時出現的多個元素,它們是有聯系的。這樣的規律可以有效建立元素的關系,從心理上認為它們的屬性一致,這樣的方式經常會出現在導航、下拉菜單、折疊菜單中。

打動用戶的 12 條 UI 設計法則

8. 焦點性法則

通過加強對比度或對元素放大來凸顯重點,從而吸引眼球。目的是為了讓用戶聚焦到我們想讓他看到的信息上,從而引導用戶關注重點信息。特別是在詳情頁中或提示性框中,會使用 “焦點法” 進行設計。

打動用戶的 12 條 UI 設計法則

9. 生理性法則

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

打動用戶的 12 條 UI 設計法則

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

打動用戶的 12 條 UI 設計法則

10. 隔離性法則

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

打動用戶的 12 條 UI 設計法則

11. 色彩心理學

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

打動用戶的 12 條 UI 設計法則

12. 形狀心理學

形狀是所有設計中無法忽略的關鍵因素。研究表明,每種形狀有著它們的含義。和顏色一樣,人的潛意識對不同的形狀也有不同的反應。

打動用戶的 12 條 UI 設計法則

方形和矩形

由于我們會看的物體墻壁、家具、圖書都是方形和矩形的形狀,潛意識會認為直角帶來可靠和安全的感覺。但過度使用會造成 “死板” 的感覺,所以在活潑的產品調性中避免使用。給人的感受:力量、勇氣、安全、可靠

打動用戶的 12 條 UI 設計法則

打動用戶的 12 條 UI 設計法則

三角形

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

打動用戶的 12 條 UI 設計法則

圓形和橢圓

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

打動用戶的 12 條 UI 設計法則

平行線

平行線和矩形一樣給人感覺比較的穩定,相對矩形層次更加的豐富。平行線給人的感受是冷靜,所以多用于硬件設計或工具類的產品中。給人的感受:冷靜、穩重

打動用戶的 12 條 UI 設計法則

垂直線

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

打動用戶的 12 條 UI 設計法則

對角線

對角線的設計會打破安靜的設計,帶給我們動感和活力。所以很多運動類的產品會使用到對角線的設計。給人的感受:活力、成長、動力。

打動用戶的 12 條 UI 設計法則

打動用戶的 12 條 UI 設計法則

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

作者 | micu 設計
原文網址:https://www.zcool.com.cn/article/ZMTI2OTUzMg==.html

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

+ 添加評論One Response to “打動用戶的 12 條 UI 設計法則”

  1. WordPress新手學園 - 回復

    學習,很贊,直男審美看到這些如獲新生


{ 發表評論 }