前言
雖然筆者使用 Functional map 的次數不多，可能對於這個流程還不是很熟稔，也許尚有一些細節描述不是很完整，但以下我將分享在這個過程中獲得的一些體悟。
為什麼會需要 UI 設計流程？
我在過去的工作場合和接案的經驗當中，比較沒有機會接觸到完整 UI 設計流程 ( 包含使用者故事、Functional Map 等）大多時候是接受到客戶或需求方想要做什麼樣的網站、主要功能、視覺風格後，就直接在設計畫面。
所以過往完全不曉得為什麼需要使用者故事、Functional map 、Flow chart 這些文件，因為他們不會直接影響到視覺上美或不美。但後來在上過 UI 設計課後，才體會到這些文件解決的問題和美感是完全兩碼子事。
📖 關於 Functional map 是什麼以及 UI 設計流程有哪些，強烈推薦看 Akane 老師這篇文章： 讀者來信：UI 設計流程 - 嫁給 RD 的 UI Designer
視覺設計上處理畫面平衡、配色、風格統一性等，其中另外一個重點是區分資料的重要性，進而處理視覺重點、視覺的走向。
舉例來說在每一個元件設計過程中，腦中就會過一遍：假使兩個按鈕並列，該讓哪一個按鈕突出？哪一個按鈕弱化？ 但當整個網站或 App 充滿大量按鈕功能時，都這樣考慮時，就會更複雜也更沒有效率。
而 UI 設計流程就是為了解決這樣的問題 —
我們需要明確定義整個網站或 App 所要達成的目標或核心功能是什麼？會有哪些類型的使用者？他們會遇到什麼問題？核心功能能夠協助到他們嗎？接著再更細緻的確認每一個功能需要哪些資訊、內容後，最後長出頁面流程和結構也就是畫 UI flow 和 Wireframe 的階段。
當我第一次在專案中執行使用者故事、Funtional map 、Flow chart 這些流程時，因為是第一次執行，還矇懞懂懂的不知道怎麼做是最好的，但就都嘗試照著流程一步一步的走過一遍。到最後進入畫面視覺設計時，我也才確實感受到這些文件的用意。
那個功能是首要之重啊！
型態隨其機能 Form follows function.
– Louis Sullivan
只要是念過設計相關科系的人，一定都會知道上面這句影響整個設計的理論吧！
型態隨其機能意指萬物的型態永遠追隨功能產生，沒有過多的裝飾，如此為美的、自然的。[註 1]
我過去在做網頁設計時，還真忘了這個真理。不斷地想要加入什麼元素、裝飾，試圖讓使用者印象深刻。
但捫心自問，這麼做真的有其必要嗎？我真的需要這樣『不斷吸引』使用者嗎？也許對第一次瀏覽網站的使用者來說，絢麗的視覺的確是吸引人、讓人印象深刻。但這是我們真正的目標嗎？如果是的話這樣做也許是對的。可是如果我們是希望使用者更舒服、自在的瀏覽網站、使用服務，那麼過於複雜的視覺或動畫，是否會分散使用者的注意力？或甚至讓使用者有不好的體驗？ 又或者是製作企業的形象網站時，是否有幫助到企業更清楚的，展示他們的理念或產品給他們的 TA？
而 Functional Map 是我認為讓數位產品實現型態隨其機能這項論點的方法之一。
在 Functional Map 的階段，被迫拋下視覺、畫面的想像；我必須先針對每一個功能去思考會需要哪些資料？會有哪些延伸功能？而這些功能、資料可以取得嗎？可以製作嗎？
當我在專案中第一次畫 Functional Map 後，我反而更清楚哪些核心功能需要先和工程師討論，可能會有哪些技術會有問題，哪些功能的資料需要和哪些人索取。
而針對核心功能的部分，我和工程師會先想著我們要如何一起解決功能上會遇到的問題，是要換技術嗎？或是這個功能可能還需要哪些資料或其他延伸功能？還有哪些功能會需要堅守的必要開發。
Functional Map 在產品開發的不同階段的影響
。開發前期
舉例來說，一塊設計的部落格的目標是為了讓作者們可以『自由的編輯、發佈文章』，因為我們相信每篇作者的經驗分享是是重要的，勝過於高點擊率、轉換率。由此我們需要讓作者在寫文章是感到舒服、自由、安全的。能夠達成這個目標的技術或平台有哪些？其次我們再討論這些平台或技術的利弊、架設的時間、人力成本，還有哪些功能需要考慮的？
。營運期間
在經營的過程當中，不乏會遇到其他技術上的問題，像是如何更快的產生頁面，或是有更多新的技術、平台產生吸引著我們；每當這些問題或誘惑產生時，我會在內心先思考一遍：這真的對我們是好的嗎？他會花費哪些人力或時間成本？值得嗎？或是再看一次我們的核心理念，這真的有解決我們現在的問題嗎？或是假使今天要另外開一個功能，那麼再列一次使用者故事、 functinal map 想想這個新加的功能會遇到哪些新的問題？會需要哪些新的資源？
從那刻起，我意識到自己從技術和視覺層面這些跳脫出來，開始思考怎麼樣做對目前的團隊是好的決定。
沒有所謂『完美的』UI 設計流程
雖然這篇文章幾乎沒有提到如何畫 Functional Map 或是怎麼樣畫 Functional Map 才是正確的（如果你真的想暸解的話推薦上 Akane 老師的 UI 設計師入門班或是拜讀老師的文章。）
我後來也意識到 UI 設計流程並沒有一套流程或標準保證你照著這麼做就會開發的順順利利或是設計出一個完美的 App 或產品。
事實上，根本就不存在所謂『完美的』產品，還有『一定順利』的設計流程。每一個團隊背景、商業模式、專案目標都不盡相同，幾乎很難複製一套流程就會得到相同的結果。很多時候是團隊或專案內部不斷的測試、討論優化設計流程去更符合團隊。而使用這些流程、文件只是為了讓設計師和團隊在設計或開發的每一個環節中，相較有意識的評估什麼才是對團隊、專案有利的。
後記
我想我之後還是會踩坑、還是會發現好像繞了一大圈或是發現哪些功能背離了初衷等等；但使用了像是使用者故事、訪談、Functional map 等這些流程後，我發現我能夠從另外一個角度和層次去思考產品、設計對於公司或團隊的關係，而不是單向性的想一個按鈕應該是實心或空心，更多時候是思考這個按鈕為什麼需要被突出？
我想，這是我獲得最大的收穫吧！
📖 註1 ：型態隨其機能 （英語：Form follows function，又譯「形式服從功能」「形式跟隨功能」等）是一項與19世紀末至20世紀初的建築和工業設計相關的原則，它意味著建築物或物體的形狀應基本與其預期的功能或目的相關。 —- 節錄自 維基百科
