Sketch web design 之柵格布局
時(shí)間：2023-09-06 03:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-06 03:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
Sketch web design 之柵格布局：眾所周知，現(xiàn)在的響應(yīng)式Web設(shè)計(jì)已經(jīng)普及，所以做Web Design的時(shí)候一定要考慮響應(yīng)式，而響應(yīng)式設(shè)計(jì)的基礎(chǔ)概念就是柵格布局，以前在PS上做柵格布局還是比較麻煩的，有了Sketch以后，利用自帶的柵格功能就能滿足需求，下面我們以構(gòu)建1200px Container的柵格為例。
選擇View／Canvas／Layout Settings呼出設(shè)置頁(yè)面我們來(lái)解釋一下這些設(shè)置分別是什么：- Total Width就是Container的值，我們?cè)O(shè)定為1200px;
- Offset表示柵格的偏移量，我們只要設(shè)定完成以后按Center按鈕即可，會(huì)自動(dòng)居中；
- Number of Columns就是柵格數(shù)，我們默認(rèn)設(shè)置為12個(gè)；
- Gutter on outside是非常重要的設(shè)置，勾選以后才能跟前端的柵格算法匹配。
- Gutter Width就是柵格之間的間距，我們?cè)O(shè)定為30px；
- Columns Width就是柵格的寬度，我們?cè)O(shè)定為70px；
綜上設(shè)置我們可以得到一個(gè)
Container為1200px，柵格寬度為70px，柵格間距為30px的一個(gè)柵格布局，要做柵格布局的時(shí)候直接按照比例調(diào)整設(shè)置即可：
設(shè)計(jì)師一開(kāi)始了解柵格布局可能會(huì)有些困難，因?yàn)閷?shí)際上柵格左右兩邊各有15px的間隔是肉眼無(wú)法識(shí)別的（也就是說(shuō)在大多數(shù)情況下，你的內(nèi)容都應(yīng)該放在1170px的區(qū)域范圍內(nèi)，兩邊各加15px才是1200px），所以做柵格比例的時(shí)候會(huì)經(jīng)常搞錯(cuò)，采用這種柵格方法以后又簡(jiǎn)單又不容易出錯(cuò)，推薦大家使用。
在線咨詢