header_v0.7.2

【译】如何快速将iOS UI转换到安卓平台

311天前发布

原创文章 / UI / 教程
狐狸爱设计 原创,如需商业用途或转载请与狐狸爱设计联系,谢谢配合。

本文介绍了如何将iOS UI快速转化到安卓平台的几种方法,希望能对你有所帮助


声明:如需转载,请申请本人授权并保留文章全部信息,严禁私自用于任何商业用途,请尊重作者权益。


1、不要直接转换


不要直接在安卓使用和iOS同样的UI.

iOS有一个物理的home按钮,会将你从任何页面带回主屏幕。

然而,安卓屏幕上有“返回、home和多任务按钮”。

这意味着什么呢?

一个安卓用户可以浏览你的app,然后去另一个app,然后很容易再回来,这是和iOS很不同的。



744d57dfd55d0000012e7eb71968.jpg

基于这个原因,iOS通常有大量的横向和纵向UI结构,但是安卓更倾向于纵向。

3b9c57dfdbbd0000018c1b4ce24e.jpg这些“返回、home和多任务按钮”位于底部,这样你不需要在app底部再加一个Tab栏。

058357dfd57e0000012e7e382150.jpg

2、熟悉新的术语


你经常会听到“DP", “SP” 和 "点9"这些术语。

DP和SP是字号单位,点9是一种新的切图命名格式。

DP代表着独立于密度的像素,它是绝对单位,大小不会改变。

SP基本上和DP是一样的,但是它可以拉伸的。如果用户在设备上设置的字号很大,那么SP定义的字号也会很大。

c71757dfdbd00000012e7ef3f957.jpg点9是一种独特的可缩放的切图形式,能显著地减少文件大小。经常被用在带阴影的按钮上。

26d457dfd5ad0000012e7ef5962b.jpg


3、理解屏幕密度和尺寸


不同于iPhone,成百上千的制造商有他们自己的设备。

比如,OpenSignal.com为安卓分布的设备生成美丽但可怕的信息图。

8c6e57dfd5bc0000018c1b294b27.jpg

不用担心,因为你没有必要为所有设备设计。

安卓有一个屏幕密度系统,能自适应每个屏幕尺寸。所以你只需要注意5-7个不同尺寸。

a11657dfd5c90000018c1b5caa8d.jpg

如果你开始以1080 x 1920分辨率设计,你其实不止是为Nexus 5这款手机设计。这些规范和配置是适配于所有XXHDPI机型的,比如Galaxy S4, HTC One或LG。


让我们重新说回DP...

DP对任何屏幕都是绝对单位。为了得到正确的像素,你必须乘以或除以每个密度。

比如说,如果你以1080 x 1920分辨率设计,你要对像素除以3,才能得到DP。


是的,你必须做些数学运算,所以有些设计师以320 x 480分辨率设计(这样每1个数字就是1DP)。然而,我更倾向于以1080 x 1920分辨率设计,因为他是运用更广的分辨率。不过这个决定权在你。


在任何情况下,你应该在不同屏幕尺寸和屏幕密度的手机上为优化你的app花些心思。

我推荐你发布前至少在5个不同密度的设备上测试。

有趣地是,它们的比例是非常相似的,所以你不用关心初始布局。

bba757dfdbe90000012e7e74b5f3.jpg

4、图标


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

183957dfd5ef0000012e7ed39462.jpg

安卓的drawable图标系统是自动对不同的图标尺寸进行缩放的。然而,这个缩放会使得位图失真。

为了保证你的位图显示效果最佳,你应该花些时间优化每个尺寸的图片。

f77057dfd5fe0000012e7e4fc687.jpg

5、Material Design


去年,谷歌发布了Material Design,一个全新的设计语言。

毋庸置疑,这个真的是一个很棒的设计方向。

d44257dfd6100000018c1bfe6380.jpg

然而,在具体的视觉设计中,不要对颜色和阴影太过着迷,你也可以很有创意地运用这个。


6、其他


软功能键

代表性的安卓设备主屏幕是有专门的home、返回和菜单按钮的。可是,三星是在它的硬件设备上有这些按钮,这个会有一点不同。当给三星或其他同类设备设计时确保你的布局是讲得通的。

61f257dfd6230000018c1b1819b4.jpg

组件

与早期版本相比,组件是安卓一个特色。你可以在主屏幕创建简单但有用的卡片。

但它是有局限性的特色,所以在开始设计前看其他的app是怎么设计的,和开发人员进行沟通。


通知

通知是典型的图标+文字或者图片+文字的模式。


欢迎留言评论,也可以关注我的二维码:

f53157e933050000018c1bf7837a.jpg


声明:如需转载,请申请本人授权并保留译者全部个人信息,严禁私自用于任何商业用途,请尊重译者权益。




70

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功