響應(yīng)式Web設(shè)計(jì)的基本原則？

時(shí)間：2023-11-09 18:30:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-11-09 18:30:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

響應(yīng)式Web設(shè)計(jì)的基本原則？：

一鍵柵格化，構(gòu)建超優(yōu)秀的響應(yīng)式設(shè)計(jì)

近些年來(lái)，市面上的新型設(shè)備如雨后春筍般涌現(xiàn)，從智能手表到折疊屏手機(jī)，設(shè)備的屏幕尺寸、交互方式不斷地變化。萬(wàn)物互聯(lián)互通，多屏互動(dòng)也已經(jīng)成為日常生活中必不可少的一部分了。多屏設(shè)計(jì)下的必需品——“響應(yīng)式設(shè)計(jì)”為不同設(shè)備的用戶(hù)提供了更好的體驗(yàn)。

設(shè)備屏幕尺寸要說(shuō)明白什么是響應(yīng)式設(shè)計(jì)，得先從設(shè)計(jì)端口的分辨率講起。我們就拿移動(dòng)端舉例吧。
現(xiàn)今市面上移動(dòng)端的兩大系統(tǒng)無(wú)疑還是Android和ios，這兩大系統(tǒng)的屏幕尺寸有以下這么多。
安卓的整體屏幕尺寸大致如下：

蘋(píng)果的整體屏幕尺寸大致如下：

明顯看出，屏幕尺寸真的太多差別了，我們不能只為所有尺寸進(jìn)行設(shè)計(jì)，這也就是我們需要響應(yīng)式設(shè)計(jì)的原因。設(shè)計(jì)師在設(shè)計(jì)的時(shí)候會(huì)選取這兩大系統(tǒng)中的一個(gè)分辨率作為設(shè)計(jì)尺寸?，F(xiàn)在市面上Android和ios用戶(hù)最常用的屏幕尺寸分別是1920×1080和1366×768，據(jù)統(tǒng)計(jì)，全球大約有40%的用戶(hù)都使用了這兩種尺寸的手機(jī)。
響應(yīng)式設(shè)計(jì)

說(shuō)到這里，大家應(yīng)該大致猜出什么是響應(yīng)式設(shè)計(jì)了。
響應(yīng)式設(shè)計(jì)是一種頁(yè)面設(shè)計(jì)方法，可使頁(yè)面內(nèi)容適應(yīng)各種設(shè)備的不同屏幕和窗口大小。
例如，我們看到的內(nèi)容可能會(huì)在桌面屏幕上分成不同的列，因?yàn)樗鼈兊膶挾茸阋匀菁{該設(shè)計(jì)。
響應(yīng)式設(shè)計(jì)可以根據(jù)屏幕尺寸將內(nèi)容和設(shè)計(jì)的多個(gè)獨(dú)立布局交付給不同的設(shè)備。


柵格系統(tǒng)只說(shuō)定義不直觀，我們接下來(lái)要引出一個(gè)能大大幫助我們?cè)O(shè)計(jì)的設(shè)計(jì)方法——柵格系統(tǒng)

柵格系統(tǒng)就是運(yùn)用固定的格子，遵循一定的規(guī)則，進(jìn)行頁(yè)面的布局設(shè)計(jì)，使布局規(guī)范簡(jiǎn)潔有規(guī)則。



或許簡(jiǎn)單了解柵格系統(tǒng)的歷史會(huì)有助于幫助理解它。
柵格系統(tǒng)最初是作為書(shū)面書(shū)籍的輔助線。
隨著工業(yè)革命的到來(lái)，此時(shí)使用柵格系統(tǒng)將頁(yè)面進(jìn)行劃分，以用于廣告費(fèi)用的計(jì)算，空間越大，廣告價(jià)格就越高。

而后柵格系統(tǒng)的大師——瑞士設(shè)計(jì)師，Brockmann 和 Gerstner。他們使用的柵格系統(tǒng)就與我們現(xiàn)在使用的很接近了

那我們使用柵格系統(tǒng)的基本元素又有那些呢？
1. 列
列是內(nèi)容區(qū)垂直的部分，被認(rèn)為是柵格的“構(gòu)建塊”。列的獨(dú)特之處在于網(wǎng)格中的列越多，網(wǎng)格就越靈活。

2. 行
行是柵格的水平部分。

3. 模塊
模塊是行和列的交集創(chuàng)建的空間單位。通常所說(shuō)的模塊或內(nèi)容模塊被認(rèn)為是頁(yè)面的構(gòu)建塊，因?yàn)槊總€(gè)設(shè)計(jì)元素（文本、圖像、按鈕等）都適合由網(wǎng)格中的矩形圖案創(chuàng)建的模塊.

4. 水槽
水槽是分隔這些單元中的每一個(gè)的列和行之間的線。水槽的作用是在列和行之間形成負(fù)空間，水槽對(duì)于整體布局尤其重要。

5. 邊距
邊距是格式和內(nèi)容外邊緣之間的負(fù)空間，也可以將其視為“外邊距”。

那么利用柵格系統(tǒng)對(duì)設(shè)計(jì)師有哪些作用呢？
?柵格可以幫助對(duì)齊，柵格的所有元素的邊界都能作為對(duì)齊參考線。這大大幫助了設(shè)計(jì)師在設(shè)計(jì)時(shí)進(jìn)行排版布局。尤其在進(jìn)行文本布局時(shí)，對(duì)齊可以更優(yōu)化用戶(hù)在進(jìn)行閱讀時(shí)的體驗(yàn)，讓用戶(hù)自然且無(wú)壓力地閱讀。

?柵格還可以幫助間距的調(diào)整。好的布局設(shè)計(jì)并不是將信息滿(mǎn)滿(mǎn)堆砌，然后全部拋給用戶(hù)。適當(dāng)?shù)牧舭?，給予用戶(hù)視覺(jué)上、心靈上的休憩對(duì)于用戶(hù)而言會(huì)是一次張弛有度的旅行。再好的風(fēng)景也需要有節(jié)奏地觀看，囫圇吞下只會(huì)白白增加飽腹感。

?柵格還可以幫助分割比。在柵格的幫助下設(shè)計(jì)師更容易了解自己每一處設(shè)計(jì)比重，從而讓頁(yè)面布局更加均衡。優(yōu)秀的分割比例有利于提升畫(huà)面的形式美感與秩序感，并加快設(shè)計(jì)師的決策，提高設(shè)計(jì)效率。

歡迎關(guān)注微信公眾號(hào)：空兩格 獲得更多資訊