“设计规范,啥?”第一次看到这个高大上的名词,我是一脸懵逼的,然后我就开启了自己强大的搜索与归纳技能。
规范多半在产品1.0版本之后才会诞生。对于设计师而言,规范很重要的意义在于解决效率问题,但同时也在一定程度上扼杀了设计师的创造力。
原来就是界面&图标的尺寸,字体的大小,颜色。具体现在整理如下:
设计稿输出尺寸与分辨率对照表[推荐阅读]
Sketch 如何用一套设计稿较快速地做 iOS 和 Android 两个版本 app? (我在实际工作中遇到的问题,得到了解答)
APP UI设计及切图规范 (说得很完整)
【750*1334】iPhone6的原型规范如下:
1、界面尺寸布局:满屏尺寸750x1334px
2、高度电量条高度40px,导航栏高度88px,标签栏高度98px;
3、各区域图标大小导航栏图标44px,标签栏图标50px;
4、各区域文字大小电量条文字22px,导航栏-文字32px,标签栏字20px;
5、常用的文字大小:32px,30px,28px,26px,24px,22px,20px;
6、常用的颜色:背景浅灰色#f2f2f2,文字深黑色#323232,边框色深灰#CCCCCC;
7、常用可点击区域的高度:88px;
8、单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px;
9、常用间距:亲密距离:20px;疏远距离:30px,其它距离:10px,44px等;
10、按钮和文本框,原型图做成直角的,圆角半径是多少,由Ui来设计;
11、这种情况,需要修改原型。单个页面的逻辑流程图或用户学习使用时间,超过其它页面平均数的3倍以上;
交互设计——原型尺寸规范 (基于IPhone6的设计规范实例)
Android篇
界面尺寸
android的尺寸众多,建议使用分辨率为720x1280 的尺寸设计。这个尺寸720x1280中显示完美,在1080x1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。
状态栏高度:50 px
导航栏高度:96 px
标签栏高度:96 px
Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,当然高度也是和标签栏一样的:96 px
内容区域高度为:1038 px (1280-50-96-96=1038)
图标尺寸
图标尺寸【Notice】Android设计规范中, 使用的单位是dp, dp在安卓机上不同的密度转换后的px 是不一样的。
字体尺寸
字体尺寸Android 上的字体为:谷歌自己的字体 Droid sans fallback ,与微软雅黑很像。(5.0的简繁字体换了简繁思源黑体的Google版)
颜色值
Android颜色值取值为十六进制的值 比如一绿色的值, 给开发的值为 #5bc43e
IOS篇
界面尺寸
IOS界面尺寸图标尺寸
IOS图标尺寸字体
iPhone 上的字体英文为: HelveticaNeue;
中文,Mac下用的是黑体-简,Win下则为华文黑体;
所有字体要用双数字号。
颜色值
给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯,有时也用十六进制)
发现了神奇的网站:Stylify Me 填入网站 URL,自动生成对应页面的“Style Guide”并提供 PDF 文件保存。
[拓展文章]:
网友评论