Material Design/ios设计规范如何完美落地

目前比较流行的规范是Google的Material Design和Apple的ios设计规范。相信很多人在产品落地的过程中也参考了这两个大平台的设计规范，但却依然发现很难落地到自己的产品上，我们这里就规范与落地的内容做一些探讨。

首先我们来说下Material Design/ios设计规范是如何落地到产品上的，这里我整理了一个结构图用于讲解:

这个图来源于我们平常工作中的产品设计落地的流程，产品设计落地过程中可以分为两块，一块是产品层，一块是设计层如下：

产品设计落地过程

我们将产品层的流程与设计层的流程梳理清晰之后，可以清晰的了解到我们制定的规范是到了哪个环节，然后便可以在Material Design或Apple的ios设计规范中挑选出我们需要内容，进行合适产品自身的优化设计。

接下来我们研究个例子，看看大家熟知的产品－Airbnb。它在2016年初摒弃了ios设计规范，投向了Material design。

Airbnb界面截图

我们按照之前梳理的逻辑来分析一次，按规范落地结构图从上至下的分析：

1.首先分析产品的理念：

Google对Airbnb的设计理念的评价原话是这样的：

“One of Google’s Ten things we know to be true is “Fast is better than slow.” Airbnb clearly relates to this philosophy, and acts on it by showing respect for their users’ time. Essential tasks are satisfied through precise design, routing users clearly and briskly from sign in, to browsing, to booking a reservation. By neatly segmenting larger goals into smaller steps, Airbnb is able to sidestep the appearance of complexity, making the overall experience feel comfortable.”

简单的说就是产品要清晰高效的让用户达到目的，所以我们接下来将Airbnb的设计理念定义为“清晰高效”。（这并不是Airbnb的官方定义，仅作为示例用于讲解）

2.梳理产品功能

这里大致列举Airbnb的产品的主要功能：房源列表，按地理位置、入住时间、入住人数、评价等条件筛选房源、房源详情、预定房源、付费、评价。

根据这些功能，我们就可以提取出功能中常用的控件与模态视图，例如房源列表、时间选择器、人数输入框等。

3.根据规范进行合适的调整。

如时间控件，airbnb在material design的基础上，按照清晰高效的设计理念做出了调整。如下：

Airbnb延续了自己产品的设计理念，采用了更大的内容来提升用户选择日期的效率，也采用了更大的字体将信息清晰的呈现给用户。同时在关闭日历选择控件的操作上，保持了与返回按钮相同的位置，与APP内返回操作都在左上角的认知设计保持了良好的一致性。

在月份翻页操作上，Airbnb也追随了高效清晰的设计理念，将点击的操作改为了上下滑动屏幕的操作，更好的适配了移动端的操作习惯，将日期前后更清晰的连接起来。

在确定按钮的设计上依旧体现了高效清晰的设计理念，将按钮做的更大更易点击。

在选择控件上也做了对应的调整，将控件视觉设计的更大、文字更加明显，突出选择结果的呈现，在开关按钮上也做了更清晰的反馈。如下：

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

最后做些总结：

规范落地的流程和方法大致如上所述，其中整理出设计理念非常重要，需要清晰的了解用户需求后才可以准确得出。

后续的界面布局与控件设计都可以根据设计理念对Material Design / ios基本的规范进行优化设计，设计出更合适本身产品的界面与控件，最终就可以总结成一整套合适自己产品的设计规范。

以上仅列举了规范如何落地到产品的方法与流程，若有更多疑惑或建议，欢迎探讨。

谢谢读到这里 ：）