一款APP的开发设计是如何从0到1一步一步设计的
目前在行业里,关于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一步一步设计的的更多相关文章
- 开发者必知的8款App快速开发工具
开发者必知的8款App快速开发工具 “我有一个好创意,就差一个CTO……” “原生APP开发难度大,周期长,成本高,还没上线市场已经被占领了.” “APP版本迭代更新,都是企业的一道难关,没有一个一劳 ...
- 开发者必知的几款App快速开发工具
“我有一个好创意,就差一个CTO……” ,这是今年炒的比较火的一句话. “原生APP开发难度大,周期长,成本高,还没上线市场已经被占领了.这个有没有解决方案?” “APP版本迭代更新,都是企业的一道难 ...
- 开发者必知的8款App快速开发工具开发者必知的8款App快速开发工具
"我有一个好创意,就差一个CTO……" "原生APP开发难度大,周期长,成本高,还没上线市场已经被占领了." "APP版本迭代更新,都是企业的一道难关 ...
- 开发一款APP所需要的时间
"要多少钱""要多少时间"这应该是一个企业在打算开发一款APP时问到最多的问题了.的确,现在的人不管做什么事情都讲究计划,更何况在这个时间就是金钱的时代,企业如 ...
- 一款APP的完整开发流程 (转载)
来源:https://www.sohu.com/a/239089829_100063940 近年来,在市场和政策的双轮驱动下,我国服务外包产业快速发展,服务智能化趋势显现.随着企业核心业务外包活动的日 ...
- Capstone CS5265替代龙迅LT8711|设计TYPEC转HDMI2.0投屏方案|替代龙迅LT8711方案
LT8711是一款高性能C型/DP1.2至HDMI2.0转换器,设计用于将USB typec或DP1.2源连接至HDMI2.0接收器.LT8711集成了兼容DP1.2的接收机和兼容HDMI2.0的发射 ...
- iOS设计 - 一款APP从设计稿到切图过程概述
这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...
- 一款APP从设计稿到切图过程全方位揭秘 Mark
纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不 ...
- 10款无需编程的App DIY开发工具
10款无需编程的App DIY开发工具 你有一个很棒的创意但不会编程怎么办?外包.合伙开发还是从零学编程?这里提供另外一种方式--使用无需编程的App DIY开发工具.DIY开发工具不仅节省了开发时 ...
随机推荐
- NW.js构建PC收银端安装程序的指南
1.首先下载nw.js的SDK: https://nwjs.org.cn/download.html 2.SDK目录下新建myapp文件夹: 3.myapp文件夹内新建package.json文件: ...
- XML的解析方式
//解析和输出XML public void showXml() { string filepath = Application.dataPath + @"/my.xml"; if ...
- Restrictions.like("字段field","%表达式exp%");
Restrictions.like("字段field","%表达式exp%");用hql语句就是 from table where field like '%e ...
- GDI 映射模式(11)
概述 调用 SetMapMode 函数可以设置映射模式: int SetMapMode( HDC hdc, // 设备环境句柄 int fnMapMode // 要设置的映射模式 ); 同样,调用 G ...
- X5内核浏览器,video兼容
使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题. 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理. <video-player ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- python爬虫03:那个叫做 Urllib 的库让我们的 python 假装是浏览器
相信你已经摸清了 浏览器各种请求的套路 也知道了怎么在手机上进行请求和返回数据的抓取 那么接下来我们就开始来使用 python 了 代码 lu 起来 那么 怎么用 python 写各种请求呢? 今天要 ...
- 10.IDEAD 的xml中配置DTD
此时发现最后一行已经变成绿色就说明可以了,有提示了
- hdu 4858 容器的简单模拟
我用临接表模拟容器超时 #include<stdio.h> #include<string.h> #include<vector> using namespace ...
- ExtJs之Ext.ElementLoader.load
稍微书上代码不适合. var btns = Ext.select('input'); 需要更改为: var btns = Ext.select('input', true); 不然报错: [E] Ex ...