建構自己的能力體系 (一)：入門 UI
休學也有一陣子了，回想之前好長一段時間的轉變，我終於能拋下後顧之憂，真正的跟著感覺走。真心感受到體制的可怕，長年以來對人造成的影響，不是說隨意即可抹除；有時深陷其中甚至不會自知。
這段時間裡，我並沒有給自己設限，自由延伸並探索；我回到原點重新出發，試圖打造個人的「有機綜合能力系統」。
關於「有機綜合能力系統」，講白了就是從「個體」而非「專業」出發，為一個人量身打造的解決問題能力和知識體系，它讓我們能喜歡又擅長所做的事情，不用把自己強塞在任何框架中，而且還生產力十足。這個概念引自詹雨安的寫在休學之後(三): 長線藍圖這篇文，覺得它很好的說明了個人長期以來渴望的學習方式：自由做自己的同時，仍能創造高價值。
心中一直有個懸而未解的難題：常有一些 idea 想去實現，但直接很直覺的把成品做出來往往會因考量不足，最後變成無意義的產出；不過想分析卻又不知該如何下手。也因此產生目標：「訓練自己有辦法在考量夠全面的條件下，做出像樣的產品」。
然而這種標的非常模糊，不知道內容是什麼，也不知該如何下手。其實自己也是經過一段時間的知識積累，才逐漸想出實行的辦法。
就是在更深入了解現在常見的職業結構和產品產生的流程後，我終於能概括出，那些與目標相關性很高的領域。
這些領域包含：
PM：產品管理 (Product Management)
UX：使用者經驗 (User Experience)
UI：使用者介面 (User Interface)
Web Development：網頁開發
如果想在「考量夠全面的條件下，做出像樣的產品」，我發現我得學會「從市場定位分析開始，歷經使用者研究、產品呈現，到最後做產品開發」。
而上述的市場定位分析、使用者研究、產品呈現，還有產品開發，分別對應並概括性地描述了以上的 PM、UX、UI，還有網頁開發，反映如上圖的流程；也就是說如果我想達到目標，就該去深入研究這些領域的內容、之間的關聯，以及流程等。
其實這就是ㄧ個「有機綜合能力系統」，涉及多個領域的知識與技能，彼此相互關聯，形成一個能解決問題的系統能力。
這是個龐雜的系統，勢必在學習和訓練上，有個漫長的過程。考量其中因素，我可能會迷失、停滯不前、有跨不過的檻等等，有種種問題會遇上。
為了追蹤學習歷程並提供反饋，確保自己的成長；加上最近收到入伍令，想要收束當前進度，決定開始發一個系列文。除了知道身處何處，以及更好的定位並解決問題，也能摸清自己的能力級別，同時訓練語言組織能力。
接下來的內容，是關於踏入整個能力體系第一步的細節。我把它分成三個部分來記錄：
(ㄧ) 切入點：整個能力體系，我是從哪個領域切入，以及選擇的背景原因。
(二) 自學過程：自己是如何去探索並摸清切入的領域。
(三) 規劃：就當前的認知與結論，所制定的短期實作訓練，以及長期的能力體系學習規劃。
[切入點]
整個能力體系，我選擇的切入點是 UI。
什麼是 UI？UI 原本是工業設計的概念；人若要和其他「非人」的事物去互動，比如物件、軟體硬體之類，中間產生的媒介就是 UI。這邊舉個例子：
人和計算機怎麼互動？計算機的運算能力強大，可是我們沒辦法用人與人之間常見的溝通方式來讓計算機運作，比如談話；也因此產生現在看到計算機常見的「數字顯示屏」還有「數字和功能按鍵」。藉由中間這個由「輸出：數字顯示屏」與「輸入：按鍵」組成的「媒介」，一個計算機懂，人也懂的方式，讓人能良好的運用這個高效率的計算工具。
生活中到處都是 UI，簡單如醬油罐，到現在常見的網頁等等，這些讓你能「懂」工具和服務怎麼使用的媒介全都是 UI。
然而隨著近年來顯示裝置的大幅普及，一堆服務、工具等等都是用軟體呈現，所以和軟體互動的介面，像是網頁、App 等等這個「軟體 UI」的領域便逐漸的被獨立拿出來討論，所以現在聽到的 UI 通常代表著軟體 UI，而「人機互動」這個概念才是在講比較廣泛、工業設計提及的使用者介面。
回到能力體系，我要達到的目標有非常多面向的能力需求，然而為何要從 UI 出發呢？
這是一個綜合分析下的結果，也考量了一些心理學上的因素。
人本身受情緒驅動，所以才會常常發生這種，即便理智告訴你這是重要的事，情緒不對仍然不會去做的情形。所以我在做選擇與規劃上，都會注意這一點，讓自己能順其自然的、喜歡去做一件事，進而克服困難；畢竟擺在眼前的是個耗時費力的目標，隨時都有疲乏的可能。像以下三個因素，其實都和情緒驅動多少有關聯：
- 首先是回饋：在整個體系中，UI 是裡面最接近「產出結果」的能力；我能非常明確的感受到自己做了什麼，回饋感強烈，成就感因此而生，會更願意持續做下去。
- 再來是一個策略性的安排：整個能力體系有很大ㄧ部分都是涉及資訊搜集與研究；即使分析能力到位，如果實作能力還不夠，就只能寫一些歸納和論述。這樣的能力指標也就不容易去評估，對個人而言比較缺乏樂趣。也因如此，我會希望自己在分析能力到位時，可以延續把相應的產品跟著做出來。
- 「創造」的張力讓人能突破困難：成長本身並不容易，在沒有外力催促下，一個讓人能克服困境的重要原因即是「創造」。作曲家 Robert Fritz 寫過的最小阻力之路這本書提到：「只有創造的結構，才能產生持續的張力」；那種能把自己獨一無二的價值傳遞出去的結果非常有吸引力，提供我們源源不絕的動能。而 UI 實作對我而言，就有這種效果。剛好寫這篇文章的期間，看到黃岳涵的發文，裡面提到他的個人經驗很切實的印證了這個概念。
可能這邊會有個問題：我說 UI 是整個能力體系最接近「產出結果」的能力，難道網頁開發不是嗎？
原因是我曾有過 MERN (MongoDB-Express-React-NodeJS) 的全棧開發經驗，所以短期內我還不打算把這部分列入訓練目標。
[自學過程]
當初在入門 UI 這個領域，專業認知幾乎為 0，我做的第一件事不外乎就是 Google。從「UI 入門」的相關關鍵字出發；不得了，這麼一查，隨便一個資訊都能產生數十條延伸出去的資訊，延伸再延伸，停也停不下來。剛開始我都不嘗試去過濾什麼，讓深度和廣度自由擴張，能看多少就看多少。
看越多就會發現雷同的資料和建議越來越多，重複性逐步提高，這時我就開始控制深度和廣度，廣度控制在「UI」，深度則控制在「實作」。
在收束之後就逐步能掌握到以下資訊，包括有哪些學習資源、入門學習的流程，還有這個領域的大致框架和樣貌：
- UI 領域的知識框架：我能大致掌握整個 UI 領域的外部輪廓，亦即 UI 所涉及的其他領域還有和它們的關聯性；以及 UI 的內部架構，像會用到的知識、技術，還有流程等等。這些資訊幫助我更容易去了解，自己在學習過程中居處的位置，知道每一步該怎麼走。
- 學習資源：那些被這個領域的有經驗人士重複強調的學習內容，像文章、網站、書籍、影片，還有課程等。我也更清楚在什麼條件下適合用什麼學習工具。
- 流程規劃：如何有目標、有效率，並有累積性的去學習這個領域，也就是接下來要提的「規劃」。
至於前面提到，為什麼要先把廣度控制在「UI」，深度則控制在「實作」，接續也會說明。
[規劃]
邊自學的過程，我參考不少資訊，為自己制定了一個累進式的學習策略，持續反饋，持續擴增能力範圍；把原本看似困難、巨大且摸不著邊際的目標，拆成多個馬上就能做的小目標。這麼做除了能掌握進度，更能讓整個學習像打遊戲一般，關關來關關過，做起來還十分上癮。
參考資料中邏輯思維創辦人羅振宇的怎样逼自己成为一个上进的人，以及怎样找到一份合适的工作這兩個講座，我覺得頗有啟發性。像這個學習策略，還有前面提到選擇先學 UI 的反饋等，都有應用到講座一些內容的底層邏輯。
關於策略，我又針對「整個能力體系」以及「UI 實作」訓練，分別規劃了對應的「長期規劃」與「短期訓練」。
[短期訓練]
回到剛才的問題，UI 整個領域，為什麼我要把範圍先限制在「UI 實作」呢？
因為在深入了解後，我發現粗略而言，UI 本身涵蓋「視覺」，還有「原理」：前者如同字面的意思，我們在手機、電腦上「看到」的那些頁面的顏色、排版呈現等等都是「視覺」，而這些呈現的「背景原因」則是「原理」。
一般 UI 的製作流程都會先從原理開始，決定了大量的背景因素之後，才來決定視覺要怎麼做。
然而參考過不少老手的學習過程與建議，我發現 UI 領域的學習則是相反，會先從訓練視覺製作開始，隨著熟練度提高去逐步增加背景原理的考量。這也是當初控制資料搜索範圍的原因，我要先把焦點放在 UI 實作上。
同時我也藉著這些參考，制定出訓練自己 UI 實作能力的方式：
第一步，產品臨摹：找到現有的產品介面，像是 App、網頁等等，小至 Icon，大則到整個頁面，從 0 開始嘗試複製一份。講白了就是把看到的頁面、按鈕等等，用軟體自行繪製出來，做到視覺上一模一樣。
我會在這個階段藉由練習去熟悉各種軟體操作，像 Sketch、Photoshop 等，並詳閱各大設計規範。
設計規範決定了在各種顯示裝置上，UI 該怎麼呈現。
當熟練軟體到一定程度時，嘗試去跟百日 UI 訓練 Daily UI Design Challenge；如同字面意思，一天一份 UI 臨摹練習。
看過大量 UI 設計師的訓練歷程，完全少不了臨摹這塊。這一步大大奠基了底層功力；像美感、常見的視覺設計規則等等，都會隨著練習量增加、注意到更多細節下，變成實力的一部分。
第二步，重新設計：使用各式各樣的網頁、App，感受它們使用體驗的不足之處；小至修改這些地方，大至重新設計整個平台。
當基本功力足夠時，能不費力的做出像樣的視覺，開始這一步驟。
如同上述，使用體驗，也就是剛才提到 UI 領域的背景原理，會在這個階段被大幅考量。
這個步驟可以讓我更熟悉常見的設計原理，像是頁面的順序，還有某某按鍵擺放在哪裡的原因。
最後，自行製作：想個產品自己來吧。
當覺得自己已經經驗足夠，能力達到一定水準時，可以嘗試在沒有任何參考下，執行整個 UI 設計流程。
比如試想一個 App，從頭到尾把視覺、背景考量，還有製作流程等等完整呈現。
以上三步，敘述看起來挺簡單，然而要製作出合格的產品，每一階段都需要下足功夫，大量的經驗累積和能力提升才能走到下一步。
可以注意到，雖然說從「UI 實作」出發，其實整個訓練的過程中，「UI 原理」一直被持續的加進來，逐步形成完整的 UI 製作能力。
[長期規劃]
如同前面所述，我為自己建立了一個累進式的學習策略。
先回到剛剛的短期訓練，不是有提到我把 UI 領域拆解，由實作訓練開始，逐步的加入背景原理考量？其實這就是累進式學習策略的展現。
至於對整個能力體系，我用的就是類似的規劃方法，從 UI 到 UX，最後到 PM，把每個領域的學習拆成好幾個階段，相反於產品產出流程，逐步累積。
如上圖一樣，從 UI 開始，由右而左學習。
最後，我沒有去深入規劃細節，畢竟隨著了解的資訊增加，看法可能會翻新，安排自然會調整；想得太細自然缺乏必要性。
初步自學 UI，已經看了上百篇的文章。剛開始在查找的過程，真的會有迷失方向的恐慌感，不知身處何處，也不知什麼時候該停；直到累積大量的資訊後，方向其實會逐步浮現。
休學走在體制之外，雖然未知讓人充滿恐懼，且摸不著頭緒。然而就像自學 UI，正是這個從無到有，亂中找序的過程，讓一切充滿樂趣。
