界面中的網(wǎng)格設(shè)計(jì)

時(shí)間：2023-09-06 21:42:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-06 21:42:01 來源：網(wǎng)站運(yùn)營

界面中的網(wǎng)格設(shè)計(jì)：最近因?yàn)橐恍┦虑閮?nèi)心很不淡定啊！因?yàn)榻换ピO(shè)計(jì)的欠缺一直很抗拒畫界面。

強(qiáng)行更一篇。

記錄下如何在界面設(shè)計(jì)中用網(wǎng)格來布局。

我們都知道黃金分割線：黃金分割是指將整體一分為二，較大部分與整體部分的比值等于較小部分與較大部分的比值，其比值約為0.618。這個(gè)比例被公認(rèn)為是最能引起美感的比例，因此被稱為黃金分割。如圖：




我們認(rèn)真看這圖，再看一些經(jīng)典比例：

1:1

16:10

3:2

2:1

還有我們熟悉的16:9、4:3

16:9我們的手機(jī)屏幕就是了，我現(xiàn)在裁照片也習(xí)慣裁剪這個(gè)比例的。還記得多年前魅族的屏幕一枝獨(dú)秀用的是15:9的嗎？那時(shí)候魅族說自己是完美的比例，并不是毫無依據(jù)瞎吹的。15:9按短邊的除以長邊得到的是0.6，黃金比例是0.618，這樣看16:10的比例幾乎就是黃金比例，就差0.018。

除了黃金分割被認(rèn)為是美的比例，還有對稱和平均。

所以上面那些經(jīng)典比例要么是接近0.618，要么就是對稱和平分。

然后我們用網(wǎng)格做界面布局的時(shí)候用好這些比例就可以了！

當(dāng)然我們還要記住，界面設(shè)計(jì)雖然可以說是很理性很理性了，但也不是所有比例都換算成經(jīng)典比例就是好的，有些復(fù)雜情況下我們會(huì)有視覺誤差，這需要自己靈活調(diào)整。




舉個(gè)栗子了，我做的日歷界面來看，這界面比較簡單易懂，用來做筆記比較合適。

下圖是我第一次畫的日歷界面，我除了頁面的邊距用了我們系統(tǒng)手機(jī)系統(tǒng)的規(guī)范外，其他都是...憑感覺！但是我該有的間距還是有統(tǒng)一的。




我們現(xiàn)在來用網(wǎng)格所謂調(diào)整下，也修改下一些小設(shè)計(jì)。（這個(gè)是2k屏的分辨率）




我們除去必須遵守的公共控件action bar這些外，剩下的2252px高可以將這個(gè)頁面分兩個(gè)部分，上面日歷數(shù)字部分和下面記事提醒部分。上面的占的比重比下面要大，我們就可以把上面看成是16，下面是10，換算下就是1386px和866px（除不盡的四舍五入），得到這樣的空間高度：

這個(gè)日歷上面其實(shí)顯示五行就夠了，我刪除掉最下的，星期這行高度我在另一個(gè)全屏日歷那里得出的高度是160px（這個(gè)就相當(dāng)于你自己模塊里自己定義的公共控件，是可以在接下來其他頁面復(fù)用的，當(dāng)我在另一個(gè)經(jīng)典頁面定義了他的高度后，在這個(gè)頁面是必須遵守復(fù)用的）我們可以5等分一下剩下的空間就得出每行高度，得出這樣的圖：




接著是下面的，下面是記事提醒（考慮到刪除便簽這一動(dòng)作行為，我把他變成卡片式），我們先大致隨便畫下卡片高度，卡片兩邊邊距和上門日期模塊邊距我讓他是一比一，畫完是這樣：

從下圖我們可以感覺到下圖紅框區(qū)域是擁擠的，這是因?yàn)閮蓚€(gè)綠框間距不一樣，就是留白不一樣給人的呼吸感就不同，這時(shí)候就是主觀處理的時(shí)候，應(yīng)該把最后一行間距加大，每次加十個(gè)像素，這樣保證所有間距都有倍數(shù)關(guān)系。




最后把下面空間高度減去兩個(gè)卡片上下間距，把這兩個(gè)平均算一下，下面的行高就出來了，里面字體使用按照規(guī)范來，居中對齊準(zhǔn)不會(huì)錯(cuò)（如果是整個(gè)手機(jī)系統(tǒng)的設(shè)計(jì)，這里的卡片應(yīng)該遵循自家系統(tǒng)的規(guī)范來做，把他看成雙行列表做）最后的年月日一行按照手機(jī)里的單行列表高度規(guī)范畫的，為了讓頁面更有呼吸感，我去掉了沒多大影響的分割線，最終如圖：

縱向的規(guī)范跟橫的一樣來做，這頁面太簡單了可以直接用平分來做，按網(wǎng)格做出來的效果最終每個(gè)空間都是會(huì)有倍數(shù)關(guān)系，且各個(gè)模塊間的比例都接近黃金分割的數(shù)值，下圖參考線是我最終這個(gè)頁面的網(wǎng)格線。




最后，我看到有朋友在本站邀請回答怎么拿到drbbble邀請碼，其實(shí)不要為了拿碼畫東西，上次我送碼的時(shí)候收到了很多郵件，里面的作品很多都是簡單的畫幾個(gè)界面或者毫無技術(shù)含量的圖標(biāo)，真的看不出任何思考，畫界面出效果真的太簡單了，難的是背后解決問題的思考，這才是精華啊。哪怕拿畫幾個(gè)具有藝術(shù)感的圖標(biāo)來說，不要一味跟風(fēng)就用了彌撒大投影，我個(gè)人是非常反感這樣的作品，寫實(shí)的圖標(biāo)有很多細(xì)節(jié)考究可以展示我們的技術(shù)水平和造型功底是否扎實(shí)，扁平的很考驗(yàn)我們的圖形歸納和配色能力，每個(gè)方向都不要輕易小看。

以上僅個(gè)人目前的看法，下次更新一次主題設(shè)計(jì)的過程思路筆記，很短。