因應RWD新時代的網頁設計流程

高雄網頁設計

RWD

高雄網頁設計,RWD

  Knowledge / 知識觀點

09/10

因應RWD新時代的網頁設計流程


網路圈瞬息萬變,每天都有好多idea跟創新技術冒出,而因應行動裝置而生的RWD響應式設計Responsive Web Design),讓網站可以在 desktop, tablet, mobile等個螢幕尺寸都能有最佳化的瀏覽效果,而因應RWD技術又如何影響了網站的設計/開發流程呢?

01

Mobile / Content First

首先,Aidan Foster (Foster Interactive ) 在一份詳盡的RWD設計介紹簡報中提出兩個重要觀念:

  1. 內容先行(CONTENT FIRST)
  2. 行動優先(MOBILE FIRST) 

不難想像,內容是王道(content is king),必須要先了解網站要放哪些內容,才能規劃出最適切的結構與視覺,再來,從螢幕載體上思考,必須先規劃在最小螢幕(手機)上的瀏覽效果,再延伸到平板、到桌面,以避免在大螢幕上的效果無法再手機上呈現,而造成修改上的困難。

 

RWD workflow

根據WSOL設計公司的設計總監Dennis Kardys所提出的一個更有彈性的workflow 值得參考,分享給大家。

RWD,RWD購物網站,RWD網站設計,嚮應式網站設計,響應式網頁設計,RWD網頁設計,響應式購物網站,自適應式網站設計

這是傳統的設計流程,從需求的分析出發,先定案資訊架構(IA - information architecture)然後提出線框圖(wireframe)以確認每個頁面的框架及內容,接著就交付設計師進行完稿PSD的設計(UI),待靜態視覺都定案後才進入前端設計(html x css x js)最後套程式。

RWD,RWD購物網站,RWD網站設計,嚮應式網站設計,響應式網頁設計,RWD網頁設計,響應式購物網站,自適應式網站設計

而這是Dennis 針對RWD提出的新的設計流程,除了有更多co-work的形式之外,你會發現前端設計/工程的部分被拉到了更早期的階段,而原本的PSD完稿設計則整合進Prototype(可動原型)之後,在RWD的設計中,或者說目前主流的設計趨勢,更加強調UX的界面體驗。

因此採用類似產品開發的流程,當資訊架構一定案就立即打出prototype,知名的工具例如Azure RP, Boostrap等,能夠快速的產生出動態原型,讓使用者/客戶能夠提早體驗UX,了解介面互動的概況,然後再由設計師及前端工程併行將設計切板給完成。

RWD,RWD購物網站,RWD網站設計,嚮應式網站設計,響應式網頁設計,RWD網頁設計,響應式購物網站,自適應式網站設計在專案流程的規劃上,可掌握三個階段:紙上談兵(內容先行)> 動態原型(UX)> 完稿切版 。

當然,這樣的開發流程也要考量成本以及客戶的形態,再評估最合適的方式。 

 

文章引用:http://gallery.grazingcat.com/item/24-web-design/item/181-in-response-to-the-new-era-of-web-design-rwd-process.html




高雄網頁設計 RWD

高雄網頁設計,RWD