header_v0.7.2

iOS设计规范

1年前发布

原创文章 / UI / 教程
小耳朵717 原创,如需商业用途或转载请与小耳朵717联系,谢谢配合。

iOS设计规范经验分享

一.几个知识点

在动手做App的时候,首先要弄清楚几个感念:

1.分辨率:指的是手机屏幕的像素点数,即宽和高的像素。单位:px

在作图软件里,我们经常说的分辨率是指图片的分辨率。eg:这个印刷品的分辨率是300;这个网页的效果图分辨率是72。这两个是同一个词不同的概念。

2.逻辑分辨率:宽和高的像素除以倍率。若两个屏幕逻辑像素相同,它们显示效果皆相同。单位:pt

3.物理尺寸:实际屏幕分辨的尺寸。单位:英寸(inch)

4.屏幕大小:手机对角线的物理尺寸。单位:英寸(inch) 、1英寸=2.54厘米

5.屏幕密度:每英寸的像素点数,数值越高显示越细腻。单位: ppi(piexles per inch)

eg:已知4.7英寸的iPhone6宽和高的分辨率,求屏幕密度 ?

7502+13342=ab2      (注:ab为对角线长度)

ab≈1530 px

ab / 4.7≈326      (注:对角线除以屏幕尺寸等于每英寸的像素点数即屏幕密度) 


0a655704bb4c6ac72579481aea5b.jpg


二.规范

不管是Android与iOS在界面设计时都会有各自的规范,但是Android和iOS官方并没有严格的规定,这时就需要我们总结平时的工作经验去设计。有时候我们用软件做完App,在电脑上看似很完美,但放在手机上会发现许多问题,比如:字体过于大或小、需要点击的区域太小、文字颜色太浅,看起来不是很适合长时间阅读等问题。

在做视觉稿时,应按750x1334 px(iPhone 6)作为基准,所有图标用矢量路径来做。

还有一些iOS必须遵守的规范(以750x1334 px (iPhone 6)为设计稿):

1.电池电量条: height:40 px

2.顶部栏: height:88 px

3.顶部导航栏: height:98 px

4.控件: 不能超过栏的一般  eg:顶部栏(88 px)上控件大小应不大于44 px

下图为新闻类App的字体(大小、间距、按钮)的规范范围值。此新闻类App参考了凤凰网、人民网、搜狐、腾讯网、网易、新华网等


44905704bb706ac7257948e894f9.jpg


设计定稿后,在750x1334 px(iPhone 6)的设计稿上做标注,输出标注图(@2x图)。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图(@3x图)。


为什么选择iPhone 6作为基准尺寸?

iPhone手机那么多,到底依据哪种屏幕作图呢,是不是需要每一个尺寸都做一套呀?iPhone比Android的手机屏幕规律多了,只需做一个尺寸的就可以了。

iPhone主流的屏幕分辨率是640x1136 px 、750x1334 px 、1242x2208 px 。1242x2208 px为最高屏幕分辨率,如果用这个尺寸作图的话,分辨率越高图片占用的内存也就越高。而640x1136 px这个尺寸,虽然内存消耗低、图片文件小,但适配到1242x2208 px图片、图标会模糊不清的,只剩下中间的750x1334 px,向下适配与向上适配都适中。

所以,iPhone6的750x1334是最适合基准尺寸。


28

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功