一篇文章搞定IPHONE设计规范(2)

来源:网络   作者:热心网友   发布时间:2019-04-20    浏览次数:1321


第二部分:设计规范指南


上文说我们建立界面可以根据750x1334px或375x667pt来建立画布,但是具体状态栏的高度、导航栏的高度、tab栏的高度是多少?那些UIKit组件里的东西去哪里找呢?苹果已经为我们准备好了多个格式的规范了:

资源下载地址:http://developer.apple.com/design/resources/


设计方式

在iPhone6/7/8存量仍然很大的情况下,我们做设计稿仍然需要以iPhone6/7/8为尺寸来建图。从苹果官网下载好UIKit,上面有我们需要的一切元素。这些元素有PSD、Sketch以及XD版本,不管用什么设计软件均可找到对应版本。打开之后你会发现苹果已经将我们所需要的规范元素准备好了。如果你需要一些弹窗或者控件,那么就在UI Elements里找。如果需要界面的尺寸模板,就在Design Templates找。所有文件都有两份,结尾带有-iPhoneX的是为iPhone X系列设计的模板。没有标识的是为iPhone6/7/8设计的模板。


一篇文章 搞定IPHONE设计规范 一起学设计网 设计理论

UI Elements 文件夹中的源文件



一篇文章 搞定IPHONE设计规范 一起学设计网 设计理论

Design Templates中的源文件


状态栏和导航栏

状态栏(Status Bars)就是iPhone最上方用来显示时间、运营商信息、电池电量的那个很窄的区域。导航栏(Navigation Bars)就是状态栏之下的区域,一般来说导航栏中间是页面标题,左右是放置功能图标的区域。

在iPhone6/7/8设计中,状态栏的高度为20pt(40px)。导航栏的高度是44pt(88px)。这两个区域在iOS7代之后就进行了一体化设计。所以它们加起来的高度是64pt(128px)。


在iPhoneX设计中,状态栏的高度为40pt(132px)。导航栏的高度也是44pt(132px)。这两个区域同样要进行一体化设计。所以它们加起来的高度是84pt(264px)。

这里注意一下,因为iPhone X的PPI值为458,所以并不是如iPhone6/7/8一样1pt=2px换算。

一篇文章 搞定IPHONE设计规范 一起学设计网 设计理论

iPhone6/7/8和iPhone X导航区域的差别


一篇文章 搞定IPHONE设计规范 一起学设计网 设计理论

部分优秀APP的导航区域设计


大标题导航栏

在最新的苹果设计中导航出现了一种新形式:大标题。出现这种形式就是为了减少视觉噪音,让内容更加突出。很明显大标题的设计很像报纸的版式设计,在第一眼我们就会明白页面的主题。


大标题导航栏的高度一般为116pt(232px):这包括了20pt(40px)状态栏的高度,同时也能放得下34pt(68px)的大标题和辅助信息(如返回等图标)。但是注意一下,大标题并不应该像传统导航一样常驻在页面之上,因为它太占空间了。所以在滑动页面时大标题会变成正常导航栏的64pt(128px)的高度。当然如果设计稿为iPhone X那么数值需要另外换算。


一篇文章 搞定IPHONE设计规范 一起学设计网 设计理论

大标题的尺寸



导航栏图标

图标作为文字的补充,在移动端中应用非常广泛。在导航栏区域上的功能诸如搜索、添加、更多、返回等均需要用图标来表达。说明:@2x和@3x在逻辑像素单位是一样的,如果您使用如Sketch、Adobe XD等矢量工具设计,可以参照逻辑像素数值设计即可。但是如果您用Photoshop工具以iPhone6/7/8尺寸进行设计,就需按照@2x下的px单位数值设计。

一篇文章 搞定IPHONE设计规范 一起学设计网 设计理论

导航栏图标尺寸规范


1234567共7页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:规范适配

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/7821.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通