田淇

UI/UE设计

WEDO协同办公

如何高效地输出iOS和Android标注和切图

TOUMA YAMAZAKI:

  现在有很多产品为了降低设计成本并保持多平台体验的一致性,都以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的开发和Android开发所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢?

  众所周知iOS设计的像素尺寸是640*960/1136,Android主流的hdpi模式下的像素尺寸是480*800。如图,他们的换算关系是,iOS像素尺寸的75%是Android的像素尺寸

  于是很多设计团队就基于这个75%的关系去做Android的图了,但是这不是个好方法,这是一个设计和开发没有成为好基友的状态下所使用的方法。

  我们知道Android开发所使用的单位并非像素,而是一个叫做dp/sp的单位,人家压根就不用像素,你费劲半天调一个480*800又有啥用呢?你给他标注上,这个宽度300像素,又有啥用呢?设计不懂开发,开发也不懂设计,Android不懂iOS,iOS也不懂Android,很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。

  关于dp与dpi等概念,请参考文章:http://www.zhihu.com/question/19625584

  我们以480*800像素尺寸下做的设计图为基准。开发将部件尺寸换算成dp尺寸的方法是,像素尺寸*2/3。这也是为什么要让Android部件尺寸能让3整除的原因。所以在hdpi模式,480*800像素尺寸设计图中,开发看到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的开发共同使用了。当然前提是你要告诉开发这个标注怎么看,怎么用!

  下面看切图

  在iOS切图与Android切图的转换中,是可以使用75%的换算关系的。也就是说iOS的切图缩小75%之后,就是Android的hdpi模式下的切图,而Android开发还需要其他dpi模式的切图,按照如下关系换算即可。

  关于Android不同dpi的参考文章:http://www.zhihu.com/question/20697111

  我们会发现xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟iOS下是一样的。所以iOS的切图可以直接适用于Android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式,如果需要适配,就需要单独处理图片了。

  要注意的是切图在缩放之后像素会糊在一起,很可能需要重新调整,还有各种虚边情况,尤其是那些带透明阴影的,都要重新调,但是这个工作量显然要比重新调UI重新切,要小多了。

  至此,我们设计一套适配iOS的高保真UI,基于该UI做一套适用于iOS和Android两类开发人员的标注,再输出一套可适用于iOS和 Android的xhdpi模式的切图,再调整一套Android的hdpi模式切图,基本上大部分工作就已经完成了。

  是不是感觉这种方法的工作量,一个人能干三个人的活了?

(作者:hoovay,http://www.origintel.com/)


IOS7设计师笔记(原创)【ios7设计的尺寸】

TOUMA YAMAZAKI:

图标尺寸

IOS7推出后,图标尺寸规范略有调整,为了得到更加精准的显示效果,大家可以参考参考下。

下表列出了图标的标准尺寸,按照此规范zuo作图,可以使图标能在搭载IOS7的多种设备中正确显示显示。

(单位:px)


所有图像和图标建议使用png格式,避免使用隔行扫描的PNG图像。

配色方面不需要限制web安全色调色板。

图标设计线条画,而激活图标则增加填充,未激活状态的线条消失或者反白。如下图:



欢迎大家关注我的微博@Gaoyoungor,与你分享更多关于设计。


字体字号

Helvetica Neue仍旧是iOS的默认字体,但普通文本通常是以细体字展示,而不是常规或粗体。需要突出强调的文本通常用的是中粗字体(例如,导航栏标题)。

表格中的字号就是系统系统的标准字号了,所以大家不要出现一些奇葩的字号了,附件提供给windows平台下的朋友一种可替代的字体。

以下是我在一个项目中的实践。


UI布局

·表单


·导航栏



竖屏模式



横屏模式导航栏缩短


IOS7 UI Transition Guide 笔记

1.  桌面启动应用程序图标更新到iphone:120X120px, ipad:152x152px;


2. 启动画面要添加回status bar(顶部zhuang状态栏);


3. view controller 用full-screen layout;


4. 重新设计bar button 图标(线条化);


5. 按钮要使用无边化(多为文字直接作为按钮);


6. 使用相对布局,auto layout,尽量不要写死坐标和大小(是否预示着大屏iphone的到来?);


7. 用户可自定义字号;


8. 注意底部手势的使用,IOS7将优先响应系统的控制面板(从底部上滑手势,唤出系统控制面板,软件内部谨慎使用);


9.尽量去特效化去拟物化,保持界面元素平滑和层次感(这就是简约设计的难点了);


10. 在application:didFinishLaunchingWithOptions:里判断版本 6 or 7 来载入相关资源(IOS6可以和IOS7呈现不同的UI效果);


11. 状态烂透明,其它bar都是半透明的;UIBarPositionTopAttached代表bar背景延伸到status bar,总高128px(导航栏高度高度加状态栏), UIBarPositionTop代表不延伸;


12. Navigation Bar 默认是半透明,底部有1像素的hairline;tintColor去定义barbutton,用barTintColor去定义bar 背景。如果要用自定义的返回按钮,需要做一个MASK图像作为切换过渡用。 NaviBar的下部阴影要用自定义图像和shadowImage来定义,不要用过长的带阴影部分的图像来做阴影,因为在IOS7上,多出的像素会首先放到statusbar;


13. Toolbar ,tintColor定义item,barTintColor定义背景,在top边有一条1像素hairline,UIToolbarPosition已经弃用了,用UIBarPosition代替;


14. barbuttons,使用图像有2种方式UIImageRenderingModeAlwaysTemplate(默认使用),UIImageRenderingModeAlwaysOriginal(使用它来设定不是用tinting)(这表明导航栏里面的按钮时可以用图片的,只是比较纠结);


15. activity view controller里的图标要用黑白和透明度表示,抗锯齿处理,不要用dropshadow。图标大小是70x70px,居中;


16. Ios7 的ImageView包含tintColor特性,在UIImageRenderingModeAlwaysTemplate模式下,tintColor会应用到该图片上;


17.slider在ios7里面可以用minimumTrackTintColor,maximumTrackTintColor, andthumbTintColor分别设定最小值颜色,最大值颜色,和触摸时颜色。如果设定成nil,就使用默认;


18. 切换按钮在ios7里面动感十足,可以用onTintColor, tintColor, andthumbTintColor设置开关和触摸样式;


19. Alert弹出框在ios7里面强制使用默认样式,如果你需要第三个按钮,将在默认2个按钮的上方显示


原文地址:http://blog.csdn.net/wangxiaohui6687/article/details/12704987

临摹,只可远观不可近瞧。

我80后,我在LOFTER

查看详情

董小陌:

尺寸大全哟。有木有有木有

用户体验的十大原则

大木多多。:

LeonWu:

郑坚义

   

1.体验是属于用户的:设计师并没有创造体验,他们只是创造体验的媒介,两者之间非常不一样。因为体验是主观的,所以它并不能按照实物产品的方式被设计出来。然而,这并不意味着我们不能设计用户赖以体验我们产品或服务的框架。如果这个框架是足够坚固的,那好的体验就会接踵而至。

2.体验是整体的:体验已经不再局限于产品本身,它由一个更大的系统中所有能够被用户接触到的部分组成,比如从产品到支持再到人们如何讨论它。这些东西并非都能以同样的方式被设计出来,但在某些层面上,它们确实是可以设计的。

3.好的体验是无形的:当用户感受到很好的体验时,他们很少会意识到当中倾注了多少心血才得以实现,仿佛这些都是理所当然的。作为一个体验设计师,越是优秀,就越少别人谈及。

4.体验是过程式的:人们伴随着时间的流逝体验着世界,并非所有的事情都在一瞬间完成。同样地,对于很多事物来说,人们不会一下子就获得很好的体验。我们必须明白,体验就像一场生命历程,从第一次开始,然后到常规性使用,最后甚至到消亡。之前的每一个步骤都应该是稳固的。

5.场景为王:在一个生产产品和内容都十分容易的年代,场景变成了最容易缺失的东西:我们怎样才能使自己创造的产品真正地适合目标群体?我们必须把用户使用场景的里里外外给搞清楚,这就是为什么体验设计师们做这么多用户研究的缘故。场景之于产品,犹如副标题之于文章,有着利剑一般的威力。

6.好的体验在于拥有操控感:世界上最糟糕的的感受莫过于觉得无能为力,当人们认为自己已经失去对事物的掌控,一般都不会感到愉快。但这并不意味着你不能为用户提供一些惊喜或探寻彩蛋的权利,只是说要让他们时刻感觉到每次请求时,都能够搞定下一步或者退出。

7.体验是社会性的:曾经,人机交互的体验只是个人性的,那时候人们做的事情主要是收发邮件。然而,这样的时代已经过去,我们不能只考虑个人,而是要包含整个社会群体。

8.心理学很重要:软件越来越易用,越懂心理学的设计师越有优势。这意味着我们需要深入了解使用产品和社交互动方面的心理学知识,以打造最好的体验。

9.体验是一种沟通:犹如市场营销一样,体验也是一种沟通。作为用户体验设计的专家,我们在与用户对话以探寻如何才能更好地帮助他们实现自己想做的事情。所以,用户体验并非一次性的产品,而是会根据客户需求的变更作出反应的服务。这种沟通包括了传达和探索如何才能使用户使用得更好。

10.好的体验是简单的:简单不仅是我们常常听说的“少即是多”,后者强调的是数量,而前者强调的是清晰度。如果人们能够毫不费力地明白如何使用你的产品,那证明你做到了简单。这也许凝结了你很多的努力,毕竟简单并不是那么容易设计的,它必定是经过千锤万炼的。

在接下来的文章中,我们将继续深入探讨这些原则。


转自知乎:郑坚义


初代PS,有没同学玩过呢


相机icon

总是喜欢很多颜色