作为一个UI设计师,在进行 Android UI 设计之前,你脑海里首先应该明确Android系统和 iOS 系统之间的区别Android系统是开源的,iOS 系统是不开源的。Android系统开源对交互式设计师来说是友好的,但开源也是UI设计师的痛点:Android设备的屏幕尺寸多,碎片化严重。

例如,你会见到各种分辨率的 Android 手机:80×800、480×854、1080×1920,甚至还有2560×1440也就是俗称的2K屏,更高的则3840*2160(4K )。开启一项,可以在Pixso编辑器直接选择对应的移动端尺寸建立画布。本篇文章将分享与Android设备尺寸相关的 UI 界面设计尺寸基础知识,为你推开 Android UI界面设计的大门。

屏幕尺寸

屏幕尺寸

Android 逐渐成为移动操作系统的主导地位,从上图可以看到,360x640 是最常见的手机屏幕分辨率。纵横比为 16:9 的 Android 设备屏幕分辨率为 360x640 ,而在 iPhone 5 和 iPhone X 之间,每个常规 iPhone 型号的屏幕分辨率为 375x667。

Pixso建议:为 Android 设计 360x640 像素,点击注册Pixso账号,免费在线设计Android UI界面

组件

一个 Android App UI 屏幕通常由 4 个部分组成:

  • 状态栏

  • 应用栏

  • 内容区

  • 底部导航栏

内容区是放置主要内容的地方,例如,文本、图像、插图、视频等。以下是状态栏、应用栏、底部导航栏的高度参考:

导航栏的高度参考

应用栏

App Bar 通常由一个标题和一些图标组成,分解来看:

App Bar

18 是 Material Design 设计 的默认标题文本大小

底部导航栏

底部导航栏通常有 2-5 个选项卡,但最好不要超过不要使用超过 5 个标签。作为 UI 设计师,你需要清楚每个图标的含义,但作为与用户交互的界面,你还需要保证用户清楚每个图标的含义,所以最好设置带有导航图的标签。

边缘和边距

边缘和边距

上图用户界面的两侧边距为16dp,但这并不是硬性规定,有的UI设计师使用18dp,有的使用24dp。不过,如果你需要在内容区放置文本或者图像时,你可以使用8dp的边距,这样可以让用户界面看起来不那么紧密。

Pixso建议:作为UI设计的初学者,尽量使用16dp的侧边距,点击免费使用在线UI设计工具

按钮

Android UI 设计的按钮高通常为 48 dp ,而界面的可点击区域的大小至少应为 48x48 dp,小于这个值会降低抽头的准确性,如果你的界面需要并排使用 2 个按钮,那按钮间的间距至少为 16 dp 。按钮是UI界面设计的重要元素,按钮的大小、颜色、尺寸、布局会直接影响UI界面设计用户体验,Pixso 资源社区内置了大量按钮设计模板元素,提供多种按钮设计方案,点击进入Pixso资源社区,寻找按钮设计灵感

按钮

按钮的大小并没有硬性的规定,你可以根据你的需求更改按钮的大小,但你要确保48 dp 半径内没有其他可点击的 UI 元素。

Pixso建议:

  • 尽量不要使用低于32 dp高度的按钮

  • 尽量不要把32 dp高的按钮作为界面主要操作按钮

  • 主要操作按钮的高建议保持在40-56 dp 之间

  • 如果界面按钮的高为 48 dp ,标签的高尽量保持在 14-16 dp

按钮设计注意事项

  • 不要拉伸图标

  • 不要拉伸文本层

  • 不要拖动和缩放一组图层,这会导致像素破碎(像素破碎在设计时不易发现,但是开发人员能看见)

  • 不要使用损坏的像素,例如 44.23、39.97(可以四舍五入到全像素,再遵循 8dp 比例)

  • 不要对同一 UI 元素的不同实例,使用多种样式。

如果你想进一步学习 Android UI 设计的尺寸规范,你可以打开 Pixso的资源社区 ,Pixso集成腾讯、阿里、字节、今日头条、蚂蚁设计等众多大厂优秀的设计系统,UI 设计师均可直接拖拽复用,从此省去大量模块化设计环节的重复劳动。

Pixso