大型專案生存教戰守則：系統化規範
加入果思設計之後，漸漸的也經手累積不少經驗，在 UI/UX 專案公司很有趣的一點，就是能短時間內碰到各種不同類型與大小的專案，也有滿多需要橫跨全平台設計的專案，其中經歷過最長、平台最多的就屬 friDay 影音改版了，整個專案從 UX 規劃一直到迭代改版上線，至少就歷經了兩年的時間。
針對這種功能眾多、全平台設計的專案中，非常需要有系統的整理工作流程與物件，不管是在專案進行中，或是專案結束交付檔案後，都能幫助其他協作設計師、工程師們釐清與瞭解你的設計模式，在後續修改上比較能維持整體樣貌。
在這裡，針對 UI 分享一些我工作時的習慣與過程，不過每個專案背景與規格需求都不同，沒有一定該怎麼做，走不同的路，能順利達到最後的結果就好。
所謂的全平台…
通常我們會依照專案內容而需要繪製不同裝置大小，全平台除了 RWD 網頁之外，行動裝置面還劃分了 iOS、Android 兩種，從這以下再去細分不同螢幕尺寸大小，有時還得加上平板裝置介面，非常繁雜，因此很需要仔細與能重複應用的工作元件。
在開始數百張頁面設計前，有些起手式可以先看看：
1. 了解專案輪廓
就像要開始跟別人交往時，總會想先了解對方的個性與不同樣貌，在跟不同專案開始培養感情（嗯？）之前，建議先了解整個專案的不同要點，除了原本改版需要解決的問題之外，還有比較細節的是否有什麼條件是一定得達成的？哪些元素是不可變動的？
以 friDay 影音平台來小小舉個例：片單海報與影片的尺寸比例，由於都是有版權的，不能隨意裁切，客戶也都已經建立好海量的的資料庫難以更動，在電影海報的圖片比例上就會需要固定。這些都可能會在之後影響你的設計樣式，最好是在一開始就先確認好。
2. 設定好 Guideline 樣式
這裡提到的 Guideline 樣式包含了文字、色調、元件狀態等等，盡可能先設想好整體想呈現的樣貌，依照不同狀態：Normal、Pressed、Disable 等等狀態，分別設定好 Symbol 與 Text / Layer Style 再開始整個介面設計，能幫助你釐清思緒，在後續進行數百頁的頁面製作時也會節省許多時間。
而且，通常在這種大型且迭代數次的專案中，常常需要反覆修正 UI，如果前期制定 Guideline 完整度有做足，在往後的迭代修改中就能快速無痛的批次修正整體元件。
從另一點來看，由於整個專案並不是只靠設計師一人完成，不管是在前期 UX 規劃時、後期交付檔案給 客戶端的RD、與其他設計師協作時，需要緊密與同事互相配合，如何整理出一份清楚且大家都能看得懂的檔案，能讓其他人可以有條理的修改與開發，是很重要的一件事。
因此制定好整體 Guideline 樣貌，是所有不管大小專案都要先做的，卻也是最麻煩的事情。Guideline 是可以根據後續專案的進行中，回頭慢慢修正與完善的，不用擔心是否前面設定好之後無法修改。
為什麼需要這麼做?當前期準備作業準備得越仔細，到了後期交付檔案出去之後，可以讓工程師們更清楚你希望呈現的介面長什麼樣子，他們也不需要常常做到一半就得來問你：這裡如果出現某某狀態時，你想呈現什麼畫面、字體會長什麼樣子什麼顏色？而產品最後的長相也會更接近你當初設定的樣貌，除此之外，往後你或是任何協作的同事們要接手修改檔案時，也能快速並正確的了解整體專案樣貌。
辛苦的同事們，需要大家一起愛護。
3. 善用 Sketch 中 Symbol 的元件圖層功能與 Auto Layout
以影音平台這種功能眾多且繁複的畫面來說，除了主要功能頁面外，不管是整體頁面或是元件細節，盡量不過多設計，不是所有畫面都越華麗複雜越好，請盡可能統整你的元件樣式。
減少你在未來畫介面時需要做“決定”或是“過度設計”的動作，可以幫助你整體介面的樣貌越走越歪。
當 Guideline 基本盤有了之後，在設計畫面之前，分析出可重複利用的項目，再進一步思考這些項目可以再被拆分成多少可共同使用的子元件，哪些區塊是不斷重複的 — 如卡片或表單中的文字欄位/圖片欄位/Tag 標籤。把這些元素分別設定 Symbol，就可避免過多混亂的元素，也方便一鍵替換樣式。
在這裡要提醒的一點是：不管是 Symbol 或是 Auto Layout，製作方式很多種，都可以達到最終方便的結果，你可以思考專案內容的元件變化與重複的程度，去試試看哪種元件切換模式最能節省時間。舉例來說，friDay影音有許多不同類型的片單，也常常會有策展等特殊欄位，如果在 Mockup 階段就需要達到擬真百分百的狀態，在繪製介面時要特別注意 Tag 元件的正確性，相對的，如何切換元件能達到最快速且不易出錯的狀況便很重要。
目前有許多 Plugin 都很方便製作 Auot Layout，如果單以片單 Tag 來看，整體的大小都相同，也是固定數量與樣式時，你可以選擇：
．使用 Plugin — Relabel Button
選取你需要變換字數的 Tag，按下 Cmd + J 並輸入按鈕的新文案，Tag 底部的背景寬度就會隨著你的文字增長，背景顏色也可以建立色彩 Symbol 替換，缺點則是無法外層再包一層 Symbol，但在不那麼複雜的畫面中很適合使用。
．把所有會出現的 Tag 都做成單獨的Symbol
想想片單圖上會出現什麼樣的元件，如果數量固定且變化不多，也可以選擇把所有 Tag 或是其他可能出現的元件都做成 Symbol ，在做片單 Symbol 時就可以全部一起放入，繪製 mockup 時，再去做顯示切換，將不需要出現的 Tag 關閉（None）就好。跟上一種方式相比，無需每次都另外依片單樣式去輸入替換文字。
或者你也可以稍稍變化，針對相同字數的 Tag做整合。舉例來說：像下圖中，院線、單片、影劇、試看，都是兩個字，你可以只做其中一個，在旁邊的工具欄位另外輸入新的按鈕文案與切換背景顏色，而其他字數不同的 Tag 一樣可以切換顯示。
為什麼需要這麼做? 跨裝置的專案進行時，專案範圍越大越需要整合設計元素，專案進行時所產生的 icon 與元件可能高達上百種，要記住龐大的元件庫非常困難，因此在一開始進行設計時，能夠將元件依照裝置模組化是非常重要且便利的。將元件模組化除了反覆加深視覺印象之外，也能維持整個設計系統與使用的一致性，在製作流程上能更加節省時間成本，多了許多時間去思考 UI/UX 體驗。
4. 隨手建立 Libraries，一鍵完成所有 Symbol 更新
像這種影音全平台類型專案，很容易一個平台就是幾百頁的畫面起跳，加上做圖時需要用到的示意圖片都是影劇海報，也很難使用 Plugin 套入假圖，在功能頁面這麼多的狀況下，全部做在同一個檔案裡電腦很容易跑不動（對不起我電腦就是跑不動的那個…）
所以通常我會依照主要功能去命名頁面，切分不同檔案，但在這樣的情況下，如果需要修改其中一個 Symbol，如：Play Button，改完存檔後，其他也有同一顆 Play Button 的檔案並不會一起更新，很容易改了 A 檔案，忘記 B、C、D、E 檔案中可能也有同一顆元件而遺漏修改。這時 Libraries 對於這種大量檔案頁面同時更新元件，就非常方便有效率，你只要把前面做好的 Guideline 檔案製作成 Libraries，後續只要回到這份Libraries中修改Symbol、存檔，就會一秒更新了。
分享關於 Libraries 製作的相關文章，內文中有很多不同變化，可以看專案情況活用 Libraries* Sketch Libraries: How they work, and the crazy stuff you can do with them* Using Sketch Libraries to build a better UI design system
5. 主動與部門同事保持討論與溝通
由於 UI/UX 是很講求團隊合作的工作，不管是在專案的前期或是後期、繪製介面或是交付檔案給工程師，需要時常與 UX 設計師，或是 RD、PM 們隨時維持熱度。
以這麼大型的專案來說，時程上的切分也很重要，在這個專案中的時程是以重要的畫面，與客戶討論後的開發先後順序做切分，每個功能頁面都詳細設定好完成日期，除了內部團隊會議之外，也與客戶維持固定的會議報告，隨時更新專案狀況。
在每次的會議後，勢必會有需要修正調整的地方，通常我們討論完，UX 設計師調整好 Wireframe，會直接找 UI 設計師說明哪邊做過修改調整，並且敲定好下一次修正完畢的日期或時間，再一起做 Double Check，除了能一起討論修改是否完善之外，也能防止來來回回的修正而掉了畫面。
除了在前面提到的了解專案全貌之外，整個過程中也會需要與許多不同部門的同事接觸討論，繪製介面時，UI 設計師本身也要能理解 UX，當你覺得對於畫面有疑問，或是覺得有其他不錯的解決方式時，隨時提出來與負責的同事們討論。
另外，每個工程師的習慣做法都不同，切圖與開畫面的方式都不一樣，可以在一邊畫圖的過程中，對於畫面流程、切圖做法或是動態轉場盡可能提出疑問或是請教他們習慣的做法，並請教這麼做會有什麼樣的狀況與好處，當然你不一定都得全盤照做，但這樣能大大減少在專案後期需要大幅修改而造成專案延遲的風險，也能漸漸增加對於不同部門技能的認識喔。
其實，專案的大小與平台的多寡，並不是工作時痛苦的來源，而是檔案整理與保持圖層整潔度，當每個平台都有三百多頁的狀態與流程畫面時，還要兼顧 Mockup 的擬真程度，同時得常常思考 UX 並轉換成畫面設計真的非常的疲憊（設計師真的不要只是照著 UX 大大們的畫面照畫啊…），能在整理檔案的過程中減少一點時間是一點，多出來的那些零碎時間，加一加你就能準時下班早點睡覺了啊！（應該吧…）而且當以後專案需要與其他設計師們協作，交付檔案時如果整齊乾淨，也能讓其他設計師們方便一些。
人生很難又很短，好好珍惜睡眠與下班後的時間啊…
在最後，短短介紹一下專案中滿常使用到，在整理元件與 Guideline 時很棒的 Plugin：
Relabel Button
如同上面文章提到的，在做按鈕或是元件的 Auto Layout 非常方便。
Merge duplicate symbols
應該很多人都有常常複製畫面或是元件時， Symbol 也莫名其妙跟著無限複製了的經驗，當畫面數量一多時，回頭修改 Symbol 就很容易出錯，無法保證全都修改正確，這個 Plugin 能幫助你整合重複名稱的 Symbol，確保 Guideline 與檔案的整潔度，大大減少修改錯誤的狀況。
來這裡了解改版的過程與樣貌：
我是果思設計的 UI 設計師 Chiao，我們專注在 App 設計與 App 開發，創造真正有價值的數位產品。希望這次短短的專案紀錄分享能對大家有所幫助，也期待大家一起交流，激盪出更多火花。：）
