在UI设计师进行界面设计中,苹果和安卓系统均提供了官方组件,设计师在进行设计工作中,遵循其官方组件的规范,可以极大地提升设计的效率,降低用户的学习成本,并且有利于开发。其中,常见的系统组件包括状态栏(status bar),导航栏(navigation bar),标签栏(tab bar),工具栏(tool bar)等内容。下面以iOS系统的组件进行介绍。
状态栏(status bar)
用来显示时间,电池电量以及信号状态等内容。字色根据其背景的内容进行适配设计,为白色和黑色两种状态。在375*667的开发尺寸下,其像素为20pt。而iPhone X等机型增加了顶部的刘海部分24pt,合计达到44pt。
导航栏(navigation bar)
位于状态栏的下方,通常显示当前页面的名称,让用户了解当前所在的位置。通常左侧为返回按钮,中间为当前页面的名称内容,右侧为部分功能按钮。通常情况下其高度为44pt。
标签栏(tab bar)
位于页面的最下方,提供了界面之间的切换和导航的功能。一般需要明确的告知用户当前所处的位置以及拥有导航的功能。通常当前页面为选中状态,其内容要高亮显示,与其他内容区别开。其样式通常为图标+文字的样式,当然也有纯文字的样式。在底部标签栏中,标签的内容不得超过5个。而对于标签栏的高度,iPhone 8等机型的正常高度为49pt。由于现在手机屏幕越来越大,有些APP增添了这部分的高度,如微信底部标签栏的高度就达到了56pt。
工具栏(tool bar)
工具栏一般和标签栏在同样的位置显示,但与标签栏不是共存的,二者仅能显示一种。其作用是承载对当前页面的一些功能性按钮操作。
对于iOS系统的组件,可以在苹果开发者官网对内容进行下载,官网提供了sketch和Photoshop等多种软件的组件样式进行使用。请在百度搜索Apple Developer进入网站下载。
上面提到的网站中,也有字体可以进行下载。iOS默认中文字体为“苹方体”,默认英文字体为“San Francisco”。设计师进行设计工作中,尽量使用系统的默认字体,如使用其他特殊字体,则需要开发时植入字体包,不仅增加开发的成本,也会增大APP的体积,对用户不够友好。所以在不必要的情况下尽量不使用特殊字体。
在进行页面的设计时,字号的范围一般是11-24pt。这里需要注意的是最小字号一般不要小于11pt,否则不利于用户的识别。并且字号以及行间距要为整数,不要出现小数点。相同意义的字段尽量使用相同的字体样式,可以保持页面的一致性和协调性。字号在实际使用中没有过多的要求,只需要注意标题性质的内容字号需要大一些,而正文的内容则需要小一些,注意文字的对比性即可。对于辅助性的文字或者是金刚区按钮下的文字,一般采用比较小的如11pt,12pt的字号。
由于现在用户使用的手机屏幕越来越大,为了更好地让用户阅读更舒适,在大面积的段落性文字中,正文的字号一般都超过了14pt。甚至某些新闻类资讯的APP中,其字号达到了18pt。这就需要设计师在工作中,需要站在用户的角度进行考虑,而不能被设计中的规则所束缚。
本人是做UI设计工作的,特借贵平台输出一些内容为大家分享,旨在共同学习和进步。以上部分分享内容来自《规律与逻辑》。如有部分侵权请告知,将会立即删除。