从零开始做APP界面设计一:iOS 界面设计规范

准备整理一套APP界面设计教程,可能会花费一段时间,请持续关注。

首先开篇我们介绍APP 界面设计,也就是新手最常遇到的问题:尺寸。

我们以iPhone 7为例讲解iOS 界面设计规范。

一、APP 界面设计工具

做APP 界面设计用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下Sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度也就更快。

二. APP界面设计稿尺寸

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

从零开始做APP界面设计一:iOS 界面设计规范

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

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

从零开始做APP界面设计一:iOS 界面设计规范

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

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

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

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

所以做设计稿时请以750 x 1334 px来做设计稿。

从零开始做APP界面设计一:iOS 界面设计规范

从零开始做APP界面设计一:iOS 界面设计规范

从零开始做APP界面设计一:iOS 界面设计规范

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

从零开始做APP界面设计一:iOS 界面设计规范

这里再给大家略过下iPad的设计规范:

从零开始做APP界面设计一:iOS 界面设计规范

从零开始做APP界面设计一:iOS 界面设计规范

三. APP图标设计

iPhone 图标尺寸:

从零开始做APP界面设计一:iOS 界面设计规范

从零开始做APP界面设计一:iOS 界面设计规范

图标设计请用栅格化系统进行设计。

设计尺寸:1024 x 1024 px,尽可能的采用黄金比例设计。

从零开始做APP界面设计一:iOS 界面设计规范

四. APP界面设计中的字体

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

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

从零开始做APP界面设计一:iOS 界面设计规范

关于字体大小的问题:

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

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

你看一篇文章只需要10分钟,总结这些经验需要花费5年的时间,请点赞,转发……

本文转载自公众号:UI妹儿,原文链接: ,本文观点不代表125jz立场。

(4)
江山如画的头像江山如画管理团队
网页制作实战项目三:运动会页面制作
上一篇 2018年4月19日 下午7:27
从零开始做APP界面设计二:App界面设计尺寸
下一篇 2018年4月21日 上午9:28

99%的人还看了以下文章

  • 设计师必收藏的22个设计素材网站

    设计师必收藏的22个设计素材网站设计师必收藏的22个设计素材网站设计师必收藏的22个设计素材网站设计师必收藏的22个设计素材网站

    设计素材,是设计师创意的利剑。中国网页设计对素材门户网站进行整理,给广大设计师推荐国内最好的22个设计素材网站

    2020年2月23日 网页设计
    21.5K0
  • 董文利聊颜色搭配-节日经典配色

    网页设计师联盟优秀设计师董文利,董老师系列教程分享,聊颜色,特别是按节日给出的经典配色,牛** 董文利一名靠谱平面设计师/网页设计师/插画设计师。典型80后,爱绘画,玩音乐,不做设计的时候喜欢独自一个人在家附近的江水旁静静的坐上一小会儿。2011年毕业于湖北工业大学艺术设计学院,所修专业是平面设计。

    2021年2月4日
    40.3K0
  • 错位排版设计的5个实用方法(精)

    错位编排是通过对标题文字大小、位置和笔画的调整,打破固定的排版样式,让标题的排版更具个性化,是提升标题编排设计感和美感最简单最实用的设计技巧。

    本期分享 5 个常用的错位排版方法,学会这些方法你也可以快速设计出个性的标题排版。

    2023年1月18日
    13.8K0
  • web开发技术课程项目考查

    考查目的 一、专业能力目标 ①检验学生对《web开发技术》课程的理解与掌握情况 ②锻炼学生运用所学知识解决实际问题,进行项目开发的能力。 ③掌握web项目的开发流程,网站建设的技术和方法,具备一定的网站设计能力及网页制作能力。 ④培养学生网站规划建设、发布,以及管理维护的基本技能。 ⑤培养学生掌握项目开发的的思想和方法,树立严肃认真的工作作风。 二、技能目标…

    2018年6月1日
    12.6K0
  • 怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载

    怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载

    字体版权一直是很多设计师的雷区,一不小心就容易触犯。125建设网和大家一起来弄清楚:免费可商用字体到底有哪些?怎么知道哪些字体是侵权的? 怎么知道哪些字体是侵权的? 可以在360查字体:https://fonts.safe.360.cn网站上检查自己电脑上哪些字体是免费可商用的,哪些是商用需要授权的。 免费可商用字体有哪些? 1. 思源黑体(推荐) 思源黑体…

    2023年1月18日 网页设计
    8.7K0
  • 网页设计色彩搭配:红色

    网页设计色彩搭配:红色网页设计色彩搭配:红色网页设计色彩搭配:红色网页设计色彩搭配:红色

    标准红色的RGB值分别是255、0、0。红色在网络上出现的频率可以说是比较高的,无论是传达吉庆的信息还是商业上的应用,是一种极具有表现力的色彩。 红色容易让人联想到太阳、热血、婚姻、喜庆,给人的感觉当然富有吉祥、吉祥、活力、激动、火暴等寓意。 如图所示: 图 红色基调 红色的波长最长,穿透力最强,感知度也最高。 它经常用来表现太阳、火焰、热血、花卉等,具有积…

    2021年2月4日 网页设计
    12.9K0

发表回复

登录后才能评论