LOFTER for ipad —— 让兴趣,更有趣

点击下载 关闭
原来APP Store中的经典界面是这样做的!
数艺社 2019-06-20

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 UIText,字重为Semibold,字色为#FFFFFF,不透明度为70%,接着将其移动至合适的位置,如图所示。


14 按快捷键T 激活“文本”工具,输入文字The Art of the Impossible,然后设置字体大小为28px,字体为SF UI Display,字重为Bold,字色为 #FFFFFF,接着将其移动至合适的位置,如图所示。


最后整体调整图层之间的间距,然后对图层进行重命名和分组整理,即可完成该界面的设计。


推荐文章
评论(0)
联系我们|招贤纳士|移动客户端|风格模板|官方博客|侵权投诉 Reporting Infringements|未成年人有害信息举报 0571-89852053|涉企举报专区
网易公司版权所有 ©1997-2024  浙公网安备 33010802010186号 浙ICP备16011220号-11 增值电信业务经营许可证:浙B2-20160599
网络文化经营许可证: 浙网文[2022]1208-054号自营经营者信息工业和信息化部备案管理系统网站12318全国文化市场举报网站
分享到
转载我的主页