【Blockly專欄】淺談UX使用者經驗

隨著智慧手機平板電腦等移動裝置的普及,五花八門的程式、花花綠綠的網頁百家爭鳴,凡涉足於此者無不處心積慮的琢磨著如何讓自己家的app一眼難忘,不只讓使用者用的舒服流暢還要符合公司或團隊的整體意象,因此近年來前端設計逐漸成為顯學,但對於前端設計的了解目前普遍都只局限於使用介面的設計,背景用甚麼圖、按鈕怎麼擺、字要用多大等等看的見的部分,而真正重要的是看不見的心法,UX使用者體驗的設計。

1-fKy0S_xqMWOrbvreWDNpAw.png

使用者體驗設計的範疇涵蓋了從無到有開發一個app歷經的所有過程,以下我們藉由手機遊戲APP程式設計營的第一個作品”自我介紹”來做簡單的說明,顧名思義在這個app的在策略層就是要讓使用者認識自己,還要用完後還要留下深深的印象,為此在範圍層我希望在我的app裡除了基本自我介紹的頁面之外,還要有能跟使用者互動的問答以增加趣味性。

float.PNG pic code

只要是有關於程式設計的領域流程圖絕對都是不可或缺的輔助工具,即便是在前端程式設計也不例外,在結構層運用了流程圖的概念來規劃使用流程,建構出頁面與頁面之間跳轉的關係,於此start頁面放置基本介紹的內容,並有按鈕可以進入food問答頁面選擇可能最喜歡的食物,選錯了會跳進error頁面,答對了則進入sport問答頁面等等,而框架層可視為流程圖與頁面草稿的綜合體,一方面規劃一個頁面大致的排版,另一方面設計該頁面跳轉的觸發機制,例如按鈕、滑動或計時等方法。到了最後一步表現層,才是真正坐上電腦桌按圖施工,寫程式、畫素材、排版面、修字體、改顏色等等,這才算完成了一個應用程式。

這個slideshow需要JavaScript。

其實前端設計是一種跨領域的整合,既需要美術設計的能力來繪製出美美的版面或插圖,又需要程式設計的能力將天馬行空的構想實現出來。雖然在帶給小朋友的課程中,沒有辦法完成多龐大的程式架構,也沒有辦法闡述太深入的理論,但在三天歡樂的營期裡,就已經深入淺出的傳達出許多概念,為孩子們將來的競爭力作最早的奠基。

特色圖片取自Conversion Lab

發表迴響