关于 MMFBOOK

MMF Book是一款给用户提供在线预约服务的 App，针对北美市场，预约服务包含美容、美发、美甲、健身、按摩、桑拿、纹身等；用户和商家可以通过短视频和图片分享展示自己的服务效果，或者是查看别人的分享；平台提供资讯内容让用户学习和了解更多时尚相关的知识。

布局

栅格

栅格是用于组织信息的工具，定位、对齐、制造间距分割比例。栅格由四部分组成：容器（Container）、列宽（Columns）、间隙（Gutters）、出血（Margin）。

我们页面的基础布局采用的是12栅格，因为可以被 2、3、4、6 整除，也就是可以把容器的空间等分为 2、3、4、6份，在移动端上能满足大多复杂信息布局 。具体参数参考下图:

由于375是奇数，栏数是偶数，不能被整除，需要调整部分栅栏的宽度以达到兼容，仅是在设计上作微调

使用示例：

注意：不需要限制死只使用一组栅格来控制所有的页面信息，特别是内容分块数不能整除栅格数时，这部分内容可以单独设定一组栅格组织它的信息。有时为了更好的显示效果，界面上局部内容也可以单独设置一组栅格。

间距

间距的定义，跟文本密切关联，间距之间的差异可以用来表达信息与信息之间的关系，根据亲密性原则，相关的内容之间的间距越小。

以 4 px 作为起点及最小增长单位，前部分增长节凑漫，增长比例为1~5，用于营造信息的相关性；后部分增长节凑快，增长比例为8和 12，用于营造信息的独立性。

间距的实例应用

内容框架

不同信息内容有不一样的组织形式，根据信息内容的类型以及要符合用户在移动端上的认知和操作习惯，将一些常用场景设定为页面框架，并保持统一使用。

下面是一些内容组织框架示例：

颜色

品牌色 (Brand Color)

MMF BOOK 的品牌定位是活力、时尚和趋势，Brand-05的黄色能匹配和映射出我们的品牌个性和定位。

另外，也从品牌色延伸出了它的其它色阶，由浅到深的9色色板，用在我们整套设计语言的组件和品牌物流宣传中。

辅助色 (Additional Color)

用于状态、信息提示，比如成功、错误或普通信息提示。

中性色 (Neutral Gray)

中性色是应用最多也是最复杂的颜色，将界面上的元素进行拆解，包括字体、描边(线条)、背景、状态，以对它们进行颜色的使用定义，为什么这么做可从这里了解。

字体颜色定义

描边颜色定义

投影

为了更好的营造出界面上的层感，以 gray-08(#2C2C2B)为基准颜色，通过调整Y、Blur、Alpha等参数设定了3个层级的投影，分别使用于工具栏或导航栏、卡片、弹窗等地方。

字体排版

在UI界面上，字体排版是关于怎样组织和传达信息，包括几个关键因素：字族、字重、字号、行高、字距。

为了快速建立一个统一的排版系统，在这几个关键因素上做了规范约束。

字族

字重

共4种字重：Light、Regular、Medium、Bold，字重从左到右依次加大。正文和辅助文字建议使用 Regular 字重，当需要比Regular更细的字体搭配形成层次感时，用Light字重；小标题、大标题使用Medium或Bold字重（根据需要的层次感选择）；一般的字体加粗表示强调建议使用Medium字重。

字号 & 行高

由于英文字体普遍都比中文字体小一号，MMFBook的字号从13开始，也能保证信息的可读性，更为清晰（中文最小的会使用12，原生应用的还可使用更小比如11、10）。

不同的字号需要定义对应的行高以保证字体排版的空间感和易读性，这里的英文行高/字号的比例范围在1.2 ~ 1.4之间。再结合间距所定义的Spacing共同设计信息与信息之间的亲疏关系和制造留白空间。

字距

默认为auto，如果为了让排版更紧凑，字距调小；如果要让排版稀松，字距调大。

图标

外框区域：图标切图的大小

保护间距：导出时周围的留白区域

安全区域：图标的真实占用区域，设计尽量保持在这区域内，可适当微调

	外框区域	保护间距	安全区域
1	16px	1px	14px
2	28px	2px	24px
3	32px	2px	28px
4	56px	4px	48px

通用图标

Tab图标

预约相关图标

Salon分类图标

圆角

设计上使用圆角看起来会温和、友善；其次圆角在内容容器上很有用，因为圆角弧线向内指向容器中心，容易让视线聚集中心；还有的是人眼结构更容易处理圆角，大脑在处理边缘的时候会动用更多的神经（也就是需要更多注意力），但圆角会让大脑识别起来更容易。

我们设计的元素中用到了圆角，图片、按钮、卡片、Toast等，根据不同的需要，制定了两种类型的圆角值：固定值和百分比。

1. 固定值：4 | 用于按钮、图片、部分卡片；
2. 固定值：8 | 用于部分卡片、Toast；
3. 固定值：12 | 底部弹窗顶部边角、模态弹窗；
4. 百分比：30% | 选择项目按钮、选择日期的激活状态；

图片

MMFBOOK APP 使用到的图片比例有3种： 4:5、1:1、 5:4。

主要应用到门店图片、评价图、Portfolio、博客封面图、相册、Feeds信息流等，在不同设备上呈现出来的比例保持一致。

图片组合

1张、2张、3张 … 6张，不同数量的图片组合成一块，在Feed信息流中，每一块的信息的图片会有不同数量的图片进行组合，这里会根据图片数量对它们进行模块化布局。

预加载

图片预加载时，会对图片提取颜色，填充在其所在区域。好处是可以给用户对图片内容在颜色上的感知，其次是减少用户等待加载时的焦虑感。

加载失败

当图片加载失败时（多数是因为网络原因），显示图片加载失败的样式，以便告知用户图片加载失败。

组件

组件根据我们的设计语言规范和App功能制定，将基本的通用的交互组件进行约束和定义，并做成规范，在统一设计和协作设计上都会有好处。

下面是MMFBOOK的部分组件规范

空状态

在部分内容页面如预约、个人评价、个人收藏、视频图片发布等页面，还有搜索无结果时的状态。

📮 到底了