不經意的美麗 Sketch 製作UI草圖

對於鐵人賽的開始，我們還有一些技能尚未補足：

1. git 協作功能
2. UI/UX
3. 網路層
   因此我們決定讓成員各認領一項，並實踐，然後分享。
   
   我，Alvin;認領了繪製草稿。

Sketch，草圖

sketch 在所有的平台都有很好的支援，再加上強大的擴充功能。因此sketch常常是UI設計的首選。

由於Alvin是第一次使用這個軟體，因此會將製作的過程與學習記錄下來。

佈置開發環境

由於Alvin要開發的是iOS的軟體，在開發之前，必須先佈置適合開發的環境。

Runner

Runner，提供了有如Soptlight的快捷功能，可以在開發時，快速的搜尋資源。

為了設計更加方便，我們必須安裝Runner

載點：https://sketchrunner.com/

iOS Design Kit

iOS Design Kit 提供了 iOS 的UI元件，以及相當多的設計元件。

載點：https://iosdesignkit.io/ios-13-gui/

確認元件都有安裝到sketch

確定pluging裡面有Runner


若以上配置都已完成，製作環境就備妥了。

開始製作藍圖

製作藍圖前，先決定好想要使用的色卡。

可以使用color hunter找喜歡的色卡。
網址：https://colorhunt.co/
我使用了這個較冷門的色卡：

因為這個色卡，在tableView上的顯示，有簡潔的優勢。

1.底部塗層

利用最簡單的兩個圓，配合色卡製作簡單的基底塗層。

insert -> Shape -> Oval
拉出兩個圓。
上色！！

恩... 是不是看起來很單調？
因為這是最底層的塗層，越單調反而會讓使用者能將焦點放在該注意的元件。
接下來我們將底層做一些變化。

Blur

新增將Blur屬性，將數值拉到10。

將每個圓都新增Blur吧，我們會看到以下效果：

有了底部塗層，我們終於可以開始製作UI了。

UI製作

來看看昨天討論的畫面。

由於圖是用鉛筆畫的，有點不清楚，不過沒關係。
畫面總共有9個：

我們就直接依著草圖的需求，將元件一個一個補上去吧：

以上是我今天完成的草稿。