提高響應(yīng)式網(wǎng)頁設(shè)計(jì)的制作效率方法
分享 2016.08.17 瀏覽次數(shù):5036次
我曾看到經(jīng)驗(yàn)豐富的設(shè)計(jì)師和開發(fā)者因?yàn)闇贤ú粫澈驼`會(huì)導(dǎo)致項(xiàng)目失敗,也見過新手設(shè)計(jì)師和開發(fā)團(tuán)隊(duì)一起通過高效協(xié)同,做出驚艷無比的設(shè)計(jì)項(xiàng)目。在項(xiàng)目之初充分的磨合,能讓項(xiàng)目在后續(xù)的快速迭代中更為流暢。足夠和諧的溝通不僅有利于工作,而且能讓整個(gè)團(tuán)隊(duì)保持情緒的穩(wěn)定性。
而在響應(yīng)式網(wǎng)頁設(shè)計(jì)項(xiàng)目中,設(shè)計(jì)師和開發(fā)者之間的溝通流暢與否,就顯得更為重要。
設(shè)計(jì)響應(yīng)式網(wǎng)站的時(shí)候,整個(gè)團(tuán)隊(duì)必須為大量不同尺寸屏幕的設(shè)備充分考慮,習(xí)慣于“像素精準(zhǔn)”的設(shè)計(jì)師和開發(fā)者需要對流動(dòng)的界面和大量的不同比例的設(shè)備有充分的準(zhǔn)備。簡而言之,響應(yīng)式設(shè)計(jì)使得整個(gè)項(xiàng)目交付面臨著大量的不確定因素,這也是響應(yīng)式網(wǎng)站項(xiàng)目的難點(diǎn)。
希望接下來的5個(gè)小技巧,能幫各個(gè)團(tuán)隊(duì)順利搞定這種項(xiàng)目中的溝通障礙和技術(shù)問題。
1、優(yōu)先專注“極端”尺寸
invisionpost_rwdrange
當(dāng)你面對著手機(jī)屏幕和桌面端顯示器這兩種極端的屏幕尺寸之時(shí),疑問會(huì)自然而然出現(xiàn)。有的設(shè)計(jì)師打一開始就從動(dòng)態(tài)的視角開始他們的設(shè)計(jì),但是絕大多數(shù)的設(shè)計(jì)師仍然是從靜態(tài)的頁面開始著手設(shè)計(jì)的:選擇一個(gè)固定的高度和寬度,繪制相應(yīng)的草圖或者視覺稿。
這樣一來,就引出了幾個(gè)問題:你的開發(fā)團(tuán)隊(duì)優(yōu)先考慮什么尺寸?設(shè)計(jì)團(tuán)隊(duì)首先交付的高保真視覺稿是哪個(gè)尺寸的?從技術(shù)限制的角度出發(fā),你應(yīng)該優(yōu)先考慮什么設(shè)備?
我始終推薦從用戶最基本的“極端”尺寸開始考慮,推薦當(dāng)前(2015年)常用設(shè)備中最小和最大的情況:
320 x 568 px(iPhone 5,由于它是視網(wǎng)膜屏幕,平時(shí)我們是按照72dpi來設(shè)計(jì),但是iPhone 5的顯示實(shí)際是144px,所以我們給出了這樣的一個(gè)設(shè)計(jì)尺寸。作為UI設(shè)計(jì)師的你應(yīng)該很清楚2x和3x的問題)
1600×1000 px(桌面顯示器的常見尺寸)
當(dāng)然,你的用戶的實(shí)際情況可能略有不同,稍加調(diào)查,確定“極端情況”。
“剛剛開始響應(yīng)式網(wǎng)頁項(xiàng)目的時(shí)候,從用戶最常見的最大和最小尺寸設(shè)計(jì)著手。”
當(dāng)你面對最小的屏幕的時(shí)候,你需要在小屏幕上呈現(xiàn)出最重要的內(nèi)容,如何選取是一件頗為費(fèi)神的事情。但是面對大屏幕的時(shí)候,你所思考的事情又是截然相反的:怎么展示內(nèi)容才算是過多?分欄是否因太寬降低了易讀性?如何選取元素才能避免這樣的問題?最后,面對兩個(gè)不同尺寸的界面,你還要考慮它們所涉及的輸入方式,最小的屏幕上通常是觸摸屏和虛擬鍵盤,最大的屏幕上,絕大多數(shù)時(shí)候是傳統(tǒng)的鍵盤鼠標(biāo)。
這里最重要的事情可能是你需要一次挑選兩個(gè)界面尺寸來做,而不是傳統(tǒng)的針對一個(gè)屏幕設(shè)計(jì),然后完成剩下的部分。設(shè)計(jì)師和開發(fā)者在這個(gè)問題上出現(xiàn)分歧,對后續(xù)的影響是非常大的。
2、討論不同斷點(diǎn)之間內(nèi)容布局
在日常的網(wǎng)頁設(shè)計(jì)中,大家對于靜態(tài)的線框圖投注了如此之多的關(guān)注,但是在做響應(yīng)式設(shè)計(jì)的時(shí)候,應(yīng)該始終謹(jǐn)記頁面內(nèi)的布局是流動(dòng)的。這也就意味著,你網(wǎng)頁的用戶絕大多屬時(shí)候所體驗(yàn)到的頁面其實(shí)是它的“中間態(tài)”。所以,你必須考慮隨著屏幕尺寸大小的轉(zhuǎn)變,布局設(shè)計(jì)的每一個(gè)調(diào)整和改變。比如,當(dāng)屏幕尺寸變小的時(shí)候,文本內(nèi)容需要收縮,并且和混排的圖片會(huì)與文章縮到一欄中去。
這些適配能與不能、該與不該的問題上,盡量不要同你的開發(fā)團(tuán)隊(duì)去“假設(shè)”或者“推測”。積極主動(dòng)地去確定這些信息,在你負(fù)責(zé)開發(fā)的同事還沒有做太多之前,和他們達(dá)成共識(shí)。對于復(fù)雜的布局改變,事先繪制先框圖或者草圖來單獨(dú)說明,是非常明智的選擇。對于一些不那么重要的特性,通過簡短的討論或者電子郵件通知就足夠了。
3、對于圖片素材的處理策略早做準(zhǔn)備
invisionpost_rwdimages
響應(yīng)式網(wǎng)頁中的圖片,通常是由一組多個(gè)不同尺寸的圖片組成的。比如我的個(gè)人網(wǎng)站首頁頂部的大圖,就是由一組6個(gè)圖片組成的,分辨率和尺寸各不相同,確保不同的設(shè)備都能匹配上對應(yīng)的圖片。
圖片格式和尺寸通常會(huì)讓團(tuán)隊(duì)內(nèi)的設(shè)計(jì)師和開發(fā)者之間產(chǎn)生隔閡。你可以用PNG,也可以用JPG,圖標(biāo)字體和SVG也會(huì)在網(wǎng)頁上很好的運(yùn)用。也就是說,并沒有一個(gè)正確的答案:用什么更多是取決于可用的內(nèi)容和資源本身。但是重要的地方在于,大家要在使用格式上達(dá)成共識(shí),并且堅(jiān)持使用下去。另外,你可能也想鉆研出一套通用的圖片尺寸體系,運(yùn)用在不同的項(xiàng)目中。
不過對于現(xiàn)代的響應(yīng)式網(wǎng)頁設(shè)計(jì),這僅僅只是一個(gè)起點(diǎn)?,F(xiàn)在要做你至少需要兩套圖片素材,一種是給普通PPI的屏幕所設(shè)計(jì),一種是給高PPI的視網(wǎng)膜屏所準(zhǔn)備的。更完備的響應(yīng)式網(wǎng)頁,對于圖集和素材的要求更高,細(xì)分更多,針對性更強(qiáng)。
盡量避免將響應(yīng)式圖片格式的篩選決策留到項(xiàng)目后期。
最起碼,你得針對不同像素密度的屏幕作出基本的區(qū)分。仔細(xì)讀一下這篇關(guān)于srcset的文章,或者使用Picturefill這樣的工具來確??鐬g覽器支持。如果你覺得整個(gè)方案不堪重負(fù),那么不妨從小的部分開始做起。逐步調(diào)整圖片元素的srcset屬性就是一個(gè)不錯(cuò)的開始,在這個(gè)過程中,你會(huì)逐步看到網(wǎng)頁的響應(yīng)越來越靠譜。
4、從基礎(chǔ)元素開始思考,使用模塊化設(shè)計(jì)
我的響應(yīng)式網(wǎng)頁設(shè)計(jì)流程深深地受到了Brad Frost的Atomic Web Design和Jonathan Snook的SMACSS的影響。兩個(gè)框架都依靠小而可復(fù)用的基礎(chǔ)組件來實(shí)現(xiàn)強(qiáng)大的網(wǎng)絡(luò)架構(gòu)。
所以,在與開發(fā)者交接的過程中,我會(huì)優(yōu)先專注小而可復(fù)用的組件,因?yàn)樗鼈兡芙o不同平臺(tái)不同設(shè)備帶來相同的用戶體驗(yàn)和視覺效果。這種一致性會(huì)更容易為開發(fā)團(tuán)隊(duì)所消化吸收。而且,小組件在不同頁面之間的復(fù)用性也非常強(qiáng),所以,如果你設(shè)計(jì)出了一套高效的方案,今后還會(huì)有用武之地。
想象一下,你正在設(shè)計(jì)一個(gè)帶有大標(biāo)題、高清大圖和表單的注冊頁面。由于網(wǎng)頁是響應(yīng)式的,所以所有這些元素都會(huì)隨著設(shè)備和屏幕的轉(zhuǎn)換而變化尺寸。那么在項(xiàng)目研發(fā)早期,應(yīng)該同開發(fā)團(tuán)隊(duì)一起鉆研,敲定頁面所涉及的各個(gè)細(xì)節(jié)。它看起來應(yīng)該是什么樣子?用什么樣的驗(yàn)證機(jī)制?如果要輸入表單,如何配合觸摸屏和傳統(tǒng)的鍵鼠?
5、讓開發(fā)者給視覺和體驗(yàn)設(shè)計(jì)做反饋
有些設(shè)計(jì)師在產(chǎn)品設(shè)計(jì)會(huì)議、可用性設(shè)計(jì)環(huán)節(jié)和其他的溝通環(huán)節(jié)不讓開發(fā)者參與或提供反饋。這種放任和封閉是錯(cuò)的。要知道,經(jīng)驗(yàn)豐富的開發(fā)者在產(chǎn)品、體驗(yàn)和設(shè)計(jì)領(lǐng)域同樣有著極為豐富的知識(shí)。讓他們參與到這些環(huán)節(jié)中,能讓產(chǎn)品更加成熟。前端和設(shè)計(jì)師在技能上的重疊就更多了。
越來越多的設(shè)計(jì)師開始自己寫代碼了,開發(fā)者也逐漸習(xí)慣于制作快速原型、先框圖,并且也會(huì)在私底下惡補(bǔ)美學(xué)和設(shè)計(jì)類的知識(shí)。響應(yīng)式網(wǎng)頁設(shè)計(jì)的出現(xiàn),使得兩個(gè)職業(yè)之間的交疊越來越多,加劇了這一趨勢。雖然沒有設(shè)計(jì)師的頭銜掛在開發(fā)者頭上,但是他們對于設(shè)計(jì)往往能說出驚人之語,發(fā)人深省。
當(dāng)然,不同的角色和職責(zé)的劃分依然是極為重要的。但是稍微調(diào)整一些小步驟,確實(shí)能顯著提高最終產(chǎn)品。所以,你做下一輪產(chǎn)品可用性測試的時(shí)候,不妨帶著開發(fā)者一起來討論。
帷拓科技是一家專注于杭州網(wǎng)站建設(shè)、杭州網(wǎng)站設(shè)計(jì)、杭州網(wǎng)站制作、建網(wǎng)站、制作網(wǎng)站的高端網(wǎng)站制作公司,專注網(wǎng)站建設(shè)13年,成功建站案例超3000+,對大數(shù)據(jù)和云計(jì)算有自己的獨(dú)到見解。
- PREV:企業(yè)建站需要怎么樣的策劃
- NEXT:一個(gè)完整的交互設(shè)計(jì)流程是怎樣的
-
杭州網(wǎng)站設(shè)計(jì)公司:品牌網(wǎng)站開發(fā)助力企業(yè)成長
日期:2024-12-20瀏覽次數(shù):823次
-
杭州網(wǎng)站建設(shè)公司:商城網(wǎng)站建設(shè)的六大關(guān)鍵步驟
日期:2024-12-18瀏覽次數(shù):865次
-
杭州網(wǎng)站制作:醫(yī)院網(wǎng)站設(shè)計(jì)與域名備案的復(fù)雜性探討
日期:2024-12-18瀏覽次數(shù):856次
-
杭州網(wǎng)站制作公司:打造安全可靠的醫(yī)院網(wǎng)站
日期:2024-12-11瀏覽次數(shù):1021次
-
杭州網(wǎng)站設(shè)計(jì)公司:數(shù)據(jù)庫在高端網(wǎng)站制作中的關(guān)鍵作用
日期:2024-12-11瀏覽次數(shù):992次
相關(guān)新聞
整合同類新聞,相關(guān)新聞一手掌握
-
宣城網(wǎng)站模板搭建
日期:2023-02-08瀏覽次數(shù):1665次
-
宣城app開發(fā),從開發(fā)到上線
日期:2021-02-06瀏覽次數(shù):2255次
-
智能數(shù)據(jù)宣城app開發(fā)更高效
日期:2021-02-06瀏覽次數(shù):2135次
-
宣城網(wǎng)頁設(shè)計(jì):讓營銷氣息填滿您的網(wǎng)站,網(wǎng)站設(shè)計(jì)公司的七大秘籍
日期:2020-09-11瀏覽次數(shù):2128次
-
宣城網(wǎng)站優(yōu)化:為什么網(wǎng)站設(shè)計(jì)公司的報(bào)價(jià)會(huì)不同呢?
日期:2020-09-11瀏覽次數(shù):2153次
最新新聞
與互聯(lián)網(wǎng)同行,實(shí)時(shí)掌握網(wǎng)建行業(yè)最新動(dòng)態(tài)
-
制定內(nèi)容策略,個(gè)性化定制 讓你網(wǎng)站設(shè)計(jì)始終保持優(yōu)秀
日期:2016-11-22瀏覽次數(shù):4985次
-
如何在5個(gè)簡單的步驟中建立一個(gè)企業(yè)網(wǎng)站_杭州網(wǎng)站建設(shè)
日期:2018-09-07瀏覽次數(shù):5523次
-
如何評價(jià)網(wǎng)頁設(shè)計(jì)的若干依據(jù)
日期:2019-07-24瀏覽次數(shù):5549次
-
朔州網(wǎng)站優(yōu)化:如何優(yōu)化網(wǎng)站打開速度
日期:2020-09-25瀏覽次數(shù):2119次
-
三明app開發(fā)需要做什么準(zhǔn)備?
日期:2021-02-07瀏覽次數(shù):2127次
隨機(jī)新聞
新聞新動(dòng)態(tài),您需要的新聞管家
洞悉市場趨勢演變讓傳播回歸社會(huì)
免費(fèi)獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報(bào)價(jià)
-
關(guān)于我們
杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)為核心的專業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場環(huán)境、衡量與預(yù)測市場需求、整合區(qū)別于行業(yè)競爭對手的絕對優(yōu)勢,結(jié)合品牌理念深度挖掘項(xiàng)目優(yōu)勢和產(chǎn)品價(jià)值,提升客戶品牌認(rèn)知、認(rèn)可度。
-
我們的客戶
帷拓科技?xì)v經(jīng)十年沉淀,與國內(nèi)外上千家客戶達(dá)成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動(dòng)、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂部、娃哈哈雙語學(xué)校、健康中國杭州峰會(huì)、科雷機(jī)電等,帷拓科技始終堅(jiān)持“帷有專業(yè),才能拓展無限”的服務(wù)理念,堅(jiān)持“認(rèn)真堅(jiān)持細(xì)節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實(shí)現(xiàn)共贏。
-
我們的業(yè)務(wù)
帷拓科技主營業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)、商城網(wǎng)站建設(shè)、公眾號運(yùn)營以及數(shù)字營銷等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個(gè)客戶量身定制項(xiàng)目整體服務(wù)方案,以敏銳的市場洞察力、創(chuàng)新的市場策劃能力,全面把握市場變化,為客戶實(shí)現(xiàn)從企業(yè)到消費(fèi)者的價(jià)值轉(zhuǎn)換。