最近在做一個(gè)云存儲(chǔ)網(wǎng)頁(yè)響應(yīng)式布局設(shè)計(jì)項(xiàng)目。梳理一下最近一些感悟，也是一次對(duì)此次項(xiàng)目的回溯。

首先響應(yīng)式布局是什么？通俗的理解大家都認(rèn)為是通過(guò)不同尺寸的屏幕，查看網(wǎng)頁(yè)，能夠達(dá)到最佳的用戶體驗(yàn)效果。那其實(shí)呢，Responsive layout簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端響應(yīng)式布局響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。

? 項(xiàng)目前期，也參考了主流的設(shè)計(jì)規(guī)范資料Google的Material Design System和IBM的Carbon Design。站在巨人的肩膀上，看到的視野也就更寬更遠(yuǎn)。但真要落實(shí)到實(shí)際項(xiàng)目中，其實(shí)還是難免會(huì)有差距，會(huì)遇到各種阻礙和困難。我們的網(wǎng)站又該如何去設(shè)計(jì)呢？

? 第一，要明確設(shè)計(jì)思路。我們是基于哪一個(gè)網(wǎng)站去做響應(yīng)式，現(xiàn)狀是什么？要達(dá)到什么樣的體驗(yàn)效果，也就是設(shè)計(jì)預(yù)期或者叫設(shè)計(jì)目的。比如。我目前是做云空間的一個(gè)網(wǎng)站，現(xiàn)狀是已經(jīng)有一個(gè)桌面web端的網(wǎng)站。需求是想要改善在不同設(shè)備體驗(yàn)體驗(yàn)最佳效果效果，但是不用開發(fā)多套代碼去適配不同的設(shè)備。那么我們就要分析怎么樣才能做到不同設(shè)備端都能體驗(yàn)效果好，就是需要用到響應(yīng)式布局設(shè)計(jì)的思路。

? ? 第二競(jìng)品分析。通過(guò)篩選競(jìng)品發(fā)現(xiàn)跟云服務(wù)相關(guān)產(chǎn)品的有icloud、小米云服務(wù)，谷歌云盤就是Google drive，one drive微軟的， Drop box,...

? ? 分析了一圈發(fā)現(xiàn)icloud蘋果做的適配和one drive是比較理想的比較做的比較全面。

? ? 那我們?cè)趺捶治瞿兀课乙婚_始也在思考這個(gè)問題不知道怎么著手開展方案或者是分析報(bào)告。我們還是從用戶的角度去思考這個(gè)問題，想象一下你要喝你的爸媽想要說(shuō)明白什么是響應(yīng)式布局這個(gè)事情？那就相當(dāng)于向用戶講一個(gè)故事。

? ? 所以我在方案匯報(bào)里面：先弄清楚什么是響應(yīng)式布局它到底是長(zhǎng)什么樣子的？然后分析總結(jié)一下競(jìng)品的一些特點(diǎn)還有哪些競(jìng)品的一些優(yōu)點(diǎn)。最好要分析出來(lái)可以參考的點(diǎn)。附上圖

? 其實(shí)響應(yīng)式設(shè)計(jì)布局先要弄清楚整個(gè)框架是什么樣的一個(gè)布局。設(shè)計(jì)參考點(diǎn)一：大部分的精品都是大概有2~3個(gè)尺寸的一個(gè)布局變化也就是說(shuō)存在一個(gè)到兩個(gè)的斷點(diǎn)。什么是斷點(diǎn)？就是你網(wǎng)頁(yè)的尺寸到達(dá)某一個(gè)值它就會(huì)改變這個(gè)整個(gè)頁(yè)面的布局。就是我們要先弄清楚我們需要幾個(gè)斷電我們需要幾個(gè)尺寸的布局。那這個(gè)斷點(diǎn)又是在哪里開始呢？這個(gè)需要2個(gè)依據(jù)：主流設(shè)備屏幕尺寸，頁(yè)面內(nèi)容組件元素的布局。依據(jù)現(xiàn)有的一些主流的一些設(shè)備屏幕尺寸比如說(shuō)最小的拍的可能是768pix，那么你如果預(yù)想是配最小iPad的這個(gè)尺寸斷點(diǎn)就不能小于這個(gè)值；設(shè)計(jì)參考點(diǎn)二：這就是一些隨著尺寸變化組件上的一些特點(diǎn)。組件長(zhǎng)寬可變化組件位置可移動(dòng)換行組件大小可變組件的間距可變組件可以取優(yōu)先級(jí)隱藏或顯示可依據(jù)設(shè)備特點(diǎn)或者是交互行為適當(dāng)調(diào)整交互方式這個(gè)是一句觀察和分析競(jìng)品得出的一些結(jié)論。

? ? 第三，框架布局設(shè)計(jì)方案分析通過(guò)框架的一個(gè)布局變化，可以記住數(shù)字標(biāo)注確定優(yōu)先級(jí)，就是依據(jù)優(yōu)先級(jí)和屏幕的尺寸變化來(lái)決定顯示哪一個(gè)模塊。

? ? 第四，具體的UI方案分析依據(jù)現(xiàn)有的頁(yè)面的基本功能特點(diǎn)，頁(yè)面分模塊區(qū)調(diào)整布局?？梢杂涀⊥该鞯纳珘K來(lái)表示頁(yè)面組件的一些變化過(guò)程，比如導(dǎo)航是一塊，操作欄是一塊，目錄是一塊...非常清晰明了形象具體的描述了設(shè)計(jì)方案的一個(gè)調(diào)整方向相關(guān)業(yè)務(wù)人員也可以根據(jù)業(yè)務(wù)，通過(guò)模塊化的組件去調(diào)整自己想要達(dá)到的效果，溝通上效率比較高。可以先解決主頁(yè)面，通過(guò)多個(gè)方案去評(píng)審，后續(xù)再補(bǔ)充二級(jí)頁(yè)面或是其他頁(yè)面的狀態(tài)。這樣可以提高評(píng)審和工作的效率。

第五，定義合適的柵格系統(tǒng)。依據(jù)業(yè)務(wù)需求和主流設(shè)備規(guī)格，定義出適用的柵格系統(tǒng)。主要是定義出頁(yè)邊距，欄數(shù)目，欄間距。

注意事項(xiàng)：需要注意的是頁(yè)面定義隨著頁(yè)面寬度變化，組件如何變化才是最合適的。還有一些特殊的業(yè)務(wù)要求，比如，在手機(jī)端網(wǎng)頁(yè)尺寸需要隱藏某個(gè)功能入口，或者涉及功能架構(gòu)邏輯的調(diào)整等。這些變化大部分單純地按照響應(yīng)式布局開發(fā)是無(wú)法做到的，那這些就需要針對(duì)設(shè)備做處理。不建議有太多的針對(duì)設(shè)備處理的問題，這樣會(huì)增加開發(fā)實(shí)現(xiàn)的復(fù)雜性以及工作量，也違背了響應(yīng)式設(shè)計(jì)的初衷：就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。

只是一些個(gè)人經(jīng)驗(yàn)的總結(jié)和分享，期待與大家互相學(xué)習(xí)交流。

具體的柵格基礎(chǔ)布局和元素詳細(xì)可以參考Google’s Material Design System。

資料參考：推薦一本相關(guān)參考書籍《Grid Systems》

IBM’s Carbon Design System

https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals

Google’s Material Design System

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins