美文网首页
APP设计规范是啥?

APP设计规范是啥?

作者: 倪小昇 | 来源:发表于2016-07-10 22:53 被阅读223次

    “设计规范,啥?”第一次看到这个高大上的名词,我是一脸懵逼的,然后我就开启了自己强大的搜索与归纳技能。

    规范多半在产品1.0版本之后才会诞生。对于设计师而言,规范很重要的意义在于解决效率问题,但同时也在一定程度上扼杀了设计师的创造力。

    原来就是界面&图标的尺寸,字体的大小,颜色。具体现在整理如下:

    设计稿输出尺寸与分辨率对照表


    像素分辨率&逻辑分辨率 Sizes of iPhone UI Elements

    [推荐阅读]

    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下则为华文黑体;

    所有字体要用双数字号。

    百度用户体验部对app字体的小调查

    颜色值

    给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯,有时也用十六进制)


    发现了神奇的网站:Stylify Me  填入网站 URL,自动生成对应页面的“Style Guide”并提供 PDF 文件保存。

    [拓展文章]:

    入行用户体验设计,规范是一切的开始

    老生常谈:关于合格 UI 设计师需要知道的那些事儿  

    相关文章

      网友评论

          本文标题:APP设计规范是啥?

          本文链接:https://www.haomeiwen.com/subject/pdqxjttx.html