聽說有讓前端工程師規劃流程的方法,今天帶你一起了解!

聽說有讓前端工程師規劃流程的方法,今天帶你一起了解!

聽說有讓前端工程師規劃流程的方法,今天帶你一起了解!

 

你是前端工程師嗎?想設計網站或開發APP嗎?那今天的規劃流程你絕不能錯過!

 

AWD 跟 RWD 的目的一致,都是希望能針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。

在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

讀完本系列文章後,你將會了解: 
(目錄)

  1. RWD 和 AWD 的差異與優缺點
  2. 我該選擇 RWD 還是 AWD ?
  3. AWD 要怎麼做才能對 SEO 無痛?
  4. 了解整體網站的規劃流程-PM與前端溝通更順利

與前端溝通更順利!從了解整體網站的規劃流程開始

無論是設計網站或是 APP 開發,合理的設計四個流程就是這四個:Sketch、 Wireframe、 Mockup、 Prototype。

#1 Sketch (草圖)

這個階段需要靠大家一起腦力激盪,只需要用筆和紙將腦中的想法粗略的勾勒出來-這也是最快得到靈感的方法。就算是粗糙不堪的草圖,也比文字更能夠表達、整合、具象化大家的想法,是在進入到 Wireframe (線框稿)之前的必備步驟。

需要工具:筆與紙

擬真度:最低

階段目標:溝通、整合大家的想法與創意

 

#2 Wireframe (線框稿)

Wireframe (線框稿)階段的重點在於釐清需求確認網頁上一定會出現的功能。所以必須先排除視覺元素的討論,單單專注在功能的規劃,以免失焦。

線框稿會以簡單的草稿圖,以低擬真度的方式呈現網頁上的主要資訊、排版與架構,以及如何與使用者互動等。通常設計師會使用 Balsamiq 提供的 Wireframe 工具、或是 powerpoint 、手繪等方式,以黑白的方格、線和圖來呈現不同的層級,其元素必須要非常精簡,是為了避免討論時失焦,加速效率和速度。某些還未確定的內容,就先利用方框或假文字來表示,例如圖片、影片與文字等等。

因此,在 Wireframe 階段不能出現過度的細節會比較好,比如說網頁的字型選用、 Button 的陰影、首頁輪播圖的大小等等。

需要工具:可以用 Balsamiq、Powerpoint、Photoshop、Illustrator…依照個人習慣而定

擬真度:低

階段目標:功能導向設計,整合產品團隊中的成員意見達到共識

 

#3 Mockup (視覺稿)

UI 設計師會根據 PM 確定好的 Wireframe 介面,使用 Axure 等網站視覺模擬軟體進行網站視覺設計上的配色、排版、配色等,以增強使用者體驗網站的效果。在製作 Mockup 的途中,UI 設計師必須數度與 PM 討論網站的功能、呈現的效果,還有與前端工程師溝通特效製作和開發成本與可行度以進行取捨。此時設計出來的 Mockup 圖經過客戶確認後,下一步就是直接交由前端工程師根據 Mockup 稿進行開發,所以在 Mockup 階段和最終網頁的外觀會完全一致,但是尚未無真正能操作的功能-不能操作、不會動、靜態。(如同手機無功能的模型機的概念)。

推薦工具Axure

擬真度:中

階段目標:確認網頁的視覺呈現,而這個視覺是以達成網頁的各項功能為前提而制定。

 

#4 Prototype (原形)

Prototype (原形) 可將網站以高擬真的方式呈現,幾乎可以將真正要上線的網頁之各項功能模擬出來。上一階段的 Mockup (視覺稿) 是無功能的靜態樣板,那在這一個階段則是加入各項互動的功能:如下拉選單、動態內容、狀況邏輯設定、計算、動態 Hide/Show Layer 效果等許多互動的物件與功能,並允許使用者可以設定點擊、Mouse over 或手指滑動觸發互動,可以任意加入註解與超連結,幾乎是完全模擬真實網站的意像。

推薦工具Axure

擬真度:高

階段目標:Debug 問題、確保網站的所有功能達都能到業主的設定目標。

本系列文章前三篇:
1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ?
3.AWD 要怎麼做才能對 SEO 無痛?

 

 

延伸閱讀:

HTML5教學-CSS初學者計畫之想跟我玩文字遊戲?想得美!

HTML5教學-CSS初學者計畫之邊框美觀跟我有關!

HTML5教學讓讀者更能享受讀電子書的樂趣!

SEO優化小撇步:語意標記法(3)JSON-LD

選擇達內教育評價極高的課程,你的人生將從此不一樣

Python課程培訓!帶我走向高薪人生!

NOWnews 今日新聞

本篇發表於 前端工程師教學 並標籤為 , , , , , , , , 。將永久鏈結加入書籤。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料