如何利用柵格系統(tǒng)做響應(yīng)式設(shè)計(jì)

2022-07-13    分類: 網(wǎng)站建設(shè)

本文主要與大家分享如何利用柵格系統(tǒng)完成后臺(tái)頁(yè)面響應(yīng)式設(shè)計(jì),介紹響應(yīng)式設(shè)計(jì)的思路與方法。
一、什么是響應(yīng)式? 按照本人自己的理解,響應(yīng)式就是通過合理的設(shè)計(jì)方案配合規(guī)范的技術(shù)實(shí)現(xiàn)策略,使同一個(gè) Web頁(yè)面在各個(gè)終端(設(shè)備)不同分辨率屏幕上都能有好的用戶體驗(yàn)。 這里說(shuō)是用戶體驗(yàn)而不是視覺效果是因?yàn)橛脩趔w驗(yàn)包含了性能、交互、效率等多方面內(nèi)容,也就是說(shuō),對(duì)于一個(gè)線上的響應(yīng)式頁(yè)面,我們不僅要關(guān)注視覺上看到的,也要關(guān)注我們操作、使用時(shí)的感受,這些綜合因素最終影響著用戶使用后臺(tái)系統(tǒng)時(shí)的效率與體驗(yàn)。而這里我提到的「合理的設(shè)計(jì)方案」就是本篇文章跟大家分享的重點(diǎn):如何利用柵格系統(tǒng)完成后臺(tái)頁(yè)面的響應(yīng)式設(shè)計(jì)。對(duì)于交互與性能方面內(nèi)容,本篇文章不做介紹,因?yàn)閮烧呱婕暗轿也惶私獾募夹g(shù)相關(guān)知識(shí)。我提出這個(gè)觀點(diǎn)主要希望大家在執(zhí)行設(shè)計(jì)時(shí),能有更全局的考慮,多跟交互與開發(fā)溝通,協(xié)力打造更好的用戶體驗(yàn)。
二、響應(yīng)式響應(yīng)的是什么? 響應(yīng)就是系統(tǒng)對(duì)于外部變化的反饋跟適應(yīng),響應(yīng)式就是系統(tǒng)做出這種反饋所依據(jù)的方案與策略。對(duì)于一個(gè) Web頁(yè)面,外部的變化是指媒介(Media)與視窗(Viewport)的變化,媒介指 Web頁(yè)面運(yùn)行在哪些設(shè)備的屏幕上(手機(jī)、平板、PC、Mac等),視窗指瀏覽器用來(lái)顯示網(wǎng)頁(yè)內(nèi)容的窗口,也就是瀏覽器去掉標(biāo)簽欄、地址欄、工具欄之后顯示內(nèi)容的窗口大小。所以對(duì)于一個(gè) Web頁(yè)面而言,響應(yīng)式響應(yīng)的就是媒介與視窗的變化,響應(yīng)的結(jié)果在視覺上表現(xiàn)為頁(yè)面在不同媒介、不同視窗下會(huì)有不同的布局結(jié)構(gòu)、版式設(shè)計(jì)以及不同數(shù)量信息的展示。
三、響應(yīng)式的目的是什么? 后臺(tái)系統(tǒng)做響應(yīng)式設(shè)計(jì)的目的:提高屏幕利用率,大化操作效率。 提高屏幕利用率最簡(jiǎn)單的理解就是在大屏幕上顯示更多內(nèi)容,在小屏幕上通過數(shù)據(jù)篩選展示關(guān)鍵信息。一直以來(lái)大家普遍認(rèn)為移動(dòng)端碎片化嚴(yán)重,但實(shí)際上桌面端設(shè)備的分辨率也是有著不太均勻的分布,而隨著新設(shè)備的更新,更多高分辨率屏幕不斷加入,這種碎片化的趨勢(shì)會(huì)更加明顯,因而要想利用好每一塊屏幕,讓不同分辨率的用戶都有好的體驗(yàn),顯然傳統(tǒng)固定的布局是做不到了。 后臺(tái)系統(tǒng)的應(yīng)用特性,決定了響應(yīng)式在后臺(tái)設(shè)計(jì)中具有很高的實(shí)用價(jià)值。后臺(tái)系統(tǒng)有兩大主要功能:查看與操作。查看主要是各種數(shù)據(jù),是系統(tǒng)自動(dòng)生成的內(nèi)容;操作是需人工干預(yù)、人工決策的任務(wù),查看的數(shù)據(jù)為操作提供了依據(jù),而操作支撐了公司或部門業(yè)務(wù)的正常運(yùn)行。所以后臺(tái)系統(tǒng)設(shè)計(jì)最基礎(chǔ)的目標(biāo)之一是如何通過良好的數(shù)據(jù)展示幫助用戶提高操作、決策效率,而充足的展示空間顯然是實(shí)現(xiàn)這一目標(biāo)的基礎(chǔ),響應(yīng)式設(shè)計(jì)通過為每個(gè)分辨率設(shè)定合理的版式布局,使數(shù)據(jù)在每塊屏幕上都盡可能展示的好。優(yōu)化后的數(shù)據(jù)展示,幫助用戶更高效獲取信息,從而提高了用戶使用后臺(tái)系統(tǒng)的效率與體驗(yàn)。
四、為何要利用柵格系統(tǒng)來(lái)進(jìn)行響應(yīng)式網(wǎng)站設(shè)計(jì)?響應(yīng)式可以響應(yīng)的前提有兩點(diǎn):頁(yè)面布局具有規(guī)律性;元素寬高可用百分比代替固定數(shù)值,而這兩點(diǎn)正是柵格系統(tǒng)本身就具有的典型特點(diǎn),所以利用柵格系統(tǒng)進(jìn)行響應(yīng)式的設(shè)計(jì)是順理成章的,也比較高效快捷,所以響應(yīng)式與柵格化天生一對(duì)好搭檔。柵格系統(tǒng)頁(yè)面布局具有規(guī)律性、元素寬高可用百分比表示:
五、利用柵格系統(tǒng)完成后臺(tái)頁(yè)面響應(yīng)式設(shè)計(jì)的步驟 1. 確立設(shè)計(jì)稿基準(zhǔn)尺寸 設(shè)計(jì)稿基準(zhǔn)尺寸是指我們從哪一個(gè)分辨率開始設(shè)計(jì),也就是我們新建畫板時(shí)畫板的尺寸應(yīng)該是多大。而這個(gè)尺寸確定的主要依據(jù)是我們后臺(tái)系統(tǒng)所面向的主要用戶的屏幕分辨率;我們分兩大類情況來(lái)討論這個(gè)問題。 如果我們的系統(tǒng)是給公司內(nèi)部員工使用,由于公司批量采購(gòu)設(shè)備的原因,公司內(nèi)部員工的屏幕分辨率往往會(huì)比較統(tǒng)一,這種情況下我們需要拿到這個(gè)數(shù)據(jù),然后以它作為基準(zhǔn)尺寸開始設(shè)計(jì)。因?yàn)殡m然響應(yīng)式設(shè)計(jì)的目標(biāo)是讓頁(yè)面在每個(gè)分辨率下都有好的體驗(yàn),但實(shí)際開發(fā)中畢竟存在損壞,設(shè)計(jì)還原很難99.99%,因而大多數(shù)情況下還是基于基準(zhǔn)尺寸的設(shè)計(jì)與開發(fā),在用戶端顯示效果好、體驗(yàn)。 如果我們的系統(tǒng)是平臺(tái)級(jí)面向全網(wǎng)用戶,或者雖然是公司內(nèi)部使用,但是并不能統(tǒng)計(jì)到內(nèi)部員工屏幕分辨率情況,就可以以1440*900作為基準(zhǔn)尺寸開始設(shè)計(jì)。從統(tǒng)計(jì)數(shù)據(jù)來(lái)看,目前國(guó)內(nèi) PC端用戶屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900;1440的尺寸實(shí)際上是處于中間位置,如果以它為基準(zhǔn)設(shè)計(jì),最終向上向下響應(yīng)適配后,相對(duì)誤差最小,從而達(dá)成用戶體驗(yàn)的大公約數(shù)。
2. 確定頁(yè)面布局結(jié)構(gòu) 頁(yè)面的布局結(jié)構(gòu),是頁(yè)面基本框架,后續(xù)的設(shè)計(jì)都是在這個(gè)大的框架下完成的,所以確定頁(yè)面基準(zhǔn)設(shè)計(jì)尺寸后,需要跟交互設(shè)計(jì)師或產(chǎn)品經(jīng)理配合,根據(jù)實(shí)際業(yè)務(wù)情況討論確定頁(yè)面布局結(jié)構(gòu)。一般來(lái)講,后臺(tái)系統(tǒng)有兩種最典型的頁(yè)面布局結(jié)構(gòu):左右布局與上下布局。 △ 上下布局 上下布局的結(jié)構(gòu)在傳統(tǒng)網(wǎng)頁(yè)中非常常見,而在后臺(tái)系統(tǒng)中并不常用。這種布局的優(yōu)點(diǎn)是符合用戶認(rèn)知,遵循用戶從上而下瀏覽頁(yè)面獲取信息的習(xí)慣;貫穿全屏的導(dǎo)航欄設(shè)計(jì)也使頁(yè)面顯得正式穩(wěn)重,除卻導(dǎo)航欄之后相對(duì)較大的空間也為內(nèi)容展示提供了比較充足的空間。缺點(diǎn)是頂部一級(jí)導(dǎo)航受頁(yè)面寬度限制,數(shù)量會(huì)比較局限,同時(shí)導(dǎo)航層級(jí)較深時(shí),交互效率也不夠理想。所以該布局適合那些導(dǎo)航層級(jí)較少,內(nèi)容展示充分的后臺(tái)系統(tǒng)設(shè)計(jì)。 △ 左右布局 擁有側(cè)邊導(dǎo)航的左右布局頁(yè)面結(jié)構(gòu),是在后臺(tái)系統(tǒng)中更常見的頁(yè)面布局形式。側(cè)邊導(dǎo)航欄可以固定也可以收起,相對(duì)比較靈活,同時(shí)文字橫向排列的形式可以在豎向上展示更多內(nèi)容,因此側(cè)邊導(dǎo)航比頂部導(dǎo)航能容納更多一級(jí)內(nèi)容,而層疊式的內(nèi)容展示也使得一、二、三級(jí)導(dǎo)航內(nèi)容關(guān)聯(lián)更為順暢,可擴(kuò)展性也得到加強(qiáng);由于側(cè)邊欄可以常駐在頁(yè)面左側(cè),所以對(duì)于右側(cè)內(nèi)容的指示性也優(yōu)于頂部導(dǎo)航,切換起來(lái)也更加方便。但同時(shí),因?yàn)閭?cè)邊欄的常駐,導(dǎo)致右側(cè)內(nèi)容區(qū)域空間被擠掉部分,所以相對(duì)上下布局的結(jié)構(gòu),左右布局的結(jié)構(gòu),內(nèi)容區(qū)域空間會(huì)比較??;一般為了與頁(yè)面其它區(qū)域做區(qū)分,導(dǎo)航部分會(huì)用更深的顏色、安排更多的圖標(biāo)和文字,這也導(dǎo)致了在視覺上左右布局的頁(yè)面不夠平衡,會(huì)有左邊重右邊輕的感覺。
3. 對(duì)內(nèi)容區(qū)域建立柵格系統(tǒng) 根據(jù)不同的布局類型,對(duì)頁(yè)面內(nèi)容區(qū)域建立柵格系統(tǒng)。對(duì)于一個(gè)利用柵格系統(tǒng)做響應(yīng)式設(shè)計(jì)的頁(yè)面來(lái)講,主要有三大數(shù)值需要規(guī)范:Column、Gutter、Margin;對(duì)于 Column、Gutter 我們?cè)凇冻?!柵格系統(tǒng)及其在后臺(tái)設(shè)計(jì)中的應(yīng)用總結(jié)》內(nèi)容中已經(jīng)有很詳細(xì)的介紹,不再贅述,而 Margin 是頁(yè)邊距,主要確定了內(nèi)容區(qū)域距離頁(yè)面邊緣的距離,它分布在內(nèi)容區(qū)域的兩側(cè),主要作用是通過留白把內(nèi)容區(qū)域與周圍環(huán)境隔離出來(lái),從而突出內(nèi)容區(qū)域的顯示,此外還可通過 Margin值來(lái)調(diào)整內(nèi)容區(qū)域顯示比例,使頁(yè)面在視覺上有更好的呈現(xiàn)效果。所以一個(gè)用于響應(yīng)式的柵格系統(tǒng)事實(shí)上由 Columns、Gutters、Margins 三部分組成。 △ 上下布局結(jié)構(gòu)與其對(duì)應(yīng)的柵格系統(tǒng) △ 左右布局結(jié)構(gòu)與其對(duì)應(yīng)的柵格系統(tǒng)
4. 根據(jù)實(shí)際業(yè)務(wù)內(nèi)容確定盒子(Box)比例 △ 上下布局結(jié)構(gòu)的盒子 △ 左右布局結(jié)構(gòu)的盒子
5. 確定響應(yīng)策略 響應(yīng)策略就是當(dāng)視窗(Viewport)發(fā)生變化時(shí),內(nèi)容區(qū)域的元素如何去響應(yīng),具體到我們當(dāng)前的柵格系統(tǒng),就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 組成的盒子(BOX)四者的值(主要是寬度)如何變化,以及在這種變化之下我們頁(yè)面的布局如何調(diào)整。 為了方便直觀的向開發(fā)工程師與團(tuán)隊(duì)里的其它小伙伴溝通,我們可以把這個(gè)響應(yīng)策略制作成如下的表格,并在頁(yè)面中標(biāo)注說(shuō)明相關(guān)元素的變化規(guī)律,供自己與開發(fā)參考。 由于帶左側(cè)導(dǎo)航的響應(yīng)式規(guī)則相對(duì)復(fù)雜,所以我先以它為例跟大家交流下響應(yīng)策略如何制定。 △ 左右布局響應(yīng)策略表 如圖,響應(yīng)式是以視窗的最小寬度作為基本依據(jù)來(lái)制定每種寬度下 Columns、Gutters 與 Margins 的響應(yīng)策略,也就是說(shuō) Viewport Min-width 是做出響應(yīng)的觸發(fā)條件,視窗每達(dá)到一個(gè)最小寬度,就會(huì)觸發(fā)該寬度下預(yù)設(shè)的頁(yè)面布局方式,而每種布局都是在該寬度下的好布局,也是因此,響應(yīng)式才會(huì)在各種復(fù)雜分辨率條件下都能給用戶比較好的體驗(yàn)。 每個(gè)視窗寬度的最小值是觸發(fā)響應(yīng)的關(guān)鍵值,因此我們給這些用于觸發(fā)的關(guān)鍵值起了個(gè)名字叫「Breakpoint」,每個(gè) Breakpoint 觸發(fā)一種響應(yīng)策略,而每個(gè)策略持續(xù)(保持)的寬度范圍就是圖中綠色矩形的范圍。以圖中第二行矩形為例,該矩形代表的響應(yīng)策略是:欄目數(shù)是8、水槽寬度16(SM)、頁(yè)邊距32、側(cè)邊欄收起且僅展示圖標(biāo),當(dāng)點(diǎn)擊側(cè)邊欄展開圖標(biāo)時(shí)側(cè)邊欄以 Push 的方式展開,該策略觸發(fā)的 Breakpoint 是768,保持范圍是577~768。也就是當(dāng)視窗寬度縮放至768時(shí),欄目數(shù)量由上一級(jí)的12變?yōu)?,水槽寬度由24變?yōu)?6,側(cè)邊導(dǎo)航由完全展開狀態(tài)自動(dòng)收起文字部分,僅保留圖標(biāo),然后保持這些關(guān)鍵數(shù)值不變,直到視窗寬度達(dá)到另一個(gè)Breakpoint。需要特殊說(shuō)明的是,一行矩形中0~576(Min&Fixed)這個(gè)范圍的視窗寬度是固定的,也就是在該套響應(yīng)策略中,頁(yè)面最小響應(yīng)到576的頁(yè)面寬度,當(dāng)視窗到達(dá)這個(gè)寬度時(shí),瀏覽器會(huì)限制視窗進(jìn)一步縮小,因?yàn)楫?dāng)頁(yè)面寬度比它還小時(shí)已經(jīng)無(wú)法有效展示數(shù)據(jù)了,所以進(jìn)一步的縮放是毫無(wú)意義的。 左右布局響應(yīng)策略動(dòng)態(tài)演示 考慮到 gif 被壓縮后顯示效果不理想,所以我做了一小段視頻來(lái)幫助大家更好的理解上述響應(yīng)策略在實(shí)際頁(yè)面中如何發(fā)揮作用。視頻鏈接→https://v.qq.com/txp/iframe/player.html?vid=w0711l8yewc 左右布局響應(yīng)策略標(biāo)注 對(duì)于上下布局的后臺(tái)系統(tǒng)我們根據(jù)內(nèi)容區(qū)域(Container)寬度定義的不同方式,可以把它們分為兩類: 內(nèi)容區(qū)域定寬的后臺(tái)系統(tǒng)(Fixed-width Container) 內(nèi)容區(qū)域定寬是指內(nèi)容區(qū)域在每一組視窗寬度區(qū)間內(nèi),都會(huì)設(shè)定一個(gè)大值(Max-with),當(dāng)內(nèi)容區(qū)域?qū)挾刃∮诖笾禃r(shí),區(qū)域內(nèi)元素會(huì)響應(yīng)視窗的變化;達(dá)到大值后,內(nèi)容區(qū)域不再響應(yīng)視窗的變化,而是寬度保持該大寬度值不變,此時(shí)我們通過增加頁(yè)面兩側(cè)的margin值來(lái)響應(yīng)視窗的變化。Flex Margin 就是應(yīng)對(duì)此情況的動(dòng)態(tài)頁(yè)邊距。 上下布局響應(yīng)策略表(內(nèi)容區(qū)域定寬( Fixed-width Container )) 內(nèi)容區(qū)域?qū)挾攘魇剑╢luid-width Container) 內(nèi)容區(qū)域?qū)挾攘魇剑╢luid-width Container)的后臺(tái)系統(tǒng),它的內(nèi)容區(qū)域(Container)距離頁(yè)面兩側(cè)的頁(yè)邊距 Margin 是定值,因此視窗有多大內(nèi)容區(qū)域就展示多大。 六、問題 1. 后臺(tái)系統(tǒng)必須做成響應(yīng)式么? 并不是必須的,是否要做響應(yīng)式主要是根據(jù)后臺(tái)產(chǎn)品面向的用戶來(lái)定的。如果是公司內(nèi)部使用的系統(tǒng),且員工配備的桌面設(shè)備都是有統(tǒng)一的分辨率,就可以不做響應(yīng)式;如果是面向全網(wǎng)用戶的后臺(tái)產(chǎn)品(比如淘寶商家的后臺(tái)管理系統(tǒng),阿里云的控制臺(tái))或公司(部門)內(nèi)部的桌面設(shè)備并沒有統(tǒng)一的分辨率規(guī)格,那么就需要做成響應(yīng)式。當(dāng)然了,更實(shí)際的環(huán)境中是否做響應(yīng)式還有技術(shù)實(shí)現(xiàn)、時(shí)間、人員成本等各方面因素的考慮,有時(shí)為了盡快的讓業(yè)務(wù)運(yùn)營(yíng)起來(lái),后臺(tái)系統(tǒng)會(huì)做的比較「簡(jiǎn)陋」。
2. 為什么柵格系統(tǒng)沒有適配到移動(dòng)端的分享? 因?yàn)楹笈_(tái)管理系統(tǒng)的使用場(chǎng)景主要是工作時(shí)間在桌面設(shè)備上使用,由于龐雜的數(shù)據(jù)內(nèi)容在移動(dòng)設(shè)備上展示困難、操作不便,因而很少有公司會(huì)把后臺(tái)系統(tǒng)響應(yīng)到移動(dòng)端使用,所以我們今天說(shuō)的后臺(tái)響應(yīng)式僅針對(duì)桌面設(shè)備屏幕。
3. 對(duì)于iMac4k、5K這類超高分辨率的屏幕如何做響應(yīng)式設(shè)計(jì)? 對(duì)于左右布局的后臺(tái)系統(tǒng),實(shí)際上它是全屏展示的,也就是屏幕有多大就展示多大,因而 iMac 的響應(yīng)策略也是按照左右布局響應(yīng)策略表里的策略來(lái)響應(yīng)。 對(duì)于上下布局,內(nèi)容區(qū)域定寬的后臺(tái)系統(tǒng),iMac 的響應(yīng)策略使用上下布局響應(yīng)策略表里的策略來(lái)響應(yīng)即可; 對(duì)于內(nèi)容區(qū)域?qū)挾攘魇降暮笈_(tái)系統(tǒng),iMac 的響應(yīng)策略可以參考左右布局的響應(yīng)策略表來(lái)處理欄目、水槽的變化,頁(yè)邊距保持定值即可。
4. 在以8為原子單位的柵格中,Margin需要按8n的規(guī)律變化么? 能以8n的規(guī)律變化是的,如果無(wú)法做到也可以使用其它數(shù)值。Margin 是頁(yè)邊距,主要作用是通過留白的方式將頁(yè)面內(nèi)容區(qū)域與周圍環(huán)境隔離區(qū)分出來(lái),從而突出內(nèi)容;一般我們會(huì)優(yōu)先考慮內(nèi)容區(qū)域匹配8n的變化規(guī)律,安排完內(nèi)容區(qū)域后剩余的空間自然成為頁(yè)邊距(margin)。
5. 響應(yīng)策略制定的時(shí)機(jī)是什么?如何去制定?文中示例的策略表我可以借鑒套用么? 響應(yīng)策略表一般是在主要頁(yè)面設(shè)計(jì)完成,要交付開發(fā)實(shí)現(xiàn)的時(shí)候來(lái)跟開發(fā)一起商定。這塊需要注意兩點(diǎn): 如果開始設(shè)計(jì)時(shí)就已確定頁(yè)面是要具備響應(yīng)式的能力,那么開始設(shè)計(jì)時(shí)就去跟開發(fā)溝通,看他們現(xiàn)有技術(shù)是如何來(lái)做響應(yīng)式的,因?yàn)樗麄兒苡锌赡苁窃谟? Bootstrap、Foundation 這類組件庫(kù)來(lái)做開發(fā),而這些組件庫(kù)一般都有自己現(xiàn)成的響應(yīng)規(guī)則,這種情況下我們需要了解開發(fā)他們的規(guī)則,讓自己的設(shè)計(jì)匹配已有的策略。當(dāng)然了,如果他們的規(guī)則并不能很好滿足我們的業(yè)務(wù)需要,一般也是可以在這些組件的基礎(chǔ)上讓開發(fā)去修改調(diào)整的。 響應(yīng)策略表只是對(duì)響應(yīng)方式的結(jié)果的呈現(xiàn),而這個(gè)策略的制定事實(shí)上是從設(shè)計(jì)開始執(zhí)行時(shí)就要去考慮的,從我個(gè)人經(jīng)驗(yàn)來(lái)講,我一般會(huì)挑兩類頁(yè)面來(lái)做響應(yīng)策略的研究與適配,一個(gè)是控制臺(tái)(Dashboard)頁(yè)面,另一個(gè)是表單(Form)頁(yè)面。優(yōu)先規(guī)劃這兩個(gè)頁(yè)面的設(shè)計(jì),考慮他們?cè)诟鱾€(gè) Viewport 下如何布局如何展示如何縮放變化,并且跟開發(fā)溝通想法,聽取意見,制定初步的響應(yīng)計(jì)劃,當(dāng)這兩個(gè)頁(yè)面設(shè)計(jì)完成,就可以更大范圍的執(zhí)行設(shè)計(jì)。 文中示例的策略表是基于我自己項(xiàng)目經(jīng)驗(yàn)總結(jié)而來(lái),具有實(shí)際應(yīng)用價(jià)值,可以借鑒。但我更想做的是通過那個(gè)表希望跟大家分享一種與開發(fā)交流、溝通的方法和技巧。實(shí)際工作中我們并非一定要做出那么一個(gè)經(jīng)過精心設(shè)計(jì)細(xì)致考慮的表,我們可能會(huì)找張紙畫一畫給開發(fā)看就可以了,這塊的重點(diǎn)是如何把我們?cè)O(shè)計(jì)師的想法更可視化更直觀準(zhǔn)確的傳達(dá)給開發(fā)工程師。所以那張表是啟發(fā)而非標(biāo)準(zhǔn)。 △ 控制臺(tái)(Dashboard)頁(yè)面示例(素材圖片作者:Coderthemes) △ 表單(Form)頁(yè)面示例

新聞名稱:如何利用柵格系統(tǒng)做響應(yīng)式設(shè)計(jì)
文章來(lái)源:http://www.muchs.cn/news28/177478.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊(cè)、網(wǎng)站策劃、云服務(wù)器網(wǎng)站收錄、營(yíng)銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司