原來APP Store中的經典界面是這樣做的！

App Store的Today界面，是如今比較流行的「大標題」設計風格的代表之一，在Adobe XD中可以方便快捷地設計出類似的界面，最終效果如圖所示。

01在Adobe XD中新建一個 iPhone 8尺寸的畫板，然後打開iOS的UIkit 文件，找到黑色的頂部狀態欄和 底部5個icon的 Tab 菜單欄，如圖所示。

02將狀態欄和菜單欄複製並粘貼到 Adobe XD 的畫板中，然後移動至合適的位置，如圖所示。

03用設計好的5個圖標，分別替換Tab菜單欄中的5 個五角星圖標，然後將圖標下面的文本內容分別修 改為Today、Games、Apps、Updates 和 Search，如圖所示。

04按快捷鍵T激活「文本」工具，輸入文字WEDNESDAY, SEPTEMBER 19，然後設置字型大小為13px，字 重為Medium，字體為SF UI Text，字色為#000000，不透明度為50%，接著將其移動至合適的位置，如圖所示。

05在iOS的UI Kit文件中找到Large Tittle圖層，然後將其複製並粘貼到 Adobe XD 的畫板中，如圖所示。

06在Adobe XD中把大標題移動至合適的位置，然後修改內容為Today，如圖所示。

07按快捷鍵E激活「橢圓」工具，然後按住鍵盤上的Shift鍵，繪製一個36px×36px 的圓，接著將其移動至合適的位置，如圖所示。

08選擇一張頭像圖片，將其拖曳到圓圖層上方，系統會自動使用該圖像進行填充，然後去掉邊界，如圖所示。

09按快捷鍵R 激活「矩形」工具，繪製一個335px×412px 的矩形，然後將矩形的圓角半徑設置為14px，並去掉邊界，接著設置矩形的陰影填充色為#000000，陰影填充色的不透明度為14%，X屬性為0，Y屬性為16，B屬性為16，如圖所示。

10選擇一張合適的圖片，將其拖曳至矩形上方，使圖片自動填充，然後調整顯示內容，如圖所示。

11選中填充圖片後的矩形圖層，然後按快捷鍵command D（macOS 系統）/Ctrl D（Windows 系統）復 制一份，接著將複製的圖層向下移動至合適的位置，如圖所示。

12再選擇一張合適的圖片，將其拖曳至下方的矩形上，替換之前的填充圖片，然後將Tab 菜單欄的圖層 組移動至畫板圖層列表的最上方，如圖所示。

13按快捷鍵T 激活「文本」工具，輸入文字WORLD PREMIERE，然後設置字體大小為15px，字體為 SF UI Text，字重為Semibold，字色為#FFFFFF，不透明度為70%，接著將其移動至合適的位置，如圖所示。

14按快捷鍵T 激活「文本」工具，輸入文字The Art of the Impossible，然後設置字體大小為28px，字體 為SF UI Display，字重為Bold，字色為 #FFFFFF，接著將其移動至合適的位置，如圖所示。

最後整體調整圖層之間的間距，然後對圖層進行重命名和分組整理，即可完成該界面的設計。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！