作者：Jon Moore
我十分支持在工作中讓配合透明化，所以在我們開始之前，我欠你們以下這個(gè)東西：貼出了部分是我個(gè)人建立的設(shè)計(jì)框架，其余的部分用來出售。這就是說，盡管你沒打算去購買它但這些指南仍然會對你有幫助。
開始一項(xiàng)設(shè)計(jì)項(xiàng)目是艱巨的
無論你是一名自由職業(yè)設(shè)計(jì)師，為一個(gè)知名的產(chǎn)品機(jī)構(gòu)工作，或者為一家大企業(yè)公司的設(shè)計(jì)組提供幫助支持...這都是一份艱巨的事情的。
我在一家設(shè)計(jì)機(jī)構(gòu)工作，在這了每個(gè)月都會受雇于不一樣的顧客。我非正式的標(biāo)題有點(diǎn)像概念產(chǎn)品設(shè)計(jì)師，這些基本上正好意味著每當(dāng)我們每接觸一個(gè)新的顧客時(shí)，我們就獲得了一份令人興奮的工作，通過創(chuàng)造想象中的概念屏幕去幫助激發(fā)他們一年后的產(chǎn)品路線圖（或許是2年或者3年以后）。
這些概念來伴隨著緊緊的交稿期限和需要快速的轉(zhuǎn)變，所以我整個(gè)世界是圍繞著效率和準(zhǔn)確率轉(zhuǎn)；我的線框圖必須能決問題，提供視覺，順利轉(zhuǎn)變到產(chǎn)品設(shè)計(jì)。
正如我能描述的，我現(xiàn)在變得相當(dāng)?shù)母咝?，而且我認(rèn)為其他的設(shè)計(jì)師在看到我如何開始新的項(xiàng)目時(shí)，也許也會發(fā)現(xiàn)一些幫助。
注釋：我現(xiàn)在不是為你展示如何去制作整個(gè)一頓飯...只是告訴你如何切好食材和打開火候?????。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?. ? . ? .
內(nèi)容／刪節(jié)版本／“我不在閱讀所有的內(nèi)容”
1.創(chuàng)建文件夾（是的，非常嚴(yán)肅）
2.挑選顏色
3.選擇字體
4.配置網(wǎng)格
5.建立一個(gè)“框架”
6.轉(zhuǎn)換為高保證?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.? .? .
1.建立文件夾
原因：保證我的設(shè)計(jì)文件和資產(chǎn)清晰有條理
我使用的工具：Finder+Automation
如果沒有正確的方法，你將會浪費(fèi)很多時(shí)間。我的文件夾結(jié)構(gòu)管理將會幫我保持文件的條理有序，而且會給我一個(gè)與許多其他設(shè)計(jì)師（銷售、開發(fā)者等等）共享設(shè)計(jì)資源方法。
-assets： 這個(gè)文件夾通常是和內(nèi)部和外部研發(fā)組共享的，它通常包括開發(fā)建立App所需要的所有東西（模擬圖片／圖片，字體，圖標(biāo)，切圖，和logo）.
-exports: 每次當(dāng)我需要屏幕導(dǎo)出為PNG格式時(shí)，都會把它們保存在這個(gè)文件夾。這個(gè)文件夾會和市場營銷共享，所以他常常會把最近手頭上的屏幕放置到許多不同的營銷資料中（像裝飾、網(wǎng)頁頁面、社交媒體）
UI-design：這里面都是我的源文件。一般都只有一個(gè)文件夾，但是一般當(dāng)我創(chuàng)建了個(gè)新的文件時(shí)候，都會把它們存放在這里。
2.選取顏色
原因：為我的項(xiàng)目創(chuàng)建一個(gè)基本的設(shè)計(jì)調(diào)色板
個(gè)人使用的工具：coolors.co
選取顏色是準(zhǔn)備開始時(shí)最簡單的方法。如果你工作的項(xiàng)目已經(jīng)存在一個(gè)設(shè)計(jì)規(guī)范的話，這些東西也許已經(jīng)被是被確定好了的，在這種情況下，可以去問營銷或者視覺設(shè)計(jì)的小伙伴了。
我的設(shè)計(jì)系統(tǒng)總是建立在5個(gè)主要的顏色上
1.品牌
2.黑色
3.強(qiáng)調(diào)1（成功）
4.強(qiáng)調(diào)2（提醒）
5.前調(diào)3（危險(xiǎn)警告）
我通過使用Fabrizio Bianchi 開發(fā)的Coolors應(yīng)用來幫助我來建立調(diào)色盤。當(dāng)你按住空格鍵，它會隨機(jī)的為你挑選一種顏色。當(dāng)你找到一種你喜歡的顏色，就可以鎖定它，然后繼續(xù)按空格鍵去挑選你需要的其它顏色。如果你的品牌主色調(diào)已經(jīng)確定了，你可以輸入顏色十六進(jìn)制碼鎖定主色調(diào)，然后點(diǎn)擊空格鍵去獲取剩余的顏色。
一旦我確定了我所有的主要顏色，我將會把它們?nèi)坎迦氲轿业腟ketch 設(shè)計(jì)模版文件里，這些模版文件已經(jīng)是被定義了圖層樣式的，所以我只需用我在coolors中獲取的顏色去更新下就好了。
一旦我確認(rèn)了我所有的主色調(diào)，我將會將它們加載到我Sketch中的設(shè)計(jì)模板文件中，這個(gè)設(shè)計(jì)模板已經(jīng)存在圖層樣式，所以我只需要將原來模板中我新生成的顏色更新一次就可以了。
關(guān)于如何去建立一個(gè)完整的樣式表，可以點(diǎn)擊這里
3.如何選取字體類型
原因：給我的app一些字體
字體在設(shè)計(jì)中和顏色有著同等的重要性，所以需要花一些時(shí)間去挑選適合的字體。因?yàn)槟阍谠O(shè)計(jì)一個(gè)供給人們使用的應(yīng)用，所以挑選一個(gè)很棒的字體對你來說尤為重要。
嘿，Jon，在APP設(shè)計(jì)中如何選擇好的字體
嘿，我非常高興你能夠問到??在我挑選字體的時(shí)候我會問自己下面幾個(gè)問題：
1.易讀性：在你長時(shí)間的閱讀時(shí)，字體是否易讀？
2.可擴(kuò)展性：當(dāng)字體放大和縮小是是否易讀？
3.可變性：是否至少有2種不同的粗細(xì)的字體？
谷歌字體最近一年他們更新了一次，他們確實(shí)很出色值得去使用。我總是務(wù)必會在白色和黑色上去測試，以確保一切在2種情況下都可以有用。
如果你喜歡使用多種字體，也就是說，一種用于頭部，一種用于內(nèi)容，這時(shí)候你就需要使用字體匹配了。它將會替你完成麻煩的工作步驟而且也會在右行顯示兩種字體進(jìn)行對比。這使得選擇一個(gè)很棒的字體匹配顯得非常簡單！另外，它的字體來源全部來自谷歌字體，所以你不需要擔(dān)心為字體版權(quán)付費(fèi)的事情。
總是測試用字母、數(shù)字、標(biāo)點(diǎn)來測試字體. 有時(shí)候你會發(fā)現(xiàn)一個(gè)字體像9一樣奇怪樣式，或者像奇怪感嘆號一樣的漂亮字體。
當(dāng)你挑選好了你的字體后，在Sketch內(nèi)創(chuàng)立用在頭部的文本樣式，文字內(nèi)部的文本樣式和鏈接的文本樣式。你應(yīng)該從不需要在設(shè)計(jì)添加文本，除非它與一個(gè)文本樣式關(guān)聯(lián)了起來。如果你今后決定改變字體和一些未指定的字體，當(dāng)你在同步你的字體改變時(shí)，它們將不會被更新。
4.配置柵格
原因：為了配置整個(gè)app中對齊的一致性。
個(gè)人使用工具：Sketch和計(jì)算器
為什么是8？
嗯，許多證明，許多主流的屏幕分辨率中是可以被8整除的，在下面的表格中，這列測試長度和寬度是否能夠被8px整除：
通過這些信息，你可以開始決定你的柵格大小，開始決定你的App 該如何出現(xiàn)：
全部寬度：一個(gè)全寬度的App是無邊框設(shè)計(jì)。如果是個(gè)網(wǎng)頁版的App,你的設(shè)計(jì)將會伸匹配到瀏覽器的每個(gè)邊。
我喜歡把我的裝訂線至少設(shè)置為24px。上面這個(gè)案例中裝訂線可以被8整除。但列寬一般不能被8整除，不是個(gè)好主意。
浮點(diǎn)：一個(gè)浮點(diǎn)類的app 添加了固定寬度的網(wǎng)格，通常在窗口的中心。
對于可浮動的App中，我喜歡我的裝訂線寬度和列寬都是可以被8整除的。下面有個(gè)簡單的等式：12 * 列的寬度 + 11 * 裝訂線寬度 = 整個(gè)布局的寬度
混合類：混合類的app是指由混合了全寬度和浮動元件組成。中等形網(wǎng)站是個(gè)混合型的網(wǎng)站，因?yàn)轫敳渴侨珜挾?，但?nèi)容區(qū)域卻填充到740px。
最后補(bǔ)充一句。在Sketch中按住Shift+默認(rèn)的距離是10px。這將會是個(gè)令人十分麻煩的問題當(dāng)你在使用8px 網(wǎng)格的時(shí)候。幸運(yùn)的是，Anthony Collurafici開發(fā)的Nudg.it的應(yīng)用可以讓你改變這些。
5.建立個(gè)框架
理由：快速的迭代app的布局和交互流程
我使用的工具：矩形
在我討論線框圖的時(shí)候，我喜歡創(chuàng)建被自己稱為“框架”的東西，它能把我的布局建立成多個(gè)區(qū)域。這個(gè)想法是為了讓你感覺到你自己所定義的線框，和快速地定位到你布局圖中重要的部分。
下面的圖是我設(shè)計(jì)聊天軟件時(shí)建立的框架
這個(gè)框架的建立大概花了我90秒，但是這是我以后開始設(shè)計(jì)這個(gè)界面時(shí)候需要的所有基準(zhǔn)指導(dǎo)；我更喜歡這種完整的線框圖，因?yàn)槲衣萑肓水?dāng)自己轉(zhuǎn)換為高保真圖的時(shí)候，當(dāng)我嘗試讓所有的元素都在界面上；也許我是個(gè)比較差勁的設(shè)計(jì)師，我只是在看過許多細(xì)節(jié)比較成熟完整的框架圖，然后第一次也和他們在全視覺保真完成一樣。這些僅僅都只是我的個(gè)人觀點(diǎn)！
6.轉(zhuǎn)化為高保真
所以，我不給你們留下懸念了......
但是這里是你要使用魔法的地地方！
在高保真設(shè)計(jì)的階段最重要的一件事是遵守我們在1-5步驟中建立的所有東西
1.把文件保存到正確的文件夾中；
2.只使用你調(diào)色板中的顏色；
3.統(tǒng)一你的文本內(nèi)容格式；
4.經(jīng)常遵守你的網(wǎng)格；
5.在做高保真之前，將你的布局框架化。
