APP视觉规范 - 从设计稿到切图

可以简单的理解为倍数关系(其实是为了满足不同分辨率,我觉得不用过于深究),如果你使用IPhone 6尺寸做设计稿,那么切片输出就是@2x,缩小2倍就是@1x,扩大1.5倍就是@3x了。凡事要有个规范系统,会提升产品的一致性,提高工作效率,更好的和程序哥对接。此文来讲讲我怎么完成APP的视觉设计的,并且给程序哥的视觉规范是什么样子的。

1.项目立项 2.尺寸规范 3.标注 4.切图5.命名


1.项目立项

1.1 确定APP界面设计风格

首先得根据的产品类型,针对人群做分析,对颜色,对风格有个初步定位,然后挑出几个页面做不同风格的设计,最后大家投票决定,选一种风格开始进行设计。我一直觉得设计在最开始时是最难的,所以我会在这部分花费大量的时间找风格找素材之类的。开头很重要,千万别图快,否则程序做到一半的时候又改设计是件相当麻烦的事情。

1.2 新建文件

在项目设计之初,就该进行项目归档整理。


文件Vende V1.0 APP的A 登录和注册,B 产品这样的分类是对照原型图设计的模块分类来的,一个页面一个包。


2.尺寸规范

2.1 分辨率大小


由于人力成本的问题,一般中小型公司都只用一套设计适配IOS和Android,我一般选择IOS(750 X 1334px)做设计,好适配,切出来就是@2x了 。(而且现在大多APP的IOS和Android都区分的不太明显了,eg:微信) 

2.2 字体

IOS: 

(英文)Helvetica Neue,Sanfranciscofont(旧金山字体-苹果ios9字体)

(中文)Heiti SC(黑体-简),冬青黑,华文黑体,苹方字体,方正字体,微软雅黑(方正和微软雅黑有版权最好别商用)

Android:

(英文)Roboto

(中文)思源黑体

字体大小:(我设置的)

导航栏:38px  正文:32px  辅助字体:28px,24px。注意要尽量保证设计的尺寸都是偶数。

2.3 按钮大小

在750 X 1334分辨率下,可点击按钮最好不要小于44px,我一般把常规icon设置为48px

2.4 预览工具

为了更好的预览设计图,我在手机上下载了Ps Play,可连接ps进行实时预览。

认识Ps Play:https://isux.tencent.com/ps-play-from-the-heart.html


3.标注

标注是重中之重,工程师能不能完整的还原设计稿,很大一部分取决于标注;如果不清楚你该怎么标,一定要和工程师沟通!

3.1 视觉设计规范图

对重复的一些控件,字体等不用每一个页面都标上,可以建立一个视觉设计规范图统一标注。视觉规范图不一定一气呵成,可以在做设计的时候添加。


3.2 页面标注

不一定每一个页面都标注,相似页面可以和工程师沟通或者做在视觉设计规范图上。

我还是习惯用Markman进行标注,并且以8px作为单位基数,形成网格。

下面是我做项目中的一些标注,作为参考。

(Readysales项目,以8px作为单位基数)


(Vende项目,以10px作为单位基数)

Readysales是前期的项目,标注更为仔细,在页面中画出了区域大小,但是比较耗时,之后发现程序哥也是采用的大概值,所以之后我都采用了Vende这样快速且清晰的标注方式。

4.切图

4.1 app icon切图

在1024px X 1024px的画布上设计app icon。然后利用工具Cutterman,它可以很快的导出各个尺寸的app icon切片,并且可以自动命名归档。

认识Cutterman:http://www.cutterman.cn/zh/ictemplate


4.2 icon切图

我习惯将应用中所有的icon归纳在一个psd文件里面。

注意:为了保证图片不失真,最好都为形状图层。


切图尺寸应该提供几套?

其实是为了满足不同分辨率,我觉得不用过于深究,如果你使用IPhone 6尺寸做设计稿,那么切片输出就是@2x,缩小2倍就是@1x,扩大1.5倍就是@3x了。也就是说我分别导出24px X24px,48px X 48px,72px X 72px的图标大小。如果你使用安卓的720 X 1280尺寸做设计稿,那么切片输出就是xhdpi,扩大1.5倍就是xxhdpi(1080 X 1920)了。也就是说我分别导出48px X 48px,72px X 72px的图标大小。

利用工具快速切片

需要在PS中安装Cutterman插件。它可以很快的导出不同大小的切片,并且可以自动命名。

认识Cutterman:http://www.cutterman.cn/zh/cutterman

4.3 特殊图形切图


4.4 切图格式:

一般情况下切片格式为png 24

4.5 缩小文件大小

有时候切图的文件内存所占太大,在不损失分辨率的情况下,利用软件可使文件变小。一般我切图后都会进行文件变小处理

认识TingPng:https://tinypng.com/


5.命名

注意点:使用英文命名(中文不识别,推荐小写字母);不要以数字或者符号当作开头;使用下划线进行连接,不要使用空格。

我一般按以下规律进行命名:

模块 + 类型 + 名称 + 状态/属性(可有可无).png

模块:(属于哪儿的,可有可无,因为有很多切片属于公用,无法分清具体哪个模块)

启动页面(default)登陆页面(login)导航栏(nav)侧边栏(leftbar)标签栏(tab)

类型:

按钮(btn) 图标(ic) 背景图片(bg)图片(img) 

名称:

返回(back)关闭(close)收藏(collect)radio(单选框)checkbox(复选框)

状态:

正常(normal)选中(selected)不可点(disabled)按下(pressed)

eg:

nav_btn_menu_normal.png(导航栏菜单按钮的正常状态)

nav_btn_menu_pressed.png(导航栏菜单按钮的按下状态)

tab_btn_me_normal(标签栏“我的”按钮)

ic_name(基础颜色,常用大小)

ic_name_color(不同颜色的变种)

ic_name_dark(深色)

ic_name_light(浅色)

ic_name_small(小号)

ic_name_large(大号)

ic_name_larger(更大号)

评论(4)
热度(31)
  1. 沐熙木木 转载了此文字
  2. Dorothy木木 转载了此文字

© 木木 | Powered by LOFTER