一款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开发工具不仅节省了开发时 ...
随机推荐
- Xilinx 7系列FPGA部分重配置【2】
在之前的“Xilinx 7系列FPGA部分重配置[1]”中已经较为详细地记录了分别在工程模式(Project Mode)和非工程模式(Non-Project Mode)下.使用7系列的Xilinx F ...
- PAT_A1119 Pre- and Post-order Traversals
Source: PAT A1119 Pre- and Post-order Traversals (30 分) Description: Suppose that all the keys in a ...
- Centos 7源码编译搭建Nginx
一.Nginx入门介绍 1. Nginx(engine x):[ˈendʒɪnks] 2. Nginx 是 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版 ...
- PHP判读MySQL是否执行成功
针对update 语句等会对数据表进行修改的语句 在mysql_query($sql);后面加上 $result = mysql_affected_rows(); 如果$result 值为-1表明语句 ...
- Spring MVC-环境设置(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_environment_setup.htm 说明:示例基于Spring MVC 4 ...
- UVA 10039 Railroads
这道题好吧,一开始便是拓扑排序的想法,搞了好久,试了多组测试数据,没错啊,可是没过...作孽啊,竟然忘了拓扑不能处理环,白浪费了一晚上... 只好用动态规划了.. DP[time][city]表示在t ...
- TagCloud with xml
Django后台开发 加了个3D标签云的插件 3DTagCloudwithXML 中使用的是xml生成方式 为了xml自己主动化生成 而不须要去手工改动xml 特地写了个xmlgenerator 比較 ...
- 【跟我一起学Unity3D】做一个2D的90坦克大战之AI系统
对于AI,我的初始想法非常easy,首先他要能动,而且是在地图里面动. 懂得撞墙后转弯,然后懂得射击,其它的没有了,基于这个想法,我首先创建了一个MyTank类,用于管理玩家的坦克的活动,然后创建AI ...
- 2014年辛星解读css第六节
这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千 ...
- 【cl】基本数据类型
8种基本数据类型 整数的演示:任何数据在内存中都是2进制的数据 内存中没有10进制没有16进制 byte 范围: -128 ~127 short 范围:-32768 ~ 32768 int 范围:-2 ...