目前在行业里,关于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. PAT_A1145#Hashing - Average Search Time

    Source: PAT A1145 Hashing - Average Search Time (25 分) Description: The task of this problem is simp ...

  2. 【编程工具】Vim编辑器的使用

    1.Vim简介   Vim最初起源于古老的贝尔实验室,由"Bram Moolenaar等人"开发,是一个功能强大的文本编辑器,被推崇为类Vi编辑器中最好的一个.   Vim是一个类 ...

  3. Codeforces Round #550 (Div. 3)E. Median String

    把字符串看作是26进制的数,从后往前翻译,那么就可以把两个串变成对应的26进制的数字,那么只要把两个数加起来除以二就得到中间的串对应的数了,同理再转化回来就行了.但是这样会有一个问题就是串的长度有2e ...

  4. 数据结构总结(UPDATING......)

    目标: 1.栈........√ 2.队列......√ 3.堆.........× 4.并查集...× 栈: #define MAXN 65536 struct stack{ int sz[MAXN ...

  5. Git 基础教程 之 添加远程仓库

    b, 本地内容推送至远程库上         git push -u origin master        实际上是把当前分支master推送到远程仓库,第一次推送时,加上-u参数, 表示Git不 ...

  6. 邓_ SVN·最新使用教程总结

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  7. Spring MVC学习总结(4)——SpringMVC权限管理

    1.DispatcherServlet SpringMVC具有统一的入口DispatcherServlet,所有的请求都通过DispatcherServlet.     DispatcherServl ...

  8. JAVA:将反射技术应用于工厂模式(Factory)和单例模式(Singleton)的简单代码

    反射技术大量用于Java设计模式和框架技术,最常见的设计模式就是工厂模式(Factory)和单例模式(Singleton). 参考URL: http://blog.csdn.net/xiaohai79 ...

  9. 【ACM】hdu_1042_N!_201308071639

    N!Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...

  10. C#--in逆变-out协变

    MSDN上的解释 协变保留兼容性,逆变与之相反 in的使用 个人理解:就是表明泛型就是可以逆变的(逆变就是大变小) // Contravariant interface. interface ICon ...