項(xiàng)目背景：

2015年12月-2016年8月 在深圳戰(zhàn)吼網(wǎng)絡(luò)科技有限公司實(shí)習(xí)期間，參與游戲社交應(yīng)用Modchat的移動端界面設(shè)計(jì)。

2016年12月-2017年4月 將網(wǎng)格系統(tǒng)相關(guān)理論運(yùn)用到Modchat的界面設(shè)計(jì)中，對其進(jìn)行界面改版。

網(wǎng)格系統(tǒng)：

貝斯·托恩德羅（美）在《破譯網(wǎng)格設(shè)計(jì)》中認(rèn)為：網(wǎng)格是所有設(shè)計(jì)的基礎(chǔ)，對設(shè)計(jì)師來說，學(xué)會運(yùn)用網(wǎng)格是進(jìn)行所有設(shè)計(jì)的基礎(chǔ)。

網(wǎng)格系統(tǒng)（Grid Systems）是在設(shè)計(jì)過程中通過制定網(wǎng)格指導(dǎo)設(shè)計(jì)師如何在一個版式中放置視覺元素的原則。這種設(shè)計(jì)方法來源于人類對秩序的探尋，現(xiàn)如今，網(wǎng)格系統(tǒng)已經(jīng)被眾多設(shè)計(jì)師應(yīng)用到更廣闊的設(shè)計(jì)領(lǐng)域中。

網(wǎng)格系統(tǒng)在手機(jī)APP界面設(shè)計(jì)中的價(jià)值：

1）優(yōu)化功能布局。設(shè)計(jì)師可以通過網(wǎng)格系統(tǒng)為界面中的功能劃分出合理的布局。

2）規(guī)范內(nèi)容編排。和傳統(tǒng)的平面設(shè)計(jì)一樣，通過創(chuàng)建網(wǎng)格系統(tǒng)可以決定不同APP界面中文字和圖片在內(nèi)容區(qū)域中的位置與比例關(guān)系，使用戶在獲取手機(jī)APP界面中的內(nèi)容時(shí)擁有更好的可讀性。

3）提升視覺美感。在手機(jī)APP界面設(shè)計(jì)中，這種美感主要體現(xiàn)在手機(jī)APP界面間的一致性、連續(xù)性和標(biāo)準(zhǔn)性。

設(shè)計(jì)實(shí)踐：

步驟1：創(chuàng)建尺寸為1334×750（像素）、分辨率為每英寸72像素的畫布。

步驟2：設(shè)置水平邊距?？紤]到該手機(jī)APP界面多是采用垂直方向上的瀏覽方式，所以為了能夠在手機(jī)屏幕中可以放置更多的內(nèi)容，決定采用相對較小的數(shù)值作為水平邊距，這里采用了24像素，即6像素的4倍。

步驟3：設(shè)置垂直邊距。Modchat界面采用了天頭和地腳的高度分別為12像素和24像素即1:2的比例作為垂直邊距。這樣，不管是在首頁還是其他頁面，采用1:2的比例更容易拉開內(nèi)容與屏幕邊緣的距離，使界面中的內(nèi)容向上推起，給人一種輕盈舒適的感覺。

步驟4：創(chuàng)建網(wǎng)格。這里主要創(chuàng)建三種網(wǎng)格：分層網(wǎng)格、稿件網(wǎng)格和模塊網(wǎng)格。

嘀~創(chuàng)建分層網(wǎng)格