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

本文是我学习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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

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

△ 文中配图均来自美团官方和产品截图，仅作为设计交流使用

这是在设计群看见的一个启动页视频，第一感觉就是品牌色由「青绿色」变成了「黄色」，采用 C4D 渲染出各种使用场景和产品的各种服务品类，表明产品内部依然囊括了吃喝玩乐等一系列服务。风格比较年轻化，第一感觉还是蛮不错的，所以我立马去 App Store 升级了产品，发现 APP 启动图标也变了。

△ APP图标目前是第二个，猜测是想给用户一个过渡期

为什么美团突然要进行品牌升级？

官方给的说法是：为了「将所有线上线下曝光进行视觉化统一，流量到品牌的一体化」。同时希望以统一品牌色为起点，未来实现从线上到线下，从流量到品牌的四者一体。

确实是这样，就是为了品牌的统一，这就是这次升级的核心意义。这是典型的由公司经营战略为导向而进行的一次产品升级，这样做也是为了抢占用户心智，为了以后让人一看到黄色，就只会想到美团，而不是其他品牌，毕竟现在的产品太多元化了，每家大厂都应该有自己的一个独有的品牌色，这样品牌就不会过于分散。比如微信的绿色、淘宝的橘黄色、天猫的红色……如何让用户第一时间就想到你的产品，对于竞争异常激烈的今天这真是太重要了。

说到用户心智，前两天看见一篇关于品牌的文章，里面提到：早期的品牌战略是「定位理论」，它告诉了我们：品牌的竞争，是关于潜在用户心智的竞争，如今这一理论也一样适用。

为什么品牌升级，只升级品牌色？

因为品牌颜色的变化是用户最直接、最容易感知出的变化，品牌色是最容易吸引用户，占领用户心智的方式。

为什么是黄色，而不是青绿色？

为什么是黄色，而不是将所有色系都变为青绿色？

我们都知道，美团升级前是「青绿色」、美团外卖是「黄色」、大众点评是「橘黄色」，是各自不同的色系。

美团的四大业务支柱是：外卖、到店、酒店&旅游、出行。其中外卖的流量最大，每天外卖的订单有数百万计，这是一个巨大的流量，所以变身外卖「黄」也是为了流量和品牌更好地绑定。并且大街上奔忙的穿黄色衣服的外卖小哥，你一眼就知道是美团外卖，这些都是无形中的广告，也早已扎根于你的心智之中。相信很多人心中的美团 = 美团外卖，所以变成「黄色」是最合适的。

但是「美团黄」和美团外卖的「黄色」还有所区别，只能算是一个色系，美团外卖的黄色更显年轻一点。而「美团黄」官方的解释是：黄色代表着热情、温暖，象征着美团始终坚守「帮大家吃得更好，生活更好」的使命，致力于为用户提供更优质、有温度的一站式生活服务，帮助人们向美好生活靠近。

下面再来对比一下产品页面 UI 的变化：

△ 升级前主页面UI

△ 升级后主页面UI

单从页面对比来看，整体布局结构没有什么变化，不出所料，主要的区别就是将新的品牌色「美团黄」进行了视觉上的强化。

这种大块的品牌色比较突出的设计似乎和当下流行的简洁优雅的设计风格背道而驰，似乎只有在电商产品中比较常见，但我认为，这样的设计应该只是暂时的，相信在经过一段时间占据了用户心智之后，美团势必会顺应当下的流行趋势，在此期待一下。

去年被收购的摩拜一直亏损严重，继改名为「美团单车」之后，扫码骑车入口也整合进了美团 APP，如今为了让线下场景都统一成一个色系，单车也要变成黄色了：

对此，网上有人喊话美团：顺便把小黄车也收购了吧，毕竟黄色的单车给我们的第一印象就是 OFO，这样线下黄色的单车就全都是你家的了，我们的押金也就有着落了……

另外，还有一些其他线下场景品牌色运用：

这次美团的升级，不管你喜欢与否，它已经发生，就像年前的微信升级一样。一开始势必会有很多人不习惯，这其实也是受用户心智的影响，我们都会带有一种现状偏见来看待事物的新旧变化，这是很正常的心理状态，但是过了一段时间以后，都会淡忘，直到习惯，都逃不过「真香」理论。

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

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

这篇文章我们来谈谈移动端和PC端交互设计上的区别。

经常遇到一些设计师，他们之前负责的都是pc端产品，突然改做移动端，会不自觉的把pc端的一些设计理念“移植”到移动端，出现了水土不服。有经验的设计师一看你设计的移动端页面就知道你之前做的都是pc端，这是一件非常尴尬的事情。就好像你说了一句“nice to meet you”，别人就知道你老家是哪里一样。那么移动端和pc端交互设计上的区别究竟在哪呢？

大屏到小屏

开门见山，移动端和pc端最根本的区别就是屏幕的大小。屏幕的大小直接决定了界面信息量，pc端一个页面可以展示完全的信息可能需要移动端好几个页面来承载。

可能有的设计师觉得，屏幕尺寸不一样做自适应不就行了，移动端页面做长一点，让用户滑动就可以了。这是一个非常简单的处理方案，但是忽略了一个重要前提：用户愿不愿意滑动？根据埋点数据显示，多数移动端页面超过一屏的内容的曝光与点击量会急剧下滑，说明用户很少主动滑动去查看一屏以外的内容。对于移动端产品来说，一些重要的内容必须保证用户在一屏内可以看到。

1）信息架构重构

因此，如果你要为一个pc端网站做一个移动端app，首先要做的就是信息架构的重构。pc端有足够的空间可以把所有的功能直接展示给用户，而移动端只能展示一些主要的功能，一些次要的功能需要放在下一层级。

例如，appstore中用户是可以评价这条评论对自己是否有帮助的。PC端的处理方式很简单，直接展示给用户。而移动端是需要用户长按这条评论才可以弹出评价列表的，可能很多用户今天看了这篇文章才发现原来还有这个功能。没关系，之前虽然不知道，但是并没有影响你正常使用啊。对次要功能进行适当的降低信息层级是移动端设计师必须要考虑的。

2）一个页面，一个任务

对于上面信息架构重构的观点可能会有人存在异议，对于一些表单类页面来说，例如用户要借钱、转账，有些信息是用户必须要填的。在这些场景中，我们不担心用户不滑动，因为用户不滑动就无法完成操作。那么在这种情况下，是否可以继续延续pc端的布局样式？

以上面的转账流程为例，pc端是直接在一个页面展示，而移动端是分成了两个页面。为什么这样？把备注/付款说明也放在第一个页面不行吗？

因为移动端用户使用环境更加的复杂多变，更容易受到干扰，所以必须保证界面信息的简单直观。如果在一个页面中展示过多的信息量，容易让用户混乱。这里所说信息量并不是指绝对信息量，更准确的说法应该是用户主观感受上的信息量。同样的几个输入框，可能在pc端只占了页面的1/4，而移动端占了一整个页面，给用户的感观是完全不一样的。页面塞的满满当当，容易让用户焦虑。

一个页面可以完成的任务现在要跳转好几个页面，增加了操作步骤。用户害怕“内容多”，难道不害怕“步骤多”吗？不害怕，因为页面内容量是用户一眼就可以看出来的，用户无法立刻感知这个任务有多少步骤。因为无知，所以无畏。等到用户知道这个任务步骤数的时候，整个任务都已经完成了。

借呗的这次改版，用户要借钱必须先输入借款金额，其余的借款期限、还款方式和利息等信息才会展示给用户。这些信息都是跟用户借款金额相关的，用户没有输入借款金额，这些信息展示给用户意义也不大，不如隐藏，让用户的注意力聚焦于完成输入借款金额。

没有一个放之四海而皆准的设计原则，所有的设计理论都不能罔顾实际的应用场景而机械的套用。如果前后步骤关联性比较强，我建议不要分页展示。例如，目前很多的短信验证码都选择把“输入手机号”和“输入短信验证码”放到两个页面，我个人对此持保留意见。设想一个场景，如果用户迟迟没有收到短信验证码，那么他需要确定是手机号输错了、网络故障还是其他什么原因。用户需要返回到上一个页面查看，如果手机号和短信验证码放在同一个页面就简单多了。

3）突出重要信息

前面我们提到的主要是控制移动端页面的信息量。页面信息量少就可以了？当然不是，我们来看一下火车换乘的场景，如果你要从南京去新疆阿克苏，没有直达的车次，只能从西安换乘。我们来看看下面两款产品的处理方式，左边是12306，右边是飞猪。12306还是一股pc端风格迎面扑来，问题出现在哪？12306跟飞猪展示信息量差不多，唯一的区别在于12306展示了两趟车次各自的起止时间，而飞猪只告诉用户整趟旅程的起止时间。

显然问题不是出现在信息量上，而是对信息的展示形式上。用户更关注的信息，应该让用户更容易发现。对于一趟车次来说，用户更加关注出发/到达站、出发/到达时间和票价。对飞猪界面进行高斯模糊处理，发现用户的视觉焦点正好落在这些重点信息上。

12306所有的信息都属于同一层级，让人抓不到主次。而且界面中出现了过多的配色，更增加用户的信息获取成本。

鼠标到手指

pc端用户与界面进行交互靠的是鼠标，移动端用户靠的是手指。鼠标的操作更加精准，因此移动端界面中元素的尺寸和间距比pc端的大。以下图为例，左边是pc端，右边是移动端。移动端的输入框沿用的还是pc端样式，而且关于利率和手续费的详情icon过小，用户的手指点击的时候容易误操作。

给你的界面做减法

前面我们主要强调了移动端产品要尽量减少界面中信息量。可不可以在不改变产品信息架构的前提下，通过交互设计上的改动来完成目标呢？我给大家介绍两个方法：场景化和关联化。

1）场景化

在一个页面中，虽然内容很多，但是用户真正感兴趣并且会与之交互的内容很少。如果我们可以获知用户在特定的场景下对于某个内容诉求很高，那么我们突出展示；反之如果诉求很低的话，我们可以隐藏。

举一个之前说过的例子，知乎中，用户在搜索结果页滑动大概3屏后，会出现“向知友提问”按钮。因为用户滑动了3屏，说明用户可能对当前的搜索结果不满意，这时引导用户去提问，用户的意愿更高。如果我们全程展示这个去提问按钮，反而会减少用户的实际浏览区域，造成干扰。

上面主要提到了，同一个流程，需要根据用户不同的使用场景提供不同的功能。其实即使是同一个功能，我们也要根据用户不同的使用场景选择不同的展示形式。

还是知乎，为了方便用户可以快速的查看下一个回答，给用户提供了一个浮动按钮。但是这个浮动按钮，当用户开始滑动页面时候就会改变样式。这个很容易理解，当用户刚进入这个页面，为了降低用户的学习成本，我们需要直接告诉用户这个按钮是干什么的。当用户开始滑动进入阅读答案的状态，缩小按钮的形态避免对界面信息造成遮挡。

2）关联化

我们需要梳理信息之间的关联性，将相互关联的信息整合在一起，进而减少页面中信息量。支付宝账单的月份筛选功能，对入口进行了修改。之前用户需要点击日历图标，现在用户直接点击月份就可以了。用户要筛选的就是月份，那么直接把月份作为入口更加合适。

总结

以上就是我对移动端和pc端交互设计上区别的简单分析和总结，如果你有不同的建议和看法欢迎留言讨论。

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

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

项目概述

QQ 20周年，是互联网产品长青的一个传说，就在 20 周年的时间节点，QQ 向用户提供一份关于他自己的、真诚热切的 QQ 数据总结。通过数字，汇集出每个人自己的 QQ 时光历程，从而牵引出每个人对于成长、青春、沟通、时代流动的感知与回忆，引发 2019 年一场集体的情感共鸣。

△ QQ 20年来的一路变迁

项目流程

项目历时两个月，从项目初期，视觉和产品密集沟通，了解需求，进行头脑风暴，输出多个视觉方案纵向对比，最后确定视觉风格，分配视觉工作（插画，动画，3D）。项目后期，包括开发还原，数据调配等众多环节，环环相扣，缺一不可，一路过关斩将，整个 H5 需要不同岗位的高度配合和各专业的高度默契。

△ H5的项目流程图

项目难点

1. 异地合作

本次 H5 联动了动效，3D，插画设计师的共同合作，由于支持 3D 的设计师在韩办公，所以大部分都是在线上全英沟通，包括前期的项目进度同步，还有后期的模型调整等环节都能及时反馈，快速反应，最后如期打磨出五款 spaceQQ。算是一次顺利的异地合作。

△ 五款3D spaceQQ最终效果

2. 3D spaceQQ视觉还原

3D 鹅从设计软件转化为 H5 展示过程中，存在模型文件过大、材质缺失等问题，直接影响用户体验。在开发的过程中同学通过模型减面、重新选择材质，还有模型拆分等解决方法，在视觉观感和性能中建立了平衡的杠杆，最终实现了 15 个 SPACE QQ 的视觉还原。

△ 五款3D spaceQQ最终视觉还原效果

3. 视觉工作的同步进行

由于项目时间比较紧迫，而且 H5 加入了 3D 模型，还有需要大量的动效，所以需要在同一时间线上，同步进行，视觉稿输出，动画制作和 3D 模型打磨。考验设计师的沟通和执行能力。与此同时，需要随时和开发同步动画 demo 以确保动画可实现。和产品密集沟通，及时根据文案调整画面。

设计理念

因为 QQ 是陪伴了大多数用户的一个产品，见证了整个互联网社交的演变过程，容易引起用户的情感共鸣。设计的初期，围绕「个人轨迹」的主题发散了不同方向的视觉概念，在引起客户共鸣感的复古元素和传递不断「探索」未来的概念间寻找平衡点。最后沿用了 20 周年的太空概念贴合「探索」的主题，结合有年代特征的代表性视觉符号来引起「个人轨迹」的这一概念的用户情感共鸣。另外，H5 运用了 3D 打造了 15 只太空鹅，打造「个人轨迹」的专属感，既联动用户温暖的回忆之余，也增添了一些小惊喜。

概念设计

1. H5整体视觉风格

QQ，是陪伴了大多数人成长的一个互联网产品，其本身带有很多高辨识度的视觉元素，例如对话框，提醒上线的音效等。因为 H5 本身是一个大数据总结，专属感非常强的一个产物，所以希望是唤醒用户一些封尘已久的记忆，就像打开时间胶囊般的期待和感动。同时也象征着 QQ 一直陪伴在身边，从而引起用户的共鸣。

设计方面，除了通过一些标志性的视觉元素唤醒用户的回忆之外，也加入 QQ 20周年的太空「探索」主题的元素，响应 20 周年的主题之余，也寓意 QQ 不断地对外探索，从多个维度来看世界，寻找有趣的内容。

对话框，是承载数据的视觉符号，也是贯穿整个 H5 的重要视觉符号之一。寓意着 QQ 一直致力于「沟通」，而且不同时代的 QQ 对话框都各有特点，也是见证 QQ 时代变迁的重要元素，所以提取了三个阶段代表性的对话框样式来承载数据，并且加入有时代特征的视觉元素（如bb机，像素化的小箭头等）作为辅助，增加 H5 的氛围感，也算是视觉上的「小彩蛋」。

△ QQ原始对话框

H5 加入一些趣味感的元素，如笑脸，爱心等元素，背景辅以流动的彩色不规则图案，来增加对话框的玩味。也寓意 QQ 20年来给用户带来源源不断的乐趣，留下了不可取代的时代印记。

△ 重绘对话框

H5 中也加入了很多好玩的元素，不同时代所用的移动设备，融合贴近太空「探索」主题的背景；利用带手套的手和不同的元素进行互动；增加重绘经典头像的互动动画，加入 QQ 空间的植物等怀旧元素，增加 H5 的可玩性和惊喜感。

△ 经典头像的重绘

△ 经典头像穿插在H5中的小彩蛋

△ 带手套的手和有时代标签的元素互动

动画设计

1. 视觉动态化方案

在动画制作前期会出一份详细的动态化分页策划，以及一份尽可能表达完整的动画 demo，能便于设计与开发能准确的估算出制作周期。在开发完成预研测试后，基于动画 demo 共同制定一个大致的动态化方案──对话框等大面积使用代码实现，其他装饰性小元素全部使用序列帧。在观众每滑一页即可触发当前页的动画，且能保证大体动画的流畅度。

2. 动画制作

为了尽可能减少 H5 的运算体积，又保证画面动态的流畅程度，导出的序列必须满足以下所有条件：

• 全部元素可循环
• 尽可能少的帧数
• 可重复使用的素材

△ 设计了4个不同的色块流动loop，方便开发安插在每页合适的位置

3. 导出与同步

在配合开发导出的阶段，为了能明确序列的标记，所有序列文件命名为 xx-in/xx-loop/xx-out。使用同步工具以实现 AE 动画序列导出和开发提取素材能同步进行，并保持实时更新和迭代。

△ 第6页动画导出序列

太空QQ形象设定

创建了四款全新的 spaceQQ，根据用户的 QQ 年龄而设计。根据用户的 QQ 年龄，分了四个款式的鹅：奢华，智能，闪亮和神秘四个概念，一个递进的尊贵程度，刺激用户分享欲。包括基础款的 QQ 在内，共创造了 5 个类型的 spaceQQ。每个设计都基于基本 spaceQQ 的形式，但是套装的颜色和细节根据各自的概念各有特色。

△ spaceQQ总览图

配色方案

用户可以根据自己的喜好更改这 5 款 spaceQQ 的装扮颜色。

关于运营

1. 专属感

整个 H5 始终紧扣 QQ 20周年的太空「探索」主题，整个 H5，除了用数据唤醒用户和 QQ 多年的点点滴滴之外，5 个 spaceQQ 概念设定，既能增加用户的新鲜感，又能刺激用户的分享欲，C4D 建立的 3D 形象丰富了整个 H5 的视觉层次，深化了 QQ 品牌的影响力，寓意鹅厂一直与时俱进，紧贴潮流。

2. 情绪调动

对于当下的运营活动来说，趣味性是引爆转发量的重要元素，H5 结合 QQ 用户创作的背景音乐和能够调动用户情感的设计语言来释放用户的情绪，比如惊喜感（用户结合 QQ 的标志性音效创作的背景音乐），荣誉感（不同 Q 龄获取相应的 spaceQQ）等，让用户产生持续的惊喜感，在怀旧和新鲜感中得到满足，提升用户活跃性。

总结

QQ 20周年 H5 设计，尝试结合了 3D，动画，插画等设计形态，为每一位用户打造专属的「个人轨迹」，通过数字，拼凑出和 QQ 的过往朝夕，引起用户共鸣。鹅厂不断创新探索的同时，也为用户温存属于用户自己的专属回忆，深化 QQ 的品牌价值。

福利

考虑到部分同学想更仔细地查看、保存或收藏高清大图的需求，我们设置了关键词，微信公众号后台以「spaceQQ+序号」的方式回复，例如「spaceQQ1」，即可逐一获取对应的高清头像和壁纸。

扫码领取专属「个人轨迹」：

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

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

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

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

首页重要性

首页既是业务分流的中心场景，也是平台卖家判断平台打法，买卖家感知平台价值的重要「门面」。从 UED 专业视角来看，首页是定义 APP 内体验范式及视觉风格的核心场景。

如何改？

1. 盘点现象，定义问题

满足业务新的诉求：平台阶段性战略不同，1688 从曾经的信息平台过渡到交易平台，如今向数字营销平台转型，旧的内容框架难以承载业务的新发展。

提升分流质量：从过去的数据效果来看，需重新判断，在 For 特色采购需求和服务大面采购需求之前，如何平衡调优，提升首页的流量转化效能。

体验升级：移动端 APP 天然生长在手机系统上，系统的风格更迭也牵动着 APP 的变化和升级。在 8.0 升级前，1688APP 存在着 5.0、6.0、7.0 多个由不同设计师在不同时间点所设计的场景，到8.0，APP 趋待从框架层、表现层以及品牌等方面进行统一及升级。

改版策略

1. 聚焦用户价值，基于业务打法升级内容框架

APP 升级前与业务对焦，我们收到三点诉求：

• 用算法的能力去承接首页买家的转化；
• 搜索是 B 类买家找品、选商的核心工具，需要引导更多用户更高频地使用搜索；
• 互联网流量红利到瓶颈期，需要进一步做好新用户的承接。

在内容框架制定上，我们聚焦用户价值，舍掉 7.0 时的内容版块个性化，聚焦做商品的个性化，仅保留For大面用户的营销、内容场景，提升算法推荐区的曝光率，以此区域的商品做首页的直接转化。

2. 弱化容器，突出内容，塑造心智

视觉容器升级

做平视觉框架，选择「大间距分隔」，为内容留出干净、简洁的视觉空间。

精简内容栅格，避免形式给用户阅读带来的负担。

提高留白率，提升页面整体的透气性，为内容留出更清爽、轻松的阅读空间。

拉大字体大小的梯度，加重字体颜色梯度，提升文字的清晰度和可读性。

强调版块特性，塑造买家心智感知，达成业务目标

强化搜索：7.0时，曾上线过将搜索做到「主观上觉得显眼」的测试方案，但相较于之前沉浸式搜索，数据几乎没变化。

8.0 阶段，从视觉表现层跳出看：「强化搜索」并不意味把搜索设计得更「显眼」，而是达成「让更多用户更高频地使用搜索」这一目标。如提升搜索底纹词、热搜词精准度和吸引力、增加搜索布点等，都可能助力达成业务目标。

基于用户单手操作时，拇指在屏幕不同区域的点击体验，选择将搜索组件移到更易于点击、视线更聚焦的屏幕位置，上线后数据提升非常明显。

Banner 升级：7.0 的 Banner 画面丰富度高，加之描述字段多，用户阅读有一定成本，较难在 3 秒内掌握全 Banner 的信息。此外，相比于 C 类用户，B 类用户会更偏理性，我们选择以更冷静、克制的「视觉语气」与 B 类商人对话，而非渲染氛围引导点击。（上线后，同样的活动内容，按新、老两版规范设计投放两套 Banner，新版较老版 UV CTR 约高出 48%）

For 新人：以差异化的利益、个性化秒杀、新人攻略做用户的承接。

营销场景心智差异化表达：营销由伙拼爆品、天天特卖两部分组成，我们判断爆品主打心智为「卖得火爆又便宜」，特卖主打心智是「限时限量抢便宜」，选择将两个区块最关键的特质做强化表达。

内容场景（直播）动态化、互动感、实时性传递：抽象出直播间的方形版面+内容叠加形式来设计，大坑位以动图传递给用户直播的动态感，以红包、个性化商品的多维实时轮播气泡传达直播的互动感、实时性。

3. 升级品牌，贯穿APP场景

为什么要做APP应用内的品牌设计？

品牌设计是将内容层（平台价值）与接收层（用户）做柔性链接的一环，譬如在 APP 场景中，由于有商品、商家、商机等「干货」，即使不特意做品牌设计，用户也能与平台保持刚性、稳定的连接。而反过来看，品牌做得很好，但平台没有「干货」，用户也不会单奔着品牌设计来平台。我们认为，做 APP 应用内的品牌设计，核心价值在于助力用户认知到平台特性，感知平台价值。从设计专业视角来看，APP 应用内的品牌设计，有利于定义并统一 APP 内体验范式及视觉风格，保障用户的体验。

怎么做？

每位设计师所处的业务环境不一样，解决问题策略和方式也千差万别，在 APP 应用内的品牌设计中，个人选择是通过厘清内容层（平台）多层次诉求及 For 用户的价值点，认知、感知接收层（用户）特质及内容倾向，基于内容层底料+接收层用户特质确定设计底层范式，塑造用户感知。

1. 图形范式

在阿里巴巴商业操作系统中，1688 聚焦做 B 类业务，直接服务对象是 B 类买卖家，业务细分出档口尖货、淘工厂、企业采购、淘货源、微商代发、工业品超级店、跨境专供等，这些都是具有一定 B 类特质及体量感的场景，故在 APP 业务门洞及常规图标的表达上，基于扁平 vs 写实、轻盈 vs 厚重、活泼 vs 稳重的维度，图形选定轻拟物、弱对比的设计范式，塑造 B 类场景 For 买家的沉稳、份量感。

此外，异常/空白场景也是平台与用户互动，塑造用户感知品牌的机会。在空态情感化插图部分的绘制上，力求塑形出有份量、易读、有意味的场景以示对应空态，并佐以轻微动效，增强空态的互动感。（在收藏夹、我的供应商等工具型场景，基于空态信息的价值考虑，将空态与工具新手引导相结合，并未做常规的插图。）

2. 色彩范式

标准色

随着业务的发展，我们基于新的业务态势，丰富了 1688 品牌色，以橙红色作营销、利益属性的表达，以商务蓝作服务、数字化属性的表达，以金色作权益属性的表达。

辅助色

在实际产品设计中，品牌色并不足以表达各类业务场景中的多层次的内容。因此，基于 VI 品牌色，裂变出不同重量、层次更丰富的品牌辅助色。

场景用色规则

基于买家角色及场景特征定义用色规则。

1688色域及选色示意

以 HSB 模式划定出偏沉稳的 1688 色域，在日常 banner 及业务场景中可灵活取用。

3. 动效范式及应用

动效是设计的重要手段，良好的动效表达能增强信息表达强度，清晰信息层级关系，提升用户体验的舒适度。做动效之前，将 APP 信息结构平整到三层，保障内容在页面简洁明畅地呈现。

在实际落地中，动效实现非常依赖技术资源，故动效设计之前，应考虑一个前提：动效设计增益内容表达，价值可论证，效果可衡量；同时，考虑接收层用户的商人特质，我们期望动效表达给用户以稳定感，并且在设计表达上能兼顾效率。

在动效呈现部分，主要以缓入、缓出、缓动结合曲线来调节，总的来说，内容入场时节奏稍慢，速度缓，分层加载，交代清信息在 Z 轴上的层次关系，内容出场时节奏快，速度快，内容层级不用再做分层消失。

APP 内典型场景的动效案例及演示：

4. 业务品牌的价值传递

此外，除以上在图形、色彩、动效等基础维度收口外，我们也需要将业务品牌放声给买卖家，以达成业务品牌的价值传递。在 1688 向数字营销平台转型的阶段，业务提出了「源头厂货通天下」的口号，我们通过设计手段，利用 APP 开机启动页及下拉刷新的空间，将「货通天下」的概念强化表达。

结语

以上便是此次首页改版阶段性的记录。在 8.0 的视觉体系里，为更好地突出内容，视觉容器选择尽可能做轻、做平，以冷静、克制的「视觉语气」与 B 类商人对话。当然，这是设计师和业务同学阶段性的选择。后续品牌的完善及产品的优化，仍需结合数据持续打磨。

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

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

最近设计群里经常有人问起小程序设计规范的问题，虽然官方有提供样式库的下载，但是停留在 16 年版，不是的。而设计经验这部分网络上也没有比较全面的分享，这促使我停下手上的计划，加快输出本篇文章。正好近期刚结束几个小程序项目，总结下经验，并结合微信小程序的官方设计指南，一起分享给大家，希望帮助大家更快速地上手。

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