啟動(dòng)設(shè)計(jì)項(xiàng)目是件難事
無(wú)論你是自由職業(yè)設(shè)計(jì)師权薯、外包公司或者是大公司設(shè)計(jì)團(tuán)隊(duì)姑躲，設(shè)計(jì)項(xiàng)目的啟動(dòng)都是讓人心生畏懼的事情睡扬。
我在一個(gè)每個(gè)月都有大量簽約客戶的外包團(tuán)隊(duì)。我的非官方頭銜是產(chǎn)品概念設(shè)計(jì)師（Product Concept Designer）黍析，我的職責(zé)就是讓那些令人興奮的創(chuàng)意點(diǎn)可視化的展現(xiàn)在客戶的屏幕上卖怜，從而激發(fā)他們思考出明年、后年或者大后年的產(chǎn)品迭代路徑阐枣。
這就意味著每個(gè)項(xiàng)目的時(shí)間都非常有限马靠，同時(shí)要就能夠快速?gòu)?fù)盤，所以我的整個(gè)世界都是圍繞著高效和準(zhǔn)確蔼两；mockups能夠幫助解決一部分問(wèn)題甩鳄、提供視覺沖擊力，同時(shí)也可以被打磨成產(chǎn)品設(shè)計(jì)额划。
據(jù)我所知娩贷，我已經(jīng)相當(dāng)高效啦，所以锁孟，我認(rèn)為其他的設(shè)計(jì)師或許能有從我是如何啟動(dòng)新項(xiàng)目中獲得啟發(fā)彬祖。
幾個(gè)步驟表單／縮略版
1.創(chuàng)建文件夾
2.吸取顏色
3.選擇字體
4.設(shè)定網(wǎng)格
5.建立框架
6.制作高保真
1.創(chuàng)建文件夾
為什么：保證你的設(shè)計(jì)文檔規(guī)整
所用工具：Finder
如果第一步?jīng)]做對(duì)的話，整個(gè)項(xiàng)目都會(huì)問(wèn)題重重品抽。我組織文件的結(jié)構(gòu)能夠保證項(xiàng)目的便于跟團(tuán)隊(duì)其他部門對(duì)接工作
_assets:?這個(gè)文件夾是與內(nèi)外部的開發(fā)團(tuán)隊(duì)共享的储笑。其中包含了開發(fā)App所用到的一切資源（比如展位圖片和內(nèi)容，字體圆恤，icon突倍，圖片和logo等）
_exports：任何時(shí)候我導(dǎo)出的PNG都放在這個(gè)文件夾里。這是跟市場(chǎng)部共享的盆昙，從而保證他們總能拿到各種銷售物料羽历，方便工作的進(jìn)展。
ui-design：這里都是我的源文件淡喜。通常這個(gè)只有一份秕磷，但是如果有新的版本，我也會(huì)把之前的保存在這個(gè)文件夾里炼团。
我創(chuàng)建了個(gè)自動(dòng)動(dòng)作幫助我創(chuàng)建所有文件夾
你可以從這里得到這個(gè)動(dòng)作……（歪果仁會(huì)玩）
2. 選取顏色
為什么：為我的設(shè)計(jì)項(xiàng)目設(shè)計(jì)一個(gè)基礎(chǔ)樣式
所用工具：Coolors.co
吸取顏色是最簡(jiǎn)單的開始方式澎嚣。如果你正在從事已經(jīng)開始的設(shè)計(jì)系統(tǒng)，顏色肯定早已被設(shè)定了瘟芝，這這種情況下問(wèn)下marketing的同時(shí)或者是視覺負(fù)責(zé)人易桃。
通常我的項(xiàng)目設(shè)定5個(gè)主色：
品牌主色
黑色
成功色
警示色
危險(xiǎn)色
我是用Fabrizio Bianchi設(shè)計(jì)的Coolors幫助我制作調(diào)色板锌俱。你只需點(diǎn)擊空格鍵晤郑，他就能為你隨機(jī)選色。當(dāng)你找到自己喜歡的顏色，鎖定她造寝，然后繼續(xù)尋找其他你想要的顏色磕洪。如果你們的品牌色早已經(jīng)被設(shè)定了，你可以輸入十六進(jìn)制的數(shù)值匹舞，鎖定這個(gè)顏色，然后按空格鍵選擇其他顏色线脚。
一旦赐稽，我確定每一個(gè)主色，我會(huì)把他們導(dǎo)入sketch的模版文件里浑侥。這些模版文件的樣式已經(jīng)被自定義啦姊舵。所以我只需要把他們更新為我剛選的顏色就可以啦。
3.選擇字體
為什么：定義app里字體
所用工具：Google Fonts和Font Pair
對(duì)設(shè)計(jì)而言括丁，字體跟顏色一樣重要，一定要花點(diǎn)時(shí)間仔細(xì)選擇一種或集中伶选。因?yàn)槟阍O(shè)計(jì)的app是給人用的史飞，所以選擇一款好的字體是非常重要的事情。
那么什么才是app設(shè)計(jì)中好的字體呢仰税？
以下是我選擇字體的幾個(gè)原則：
可讀性：是否是長(zhǎng)時(shí)間閱讀构资？
可伸縮性：放大和縮小后是否還可讀？
多樣性：是否具有至少兩種字重陨簇？
Google Fonts?去年升級(jí)了他的字體庫(kù)，現(xiàn)在它好用極了。我常會(huì)通過(guò)黑白背景測(cè)試展父，確保任何時(shí)候文字都具有良好的可讀性敢朱。
如果你喜歡多樣的字體，一種用在標(biāo)題耙饰，一種用在內(nèi)容纹笼，你可以試試Font Pair?。他們真的為了幫你選擇合適的字體下了很大的功夫苟跪。所挑選的文字看起來(lái)搭配的很和諧允乐。另外，這些字體都來(lái)自Google Fonts削咆，所以全部都是免費(fèi)的牍疏。
但是一定要測(cè)試文字的字母、數(shù)字以及標(biāo)點(diǎn)符號(hào)拨齐。有時(shí)你會(huì)發(fā)現(xiàn)鳞陨，一款漂亮文字的“9”看起來(lái)很詭異，或者感嘆號(hào)的點(diǎn)很奇怪。當(dāng)你已經(jīng)設(shè)計(jì)了24平的時(shí)候厦滤，你不想碰到這樣的怪異情況的援岩。
你一旦選定了字體，在sketch里創(chuàng)建文本樣式掏导，比如說(shuō)標(biāo)題享怀、內(nèi)容和連接的文字樣式。你永遠(yuǎn)都不需要在設(shè)計(jì)某個(gè)文本框趟咆，除非它跟某個(gè)文字樣式關(guān)聯(lián)添瓷，當(dāng)你更新某些文本樣式時(shí)，其余使用相同樣式的文本也可以同步更新值纱。
我的sketch模版文件已經(jīng)標(biāo)準(zhǔn)化所有默認(rèn)文本的尺寸鳞贷，所以我能全選他們?nèi)缓笏械臉邮蕉紩?huì)發(fā)生相應(yīng)的改變。
4.設(shè)定網(wǎng)格
為什么：保證整個(gè)app的全局對(duì)齊
所用工具：sketch和計(jì)算器
相對(duì)常見的建立8像素網(wǎng)格虐唠。
為啥是8搀愧？
眾所周知，大多數(shù)主流屏幕是可以被8整除的疆偿。所以在底層咱筛，這些測(cè)試數(shù)值其實(shí)在寬度和高度上都可以被8整除。
根據(jù)這些信息杆故，你可以確定網(wǎng)格的尺寸眷蚓。首先定下你的app的展示效果：
固定屏幕：全屏寬度是指app的一個(gè)邊緣到另外一個(gè)邊緣。如果是web應(yīng)用反番，你的設(shè)計(jì)應(yīng)該能夠被拉伸到瀏覽器的寬度沙热。
自適應(yīng)：這類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會(huì)幫你解決這個(gè)問(wèn)題值依。
5.構(gòu)建框架
為什么：快速生成app布局和UX交互流程
所用工具：矩形
在設(shè)計(jì)線框圖之前圃泡，我習(xí)慣創(chuàng)建框架，建立多樣的頁(yè)面布局愿险。這個(gè)建立在你定義了網(wǎng)格的基礎(chǔ)上颇蜡，快速圈除頁(yè)面中最重要的部分。
這就是我曾經(jīng)給即時(shí)通訊設(shè)計(jì)的框架：
這個(gè)操作只花費(fèi)了90秒，但是這是我開始設(shè)計(jì)界面的知道风秤。我更喜歡全局線框鳖目，因?yàn)楫?dāng)我嘗試將屏幕上的元素全部線框化的時(shí)候，我更傾向于做高保真缤弦×炻酰或許，我不是個(gè)好設(shè)計(jì)師碍沐？我也看過(guò)很多將細(xì)節(jié)做的很逼真的線框圖狸捅，但是這個(gè)我的意見而已。
在UX階段作出app工作流的框架抢韭，確保每個(gè)交互都能基于用戶正向的反饋薪贫。
6.制作高保真
我不想跟你展示的過(guò)程是下面醬紫～
但恍箭，遵循下面的原則你就能創(chuàng)造奇跡～
做高保真的訣竅就是把上面的1-5件事兒做好：
1.把正確的內(nèi)容保存到正確的文件里刻恭；
2.只是用你調(diào)色板里的顏色；
3.不要背離文本樣式扯夭；
4. 貼合網(wǎng)格鳍贾；
5.在做高保真前重新布局框架。
總結(jié)：
這些就是我開始一個(gè)新項(xiàng)目的步驟交洗。如果你對(duì)我在所有的Sketch模版感到好奇骑科，可以從下面的鏈接中下載。More details available here.
原文鏈接：https://medium.com/ux-power-tools/a-step-by-step-guide-for-starting-a-new-app-design-project-in-sketch-469df0f24af8
