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

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

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

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

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

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)式圖片需要多套資源。我個人網(wǎng)站的主頁頭圖，根據(jù)屏幕尺寸和分辨率不同，會從6張不同圖片中選擇一張呈現(xiàn)。圖片格式與尺寸，通常是設(shè)計師與開發(fā)者之間的障礙。你可以使用PNG、JPG、圖標字體，或者用SVG實現(xiàn)更小的元素或圖標。并沒有哪個是正確答案：一切都取決于內(nèi)容和可用的資源。但重要的是對某種格式達成一致，堅持使用它。而且隨著網(wǎng)頁項目的進行，你還可以創(chuàng)建一些常用圖片尺寸。

分享名稱：響應(yīng)式網(wǎng)站設(shè)計制作建設(shè)項目中連接設(shè)計與開發(fā)
鏈接地址：http://www.rwnh.cn/news7/62257.html

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

廣告

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