Part 1

————————

信息容器的概念

信息容器是承载信息的载体，位于内容层。要理解信息容器的概念，首先要理解界面中的层级关系。一个界面除了竖直方向和水平方向维度，还有纵深维度。

从底层（远离用户）到顶层（靠近用户），基本上可以分为以下几层：

1. 背景层

2. 信息层

3. 全局操作层（各种常驻于屏幕的bar、悬浮按钮等）

4. 浮出层（模态类型的浮出层还需要有蒙版进行隔断）

   
   

本文要讨论的“信息容器”，指的是信息层上，装载信息的载体。信息的类型多种多样，可以是文字、图片、视频、各种操作控件等。

Part 2

————————

信息容器的常见类型

常见的信息容器主要有2大类：列表和卡片。

在整理案例的时候，我不禁产生了一个疑问，到底什么是列表，什么是卡片？如何界定和区分两者？这个问题乍一听有点无厘头，列表不就是列表吗，多个布局一致的狭长单元组合在一起，就形成了列表。那么什么是卡片呢？和屏幕两侧保持一定间距，带圆角的就是卡片吗？

我们不妨先看看下图案例：

2.1 列表和卡片该如何界定？

为什么类似的布局形式，上图中，图1给人感觉是列表，图2给人感觉是卡片，图3既像列表又像卡片？

从内容层面来说，包含的信息类型有：文字、图标/图片、按钮。几乎没有太大区别。

是什么导致我们观感上的不同呢？

电商案例也许可以给出答案。

从电商产品的商品列表页中可以看到，用户可以自主选择两种不同的商品展示模式：列表模式和卡片模式。

这两种模式几乎可以对应“列表”和“卡片”两种信息容器样式。完全一致的信息量：主图、标题信息、价格信息、辅助信息，相似的展示效率（一屏展示约4.5个商品），不同的信息容器展示形式给人不同的感觉。

单纯从信息层面或者视觉层面都不能界定列表和卡片，如果多维度叠加限定又太繁琐，因此本文给出的列表和卡片直接的区别界定是：可以自主定位关键线索，规划视觉浏览动线。如果视觉浏览大方向是竖直的，那么就归入列表范畴，浏览动线不是竖直而是折线的，都算在卡片范畴。

2.2 常见的信息容器分类：

除了上面说的，最常见的两类信息容器：列表和卡片之外，还有另外两种形式，分别是：无容器和复合容器。

这些容器具体有哪些特点，我们一一来看。

Part 3

————————

列表

列表的定义：将结构一致的信息单元在竖直方向上铺陈下去，形成的信息集合。

不同场景要呈现的信息侧重不同。

举例几种常见的列表形式：

1. 用户/消息列表

2. 图文列表

3. 功能列表

4. “卡片型”列表

3.1 用户/消息列表

用户/消息列表的内容结构很清晰，头像+身份+内容提要+辅助信息。

图片天然地比文字更具有吸引力，视觉上的优先级排序是头像＞身份＞内容提要＞辅助信息。

当然用户可以很方便地选择关注的对象是图片还是文字，这体现了列表的优越性，浏览动线竖直，可以方便用户根据自己想要的索引快速定位。

这里值得讨论的是头像用方形还是圆形的问题，相信大家都想到过这个问题，同样是社交产品，qq是圆头，微信是方头，这里边有什么原因呢？

本文尝试分析一下，仅是个人意见，欢迎讨论。

按照理论，圆头亲切的形状感知更加适合轻松基调的产品，方头严谨的形状感知更加适合严肃基调的产品。这解释了电商类型产品（淘宝、京东）的信息通知一般都是圆头的，匹配轻松愉悦的网购体验，而金融类产品（支付宝）多是方头。对于同是熟人社交类产品的微信和qq来说，qq用户层年龄偏低，属性相对更加活跃，更加轻松的圆头可能更适合此类用户。

以iOS为例，当用户向左滑动列表时，呼出针对该列表单元的操作。具体列表对应具体操作，操作项数量不同。

方案A：

优点：操作底板宽度适应文案，不会出现空间局促的现象。

缺点：当文案字段长时，列表被推出屏幕外的内容较多，当用户操作分心时，可能会忘记正在操作的对象，虽然这种情况极少发生。

方案B：

优点：操作底板固定，文案折行规则明确，既不会造空间拥挤，被挤出屏幕外的列表区域可控。

方案C：

优点：搭配图标，视觉更丰富。

缺点：图标占据了一定高度，导致文案无法折行，列表被推出屏幕外的内容较多，与方案A类似。

综上，个人认为方案B是最合理的，对于文案长度的宽容度高，即便文案较长，也可以保证视觉和谐，并保留较多列表内容。

在用色策略上，使用的是为大众所接受的“语义色”，一些具体的颜色在长期经验积累中形成了固定的语义。

当用户触发了带有一定破坏性的操作时，需要用户进行二次确认。

并不是所有情况都需要二次确认，二次确认的样式也有多种。

同样都是模态视图，要表达的信息也相似，都是要求用户进行选择，为什么有些产品选择将对话框居中，有些产品选择将对话框放在底部？这里涉及到关于模态视图的相关知识点，本篇文章旨在讨论信息层面的内容，模态视图涉及到了浮出层的内容，将在下篇文章中进行详细探讨。本篇文章不做过多延展。

3.2 图文列表

信息流产品一般是由图片+重点文案+标签（可有可无）构成。

不同性质的产品想要突出的重点不同，根据内容的重要性权重来分配视觉占比。

从上方几个例子中我们可以看到：

在图文比例从左到右依次提升；

图文布局案例1-3使用了左文右图的方式，案例4-7使用了左图右文的方式。

搞清楚如何图文布局和设置图文比例，就基本解决了资讯流页面最关键的问题。

资讯列表或称feed流，主要根据用户喜好定向推送内容。除了从用户日常浏览、搜索等行为中提取用户喜好信息，用户主动反馈的信息精度更高，用户不惜花费更多操作成本来提示产品，对内容不感兴趣。

从视觉上说：

1、提交反馈的入口（小而浅的icon）都不明显，有些产品用“更多”来提示用户，有些产品用更加负面的“关闭”来提示用户。当用户对内容产生较为强烈的反感时，才会注意到屏蔽入口。常规浏览时，该图标不会影响用户注意力。

2、反馈形式采用模态对话框，用户需要选择具体操作，是屏蔽内容或作者、还是举报或不感兴趣。

3、对话框是否有指向性：从表意明确的角度上来说，带有箭头的气泡更有利于用户定位对象。

从交互上说：

反馈入口热区较小，容易误触，大多数情况下，用户不会注意和点击该图标，用户是以浏览为主要行为。

3.3 功能列表

列表索引一般还是定位文字为主要形式，不同用户的认知水平不同，图标表意始终是一大难点，多用为辅助记忆或单纯提升视觉美观。图标虽然是体现设计风格的重点，但是在具体情境下，如设置页，用户更加在意快速找到自己要找的内容，多度的图标样式，实际上会折损用户的检索效率。

一般功能页面或放置许多功能，常常会超过十几项，这种情境下，检索效率低下是一个痛点。

如何提高检索效率？—— 分组

分组给用户提供了认知线索，根据格式塔原则，用户总是倾向于把距离近的、样式统一的元素归位同类。

毫无分组显然对于检索是不利的，用户需要逐一浏览，该情况适用于列表项无法分组时，如果有分组条件，务必分组，帮用户节约筛选成本。

UI界面中，列表的分割方式常见的有以下3种：

1. 线条分割

2. 块面分割

3. 间距分割

3.4 “卡片型”列表

在我们的固有观念里，大圆角，不通栏，有投影的形象就是卡片。

这种样式也越来越盛行，许多产品尝试将列表也用“卡片化”进行包装。

虽然是相当细节的点，但是精细化处理之后的结果就立刻会与批量化处理的结果拉开差距。

产品级的风格统一来源于点滴细节。

Part 4

————————

卡片

卡片的类型繁多：单列大卡片、泳道、内容流（两列网格、瀑布流）、宫格

4.1 大卡片

从内容展示效率上来讲，单张大卡片就占据占据屏幕（刘海屏）超出一半的高度，用户需要不断滑动屏幕浏览下方内容，操作成本较高。大卡片形式对内容本身，如图片的质量要求很高。这种模式常见于图片社区或垂类电商产品，图片社区（如躺平）本身较为小众、即便是UGC（用户产生内容）单元，用户上传的图片素材平均水平也较高，垂类电商（如Nike）图片品质由编辑控制，质量高且稳定。以上类型产品不以量吸引用户，用户往往更加在意内容本身是否优质。用户没有带着明确的目标，心智更加类似于浏览杂志。产品提供什么内容，就进行浏览。从上方案例可见，除了微信读书之外的3款产品首页都没有突出搜索功能，而是以信息流呈现为主。

与列表分割一致，卡片也有对应分割方式。

大卡片占据屏幕面积大，理论上大卡片的内容质量是经审查的。部分产品不存在大卡片容器的交互，点击卡片直接进入详情页。部分产品通过比较低调的方式向用户收集对于内容的意见。如微信读书长按卡片，可以选择不再显示该卡片内容，产品收集反馈，对于用户喜好的描述可以进一步具象准确。长按不是一个高频手势，用户触发该手势往往是试探性的，代表用户确实对于内容有意见要传达。躺平使用了简约三小点样式的“更多”图标来收纳不常用的收藏和举报操作。

4.2 泳道

何为泳道？顾名思义，常见的滑动手势是上下方向滑动，但有时也会出现横向滑动的情况。一系列对象在一条横向轨道内左右滑动，该类型的形式组合在一起，就好比泳道赛道一般。

可以横向滑动以查看内容的呈现形式，称为“泳道”。泳道可以有多种形式。

停止位置随机：

内容与手势相关度高，比较自由，但停止位置随机，不能保证停下后用户能完美看到当前卡片的所有信息，需要用户微调卡片位置。

停止位置固定：

根据用户滑动速率，模拟物理惯性和摩擦，判断最终展示哪张卡片，并将卡片呈现在屏幕中部，确保卡片上的信息都可以读取。这种交互更加合理，给滑动设置卡点，类似banner效果。

4.3 双列卡片

双列卡片可以看成是大卡片（单列）的另一种表现形式。这种形式更加提高了空间利用率，对于单一信息展示更加克制。平衡了效率和效果，是电商、图片社区、视频等产品类型的首选表现手法。

双列卡片可以细分为两大类：

卡片流（对齐）、瀑布流

卡片对齐：

优点：规整统一，视觉动线清晰，浏览舒适。

缺点：对主图尺寸要求高，确定的比例会对商品展示有一定局限。

瀑布流：

优点：图片尺寸宽容度高，满足一定比值区间即可。保证商品的展示完整度。错落的布局容易形成节奏。

缺点：不容易进行比较，若要进行图片间的对比，比较困难，视觉动线混乱。

两列式的卡片布局需要注意内容层与背景层的区分。

大多数产品的背景层是浅灰色，内容层是白色，色差可以建立区分。部分产品背景层是白色，或者说取消了背景层的概念，那么要建立卡片之间的区分，就需要通过间距或者卡片加底色的方式。

个性化推荐模块对电商产品尤其重要，准确地将用户可能感兴趣的产品推荐出去，可以减少用户的搜索、筛选步骤，提升购买效率和愉悦感，从而提升用户对产品的评价。因此，不断收集用户的喜好相当重要，尽管各种算法已经让产品显得越来越智能，但依旧要给用户留下提建议的入口。

上文介绍了资讯类产品中，用户如何给出对于具体信息的反馈，电商类产品原理也大同小异。

从功能上来说，淘宝、闲鱼、京东，都是通过用户手势（点击图标或长按卡片或两者皆可）来呼出选项，用户通过选择来表达意见，从而使推送更精准。

从视觉上来说，淘宝和闲鱼的反馈形式类似，都是在卡片上添加一个黑色半透明蒙版，将有限的选项竖直码放在卡片上，类似小型模态的概念（但是这里不同于严格的模态视图，没有限定用户必须要做出选择，用户可以直接划走）。而京东的逻辑不同，使用了传统阻断性模态视图的处理方式，将下方卡片用蒙版遮挡，希望用户专注于选择。

从阻断感上说，京东的阻断干是最强的，将用户从原本的浏览行为中提取出来，请用户严肃地做出对于当前商品的反馈。这样收集信息的效率更高。由于选项是盛放在带有指向性的小气泡之上，针对性足够，且延展性好，气泡的高宽都可以调整，而淘宝和闲鱼的处理方式，在极端情况下，如选项超过5项时，所有内容放在卡片之上，空间就很紧凑。

这类操作比较隐晦，可点击按钮很不明显，长按手势也不常用。同样是当用户有明确反馈需求时，才会寻找反馈入口，一般情况下，用户不会注意到。以用户常态下的浏览行为为最优先。

闲鱼的交互做的很细致，蒙版出现采用了水波的形式，用户抱着要吐槽的心态，这种精致有巧思的小动效在一定程度上可以缓和用户的烦躁的心理。

除了电商类产品，部分视频类产品长按卡片也会呼出对应效果。

案例1和案例2，长按卡片，都是出现视频片段的预览。效果类似iOS的3Dtouch，在相册中按压具体照片即可预览。而案例3，点击“更多”图标，呼出操作。然而选项只有1项，不符合逻辑，单一的选项无法构成“选择”，这会让人有点摸不着头脑。

4.4 宫格/网格

如果把界面看作是一张大网格，不同的内容占据着不同位置、不同面积的页面区域。

除了我们已经熟悉的“有序”布置，如从上到下依次排列内容（大卡片），或者从左往右依次排列内容（泳道），还有更加灵活多变的排布方式可供选择。

布局的本质是分配界面面积，用以盛放内容，同时运用面积对比进行突出。除了面积对比的方式外，还有其他方式可以突出关键内容。

Part 5

————————

无容器 & 复合容器

无内容的呈现形式比较简单：内容直接置于背景层之上。减少视觉负担，内容为主，形式为辅。

复合容器是指超过一种的容器形式的组合，如卡片中包含列表、卡片中包含泳道等。

5.1 无容器

5.2 复合容器

Part 6

————————

组合与强调

不同的信息容器组合在一起，搭建一个分工明确的界面。界面中不同的信息需要套用合适的形式去呈现。有层级就有对比，对比越大，层次拉得越开，重点就越突出。

建立对比的策略：

色彩对比、面积对比、样式对比、Z轴高度对比、静态动态对比

文章来源：站酷  作者：doo_W

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

引人注目的UX设计背后的心理学

前言

在这艰难又魔幻的2020年的尾声，有必要系统汇总下关于UI/UX的设计发展方向，为接下来的2021的开篇带个好头。本文在了解这些趋势的同时，分析特点并举例落地实例，来帮助大家启发创意设计工作的思考切入点。

流行趋势跟人们所处的环境密切相关，从最初的方块马赛克——>追求极度写实——>扁平风——>到现在的质感拟物，扁平设计霸屏的这几年，设计风又向更立体、丰富、更有层次感的方向发展，所以说趋势就是一个轮回。设计风格没有绝对的好坏，在审美达到一定疲劳时，就会开始出现新的设计风格。每一个新风格都值得设计师去拆解、思考，本质都是为了提升更好的交互体验。 

而在进入下一个十年的过程中，我们对数字产品和体验的依赖将日益增长，预测真正胜出的将会是3D动画和用户界面/用户体验设计的结合设计，5G技术的发展，它将重塑了我们以前无法想象的交互方式，这将是一段充满创意、鼓舞人心的发展阶段。在这里让我们来看看未来那些不可忽视的设计趋势吧。

（注:图片来自网络，均标明出处及作者，若有侵权请告知删除）

1、3D与UI结合

随着且易用的3d软件工具的出现，3D 元素已经开始变得越来越受欢迎，而在这之前，UI界面一直被平面设计所主导。与 2D 不同，它提供了更为逼真的立体效果，从插画、动效、电商到平面视觉，在所有的设计类型中都能找到它，3D现实主义已是各个领域的大势。

圈中也出现了很多免费或付费的3D预设元素及场景组件，帮助3D小白更快地搭建出具有冲击力的视觉组合。

特点：

• 直观感受；

• 立体真实；

• 形态丰富；

▲Izmahsa

▲Mike

▲Tran Mau Tri Tam ✪

▲Vikiiing

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

实例应用：

各大厂都开始纷纷尝试在产品中加入3D元素，将自家IP立体化，植入到各个品牌静态页面，加深品牌印象渗入。3D技术虽然已经出现有一段时间了，但是为了保证速度和性能表现，较少应用到产品中，随着软件技术的提升，立体渲染产品将开始慢慢运用到更多的界面交互、H5活动中。

▲闲鱼、QQ、花椒直播的3D启动页

▲得物（毒）的3D空间动效

网易云音乐每年的音乐总结报告都追随着的设计潮流，今年还可以自由选择人物形象，增强了用户的主观代入感，以下是每年的设计风格变化：

▲2018-渐变插画、2019-撞色渐变、2020-3D人物场景

▲2020-总结陈词H5

▲总结报告Banner的动效

其中IP立体化最多的当属K12教育领域，除了制作IP周边外，3D效果能适应丰富的运营场景，高度还原现实世界，给小朋友带来最真实的学习互动体验。

▲洪恩识字（3D学习场景）、腾讯开心鼠英语ABCmouse

▲IP在播放儿歌时的互动

值得一提的是今年苹果发布的macOS Big Sur除了玻璃拟态的变化，图标还加入了3D维度的拟物视觉层次。

苹果的 mac OS 的人机交互指南中也明确指出：“图标不仅是装饰性的，而且在与用户交流中起着至关重要的作用，它应该传达应用程序的主要目的并暗示用户体验。”这次扁平化和拟物化的结合，将又要引领一波设计趋势。

2、软渐变（Soft gradients）

过于强烈的渐变不再是趋势，大多数设计师都开始喜欢使用非常简单和微妙的渐变，如果产品的目标用户人群需要轻松温和的视觉环境，那么此风格再适合不过。

软渐变包括背景、阴影、反光，常与线条平面图形结合，应用于界面、网站、图标、icon等设计中。

特点：

• 低调温和

• 微妙渐变

• 清新愉悦

2.1、柔和背景

在设计网站中我们已经看到了许多非常精致，明亮柔和配色方案，混合两种以上的颜色来创造多彩的模糊背景。它使设计看起来非常现代、不打扰、清新而令人愉悦，其中画面内容是主要视觉焦点。

▲Vladimir Gruev

▲Sajon

▲Anton Mikhaltsov

▲Ghani Pradita

实例应用：

▲咔咔、美柚

▲https://takearecess.com/

2.2、柔和阴影

柔和的彩色阴影使UI有了更微妙的深度变化，在图标设计中经常需要渐变或阴影来塑造物体，柔阴影使设计元素更丰富立体，并且它们有助于区分内容之间的层次结构。

▲Ghani Pradita

▲Sèrgi Mi

▲Taro Huang

实例应用：

▲有道数学（已下架）

▲Uki

3、玻璃拟态（Glassmorphism）

去年新拟态掀起了一阵狂热，但这种模拟受到挤压的塑料效果（凹/凸层次感），在用户的阅读性上可能会出现问题，新拟态更适合用在局部的少量元素点缀，无法完整地使用在整套应用程序中。

▲Alexander Plyut

伴随着今年苹果发布的 MacOS Big Sur 操作系统的发布，新的拟物风格正式回归大众视野，整体风格应用了新拟态（Neumorphism）的设计思路，利用大量的毛玻璃质感和大量投影纵深感，能很好的突出前景信息，中和了扁平化图文带来的生硬不立体感。而Big Sur的图标也加入了 3D 质感设计，设计语言更为时尚简洁。苹果设计师 Alan Dye 在发布会上也提到了设计风格转变的原因，主要是希望「降低视觉的复杂度，让用户能够将注意力集中在内容上」。

而的玻璃拟态则更加注重垂直空间 z 轴的使用，背景多鲜艳色彩，在上空使用隔一层高斯模糊的毛玻璃质感，模糊的边界有细微的浅色边框，整体效果就是让元素之间有虚实结合的特殊空间。毛玻璃运用在界面中对关键信息起到强调作用，用户可以看到物体间的层次关系，哪一层在哪一层之上，就像物理空间中真实的玻璃一样。

特点：

• 透气磨砂

• 层级空间

• 简洁拟物

▲引领新拟态风格的Alexander的作品也朝着玻璃拟态变化

▲Kostia Varhatiuk

▲Ghani Pradita

▲Ibrahim emran

▲Queble

实例运用：▲毛玻璃视觉可追溯到2007年发售的Windows Vista，而当时的 OS X Yosemite 也大量使用了这种设计语言

▲的MacOS Big Sur操作系统

▲图标的变化

4、暗黑模式

暗黑模式是白色界面的相反版本，适用于午夜时分。之前用了很长时间微信的暗黑模式，突然切换成白色界面后，就像吸血鬼见到太阳光般刺眼，果然暗黑模式用久了还是比较舒服的。

 暗黑模式和之前经常提到的夜间模式是有区别的，简单来说暗黑模式可以在任何场景下使用，并没有降低对比亮度；夜间模式则专为夜间场景设计，重在降低对比度，以降低在暗光环境下屏幕对人眼的刺激。

特点：

• 突出内容

• 减轻干扰

• 沉浸体验

▲Tom Koszyk

▲Victa Wille

▲Golo

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

▲Tran Mau Tri Tam ✪

实例应用：

▲有道词典

▲爱范儿（ifanr）

最常使用暗黑模式的车载系统：

▲小度车载

暗黑模式的灵感最早引起大家注意的应该是抖音，在这之前大部分的应用都是白色为主，抖音整体黑色界面带来的沉浸以及轻打扰体验还是很棒的，在这之后也相继出现了以黑色为主的APP设计：

▲MOO音乐(可手动切换颜色模式)

▲Space FM

5、多彩高对比度界面

受Material Design调色板的影响，2020年用户界面趋势的一定不能少了亮色和荧光色的，可以作为主色也可以作为辅色，简约的界面中明亮大胆且对比鲜明的色彩一直都处于增长趋势。荧光色一直是90后喜欢的风格，我个人就非常喜欢荧光色，现在要是谈到该风格的受众主力军可是90后啊。

颜色是为界面添加信息和情绪以及使其看起来美观和吸引人的最有效方式之一，对比鲜明的颜色在白色和黑色界面上都能很快吸引用户的注意力，这种风格已经成为清新、酷炫、数字时代的代名词，而在2021一趋势还将会继续影响UI、平面、广告、插画等领域。

特点：

• 活泼大胆

• 对比鲜明

• 潮流科技

▲Amy Martino

▲Halo Mobile

▲Anastasia

▲Paolo Spazzini

在网站设计中的应用：

▲https://www.theartcenter.nyc/

▲https://www.squadeasy.com/en/

▲https://takeboost.com/

实例应用：

▲GoFun出行

▲开言英语

6、抽象几何元素

从上世纪初开始，抽象构成中的简单几何形状就已经用于视觉艺术中，多用于主背景主题或色彩细节，使用钢笔工具编辑最简单的形状（正方形，圆形、椭圆形），加上不同的颜色或渐变，让设计看起来既规则又有趣。

几何图形可以运用到UI设计中 ，将它们混合在一起以创建马赛克的效果，形成具有品牌意向符号的记忆点。

特点：

• 规则组合

• 品牌印象

• 重复记忆

▲Johnny Nova

▲Vladimir Gruev

实例应用：

最近看到的一组原色视觉刚好融合了高对比度+几何这两种风格，那就是SHINee的正规六辑合辑《‘The Story of Light’》，采用红黄蓝三色加上圆形、正方形、三角形的大块面积来打造画面空间及变化，带来极具视觉冲击的音乐色彩与魅力。

▲专辑的主视觉

当然，几何形状不止用于色彩图案细节，在UI界面布局中经常使用大块面图形，这种设计方法受到越来越多的关注。

7、极简风

极简设计的前身是2010年代中期精巧又花哨的设计，这种设计已经存在很长一段时间了，但在2020年，人们每天需要消化的信息量越来越多，所以现在用户想要尽可能避免“视觉垃圾”，这也是为什么我们会选择更简洁专一的界面。

特点

• 专注信息

• 清晰易用

• 简单操作

▲RonDesignLab

▲Quan

▲BAOLIN

▲Gregory Loshakov

▲https://snp.agency/en

谈到极简主义，就不可避免会涉及到无键趋势，因为按键越少就意味着设计越简洁，而这种简化过的设计将让手势操作和语音交互更为流行。

▲Taras Migulko

▲Gleb Kuznetsov✈

实例应用：

▲夸克浏览器的夸克宝宝

8、将视频应用到UI中

在 2020 年，信息的触达的速度将会变得更快，而视频是很好的载体，各个年龄段的用户都喜欢观看引人入胜的动画，无论是选择通过短视频还是电影的方式来推广产品，都很好地灌输品牌理念，建立与受众群体的关系，加强用户忠诚信任感。

特点：

• 营造氛围

• 类型多样

• 品牌调性

▲Fireart Studio

▲Ehsan Rahimi

实例应用：

▲moo音乐登录页

▲虾米音乐欢迎页

9、插画与3D的界线越来越模糊

艺术插图从2017年开始到现在仍然很流行，几乎适用于任何类型的设计行业，是设计领域中最热的趋势之一。插画的视觉能很好的帮助用户理解产品背后的故事，为了把故事讲好，我们可以创造出一个品牌人物，赋予他人格，为他制造一些故事和冲突，最终帮助我们解决产品问题。这是在产品设计中讲好故事的基础，至于讲故事的方式，在 UI 和 UX 中都有使用，原理一样只是落地方式不同。 

在2018年的蜘蛛侠平行宇宙中我们就已经看到了3D与插画的结合，艺术家保留了人物在美式漫画中的的线条笔触，把“手绘”的细节和质感都放大到了荧幕上，在剧中还采用对比强烈的大色块扩大了视觉张力，分分钟把漫画书甩到面前，让人忍不住惊呼，索尼的艺术家们是怎么把片子做得这么酷！

▲3D人物的画笔触感

▲画面光源处由波普圆点组成的背景

▲纸本漫画书中的“声音词”

▲漫画经典线条

▲Entei Ryu在3D建模使用插画质感

▲Minh Pham ✪在ui界面中的尝试

实例应用：

腾讯旗下音乐平台JOOX最近的概念宣传片，从MG、三维、定格、插画多个风格之间来回切换，给我们带来了一个多元的音乐世界。各大视频网站还搜不到，不能直接链接视频地址，喜欢的朋友可以关注微信视频号“UoU_Studio”观看完整视频。

在3D开始迅速发展的阶段，二维与三维之间的界限变得越来越模糊，插画作品也可以具备强互动性，而3D插画与动效的结合提供了一种奇妙的新方法，希望能够看到未来插画更多的可能性。

10、更多的微交互动效

最后一点，还是要强调动效在UI中的的作用，微交互最早出现在 2018 年，让用户更好地理解系统如何工作，并在引导其获得更好的体验方面扮演着非常重要的角色。它们在 UI 设计中决定了一个 App 或网站是普通还是优秀，从点击反馈、加载等待、导航交互等等，为用户界面设计增加了动态性，交互性和直观性。

动效起到的作用：

• 引起人们对应该做什么或接下来将要发生的事情的关注；

• 创造流畅和视觉愉悦的过渡；

• 带给使用者美观的享受；

• 指导我们进行复杂的操作；

• 确认用户使用旅程中的操作。

▲Jakub Antalik

▲Forever D.

▲Kingyo

▲Eugene Paryhin

▲Leo Natsume

▲Taras Migulko

实例应用：

▲GoFun选择车辆后的页面转场动效

结尾：

2020的趋势在满足用户的美学要求上，侧重内容和感情表达，还会根据不同设备载体、新的技术而变化，为用户提供的丰富体验。

借用Adobe设计副总裁 Jamie Myrold 的一句话：如今设计师要思考的，绝不仅仅是设计一款App、网站或设计工具。我们要思考的是人类的需求、用户的需求，打造真正人性化、多元化与包容性的设计。

设计趋势还在快速增长变化，有些趋势总能长期霸屏，未来还将迎来更多新技术，每个设计人员都可以找到自己喜欢的方向，不管哪种趋势，最重要的是如何学习并合理地运用到产品中，以产生最大的设计商业价值。

文章来源：UI中国   作者：_阿丹a_

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

栅格系统知识点 

使用栅格系统很有帮助，它有助于在不同布局之间保持一致性，并加快设计决策的速度。栅格可更地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点，以及产品设计师如何在设计工作流中调整栅格。

栅格结构

栅格由3个主要组件构成，包括列、槽和边距。

列

列是虚构的垂直块，用于对齐内容。我们用百分比（％）或固定值定义列宽。

栅格中的列

槽

它是列与列之间的空间，有助于分隔内容，我们将槽的宽度定义成固定值。

栅格中的槽

边距

边距是内容和屏幕边缘之间的空间。我们将边距宽度定义为固定值，该值决定每个屏幕尺寸的最小空间。弹性边距指的是列，槽和侧边距组成栅格后剩下的空间，它会根据不同的屏幕尺寸而变化。

栅格中的页边距和灵活边距

如何使用栅格设计界面？

信息内容（图像，文本或UI元素）常常会被放置于可见和不可见的内容块中。可见内容块具有明显的边框或填充区，而不可见内容块则不具备，多数是透明底。可见的父级内容块包括卡片，横幅等组件。

卡片形式的可见内容块

不可见的内容块包括文本或功能按钮。

内容块应与列的边缘对齐，避免与槽边缘对齐。内容块中的信息是独立的，不一定非要与列对齐。

内容块的列对齐

列结构

用于构成栅格的列数称为列结构。8、12、16和20是用于响应式布局的一些最常见的列结构，设计师可以根据设计要求选择具体结构。

8/12/16/20列栅格结构

12列结构是最灵活的，它可以进一步分解成为4–4–4或3–3–3–3大小的内容块。

响应点

当屏幕尺寸到达响应点，那么页面布局也会有对应更改，以实现最佳的布局视图。列结构，列宽，槽宽度和边距都取决于响应点。内容块则根据不同的响应点堆叠或缩放，以重新调整获得最佳视图。

栅格缩放和堆叠

如果较小的屏幕具备足够空间来呈现，其实缩小比例就能展示完整了。如果屏幕实在是太小，就会垂直堆叠成一列。

栅格的呈现类型

栅格有3种呈现形式，一起来看下吧！

固定栅格

固定栅格有固定宽度的列以及页面边距，且固定的栅格具有固定的内容块宽度，该宽度在响应点范围内不会出现变化，并且页面边距会占据剩余的空间。

固定宽度栅格

流动或全宽栅格

流动栅格列的宽度是不定的，但槽和页面边距都是固定的。流体栅格具有灵活的内容块宽度，该宽度根据屏幕大小来变化。流体栅格中，列会随着可用空间变大或是缩小。

流动栅格

混合栅格

混合栅格同时具有流动宽度和固定宽度。在现代布局中，一些元素会完全脱离栅格。常见的例子比如页眉，页脚，或是出血的图片内容块。

混合栅格

如果内容块宽度大于可用的屏幕尺寸，则固定栅格会转变为流动栅格来适应屏幕。

如何在原型制作工具中设置栅格系统？

电脑视窗

不要以1440×900、1600×900或1920×1080等高分辨率进行设计。1280×800是电脑端内最小的分辨率，以1280×800设计的流动与固定宽度的布局都可以适应更大的屏幕。

固定宽度栅格设置

要设置固定宽度的栅格，我们对槽和列都应固定好数值。建议设置列宽为74px、槽宽32px以及16px的边距。

固定宽度栅格设置

列宽74px、槽宽32px可以生成1240px的内容块宽度（不包括两端的16px侧边距），最大化的利用了可用屏幕尺寸。在不同的响应点，固定内容宽度大于当前屏幕尺寸时，则固定宽度栅格开始变为流动栅格。

流动栅格设置

要设置流动宽度栅格，对槽使用数值，对列使用自动计算的值（以％为单位）。

流体布局栅格设置

流动栅格利用整个屏幕尺寸作为主要内容的宽度，每侧留出16px的侧边距。

移动视窗

在移动端使用流动栅格，槽和页边距的宽度推荐设置成16px。因为移动设备的屏幕分辨率较小，若再分成12个独立的列、槽和边距的话，设计起来也会很麻烦。

移动端的流动栅格设置

因此，我们将3列中的每列合并以创建4个粗列，从而使布局栅格既简洁又方便，快速对齐。

平板视窗

平板设置栅格的方式与移动设备非常相似，推荐槽宽和边距分别设置为32px与16px，可以在768×1024大小的画板上为平板设计界面。

平板电脑流动栅格设置

将12列优化成6列，让栅格清晰明了，谷歌的材质设计曾建议使用24px宽的槽与页边距，实际应用时，不妨都试下看哪个效果更好。

布局样式

栅格布局的变化决定了主要内容的结构，针对不同的布局要求，使用不同的栅格系统，而页面中的内容块数量决定了页面布局的变化。

单列布局

单列布局或全宽布局，是着陆页和首页的风格之一。还可以合并12列来创建一个单列内容块，也可以将12列分配到父级内容块中。

一级页面常应用单列或全宽栅格布局

双列布局

该布局有两个内容块。通常，其中的一个内容块会占据比较多的区域进行信息展示。

在双列布局中，列要么分布在9–3或8–4父级内容块中，其中的一个组合列区域，用来创建主要内容。带有单个边栏的界面是两列布局的常见呈现形式。

三列布局

三列布局具有三个内容块，主要内容块占据最大的展示区域，在三列布局中，列分布在3–6–3或2–8–2父级内容块中。

固定宽度的侧边栏布局

固定宽度的边栏布局稍有不同。边栏宽度在一组响应点范围内固定，剩余空间由固定宽度或流动宽度的内容块占用。

侧边栏固定布局

移交开发

在原型工具中，设计布局和编码有很大的不同。代码可以合并列或将其堆叠，比如合并12列以创建单个列布局，或将12列分布到一组，用来创建不同布局变化的内容块。在原型设计工具中设计布局时，你需要确保开发人员清楚了解电脑端，移动设备和平板设备上设置的列宽、槽宽及边距。像Bootstrap，Zurb Foundation等开发软件，其中对栅格值的设置会有出入。

自定义栅格

设计师可以多尝试不同的栅格值设置，以找到最适合自己的呈现形式。如果交付开发的时间非常紧急，请使用文中建议的数值，更保险也不会出错。

文章来源：站酷   作者：UX辞典

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

亚马逊作为一个知名的电商平台，它的成功背后却有一个很难让人理解的设计逻辑：成功的设计不一定是美观的。为什么会这么说呢？本文将从四个维度展开分析，希望对你有帮助

对于产品设计师来说，在日常工作中做的产品类型主要是两种：一是B端项目，另一种是C端项目。近些年来，互联网进入下半场，C端用户增长触及天花板，流量的红利逐渐消退。很多企业的业务由C端转向了B端。

随着企业业务的转变，作为设计师的我们，也必须跟上步伐，快速做好角色的转换。当然，想从C端设计快速切换到B端设计，或是从B端设计快速切换到C端设计并非易事。因为C端和B端产品设计存在较大的反差。其商业属性、产品定位、目标用户、设计表达、业务流程等都会有很大的不同。那么今天这篇文章，我们就一起来聊聊B端和C端产品设计的差异性。

直接进入正题，本文将从目标用户、使用场景、产品需求、产品本质及特性、产品设计思维、设计原则等几个方面进行具体对比。

01目标用户

C端：
C端释义为：Consumer，意为消费者、个人用户或终端用户，使用的是客户端。C端产品往往是直接对接一般消费者，直接为广大消费者和用户提供产品或服务。例如：微信、微博、抖音等等。

B端：
B端释义为：Business，意为企业用户或商业用户。B端产品往往是为针对这类用户开发的系统型软件、工具或平台。例如：CRM 系统、 ERP 系统、OA系统、SAAS等等。

02使用场景

C端：
它会存在于我们生活中的各种场景，而且自由度非常高，当然也包含工作场景，比如周末在家无聊刷刷微博了解下国际大事、晚上睡前打开虾米听听歌、在工作间隙打开某团点个外卖等等，因此，C端产品的用户大部分使用场景是碎片化的。

B端：
B端产品更多的是在企业版内部使用，更多的是为了满足企业相关用户在“工作场景”下完成协同工作的一些特定组织需求。

03产品需求

C端：
想很好的挖掘C端产品需求，这要求我们做更细致的用户画像，比如：用户的性别、年龄、职业、文化程度、收入水平、个人喜好等都会影响到功能设计。然后通过用户画像、同理心等方法对用户的行为进行详细分析，以发掘用户具体需求。

B端：
B端产品一般是基于现有的“业务”形态，将传统线下工作，通过程序化、系统化、信息化转换为线上产品，从而提升企业协同效率，降低办公成本。需求一般来源于产品战略定位、使用者个性需求等。

04产品本质及特性

C端：
C端产品的本质基本都是一个核心功能，例如：社交类app的核心功能就是好友快速沟通；电商类app的核心功能就是购物；视频类app的核心功能就是看视频。在核心功能之外的都是一些“增值功能”，比如评论，点赞，分享等。如果除去这些附加功能，虽然会影响用户体验，但并不会妨碍核心功能的使用。

其产品特性可简单总结为一个词-分享。在使用C端产品时，用户都希望自己的“行为”能够得到其他用户的认可。比如：对自己分享的内容进行评论、分享、打赏等。

B端：
B端产品的本质是满足用户的工作需要，而公司内大部分工作，我们几乎是无法独立完成的。这意味着我们需要和其他同事协同去完成一个任务的闭环。因此，B端产品的业务逻辑会相对更加复杂。

B端产品的特性也非常明确——即“协同工作”。处于信息化时代的企业中，几乎已没有可以单独完成而不需要协同的工作了。

05产品设计思维

C端：
在上面我们已经提到过，C端产品的本质基本都是一个核心功能。因此，在设计前期，作为设计师的我们必须对产品进行全方面的考虑。到底那一个功能是我们产品的核心?哪些功能只是锦上添花?

此外，目前市场上C端产品同质化异常严重。想要产品独具一格，就必须突出特色，坚持自身的品牌亮点，才能让用户快速记住这个产品或者品牌。

B端：
B端产品的本质则是满足用户的工作需要，协同工作。对于企业来说，更多关注的是工作效率和成本。这也是B端产品最终的解决问题方向：如何提升企业的运营效率。因此，在设计过程中，我们需要不断的去优化产品流程、调整策略等。

06设计原则

C端：
在设计过程中，除了要抓住核心功能外，还需要给产品增加趣味性和创意性。趣味性，也就是要给用户带来积极的正面情绪，如：能使用户感到心情愉悦，感染人，打动人，引起用户心灵共鸣等；创意性，也就是要做出与同类产品不一样的东西，而这些新东西又是解决了用户某些痛点的。当然，做这些最终的目的是为了提升流量、留存率及转化率。

B端：
B端产品的需求往往是要解决一个企业中不同角色（普通成员，管理员、超级管理员等）之间的协助关系，在设计过程中一般需遵循如下设计原则：合理的功能与模块划分、严谨的业务流程设计、干净简洁的界面设计等。

在这里，笔者整理了几个优秀的B端产品设计案例，供读者参考。

登录界面设计

C端：

B端：

都是登录页面，差别却是如此之大。站酷面向的C端用户，账号登录支持手机号、邮箱以及第三方（微信、微博、QQ）方式。对于用户来说，选择非常多，可以说是非常人性化，大大提升了用户体验。

而网易邮箱面向的B端企业客户，账号登录仅支持邮箱登录一种方式，且用户登录时还得首先确认自己的身份是普通用户还是管理员。这也说明，在设计B端产品时，得充分考虑不同角色的权限问题。

导航栏设计

C端：

B端：

导航栏的设计布局有很多方式，面向C端用户的站酷使用了顶部导航的模式，这也是最常见的主导航模式。二级导航聚合在下拉菜单里面，鼠标hover出现。这种导航方式非常直观，访客可以快速的定位自己感兴趣的模块，另外，可以很好的展示内容区域，对于访客来说，非常友好。

面向B端用户的爱客CRM系统使用的是侧边栏导航，使得导航展示更加清晰，页面之间的切换也非常方便。这种布局方式一般用于管理后台偏多，与B端产品业务复杂性密不可分的。

B端产品原型实例

当我们明确了具体的需求后，就可以动手制作可交互原型了，这样可以很好表达出整体逻辑，让客户直观的看到功能和效果，获得较真实的感受，并在不断讨论的基础上完善未来的设计思想。接下来，一起来看看我用Mockplus做的B端产品原型效果：

原型演示地址：https://run.mockplus.cn/4oEh4pCz7K9GRtlS/index.html

文末福利

最后，我为大家准备了一份小福利。

产品团队的沟通离不开原型，今天为大家推荐的原型设计工具Mockplus，更快更简单，5分钟制作一个交互原型页面。支持团队协作和在线审阅。

点击下方链接可以免费领取Mockplus的个人版15天，数量有限，先到先得。

领取地址：https://www.mockplus.cn/home/promote

小结：

虽然C端和B端产品在目标用户、使用场景、产品需求、产品本质及特性、产品设计思维、设计原则上都有所差异，但是C端和B端产品也有很多共同点，如：都要求产品简单实用和有效准确，都是为了更好的满足用户的需求，解决用户的痛点等。如果能做好以上这些关键点，无论是做C端还是B端，都会是非常优秀的产品。

转自：ui