們在制定全局框架時，對于組件和響應式設計可能沒有那么熟練，不知道如何進行調整，作者總結了詳細的做法，希望對你有所幫助。

一、全局框架中的組件

1. 浮層組件

（1）全局提示

全局提示是指在全局場景中都會觸發的通知、警示、反饋的懸浮組件類型。通常，全局提示包含兩種類型的組件：

我們需要根據項目的實際情況，選擇需要使用的類型，再為它們分配嚴格的使用場景和觸發條件。比如：

• Meassage：斷網、上傳失敗、已登出、暫無權限…
• Notification：站內信、用戶留言、進度通知…

當然，也并不是每個項目都要使用到這兩個組件。有時候為了精簡懸浮內容，可以只使用 Meassage 來覆蓋所有通知內容，比如將 Notification 的大段文本內容去掉，在提示中添加一個 ”查看按鈕“ 讓用戶進行跳轉做替代。

確定好使用的類型以后，才能制定它們的交互方式。分別顯示在頁面的哪個位置，對齊的模式，多通知堆疊的邏輯等等。

（2）對話框彈窗

對話框彈窗也可以叫模態（Modal）彈窗，只要用來指應用了黑色透明遮罩的懸浮窗口。這類窗口通常是用來促使用戶必須關注彈窗內容，并完成對應操作后才能進行后續操作。

對話框彈窗是一個非常靈活的組件，可以作為多種內容的載體形式，如：

• 重要提示：對刪除、修改、替換、登錄等場景進行二次確認
• 信息公告：展示一些特定的信息，如站內公告、注意事項、廣告信息等
• 表單操作：填寫一些基礎的表單，如數量設置、添加用戶、修改標題等
• 彈窗頁面：基本可以理解成是將一個完整的頁面以彈窗的形式展示

對話彈窗因為它太靈活，所以很容易在項目中被濫用，導致整個項目各類對話框層出不窮，缺乏統一的樣式和操作方法，尤其是作為頁面載體的彈窗。

所以，我們并不能把對話框彈窗只當成一個組件，而是一個同類組件的合集。要針對每個分類制定對應的應用場景、內容結構、操作方式。

而表單、頁面型彈窗，還可以做進一步的分類（類似 PS 中不同類型的設置彈窗），比如表單包含基礎表單、穿梭表單、上傳表單等等。

（3）側邊抽屜

側邊抽屜是一個通常在右側打開的浮層，可以理解成是用來展示在右側的臨時頁面。

它的主要作用是讓用戶不用跳出當前的頁面直接展開一些下級的頁面，如列表詳情、表單填寫、系統設置等等，提升用戶的頁面跳轉效率。

抽屜作為頁面的載體，如果要在項目中使用，就需要設計師在前期制定應用的場景，或指定哪些頁面使用抽屜。要避免其應用和獨立頁面、對話框產生沖突，這會非常影響使用體驗。

并且，還要決定打開抽屜是否要使用遮罩（模態），有的業務需求需要打開側邊欄后依舊保留左側區域的操作，盡量在項目中只使用一種形態。

（4）固釘元素

固釘元素我更喜歡叫固定元素，意思是固定在頁面某個位置的懸浮元素。

比如在 SAAS 系統右側的幫助、客服，或者設置、回到頂部、風格切換等，都是可以長期在全局中存在的固定元素。

固釘元素沒有太復雜的設置，只要在前期確定有哪些按鈕、字段是需要做成固釘的，并確定它們所在的位置即可。

以上就是全局框架中包含的主要組件類型了，在項目設計過程中，就要根據需求提前設計它們的布局和交互方式，以此確定整個項目的基本操作路徑，為整個項目的交互方法奠基。

二、柵格和響應式架構

有了全局框架，就要考慮頁面的柵格和響應式規則了。

因為主流電腦屏幕分辨率寬度從 1280-3440px 不等，在跨度這么大的顯示差異下，怎么保證產品的正常使用并平衡用戶體驗，就成為前期交互工作中的必要環節。

多數新手對柵格和響應式的使用存在非常大的誤解，所以我會在下面對它們分別做出解釋。

1. B 端中的柵格制定

網頁中的柵格，是脫胎于平面網格系統的一種網頁格線系統，讓設計師使用平面排版的技巧來完成網頁的排版，可以很高效的輸出富有設計感的頁面。

早期的網頁柵格僅僅是在設計過程中輔助設計師排版的工具，在開發代碼中并不會有相關的體現。但隨著 HTML5 的登場， Bootstrap 響應式框架的問世和普及，柵格就不再只是設計的工具，也成為開發用來制定頁面顯示邏輯、響應規則的重要依據。

所以在主流的前端開源框架中，都會包含柵格的應用說明。

但是，這些說明并不是作為柵格的應用教學，而是 ——告訴你系統支持的柵格方式有哪些！

兩者之間是有天壤之別的，前者只是把規則做好，你去執行就好。后者是提供了很多種方法和支持的方式，你得理解以后再自己制定。

所以，不管你有沒有用這些開源框架，都需要制定出一套符合項目需要的柵格規則，應用在后續的界面設計和實際開發環節。

柵格系統的制定，就是在前期確定柵格的列數（Row）、列寬（Width）、外邊距（ Margin ）、列間隔（Gutter）。

其中，列數基本是以 24 列為主，除非有自己對項目應用場景的想法，否則不會是用 12、16、20 列柵格。

而網頁中的列寬，則是一個變量數值，它是通過頁面寬度減去外邊距、列間距后除以列數得出的寬度。它的獲取公式：

列寬=( 頁面寬 – 列間隔總寬 – 外邊距總寬 ) / 24

這么做的目的是后面頁面寬度變更，列寬也會按比例縮放。所以列寬是一個非固定數值，不需要我們在這個階段制定。

而外邊距的制定則是重點，外邊距一般指柵格區域左右的留空區域，很多新手以為這個數值就像平面的出血線一樣，保證左右有一定留白就可以了。但實際上，這是用來告知瀏覽器哪些區域不參與響應式的依據。

比如最常見的情況，就是移除左側導航欄的區域，不讓它們參與響應式，因為大多數情況下，導航是一個定寬的組件，它沒有參與寬度變更的需要。

所以目前的軟件柵格設置中，都有單獨定義邊距的選項，符合真實項目的使用需要。

還有一些特殊的場景，比如頁面右側可以展開聊天、日志、任務等面板（非浮層），這些面板也是定寬的，但會擠壓內容區域，于是我們就會額外進行說明，哪些場景外邊距數值會變更。

最后，就是列間隔數值的制定。列間隔一般以 4 的倍數為主，要用 5 的倍數也可以，這個數值決定了布局的寬松程度。設置柵格唯一的標準，就是根據親密原則，不大于外邊距即可。

確定好參數，就要通過交互文檔或者創建標準的柵格系統畫布進行說明。

柵格的數值定義一定是要滿足指導后續頁面設計和布局要求的，而線上很多作品集中的柵格系統標注漏洞百出，證明他們本身并沒有理解柵格的制定要素。

2. 項目的響應式規則

如果完全理解柵格和響應式的關系，應該知道柵格定好了，那么響應式的依據似乎也就有了，還需要制定什么響應式的規則呢？

包含下面幾個關鍵的要素：頁面寬度支持、非響應式頁面、組件響應邏輯。

首先，頁面寬度支持就是確定一個可以觸發響應式的畫布區間，因為響應式不可能無差別適配所有寬度，比如只有 100px 的瀏覽器畫布寬，怎么適配？或者類似 32：9 的超寬屏幕比例，適配它有什么必要？

所以，盡量要提前制定出項目支持的最小和最大尺寸。最小尺寸建議不小于 800px，因為沒有適配移動端的必要，而最大寬度支持到 2560px 即可，再寬的分辨率占比極低（ 4K屏幕會應用 HIDPI 合并成 2K 或 1080p 而不是 3840 px 寬）。

第二就是確定不應用響應式頁面的情況，響應式雖然看起來很萬能，但并不是所有頁面都需要使用響應式，強行使用只會收獲反面效果。

比如基本的表單頁面、文本頁面、效果頁面等，都是使用定寬設計的效果會遠遠優于響應式。所以，我們要確定非響應式的頁面場景，以及對應的頁面框架（下一章節會具體說）。

第三組件響應邏輯，就是下級組件中對于響應式的支持情況。

這里要做個區分，有些組件是游離與響應規則之外的，比如前面提到的導航，還有彈窗、抽屜、固釘等，都是定寬即可的元素，沒必要參與響應規則。

但是需要應用到響應的組件，就需要為它們分配基本的響應邏輯。舉個例子，前面提到的內容模塊組件，就可以制定固定內間距、標題左對齊、按鈕居中對齊的適配規則，來滿足頁面的響應需要。

同理，一些非常復雜的大型組件，也需要在前期做好響應適配的規則制定，如表格、層級穿梭框、列表等，就不在這里展開，我們會在之后的組件交互章節具體說明。

最后，還有一個在響應式架構中非常重要的參數 —— 斷點 BreakPoint，我沒有提，就是因為它在 B 端項目中能夠發揮的作用并不是太大，引入斷點的概念會讓上方的組件響應邏輯復雜幾個量級。

所以前面我強調了支持最小和最大的顯示區間，就是為了盡可能杜絕頁面過窄過寬從而必須應用斷點適配的問題。

當然上方的參數都是個人建議，如果你項目經驗豐富，對于參數的應用和響應式規則了如執掌，可以隨心所欲的駕馭數值，就不需要被我的建議還其它條條框框束縛，大膽發揮……

作者：酸梅干超人；公眾號：超人的電話亭（ID：Superman_Call）

本文由 @超人的電話亭 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash ，基于 CC0 協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。

景

在上一篇博文中CAD圖DWG解析WebGIS可視化技術分析總結提到，實現CAD/DWG圖形Web展示的思路一般為解析AutoCAD圖形格式，然后轉成html5所能繪制的格式如svg,geojson,柵格瓦片,矢量瓦片，在前端渲染。而在WebGIS中地圖底圖一般采用的是柵格瓦片或 矢量瓦片。下面就相關技術的原理做個分析。

瓦片地圖

概念： 瓦片地圖金字塔模型是一種多分辨率層次模型，從瓦片金字塔的底層到頂層，分辨率越來越低，但表示的地理范圍不變。首先確定地圖服務平臺所要提供的縮放級別的數量N，把縮放級別最高、地圖比例尺最大的地圖圖片作為金字塔的底層，即第0層，并對其進行分塊，從地圖圖片的左上角開始，從左至右、從上到下進行切割，分割成相同大小(比如256x256像素)的正方形地圖瓦片，形成第0層瓦片矩陣;在第0層地圖圖片的基礎上，按每像素分割為2×2個像素的方法生成第1層地圖圖片，并對其進行分塊，分割成與下一層相同大小的正方形地圖瓦片，形成第1層瓦片矩陣;采用同樣的方法生成第2層瓦片矩陣;…;如此下去，直到第N一1層，構成整個瓦片金字塔。

地圖緩存技術是一種非常有效的提高在線地圖訪問效率的方式，用空間換取時間的方式。按地圖緩存的分類可分為 柵格瓦片 和 矢量瓦片 。

柵格瓦片

概念：將地圖中所有圖層都切分并存儲為柵格格式的地圖瓦片。

優點：使用最廣，技術成熟

柵格瓦片的原理與機制:

柵格瓦片采用四叉樹金字塔模型的分級方式，將地圖切割成無數大小相等的矩形柵格圖片，由這些矩形柵格圖片按照一定規則拼接成不同層級的地圖顯示。

矢量瓦片

概念：矢量圖層以矢量瓦片的形式進行切分和存儲。 優點：創建效率高，傳輸和渲染速度快，前端可自定義渲染樣式

矢量瓦片的原理與機制:

矢量瓦片類似柵格瓦片，是將矢量數據用多層次模型分割成矢量要素描述文件存儲在服務器端，再到客戶端根據指定樣式進行渲染繪制地圖，在單個矢量瓦片上存儲著投影于一個矩形區域內的幾何信息和屬性信息。當客戶端通過分布式網絡獲取矢量瓦片、地圖標注字體、圖標、樣式文件等數據后，最終在客戶端進行渲染輸出地圖。

矢量瓦片沒有統一數據標注，mapbox基于Google protocol buffers制定了MAPBOX CECTOR TILE SPECIFICATION通用的矢量瓦片數據標準，被許多公司和組織采用。

矢量瓦片數據組織分成兩層，一層是地圖表達范圍內的瓦片數據集組織模型，另一層是單個瓦片內要素的組織模型。

矢量瓦片數據集的組織模型類似柵格瓦片金字塔模型，包含坐標系、投影方式、瓦片編號已實現任意精度、空間位置與矢量瓦片的對應關系，并被柵格瓦片規范相互兼容，這樣方便將矢量瓦片轉換成柵格瓦片，畢竟兩者采用相似的投影方式和瓦片編號方式。

單個瓦片要素的組織模型將幾何信息和屬性信息分開存儲，幾何信息主要包括點、線、面和未知要素類，元數據信息包含了圖層屬性和要素屬性。

雖然矢量瓦片也采用金字塔的方式進行存儲數據，但是由于其默認網格數較高，以PBF為例，單個矢量瓦片的網格是4096*4096，所以在視網膜屏等設備上也顯示地很清楚，而不會出現鋸齒，同時這個網格數可以隨時進行修改調整，以更精確的方式來記錄幾何位置信息從而適應不同屏幕的要求。同時，在矢量瓦片中，會將其幾何信息轉換成指令集表達，再將指令存儲到32位無符號整數進行存儲。而在存儲屬性信息是，則是以不同的是表示，geojson直接標注，PBF則是用索引號進行標注。

矢量瓦片的數據格式可參考 https://www.cnblogs.com/hsljyyy/p/8496267.html:

可在chrome瀏覽器里安裝插件來調試矢量瓦片的數據內容

柵格瓦片和矢量瓦片的對比

實現

柵格瓦片這個技術很成熟，開源的GIS項目如MapServer或GeoServer都能生成柵格瓦片。

矢量瓦片這個技術比較新，可參考一些開源的項目來實現。如：

https://github.com/mapbox/awesome-vector-tiles

https://github.com/mapbox/mapnik-vector-tile

https://github.com/SpatialServer/Leaflet.MapboxVectorTile

https://gdal.org/drivers/vector/mvt.html

唯杰地圖-VJMAP-為CAD圖WebGIS可視化顯示開發提供的一站式解決方案-VJ學習園地 為CAD圖WebGIS可視化顯示開發提供的一站式解決方案, 完全兼容dwg格式，23d效果完美切換，高性能webgl渲染，個性化地圖，跨平臺私有化部署，矢量柵格瓦片全支持, 實現把CAD地圖通過柵格瓦片或矢量瓦片Web展示，只需兩步：

第一步：設置渲染方式為幾何渲染 GeomRender

第二步：設置樣式為柵格瓦片風格(rasterStyle)或矢量瓦片(vectorStyle)

相關代碼如下：

// --打開地圖[矢量瓦片]--以矢量瓦片方式打開已上傳的CAD的DWG格式的圖
// js代碼
// 新建地圖服務對象，傳入服務地址和token
let svc=new vjmap.Service(env.serviceUrl, env.accessToken)
// 打開地圖
let res=await svc.openMap({
    mapid: env.exampleMapId, // 地圖ID,(請確保此ID已存在，可上傳新圖形新建ID)
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以幾何數據渲染方式打開
    style: vjmap.openMapDarkStyle() // div為深色背景顏色時，這里也傳深色背景樣式
})
if (res.error) {
    message.error(res.error)
}
// 獲取地圖的范圍
let mapExtent=vjmap.GeoBounds.fromString(res.bounds);
// 建立坐標系
let prj=new vjmap.GeoProjection(mapExtent);

// 新建地圖對象
let map=new vjmap.Map({
    container: 'map', // container ID
    style: svc.vectorStyle(), // 矢量瓦片樣式 如需柵格樣式需改成 rasterStyle()
    center: prj.toLngLat(mapExtent.center()), // 中心點
    zoom: 2,
    renderWorldCopies: false
});
// 地圖關聯服務對象和坐標系
map.attach(svc, prj);
// 使地圖全部可見
map.fitMapBounds();
// 點擊有高亮狀態（鼠標點擊地圖元素上時，會高亮)
map.enableLayerClickHighlight(svc, e=> {
    let msg={
        content: `type: ${e.name}, id: ${e.objectid}, layer: ${e.layerindex}`,
        key: "layerclick",
        duration: 5
    }
    e && message.info(msg);
})

效果

相比之下，矢量瓦片相比柵格瓦片，渲染效果更好，前端能自定義樣式。

可以訪問此 vjmap-webclient-javascript 在線體驗下。