設(shè)計教程

用sketch進(jìn)行app界面設(shè)計的步驟教程

12894

所謂萬事開頭難，啟動設(shè)計項目也是件難事。無論你是自由職業(yè)設(shè)計師、外包公司或者是大公司設(shè)計團(tuán)隊，設(shè)計項目的啟動都是讓人心生畏懼的事情。

作者Jon Moore在一個每個月都有大量簽約客戶的外包團(tuán)隊，頭銜是產(chǎn)品概念設(shè)計師（Product Concept Designer），職責(zé)就是讓那些令人興奮的創(chuàng)意點可視化的展現(xiàn)在客戶的屏幕上，從而激發(fā)他們思考出明年、后年或者大后年的產(chǎn)品迭代路徑。

這就意味著每個項目的時間都非常有限，同時要就能夠快速復(fù)盤，所以整個世界都是圍繞著高效和準(zhǔn)確。所以，我們準(zhǔn)備從高效的Jon Moore身上學(xué)習(xí)如何啟動新項目，希望大家能從中獲得啟發(fā)。

1.創(chuàng)建文件夾

為什么：保證你的設(shè)計文檔規(guī)整

所用工具：Finder

如果第一步?jīng)]做對的話，整個項目都會問題重重。我組織文件的結(jié)構(gòu)能夠保證項目的便于跟團(tuán)隊其他部門對接工作。

我在命名文件時加了_保證這些文件夾始終在列表的上面

_assets:?這個文件夾是與內(nèi)外部的開發(fā)團(tuán)隊共享的。其中包含了開發(fā)App所用到的一切資源（比如展位圖片和內(nèi)容，字體，icon，圖片和logo等）

_exports：任何時候我導(dǎo)出的PNG都放在這個文件夾里。這是跟市場部共享的，從而保證他們總能拿到各種銷售物料，方便工作的進(jìn)展。

ui-design：這里都是我的源文件。通常這個只有一份，但是如果有新的版本，我也會把之前的保存在這個文件夾里。

我創(chuàng)建了個自動動作幫助我創(chuàng)建所有文件夾。

你可以從這里得到這個動作。（鏈接:https://pan.baidu.com/s/12oET-vVSQf7-9nWFoSNgpA 密碼:h3hl）

2. 選取顏色

為什么：為我的設(shè)計項目設(shè)計一個基礎(chǔ)樣式

所用工具：Coolors.co

吸取顏色是最簡單的開始方式。如果你正在從事已經(jīng)開始的設(shè)計系統(tǒng)，顏色肯定早已被設(shè)定了，這這種情況下問下市場方面的同事或者是視覺負(fù)責(zé)人。

通常我的項目設(shè)定5個主色：

品牌主色

黑色

成功色

警示色

危險色

我是用Fabrizio Bianchi設(shè)計的Coolors幫助我制作調(diào)色板。你只需點擊空格鍵，他就能為你隨機選色。當(dāng)你找到自己喜歡的顏色，鎖定她，然后繼續(xù)尋找其他你想要的顏色。如果你們的品牌色早已確定，你可以輸入十六進(jìn)制的數(shù)值，鎖定這個顏色，然后按空格鍵選擇其他顏色。

我確定好每一個主色，就把他們導(dǎo)入sketch的模版文件里。這些模版文件的樣式已經(jīng)被自定義啦。所以我只需要把他們更新為我剛選的顏色就可以啦。

3.選擇字體

為什么：定義app里字體

所用工具：Google Fonts和Font Pair

對設(shè)計而言，字體跟顏色一樣重要，一定要花點時間仔細(xì)選擇一種或幾種。因為你設(shè)計的app是給人用的，所以選擇一款好的字體是非常重要的事情。

那么什么才是app設(shè)計中好的字體呢？以下是我選擇字體的幾個原則：

可讀性：是否是長時間閱讀？

可伸縮性：放大和縮小后是否還可讀？

多樣性：是否具有至少兩種字重（粗細(xì)）？

Google Fonts?去年升級了他的字體庫，現(xiàn)在它好用極了。我常會通過黑白背景測試，確保任何時候文字都具有良好的可讀性。（谷歌推出過思源黑體和思源宋體）

如果你喜歡多樣的字體，一種用在標(biāo)題，一種用在內(nèi)容，你可以試試Font Pair?。他們真的為了幫你選擇合適的字體下了很大的功夫。所挑選的文字看起來搭配的很和諧。另外，這些字體都來自Google Fonts，所以全部都是免費的。

但是一定要測試文字的字母、數(shù)字以及標(biāo)點符號。有時你會發(fā)現(xiàn)，一款漂亮文字的“9”看起來很怪異，或者感嘆號的點很奇怪。當(dāng)你已經(jīng)設(shè)計了24個頁面的時候，你不想碰到這樣的怪異情況的。

你一旦選定了字體，在sketch里創(chuàng)建文本樣式，比如說標(biāo)題、內(nèi)容和連接的文字樣式。你永遠(yuǎn)都不需要在設(shè)計某個文本框，除非它跟某個文字樣式關(guān)聯(lián)，當(dāng)你更新某些文本樣式時，其余使用相同樣式的文本也可以同步更新。

我的sketch模版文件已經(jīng)標(biāo)準(zhǔn)化所有默認(rèn)文本的尺寸，所以我能全選他們?nèi)缓笏械臉邮蕉紩l(fā)生相應(yīng)的改變。

4.設(shè)定網(wǎng)格

為什么：保證整個app的全局對齊

所用工具：sketch和計算器

相對常見的建立8像素網(wǎng)格。

為啥是8？

眾所周知，大多數(shù)主流屏幕是可以被8整除的。所以在底層，這些測試數(shù)值其實在寬度和高度上都可以被8整除。

根據(jù)這些信息，你可以確定網(wǎng)格的尺寸。首先定下你的app的展示效果：

固定屏幕：全屏寬度是指app的一個邊緣到另外一個邊緣。如果是web應(yīng)用，你的設(shè)計應(yīng)該能夠被拉伸到瀏覽器的寬度。

自適應(yīng)：這類app會在屏幕中心有個固定的網(wǎng)格寬度。

對于自適應(yīng)app，我希望寬度和間隙都能被8整除。所以這里有個簡單公式：

(12 columns * Width) + (11 Gutters * Width) = Total Layout Width

混合app：這種app又有全屏款的元素又有自適應(yīng)的元素。Medium網(wǎng)站就是個混合應(yīng)用。因為在標(biāo)題文字上是全屏寬度，但是內(nèi)容文字是固定740px的寬度的。

在sketch里shift+→是移動10像素，當(dāng)你設(shè)定的是8像素基準(zhǔn)時，工作時你會特別困擾。這里用Nudg.it插件幫你解決這個問題。

5.構(gòu)建框架

為什么：快速生成app布局和UX交互流程

所用工具：矩形

在設(shè)計線框圖之前，我習(xí)慣創(chuàng)建框架，建立多樣的頁面布局。這個建立在你定義了網(wǎng)格的基礎(chǔ)上，快速圈除頁面中最重要的部分。這就是我曾經(jīng)給即時通訊設(shè)計的框架：

這個操作只花費了90秒，但是這是我開始設(shè)計界面的指導(dǎo)。我更喜歡全局線框，因為當(dāng)我嘗試將屏幕上的元素全部線框化的時候，我更傾向于做高保真?；蛟S，我不是個好設(shè)計師？我也看過很多將細(xì)節(jié)做的很逼真的線框圖，但是這個我的意見而已。在UX階段作出app工作流的框架，確保每個交互都能基于用戶正向的反饋。