iOS和Android交互设计


  现在有很多产品为了降低设计成本并保持多平台体验的一致性,都以iOS为主做一套交互设计,应用于iOS和Android两个平台。但是在标注与切图的环节,如何高效的与开发对接,似乎并没有什么更高明的办法。很多团队的做法是先做一套iOS的UI+标注+切图,再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效,且无效的。为什么且如何做呢?

首先本文大前提是,交互以iOS的设计为主导,应用于iOS和Android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。
  对于设计环节。
  我对iOS和Android使用同一套iOS的交互设计这种做法不置可否,毕竟好多人都已经这么干了。而很多情况下,到底用一套交互还是两套,这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的,并不是简单的节操问题。所以这里不讨论到底一套交互对不对,只讨论这种情况下怎么干活。
  那么既然是同一套设计,如果仅仅是为了达到的交付物标准,输出两套几乎完全一样的iOS和Android的UI图,这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。
  来看设计环节的交付物。
  iOS和Android开发需要的设计交付物至少要有:高保真UI图,标注,切图。
  高保真UI图所起到的作用是,开发会参照其画页面,仅仅是获知页面样子的一个手段,并非什么高精度的事情。仅仅基于这一条,设计师就没有必要出iOS和Android两套样子一样只是大小不同的图的,对于开发来说,他们只需要看到页面样子即可。
  标注和切图的作用是,开发会按照标注的尺寸,把切图按照高保真UI图的摆放方式做到界面上。那么问题来了所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢?


  众所周知iOS设计的像素尺寸是640960/1136,Android主流的hdpi模式下的像素尺寸是480800。如图,他们的换算关系是,iOS像素尺寸的75%是Android的像素尺寸
  于是很多设计团队就基于这个75%的关系去做Android的图了,但是这不是个好方法,这是一个设计和开发没有成为好基友的状态下所使用的方法。
  我们知道Android开发所使用的单位并非像素,而是一个叫做dp/sp的单位,人家压根就不用像素,你费劲半天调一个480800又有啥用呢?你给他标注上,这个宽度300像素,又有啥用呢?设计不懂开发,开发也不懂设计,Android不懂iOS,iOS也不懂Android,很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。
  我们以480X800像素尺寸下做的设计图为基准。开发将部件尺寸换算成dp尺寸的方法是,像素尺寸X2/3。这也是为什么要让Android部件尺寸能让3整除的原因。所以在hdpi模式,480X800像素尺寸设计图中,开发看到300px宽度的标注,会定义其为宽200dp,到这里Android开发才得到一个他们真正会用于开发的数值。
  这整个过程,设计师做iOS尺寸图并标注,设计师调整iOS尺寸图为Android尺寸并标注px,Android开发看着设计师交付的标注,再将其换算成dp,很长的一个过程。
  其实经过以上整个过程之后,我们已经得出了一个更简单的换算关系:iOS像素尺寸
75%=Android像素尺寸,Android像素尺寸2/3=Android的dp尺寸。进而得出:iOS像素尺寸75%*2/3=Android的dp尺寸。所以,iOS里一个宽600px的东西,在Android的hdpi模式下,正好300dp,正好是50%,很容易算是吧?
  在这个关系的指导下,我们可以在同一套UI图上做适用于两个平台的标注。只要Android的开发知道,标注600px的东西,在hdpi模式下等于300dp这个换算关系,一切都简单了。当然,平台的区别要留意,例如iOS使用十进制色值,Android使用16进制,iOS可以绘制圆角和阴影,Android更倾向于用.9.png等。这些差异要在同一套标注中体现出来,让两端的开发各取所需。(如果你发现标注软件中无法在同一张图上标十进制和十六进制色值,你可以用文字标注替代其中一个,qq的截屏工具中也是带色值提示的,办法很多不再赘述。)
  至此,已经可以做一套标注,让Android和iOS的开发共同使用了。当然前提是你要告诉开发这个标注怎么看,怎么用!

附加切图规则

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