安卓淘宝插件化框架使用（淘宝安卓端的设计思考）

安卓淘宝插件化框架使用（淘宝安卓端的设计思考）1. 视觉样式的影响作为一个跨平台的APP，我们希望在苹果和安卓两个终端的用户体验尽量一致，首当其冲的就是视觉层面的改造。一、问题背景当前，设计师默认以苹果手机为设计基础，适配基本上由前端开发同学来完成。此时，当输出的设计元素在安卓手机上无法兼容，就会导致用户实际看到的界面元素会有很大差异。从而给安卓端带来许多不统一甚至错误的界面视觉元素，影响用户原有的体验流畅性。二、影响用户体验一致性的因素

近年来安卓手机的用户量加速增长，对于淘宝这样体量的APP而言，亟需有一套自己的安卓设计规范，来适应当下的安卓用户使用习惯和快速发展的商业模式。App的设计师应该学习系统界面设计师的思维从最基础的用户体验来规范整个app的使用逻辑。

近年来安卓手机的用户量加速增长，尤其是中国地区的手机销量前5名都已被国产安卓手机站稳。对于淘宝这样体量的APP而言，亟需有一套自己的安卓设计规范，来适应当下的安卓用户使用习惯和快速发展的商业模式。

那么作为设计师，如何设计迭代现有业务体验，又能跟上安卓不断升级的设计语言？

下文将以淘宝设计师的实战思考为例向你介绍，不要走开，全是干货！

一、问题背景

当前，设计师默认以苹果手机为设计基础，适配基本上由前端开发同学来完成。此时，当输出的设计元素在安卓手机上无法兼容，就会导致用户实际看到的界面元素会有很大差异。从而给安卓端带来许多不统一甚至错误的界面视觉元素，影响用户原有的体验流畅性。

二、影响用户体验一致性的因素

作为一个跨平台的APP，我们希望在苹果和安卓两个终端的用户体验尽量一致，首当其冲的就是视觉层面的改造。

1. 视觉样式的影响

目前大部分的设计师都是以苹果750*1334的分辨率来输出设计源文件，对应的安卓规范设计分辨率为720*1280。

在两种分辨率相对应的标准屏幕物理尺寸下，设计图片会有一定的间距大小差异，甚至图片被拉伸的情况，尤其安卓手机同一分辨率会有多种屏幕的物理尺寸，这就需要我们对安卓的适配规范做新的规范定义，来减小这种视觉上的差异。

2. 安卓设计规范基础

从最初Cupcake的轨迹球到如今Pie的全面屏手势操作，兼容手机厂商和屏幕分辨率不断增多，基础栅格和多分辨率适配原则却一直沿用至今，得益于安卓的开放化，我们可以对这些基础的设计元素进行改造。

（1）适配逻辑

为了适配不同大小的设备，安卓给出了一套基于物理尺寸和分辨率为基础的设计适配逻辑，具体如下：

（2）PPI

pixels per inch，屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。

（3）DPI

dots per inch，起初用于衡量打印物上每英寸的点数密度，即打印机可以在一英寸内打多少个点。dpi的概念用在计算机屏幕上时，就称之为ppi。

（4）DP DIP

安卓上的长度开发单位单位。dp和dip都是Density Independent Pixels的缩写，密度独立像素，即同一物理尺寸，使用同样的设置在不同手机上显示的效果看起来是一样的。

（5）SP

scaled pixels的缩写，安卓上的字体开发单位，sp与dp类似。

（6）PX

pixels的缩写即通常所说的像素，是设计中使用最多的长度单位。将显示器分成非常细小的方格，每个方格就是一个像素。

三、改变了什么

对安卓基础控件的改造可以保证在兼容现有业务的情况下，对未来版本的升级规范样式，保持两端的统一性，减少用户的识别和学习成本。

1. 新的栅格系统

对苹果和安卓的栅格系统进行梳理后我们发现，两者原理上相同只在一些间隔细节的数字定义上有所区别，兼容需要调整到两端都可以适配的阈值，以750*1334的苹果手机和720*1080的安卓手机为例调整后的样子如下，两端基本看不出差异：

2. 安卓的沉浸式状态栏

商品中心化和内容中心化在淘宝越来越重要，当用户在专心浏览一件商品的图片或视频介绍的时候，沉浸式的状态栏显的体验更好，且在多种复杂页面间跳转的时候，状态栏的颜色不断变换，又跟导航栏颜色不一致，会降低用户的使用好感，安卓在5.0系统版本后支持自定义状态栏颜色，给了我们改动的可行性。

3. 弹窗的改造

安卓的弹窗样式和底部半浮层在实际的应用中作用并不相同，既作为提供警示信息、询问用户授权，又能作为二次确认或者下一步任务操作的选择器等，原生安卓弹窗是直角带阴影的样式，这不符合手淘中扁平圆角的统一 性。

我们在原生样式的基础上进行了样式的改造，使用了统一的圆角设计和系统配色，不单是这样，由于系统对APP权限的限制，一些系统层级的弹窗无法改动，在能保证加载速度的前提下，我们尝试用新的弹层样式覆盖原来默认的，以达到统一样式的目标。

4. 持续的改进

某种意义上来说：规范输出的那一刻也就是它被淘汰的时候，安卓和苹果目前都在保持一年一更的状态，等到他们的规范出来再做对应的升级本来就已慢了一拍，落地上线的时间就会更加靠后。

所以对于系统规范的升级是一个持续不断的改进过程，保持开放的心态，不断兼容新的业务和功能，我们也会持续更新淘宝的安卓设计规范，包括字体，交互逻辑，动画降级方式等。

结语

淘宝的体量越来越大，已经变成了一个类系统的app式存在，在这样的app里制定符合平台的规范需要极大的耐心，尤其在安卓用户占比日益增长的前提下，app的设计师更应该学习系统界面设计师的思维从最基础的用户体验来规范整个app的使用逻辑。

规范落地的时候设计师会遇到很大阻力，盲目的上线新的规范可能导致向下兼容的问题，设计师需要多了解不同业务间的需求和用户在使用时遇到的具体问题找到改进的平衡点，掌握好二八原则，使最基础的规范变为日常的设计准则。

作者：贤亲

链接：https://mp.weixin.qq.com/s/oGpKwdk-zMbVZcs9jIirQw

本文由 @淘宝用户体验设计 授权发布于人人都是产品经理，未经允许，禁止转载。

题图来自Unsplash，基于CC0协议。