在Affinity Designer設計UI介面
好了，正式開始我們的Affinity學習之旅！ 
在本教程中, 我將引導您完成為 ios 健身應用程式歡迎螢幕的設計過程。我們將使用AD（為了以後方便就簡稱為AD）進行設計, 這是一個新的、有前途的工具, 也是一個用於 ui 設計的很好的應用程式。您不需要有任何使用該工具的經驗。在本教程結束時, 您將獲得AD的設計工作流的基本知識。
教程的原始檔我以及為大家制作好了點選文末的下載就可以下載使用了
so開始我們的教程吧！
我們先來設定一下軟體的一些基本設定吧！
步驟1
讓我們從建立一個新文件開始。
開啟AD後, 從主選單轉到 "檔案" > "新建" 。在出現的彈出視窗中, 您可以指定最適合您檔案需要的引數。現在, 讓我們重點介紹兩個選項: "型別" 和 "頁面預設" 。
我們將設計一個 iphone 應用程式, 所以我們只需要在型別裡面選擇裝置，然後頁面預設裡面選擇iphone就可以了，AD會為我們自動設定其他引數。 （當然你看見這篇文章是2018年末了，所以Ad已經更新了許多東西，所以你可以不按照教程的這個預設尺寸來）
步驟2
接下來, 我們需要準備一個工作環境。我是在設計中使用網格的忠實粉絲。我們現在不會深入討論這個問題, 但我們會建立一個非常簡單的佈局網格。這種設計將依靠基本的蘋果人機介面指南, 這就意味著需要堅持一個特定的層次結構。我們需要為狀態列分配一個空間 (20 pt)。然後, 雖然透明, 但下面會有一個簡單的導航欄 (44 pt)。接下來, 一個關於使用者主要資訊的空間, 以及一個按鈕的位置。
轉到 "檢視" > "參考線管理器" 彈出視窗將出現, 其中包含水平和垂直參考線 (現在為空白)。單擊 "水平參考線" 的底部下方的小空白頁圖示。這樣做將新增新的水平參考線。然後雙擊列表中出現的值, 並將其更改為 20 pt. 使用如下所示的屬性新增其他參考線。 
應用背景
第1步
現在, 我們要建立我們的應用程式背景。從左側的工具選單中選擇矩形工具 (m), 並繪製覆蓋整個工作區域的矩形。右側面板上有一個變換面板。您可以在此處檢查矩形尺寸以及它的起點 (您應該X:0, Y:0 and W: 320 pt, H: 568 pt)。
第2步
現在我們將更改背景色。轉到主工具欄旁邊的上下文工具欄 (在上下文工具欄的左側, 您將看到與我們剛剛建立的形狀相關的屬性。單擊被描述為 "填充" 的白色小矩形 )。從選擇列表中選擇 rgb 十六進位制滑塊, 然後在數值引數輸入欄位中輸入 #151515, 然後按 enter。
第3步
轉到 "圖層" 面板。雙擊包含我們形狀的圖層, 並將其名稱更改為 "bg"。接下來, 單擊小掛鎖圖示鎖定 bg 圖層。這樣, 你就不會在處理其他元素時選中bg。
狀態列與導航欄
第1步
狀態列這個地方我們可以在網上下載一下AD的原始檔將其載入進來，
第2步
是時候製作我們的選單了。將主顏色更改為應用程式視窗左上角的 "白色"。從左側的 "工具" 面板中選擇 "矩形工具", 然後繪製一個 18 x 2 pt 矩形。按住 alt + shift 按鈕, 然後單擊並向下拖動原始矩形 (我們只是複製矩形)。再做一次, 你就會得到一個選單圖示。
選擇這個三個形狀 (shift + 單擊), 然後單擊AD右上角的 "新增" 按鈕, 將其合併為一個形狀。在 "圖層"面板中找到您的圖示, 並將其重新命名為 "選單圖示"。（你也可以使用AI的打組命令來講他們打組而不是合併）
第3步
從工具面板中選擇 "藝術字體工具" (t), 然後單擊我們設計的導航欄空間中的某個位置。輸入文字（隨意你輸入什麼）然後我們可以ctrl加t調出字元屬性。 這個字元屬性有點和我們Adobe ID的有點像
現在, 將文字居中導航欄區域。它將自動捕捉。如果沒有, 請務必開啟頂部主工具欄上的捕捉選項。 （一個紅色的u型的紅色圖示後面點選三角形就可以設定吸附了）
是時候整理圖層面板中的內容了。單擊 "圖層" 面板底部的 "新增新圖層" 按鈕, 然後將選單圖示、應用標題和狀態列拖入其中。然後CTRL+G打組，然後重新命名圖層, 如下所示: 
進度圖的繪製
第1步
從工具面板中選擇 "圓" 工具 (m) 並繪製一個圓。選擇新形狀後, 開啟左上角的 "描邊屬性" 面板, 並更改引數, 如下所示。
從我們最初建立的中心參考線開始繪圖, 然後在繪製時按住ctrl(從中心點繪製) 和 shift (繪製一個圓, 而不是橢圓)。你的圓圈應該在200x200 pt左右。
選擇圓圈, 然後按工具欄選單上的 "轉換為曲線" 按鈕。選擇節點工具新增一些點，如上圖所示，然後選擇斷開曲線，然後選擇不要的點del。 
第2步
選擇進度形狀並對其進行復制 (ctrl+ j)。開啟 "描邊屬性" 面板, 並更改值, 如下所示。綠色是 #4DFA41 和黃色 #F7D203。我們需要刪掉一些點。應為不可能是一開始就是滿的。
第3步
選擇 "藝術字體工具" 並輸入一些其他資訊, 然後設定和格式化它們, 如下所示。
我們現在有一個非常驚人的進展圖表與更多關於使用者成就的資訊!
按鈕的繪製
第1步
從 "工具" 面板中選擇 "矩形工具 (m)", 然後繪製一個矩形, 大約為 290pt x 44 pt。在《 ios 人機介面指南》中, 蘋果設計師建議44pt是按鈕完美的高度, 便於點選。按住 shift 鍵單擊應用的背景和剛剛建立的矩形形狀, 然後單擊螢幕左側區域上的 "水平對齊到中心" 按鈕。將其放在介面的底部。
第2步
選擇剛剛建立的形狀。開啟螢幕左上角的 "填充顏色" 面板, 並將填充顏色更改為透明。在將筆畫更改為 #4CFA41。描邊設定為2pt。
第3步
現在在按鈕沙上新增文案。選擇 "藝術字體工具", 並使用它在剛建立的矩形中心建立。鍵入 "開始執行", 然後通過單擊頂部工具選單上的 "字元" 按鈕更改所有引數選項。
如果你到這裡發現為什麼沒有進度條上面那個圓的步驟，我只能說原作者可能忘記了，不過這也沒關係，就是2給圓改變一下填充和透明度而已，相信你完全知道怎麼做。
個人統計資訊
我們將在進度圖和 "開始執行" 按鈕之間放置一個簡單的統計檢視。我們將展示平均跑步速度、跑步總數和消耗的卡路里。
第1步
你可以去網上下載一些圖示，當然你也可自己繪製，（教程繪製圖標將在下期與大家見面）
第2步
如果你下載了png的圖示放進來，我們只需要轉到 "效果" 面板 (選中圖示) 並開啟 "顏色疊加" 選項卡. 將疊加顏色更改為 #4CFA41就可以了。
第3步
再次, 選擇 "藝術字體工具" 並建立兩個文字物件。鍵入示例編號和文字 如下所示。垂直居中, 並將它們放在 "跑步者" 圖示的下方。
第4步
將其他下載的圖示放在 ui 設計中。選擇其中一個樣式後, 請選擇我們剛剛從 "樣式" 面板中定義的樣式。瞧！我們的樣式已被重新應用, 而無需再次指定它們。在仍選擇圖示的情況下, 單擊 ctrl + c 或轉到 "編輯" > "複製"。選擇最後一個圖示, 然後單擊 ctrl+ shift + v, 或轉到 "選單" > "編輯貼上樣式"。這將把以前複製的物件的樣式貼上到新物件中。很方便, 對吧？
最後
我們發現這個介面還需要一些細節的新增，讓我們為單調的背景。建立一個320x320pt 矩形, 並將其放置在bg的頂部。選擇它, 然後從工具面板中選擇拐角工具 (c)。單擊矩形的一個定位點使其可編輯, 開啟以前定義的參考線 (ctrl +;), 然後單擊矩形底角的中心以建立一個節點。選擇它並向下移動40pt左右把。
第2步
我們可以找一個合適主題的圖片載入進來，然後使用剪下命令裁剪到適合形狀的樣式。這裡的操作是將圖片放置到形狀的下面，然後選擇形狀，右擊有一個叫蒙版至下面的命令。（圖層面板中操作）
現在, 讓我們在箭頭形狀的下面新增一個投影。選擇組, 然後轉到 "特效" 面板。開啟外陰影，20px的半徑和15px的偏移應該是很好的了。到此你完成了這個練習。
小知識：當你雙擊圖層面板裡面圖層的縮圖時，畫板將會把該物件放大到螢幕最大化。按住ctrl加滑鼠滾輪是縮放試圖。按住alt加滑鼠滾動是畫板上下滑動。輸入需要修改的文字建立用框選工具，藝術字體工具一旦輸入就自動轉曲不可修改，而框選工具可以二次修改。輸入文字後按下ctrl加enter就是轉曲哦。這個文字工具可能需要熟悉一些。用過Id的人可能很熟悉。
ofollow,noindex" target="_blank"> 人機互動指南
ICON8 （提供win客戶端離線下載使用他們的圖示，en進去可能會慢，但是可以轉到中國版）