設計教程 ·

用sketch進行app界面設計的步驟教程

所謂萬事開頭難,啟動設計項目也是件難事。無論你是自由職業設計師、外包公司或者是大公司設計團隊,設計項目的啟動都是讓人心生畏懼的事情。

作者Jon Moore在一個每個月都有大量簽約客戶的外包團隊,頭銜是產品概念設計師(Product Concept Designer),職責就是讓那些令人興奮的創意點可視化的展現在客戶的屏幕上,從而激發他們思考出明年、后年或者大后年的產品迭代路徑。

這就意味著每個項目的時間都非常有限,同時要就能夠快速復盤,所以整個世界都是圍繞著高效和準確。所以,我們準備從高效的Jon Moore身上學習如何啟動新項目,希望大家能從中獲得啟發。

1.創建文件夾

為什么:保證你的設計文檔規整

所用工具:Finder

如果第一步沒做對的話,整個項目都會問題重重。我組織文件的結構能夠保證項目的便于跟團隊其他部門對接工作。

我在命名文件時加了_保證這些文件夾始終在列表的上面

_assets:?這個文件夾是與內外部的開發團隊共享的。其中包含了開發App所用到的一切資源(比如展位圖片和內容,字體,icon,圖片和logo等)

_exports:任何時候我導出的PNG都放在這個文件夾里。這是跟市場部共享的,從而保證他們總能拿到各種銷售物料,方便工作的進展。

ui-design:這里都是我的源文件。通常這個只有一份,但是如果有新的版本,我也會把之前的保存在這個文件夾里。

我創建了個自動動作幫助我創建所有文件夾。

你可以從這里得到這個動作。(鏈接:https://pan.baidu.com/s/12oET-vVSQf7-9nWFoSNgpA 密碼:h3hl)

2. 選取顏色

為什么:為我的設計項目設計一個基礎樣式

所用工具:Coolors.co

吸取顏色是最簡單的開始方式。如果你正在從事已經開始的設計系統,顏色肯定早已被設定了,這這種情況下問下市場方面的同事或者是視覺負責人。

通常我的項目設定5個主色:

品牌主色

黑色

成功色

警示色

危險色

我是用Fabrizio Bianchi設計的Coolors幫助我制作調色板。你只需點擊空格鍵,他就能為你隨機選色。當你找到自己喜歡的顏色,鎖定她,然后繼續尋找其他你想要的顏色。如果你們的品牌色早已確定,你可以輸入十六進制的數值,鎖定這個顏色,然后按空格鍵選擇其他顏色。

我確定好每一個主色,就把他們導入sketch的模版文件里。這些模版文件的樣式已經被自定義啦。所以我只需要把他們更新為我剛選的顏色就可以啦。

3.選擇字體

為什么:定義app里字體

所用工具:Google Fonts和Font Pair

對設計而言,字體跟顏色一樣重要,一定要花點時間仔細選擇一種或幾種。因為你設計的app是給人用的,所以選擇一款好的字體是非常重要的事情。

那么什么才是app設計中好的字體呢?以下是我選擇字體的幾個原則:

可讀性:是否是長時間閱讀?

可伸縮性:放大和縮小后是否還可讀?

多樣性:是否具有至少兩種字重(粗細)?

Google Fonts?去年升級了他的字體庫,現在它好用極了。我常會通過黑白背景測試,確保任何時候文字都具有良好的可讀性。(谷歌推出過思源黑體和思源宋體)

如果你喜歡多樣的字體,一種用在標題,一種用在內容,你可以試試Font Pair?。他們真的為了幫你選擇合適的字體下了很大的功夫。所挑選的文字看起來搭配的很和諧。另外,這些字體都來自Google Fonts,所以全部都是免費的。

但是一定要測試文字的字母、數字以及標點符號。有時你會發現,一款漂亮文字的“9”看起來很怪異,或者感嘆號的點很奇怪。當你已經設計了24個頁面的時候,你不想碰到這樣的怪異情況的。

你一旦選定了字體,在sketch里創建文本樣式,比如說標題、內容和連接的文字樣式。你永遠都不需要在設計某個文本框,除非它跟某個文字樣式關聯,當你更新某些文本樣式時,其余使用相同樣式的文本也可以同步更新。

我的sketch模版文件已經標準化所有默認文本的尺寸,所以我能全選他們然后所有的樣式都會發生相應的改變。

4.設定網格

為什么:保證整個app的全局對齊

所用工具:sketch和計算器

相對常見的建立8像素網格。

為啥是8?

眾所周知,大多數主流屏幕是可以被8整除的。所以在底層,這些測試數值其實在寬度和高度上都可以被8整除。

根據這些信息,你可以確定網格的尺寸。首先定下你的app的展示效果:

固定屏幕:全屏寬度是指app的一個邊緣到另外一個邊緣。如果是web應用,你的設計應該能夠被拉伸到瀏覽器的寬度。

自適應:這類app會在屏幕中心有個固定的網格寬度。

對于自適應app,我希望寬度和間隙都能被8整除。所以這里有個簡單公式:

(12 columns * Width) + (11 Gutters * Width) = Total Layout Width

混合app:這種app又有全屏款的元素又有自適應的元素。Medium網站就是個混合應用。因為在標題文字上是全屏寬度,但是內容文字是固定740px的寬度的。

在sketch里shift+→是移動10像素,當你設定的是8像素基準時,工作時你會特別困擾。這里用Nudg.it插件幫你解決這個問題。

5.構建框架

為什么:快速生成app布局和UX交互流程

所用工具:矩形

在設計線框圖之前,我習慣創建框架,建立多樣的頁面布局。這個建立在你定義了網格的基礎上,快速圈除頁面中最重要的部分。這就是我曾經給即時通訊設計的框架:

這個操作只花費了90秒,但是這是我開始設計界面的指導。我更喜歡全局線框,因為當我嘗試將屏幕上的元素全部線框化的時候,我更傾向于做高保真。或許,我不是個好設計師?我也看過很多將細節做的很逼真的線框圖,但是這個我的意見而已。在UX階段作出app工作流的框架,確保每個交互都能基于用戶正向的反饋。

6.制作高保真

我不想跟你展示的過程是下面醬紫~

但,遵循下面的原則你就能創造奇跡~做高保真的訣竅就是把下面的1-5件事兒做好:

1.把正確的內容保存到正確的文件里;

2.只是用你調色板里的顏色;

3.不要背離文本樣式;

4. 貼合網格;

5.在做高保真前重新布局框架。

 

 

原文鏈接:https://medium.com/ux-power-tools/a-step-by-step-guide-for-starting-a-new-app-design-project-in-sketch-469df0f24af8