無論你是在為熱門產品工作的自由設計師，還是在一個大廠的設計團隊干活兒的螺絲釘(開始新項目都是頭疼的)

我是個堅定的信仰者，所以在我們開始之前，我告訴你這個：這篇文章有一部分引用了我自己構建的設計框架，這份指南很有用。

開始設計項目是困難的。

無論你是在為熱門產品工作的自由設計師，還是在一個大廠的設計團隊干活兒的螺絲釘(開始新項目都是頭疼的)。/嚇哭了/

我在一家設計公司工作，每個月都簽新客戶。我的非官方頭銜就像是【產品概念設計師 】這基本就意味著每次我們要開始一個新客戶，我都得到了令人興奮的創造未來概念圖的工作，可能在下一年(或者兩年、三年)幫助啟發他們的產品路線。

這些概念時間卡得都很緊，并且需要快速運轉，所以我整個身心都圍繞著效率和準確率; 我的展示圖必須解決問題，提供全新的視角，并能優雅的平穩過渡到產品設計階段。

至少我可以說，我已經變得非常高效，我想其他的設計師看到我如何開始一個新項目也許能發現些益處。

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

目錄 / 刪減版

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

2.選擇顏色

3.選擇字體

4.配置網格

5.構建“塊面框架”

6.做成高保真

1.創建文件夾

為什么： 確保我的設計文件和導出資源有條理!

用到的工具： Finder + Automation

如果你開場沒有走對，你就會在整條路上跑偏。我的文件夾結構幫我保持條理，并給了我與多方(市場，開發等等)共享設計資源的方法。

我添加了一個 _ 下劃線，來確保這些文件夾都在列表的頂部。

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

·_exports： 任何時候，我把界面導出的PNG都放在這個文件夾里。 這個文件夾是與市場營銷團隊共享的，所以他們總是能獲得最新的界面截圖，放入各種營銷材料(物料，網頁，社交媒體)

·_ui-design： 這些是我的源文件。通常只有一個文件，但是如果我創建的個新的，它們也會存在這里。

2.選擇顏色

為什么： 為我們的設計項目創建一個基本的設計色板。

用到的工具： coolors.co

選擇顏色是我們最簡單的開始方式。如果你是在一個現有的設計系統中工作，它們可能已經有了。如果是這種情況，去問市場營銷或者做視覺設計師吧。

我的設計系統一般都建立5個主色:

· 主品牌色

· 黑色

· 色調1(成功)

· 色調2 (警告)

· 色調3 (危險)

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

我用了一個Fabrizio Bianchi 出的叫 COOLORS 的APP來幫我建立色板。敲一下空格鍵，它就會幫你隨機選些顏色。當你發現你喜歡的顏色，就把它鎖住，然后繼續創建顏色，直到你發現你的其他顏色。如果你已經確定了主品牌色，你可以把顏色的HEX色值輸進去，把那個顏色鎖住，然后敲空格來獲得其他的顏色。

看見那個好看的”成功”色了嗎?繼續，知道你找全了5個主色。(看色板)

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

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

3.選擇字體

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

用到的工具： Google Fonts 和 Font Pair

對于設計字體與顏色一樣重要，因此請花一些時間挑選一個正確的。 因為你正在設計一個供人們使用的應用程序，所以選擇一個好的字體是非常重要的。

嘿 囧(john)，在app設計中，一個好的字體是什么標準?

嘿，你能問我很高興。我在選字體的時候經常自己問自己這些問題。

• 識別性：這是可讀性強嗎?這會引起閱讀疲勞么?
• 可擴展性：當它過大或過小的時候還是可識別嗎?
• 多樣性：是否至少有兩個字重變化?

去年Google Fonts更新他們的界面，Google有四種顏色組合可以選擇，交互操作更加舒服，因為我總喜歡白黑環境進行切換測試我選擇的字體的易用性與可用性。

右側面板中的設置是我喜歡的UI

如果你喜歡多字體樣式，一個給標題，一個給內容——那你就得去挖一挖 Font Pair。他們為你做了辛苦的工作，并且展示給你看。在一行內，哪兩個字體看起來就像彼此相鄰一樣(哪兩個字體看起來就像青梅竹馬一樣)。它讓選一對看起來很好的字體變得很簡單。并且，它的所以字體都源于谷歌字體庫，所以你不用擔心需要支付任何東西。

始終記得測試字體的字母，數字和標點符號。有時你會發現一套漂亮的字體有一個詭異的“9”或一個詭異的感嘆號。 當你已經在24個界面深入運用到你的設計中時，你不想遇到這種詭異的。

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

4.配置網格

為什么： 在整個APP中建立對齊一致性。

用到的工具：sketch 和一個計算器

把網格建立成8的倍數是相當普遍的。

為什么是8?

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

·全寬布局(通欄設計)： 全寬布局通欄設計APP是頂邊的。 如果它是一個網頁APP，你的設計將拉伸到瀏覽器的邊緣。

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

·浮動布局： 浮動布局APP會貼在固定寬度的網格上，通常位于窗口中央。

對于浮動APP，我喜歡我的gutter和column都可以被8整除。這里有一個簡單的公式：

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

·混合布局： 混合布局APP是全寬布局和浮動布局的混合。 Medium 的網站就是混合布局，因為頂部標題是通欄，但內容區域固定為740px。

這個布局是具有一些通欄元素的浮動布局。

最后一點。 Sketch中的默認Shift +→距離為10px。當你在一個8px網格中工作的時候，這真是超級煩人。 幸運的是，Anthony Collurafici做了一個名為Nudg.it的app，讓你來改變它，目前在sketch里的plugin中直接可以下載噢。

5.構建“塊面框架”-布局

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

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

在我進入線框模式之前，我喜歡構建我所謂的“塊面框架”來建立我的頁面布局的各個區域。 這里的思路是開始感受熟悉你剛剛定義的網格，并快速的把頁面的最重要的部分分隔出來。

這是我設計聊天APP建立的塊面框架：

這一步大概只花我了90秒，但這將是我開始設計頁面的所有引導。我更喜歡做這個全面的線框圖，因為當我嘗試在線框里設計界面上的元素時，我總是不知不覺的摳進了高保真細節。或許我是個壞設計師?我只是見到了很多詳細的線框圖，也許你會想一次就把它們做到高保真的程度吧。

這只是我的意見!

基本就是在這個階段，我用塊面框架來確保所有的交互都能帶來積極的用戶體驗。

6.做成高保真

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

但是接下來就是你見證奇跡的時刻!

在高保真的設計階段，最重要的一件事就是堅持我們在1~5步中設置的一切:

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

文章標題：如何搭建設計app項目
瀏覽路徑：http://www.js-pz168.com/news36/168886.html

成都網站建設公司_創新互聯，為您提供域名注冊、微信公眾號、標簽優化、手機網站建設、App設計、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯