火星網(wǎng)校
給初級UI設(shè)計師的7個UI設(shè)計技巧
發(fā)布時間：2024-02-28 10:12:01 瀏覽量：169次
??來自freepik.com的插圖
文章目錄
對比
留白
重復(fù)
重疊
懸念
一致性
對齊
如果你正在使用以上7個設(shè)計技巧，它將使你的設(shè)計與眾不同。要像一位好廚師一樣熟練掌握它們，你應(yīng)該知道如何使用食材使菜肴變得可口。
1??對比
它有助于使元素在人群中脫穎而出。它也遵循格式塔的“相似性法則”原則。對比度幫助我們在設(shè)計中創(chuàng)建視覺層次?？梢酝ㄟ^以下方式實現(xiàn)對比：
-顏色對比
以Netflix的“登錄”頁面為例。
你可以在下面看到他們?nèi)绾问褂脤Ρ壬蛴脩麸@示標(biāo)題（1）和CTA按鈕（2）。
以下是熱圖的快照，用戶如何與Netflix登錄頁面進(jìn)行交互。用戶看到的第一件事是登錄標(biāo)題，然后是CTA按鈕和“立即注冊”鏈接。
HeatMap是使用VisualEyes插件生成的
-尺寸對比
以 LinkedIn的個人資料頁面為例。會看到他們?nèi)绾问褂米煮w大?。ㄒ詐x為單位更改）和粗細(xì)（從粗體，常規(guī)和斜體更改）來創(chuàng)建視覺層次結(jié)構(gòu)。
-重量對比
重量的最佳示例是主按鈕和輔助按鈕之間的區(qū)別。根據(jù)谷歌材料設(shè)計指南：
主按鈕或包含按鈕（重點突出）由于
包含顏色填充和陰影，因此包含按鈕的重點更加突出。
次要或輪廓按鈕（中等強調(diào)）
由于筆劃，輪廓按鈕比文本按鈕用于強調(diào)更多。
第三或文本按鈕（低強調(diào)）
文本按鈕通常用于不太重要的操作。
2??留白
充足的留白空間可幫助你的設(shè)計呼吸并使其更生動。藝術(shù)家在白色空間中發(fā)揮很大的作用，以使其藝術(shù)品脫穎而出。你可以在下圖中的Gal Shir中看到。他使用了對比（淺紫色的深紫色）和白色的空間來創(chuàng)作這幅精美的藝術(shù)品。
Gal Shir的插圖
留白會增加元素的可查找性。提高網(wǎng)站的轉(zhuǎn)換率。以Amazon的登錄頁面為例。他們的主要重點是讓用戶登錄時不會分心。他們把留白（-ive space）發(fā)揮到了極致。
亞馬遜，谷歌和ubereats等受歡迎的網(wǎng)站都使用留白，以提高其清晰度和轉(zhuǎn)換率。
3??重復(fù)
顧名思義，重復(fù)就是重復(fù)單個元素多次。重復(fù)在網(wǎng)絡(luò)和應(yīng)用程序設(shè)計中可能很有用。通過重復(fù)元素，我們作為設(shè)計師不僅可以按照用戶的期望進(jìn)行交付，而且還可以通過減少認(rèn)知負(fù)擔(dān)來改善他們的體驗。
重復(fù)可以是顏色，樣式，布局等。
當(dāng)你重復(fù)元素時，這些重復(fù)之間的間隔可以產(chǎn)生節(jié)奏感和移動感。
重復(fù)顏色和線條以創(chuàng)建如此漂亮的logo，作者：肯尼·米斯納（Kenny Miesner）
以dribbble.com為例，所有設(shè)計都以相同的四列順序放置在相同大小的盒子中。
Dribbble.com登錄用戶的主頁
4??重疊
重疊的最佳示例是視差動畫。使用形狀，顏色，照片和版式的組合可以最成功地實現(xiàn)這一目標(biāo)。還使用模糊來創(chuàng)建深度和與頁面的分離。
以下是一些使用重疊手法的設(shè)計。
流行的雜志封面在封面上經(jīng)常使用這種技術(shù)。例如Vogue，Cosmopolitan，Bazaar等。
著名的在線無代碼生成器工具Webflow的登錄頁面使用了重疊的設(shè)計手法。你可以在右側(cè)看到效果，將Webflow功能的快照一個接一個地添加并從監(jiān)視器中出來。
熱門網(wǎng)站（從L到R）在其網(wǎng)站上使用重疊技術(shù)進(jìn)行phonepe.com，webflow.com和stripe.com。
5??懸念
懸念會使用戶對你的設(shè)計感到好奇。他們會想為什么會這樣。要想與其他網(wǎng)站不（視覺上）同?？梢酝ㄟ^以下方法實現(xiàn)：
打破平衡
極端裁剪放大
?
重疊
有角度的元素
6??一致性
一致性確實降低了用戶的認(rèn)知負(fù)擔(dān)，但同時又扼殺了創(chuàng)新。精明的設(shè)計師非常清楚如何使用一致和不一致的設(shè)計元素。
注意：你可以通過重復(fù)顏色，字體，類似類型的圖像，布局和形狀來保持一致性。
一致性可從這幾點去表現(xiàn)：
?
色彩
字體
?
布局
?
Dribbble的設(shè)計展示頁面在整個頁面上具有一致的布局。
圖像（圖標(biāo)）
?
在stripe.com中，所有圖標(biāo)圖片在整個網(wǎng)站上都是一致的。
7??對齊
對齊可以幫助你設(shè)計的布局。網(wǎng)格在更好地對齊元素方面起著至關(guān)重要的作用。對齊可提高可讀性。
??在布局對齊中使用網(wǎng)格。
即使在報紙上，他們也使用網(wǎng)格來對齊大量內(nèi)容。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
