设计师要遵循的IOS设计规范

发布者: 乾学优行者 发布时间: 2020-03-24 浏览 54
  设计规范,其实是由视觉设计师定下的,对色彩以及我们的控件、样式、排版、布局、字体等等进行一系列的规则,主要是用来指导今后的设计工作,确保我们视觉风格的一致性,控制设计的质量,提高我们的一个整体的工作效率。

  我们先看一下IOS的界面规范,关于分辨率的问题,这边我列举了几种比较常见的尺寸,大家可以一起看下,需要注意的一点是这里“PX”指的就是像素的单位。

设计师要遵循的IOS设计规范

  好,接下来我们再看一下IOS中ICON的一个尺寸,我们可以看一下我们屏幕中有三张图。

图片2_副本.png

  第1张图我们能够看到的是 IOS中屏幕的主界面图,它其实是由每个不同的ICON构成。第2张图其实是APP store里面ICON在LIST里面的展现形式。第3张图是下载页面的一个尺寸,从这几张图中我们其实能够发现ICON的设计尺寸会有很多的尺寸。

  接下来我们可以看一下ICON的具体的一些尺寸会有哪些呢?这里面我总结的八种ICON使用尺寸规范,首先我们可以看一下第1个,第1个是APP store里面ICON尺寸是1024×1024像素,然后它是运用在Retina屏幕里面,我们可以看一下,这里面标注的有一个是160px像素,我们可以看到苹果的官方UI 定制的相对来说它是比较精准的,这里的160px其实就是我们看到的ICON的圆角的弧度,160px也是圆角弧度。

  第2个我们可以看一下是APP store在普通显示时候的一个尺寸,它和第1个尺寸相比起来,我们能够看到它整个尺寸已经足足缩小了一倍,相对应的它的圆角也会缩小一倍,也就是我们看到的80px。 第3个是我们Retina屏主屏幕的尺寸,这是我们用到的手机上屏幕第1个启动的主界面的一个尺寸,它的尺寸是114×114px,圆角弧度是18px。第4种是我们主屏幕的像素,我们可以看到它是两个对比,一个是普通屏幕,一个是Retina屏,Retina屏的尺寸是57×57px,圆角弧度是9px。

  第5个我们可以看到它是设置页面的iPhone的尺寸,我们能够看到设置页面尺寸相对来说会比较小,它的长和宽其实只有58像素,圆角弧度是10。第6个它也是设置页面的一个尺寸,它和前一个尺寸相比起来又会缩小一倍,我们能够看到它是这样一个尺寸,只有29×29px。再往下我们能够看到的是搜索页面的一个Retina屏ICON尺寸是100×100px,最后是普通屏幕搜索结果页的ICON尺寸,它的一个尺寸又比之前缩小了一倍,是50×50px。

  接下来我们看一下字体的设计规范,在我们IOS中默认的字体有三类,第1类是中文字体。我们需要注意字体版权的规定,像方正黑体、简体微软雅黑等字体是不可以商用的,当然如果我们想使用的话,可以使用首选的是思源黑体,因为它是一个免费字体,还有一个就是冬青黑简体,暂时它的版权是不太详细的。

  第2类属于英文字体,常用的字体是Helvetica。

  第3类LockClock.ttf代表的是我们锁屏的时间字体。它又分为中文字体跟英文字体,中文字体一般是用黑体、微软、雅黑、华文、黑体,然后方哲、黑体、简体、思源、黑体和冬青、黑体、简体等等,当然也不是说必须要用这样几个字体,具体的设计需求还是需要具体对待,当然字体版权也是比较重要的;然后英文字体我们可以看到,在选用不常用的一些字体的切图中,我们需要注意相关的字体是需要以图片的形式导出一个PNG图,但是如果有字体需要的话,我们需要的是字体包,还有再次强调一定需要注意字体版权问题。另外需要注意的是字体的大小必须为偶数,且最小的文字不得小于22px。

图片3_副本.png

  接下来我们看一下配色方面的设计规范,我们能够看到我们屏幕中举的一个例子——网易云,我们可以看到它以红色为标题栏的品牌色,另外在我们导航栏里面红色做一个点击色,相对来说也是比较明显的,大量的留白其实可以让我们整个页面的阅读性会觉得比较清晰。 右侧内页用了毛玻璃的效果,整体给人的感觉是比较舒适和通透的,同时我们能够看到我们界面上有一个代表“你喜欢的”的心形,它运用到的颜色也是红色,整体和它的品牌色是相吻合的,所以说这样的配色相对来说是比较合理的,而且能够品突出它的一个品牌的特色。

  因此我们可以总结出这样一个规律,一般的设计界面以纯色为主,然后将它的主色调作为点击色,像我们刚看到的网易云,其实它是以红色作为一个点击色,也就是我们的常说的一个叫强调色。

  说完配色以后,我们不得不说的就是我们点击区域。在我们的移动设备里面,它区别于外部最大的一个特点,就是它所有的操作必须用我们的手指来进行操作,所以说对于点击区这样一个概念要做一个特殊的规定,所有的点击区域不得小于88px。如果实在满足不了这样一个要求的话,我们可以来缩小整个视觉控件,但是必须保留我们点击区的大小,这是什么意思呢?也就是说我们在做的时候,我们可以把某一个图标或者说把我们某一个控件给它进行一个缩小,不必把它做到88px的这样一个大小的尺寸,但是我们一定要保留出我们的点击区域是88px,这个88px其实是在iPhone5和5s这样一个尺寸为基础的原则下进行制作的。

  接下来我们看一下常见的点击区域会有哪些?第1个可以看一下,它就是我们的状态栏以及我们的导航栏。好,分别是我们的Tab的导航栏、标题导航栏以及下面底部的导航栏,也就是我们常见的叫标签栏。

  第2个是内容视图,主要展现的就是内容信息,包括我们产品的一些交互行为,比如说滚屏、插入、删除,大家可以看一下,第1幅图中我们能够看到,当我们长按的时候,它会出来你是发短信或是打电话等等这样一个操作。

  第3个就是我们的产品行为或者显示信息、按钮、输入框等等,我们都可以看到,虽然我们能够看到它的视觉控件做的非常小,但是我们一定要注意,仍然再次强调点击区域一定要确保它有88像素。

  下面我们看一下IOS的交互手势,一共有8大手势。

  第1个点击,主要是按压或者说选择一个对象;第2个托拽滚屏或移动对象,它主要是将界面从一边移到另外一面;第3个就是我们的滑动主要是快速滚屏或者移动对象;第4个双手张开或闭合,主要是对内容进行一个放大或者缩小;第5个双击,它可将内容置于我们屏幕的中间,主要是用来放大或者缩小的一个转换;第6个清扫,它主要是为了展现更多的内容,比如说我们的列表删除按钮;第7个长按,主要是为了编辑或者说选择文字,用来进行放大镜,或者是作为定位的一个光标;最后一个摇晃,主要是用于机身可执行撤销或者重做的一个操作。

本页网址:https://www.u-walker.com/news/2241.html

上一篇: 进行界面适配与标注的注意事项

下一篇: 设计新人须知Android设计规范

相关推荐

预约报名

免费试学 先学后付 预约试听 证书认证 就业薪资






400-073-5855
返回顶部