火星網(wǎng)校
UI排版不夠精致?那是因?yàn)槟銢]get到這點(diǎn)!
發(fā)布時(shí)間：2024-03-12 13:09:21 瀏覽量：180次
大家好，我是興元君很多童鞋會(huì)發(fā)現(xiàn)自己的設(shè)計(jì)作品
排版不夠精致
如果你的困惑一直沒有解決
不妨來看看這篇文章
1. 學(xué)習(xí)網(wǎng)格
為什么要學(xué)習(xí)網(wǎng)格呢？
要知道再一個(gè)有規(guī)律的設(shè)計(jì)布局中，網(wǎng)格無處不在。在這里我們可以簡單的把它當(dāng)作一個(gè)頁面，根據(jù)版心劃分為無數(shù)統(tǒng)一尺寸的網(wǎng)格。它能讓你的設(shè)計(jì)更有秩序。
▲ 谷歌material響應(yīng)UI基于12列網(wǎng)格布局。該網(wǎng)格在布局之間創(chuàng)建視覺一致性，同時(shí)允許各種設(shè)計(jì)的靈活性，網(wǎng)格列的數(shù)量根據(jù)斷點(diǎn)系統(tǒng)而變化。
2. 網(wǎng)格的基礎(chǔ)概念
列列是網(wǎng)格的垂直部分（也可以理解為內(nèi)容區(qū)域）。網(wǎng)格中的列越多，靈活性越大。童鞋們注意哦，并不是列越多越好，一般來說，PC端一般是12列，移動(dòng)端一般是6列。
▲ PC端12列
▲ 移動(dòng)端6列行行是網(wǎng)格的橫向部分。在UI設(shè)計(jì)中就是橫向的間距。
內(nèi)容模塊也叫內(nèi)容區(qū)域，填充設(shè)計(jì)內(nèi)容，模塊是由行和列交叉創(chuàng)建的空間單位。
組合區(qū)域區(qū)域是形成組合元素的列，行或模塊的分組。
水槽列和行由水槽分隔。溝渠越緊，視覺張力越大。如果你希望你界面間距大點(diǎn)，水槽就可以留大，相反水槽越小，越緊湊。（ps:注意一點(diǎn)，水槽里面不要放內(nèi)容，內(nèi)容盡量放在模塊里面。）
▲ 圖中橙色區(qū)域?yàn)樗郏詈貌灰艃?nèi)容哦屏幕邊距邊距是網(wǎng)格列和行之外的空間。不要填充內(nèi)容，移動(dòng)端主要是兩側(cè)空間和屏幕邊緣的距離，這里設(shè)計(jì)時(shí)候切忌不要填充內(nèi)容，保持頁面骨架邊界。
▲ 黃色區(qū)域就是屏幕邊距，設(shè)計(jì)時(shí)候切忌填充內(nèi)容，保持設(shè)計(jì)骨架統(tǒng)一。上面的內(nèi)容講述了網(wǎng)格的一些常用單位，童鞋們一定要了解透徹。
3. 如何定網(wǎng)格，各模塊大小
知道了網(wǎng)格的基礎(chǔ)概念，那么我們?nèi)绾巫约憾x一套科學(xué)標(biāo)準(zhǔn)的網(wǎng)格系統(tǒng)和骨架，來保證骨架的科學(xué)性和設(shè)計(jì)連續(xù)性。
第一步：定最小設(shè)計(jì)單位
我們都學(xué)過化學(xué)，在化學(xué)里面有最小單位原子，原子可以組成分子，分子可以組成更多的化學(xué)元素。
那么在UI系統(tǒng)中其實(shí)也一樣，我們先要保證你的這個(gè)世界里面的元素是有個(gè)基礎(chǔ)的，常用的單位有3，4，5。這個(gè)具體看你們產(chǎn)品的復(fù)雜程度，目前整體設(shè)計(jì)區(qū)域是最小單位越來越大，像Airbnb，pinterest等都是大留白，單位都是5甚至6。
第二：定邊距和水槽大小前面說過，先定最小單位，假如我們最小單位是5，總寬是375（sketch1倍設(shè)計(jì)尺寸）產(chǎn)品內(nèi)容我希望整個(gè)系統(tǒng)設(shè)計(jì)風(fēng)格別那么滿，留白稍微多點(diǎn)，我左右邊距是10，中間內(nèi)容和內(nèi)容之間也想留10，這里注意，單位一定是前面我們定的5的倍數(shù)。
計(jì)算得出：
（375（屏幕總寬）-邊距左右兩邊20- 水槽五個(gè)50 ） ? 6（內(nèi)容移動(dòng)端是6）= 51(四舍五入)
- 邊距：10
- 水槽：10
- 內(nèi)容：51
這就是我們定的柵格，系統(tǒng)骨架，設(shè)計(jì)時(shí)候必須保證每個(gè)設(shè)計(jì)元素，在框架內(nèi)，保持規(guī)則，邊距不要出現(xiàn)內(nèi)容，水槽不要放置內(nèi)容，如果放置，盡量以組的形式。
必然會(huì)出現(xiàn)除不盡的情況這個(gè)避免不了，取整數(shù)，有個(gè)內(nèi)容區(qū)域面積會(huì)少1個(gè)px，這個(gè)沒關(guān)系。
也可以根據(jù)不同情況，做出不同組合的網(wǎng)格，具體看業(yè)務(wù)場景。
第三：定橫向間距前面雖然說過，在定骨架時(shí)候可以忽略橫向，但是在UI系統(tǒng)設(shè)計(jì)中還是需要對(duì)橫向的設(shè)計(jì)間距進(jìn)行統(tǒng)一，多人協(xié)作時(shí)需要保證所有設(shè)計(jì)師界面中的間距一致性，這有個(gè)科學(xué)方法：
費(fèi)波那契數(shù)列又譯為費(fèi)波拿契數(shù)、斐波那契數(shù)列、費(fèi)氏數(shù)列、黃金分割數(shù)列。
在數(shù)學(xué)上，費(fèi)波那契數(shù)列是以遞歸的方法來定義：用文字來說，就是費(fèi)波那契數(shù)列由0和1開始，之后的費(fèi)波那契系數(shù)就是由之前的兩數(shù)相加而得出。
費(fèi)波那契系數(shù)是：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233
我也研究過很多國外設(shè)計(jì)系統(tǒng)，都是類似有節(jié)奏的設(shè)計(jì)間距來搭建系統(tǒng)，結(jié)合前面我們定的5的柵格，可以得出：
▲ 當(dāng)然這個(gè)間距只是一個(gè)運(yùn)用費(fèi)波那契數(shù)列的一個(gè)參考，如果在運(yùn)用過程中如果覺得間距不夠用，完全可以去添加或者調(diào)整，但是一定要在系統(tǒng)的原則基礎(chǔ)上加有規(guī)律的間距。
至此網(wǎng)格大概就講完了，也通過前面推導(dǎo)得出了一套網(wǎng)格系統(tǒng)，后續(xù)就是需要大家在自己項(xiàng)目里面去使用了。
國外運(yùn)用案例
最后給大家推薦一盒網(wǎng)格制作工具：
guideguide 網(wǎng)址：http://guideguide.me/
▲ PS推薦輔助線工具
來源我們的設(shè)計(jì)日記
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
-
3. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型，你get到了嗎？
通過介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
-
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
-
5. 移動(dòng)端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個(gè)好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計(jì)師看的書籍，輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
-
8. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
-
9. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
10. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣？想學(xué)UI設(shè)計(jì)要多少錢？
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎？不知道學(xué)UI設(shè)計(jì)要花多少錢？不妨看看這篇文章，了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
最新文章
