最實用的摩登極簡風(fēng) UI 設(shè)計指南
發(fā)布時間:2021-12-17 08:56 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 3127

2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

我一直期待出現(xiàn)一種全新的、功能性的、在視覺上還足夠吸引人的風(fēng)格出現(xiàn),但是這種設(shè)計風(fēng)格一直都沒有出現(xiàn)。

其實,如果單從視覺吸引力上來說,很多新的設(shè)計風(fēng)格是能夠做到這一點的,但是其中有的足夠吸睛但是可讀性不足,有的足夠友好但是不夠高級。好在廣大設(shè)計師在逐漸的迭代的過程中,逐漸找到了在美學(xué)、功能和視覺吸引力上的平衡點,而這正是我要在今天的文章中分享的。

我愿將這種設(shè)計風(fēng)格定義為「摩登極簡」。和其他的設(shè)計風(fēng)格相比,它相對更加簡約,但是和 Material Design 和傳統(tǒng)的扁平化設(shè)計相比又不會顯得單調(diào)枯燥,接下來,我們來看看如何實現(xiàn)這種風(fēng)格的視覺效果吧!


主要的8個風(fēng)格特征


我將這種設(shè)計風(fēng)格的特征梳理成為以下8個特征:

2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

  1. 明亮的背景和充足的留白
  2. UI元素要微妙和圓潤
  3. 大而可讀性良好的標(biāo)題
  4. 現(xiàn)實題材的攝影
  5. 成熟的配色方案
  6. 對于對比度的精妙控制
  7. 控制特效的使用程度
  8. 有趣的小細節(jié)和插畫

下面我結(jié)合案例逐個解說:


1、明亮的背景和充足的留白


2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

在摩登極簡設(shè)計風(fēng)當(dāng)中,留白為王。界面的整個視覺特征最容易被注意到的是白色或者帶有其他色彩傾向的非常明亮的背景上。大量的留白和足夠明亮的背景能夠讓整體看起來干凈、且美觀。


2、UI元素要微妙和圓潤


2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

摩登極簡風(fēng)的 UI 當(dāng)中,UI 元素通常都呈現(xiàn)出微妙而柔和的圓潤效果,這樣會讓界面看起來更加有機和友好。

之前一度非常火熱的 Clubhouse 就使用了類似摩登極簡風(fēng)的設(shè)計,這樣的設(shè)計整個 APP 保持格調(diào)又足夠友好。

對我個人而言,圓角是更加令人愉悅的一種設(shè)計元素,不過在這種風(fēng)格中,使用圓角的訣竅在于不能讓圓角半徑過大,否則會顯得非常奇怪。


3、大而可讀性良好的標(biāo)題


2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

大標(biāo)題能能夠帶來更強的幾何和塊面感,無論是襯線字體還是非襯線字體,不過為了保持摩登極簡在風(fēng)格氣質(zhì)上的統(tǒng)一,我通常傾向于使用幾何感較強的非襯線字體。比如Gilroy、Sofia Pro、Lufga 或Circular,此外還可以嘗試Pulp、Gordita、Visby、Konnect、Geliat、Galano或+Jakarta Sans。


4、現(xiàn)實題材的攝影圖片


2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

這一點其實非常重要。攝影作品相對而言能夠提供的細節(jié)信息量和整體的真實感會強烈很多,而且從設(shè)計的總體趨勢上而言,大家似乎開始開始厭倦了 3D 渲染、扁平人物插畫和手繪涂鴉。真實照片的好處和優(yōu)勢就在于它的真實感。

在題材上,攝影圖片通常會看起來更加嚴肅和正式,在情感層面上也更容易喚起用戶與現(xiàn)實生活相關(guān)的情緒。


5、成熟的配色方案


2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

摩登極簡風(fēng)格在配色上同樣講究的是簡約感。所以除了大量的白色之外,基本上就是挑選合適的主色以及少量的強調(diào)色了。

摩登極簡設(shè)計風(fēng)整體上并不需要大片的色彩來引起用戶的注意,在絕大多數(shù)時候都只是用主色做點綴。


6、對于對比度的精妙控制


2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

摩登極簡風(fēng)格的優(yōu)點之一,就是它良好的可訪問性,而絕大多數(shù)講究視覺吸引力的設(shè)計風(fēng)格在這一點上確實比不上它。不過為了確保這一點,在設(shè)計的時候,需要通過配色、投影和微妙的描邊之類的小技巧,來確保控件和背景之間有清晰的對比度,有足夠的視覺層次感。


7、控制特效的使用程度


2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

摩登極簡風(fēng)其實有從很多不同的設(shè)計風(fēng)格當(dāng)中汲取靈感,微妙的色彩陰影,模糊的漸變極光背景,浮雕甚至亞克力式的透明效果,這些視覺風(fēng)格效果在一定程度上是能夠提升UI界面的質(zhì)感和效果的,但是一定要保證這些風(fēng)格化的元素不是同時出現(xiàn)的,否則會讓整體的效果看起來雜亂無章。


8、有趣的小細節(jié)和插畫


2021年最實用的摩登極簡風(fēng) UI 設(shè)計指南

當(dāng)然,摩登極簡風(fēng)的設(shè)計對于細節(jié)設(shè)計同樣是有追求的。盡管它整體上保持簡約,但是在小元素上,比如圖標(biāo)、emoji、小裝飾上,同樣可以是兼容的,用好圖案、拼貼、小插畫(當(dāng)然要保持克制),將這些元素和強調(diào)色以及攝影照片穿插起來使用,是能夠讓摩登極簡風(fēng)格更加友好,令人愉悅的。


結(jié)語


我真的非常欣賞和喜歡摩登極簡風(fēng)所創(chuàng)造的這種氛圍,它給 UI 界面所帶來的這種友好的質(zhì)感,在某種程度上,正是如今絕大多數(shù)的 UI 設(shè)計項目所面臨的挑戰(zhàn)。

雖然這種設(shè)計風(fēng)格是脫胎于很多 Dribbble 上的飛機稿,但是這種風(fēng)格在如今切切實實地應(yīng)用到真實產(chǎn)品當(dāng)中,并且更加能夠解決實際需求和問題。

在現(xiàn)如今這個時間節(jié)點,簡約的設(shè)計風(fēng)格對于用戶而言有著巨大的價值,能夠保持簡約還能確保整體的愉悅感,摩登極簡風(fēng)應(yīng)該是下一個階段,越來越多設(shè)計師和產(chǎn)品會擁抱的設(shè)計趨勢。

零基礎(chǔ)教你做UI
我要自學(xué)網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC