6个技巧帮你把IOS的UI转换成安卓!

   想适配两个完全不同的平台,有哪些需要注意的点呢?今天这篇文章总结了6个值得新手学习的地方,包括图标、屏幕密度尺寸、设计等等,来收吧!


  1. 不要转换

  你不应该在安卓上使用同一套规格的UI。iOS有一个能让你一键返回桌面的“物理home键”。然而,安卓上的按键是“返回、home和多任务”。

  这意味着什么?

  一位安卓用户可以从一个应用轻松跳转到另一个应用。这是一个很大的不同之处。


  因此,iOS通常会有一个结合了纵向和横向的UI结构,但安卓则更偏向于纵向。


  这些“返回、home和多任务按键”都在屏幕底部,因此你不能把tab(标签)放在底部的位置。


  2. 熟悉新词

  你经常能挺到诸如“DP”、“SP”和“9 Patch”这样的词。DP和SP是尺寸单位,而9Patch是组件格式的名称。

  DP是Density-independent Pixels的简写,它是一个永远不会改变大小的绝对单位。

  SP和DP很像,但是它是可以伸缩的。如果用户在设备的设置里调大文字,那么通过SP定义的字体大小就会受到影响。


  Yahoo News Digest

  9 Patch是一个能让组件可大可小的格式,对于大幅缩小文件体积大有帮助。举个例子,它可以被用来作为带有阴影的按键。点击链接查看具体细节。


  9 Patch图片(左边那张)可以惊人地扩张成如右图那般的尺寸

  3. 理解屏幕密度和尺寸

  和iPhone不同,有百来个不同的生产商在基于安卓系统研发他们的手机。举个例子,OpenSignal.com的网站上有一份乍看美不胜收实则细思极恐的安卓碎片化信息图。


  不过这并不是说你要去为所有这些机子设计,所以不必惊慌。

  安卓有一个屏幕密度的系统能适应于每个屏幕尺寸。因此你只需要留意那5到7个不同的尺寸就可以了。


  对于1080 x 1920 pixels(XXHDPI)来说,所有像素值除以3便是DP。

  如果你以1080 x 1920 px开始你的设计,你并不仅仅是在为Nexus 5设计,那些组件和规格同样可以完美适配于其它的XXHDPI手机,比如Galaxy S4, HTC One 或 LG G2。

  下面我们回到DP的话题…

  DP是针对所有显示屏的一个绝对数值单位。要实现正确的像素值,你必须在每个分辨率上做乘除法。比如,如果对于1080 x 1920 px(XXHDPI)来说,所有像素值除以3便是DP。

  是的,你必须在这里做一些数学乘除,这也是为什么有一些设计师从320 x 480px开始(这样每个数字都是DP了)。然而,我更喜欢从1080 x 1920px开始,因为这是最流行的尺寸。但一切随你。

  在任何情况下,你都应该为优化app于不同的屏幕尺寸和分辨率而做出努力。我建议你在app上线之前,在至少五个不同分辨率的设备上进行测试。要知道,即便他们分辨率不同但比例还是非常接近甚至一致的,因此你不必太担心原始排版被打乱或需要重新设计的问题。


  Yahoo News Digest. 为各个分辨率适配。

  4. 图标

  安卓上图标的风格更加实心和圆润。


  Material Icons

  安卓的可伸缩图标系统能自动地在不同尺寸之间切换。然而这种切换可能会导致位图变模糊。为了确保你的位图不受影响,你应该在适配每个尺寸上花点时间。


  Yahoo News Digest. 图标为各个分辨率进行适配

  5. Material Design

  去年的时候谷歌发布了它的Material Design,这是一个全新的设计语言。不容置疑的是它确实是一个绝佳的设计方向。去他们的网站上看看,理解基本的UI原理。然而,不要太过纠结于颜色或者阴影这些特定的视觉设计。你完全可以玩出更多创意。


  6. 更多

  软键

  典型的安卓设备在屏幕上有特定的Home, 返回和菜单按键。然而,三星是以实体按键的形式应用在他们的硬件设备上的。这让一切又变得些许不同。确保你的排版能在三星和其它设备上都说得通。


  插件

  安卓的插件从最早开始就是其独一无二的特点之一。你可以在主屏创建简单且实用的卡片(但它只提供局限的功能)。多看看别人是怎么做插件的,然后在开始设计之前和你们的工程师谈谈实现的问题。


  消息

  一个典型的消息往往由图标+文字或图片+文字组成。安卓4.x和5.x使用了不同的方式,这点也需要注意。


  7. 一些有用的链接

  这里有一些实用的链接(译者注:有一些被墙了,MD规范网上中文版都有,其它几个不需要翻译-即便是英文):

  Google Material Design(General)

  Google Material Design(Patterns)

  androidux.com

  pttrns.com

  materialup.com

  重复一遍,不要无脑转换。多用用安卓,两者之间的区别是巨大的。

时间: 2024-11-29 04:31:31

6个技巧帮你把IOS的UI转换成安卓!的相关文章

将PPT文档转换成Flash/HTML使用技巧

  对于一些喜欢用PPT做演示说明的朋友们,偶尔会遇到客户机或其它机器未安装Microsoft Office PowerPoint而无法演示的尴尬,但如果你有了iSpring这个PowerPoint插件,便会让此问题彻底消失. iSpring可以帮你将PPT文档转换成Flash文件,也可以让你直接用浏览器打开播放,同时PPT文档的体积也会大幅度的下降,是个非常不错的PowerPoint插件. 先来欣赏一下效果演示图吧: 图1 图2 接下来,笔者就给大家介绍一下iSpring的使用方法: 下载安装

120个PS技巧帮你加速设计

  01.旋转样式 Cmd/Ctrl+Shift+Alt+T 是一个神奇的快捷键,可以帮你制作出惊人的万花筒图案,当你使用它的时候,可以复制当前图层,并且同时重复之前的旋转.放大等操作.正如下图所演示,使用这一快捷键可以轻松地将一束炫光化作一个漂亮的万花筒.在操作的时候,你先用Cmd/Ctrl+T和适当的旋转,回车确定,然后使用这组快捷键,直到完成整个样式. 02.让图片覆盖在文字上 其实这就是剪切蒙板的功能,但是有一种更简单的处理方式:将图片图层置于文字图层的正上方,按住Alt键,单击两个图层

120个PHOTOSHOP技巧帮你加速设计(后60个)

Photoshop 工具使用技巧       120个PHOTOSHOP技巧帮你加速设计(前60个) 61. 快速调用笔刷 快速打开笔刷面板的快捷键是F5. 62. 混合火焰效果 A: 复制火焰 打开一个人物肖像图片和一个普通的火焰图片,使用移动工具,使用自动选择图层,并且显示变换控件.将火焰图片拖放到肖像图片上,模式选择混合模式. B: 位置和扭曲 单击边款,改变火焰的图层,调整大小,旋转,定位.在调整状态下,鼠标右键点击调出菜单,选择"扭曲",调整火焰姿态.使用快捷键Cmd/Ctr

120个PHOTOSHOP技巧帮你加速设计(前60个)

  Photoshop越来越强大了!试图掌控它的全部特性是不现实的(更何况有那么多隐藏的功能!),那么我们不妨收藏一下大神们总结的这120个PS技巧,偶尔翻看一下,让自己的设计更强大更高效! 这120款技巧覆盖了PS绝大多数的主要功能,这些功能你很熟悉,但是明白它们的细节,掌控发招的捷径,修图作画的时候说不定能收获奇效呢! 01.旋转样式 Cmd/Ctrl+Shift+Alt+T 是一个神奇的快捷键,可以帮你制作出惊人的万花筒图案,当你使用它的时候,可以复制当前图层,并且同时重复之前的旋转.放大

干货!小技巧帮你完成创意十足的网页设计

干货!小技巧帮你完成创意十足的网页设计 时间:2014-10-09 14:42 来源:优设网 作者:小峰向前跑 小白叨一叨:依靠独特的设计手法,搭配上创意优秀的图片,可以让网页突破空间界限,给人留下深刻的印象.而如果有一些小技巧的话,则会有事半功倍的效果.(注:图片下为来源网站名) 作为一名设计师,每年都会沉浸在一些新的设计趋势中兴奋不已.接下来,我们将探寻2013年的最新设计趋势,这绝对是意义非凡的事情.Web设计师必须洞悉所有相关领域的新趋势,紧跟时尚潮流. 这些新趋势让设计变得妙趣横生.

CF四大技巧帮你巧拿黄金水晶箱 新手必看

CF四大技巧帮你巧拿黄金水晶箱 新手必看 1.先讲积分.这个图对玩惯了挑战的玩家来说应该没多少难度,一般配合意识好的玩家通关不需要复活币的(当然以后难度会不会调整就难说了).如果2次限时加分赛完成的话,积分分配得好的话,4个人是可以很容易打到1个水晶和3个黄金箱子的!建议和3个朋友一起玩,轮流拿水晶. 2.在讲2次限时加分赛的打法.第一次加分赛是在19关结束后,出现的好像40只超矮的矮子O(∩_∩)O~,这里建议全部人集中在加子弹的附近打,这样可以把他们全部吸引在一起,队友间也可以相互掩护.武器

技巧分析:把XHTML+CSS页面转换成为打印机页面

css|xhtml|打印|技巧|页面|转换 在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能够在打印的时候获得令人满意的效果.现在,通过使用结构化的XHTML和CSS,你可以实现同样的效果而只用花费少得多的精力. 从屏幕显示到打印效果 大多数的Web页面都是设计适用于在计算机屏幕上观看的.然而,有的时候用户需要将某些页面打印出来,也许就是为了保留一个长期的记录,或者将其用作方便的离线参考资料. 现在的麻烦是,让Web页面在计算机彩色屏幕上看起来

word怎样转换成pdf技巧分享

word怎样转换成pdf技巧分享 现在大家的电脑上经常会准备一款pdf文件阅读工具,用来方便pdf文件内容的浏览,而在工作的时候,大家经常需要将各种办公文件制作成pdf文档,就比如将word文件转换成pdf,可是word怎样转换成pdf呢? 对于文件转换问题,小编有非常丰富的经验,这里小编就为大家介绍两种word文件转换成pdf文件方法,希望大家能够轻松解决文件转换问题,加快工作效率. (一)在线版word转换成pdf方法 图片1 迅捷在线PDF转换器是国内首个支持多文件格式转换的转换平台,支持

ios 字符转化-iOS 如何将一个字符转换成byte?最好能有代码

问题描述 iOS 如何将一个字符转换成byte?最好能有代码 比如 nssting* str = @"2"; 转化.... 解决方案 http://www.cnblogs.com/leipei2352/p/3722411.html 解决方案二: http://mobile.51cto.com/hot-404914.htm 解决方案三: NSString *str = @"2"; NSData *data = [str dataUsingEncoding:NSUTF8