从零开始做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%的人还看了以下文章

  • 网页制作实战项目五:根据网页效果图制作网页

    了解网页制作全过程,能够根据网页效果图PSD源文件,切图并制作出网页。

    2018年5月3日
    7.4K0
  • 网页设计中的字体选择以及常用字号

    网页设计中的字体 中文:宋体,微软雅黑,方正系列(无状态) 英文: Helvetica:被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体。 Arial: 和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。 Lucida Grande:是Mac OS U…

    2019年10月22日
    5.9K0
  • 配色如此简单-最实用的配色教程

    本文主要介绍实战中配色方法和设计大师常用的快速配色技巧,希望大家能活学活用。

    2019年10月31日 网页设计
    4.2K0
  • 网页制作实战项目一:个人站点制作

    在开始学习之前,请加入网页设计交流群:208047327 ,并注册本站用户,在项目制作过程中有任何问题,可以在群内讨论,或进入本站问答社区互动。 【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 个人站点制作 【上机目的】1 、了解网页的组成2 、掌握网站的目录结构3 、掌握表格布局方法和技巧4 、掌握HTML及CSS的基础知识5、培养…

    2018年4月7日
    16.9K3
  • 绝美!9种最有意境的蓝色

    蓝色既代表着忧郁,又代表着温柔,它和白色混合之后,还能体现柔顺、淡雅、浪漫的氛围,像天空的色彩~蓝的种类也有很多,克莱因蓝是备受设计师喜爱的一种,也是最经典的一种,而且蓝色是最具凉爽、清新、专业的颜色,今天125建站网给大家分享9种不同的蓝色,你更喜欢哪一种呢?

    2023年1月20日 网页设计
    9300
  • 网站图片、文件防盗链方法大全

    一般盗链分为文件盗链和图片盗链两种。如果您网站上的音乐、视频、flash、压缩包文件、图片等,被其它网站大量的复制、盗用,会对自己网站产生大量的无效流量并对网站服务器造成很大的压力,所以很多网站都会设置防盗链,防止别人盗用自己网站的图片、音视频或下载文件资源。 今天中国网页设计给大家分享网站图片、文件防盗链的方法,对网站站长有很大帮助。 1、Windows主…

    2018年2月26日
    3.8K0

发表回复

登录后才能评论