每一次学习改版案例，不仅仅只是去看在视觉层面的变化，更多的应该是要学习到作者改版背后的思考。为什么要这么改，原因是什么，目的又是什么，怎么做，有哪些限制等等，有很多东西要去思考。所以，带着问题并结合自己实际中所做的项目来看案例，应该会是一个很有收获的过程。

项目背景

Booking.com缤客 是一家荷兰初创公司，并已经发展成为全球最大的旅游电子商务公司之一。
在Booking上，旅客可以选择世界上任何一处的住宿地点，包括公寓，度假酒店，民宿，五星级豪华度假村，树屋甚至冰屋等等。每天，通过平台预订的房间数超过155万。无论是商务旅行还是休闲旅行，人们都可以快速轻松地预订到理想的住处。

竞品分析

自从Booking发布以来，许多竞争对手都采用类似的商业模式疯狂跟进，抢占市场，并且在某些方面比Booking本身做的还好。

在调研的前期阶段，我去搜集了一些竞争对手和类似的平台，分析UI，用户体验，用户地图，信息架构和关键功能。但是我并不会花太多时间过于深入的去分析这些产品，因为我希望将重点放在Booking这个产品本身的诉求上。

使用场景

在之前的调研过程中，我发现了许多不同的使用场景，经过汇总归集，我集中关注以下3个场景：

• 场景1：用户知道其行程的日期和目的地（默认场景）
• 场景2：用户明确了日期但对其旅行的目的地不清楚
• 场景3：用户知道目的地但不确定其旅行日期

典型用户

在进一步的研究中，我明确了4位具有不同需求和不同目标的典型用户，这些数据对于改善不同用户的体验非常有用。

这个分析的目的是通过梳理最佳的用户流程并提升产品体验，来为不同需求的用户提供最好的用户体验。

△ 数据来源：在线研究和用户访谈（30个用户样本）

用户反馈

收集用户评论，从中我收到了很多有价值的反馈，这些评论中没有特别明确指出是可用性或功能性的问题。我将这些反馈分为4类（译者注：对反馈的问题进行提炼整理）：

• 预订被取消
• App的Bug
• 投诉的处理效率
• 反馈的进度

毫无疑问，最相关的是预订被取消的问题。太多用户会注意到不合理的费用或与房间的主人取得联系时遇到困难。

用户访谈

基于30个用户样本，我试图获得进一步的用户反馈，从中注意到以下的几点事实：

• 与其他平台相比，booking的平均价格通常更高
• 产品过于突出好评，用户很难发现一些真实的差评
• 当房屋主人接收到用户的回复时联系用户也很困难

我想引用一段话，来总结这里面遇到的问题，这段话也蛮有意思的，它说的是：

「与其他应用比较来看，套路显得有点多，会让你觉得一切看起来都蛮划算，总是想多卖一些东西给你。」

用户痛点

总结之前的分析，我提出了以下几点观点：

• 没有一个完美的解决方案能够满足所有用户，用户需要尽可能多的掌握有用信息。
• 没有的功能没有太多考虑到个性化需求。
• 可以改进UI并使用户更加集中于他的目标，而不是完全「以推销为中心」
• 优化用户与房东之间的联系问题

解决方案

从用户痛点出发，尝试找到合适的解决方案，来提升产品体验。

1. 主页

总的来说，我对首页进行了大手术。主页的搜索功能已经完全重新设计，减少过多的干扰信息。

导航：我设计了一个新的导航栏，剥离出「已保存」功能，这样用户就可以快速找到自己所收藏的商品。此外，我也优化了「交易」的模块，后面我会详细的说说这块的改动思路。

其它功能 :至于之前的版本，我保留了搜索和相关推荐的功能，重新设计界面以改善UI的可用性。

2. 社交功能

如今，社交网络在用户的生活中扮演重要的角色，那没理由在booking中做的这么差。我搞了一个新功能，允许用户关联自己的好友并查看他们的选择，包括他们的评价（喜欢/不喜欢）。我已将此功能放置到主页的下方，因为我希望在将其推广到其他模块之前收集更多有关它的数据。

3. 搜索功能

把这个功能分解为多个步骤。在输入第一个词后，即使没有指定日期或其他信息，也能显示相匹配的酒店。此外，我也加入了语音搜索，使搜索更容易。基于之前我对不同用户角色的定义，搜索的结果将根据最后的信息进行推荐：

• 1名成人 ——背包客 ——酒店
• 2名成人——度假夫妇——酒店，宾馆或B＆B（某种酒店形式）
• 2名成人+儿童——家庭——民宿公寓或酒店
• 1名成人+商务选择——商人——酒店

4. 列表页面

列表页针对易用性方面做了整体的优化：

• 我将筛选功能从3个按钮更改为2个按钮以减少用户的操作步骤——将它放在页面底部，方便使用
• 我添加了标签功能来更好的区分属性类型
• 在第一时间向用户展示物业的主要设施特点。注意：根据不同的用户，可以智能突出显示不同人正在寻找的不同信息。
• 我将报价的方式转换为「单晚」而不是「总价」，以便在不同商品之间进行比较

5. 详情页

我列出许多可以在详情页面中加入的修改。将总价格突出显示，以免有些隐形消费用户可能会被忽略。

增强了一个与评论相关的次要功能，允许用户通过不同标签筛选它们。

6. 交易功能

在优化开始时，我确定了操作场景2—— 「用户还不知道自己的目的地」作为优化方向。为了提供更好的用户体验，我增加了一个新的功能，用户可以在其中找到不同目的地的区间。利用筛选功能，用户可以选择最适合其需求的区间（区间 – 大陆 – 国家等…）

动效原型

最后，我还设计了一个整个项目的动效原型，把之前所有重设计的页面串联起来。

结语

由于时间限制，分析和结果是基于我的个人经验和少量数据，需要进行深入分析和其他测试，以便完善和验证解决方案。

文章来源：优设网

还在频繁地使用弹窗对用户展示重要提示吗？明知这样有损体验却没有更好的选择吗？那么不妨来试试干扰度更低，却依然可以用于重要提示的 Sheet 控件吧。

什么是Sheets

Sheets 控件并非弹窗，通常会被熟称为「浮层」或「浮窗」。

该控件在 iOS 和 Android 系统规范中都有相关定义，属于多才多艺的控件，可以用于给予信息提示，也可用于展示更多的拓展信息。

从用于提示的角度来看，Sheets 控件和 Dialogs 控件的相同点和不同点在哪里呢？

1. 共同点

模态化

二者都可以设置模态，当模态控件显示时，页面背景会显示深色遮罩，并立即打断用户当前操作。

承载操作和信息

二者都可以承载丰富的操作和信息，支持嵌入列表、选择器等控件及图片、文本信息。

2. 不同点

触发方式不同

Dialog 可以不通过用户操作而自动触发，Sheet 必须通过用户操作才可以触发显示，因此用户对 Sheet 的显示会更有预期。

关闭方式不同

Dialog 的关闭方式较少，通常会要求用户进行选项操作后才可关闭；Sheet 的关闭方式较多，对于用户而言有更丰富的选择权。

因此综上所述，我们可以发现，Sheet 对比 Dialog 的优势在于，它的显示会更符合用户的预期，它的干扰层度也会低于Dialog（因为更易关闭）。

• Sheets 在 Google Material design 规范中被分为了 Bottom sheest 和 Side sheets 两类；
• 在 iOS Human Interface Guidelines 中被分为了 Action sheets 和 Activity views 两类。

下面就由我来依次详解其特性和玩法吧。

Bottom sheets 底部浮窗

专属于 Android 的 Sheets 控件。

1. 使用场景

用于补充内容相关的更多信息（非模态）、提供可交互的菜单或对话（模态）或其它关键功能/任务的拓展。

2. 注意事项

• Bottom sheet 通常用于 Android 竖屏场景，在 Android 横屏场景建议使用 Side sheet。
• 在 iOS 中不建议使用 Bottom sheet，建议使用原生的 Action sheets 或 Activity views。

3. 样式类型

菜单样式

可嵌套 Menus，展示多个选项内容。

宫格样式

可使用宫格布局，展示多个选项内容。

迷你样式（非模态）

一个非模态底部浮窗可被设置固定展示在页面底部，用户可以随时用它来对其它功能/任务进行快捷操作，如进入购物车、查看所选图片、查看聊天和查看刚才的视频等。

4. 模态/非模态

非模态浮窗：如左下图所示，非模态浮窗与内容保持在同一层级，用户可同时对内容和浮窗进行操作。

模态浮窗：如右下图所示，模态浮窗层级高于内容，背景深色显示遮罩，用户仅能对浮窗进行操作。

5. 显示与消失

显示

浮窗显示时从底部向上滑入，非模态浮窗显示时不会打断用户操作，模态浮窗显示时会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。

模态浮窗在以下情况下会消失：

• 用户触发浮窗上的对应操作（自定义）；
• 用户点击浮窗外的区域；
• 用户下拉浮窗达到收起阈值后（自定义）；
• 用户点击 Android 系统返回键。

非模态浮窗在以下情况下会消失：用户选中浮窗上的对应按钮（自定义）。

6. 支持高度延伸

当浮窗底部仍有未显示的内容时，可设置通过滑动或拖动浮窗来使其变为全屏展示，并在顶部显示 Toolbar 来展示关闭/收起操作。

7. 支持深层链接

模态浮窗中可以展示其它应用的深层链接内容或操作，譬如调用 Google 翻译。

8. 范例

抖音的评论功能使用的是模态 Bottom sheet；百度地图的路线切换功能使用的是非模态 Bottom sheet。

Side sheets 侧边浮窗

专属于 Android 的 Sheets 控件。

1. 使用场景

用于补充内容相关的更多信息（非模态）或提供可交互的列表信息（模态）。

2. 注意事项

• Bottom sheet 通常用于 Android 竖屏场景，在 Android 横屏场景建议使用 Side sheet。
• 在 iOS 中不建议使用 Bottom sheet，建议使用原生的 Action sheet 或 Activity views。

3. 样式类型

菜单样式：可嵌套 Menus，展示多个选项内容。

宫格样式：可使用宫格布局，展示多个选项内容。

4. 模态/非模态

如左下图所示，非模态浮窗与内容保持在同一层级，用户可同时对内容和浮窗进行操作（在移动端较少使用，通常用于 PC 端）。

如右下图所示，模态浮窗层级高于内容，背景深色显示遮罩，用户仅能对浮窗进行操作。

5. 显示与消失

显示

浮窗显示时从左/右边缘滑入，非模态浮窗显示时不会打断用户操作，模态浮窗显示时会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向左/右边缘滑出。

模态浮窗在以下情况下会消失：

• 用户触发浮窗上的对应操作（自定义）；
• 用户点击浮窗外的区域；
• 用户侧拉浮窗达到收起阈值后（自定义）；
• 用户点击 Android 系统返回键。

非模态浮窗在以下情况下会消失：用户选中浮窗上的对应按钮（自定义）。

6. 滑动说明

支持上下滑动，不支持左右滑动。

7. 范例

淘宝的筛选功能使用的是 Side sheet。

Action sheets 操作浮窗

专属于 iOS 的 Sheets 控件。

1. 使用场景

用于呈现一组与当前操作相关的选项，如启动某个任务，或者确认是否开始执行某个可能具有破坏性的操作。

2. 注意事项

在 Android 中不建议使用 Action sheet，建议使用原生的 Bottom sheet 或 Simple dialog。

3. 样式类型

如下所示，支持单个或多个操作的展示，以及说明文案的展示：

4. 显示与消失

显示

浮窗显示时从底部向上滑入，会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。会在以下情况消失：

• 用户触发浮窗上的对应操作（自定义）；
• 用户点击浮窗外的区域；
• 用户点击浮窗「取消」按钮。

5. 显示位置

竖屏时显示在页面底部，横屏是居中显示在页面底部。

6. 范例

微信的选择朋友圈发布类型及清除聊天记录的二次确认，都是使用的 Action sheet。

Activity views 活动浮窗

专属于 iOS 的 Sheets 控件。

1. 使用场景

用于呈现一组与当前操作相关的选项表，如复制、收藏或分享。

2. 注意事项

在 Android 中不建议使用 Activity views，建议使用原生的 Bottom sheet。

3. 样式类型

列表样式

宫格样式

混合样式

4. 显示与消失

显示

浮窗显示时从底部向上滑入，会显示深色遮罩以打断用户操作。

消失

浮窗消失时会向底部滑出。会在以下情况消失：

• 用户触发浮窗上的对应操作（自定义）；
• 用户点击浮窗外的区域；
• 用户下拉浮窗达到收起阈值后（自定义）。

5. 显示位置

竖屏时显示在页面底部，横屏是居中显示在页面底部。

6. 支持高度延伸

当面板底部仍有未显示的内容时，可设置通过滑动或拖动面板来使其高度进行延伸，从而展示更多信息。

7. 范例

爱奇艺的分享功能和泡泡圈选择发布内容类型，都使用的是 Activity view。

用法总结

建议针对非系统级或业务级的重要提示，使用 Sheets 控件进行提示；Dialogs 控件仅用于最重要的信息提示才算是「好钢用在了刀刃上」。

另外在调用原生 Sheets 组件时，记得分端的差异性。

文章来源：优设网

当界面设计定稿之后，设计师需要对图标进行切片，提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求，直接影响到工程师对设计效果的还原度，并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度地还原设计图，起到事半功倍的效果。

通常我们只需要对 icon 与图片进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果。

切图基本规范

1. 切图的尺寸必须为偶数；
2. 同一模块内，切图大小应保持一致；
3. 如果有背景，尽量用平铺的背景图案来设计（减少程序体积）；
4. 可点击的部件要把相关状态都切图输出，比如：正常状态、点击状态、不可点击状态；
5. 输出的切图应当尽可能的压缩大小，以降低 APP 的总大小，提升用户使用时的加载速度（推荐在线压缩：https://tinypng.com）；
6. 所有的变形字体把它当成 icon 来切；
7. 切图输出格式：png-24；
8. 重复的东西只切一个。

切图输出类型

1. 图标切图输出

桌面图标切图输出

App 的桌面图标会被运用在很多不同的地方，比如手机桌面、APP store、手机的设置列表，所以 app 桌面图标需要很多个不同尺寸的切图输出。两个平台对应的桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。

系统图标切图输出

一套图适配双平台：iOS平台（iPhone 6plus版本除外）和安卓平台公用 44*44px 切图素材，即可实现一套切图适配两个平台的开发。

适配大屏幕：为了适配 iPhone 6plus、iPhone 7plus，单独切一套比原有 44*44px 切图大 1.5 倍的切图，即 66*66px 大小的切图。

APP内功能图标

图标是可以有留白区域的，建议图标尺寸尽量不要过多。

2. 图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的尺寸大小，以便于工程师开发使用。另外一般这些切图的文件较大，在切图过程中需要控制切图文件的大小。

全屏类切图

局部类切图

3. 动效元素切图

动效元素切图一般是指在 app 中加载动效所需要的切图元素。

gif 动图切图一般分为三种：

一是只需要给到 gif 图动效的部分即可。

△ 城易logo

二是，导出序列图片压缩打包给开发人员。

三是导出 json 。

Airbnb 开发了一款动效神器：Lottie，这是一个将 After Effects 动画提供给任意一个 iOS，macOS，Android 还有 React Native 原生 APP 的文件库。这些动画通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。

相关链接

• Lottie官方：Lottie 官方地址
• bodymovin：GitHub 地址（安装方法：https://www.uisdc.com/lottie-make-loading-animation）
  如若安装不成功，可在下面的网址中下载其他版本插件：bodymovin版本地址：https://github.com/bigxixi/bodymovin_cn
• lottie-ios：GitHub 地址
• lottie-android：GitHub 地址

如何导出json动画文件

打开 AE，首选项 – 常规，将允许脚本写入文件和访问网络选项勾选上。

窗口 – 扩展 – Bodymovin，选择好合成和保存路径后，点击 Render 导出 data.jason 文件，再把该文件交给 iOS 开发 （其他同理），具体如下图：

这里设置选择 Demo ，可以导出 html 文件，在浏览器查看动画效果。选择 Glyphs 将字体转换成图形形状。

导出文件：

在线测试结果：可以直接上传 json 文件，可以提前知道动画是否有问题，然后再交付给开发。

网址：https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切图命名规范

1. 通用切图命名：组件_类别_功能_状态@2x.png

举例：tabbar_icon_home_default@2x.png（对应中文：标签栏_图标_主页_默认@2x.png）

2. 模块特有切图命名：模块_类别_功能_状态@2x.png

举例：bill_icon_search_pressed@2x.png（对应的中文为：账单_图标_搜索_ 默认@2x.png）

3. 常用英文单词表

标注软件

现如今市场已有很多设计交互的平台，如：国内的墨刀、蓝湖、摹客等，国外的 Figma、invision 等，各自都有优秀的特点，既满足交互需求，又能有标注切图功能，选择适合自己团队的工具与开发一起协作即可。

1. Figma

支持 sketch 导入，Figma 也像 Zeplin 一样，标注页面间距与尺寸，并且支持各种图片格式、尺寸、形态输出，开发人员也有相应的代码可用参考，分享链接即可。

2. 墨刀

支持 sketch 上传页面至客户端，分享链接即可。支持多种切图格式下载，开发人员也有相应的代码可用参考，操作简单清晰。

3. 蓝湖

支持软件 PS、sketch 上传在线标注，在设计源文件上切好图片，开发人员可在线上下载，且有相应的代码可用参考，分享链接即可。

文章来源：优设

在日常的设计工作中，我们也许会遇到这样的情况：作品缺少变化导致枯燥乏味；而变化太多又会显得杂乱、没有章法；这就对应了设计中统一和打破的关系，那么为什么统一和打破这两种看似矛盾的关系，却总是能同时出现在我们的设计作品中？如何更好的理解二者之间的关系并运用到日常的工作中去？希望本期内容能对大家有所帮助。

在设计中统一并不是所有元素1:1的一模一样，它可以体现在：板式、配色、元素属性、处理手法等等，那么为什么要统一？统一的目的是什么？下面我们具体来说：

统一：让作品更整体

作品不够整体，会给人一种信息散乱、没有视觉焦点的感受；而将视觉元素进行“统一”，就能很好的解决这一现象，这无关乎技法的熟练与否，在我们的日常生活中就随处可见：比如：我们的书本排版，会有统一的页眉、页脚、段落留白、文字间距等等，其目的就有让文本内容在视觉感受上更像一个整体；下面我们看个设计中的案例：

如图所示，上侧案例给人的感觉比较杂乱，不够整体，原因在于：元素与元素之间的关联性不强，且视觉形态及色彩属性各不相同，导致整体各元素之间的呼应不够明显，所以会给人一种不够整体甚至杂乱的感觉。而下侧案例通过在形态、色彩、属性等方面的统一化处理，加强了每个单独视觉元素之间的呼应，使得画面更整体！

统一：让作品更整洁

不管是在设计工作还是日常生活中，干净整洁的东西都是更易于大众接受的，在设计工作中，做好统一是最重要的一环，在此前提下，才能做好另一环“打破”！所以当设计作品出现乱的现象时，我们需要对其视觉元素进行规整及相应的处理，比如：

通过左右对比我们发现，很明显右侧给人的感觉杂乱无章，而左侧干净整洁、有条理，原因在于：

①、元素与元素之间并不是相互孤立的，而是在视觉上存在着一定的呼应关系，相互关联，这样画面整体性也会更强。

②、视觉上将原本各不相同的形态以及色彩重新进行了统一处理，目的是通过减少视觉元素形态及色彩变化而进一步提升画面的整洁。

③、视觉元素在物理关系以及属性上也做到了统一，即统一元素与元素之间的间隔、形态、颜色等等。

下面我们再看组案例：

上图中，相比而言案例二比案例一给人的感觉更整洁、干净、也更像一个整体，原因在于：案例二中配图的属性做到了视觉上的统一，具体体现在：①、图片的颜色属性：统一蓝色色相属性；②、图片的内容属性：统一高端、仰视角度建筑属性；③、图片的留白属性：每一幅配图在视觉上都会有一些留白性质的属性，给人的感觉很舒服。

所以：出于让整体更整洁的统一，大多是在做减法或者合并的过程，目的是减少一些造成视觉整体杂乱的因素，比如：色彩杂乱、图形杂乱、文字形式杂乱、视角角度杂乱、以及过多无关联的视觉元素等等，统一的过程也是整合视觉元素的过程。

注意：设计中的统一并不是绝对的，而是相对的，如果所有的视觉元素、属性都严格按照统一化去处理，那么就会滋生另一个问题：整体视觉太过平滑、缺少变化甚至会给人一种单调、枯燥的感受。那么在强调统一的同时，“打破”就是为了解决这难题的。

在日常设计工作中，打破是建立在统一基础之上的操作，那么既然已经做好了统一，为什么还要打破呢？打破能为作品带来什么？下面我们具体分析：

打破：提升作品视觉层次感

当作品过于统一时，很容易会给人一种单调、乏味、缺少层次变化的视觉感受，而在统一的基础上做一定的打破操作，就能起到很好的解决这一现象的作用，那么什么是打破？举几个简单的例子：

如上图所示，图①就属于过于统一的表现形式，很明显整体平淡、乏味，缺少视觉变化；而其他都是在统一的基础上做了一些“打破”的处理，只不过各自切入点不同，下面我们逐一分析：

图②：切入点是打破了一成不变的排列形式。

图③：切入点是打破了一成不变的配色形式。

图④：切入点是打破了完全统一的配色形式以及形态。

图⑤：切入点是打破了统一的元素属性值。

图⑥：切入点是打破了统一的元素属性。

以上这些虽然切入点都各不相同，但是目的都是通过打破过于统一的视觉现象，增加整体视觉变化程度，从而提升整体视觉层次感，也打破了呆板、乏味，增添了一些视觉上的跳跃性。

下面我们再看个设计中的例子：

如图所示，上侧案例属于很好的贯彻整体统一的理念，而下侧案例则是打破了固有的统一、却也保留了大部分统一的属性，通过两者对比我们发现，其实单只看这一组案例：两种表现形式都是可取的，只不过相比而言下侧案例给人的视觉感受变化更多、层次感更强，所以相比而言给人留下的视觉印象更深刻。

上面说两种表现形式都可取的前提是：单单只看这组案例，但是很显然这组案例只是页面的局部，如果整体页面都如上侧案例那样严格的按照统一进行，那么页面整体就会过于平淡、缺少视觉层次感、甚至主次不分明。

打破：划分视觉主次

在现实生活中，具有差异化的人或实物会很容易引起周围人的注意，甚至印象深刻、难以忘怀。在设计中亦是如此！其具体表现形式参考上图①-⑥，因为打破过于统一就是在营造具有差异化的视觉元素，从而会很容易在视觉上形成先后、主次之分，所以就起到了一定的划分视觉主次的作用。

注意：打破也不可盲目的进行，过于统一会单调、乏味、重复感强；而过于追求差异化也会出现杂乱、没有章法的视觉现象。所以一定要结合实际情况灵活运用。一幅作品中大多情况下：打破的次数要少于统一，即作品整体绝大不多保留整体统一的属性，通过局部打破处理提升整体出彩度，这样容易给人一种干净、整洁且不失视觉变化、层次感的感受！

不妨找一些优秀的网页分析一下，是否很多优秀的设计作品都符合这一规律？

综上所述，统一是为了让作品有视觉条理性、更整体，而打破则是增加视觉层次变化，让作品更出彩！统一和打破看似是两个矛盾的名词，实则在设计中是相辅相成的作用！不管是统一还是打破，两者的切入点都是相似的，一般体现在：形态、属性、色彩、大小、位置关系、留白等等。但是无论如何统一都是打破的前提，如果作品整体性都不够，再一味的追求打破关系，只会让作品越做越乱。所以一定要先做好统一，其次才是进行打破、改变。当然文中提到的只是一部分，希望大家能活学活用、举一反三！

文章来源：站酷

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本文是我学习Material Design设计规范的学习笔记和个人理解，希望对大家设计暗色主题有所帮助。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在这个看脸的时代，无论是真实社交，还是网络社交，甚至虚拟形象社交，都是「颜值即正义」。长得好看是一大优势，或者至少要满足彼此的审美才有进一步发展的可能。当然要想真正地完成社交目的，还是要看个人的社交能力。在进行网络社交时（兴趣社交除外），可谓「无头像，不社交」，毕竟跟陌生人搭讪的筛选成本太高，看头像照片是最直接快速的方式。据说，有好事者在三里屯注册了某一款陌生人社交软件，并将头像设置成了一个在卢浮宫的露背少女照片，在短短时间内，居然收到了 10000 多次点赞，头像的魔力可见一斑。

头像设置流程

头像设置流程一般包括头像选择、上传、裁剪、预览四个步骤，在用户界面展现时，部分步骤可合并或跳过，但至少要包括裁剪和预览。

1. 选择图片源

头像图片的来源包括本地图片、系统推荐头像、用户个人线上相册、即时拍摄等。同一产品在不同端可以支持不同的上传渠道，比如 PC 端摄像头拍摄质量不佳，而且台式机不一定配备，一般可以不做支持。

2. 上传条件限制

上传本地图片作为头像时，图片的格式、尺寸、文件大小规则应尽量放开限制，至少要支持 JPG、GIF、PNG、JPEG、BMP 等格式。随着手机拍摄照片的尺寸和大小越来越大，所以 5~6M 是一个比较合适的上限。关于服务器图片存储，应保留一张高清大图和多套不同尺寸的缩略图。

3. 裁剪处理

图片裁剪包括系统自动裁剪和用户手动裁剪。如果不支持手动裁剪，最好把系统自动裁剪和截取做了。京东商城 web 端就没有截取图片中央区域，而是直接挤压或拉伸图片，导致图片变形效果很差。手动裁剪时，一般要辅助缩放、旋转、镜像等功能。缩放时需注意极限值，否则会导致背景空白（如QQ空间），要做相应的填充处理。裁剪框最好加入辅助线（如九宫格、方圆）和遮罩，方便实时预览方形和圆形头像的效果。有时也会加入滤镜、贴纸等功能。

4. 效果预览

「所见即所得」是打造优良用户体验的诀窍之一，所以提供实时反馈和预览是必不可少的。比如裁剪得到的各种形状和尺寸的预览，滤镜效果实时渲染等。当然，实时性也和系统性能有关。

头像的常见展示形状包括方和圆，有时也有异形头像。关于头像形状的「方圆」论证可以参考微信和 QQ 设计师的官方回复。

同样作为腾讯的产品，为什么 QQ 的头像是圆的？而微信的头像是方的呢？

腾讯的回应如下：

相比方形，人的头像更接近圆形。圆形 QQ 头像能更突出头像弱化背景，也更鼓励用户使用真实自拍作为 QQ 头像。

QQ 作为平台会接入游戏和第三方应用内容，圆形 QQ 头像在这些方形、异形图标环境中提高辨识度，降低用户的认知门槛。

QQ 希望给用户传递乐在沟通，展现年轻个性的态度，圆形 QQ 头像更具灵动和活力，与之无缝衔接的头像挂件也为用户带来更个性化的搭配和丰富的自我展示。

因为照片本来是方的，方头像更符合用户习惯。

《为什么微信头像是方的？QQ头像是圆的？｜你问鹅答》

还有百度小程序关于头像的规范可供参考：头像应保证清晰，头像的主体元素在方形或圆形参考线内，不遮挡关键信息，确保前端展现时能在圆形轮廓中展现完全。

设置头像的12种方式

1. 默认头像

为缩短注册流程，减少潜在用户流失，用户注册过程中一般不会强制用户设置头像。所以，为防止用户不去设置头像以及页面中头像加载不出来，系统会提供默认头像以便在相关位置展示。可以采用灰色头像，也可以采用基于企业吉祥物卡通形象设计的彩色头像（例如虾米、转转）。二者各有好处，灰色头像可以时常提醒用户去设置头像，彩色头像则可以丰富画面、增加趣味性。不过唯一的遗憾是一旦设置了新头像，改不回默认头像了，毕竟有的默认头像还是挺好看的。有的社区允许游客用户进行点赞、评论等操作，这时便会用到游客默认头像。当然，同一系统内，默认头像也可以不唯一，比如，根据用户性别、星座匹配头像，根据用户身份角色匹配头像（司机/乘客，招聘者/求职者），或者制作头像库为用户随机分配头像。

2. 系统推荐头像

让用户自己拍摄或找到一张自己满意的图片做头像，对有些用户而言其实是一件成本比较高的事情。如果用户群体足够大，图片质量难以保证，甚至内容监管又会带来新的问题，所以推荐一些优质头像供用户挑选，就成了一个很不错的辅助解决方案。QQ 很早就推出了类似功能，甚至成了会员服务的一部分。平安金管家 APP 也有类似功能，提供了四个商务风格的卡通头像供用户选择。

最近比较火的匿名社交APP Soul 也同样支持使用系统推荐头像，而且是只能使用系统头像，如下图所示，用户可以根据自己所设置的性别，头像风格选择心仪的头像。Soul 不允许用户上传其他照片作为头像，也是希望用户能抛开颜值，找到真正的灵魂伴侣。这些头像本身也体现了用户个体的审美情趣、价值观等。最近 Soul 新上线了「超萌捏脸功能」，下文会着重详细分析，不过捏脸而成的头像依然可以算是系统推荐头像，只是把头像拆解成了头发、脸、眉毛、眼睛、鼻子、嘴巴、衣服配饰等元素，然后再由用户自己排列组合。

3. 随机选择头像

前文也提到了随机头像，即系统会在用户注册成功后为其随机匹配头像，避免单一默认头像的沉闷，记忆中以前 GitHub 就是采用这种做法。另一种随机头像是指用户主动选择随机头像，获得相应的惊喜，比如哔哩哔哩就采用了这种做法。不过实在难以琢磨出这种类似「变脸」的玩法背后的设计逻辑。

4. 使用历史头像

在用户使用过一段产品之后，可能会积累大量的历史头像（主要是用户自主上传的，使用过的系统头像不记录在内）。QQ 就把用户的这些头像收集起来展示给用户，以便用户查看或重新选择，虽然用户重新使用的几率并不大，但不失为一种增进用户情感、提高用户粘性的做法，毕竟这里面满满都是青春的回忆，很容易给用户带来触动。

微信也有类似的做法，不过只能查看上一张头像。微信的设计哲学是不去刻意讨好用户，所以这里更多的是防止用户反悔，方便用户在最近使用的两张头像之间切换对比。马蜂窝的做法与 QQ 类似，不过增加了删除历史头像的功能（当前头像不可删除）。聊天宝（原子弹短信）有很多锤子的设计基因，锤子的设计师们推崇工匠精神，爱为用户创造小惊喜，所以聊天宝不能查看自己的历史头像，但却能查看好友的历史头像。不妨推测下背后的设计动机：现代人分分钟互相加个好友，但可能来不及备注，而人们对图像的记忆更准确、持久，所以看到头像可能就会很快地回忆起好友姓名、相识的场景等信息。

5. 文本头像

文本头像在商务类应用中比较常见，例如 OA。由于办公社交的社交属性并不是很强，更多在于及时通讯，所以图片头像并不是特别重要，并且文本头像中的字号更大，更容易辨识。要注意文本颜色和背景颜色的对比度，另外同一个应用中，文本和背景可以多做几个配色方案随机展示，以丰富视觉效果。此外还要注意文本的取值显示规则，下图是钉钉的部分页面截图，可以从中推测：

• 汉字类：单个或两个汉字展示全部汉字，三个及以上汉字仅展示后两个汉字；
• 英文类：一个单词时取前两个字母，两个及以上单词取前两个单词的首字母；
• 数字类：单个或两个数字展示全部数字，三个及以上数字仅展示后两个数字。

6. 角色头像/匿名头像

相信很多人都玩过 QQ 的匿名聊天功能，然后就被管理员禁止了，它更像是一种娱乐性玩法。其实还有类似的做法，在游戏中较为常见，在角色确定前显示的是用户头像，角色确定后就显示角色头像。比如斗地主，地主身份确定前显示用户本身头像，确定后则显示角色头像，而且还会根据角色性别显示相应头像。

7. 动态视频头像

动态视频头像可以让用户跨越时间维度从多角度展示自己。依然以 QQ 为例，动态头像分两种，一种是 QQ 会员才可使用的动态头像，由系统推荐，用户自主选择；另一种是让用户自己拍摄录制。具体流程如下图，用户先录制视频，然后选择一帧作为静态头像，以便能在不支持展示动态头像的地方展示。这也是目前的一大趋势，不过如果好友列表的头像都在动也还挺吓人的。

8. 轮播头像

针对陌生人社交场景，如探探，头像更显得重要，左滑还是右滑就在刹那之间，点进去主页也根本不会下滑屏幕细看具体的兴趣、资料，所以就要尽量在首屏展示更多更大更清晰的照片，轮播图就是一种很好的形式。探探最多可设置 6 张图片或 6 段视频作为轮播头像。其实，轮播头像类似 QQ 照片墙的概念，不过自我展示意味更浓。

采用类似轮播头像做法的还有音遇 APP，虽说主张以歌会友，但谁都喜欢唱歌好听的小哥哥小姐姐还有高颜值。如下图，个人主页背景图即头像轮播。还有一些社交软件可以将个人系列头像设为私密，然后定向开放展示给需要的人。

9. 捏脸头像

ZEPETO（中文名：崽崽）的火爆刮起了一阵虚拟形象社交的风潮，虽然是三维形象的玩法，但和之前红极一时的脸萌并没有本质的区别，要想实现从工具到社交的转变，获取关系链才是王道。多闪和 Soul 动作也很快，已经上线了捏脸功能，虽然目前是二维的，但相信巨头们早已开始布局三维虚拟形象社交了。目前 ZEPETO 可编辑脸型，甚至可以进行简单的化妆。服装配饰则包括衣服、头饰、首饰等，且支持按上架时间、价格等排序。室内装饰则涵盖了地板、家具、摆件、乐器等等。手势主要是一些肢体动作库，动作效果十分连贯。可以说 ZEPETO 集成了用户对场景搭建+服饰搭配+颜值定义+炫酷动作的完美幻想，同时也扩充了人们对虚拟形象社交乃至电商新形态的想象空间。

目前市面上，尤其是游戏领域，不管画风是 Q萌，还是 3D，时尚亦或仙侠，人物建模及捏脸系统已经比较完善，且得到广泛应用。这里推荐一款叫做 IMVU 的 APP，它的人物画风、服饰质感比 ZEPETO 更加写实，更偏成人化，视角转换也更加流畅，支持俯视/仰视。不过，脸萌早已凉凉，美图的图片社交之路似乎完全和 ins 对不上标，所以 3D 虚拟形象社交的未来之路也未可知。

10. 头像挂件

头像挂件、等级徽章、认证标志也属于头像的一部分，不过需要结合付费会员、用户成长体系、认证规则进行讨论才有意义。

11. 使用第三方头像

使用第三方社交账号快速登录已经成为登录注册页面的标配，毕竟一个授权就解决了账号注册、头像及昵称设置等问题。这两天，吃瓜群众们又一次见证了「头腾大战」。多闪使用了用户的微信头像和昵称，可是并没有得到相应授权，因为之前的授权是给抖音的，当然现在也停止授权了。不管是不是抖音碰瓷，但微信/QQ 账户上的头像、昵称的权益归属确实是个问题。个人上传的头像还好说，如果用的是系统推荐头像，这些图片的版权是不是归属腾讯呢？用户使用第三方登录后，最好还是引导用户尽快绑定手机并设置完善其他资料。

12. 群组头像

这里以 QQ、微信和钉钉为例进行分析。微信群聊头像由群成员头像组合生成，在方框内嵌套群成员的方形头像，根据群成员的数量多少（1-9）进行相应排布，多于 9 人时显示前 9 人头像。另外，微信暂不支持设置图片为群头像。钉钉群与微信类似，不过外观上是圆形外框嵌套群成员的方形头像，显示数量也有所限制（最多显示前4个），但可以选择其他图片作为群组头像。QQ 群比较复杂些，可分为讨论组和群，虽然现在统称「群聊」，根据创建方式区分如下：选人创建（对应的是讨论组）和按分类创建（对应的是群）。讨论组也是不能设置头像的，是在圆形内嵌套群成员的圆形头像，最多可显示前 5 个成员的头像。而群头像由管理员设置，且可以查看历史头像、使用系统推荐头像等。另外还有 TIM，定位是对抗钉钉的办公软件，比 QQ 更轻量化，视觉风格也大不相同， TIM 中讨论组头像的展示就采用了类似钉钉的做法──圆形外边框+方形头像。

延伸一下，有人说微信重新定义了群的设计形态，更贴近用户自然使用方式：无需群ID，无需刻意创建群，随时拉人开聊，无需命名，默认不保存到通讯录，搜索群时可通过直接搜人实现等。

结语

本文列举分析了头像设置的相关设计思路和案例，对社交产品的头像设计大有裨益。在设计时，寻求相关设计参考是获取灵感和解决方案的有效方法，认真发现生活中的好设计，及时积累并总结，才能在关键时刻有高质量的输出。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。