【双语版】如何把iOS的UI转换成安卓的?

【双语版】如何把iOS的UI转换成安卓的?

1. 不要转换

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

这意味着什么?

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

【双语版】如何把iOS的UI转换成安卓的?

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

【双语版】如何把iOS的UI转换成安卓的?

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

【双语版】如何把iOS的UI转换成安卓的?

2. 熟悉新词

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

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

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

【双语版】如何把iOS的UI转换成安卓的?

Yahoo News Digest

 

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

【双语版】如何把iOS的UI转换成安卓的?

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

 

3. 理解屏幕密度和尺寸

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

【双语版】如何把iOS的UI转换成安卓的?

Image credit : OpenSignal :Android Fragmentation

 

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

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

【双语版】如何把iOS的UI转换成安卓的?

对于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上线之前,在至少五个不同分辨率的设备上进行测试。要知道,即便他们分辨率不同但比例还是非常接近甚至一致的,因此你不必太担心原始排版被打乱或需要重新设计的问题。

【双语版】如何把iOS的UI转换成安卓的?

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

 

4. 图标

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

【双语版】如何把iOS的UI转换成安卓的?

Material Icons

 

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

【双语版】如何把iOS的UI转换成安卓的?

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

 

5. Material Design

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

【双语版】如何把iOS的UI转换成安卓的?

Google Material Design

 

6. 更多

软键

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

【双语版】如何把iOS的UI转换成安卓的?

插件

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

【双语版】如何把iOS的UI转换成安卓的?

点击这里查看更多截屏

 

消息

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

【双语版】如何把iOS的UI转换成安卓的?

7. 一些有用的链接

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

Google Material Design(General)

Google Material Design(Patterns)

androidux.com

pttrns.com

materialup.com

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

谢谢


【英文原文】

How To Convert iOS UI To Android

Rookie Guide : How To Convert iOS UI To Android — Startups + Wanderlust + Life Hacking — Medium

1. Do Not Convert

You shouldn’t use the same UI spec to Android. iOS has a “physical home button” that brings you from any screen to home. However, the Android has “back, home and multi tasking buttons” on the screen.

What does this mean?

An Android user can browse your app, go to the other app, and come back easily. That makes a huge difference.

【双语版】如何把iOS的UI转换成安卓的?

For this reason, iOS generally has a mixture of vertical and horizontal UI structures, but the Android is more vertical.

【双语版】如何把iOS的UI转换成安卓的?

And these “back, home and multi tasking buttons” are on the bottom so you can’t have a tab on the bottom.

【双语版】如何把iOS的UI转换成安卓的?

2. Familiar with New Terms

You will often hear the terms “DP”, “SP” and “9 Patch”. DP and SP are size units and 9 Patch is the name of the asset format.

DP stands for density independent pixels. It is the absolute unit that never changes in size.

SP is basically the same as DP, but it’s scaleable. If the user set font is huge on device settings, the SP defined font size will be set as huge.

9 Patch is a unique scaleable asset format that dramatically reduces file sizes. It is typically used in a button with a shadow. Visit this site to see details

【双语版】如何把iOS的UI转换成安卓的?

9 patch image (left) is dramatically expand its size and become meaningful graphic

3. Understand Screen Density and Sizes.

Unlike with the iPhone, hundreds of manufacturers make their own devices. For example, OpenSignal.com made beautiful, but scary infographics for android fragmentation:

【双语版】如何把iOS的UI转换成安卓的?

Image credit : OpenSignal : Android Fragmentation

But don’t panic since you don’t have to design for all these cases.

The Android has a screen density system that adapts to each screen size. So you only need to take care of five (to seven) different sizes.

【双语版】如何把iOS的UI转换成安卓的?

If you do a mockup at 1080 x 1920 pixels(XXHDPI), you have to divide all pixel numbers by three and it will be DP.

If you start your design at 1080 x 1920 pixels, you are not designing only for Nexus 5. Those spec and assets all go to all other XXHDPI phones, such as the Galaxy S4, HTC One or LG G2.

And let’s bring back DP…

Again, DP is an absolute number for any screen. To make the right amount of pixels, you have to multiply or divide by each density. For instance, if you do a mockup at 1080 x 1920 pixels, you have to divide all pixel numbers by three and it will be DP.

Yes, you have to do some math here, so some designers just make it 320 x 480 pixels to begin with (then every number is just DP). However, I prefer to start at 1080 x 1920 pixels, because it’s the most popular size. But it’s up to you.

In any case, you should make the effort to optimize your app for different screen sizes and densities. I recommend that you test on at least five different density devices before going live. Interestingly, its ratio is very similar to others so you don’t have to care about the initial layout.

【双语版】如何把iOS的UI转换成安卓的?

Yahoo News Digest. Optimized for Each Densities.

4. Icons

Icon style is more solid and round on the Android.

The Android drawable icon system scales up/down icon sizes automatically. However this scaling can cause artifacts in the bitmaps. To ensure your bitmaps look their best, you should spend some time to optimize for each size.

【双语版】如何把iOS的UI转换成安卓的?

Yahoo News Digest. Icons are optimized for each densities.

5. Material Design

Last year, Google announced its Material Design, a new design language. Without a doubt, it is a truly awesome design direction. Visit their site to understand basic UI principles. However, don’t get crazy about color and shadow like specific visual designs. You can be creative with this.

6. More Things

Soft Key

Typical Android devices have dedicated Home, Back and Menu buttons on the screen. However, Samsung devices have those buttons on their hardware devices. It makes little difference. Make sure your layout makes sense with Samsung and others.

【双语版】如何把iOS的UI转换成安卓的?

Widget

Android Widget is one of the unique features from the early version. You can create simple but useful cards on the home screen. But it has limited features; so see how others are doing it and talk with engineers before you start to design it.

Notification

Notifications are typically icon + text or picture + text. Android OS 5 (Lollipop) and below OS4 (KitKat, Gingerbread) use different treatments.

【双语版】如何把iOS的UI转换成安卓的?

7. Useful links

Here is the list of useful links.

Google Material Design (General)

Google Material Design (Patterns)

androidux.com

pttrns.com

materialup.com

Again, Don’t convert. Use it for a while. It makes a huge difference.

Thanks

  • 【双语版】如何把iOS的UI转换成安卓的?已关闭评论
    A+
发布日期:2015年09月23日  所属分类:产品经验  视觉输出