評價高！變身超強視覺設計師！巨匠電腦分享UI設計流程

錚／

變身超強視覺設計師！巨匠電腦分享UI設計流程

本文轉載自優設網 uisdc.com，原文來自 UI/UX 設計師 Jan Losert 在 Medium 上向大家分享從事產品設計多年來的經驗與思維。
我在 Dribbble 上發表作品之後，收到了許多積極的回應和提問，促使我動筆寫這篇文章，和大家聊聊我做產品設計兩年多來經歷和思考。

說來慚愧，在產品設計上我始終沿用同樣的設計流程，不過在我看來，這套流程確實接近理想狀態。我將這些技巧劃分為四個部分：事前準備、工作過程、後置作業、效率技巧，接著讓我來一一解釋。

事前準備

1.繪製草圖

繪製草圖其實不用太講究，用一張紙、一本筆記本都無所謂，哪怕是手邊的傳單都可以，最重要的是要將腦海中的想法訴諸文字、圖像，確實記錄下來。唯有畫出來，才能真正記住它們，不被遺忘。因此，我們可能需要保存一堆記錄著點滴靈感的報紙、賬單、雜誌封面甚至餐巾紙。

不過對我來說，最理想的記錄工具還是實實在在的東西，例如 Moleskine 筆記本。我喜歡不時翻看我記錄其中的想法和靈感，如此我便能回顧過去的想法，並藉此調整甚至重塑當下手邊產品的設計思維，或者延伸出更多的想法。

2.搜集圖片

藝術家是收藏者，而非囤積者。要知道，這兩者有個區別：囤積者會無選擇地收納，而藝術家則選擇性地收藏。藝術家只會搜集自己真正熱愛的東西。 —–Austin Kleon 《像藝術家一樣偷竊》

事前準備的第二階段是搜集圖片，這也是我每天都做的事情。數以百計的風格、成千上萬的圖片充斥網路，但是我特別喜歡的還是老派的風格。我會在 Dropbox 中為這些圖片分門別類（Dashboard、iOS、插畫…等等）。當我開始執行專案的時候，會透過這些圖片來尋找靈感。Dropbox 會預先同步好所有圖片內容，因此不需要網路你也能隨時隨地查看這些圖片。

3.Moonboard 與準備工作

我們可以透過很多網站獲取靈感—–Dribble、Behance、Pttrns、Pinterest 等等，我們常常可以從中找到別人做的類似產品。此外，也許別人正試圖解決與你同樣的問題，因此，你也可能從中受益。

做好 Moodboard 很重要。

什麼是 Moodboard？Moodboard 是指經由對使用者與產品認知的色彩、影像、數為資產或其他材料的蒐集，可以引起某些情緒反應，作為設計方向與形式的參考。

當我開始一個新專案的時候，我會準備一個文件夾來收納相關資料：PSD、截圖、靈感以及各種資源各有一個文件夾。其中「靈感」文件夾就收著我從網路搜尋來的、與專案相關的所有文件，用來激發我的靈感，這就是我的 Moodboard。

這個文件夾裡應該包含從基礎色版，到 Behance 上完整的案例研究等各種類型的訊息。如果這是一個涉及使用者訊息的 APP，那麼你應該得要有吸引人的人物照片。

工作過程

4.我不在意線框圖的品質

我不是那種花費大半年來繪製線框圖原型的人，如果客戶能預先準備線框圖就再好不過了。

好的客戶會準備好自己的想法和思路，甚至畫在紙上。用線框圖原型舉例，並不代表它是最好的方法，我想強調的是深入了解產品本身非常重要。設計師的 UI/UX 技能、想要表達的想法與設計師本身才是決定最終產品的重要因素。藉由線框圖，你可以了解客戶的想法，也更清楚產品本身。

有種情況絕對是設計師的噩夢：客戶希望將線框圖一比一等比例地輸出成最終產品，絲毫不改。當你碰到這樣的要求，儘快完成交付，然後遠離這個產品，趕緊劃清界限。

5.大尺寸 PSD 背景

七個月前我剛開始在 Badoo 工作時，看到同事的工作過程就在想，他恐怕完全不懂 Photoshop 是怎麼操作的吧？不過我現在正準備用他的方式來繪圖，因為這種模式更適合我：當你正在做一個 APP 或訊息量較大的 Dashboard 的時候，使用大尺寸背景對設計界面更有幫助。

在建立新的 PSD 文件時，基本上我會將背景設置成 8000×5000像素的大小。要知道，我不只是建立一套 UI kit，在大尺寸背景下工作時我能看到每個元素相互之間的搭配，體會每個界面狀態的差別。此外，用這種方式來設計，還能輕易地截取小圖或某一狀態/階段下的產品圖片給開發者。

6.用一個 PSD 收納所有界面

當我做一個普通的 APP 界面的時候，我也會用到其他 APP 的 UI 界面。這個時候，我更喜歡其他所有的界面都存在於一個 PSD 中，即使它們不是統一個產品的。

我很清楚，這種情況下先用 Sketch 會很有幫助，但我更喜歡使用 Photoshop，並將大量不同 UI 文件放置於同一個 PSD 當中，而非幾十個單獨文件，如此一來，我可以直接快速地從一個 UI 中選擇塗層拖放到當下製作的界面中，而不需要在幾十個不同 PSD 文件中搜尋某個圖層。

7.文件夾與規範

我的桌面上只有圖示，每個專案每個客戶都有單獨的文件夾。每個文件夾都是照著相同推責整理内容，就像我的 PSD 圖層結構一樣。我的每個 PSD 结構都非常有條理，整理它們的時候，一旦發現一個文件夾的圖層超過 8 個，就會新增文件夾，將不同屬性的圖層區分、歸納。我會將 PSD 圖層整理得井然有序，彷彿隨時歡迎別人檢閱一樣。我不用為每個圖層單獨命名，因為任何人都可以輕易地透過我的文件夾名稱和架構来了解每個圖層的功用。

8.與朋友交流

朋友們對產品設計的反饋，對我而言是相當重要的訊息。我可以輕易地建立一组小型的使用者測試，并且傾聽朋友們反應它們碰到的問题，以及修改意見。這些想法常常能為解决問題開拓思路並打開一扇全新的們，我會在產品開發的各個階段進行這樣的測試，獲取反應。此外，這種測試大家都可以參與，不過我通常會將受測者分為两個類別：UX 設計師以及一般使用者。主要是因為產品使用者通常是一般使用者，而非設計師。

9.介面設計

當我或客戶準備好線框圖原型之後，我更傾向將它們合併到一個 PSD 文件夾。接下来，我會確認介面中的細節，點擊不同的地方會產生什麼效果。在這個過程中，我們常常能發現缺失的環節和需要補充的介面，以及其他的錯誤，這些都是客戶和我們最初考慮不周的地方。如此一來，我便可以將所有的介面和元素放在一起，综合起来看。當我面對一個有 15 種畫面的 APP 介面設計圖的時候，就會發現讓他們保持一致風格是一件很難的事情，最初的設計準則也因此需要調整。

三種不同的標示線，第一種是帶數字標示指下一畫面的，第二種是畫面內指引線，第三種是指向外部程式和鏈結的線。

包含關係人的預覽圖

完整預覽圖

關於樣式——我所使用的原型設計樣式和很多設計師差不多，但是比起耗費大量的時間去繪製複雜的指引線展示互動過程，我更願意使用代表下一畫面的數字標示和簡單直觀的指引線来展示我的設計。這種方式有點像過去的遊戲說明書，但是它比起印刷電路板般的的指引線地圖好多了。如此一來，你便可以在整張圖上看到更多有效的訊息。

為此我附上PSD，讓大家更容易理解我的想法。

後置作業（設計規格）

終於接近尾聲，最後一個部分是建立設計規格，檢查並確保視覺一致性。事實證明，這個環節是過程中極為重要的部分，無論產品專案是大是小。在大型專案中，如果要改變某些元件的屬性，通常無法百分之百確定是不是把所有相關元件都改正了。有了設計規格之後，我們就能確保 UI 中不會出現 50 種不同濃淡的灰色和 14 種不同尺寸的字體。

10.色彩規格

建立色彩規格是設計師該謹記的首要任務。在扁平化設計盛行的今日，我們終於可以盡可能減少為按鈕和文字設定色彩規格。你可以在 PSD 中建立類色 Photoshop 調色板一樣的色彩規格圖。

11.版面規格

另一個重要規格就是版面樣式和字體的規格。將每個應用到的字體、大小、粗細、字距、行距等規格明確地標示在 PSD 中，這將大大地減輕設計師和開發者在規格化上的負擔。

12.UI Kit

當討論 APP 與網站一致性的時候，UI Kit 就顯得極為重要了。同時，如果你身處設計師團隊中或者與前端工程師協作的時候，UI Kit 同樣是不可或缺的。有了這份標準化的文件，設計師可以隨時隨地抓取 UI 元素建立新的介面，而前端工程師也能清晰地了解每個 UI 元素的樣式，不用每遇到問題就跑來問設計師了。

值得注意的是，很多大公司依然未曾注意產品的 UI 元素一致性的問題，CSS 樣式一次又一次地重寫，你會發現同一個按鈕在三個不同程式中有三種截然不同的說明，設置截然不同的樣式。因此，千萬不要忘記保持一致性。

效率技巧

13.todo

我保持一切井然有序的祕訣在於使用 todo list。使用什麼樣的 APP 並不重要，重要的是執行。我喜歡 Cultured Code 開發的效率工具 Things，偶爾也喜歡用紙張記錄各種待辦事項。完成所有待辦事項的感覺很棒。我曾經沈迷於接手所有寄送到我信箱的專案，但是現在我才發現，最暢快的還是一次專注於 1-2 個專案，並且 100% 地完成它們之後，再開始新的專案，這比起同時與 5 個不同專案奮鬥來得更有效率。

如果你同時追兩隻兔子，你將空手而回。—-Russian Proverb

14.目標

明確知道自己的目標是好是，但是千萬不要因而受到束縛。我會為自己訂定兩週計劃，並且定下季度目標。同時，我會讓自己嘗試新的事物，並設定可達成的目標（例如使用 AE 製作自己的第一個動畫），同時不斷精進手邊的專案直到完成。

What else?

我不使用滑鼠，只用觸控板，並且學會所有快捷鍵。我使用 Skala Preview 將 Photoshop 上的顯示内容輸出到 iPhone 上。目前我還在學習 AE 和 Sketch。建立原型的时候，我使用 InVision 來處理網頁設計的項目，而 iOS 程式則使用最新的 MarvelAPP 來應對。對我而言，使用紙筆設計 UI 比在 iPhone 上拖曳来的更快。有時候我依然會用 POP 来建立早期原型。