UI交付规范

总结:需要交付给开发的文件有
1,原图(png格式,三种分辨率7501334,12422208,640960,以7501334为基准)

2,切图(2x,3x)

3,标注图(三种分辨率底下标注图,以750*1334为基准)

4,流程图


为什么要以iphone6为基准?
是买不起iphone6plus吗?
----------------背景知识参考分割线---------------------
iphone4s-6s iphone6/6s plus
状态栏 40px 60px
导航栏 88px 132px
标签栏 98px 146px
iphone4s iphone5/5c/5s iphone6/6s iphone6/6s plus
分辨率 640960 6401136 7501334 12422208(1080*1920 downsampling)
物理尺寸 3.5 4.0 4.7 5.5
326ppi 326ppi 326ppi 401ppi
----------------背景知识参考分割线---------------------

要以iphone6/6s为基准的主要原因------------

与iphone5/5s比率一样
750/1334 = 640/1136 = 0.56...
覆盖4个机型,中间尺寸,缩放自如
想一想:为什么基准不应该是iphone6plus?
试试iphone6plus的图放到iphone4s的效果
想一想:为什么基准不应该是iphone4?
试试iphone4的图放到iphone6plus的效果

要以iphone6/6s为基准的次要原因-------------
黄太吉用户11月份机型统计占比列表
机型 新增用户(占比)
iPhone 6 32.78%
iPhone 6 Plus 25.44%
iPhone 6s 11.78%
iPhone 5s Global 9.04%
iPhone 6s Plus 7.63%
iPhone 5 CDMA 4.99%
iPhone 4S 1.22%
iPhone 5s GSM 1.22%
iPhone 5c GSM 1.04%
iPhone 5c Global 0.85%
iPod touch 6G 0.42%
iPad mini 2G Wi-Fi 0.42%
iPod touch 5 0.38%
iPad Air 2 (WiFi) 0.38%
iPad 4 Wi-Fi 0.33%
iPad mini 1G 0.33%
iPad mini 3 (WiFi) 0.28%
iPad Air (WiFi) 0.24%
iPad2 Wi-Fi (R2) 0.19%
iPhone 5 GSM 0.14%
iPad Air 2 (LTE) 0.14%
iPad mini 4 (WiFi) 0.09%
iPad mini 3 (LTE) 0.05%

分辨率
1242*2208 33.07%
750 x 1334 45.56%
640 x 1136 17.52%
640 x 960 1.22%
其他iPad分辨率 2.3%

我们原以为的高端iphone6 plus并非最多,最高45.56%,分辨率是750 x 1334,请记住最高占比分辨率是750 x 1334

要以iphone6/6s为基准的次要原因三-------------
UI所用单位px
开发所用单位point
如果从px得到point
12422208 的尺寸/3 414736
7501334 的尺寸/2 375667
假设一套app 50个界面,每个界面至少40个尺寸数 2000个数需要开发计算 请做2000个除以2和除以3的速度哪个快哪个慢

所以请务必采用750 x 1334分辨率做图,另外以偶数做标注,避免小数避免锯齿和边线模糊。

  1. 2,切图

iphone 4s,iphone5,iphone5c,iphone5s,iphone6,iphone6s这六款机型使用的都是2x图,
iphone6s/6 plus的是3x图,
比如UI给4060,起点(20,20)的按钮尺寸,开发是以2030去定大小,(10,10)的坐标定位,iOS系统根据文件名的2x后缀自动渲染为2倍的比率,所以UI需要命名为button@2x.png这种格式
对应6plus的请以60*90大小切图,命名为button@3x.png这种格式

-------------文件命名万能公式--------------
模块类别功能状态.@2x.png
模块
类别功能状态.@3x.png

举个例子
order_button_buy_normal@2x.png
order_button_buy_selected@2x.png
订单按钮购买默认
订单
按钮购买按下

尽量用英文,参考英文命名


图片
图片
  1. 3,标注图要什么
    要什么
    (1)尺寸位置
    (2)字体与大小
    (3)颜色
    (4)有多个同样大小的元素时,请标准是否动态计算,计算的依据
    为什么标注要让UI给,码农自己不可以量啊?
    -----可以量,量不准,边做边量也浪费工时
    UI也量不准啊
    ------码农能比UI量的更准吗

字体,尺寸布局属于设计的范畴,码农的关注点在于实现。

  1. 4,流程图为什么要
    导流图一部分可以再次梳理设计流转思路,验证路径的完整性
    海龙多次,包括上次晓鹏也提到我们的设计中都是一条路走到底没有考虑返回路径,没有考虑第二路径,以及与别的模块的交互,这一块从形式上是流程图的缺失所造成的。

画流程图的过程是梳理也是发现设计缺陷的过程。

比如eico早期设计了 帮助老婆订餐这种界面元素 想象相当美好,靠一两个界面元素就想实现界面交互,然而别的路径并没有考虑到老婆的关系怎么在程序中绑定,6个很好看的状态图最终也只用上了2个

比如在订单界面开通会员支付完之后界面的跳转和首页点击会员功能开通支付后跳转不一样,这个也是在开发过程中才发现有不同,临时再做更改,人为制造时间的黑洞。

总之,流程图能帮助验证需求,也验证UI元素增减是否合适,也让开发focus到功能的实现当中,提高效率。

UI中的几点建议
1,请避免为界面而界面


图片
图片

比如这个首页,大部分的界面被一个地图所占据 地图上面漂个地址,我是要订餐啊,
我订餐瞅着地图干啥呢,我又不是要自己跑出去买外卖
地图上也没有吃的,只有小摩托,小摩托跟我有啥关系呢,我要的是吃的啊

2,请考虑较为统一的界面转场效果
黄太吉界面转场 多处出现弹框 弹框关闭点 有在右上角 也有在底部
有从中间弹也有从底部弹 还有普通的转场,让用户的回退和下一步的操作产生困扰

可以回顾一下 现在app的弹框出现的普遍比早期少,微信的退出也从屏幕中间弹框转为底部全屏宽的提示界面,小屏幕里弹出小屏幕的感受并不美好

弹框的初衷是用来做提示的

图片
图片

我们还有从弹框里蹦出另外一个全屏幕这种交互


图片
图片
图片
图片

3,如果有改图,请考虑UI整体风格统一
比如首页的几个引导图,(图太大不贴了)

比如下面跟会员相关的三个图 我觉得风格是不统一的

所以要改来改去也是有事出有因,但是我们是能把三次以上的UI改动减为1-2次的,

我认为UI不能靠一两个控件的图片出彩 就像程序不能靠一两个写的比较好的函数方法出彩一样,都是要顾及到整体架构的

所以我觉得每次的UI控件元素的改动可以贴整张图看看效果

再放到整个系统的UI图里看看统不统一 ,以UI 专业的眼光必然可以发现问题

图片
图片
图片
图片
图片
图片

4,UI中可以多考虑手势和动效

既然要酷炫 为什么手势基本没有用到 一点动效都没有的怎么配得上 闪电连击和英雄砍杀这几个字

好扫兴。

参考资料
一张图帮你看懂 iPhone 6 Plus 屏幕分辨率
UI设计中我们为什么要动效
iPhone 6/6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸?
The iOS Design Guidelines

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,744评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,505评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,105评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,242评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,269评论 6 389
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,215评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,096评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,939评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,354评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,448评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,048评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2 354

推荐阅读更多精彩内容