Chit-chat moment — 這兩週我做了什麼?
這兩週我跟著時賦PM Christy參與了一項新專案、跟著時賦 Founder FRank參與了一項新提案！
關於新專案
由於當時手邊案子的進度有點delay(那時還深陷於測試案例跟問題單XD)，所以有miss掉新專案開頭的幾場會議，使得當時在沒有任何的基本知識下就參與了會議，當時的我努力地想讓打字的手速與腦袋跟上大家的討論節奏，但在與會過程中，聽到很多從未接觸過的專有名詞時，仍充滿很多的問號(???)
會議期間，我茫然的眼神可能都被大家盡收眼底XDDD
會議結束後，Christy帶我快速地掃一遍規格文件、給了我一些時間消化規格內容，之後又跟Christy進行了規格文件的QA小測驗，透過上述的這些過程，讓我快速地建構起對整個專案的認識！
會想分享這件事~是因為回想起這個經驗，我學到珍貴的一課-不用等到完全理解，就可以先把自己丟入環境，因為在時間跟環境的壓力下，人會自然的快速成長，我認為這也是在企業實習帶來的亮點之一！
關於新提案
上週突然收到時賦大家長的任務~我需要為新提案繪製wireframe(線框圖)以及製作mockup(視覺稿)，透過wireframe、mockup的呈現能讓客戶更好地瞭解公司會如何幫助他們解決問題以及利於後續的雙向討論。
身為一位小小實習生，來到時賦後才開始接觸到wireframe以及mockup的概念，目前已繪製了兩份不同專案，想說也許可以藉著這個機會進行不專業的小分享，但為了不讓篇幅過長，這次先來聊聊wireframe，下回再分享mockup！
不專業的繪製wireframe分享
這次的分享重點會是以下這三點:
- 為什麼PM會需要繪製wireframe ?
- 我的工作模式
- 手繪wireframe範例(附圖)
1. 為什麼PM會需要繪製wireframe ?
因為PM是最先認識客戶需求的角色，初步釐清需求後，PM可以透過繪製wireframe來規劃並確認是否符合客戶期望的功能與佈局，與此同時，wireframe也助於PM與內部成員進行專案上的討論！
需求溝通 → 繪製wireframe
當公司的高層主管(客戶)想要做一款與軟體/系統相關的產品時，會找軟體公司談需求，而在此階段，不論客戶已有初步想法或仍在天馬行空，客戶對於產品一定會有想包含的重點功能，PM對於客戶的期望有了基本瞭解後，會開始著手繪製wireframe。
簡言之，wireframe是簡單的草稿圖、是釐清功能與佈局的工具、也是內部討論的媒介！
2. 我的工作模式
a. 多參考外部網站
參考不是隨便參考，而是要根據客戶的產品特質，來挑選繆斯女神！
知道自己不是這個領域的專家，為了讓繪製出來的Wireframe符合使用者的習慣與直覺性，我喜歡參考熱門網站(ex:Amazon、博客來、蝦皮、PChome...等)從中汲取靈感，但這裡要特別強調的是，參考不是隨便參考，而是要根據客戶的產品特質，來挑選繆斯女神，舉例來說，假設客戶是賣有機食品的公司，跑去參考電競平台網站就有點怪怪的XDD
b.設想將客戶的產品待入其他外部網站
思考這樣的呈現是否直觀 ?是否好操作 ?
挑選好繆斯女神後，就可以設想把客戶的產品投入到該網站(繆斯女神)時，會是以什麼樣的方式呈現，這樣的呈現是否直觀?是否好操作?都是要注意的重點!
c.動手繪製wireframe
繪製的工具有很多，手繪也不失為一個方法 !
市面上能繪製wireframe的工具有很多，我習慣在ipad上直接手繪，也可以很好地進行修改與調整 !
d. 與主管進行討論
Let's brainstorm !
客戶想要的軟體產品~絕大多數都是讓人使用，而人是很複雜的，在設置主功能與佈局規劃上，除了要考慮符合操作邏輯的使用者，也要考慮不會照著操作邏輯走的使用者XDD，簡單來說，就是在規劃上要考量到各種使用情境!
身為很菜的PM intern的我，在繪製完wireframe第一版後，我會找主管進行討論，透過與主管討論，讓我注意到佈局規劃上可能會有的邏輯誤區或遺漏掉的細節，過程中讓我學到很多!
<小劇場時刻>
主管: 這個網站會需要幾個頁面?按了這個按鈕應該要跳到哪裡去?刪除前該跳出小視窗嗎?後台人員如果編輯了這個項目，對前台會造成什麼影響?假設使用者不照直覺性的操作走，該怎麼引導他?
第一次畫wireframe的我:
3. 手繪wireframe範例(附圖)
以下是根據我參與的專案所繪製出來的wireframe，由於這是客戶的資料，所以有把一些資訊做移除，以其中的幾個頁面給大家參考~wireframe會根據需求的不同，而有不同的呈現方式，在此雙手奉上我的手繪wireframe，獻醜了~~~
這次的不專業分享就到這裡!
我們下次見!!!
延伸閱讀:
