優(yōu)秀的網(wǎng)頁(yè)項(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ì)有更少的誤解與緊張。

各團(tuán)隊(duì)如今都要應(yīng)對(duì)大批設(shè)備。固定的、“像素精準(zhǔn)”的設(shè)計(jì)，如今該讓位于流動(dòng)的百分比設(shè)計(jì)。而且，圖片資源也需要為多種設(shè)備尺寸與分辨率進(jìn)行優(yōu)化。

簡(jiǎn)而言之：——這也會(huì)導(dǎo)致更多問題。我發(fā)現(xiàn)一些技巧，可以克服這些障礙。

1. 首先關(guān)注“最極端”的屏幕尺寸

如果對(duì)此存疑，可以根據(jù)網(wǎng)頁(yè)的一般經(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)頁(yè)用戶標(biāo)準(zhǔn)：

• 320 x 568像素（iPhone 5豎屏）
• 1600 x 1000px（桌面瀏覽器展開）

注意：你的用戶可能存在差異，所以要看數(shù)據(jù)分析來定義你的“極端情況”。

先應(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)容布局

既然在靜止線框圖和排版上投入這么多，就千萬(wàn)要記住，響應(yīng)式網(wǎng)頁(yè)設(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. 盡早制定資源圖策略

很多響應(yīng)式圖片需要多套資源。我個(gè)人網(wǎng)站的主頁(yè)頭圖，根據(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)頁(yè)項(xiàng)目的進(jìn)行，你還可以創(chuàng)建一些常用圖片尺寸。

不過對(duì)于如今的響應(yīng)式設(shè)計(jì)，這只是剛開始。你要至少輸出2套位圖資源（JPG）：1套給普通顯示器，一套給高分辨率顯示器。高級(jí)的響應(yīng)式圖片技術(shù)，需要更多套資源適應(yīng)不同屏幕尺寸。

至少要有一套像素密度顯示策略?？纯?a >srcset和Picturefill，來保證良好的跨瀏覽器支持。如果感覺太過了，就從簡(jiǎn)單入手。用srcset屬性來更換一些圖片元素，這是個(gè)好的開始。看它如何處理，然后由此展開。

4. 微觀的思考，模塊化的設(shè)計(jì)

我的響應(yīng)式設(shè)計(jì)工作流程深受Brad Frost的Atomic Web Design和Jonathan Snook的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ì)消化。另外，小組件通常更容易跨頁(yè)面復(fù)用。所以如果你設(shè)計(jì)了一套有效的解決方案，之后再重復(fù)使用就非常簡(jiǎn)單了。

小組件通常在不同設(shè)備上表現(xiàn)出同樣的體驗(yàn)和外觀。這樣的統(tǒng)一性有利于開發(fā)團(tuán)隊(duì)消化。

假設(shè)你在設(shè)計(jì)一個(gè)注冊(cè)頁(yè)面，有標(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ú)到見解。

越來越多的設(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)出吧?；蛘呷绻阍谶M(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)頁(yè)項(xiàng)目，尤其響應(yīng)式設(shè)計(jì)項(xiàng)目都是有益的。初期的小投資，會(huì)為你的團(tuán)隊(duì)帶來指數(shù)級(jí)的回報(bào)。

原文鏈接

作者信息：

Nick Schaden, Web Platform Lead at Pocket

At Pocket, Nick oversees development and design initiatives on Pocket’s web app, Chrome packaged app, and marketing web sites. He has extensive experience introducing and integrating responsive web design, both at Pocket and previously at Animoto, a video startup based in New York. Prior to Pocket and Animoto, Nick worked in technology at Gucci and Goldman Sachs. He loves electronic music and 80s action movies.Follow me on Twitter

#專欄作家#

可樂橙，微信公眾號(hào)：可樂橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專欄作家，UI/UX設(shè)計(jì)師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技?，F(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中?；蛟S不是一名優(yōu)秀的設(shè)計(jì)師，至少是個(gè)快樂的設(shè)計(jì)師。

網(wǎng)頁(yè)名稱：在響應(yīng)式項(xiàng)目中連接設(shè)計(jì)與開發(fā)
文章位置：http://www.rwnh.cn/news21/165921.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站制作、App開發(fā)、面包屑導(dǎo)航、動(dòng)態(tài)網(wǎng)站、云服務(wù)器

廣告

聲明：本網(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)