随着国内市场饱和，越来越多的公司转向海外寻找新的增长机会，其中出海电商成为了最大的市场之一。随着国内市场饱和，越来越多的公司转向海外寻找新的增长机会，其中出海电商成为了最大的市场之一。21 年底艾媒咨询显示出海电商市场中，中国企业在海外的独立站数量已达 20 万+，所占份额从 2016 年 9.8%提升至 202...

随着国内市场饱和，越来越多的公司转向海外寻找新的增长机会，其中出海电商成为了最大的市场之一。

随着国内市场饱和，越来越多的公司转向海外寻找新的增长机会，其中出海电商成为了最大的市场之一。21 年底艾媒咨询显示出海电商市场中，中国企业在海外的独立站数量已达 20 万+，所占份额从 2016 年 9.8%提升至 2021 年 25.6%，预计 2025 年将会到达 50%。

什么是独立站？2022 年成功在 iOS 榜单超越亚马逊的 Shein 是其中的代表。它起初定位于依靠多 SKU 和低价的铺货型公司，但难见起色，之后成功转向于依靠流量运营和供应链体系的品牌型公司，通过自己站点直接和用户链接并发生交易。

本文将先介绍独立站这股出海电商新趋势，然后从用户体验视角描述导航、交易流程、视觉三个方面与电商平台的差异性，最后我们基于百度刚推出的独立站 SAAS 产品出海易，分享一些 独立站设计 经验和避坑点。

更多出海时代的干货：

产品出海如何做好本土化设计？来看京东高手的实战总结！ 互联网企业“出海”浪潮背景下，作为设计师，面对新鲜未知的市场，如何找到适合海外产品的设计方向？

阅读文章 >

一、出海电商发展趋势 1. 平台转向独立站

海外电商市场集中度低，亚马逊封号热潮，资本大批涌入，使得出海聚光灯逐渐从平台转向独立站。

根据下面头豹研究院整理的 19 年各国电商占比图可看出，中国平台电商占比整体电商市场高达 86%，而欧美国家占比为 60%。同时中国自有品牌占比 1%，而欧美国家平均占比高达 24%。可见欧美电商市场平台占比低，难以形成垄断，同时自有品牌占有率高，因此品牌独立站在海外有更优质的发展环境。

亚马逊等海外平台政策逐渐收紧，2021 年亚马逊封号潮迫使众多国内商家倒闭关店。同时对于新手，平台入场门槛越发变高：注册方式受限，通过率低以及中国账号易被封号。与之相对是机会越发变少，平台上流量争夺和价格战越发激烈，作为新人店铺想在平台获得较好的曝光和推荐现在可能性极低。

近年来无数资本开始涌入独立站。shopify 作为头部独立站服务商股价从 2019 到 2022 上涨近 10 倍，22 年独立站领头羊 Shein 市值高达千亿美金, 拼多多 9 月上线 Temu 对标 Shein 作为公司重点项目。这些都预示越来越多商家和公司开始关注并入局独立站。

2. 独立站是什么

下图分别是国外头部平台亚马逊和独立站 Shein 的首页。亚马逊显得规整，统一，秩序；而右边 Shein 更为丰富，跳跃，自由。我们认为自由，是独立站和平台本质上的差异点。

为什么独立站可以这么自由呢？

因为独立站拥有独立域名和页面, 并由商家独立设计、运营来打造品牌。商家对于独立站每一个环节都拥有绝对的自主权，同时带来特定优势：

自主：独立站不用遵循平台固定规范来搭建统一的店铺和详情页；不用强制参与平台官方的 618 等活动，拥有自身营销节点和节奏；不用被平台限制，拥有自身投放渠道和运营方式。

多渠道流量：商家可以根据产品定位和目标用户，在不同渠道进行流量投放。比如潮玩投放年轻人社区—Tiktok，传统B2B—投放商务社区Linkedin。

数字资产：通过独立站商家可以获得大量之前在平台手中的用户数据。基于这些数据商家可以迭代产品，打造私域流量，保证用户粘性和生命周期，慢慢形成品牌溢价。

但独立站的模式并不适用于所有的出海商家：

独立站对于商家专业要求较高，从最初建站，用户运营到后期数据洞察，都需要商家自己参与和把控。而平台本身规范，玩法以及合作服务商，可以降低商家入局门槛和压力。

多渠道会导致商家投放难度的增高，比如 Facebook 信息流和 Tiktok 短视频投放的规则、内容以及针对人群差异较大，会导致最后投放效果难以精确衡量。

3. 独立站成功的关键

独立站模式下，核心在于商家管理信息流、资金流以及物流的能力。其中资金和物流主要基于商家选择的服务商，比如跨境支付、仓储和配送能力。而在信息流层面，更多在于商家对于用户的触达和转化，这也是作为 设计师 可以参与并发力的点。

那么独立站针对的用户会具有什么样的特征？国泰君安证券曾经专门研究过 Shein 的用户，主要为 20-35 追求时尚个性的白领女士，该类群体追求个性化和潮流同时注重商品性价比。因此我们认为追求个性化，同时付费能力相对有限的年轻人更倾向于在独立站进行交易。

独立站对于用户而言，存在触达（多渠道）—认知（物料+站点）—消费（站点转化到完成交易）—传播（多渠道）等触点，在这些触点打动用户的关键在于品牌认知和主观认同。整个过程中，设计一方面可以在认知阶段从视觉层面通过物料、站点、推文传递品牌感知，另一方面可以在消费阶段从交互层面通过互动、服务来建立连接和粘性。

二、独立站相比平台的设计关键点 1. 货架 VS 内容 我们认为独立站和平台本质的差异在于独立站将商品内容化。平台就像货架上摆满各类型商品，需要用户快速找到并进行交易。而独立站把商品内容化，慢慢建立形象并输出内容从而和用户建立情感联系。那下文接着就将从导航、交易流程、视觉三个方面来分析两者基于货架和内容体验上的差异性。

导航

从导航结构来看，平台更为强调搜索将其置于顶部，同时强调分类的快速筛选。而独立站弱化搜索来节省纵向空间，顶部放置公告栏来定期公布优惠信息。分类若较少，分类导航会置于 products 页面下，采用页面导航。分类较多则会将页面导航换为分类导航，形成三层导航结构。

然后对于导航路径，平台有两种设计：

面包屑：节省首屏屏效，缩短导航区纵向空间； 楼梯式：导航聚合在各行以便于分类的展示和切换。 独立站依据分类的层级和个数会有面包屑和楼梯变种的设计：像 shein 作为服装采用了面包屑，而 Anker 作为 3C 采用楼梯式变种，横向展示所有品类的名称和图片。

交易流程

我们认为虽然现在电商出现直播电商，内容社区等新形式，但核心交易流程都较为固定：首页—搜索浏览—商品列表页—商详页—转化(购物车付款)。

来到电商网站的用户，可分为搜索型和浏览型。搜索型用户会直接通过搜索到达商品列表页，然后通过筛选条件找到心仪的商品进入到商详页，最后选择直接购买或者加入购物车来达成转化。而对于浏览型用户，区别在于他可能通过首页的推荐商品、推荐分类等模块来到达商品列表页而非搜索。因为首页本身只是作为入口，因此接下来将从搜索浏览、列表、商详、购物车转化来进行分析。

2. 搜索浏览 平台对于搜索框的处理较类似，将其置于页面的中心，差异性在于点击搜索框后是否会出现热门搜索和搜索历史来帮助用户进行决策。而独立站都会弱化搜索框，将其置于顶部功能区。原因在于独立站本身品类和 SKU 相对平台较少，搜索的频率需求不明显。点击独立站搜索功能后，有两种设计：品类较少会出现气泡，同时下方显示热门和模糊搜索结果；品类较多出现大气泡，在页面中部强化搜索区。

从浏览行为来看，平台首页有三个入口：

头部的分类导航； 首屏 banner 旁的分类； 商品分类和商品卡片； 其中头部的分类导航、商品分类和商品卡片可通用到所有平台设计，而首屏 banner 旁的分类多出现于国内平台的设计中目的是提高商品分类的曝光率。而对于独立站，只有商品分类和商品卡片入口依然存在。

独立站另外有两个入口：

商品分类较少，分类隐藏在 products 页下，hover 后会出现所有分类和配图；

商品分类较多，分类作为单独页面，hover 到每个分类显示二级的商品配图和文字；

设计目标在于将更多分类和商品信息前置，缩短最终到达商品的路径。

3. 列表 商品列表页核心部分在于筛选+商品卡片，用户通过对应的筛选条件最后选择到满意的商品卡片。

平台筛选区普遍使用左右结构的设计，左边的筛选区加上右边的商品列表，筛选区默认主动展开常用而收起低频筛选项。筛选项较多情形下操作效率较高，但占据空间大同时影响整体视觉效果。

而独立站筛选区有两种设计：

分类较多，将分类置于头部便于快速筛选，其他筛选项默认收起只有点击才展开；

分类较少，使用上下结构默认筛选区收起，点击展开后会对筛选项纵向进行分类，筛选完成后会有对应的信息外露。主要为了展示更多商品条目以及营造视觉氛围感；

对于商品卡片，平台和独立站都采用了上图下文，适用于图片为主其他信息为辅的卡片，在保持展示卡片个数的同时浏览效率较高。而从细节上来看，平台会有较多信息来强调信任感，因为平台本身商品都由第三方商家提供，所以得给予用户足够信任。而独立站之所以不强调，因为它通过品牌建设来给予用户信任感，所以独立站放大图片面积，缩小信任相关文字信息。独立站另一个特征在于，条目列表页就有较多转化入口，基本可以直接加入购物车详情，来最终缩短用户的决策路径。

4. 商详 独立站和平台商详页最大区别在于首屏的信息结构，独立站分为两块：图片+信息，给图片本身留出了较大展示区，而信息聚焦于最核心的款式和价格，转化区域吸底目的为了强化转化率+占用过少空间。然后平台首屏分为三块，将转化区置于页面的右方来强化用户首屏下的转化率，缺点在于用户下滑到页面下方时无法进行转化操作。有的平台会将右边转化区悬浮，缺点在于会压缩下方的商品详细信息区。

5. 转化 平台有两个常见的转化操作：购物车和购买，而越来越多的独立站开始用心愿单的功能来替代原来的购买操作，其中心愿单可直接在商品条目页添加。我们推测主要目的在于降低用户决策成本，促进更多转化。接下来主要从心愿单，购物车，付款页来进行分析。

心愿单：独立站交易流程中有两个入口可以把商品添加到心愿单：列表页中的商品卡片和商详页。而心愿单页面，是商品卡片的集合以及对应的操作。

购物车：平台点击购物车会直接跳转到购物车页，购物车页多为左右结构，左边商品列表+右边的总价&付款。相比之下，独立站会有两种设计：商品数目较少，不会设计购物车页，而是通过抽屉形式来进行承载；商品数目较多，hover 到购物车按钮以气泡形式显示已有商品和付款按钮，直接点击购物车按钮也可跳转到购物车页，购物车页本身设计差异不大。

付款页：平台付款页为左右结构，左边是下滑填写付款商品快递等信息，然后右边是付款结算区，悬浮在页面右部分；独立站因为涉及到海外物流和支付，所以为了避免过长信息填写，将左部分设计成了分布填写区，而右边固定是所选商品内容和价格，来降低了用户填写信息时的心理负担。

视觉

基于我们的设计经验，网站的视觉设计一般有三个对应的难点：品牌—如何突出网站品牌特色，形成差异化；节奏—如何合理排列不同视觉元素，形成视觉动线和层级；创新—如何突破简单的页面框架限制。那下文就将基于这三点来分析：

品牌：形成品牌感的本质在于“形+色“，如何通过色彩和图形来形成差异性。

这方面独立站和平台的差异性并不大，都是基于自身的 logo 品牌，提取出对应的基本型、色彩以及感觉。然后将其运用到网站设计上，比如运营类的 icon，插图，banner 以及页面组件类如按钮，标签和搜索框等。独立站对比下延伸场景更为丰富，因为运营图都是自己配置，所以把颜色氛围以及形状都融入其中，形成更突出的品牌感。

节奏：左边是平台首页的布局节奏，视觉动线都是从上往下，然后每行从左到右，变化较少。然后从视觉层次来看，除了首屏的 banner 区域会有不同的版式突出视觉重点，下面的排版节奏都较为平均，只偶尔变化来避免节奏的重复。

右边是独立站，可以看到视觉动线会从顶部 banner 区开始，从页面中间往下，到了后面部分才开始从左到右。从视觉层次来看，它延长顶部 banner 区的视觉重点，在首屏以下位置才开始弱化内容。而独立站下方内容也基于其多元的内容载体来采用不同的排版方式，丰富整体层次。目的在于在首屏强化对于用户的视觉吸引力，保持用户高度的专注。

创新：想要突破单调的网站首页设计，一般会选择头部 banner 和非核心信息区入手。独立站因为其头部 banner 区的所有运营图自己提供，可以通过不同配色和排版来避免的重复实现创新。另一方面，独立站非核心信息区内容较为丰富：比如品牌故事，博客文章，合作伙伴，对应信息区都会有特定的布局创新。

三、独立站设计的常见避坑点 第三部分本文将基于百度刚推出的独立站 SAAS 产品出海易，分享独立站设计避坑点。出海易是去年百度 B2B 下面孵化新业务，它致力于帮助企业一站式出海，目前在 4 月已经推出出海易 SAAS 产品并正式售卖。基于我们目前设计经验和思考，如下图独立站设计有七类问题需要注意。而接下来将从中选出信息缺失、图片质量、移动端体验、国内外体验差异这四类我们在出海易业务实践中完整体现的问题来分析。

1. 信息缺失 之前提到过，独立站相比平台一大特色就是信息丰富且多元。但作为服务商，实际会接触到不少初次尝试出海的中小企业，这些商家由于自身经验不足，提供的信息和物料出现缺失现象。那作为设计师面对这样的情形，应该如何设计以补救呢？

商品图片缺失：首先在 SAAS 后台上传图片的部分设置了图片的必填项，另外设置提示文字来吸引用户上传更多图片。从商详页的排版来看，商品和商品缩略图上下排列，这样在商品图只有一张的情形下，可隐藏缩略图的内容，不会对整体视觉效果产生较大影响。

公司信息缺失：在每个信息模块，给予商家调整模块数量的自由度。商家可自由添加信息卡片的数量，一个，二个，三个，或者直接隐藏该模块。针对不同数量的信息模块，也设计对应样式来满足商家需求。

2. 图片质量 独立站一大亮点在于高质量商品图片，作为设计师当然会设想商家能提供下图左边的图片。但放到实际场景下商家提供的图片质量和效果都不可控，往往是提供的图片右边这样。

所以很多商家提供的图片质量很难满足现有独立站对于图片的要求，因此从设计侧通过以下三个设计策略来进行补救：

设计策略 1：设计统一且规格有限的展现容器

设计正方形容器，所有图片都会自动缩放到容器区域下，来保证不同图片尺寸下整体视觉上的一致性。

设计策略 2：设计特定的卡片样式

对于商品卡片会有多种处理方法，样式 1 直接给图片固定底色，来形成卡片间的间隔。而样式 2 和 3 都采用透明背景色，卡片通过较大的间隔来进行整体的区分。

样式 1 这样通过固定底色的模式对于图片本身要求过高。而像样式 2 和 3 只通过间距区分会带来问题，实际下的商品图片有的有底，有的没底，容易产生不一致的场景。因此最后实际设计样式直接给了整体背景底色，然后用白色的卡片来区分商品，同时缩小了图片所占的面积来避免图片质量差的影响。

设计策略 3：上传给予规范提示和案例

SAAS 后台会设计对应的尺寸提示，在用户编辑上传图片前，页面会有对应默认图来暗示用户合理的图片样式，给到商家配色和尺寸参考。

3. 移动端体验 国外 PC 还是用户主要购物方式，因此独立站设计以 PC 为主。但随着国外移动互联网的发展，移动端也成了商家必须要布局的部分。无论对于设计师还是开发，重新设计开发并维护 PC 和移动两套成本都巨大，因此自适应成了这个阶段下较优选择。下面将会分享下自适应设计下的一些细节。

导航区：PC 端的页面导航和功能区处于页面顶部，然后是商品分类。在 wise 端，很难在首页进行复杂的页面切换，因此将其置于左上角的抽屉下，而搜索和切换语言使用了模态的气泡设计，更符合用户手机端下的聚焦单一任务的使用习惯。

筛选区：PC 端分类筛选区在左侧，默认显示一级分类，点击展示二级分类。在 wise 端，将分类筛选置于商品列表区上方来留出更多展示空间，默认收起然后以模态气泡的形式展开。

4. 国内外差异 因为独立站针对海外用户，所以和国内 电商设计 相比有两个问题需要注意：1.不同国家下语言差异会导致视觉差异 2.不同国家间用户在操作习惯本身存在差异。

语言：不同国家语言会导致排版差异，同样的文字在不同语言下的字符数差距较大。然后同时会带来视觉动线上的差别，比如下图是中东等巴基斯坦等国家所使用的乌尔都语，该语言会带来视觉动线从右往左的变化。另外要考虑到不同语言下字段长度的适配情况，在排版时候尽量上下排布避免左右排布。

体验：国内外用户本身操作习惯上存在差异，比如左边是一个国内常见的电商设计，图片切换在主图的下方，通过点击图片进行切换，主要是为了留出更多的横向空间给商品信息，但这种小图切换然后大图预览由下往上的视觉动线影响了视觉体验，主要是给商品信息的展示效率让步。而右边是国外常见的体验方式，商品信息较为省略，图片切换在左图的左侧，为了从左到右更好的视觉动线和体验。同时当你 hover 到对应图片的时候，主图也会随之切换进行预览，优化了对应切换体验。

四、结语 随着全球电商的迅速发展和出海热潮的加剧，独立站会逐渐成为出海商家国外品牌推广、营销、客户关系维护的重要抓手，同时也会给更多具有特色和渴望创新的设计师们，更广阔展现自身才华的空间和机会。乘风潮头立，启航正当时，独立站期待你的加入。

欢迎关注作者的微信公众号：「百度MEUX」

随着国内市场饱和，越来越多的公司转向海外寻找新的增长机会，其中出海电商成为了最大的市场之一。随着国内市场饱和，越来越多的公司转向海外寻找新的增长机会，其中出海电商成为了最大的市场之一。21 年底艾媒咨询显示出海电商市场中，中国企业在海外的独立站数量已达 20 万+，所占份额从 2016 年 9.8%提升至 202...

随着国内市场饱和，越来越多的公司转向海外寻找新的增长机会，其中出海电商成为了最大的市场之一。

随着国内市场饱和，越来越多的公司转向海外寻找新的增长机会，其中出海电商成为了最大的市场之一。21 年底艾媒咨询显示出海电商市场中，中国企业在海外的独立站数量已达 20 万+，所占份额从 2016 年 9.8%提升至 2021 年 25.6%，预计 2025 年将会到达 50%。

什么是独立站？2022 年成功在 iOS 榜单超越亚马逊的 Shein 是其中的代表。它起初定位于依靠多 SKU 和低价的铺货型公司，但难见起色，之后成功转向于依靠流量运营和供应链体系的品牌型公司，通过自己站点直接和用户链接并发生交易。

本文将先介绍独立站这股出海电商新趋势，然后从用户体验视角描述导航、交易流程、视觉三个方面与电商平台的差异性，最后我们基于百度刚推出的独立站 SAAS 产品出海易，分享一些 独立站设计 经验和避坑点。

更多出海时代的干货：

产品出海如何做好本土化设计？来看京东高手的实战总结！ 互联网企业“出海”浪潮背景下，作为设计师，面对新鲜未知的市场，如何找到适合海外产品的设计方向？

阅读文章 >

一、出海电商发展趋势 1. 平台转向独立站

海外电商市场集中度低，亚马逊封号热潮，资本大批涌入，使得出海聚光灯逐渐从平台转向独立站。

根据下面头豹研究院整理的 19 年各国电商占比图可看出，中国平台电商占比整体电商市场高达 86%，而欧美国家占比为 60%。同时中国自有品牌占比 1%，而欧美国家平均占比高达 24%。可见欧美电商市场平台占比低，难以形成垄断，同时自有品牌占有率高，因此品牌独立站在海外有更优质的发展环境。

亚马逊等海外平台政策逐渐收紧，2021 年亚马逊封号潮迫使众多国内商家倒闭关店。同时对于新手，平台入场门槛越发变高：注册方式受限，通过率低以及中国账号易被封号。与之相对是机会越发变少，平台上流量争夺和价格战越发激烈，作为新人店铺想在平台获得较好的曝光和推荐现在可能性极低。

近年来无数资本开始涌入独立站。shopify 作为头部独立站服务商股价从 2019 到 2022 上涨近 10 倍，22 年独立站领头羊 Shein 市值高达千亿美金, 拼多多 9 月上线 Temu 对标 Shein 作为公司重点项目。这些都预示越来越多商家和公司开始关注并入局独立站。

2. 独立站是什么

下图分别是国外头部平台亚马逊和独立站 Shein 的首页。亚马逊显得规整，统一，秩序；而右边 Shein 更为丰富，跳跃，自由。我们认为自由，是独立站和平台本质上的差异点。

为什么独立站可以这么自由呢？

因为独立站拥有独立域名和页面, 并由商家独立设计、运营来打造品牌。商家对于独立站每一个环节都拥有绝对的自主权，同时带来特定优势：

自主：独立站不用遵循平台固定规范来搭建统一的店铺和详情页；不用强制参与平台官方的 618 等活动，拥有自身营销节点和节奏；不用被平台限制，拥有自身投放渠道和运营方式。

多渠道流量：商家可以根据产品定位和目标用户，在不同渠道进行流量投放。比如潮玩投放年轻人社区—Tiktok，传统B2B—投放商务社区Linkedin。

数字资产：通过独立站商家可以获得大量之前在平台手中的用户数据。基于这些数据商家可以迭代产品，打造私域流量，保证用户粘性和生命周期，慢慢形成品牌溢价。

但独立站的模式并不适用于所有的出海商家：

独立站对于商家专业要求较高，从最初建站，用户运营到后期数据洞察，都需要商家自己参与和把控。而平台本身规范，玩法以及合作服务商，可以降低商家入局门槛和压力。

多渠道会导致商家投放难度的增高，比如 Facebook 信息流和 Tiktok 短视频投放的规则、内容以及针对人群差异较大，会导致最后投放效果难以精确衡量。

3. 独立站成功的关键

独立站模式下，核心在于商家管理信息流、资金流以及物流的能力。其中资金和物流主要基于商家选择的服务商，比如跨境支付、仓储和配送能力。而在信息流层面，更多在于商家对于用户的触达和转化，这也是作为 设计师 可以参与并发力的点。

那么独立站针对的用户会具有什么样的特征？国泰君安证券曾经专门研究过 Shein 的用户，主要为 20-35 追求时尚个性的白领女士，该类群体追求个性化和潮流同时注重商品性价比。因此我们认为追求个性化，同时付费能力相对有限的年轻人更倾向于在独立站进行交易。

独立站对于用户而言，存在触达（多渠道）—认知（物料+站点）—消费（站点转化到完成交易）—传播（多渠道）等触点，在这些触点打动用户的关键在于品牌认知和主观认同。整个过程中，设计一方面可以在认知阶段从视觉层面通过物料、站点、推文传递品牌感知，另一方面可以在消费阶段从交互层面通过互动、服务来建立连接和粘性。

二、独立站相比平台的设计关键点 1. 货架 VS 内容 我们认为独立站和平台本质的差异在于独立站将商品内容化。平台就像货架上摆满各类型商品，需要用户快速找到并进行交易。而独立站把商品内容化，慢慢建立形象并输出内容从而和用户建立情感联系。那下文接着就将从导航、交易流程、视觉三个方面来分析两者基于货架和内容体验上的差异性。

导航

从导航结构来看，平台更为强调搜索将其置于顶部，同时强调分类的快速筛选。而独立站弱化搜索来节省纵向空间，顶部放置公告栏来定期公布优惠信息。分类若较少，分类导航会置于 products 页面下，采用页面导航。分类较多则会将页面导航换为分类导航，形成三层导航结构。

然后对于导航路径，平台有两种设计：

面包屑：节省首屏屏效，缩短导航区纵向空间； 楼梯式：导航聚合在各行以便于分类的展示和切换。 独立站依据分类的层级和个数会有面包屑和楼梯变种的设计：像 shein 作为服装采用了面包屑，而 Anker 作为 3C 采用楼梯式变种，横向展示所有品类的名称和图片。

交易流程

我们认为虽然现在电商出现直播电商，内容社区等新形式，但核心交易流程都较为固定：首页—搜索浏览—商品列表页—商详页—转化(购物车付款)。

来到电商网站的用户，可分为搜索型和浏览型。搜索型用户会直接通过搜索到达商品列表页，然后通过筛选条件找到心仪的商品进入到商详页，最后选择直接购买或者加入购物车来达成转化。而对于浏览型用户，区别在于他可能通过首页的推荐商品、推荐分类等模块来到达商品列表页而非搜索。因为首页本身只是作为入口，因此接下来将从搜索浏览、列表、商详、购物车转化来进行分析。

2. 搜索浏览 平台对于搜索框的处理较类似，将其置于页面的中心，差异性在于点击搜索框后是否会出现热门搜索和搜索历史来帮助用户进行决策。而独立站都会弱化搜索框，将其置于顶部功能区。原因在于独立站本身品类和 SKU 相对平台较少，搜索的频率需求不明显。点击独立站搜索功能后，有两种设计：品类较少会出现气泡，同时下方显示热门和模糊搜索结果；品类较多出现大气泡，在页面中部强化搜索区。

从浏览行为来看，平台首页有三个入口：

头部的分类导航； 首屏 banner 旁的分类； 商品分类和商品卡片； 其中头部的分类导航、商品分类和商品卡片可通用到所有平台设计，而首屏 banner 旁的分类多出现于国内平台的设计中目的是提高商品分类的曝光率。而对于独立站，只有商品分类和商品卡片入口依然存在。

独立站另外有两个入口：

商品分类较少，分类隐藏在 products 页下，hover 后会出现所有分类和配图；

商品分类较多，分类作为单独页面，hover 到每个分类显示二级的商品配图和文字；

设计目标在于将更多分类和商品信息前置，缩短最终到达商品的路径。

3. 列表 商品列表页核心部分在于筛选+商品卡片，用户通过对应的筛选条件最后选择到满意的商品卡片。

平台筛选区普遍使用左右结构的设计，左边的筛选区加上右边的商品列表，筛选区默认主动展开常用而收起低频筛选项。筛选项较多情形下操作效率较高，但占据空间大同时影响整体视觉效果。

而独立站筛选区有两种设计：

分类较多，将分类置于头部便于快速筛选，其他筛选项默认收起只有点击才展开；

分类较少，使用上下结构默认筛选区收起，点击展开后会对筛选项纵向进行分类，筛选完成后会有对应的信息外露。主要为了展示更多商品条目以及营造视觉氛围感；

对于商品卡片，平台和独立站都采用了上图下文，适用于图片为主其他信息为辅的卡片，在保持展示卡片个数的同时浏览效率较高。而从细节上来看，平台会有较多信息来强调信任感，因为平台本身商品都由第三方商家提供，所以得给予用户足够信任。而独立站之所以不强调，因为它通过品牌建设来给予用户信任感，所以独立站放大图片面积，缩小信任相关文字信息。独立站另一个特征在于，条目列表页就有较多转化入口，基本可以直接加入购物车详情，来最终缩短用户的决策路径。

4. 商详 独立站和平台商详页最大区别在于首屏的信息结构，独立站分为两块：图片+信息，给图片本身留出了较大展示区，而信息聚焦于最核心的款式和价格，转化区域吸底目的为了强化转化率+占用过少空间。然后平台首屏分为三块，将转化区置于页面的右方来强化用户首屏下的转化率，缺点在于用户下滑到页面下方时无法进行转化操作。有的平台会将右边转化区悬浮，缺点在于会压缩下方的商品详细信息区。

5. 转化 平台有两个常见的转化操作：购物车和购买，而越来越多的独立站开始用心愿单的功能来替代原来的购买操作，其中心愿单可直接在商品条目页添加。我们推测主要目的在于降低用户决策成本，促进更多转化。接下来主要从心愿单，购物车，付款页来进行分析。

心愿单：独立站交易流程中有两个入口可以把商品添加到心愿单：列表页中的商品卡片和商详页。而心愿单页面，是商品卡片的集合以及对应的操作。

购物车：平台点击购物车会直接跳转到购物车页，购物车页多为左右结构，左边商品列表+右边的总价&付款。相比之下，独立站会有两种设计：商品数目较少，不会设计购物车页，而是通过抽屉形式来进行承载；商品数目较多，hover 到购物车按钮以气泡形式显示已有商品和付款按钮，直接点击购物车按钮也可跳转到购物车页，购物车页本身设计差异不大。

付款页：平台付款页为左右结构，左边是下滑填写付款商品快递等信息，然后右边是付款结算区，悬浮在页面右部分；独立站因为涉及到海外物流和支付，所以为了避免过长信息填写，将左部分设计成了分布填写区，而右边固定是所选商品内容和价格，来降低了用户填写信息时的心理负担。

视觉

基于我们的设计经验，网站的视觉设计一般有三个对应的难点：品牌—如何突出网站品牌特色，形成差异化；节奏—如何合理排列不同视觉元素，形成视觉动线和层级；创新—如何突破简单的页面框架限制。那下文就将基于这三点来分析：

品牌：形成品牌感的本质在于“形+色“，如何通过色彩和图形来形成差异性。

这方面独立站和平台的差异性并不大，都是基于自身的 logo 品牌，提取出对应的基本型、色彩以及感觉。然后将其运用到网站设计上，比如运营类的 icon，插图，banner 以及页面组件类如按钮，标签和搜索框等。独立站对比下延伸场景更为丰富，因为运营图都是自己配置，所以把颜色氛围以及形状都融入其中，形成更突出的品牌感。

节奏：左边是平台首页的布局节奏，视觉动线都是从上往下，然后每行从左到右，变化较少。然后从视觉层次来看，除了首屏的 banner 区域会有不同的版式突出视觉重点，下面的排版节奏都较为平均，只偶尔变化来避免节奏的重复。

右边是独立站，可以看到视觉动线会从顶部 banner 区开始，从页面中间往下，到了后面部分才开始从左到右。从视觉层次来看，它延长顶部 banner 区的视觉重点，在首屏以下位置才开始弱化内容。而独立站下方内容也基于其多元的内容载体来采用不同的排版方式，丰富整体层次。目的在于在首屏强化对于用户的视觉吸引力，保持用户高度的专注。

创新：想要突破单调的网站首页设计，一般会选择头部 banner 和非核心信息区入手。独立站因为其头部 banner 区的所有运营图自己提供，可以通过不同配色和排版来避免的重复实现创新。另一方面，独立站非核心信息区内容较为丰富：比如品牌故事，博客文章，合作伙伴，对应信息区都会有特定的布局创新。

三、独立站设计的常见避坑点 第三部分本文将基于百度刚推出的独立站 SAAS 产品出海易，分享独立站设计避坑点。出海易是去年百度 B2B 下面孵化新业务，它致力于帮助企业一站式出海，目前在 4 月已经推出出海易 SAAS 产品并正式售卖。基于我们目前设计经验和思考，如下图独立站设计有七类问题需要注意。而接下来将从中选出信息缺失、图片质量、移动端体验、国内外体验差异这四类我们在出海易业务实践中完整体现的问题来分析。

1. 信息缺失 之前提到过，独立站相比平台一大特色就是信息丰富且多元。但作为服务商，实际会接触到不少初次尝试出海的中小企业，这些商家由于自身经验不足，提供的信息和物料出现缺失现象。那作为设计师面对这样的情形，应该如何设计以补救呢？

商品图片缺失：首先在 SAAS 后台上传图片的部分设置了图片的必填项，另外设置提示文字来吸引用户上传更多图片。从商详页的排版来看，商品和商品缩略图上下排列，这样在商品图只有一张的情形下，可隐藏缩略图的内容，不会对整体视觉效果产生较大影响。

公司信息缺失：在每个信息模块，给予商家调整模块数量的自由度。商家可自由添加信息卡片的数量，一个，二个，三个，或者直接隐藏该模块。针对不同数量的信息模块，也设计对应样式来满足商家需求。

2. 图片质量 独立站一大亮点在于高质量商品图片，作为设计师当然会设想商家能提供下图左边的图片。但放到实际场景下商家提供的图片质量和效果都不可控，往往是提供的图片右边这样。

所以很多商家提供的图片质量很难满足现有独立站对于图片的要求，因此从设计侧通过以下三个设计策略来进行补救：

设计策略 1：设计统一且规格有限的展现容器

设计正方形容器，所有图片都会自动缩放到容器区域下，来保证不同图片尺寸下整体视觉上的一致性。

设计策略 2：设计特定的卡片样式

对于商品卡片会有多种处理方法，样式 1 直接给图片固定底色，来形成卡片间的间隔。而样式 2 和 3 都采用透明背景色，卡片通过较大的间隔来进行整体的区分。

样式 1 这样通过固定底色的模式对于图片本身要求过高。而像样式 2 和 3 只通过间距区分会带来问题，实际下的商品图片有的有底，有的没底，容易产生不一致的场景。因此最后实际设计样式直接给了整体背景底色，然后用白色的卡片来区分商品，同时缩小了图片所占的面积来避免图片质量差的影响。

设计策略 3：上传给予规范提示和案例

SAAS 后台会设计对应的尺寸提示，在用户编辑上传图片前，页面会有对应默认图来暗示用户合理的图片样式，给到商家配色和尺寸参考。

3. 移动端体验 国外 PC 还是用户主要购物方式，因此独立站设计以 PC 为主。但随着国外移动互联网的发展，移动端也成了商家必须要布局的部分。无论对于设计师还是开发，重新设计开发并维护 PC 和移动两套成本都巨大，因此自适应成了这个阶段下较优选择。下面将会分享下自适应设计下的一些细节。

导航区：PC 端的页面导航和功能区处于页面顶部，然后是商品分类。在 wise 端，很难在首页进行复杂的页面切换，因此将其置于左上角的抽屉下，而搜索和切换语言使用了模态的气泡设计，更符合用户手机端下的聚焦单一任务的使用习惯。

筛选区：PC 端分类筛选区在左侧，默认显示一级分类，点击展示二级分类。在 wise 端，将分类筛选置于商品列表区上方来留出更多展示空间，默认收起然后以模态气泡的形式展开。

4. 国内外差异 因为独立站针对海外用户，所以和国内 电商设计 相比有两个问题需要注意：1.不同国家下语言差异会导致视觉差异 2.不同国家间用户在操作习惯本身存在差异。

语言：不同国家语言会导致排版差异，同样的文字在不同语言下的字符数差距较大。然后同时会带来视觉动线上的差别，比如下图是中东等巴基斯坦等国家所使用的乌尔都语，该语言会带来视觉动线从右往左的变化。另外要考虑到不同语言下字段长度的适配情况，在排版时候尽量上下排布避免左右排布。

体验：国内外用户本身操作习惯上存在差异，比如左边是一个国内常见的电商设计，图片切换在主图的下方，通过点击图片进行切换，主要是为了留出更多的横向空间给商品信息，但这种小图切换然后大图预览由下往上的视觉动线影响了视觉体验，主要是给商品信息的展示效率让步。而右边是国外常见的体验方式，商品信息较为省略，图片切换在左图的左侧，为了从左到右更好的视觉动线和体验。同时当你 hover 到对应图片的时候，主图也会随之切换进行预览，优化了对应切换体验。

四、结语 随着全球电商的迅速发展和出海热潮的加剧，独立站会逐渐成为出海商家国外品牌推广、营销、客户关系维护的重要抓手，同时也会给更多具有特色和渴望创新的设计师们，更广阔展现自身才华的空间和机会。乘风潮头立，启航正当时，独立站期待你的加入。

欢迎关注作者的微信公众号：「百度MEUX」

大家在平时的工作中，越来越多地会接触到后台界面设计，与一般的 UI 设计一样，它也有它的设计要素和规范。今天这篇文章将会讲到后台界面的 5 个关键设计要素和 10 条设计原则，记得收藏阅读并用到自己的工作中吧。更多可视化界面设计教程：万字干货！

大家在平时的工作中，越来越多地会接触到 后台界面设计 ，与一般的 UI 设计一样，它也有它的设计要素和规范。今天这篇文章将会讲到后台界面的 5 个关键设计要素和 10 条设计原则，记得收藏阅读并用到自己的工作中吧。

更多可视化界面设计教程：

万字干货！写给设计师的数据可视化设计指南 设计师在工作中经常会遇到下面这种情况： 自己辛辛苦苦、加班加点、没日没夜做出来的数据分析报告交到 boss 们手上，结果看不懂，全程黑人问号脸。

阅读文章 >

几天前，我和同事们分享了如何设计后台界面才能把它变得更有效。讲到数据可视化，在这篇文章中我将深入讨论 2 个关键点：

构建最佳 UI 的关键因素 创建一个后台界面的设计原则 所有关键要素都是为了让最终用户尽可能有效和理解数据结果。

一、关键因素 1. 考虑目标用户

目标用户是必须要考虑的最重要因素。你需要知道哪些人会用到你设计的界面，以期达到他们的目的。

为了保证成功，你需要把自己放在用户的角度去思考。用户经常使用产品的某个模块和设备将直接影响信息的显示风格。（数据调研）

HR 后台界面

2. 确定目标

建立你的最终目标，将直接关系到用户需求和产品目标。你设计的每一个图表都应该有其用途，通过展现这些数据帮助用户解答关键问题。重要的是要考虑到不是所有可用数据都对分析过程有用，根据目标进行筛选，如果这一部分出错，接下来的努力会变得没有意义。

3. 选择关键性指标（KPI）

对于真正有效的后台界面设计，必须为你的业务需求选择正确的关键指标。一旦你清楚了你的最终目标并且考虑到了你的目标用户，你就可以有办法在后台界面中选择最好的 KPI。

KPI 将有助于塑造后台界面的方向，因为这些指标将显示基于特定业务领域的数据可视化。

（彩云注：帮助确立数据展示的优先级）

4. 用数据讲好故事

遵循有效的后台界面设计工作流，开始构建数据故事。

简而言之，后台界面讲故事是一种以可视化的方式呈现数据的过程，将描绘整个数据分析过程，为了让用户有效地理解商业策略和目标。换句话说，高效的故事流程将帮助你尽可能的用最清晰的方式传达信息。

有效的数据故事作为一个基本步骤，可以减少专业技术用户与没有数据分析能力的人之间的差距。正如《福布斯》(Forbes)在一篇文章中所言:“讲故事的人用数据驱动的叙事来启发那些无法进行数据分析、或者根本无法充分利用时间的团队成员。”

高效讲故事的一个好方法是预先设计后台界面。根据你的受众和目标规划将包含哪些图表，这将帮助你在实际开始构建后台界面时更加专注。通过这种方式，你可以避免混合使用数据可视化，并判断把它们放在一起是否有意义，而是根据用户的理解程度和最终目标生成有用的报告。

（彩云注：帮助筛选应该透传哪些数据在界面上，并根据用户的旅程地图把数据进行编排）

关注 HR 的工作流

5. 选择正确类型的后台界面

另一个最好的实践是要基于你的分析目标来考虑后台界面的选型。在前面的观点中有提到，每一个不同类型的后台界面应该是为一个特定的用户群体，以在业务决策过程中帮助达到用户的特定目标。

只有当信息是直接可操作的时候，它才有价值。用户必须有能力利用这些信息用到他自己的商业策略和目标中。作为一个只使用最佳后台界面设计原则的设计师，确保你可以辨别关键信息，并将它从不重要的信息中区分出来，以提升用户的工作效率。

作为参考，以下基于业务的 5 种主要类型的后台界面：

战略型: 通过分析和对广泛的关键趋势信息进行标准化，专注于监控公司的长期战略。

可操作型: 一种用于在较短的时间范围内监视、度量和管理流程或操作的业务智能工具。

分析型: 包含大量综合数据流，使分析师能够深入挖掘并得出见解，以帮助公司在高管层面取得进展。

特定平台型: 正如它的名字一样，这种类型的数据后台界面是用于特定平台分析。例如，如果你想跟踪你的社交媒体表现，你可以使用特定的指标，并生成一个只关注该渠道的管理界面。

策略型：这种信息丰富的后台界面最适合中层管理人员，并有助于根据跨部门的趋势、优势和劣势制定增长战略。

（彩云注：可惜原文没有太多这方面的案例，大家可以把这 5 种类型作为一种类型方向，在实际项目中看看自己的项目属于哪种类型，以便有所侧重。）

二、设计原则 1. 层次结构

一个常见的设计错误是想把所有的信息都告知用户，好像它们都同样重要。可以利用大小和位置来组织数据的层次结构。

通过定义信息级别让用户清楚什么是最重要的 把最重要的信息放在左上角。从这个位置往右下方组织，信息从最重要的级别到不太重要的级别进行排版。 也可以将信息分类并显示在不同的视图中

2. 简洁

后台界面的真正目的是以易于理解和更简单的形式呈现复杂信息。

不要提供太多用户难以理解的信息 使用更少的列来显示信息 删掉多余的信息以减少数据的杂乱无章

3. 一致性

当一个后台界面有比较一致的排版时，它看起来是更好的。

确保你的后台界面易于阅读，在组之间使用类似的可视化方式和布局 让相关信息彼此靠近 将相关内容分组

4. 亲密性

在后台界面中把相关信息组织在一起将帮助用户更快理解

把相关信息靠的更近一些 不要将相关信息分散在后台界面上 将相关内容分组

5. 对齐

后台界面上的元素应该在视觉上对齐，让它看起来视觉平衡。

将后台界面上的元素彼此对齐，以便更好的组织在一起 利用网格规范组织好后台界面中的小部件 不对齐的界面布局不会给到用户良好的用户体验

不对齐的后台界面看起来很不舒服

6. 留白

留白在设计中就像呼吸一样重要。当用户在使用你的设计时，它能给用户提供呼吸的空间。

当用户来查看信息时，后台界面设计中的留白会吸引用户

减少留白会给用户带来混乱的视图

使用留白将相关信息可视化分组

少或没有留白，会直接劝退用户

7.  颜色

使用一个有效的颜色方案能抓住用户的注意力，帮助他们更容易理解信息。

仔细选择合适的颜色，让内容易读 使用较大对比度在背景上恰当地显示视觉元素

避免使用无意义的渐变和太低的对比度

8. 字体

标准字体对后台界面来说就是最好的字体，除非有特殊需求才考虑用其他字体。

使用标准字体，用户更容易阅读和扫描 独特时尚的字体可能看起来效果不错，但对用户来说通常更难阅读 避免使用全大写的文字，用户还需要花时间理解大小写然后才是看懂吸收 使用一个合适的大小和风格，理解这些信息会更有效

不要使用特殊字体

9. 数字格式

展示过高的数字精度，会让这些数字变得很难阅读和理解。

尽量使用整数，因为长数字会使用户感到困惑 删去不必要的信息 让用户更容易比较简单的细节

10. 标签

使用标签为用户更快更有效的传达信息

避免使用旋转标签，用户很难阅读 尽可能使用标准缩写

避免使用旋转标签

三、总结 关键因素是指“为什么”（Why）我们要做后台界面做数据呈现，

设计原则是指“如何”（How）进行呈现，

数据可视化是指呈现“什么样”（What），

后台界面是为了帮助用户节省时间，努力把复杂的数据信息通过简洁的信息呈现出来。后台界面的目标是将关键信息通过用户能理解的方式进行传达，确保能够交付用户所需要的信息。

从思考的道到执行的术，我们都需要掌握，多些思考，设计才能更好！

想要用好网格系统，这8个小技巧你必须掌握！ Hi，我是彩云。

阅读文章 >

欢迎关注作者的微信公众号：「彩云译设计」

编者按：交互设计中如何让用户等待时不焦虑？本文总结了3种压缩客观等待时间和9种压缩主观时间的设计策略，内容极为全面，建议收藏。更多相关干货：通过3种状态+5种模式，帮你掌握加载设计的知识点大家好，我是 Clippp，今天为大家分享的是「加载状态分析」。

编者按： 交互设计 中如何让用户等待时不焦虑？本文总结了3种压缩客观等待时间和9种压缩主观时间的设计策略，内容极为全面，建议收藏。

更多相关干货：

通过3种状态+5种模式，帮你掌握加载设计的知识点 大家好，我是 Clippp，今天为大家分享的是「加载状态分析」。

阅读文章 >

之前我们介绍了用户情绪随等待时间的变化曲线：

图 1 用户情绪随等待时间的情绪变化曲线

这条曲线明确地告知我们：等待时间越长，用户情绪越负向。

行为生物学家指出：人和大多数动物一样，都偏好即时满足，天生不愿意等待。随着等待时间变长，用户会逐渐开始焦虑、烦躁，愤怒，甚至摔手机，从而降低对产品整体的评价。

在讨论设计等待策略之前，我们先回到等待的源头，看看等待是怎么产生的？

图 2 等待出现的原因

用户与软件产品交互后，前台需要将交互行为和数据传输给后台，后台经过计算后，再将相应的数据传输到前台，经前台刷新后呈现给用户。

如果我们把用户跟产品交互的时刻当做开始时间，把数据传到后台计算后再传送回到前台刷新的时刻当做结束时间，这两个时刻之间的时距就是客观等待时间，它是可以用计时器精准测量出来的，具有客观性和确定性。

图 3 等待时间的示意

与此同时，在操作开始和信息反馈结束之间，用户并不会拿着计时器来测量，而用户心理所感知到的等待时间就是用户的主观等待时间，主观等待时间具有主观性（因人而异）和伸缩性（可能比客观时间长，也可能比客观时间短）。

那么，回到我们的主题，为了让用户等待不焦虑，我们可以从两大维度出发：

 压缩客观等待时间 压缩主观等待时间

图 4 如何设计等待的 2 大维度

来达成缩短用户等待时间感知的目标，让用户等待不焦虑，下面我们就逐一来看。

一、如何压缩客观等待时间 一方面技术团队深入钻研，调整算法和信息传输方式，努力让客观等待时间变短。另一方面可以依靠 3 大设计策略：预加载、保留缓存和先行呈现，来减少用户操作后的客观等待时间，这三大策略的实现逻辑如下图：

图 5 压缩客观等待时间的 3 大策略

1. 预加载少等待

对于信息流类产品而言，预加载是非常普遍的一种设计策略。

当用户浏览信息流列表时，随着列表内容的曝光，通常还未展示到最后一条时就会提前加载下一刷的内容，给用户的感受是列表内容源源不断，用户压根感知不到列表的加载过程（如果非正常浏览，手势快速滑动还是可以看到加载状态的）

图 6 预加载少等待的案例

除了列表内容预加载外，信息流类产品通常还会预加载详情页的文本。以今日头条为例，我在浏览信息流列表时断网，上滑依然可以看到预加载的文字列表，点击有图片的新闻，还可以看到详情页的正文，这都是预加载的内容，预加载可以帮助用户实现少等待甚至不等待。

2. 保留缓存免等待

对于用户查看过的内容，保留缓存可以让用户再次查看内容时免等待。

对于刷新频率较低的内容，我们完全可以采用保留缓存的形式来避免用户等待。这个在客户端上是非常常见的设计策略，但在网页中却非常鲜见，很多浏览器每次打开网页都需要重新加载。

设想一下你正在浏览一个网页内容，不小心左滑退出了，不仅要再次点击等待网页加载，而且还要重新滑动来定位原来浏览的内容位置，这是一个多么糟糕的体验。

图 7 保留缓存免等待的案例

今日头条的搜索结果页，部分结果是保留了详情页缓存的，即使断网，也可以再次访问（但访问过的链接却没有已访问的状态变化，不易识别和定位，体验有待改善）

3. 先行呈现免等待

对于一些内容发布类的场景，还有一种常见的设计策略是：一键发布并先行呈现内容，然后后台默默地传输数据，避免卡在发布状态造成用户等待。

图 8 先行呈现免等待的案例

以微信朋友圈和信息发送为例，即使断网，依然可以发布图文或者发送消息并展示在相应的窗口，然后后台默默上传，只要在几分钟内有网就能上传成功。这种先行呈现的设计策略就把加载留给了后台，无需用户等待，当用户网络较慢或者网络较差时，体验会很顺畅。

二、如何压缩主观等待时间 在现实产品设计中，除了上述场景，还有很多其他场景，由于种种限制性因素，客观等待时间往往难以压缩，或者压缩成本过高，所以压缩用户等待时间更依赖于压缩用户等待的“时间感知”，也就是主观等待时间。

根据诺曼在《如何管理复杂》书籍中提出的排队等待 6 原则，以及李爱梅、赵丹等作者在《等待是一种折磨？等待时间直觉及其导致的非理性决策行为》论文中总结的影响时间感知的主客观因素：

图 9 压缩客观等待时间的设计原则与影响因素

结合用户与软件产品交互的具体场景，我筛选并总结了 6 条适用于软件产品交互的 等待设计 策略（具体筛选方式我将在小课堂中为大家详细介绍）下面我们就来逐一介绍：

图 10 压缩客观等待时间的设计原则与影响因素

1. 全链路的体验设计，保持用户的好情绪

好情绪会压缩用户的时间感知。

图 11 保持用户的好情绪

用户体验是一个整体，我们不能一叶障目，只关注用户当下的等待。即使我们无法预知和改变用户使用我们产品前的情绪，也要尽量保持用户与我们产品交互的全链路操作体验，激发并维持用户的好情绪。因为拥有好情绪的用户会更有耐心和期待，会更有探索欲，能够分散注意力多关注等待之外的信息，从而压缩等待时间的感知。

2. 告知等待原因，让等待看起来合理

合理的等待理由，会延长用户等待时间的预期

图 12 让等待看起来合理

反之，不符合用户预期的等待，会拉长等待时间感知。随着硬件设备的升级和网速的提升，多数人机交互反馈都是即时的，如果出现较长时间的等待（时间≥5秒）或者出现相对更长的等待时长，就需要给用户一个等待的理由：

比如：排队人数太多、参与人数太多、所获取资源较大、当前网络较差等等。这些理由能让用户理解并认同等待，避免负向情绪的产生。

3. 告知等待时间，给予用户掌控感

不确定的等待时长，会拉长用户的时间感知。

图 13 告知用户等待时间

人们偏爱确定性的等待时间。如果给等待中的用户提供等待时间相关的信息，他们感知到的等待时间会短于客观等待时间。因为在确定时间的等待情境下，人们可以较好的规划时间，增加对时间的有效利用，减少由于等待导致的负面情绪。 反之，如果用户对等待时间相关的信息一无所知，他们感知到的等待时间会长于客观等待时间。因为不确定的等待时间会降低用户的控制感，增加潜在的经济成本和心理压力。

所以为了给用户掌控感，压缩用户的等待时间感知，我们要尽量给予用户明确的时间点、时间范围、加载资源进度等时间相关信息。

4. 填充相关有用有趣内容，让用户保持忙碌

让用户保持忙碌可以压缩用户的等待时间感知。

图 14 填充相关内容

研究表明：人们感知到的未被占用的时间比被占用的时间更长。

所以在用户等待的过程中，我们可以多提供一些有趣有用的内容，占据用户无聊的等待时间，分散他们对等待时间的注意力，从而减少他们的等待时间感知。

休斯顿机场案例：

休斯顿机场不断收到乘客投诉，抱怨取行李的等待时间太长。高管们为此增加人手处理问题，把平均等候时间降低到了 8 分钟，远低于行业标准，但顾客投诉并没有减少。

再次分析发现：乘客们从下飞机的站门走到取行李处只需 1 分钟，需要等待 7 分钟才能拿到行李，也就是 88%的时间是在等待。所以机场的处理措施不是继续努力减少用户等待时间，而是把站门换到离行李传输带更远的地方，这样用户需要花 7 分钟走过来，再用 1 分钟等待行李。虽然取行李的总体时间没有变，但这种设计方式却让乘客投诉率几乎将为 0.

镜子电梯案例：

巴黎的一所公寓里，整栋楼只有一部电梯，上班高峰期着急上班的住户们，总是抱怨等待时间太长，甚至威胁公寓老板，如果不解决这个问题就换公寓。

但是增加电梯的改造成本太大了，老板听从心理学家彼埃尔的建议在电梯里安装了一面镜子，之后住户们的抱怨就逐渐消失了。

这两个案例都是让用户有事可做，占据他们原来单纯的等待时间，分散用户注意力，从而缩短用户的心理等待时间。

在产品设计中，设计师们最常用也最能发挥设计价值的策略就是设计填充内容，如果大家搜索一下 loading 和进度条的设计，就可以看到设计师们在这方面做了多少尝试和努力。确实设计师们在填充内容的类型、具体元素、表现形式上有比较大的发挥空间，我将在下一篇文章中结合案例为大家详细讲解。

5. 提升等待开始和结束时的体验

好的峰终体验可以压缩用户的等待时间感知。

图 15 提升开始和结束的等待体验

研究指出：人们在回忆体验时，峰值和终点的体验对决策行为的影响更大，其次是起始点。在等待期间创造惊喜峰值，或者在结束期间加快速度，或者让用户一

开始就对等待有好感，都可以压缩用户对等待时间的感知。 所以设计师们要尤其注意等待开始和等待结束的速度感设计，努力给用户一种快速的印象感知。

6. 提供超预期的服务和内容

超预期的等待结果可以压缩时间感知。

图 16 超预期的等待结果

用户体验是一个完整的链路，除了提升等待时间段内的体验外，更重要的是提供符合用户预期甚至超越用户预期的等待结果，让用户感知所有的等待物有所值。 因为等待之后的结果才是终极的结束体验，结果超预期可以有效的压缩甚至让用户忘却等待的过程。

小结 最后，小结一下，为了让用户等待不焦虑，我们从 2 大维度，提供了 9 大设计策略来压缩用户的等待时间感知：

图 17 压缩等待时间的 9 大设计策略

压缩客观等待时间：

预加载少等待 保留缓存免等待 先行呈现免等待 压缩主观等待时间：

① 全链路体验设计，保持用户的好情绪 ② 告知等待原因，让等待看起来合理 ③ 告知等待时间，给予用户掌控感 ④ 填充相关有趣有用内容，让用户保持忙碌 ⑤ 提升等待开始和结束时的体验 ⑥ 提供超预期的内容和服务 好了，如何设计等待的 9 大设计策略到这里就介绍结束了，如果大家有什么疑问，或者希望悦姐讲解新的交互课题，欢迎添加悦姐微信 yuechats，和悦姐一起学习成长~

从0到1的产品，如何一次性解决所有异常和加载状态？ 本篇文章的价值：看完之后可以独立统筹整个产品的全局设计。

阅读文章 >

参考文献

书籍《如何管理复杂》 论文《等待是一种折磨？等待时间直觉及其导致的非理性决策行为》 欢迎关注作者微信公众号：「悦姐聊设计」

大家好，这里是和你们聊设计的花生~10 月 18 日至 20 日，一年一度的 Adobe Max 创新大会于如期举办。在此次大会上 Adobe 展示了的多项新功能，一旦更新可以进一步优化提升设计工具的创作流程和效率，让每个创作者都能更自由精准的表达自己的创意。如 Photoshop 中的「选择对象」功能在更新后可...

大家好，这里是和你们聊设计的花生~

10 月 18 日至 20 日，一年一度的 Adobe Max 创新大会于如期举办。在此次大会上 Adobe 展示了的多项新功能，一旦更新可以进一步优化提升设计工具的创作流程和效率，让每个创作者都能更自由精准的表达自己的创意。

如 Photoshop 中的「选择对象」功能在更新后可以识别复杂的对象和区域，如天空、建筑、水、植物和街道等，即使是头发这样复杂的对象也这可以保留精致细节和边缘；Illustrator 里新增了 Intertwine 功能，能轻松实现文本与插图之间的穿插遮挡效果；而在 Premiere Pro 里，可以通过"自动调色"对视频进行色彩校正。

Photoshop 更新后的对象选择工具可以挑选出复杂的对象和区域

Illustrator 中的 Intertwine 使其能够轻松实现不同元素间的穿插效果

Premiere Pro 里的"自动调色"功能对视频进行色彩校正

上面这些功能虽然令人兴奋，但更令人期待的是 Adobe 宣布正在研究将备受瞩目的生成性人工智能（Generative AI）技术整合到其设计工具中，也就是说以后在 Ps 等设计工具里也可以实现智能绘图修图。

提起 AI 图像生成技术，我之前也已经为大家推荐过很多相关内容了，如 DALLE 2、Midjounery 和 Dream Studio 等。它们今年以来非常热门的 AI 图像生成工具，可以根据文本提示生成高精度的图像、修改替换图像内容或在原有图片的基础上延展外绘或者生成相似的变体。

使用 AI 工具 Midjounery 生成的图像，从左到右作者分别为 @22th_c.painter 和 @gizemuzunoglu__  

AI 工具 Dream Studio 可以根据文本提示修改图像内容

了解更多有关 AI 图像生成工具：

人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器 大家好，我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。

阅读文章 >

AI绘图神器Dream studio又出黑科技！以图绘图、智能改图终于来啦 大家好，这里是和你们聊设计的花生~ 8 月的时候向大家推荐了一款 AI 图像生成工具 Dream Studio。

阅读文章 >

在此次 Adobe Max 2022 中，Adobe 向我们展示了生成性 AI 技术在 Photoshop、Adobe Express 和 Lightroom 里的应用效果。

①人工智能技术在Ps里的应用

利用 AI 生成技术，我们可以以文本描述的方式，在 Ps 中为图像中添加新对象、无痕消除元素以及修改内容。从下方的官方演示视频中可以看到，通过框选图像的某一部分并输入文本提示，ps 就能自动在对应区域生成一只猫头鹰的形象，并且有多个不同的形象可供选择，AI 生成的图像元素与图片整体的融合效果也很好，没有突兀的感觉。

此外还可以根据图像内容向外延展绘制内容：将画布拉伸至比原本的图像更大，然后输入文本提示，Ps 就能在空白区域智能生成对应的内容，与原图像完美衔接，效果非常惊人。

② 人工智能技术在Adobe Express里的应用

Adobe Express 是一个拥有大量专业设计的模板和资源的在线设计工具，可以快速创作出社交媒体图片、图标等，与 canvas 类似。

Adobe Express 的界面

在官方展示的演示视频中，通过结合 AI 技术，创作者可以用文本提示在 Adobe Express 中生成设计模板，或在场景中添加元素，甚至直接用文本描述生成文字特效。这样既提高了设计效率，也避免设计结构千篇一律的问题。

③ 人工智能技术在Adobe Lightroom里的应用

通过结合 AI 技术，创作者还可以在 Lightroom 把照片由白天的场景改为夜间；改变照片的环境内容，如背景和阴影细节；甚至可以根据真实照片自动外延，生成原本没有拍摄到的内容，且与原图像的内容完美融为一体。

其实 AI 技术从很早开始应用到设计工具中了，给我们的设计工作带来很大的便利。像之前和大家提到过专门出设计神器的公司 Clipdrop，它就是利用 AI 技术，实现了快速精准抠图、智能识别修图、图片高清放大和智能立体打光，让设计师可以从重复繁琐设计工作中解脱出来，一些原本不可能实现的后期特效也能轻松实现。

Clipdrop 的智能抠图效果展示，亲测效果非常好

了解 Clipdrop 出品的设计神器：

扣头发丝不留痕！最新免费抠图神器 ClipDrop Remove Background 来啦~ 大家好，我是和你们聊设计的花生~ 随着人工智能技术的发展，运用算法自动进行图片处理的工具越来越多，极大地提升了设计师的工作效率。

阅读文章 >

照片没有氛围感？快来试试这款打光修图的神器「Relight」 大家好这里是和你们聊设计的花生~ 在人像摄影中，灯光设置是非常重要重要的一环，好的打光能丰富画面层次，提升整体情绪氛围。

阅读文章 >

现在 Adobe 也开始将 AI 图像生成技术整合到自己的设计工具中，相信一键抠图、智能修图这些之前需要在独立工具中实现的效果也能在 Ps 等工具中直接完成，我认为对设计师而言这肯定可以节省很多精力。

除了通过文本描述生成、修改图像，Adobe 还相信 AI 技术在视频、3D 设计、纹理创作、标志设计等方面也可以起到作用。这意味着除了前面提到的 Photoshop、Adobe Express 和 Lightroom，Adobe 家族里的 Ai、Ae、Substance 3D 甚至是 Figma，将来都有可能借 AI 强大的创作能力，实现更多令人惊喜和震撼的设计效果。

对于这一未来可能出现的情况，身为设计师的你觉得是好事还是坏事呢？你觉得现在用的设计工具中，哪些功能是最需要 AI 来替代和优化的呢？我在「优设问答」栏目里专门发表了一个提问，欢迎大家点击下方链接进入问答，表达自己的看法和观点。

「问答链接」 https://www.uisdc.com/talk/121207479566.html

好啦以上就是今天的内容，觉得有用的话记得点赞哦~ 有关本文或设计的问题可以在评论区提出，我会第一时间为大家回复。

参考资料

https://www.jianji666.com/287799.html Bringing the Next Wave of Artificial Intelligence to Creative Cloud | Adobe Blog https://www.dpreview.com/news/1395223461/adobe-max-2022-major-updates-to-lightroom-photoshop-plus-more-on-adobe-s-ai-future 推荐阅读：

效率翻倍！10个人工智能设计神器和素材生成工具 越来越多的人工智能服务正在出现，但是这些人工智能不应该成为设计师的「竞争对手」，用好这些服务相反能够帮助设计师事半功倍地完成设计，搞定项目，解决问题。

阅读文章 >

编者按：这篇文章出自Adobe 前员工 Wenting Zhang （目测华裔），她从内部视角重新审视了这次收购案背后的利益纠葛，重新分析了 Adobe 在收购 Figma 之后各自的走向，并且得出了和我们之前猜测有所不同的结论，这篇「业内八卦」发布于 Medium，内容非常有趣。从我自己购买的股票投资组合来看，...

编者按： 这篇文章出自Adobe 前员工 Wenting Zhang （目测华裔），她从内部视角重新审视了这次收购案背后的利益纠葛，重新分析了 Adobe 在收购 Figma 之后各自的走向，并且得出了和我们之前猜测有所不同的结论，这篇「业内八卦」发布于 Medium，内容非常有趣。

从我自己购买的股票投资组合来看，上周是极其痛苦的。在 Adobe 工作的这些年里，我一直通过 RSU 和 ESPP 买入 Adobe 的股票（代码ADBE） 。我大部分的资产都投入到 Adobe 的股票当中，结果在 Adobe 宣布以 200 亿收购 Figma 那天， Adobe 的股价一口气跌了 20%。

我的这个系列通讯稿是从 2021 年 8 月开始更新的，也就是我离职 Adobe 几天后正式启动。在创立 Typogram 之前，我在 Adobe XD 的研发设计上投入了一年半的时间，而更早之前，我有 5 年的时间花费在 Typekit （现在叫 Adobe Fonts 了）上。这次 Figma 的收购案对我而言，是多层次的打击。

我曾经致力于推动 Adobe XD，夜以继日地抗争试图赢得与 Figma 之间的战争，而现在 Adobe 收购 Figma 相当于是过早宣布了 Adobe XD 的失败。当然，对我钱包的打击则是更直接的伤害。

200 亿是 Figma 最高估值的 4 倍 并不是每个买了Adobe股票的人都和我一样因为反水而怀恨在心，但是为什么这次 Adobe 的股价会如此大幅度下跌？为什么其他人也同样厌恶这次收购？原因很简单，200 亿美元的收购价实在太高了。

要对这个收购进行系统化的评估很难，但是我们可以根据公开的信息快速的进行一个粗略的估算。

Figma 上次以 100亿美元的估值筹措资金发生在 2021 年 6 月，乍一看这个是合理的：Figma 本身运作良好，以至于它从 2021 年到 2022 年整体价值翻了一倍。但是，实际情况是，2021 年除了位于最头部的几个创业公司，即使是公司运营良好的企业，在2022 年也都大幅下调了估值。以设计领域 Figma 的另外一个竞争者 Canva 为例，尽管它表现不错，但是估值从 2021 年的 400 亿美元下调到了 2022 年的 260 亿美元。如果参考整个市场的比率，Figma 在 2022 年的估值应该大约为 65 亿美元。 估算初创公司估值的另外一种方式，是用公司收益和增长系数来推算。高增长的初创公司的增长系数可能会有 10 倍甚至更多，但是即便如此，按照 Figma 年收益为 4 亿美元乘以 10 也仅仅只有 40 亿美元的估值。 所以，我认为 Figma 合理的估值可能是 50 亿美元左右，200 亿的收购价整整高出了 4 倍，这种不合理的收购价促使投资者纷纷抛售 Adobe 的股票。没有人喜欢赔本的交易，而要达成这种不合理的收购，只有可能是 Adobe 上赶着求 Figma 出售，而非身份平等的谈判。

那么 Adobe 为什么会如此迫切的想要收购 Figma 呢？

异常的产品组织结构 如果你阅读过 Figma CEO 发布的对外公告，你会发现，收购完成之后，他将会向 David Wadhwani 汇报工作，而非 Scott Belsky。这件事情对于其他人可能没啥异常，但是对于在 Adobe 工作过的人而言，可以说是非常奇怪了。

Scott Belsky 是 Creative Cloud 的负责人，也就是 Adobe 拳头产品「创意云」的负责人，换句话说，就是大家常用的 Adobe 系软件都在他的管辖之下。你会在每年发布新产品的 Adobe Max 大会上看到他。收购完成之后，「Design Twitter」 这个帐号半开玩笑发布了下面这张图来模拟 Figma 被纳入 Creative Cloud 之后的样子：

所有人都请出，Figma 的最终归宿一定是 Creative Cloud，甚至历史也证明了它会是所有被收购软件的最终归宿：

深扒Adobe 40年收购史！发现最出名的不仅仅是Figma Adobe 收购 Figma 恐怕是昨天在设计圈中最大的新闻了吧？

阅读文章 >

那么为什么 Figma 的 CEO 不是向 Creative Cloud 的负责人汇报工作呢？

作为局外人，我们可以合理地推测，答案非常简单，那就是 David Wadhwani 就是主导和推动这次收购的人，而不是 Scott Belsky。

Adobe 早在 2015 年 10 月就以 Project Comet 的形式对外发布了 Adobe XD 。平心而论，Adobe XD 一定不如 Figma 受欢迎，但是它本身算是一个相对成功的产品，尤其是在 Creative Cloud 的整个生态当中。根据 2021 年设计工具调研 （最新 2022 年版还没发布）Adobe XD 是第三受欢迎的 UI 设计工具，和第二受欢迎的 UI 原型制作工具。 和 2020 年的设计工具调研相比 ，Adobe XD 的位置是在上升的——它的原型设计排名从3前进到2，而 UI 设计类工具中，它的受欢迎程度还在提升。

2020 年和 2021 年设计工具调研，来源 uxtools.so

作为用户，我们对于工具的感知通常可以视为 1 或 0 ——如果我不使用它，那么它就几乎不存在，几乎每个人都存在着幸存者偏见。但是市场本身是广阔的，你可能会惊讶于有多少公司用的是Adobe XD 而不是 Figma 。这表明：

Adobe XD 其实是一笔可观的投资，并且 Adobe 已经在它身上持续投资了7年； Adobe XD 正在逐步前进，而非走向失败； Figma 的 CEO 并没有向 Creative Cloud 的负责人报告，是一个危险的信号。公司是否在认真考虑过 Adobe XD 的存续之后才决定购买 Figma？在得出 Adobe 需要花费 200 亿美金购买 Figma 这个结论之前，「决策者」是否打开过 Adobe XD？Adobe 要么承认 XD 的失败并让 Figma 吞并 Adobe XD，要么制定策略让两个高度类似的产品并肩发展，而这时候不仅涉及 200 亿美金的收购投入，还涉及花费 7 年时间并且构建一个和 Figma 近似同等规模的团队。分析 Adobe XD 和 Figma 两者有哪些相似相同、哪些功能差异并不是一件困难的事情，但是分析了又做出收购的操作，这又是无知的。 背后的利益冲突 David Wadhwani 是谁？在 Adobe 工作的时候，我从未听说过这个人的名字。进一步查询结果表明，他是在一年多之前，大概是 2021 年 6 月的时候，加入 Adobe，在此之前，他是风险投资公司 Greylock 的合伙人。在 David Wadhwani 的 推特 和 领英 资料当中，可以看到他目前依然是 Greylock 的合伙人，当然，可能由于他的个人信息还未更新，并不保证他现在依然和 Greylock 是利益共同体。

但是，Greylock 在 Figma 的 A、B、C、D、E 轮融资的时候，都投资过！Figma 的 A 轮融资中，每股 0.2 美元，而在这次收购之后，这部分股票翻了 200 倍！如果 David 目前仍在为 Greylock 工作，或者他个人投资过 Figma ，那么他这次领导 Adobe 收购 Figma ，就一定存在利益冲突。

同样的情况，出现在任何一家公司都很难善了。 特斯拉 CEO 埃隆 马斯克 曾经用特斯拉收购了他的堂兄所创立并支持的公司 SolarCity，这当中的利益关系和Figma 收购案是如此的相似，而在这个情形下，马斯克直接被股东起诉了。

当然，这当中的利益冲突是否存在，还需要更多深入的调查证据才能得到证明，但是两者之间的利益关联是显而易见的。

有趣的「前瞻性陈述」 虽然我对于这笔交易本身没有任何期待，但是 Figma CEO 的 「前瞻性声明」是个非常有趣的读物 ，我引用其中一段内容：

我们在本文当中所做出的每一个前瞻性声明，都涉及风险和不确定性，可能导致结果和这些前瞻性声明之间出现巨大差异。而导致这些差异产生的因素包括但不限于：预期收入、成本节省、协同效应以及其他因素，比如 将 Figma 的协作设计功能添加到 Creative Cloud 之后，Figma 的技术有效性无法在预期时间内实现，或者根本无法实现，或者因为集成本身涉及成本困难，而这些困难包括但不限于客户和员工的留存问题……

我真的想嘲笑这份免责声明，因为它所谈及的问题实在是太过真实。我认为对用户而言，最好的结果是 Figma 维持不变。即使 Adobe 竭尽全力维持 Figma 的独立性，它的发展速度也会变得比现在慢很多，因为不会有额外的资金注入进来了，而 Adobe 本身也会因为这个收购案的庞大金额，而勉力维持并支付收购成本。唯一的赢家大概是原本的 Figma 的投资者。这次收购对于 Adobe 和 Figma 以及整个设计领域而言，是三输的局面。

随着整个收购案的推进，越来越多的 Figma 员工也将开始跳槽，开始他们新一轮的冒险，而同时我们也很难责怪他们，毕竟他们是 Figma 股票的持有者，他们因为这轮收购会变得非常富有，他们为什么不成立自己的天使投资公司，自己去做天使投资人呢？而这大概也是这次收购案唯一的光明面。

在收购之间，Figma 帮助 Adobe XD 变得更好，反之亦然。 Smart Animate 这个功能是 Figma 从 Adobe XD 这里学来的，而 Live Co-editing 则是 Adobe XD 向 Figma 学习的结果。

现在两者都属于 Adobe 了，我很期待 Figma 的设计工具专家接下来会怎样改变世界。

前两天苹果悄无声息地上新了全新的 10 代 iPad 和新的 iPad Pro，没有发布会，但是依然相当惊艳！入门款的 iPad 终于换上了直角边的新设计，套上了 iPad Air 的皮，四色外观明快讨喜，不到 4K 的价格而且可以搭配最便宜的初代 Apple Pencil，简直是要将性价比进行到底！iPad P...

前两天苹果悄无声息地上新了全新的 10 代 iPad 和新的 iPad Pro，没有发布会，但是依然相当惊艳！

入门款的 iPad 终于换上了直角边的新设计，套上了 iPad Air 的皮，四色外观明快讨喜，不到 4K 的价格而且可以搭配最便宜的初代 Apple Pencil，简直是要将性价比进行到底！

iPad Pro 则升级了性能更强的 M2 芯片，而且为 Apple Pencil 追加了更加直觉自然的悬停交互！不仅可以让 Apple Pencil 悬停预览项目，而且还能更加便捷地提升手绘的体验！插画师在下笔之前，可以预览你的画笔笔触大小、透明度，同时可以借用另外一只手，单指调整或者双指缩放：

而 iPad Pro 的大屏幕输出和前台调度则让你可以在更大的屏幕上进行创作：

无论预算高低，总有适合你的 iPad 和 Apple Pencil，而距离彻底释放你创造力的，是一套手绘的技法和正确的创作姿势，而这些，正好是我们能提供的：

也许你已经在很多地方看到过闫老师的创作，这些保留笔触、色彩大胆、风格独特的作品，大部分作品是花了一两个小时就完成的速涂作品，而且全部都是在 iPad 上完成的。

如果你正好有 iPad 让它不再只用来看视频，或是准备下单最新款的 iPad 并且像插画师一样释放自己的创作力，让 iPad 价值翻倍，不妨加入这一期的速涂特训营：

课程原价 599 元， 新课特惠价仅需 499 元！

直减100元，活动结束立刻恢复原价！

移动端扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_632d8531e4b0eca59c34c5e7/6

一、为什么「iPad 速涂特训营」能让你爱上画画？ 闫老师并没有刻意去「坚持」画画，而是这种创作方式实在是太适合创作了：

超快：碎片化的时间就能涂抹，一个多小时就能完成创作 系统：启发式教学，你不仅会掌握软件的使用、绘画的技法，而且会被传授感知的方式、观察的要义、归纳的秘诀以及创意的思维 轻松：不用拘泥于场合，或站或坐或躺，怎么舒服怎么画，见缝插针随意涂抹 好学：抓住几项核心的训练内容就能创作，绘画对象随处可见 而学员反馈也正好体现了这一点：

左：专项有点像小游戏，做起来轻松，但收获很大

右：零基础开始画，在老师的鼓励下能自主完成速涂

注：以上学员反馈真实可查

更具体的说，这套课程的设置，就是循序渐进地带你进入创作的状态：

二、从零基础到速涂达人的全方位拔高！ 在这门 iPad 速涂特训营里，你可以收获到的不止是可以实时问答的直播教学，典型作业的点评修改，更有超多的速涂干货，包括不限于：

1. 六大插画实战案例手把手带练教学

课程实战案例囊括了多种插画风格，绘制类型也从建筑、植物、食物、光影到场景，逐步提升手绘水平。

2. 一套速涂练习的通用核心方法

如何观察画面才能把握正确的画面层级？ 如何快速概括形体才能又快又准？ 短时间内怎么塑造光影，构建层次感？ 这也是很多同学给满分的原因，干货超多：

注：以上学员反馈真实可查

3. 四大速涂专项训练

七巧板造型训练 主观色彩训练 黑白两分叠加训练 细化优化训练 4. 热门手绘软件 Procreate 快速上手指南

以前没接触过 iPad，不会使用 Procreate 也不用担心，我们有单独一节课来讲解软件基础和核心操作。（注：Procreate 是付费软件，需自行购买）

5. 老师私藏 iPad 绘画笔刷

所有参加课程的同学都可以免费领取石头老师的私藏笔刷。

6. 结课后免费加入速涂打卡小分队，继续学习进步

结课后大家可以参加闫实老师的打卡小分队，与一帮热爱速涂的同学一起，不断提高绘画水平。

不仅很多师兄师姐在打卡群里等你，还有二刷的同学：

注：以上学员反馈真实可查

更多的干货不一而足，直接看课程大纲最实在！

课程原价 599 元， 新课特惠价仅需 499 元！

直减100元，活动结束立刻恢复原价！

移动端扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_632d8531e4b0eca59c34c5e7/6

拟定这份大纲的闫实老师，很早就已经是 iPad 绘画圈的人气大咖了，他不仅是速涂的高手，也是高级原画师，手绘功底非常扎实，作品见真章：

闫老师速涂作品

当然，优秀的学员作品也是一抓一大把：

想跟着闫实老师在 26 天内学会 iPad 速涂，养成每天画画的好习惯，现在就抓紧啦！

课程原价 599 元， 新课特惠价仅需 499 元！

直减100元，活动结束立刻恢复原价！

移动端扫码报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_632d8531e4b0eca59c34c5e7/6

大家在平时的工作中，越来越多地会接触到后台界面设计，与一般的 UI 设计一样，它也有它的设计要素和规范。今天这篇文章将会讲到后台界面的 5 个关键设计要素和 10 条设计原则，记得收藏阅读并用到自己的工作中吧。更多可视化界面设计教程：万字干货！

大家在平时的工作中，越来越多地会接触到 后台界面设计 ，与一般的 UI 设计一样，它也有它的设计要素和规范。今天这篇文章将会讲到后台界面的 5 个关键设计要素和 10 条设计原则，记得收藏阅读并用到自己的工作中吧。

更多可视化界面设计教程：

万字干货！写给设计师的数据可视化设计指南 设计师在工作中经常会遇到下面这种情况： 自己辛辛苦苦、加班加点、没日没夜做出来的数据分析报告交到 boss 们手上，结果看不懂，全程黑人问号脸。

阅读文章 >

几天前，我和同事们分享了如何设计后台界面才能把它变得更有效。讲到数据可视化，在这篇文章中我将深入讨论 2 个关键点：

构建最佳 UI 的关键因素 创建一个后台界面的设计原则 所有关键要素都是为了让最终用户尽可能有效和理解数据结果。

一、关键因素 1. 考虑目标用户

目标用户是必须要考虑的最重要因素。你需要知道哪些人会用到你设计的界面，以期达到他们的目的。

为了保证成功，你需要把自己放在用户的角度去思考。用户经常使用产品的某个模块和设备将直接影响信息的显示风格。（数据调研）

HR 后台界面

2. 确定目标

建立你的最终目标，将直接关系到用户需求和产品目标。你设计的每一个图表都应该有其用途，通过展现这些数据帮助用户解答关键问题。重要的是要考虑到不是所有可用数据都对分析过程有用，根据目标进行筛选，如果这一部分出错，接下来的努力会变得没有意义。

3. 选择关键性指标（KPI）

对于真正有效的后台界面设计，必须为你的业务需求选择正确的关键指标。一旦你清楚了你的最终目标并且考虑到了你的目标用户，你就可以有办法在后台界面中选择最好的 KPI。

KPI 将有助于塑造后台界面的方向，因为这些指标将显示基于特定业务领域的数据可视化。

（彩云注：帮助确立数据展示的优先级）

4. 用数据讲好故事

遵循有效的后台界面设计工作流，开始构建数据故事。

简而言之，后台界面讲故事是一种以可视化的方式呈现数据的过程，将描绘整个数据分析过程，为了让用户有效地理解商业策略和目标。换句话说，高效的故事流程将帮助你尽可能的用最清晰的方式传达信息。

有效的数据故事作为一个基本步骤，可以减少专业技术用户与没有数据分析能力的人之间的差距。正如《福布斯》(Forbes)在一篇文章中所言:“讲故事的人用数据驱动的叙事来启发那些无法进行数据分析、或者根本无法充分利用时间的团队成员。”

高效讲故事的一个好方法是预先设计后台界面。根据你的受众和目标规划将包含哪些图表，这将帮助你在实际开始构建后台界面时更加专注。通过这种方式，你可以避免混合使用数据可视化，并判断把它们放在一起是否有意义，而是根据用户的理解程度和最终目标生成有用的报告。

（彩云注：帮助筛选应该透传哪些数据在界面上，并根据用户的旅程地图把数据进行编排）

关注 HR 的工作流

5. 选择正确类型的后台界面

另一个最好的实践是要基于你的分析目标来考虑后台界面的选型。在前面的观点中有提到，每一个不同类型的后台界面应该是为一个特定的用户群体，以在业务决策过程中帮助达到用户的特定目标。

只有当信息是直接可操作的时候，它才有价值。用户必须有能力利用这些信息用到他自己的商业策略和目标中。作为一个只使用最佳后台界面设计原则的设计师，确保你可以辨别关键信息，并将它从不重要的信息中区分出来，以提升用户的工作效率。

作为参考，以下基于业务的 5 种主要类型的后台界面：

战略型: 通过分析和对广泛的关键趋势信息进行标准化，专注于监控公司的长期战略。

可操作型: 一种用于在较短的时间范围内监视、度量和管理流程或操作的业务智能工具。

分析型: 包含大量综合数据流，使分析师能够深入挖掘并得出见解，以帮助公司在高管层面取得进展。

特定平台型: 正如它的名字一样，这种类型的数据后台界面是用于特定平台分析。例如，如果你想跟踪你的社交媒体表现，你可以使用特定的指标，并生成一个只关注该渠道的管理界面。

策略型：这种信息丰富的后台界面最适合中层管理人员，并有助于根据跨部门的趋势、优势和劣势制定增长战略。

（彩云注：可惜原文没有太多这方面的案例，大家可以把这 5 种类型作为一种类型方向，在实际项目中看看自己的项目属于哪种类型，以便有所侧重。）

二、设计原则 1. 层次结构

一个常见的设计错误是想把所有的信息都告知用户，好像它们都同样重要。可以利用大小和位置来组织数据的层次结构。

通过定义信息级别让用户清楚什么是最重要的 把最重要的信息放在左上角。从这个位置往右下方组织，信息从最重要的级别到不太重要的级别进行排版。 也可以将信息分类并显示在不同的视图中

2. 简洁

后台界面的真正目的是以易于理解和更简单的形式呈现复杂信息。

不要提供太多用户难以理解的信息 使用更少的列来显示信息 删掉多余的信息以减少数据的杂乱无章

3. 一致性

当一个后台界面有比较一致的排版时，它看起来是更好的。

确保你的后台界面易于阅读，在组之间使用类似的可视化方式和布局 让相关信息彼此靠近 将相关内容分组

4. 亲密性

在后台界面中把相关信息组织在一起将帮助用户更快理解

把相关信息靠的更近一些 不要将相关信息分散在后台界面上 将相关内容分组

5. 对齐

后台界面上的元素应该在视觉上对齐，让它看起来视觉平衡。

将后台界面上的元素彼此对齐，以便更好的组织在一起 利用网格规范组织好后台界面中的小部件 不对齐的界面布局不会给到用户良好的用户体验

不对齐的后台界面看起来很不舒服

6. 留白

留白在设计中就像呼吸一样重要。当用户在使用你的设计时，它能给用户提供呼吸的空间。

当用户来查看信息时，后台界面设计中的留白会吸引用户

减少留白会给用户带来混乱的视图

使用留白将相关信息可视化分组

少或没有留白，会直接劝退用户

7.  颜色

使用一个有效的颜色方案能抓住用户的注意力，帮助他们更容易理解信息。

仔细选择合适的颜色，让内容易读 使用较大对比度在背景上恰当地显示视觉元素

避免使用无意义的渐变和太低的对比度

8. 字体

标准字体对后台界面来说就是最好的字体，除非有特殊需求才考虑用其他字体。

使用标准字体，用户更容易阅读和扫描 独特时尚的字体可能看起来效果不错，但对用户来说通常更难阅读 避免使用全大写的文字，用户还需要花时间理解大小写然后才是看懂吸收 使用一个合适的大小和风格，理解这些信息会更有效

不要使用特殊字体

9. 数字格式

展示过高的数字精度，会让这些数字变得很难阅读和理解。

尽量使用整数，因为长数字会使用户感到困惑 删去不必要的信息 让用户更容易比较简单的细节

10. 标签

使用标签为用户更快更有效的传达信息

避免使用旋转标签，用户很难阅读 尽可能使用标准缩写

避免使用旋转标签

三、总结 关键因素是指“为什么”（Why）我们要做后台界面做数据呈现，

设计原则是指“如何”（How）进行呈现，

数据可视化是指呈现“什么样”（What），

后台界面是为了帮助用户节省时间，努力把复杂的数据信息通过简洁的信息呈现出来。后台界面的目标是将关键信息通过用户能理解的方式进行传达，确保能够交付用户所需要的信息。

从思考的道到执行的术，我们都需要掌握，多些思考，设计才能更好！

想要用好网格系统，这8个小技巧你必须掌握！ Hi，我是彩云。

阅读文章 >

欢迎关注作者的微信公众号：「彩云译设计」

编者按：这篇文章出自Adobe 前员工 Wenting Zhang （目测华裔），她从内部视角重新审视了这次收购案背后的利益纠葛，重新分析了 Adobe 在收购 Figma 之后各自的走向，并且得出了和我们之前猜测有所不同的结论，这篇「业内八卦」发布于 Medium，内容非常有趣。从我自己购买的股票投资组合来看，...

编者按： 这篇文章出自Adobe 前员工 Wenting Zhang （目测华裔），她从内部视角重新审视了这次收购案背后的利益纠葛，重新分析了 Adobe 在收购 Figma 之后各自的走向，并且得出了和我们之前猜测有所不同的结论，这篇「业内八卦」发布于 Medium，内容非常有趣。

从我自己购买的股票投资组合来看，上周是极其痛苦的。在 Adobe 工作的这些年里，我一直通过 RSU 和 ESPP 买入 Adobe 的股票（代码ADBE） 。我大部分的资产都投入到 Adobe 的股票当中，结果在 Adobe 宣布以 200 亿收购 Figma 那天， Adobe 的股价一口气跌了 20%。

我的这个系列通讯稿是从 2021 年 8 月开始更新的，也就是我离职 Adobe 几天后正式启动。在创立 Typogram 之前，我在 Adobe XD 的研发设计上投入了一年半的时间，而更早之前，我有 5 年的时间花费在 Typekit （现在叫 Adobe Fonts 了）上。这次 Figma 的收购案对我而言，是多层次的打击。

我曾经致力于推动 Adobe XD，夜以继日地抗争试图赢得与 Figma 之间的战争，而现在 Adobe 收购 Figma 相当于是过早宣布了 Adobe XD 的失败。当然，对我钱包的打击则是更直接的伤害。

200 亿是 Figma 最高估值的 4 倍 并不是每个买了Adobe股票的人都和我一样因为反水而怀恨在心，但是为什么这次 Adobe 的股价会如此大幅度下跌？为什么其他人也同样厌恶这次收购？原因很简单，200 亿美元的收购价实在太高了。

要对这个收购进行系统化的评估很难，但是我们可以根据公开的信息快速的进行一个粗略的估算。

Figma 上次以 100亿美元的估值筹措资金发生在 2021 年 6 月，乍一看这个是合理的：Figma 本身运作良好，以至于它从 2021 年到 2022 年整体价值翻了一倍。但是，实际情况是，2021 年除了位于最头部的几个创业公司，即使是公司运营良好的企业，在2022 年也都大幅下调了估值。以设计领域 Figma 的另外一个竞争者 Canva 为例，尽管它表现不错，但是估值从 2021 年的 400 亿美元下调到了 2022 年的 260 亿美元。如果参考整个市场的比率，Figma 在 2022 年的估值应该大约为 65 亿美元。 估算初创公司估值的另外一种方式，是用公司收益和增长系数来推算。高增长的初创公司的增长系数可能会有 10 倍甚至更多，但是即便如此，按照 Figma 年收益为 4 亿美元乘以 10 也仅仅只有 40 亿美元的估值。 所以，我认为 Figma 合理的估值可能是 50 亿美元左右，200 亿的收购价整整高出了 4 倍，这种不合理的收购价促使投资者纷纷抛售 Adobe 的股票。没有人喜欢赔本的交易，而要达成这种不合理的收购，只有可能是 Adobe 上赶着求 Figma 出售，而非身份平等的谈判。

那么 Adobe 为什么会如此迫切的想要收购 Figma 呢？

异常的产品组织结构 如果你阅读过 Figma CEO 发布的对外公告，你会发现，收购完成之后，他将会向 David Wadhwani 汇报工作，而非 Scott Belsky。这件事情对于其他人可能没啥异常，但是对于在 Adobe 工作过的人而言，可以说是非常奇怪了。

Scott Belsky 是 Creative Cloud 的负责人，也就是 Adobe 拳头产品「创意云」的负责人，换句话说，就是大家常用的 Adobe 系软件都在他的管辖之下。你会在每年发布新产品的 Adobe Max 大会上看到他。收购完成之后，「Design Twitter」 这个帐号半开玩笑发布了下面这张图来模拟 Figma 被纳入 Creative Cloud 之后的样子：

所有人都请出，Figma 的最终归宿一定是 Creative Cloud，甚至历史也证明了它会是所有被收购软件的最终归宿：

深扒Adobe 40年收购史！发现最出名的不仅仅是Figma Adobe 收购 Figma 恐怕是昨天在设计圈中最大的新闻了吧？

阅读文章 >

那么为什么 Figma 的 CEO 不是向 Creative Cloud 的负责人汇报工作呢？

作为局外人，我们可以合理地推测，答案非常简单，那就是 David Wadhwani 就是主导和推动这次收购的人，而不是 Scott Belsky。

Adobe 早在 2015 年 10 月就以 Project Comet 的形式对外发布了 Adobe XD 。平心而论，Adobe XD 一定不如 Figma 受欢迎，但是它本身算是一个相对成功的产品，尤其是在 Creative Cloud 的整个生态当中。根据 2021 年设计工具调研 （最新 2022 年版还没发布）Adobe XD 是第三受欢迎的 UI 设计工具，和第二受欢迎的 UI 原型制作工具。 和 2020 年的设计工具调研相比 ，Adobe XD 的位置是在上升的——它的原型设计排名从3前进到2，而 UI 设计类工具中，它的受欢迎程度还在提升。

2020 年和 2021 年设计工具调研，来源 uxtools.so

作为用户，我们对于工具的感知通常可以视为 1 或 0 ——如果我不使用它，那么它就几乎不存在，几乎每个人都存在着幸存者偏见。但是市场本身是广阔的，你可能会惊讶于有多少公司用的是Adobe XD 而不是 Figma 。这表明：

Adobe XD 其实是一笔可观的投资，并且 Adobe 已经在它身上持续投资了7年； Adobe XD 正在逐步前进，而非走向失败； Figma 的 CEO 并没有向 Creative Cloud 的负责人报告，是一个危险的信号。公司是否在认真考虑过 Adobe XD 的存续之后才决定购买 Figma？在得出 Adobe 需要花费 200 亿美金购买 Figma 这个结论之前，「决策者」是否打开过 Adobe XD？Adobe 要么承认 XD 的失败并让 Figma 吞并 Adobe XD，要么制定策略让两个高度类似的产品并肩发展，而这时候不仅涉及 200 亿美金的收购投入，还涉及花费 7 年时间并且构建一个和 Figma 近似同等规模的团队。分析 Adobe XD 和 Figma 两者有哪些相似相同、哪些功能差异并不是一件困难的事情，但是分析了又做出收购的操作，这又是无知的。 背后的利益冲突 David Wadhwani 是谁？在 Adobe 工作的时候，我从未听说过这个人的名字。进一步查询结果表明，他是在一年多之前，大概是 2021 年 6 月的时候，加入 Adobe，在此之前，他是风险投资公司 Greylock 的合伙人。在 David Wadhwani 的 推特 和 领英 资料当中，可以看到他目前依然是 Greylock 的合伙人，当然，可能由于他的个人信息还未更新，并不保证他现在依然和 Greylock 是利益共同体。

但是，Greylock 在 Figma 的 A、B、C、D、E 轮融资的时候，都投资过！Figma 的 A 轮融资中，每股 0.2 美元，而在这次收购之后，这部分股票翻了 200 倍！如果 David 目前仍在为 Greylock 工作，或者他个人投资过 Figma ，那么他这次领导 Adobe 收购 Figma ，就一定存在利益冲突。

同样的情况，出现在任何一家公司都很难善了。 特斯拉 CEO 埃隆 马斯克 曾经用特斯拉收购了他的堂兄所创立并支持的公司 SolarCity，这当中的利益关系和Figma 收购案是如此的相似，而在这个情形下，马斯克直接被股东起诉了。

当然，这当中的利益冲突是否存在，还需要更多深入的调查证据才能得到证明，但是两者之间的利益关联是显而易见的。

有趣的「前瞻性陈述」 虽然我对于这笔交易本身没有任何期待，但是 Figma CEO 的 「前瞻性声明」是个非常有趣的读物 ，我引用其中一段内容：

我们在本文当中所做出的每一个前瞻性声明，都涉及风险和不确定性，可能导致结果和这些前瞻性声明之间出现巨大差异。而导致这些差异产生的因素包括但不限于：预期收入、成本节省、协同效应以及其他因素，比如 将 Figma 的协作设计功能添加到 Creative Cloud 之后，Figma 的技术有效性无法在预期时间内实现，或者根本无法实现，或者因为集成本身涉及成本困难，而这些困难包括但不限于客户和员工的留存问题……

我真的想嘲笑这份免责声明，因为它所谈及的问题实在是太过真实。我认为对用户而言，最好的结果是 Figma 维持不变。即使 Adobe 竭尽全力维持 Figma 的独立性，它的发展速度也会变得比现在慢很多，因为不会有额外的资金注入进来了，而 Adobe 本身也会因为这个收购案的庞大金额，而勉力维持并支付收购成本。唯一的赢家大概是原本的 Figma 的投资者。这次收购对于 Adobe 和 Figma 以及整个设计领域而言，是三输的局面。

随着整个收购案的推进，越来越多的 Figma 员工也将开始跳槽，开始他们新一轮的冒险，而同时我们也很难责怪他们，毕竟他们是 Figma 股票的持有者，他们因为这轮收购会变得非常富有，他们为什么不成立自己的天使投资公司，自己去做天使投资人呢？而这大概也是这次收购案唯一的光明面。

在收购之间，Figma 帮助 Adobe XD 变得更好，反之亦然。 Smart Animate 这个功能是 Figma 从 Adobe XD 这里学来的，而 Live Co-editing 则是 Adobe XD 向 Figma 学习的结果。

现在两者都属于 Adobe 了，我很期待 Figma 的设计工具专家接下来会怎样改变世界。