工作手稿 - Wireframe

Alicia's Portfolio


曾麗香

自介

用自己的步伐在自己的人生地圖中積極前進,期許自己保持與時俱進的能力

工作至今逾20年,1998年以美術編輯、平面設計技能踏入社會,並在2003年成立個人工作室接案,初期以美術編輯、平面設計為主,因應數位化時代,2009年之後則以網頁、使用者前端設計做為主要發展方向,為了與網路購物盛行、大數據時代接軌,2016年任職本土中小企業電商的資深網站設計,並結束個人工作室,半年後於同間企業轉任專案經理,負責電商網站內部及外部功能開發、使用者體驗設計及網站視覺統合,以及執行相關部門的員工訓練與招募。

在開始進行介面設計之前的工作

工作手稿 - Wireframe
需求訪談
在真正開始進行設計前,很重要的工作是了解實際需求,在面對開出需求的人,我會想要瞭解為什麼他需要這個功能,他想要解決的問題是什麼,會遇到這個問題的是哪一類的使用者族群,為什麼他們會遇到這樣的狀況。
蒐集整合資料
多看別人的設計,除了視覺上的刺激,還有大腦內的刺激,思考及消化設計背後的意義,是否達成解決問題的目的,有沒有為了解決一個問題而衍生其他的問題,對方為什麼選擇這樣做,在這個過程中,列出設計方案的pros and cons,選擇最適合現況的,而不是所謂的最新或最好的。
繪製手稿
需要確定幾個設計方案是否適合,繪製手稿是便利快速也最直接的方式,不只是會議中,在獨自思考時,利用手繪可以釐清思路,也能明確的知道用何種設計會需要何種資源及素材,在後續的作業上也會相對地明確,以利需要別人協助時的溝通,當然,畫給別人看的還是要盡量的不潦草。

團體合作時:在經過許多討論及修正後...
獨立作業時:不用和別人討論,但會經過很多內心的糾結與掙扎...,在修改與不想修改之間徘迴
經歷這兩個情境任一之後,進行下述工作

繪製Wireframe or Prototype
利用手稿進行前置作業的溝通,在經過討論後確定設計方案,就利用繪製wireframe或prototype來進行最後確認,產品操作的流程基本上已不在這個步驟範圍內執行,但通常事與願違,總是會發現操作不順暢的情況可能會影響到其他層面的問題,所以這個步驟還是會需要不斷的修改,另外,此步驟也可以和工程師再次確認動態效果是否可行,有些prototype已經可以做出模擬動態效果,在溝通上是相當的方便。
HTML, CSS & JS
大致底定了產品prototype之後,將設計好的UI元件整理輸出,操作流程、說明文件,交給工程師進行程式撰寫及串接,通常走到這一步最重要的一件事情是保持通訊順暢,避免遺漏了工程師的詢問。有時候有些狀況真的是遇到才會發現其實需要,所以這個階段可能會需要補充一些說明、資訊、圖片等資料,對於工程師的來訊,要抱持著感恩的心,因為他有在進行,才可能會有這通訊息,不鼓吹拍馬屁,但嘴甜讓人愛,務必把握機會稱讚男的帥、女的美,大家都歡喜。
上線前、後測試
當工程師回報已完成時,帶著生產完看孩子第一眼的心情,既緊張又期待,希望他健康同時也希望他美麗漂亮,像數數手指頭、腳趾頭各十隻都沒有少之後一樣的安心,逐項測試完成,理想狀況沒有問題之後就上線了,通常,這是理想狀況,實際情況有可能是上線前測試都很棒,上線後介面或功能都炸掉,除了被嚇得花容失色和尖叫之外,要趕快找冷靜的工程師討論怎麼處理比較好。