來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計發(fā)布者：本站     時(shí)間：2021-12-23 11:12:19

響應式設計現在已經(jīng)成為網(wǎng)頁(yè)設計師學(xué)習的焦點(diǎn)。優(yōu)設哥發(fā)現群內有很多相關(guān)的討論了，這說(shuō)明我們平時(shí)接觸該類(lèi)案例越來(lái)越多。

你會(huì )漸漸發(fā)現，我們身邊越來(lái)越多的企業(yè)和客戶(hù)關(guān)注到響應式網(wǎng)站，作為勤奮的設計師，我們怎么能不對它進(jìn)行了解呢?

響應式網(wǎng)頁(yè)設計考慮到多平臺、多種屏幕尺寸的情況，能夠優(yōu)化多種設備的網(wǎng)絡(luò )瀏覽體驗。

當你不知道用戶(hù)使用什么設備，不知道用戶(hù)的屏幕尺寸時(shí)，若想達到較優(yōu)布局，可以采用響應式設計。

在進(jìn)行響應式設計時(shí)，要專(zhuān)門(mén)針對內容進(jìn)行設計，優(yōu)先考慮在不同環(huán)境下內容的適應性。

響應式網(wǎng)頁(yè)設計

過(guò)去，上網(wǎng)需要一臺電腦，一個(gè)貓。

現在呢，手機、平板、電視都可以上網(wǎng)。

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

Responsive Web Design, 由Ethan Marcotte編寫(xiě)， A Book Apart出版，對響應式設計的原則進(jìn)行了詳盡的闡述。

多種設備均能支持聯(lián)網(wǎng)，有利有弊：

好消息是，我們可以隨時(shí)隨地登入互聯(lián)網(wǎng)。

壞消息是，設計師的工作量成倍的增加了，而且用戶(hù)變得越來(lái)越挑剔，越來(lái)越不耐心。

在這種大環(huán)境下，響應式設計變成了主流。

響應式設計所帶來(lái)的挑戰

進(jìn)行響應式設計，挑戰有很多。

首先，設備種類(lèi)、屏幕尺寸多種多樣。小、中、大各種各樣。其次，倘若你是開(kāi)發(fā)者，你會(huì )明白從技術(shù)角度上，響應式設計實(shí)現起來(lái)也不容易。

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

mediaqueri.es 提供了很多優(yōu)秀的響應式設計案例

在任何項目上進(jìn)行響應式設計時(shí)，都要優(yōu)先考慮內容，考慮到內容與整體設計的結合，考慮到內容是怎樣在頁(yè)面中表現的。你需要觀(guān)察不同元素在頁(yè)面中是怎樣緊密結合、協(xié)同工作，從而保持一致而又整體的風(fēng)格的。

在這種尺寸下，元素可以這樣布局，進(jìn)行響應式設計時(shí)，你還需要琢磨琢磨其他尺寸的布局。如何將大尺寸頁(yè)面轉換到小尺寸頁(yè)面?如何將小尺寸頁(yè)面轉換到大尺寸頁(yè)面?如何保證多種尺寸下瀏覽體驗的一致性?

如何說(shuō)服客戶(hù)使用響應式設計?

網(wǎng)頁(yè)設計是一個(gè)時(shí)效性很強的行業(yè)，我們需要緊跟趨勢潮流，不斷學(xué)習。響應式設計就是這個(gè)時(shí)代最值得學(xué)習、時(shí)間的趨勢。

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

Greenbelt Festival 是一例非常值得學(xué)習的響應式網(wǎng)頁(yè)設計，圖像來(lái)源mediaqueri.es.

網(wǎng)絡(luò )術(shù)語(yǔ)真是越來(lái)越流行了，現在即便是客戶(hù)，也略知一二，很多客戶(hù)對設計的了解也不淺。那么怎么說(shuō)服客戶(hù)呢?下面我將講一點(diǎn)和客戶(hù)溝通的技巧，讓客戶(hù)接受響應式設計(相應的，工錢(qián)你懂的)。

投其所好

在任何項目的開(kāi)始階段，都要明白、了解、分析客戶(hù)的需求。

在滿(mǎn)足客戶(hù)預期的基礎上，盡量讓客戶(hù)能夠完全的理解你的設計。

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

一款美麗的響應式設計Modern Green Home ，圖像來(lái)源 mediaqueri.es.

你要知道客戶(hù)想要什么。在你的大腦中轉換成術(shù)語(yǔ)后，再用平易近人的語(yǔ)言講出來(lái)。

例如，客戶(hù)可能會(huì )說(shuō)他想要讓網(wǎng)站在”iPhone、iPad上都能良好運作”。這種情況下，我一般會(huì )說(shuō)”好啊——那么響應式技術(shù)就能實(shí)現，能夠在任何設備上良好運作，而不僅僅是iPad和iPhone”

如果你的客戶(hù)稍微懂一點(diǎn)，那么估計合作會(huì )很愉快。

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

Stuff & Nonsense 網(wǎng)站是響應式設計的有先例，根據屏幕尺寸的不同，選擇不同的插畫(huà)，蠻有趣，圖像來(lái)源 mediaqueri.es.

可以化點(diǎn)時(shí)間來(lái)給客戶(hù)做科普，這樣客戶(hù)能更好的理解你的作品，溝通起來(lái)就很流暢。

響應式設計一些技術(shù)和建議

那么怎么打造響應式設計呢?

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

The Great Discontent 的訪(fǎng)談很知名，同時(shí)也是優(yōu)秀的響應式設計案例，圖像來(lái)源mediaqueri.es.

有沒(méi)有最佳答案?答案是沒(méi)有最佳答案，每個(gè)人的開(kāi)發(fā)流程、設計流程都不一樣。

不過(guò)呢，還是有幾種方法值得推薦，以及一些建議，希望其中一些能夠對你有所幫助，你可以汲取幾條，并進(jìn)行結合。要注意多實(shí)驗，多嘗試不同的方法，看看哪種最適合。

利用圖像工具設計

利用PS和其它工具創(chuàng )建一個(gè)固定寬度的模型，這種方法可能是大多數人設計網(wǎng)站的方法。但是依然有效。利用圖像工具能夠更直觀(guān)的布局。

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

UX London 2013 伸縮自如，非常優(yōu)雅的響應式設計，圖像來(lái)源 mediaqueri.es.

但是不要太死板，為每一種尺寸都單獨的設計模型，否則你肯定會(huì )因耗時(shí)太長(cháng)而抓狂?？梢岳镁€(xiàn)框圖，不必過(guò)于精細，多多思考一下內容、尺寸、布局三者變化關(guān)系，怎么整個(gè)?怎么改變?

哪里變動(dòng)較小?哪里變動(dòng)較大?在開(kāi)始編碼前，這些都要了然于胸。

在瀏覽器里進(jìn)行設計

這個(gè)有一點(diǎn)爭議性。最近網(wǎng)上關(guān)于此話(huà)題的爭論很多

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

WWF 的響應式設計，圖像來(lái)源mediaqueri.es.

在瀏覽器內進(jìn)行設計，指的是當完成線(xiàn)框圖階段之后，直入瀏覽器，利用各種在線(xiàn)工具，開(kāi)始設計。而不用任何圖像工具。

如果你能有效的運用在線(xiàn)工具，那么這種發(fā)很好用。

但是很多設計師認為這樣設計會(huì )限制創(chuàng )意，無(wú)法打造更優(yōu)秀的視覺(jué)。

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

The Next Web 的網(wǎng)站，即便在小屏幕上，內容組織也依然有序，圖像來(lái)源mediaqueri.es.

但是對開(kāi)發(fā)者來(lái)說(shuō)，他們更習慣使用代碼，無(wú)疑，瀏覽器式設計對他們更合適。

案例：

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

CSS Tricks

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

微軟

在瀏覽器中做決定

這是個(gè)人最?lèi)?ài)的一種方法?？梢栽趫D像軟件里完成一點(diǎn)工作，利用在線(xiàn)工具和瀏覽器再完成一點(diǎn)工作。

而且我認為，想要檢驗網(wǎng)頁(yè)設計的優(yōu)劣，必須要在瀏覽器里檢驗。

而且字體經(jīng)常在瀏覽器中發(fā)生變化，利用瀏覽器檢查設計，是很好的辦法，能幫助你迅速改正設計。

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

Microsoft 的響應式設計蠻有意思：利用圖像的裁剪和分割，在不同的設備中體現差不多的效果。圖像來(lái)源f mediaqueri.es.

而且這種辦法更加靈活，既能用圖像工具優(yōu)化設計，而且還能用瀏覽器更好的檢查設計，查看結果。

內容優(yōu)先, 移動(dòng)優(yōu)先還是沿襲桌面?

首先要記住，無(wú)論怎樣，內容有限。內容是設計的核心，是用戶(hù)瀏覽的主題。

來(lái)和小伙伴一起學(xué)習響應式網(wǎng)頁(yè)設計,PS教程,

Philip House 是個(gè)從大到小、沿襲桌面的設計，很有創(chuàng )意，圖像來(lái)源 mediaqueri.es.

其次，不管你的設計是移動(dòng)優(yōu)先(從小尺寸布局開(kāi)始，逐漸擴大尺寸)也好，還是沿襲桌面(從全尺寸桌面布局開(kāi)始設計，逐漸縮小)也罷，一切取決于你的習慣和具體情況。