目前在行业里,关于APP界面设计规范也是层次不齐,很多都还停留在6的设备和ios 9的系统之上,而现在最新的是iphone 7和iOS 10了(更新换代真的很快),我这里说的是最新的iOS 界面设计规范

一、关于设计工具

俗话说:工欲善其事必先利其器,好的工具可以让我们的工作效率更高,做界面设计我们用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度也就更快。

二、设计稿尺寸

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

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

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

iPhone界面设计规范:

iPhone 界面尺寸:

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

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

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

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

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

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

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

四、关于设计字体

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

iOS 9:英文字体为Helvetica Neue

iOS 9:中文字体由为冬青黑

↓↓↓

iOS 10:英文字体为San Francisco

iOS 10:中文字体为苹方

关于字体大小的问题:

顶部操作栏文字大小      34-38px

标题文字大小                28-34px

正文文字大小                26-30px

辅助性文字大小             20-24px

Tab bar文字大小           20px

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

关于界面设计就说到这里了,好的工作方法才能让自己事半功倍,你觉得对自己有帮助,那可以借鉴学习我的方法,在具体工作中也要灵活应用。

或者您有开发APP或者APP UI设计需求可以联系常州开发APP公司http://www.czwew.com/case/紫竹云科技!

一款APP的开发设计是如何从0到1一步一步设计的的更多相关文章

  1. 开发者必知的8款App快速开发工具

    开发者必知的8款App快速开发工具 “我有一个好创意,就差一个CTO……” “原生APP开发难度大,周期长,成本高,还没上线市场已经被占领了.” “APP版本迭代更新,都是企业的一道难关,没有一个一劳 ...

  2. 开发者必知的几款App快速开发工具

    “我有一个好创意,就差一个CTO……” ,这是今年炒的比较火的一句话. “原生APP开发难度大,周期长,成本高,还没上线市场已经被占领了.这个有没有解决方案?” “APP版本迭代更新,都是企业的一道难 ...

  3. 开发者必知的8款App快速开发工具开发者必知的8款App快速开发工具

    "我有一个好创意,就差一个CTO……" "原生APP开发难度大,周期长,成本高,还没上线市场已经被占领了." "APP版本迭代更新,都是企业的一道难关 ...

  4. 开发一款APP所需要的时间

    "要多少钱""要多少时间"这应该是一个企业在打算开发一款APP时问到最多的问题了.的确,现在的人不管做什么事情都讲究计划,更何况在这个时间就是金钱的时代,企业如 ...

  5. 一款APP的完整开发流程 (转载)

    来源:https://www.sohu.com/a/239089829_100063940 近年来,在市场和政策的双轮驱动下,我国服务外包产业快速发展,服务智能化趋势显现.随着企业核心业务外包活动的日 ...

  6. Capstone CS5265替代龙迅LT8711|设计TYPEC转HDMI2.0投屏方案|替代龙迅LT8711方案

    LT8711是一款高性能C型/DP1.2至HDMI2.0转换器,设计用于将USB typec或DP1.2源连接至HDMI2.0接收器.LT8711集成了兼容DP1.2的接收机和兼容HDMI2.0的发射 ...

  7. iOS设计 - 一款APP从设计稿到切图过程概述

    这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...

  8. 一款APP从设计稿到切图过程全方位揭秘 Mark

    纯干货!一款APP从设计稿到切图过程全方位揭秘   @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不 ...

  9. 10款无需编程的App DIY开发工具

    10款无需编程的App DIY开发工具 你有一个很棒的创意但不会编程怎么办?外包.合伙开发还是从零学编程?这里提供另外一种方式--使用无需编程的App  DIY开发工具.DIY开发工具不仅节省了开发时 ...

随机推荐

  1. spring boot注解

    一.注解(annotations)列表 @SpringBootApplication:包含了@ComponentScan.@Configuration和@EnableAutoConfiguration ...

  2. Django的Error汇总

    title: Django学习笔记 catalog: true subtitle: 11. Django_Error汇总 date: 2018-12-14 10:17:28 --- Django的Er ...

  3. 【udacity】机器学习-knn最近邻算法

    Evernote Export 1.基于实例的学习介绍 不同级别的学习,去除所有的数据点(xi​,yi​),然后放入一个数据库中,下次直接提取数据 但是这样的实现方法将不能进行泛化,这种方式只能简单的 ...

  4. 【剑指Offer】14、链表中倒数第k个结点

      题目描述:   输入一个链表,输出该链表中倒数第k个结点.为了符合习惯,从1开始计数,即链表的尾结点是倒数第1个节点.例如,一个链表有6个结点,从头结点开始,它们的值依次是1,2,3,4,5,6. ...

  5. Codeforces Round #406 (Div. 2) 787-D. Legacy

    Rick and his co-workers have made a new radioactive formula and a lot of bad guys are after them. So ...

  6. 洛谷P1996 约瑟夫问题【队列】

    题目背景 约瑟夫是一个无聊的人!!! 题目描述 n个人(n<=100)围成一圈,从第一个人开始报数,数到m的人出列,再由下一个人重新从1开始报数,数到m的人再出圈,--依次类推,直到所有的人都出 ...

  7. [Ynoi2011]D2T1

    题目大意: 给定一个数列$a$,有以下几种询问: 1. 给定$x$,在序列末尾插入$x$.2. 给定$l,r$,输出$\sum\limits_{i=l}^r a_i$.3. 给定$x$,将数列中的所有 ...

  8. windows 下 logstash 安装启动

    最新在研究elastic stack (elk)  : logstash 安装,下载最新版本的logstash: 点击打开链接 解压到磁盘根目录下:在logstash>bin 1.目录下创建:l ...

  9. 【ACM】nyoj_540_奇怪的排序_201308050951

    奇怪的排序时间限制:1000 ms  |  内存限制:65535 KB 难度:1描述 最近,Dr. Kong 新设计一个机器人Bill.这台机器人很聪明,会做许多事情.惟独对自然数的理解与人类不一样, ...

  10. 不错的题目-n个数连接得到的最大值

    这道题目还是很不错的 <[字符串排序]n个数连接得到最小或最大的多位整数> 题目 描述:设有n个正整数,将它们依次连成在一排,组成一个多位数,现在要求可能组成的多位数中最大的多位数是什么? ...