手把手教你在Sketch建立一個新的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/ux-power-tools/5-things-to-do-before-you-start-your-next-design-file-in-sketch-or-preparing-your-design-mise-en-ff7ea9fe3722#.g6rh1jm12

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

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

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

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

對於如何建立一個成熟的樣式表，可以看看這個：https://medium.com/ux-power-tools/making-stylesheets-in-sketch-47ac1f274cdc

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！

校對：逗砂

原文鏈接：https://medium.com/ux-power-tools/a-step-by-step-guide-for-starting-a-new-app-design-project-in-sketch-469df0f24af8#.m98cqs4dz

本文由非科班設計翻譯小組翻譯，首發於公眾號：非科班設計

推薦閱讀：