APP开发平台 > Blog > iOS 转 Android 的 APP界面UI设计指南

Apple 与 Android 在移动设备上的体验完全不同,各有自己的粉丝。在手机用户越来越多之下,企业纷纷同时推出 iOS和Android 版的 APP。


就设计师的职责而言,必须深度了解不同系统的设计规范与使用者体验差异,才能针对该系统设计出好的 APP。也因此,APP开发平台APIcloud提供了iOS 转 Android 的 APP 设计上手指南。


APP界面设计


1. 两套系统差异大,设计不能直接套用


绝对不要将iOS的UI设计与规格直接套用于 Android 上(反之亦然),因为两者的操作方式差异太大。例如:iphone上皆有实体 Home 键(iphone8已取消),按下它后会直接退回桌面;而 Android 除了 Home 键以外,还有返回键,可一层一层的退回桌面;以及还有可切换不同app的菜单按钮。


多了两个不同功能的按钮,让 Android 用户可以方便于不同 app 间"浏览"、 “来回切换",而这些差异使得两个系统的操作体验上有极大差异。为了适应这些先天上操作逻辑的差异,iOS UI 在架构设计上,多为结合纵向与横向;而 Android 的 APP 设计则为纵向架构。


刚刚提及的 Android 三个按钮(Home/back/菜单),会配置于手机接口的下方,因此你不能将 app 的分页按钮(tab)设计在屏幕下方,而 iOS 的 tab UI 则规定放置于屏幕下方。


2. 熟悉新词汇


你可能会听到ㄧ些专有名词如: “DP”, “SP” 与 “9 Patch”。 其中,DP 和 SP 是尺寸的单位而 9 Patch 则是切图格式。


DP(density independent pixels)是一个不会改变尺寸大小的绝对单位。SP 跟 DP 有些相似,但它是可以伸缩的(官方推荐在字体上使用)。例如使用者将手机上的字体设定为“huge”,则透过 SP 所定义的字体将会受到影响。


9 Patch 是一种独特的切图格式,它可以协助建立自动延展的页面,并大幅度地降低文档大小。通常使用于带有阴影的按键(android 5.0 之前阴影呈现的设定方法之一)。可参考官方说明。


3. 了解屏幕尺寸与密度


与 iPhone 不同,Android 的手机制造商相当多,且规格不一。


不过不用惊慌,你不需针对所有尺寸一一设计。Android 有屏幕密度调整系统,可以协助 UI 适应于各种尺寸的屏幕。基本上,你只需要注意5到7种不同的尺寸即可。


以 Google Nexus 5 的 XXHDPI 屏幕来说,通常以 1080×1920 pixels 为设计时的尺寸。但其规格与元件也可以通用于其他 XXHDPI 屏幕的手机,例如 Galaxy S4,、HTC One 或 LG G2 等。


嗯,不是很懂对吧?我们只好再谈一下DP了。DP是绝对尺寸的单位,不会依密度而变动。然而,因为要在计算机上绘图,所以必须正确的转换为pixel,此时你就要依屏幕密度不同除以或乘以不同数值以求 DP。例如,你绘制1个1080×1920 pixels 的原型,并以XXHDPI呈现,此时除以3就为 DP 值。


  • 公式为:px = dp * (dpi/160)


没错,你需要应用些数学。有些设计师会由 320×480 pixels 开始绘制,但APIcloud建议以 1080×1920 pixels 开始,因为这是个主流的尺寸。当然,一切由你决定。


最后,你应该要下点功夫在调整 UI 以适应不同的屏幕尺寸与密度。在推出前,建议可在五种不同密度的设备上进行测试。不过,其实比例都会相当接近,不用过于担心要更改原始的设计。


4. Icon


Android 的 icon 风格更为扁平与圆润。


此外,Android 的 drawable icon system 可以自适应其 icon 的大小,但放大缩小 icon 可能造成破图(artifact)。为了确保你的图示呈现最佳化,你还是得花点时间一一优化各尺寸的 icon。


5. Material Design


2014年,Google 发布了全新的设计语言-Material Design。无庸置疑的,它足以媲美苹果,是相当出色的设计风格与手法。所以研究一下 Google 官方的设计指南吧!


不过,在色彩与阴影的使用方式,你可能会不习惯,但这难不倒你的。(不要太过纠结于颜色或者阴影这些特定的视觉设计。)活用它并创造独特的设计吧!


6. 更多特色


Soft Key(虚拟按键)


如第一段所述,典型的 Android 设备皆有 “back"、"Home" 与 “菜单" 的按钮。这些可能会以实体按键呈现(如三星),或以虚拟按键呈现在屏幕上。


因此,在设计前需先注意这差异(因为可能占用 UI 呈现的空间,或产生更多有趣的互动方式,例如 LG 在虚拟按钮区域上设有手势功能,与放置其他功能之设计)。


Widget(小工具)


早在之前的版本,Widget 就是 Android 上相当具特色的功能之一。Widget 就是简化与保留核心功能的 APP 模组,可放置于桌布上,让使用者无需开启 APP,直接进行操作或阅读资讯。建议 iOS 设计师可以多参考相关 APP Widget 的作法,并在设计前向工程师请教。


Notification(通知中心)


由屏幕上方边缘往下滑,可把通知列往下拉出,通知列上的内容组合大多是 icon + 文字或是图片+文字。而Android 版本的不同也会有不同的处理方式。例如5.0版以后,各通知会以上下重叠的卡片呈现,以减少空间,但也可以快速的以滑动的方式展开。



更多app资讯,请关注www.apicloud.com

提交app定制需求,了解报价和周期:

https://app.apicloud.com/index?uzchannel=500

2018-09-21 来源:APICloud

APP界面设计

An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements
x