如何從零開始高效建立一個App 設計項目？今天這篇好文總結了一套高效的工作流程，教你如何把項目拆分成可執行的方案，實例演示，建議收藏。

建立一個新的設計項目真的很難。無論你是一個自由職業設計師，還是在很火爆的產品機構工作，又或者為大型設計團隊提供服務……從頭開始都是令人生畏的。必須得有自己的一套思路來解決問題，提供視覺，并且漂亮平順的將其轉變為產品設計。

我覺得我現在已經非常高效，其它設計師或許能從我的這套方法中得到啟發。

注：我并不是向你展示如何做一道菜啊，僅僅是怎么切菜（如何把項目拆分）然后把放到鍋里炒

目錄：

1. 創建文件夾（廢話，這是必須的）

2. 選擇顏色

3. 選擇字體

4. 確認網格

5. 建立一個框架

6. 轉變成高保真原型

1. 創建文件夾

理由：使所有的設計文件歸類齊整

工具：Finder（mac系統自帶的文件管理）

千里之行始于足下。我的文件夾結構讓我更有條理，同時也是一個非常好的方式分享設計資源給不同的角色，比如市場、開發等。

我選擇添加下劃線來確保這些文件夾排在列表的前面

• _assets（素材）: 這個文件夾用來和開發組分享。它包括建立這個app項目的所有素材，如圖片、內容、字體、圖標、LOGO等等。
• _exports（輸出）: 每一次導出的PNG圖片都在這里，這個文件夾和市場部共享，因為他們總是最接近各種市場終端的人，比如網頁、手機端、社交媒體等。
• UI-design（界面設計）: 這是我的源文件，比如新做一個項目文件就把它保存在這里。

2. 選擇顏色

理由：為我的項目確定最基本的色調

工具：http://Coolors.co

確定顏色是起步時最簡單的一步了。如果你為一個已經存在的項目工作，顏色應該已經確定了，到了那個時候，直接去問同事好了。

我的設計系統里一般包括5種主要顏色：

• 主品牌色
• 黑色
• 重點1（成功）
• 重點2（警告）
• 重點3（危險）

至于為什么這樣選顏色，可以閱讀之前寫過的這篇文章：https://medium.com

我使用的這個工具叫Coolors （作者是FabrizioBianchi）來幫助我生成一個顏色板。你只要敲一下空格它就會隨機為你調出顏色。一旦你找到喜歡的顏色后，鎖定它，然后生成你要的其它顏色。如果你的主品牌色已經確定了，你可以直接輸入十六進制的顏色值，鎖定那個顏色，然后敲空格來生成其它顏色。

你看到那個“夢寐以求”顏色了嗎？鎖定它。然后繼續操作直到你找到這5大顏色為止

一旦我已經確定了幾大主色，我會把它放到Sketch調色板模版文件里。這個模版文件是是已經存在的了，所以我只要更新剛才生成的顏色就可以了。

我的模版里有一個輔助色，但我并不總是需要它。

對于如何建立一個成熟的樣式表，可以看看這個：https://medium.com

3. 選擇字體

理由：給我的app增加字體

工具：Google Fonts 和Font Pair

字體對設計也是非常重要，和顏色一樣，所以值得需要花點時間挑個合適的字體。因為挑選恰當的字體對于app的用戶相當重要。

嘿Jon，你打算給你的設計挑選一款怎樣的字體呢？

哈哈，我很高興你這樣問，故我在挑選字體時會有以下幾個問題自問自答一下：

• 可讀性：這些文字適合長時間的閱讀嗎？
• 伸縮性：當字體過大或過小的時候它可以被容易辨認嗎？
• 可變性：是否有兩種以上的字重供選擇？

谷歌字體（Google Fonts）在去年更新了頁面，它真是太好用了。我總是用黑、白背景來確保字體在任何時候都可以使用，易于閱讀和辨識。

如果你喜歡使用多種字體，比如說標題一種，內容一種，你應試研究一下 Font Pair。他們做了大量的工作來展示兩種不同字體在同一終端的不同表現。它使得挑選兩種更好看搭配的字體變得非常簡單。多說一句，這些都來源于谷歌字體，所以你不必擔心找不到或者為其付費之類。

務必測試同一字體的文字、數字和標點符號。

因為總是在你發現一個漂亮的字體時，它有非常奇怪的數字如“9”或者一個詭異的感嘆號等。你肯定不想在已經做完 24屏后發現這個棘手的問題。

一旦在你挑選好字體（集）后，請在Sketch里面寫點東西，比如標題、內容、超鏈接等。除非字體放到文章頁面里，否則絕對不要向設計中添加它們。如果你真的決定調整字體，請不要同步到已經上線的項目里面去。

我的Sketch模版文件已經定義好了非常標準的樣式，所以我才能直接選擇、改變或同步：

4. 確認網格

理由：確立軟件的整體一致性

工具：Sketch 和計算器

現在非常常見的是劃分成8的倍數。

為什么是 8？

很簡單，因為最主流的屏幕像素都是以8的倍數來劃分的。在下面這個表格，每一欄，無論寬、高最終都以 8像素來均分：

根據這些信息，你就可以確定網格的尺寸。

首先，確定你的app如何呈現：

全屏寬：全屏寬的app直接到兩端邊框。如果這是個網頁app，你的設計將延伸到瀏覽器的最邊緣位置。

浮動：一個浮動的app會貼在網格的固定部分，通常是窗口的中間位置。

對于浮動app，我喜歡參考線的間隔和欄同時被8整除，這里有個簡單的換算：

（12欄*寬）+（11間隔*寬）＝ 整體布局寬度

混合：一個混合app是由全屏寬和浮動元素組成。這個Medium網站就是一個混合app，因為它的標題是全屏寬，但是它的內容區域卻被固定在740像素。

△ 這個布局是一個有著某些全屏寬元素的浮動布局

最后一個提示 。默認Shift+>在Sketch里面移動是10像素。這一點非常惱人的當你在8像素網格里面操作時。但幸運的是，AnthonyCollurafici 做了一個叫Nudg.it的軟件來幫你解決這個問題。

5. 建立一個框架

理由：為了快速迭代軟件布局和用戶體驗

工具：就是矩形啦

在我制作線框圖模型之前，我喜歡做一個被我叫做“色塊圖”的東西來建立我的各種頁面布局區域。這個想法是初始你剛剛定義的網格，并且快速的形成塊形在頁面中最重要的位置。

我為一個聊天軟件設計的塊形：

頁面的顏色沒有意義，就是顯得我有點愛國罷了。

這個雖然僅僅花費我90秒生成，但是這個是整個設計頁面的參考了。我寧愿要這個色塊模型而不用線框圖是因為，每當我用線框圖的時候都會不自覺的開始設計高保真原型。我是一個差勁的設計師嗎？我只是看了太多細節的線框圖罷了，僅代表個人的觀點。

基本在用戶設計體驗階段，使用色塊圖工作流程能確保每個交互設計都能帶來良好的用戶體驗。

6. 轉化成高保真

盡管我并不想讓你們有如下的感覺……

……但這就是你展現你自己能力的時候了！

在高保真階段最重要的一件事就是堅持我們上面的5個步驟：

• 保存到相應的文件夾
• 僅僅使用顏色板里面的顏色
• 不要在字體里面迷失
• 總是要遵照你的網格
• 在高保真之前進行色塊圖設計

總結

這里就是我做新的設計項目的步驟了。如果你對我的Sketch設計模版文件有興趣的話，你可以在這個鏈接（UX Power Tools）里面查看。更詳情的資料都在這里。

譯者：Tiger,Run！

歡迎關注微信公眾號：非科班設計

「完整的設計流程合集」

1. UI 設計丨http://www.hx168888.com/full-ui-design-process
2. 品牌設計丨http://www.hx168888.com/complete-design-work-flow
3. 交互設計丨http://www.hx168888.com/complete-interactive-design-workflow
4. 圖標設計丨http://www.hx168888.com/icon-design-flow-skills
5. UED 團隊設計丨http://www.hx168888.com/china-ued-teams-workflow

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com