無(wú)論你是在為熱門(mén)產(chǎn)品工作的自由設(shè)計(jì)師，還是在一個(gè)大廠的設(shè)計(jì)團(tuán)隊(duì)干活兒的螺絲釘(開(kāi)始新項(xiàng)目都是頭疼的)

我是個(gè)堅(jiān)定的信仰者，所以在我們開(kāi)始之前，我告訴你這個(gè)：這篇文章有一部分引用了我自己構(gòu)建的設(shè)計(jì)框架，這份指南很有用。

開(kāi)始設(shè)計(jì)項(xiàng)目是困難的。

無(wú)論你是在為熱門(mén)產(chǎn)品工作的自由設(shè)計(jì)師，還是在一個(gè)大廠的設(shè)計(jì)團(tuán)隊(duì)干活兒的螺絲釘(開(kāi)始新項(xiàng)目都是頭疼的)。/嚇哭了/

我在一家設(shè)計(jì)公司工作，每個(gè)月都簽新客戶(hù)。我的非官方頭銜就像是【產(chǎn)品概念設(shè)計(jì)師 】這基本就意味著每次我們要開(kāi)始一個(gè)新客戶(hù)，我都得到了令人興奮的創(chuàng)造未來(lái)概念圖的工作，可能在下一年(或者兩年、三年)幫助啟發(fā)他們的產(chǎn)品路線(xiàn)。

這些概念時(shí)間卡得都很緊，并且需要快速運(yùn)轉(zhuǎn)，所以我整個(gè)身心都圍繞著效率和準(zhǔn)確率; 我的展示圖必須解決問(wèn)題，提供全新的視角，并能優(yōu)雅的平穩(wěn)過(guò)渡到產(chǎn)品設(shè)計(jì)階段。

至少我可以說(shuō)，我已經(jīng)變得非常高效，我想其他的設(shè)計(jì)師看到我如何開(kāi)始一個(gè)新項(xiàng)目也許能發(fā)現(xiàn)些益處。

注意：我不會(huì)教你做/整道菜/…只是告訴你怎么切碎食材和如何點(diǎn)著爐子

目錄 / 刪減版

1.創(chuàng)建文件夾(嗯，真的?)

2.選擇顏色

3.選擇字體

4.配置網(wǎng)格

5.構(gòu)建“塊面框架”

6.做成高保真

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

為什么： 確保我的設(shè)計(jì)文件和導(dǎo)出資源有條理!

用到的工具： Finder + Automation

如果你開(kāi)場(chǎng)沒(méi)有走對(duì)，你就會(huì)在整條路上跑偏。我的文件夾結(jié)構(gòu)幫我保持條理，并給了我與多方(市場(chǎng)，開(kāi)發(fā)等等)共享設(shè)計(jì)資源的方法。

我添加了一個(gè) _ 下劃線(xiàn)，來(lái)確保這些文件夾都在列表的頂部。

· _assets： 這個(gè)文件夾通常與內(nèi)部/外部的開(kāi)發(fā)團(tuán)隊(duì)共享。它包含了他們做APP會(huì)用到的所有東西.(占位圖像/內(nèi)容，字體，icons，圖片和Logo)

·_exports： 任何時(shí)候，我把界面導(dǎo)出的PNG都放在這個(gè)文件夾里。 這個(gè)文件夾是與市場(chǎng)營(yíng)銷(xiāo)團(tuán)隊(duì)共享的，所以他們總是能獲得最新的界面截圖，放入各種營(yíng)銷(xiāo)材料(物料，網(wǎng)頁(yè)，社交媒體)

·_ui-design： 這些是我的源文件。通常只有一個(gè)文件，但是如果我創(chuàng)建的個(gè)新的，它們也會(huì)存在這里。

2.選擇顏色

為什么： 為我們的設(shè)計(jì)項(xiàng)目創(chuàng)建一個(gè)基本的設(shè)計(jì)色板。

用到的工具： coolors.co

選擇顏色是我們最簡(jiǎn)單的開(kāi)始方式。如果你是在一個(gè)現(xiàn)有的設(shè)計(jì)系統(tǒng)中工作，它們可能已經(jīng)有了。如果是這種情況，去問(wèn)市場(chǎng)營(yíng)銷(xiāo)或者做視覺(jué)設(shè)計(jì)師吧。

我的設(shè)計(jì)系統(tǒng)一般都建立5個(gè)主色:

· 主品牌色

· 黑色

· 色調(diào)1(成功)

· 色調(diào)2 (警告)

· 色調(diào)3 (危險(xiǎn))

為什么是這些顏色呢?(可以下面評(píng)論留言噢。)

我用了一個(gè)Fabrizio Bianchi 出的叫 COOLORS 的APP來(lái)幫我建立色板。敲一下空格鍵，它就會(huì)幫你隨機(jī)選些顏色。當(dāng)你發(fā)現(xiàn)你喜歡的顏色，就把它鎖住，然后繼續(xù)創(chuàng)建顏色，直到你發(fā)現(xiàn)你的其他顏色。如果你已經(jīng)確定了主品牌色，你可以把顏色的HEX色值輸進(jìn)去，把那個(gè)顏色鎖住，然后敲空格來(lái)獲得其他的顏色。

看見(jiàn)那個(gè)好看的”成功”色了嗎?繼續(xù)，知道你找全了5個(gè)主色。(看色板)

一旦我確定了我的主要顏色，我就把它們插入我的sketch設(shè)計(jì)模板文件中，這個(gè)模板文件的圖層樣式我已經(jīng)做好了，所以我只需要更新一下我剛剛生成的顏色：

我的模板也有一套“輔助色”，但是我不經(jīng)常需要它。

3.選擇字體

為什么： 讓我的APP有些性格!

用到的工具： Google Fonts 和 Font Pair

對(duì)于設(shè)計(jì)字體與顏色一樣重要，因此請(qǐng)花一些時(shí)間挑選一個(gè)正確的。 因?yàn)槟阏谠O(shè)計(jì)一個(gè)供人們使用的應(yīng)用程序，所以選擇一個(gè)好的字體是非常重要的。

嘿 囧(john)，在app設(shè)計(jì)中，一個(gè)好的字體是什么標(biāo)準(zhǔn)?

嘿，你能問(wèn)我很高興。我在選字體的時(shí)候經(jīng)常自己?jiǎn)栕约哼@些問(wèn)題。

• 識(shí)別性：這是可讀性強(qiáng)嗎?這會(huì)引起閱讀疲勞么?
• 可擴(kuò)展性：當(dāng)它過(guò)大或過(guò)小的時(shí)候還是可識(shí)別嗎?
• 多樣性：是否至少有兩個(gè)字重變化?

去年Google Fonts更新他們的界面，Google有四種顏色組合可以選擇，交互操作更加舒服，因?yàn)槲铱傁矚g白黑環(huán)境進(jìn)行切換測(cè)試我選擇的字體的易用性與可用性。

右側(cè)面板中的設(shè)置是我喜歡的UI

如果你喜歡多字體樣式，一個(gè)給標(biāo)題，一個(gè)給內(nèi)容——那你就得去挖一挖 Font Pair。他們?yōu)槟阕隽诵量嗟墓ぷ?，并且展示給你看。在一行內(nèi)，哪兩個(gè)字體看起來(lái)就像彼此相鄰一樣(哪兩個(gè)字體看起來(lái)就像青梅竹馬一樣)。它讓選一對(duì)看起來(lái)很好的字體變得很簡(jiǎn)單。并且，它的所以字體都源于谷歌字體庫(kù)，所以你不用擔(dān)心需要支付任何東西。

始終記得測(cè)試字體的字母，數(shù)字和標(biāo)點(diǎn)符號(hào)。有時(shí)你會(huì)發(fā)現(xiàn)一套漂亮的字體有一個(gè)詭異的“9”或一個(gè)詭異的感嘆號(hào)。 當(dāng)你已經(jīng)在24個(gè)界面深入運(yùn)用到你的設(shè)計(jì)中時(shí)，你不想遇到這種詭異的。

一旦你選擇了字體，就可以在Sketch中創(chuàng)建文本樣式，例如標(biāo)題，正文內(nèi)容和鏈接。 除非將文本綁定到文本樣式，否則不要向設(shè)計(jì)中添加文本。 之后如果你決定更改字體并擁有“未分配”文本，那么在同步更改字體時(shí)，它們將不會(huì)更新。

4.配置網(wǎng)格

為什么： 在整個(gè)APP中建立對(duì)齊一致性。

用到的工具：sketch 和一個(gè)計(jì)算器

把網(wǎng)格建立成8的倍數(shù)是相當(dāng)普遍的。

為什么是8?

事實(shí)證明，最流行的屏幕分辨率都可以被8整除。在下表中，測(cè)試了寬度和高度是否可以被8px均分：

·全寬布局(通欄設(shè)計(jì))： 全寬布局通欄設(shè)計(jì)APP是頂邊的。 如果它是一個(gè)網(wǎng)頁(yè)APP，你的設(shè)計(jì)將拉伸到瀏覽器的邊緣。

我喜歡設(shè)置我的gutter至少24像素。 在這種情況下，gutter可以被8整除，但是column不能。但是沒(méi)什么大不了的。

·浮動(dòng)布局： 浮動(dòng)布局APP會(huì)貼在固定寬度的網(wǎng)格上，通常位于窗口中央。

對(duì)于浮動(dòng)APP，我喜歡我的gutter和column都可以被8整除。這里有一個(gè)簡(jiǎn)單的公式：

(12 columns * 寬)+ (11 gutters * 寬)= 布局總寬

·混合布局： 混合布局APP是全寬布局和浮動(dòng)布局的混合。 Medium 的網(wǎng)站就是混合布局，因?yàn)轫敳繕?biāo)題是通欄，但內(nèi)容區(qū)域固定為740px。

這個(gè)布局是具有一些通欄元素的浮動(dòng)布局。

最后一點(diǎn)。 Sketch中的默認(rèn)Shift +→距離為10px。當(dāng)你在一個(gè)8px網(wǎng)格中工作的時(shí)候，這真是超級(jí)煩人。 幸運(yùn)的是，Anthony Collurafici做了一個(gè)名為Nudg.it的app，讓你來(lái)改變它，目前在sketch里的plugin中直接可以下載噢。

5.構(gòu)建“塊面框架”-布局

為什么： 在應(yīng)用布局和UX交互流上可以快速迭代。

用到的工具：好吧...矩形工具。

在我進(jìn)入線(xiàn)框模式之前，我喜歡構(gòu)建我所謂的“塊面框架”來(lái)建立我的頁(yè)面布局的各個(gè)區(qū)域。 這里的思路是開(kāi)始感受熟悉你剛剛定義的網(wǎng)格，并快速的把頁(yè)面的最重要的部分分隔出來(lái)。

這是我設(shè)計(jì)聊天APP建立的塊面框架：

這一步大概只花我了90秒，但這將是我開(kāi)始設(shè)計(jì)頁(yè)面的所有引導(dǎo)。我更喜歡做這個(gè)全面的線(xiàn)框圖，因?yàn)楫?dāng)我嘗試在線(xiàn)框里設(shè)計(jì)界面上的元素時(shí)，我總是不知不覺(jué)的摳進(jìn)了高保真細(xì)節(jié)?；蛟S我是個(gè)壞設(shè)計(jì)師?我只是見(jiàn)到了很多詳細(xì)的線(xiàn)框圖，也許你會(huì)想一次就把它們做到高保真的程度吧。

這只是我的意見(jiàn)!

基本就是在這個(gè)階段，我用塊面框架來(lái)確保所有的交互都能帶來(lái)積極的用戶(hù)體驗(yàn)。

6.做成高保真

我不想讓你看到這樣的東西…

但是接下來(lái)就是你見(jiàn)證奇跡的時(shí)刻!

在高保真的設(shè)計(jì)階段，最重要的一件事就是堅(jiān)持我們?cè)?~5步中設(shè)置的一切:

• 把文件存到正確的文件夾。
• 只用在調(diào)色板中的顏色。
•  不要偏離你的文本樣式。
• 始終符合網(wǎng)格系統(tǒng)。
• 在做高保真效果圖之前做出新的布局。

以上就是上海網(wǎng)站建設(shè)公司——海淘科技為你推出《創(chuàng)業(yè)公司如何做品牌推廣》的全部?jī)?nèi)容。想看更多的建站基礎(chǔ)知識(shí)，可直接點(diǎn)擊進(jìn)行跳轉(zhuǎn)，想要了解更多的關(guān)于最新的金融網(wǎng)站設(shè)計(jì)案例，可直接聯(lián)系海淘科技客服。