《一款APP设计的从0到1》系列文章干货

《一款APP设计的从0到1》系列文章干货

登陆界面ui设计_网站界面ui设计考试题_游戏ui界面设计教程

《一个APP设计从0到1》这是一个干货系列。 上次U姐说了APP立项和预估时间。 今天U姐就来说说APP界面设计和iPad界面设计。 规格。

往期回顾:

《一个从0到1的APP设计:立项》

《一个APP设计从0到1:项目预估时间》

这次U妹继续上一茬,先看看整个目录再继续(干货满满)

U姐列了一个小目录:

一、立项

2.预计项目时间

3.界面设计

4.切图标注

5. 视觉还原

6.在线准备

界面设计

我是一名UI设计师,所以U姐在这里说的是从设计师的角度来解释设计师在从头开始创建一个APP的过程中应该做些什么。

目前,在行业内,APP界面设计规范水平也参差不齐。 很多还在6设备和ios 9系统上,现在最新的是iphone 7和iOS 10(更新真快),我这里说的是最新的iOS界面设计规范(Android design specification,下次见)

一、关于设计工具

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

登陆界面ui设计_网站界面ui设计考试题_游戏ui界面设计教程

我个人第一次接触ps是从8.0,8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015,到现在最新的CC 2017游戏ui界面设计教程,深刻体会到新版本更好用。 您也可以根据个人习惯选择适合自己的工具。

2、设计稿尺寸

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

网站界面ui设计考试题_游戏ui界面设计教程_登陆界面ui设计

界面由:布局层、图形布局层和图标层组成。

在 iPhone 6 发布之前,设计稿是用 640x1136 像素制作的。 自 iPhone 6 发布以来,所有设计稿的尺寸均为 750x1334 像素。

网站界面ui设计考试题_登陆界面ui设计_游戏ui界面设计教程

U姐给大家展示一下目前为止所有iPhone的尺寸(1-3代就不用考虑了):

iPhone界面设计规范:

游戏ui界面设计教程_登陆界面ui设计_网站界面ui设计考试题

iPhone接口尺寸:

网站界面ui设计考试题_游戏ui界面设计教程_登陆界面ui设计

网站界面ui设计考试题_游戏ui界面设计教程_登陆界面ui设计

使用750x1334px作为设计稿标准尺寸的原因:

1.从中号向上和向下贴合时,接口的调节范围最小,最方便贴合。

2、在大屏幕时代游戏ui界面设计教程,仍然以小尺寸作为设计尺寸,这会限制设计师的设计视角。

3. Android版本设计时,只需进行极小的设计调整,提高设计效率。

因此,请使用750x1334px制作设计稿

游戏ui界面设计教程_登陆界面ui设计_网站界面ui设计考试题

游戏ui界面设计教程_网站界面ui设计考试题_登陆界面ui设计

游戏ui界面设计教程_登陆界面ui设计_网站界面ui设计考试题

在文档中建立参考线是一个好习惯。 我希望每个人都能养成这个习惯。 设置起来很容易。 我习惯于设置 24 px 的距离。 对比了国内外很多app,总结下来就是24px。 px比较合理,这是我个人的习惯,所以不要把它当成纯文本规则,你可以设置成30px,也是可以的。

网站界面ui设计考试题_登陆界面ui设计_游戏ui界面设计教程

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

这里U姐就略过为大家介绍iPad的设计规格:

网站界面ui设计考试题_游戏ui界面设计教程_登陆界面ui设计

游戏ui界面设计教程_登陆界面ui设计_网站界面ui设计考试题

3.图标设计

iPhone 图标尺寸:

网站界面ui设计考试题_登陆界面ui设计_游戏ui界面设计教程

网站界面ui设计考试题_游戏ui界面设计教程_登陆界面ui设计

图标设计请使用光栅化系统

设计尺寸:1024x1024px,可以使用黄金比例设计

登陆界面ui设计_游戏ui界面设计教程_网站界面ui设计考试题

4.关于字体设计

我们先来看看字体的历史演变:

iOS 9:英文字体为Helvetica Neue

iOS 9:中文字体改为Holly Black

↓↓↓

iOS 10:英文字体为San Francisco

iOS 10:中文字体为平方

游戏ui界面设计教程_登陆界面ui设计_网站界面ui设计考试题

关于字体大小的问题:

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

标题文字大小 28-34px

正文大小 26-30px

辅助文字大小 20-24px

标签栏文字大小 20px

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

这就是界面设计的全部内容。 只有好的工作方法,才能让你事半功倍。 如果觉得对你有帮助,可以借鉴我的方法,在具体工作中灵活运用。 如果有不足或者问题音效,也可以给U姐留言,U姐下一期带大家看一下界面截图,下期再见!