从零开始做APP界面设计一:iOS 界面设计规范

准备整理一套APP界面设计教程,可能会花费一段时间,请持续关注。

首先开篇我们介绍APP 界面设计,也就是新手最常遇到的问题:尺寸。

我们以iPhone 7为例讲解iOS 界面设计规范。

一、APP 界面设计工具

做APP 界面设计用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下Sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度也就更快。

二. APP界面设计稿尺寸

在看设计稿尺寸之前,我们先来了解一下APP界面设计构成。

从零开始做APP界面设计一:iOS 界面设计规范

界面构成由:布局层、图文排版层和图标层。

在iPhone 6还没出的时候,都是用640×1136 px来做设计稿的,自从6的发布,所有的设计稿尺寸以750×1334 px来做设计稿尺寸。

从零开始做APP界面设计一:iOS 界面设计规范

以750x1334px作为设计稿标准尺寸的原由:

1. 从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。

2. 大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。

3. 设计安卓版本时只需做最小的设计调整,提升设计效率。

所以做设计稿时请以750 x 1334 px来做设计稿。

从零开始做APP界面设计一:iOS 界面设计规范

从零开始做APP界面设计一:iOS 界面设计规范

从零开始做APP界面设计一:iOS 界面设计规范

在文档建立参考线是一个很好的习惯,我希望大家也可以养成这个习惯,上下很容易设置,左右我习惯设置24 px的距离,我通过对国内外很多APP就行了对比,总结是24 px更合理,这个是我的个人习惯,所以也不要当做是明文规则,你设置为30 px,也是可以的。

从零开始做APP界面设计一:iOS 界面设计规范

这里再给大家略过下iPad的设计规范:

从零开始做APP界面设计一:iOS 界面设计规范

从零开始做APP界面设计一:iOS 界面设计规范

三. APP图标设计

iPhone 图标尺寸:

从零开始做APP界面设计一:iOS 界面设计规范

从零开始做APP界面设计一:iOS 界面设计规范

图标设计请用栅格化系统进行设计。

设计尺寸:1024 x 1024 px,尽可能的采用黄金比例设计。

从零开始做APP界面设计一:iOS 界面设计规范

四. APP界面设计中的字体

先来看一下字体的历史演变过程

  • iOS 9:英文字体为Helvetica Neue
  • iOS 9:中文字体由为冬青黑
  • iOS 10:英文字体为San Francisco
  • iOS 10:中文字体为苹方

从零开始做APP界面设计一:iOS 界面设计规范

关于字体大小的问题:

  • 顶部操作栏文字大小 34-38px
  • 标题文字大小 28-34px
  • 正文文字大小 26-30px
  • 辅助性文字大小 20-24px
  • Tab bar文字大小 20px

文字大小只是一个范围,这要根据设计的视觉效果来决定,不要死记硬背,但是切记,字体大小要用偶数。

你看一篇文章只需要10分钟,总结这些经验需要花费5年的时间,请点赞,转发……

本文转载自公众号:UI妹儿,原文链接: ,本文观点不代表125jz立场。

(4)
江山如画的头像江山如画管理团队
上一篇 2018年4月19日 下午7:27
下一篇 2018年4月21日 上午9:28

99%的人还看了以下文章

  • 错位排版设计的5个实用方法(精)

    错位编排是通过对标题文字大小、位置和笔画的调整,打破固定的排版样式,让标题的排版更具个性化,是提升标题编排设计感和美感最简单最实用的设计技巧。

    本期分享 5 个常用的错位排版方法,学会这些方法你也可以快速设计出个性的标题排版。

    2023年1月18日
    11.0K0
  • 如何提升设计价值——方法篇

    设计≠艺术,设计从诞生之初就是为“解决问题”而存在。在体验设计场景,如果业务方是“需求提出者”,那产品经理和设计师就是从不同视角切入的“问题解决者”,而用户既是“需求源头”,又是“方案验证者”和最终“价值创造者”。下面我们详细解读设计价值与业务/用户/产品三方的关系.

    2023年1月16日 网页设计
    8.6K0
  • opencv 图像旋转 cv2.rotate和np.rot90案例精讲

    OpenCV 方法 OpenCV 中带有一个旋转图像的函数 cv2.rotate rotate(src, rotateCode[, dst]) -> dst参数:src:输入图像rotateCode:旋转方式1、cv2.ROTATE_90_CLOCKWISE:顺时针 90 度2、cv2.ROTATE_180:顺时针 180 度3、cv2.ROTATE_…

    2022年12月1日
    9.8K0
  • 网站设计的七个步骤

    一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。 初学网页制作从这里开始 …

    2020年6月13日
    7.3K0
  • 主流网页设计页面的的宽度(尺寸)是多少?

    最新的中国网民电脑分辨率统计情况显示95%的用户在1280以上,一些用户数较多的电商网站最大宽度一般也为1190或1200,如淘宝、天猫、京东…网页宽度为1200将会成为主流,当然现在很多网站为响应式网站可以适应多种分辨率了。

    2020年3月11日
    27.9K0

发表回复

登录后才能评论