在Adobe Illustrator中為iOS創建天氣APP設計

Chinese (Traditional) (中文（繁體）) translation by Clare Liu (you can also view the original English article)

此設計與我們的合作夥伴網站 Mobiletuts + 結合使用。 Bart Jacobs，能力成熟的開發人員，已經采用了這個UI，並創建了運行的 APP，對妳來講最好的的就是跟隨教程來學習如何創建自己的！妳可以在這裏找到他的系列：第1部分，第2部分，第3部分。

在本教程中，我想向妳展示如何為天氣 APP 創建壹個顯示屏下的用戶界面。我們將使用多個畫板和排版來創建壹個非常小的界面。

在這裏下載字體資源：

當為 APP 或出於任何原因使用字體時，請務必查看許可協議。因為這只是壹個教程，APP本身不會出售，我們可以使用上述的字體。但是，如果妳打算創建自己的並希望獲得商業許可，請按照字體設計師的說明進行操作。

1.設置文件

我們將在 APP 的不同視圖中使用多個畫板，壹旦我們從開發人員的幫助中決定了這壹點，我們可以繼續創建我們的文檔。

步驟 1

開始前，我們需要創建壹個移動設備大小的文檔。由於我們在iOS平臺上工作，所以我們將為iPhone 5 設計壹款屏幕尺寸比 iPhone 以前更高的屏幕尺寸。我發現用更大的尺寸，很容易縮小到其他設備。由於所有設計都是如此之小，所以稍後移除空間將比較容易，而不是嘗試放大。為此，我們的文檔將是640 x 1136 pts（而不是像素）。

在與開發人員進行頭腦風暴的同時，決定將會有壹個主屏幕向左或向右滑動以顯示更多信息。考慮到這壹點，我們也將在此時設置多個畫板。壹個將出現的每個窗口。請仔細查看屏幕截圖。

步驟 2

創建文檔後，我們需要調整顏色配置文件。因此，請轉到 編輯 > 指定配置文件，並確保不對此文檔進行顏色管理。當 XCode 準備妳的資源與 APP 捆綁時，它將完全剝離與資源相關聯的任何顏色配置文件。因此，最好從文檔中刪除任何的顏色配置文件，並定期在移動屏幕上測試妳的設計，以確保正確的顏色輸出。

2.創建背景

步驟1

我們的背景相當簡單。因為我們正在或多或少使用扁平化設計，我們將使用純色和混合來實現我們的效果。

我們將使用中間的畫板來代表我們的 APP 的主頁。左邊的壹個將是當妳選中這個位置時會發生什麽。當妳選中日期時，會出現右邊的壹個。首先繪制壹個與中間相同高度和寬度的畫板的矩形，然後用基礎顏色填充。

步驟 2

接下來，創建壹個正好為 30 x 30pt 的圓圈，並填寫下面列出的顏色。

步驟 3

復制這個新創建的圓圈並將其粘貼到另壹個後壹層。現在調整大小為 2300 x 2300 pt，並將不透明度降至 0％。

步驟 4

現在前往 對象>混合>混合選項... 並選擇指定的步數，然後將其設置為 30。然後創建（對象>混合>建立）混合。

步驟 5

當混合物仍然選擇與畫板中心水平對齊，然後將圓圈居中在畫板的最上方，如下所示。

步驟 6

復制扁平化的背景矩形並將其粘貼到我們剛創建的混合物上方。現在從圖層調色板中選擇矩形和混合，然後選擇 對象 > 剪切蒙版 > 創建。這樣我們就不用擔心相當大的混合流入我們的其他畫板。

步驟 7

壹個靈活的特征，我們認為給 APP 添加壹些氣質使背景顏色改變取決於溫度。所以當我們剛才所說的背景時它是熱的，我們現在將復制這些元素，調整顏色和位置來代表壹個更冷的感覺。

3.添加主要信息文本

因為我們的混合圓圈效果有這麽多的步驟，當妳在繼續制作APP設計時可能會註意到壹些滯後。由於這只是為了審美的目的，我們現在可以先禁用混合圖層，只留下扁平化的背景顏色。在移動設備上進行測試時，請務必重新使用混合圖層，以便妳可以看到文字與背景的壹致性。

步驟 1

我們將嚴格依賴文字來獲取天氣信息。因此，我選擇了壹些漂亮、幹凈、易於閱讀的字體，真正給 APP 壹些個性。我會堅持使用兩個字體系列，並使用不同的寬度來創建所看到的元素。

首先，我們需要顯示某種日期。選擇文字工具（T）並輸入壹周中的某壹天。我將使用星期二，我們的 Mission Gothic 字體的粗細設置為 Thin。文本本身將是白色的，我們將添加壹個投影來幫助它從背景中突出來。那麽我們就把它放在畫板的中心位置，距離頂部 20px。要做到這壹點，只需將其對準邊框碰到畫板邊緣的頂部，然後按住 Shift 鍵並按下鍵盤上的向下箭頭鍵兩次。

步驟 2

再次選擇文字工具（T），並創建我們的溫度計。我喜歡數字本身作為中心，而度符號是偏右的。所以，不將文字放在段落面板中，我把它保持壹致，只輸入我們將用於占位符的數字。我將使用 86 和 Maven Pro 字體，並在下面的屏幕截圖中看到以下信息。

，將其與畫板的中心對齊，然後與頂部對齊。壹旦與頂部對齊，右鍵單擊文本，進入 變換 > 移動... 下移為 210pt。現在選擇文字並添加度數符號。

提示：壹定要告訴開發人員這個細節，以便他們能夠解決如何在 APP 中創建不同的元素。

步驟 3

現在我們有了溫度，讓我們添加壹個位置。輸出妳的位置，對我而言， Nassau, BAH 可以隨意使用自己的。給城市和國家壹些對比，我們將使用兩個不同的權重。城市將 Mission Gothic 設定為 Regular ，國家將 Mission Gothic 設定為 Thin 。

至於放置，我以前說過，我喜歡溫度數字居中的想法，但是對於所有其他文字，我希望它根據溫度數據的寬度與左對齊。所以現在我將手動將這個地址放在溫度的左邊，從底部放置約20pt。隨意調整這個距離，妳認為合適就行。確保始終檢查移動設備上的元素。

步驟 4

如果我們想，我們可以在這裏停下來，但是開發者想要添加壹些其他信息。所以我們將創建三行單獨的文本。壹個為當前時間，壹個為風速，另壹個為濕度。確保單獨創建它們，因為我們將使用不同的字體大小和權重，並且這可以拋棄這些元素的行高。

我喜歡我們的 Maven Pro 字體的數字形式，所以我將繼續使用這個字體給這些元素中的數字只有我們將使用 Medium 粗細，並將其與 Mission Gothic 字體設置為 Thin，而對於這種較細的字體，我們還將其設置為小型大寫字母。妳可以通過突出顯示相應的字體並單擊字符面板右上角的菜單圖標，然後選擇小型大寫字母 來設置。

4.添加主信息圖標

我們的排版方式很好地獲得了我們的信息，但是我們仍然需要創建圖標來表示不同的數字，並在 APP 中指定菜單。我愛上了我們的 Maven Pro 字體的象征形狀，所以我想我會通過重新使用這個形狀來創建圖標來將圖標元素與文字結合在壹起。

步驟 1

使用文字工具（T）鍵入度數符號。在這壹點上，確切的大小並不重要，因為我們將調整它以適合我們的圖標大小。然後右鍵單擊並選擇 創建輪廓 ，以便將文字轉換為可編輯的形狀。現在使用直接選擇工具（A）並選擇較小的內部路徑並將其刪除。稍後我們將使用描邊獲取適合我們圖標的小部件。壹旦妳有彎曲的正方形，壹定要調整高度/寬度，使它們完全相同。他們將稍微偏離，我們需要確保在稍後添加元素時精確。

步驟 2

我們將多次重復使用此形狀，確保妳有壹個副本，放置在工作時松開原稿。現在我們將創建壹個圖標來表示位置菜單。

圓角矩形形狀的副本縮小為 32 x 32pt，添加內部描邊為 3px。

步驟 3

使用圓角矩形工具並創建壹個 3 x 12pt 的矩形，並增加圓角，使末端完全圓形。現在重復這個形狀三次，旋轉它，使它形成十字形，然後將所有對象編組在壹起。最後，選擇該組，添加壹個投影，並放置在距離畫板的頂部和左側 30pt 的位置。確保檢查移動設備上的間距，並進行相應調整。

步驟 4

讓我們從我們的位置圖標復制我們的圓角正方形，因為其他圖標將基於相同的形狀和大小。將圓角矩形的位置調整到時間元素旁邊。很像溫度元素的實際度數符號，我想要這些額外的細節的圖標在溫度元素之外，顯然是在這個元素的左邊。

可以想像，對於 Time 元素，我們將創建壹個 Clock 圖標。我們圓角正方形將是時鐘面，現在我們需要制造時鐘。選擇圓角矩形工具並創建壹個 10 x 4pt 的矩形，並將其與時鐘面的中心對齊。這個過程只能復制 4 x 12pt。壹旦妳將時鐘指針放在壹個合適的地方，編組在壹起，並添加壹個投影。

步驟 5

再次從先前的圖標中復制圓角正方形，並將其與 Wind 元素對齊。對於這個圖標，我們將嘗試並實現壹個很好的效果，提供壹個箭頭來指示風向，即讓圖標本身幫助提示風向信息。所以妳可以猜到我們將創建壹個箭頭在這個特殊圖標的中心。首先創建壹個 4 x 9pt 的圓角矩形，並將其圍繞在圓角正方形中。接下來，使用圓角矩形工具創建壹個完整的正方形，即 12 x 12pt，並移除其中壹個角。現在關閉開放路徑並旋轉它，就創建了箭頭的向上的點，然後將其與箭桿中心對齊，確保完全隱藏頂部圓角。

隨著我們的箭頭完成，將箭桿和箭頭編組在壹起，然後再創建七個副本。以四分之壹增量來旋轉這些副本，妳就得到壹個向上箭頭，壹個指向右上角的箭頭，另壹個指向右側的箭頭，依此類推。因為我們的主要形狀不是壹個完整的圓圈，只是旋轉箭頭形狀不起作用，所以我們需要有壹個箭頭圖標，給每個可能的風向。創建後，妳可以隱藏不需要的箭頭，然後將箭頭和圓角正方形編組在壹起並應用投影。

步驟 6

最後一次粘貼我們圓圓的正方形形狀的副本, 並將其與我們的濕度元素對齊。現在創建一個圓圈, 是 8 x 8pt 和中心對齊它在主形狀, 並把它更多的底部。使用直接選擇工具（A），從圓圈中選擇最上方的錨點，並將其向上拖動以創建壹個下落的形狀，給這個控件帶來更合適的雨滴相撞。重復這個雨滴形狀兩次，並減小尺寸，並將它們放置在大雨滴的頂部兩側。最後把元素編組（Control + G）在壹起並添加壹個投影。

步驟 7

對於這個主要部分的最後壹個圖標，我們需要壹些代表日期的東西。我們想出了壹個日歷圖標，顯示當月的日期。

開始創建壹個 40 x 36pt 的圓角矩形，並給出 3pt 的內部描邊。現在轉到 對象> 擴展外觀 將描邊轉換為實際形狀。使用直接選擇工具（A）後，使用鍵盤上的箭頭按鍵選擇頂部的內部錨點並將其向下推動 9px。使用圓角矩形工具創建兩個圓角的藥丸形狀，9pt 寬，高度為妳想要的任意高度，然後將它們放在更大的圓角正方形上，使它們的底部在大的白色區域之間的壹半。然後進入路徑查找器面板從正方形減去這些新形狀。再創建兩個藥丸形狀，為 3 x 8pt，並將其排列在被剪切的部分。最後，我們將添加以下設置的占位符日期，然後我們將這些元素編組並添加壹個投影。

5.小時的 Widgets

開發人員希望在應用主頁底部安裝壹組可滾動的 widgets，顯示這壹天日子的小時天氣。所以為了完成我們的 APP 的主頁，現在我們來創建它們。

步驟 1

使用圓角矩形工具並創建壹個165 x 250pt的白色矩形，將其與畫板對齊，並將其從畫板底部放置40px。

復制這個矩形並用黑色填充。再次復制壹次，然後將其向下移動 4px，然後在路徑查找器面板中的减去顶层。然後，妳可以將不透明度下降到 15％。

步驟 2

再次復制我們的白色矩形，並填充黑色，減少到 15％的不透明度。在該高度上繪制另壹個矩形，其高度為 79pt，任意寬度，並將其排放到底層矩形形狀的頂部。選擇這個新矩形，並在填充較大的黑色，然後從 路徑查找器 面板中選擇交集。

步驟 3

使用文字工具（T）並輸入妳選擇的溫度。我想確保我有足夠的空間來擴展，所以我選擇了數字 100 。為此，我將使用黑色的粗細 Missing Gothic 字體。文本本身也將是壹個平淡的黑色，不透明度下降到 15％。然後我們將它放在我們的容器的白色部分頂部的附近。

步驟 4

由於這應該是預測的天氣，所以不會那麽準確，所以我們也會包括可能的低和高。 文字工具（T）再次創建輸出妳的估計值，而不是使用 Black 的粗細，我們將改為使用 Thin 。將其對準底部，確保有足夠的留白空間。

步驟 5

最暗部的欄將是我們的時間指標。復制我們先前在本教程中創建的時鐘圖標，並將其放置在該較暗的區域的左側。妳也可以從之前復制時間文字。確保從這些元素中刪除投影，因為不需要。

步驟 6

最後，將壹個投影添加到主要的白色矩形，然後將這些元素編組在壹起。妳現在可以復制此編組，並將它們放置在中心元素兩邊的 20px 處，確保調整每個新副本的時間。作為壹個額外的方案，我把時間 widget 放在頁面以外，並將其高度縮小到 235pt。如果妳在調整高度大小時有約束鎖定，則小部件（widget）將會隨之相稱。這會讓它出現小數點，所以它不精確。由於這些是離開頁面來使用或者掩蓋我們之前創建的來隱藏屏幕上的元素。

這樣我們的主頁就完成了。確保打開混合背景並進行測試，以了解妳的移動設備的外觀。

6.創建位置菜單

步驟 1

現在我們開始在菜單上工作。我發現最簡單的是復制帶所有元素的主頁的圖層，然後在主頁左側選擇畫板，然後粘貼到復制圖層中。定位它，以便只有位置圖標在畫板的最右側可見。現在創建壹個與我們的畫板相同尺寸的蒙版【譯者註，此處作者寫的比較模糊，譯者的實現方式是：將復制的主頁頁面編組，在菜單頁面建立畫板尺寸的矩形，將此矩形與編組的主頁壹起選中，使用剪切蒙版即可，具體要參考AI的剪切蒙版功能哦~】，隱藏多出頁面上的元素。

步驟2

由於我們的整體設計是扁平化的而不是用漸變的陰影，所以，為了表示主頁超出了選單元素，我們將使用一個扁平化的黑色填充矩形，設定為10%不透明度，寬度為4pt，高度與我們的畫板相同。

步驟3

在此選單中，我們需要一個區域來添加新的位置，並列出我們的設定位置和開關來使用/禁用自動位置檢測以及顯示溫度的組織。我們先來創建新的位置部分。

選擇矩形工具（M）並創建一個640 x 100pt的矩形，並將其與畫板頂部對齊，然後添加投影。

現在使用圓角矩形工具並創建一個8 x 32pt的矩形，填充為黑色。複製此矩形並旋轉它，使其與先前的“+”符號的形狀相交。選擇兩個矩形，並從路徑查找器面板中將它們聯集。將不透明度降低到25%，並和之前創建的帶投影的矩形元素垂直居中對齊。一旦垂直向中心移動，它和左側的距離與到頂部和底部的距離是相同的。

最後選擇文字工具（T）並輸入句子“Add new location…”，使用Mission Gothic字體，設定為Thin，不透明度降至15%。

步驟4

複製上一個矩形並將其與前一個矩形的底部對齊，然後調整投影。

複製我們之前用於圖標的圓角正方形，而不是描邊，用扁平化的黑色填充，然後將不透明度降低到15%。複製上一步中製作的+符號並旋轉它，使其形成一個X並將其置於圓角正方形內，然後從路徑查找器面板中選擇按前置對象剪裁選項。

現在從我們的主頁複製位置元素文字，並删除投影並將字體顏色設定為黑色，將不透明度縮小到25%。隨意添加多個實例，以便我們可以看到添加新項目時清單將如何填充。

步驟5

我們來處理這個選單的開關元素。無論位置清單獲得多長時間，此元素都將停留在此選單的底部。首先創建一個640 x 200pt的矩形並添加一個投影。

使用文字工具（T），輸入我們將要進行的開關的標籤。一個將用於自動位置檢測，另一個將設定溫度是以華氏或攝氏度顯示。由於這些開關所在的主要元件在200pt的高度的空間裏。

我們在這兩個標籤之間添加一個分隔符號。使用線段工具（\），創建一個長為476pt的直線，並給出2pt的描邊。這個描邊將是黑色，不透明度降低到10pt。

步驟6

為了創建開關本身，我們再次利用之前創造的圓角正方形。複製此形狀並將其調整為50pt，填充為黑色。按右鍵此形狀，然後選擇變換>移動…，然後水准移動80pt，然後按一下複製，而不是確定。你現在應該有兩個相鄰的圓角正方形。

選擇矩形工具（M）並繪製與我們圓角正方形相同高度的矩形，並在中間直接相連接。選中這三個元素，並在路徑查找器面板中聯集。將此形狀的不透明度降低到15%，並將其正確放在我們的標籤旁邊。

步驟7

再次將我們的圓形方塊貼上白色，並將尺寸調整為40 x 40pt。將其對準左側或右側，使邊緣周圍有距離。你現在可以複製這些形狀並水准翻轉以訓示相反的開關狀態。接下來添加你的文字來表示開關狀態。

作為打開和關閉。最後，你也可以為組織選擇器複製此元素。並且我們的位置選單是完整的。我們轉到我們的日期選單。

7.添加日期選單

步驟1

此日期選單將顯示即將到來的天氣。讓我們從位置選單中重複先前的幾個步驟，然後複製整個主頁面層，遮罩超出頁面的元素，並添加一個矩形來表示選單陰影。

步驟2

現在創建一個640 x 160pt的矩形，並將其與該畫板的頂部對齊，然後給它一個投影。

步驟3

我們需要一些代表日期和日期的東西，就像之前讓我們創建一個行事曆圖標一樣。創建一個120 x 120pt的圓角矩形，並添加一個8px的內部描邊。現在轉到對象>擴展外觀將描邊轉換為實際形狀。使用直接選擇工具（A）後，使用鍵盤上的箭頭鍵選擇頂部內部錨定點並將其向下推動30px。然後將不透明度降低到15%。