響應(yīng)式網(wǎng)站設(shè)計(jì)式網(wǎng)站設(shè)計(jì)(RWD)這個(gè)術(shù)語在網(wǎng)站領(lǐng)域越來越流行。當(dāng)你在Twitter、臉書或微博等社交媒體上搜索#響應(yīng)式網(wǎng)站設(shè)計(jì)時(shí)，你會(huì)發(fā)現(xiàn)很多內(nèi)容優(yōu)質(zhì)、泛泛而談的文章，這是新概念逐漸成熟的現(xiàn)象。如今RWD無處不在，甚至在雜志界，它也有點(diǎn)名氣。我一個(gè)做雜志出版商的朋友最近參加了一個(gè)會(huì)議，會(huì)上很多新興雜志的著名編輯都提到了未來網(wǎng)站發(fā)展的趨勢，談到了響應(yīng)式網(wǎng)頁設(shè)計(jì)。編輯可能不是網(wǎng)站建設(shè)的專業(yè)人士，但他們都知道“響應(yīng)式網(wǎng)站設(shè)計(jì)”(RWD)。
響應(yīng)式設(shè)計(jì)正在蓬勃發(fā)展，人們創(chuàng)建網(wǎng)站的方式已經(jīng)改變。隨著RWD成為網(wǎng)頁設(shè)計(jì)的一部分，網(wǎng)頁設(shè)計(jì)師的工作方式必須改變。因此，我們需要為響應(yīng)式網(wǎng)站設(shè)計(jì)建立一些準(zhǔn)則。
不要停留在“軟應(yīng)對”上。當(dāng)用戶要求你測試一個(gè)響應(yīng)式網(wǎng)站時(shí)，你會(huì)怎么做？更改窗口大小，觀察布局如何變化。在這種情況下，大多數(shù)設(shè)計(jì)師或開發(fā)者可能會(huì)使用手機(jī)或平板電腦訪問、旋轉(zhuǎn)顯示方向，或者測試頁面加載速度。這是因?yàn)樗麄冋於荚谡{(diào)整瀏覽器，很容易形成這種想法。但用戶是另一種存在。當(dāng)你作為用戶訪問時(shí)，你不會(huì)在意網(wǎng)站布局是否流暢。你只是希望能夠盡快找到你想要的信息。
所以在這里，我想告訴大家，響應(yīng)式網(wǎng)站設(shè)計(jì)不僅要注重版面的響應(yīng)性，還要注重網(wǎng)站內(nèi)容的選擇，不要僅僅停留在“軟響應(yīng)”上?！败涰憫?yīng)”是指網(wǎng)站的線性縮放，以及在不同屏幕上的大小變化。軟應(yīng)對遠(yuǎn)遠(yuǎn)不夠。在設(shè)計(jì)網(wǎng)站時(shí)，我們需要有一個(gè)核心，圍繞這個(gè)核心，我們可以根據(jù)不同屏幕上的功能加載更多內(nèi)容。以栗子為例。如果網(wǎng)站需要為IE7做一個(gè)手機(jī)元素(如App宣傳頁)，那么手機(jī)元素就是你需要重點(diǎn)關(guān)注的核心。好是圍繞手機(jī)元素設(shè)計(jì)屏幕或者其他元素，根據(jù)不同的屏幕進(jìn)行合理布局。
不要投機(jī)取巧。響應(yīng)式設(shè)計(jì)非常復(fù)雜。我們都希望有一些技巧或者方法可以讓它變得簡單一些，但是這個(gè)真的不存在，或者說還沒有出現(xiàn)。大多數(shù)負(fù)責(zé)開發(fā)響應(yīng)性的設(shè)計(jì)師仍然需要認(rèn)真負(fù)責(zé)，在交付新內(nèi)容或其他活動(dòng)時(shí)添加工作流。以我的一個(gè)朋友為例。首先，她用Photoshop做了一張與電腦兼容的設(shè)計(jì)圖。但是在完成了一些設(shè)計(jì)頁面之后，我想讓網(wǎng)站在平板電腦或者智能手機(jī)上看起來不錯(cuò)，所以我做了一些設(shè)計(jì)圖。但在把結(jié)果展示給用戶后，有些地方需要根據(jù)用戶的需求進(jìn)行創(chuàng)造性的調(diào)整，新的設(shè)計(jì)圖紙是不可避免的。這樣算下來，差不多有50個(gè)PSD文件。她花了很長時(shí)間來調(diào)整頁面布局。
如果增加了新的設(shè)計(jì)，就需要更多的時(shí)間，而且可能會(huì)造成前后框架或者布局的不一致。建議:好的處理方法之一是向客戶展示原型線框。這樣就只能談布局而不是按框圖設(shè)計(jì)了。ZURB的Foudation是制作線框的好工具。
擁抱變化，迎接挑戰(zhàn)。第一次構(gòu)建響應(yīng)式網(wǎng)站時(shí)。我只用了Photoshop和GoLive工具，現(xiàn)在至少要用六個(gè)。我仍然使用Photoshop來創(chuàng)建頁面中的圖形元素，但頁面中的其他設(shè)計(jì)元素主要使用Sublime Text 2，我使用iOS 6中包含的Safari瀏覽器開發(fā)者工具來查看制作的頁面元素。另外我用Codekit編譯預(yù)處理的CSS(比如LESS或者Sass)和版本控制工具Git設(shè)置命令行。
響應(yīng)式網(wǎng)頁設(shè)計(jì)意味著設(shè)計(jì)風(fēng)格的改變。與在Photoshop中繪制整個(gè)頁面相比，使用Samantha Warren的Style Tiles工具可以更清晰地表達(dá)視覺設(shè)計(jì)。通過設(shè)計(jì)一個(gè)視覺品牌和各種布局的網(wǎng)頁界面元素，你也可以根據(jù)布局直接改變設(shè)計(jì)來創(chuàng)建一個(gè)響應(yīng)式的網(wǎng)頁原型。
CSS預(yù)處理器對任何響應(yīng)式設(shè)計(jì)工作都有很大的幫助。簡單來說，預(yù)處理者可以降低網(wǎng)站建設(shè)的復(fù)雜度，減少CSS解釋過程中很多風(fēng)格的重復(fù)繼承。對于這個(gè)工具，我個(gè)人更喜歡SCSS。當(dāng)然少也是不錯(cuò)的選擇，它有更完善的文檔。
牢記響應(yīng)式設(shè)計(jì)的原則。網(wǎng)站應(yīng)該能夠訪問并為任何可以訪問互聯(lián)網(wǎng)的設(shè)備提供友好的體驗(yàn)，無論是固定設(shè)備還是移動(dòng)設(shè)備，無論屏幕是大是小?！倌贰げ{斯·李
HTML和CSS本身就是響應(yīng)式的。自HTML誕生以來，網(wǎng)站一直試圖變得更加靈活，以適應(yīng)所有可以訪問互聯(lián)網(wǎng)的硬件設(shè)備。并不是以前設(shè)計(jì)師和開發(fā)者傾向于固定的布局，現(xiàn)在變了。這是因?yàn)樵诰W(wǎng)站上強(qiáng)加固定的大小會(huì)限制它在不同設(shè)備上提供的用戶體驗(yàn)。

名稱欄目：響應(yīng)式設(shè)計(jì)的到來對網(wǎng)站設(shè)計(jì)師意味著什么？
標(biāo)題來源：http://jinyejixie.com/news/207759.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

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