前言
一定要保證你的設(shè)計(jì)文檔規(guī)整，以便于保證項(xiàng)目的便于跟團(tuán)隊(duì)其他部門(mén)對(duì)接工作惜傲。
1.創(chuàng)建文件夾
所用工具：Finder
_assets:?這個(gè)文件夾是與內(nèi)外部的開(kāi)發(fā)團(tuán)隊(duì)共享的。其中包含了開(kāi)發(fā)App所用到的一切資源（比如展位圖片和內(nèi)容贝攒，字體盗誊，icon，圖片和logo等）
_exports：任何時(shí)候我導(dǎo)出的PNG都放在這個(gè)文件夾里。這是跟市場(chǎng)部共享的哈踱，從而保證他們總能拿到各種銷(xiāo)售物料荒适，方便工作的進(jìn)展。
ui-design：這里都是我的源文件开镣。通常這個(gè)只有一份刀诬，但是如果有新的版本，我也會(huì)把之前的保存在這個(gè)文件夾里邪财。
我創(chuàng)建了個(gè)自動(dòng)動(dòng)作幫助我創(chuàng)建所有文件夾陕壹。
自動(dòng)創(chuàng)建文件夾下載鏈接: https://pan.baidu.com/s/1fni6ZJ7a5PzXpTZFYOTKXw 提取碼: yfqq 選取顏色
為什么：為我的設(shè)計(jì)項(xiàng)目設(shè)計(jì)一個(gè)基礎(chǔ)樣式
所用工具：?Coolors:?http://coolors.co/? ?在線(xiàn)配色
吸取顏色是最簡(jiǎn)單的開(kāi)始方式。如果你正在從事已經(jīng)開(kāi)始的設(shè)計(jì)系統(tǒng)卧蜓，顏色肯定早已被設(shè)定了帐要，這這種情況下問(wèn)下市場(chǎng)方面的同事或者是視覺(jué)負(fù)責(zé)人。
通常我的項(xiàng)目設(shè)定5個(gè)主色：
品牌主色
黑色
成功色
警示色
危險(xiǎn)色
我是用Fabrizio Bianchi設(shè)計(jì)的Coolors幫助我制作調(diào)色板弥奸。你只需點(diǎn)擊空格鍵榨惠，他就能為你隨機(jī)選色。當(dāng)你找到自己喜歡的顏色盛霎，鎖定她赠橙，然后繼續(xù)尋找其他你想要的顏色。如果你們的品牌色早已確定愤炸，你可以輸入十六進(jìn)制的數(shù)值期揪，鎖定這個(gè)顏色，然后按空格鍵選擇其他顏色规个。
我確定好每一個(gè)主色凤薛，就把他們導(dǎo)入sketch的模版文件里。這些模版文件的樣式已經(jīng)被自定義啦诞仓。所以我只需要把他們更新為我剛選的顏色就可以啦缤苫。
3.選擇字體
為什么：定義app里字體
所用工具：Google Fonts和Font Pair
http://www.googlefonts.cn/谷歌字體
對(duì)設(shè)計(jì)而言，字體跟顏色一樣重要墅拭，一定要花點(diǎn)時(shí)間仔細(xì)選擇一種或幾種活玲。因?yàn)槟阍O(shè)計(jì)的app是給人用的，所以選擇一款好的字體是非常重要的事情谍婉。
那么什么才是app設(shè)計(jì)中好的字體呢舒憾？以下是我選擇字體的幾個(gè)原則：
可讀性：是否是長(zhǎng)時(shí)間閱讀？
可伸縮性：放大和縮小后是否還可讀穗熬？
多樣性：是否具有至少兩種字重（粗細(xì)）镀迂？
Google Fonts?去年升級(jí)了他的字體庫(kù)，現(xiàn)在它好用極了唤蔗。我常會(huì)通過(guò)黑白背景測(cè)試探遵，確保任何時(shí)候文字都具有良好的可讀性唧瘾。（谷歌推出過(guò)思源黑體和思源宋體）
4.設(shè)定網(wǎng)格
為什么：保證整個(gè)app的全局對(duì)齊
所用工具：sketch和計(jì)算器
相對(duì)常見(jiàn)的建立8像素網(wǎng)格。
為啥是8别凤？
眾所周知饰序，大多數(shù)主流屏幕是可以被8整除的。所以在底層规哪，這些測(cè)試數(shù)值其實(shí)在寬度和高度上都可以被8整除
固定屏幕：全屏寬度是指app的一個(gè)邊緣到另外一個(gè)邊緣诉稍。如果是web應(yīng)用蝠嘉，你的設(shè)計(jì)應(yīng)該能夠被拉伸到瀏覽器的寬度。
自適應(yīng)：這類(lèi)app會(huì)在屏幕中心有個(gè)固定的網(wǎng)格寬度杯巨。
對(duì)于自適應(yīng)app蚤告，我希望寬度和間隙都能被8整除。所以這里有個(gè)簡(jiǎn)單公式：
(12 columns * Width) + (11 Gutters * Width) = Total Layout Width
混合app：這種app又有全屏款的元素又有自適應(yīng)的元素服爷。Medium網(wǎng)站就是個(gè)混合應(yīng)用杜恰。因?yàn)樵跇?biāo)題文字上是全屏寬度，但是內(nèi)容文字是固定740px的寬度的仍源。
在sketch里shift+→是移動(dòng)10像素心褐，當(dāng)你設(shè)定的是8像素基準(zhǔn)時(shí)，工作時(shí)你會(huì)特別困擾笼踩。這里用Nudg.it插件幫你解決這個(gè)問(wèn)題逗爹。sketch像素位移插件Nudgit 1.1 官方版?官方地址：http://nudg.it
5.構(gòu)建框架
為什么：快速生成app布局和UX交互流程
所用工具：矩形
在設(shè)計(jì)線(xiàn)框圖之前，我習(xí)慣創(chuàng)建框架嚎于，建立多樣的頁(yè)面布局掘而。這個(gè)建立在你定義了網(wǎng)格的基礎(chǔ)上，快速圈除頁(yè)面中最重要的部分于购。這就是我曾經(jīng)給即時(shí)通訊設(shè)計(jì)的框架：
這個(gè)操作只花費(fèi)了90秒袍睡，但是這是我開(kāi)始設(shè)計(jì)界面的指導(dǎo)。我更喜歡全局線(xiàn)框价涝，因?yàn)楫?dāng)我嘗試將屏幕上的元素全部線(xiàn)框化的時(shí)候女蜈，我更傾向于做高保真持舆∩瘢或許，我不是個(gè)好設(shè)計(jì)師逸寓？我也看過(guò)很多將細(xì)節(jié)做的很逼真的線(xiàn)框圖居兆，但是這個(gè)我的意見(jiàn)而已。在UX階段作出app工作流的框架竹伸，確保每個(gè)交互都能基于用戶(hù)正向的反饋泥栖。
遵循下面的原則你就能創(chuàng)造奇跡～做高保真的訣竅就是把下面的1-5件事兒做好：
1.把正確的內(nèi)容保存到正確的文件里簇宽；
2.只是用你調(diào)色板里的顏色；
3.不要背離文本樣式吧享；
4. 貼合網(wǎng)格魏割；
5.在做高保真前重新布局框架。
原文鏈接：https://medium.com/ux-power-tools/a-step-by-step-guide-for-starting-a-new-app-design-project-in-sketch-469df0f24af8
