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