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

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

  1. 从中间尺寸向上和向下适配的时候界面调整的幅度最小，最方便适配。
  2. 大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。
  3. 设计安卓版本时只需做最小的设计调整，提升设计效率。

所以做设计稿事请以750x1334px来做设计稿

iPhone界面设计规范：

iPhone 界面尺寸：

左右我习惯设置24 px的距离，我通过对国内外很多APP就行了对比，总结是24 px更合理，这个是我的个人习惯，所以也不要当做是明文规则，你设置为30 px，也是可以的。

然后就可以开始你的设计了.

关于设计字体

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

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

设计稿标准文字

文字选用“苹方（PingFang SC Light) ”标题可加粗选用“苹方粗体”

文字搭配

一般用4和6的梯度搭配，例如：一般文字30px标题搭配26px详情, 带头列表30px标题搭配22px辅助信息
详情页标题文字与详情文字间距
间距为8的倍数，例如：24px、32px、40px等

行间距设定
行间距与字号比例为1.5倍

对齐原则
段落文字采用“两端对齐左对齐”，避头尾为“严格”，首行严禁放5标点

关于字体大小的问题：

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

引自：http://www.shui-mai.com/2018zuixiniosduanjiemianuishejiguifanzhengli/

2018最新iOS端界面UI设计规范整理的更多相关文章

  1. iOS 端的 UI 聊天组件ChatKit及代码实现

    ChatKit 是一个免费且开源的 UI 聊天组件,自带云服务器,自带推送,支持消息漫游,消息永久存储.底层聊天服务基于LeanCloud(原名 AVOS ) 的 IM 实时通信服务「LeanMess ...

  2. 金三银四，2018最新iOS面试题，由它可以搞定面试官？

    序言 这些资料,你一定会用到!我相信很多人都在说,iOS行业不好了,iOS现在行情越来越难了,失业的人比找工作的人还要多.失业即相当于转行,跳槽即相当于降低自己的身价.那么做iOS开发的你,你是否在时 ...

  3. 移动端UI设计规范模板参考以及设计规范的好处

    2018也快要过完了(-_-),我们的移动端的UI设计规范也层出不穷.很多APP设计师也要在年底给公司或者是团队做一个总结.那么一个像样的APP ui设计规范也是很有必要的作品回顾. 在创业公司做着一 ...

  4. 2018年IOS/Android UI设计规范

    更多参考: 2017最新设计尺寸及规范 UI : 2018年IOS/Android UI设计规范 转载:https://www.jianshu.com/p/03e5cdd4ffd6

  5. 美团开源Graver框架：用“雕刻”诠释iOS端UI界面的高效渲染

    Graver 是一款高效的 UI 渲染框架,它以更低的资源消耗来构建十分流畅的 UI 界面.Graver 独创性的采用了基于绘制的视觉元素分解方式来构建界面,得益于此,该框架能让 UI 渲染过程变得更 ...

  6. iOS之UI组件整理

    作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...

  7. 2018年最新Java面试题及答案整理(持续完善中…)

    2018年最新Java面试题及答案整理(持续完善中…) 基础篇 基本功 面向对象特征 封装,继承,多态和抽象 封装封装给对象提供了隐藏内部特性和行为的能力.对象提供一些能被其他对象访问的方法来改变它内 ...

  8. 【Android源代码下载】收集整理android界面UI效果源码

    在Android开发中,Android界面UI效果设计一直都是很多童鞋关注的问题,今天给大家分享下大神收集整理的多个android界面UI效果,都是源码,都是干货,贡献给各位网友! 话不多说,直接上效 ...

  9. 安卓端调用h5界面js方法和ios端调用h5界面js方法

      备注:本人为h5开发人员,不懂安卓和ios,这是开发小伙伴对接联调的主代码. 1.iOS端调用h5界面js方法:     2.安卓端调用h5界面js方法: @Override    protect ...

随机推荐

  1. iOS开发之ReactiveCocoa下的MVVM

    最近工作比较忙,但还是出来更新博客了,今天给大家分享一些ReactiveCocoa以及MVVM的一些东西,干活还是比较足的.在之前发表过一篇博文,名字叫做<iOS开发之浅谈MVVM的架构设计与团 ...

  2. sqlserver使用存储过程跟踪SQL

    为跟踪EF生成的SQL /1.添加存储过程/ USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_ ...

  3. C#通过COM组件操作IE浏览器(三):了解IHTMLDocument2

    IHTMLDocument2方法 说明 write 写入 writeln 写入并换行 open 打开一个流,以收集 document.write 或 document.writeln 的输出 clos ...

  4. IDEA新手使用教程（详解）

    IDEA从下载安装到使用,手把手教你 一.IDEA的下载 IDEA下载地址:https://www.jetbrains.com/idea/download/#section=windows IDEA ...

  5. Python - 使用pycallgraph生成函数关系图

    1- pycallgraph简介 可用于创建python函数关系图,依赖于dot命令,需要先安装 graphviz: HomePage:http://pycallgraph.slowchop.com/ ...

  6. 利用node 剥取其他网站的文档数据结构 ---

    1.如何利用nodejs获取其他网站的文档结构呢 以下是代码演示------! //首先需要引入一些核心模块 var http = require('http'); var fs = require( ...

  7. 人生苦短,我用Python(1)

    一.人生苦短,我用Python 在文章的开头给大家介绍一下Python语言,作者Guido von Rossum.对,就是图中的“人生苦短我用Python”那哥们.你可能以为我会用很多文字介绍Pyth ...

  8. python基础-变量运算符(3)

    一.注释 注释就是对代码的解释和说明.目的是为了让别人和自己很容易看懂.为了让别人一看就知道这段代码是做什么用的.正确的程序注释一般包括序言性注释和功能性注释.序言性注释的主要内容包括模块的接口.数据 ...

  9. CSS box-sizing属性

    全文摘抄自 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing 专门抄一遍是因为,我想当然的以为标准盒子模型设置的宽高是包括padd ...

  10. mongoose的基本操作方法

    mongoose 1. const mongoose = require("mongoose");导入mongoose模块 2. //注意url地址最后面的地址是数据库的名称    ...