網(wǎng)頁(yè)設(shè)計(jì)失去了靈魂嗎？這是由于響應(yīng)式設(shè)計(jì)嗎？我的朋友兼同事諾亞斯托克斯在沈陽(yáng)網(wǎng)站建設(shè)行業(yè)提出了這些問(wèn)題并不得不說(shuō)這有點(diǎn)聳人聽(tīng)聞。畢竟，響應(yīng)式網(wǎng)頁(yè)不僅允許我們通過(guò)日益豐富的連接設(shè)備瀏覽網(wǎng)頁(yè)，而且還可以獲得樂(lè)趣。

作為一名設(shè)計(jì)師，我們的任務(wù)是解決問(wèn)題，這可能遠(yuǎn)遠(yuǎn)超過(guò)其他事情。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是創(chuàng)建適應(yīng)各種設(shè)備的虛擬體驗(yàn)的絕佳解決方案。但仍有許多問(wèn)題需要解決，特別是如何使各種內(nèi)容變得有趣和迷人。純文本頁(yè)面可以是漂亮的博客文章，大量不相關(guān)的JPG圖像可以是作品的集合。

那么問(wèn)題就變成了：我們可以同時(shí)實(shí)現(xiàn)這兩個(gè)目標(biāo)嗎？

我們得到了什么

毫無(wú)疑問(wèn)，互聯(lián)網(wǎng)已經(jīng)成為一種審美吸引力。基于可靠的網(wǎng)格布局，構(gòu)建簡(jiǎn)單而迷人的網(wǎng)站已成為標(biāo)準(zhǔn)。互聯(lián)網(wǎng)的蹂躪已經(jīng)完成，以框架和活動(dòng)網(wǎng)格形式出現(xiàn)的法律和秩序已經(jīng)占領(lǐng)了這片土地并開(kāi)始了和平統(tǒng)治。

所有這一切都是好事。簡(jiǎn)單而迷人的網(wǎng)站，優(yōu)勢(shì)明顯且豐富：

熟悉，便于用戶瀏覽（正確操作）。原型（相對(duì)）簡(jiǎn)單快速。高標(biāo)準(zhǔn)化的站點(diǎn)施工技術(shù)標(biāo)準(zhǔn)（裝配線取代了工匠）?？焖俨季挚梢怨?jié)省大量開(kāi)銷(xiāo)（可以肯定的是，它會(huì)傳遞給消費(fèi)者）。嚴(yán)格的網(wǎng)格布局促進(jìn)了響應(yīng)式設(shè)計(jì)（它在很大程度上依賴于極簡(jiǎn)主義的布局趨勢(shì)）。

這樣的網(wǎng)頁(yè)設(shè)計(jì)畫(huà)廊，展示了網(wǎng)站，有數(shù)十萬(wàn)個(gè)簡(jiǎn)單而迷人的標(biāo)準(zhǔn)。

毫不夸張地說(shuō)，標(biāo)準(zhǔn)化及其相關(guān)技術(shù)確實(shí)具有重要意義。許多個(gè)人和小公司通過(guò)簡(jiǎn)單，迷人（但不是唯一的）網(wǎng)站與世界分享他們的品牌，從中受益。但這只是一個(gè)方面。

我們失去了什么

考慮到個(gè)人行為，今天的網(wǎng)站看起來(lái)基本上很棒。拿一個(gè)鮮為人知的設(shè)計(jì)師系列網(wǎng)站，與十年前著名的設(shè)計(jì)機(jī)構(gòu)網(wǎng)站相比，你甚至承認(rèn)我們?cè)?a href=http://www.dairuiya.com target=_blank class=infotextkey>網(wǎng)頁(yè)設(shè)計(jì)方面做得更好。然而，環(huán)顧四周，很容易得出結(jié)論，一切似乎都被同化了。

設(shè)計(jì)師是否會(huì)失去他們的開(kāi)拓精神？是否以犧牲創(chuàng)造力為代價(jià)？在回答這些問(wèn)題之前，讓我們先來(lái)看一下導(dǎo)致今天網(wǎng)頁(yè)設(shè)計(jì)缺乏多樣性的原因。

為什么網(wǎng)站看起來(lái)相同

看看今天的網(wǎng)站，同化背后的力量是什么？誰(shuí)應(yīng)該怪？事實(shí)證明，它不能簡(jiǎn)單地歸因于工具或方法。響應(yīng)式設(shè)計(jì)可能有所幫助，但這只是眾多因素中的一個(gè)。這是一些嫌疑人。

布局

沈陽(yáng)網(wǎng)站建設(shè)認(rèn)為有限的布局創(chuàng)造力是網(wǎng)站缺乏多樣性并且也很明顯的原因之一。在抽象顏色，動(dòng)畫(huà)，視覺(jué)上不良滾動(dòng)等之后，您會(huì)注意到一些基本的頁(yè)面布局原則。在這5種布局上稍微調(diào)整了多少網(wǎng)站？

5個(gè)常見(jiàn)的網(wǎng)站布局。

諾亞感嘆“盒子里有所有的東西”，這意味著這一點(diǎn)。我們似乎停滯不前，獨(dú)特的布局已成為一種迷失的藝術(shù)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

過(guò)去，您可以確保所有網(wǎng)站訪問(wèn)者都在低分辨率桌面屏幕上瀏覽。今天，網(wǎng)站在各種尺寸和分辨率下表現(xiàn)都很好，這不是奢侈品，而是必需品。寬度活躍，可擴(kuò)展的基本網(wǎng)格系統(tǒng)使響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)比休閑布局更容易處理。

幀

Web設(shè)計(jì)框架可以加速設(shè)計(jì)和開(kāi)發(fā)過(guò)程。對(duì)于許多人來(lái)說(shuō)，它們是構(gòu)建跨瀏覽器響應(yīng)式網(wǎng)頁(yè)的快速而安全的方式。作為獎(jiǎng)勵(lì)，他們還注意保持內(nèi)容簡(jiǎn)單，從按鈕到表單，涵蓋所有常見(jiàn)元素。諸如Bootstrap和Foundation之類的工具非常受歡迎，導(dǎo)致成千上萬(wàn)的網(wǎng)頁(yè)設(shè)計(jì)師在他們的每個(gè)項(xiàng)目中使用完全相同的代碼庫(kù)，布局甚至美學(xué)。

原型設(shè)計(jì)工具和設(shè)計(jì)流程

即使在從頭開(kāi)始的過(guò)程中，設(shè)計(jì)過(guò)程也在有意識(shí)地抑制創(chuàng)造力。大多數(shù)原型制作工具都鼓勵(lì)甚至強(qiáng)迫您使用標(biāo)準(zhǔn)化的盒子元素，嚴(yán)格遵循Web格式的布局。

許多原型設(shè)計(jì)工具鼓勵(lì)使用常規(guī)的網(wǎng)格布局結(jié)構(gòu)。

高清免費(fèi)照片和圖片

獲得漂亮的免費(fèi)設(shè)計(jì)資源前所未有的輕松。設(shè)計(jì)人員方便而實(shí)惠，蜂擁至免費(fèi)照片網(wǎng)站，從一個(gè)小的（但正在增長(zhǎng)的）池中獲取相同的資源。

兩張免費(fèi)攝影圖片。

在過(guò)去兩年中，您在其中一張照片（或兩張照片）中看到了多少網(wǎng)站？如果你經(jīng)常瀏覽網(wǎng)站，我打賭有幾十個(gè)。

鄉(xiāng)村風(fēng)格和Jigglist;大學(xué)作文家伙忙著賺錢(qián)

它不僅僅是照片，還有圖標(biāo)，字體，設(shè)計(jì)模式等等。好消息是沒(méi)有任何預(yù)算的設(shè)計(jì)師可以制作出漂亮的網(wǎng)站;嚴(yán)重的是，所有其他設(shè)計(jì)師使用相同的資源進(jìn)行相同的設(shè)計(jì)。

設(shè)計(jì)趨勢(shì)

對(duì)于一些設(shè)計(jì)師來(lái)說(shuō)，“趨勢(shì)”是一個(gè)貶義詞。但它不應(yīng)該是一個(gè)貶義詞。尋找20世紀(jì)的時(shí)代，看看這十年的設(shè)計(jì)趨勢(shì)。你會(huì)發(fā)現(xiàn)它真的很吸引人。它賦予了這個(gè)時(shí)代獨(dú)特的風(fēng)格和個(gè)性，往往反映了整個(gè)文化環(huán)境。即使你看不到它，它也會(huì)發(fā)生在你的工作中。你看到和體驗(yàn)的一切都會(huì)影響你的行為，互聯(lián)網(wǎng)已經(jīng)以前所未有的方式放大了這種效果。引領(lǐng)眾多設(shè)計(jì)師從同樣的資源中獲取靈感并追逐同一趨勢(shì)。

我們的設(shè)計(jì)師

上面列出的每個(gè)工具和資源都非常有價(jià)值。他們可以簡(jiǎn)化工作，為更多人打開(kāi)網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)之門(mén)，為客戶節(jié)省資金。我不會(huì)不加區(qū)別地使用它們，我會(huì)仔細(xì)選擇它們。如果你真的想找到破壞網(wǎng)頁(yè)設(shè)計(jì)多樣性的罪魁禍?zhǔn)?，我?huì)自己動(dòng)手，這就是我。我不認(rèn)為每個(gè)項(xiàng)目都應(yīng)該有獨(dú)特的設(shè)計(jì)。我想為嘗試有趣設(shè)計(jì)的設(shè)計(jì)師脫掉帽子。

重要的是要知道您仍然可以使用所有這些資源創(chuàng)建獨(dú)特的設(shè)計(jì)。這一切都取決于您如何使用這些工具。

如何挑戰(zhàn)現(xiàn)狀

你的網(wǎng)站是否具有獨(dú)特的設(shè)計(jì)，現(xiàn)在你必須考慮到一些。也許你不關(guān)心這個(gè)——這很好。但是如果你想打破標(biāo)準(zhǔn)的工作流程，這里有一些可以幫助你實(shí)現(xiàn)它的概念，而一些網(wǎng)站可能是一個(gè)很好的例子。

奇怪的布局

關(guān)閉您的原型制作工具，取出筆和紙，并考慮如何創(chuàng)建一個(gè)有趣和有用的布局，這是在您以前的例行程序之外。

階段雜志

Phases Magazine是布局大膽突破的一個(gè)很好的例子。它還有一個(gè)盒子——，它有一個(gè)網(wǎng)格——，但它們以某種方式創(chuàng)造了一種與標(biāo)準(zhǔn)網(wǎng)站完全不同的體驗(yàn)（截圖不會(huì)讓你感覺(jué)良好，請(qǐng)務(wù)必自己打開(kāi)它）。如果你看到這種感覺(jué)，“哇，這太奇怪了”，太好了！他們想要的是這種效果。有些人會(huì)喜歡它，有些人會(huì)討厭它，但我喜歡的是他們?cè)噲D做出一些改變。

Phases Magazine使用非常規(guī)網(wǎng)格。

不幸的是，這個(gè)網(wǎng)站的整體體驗(yàn)非常糟糕。有不必要的滾動(dòng)，表面是響應(yīng)的，但在某些尺寸上它是非?；靵y的。

Phases Magazine的布局在小屏幕上完全搞砸了。

好奇的空間

這個(gè)概念有一個(gè)更好的應(yīng)用案例，Curious Space。

好奇空間的布局。

這里的網(wǎng)格也有一些自然和隨意的感覺(jué)，但滾動(dòng)功能是常規(guī)的，響應(yīng)斷點(diǎn)很好。

Curious Space適應(yīng)各種不同的設(shè)備。

當(dāng)你操作這個(gè)網(wǎng)站時(shí)，你會(huì)發(fā)現(xiàn)很多很好的小設(shè)計(jì)細(xì)節(jié)。例如，鼠標(biāo)懸停會(huì)影響圖像的堆疊順序。

鼠標(biāo)懸停會(huì)將內(nèi)容帶到前面。

此外，滾動(dòng)時(shí)有一點(diǎn)樂(lè)趣，但至少它不會(huì)干擾操作，它也匹配網(wǎng)站的視覺(jué)主題?；諛?biāo)以一堆令人困惑的字母開(kāi)頭。當(dāng)頁(yè)面滾動(dòng)時(shí)，它們各自歸位并在導(dǎo)航欄中形成“好奇空間”。

通過(guò)滾動(dòng)，徽標(biāo)的字母都是歸位的。