火星網(wǎng)校
3點教你設(shè)計流行“留白”UI風(fēng)格
發(fā)布時間：2024-03-11 13:35:33 瀏覽量：138次
掌握簡單三步，教你設(shè)計出2019最流行又最有B格的“留白UI風(fēng)格”APP。
今天教一個如何設(shè)計出2019最流行最省事還最有B格的UI風(fēng)格，那就是：“留白風(fēng)格”（名字瞎起的......嘻嘻）
快來跟著一克君學(xué)習(xí)如何設(shè)計這種風(fēng)格的技巧吧 (*^__^*)
上面這張圖是 APP的UI界面截圖，看完后大家注意到了共同點沒有？
沒錯，他們統(tǒng)一的特點就是文字大，留白多，看著很舒服。
這就是一克君要分享給大家的最近今年最流行的：“留白風(fēng)格”。
相信大家早見到過類似這些風(fēng)格的APP了，但你們真的嘗試設(shè)計過嗎？
下面打開PS來隨著我開始設(shè)計吧，首先拿一克君最近的一個羞羞案例來做示范（因為是示例，我把界面風(fēng)格設(shè)計的更簡單了）
1要素：大字號
大家PS新建個750*1334寬高的標準iPhone6分辨率畫布。輸入標題文字，設(shè)字號：90；字體：平方 粗體；左間距50px；頂部間100px;
注意這里的字體要用平方粗體。
直接加粗完事的話從態(tài)度和細節(jié)上就已經(jīng)OUT了，這可能也是為什么你臨摹別人作品，最后卻總沒原版好看的原因。
2.要素：大留白
足夠的留白能使頁面看起來更加的舒服，更佳的干凈清爽、更平衡的布局。元素更清晰的呈遞效果，更能吸引用戶注意。
但自己心理一定要有套各情況下的留白間距尺寸規(guī)范。否則一套APP幾十個頁面沒有規(guī)范會越設(shè)計越困難。
3要素：KISS原則
保持一切簡潔。是設(shè)計亙古不變的道理，沒有必要完全填滿。某些情況下，“不完整才是完整，殘缺才是完美”。
設(shè)計師的任務(wù)就是利用（布局，留白，色彩，尺寸，字體）來營造一個視覺焦點，吸引用戶的注意力。
但是不要為了留白而一味留白，要注意設(shè)計元素之間的聯(lián)系性。
4要素：大配圖
所謂大配圖，其實就是不吝嗇空間。因為大面積的留白已經(jīng)為你準備好了空間。
大膽的使用大圖片來作為展示，盡可能的讓圖片成為頁面的主視覺點。
你會發(fā)現(xiàn)界面的檔次和美觀程度又有了進一步提升。
依此類推，我們可以發(fā)揮創(chuàng)意，運用大白風(fēng)格設(shè)計出更完善更高B格的頁面，并且完美運用到實際項目中，比如下面這些~
留白是一種重要的、功能強大的設(shè)計元素。它對于創(chuàng)造積極的用戶體驗有著重大的影響。
“留白就像一塊畫布，它是將不同設(shè)計元素融合到一起的背景，又讓這些元素通過對比襯托脫穎而出。”
一克君只是希望帶大家入個門，掌握留白風(fēng)格的設(shè)計要素總結(jié)來說就三個關(guān)鍵詞：大字號！大留白！大配圖！
只要我們明白每一次的留白目的，就足以做出很優(yōu)秀的作品！
（文中圖片部份是網(wǎng)上找的，部份是一克君自己的，如果善用了您的作品請聯(lián)系刪除( ^_^ )/~~）
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(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)盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
10. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
最新文章
