優(yōu)秀的網(wǎng)頁項(xiàng)目，不會(huì)單靠好的設(shè)計(jì)或是開發(fā)就能成功——它也需要設(shè)計(jì)師與開發(fā)者的溝通與協(xié)作。我看過相當(dāng)多的設(shè)計(jì)師與開發(fā)者由于缺乏溝通而糟蹋了項(xiàng)目，結(jié)果導(dǎo)致關(guān)系惡化。我也見過很多初學(xué)的設(shè)計(jì)師和開發(fā)者，通過團(tuán)隊(duì)協(xié)作創(chuàng)造出驚人的結(jié)果。他們避開了潛在陷阱，及時(shí)發(fā)布項(xiàng)目，并且迅速迭代。這種協(xié)作不僅對(duì)項(xiàng)目有益——善于溝通協(xié)作的團(tuán)隊(duì)也是一個(gè)更快樂的團(tuán)隊(duì)。如果任務(wù)并沒有如愿進(jìn)行，也會(huì)有更少的誤解與緊張。

設(shè)計(jì)與開發(fā)的協(xié)作，在響應(yīng)式網(wǎng)頁設(shè)計(jì)(RWD)項(xiàng)目中尤其重要。各團(tuán)隊(duì)如今都要應(yīng)對(duì)大批設(shè)備。固定的、“像素精準(zhǔn)”的設(shè)計(jì)，如今該讓位于流動(dòng)的百分比設(shè)計(jì)。而且，圖片資源也需要為多種設(shè)備尺寸與分辨率進(jìn)行優(yōu)化。簡(jiǎn)而言之：響應(yīng)式設(shè)計(jì)帶來更多變數(shù)，需要交付更多資源——這也會(huì)導(dǎo)致更多問題。我發(fā)現(xiàn)一些技巧，可以克服這些障礙。1.首先關(guān)注“最極端”的屏幕尺When in doubt, base your viewport range on common web experiences:the iPhone and an expanded desktopbrowser.如果對(duì)此存疑，可以根據(jù)網(wǎng)頁的一般經(jīng)驗(yàn)設(shè)定屏幕尺寸范圍：iPhone尺寸和桌面瀏覽器展開。盡管有些設(shè)計(jì)師直接“在瀏覽器中”創(chuàng)作，一開始就完全是流式布局。但多數(shù)設(shè)計(jì)師仍然從固定尺寸開始：選定一組屏幕寬高，以此繪制效果圖。但這提出幾個(gè)問題：你對(duì)開發(fā)團(tuán)隊(duì)重視到何種程度?應(yīng)該首先交付哪些高保真資源?由于技術(shù)限制需要先考慮哪種設(shè)備?我一直都建議從最“極端”的用戶設(shè)備入手——最小和大的設(shè)備尺寸。如果對(duì)此存疑，我建議以此為2015年的網(wǎng)頁用戶標(biāo)準(zhǔn)：320x 568像素(iPhone 5豎屏)1600 x1000px(桌面瀏覽器展開)注意：你的用戶可能存在差異，所以要看數(shù)據(jù)分析來定義你的“極端情況”?！盀樽钚『痛蟮脑O(shè)備尺寸設(shè)計(jì)，以此為響應(yīng)式設(shè)計(jì)項(xiàng)目的起點(diǎn)?！毕炔贿^對(duì)于如今的響應(yīng)式設(shè)計(jì)，這只是剛開始。你要至少輸出2套位圖資源(JPG)：1套給普通顯示器，一套給高分辨率顯示器。高級(jí)的響應(yīng)式圖片技術(shù)，需要更多套資源適應(yīng)不同屏幕尺寸。避免到項(xiàng)目末尾再?zèng)Q定響應(yīng)式圖片格式。至少要有一套像素密度顯示策略?？纯磗rcset和Picturefill，來保證良好的跨瀏覽器支持。如果感覺太過了，就從簡(jiǎn)單入手。用srcset屬性來更換一些圖片元素，這是個(gè)好的開始?？此绾翁幚?，然后由此展開。4.微觀的思考，模塊化的設(shè)計(jì)我的響應(yīng)式設(shè)計(jì)工作流程深受Brad Frost的Atomic Web Design和JonathanSnook的SMACSS影響。兩者的框架都依賴小型、可復(fù)用的組件，以此為基礎(chǔ)打造強(qiáng)大的網(wǎng)站結(jié)構(gòu)。對(duì)于交付給開發(fā)的資料，我喜歡先專注于小型、可復(fù)用的組件。因?yàn)樗鼈冊(cè)诓煌O(shè)備上，通常表現(xiàn)出同樣的體驗(yàn)和外觀。這樣的統(tǒng)一性有利于開發(fā)團(tuán)隊(duì)消化。另外，小組件通常更容易跨頁面復(fù)用。所以如果你設(shè)計(jì)了一套有效的解決方案，之后再重復(fù)使用就非常簡(jiǎn)單了。小組件通常在不同設(shè)備上表現(xiàn)出同樣的體驗(yàn)和外觀。這樣的統(tǒng)一性有利于開發(fā)團(tuán)隊(duì)消化。假設(shè)你在設(shè)計(jì)一個(gè)注冊(cè)頁面，有標(biāo)題、大幅圖片和表單。根據(jù)設(shè)備不同，這些元素可能會(huì)變換交錯(cuò)或是改變尺寸。起初，要同開發(fā)團(tuán)隊(duì)一起專注于注冊(cè)表單的小細(xì)節(jié)。它看起來是怎樣的?需要怎樣的驗(yàn)證?相對(duì)鼠標(biāo)鍵盤，觸摸輸入會(huì)使表單發(fā)生什么變化?5.從開發(fā)者那里獲得視覺與用戶體驗(yàn)的反饋有些設(shè)計(jì)師把開發(fā)者阻擋在產(chǎn)品會(huì)議、可用性討論和其他反饋機(jī)會(huì)之外。只有一個(gè)啟動(dòng)儀式，交付一些資源，和一點(diǎn)點(diǎn)其他東西。這是錯(cuò)誤的。要記住，經(jīng)驗(yàn)豐富的開發(fā)者掌握大量知識(shí)。如果他們與產(chǎn)品接觸了一段時(shí)間，他們可能也有獨(dú)到見解。前端開發(fā)者和設(shè)計(jì)師的技能通常是重疊的。越來越多的設(shè)計(jì)師自己寫代碼。開發(fā)者也在刻苦鉆研快速原型設(shè)計(jì)、線框圖和美術(shù)設(shè)計(jì)。響應(yīng)式設(shè)計(jì)加劇了這項(xiàng)趨勢(shì)。即使沒有“設(shè)計(jì)師”的頭銜，一名開發(fā)者也可以表達(dá)出強(qiáng)有力的設(shè)計(jì)見解。我們得承認(rèn)，角色與責(zé)任的獨(dú)立仍然有其價(jià)值。但稍加融合便可顯著改善最終產(chǎn)品。所以，在你的下個(gè)可用性測(cè)試中，請(qǐng)一位開發(fā)者加入來討論最終產(chǎn)出吧。或者如果你在進(jìn)行一場(chǎng)設(shè)計(jì)頭腦風(fēng)暴，或許應(yīng)該邀請(qǐng)一些開發(fā)者。合作很重要所有這些技巧都需要規(guī)劃和認(rèn)同。由于注重產(chǎn)品發(fā)布與截止日期，這就難以做到。但設(shè)計(jì)與開發(fā)關(guān)系良好對(duì)任何網(wǎng)頁項(xiàng)目，尤其響應(yīng)式設(shè)計(jì)項(xiàng)目都是有益的。初期的小投資，會(huì)為你的團(tuán)隊(duì)帶來指數(shù)級(jí)的回報(bào)。

應(yīng)對(duì)最小的屏幕尺寸，這會(huì)迫使你做出艱難的選擇，選出設(shè)計(jì)中最重要的功能。大屏幕尺寸則讓人從另一個(gè)方向思考：最多包含多少內(nèi)容?文字段落是不是太寬不易閱讀?下拉菜單元素需要額外留白嗎，如果需要，多少才能避免給人脫節(jié)的感覺?

最后，選定最小和大屏幕，通常需要你思考至少兩種輸入方式——最小的屏幕基于觸摸操作，大屏幕則使用鼠標(biāo)和鍵盤操作?？赡茏钪匾氖牵?dāng)你應(yīng)對(duì)極端情況時(shí)，你是在同時(shí)處理兩種尺寸。并非完全繪制出一種屏幕尺寸，而后去適應(yīng)另一種。那樣會(huì)引發(fā)設(shè)計(jì)與開發(fā)的沖突。

2.在各個(gè)斷點(diǎn)之間討論內(nèi)容布局既然在靜止線框圖和排版上投入這么多，就千萬要記住，響應(yīng)式網(wǎng)頁設(shè)計(jì)天生是流動(dòng)的。這意味著眾多網(wǎng)站用戶體驗(yàn)到的，是你設(shè)計(jì)的“中間”狀態(tài)。所以幾乎每件設(shè)計(jì)，都需要考慮特定尺寸間必要的布局調(diào)整。比如當(dāng)尺寸減小時(shí)，內(nèi)容可能會(huì)收縮，圖片減少為單列。要避免主觀臆斷，認(rèn)為開發(fā)團(tuán)隊(duì)能夠或是應(yīng)該實(shí)現(xiàn)那樣的布局調(diào)整。盡早行動(dòng)，先知會(huì)你的開發(fā)團(tuán)隊(duì)，避免他們陷入太深。對(duì)于特別復(fù)雜的布局變化，最好另外繪制一張線框圖或效果圖來說明。特殊性不太重要的情況，通過簡(jiǎn)單的討論，或者用郵件描述這些變化就足夠了。

3. 盡早制定資源圖策略Many responsive images require multiple assets. My personalsite’s top home page graphic delivers 1 of 6 different image sizes based on theviewport size andresolution.很多響應(yīng)式圖片需要多套資源。我個(gè)人網(wǎng)站的主頁頭圖，根據(jù)屏幕尺寸和分辨率不同，會(huì)從6張不同圖片中選擇一張呈現(xiàn)。圖片格式與尺寸，通常是設(shè)計(jì)師與開發(fā)者之間的障礙。你可以使用PNG、JPG、圖標(biāo)字體，或者用SVG實(shí)現(xiàn)更小的元素或圖標(biāo)。并沒有哪個(gè)是正確答案：一切都取決于內(nèi)容和可用的資源。但重要的是對(duì)某種格式達(dá)成一致，堅(jiān)持使用它。而且隨著網(wǎng)頁項(xiàng)目的進(jìn)行，你還可以創(chuàng)建一些常用圖片尺寸。

分享標(biāo)題：響應(yīng)式網(wǎng)站設(shè)計(jì)制作建設(shè)項(xiàng)目中連接設(shè)計(jì)與開發(fā)
轉(zhuǎn)載注明：http://www.rwnh.cn/news/62257.html

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

廣告

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