国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

讓用戶在不同設(shè)備和尺寸的屏幕下看的頁(yè)面顯示效果更佳，屏幕空間利用更高，操作體驗(yàn)更統(tǒng)一，交互方式更符合習(xí)慣。本文主要圍繞什么是響應(yīng)式，如何搭建響應(yīng)系統(tǒng)，響應(yīng)式網(wǎng)站解析 三個(gè)部分進(jìn)行闡述，在項(xiàng)目中提前定義好響應(yīng)系統(tǒng)將有助于設(shè)計(jì)師在設(shè)計(jì)中考慮頁(yè)面在不屏幕斷點(diǎn)上布局，希望對(duì)正在了解響應(yīng)式知識(shí)的你有幫助?。?！

1. 什么是響應(yīng)式

馬科特說(shuō)，真正的響應(yīng)式設(shè)計(jì)方法不僅僅是根據(jù)可視區(qū)域大小而改變網(wǎng)頁(yè)布局，而是要從整體上顛覆當(dāng)前網(wǎng)頁(yè)的設(shè)計(jì)方法，是針對(duì)任意設(shè)備的網(wǎng)頁(yè)內(nèi)容進(jìn)行完美布局的一種顯示機(jī)制。也就通過(guò) CSS3’s 的媒體查詢識(shí)別當(dāng)前屏幕寬度，在根據(jù)預(yù)設(shè)的屏幕斷點(diǎn)比對(duì)展示相應(yīng)的頁(yè)面結(jié)構(gòu)布局、版式設(shè)計(jì)以及不同數(shù)量信息的展示。

1.1 相對(duì)尺寸單位-Rem

在《菜鳥(niǎo)教程》中是這樣描述的，使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。使用 Rem 的主要目的：方便計(jì)算尺寸、在不同寬度的設(shè)備上等比縮放內(nèi)容。

1.2 屏幕斷點(diǎn)

屏幕斷點(diǎn)是響應(yīng)式設(shè)計(jì)的基礎(chǔ)依據(jù)，它決定了我們要適配到什么樣的設(shè)備或屏幕規(guī)格，并通過(guò)“媒體查詢”這樣的技術(shù)實(shí)現(xiàn)不同 “屏幕斷點(diǎn)” 條件下的不同 UI 表現(xiàn)。一般情況屏幕斷點(diǎn)都是手機(jī)、平板、PC這三個(gè)維度設(shè)計(jì)。下圖屏幕斷點(diǎn)參考 《Bootstrap入門(mén):容器、響應(yīng)式斷點(diǎn)、Z-index – 菜鳥(niǎo)學(xué)院》劃分。

1.3 流體柵格

在《「交互規(guī)范」柵格系統(tǒng)讓頁(yè)面元素間距更統(tǒng)一》中有詳細(xì)的介紹柵格系統(tǒng)及如何搭建，而流體柵格的核心思想是在較小的屏幕上降低柵格數(shù)量，以保證頁(yè)面元素各個(gè)屏幕下顯示效果。

2. 如何搭建響應(yīng)系統(tǒng)

2.1 確定策略

響應(yīng)策略主要是列數(shù)量、槽寬度、頁(yè)邊距的寬度、導(dǎo)航欄根據(jù)窗口的寬度而發(fā)生變化。屏幕斷點(diǎn)之間的頁(yè)面布局，采用向下兼容的適配方式，576-767范圍的屏幕寬度用屏幕斷點(diǎn)576的設(shè)計(jì)布局去響應(yīng)。

以《「交互規(guī)范」框架布局讓頁(yè)面模塊更統(tǒng)一》全局控制層布局中 “全屏”為例，響應(yīng)策略如下圖（具體策略以各自項(xiàng)目實(shí)際情況為準(zhǔn)）。

以《「交互規(guī)范」框架布局讓頁(yè)面模塊更統(tǒng)一》?全局控制層布局中“固定寬度”為例，響應(yīng)策略如下圖（具體策略以各自項(xiàng)目實(shí)際情況為準(zhǔn)）。

2.2 確定規(guī)則

2.2.1 屏幕斷點(diǎn)上響應(yīng)

頁(yè)面布局只允許在屏幕寬度縮放到屏幕斷點(diǎn)時(shí)發(fā)生變化，去響應(yīng)下一個(gè)斷點(diǎn)范圍，屏幕斷點(diǎn)上常見(jiàn)的響應(yīng)規(guī)則有刪除、堆疊、變更三種。

2.2.2 屏幕斷點(diǎn)內(nèi)響應(yīng)

屏幕斷點(diǎn)之間頁(yè)面布局需要完全一致，不允許發(fā)生任何變化。屏幕斷點(diǎn)內(nèi)常見(jiàn)的響應(yīng)規(guī)則有定高拉伸、等比例縮放、無(wú)刪減拉伸三種。

2.2.3 Hover 動(dòng)作兼容

在PC的交互方式主要鼠標(biāo)和鍵盤(pán)，鼠標(biāo)指針移入元素上面會(huì)出現(xiàn)樣式上變化、展示更多的信息、產(chǎn)生浮層等多種情況，但平板和手機(jī)上的交互方式主要是手指，不會(huì)出現(xiàn)出現(xiàn) PC特有的 hover 動(dòng)作。

3. 響應(yīng)式網(wǎng)站解析

3.1 微信讀書(shū)

在瀏覽器屏幕寬度為721時(shí)，截取了 “微信讀書(shū)” 頁(yè)面進(jìn)行了柵格還原；同時(shí)發(fā)現(xiàn)瀏覽器屏幕寬度的值分別是 560、720、960、1331 頁(yè)面布局發(fā)生變化，根據(jù)屏幕斷點(diǎn)之間的頁(yè)面布局，采用向下兼容的適配方式，微信讀書(shū)屏幕斷點(diǎn)可以劃分為320、560、721、961、1332，響應(yīng)策略如下圖：

3.2 愛(ài)彼迎

在瀏覽器屏幕寬度為744時(shí)，截取了 “愛(ài)彼迎” 頁(yè)面進(jìn)行了柵格還原；同時(shí)發(fā)現(xiàn)瀏覽器屏幕寬度的值分別是 743、1127 頁(yè)面布局發(fā)生變化，根據(jù)屏幕斷點(diǎn)之間的頁(yè)面布局，采用向下兼容的適配方式，微信讀書(shū)屏幕斷點(diǎn)可以劃分為320、744、1128，響應(yīng)策略如下圖：

3.3 Ant Design Pro

在瀏覽器屏幕寬度為768時(shí)，截取了 “Ant design Pro” 頁(yè)面進(jìn)行了柵格還原；同時(shí)發(fā)現(xiàn)瀏覽器屏幕寬度的值分別是 575、767、991 頁(yè)面布局發(fā)生變化，根據(jù)屏幕斷點(diǎn)之間的頁(yè)面布局，采用向下兼容的適配方式，Ant design Pro 屏幕斷點(diǎn)可以劃分為320、576、768、992、1200，響應(yīng)策略如下圖：

「思考，優(yōu)設(shè)網(wǎng)屬于響應(yīng)式嗎？」

在瀏覽器屏幕寬度為768時(shí)，截取了 “優(yōu)設(shè)網(wǎng)” 頁(yè)面進(jìn)行了柵格還原；同時(shí)發(fā)現(xiàn)瀏覽器屏幕寬度的值分別是 575、767、991 頁(yè)面布局發(fā)生變化，根據(jù)屏幕斷點(diǎn)之間的頁(yè)面布局，采用向下兼容的適配方式，優(yōu)設(shè)網(wǎng) 屏幕斷點(diǎn)可以劃分為320、576、768、992、1200，響應(yīng)策略如下圖：

「總結(jié)」

在項(xiàng)目中，提前定義好響應(yīng)系統(tǒng)，確定了屏幕斷點(diǎn)尺寸，設(shè)計(jì)師在設(shè)計(jì)中將會(huì)考慮的更全面，也為用戶在不同設(shè)備和尺寸的屏幕下看的頁(yè)面顯示效果更佳，操作體驗(yàn)更統(tǒng)一打下了基礎(chǔ)。根據(jù)不同的業(yè)務(wù)場(chǎng)景響應(yīng)系統(tǒng)也不盡相同，合適自己項(xiàng)目的響應(yīng)系統(tǒng)才是好響應(yīng)系統(tǒng)。

如果你正在設(shè)計(jì) 0-1 項(xiàng)目的，希望布局三部曲《框架布局》、《柵格系統(tǒng)》、《響應(yīng)式》對(duì)你有所幫助?。?！

本文由 @前行的大熊 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議