課堂筆記:來跟和多創辦人 hlb 學網站開發與雛型建構

評論
評論

hlb
hlb(照片提供:AppUniverz)

本文由 AppUniverz 提供。AppUniverz(台灣創新行動服務推廣協會)是一個發起於清交校園內的非營利組織,以「培育台灣軟體創業人才」為最高使命。幫助新創團隊從創意出發,動手實作創新的應用服務(App),走向國際,一同航向宇宙(Universe)!

AppUniverz 曾與清大資工系及育成中心合開了「App 創業與實作」課程,未來也將於全台各大專院校合開相關課程,歡迎在 AppUniverz 的粉絲專頁 上關注校園創業的相關資訊。

清大「App 創業與實作」課程於 3 月 14 日邀請到 和多 Handlino Inc. 的 UI 設計師兼共同創辦人 薛良斌(網路代號:hlb,綽號:布丁),主題為「Web 開發模式與快速雛型建構」,儘管主題為兩個完全無關的事情,出身於交大資工的 hlb 仍以相當有趣的方式教初學者如何做 Fast Prototyping,接下來將以「Why、What、How」來看看怎麼快速做網站開發。

Why web?

為什麼要選擇 web 而不選擇 app 或其他軟體做開發的第一個目標呢?

因為:

hlb 提到 facebook 早期其實是在 app 裡面嵌了一個 web,這樣送審 app 比較容易過,因為 app Store 可能因為種種莫名其妙的原因就拒絕你的 app 申請,例如在申請過程中,寫了 Steve Jobs 的關鍵字就會被拒絕,當下打掉重練,三個月後才能重新再申請,非常麻煩,但如果自己有 web 的話,就比較不需要擔心這些問題。

What to do?

那麼 Web 開發模式有哪些呢?一開始開如何規劃?

  • 需求分析:User survey,詳細條列出任何角色能夠做的事情,不管是使用者、管理者、活動主辦人等各種不同角色,例如,使用者在網站可以用 facebook 登入,使用在登入可做哪些事情,不能做哪些事情等,基本上隨便一個小型網站就需要列出上百條的需求分析了。
  • 時程規劃:做完需求分析後便開始進行時程規劃,依照不同專案做分配,對自己創業的公司來說就是包案給自己。
  • UI 雛形設計
  • HTML Prototyping:每次拿到不同設計都會有不同的焦點與觀點,因此 hlb 的公司傾向將 UI 設計放到最後討論,避免一改再改。
  • 實作
  • 上線 &維運:網站是上線的一天才真正開始,你可能做了很酷很炫的功能,但是不是客戶想要的,也不是使用者喜愛的,有時無心插柳柳成蔭,無心做的功能可能在瞬間爆紅也說不定

至於 Web site development workflow,參考就好,實際上不太可能完成所有步驟,因為其實確認 Visual design 非常危險,舉例來說,做個 app 的開發案,logo 就可能改個十幾次,一開始想的跟最後做的大都會有很大的不同,這樣的事情經常發生。

How to do?

Prototyping 是一件很有趣的事情,先建模可以解決很多問題,因為如果一開始就寫程式開發產品,很可能走到錯的路,浪費時間和精力,來看看 Wiki 和 hlb 怎麼說:

維基百科

A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.

hlb 用一句話說:

Prototyping 其實就是早期有個 sample 可以拿來測試你的 idea 對不對,事實上所有地方都有可能擁有 prototype。

電影有個東西叫做 Previsualization,像是這部 《2012》的前導片 ,就是將故事情節與大綱在前導片中做展示,這是拍攝電影前的 Prototyping。

維基百科

Previsualization (also known as pre-rendering, preview or wireframe windows) is a function to visualise complex scenes in a movie before filming.

而做 Prototyping 最有效的方式就是利用紙跟筆,Paper Prototyping 方便團隊一起創作,在此推薦台灣團隊所做的 App 原型開發工具軟體─「POP -- Prototyping on Paper」。

課堂最後,hlb 要我們在白紙上動手實作:

  • 請畫一個 4cmx4cm 的方框
  • 畫一個回首頁的符號
  • 畫一個儲存的符號
  • 畫出你旁邊的人的臉
  • 某某某
  • 年齡
  • 性別
  • 使用的電子裝置
  • 每天上網的時間
  • 如何使用我的產品

要我們動手實作是希望我們可以去了解使用者真正的想法,畫圖可以幫助我們思考並釐清問題,而做用戶側寫可以了解用戶的行為與需求,因為產品是為了解決他們的問題,因此,需要徹底的了解每一個細節。

資料來源:

相關文章

評論