Godzilla. 2018-10-16 網(wǎng)站建設(shè)

分享現(xiàn)代國(guó)外響應(yīng)式設(shè)計(jì)的卓越典范

隨著時(shí)間的推移，響應(yīng)式設(shè)計(jì)已經(jīng)非常成熟。一開始，它只是提供適應(yīng)不同屏幕的東西 - 即使它不是那么好。但現(xiàn)代的響應(yīng)式設(shè)計(jì)釋放了大量的創(chuàng)造力。許多設(shè)計(jì)師沒(méi)有將小屏幕視為負(fù)擔(dān)，而是尋找新的方法來(lái)迎接創(chuàng)造具有美感和功能的東西的挑戰(zhàn)。

　　有了這個(gè)既定的歷史，在結(jié)合之前對(duì)上海自適應(yīng)網(wǎng)站建設(shè)的優(yōu)缺點(diǎn)分析，我們認(rèn)為看一些真正處于響應(yīng)式設(shè)計(jì)前沿的網(wǎng)站會(huì)很有趣。

　　在這里，他們是完整的響應(yīng)視圖和他們帶到桌面的一些想法（或者我應(yīng)該說(shuō)，平板電腦？）：

　　1.華盛頓郵報(bào)

　　響應(yīng)式設(shè)計(jì)面臨的巨大挑戰(zhàn)之一就是占用內(nèi)容豐富的網(wǎng)站并使其在較小的屏幕上運(yùn)行。 “華盛頓郵報(bào)”在充分利用屏幕房地產(chǎn)方面做得非常出色。

　　雖然桌面版本利用了多列網(wǎng)格，但平板電腦（人像）和手機(jī)版本可以很好地應(yīng)對(duì)壓縮內(nèi)容的挑戰(zhàn)。小屏幕上的樣式簡(jiǎn)單滑出式標(biāo)題導(dǎo)航因其易用性而受到贊揚(yáng)，這種體驗(yàn)主要針對(duì)移動(dòng)設(shè)備進(jìn)行。

　　2.99U

　　99U是Adobe的創(chuàng)意專業(yè)人士在線雜志。喜歡這個(gè)網(wǎng)站的一個(gè)方面是它在任何屏幕尺寸上的布局都非常簡(jiǎn)單。

　　使用淺色背景和大型黑色排版使得從桌面到移動(dòng)設(shè)備都易于閱讀。一個(gè)獨(dú)特的功能是，在移動(dòng)設(shè)備上，網(wǎng)站的頁(yè)腳實(shí)際上隱藏在漢堡菜單中。這個(gè)小技巧可以節(jié)省一些空間并保留它以保持對(duì)內(nèi)容的關(guān)注。

　　3.VOX

　　Vox是一個(gè)新聞網(wǎng)站，采用移動(dòng)導(dǎo)航的不同路線。

　　標(biāo)準(zhǔn)文本導(dǎo)航欄不再是無(wú)處不在的漢堡菜單，而是隨著屏幕變小而縮小。但是，不是試圖在一個(gè)小空間中擠壓幾個(gè)項(xiàng)目，而是逐漸從菜單中刪除類別，并將其隱藏在名為“更多”的下拉菜單中。

　　4.Etsy

　　也許沒(méi)有人比Etsy更好地為他們的用戶設(shè)計(jì)。狡猾的市場(chǎng)也做出了正確的響應(yīng)。移動(dòng)亮點(diǎn)中的標(biāo)題是以極其清晰簡(jiǎn)潔的方式為您提供所有基礎(chǔ)知識(shí)（徽標(biāo)，銷售鏈接，登錄和購(gòu)物車圖標(biāo)）。

　　他們的分類商店部分從多列照片卡轉(zhuǎn)換為干凈的垂直圖標(biāo)菜單。這是工作中漸進(jìn)式增強(qiáng)的一個(gè)很好的例子。

　　5.肯德基

　　肯德基是一個(gè)很好的雞肉供應(yīng)商，也在他們的網(wǎng)站上做了一些出色的工作。

　　用戶體驗(yàn)在不同設(shè)備和屏幕尺寸之間非常一致。在所有視口上同時(shí)使用漢堡菜單和水平滾動(dòng)也意味著用戶將確切知道該做什么，無(wú)論他們用什么來(lái)瀏覽網(wǎng)站。

　　6.本田

　　作為眾多產(chǎn)品的制造商，本田擁有多個(gè)產(chǎn)品線和用戶可能感興趣的品牌。他們?cè)诿總€(gè)交替橫幅中使用顏色使得找到你想要的東西變得非常簡(jiǎn)單（在平板電腦和手機(jī)上看起來(lái)特別酷）。

　　同樣，這是一個(gè)在不同視口上帶來(lái)非常相似體驗(yàn)的網(wǎng)站。

　　7.The National

　　獨(dú)立搖滾樂(lè)國(guó)家大都會(huì)充分利用屏幕房地產(chǎn)。實(shí)際上，他們的網(wǎng)格式新聞和信息布局橫跨高清屏幕的整個(gè)寬度。

　　這種類型的布局非常適合在頁(yè)面寬度上全力以赴。較小的屏幕被視為類似的氛圍，新聞項(xiàng)目并排列出并且仍然足夠容易閱讀。該網(wǎng)站提醒您，響應(yīng)式設(shè)計(jì)還包括利用更高的屏幕分辨率，而不僅僅是確保所有內(nèi)容都適合較小的分辨率。

　　最后，響應(yīng)革命

　　看看我們上面提到的網(wǎng)站，它們都不是特別具有革命性的。但每個(gè)人都有自己有趣的技術(shù)和理念，以確定響應(yīng)式設(shè)計(jì)應(yīng)該如何工作（更不用說(shuō)要達(dá)到目標(biāo)時(shí)需要克服的許多挑戰(zhàn)）。它們可能不是革命性的，但它們肯定是革命的一部分。

下一篇：域名注冊(cè)還有哪些你不知道的秘密？ 上一篇：如何巧妙地運(yùn)用顏色來(lái)創(chuàng)建優(yōu)秀的UI界面（一）