前端工程師和網頁設計師看過來!-萬事從規劃流程開始
不管是前端工程師還是網頁設計師,了解整體網站的規畫都是非常重要的事,今天分享四個步驟讓你穩紮穩打! AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 在規劃網站時，相信有不少的 PM 在與 前端工程師 或是 網頁設計 師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過 網頁設計 、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 讀完本系列文章後，你將會了解： (目錄) RWD 和 AWD 的差異與優缺點 我該選擇 RWD 還是 AWD ? AWD 要怎麼做才能對 SEO 無痛? 了解整體網站的規劃流程-PM與前端溝通更順利 與前端溝通更順利！從了解整體網站的規劃流程開始 無論是設計網站或是 APP 開發，合理的設計四個流程就是這四個：Sketch、 Wireframe、 Mockup、 Prototype。 #1 Sketch (草圖) 這個階段需要靠大家一起腦力激盪，只需要用筆和紙將腦中的想法粗略的勾勒出來-這也是最快得到靈感的方法。就算是粗糙不堪的草圖，也比文字更能夠表達、整合、具象化大家的想法，是在進入到 Wireframe (線框稿)之前的必備步驟。 需要工具 ：筆與紙 擬真度 ：最低 階段目標 ：溝通、整合大家的想法與創意 #2 Wireframe (線框稿) Wireframe (線框稿)階段的重點在於 釐清需求 與 確認網頁上一定會出現的功能 。所以必須先排除視覺元素的討論，單單專注在功能的規劃，以免失焦。 線框稿會以簡單的草稿圖，以低擬真度的方式呈現網頁上的主要資訊、排版與架構，以及如何與使用者互動等。通常設計師會使用 Balsamiq 提供的 Wireframe 工具、或是 powerpoint 、手繪等方式，以黑白的方格、線和圖來呈現不同的層級，其元素必須要非常精簡，是為了避免討論時失焦，加速效率和速度。某些還未確定的內容，就先利用方框或假文字來表示，例如圖片、影片與文字等等。 因此，在 Wireframe 階段不能出現過度的細節會比較好，比如說網頁的字型選用、 B...