从零开始做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立场。

(1)
上一篇 2018年4月19日 下午7:27
下一篇 2018年4月21日 上午9:28

99%的人还看了以下文章

  • 网页制作中表单的设计及优化方法

    表单是网页制作中常用的元素,本文会探讨表单设计的注意事项。但这些只是通用规范,每条准则总有特殊情况。 表单应该只有一列 多列布局会扰乱用户垂直方向的视线移动。 把标签放到顶部 顶部标签的表单比左侧标签有更高的完成率。顶部标签的表单也易于移植到移动端。但是,对于有多种选择项的大量数据列表而言,请考虑使用左侧标签,因为它们在一起更易于浏览,能够减少高度,比顶部标…

    2018年7月30日 网页设计
    2.4K0
  • 提高网页制作水平的7个要点

    1. 学好HTML和CSS编程 这是网页设计中最基础,也是最重要的部分。《web前端开发学习路线》 2. 清晰的导航 导航栏是页面中最重要的部分,因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏,可以提升网站的易用性,还可以减少用户在寻找自己需要的内容时遇到的麻烦。 3. 高质量的图片 高质量的图片,能大大提升网站的逼格。图片应当辅助你的设计来推销…

    2019年7月9日 网页设计
    2.0K0
  • 如何做好视觉设计中的层次?(精)

    对于视觉次序(视觉层次)的营造是每个设计师所必须精通的,无论是海报设计还是页面设计,从整体来看总会有强弱、主次之分,因为有了视觉上的变化,才使得整体更富有层次感;当用户在浏览信息很多的网页时,作为设计师要做到:即使用户只是简单的浏览,也要有能在用户脑海中形成记忆的视觉元素,而这些元素就是视觉中的主,而当用户仔细阅读时才能记忆到的元素才是视觉上的次;从局部来说…

    2018年7月9日 网页设计
    6.2K0
  • web前端开发学习路线

    如果你是新手,准备学习web前端开发的话,一定要想想为什么要学习它?性趣、爱好、获得一份相关工作…… 定位好自己,持之以恒,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后克服。在状态不好的情况下,要及时调整,多向大牛请教,那样往往能让自己成长的快,切勿急躁。 初学web前端开发可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会分析自…

    2018年1月18日
    3.8K0
  • 网站策划:如何定位网站主题

    网站策划、网页设计首先遇到的问题就是定位网站主题。所谓网站主题也就是网站的题材类别,具体就是该网站是什么类型的,什么性质的,主要内容是什么……

    2020年2月18日
    1.5K0

发表回复

登录后才能评论