你應該知道的產品設計的14招

 　　我在Dribbble上發布作品之後，收到了許多積極反饋和問題，這也促使我動筆寫這篇文章，跟大家聊聊我做產品設計兩年來的經歷和思考。

　　說來慚愧，在產品設計上我一直沿用相同的設計流程，不過在我看來，它可能確實接近於理想的狀態。我將這些技巧劃分為四個部分：預處理、工作過程、後期處理以及效率技巧。下面讓我為你一一道來。

　　A、預處理

　　1、繪制草圖

　　繪制草圖其實沒那麼多講究，用一張紙還是一個本子都無所謂，哪怕是手邊的一份傳單都沒問題，最重要的是要將腦海中的想法訴諸筆頭，記錄下來。只有畫出來，才能真正記住它們，不被遺忘。因此，我們可能需要保存一堆記錄著點滴靈感的報紙、賬單、雜志封面甚至餐巾紙(笑)。

　　靈感的草稿本

　　不過對我而言，最理想的載體還是實實在在的東西，比如Moleskine的筆記本。我特別喜歡時不時翻看我記錄在其中的想法和靈感。如此，我便可以回顧曾經的想法，並借此調整甚至重塑此刻手頭項目的設計思路，或者延伸出更多的想法。

　　2、搜集圖片

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

　　預處理的第二個階段是搜集圖片，這也是我每天都做的事情。數以百計的風格，成千上萬的圖片充斥網絡，但是我特別喜歡的還是老派的風格。我會在Dropbox中為這些圖片分門別類(Dashboard、iOS、插畫，等等)。當我拿到需求或開始項目的時候，會通過這些圖片來尋找靈感。Dropbox會預先同步好所有圖片內容，因此無需聯網你就可以隨時隨地查看它們。 (另外，小編也一如既往的推薦國內人氣設計師網址導航：http://hao.uisdc.com/ 裡面有全球最贊的12個圖庫資源)

　　3、Moonboard與准備工作

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

　　做好Moodboard很有必要。

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

　　當我開始一個新項目的時候，我總會准備一個文件夾來收納相關信息，PSD、截圖、靈感以及資源各一個文件夾。其中，名為靈感的文件夾中收納著我從網上搜集的、與項目相關的所有的文件，用以激發我的靈感，這就是我的Moodboard。

　　這個文件夾裡面應該包含從基礎色版，到Behance上完整的案例研究等各種類型的信息。如果這是一個涉及用戶信息的APP，那麼你還應該有吸引人的人物照片。有時候我用不到這個文件夾，當然，那是另外一種情況了。

　　B、工作過程

　　4、我不在意線框圖的質量

　　我並不是那種花費半年來打磨線框圖原型的人。如果客戶能預先准備了線框圖那就最好了。

　　好的客戶會在准備好自己的想法和思路，甚至會畫在紙上。用線框圖原型舉例，並不是想說它，我只是強調深入理解產品本身非常重要。你的UI/UX技能、想要表達的想法與你本身才是決定最終產品的因素。借助線框圖，你可以了解客戶的想法，弄清楚需要幾屏來構成整個應用。借此，你也會更加了解應用本身。

　　有一種情況絕對是設計師的噩夢：客戶希望將線框圖1:1地輸出成最終產品，分毫不改。客戶您好，您是猴子請來的逗比麼?這哪裡是設計師干的事情啊?所以，當你碰到這樣的項目的時候，盡快搞定，然後像博爾特一樣奔跑著遠離這個項目，劃清界限。

　　5、大尺寸PSD背景

　　7個月前我剛開始在Badoo工作時，看到同事Sasha的工作過程時就在想，這哥們恐怕完全不明白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圖層整理得井井有條，仿佛隨時迎別人檢閱一樣。我不用為每個圖層單獨命名，因為你可以很輕易地通過我的文件夾命名和結構來了解每個圖層的功用。

　　最近我開始同@LukášKus一同工作的時候，他老是抱怨他在AE中沒有這樣的結構化文件夾。你看，這很重要吧?

　　如果你想知道更多PSD禮儀，不妨看看PSD禮儀白皮書。

　　8、與朋友交流

　　朋友們對產品設計的反饋，對我而言是至關重要的信息。我可以很輕易地創建一組小型的用戶測試，並且傾聽朋友們反饋它們碰到的問題，以及修改意見。這些想法常常能為解決問題開拓思路打開一扇全新的門，我會在產品開發的各個階段進行這樣的測試，獲取反饋。此外，這種測試誰都可以參與，不過我一般會將被測試者分為兩個部分：來自社區的UX設計師以及普通用戶。這主要是因為產品受眾常常是普通用戶，而非設計師。

　　9、界面設計

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

　　三種不同的標識線，第一種是帶數字標號指向下一屏的，第二種是屏內指引線，第三種是指向外部應用和鏈接的線。

　　含聯系人的預覽圖

　　完整預覽圖

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

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

　　C、後期處理(設計規范)

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

　　10 色彩規范

　　做好色彩規范是我謹記的第一要務。在扁平化設計風行的今天，我們終於可以盡可能少地為按