午夜国产福利在线观看网_日韩真人一级毛片在线_国产产在线精品亚洲aavv_久草手机在线视频_免费看又黄又爽又猛的视频软件_万部毛片免费福利在线_韩漫无遮挡久久免费网站_青柠在线影院观看日本_国产高清亚洲精品超碰_国产真人毛片爱做a级毛枇

對網(wǎng)站設(shè)計(jì)師來說，響應(yīng)式設(shè)計(jì)的到來究竟意味著什么？

  人氣：2476   發(fā)布時間：2017-11-21 18:01:29 【大 中 小】

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

       響應(yīng)式網(wǎng)站設(shè)計(jì)(RWD)這個術(shù)語在網(wǎng)站領(lǐng)域越來越流行，這一點(diǎn)顯而易見。當(dāng)你在社交媒體如Twitter、Facebook或微博上等搜索#響應(yīng)式網(wǎng)站設(shè)計(jì)時，你會找到很多文章，有優(yōu)質(zhì)的內(nèi)容，也有泛泛而論的空談，這就是新概念逐漸成熟的一種現(xiàn)象。曾經(jīng)Ajax（一種網(wǎng)頁開發(fā)技術(shù)）也是如此，現(xiàn)在卻幾乎無人問津了。

       RWD如今到處都是，就連在雜志界也有點(diǎn)名氣。我有一個做雜志出版的朋友最近參加了一個會議，會議上很多有名的新興雜志編輯都提到了未來網(wǎng)站發(fā)展的趨勢，談到了響應(yīng)式Web設(shè)計(jì)。雜志編輯可能在網(wǎng)站建設(shè)方面并不專業(yè)，但是也都知道這個詞“響應(yīng)式網(wǎng)站設(shè)計(jì)”(RWD)。
       響應(yīng)式設(shè)計(jì)蒸蒸日上，人們創(chuàng)建網(wǎng)站的方式已經(jīng)改變。而且隨著RWD成為Web設(shè)計(jì)的常規(guī)部分，網(wǎng)頁設(shè)計(jì)師的工作方式也要做出改變。因此我們需要確立一些關(guān)于響應(yīng)式網(wǎng)站設(shè)計(jì)的準(zhǔn)則。

1. 不要停留在“軟式響應(yīng)"
       當(dāng)用戶要求你對某個響應(yīng)式網(wǎng)站進(jìn)行測試時，你會怎么做？改變窗口大小，觀察布局怎么變化？在這種情況下，大部分設(shè)計(jì)或開發(fā)人員可能就會使用手機(jī)或者平板訪問，旋轉(zhuǎn)顯示方向，或測試頁面加載速度。這是因?yàn)樗麄冋於荚谡{(diào)整瀏覽器，很容易形成這種想法。但是用戶是另一種存在，當(dāng)你作為用戶進(jìn)行訪問時，你不會關(guān)心網(wǎng)站布局是否流暢，你只希望能夠盡快找到自己想要的信息。

       因此在這里，我想要告訴大家響應(yīng)式網(wǎng)站設(shè)計(jì)不僅僅需要關(guān)注布局的響應(yīng)式，還應(yīng)留意網(wǎng)站內(nèi)容的取舍，不要只停留在"軟式響應(yīng)"上?！败浭巾憫?yīng)”是指網(wǎng)站的線性縮放，在不同尺寸屏幕上的大小的改變。軟式響應(yīng)遠(yuǎn)遠(yuǎn)不夠，設(shè)計(jì)網(wǎng)站時我們還需要有一個核心，在不同的屏幕上圍繞這個核心按照功能適量加載更多內(nèi)容。舉個栗子來說，假如網(wǎng)站需要為IE7制作一個手機(jī)元素(如App宣傳頁面)，那么手機(jī)元素就是你需要重點(diǎn)關(guān)注的核心，最好圍繞手機(jī)元素對屏幕或其他元素進(jìn)行設(shè)計(jì)，根據(jù)不同的屏幕作出合理的布局。


2. 不要投機(jī)取巧

       響應(yīng)式設(shè)計(jì)很復(fù)雜。我們都希望這有一些能夠讓它更加簡單的技巧或方法，但這真的沒有，或者說目前還沒有出現(xiàn)。大多數(shù)負(fù)責(zé)開發(fā)響應(yīng)式的設(shè)計(jì)師還是需要兢兢業(yè)業(yè)，在做新內(nèi)容交付或是其他活動時做好工作流程的添加。以我的一個朋友為例。她是先在Photoshop里做了一個符合PC端的設(shè)計(jì)圖。但完成一些設(shè)計(jì)頁面以后，又想要網(wǎng)站在平板或智能手機(jī)上呈現(xiàn)良好，因此又制作了一些設(shè)計(jì)圖。不過向用戶展示成果后，一些地方需要根據(jù)用戶需求做出創(chuàng)意性的調(diào)整，新的設(shè)計(jì)圖又是不可避免的了。這樣一算，已經(jīng)差不多有50個PSD文件了。她需要花不少時間來調(diào)整頁面布局。


       如果是添加新設(shè)計(jì)，就更會消耗時間，還有可能造成前后框架或布局的不一致。建議：最好的處理方式之一就是向客戶展示原型線框圖。這樣就可以照著框圖只講布局不談設(shè)計(jì)。Foudation by ZURB是很一種比較好的線框圖制作工具。

3. 擁抱變化,迎接挑戰(zhàn)
       在第一次構(gòu)建響應(yīng)式網(wǎng)站時。我僅使用了Photoshop和GoLive兩個工具，但現(xiàn)在卻至少要用6個。我仍然使用Photoshop創(chuàng)建頁面中的圖形元素，但頁面中的其它設(shè)計(jì)元素主要使用Sublime Text 2，并且使用iOS 6自帶的Safari瀏覽器開發(fā)者工具查看生產(chǎn)的頁面元素。另外，我還使用Codekit來編譯pre-processed CSS（比如LESS或Sass），使用版本控制工具Git設(shè)置命令行。

       響應(yīng)式Web設(shè)計(jì)意味著設(shè)計(jì)方式的改變。相對于在Photoshop中畫出整個頁面，使用Samantha Warren’s Style Tiles工具可以更清晰的表達(dá)視覺設(shè)計(jì)。通過設(shè)計(jì)一個Web在多種布局下的視覺品牌和界面元素，你還可以根據(jù)布局直接改變設(shè)計(jì)來創(chuàng)建響應(yīng)式的Web原型。


       CSS pre-processors對于任何響應(yīng)式設(shè)計(jì)的工作都有巨大的幫助。簡單的說，pre-processors可以降低網(wǎng)站構(gòu)建的復(fù)雜性并且在CSS解釋執(zhí)行的過程中減少了許多樣式重復(fù)繼承的工作。針對這方面的工具，我個人更喜歡SCSS，當(dāng)然LESS也是一個很好的選擇，它還有更加完善的文檔。

4. 牢記響應(yīng)式設(shè)計(jì)原則

       網(wǎng)站應(yīng)該能夠?yàn)槿魏慰稍L問互聯(lián)網(wǎng)的設(shè)備訪問并提供友好的體驗(yàn)，無論是固定設(shè)備還是移動設(shè)備、不管屏幕是大還是小?！猅im Berners Lee


       HTML和CSS本身就是響應(yīng)式的。自HTML誕生以來，網(wǎng)站就試圖變得更加靈活，來適應(yīng)一切可以訪問互聯(lián)網(wǎng)的硬件設(shè)備。并不是說以前設(shè)計(jì)者和開發(fā)者趨向于固定的布局，現(xiàn)在卻改變了，而是因?yàn)榻o網(wǎng)站強(qiáng)制加上固定的大小會限制它在不同設(shè)備端提供的用戶體驗(yàn)。

總結(jié)
       響應(yīng)式網(wǎng)站設(shè)計(jì)是一個將你如何表達(dá)抽象為你表達(dá)什么的設(shè)計(jì)原則，例如，NPR最近遷移到一個API驅(qū)動的內(nèi)容模型中，通過使用API提供相應(yīng)的內(nèi)容方式，NPR可以在app和網(wǎng)站上形成一致的表現(xiàn)，唯一需要修改只有表現(xiàn)層。
       這就是響應(yīng)式網(wǎng)站設(shè)計(jì)具備的一切，弄清楚設(shè)計(jì)師想表達(dá)什么，并且通過它驅(qū)動實(shí)現(xiàn)如何表達(dá)，設(shè)計(jì)出迎合用戶需求并賞心悅目的效果。
       這就是響應(yīng)式網(wǎng)站設(shè)計(jì)具備的一切，以用戶為先。創(chuàng)建為用戶服務(wù)的網(wǎng)站，保證用戶在任何情況下都可以輕松實(shí)現(xiàn)內(nèi)容的訪問。做一個可以適應(yīng)小屏幕的網(wǎng)站僅僅是個開始。
[返回]

免費(fèi)咨詢

  • 張小姐： QQ
  • 姚經(jīng)理： QQ
  • 趙先生： QQ
  • 16602060624