v2tn-设计狮

新手科普！4个方面帮你快速熟悉UI组件中的瀑布流

酸梅干超人 — 2023-05-28

编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。

往期组件科普：

一、组件介绍

瀑布流 (Waterfall Layout)，又称瀑布流式布局，是信息流网格布局的一种视觉形式。顾名思义，这种布局形式既像瀑布一样无限向下倾泻，内容又如水一样没有固定样式。

所以我们可以总结出瀑布流的两个最核心的时间特征：

无限加载
内容等宽不等高

二、使用场景

瀑布流因其视觉特征，多用在以多种比例图片/视频为主体的内容流中，最典型的例子莫过于花瓣、Pinterest，这类图片采集网站使用瀑布流可以更有效地利用页面空间并充分展示图片内容而不裁切，同时让用户的浏览体验更加沉浸，错落的图片也相对更容易形成有效的视觉引导，引导用户不断向下浏览。

以及另外一类以小红书、淘宝为代表的强内容展示 APP，在布局内容时不约而同地使用瀑布流，其核心原因即在于其强视觉引导的特性。

三、设计要点

1. 列宽的制定逻辑

对于等宽的网格列表来说，我们只需要去关注它们之间的间距是多少，这样更方便不同宽度设备的适配，网格会自动扣除间距并适配网格宽度，而不必设计师一一去定义。

例如，我们只需定义两列网格的左右边距均为 20pt，间距 12pt。

那么不管是在 12/13/14 的 390 宽度中，还是在 ProMax 的 428 宽度中，布局都会固定住这三个数值，并自动适配列宽，列宽的数值具体是多少，并不需要我们关注。

这也正是两列网格通用的适配逻辑。

2. 内容的布局

瀑布流有三种内容布局形式。

① 图片等高

在图片等高的情况下，能造成网格高度错落的原因只有文案。文案的长短不一、是否有标签等因素，会造成每个网格中的文案部分出现高度差异，从而形成网格错落。但因为文案通常不会超过两行，这种高度的差值往往是固定且非常有限的，也就是说更容易在下方某些地方回归对齐。

所以这种布局更容易把控视觉秩序，但会因为强制图片等比例导致内容的不完整，除非限制用户上传图片的比例。

② 根据图片比例自由变化

这是一种完全不限制图片比例的形式，网格的高度不仅由图片影响，也由文案影响。几乎不可能做到在下方某处重新对齐，所以视觉上往往更加混乱，偶尔会出现极长或极短的网格，导致视觉权重出现非意图的倾向。

③ 根据有限图片比例变化

这种形式的意思是说，在用户上传图片时就限制图片在有限的几种比例之内，所以尽管网格高度同样由图片和文案共同影响，但却将高度差值限制在了相对有限的范围内。现在大多数电商 APP 采用的便是这种布局形式。

3. 内容的类型

瀑布流发展至今，对于内容类型也有许多 App 根据实际项目需求做出了自己的探索。相较于单一的内容类型，因为内容构成更复杂、需求更多元，更多大型 App 会偏向选用多类型内容混合的形式掺进瀑布流里，在达到功能需求的同时，减轻单一性内容对用户浏览时的信息疲劳。

具体来说，内容类型分成两个大类，主内容和运营内容。

主内容

主内容根据 App 类型的不同，包括但不限于图片、视频、动态、商品，主内容依然是瀑布流中占比最多的内容类型。在一个页面内可以使用一种主内容，也可以多种混合。

在多种主内容混合时，设计形式上通常并不会有太大的区别，只会在同一设计框架下，增改该内容类型特有的信息。

运营内容

针对 App 不断扩大的运营需要，更多 App 会在瀑布流中插入运营内容。

例如，淘宝会在瀑布流最开始的左上角放置一个小型的轮播组件，左上角则是主推的与拼多多抗衡的百亿补贴功能入口。

以及马蜂窝，在顶部放置一个两列宽的轮播推荐位。

这些都是很不错的根据自身需要改造瀑布流的实践。

三、样式拓展

1. 站酷

站酷的瀑布流会在中途插入一组视觉上差异较大、与主内容类型相干性也较低的推荐设计师用户，因为站酷瀑布流内容类型较为单一，这么做可以用来调节单一内容类型对浏览造成的视觉压力。

2. 马蜂窝

马蜂窝的瀑布流样式差异化做得相当大，不管是纵向对比(与同页面其他卡片)还是横向对比(与其他 App 瀑布流)，设计都显得非常大胆前卫，所以马蜂窝的卡片样式有比较好的参考性。

3. 其他瀑布流样式

结尾

瀑布流的组件就介绍到这，后续所有有关组件的介绍都会同步更新。

欢迎关注作者的微信公众号：「超人的电话亭」

世界杯专题！8500字全方位深度拆解懂球帝APP

设计大侦探 — 2023-05-28

2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。那你有听过懂球帝这款足球 APP 吗？作为国内用户规模和影响力最大的足球社区，据官方统计，懂球帝在全国足球迷中的渗透率高达 83%，甚至有这样一句口号——十个足球迷，八个用懂球帝。本期设计大侦探，全面拆解体育行业的独角兽懂球帝，看看一款足球类APP是如何设计的！

往期拆解：

一、导读

1. 内容结构

全文 8517 字，分为五个部分，分别是导读、产品画像、内容服务、变现服务和设计总结，你可以通过下面的思维导图对本文内容结构有全面的了解。

2. 适合人群

第一类，UI/交互设计师，可以跳出执行层，去思考懂球帝的产品设计策略，提升产品分析能力；

第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；

第三类，体育产品行业从业者，通过对懂球帝的全面拆解，获取竞品设计参考。

3. 分析模型

我们主要运用三种模型对产品的功能、设计进行拆解，由于没有权威的官方数据，所以我们更多以推导的形式去思考懂球帝为什么这样设计。

第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于分析产品的功能价值。

第二个，上瘾模型。由尼尔·法埃尔提出，通过对上千种习惯类产品的调研，总结出一款产品如果要让用户习惯、上瘾，可以按照触发、行动、多变的酬赏和投入四个步骤去设计，主要用于分析产品的功能价值和推导产品的策略设计。

第三个，社会心理学。主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺，去推导产品设计的用户心理设计，主要用于推导产品的策略设计。

二、产品画像

1. 产品介绍

懂球帝是一款体育类 APP，首个版本发布于 2013 年 12 月 5 日，根据易观千帆 2022 年 8 月的最新数据，懂球帝月活跃用户人数 301.8 万。懂球帝持有中超、德甲、足协杯等赛事直播版权，靠着多年的积累，吸引了众多国内外豪门俱乐部、足球媒体和运动员在懂球帝开通官方懂球号，目前是全国用户规模和影响力最大的足球内容平台和社区。

2. 商业模式

① 客户细分

懂球帝的客户群体主要以足球迷为主，年龄区间在 24-35 岁，男性居多。据官方数据，在足球球迷群体中，懂球帝 APP 的渗透率高达 83%。从这些数据可以看得出来，懂球帝是一个覆盖大众足球用户群体的产品，不仅为用户提供专业的足球资讯、直播、竞彩和游戏等服务，还满足了很多小众用户群体的需求，比如球星卡交易、赛事举办曝光等。

② 价值主张

懂球帝以懂足球，更懂你为价值主张。

③ 渠道通路

懂球帝主要通过网络媒体平台进行拉新引流，比如微信、微博（56.6 万）、抖音（110 万粉丝）、知乎和小红书（3.7 万）等平台，其次还会通过赞助线下足球比赛活动进行宣传，比如懂球帝足球星火公益计划等，还有会直接投入广告进行宣传，比如在世界杯、欧洲杯、欧洲五大联赛投入广告，邀请世界巨星为产品代言等。

④ 客户关系

懂球帝主要通过社区、圈子和粉丝群等方式和用户建立紧密的关系。

⑤ 收入来源

懂球帝的收入来源主要通过会员 VIP、商城、竞彩、游戏和广告等方式实现营收。

⑥ 核心资源

懂球帝在足球领域深耕已有十年，无论是技术、数据、资源、口碑还是球迷用户，都已经有了非常夯实的积累。

⑦ 关键业务

懂球帝的核心业务包含足球资讯、球迷社区、体育彩票、比赛直播、球星卡交易和游戏等。

⑧ 重要合作伙伴

第一类，体育行业的知识创作者，通过签约合作的形式为平台输出高质量的内容，比如专栏和懂彩帝；第二类，体育运动员、解说员及具有一定名气的体育从业者，通过在懂球帝建立懂球号和球迷进行深入的沟通，提高个人知名度和影响力；第三类，体育机构和俱乐部，比如亚足联、欧洲各大联赛豪门俱乐部均在懂球帝开通了懂球号，和中国地区的球迷第一时间进行交流互动，提高球队知名度和影响力。

⑨ 成本结构

作为一个互联网产品公司，懂球帝的成本开销主要是产品运营和开发人力等成本。

3. 用户画像

懂球帝的用户群体主要以男性用户居多，占比 75.55%；从年龄分布看，以 31-35 岁的用户群体最多，占比 39.55%，其次为 24 到 30 岁的用户，占比 33.21%；从用户消费能力看，懂球帝的中等及中高消费者占比 67.11%；从地域分布看，三线城市用户最多，占比 21.62%，新一线城市占比 23.05%，二线城市占比 19.39%，一线城市仅占 12.42%，其中广东省最多，山东和四川省位居前三。

4. 信息结构

懂球帝的一级菜单包含首页、比赛、主队、发现、数据和用户中心。「首页」采用千人千面的信息流方式，根据用户的兴趣、标签和浏览记录推荐新闻，其中包含了头条、精选、快讯、游戏等热门栏目；「比赛」主要为球迷提供最新足球、篮球比赛的体育赛事直播，球迷可在直播间和专家进行互动；「主队」是为球迷设置自己喜欢的球队，当球队开启比赛时，会第一时间通知球迷；「数据」主要为球迷提供各大主流联赛的当季的联赛排名、积分、射手榜和赛程等数据；「用户中心」设计成抽屉导航，聚合了懂球帝整个产品其他功能的入口，比如赛事、公益足球、系统设置等功能。从信息结构看，懂球帝的产品功能并不复杂。

5. 重要迭代记录

根据七麦数据统计，懂球帝 APP 首个版本发布于 2013 年 12 月 5 日，截止到 11 月 20 日，APP 版本已经更新至 V7.8.8 版本，近一年版本更新次数为 17 次。

版本重要迭代记录

2015 年 1 月，发布 V3.0 版本，全新 UI，球员球队资料页改版，新增实时聊天室、订阅等功能；
2016 年 2 月，发布 V4.1.1 版本，Slogan 为「足球迷神器（足球、直播、新闻、足彩、足球论坛社区）」；
2016 年 7 月，发布 V4.6 版本，上线商品搜索功能，方便用户购买装备；
2017 年 1 月，发布 V5.1 版本，圈子功能改版，新增 Twins 功能（球员 twitter 和 ins 动态）
2018 年 4 月，发布 V5.9.9 版本，新增球队数据页，为用户提供丰富的足球数据；
2019 年 1 月，发布 V7.0 版本，全新 UI，提供舒适的阅读体验，新增世界功能；
2020 年 3 月，发布 V7.3.5 版本，上线球队球员人气榜功能，支持用户为喜欢的球队球员打榜；
2020 年 7 月，发布 V7.4.2 版本，Slogan 升级为「不只是一个足球 APP」；
2021 年 9 月，发布 V7.6.6 版本，上线会员连续包月服务；

6. 产品生命周期

根据易观千帆 2022 年 8 月数据，懂球帝月活跃用户人数 301.80 万。官方数据公布目前懂球帝下载量超过 1.5 亿次，注册用户 4000 万，在足球迷群体中，懂球帝用户渗透率超过 82%，是国内最大的足球聚合平台。懂球帝目前在 2016 年就拿到了 C 轮融资，明年即将年满的十周岁的懂球帝，目前处于产品生命周期的成熟期，当下聚焦于商业变现的探索和创新。

7. 竞争图谱

截止到 2022 年 11 月 21 日，懂球帝 APP 在苹果的 APP Store 应用市场，体育分类排名第 11，腾讯体育位居第一，月活跃用户人数 1,205.75 万；在体育彩票分类，懂球帝位居第一，是中国体育彩票月活跃用户人数的 3 倍；在体育资讯分类，虎扑以 555.25 万月活跃用户人数排名第一，懂球帝位居第二。

三、内容服务

「内容服务」是产品实现用户留存的关键方式。作为一个足球媒体，懂球帝不仅覆盖了欧洲五大主流联赛，还包含中超、中甲、电竞等联赛资讯，为球迷提供了丰富的内容。作为一个社区，懂球帝以 UGC 用户生产内容模式，吸引了全国众多足球爱好者和创作者加入了平台，并设计了圈子（球迷可根据自己的喜好加入不同的圈子，比如皇马球迷圈、梅西球迷圈）等栏目，为全国球迷提供了一个创作、交流和娱乐的足球平台。其次懂球帝利用自身强大的技术资源能力，为用户提供每日足球/篮球比赛的直播，满足众多球迷无法观看比赛或需要付费支付观看的痛点。懂球帝还提供了非常强大的数据查询功能，球迷可以在「数据」栏目查询到当季各大联赛最新的赛程、排名和射手榜等信息。

1. 内容频道

作为一个足球媒体社区，懂球帝的内容频道主要分为以下几类。按联赛分，有欧洲五大联赛（英超、西甲、德甲、意甲和法甲）还有中超和中甲联赛；按内容长短分，有「快讯」（提供每天最新的足球资讯）；按内容质量分，有「精选」和「深度」；按兴趣分，有「关注」和「头条」；按传播形式，有「视频」；其次还有电竞和彩经等栏目。从内容频道设计分类看，懂球帝的内容非常夯实，可以满足不同球迷们的需求，但是内容设计的创新度有一定缺失，比较中规中矩。

① 头条

「头条」作为懂球帝的首页，采用千人千面的信息流形式为用户推荐足球资讯。头部的轮播主要以当日或当周热点赛事或活动为主，轮播下方内容为当日热点比赛预告或比分，方便球迷第一时间获取比赛数据。从第一屏开始，平台主要结合用户的个人兴趣、标签和主队（球迷群体一般会选择一个主队，比如廖尔摩斯是阿森纳球迷，就会把阿森纳设置为自己的主队）进行个性化资讯推荐。

新闻详情页

足球社区是一个充满了爱恨交织的大江湖，比如皇马和巴萨、AC 米兰和国际米兰的球迷往往水火不容，所以往往在足球新闻的评论区，会非常闹热，甚至形成独特的球迷文化。从懂球帝的内容详情页可以看出，懂球帝的用户活跃度非常高，一篇头条的新闻评论数有上百条评论，甚至单条评论还支持多人评论、点赞、分享和举报，非常热闹。

用户主页

「用户主页」主要指用户的个人主页，主要包含发表、评论、关注和粉丝四个内容。用户之间可进行相互关注，但不支持发送私信或其他互动方式，无法进行建立更深的关系链接。

② 精选

「精选」主要按资讯的热度来设计，从上至下分为今日赛事、战报、12 小时热门、24 小时热门和今日推荐五个部分。这个栏目的设计有利于让球迷看到过去 24 小时的热门新闻，避免因为个性化推送错过当天重要新闻。

③ 圈子

「圈子」就像贴吧，用户可自行加入喜欢的圈子和其他用户一起交流。懂球帝的圈子非常丰富，有按俱乐部、国家队和球星分类建立的圈子，也有根据用户兴趣爱好建立的圈子。从官方数据看，足球彩票圈子发帖数超过 1000 万，一支欧洲明星球队的圈子发帖数均在 100 万以上，可以看出用户活跃度非常高。圈子的设计，本质就是细分用户，让有共同爱好的球迷相聚在一起，从而建立用户关系，最终提高用户留存率。

2. 懂球号

懂球帝是一个 UGC 内容模式的球迷社区，社区内容主要由用户创作。懂球号分为企业机构和个人自媒体两种类型，企业机构主要针对国内外俱乐部和足球媒体机构，个人自媒体主要针对球员教练以及热爱足球创作的的球迷群体。

懂球号的认证分为两种，第一种是个人认证标识，黄 V，主要针对在业内有一定知名度的记者、球员、KOL 和优秀创作者；第二种是团体认证标识，蓝 V，主要针对各大俱乐部、媒体和有公众影响力的团体。

懂球号作为一个知识创作平台，创作者通过写作获取流量曝光也可以获得收益，以此形成内容创作闭环，为社区提供专业的资讯内容。从官方公布数据看，目前懂球帝已经吸引了众多知名俱乐部开通了懂球号，包括亚足联、欧洲五大联赛众多豪门球队和中国男女足，可谓星光熠熠，具有很大的号召力。

3. 比赛

「比赛」这个栏目，主要为球迷们提供各大足球联赛的比赛预告和直播。从赛事分类看，懂球帝几乎包含了世界足坛所有主流和非主流联赛，从最热门的欧洲五大联赛到巴甲、阿超、墨超这些南美联赛，都有比赛播放源和精准的数据。

① 直播间

直播间分为直播君、球迷直播间和专家直播间。「直播君」就是官方的直播间，由懂球帝官方负责解说。「球迷直播间」就是球迷们一起聊天看球，这就像在 B 站看视频弹幕一样，非常热闹，属于独特的懂球帝看球文化。

「专家直播间」加入了很多足彩内容，首先完全由懂球帝的足彩专家负责解说比赛，其次在比赛中会向球迷推送自己的竞彩方案，用户需要购买专家锦囊或开通红单会员才能观看，对付费用户的激活有很大帮助。

② 数据

赛况

「赛况」就是记录一场比赛的真实数据，包含比赛动态（GIF 动图）、高评分球员、进攻心率图、技术统计和完整事件。

阵容

「阵容」记录了整场比赛运动员的详细数据，包括出场时间、进球数、射门数、跑动距离和比赛评分等。

③ 竞彩

情报

「情报」是付费服务，用户需要开通小红单会员（懂球帝足彩会员服务，售价每月 588 元）以后才能查看。从内容设计看，非常丰富，包含专家方案、欧亚对比、高斯大小球、会员专享情报、得失球时间分布、必发冷热分布和必发大注倾向等内容。这是懂球帝的核心优质内容，通过直播看球的场景，提升用户开通 VIP 的激活率。

分析

「分析」内容包含猜胜负（球迷竞猜数据）、大数据锦囊（付费服务）、近期战绩、未来三场、综合实力（包含近 10 场战绩、场均进球等）、场面控制（控球率等）、双方特征（射门进球效率、射门次数等）、角球、半全场（近 10 场半场进球数平均值）和事件统计（犯规次数和红黄牌）。

专家

「专家」主要指懂球帝彩票板块的足彩专家，这是懂球帝足彩内容的核心创作团队，他们通过对比赛的分析输出精准的投注方案，用户需要购买才能查看。

指数

「指数」是指欧亚各大博彩公司对当场比赛竞彩赔率的数据，这个栏目为用户提供更多全面的投注参考。

4. 数据

数据分为欧洲足球、亚洲足球、美洲足球、非洲足球、全球足球、篮球和电竞 7 大类，几乎覆盖了全球所有足球联赛。

积分主要查看当前联赛的积分排行榜，包含胜平负场次和进失球等数据。

球员榜的数据非常精细，几乎可以查询到一个球员的所有比赛数据，从射手榜、助攻榜、关键传球、射门、越位、传球再到拦截、成功过人、抢断和解围，应有尽有。

球队榜和球员榜也很相似，颗粒度非常细，从进球数、控球率到扑救点球数、领先情况下丢分数据都包含了。

赛程主要提供当前联赛的比赛进程，方便球迷查询。

懂球帝还为球迷提供过往赛季数据查询的功能，甚至可追溯到1986~87赛季的数据。这就像一座足球博物馆，球迷可以查询过往赛季各大联赛、各支球队的详细数据，非常方便。如此专业强大的数据服务，也能提升球迷对产品的满意度，提高用户留存率。

① 球队主页

「球队主页」包含球队当前战绩、动态、赛程、数据、球员、圈子、资料和转会 8 个内容模块。

「动态」就是把球队的新闻资讯汇总，方便球迷可以看到和俱乐部相关的所有新闻。

「赛程」展示球队当前赛季的比赛记录，懂球帝还提供了一个历史赛季查询的功能，最高可追溯到1920赛季，跨度超过100年。

「数据」主要展示当前赛季球队的联赛数据，包括进攻、组织、防守、关键球员等数据，懂球帝统计了近10个赛季的球队数据，非常完善。

「球员」主要展示球队当前的球员信息，包含出场数量、进球数、助攻数以及合同到期时间。

「圈子」关联了球队的球迷圈，用户可以在圈子发帖，和其他球迷一起交流。

「资料」展示了球队的历史资料，数据非常丰富，包括历任主教练、队史纪录（进球、出场记录）、荣誉记录（联赛冠军、杯赛冠军等）。

「转会」就是统计球队的球员转出和转入记录，包含球员转入转出的去向以及转会费，懂球帝统计了近10个赛季的数据转会记录。

② 球员主页

「球员主页」就是展示球员的详细信息，主要包含球员的动态、数据、能力值和资料。

「数据」统计了球员整个职业生涯在联赛、杯赛以及国家队的数据，包括出场时间、进球数、助攻数、射门次数等，非常全面。

「能力值」就是对当前球员的能力评估，包括速度、射门、力量、防守、传球和盘带等；

「资料」统计了当前球员职业生涯中的所有荣誉，包括基础资料、球员身价变化、转会记录、俱乐部生涯以及个人荣誉。

「球星卡」是一个竞拍交易的版块，球迷可以出售和当前球星相关联的等物品。

5. 赛事服务

「赛事服务」面向的用户人群主要是拥有举办体育比赛活动组织能力的机构或球迷团体，但由于赛事规模或资金的缘故，无法获取更高的曝光以及获取专业的技术设备。懂球帝从技术、数据、直播以及流量四个维度为用户提供专业完善的服务，吸引全国各地的体育爱好者加入懂球帝，实现用户拉新（已经单独设计直播君 APP 运营），提高知名度。目前该服务官方显示为免费，满足条件的用户都可以免费申请。

① 赛事详情页

「赛事详情页」包含了赛程、积分榜、球队榜、球员榜和参与球队等内容，有效帮助赛事举办方实现精准的数据化统计，方便球迷查询。

6. 公益足球

「懂球帝公益」在 2016 年开始运营，在 2021 年升级为「懂球帝足球星火公益计划」。这个活动的主要目的是为贫困地区和专项足球小学的学生提供爱心足球，在帮助他们快乐健康成长的同时，也扩大了中国足球的青少年基础。目前 APP 显示已向 916 所学校捐赠足球 14441 个，其次公益版块显示正在全新升级，暂停捐款。

四、变现服务

懂球帝在商业变现的形式设计上，主要通过体育彩票版块切入。通过「彩经」版块，招募了众多足彩 KOL 组成了懂彩帝专家团，以撰写比赛分析向用户销售竞彩情报。用户不仅可以直接购买，也可以开通懂球帝的小红单会员和红单会员，获得专业可靠的竞彩方案。其次，懂球帝还有球星卡、周边商城和游戏三个变现业务。

1. 彩经

「彩经」就是体育彩票，作为体育产品最重要的变现服务之一，懂球帝的彩经版块包含了足球、篮球、电竞和数字彩四种类型。从页面内容结构看，从上至下主要分为热门专家直播、金刚区、专家和足彩情报。

① 懂彩帝

「懂彩帝」就是懂球帝官方的专家团，包含了足球、篮球和电竞的各种竞彩专家。竞彩专家主要通过对赛事的分析，以撰写竞彩情报向用户销售。懂彩帝的专家库非常完善，从欧洲主流联赛到中超、中甲、美职联这些联赛，都有不同的专家针对对应的联赛研究分析。

其次懂彩帝还设计了三个排行榜，非常有趣，不仅可以吸引粉丝关注，还能利用攀比心理，倒逼专家写出更精准的投注方案，分别为命中榜（推荐的方案命中率）、连红榜（连续推荐命中的比赛场次）和回报榜（通过购买专家方案获取的回报排行）。

② 专家主页

「专家主页」主要包含专家资料、命中率数据趋势图和在售方案三块内容。用户可以关注专家，成为他的粉丝，还可以购买真爱卡（虚拟货币）加入专家的粉丝团，成为他的忠实粉丝；其次通过命中率趋势图可以查看专家近期的竞彩命中趋势；「在售方案」就是专家最新的竞彩方案，用户可直接购买查看。

2. 球星卡

「球星卡」作为一种实物珍藏品，近两年在国内市场非常火热，由于其独有的稀缺性和投资属性，所以催生了球星卡的拍卖模式。从懂球帝关于球星卡科普的文章可以看出，一张稀有的球星卡售价可以超过百万美元，在美国每年的球星卡成交额高达上亿美元。

球星卡版块主要包含每日截标卡推荐、牛卡博物馆、圈子、数据库和商品等内容。球星卡采用拍卖的形式进行销售，商家设置竞拍底价以后，在截止时间内出价最高者胜出。

3. 商城

懂球帝的商城主要包含运动休闲、配件和足球周边三大类服务，商城的设计比较简单，除了分类，就是商品信息流，用户可直接加入购物车购买。

4. 游戏中心

游戏是体育产品的最重要的变现方式之一，懂球帝的游戏中心包含了电竞、足球、篮球、休闲挂机和魔幻修仙等游戏，以小程序的形式游戏，非常方便。

5. 付费会员

懂球帝的会员主要分为三种类型，分别是小红单会员、红单会员和 D+会员。

① 小红单会员

小红单会员售价 588 元每月，主要针对足彩的用户，主要权益包含专家方案解锁、专家方案公布、每月神券、冷门提前预警、关键情报推送、高斯大小球模型、必发冷热分布、深度数据分析、欧亚大盘对比、昵称红名、入场广播、红单会员标识和会员免广告 13 种会员权益。

② 红单会员

红单会员售价 1998 元，主要针对足彩用户，和小红单会员特权相比，增加了专家方案折扣（9 折）、免费大数据锦囊（每月 2 次）、会员专属圈子三个服务。

③ D+会员

D+会员属于平台的基础会员，售价 19 元每月，可享受免广告特权、极致画质、尊贵身份和炫彩名牌 4 种特权服务。

五、设计总结

1. 商业层

从懂球帝的商业模式看，懂球帝的盈利模式比较单一。除了传统的线上广告收入，盈利模式主要围绕体育彩票设计，比如懂彩帝专家团以及小红单和红单会员等。而体育彩票这块，由于国家的政策等原因，懂彩帝更像一个知识付费服务，只是向球迷销售投注方案。另外体育彩票服务也容易导致球迷购买了方案去境外网站 Du 球，触及国家的红线区。对于马上年满 10 周岁的懂球帝来说，对商业模式的设计还需要拓展和创新。

2. 内容层

懂球帝这个产品，在内容设计方面，其实比较中规中矩，缺乏创新。作为一个足球媒体，懂球帝欠缺有深度、特色、个性化的内容栏目，虽然依靠 UGC 内容模式可以降低大量人力成本，但在内容深度的缺失就很难让懂球帝拥有核心竞争力。其次在整个产品的功能、内容以及结构的设计上，也看不到太多的亮点。比如周边商城，就只是最简单直接的商品销售，而如果你有看过樊登读书的商城设计，你就会发现同是各自行业的独角兽，懂球帝的产品设计创新力就太弱了。

3. 体验层

体验层包含产品的交互、视觉以及用户在使用产品整个过程中的操作体验。从交互和视觉看，懂球帝的产品设计不够精细，比如像「比赛」版块，无论是内容布局，还是字体大小、颜色，在视觉上给人的感觉比较粗糙。还有彩经版块，金刚区的图标都是模糊的，整个版块的设计显得杂乱又廉价。其次在产品的使用中，广告实在太多，而用户屏蔽广告的方式除了花钱开通 D+会员，只有通过观看其他广告获取免广告卡才能屏蔽，这样的设计，让人略失所望。

4. 运营层

懂球帝在用户运营方面的功能设计得比较浅，整个产品只设计了一个任务中心，内容也比较常规，用户通过签到或者做任务可以领取金币（金币可以兑换成现金提现，5 万金币可以兑换 5 元），其他的功能就再也没有了。相比脉脉和樊登读书这些具有丰富用户福利的产品，懂球帝和站酷很像，其实我也是懂球帝的老用户（注册时间超过 7 年），但迄今为止并没有看到任何官方粉丝交流群，也无法和平台建立任何链接，甚至在球迷圈，即便我关注了同是阿森纳的球迷朋友，也无法建立更深的链接。

参考文献

易观千帆 - 懂球帝/虎扑/腾讯体育 APP 数据分析
七麦网-懂球帝迭代记录
懂球帝官网
2017 年中国互联网体育服务行业研究报告

欢迎关注作者微信公众号：「设计大侦探」

B端设计太复杂？掌握这三步帮你理清设计思路！

百度MEUX — 2023-05-28

写在最前

B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X 轴指水平方向上的轴线，Y 轴指竖直方向上的轴线，以及 Z 轴指在三维空间中垂直于视窗平面的轴线。当设计 B 端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展示得更有逻辑。

本文围绕这三个轴，来看看在 B 端界面的三维空间里，都有哪些设计规律。

更多B端设计干货：

一、X 轴的布局与适应

B 端界面在 PC 视窗下展示，范围更大，如常见的分辨率尺寸有 1280x1024、1440x900、1920x1080 等，且浏览器还支持动态拖拽改变视窗宽度。所以 B 端界面在 X 轴上应该更注重内容的延展和适配，合理利用横向增长的空间。根据这一特点，在这一部分中，我们分业务场景来探讨都有哪些典型布局，并针对每一种布局给出合适的适配方式。

B 端典型的业务场景，可大致分为表格、图表、表单、卡片、文字详情五大类页面。这几类界面在 X 轴上排列的方式为单栏型、双栏型、多栏型。如果有侧导航，则在页面最左侧增加侧导航即可，内容区的布局不受影响。

1. 单栏型

表格、图表，这类需要较大展示空间的场景，一般一个页面只有一栏，不再在横向空间进行切割。当视窗横向拉伸时，也为了预览更多的内容，表格和图表进行横向拉伸，保持撑满视窗的状态。

2. 双栏型

表单、文字详情类的页面，采用双栏结构的概率较大。因为表单页除了表单本身的内容外，往往还有右侧的辅助说明面板，或者是预览面板。文字详情页的右侧也经常出现其它阅读内容的推荐列表。当这两类页面视窗在横向拉伸时，适应的方式通常有两种。

① 主模块宽度拉伸，始终撑满视窗，副模块宽度固定。如果主模块每行内容都比较多，推荐使用这种方式，能更大化地浏览主模块的内容，减少不必要的换行。但缺点是，由于内容本身如表单项、详情文字等在 X 轴上占用的空间不多，他们所在的模块横向拉伸后，会出现很多留白。

② 各模块保持宽度固定并居中展示，不跟随视窗伸缩而变化。如果主模块每行内容不多，又需要频繁的左右对照，推荐使用这种方式。

3. 多栏型

多栏型页面一般用于数据看板、媒体卡片(视频/图片)的展示。因为这类业务场景，卡片数量多，无法简单地将页面进行区块的分割，所以以卡片为单元来填充页面。当视窗横向拉伸时，这里也会出现 2 种适应的方式。

① 数据看板类页面，每个卡片等比拉伸（也可仅横向拉伸），列数不增加，让图表能展示地更清晰。

② 媒体卡类页面，卡片需要设定一个最佳展示的宽度如 w，当视窗拉宽时，卡片等比放大。当页面拉宽到能增加一列宽度为 w 的卡片时，所有卡片宽度都恢复到 w，增加一列。

上述说了这么多适配的规则，当然我们也可以给视窗设定一个统一的适配上限，避免当视窗非常宽时，页面的元素过于左右分离，反而不方便浏览。比如我们可以设置当视窗宽度＞1920px 后，页面元素就不再跟随撑满，达到内容区宽度上限值，居中展示在界面中。

二、Y 轴的空间利用

B 端界面，面对复杂的信息，我们往往会面对两类问题，如何承载大量的信息，如何区分强弱主次。这就涉及到页面 Y 轴的空间利用了。这里我们提供 4 个小办法来解决上面的问题。当出现大量信息时，应该注重 Y 轴空间的扩展，合理搭配翻页、加载等逻辑。当希望对页面元素区分强弱时，可以搭配滚动吸顶、局部折叠等交互，有序展示更多信息。

1. 如何承载大量信息

① 替换型

对于表格类页面，为了方便快速查找所需信息，采用分页器的方式展示更多的数据内容，即把当前页内容做替换。即页面 Y 轴的高度是固定的，仅做内容的变更。

② 向下延展型

对于瀑布流类页面，由于数据量大，且没有快速定位的诉求，使用无限加载的方式，向下加载更多的数据，这种类型的页面 Y 轴可无限延展。

2. 如何区分强弱主次

① 强-滚动吸顶

当页面滚动到某个位置，需要去强调一些导航性质的内容时，我们可以使用滚动吸顶的交互，即当把这个元素（如标题）滚动至当前视窗的顶部时，发生吸顶事件，始终停留在页面中，该元素所引领的模块在其下方滚动浏览。当把这个模块滚动完，吸顶交互失效。这样即能临时性地强调某些内容，还不会影响其它模块在 Y 轴上的展示。

② 弱-局部展开

对于表单类页面，若在某个选项下还存在二级内容，则在初始展示时，优先突出主选项本身，当选中后再展开二级内容。这样即能节省首屏空间，也能顺应使用者的学习、使用心智，在合适的时机展示细节内容。

三、Z 轴的叠加顺序

说完 X 轴、Y 轴的布局设计，我们最后来看看 Z 轴。这里，我们需要把视角从二维平面转为三维空间，比如吸顶的导航，菜单浮层，模态弹窗这些都属于出现在 Z 轴上的元素，他们之间可以进行层层叠加和嵌套，于是会出现叠加冲突的场景，导致发生错误的遮挡现象。所以 Z 轴设计的关键点在于不同元素的叠加排序设计。那么怎样才能有一个贯穿全局的合理排序，让元素们能乖乖排在自己的队列中呢？

此处，我们将页面的所有可能出现的元素按照 Z 轴的特点归类到三大区间里。每个区间内给出相应元素的排序顺序指导，并配合动态计算的逻辑，Z 轴上的元素就能整齐地叠加起来啦。

1. 基础区间

展示类-页面中默认就存在的、不会对其它元素造成遮挡的元素（表单、表格、文字、按钮、图表、图片等）。
固定类-固定在页面某处的元素，滑动页面时会对 a 的元素产生遮挡（如吸顶导航、固定表头/列、锚点、返回顶部按钮等）。
浮层类-由 a 中的元素触发出的、指向该元素的临时浮层元素。会对 a 以及固定元素产生遮挡。临时浮层之间的 z 轴层级遵守触发的时间先后顺序，若临时浮层可以同时存在在界面中，则后触发的层级更高（下拉浮层、气泡）。

2. 模态区间

模态层-由基础区间的元素触发的，覆盖整个视窗的模态元素，当该元素出现后，至于基础区间所有元素层级之上，基础区间的所有功能无法交互。(抽屉、对话框和全屏预览等)
临时浮层-在模态元素上出现的临时浮层，计算高度时，可把 d 层想象成基础区间的 c 层。（下拉浮层、气泡等）
第二层模态层-在 d 出现之后出现的覆盖整个视窗的模态元素。不特指第二层，也可以是第三、或更多。

模态区间内，多个模态层可进行叠加（即上文的 f），叠加时一样需要遵守触发时间的先后顺序，后触发的层级更高出现在更上层。但是我们也应注意，模态层不能叠加太多，会导致当前页面覆盖过多内容，一般最多用到两层模态层就能满足大部分场景了。

3. 顶层区间

全局层-全局的、不被模态元素遮挡的元素。可以常驻在页面中，也可临时出现。
临时层-由 g 触发出的临时浮层
最高层-始终动态高于当前页面所有层的元素（比较典型的是 Toast 组件）。

四、写在最后

到这里，我们就浅谈完关于 B 端界面的 X、Y、Z 轴上的设计特点了，虽然是一些高度抽象的内容，真正按照业务需求执行设计的时候，遇到的界面一定比我们这里谈论的更复杂，但是只要我们清楚底层的空间布局、适应方式、扩展手段和叠加逻辑，再复杂的界面无非就是规则的嵌套，希望这篇文章能带给大家一些小小的启发。

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

学会IP设计的职场人，吸金能力有多强？

土拨鼠 — 2023-05-28

这两天世界杯开幕，让吉祥物拉伊卜频频火出圈，相关的话题不仅在微博收获了百万人气，潮玩手办更是成为市场上的香饽饽，销售十分火爆。

但在潮玩市场上，吸金能力最强的居然不是这类热门 IP，根据社科院 2021 年的报告，最受欢迎的潮玩盲盒 IP 产品，是设计师的原创 IP，支持率高达 80%。

而在另一份权威报告里，提到 2024 年，中国潮玩的市场规模将增至 763 亿元，年增长率高达 29.8%。

强悍的吸金能力，也让无数 IP 设计师收获了人生的第一桶金。

仅是优设张小哈老师的私信里，就收到过不少征询商用授权的单子。对设计师而言，这是一笔躺赚的生意，仅授权就能拿到一笔不菲的收益，如果是整个 IP 转让，价格高达 10W+

潮玩市场的大热，也让无数大厂看到了 IP 的价值，无论是阿里动物园、京东狗还是冬奥会冰墩墩，大家都意识到，一个可爱的 IP 形象是出圈利器，比起广告投放效果好太多了。

越来越多的公司需要掌握 IP 设计技能的视觉设计师，也有专业的 IP 设计师岗位：

我们有很多学员，也通过这门 IP 设计特训营找到了工作：

第一个同学以前从事商务，通过学习这门课，不仅学会 IP 设计，也掌握了职场目前最热门的 C4D 技能。

C4D 作为当下的求职刚需加分技能，有多重要无需赘述。这也是这门课如此受欢迎的原因，不仅帮你学会 IP 设计，同时还掌握了 C4D 和 Zbrush 两门软件。

更有零基础的同学，学完之后参加了 IP 设计比赛，拿下 3 万元的奖金！

现在第三期终于来了！

本期是今年最后一次开课，年后需要求职的设计师，给简历上大分的机会别错过了！

课程原价 1099 元
限时上新特惠价仅需 999 元！直减100元！
之后立刻恢复原价！

移动端扫码报名，网页端右戳报名 👉 https://pro.uisdc.com/detail/p_637c7acfe4b083231ed272e3/8

这门课到底有多受欢迎，好评率有多高，直接看学员的真实反馈。

零基础也能学！

学 IP 最重要的 2 门软件，就是 C4D 和 Zbrush，而零基础的同学最担心的，也是没软件基础。

为了解决大家这个问题，小哈老师特意录制了 25 节 C4D 基础课和 14 节 Zbrush 基础课，两门课加起来价值超 400 元，现在报名免费赠送。

即使完全零基础，只要按老师的节奏来，也可以从零开始做出一个专属自己的 IP 设计。

以下都是零基础学员的真实反馈：

原本特别吃力的自学，报课之后不仅坚持了下来，而且还创作了个人 IP，注意旺旺仔的头像哦：

连 Zbrush 都没听过，学完课也做出了 IP 模型：

所以零基础的同学完全不用担心，毕竟有这么多师兄师姐都过来了，何况课程的安排，本身就是循序渐进的。

课程循序渐进，学习没压力！

这也是新手自学最容易遇到的问题，不知道从哪里学起，不会设置目标，容易卡在最难的地方导致自学失败。

同样来自学员的真实反馈，由于小哈老师是西安交大的建筑系高材生，有着设计师难得的理科思维，整个课程设置循序渐进，非常容易刷，不会弃坑。

整个流程严谨规范，从二维到二维，从头部到衣服，每一步都比上一次难一点，但都是可以挑战成功的，日拱一卒，一个月后收获一个完整的 IP 形象。

而老师的细心程度，可以说更是这门课最独特的价值，给那些担心没人带的同学吃了一颗定心丸。

可能是最细心的老师和最好的学习氛围！

记住每个同学的名字和每次作业的不同，指出优点，帮助优化作品，即使结课了，也经常在群里辅导大家。

学员的反馈还有太多太多，篇幅所限不一而足，详细的大家可以看次条文章，详细记录了往期学员的结课反馈和作品。

性价比超高！

对于这门秒杀价不到 900 元的课，你能收获包括不限于：

39 节软件基础视频课
21 节价值 2000 元的直播课程
42 天的名师全时在线答疑
1800 天五年无限次直播回看

完整的课程内容，请看课程大纲：

课程原价 1099 元
限时上新特惠价仅需 999 元！直减100元！
之后立刻恢复原价！

移动端扫码报名，网页端右戳报名 👉 https://pro.uisdc.com/detail/p_637c7acfe4b083231ed272e3/8

广受好评的小哈老师，不仅是西安交大的高材生，也是知名的跨界设计师和插画师，还著有绘本《创造力的形状》。

老师作品：

Living in Space 系列：

学员作业：

课程原价 1099 元
限时上新特惠价仅需 999 元！直减100元！
之后立刻恢复原价！

移动端扫码报名，网页端右戳报名 👉 https://pro.uisdc.com/detail/p_637c7acfe4b083231ed272e3/8

名声远播却负债千万：带你了解大器晚成的建筑诗人路易斯康

设计史太浓 — 2023-05-28

过去「设计大师启示录」系列里我们曾谈过著名的大器晚成者密斯凡德罗（Mies van der Rohe），本次跟大家谈另一位将板凳几乎坐穿的大器晚成者：路易斯康（Louis Kahn）。

路易斯康作为建筑师，其大众名声不完全因为建筑作品，更多来自 2003 年其私生子拍摄的纪录片《我的建筑师》在 2004 年获得过奥斯卡最佳纪录片奖的提名。

纪录片《我的建筑师》海报

这个影片虽然从建筑话题出发，但有更多关于亲情、爱情与友情的思考。

拍摄过程也像是路易斯康儿子的救赎之旅，建议大家找来看看，如果眼浅，可以好好哭一下。

大家通过影片了解到路易斯康的专业成就与其备受争议的私人生活，还有潦倒的财务状况之间所形成的不和谐时，就有了大众媒体热爱追逐的传播性。

路易斯康

久而久之，他的故事对比同时代其它优秀建筑师流传得更广。

比如他有三个不同伴侣的家庭，彼此地理位置相隔不超过 10 公里，但居然在他离世的葬礼上才知道对方存在。

如果不是精于时间管理，那么就是三个女人彼此之间装糊涂，那就更厉害了。

另外虽然他名满美国，但离世时候竟然处于破产状态，债务高达 40 万美元（约等于如今 1200 万人民币）。

路易斯康在朋友眼中显得神秘

我们不管讲述哪一位大师的人生故事，应该尽量克制太多文学化吹嘘，要以冷静平视的态度讲述，才能让大家客观了解到大师的贡献与局限性。

学会将大师视为平常人，才能真正从其身上学习到有用的东西。

一、俄罗斯的犹太人

路易斯康如果按辈分划分，属于现代主义建筑的第二代人物，跟他同一梯队的还有贝聿铭、埃罗·沙里宁（EeroSaarinen）、丹下健三等人，但路易斯康的年纪比他们要大 10-20 岁。

归纳同一梯队是因为路易斯康实在成名太晚，年过五旬才浮出水面，六十之后才算闯出大名，此为后话，按下不表。

1901 年时候，路易斯康出生于俄罗斯奥舍尔 Osel（如今属于爱沙尼亚）一个贫穷的犹太家庭，原名为伊策莱布·施穆洛夫斯基（Leiser-Itze Schmalowski）。

如今爱沙尼亚的奥舍尔

三岁时候因为玩煤炉，不慎烧伤了脸，此后一生他都带着明显伤疤，看起来像白癜风斑点。

懂事后他曾一度感到深度的自卑，母亲却告诉他这是上帝意旨，长大后他会因此成为一位伟人，母亲的话明显治愈了他。

小时候未受伤前的路易斯康

1906 年时候路易斯康跟随家人移民美国，家庭环境依旧一般，住在费城的廉价公寓里。

小时候路易斯康就很喜欢绘画，可惜家里穷得买不起画笔，但没难到他，他通过烧焦树枝制作木炭棒来进行绘画。

路易斯康小时候的绘画

除了绘画他还善于弹奏钢琴，当然并非进过什么兴趣班，而是曾有一位女士送过他们家一架旧钢琴。

路易斯康凭借自学掌握了演奏，怎么学我就不清楚了，后来还用此技能为当时的无声电影配乐，赚取生活费，可见其聪明程度。

1914 年后他们家顺利获得美国国籍，1920 年路易斯康则考上著名的“宾夕法尼亚大学建筑学院”，师从法国建筑师保罗菲利普（Paul Philippe Cret）。

保罗菲利普

1924 年毕业后的路易斯康做过一段时间绘图员，赚到一些小钱后就像过去谈过的大部分大师一样到欧洲旅行，目的是看不同的历史著名建筑。

在此期间他接触到欧洲正在兴起的现代主义建筑运动，因此对柯布西耶的设计思想非常倾倒，此后我们也会从他的作品中看到柯布西耶（Le Corbusier）那种粗野主义的影子。

柯布西耶的粗野主义风格建筑作品

1929 年回到美国后，路易斯康在老师保罗菲利普的工作室先混着，开始自己操刀设计项目，并且在第二年正式成家，妻子名为爱丝特(Esther)。

路易斯康与其正室

成家后若干年他在妻子鼓励下开始建立独立事业，1935 年正式创业，建立路易斯康设计事务所，时年 34 岁。

开始创业的路易斯康事务所

此后路易斯康的设计事业发展一般，长达 15 年时间里主要设计住宅，并且以现代主义风格为主，很长一段时期都没有形成自身风格，这个过程路易斯康充满煎熬与困惑。

路易斯康早期不知名的住宅设计

如果大家一直有看史太浓的「设计大师启示录」会清楚过去我们谈过一个现象，就是建筑师能成大名普遍都依靠公共建筑项目，所以机会很重要，把握住机会则更重要。

路易斯康一直等到 52 岁才碰上机会。

二、成名之作

路易斯康开始被业内熟知的作品是 1952 年-1954 年建成的“耶鲁大学艺术博物馆”，这个作品他开始逐渐摸到了一种个人风格，就是尝试将古典建筑里的宏伟感移植到现代主义中。

耶鲁大学艺术博物馆

这得益于他 1951 年一场意大利之旅，当时他在罗马看了大量庞大古建筑，被穿越时空的历史厚重感深深打动。

他思考这些建筑永恒的光辉源自什么，那一刻忽然开窍，开始形成以现代手法驾驭古典主义的建筑风格。

意大利之旅中路易斯康的绘画记录

耶鲁大学艺术博物馆属于一次改建工程，其整体是个现代主义的玻璃幕墙外壳，特色之处是路易斯康用米黄色粗糙外墙作为大楼其中一个立面，这样跟另一侧旧楼不至于硬生生切割，形成一种庄严感，符合博物馆气质。

通过一面墙完成了新旧之间的交接

建筑内部除了有大量采用粗野主义风格的混泥土墙或者砖墙之外，就是三角菱形的顶部，三角元素一直是他喜爱的几何型，往后的建筑经常出现。

耶鲁大学艺术博物馆内部

这个艺术博物馆属于路易斯康打开局面的作品，真正让他成大名，开始拥有国际名声的其实是 1960 年到 1965 年期间设计的“里查兹医学研究中心大楼”。

里查兹医学研究中心大楼

此楼属于宾夕法尼亚大学，也就是路易斯康的母校，他成名后受邀回到母校担任建筑学院教授，在此期间设计出这个作品。

如果大家留意，发现路易斯康的建筑都有一种结构上的美，假设将他的建筑拆解，里面会有意想不到，多层次的丰富结构。

里查兹医学研究中心大楼结构

这是种人造物的美，也是格罗皮乌斯及柯布西耶那种“机械美学”，而路易斯康还要在机械美的基础上叠加古典质感，往后他的作品基本都没离开这些要素。

里查兹医学大楼有别于当时比较单一的国际主义，虽然整体很简洁，但不会极端到密斯那种玻璃盒子的程度，所以我们会看到围着大楼竖起来的超大方形“柱子”。

里查兹医学研究中心大楼著名“塔筒”

这些“柱子”其实也是空间，称为“塔筒”，这里头就有了路易斯康著名的“主仆空间”建筑理念。

意思是在一个建筑里，无论大小，应该有主次之分，次要的就是附属性服务空间，这些空间包括楼梯、电梯、出入口通道、通风排气管道等。

在里查兹医学大楼里，这些功能空间就被路易斯康统一集中到“塔筒”里，最后形成特别的外观，正是“功能决定形式”。

据说在此楼工作的很多人并不满意这样的设计，感觉使用不方便，通风不好等。

里查兹医学研究中心大楼内部

这种业界叫好而用户不埋单的设计在历史上也多了去，而且发生在不少大师身上，比如弗兰克赖特的流水别墅(Fallingwater)，因为地形与天气问题会水淹，长期不能住人，维护也超费钱。

赖特的流水别墅

关于赖特的详细介绍：

再比如密斯那个惹上官司的范斯沃斯住宅(Farnsworth House)，以及勒柯布西耶那个被居民拒绝入住的马赛公寓（Unité d'habitation）等。

柯布西耶的马赛公寓

不管如何，里查兹医学大楼让路易斯康声名远播，不同的项目机会开始接纷至沓来，接下来看看路易斯康的巅峰之作。

三、巅峰之作

关于巅峰之作并没有公认答案，但路易斯康似乎知道自己将会不久于人世一般，几乎全部代表作都集中在人生的最后十年，每个项目都可圈可点。

比如萨尔克生物研究院（Salk Institute for Biological Studies）、埃克塞特学院图书馆（Phillips Exeter Academy Library）、金贝尔艺术博物馆（Kimbell Art Museum）等。

萨尔克生物研究院

埃克塞特学院图书馆

金贝尔艺术博物馆

以上每个项目被认为是其巅峰作品其实都有理能依，但如果必须抉择，我希望跟大家聊一聊其在孟加拉设计的国会大厦，原因有两个。

孟加拉国会大厦

其一是感觉路易斯康在这个作品当中完全放开了所有专业领域法则与商业市场的羁绊，其二是这个作品最能代表路易斯康惯于创造“永恒建筑”这样的追求。

孟加拉国会大厦在他离世多年才建好，但基本按照其想法实现，在设计国会大夏的过程中路易斯康三（表示 n 次）易其稿，一次又一次推翻方案，时间长达 12 年，他最后就死于往返孟美两国途中的车站。

孟加拉国会大厦内部

这个项目也属于路易斯康承接过最大的设计建筑工程，其整体包含议会大楼、国会成员宿舍、医院、图书馆、学校、气象站以及热带疾病研究中心所构成，是个超大型综合建筑。

孟加拉国会大厦俯瞰图

孟加拉国会大厦属于很典型的粗野主义，不管外墙还是内部都是清一色的裸色混泥土，在一些墙面拼接位置则贴上白色大理石，起到画龙点睛的装饰效果。

孟加拉国会大厦正面

该项目建筑期间爆发了孟加拉国（原东巴基斯坦）独立战争，很多大型建筑都被炸毁，但已经完成主体的国会大厦却幸免于难，此事江湖上流传两个说法。

其一是巴基斯坦空军经过的时候以为这里已经炸过，这成为建筑界调侃粗野主义风格时候经常会说的段子，其二则是空军以为这是一个宏伟的古典建筑，所以没炸。

远看确实像已经炸过

可见路易斯康的设计无论你懂不懂，都能感受到古典建筑那种恢弘气质，这也是他去世后被理论家反复研究的其中重要原因。

过去我们谈过安藤忠雄的故事，安藤的偶像也是柯布西耶，但如何将柯布西耶风格与时俱进的运用，路易斯康是安藤忠雄的学习对象，安藤的风格里也有康的影子。

前面谈过，路易斯康的建筑常常有结构美，孟加拉国会大厦的建筑模型如果进行动画拆解，大家会被震撼，这些繁复却利落，具有功能性的结构是如何被路易斯康构思出来的呢？。

模型方式还原国会大厦结构

国会大夏内部精彩的结构

这些结构涉及很多采光通风方面的考虑，比方国会大厦外部会看到不少大型几何孔洞，有圆形、矩形、三角形，除了带来设计形式感之外，更多是为了实现功能与照顾人的体验。

国会大厦外墙

这个项目是路易斯康设计语言的综合体现，除了在专业与艺术角度获得大家共鸣，在当地也非常受人民欢迎，这一点让此建筑显得更加伟大。

四、结案陈词

很多朋友在听路易斯康的故事时都好奇为何他会负债那么高？

有一个说法是因为他太过于热爱建筑设计工作，很多同行都将其形容为艺术家，有时候他为了达到自己想要的效果不惜与甲方叫板或者中途搁置项目。

路易斯康第一位情人非常漂亮

由此导致很多项目都出现亏损或者不盈利，长期入不敷出，加上成名实在太晚，久而久之就陷入无法抽离的债务危机。

今天的故事讲到这里，希望大家可以从设计或者人生经营角度获得自己的启发。感谢各位，我们下期再会！

欢迎关注作者的微信公众号「设计史太浓」：

智能座舱中的多屏交互如何设计？我总结了这5条原则！

薛志荣 — 2023-05-28

Hi 大家好，在半年前我和亚辉、Shadow 一起主编的《智能座舱的人因与人机交互设计》（书名待定）的撰写工作已接近尾声，和大家商议后，在此我来提前共享书中的部分初稿，希望能对读者有所帮助，以下进入正文。

更多车载交互类设计干货：

笔者还记得在 2019 年，大家都在讨论未来的座舱只有一个屏幕还是屏幕的数量越来越多，从当前来看后者是大多数车企选择的答案。为什么？为副驾和后排乘客增加屏幕的确有助于提升乘坐体验，不过当前更重要的原因是车辆增加屏幕的成本并不高，但它能给这辆车带来一定的溢价和利润空间，同时能让整个座舱更显科技感与豪华感，所以车企都会选择在自己的中高端车型上设置多个屏幕。那么，未来座舱内是否还会有更多的屏幕？这些屏幕究竟用来做什么？这两个问题成为车企当前思考的问题，以下是笔者的一些看法。

HUD、仪表盘、中控屏、车控屏、副驾屏甚至是方向盘屏都是我们在以往车型中所看到的，常见组合可以参考以下不同屏幕的布局演变方式。在多屏交互上，很多车企都会关注屏幕之间的信息切换，包括仪表盘和中控之间的信息切换，例如几何汽车允许驾驶员通过三指左滑的形式将中控的地图信息切换到仪表盘上；以及中控和副驾屏之间的信息切换，例如小鹏 G9 允许用户无论在主屏或者副屏观看电影时，都可以通过两指滑动分享屏幕。

除了以上常见的屏幕，透明 A 柱和电子后视镜两种新屏幕在未来都有可能成为各个车型的配置选项。透明 A 柱的作用是避免驾驶员在行车过程中视野被 A 柱部分遮挡，而电子后视镜相比传统光学后视镜能做到防水、防雾、防污和夜视能力，同时电子后视镜的屏幕摆放位置在车内，驾驶员需要扭头获取信息的难度明显降低。除此之外，当透明 A 柱及电子后视镜和 ADAS 联动显示增强现实信息，在一定程度上能和 HUD 在空间和方位上互补，为驾驶员带来更丰富的车外环境信息显示。

以上都属于座舱内部的屏幕，而手机、智能手表甚至 AR 眼镜等设备属于用户随身携带的屏幕，车企和手机终端设备厂商都在相互探索不同屏幕之间的交互方式有哪些，例如苹果在 WWDC 2022 上发布的最新一代 Carplay，它允许用户的 iPhone 应用和信息直接显示在汽车多个屏幕上，打破了手机和车辆数据的交互隔阂。

那么智能座舱的多屏交互该如何设计？目前工业界和学术界都没有一个明确的答案。笔者认为智能座舱多屏交互是一个很前沿的领域，指导我们向前探索的最好方法是从其他领域参考和吸取一些可用的原则，并对此进行合适的改造，以下是笔者通过大量的观察和分析总结出来的 5 条设计原则：

一、0-3 步内完成绝大部分的多屏交互和设置

提出这条原则主要有两点的考量。一是从安全、高效的角度出发，我们不希望用户在驾驶过程中还需要多步的操作才能将当前屏幕的信息流转到另外一个屏幕上，目前多个厂商实现的通过多指滑动分享数据也是同一个道理。二是参考了苹果在跨设备交互上的做法，笔者在过往发现苹果绝大部分的跨设备交互都能在 3 步内完成，这也是为什么苹果用户高度依赖苹果生态的原因之一。

要实现该原则，那么用户随身携带的手机、手表和车载系统需要无缝、实时地连接在一起，否则用户使用时需要的连接步骤会远大于 3 步，这时需要手机厂商和车企有更深的配合和联动。在手机和车载系统联动上，笔者以问界 M7 的鸿蒙系统作为参考案例。当用户的手机和车载系统都登录了华为账号，用户上车后无需任何操作两台设备已经互联一起，这时用户可以通过“打开应用列表”-“切换到手机应用列表”两步操作直接在中控大屏上访问手机上的应用，这种高效、直接、无感的交互方式值得每一位从业人员去学习和探索。

二、多屏之间的交互过程需要符合用户的预期

当座舱内屏幕越来越多，用户对于每个屏幕的详细作用需要一定的认知和理解过程，在这过程中用户很有可能按照过往经验以及所处环境对其进行理解，例如使用鸿蒙系统的用户不一定了解苹果的 Carplay 系统。另外，每一块屏幕的分工应该是明确且能根据用户和车辆状态而动态变化的，例如当车辆左后方即将出现危险，应当使用左侧的电子后视镜而不是通过中控来提示驾驶员；在驾驶过程中车载系统应当避免显示无关要紧的信息，尤其是车辆处于高速驾驶或者驾驶员处于高负荷的状态下。

众所周知，国内绝大部分车型的仪表盘属于 QNX 系统，中控的系统有 Android、鸿蒙、Linux 等等，绝大部分用户的手机设备属于 Android、iOS 或者鸿蒙系统，每个系统之间的交互细节和表现都需要人为重新定义好，定义不好极有可能引起用户的突兀或者不解。例如用户上车后，车载系统直接和副驾的手机系统建立了连接，而不是和主驾的手机进行互联；驾驶过程中，中控不断显示手机的消息推送以及在多人场合下直接显示视频通话请求的推送.......这些明显都是不好的预期。那么什么是好的或者不好的用户预期？这部分需要读者多以用户为中心的角度进行思考、设计和测试才能知道。

三、信息的交互需要符合当前屏幕的使用体验

当中控信息显示在仪表盘或者 HUD 时，第一我们应当遵循仪表盘和 HUD 的设计规范，这时响应式设计能起到较大的帮助。第二我们需要关注信息的交互方式，我们不可能让用户通过触控仪表盘的方式对此信息进行交互，也不可能在仪表盘或者 HUD 上显示文本框并让用户通过文本输入法进行输入。每一块屏幕有各自的交互行为，笔者认为这些交互行为可以分为 4 种情况，它们分别是：瞥一眼、轻交互、中等交互和沉浸式交互，每一种交互行为承载的信息量大小以及需要的注意力和时间会依次增加。

以手机的消息推送为例，只需要用户注意一下就能完成的任务都能认为是“瞥一眼”；如果用户需要关闭这条推送可以等待几秒或者将其往上推，而这种只需要 1-2 步操作会定义为“轻交互”。在驾驶过程中，HUD、仪表盘、电子后视镜以及透明 A 柱需要承载的信息应该尽可能符合“瞥一眼”的原则，如果需要交互则允许用户通过方向盘按键、语音等方式一步完成。如果读者想不到合理的设计方法，可以参考智能手表操作系统的设计原则和规范。

“中等交互”更多是指需要若干步骤才能完成的任务，例如用户在手机上回复短信；而“沉浸式交互”可以理解为用户在手机上全神贯注地看视频或者玩游戏。很明显“中等交互”和“沉浸式交互”不应该影响正在手动驾驶的驾驶员，但有些“中等交互”确实需要驾驶员在驾驶过程实施，例如中途切换导航规划。在过往我们会将这些信息和交互全部显示在中控上，其实我们也可以通过仪表盘和方向盘的方式承载和交互信息，这时候方向盘是否有可能出现一个屏幕将成为车厂讨论的问题。笔者认为，从手机和车载系统融合的角度来看，方向盘屏幕在一定程度上比中控屏幕更好地完成“中等交互”，例如驾驶过程中用户可以在方向盘屏幕操纵地图和完成多项设置步骤。

当每块屏幕都有了自己的交互定义，手机信息如何合理显示在多个屏幕上将成为问题。这里有两种方法供读者参考，第一种是赋予每一个屏幕不同的参照，例如仪表盘可以参考智能手表，它只呈现简单的内容或者消息推送，用户需要查看则去中控查看（这时中控相当于智能手机）。第二种是重构每一款服务和应用，让内容可以根据规则动态显示在相应的屏幕上，例如以下表格中微信会结合 OBD 数据、车内人物数量等参数动态调整自己的信息显示和交互策略（这属于笔者遐想的方案），不过这种方法需要手机厂商和车企的深度参与才能实现。无论是哪种方法，我们都应该尽可能让当前信息的交互符合当前屏幕的使用体验以及符合用户的预期。

四、信息的显示策略应当根据场景和用户状态动态调整

智能座舱的每个屏幕都有自己的职责，信息的显示策略应当基于每块屏幕的职责而定制，例如驾驶信息更多呈现在 HUD 和仪表盘上，娱乐信息更多显示在中控屏上，外界环境信息更多显示在 HUD、电子后视镜和透明 A 柱上。但是信息的呈现不应该一成不变，因为在驾驶过程中，所处环境和驾驶水平都会影响驾驶员的认知负荷，结合多重资源理论和耶德定律可知，每个感官通道都有自己的负荷容量，当接收的信息越多，认知负荷越高，越容易引起人的分心甚至紧张。因此信息在哪显示、什么时候显示需要读者重点关注。

显示策略的动态调整也要关注用户的个人设备，因为个人设备也有责任避免用户分心或者认知负荷过载的情况发生。以智能手表为例，智能手表是很好的身体状况监测器，当智能手表检测到驾驶员身体出现异常，这时最好的提示方法是通过仪表盘以及扬声器进行反馈，而不是让用户抬手去看手表上的信息，因为这有可能造成风险。同理，手机信息也应当根据座舱每个屏幕的特性，以及场景和用户状态的变化去动态调整自己的显示策略，具体可参考上述笔者提供的微信案例。

五、隐私的保护在于预防而非补救

每个人都有自己的一点小秘密，当驾驶员的手机信息直接暴露在公共空间中容易造成隐私泄露，因此如何保护隐私在智能座舱中是不可忽略的问题。笔者认为，由 Ann Cavoukian 博士撰写的 Privacy By Design 7 项原则中可被智能座舱重点参考的设计原则是：主动而非被动；预防而非补救。简而言之，隐私设计是关注事前而非事后。

随着人数和双方关系的变化，智能座舱会从个人空间转化为公共空间，将手机中涉及隐私的信息直接映射到中控屏幕或者通过扬声器播放是不合适的。为了避免用户隐私的泄露，笔者有以下设计建议：

个人设备和公用设备互联时需要身份认证校验，校验手段包括人脸识别，声纹识别、设备位置定位等等。
所有涉及隐私的跨设备交互能力需要用户了解和并允许关闭，尤其个人新设备首次进入设备群后。假设在未来同账号下的个人设备都可以直连到座舱的屏幕上，设备首次连接时应该询问用户是否将短信等隐私信息推送到屏幕上，同时也允许用户设置一系列的信息同步选项。
根据车内人数和空间位置合理呈现信息。在智能座舱中副驾和后排乘客较难观察到仪表盘、HUD 上的内容，因此涉及驾驶员的隐私信息可以优先显示在仪表盘、HUD 上。在多人乘坐的场景下，我们需要重点关注声音的播放，因为这容易引起隐私的泄露。上述的微信案例也是考虑到这些细节。

最后，由于智能座舱多屏交互跟场景变化、用户意图、驾驶状态等多个因素有关，而且这项工作在业界和学术界仍处于初期阶段，笔者建议读者多从人因工程和以用户为中心的角度进行思考和设计。这次内容更新到这，下期再见。

欢迎关注作者的微信公众号：「薛志荣」

别出心裁！圣诞节海报主视觉的4种创意设计方式

夏花生 — 2023-05-28

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

不知不觉就到11月底了，大家是不是都开始准备圣诞节的设计物料了？我最近也狂看了一波与圣诞节相关的设计灵感，发现其中出现频率极高的一个元素就是「圣诞树」。虽然很多设计中都选择了这一元素作为主视觉，但呈现方式却各不相同，其中一些设计思路创意十足，令人惊喜。

今天就和大家分享我收集的一些有关圣诞树的创意设计灵感，其呈现方式大体可以分为4类，都是非常经典实用的设计方法，大家了解后就能很快地用到自己设计之中。

1）同构置换

同构是平面设计中最常用的创意技巧之一，即将两种或两种以上元素或造型按照一定规律进行系统化地组合、拼接或者置换，产生新的视觉效果和含义。

同构在平面设计中的应用，图片来源于Pinterest

这种创意技法在有关圣诞节的设计中经常被使用，常常是用另外一种的元素替换掉圣诞树原本的枝叶细节，但是整体造型看起来仍然圣诞树。这种方法尤其适用品牌节日借势海报，将自己的产品特征与圣诞树的造型结合起来，形成全新的视角，给用户带来惊喜。比如用各种餐具或化妆品有规律地排列成圣诞树的形状；或者在一块切好的三角形披萨顶部放一颗星星，看起来也是也像一颗圣诞树。

2）巧用负形

如果说同构置换是在圣诞树的正形上探索创意的多样性，那巧用负形就是在思维上的反其道而行——将树形的内部空间留白，利用边缘及周边区域塑造出圣诞的氛围。这种方法在造型上要比同构置换简单一些，创意效果却依然出众，达到了四两拨千斤的效果。

3）简化抽象

如果你没有高质量的摄影素材，也不会的手绘，那么将圣诞树的形象简化，用抽象的几何立体或者块面进行概括，也能得到不错的效果。这种方式需要设计师掌握一些特效设计技巧，比如利用3D建模设计出效果别致的立体元素，或者用Ai/Ps里的功能营造立体空间感/层次感等。使用这种设计思路，设计整体效果会更加丰富多样，在版式编排中的灵活性也会更高。

4）符号化

放弃对圣诞树真实细节的模拟，大胆使用点、线、面将其“符号化”，依旧能轻松让观者接受到有关圣诞节的信息。这种情况下“圣诞树”代表的概念更广泛，设计效果也偏现代极简。虽然看起来简单，却也非常考验设计师在元素构成和版式设计上的功力。

以上就是今天为大家推荐的4种有关圣诞节海报的创意设计方法，其实这些设计方法除了用在圣诞节上，也可以扩展运用到其他设计主题和设计元素上，关键在于大家有没有真的熟练掌握背后的设计思路。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 ~ 如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家解答~

从国货国风到国潮，2023 为何是国潮设计当打之年？

陈子木 — 2023-05-28

聊过太多国际范围内的视觉流行趋势，其中或多或少会缺少一些区域性的设计趋势，比如《黑豹》带起来的非洲未来主义设计风格，更多是在非裔设计师人群当中流行，在主流的设计趋势报告当中相对更少被提及。

同样的，我们如今已然熟知的「国潮」类的视觉设计和产品设计，会在国际设计大奖当中偶尔瞥见，但是作为一种区域性的文化 + 设计的融合产物，它也很少在国际范围内的趋势报告中出现。

但是不可忽视的是，在中国这个「区域市场」上，国潮已经在过去数十年的发展中，历经了几轮迭代，如今已经成为一种延伸到诸多产品品类的成熟设计风尚。

传统文化和现代生活的结合，生成了一个奇异的分野，这就是国潮。国潮是一个巧妙的双关，是对传统的现代化改造，也是对潮流的传统化解读。

52toys 超活化系列

在谈国潮现状之前，先简单回顾一下属于国潮的前10年。

十年进化，国货 → 国风 → 国潮

十年前，对于「新国货」的提法就已经开始多起来了，强调中国品牌、中国制造、中国创造的国货和快速崛起的移动互联网交织在一起，欣欣向荣。

与此同时，在文化领域内，年轻人对于国风的青睐，围绕着汉服、动漫、广播剧、Cosplay 等内容核心，随着贴吧、B站、QQ群等渠道构建各自的亚文化群体，而各种文创和周边也开始规模化地铺开普及。

经过接近 5 年的酝酿和发酵，国风渗入国货，亚文化破圈，潮流文化、传统文化、现代生活、怀旧精神，开始汇聚于「国潮」。

2018 年李宁以「悟道」为主题，在纽约时装周推出系列服饰，带有强烈 90 年代怀旧元素，又融合了当下街头潮流的设计，不仅为世界呈现了东方美学，更是彻底勾起了国人的情怀，并且为同时代正在「老去」的品牌，指明走向第二春的新路线。更重要的是，国潮的风尚，水到渠成。

国潮正当红。

老字号的新设计，很多旧有品牌是享受到了国潮第一波红利。裹挟着旧时代的情怀，用旧元素搭配新包装二次改造，顺理成章地抓住。

但是紧随其后，市场和用户对于国潮提出了更高的要求，而想要保持增长的品牌和系列产品，则开始加入系统化的品牌运营，联名设计出现的比例更高，科技企业也开始在这个新风尚之下，开拓属于自己的产品线。

《上新了，故宫》

国潮始于亚文化，而随着市场和产品的繁荣发展，又开始反哺主流文化。《中国诗词大会》《上新了，故宫》让诗词、文物以全新的姿态重新进入大众娱乐，而《中国制造的店》这类综艺，则很好地让明星加入进来，扩大了国潮的话题属性。

其中出圈频次最高的是河南卫视的节目和视频内容，《端午奇妙游》《重阳奇妙游》、《洛神水赋》、《龙门金刚》这些作品将高高在上的「传统艺术」以更贴近当代观众的形式呈现出来，以水下拍摄赋予传统舞蹈飘逸，用摇滚来反衬老年人的生机，另辟蹊径妙趣横生，自此也有网友戏称河南卫视「下凡辛苦了」。

如你所见，国潮既是成就产品拓宽市场的秘诀，同时在各个方面也有着超越以往的更高要求。

让数据持续走高的国潮设计

实际的数据最优说服力。

根据百度的统计，从 2011 年到 2021 年的 10年时间里，通过搜索引擎搜索「国潮」的数量翻了 5 倍多，这在很大程度上反映了国潮在普遍认知度上的根本改变：

而来自百度的同一份报告还统计了从 2021 年到 2022 年间国潮相关内容的关注者主体为 90 后和 00 后，两者占据了总体的四分之三：

相应的，从2016 年到 2021 年这 5 年间，用户对于国货的关注度的分布比例，也发生了根本性的逆转：

而作为国内潮玩和潮流商品分享和销售平台的得物，在今年发布的《国潮品牌年轻消费者洞察报告》当中，则给出了一些更加深入的数据参考。

根据得物 APP 2020 年的运营数据，平台发售的国潮新品数量增长了 8 倍，年轻用户对于国潮商品的消费热度增长了 10 倍：

在得物的总体统计数据当中，00 后和 90 后作为绝对主力，贡献了 74% 国潮消费，而在单得物 APP 当中，这两个群体贡献的销售额直接飙升到 84%，这和平台本身的用户群体有关系，但是总体上和百度的统计数据是对的上的。

而国潮产品本身的消费者分布，也从侧面印证了「得年轻人得天下的说法」。

国潮的 5 个核心需求点

根据新华睿思的调研，作为潮流商品的主要消费者的年轻用户，对产品的品质、外观、科技、情感和文化 5 个方面都有着新的需求，而正是这 5 个切入点让国潮有了全面而系统的拓展空间。而正是基于这样的需求，使得如今的国潮设计从构想到落地的整个模式，发生了根本性的改变。

这种转变在于，早期自上而下的国潮产品研发，在如今人群垂直需求多样化的情形下，演变成为品牌和用户协同共创的模式，品牌不仅要在传统文化、工艺的基础上探索，而且还需要和乐于表达、热衷讨论的年轻人沟通，听取社区的建议和想法之后，再选择合理的落地方案，而唯有这样，才有可能在品质和科技达标的前提下，再在外观、情感和文化上去贴合国潮用户，在 SKU 上满足市场和用户的需求。

对于「国潮」属性的要求

正是基于年轻用户对于国潮产品的 5 个需求点，可以从侧面推断出，他们对于当下国潮产品的特征属性要求，不会低。

艾瑞咨询在今年 2 月出具的《艾瑞观潮》的国潮调研报告当中，可以清晰的地看到年轻用户对于当前国潮产品的认知里，中国风的设计是必须的，潮流设计和审美属性也是必须的，对于原创同样有着极高的要求：

这种要求，可以说是将过去简单加入中国风元素的做法给淘汰掉了。这一点在在朴睿铂尔的《2021 奢侈品营销启示录》的调研结果当中，同样有体现：

「接近一半的受访者认为国潮是一种趋势，且期待国内品牌会越来越好；同时，有3成受访者认为，国潮不应该只是简单的“中国风”或“中华传统元素”，而是创造代表中国文化的本土潮流品牌。另有 16%的受访者认为，目前部分国潮品牌缺少自己独特的设计，仍在模仿大牌。」

国潮产品的品类和元素

时至今日，说是「万物皆可国潮」已经不为过，但是用户主要关注的国潮产品品类还是分个三六九等的。

根据《艾瑞观潮》的数据调研，目前排名前十的产品品类基本都是功能性较强的品类，潮流服饰、鞋、包、数码、潮玩、游戏、美妆，这几个用户日常关注度较高的品类在诸多产品品类中脱颖而出本身不奇怪，其中服装、鞋、数码、美妆、潮玩等本身在功能性之外，本身就已经发展出各自的亚文化和二级市场，国潮附加其上也顺理成章。

调研指出，男性关注度较高的品类是潮玩、家具、游戏，而女性关注度较高的则是美妆、服饰、文具等品类，而按照年龄细分的话，30 岁以内用户对于游戏、电影、音乐的关注度是高于总体的。

而附加在产品上的典型中国风元素同样非常重要。典型的传统工艺、经典角色、标志性的传统建筑、地域性的文化，都可以经过合理的改造，被国潮化。

而这还涉及到很多调研报告中相对较少涉及到的一个品类，国潮旅游。很多涉及传统文化的景点、博物馆和国潮有着天然的连接点，相应的文创产品也特别容易出圈。根据马蜂窝出品的《2021 年旅游新国潮大数据报告》，国潮旅游的主力军依然和之前报告的人群特征高度贴合：

也不止是博物馆，商业综合体甚至很多城市也都可以经过国潮化的创作，以契合自身的方式来呈现独特的文化风貌。

大唐不夜城插画作者吴尧

「活的」国潮，「厚的」国潮

河南卫视的「下凡」其实做了一个相当成功的演示。国潮理应告别拼贴，它应该是「活的」，而且还得「厚实」。

52Toys 超活化系列

「活的」有很多种解释方式，接地气，有趣味，有态度，卖萌的等等，传统文化艺术在很多时候呈现出来的「高雅」和「古典」，在很大程度上把这些文化要素、视觉内容高高地「端」了上去，但是和潮流设计中的解构技巧，巧妙的情绪输出，则将这些预期之内的「高雅」冲调成一杯口味独特的鸡尾酒，口感更为丰富，情绪和可供探索的层次更多，这种「冲突感」和「反差萌」是很多国潮文创产品调和古今的绝招。

让国潮产品不会成为缝合怪的另外一个要点，是要让它「厚」起来。花费时间和精力去琢磨传统文化背后的厚实的底蕴，在理应尊重历史和时间的地方认真打磨，在现代的生活里反刍生活和情绪本身，慎重地选择两者的结合点，用心打磨过后的创意是可以被感知到的。

武当山上流传几百年的图案和纹理是实打实的文化传承，在数字化的技术再现之后做二次创作，用潮流化的形式感来呈现，摩登和古雅的调和后又有了新的生命力，你看得出来设计者的用心。

对于设计师而言，国潮是一个大命题，是一个需要投入时间也能得到持续回馈的方向。而这门优设联合知名国潮插画师吴尧出品的课程，仅需一顿小烧烤的价钱，就能得到长达33小时的高浓缩干货！

课程原价 169 元，新课特惠价仅需 119 元！

活动结束立刻恢复原价！

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

设计师如何做好设计推案？我总结了这4个方面！

番茄 — 2023-05-28

在工作环境里，相较其他职业，设计师是一个很容易接收到他人挑战的职业。不管是产品、开发、还是同职能部门的同事，都会对设计案提出想法、建议，盲目听从容易打乱自己的工作节奏，还容易影响事务进度。

因此，好的设计推案的方式就显得尤为重要。

对同职能部门，能够提升设计案的“价值”，减少设计案被打回修改，提升成功过稿的概率；而对业务合作部门，能够减少沟通所需的工作时耗，提升个人在外的品牌度。

不同的推案对象，对方的关注点不同，需要制定不同的方针。本文将结合作者平时工作中遇到的情况，进行推案策略收敛，希望对大家有所帮助～

1. 对直接上级

直接上级作为一个审核者和有经验的设计者，通常会更关注设计是否合理。同时，在双方合作的不同阶段，根据对你的信赖度，会有不同的审核机制。

① 在合作初期

此时需要建立直接上级对你的信任，注重 2 个核心点的传达

「设计思路的闭环」说明你的设计方法论是健全的、应用是正确的。

这里借用 About Face3.0 里对如何连接实现模型和心理模型的图，设计的过程应该是在思考中不断优化、不断迭代，使设计方案更贴近用户的过程。而我们在传达过程中，则是要把这个过程阐述清楚，让设计言之有理、言之有物。

需要体现需求分析、目标用户、应用场景、竞品佐证到设计方案推导的完整流程。

有个加分项，每个阶段的事务都有明确的目的，而不是因为流程如此而做，比如将需求分析后的疑问点带入到竞品分析的目的中，这样你的设计思路会显得更闭环一些。

「设计方案是正确的」说明你的设计方向有依据，是正确的。

竞品分析的目的不是直接把竞品的设计直接复制、粘贴到自己的设计案中，在推案中最好呈现基于竞品基础上自己的思考。比如在做产品框架设计时，可以基于竞品的框架做一波收敛，说明优缺点，结合产品现状说明自己最后选用的设计框架。

这里注重借助竞品去佐证你的想法，说明自己的设计策略，有依据的阐述自己的设计思路即可。

记住不去做太“特别”、没有先例的设计。

② 在合作后期

在你比较被信任度情况下，一般上级是不会花那么多时间去审核你的案子。注重“有重点的推案”。此时主要告诉对方，你的设计核心点，和部分有疑问的部分你的设计思考和结果即可。

2. 对往上的管理层

管理层作为一个偏战略部署的角色，他们更看重你做的设计如何有价值，而且每一次的推案都是他们在暗暗对你“评估”的过程。

对他们的推案，核心 2 个点，1 价值、2 炫技。

① 价值阐述

“如何在设计本身只是一个小功能设计案的时候讲出自己的价值？”、“明明只是设计案，硬要挂钩价值好难。” 这是一般的设计师都会遇到的问题。

价值要从项目出发，多看看项目官网里项目的核心定位（卖点），去了解这个产品的“生存机制”，从产品痛点为基石去讲。

比如，微信的拍摄表情模块的交互设计，虽然在整体应用内，只是一个小模块，但是对核心业务场景“聊天”来说是亮点功能，通过拍摄表情，让用户在聊天中，能够更多的跟好友 Show 出自己，通过表情包的传递，提高用户聊天过程体验，让用户和好友感觉更亲近，从而提升用户整体活跃，为产品日活贡献价值。

而基于价值推导，可以发现拍摄表情的核心是“秀出自己”、“传播效益”，对应到设计中，就应该把用户自拍作为默认选项，并降低操作成本，提高拍摄成功率；而为了更好的传播，就应该设置一些易于传播的模板，提高整体功能的复用率。

所以，在价值阐述方面，要注意去体现你设计过程中围绕项目本身核心价值的思考，而不止是完成功能设计。

② 炫技

对管理层，除了说明你的思考的高度，也要体现你做事的深度。常常去使用一些创新的方式方法，去佐证你的观点也是一个不错的方法。

比如，在面向海外的产品设计时，在用户画像层面，用心理学模型“马斯洛需求层次模型”做侧面抽象，得到设计关键词。

创新的方式方法会让你的设计案加分不少。

3. 对产品

产品方是把控产品整体策略和方向的角色，他们考虑的更多的是产品的商业化目标、KPI，对他们推案，需要用他们的思考模式说话，并融入自己的角色发声。在给到需求时，有些产品方会直接定义设计策略，干预到设计。

那么在推案上，就需要结合对方的需求，理解是为了达到什么目标而做，而不只是否定对方的设计。成熟产品的目标更集中在商业上，而初期产品则更集中在用户活跃和留存上。在理解了目标后，围绕对方的目标做推案，更能说服他们。

此外，可以尝试树立专业的形象，告诉对方，我是专业的。多用设计模型、心理学模型等设计思考的方法论，告诉对方，这么做是对的。树立出一个专业的设计形象，也能让你后续的合作流程更顺畅。

4. 对开发/美术-职能合作部门

合作职能部门，特别是开发、美术，推案更偏向于设计澄清会（评审会）的场景。说清楚你的设计案具体要做什么、分哪几个大模块，以及需要落地的细节点即可。

当然，程序员们并不是一个听你说要做 A 方案，就一定会做的群体，需要一定的推拉才能完成。在澄清会上，常见的开发话术有：“这个看起来没必要做吧”、“这个是不是体验不好？”、“这个开发代价太高了，是不是有别的方案”

① “这个看起来没必要做吧”——跟他上价值

功能点价值（从项目价值出发）
设计点价值（从项目价值、以及用户体验出发）

② “这个是不是体验不好？”——跟他上专业形象

③ “这个开发代价太高了，是不是有别的方案”——确认技术难度点，沟通排期

在有一定经验后，如果能前置考虑到这点，并带着 B 方案沟通，效率也会更高。

5. 小结

除了上述针对不同对象的推案策略外，大家在推案中也多使用金字塔法则，“总分总”的思路，能让听的人一开始有个思路，也能让推案更顺利一些。

这些是我在工作中沉淀下来的一些小方法，分享给大家～也欢迎大家在评论区提出自己的想法哦，大家一起讨论～

5000字干货！全方位解析搜索历史设计

Andrew — 2023-05-28

之前给团队招人面试，发现很多设计师朋友在回答「这里为什么这么设计」时，基本都从好看、美观的角度来解释。

这个维度是很重要，但这种主观的决策依据，不仅和用户、业务诉求断层，也很难让我们的设计站稳脚跟，让对方信服。所以，每一处细节背后的设计思路就变得尤为重要。

我们在做日常需求时，也可以通过不断的自问「为什么」来寻找支撑。比如我之前做的「搜索历史」的需求，看似一个非常简单的功能，但当我自问这么设计的支撑依据时，却很难说出口。

所以，我花了些时间挖掘它背后的逻辑，并将思考过程和成果沉淀成文，希望这些内容能给你带来帮助和启发~

一、关于搜索历史

尼尔森前辈在他的十大可用性原则中明确建议，在设计中需要将用户以往的历史行为呈现给用户，以此来减少用户的记忆负担。

搜索历史功能就是一个典型，它和播放器的历史跳转功能、转账的历史账户功能一样，本质都是为了减少用户的记忆成本而存在。

但搜索历史该如何设计布局呢？

二、搜索历史的三类布局

我搜集了各行业 21 个竞品，发现搜索历史的布局大概可以归纳为以下三类

1. 自适应布局

简单说，就是容器的宽度跟随内容的变化而变化，而 padding（块内间距）保持固定。

所有竞品当中，以下这三类产品的搜索历史，全部使用了自适应布局（考虑到篇幅原因只放部分截图）

① 电商类

淘宝、考拉、京东、闲鱼、天猫、pdd，这些产品的搜索历史普遍使用了自适应布局。

② 生活服务类

美团、饿了么这类生活服务类平台，全部是自适应。

③ 内容类

包含各种短视频类、资讯类、音频类的内容产品。比如网易新闻、腾讯新闻、喜马拉雅、简书、荔枝、小红书。它们的历史记录也全部是自适应。

优点

大幅节省空间提升屏效，同等面积可容纳更多的记录；
全圆角胶囊形式增强了点击感；（关于圆角对点击行为引导的理论依据，可参考以下这篇按钮文章
胶囊聚合的形式让信息层级更明确和聚焦

缺点

面积不一致下的布局，在垂直方向无对齐关系，迫使动线水平迁移，查找和区分效率低；
面积不一致，直接导致了点击体验的不一致；
历史词数量较多时，无序混乱感较强

2. 双列布局

使用这种布局的竞品不多，头条、百度、知乎和西瓜，都使用了双列布局。

优点

一家人就得整整齐齐嘛，相比自适应，双列布局视觉秩序感高，在数量较多时也不会产生混乱感；
明确的对齐关系，引导动线垂直扫视，查找和区分效率高；
每个搜索词占据近半屏的空间，面积足够，点击体验爽歪歪；
所有搜索词点击体验一致

缺点

搜索词限定了固定宽度，空间利用率较低、屏效较低，这一问题在搜索词字符宽度很少时尤为明显；
因为容器的缺失，信息聚焦性和层次明确性不如胶囊

3. 单列布局

与我们浏览器产品对标的行业内竞品中，并未出现过单列布局。

但有意思的是，这种布局存在于一些典型的社交型应用中，比如前年 9 月份全量上线搜一搜功能的微信、再比如 qq 和微博，都是单列。另外，抖音的搜索历史也是单列布局。

优点

搜索词列表式排开，秩序感高，较多数量时无混乱感；
每个搜索词占据全屏宽度，面积宽阔，点击体验那是相当得爽；
所有搜索词点击体验一致化；
空间足够，删除的操作可直接外显前置，减少删除操作成本

缺点

限定了全屏固定宽度，空间利用率贼低，屏效贼低；
信息聚焦性和层次明确性不如胶囊

到这里，可能你跟我有一样的困惑。一个简单的搜索历史，为什么不同的产品使用了不同的布局？布局和产品本身有哪些关系？到底什么情况下适合自适应？什么情况适合双列？什么情况适合单列？

别忽略它们，把所有困惑列下来，然后尝试各种办法去思考，去解决。多问为什么，是培养设计师洞察力的绝佳手段。

首先，任何表现层的设计手段归根结底都可源自两类诉求：业务诉求和用户诉求。搜索历史偏向用户侧的体验，这里我选择从用户进行切入，也许可以发现一些东西。

三、关于用户分层

体验设计中有个概念叫用户分层，即便是同一个页面，我们也需要去细分不同的场景对用户做分层，为不同的用户做设计。

比如很多产品的首页，之所以普遍是“搜索+品类+推荐”结构，也是基于用户分层的设计。

用户来到首页后，可以大致分为浏览型和目的型两类。前者没有明确目标，随便逛逛，因此产品可以通过算法进行模块化精准推荐；后者有明确的目的，知道自己想要什么，因此产品可以通过提供搜索和品类入口，帮助这类用户定点查找。

而目的型用户在进行了搜索这个行为后，便生成了搜索历史。因此，我们可以通过挖掘用户搜索行为背后的目的，来分析为什么使用不同的布局。

四、搜索行为背后的目的

我发现用户进行搜索时的目的，大概可以细分为以下三大类：购买决策型、内容消费型和答疑解惑型。

1. 购买决策

这类动机的用户基于自身对某类物品、服务进行购买的动机，产生了搜索的行为。

比如我想去点个外卖、买个衣服。这里的第一步，就是去搜索，筛选出符合我预期的内容。

① 搜索内容

通常是某类具象的名词，比如粥、火锅、串串香、球鞋等，或者店铺名。

② 对应产品

所有的电商类、生活服务类的应用，如淘宝、京东、美团、饿了么等等。

③ 布局分析

我发现这类产品基本全使用了自适应布局，为什么呢？

购买决策型的搜索内容基本对应了具象名词，通常字符数较少。所以采用自适应能够保证极高的空间利用率。如果采用双列或者单列的布局，会存在明显的空间浪费、降低屏效、影响其他内容的曝光。

购买决策型的用户，场景上偏高愉悦场景。高愉悦场景下，我们更倾向于“浪费”时间。

比如我们在点外卖、刷淘宝，猎物酬赏往往会让我们沉浸其中不可自拔，忘记时间的存在，等意识过来时，发现已经过去大半个小时。（这里的猎物酬赏即我们在搜寻过程中接触到的源源不断的有价值的信息，关于上瘾模型可以看这篇文章：

映射到现实生活中，就好像我们平日里去琳琅满目的商场、超市购物，有充足的时间慢慢得精挑细选、货比三家。

所以，购买决策型的搜索场景不会追求高效，用户对历史词快速查找和使用的诉求相对较低。即便自适应布局降低了效率，负面影响偏低。

2. 答疑解惑

这一类内容基于用户对某类问题的解决诉求。

① 搜索内容

通常以 5w1h 的句式呈现，比如「南京公积金怎么提取」、「凡尔赛是什么意思」、「为什么会失眠」等等。

② 对应产品

浏览器产品、知乎

③ 布局分析

这类产品为什么基本都使用了双列布局？

搜索词通常遵循 5w1h 类型，字符往往较长（包含搜索联想词）
答疑解惑型的搜索内容，通常对应着用户背后遭遇的问题，没有人希望自己的生活被问题填充和缠绕，所以绝大多数的问题，背后都裹挟了「我想尽快解决！」的诉求。

因为从场景愉悦度上来看，这类场景对应着低或中愉悦场景。此时，用户对时间的敏感度高，倾向于追求高效、节约时间。（当我们去尝试解决一个现有痛点、难题、困惑时，本能得渴望减少耗时）

并且，如果问题一直无法得到解决，较易出现急切，沮丧，挫败等负面情绪，所以，我们会经常基于之前输入的历史词进行反复的修正和尝试，直至耐心消失殆尽。

而双列这种稳如老狗的布局，以垂直动线加速用户对历史词的的查找使用（数量较多时也不会出现混乱感），足够高效。而且，足够的空间也符合较长的字符宽度。因此双列布局是答疑解惑型搜索的不二之选。

绝大多数的浏览器产品，都采用了双列这一布局。因为浏览器给用户解决问题的属性已经深入心智，根据搜集的一些用研资料，答疑解惑型搜索在浏览器中也占据了最高的比例。知乎虽是内容型产品，但主要功能也给用户是答疑解惑，因此也采用了双列的布局。

看到这里，你可能会问，单列也满足条件啊，为什么很少看到单列的？没错，单列布局虽然也能符合这些要求，但是，它最大的缺陷就是：太特么占空间了。

同等面积下，双列能显示 12 个历史词，单列只能显示一半。最关键的是，产品还需要通过加塞实时热搜、搜索热榜这些玩意儿盈利。所以，商业价值的驱使下，单列布局的场景基本很少。

3. 内容消费

这一类型的动机基于对某类内容的消费动机。

① 搜索内容

通常是某类抽象名词，比如某某话题、某某事件、某某资源等等，它们通常对应着内容创作者。

比如「王思聪土味情话」、「建党一百周年」、「苏州酒店坍塌事故」等等。

② 对应产品

主要为内容、社交型产品，比如各类新闻资讯、短视频类产品、简书、喜马拉雅、微博、微信（搜一搜）等等。

③ 布局分析

这类产品的布局基本会有两类，一类是自适应，另一类是单列。

内容消费和购买决策本质上都属于“消费”范畴，只不过前者是内容、后者是需要付费的实物。它和购买决策一样，都属于高愉悦场景，而且由于内容的即时性和形式的多变性，引起的愉悦感往往要更加强烈。所以，自适应同样是合理的布局。

但是单列布局呢？

前面有说过，单列布局的体验比肩甚至优于双列，但最明显的缺憾就是太占空间，而空间向来是业务的必争之地。因此，单列布局的使用场景和具体业务相关。

比如业务需要确保其他搜索模块（如热搜、个性化搜索推送等）的曝光，那么是否可以允许这些搜索模块前置，让搜索历史作为一个单独页面，触发搜索框的聚焦后，和软键盘同步唤起。比如微信和 qq。

再比如是否允许减少历史词露出数，来达到搜索模块和历史词共处一页的目的，减少跳转，比如微博和抖音。

五、使用场景总结

1. 自适应布局

适用于购买决策型、或者内容消费型的搜索场景，此类场景下搜索词较短，且用户对历史词快速查找和使用的诉求相对较低。常见于电商、生活服务类产品。

2. 双列布局

双列布局，适用于答疑解惑型的搜索场景，此类场景下搜索词较长，且用户对历史词快速查找和使用的诉求较高。常见于浏览器产品，或者知识问答类产品。

3. 单列布局

单列布局，适用于内容消费型的搜索场景，此类场景下搜索词较长，因占据较多空间，需要视具体业务情况使用。

最后

以上，就是「搜索历史」在不同使用场景下的研究。

其实，不论是多小的细节，我们设计师都可以基于用户和产品两类角度，通过不断得自问「为什么？」，来挖掘背后的逻辑，以让我们的设计有理有据。不但帮助我们更顺利得过稿，也可以提升我们的洞察力和专业水准~

希望这篇干货对你有所帮助。

欢迎关注作者微信公众号：「Andrew的设计笔记」

从10个维度，分析Instagram值得学习的视觉和体验细节

黄小伟 — 2023-05-28

今天从 10 个维度，聊聊 Instagram 这款软件整体的设计与体验那些值得学习的地方。

更多关于 Instagram 的干货：

一、Logo 的变化

下图是关于 Instagram 的从 2010-2022 整个图标变化的过程，从中能发现：

图标从拟物的风格慢慢变成扁平的风格。
从具象的相机变成更加简约线形的相机图标。
颜色越来越艳丽、明亮，给人年轻、炫彩、简约的设计感受。
从 logo 的变化中能看出页面将从拟物的时代跨进了扁平时代，也能折射 Instagram 界面必将是往极简、炫彩的方向走。

二、图标设计

我重新临摹 Instagram 启动图标，发现里面有许多的设计小知识点值得学习。

例如：图标背景颜色有黄色、红色、紫红色、紫色，相邻的两个颜色互为邻近色，使得绘制出的背景自然而炫彩，非常不错的设计，渐变的融入也很自然。

当我们自己做渐变的图标背景时可以用两两相邻的颜色，让渐变融入的更自然。

三、颜色的规律

明显的发现 Instagram 颜色跟色谱的规律一致，颜色从左到右色相的变化值在 50 度左右，4 种颜色都是用的高饱和度、高明度的色彩，非常艳丽、明亮，利用渐变附在英文上做出英文版的 logo。

iPhone 14 的字体渐变也是用的这种方法，利用两两邻近的颜色来做渐变。连苹果、Instagram 都在用，赶紧学起来吧，你也可以的～～

四、圆角的设计

通过自己仔细的观察发现 Instagram 摄像头图标圆角是带有平滑过度的圆角，和普通的圆角不一样。
平滑圆角给用户的感受会更舒适、平滑、有活力，而普通的圆角显得更加生硬、不自然。
苹果的主题图标都是带有平滑过度的圆角而不是一个普通圆角，使得图标显得更加自然。
可以去看看之前原研哉帮小米设计的 logo，会发现他们的 logo 给人干净会更加有活力、生命力，而不是使用这种普通圆角，而是一种平滑过度的圆角～

关于苹果圆角的详细介绍：

五、主界面的分析

从 Instagram 的启动页面看出，Instagram 追求的是简约、突出品牌色的方向。
主界面主要以用户发的图片为主而不是文字，往往图片比文字更容易产生阅读与反馈。
整体的界面简约、素白，图标都是统一用黑色线条的描边。
当自己关注的用户，发了一些视频，头像上附带 Instagram 的品牌色的圆形，在白色的界面用品牌色进行了点缀，让单调的界面更具有识别性。

六、界面布局分析

Instagram 的发现页面做的很不错，我重新绘制了这个页面，发现系统想推送给你的图片或者视频会做等比放大 2 倍处理，一屏显示图片或者视频至少有一个最大显示，给用户的感受是有主次。同时开发也能很好实现这种布局，具有一定的规律性。

七、轮播点的设计体验

在 Instagram 界面当用户发的图片超出 5 张时，图片下方的轮播点会出现变化，有大有小。

我重新绘制了一个用户发的 7 张图片的示例，当用户在左右滑动图片时，轮播的点会跟着动，同时会有大小的显示，暗示用户后面或者前面还有多张图片，有近大远小的感觉，非常细节的设计。

八、设计的细节

在 Instagram 的用户界面，视频、多张图片、单张图片和置顶 4 种状态右上角有个图标的标识，让用户清晰知道图片的内容状态，提前给用户有个心理预期与区分。
当用户点击进去类似抖音的布局，可以进行上下滑动切换视频内容，双击可给该视频点赞，整体的体验很丝滑，没有任何的卡顿与拖沓。同时界面图标用线性的形式，布局统一、和谐。

九、图标风格

Instagram 整体的图标设计是线性的图标，线性图标给人的感觉是可点击、可操作的，同时感觉简洁明快的气质。图标的统一让每一个界面的视觉感受都是一致的。

十、经典界面

这个界面放在你面前可能都会知道是 Instagram 这个应用，这个界面框架已经形成品牌意识。

Instagram 一直没有更改这个布局，非常经典的设计，没有太多花里胡哨的图标与信息，只有简约的线性图标与用户发布的图片，克制的设计。也有很多相机应用、户外广告都借鉴了 Instagram 布局，已经在用户的心智里面了～

总结

越来越多的企业的品牌色往鲜艳的方向走，突出品牌形象。
图片的排版不一定是同样大小的，可以有大有小，取决于更想给用户传达什么。
图标的统一性很重要，当整个 App 的图标风格都一致时，给用户的体验的感受也是一致的。
不断重复一个设计框架、设计组件时，会形成品牌意识，让用户记得你的产品。

感谢大家阅读，希望大家喜欢，后面不断输出好的文章与作品。

让版式更好看！7个字体排版设计小技巧

彩云Sky¹ — 2023-05-28

今天这篇文章比较偏基础，但胜在讲的很全面，自己做项目的时候也可以拿来自检。关于字体排版的方方面面都讲到了一些，尤其有一点是关于字体和字型的定义让我学到不少新知识，之前我在翻译的过程中没太在意这 2 个词的区别，今天因这篇文章专门去研究了一波，原来还是有不少讲究的，一起来学习下吧。

排版在设计过程中扮演着非常重要的角色：好的版式可以让阅读变得毫不费力，而差的直接劝退用户。

一、字体和字型有什么样的区别？

这里我们回顾下基础知识。有时字体（typeface）和字型（font）好像在使用上是可以互换的，这让人产生困惑（彩云注：实际上我也经常没注意这个细节，所以还专门去查了相关的知识，确实是大有学问，在翻译这篇文章时收获很大）。字型是字体的一个子集，字型（font）是指字体（typeface）中特定的样式和字重。

（彩云注：typeface 是一个抽象的总体概念，而 font 是这个概念的具象物体。如果是可以互换的、现代的、数字艺术中的意义，就都翻译成“字体”；如果原文在强调二者的区别，“typeface”理解为“字体”，而“font”可以理解“字型”。这样来区分）

举个例子，Helvetica 是一个字体，但 Helvetica Bold 是 Helvetica 字体家族中的一个具体的字型。下面这张图，你就能理解字体和字型的区别了。

二、选择正确的字体风格

下面是三种比较常见的字体分类

1. 衬线体

衬线体会在构成字母和符号的笔画末端增加小装饰性笔画。

2. 无衬线体

无衬线体在笔画的末端和转折处都比较干脆，没有装饰。

3. 装饰性字体

用来突出某些内容的短文本。（彩云注：一般不会大面积使用，用来作为装饰样式挺不错的，比如放在内容的底部作为底纹之类的。）

4. 保持字体种类尽量少

同时使用三种以上的字体会使网站看起来不美观而且显得非常拥挤。保持尽量少的字体种类，两种挺好，但其实一种字体通常就足够了。

5. 使用一种字体的不同字重

在项目中，我习惯用一款免费字体“Inter”，看起来效果非常棒。

使用 Inter 字体在界面中的实际效果

6. 使用衬线字体和无衬线字体

在下面这个网页设计中，我会用到衬线字体“Kepler”作为标题，用无衬线字体“Futura”作为其他不同的文本内容。

2 种不同字体在界面中的实际效果

7. 使用装饰性字体作为高亮内容

在下面这个案例中，我期望高亮文本内容“skincare routine”。我在这里就用到一个装饰性字体“Northwell”，看起来效果挺不错的。

免费就意味着不好吗？

让我们看看下面两个相同的字体。左边是免费的字型“Inter”，右边是一个要花钱的字型“Söhne”（60 美元授权）。

你觉得怎样？

就我个人而言，我并没有觉得左边的看起来比右边的更糟糕，我觉得 2 个都非常好看。

因此，如果预算有限，可以到 Google 字体库中选择一款你喜欢的免费字体。

注意，如果你在网上发现一个字体，能下载和使用并不代表这就是免费的。你必须仔细阅读这个字体的许可然后再决定在哪里使用它。多数情况下，当你看到一个好看的字体但却发现它并非免费的。

此外，如果你决定使用一种字体（例如 Helvetica）并且会用到它的三种字重（粗体、中体、细体），你需要同时付费 3 次 $180 (3x$60)。

在这个网站 https://www.myfonts.com 你可以查到某个字体具体要花多少钱。

更多优质英文字体推荐：

三、使用默认的样式

当你设计一个网页时，你只能使用 6 种类型的标题。

你可以看到下一个标题的字号会比前一个更小。它能帮助在页面上更好的组织信息和提高信息的可读性。

在标题中通常会有这种限制，在正文中却没有，但根据我的经验，4 种类型足够了：

不仅仅在 PC 端需要考虑标题和正文的文本风格，在移动端同样需要。

四、选择合适的字体大小

我知道对于每个项目来说都会有其独立的风格体系，字号也取决于所使用的字体，但让我们尝试去找到一些相对平均的字号和样式尽可能的满足更多的项目。

标题字号对照表（左边是 PC，右边是移动端）

正文字号对照表（左边是 PC，右边是移动端）

五、在 Figma 设置字体样式

当你已经在 Figma 中建立了文本样式时，创建文本块会更容易。下面就是在 Figma 中的样子。

① 要创建一个文本样式，在页面上选择一个文本>点击字体右边的“4 个点”的图标>点击“+”图标

② 输入你要创建的字体组件名称

如果你想对文本样式进行结构化管理，分到不同文件夹中，你可以在创建名称的时候加上斜杠：文件夹名/样式名

注意一点，你可以在任何时候修改字体样式，它将会自动在页面中修改任何你之前用过这些样式的字体。

1. 对齐

左对齐

绝大多数人习惯从左往右阅读，这也是为什么设计师通常都会采用左对齐的原因。

居中对齐

当你觉得居中对齐在视觉上更美观时，就可以尝试使用居中对齐，此时其他内容也最好都居中对齐，保持统一。

当文本内容超过 3 行时，就不建议使用居中对齐，因为这会让内容变得难以阅读。

右对齐

我发现有 2 种文本需要右对齐的情况：

出于语言的需要，比如说希伯来语和阿拉伯语;
在表格和 UI 中，当字段名有不同的长度时，使用右对齐可以让它更接近所引用的数据。（彩云注：亲密性原则的使用）

2. 行高

每款字体依据它的字号都会有一个默认的行高。有时默认的行高看起来就还不错，那么这个行高就让它自动而不需要做特别的改动。

但如果这个字块看起来非常拥挤那就需要手动调整它的行高。

（彩云注：在 15px 字号时，我通常会给到 1.3 到 1.6 倍的行高会比较舒服，当然也要看具体的字号大小和字体）

3. 文本块宽度

你必须考虑到字块的最大宽度，尽量避免字块过长造成的阅读困难。

我发现 660-760px 是一个比较好的字块宽度范围。当使用这个宽度时，你的眼睛不需要来回移动，阅读起来就会非常舒服。

六、如何使用大写字母

在短的标题和文本块中适合用大写字母，不要在一段很长的文本中都用大写。

不要忘记字母间距

七、检查颜色对比度

你在设计的时候能看清文本内容，不代表所有人都能看清楚。

彩云注：保持文字足够的对比度，具体怎么去走查：

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

UI设计万字干货！系统掌握界面中的点线面运用

Andrew — 2023-05-28

点线面在用户界面中的应用貌似很少有人写，我挑业余时间进行了大量案例的翻阅分析，发现其中确有规则。

首篇万字长文献给你。

平面设计篇：

前言

用户界面的本质是资源的互换。

用户为产品提供时间和注意力，产品为用户提供单位时间内最大价值的内容。

当视觉设计师介入其中后，他们的关系可以用这样一幅图表示。

表现层作为用户体验五要素的最具象层面，解决的是产品视觉效果的呈现问题。视觉设计师需要借以合理的版式和视觉手段来保障用户在单位时间内获取最多的内容资源，即实现信息的高效获取。

信息的高效获取来自合理的视觉引导（信息阅读的优先级安排）。我们一直在说的层次清晰、低信噪比、沉浸感等视觉体验在本质上其实都属于合理的视觉引导。

借以实现的手段包括我们熟知的卡片、留白、配色、字体层级、图标等等。这些手段庞杂繁多，体系化的建设必不可少，但是漫长的积累沉淀中很容易被其淹没，而且每种手段背后又是什么样的底层逻辑和依据？

为什么卡片让页面层次清晰？为什么面性图标拥有较高的辨识度？为什么步骤条会有横纵之分？...

而点、线、面解决的就是这些内在逻辑问题，在你熟知它们的特性后，绝大多数的设计手段都可以被其解释和串联起来，并且让你的设计决策和设计推导更加有据可依，而不是简单的“凭感觉”。

如果我们将各种设计手段比喻为各类武学外功招式，那么点线面理论就好像吐纳内功，虽为最基础的入门心法，但其对内息的作用影响着所有招式的发挥。

点、线、面与康定斯基

点、线、面理论最早由瓦西里·康定斯基提出，他所著的《点、线、面》一书最早曾作为包豪斯学院的形式课程进行教学。他将所有艺术的形式都归结于点、线和面三种元素的关系。

康定斯基对于点、线、面的独到思想为设计领域产生了极为深远的影响。我们目前最熟知运用到它的的一个领域就是平面设计领域。通过这个理论，平面中所有的元素都可以看作点、线、面三类形态，并且每类形态的存在、变化和结合，都可以为画面传达出不同的样式和风格。

虽然用户界面设计和平面设计分属于两个完全不同的设计行业，但点、线、面理论是相通的。

点、线、面浅谈

点、线、面具有普适性、相对性。前文已经讲过，点、线、面这三种形态存在于所有的元素中。不论是哪种元素都可以用点、线、面来表示。并且，点、线、面之间是相对的，并非对元素的纯粹定义。

比如一个界面中的面性图标，我们可以将其看作一个点，当相对于线性图标时，我们又可以将其看作面。如果这个图标和其他图标一起组成标签栏，那这串图标也可看作线。

下面，我将分为点、线和面三大板块，来讲述每类形态基于自身维度所拥有的特性，并如何通过存在、变化来在界面中发挥着各自的作用，实现合理高效的视觉引导。

正文开始。

一、万物自一点始

正如宇宙大爆炸源自一个引力奇点那样，点是万物之源，也是所有元素的基础。点从维度上来说属于零维，它没有办法像线、面那样延伸，这决定了点本身的向心性和自由性。

康定斯基将点描述为“雄辩与沉默”，这句话的意思就是，当点独立存在于一个画面中时，它便开始“雄辩”自己的存在，让自己成为焦点；而当它的数量增加时，点便倾向于“沉默”，并且根据它的排列方式倾向于对应形态的特性。

1. 向心性

当一个点独立存在时，点的向心性协助它成为视觉焦点。此时点主要起到定位的作用。

以支付宝首页为例。在以往的界面设计中，我们往往在每个模块标题旁添加一个小小的短线，而这个小短线便是作为定位点引导用户迅速注意到标题，实现不同内容的快速定位。并且作品包装中也常会用到它。

不过在 Complexion Reduction 去形式化的浪潮洗礼下，这种方式已成为过去式，现在我们会直接用标题本身作为点进行定位。

但是，在其他更多的场景下，仅靠文字其实并不能很好得发挥点的向心性，尤其是一些信息较多、需要迅速辨识的场景下。这时候，我们通常会引入另一种要素——图标来指代它。

图标本身可以用来表意，而独立、精致的特性让它很适合作为点元素来处理。

比如 app 中的标签栏中的图标就可看作点元素，每个图标以其所具备的向心性帮助我们迅速得聚焦到它所在的位置。列表页的每个字段前也会加入对应含义的图标来帮助用户迅速锚定当前栏目，并且由于图标拥有更高的辨识性，这让阅读变得轻快而富有节奏。

下图所示为 Google 日历中的活动页表单，当我们将字段前的图标去除时，阅读没有了强定位元素将会缺失节奏，信息获取变得困难和缓慢，影响用户表单的填写。

2. 聚集性

点是自由、精致的，它不会像线那样有向两端延伸的特性，这意味着它可以进行各种形式、规则的排列组合以契合版面。

① 点化线

在这种分布形式下，点通常以图标的形式进行横向及纵向的排列，并且倾向于线的引导性进行视线引导。

点的横向排列通常见于标签导航栏、单行的金刚区入口等。点的纵向排列通常见于列表布局中。由于点本身对用户注意力的聚焦，点沿着什么方向进行排列时，用户视线便倾向于朝对应的方向移动。

上面所举的 Google 日历就是这样，单个图标方便定位，而多个线性排布的图标则具备了线的引导性，便于用户的由上至下得快速浏览。iOS 自带的音乐 app 和 QQ 音乐的歌单也同样利用了点化线引导浏览，只是图片和阿拉伯数字的区别而已。

② 点化面

在这种分布形式下，点常常横向排列在界面中（一排内通常不超过 5 个），作为一个个快捷入口存在，形成网格式布局。

比如金刚区业务入口、书籍等类型的布局都属于网格式。这个布局下的点集合倾向于面元素，界面在这个布局下呈现出富有观赏性的视觉张力，吸引用户眼球，而且网格式的布局引导用户视线均匀迁移，便于视觉区分。

3. 网格与列表

既然讲到这了，不得不提下上面两种形态各自所在的版式——网格布局和列表布局。

① 关于列表

通常来说，静态页面中的内容大致可分为图、文两大类。

从形态上看，文本本身具有线那样不断延伸的特点，因此列表的横向版面更适合长文本的展示。而图片、图标通常以固定尺寸的 img 独立存在，可看作点元素，像上一节所讲的，它既可存在于列表又可存在于网格。

从视觉动线上看，列表布局的动线属于尼尔森等老前辈所提出的 F 型浏览模式。即用户首先落点于左侧的定位点，再由左向右进行阅读，接着再垂直扫视，当定位到兴趣点后继续由左至右得阅读。这种动线符合人类自然的阅读模式。

并且在由上至下的视线迁移中，用户的注意力势必随着路径的拉长而逐步递减。

而这种递减效应让列表式布局更适合基于产品及用户习惯以某种规律排序。

邮件讯息以时间进行排序，这是基于用户查看最新消息的习惯；电商商品则默认以相关性、销量等因素综合排序（同时买家可以根据价格、销量等进行自定义排序），这是基于用户的购物喜好习惯；直播平台以热度进行排序，这是基于羊群效应制造引流点，同时也刺激用户发布优质内容。并且在特定的排序规律下可以引导用户带有目的的、更迅速得扫视。

但是如果界面变为网格布局，扫视效率将大打折扣，较高的图版率也导致文字信息被过度弱化。

如下图，健身环大冒险并不属于外观型产品，用户更关心的是价格、好评等文字信息，当其变为网格视图时，一方面用户无法根据排序结果迅速垂直扫视，另一方面文字信息被重量级的图片压制，用户无法迅速获取它们。

② 关于网格

网格布局通过牺牲宽度来将界面等分为一个个格子，从形态上直接限制了长文本的存在，这让它更适合放置一个个独立的点，比如图片、图标。而文本则落于底部沦为一介辅助。

从视觉动线上看，网格布局倾向于 Z 型浏览模式。用户视觉动线通常由左至右、再由上至下得进行，并可以“雨露均沾”得在数个点上均匀迁移，注意力递减效应不会像列表布局那么强烈。因此，网格布局非常适合进行不同信息的辨识和区分。

界面中常见的功能业务入口、专辑或者电影的布局、单独店铺中的商品，它们不需要明显的排序处理，并且用户初始行为都是通过图片、图标进行迅速得辨别区分，继而进行交互决策。如果将其列表化处理，不同信息的辨识区分效率将受到影响。

如下图，服装属于典型的外观型商品，当变为列表视图时，商品之间将难以辨识区分。

由此，我们大致可以梳理出两种布局适用情况：

列表：适用于文本为主要展示，或者按照某种规律排序的信息。

网格：适用于图片为主要展示，或者没有排序规则，需要用户通过图片、图标辨识区分的信息。

当然了，这两种布局并非只能选其一，淘宝、京东这类体量庞大的电商平台便为了方便用户习惯，提供了两种布局视图便于用户随时切换以降低决策成本。

另外，它常被作为一类丰富画面层次的手段。当点不再按照横纵方向排列分布时，便可作为图案被用在特定场景的背景中，以降低背景过平过空的感觉。

比如美食杰封面的加载占位图就以与产品相关的各种食材图标随机得组合为图案，饱满的画面减少了用户等待时的枯燥无味。而 QQ 的群发布功能，在首个卡片背景中便加入了各种学习类的图标随机分布在卡片上，烘托出热闹趣味的氛围，和下面的三个次要功能从卡片背景上迅速拉开层级。

二、线

线条是一种简单、轻盈的存在，可以看作是点受外驱力作用下的运动轨迹。它从维度上来说属于一维，不同的外驱力结合使得线可以沿着任意方向自由得延伸，从而让它拥有了高效的引导性、分割性和造型性。

康定斯基在书中以温度去定义线的情感，他将水平线定义为无限冷能的表现形式，将垂直线定义为无限暖能的表现形式。看似晦涩难懂，但联系到现实生活就相对容易理解一点。

现实生活中的水平线通常存在于地平线中，因此给人的感觉是稳定、平和，类似非启动时的“冷”态；而垂直线常见于那些从基线建造、生长的事物，比如高楼大厦、参天巨木，它们都通过能量来实现垂直方向的高低变化，因此给人的感觉是上升、下落、变化等感觉，类似启动后的“暖”态。

而线具备的冷暖态决定了水平和垂直线发挥各自作用时所传达的感受。

1. 引导性

线可沿任意方向延伸的特点让它具备了很强的引导性。界面中最常见的就是跑步、地图类 app 中的路线显示，就是通过线的引导性来显示起点到终点所行进的轨迹。

如果我们将起点和终点对齐归于一条线上时，便可以通过降维的方式将其缩减至单个维度。

时间维度可以引申到界面中的时间轴、步骤条、加载条和音视频中的进度条等，这类维度通常需要加入点元素，通过点的向心性辅助定位。空间维度则引申到滑动页面时出现的滚动条等。

如上文对温度的解释，“暖”态的垂直线象征变化。当我们希望用户能够感知到时间的变化，或者流程需要花费较长时间时，垂直线相对来说是个更好的选择。

比如外卖、快递的订单进度，火车的停靠站点时间，timeline，到账时间等信息，要么需要传达变化感，要么费时较长，因此适合以象征变化的垂直线来进行引导，给予用户变化感、产生需要等待的心理预期。

“冷”态的水平线象征静止。当我们希望用户能够沉浸在这个流程中，感知不到时间的变化，或者流程时间极短时，那就更适合用水平线。

比如 airbnb 申请成为房东时，会有个需要用户即时填写的分页表单，为了让用户沉浸在填写中，同样以水平线作为它的进度反馈，降低时间变化感。

比如美团买药后的审方页，药师的审方进度是即时性的，通常只需等待十几秒即可。水平的静止感能够让用户产生“当前正在发生”的感觉，避免让用户产生需要等待较长时间的心理预期而离开当前页面。

但是，如果我们将美团审方的进度条改为纵向（去除文案提示），给用户带来的感觉也就大不相同。

下文讲到的分割性也可以以冷暖态来解释。我们希望用户能够专心阅读信息，因此会尽量避免容易带来变化感的垂直分割线。即便迫于信息的划分需要不得不用到，也会尽量降低它的明度和长度。

另外，界面中往往也存在着一条无形的线，它同样也是起着重要的引导作用，只是这类线不仅仅作用于某个特定模块，它还可以作用于整个界面。这条线通常被称作视觉动线。视觉动线在网格与列表那一节中简单提了下，只是这部分体系太过庞大，后面有时间我会单独写一篇。

2. 分割性

很多时候，界面中仅仅以留白进行分隔时，很容易造成信息无法被明确得划分。这时我们往往需要引入额外的形式进行辅助。比如分割线。

分割线通常运用在模块内部信息的分割，虽简单粗暴，但并不能应付更高层级的模块分割。而模块之间的分割通常以面性（分割条）来进行。留白、分割线和分割条三者的分割层级由低到高，通常需要在页面中结合使用。

需要注意的是，线面的分割形式需要尽可能得轻量化，一旦拥有了视觉重量很容易成为噪音，我们需要尽量避免信噪比过低对用户阅读体验的破坏。

为了增加页面的呼吸感，我们很多时候会用留白这种最为轻量的分割方式代替所有的线、面。

这类大留白的特点往往与 Complexion Reduction 风格相结合，视觉上不仅制造一种舒适的简约感和呼吸感，也减少了页面中线面分割形成的视觉噪音。

Complexion Reduction 最早源自 Airbnb、Instagram、Medium 等产品的页面改版，而后被 UX 设计师 Michael Horton 所总结出的设计趋势。苹果在 17 年所发布的 ios11 同属于这个风格，这类风格最突出的三个特征就是大标题、面性图标和克制用色。

但是，这种去形式化的分割方法并非适用于全部页面，一般只有在页面模块单一、信息单元字段较少、或者以图片本身作为分割方式的页面才适合使用。

比如 ikea 和 airbnb 的首页，它们并不像京东、支付宝有庞大的体量和业务需求，所以很适合全留白的方式。这让它们的首页看上去非常干净清爽，富有呼吸感。

不过，在其他字段信息繁多的界面中，分割线依然是一种高效的分割方式。

我们可以看到，IKEA 和 airbnb 的详情页依旧选择了分割线的分割方式以应对繁多的字段信息，避免全留白带来的层级混乱。

3. 造型性

线本身可以沿任意方向自由延伸，形成一条曲线、折线、螺旋线等等。而当线的首尾相连时，便可以勾画出面。

但是，线的闭合性所形成的面仅仅是一具没有量感的空壳。但同时线条本身轻盈的特性让其更加轻量、通透，因此对于一些辨识要求较低、或者需要被弱化的元素来说往往是个不错的选择。

界面中最常见的运用就是幽灵按钮和线性图标。

相比于面性按钮和图标，量感的缺失让其无法在辨识性上胜出，但是在其它地方也各有所长。

幽灵按钮常用于一些次按钮、未选中态以及 tag，线性图标常被用于一些次要功能、未选中态以及装饰。

当然，线面也可以根据产品自身需求作类别区分。

比如支付宝和美团这些产品，工具型图标全部线性，而业务型图标全部面性。并且线性图标得益于背景主色色块的反白加成让它们并不会被过度弱化。

4. 虚线

虚线是点化线的最简易的表现。

但是因为虚线本身断开的地方太多了，并不适合用于常规信息的分割，它通常适用于一些特定的场景。

比如一些产品中的票券、账单这类特殊场景中，通常会加入虚线进行信息的分割，就是为了映射模拟现实世界中便于撕开的撕票线来增加代入感，减少认知负荷。

虚线另一个特性是不可见性。

这个特性最早可追溯至建筑、机械等行业的制图规范中——以同等点元素所构成的虚线代表对象视觉盲区中的棱边线及轮廓线。

一些漫画或动画作品中当一个东西突然不翼而飞时，往往会留下一个虚线的轮廓。

这种有意思的设定也被设计师引用到了用户界面中。

比如当我们想让用户去上传一个图片时，往往会采取一个虚线的矩形结合按钮进行引导，便是为了告诉用户：嗨这块地还是空的，快来加点料！

比如 Pinterest、dribbble 以及 AntD 的图片类 upload 组件，都采用了这种设定。

另外，这种形式也适用于空状态的表示，比如 dropbox。

三、面

面可以看作是线的运动轨迹，可以由一个闭合的线生成，也可以由点、线强化自身而来。

1. 点线面的临界问题

康定斯基在书中曾讲到，线的强化加粗，与点不断增大面临同样的问题，即与面之间的临界。

这句话的意思就是，当点、线通过强化自身的面积、宽度后，和面的界限开始模糊，从而具备了面本身的性质。

比如 ios11 中让人印象深刻的大标题，便是由通过增加每个点的面积（增加每个字的字号），以及笔画的线宽（增加每个字的字重）来趋向于面，以营造出饱满、冲击的视觉张力。

2. 辨识性

面二维的属性让它可以向四周无限得扩张自己的领土，这个优势让面可以轻松承载各类信息，并且也让它具备了绝佳的视觉张力。

在一个点线面同时存在的画面中，人眼优先注意到的必定是拥有绝对视觉张力的面元素。这意味着面拥有着远胜于前两者的辨识性，或者说，在一部各类元素参演的戏剧里，面更擅长主角。

比如在一个放置了文字的界面中，我们希望其中一段比较重要的文字完全和其他文字区分开，也就意味着这段文字需要进行对比。

我们可以对这段文字加粗、加入颜色等等，这的确能做出一些明显的变化。但是仅仅是对字体本身的强化，一旦界面需要划分层级，就会显得很“平”，造成信息关系的暧昧。

不过，当加入一层淡淡的色块充当文字背景后，便可以制造出极为明朗的层次关系。一方面，这段文字神奇得与其他信息迅速孤立开来，另外，有面作为“靠山”让它变得稍微与众不同，并且相比其他文字能被更快得注意到。

当然，如果你觉得它很重要，那你可以增强文字与背景的颜色对比，给面加入各种各样的颜色。

而当颜色对信息可读性造成影响时，为保证信息的顺利辨识，我们不得不对文字进行反色处理，以此作为视觉落点来强制用户迅速注意到它。这就是我们熟知的反白视觉手段。

面的这种强力属性被用到了界面的方方面面，比如按钮和图标。

① 关于图标

相比前面所讲的线性图标，面的辨识性让面性图标可以更快得被识别。因此，界面中一些重要的业务入口通常都以醒目的面性图标存在，并且常以面性图标代表激活、选中时的状态，线性图标代表未激活、未选中时的状态。

不过线性图标薄弱的辨识性并非完全适合标签栏状态的切换。

用户在选中到当前页时，并不代表其他页面彻底弱化了，用户同样需要关注其他未选中的页面。

正因如此，ios11 中所有未选中的 icon 全部由线性更改为了面性。同样的，国内的简书、天猫等产品也进行了图标的改版以提升其他页面的点击率。

② 关于按钮

对于按钮，面的辨识性为它的层级使用提供了更多可能。

如下图，按钮从样式上来看大致有六种样式，深色、浅色、浅灰色、幽灵、文字和图标按钮，其中面性按钮就占了一半。相比幽灵、文字和图标按钮，三种面性按钮都以面的强辨识性引导用户迅速注意到它。因此面性按钮相对对应更高的层级。

当页面中存在多个功能按钮时，就需要以样式进行主次之分。深色按钮以强烈的颜色对比制造吸引力，因此常以深色表达层级最高的主按钮，而次按钮通常对应层级较低的浅色、浅灰色等样式。

当页面中没有主次功能之分时，按钮的样式通常取决于当前的用户场景及业务需求。

比如知乎的答案详情页面，答主关注按钮是浅灰色样式，就是为了引导用户沉浸在内容中，避免深色样式对阅读造成干扰。而答主个人页的关注变为深色，则是由于用户点击答主头像的行为来自了解更多的动机，即用户对其产生了特定兴趣，在此场景下使用深色样式便是为了引导用户采取社交行为。

另外按钮圆角的转化也是为了强化信息的聚焦。关于圆角的内容可以去我的前一篇文章里面有更详细的讲解。

app store 同理。商品列表页的按钮一致以浅灰色样式表达，而详情页使用了深色。

我们在按钮样式的选择上，务必需要考虑到当前的用户场景，避免过低的信噪比而影响信息的传达效率。

比如 app store 列表页中，用户的场景是非特定的浏览行为，如果使用深色按钮将会让其成为视觉焦点，强制用户不断注意到它，致使其成为“噪音”，影响用户对有效信息的获取。

3. 承载性与分割性

面无限延展的属性让它可以承载各类信息。包括文字、图片或视频元素，异或是元素自由组合所形成的信息单元。

并且我们仅加深界面的背景色，就可以基于面的分割性，通过控制模块间距实现区域的划分。（这里的间距即我们熟知的分割条）

但这种文字墙一般平铺式的布局并不能更好得反映当前模块所在的层次，或者从用户认知上说它们倾向于一个层面上。而且直角矩形的四个顶角所形成的四个焦点，也让用户的视线倾向于发散而非聚焦。直到卡片的出现，问题得以顺利解决。

4. 卡片式设计

卡片在我们生活中随处可见，信件、名片、便利贴、甚至是我们的手机屏幕，它们从形态来说都属于面，并且都充分利用了面的承载性来充当一个收纳信息的容器或载体。

信件收纳来信人的寄语，名片收纳对方的个人信息、便利贴收纳事项清单、屏幕收纳用户界面。而且它们方便携带，我们想要知道更多，打开它即可。

2012 年 I/O 开发者大会中，随安卓 4.1 系统一同惊艳亮相的 Google Now 首次将卡片展示在了用户界面中。

这种后拟物时代的设计不仅一改 Google 以往混乱的信息展示问题，而且熟悉的拟物感收获了足量用户的喜爱。初尝甜头之后，Google 将卡片应用到了所有的产品，并且将其作为基础元素列入了一门伟大的设计语言中——material design。

你可以在 material design 中更系统得看到，google 通过为界面添加了 z 轴（海报高度），来拟物映射生活中的一张张卡片。并且通过阴影的浓淡反应卡片所在的高度，通过不同的高度实时反映当前元素的层级关系。

而在 ios11 中，改版后的 app store 也使用了大量的卡片进行排列组合，形成格外的清晰的页面层次引导用户的视觉动线。

相比原本平铺直叙的信息，卡片式设计通过以下优点让其风靡设计界——

① 更高效得获取信息

每张卡片都是一个独立的面。从面的辨识性上说，独立和聚焦的特点让卡片与其他内容形成天然的断层，更易形成视觉焦点。

从面的分割性上说，卡片通过牺牲屏幕空间（四周的块外距）的方式让区域的分割相较分割条更为明确，清晰的层次关系便于用户迅速辨识和获取信息。

比如改版后的支付宝，通过引入圆角卡片来引导用户更好得留意到下方的各类生活服务，以实现向生活服务数字平台的转型。

② 更轻量的入口跳转

每个卡片除了承载信息外，都可以作为单独的入口承载内页的所有信息，并且卡片的属性让内页的展示变为了展开而非跳转。

比如 app store 点击卡片后，便以非线性的展开动画呈现所有内页信息，返回则只需下滑手势即可，轻量而有趣。

③ 更多的交互手势

卡片独立的特点让它可排列也可堆叠，这为页面带来了更多的交互方式。

我们可以通过左右滑动（scroll）解锁横向更多的空间，也可以左右轻划（flick）形成类似 tinder 那样新的产品机制。

比如知乎的书架引入滑动手势展示更多内容，轻划手势切换问题卡片。

④ 更舒适的视觉观感

卡片基于自身独立的特征让它成为网格布局的常用载体，富有观赏性的视觉张力让页面更加吸引眼球。

当然，卡片并不是通用的，原本可以靠留白或分割线分割的信息，如果为了视觉效果硬是卡片化处理，就会导致阅读的低效，而且浪费空间。

比如常见的一些 feed 流，相比卡片，这类同类的信息流更适合以列表来帮助用户迅速得扫视，并节省页面空间。

⑤ 卡片的嵌套和分割

产品的功能并非完全互相剥离的，很多时候存在包含和平行的关系。

这两类关系分别可以以卡片的嵌套和分割进行处理。前者通过卡片堆砌表达信息的包含关系，而后者则通过视觉分割所形成的点击域传达信息的平行关系。

比如天猫点评页中的金香蕉好物推荐，每个卡片承载了商品信息以及点评信息，通过卡片的嵌套表示出两者的包含关系。而单条推选理由及入口的引导属于平行关系，因此采用了视觉分割来进行划分。

并且前者跳转的是点评详情，后者跳转的页面中包含了所有点评、商品推荐以及我要点评，因此在后者所属的面中加入了淡淡的一层业务主色来强化它的地位。

在支付宝改版后的卡包页中同样进行了一次嵌套处理，以更好得容纳不同的业务并传达各自所在的层级，并且以尺寸和颜色对比进行业务区分。

京东金融的付费业务卡片中存在两个平行关系的功能，因此以分割线形式进行了区域的划分。

同时，它利用了颜色进行了有效的视觉及情绪引导：黑色背景进行反白处理将其作为一个单独的视觉落点，强制用户注意到这里，并且又传达了付费用户所尊享的高级感。

四、苹果是如何改头换面的

自从 ios7 转型扁平后，线元素在苹果设计语言中一直占有重要地位，线自身的纤细、轻盈感可以迅速打造 apple 独有的轻量调性，不仅是按钮、图标的样式，字体本身也更加倾向纤细的字重。

但是，这个僵局在 ios11 发布的那天被彻底打破。

2017 年 6 月 6 日，苹果设计师乔纳森仿佛和线有了隔夜仇一般，从解锁页面到原生应用中，原本 ios10 中曾经被大量使用的线元素基本全部被面元素取代。

比如锁屏页面，所有拨号按钮全部由幽灵样式改为了面性样式，而数字字重的变粗也是一种化面的倾向。这使得按钮及文字更易辨识，并且降低了线圈所产生的视觉噪音。

app store 中也同样发生着形态的易主。

你可以在下图中看到，原本的幽灵按钮全部改为了浅灰色面性按钮。用于划分信息的分割线明度也得到了克制。

另外，11 代中众所周知的大标题同样也可以看做化面的倾向（通过增加自身的面积），强烈的视觉张力引导用户迅速得进行辨识。

另外，所有的数字全部提至文字的前方，基于用户由左至右的动线更突出产品自身，以点化线的形式更好得引导用户进行扫视。

追求极致的苹果显然不能容忍 tab 中未选中态下出现的线元素，你可以在 ios13 中看到，线元素得到了彻底的消除，并且颜色一并得到了克制，再次提升了阅读内容的沉浸感。

ios11 中的商品详情页获取按钮也同样使用了面性，深色的强调样式更好得契合了页面所在的用户场景，召唤用户对其感兴趣的商品采取点击行为。

控制中心页面，基于面元素的承载与分割性，所有的信号类功能独立收纳到了卡片中。

亮度和音量的调节则由横向的线性滑竿控制条改为了纵向的面性控制块。一方面增强了两者的辨识力，另一方面，根据菲茨交互定律，面积的增大带来了更好的点击体验。这一点在 miui11 的控件优化中也得到了应用。

所有的未选中态图标也进行了面性处理，大幅提升了 10 代中未选中页标签的辨识性。并且每个图标对应的文字也进行了加粗。

纵观 ios11 中所有形态的变化，我们可以发现这次改版的最终目的是：促进内容的高效获取。

顺从作为苹果历来遵循的设计法则之一，和包豪斯“形式追随功能”设计理念不谋而合。

——设计永远只帮助用户理解内容，但永远不与内容竞争。这一点在ios11的这次“改头换面”中被彻底应用及实现，并且对设计圈影响至今。

最后

点、线、面理论并不像格式塔、尼尔森可用性法则等方法论那样，为设计者提供切实可行的具体指导，它更类似一种内敛的全局观，帮助设计师抛开颜色、质感等额外手段，从宏观的角度以点、线和面的方式将所有的设计元素抽象化处理，让原本杂乱无序的万象有章可循。

最后，以康定斯基的一句话结尾——

此篇完。

超全面！B端产品设计风格+配色方案大盘点！

CE青年 — 2023-05-28

编者按：B端设计常见的风格和配色方案有哪些？本文总结了6种B端设计风格和多个色彩搭配组合。

往期回顾：

“你的这个页面，一看就不是实际的工作当中的页面”

“你的这个设计风格未免也太过于夸张”

“为什么你设计的页面会长这样？”

这是看到很多设计师私聊发给我作品集过后，我的回答。而这种现象，现在越来越多了。很多设计师都拿着做 C 端产品的方式来去设计 B 端的页面，也就导致你做出来的页面始终缺乏 B 端产品的调性。

比如最近改版薪人薪事，看到很多人在评论区里吐槽做得很丑，虽然确实做得不好看，但尝试让吐槽的人去做设计，没想到给到我的竟然是类似 Dribbble 的这种风格，So...

因此我们今天来说一说，关于 B 端产品，究竟需要什么样的设计风格？什么样的风格能够被大众所接受。

一、视觉重要性

关于视觉风格对整体设计的影响

1. 颜值漂亮即正义

关于 B 端的视觉风格，我一直都秉承着这样一个态度：业务、交互我们先可以不聊，如果你的视觉非常厉害，能够做出风格十分干净的产品页面的话，那业务、交互我们都可以先放一放。

因为页面设计的好坏，我们能够一眼分辨，这其实就决定了你的设计下限。即使你不懂业务、不懂交互，至少页面画得好看，那已经超越市面上 80% 的设计师。

那些和我自称资深的设计师，感觉自己视觉还不错，结果把自己的设计页面发出来，我通常都是这个表情

所以设计页面不要你以为好看，要尝试和市面上大多数 B 端产品进行对比才行~

2. 页面复用的程度高

视觉风格，在整个 B 端页面当中一定是高度复用的。

它与移动端设计不太一样：移动端确定了风格过后，我们在不同的页面当中还是会存在风格上的变化。

而在 B 端页面当中，本身就是一个高度复用的页面设计，比如你的表格页、表单页、详情页、配置页、工作台页，它们之间的风格差距非常的小。

因此只要我们能够确定了视觉风格，并验证这个风格本身与我们产品设定基本相同时，那你的视觉风格就不会太差。

2. 高密度的信息展示

信息密度，在视觉风格当中同样非常重要，因为我们在很多网站上看到的视觉风格都是以「大间距」的方式来进行展示，但是在实际的工作当中你会发现，这样的大间距的页面只会受到来自同事审批时的“霸凌”。

而出现这个现象的原因是我们在实际的工作当中，信息的密度是非常之高（产品经理恨不得在每一个空白的地方都放上按钮、文字）因此当我们看到这种风格的页面你是，首先得感觉就是这是一个概念方案，不具备任何的落地效果。因此视觉风格一定是要满足高密度的信息展示。

二、风格类型

常见的视觉风格有哪些

说了那么多，我们来分析一下常见的视觉风格有哪些？

首先说明，以下的视觉风格名称都是 CE 平时沟通时所使用的词汇，切勿较真。

1. 白+灰风格

纯白风格在我们看来就是以：白、灰、分割线为主的一种视觉风格。

在整个页面当中，首先会通过固定的灰色，去区分不同模块之间的关系，进而划分页面区域。同时通过主题色在页面当中进行点缀，进而让整个页面的视线受到引导，从而形成重要信息的页面呈现。

白+灰的设计风格是非常难把握的，因为如果颜色的设定稍稍偏差，就很容易形成页面发灰、页面没区分的情况，这里其实就会涉及到字体颜色的设定。

而关于白+灰的风格，其实目前在很多产品当中都能够看到它们的身影，比如：氚云、简道云、Coding、悟空 CRM 等等...

2. 深色导航

如果不想犯错，那你使用深色导航的方式就一定没有问题。

深色导航作为 B 端风格最明显的一种风格，其主要的设计就是将导航菜单部分的设计为深色，进而去区分页面之间的信息关系。

这种方式无论你是顶部导航、侧边导航、还是混合导航，它的风格都是非常固定，并且设计起来难度也相对较低。

而在深色导航的设计过程中，我们要注意不同层级下的深色使用，比如在一个侧边导航当中，我有两个层级的深色，这时候颜色的设定一定要有深浅的区分，这样才能够让用户知道导航的分割。

又比如，在一个混合导航当中，我究竟应该如何设计顶部导航、侧边导航、三级导航之间的关系，通常就会去考虑深浅变化+投影变化。

深色导航能够在很多产品上看到他的身影，比如：ONES、京东云、微盟、有赞、i 人事、小鹅通，因此深色导航也非常的普遍。

3. 飞书风格

其实最近飞书管理后台的改版，将原本的深色导航改版为了一种全新的设计风格。因为在网上对于这种风格的描述还相对较少，因此将其成为飞书风格。

飞书风格的特点是将页面当中内容部分的设计突出，其余的导航菜单部分变灰，进而形成一种聚焦于内容的设计形式，它和白+灰的风格很像，但是不同的是缺少了分割线与投影等方式进行的大面积分割，这样能够让整体看上去更干净、更整洁。

而关于飞书风格的设计方案，现在了解到的产品制作成这样的风格还相对较少，不过在我们 3 群的知名群友沙丁鱼的花瓣当中，还是能够寻找到一些蛛丝马迹，它用这种风格落地了一整套的页面，看上去效果还不错。我放了一些截图，感兴趣的同学可以放大过后进行查看。

4. 客户端风格

客户端的风格相对来说还是较为少见，因为想要使用这种风格，大概率是要将目前的网页端的产品进行客户端化。客户端风格的特点就是以左侧导航为主，并且将左侧导航的图标进行夸张的呈现。

对于客户端风格，需要了解的是它通常只有一级导航菜单，因此在设计时，我们需要考虑自己的页面是否适合。

客户端的风格，大家可以参考：飞书、钉钉等产品，它们的风格都是以这种页面为主

5. 政企严肃风

政企风格相对来说是一种较难处理的风格，一方面政的要求完全由关键决策领导人的喜好来决定，因此我们在去做设计时，往往不要做得太前沿，考虑更多的是严肃同时又要整洁炫酷（是的，你没有听错）

因此 ToG 的风格我们没有办法总结，只能说跟着领导喜好走。案例图片也办法放，太敏感大家理解一下。

也可以看看这篇：

6. 酷炫后台风格

我也见过很多系统是在大屏设计之上的，因此很多业务系统从大众设计师理解的互联网、干净，变为现在的科技、炫酷。

这种风格考验的完完全全就是你是否会用光效、素材

光效：在页面当中，需要有很多光效来进行页面的点缀，比如同一个页面当中，有无光效会存在明显的差异，这就需要你学会在页面当中各个地方考虑光效的使用。比如页面的标题、视觉分割、图标这些地方的使用后提升整体的视觉效果。

素材：在很多酷炫的风格当中，我们都需要去考虑炫酷素材的使用。因为这是一种能够直接提升视觉风格的最有效的办法。

在整个页面当中，我们可以把页面分为四个层级，分别是：背景层、素材层、组件层、提示层，在这个四个层级里面素材的使用无疑是能够快速加分的一个选项，比如一个页面当中两张完全不同风格的素材，在使用上的效果可以说的天差地别

虽然酷炫的风格我本身在做设计师并不太喜欢，但是客户的需求、业务的压力，才是我们做设计的最大动力，而自己是否喜欢则显得并不是那么重要。

类似的3D地图素材生成器：

三、颜色差异

不同主题颜色如何搭配页面

在整个页面当中我们会将不同的主题色进行区分，而主题色的不同会影响到我们设计思路，因此这里给大家提供一些设计思路。

1. 颜色的整体风格

首先关于颜色，我们主要有：蓝色、红色、绿色、橙色。其中大多数颜色我们都可以通过白色 + 颜色风格去做设计

比如橙色，其实就是橙色+白色就能去解决，我们可以看纷享销客它的设计页面

同样，绿色其实就是绿色+白色去解决，我们可以去看神策数据

大家发现他们的页面都是主题色只占其实一小部分，大多数情况都是以白色页面为主，这样就不会出现颜色冲突的尴尬。

而这里，最复杂的便是红色。

2. 红色

红色是我被问到次数最多的颜色问题。因为在整个页面当中，红色是与我们常使用的警告、危险等提示信息，所以这个颜色在我们设计当中是非常难处理的。

无论是页面当中红色与其他颜色的搭配，又或者是要将整体页面呈现出来，都需要你有过处理的经验才行。这里给大家分享两个处理红色主题色的小方法：

① 管理后台品牌独立：因为很多时候，我们管理后台/B 端业务，可以独立为一个新的品牌颜色，这样首先能够快速传达给用户产品线的变化，其次就能够巧妙化解红色所带来的尴尬。比如淘宝与千牛、京东与京麦。

② 红白搭配：如果第一种方法不能解决，那也就意味着红色确实没办法避免掉，那这时候我们考虑的就是在现有的基础上进行相应的优化。因此我们能选择的，可能就是红白配色，将页面进行绘制。

比如以百度爱番番为例，在品牌上已经确定是一个以红色为主的视觉形象，作为设计师，我们能够去优化的就是红色在整个页面的出现比例和出现位置。

而爱番番考虑的是将页面当中最主要的颜色进行呈现，其他的页面信息弱化，进行首先让用户知道，我们强调的主要操作信息究竟在哪？其次通过蓝色的穿插，能够保证页面当中除了红色为主之外，还会有其他的颜色作为补充（比如页面当中的蓝色）

四、常见误区

在 B 端页面设计时，哪些误区容易犯？

当然在我们设计当中，同样会存在对应误区，每一个误区大家都要竟可能避免

1. 圆角大小

圆角大小在我们设计时，千万不要过大，因为过大的圆角会导致整体的页面非常的“哇塞”。

因为我们在设计时，通常大小锁定在 2px-6px 之间，没有特殊要求一般在 4px 即可，这样能够保证整体的品牌调性，同时也不会有太多直楞楞的卡片分割

当然在去说圆角的时候，并不是我确定了一个圆角过后所有的页面都要保持一致，你可以在一些需要突出区分的地方，使用不同的圆角大小。

2. 字体大小

之前收到一个同学说，将字体大小设定为：16px、18px、20px，其实我们在实际的工作当中，字体的大小都是有严格限制的，通常为 12、13、14、16、18

除非你的承载设备、使用人群（年龄偏大）发生变化，否者这个字体大小不需要任何调整

3. 少看Dribbble

Dribbble 说实话，一定要少看，并不是说追波的内容不好，其实你能够在 Dribbble 当中学习到很多，比如一些元素的排版、样式上的微创新。

但是在 Dribbble 当中，出现的更多还是夸张的视觉风格，因此建议同学们平时在工作当中尽量少看Dribbble，这样能够让你的产出更偏向实际的工作风格

我平常使用Dribbble都是以了解最新趋势，然后 emmmm，（摊牌了，其实做了 B 端过后，很少再去看 Dribbble 的设计稿了频率应该是一个月看一次，仅此而已）

其实有时候 Behance 的页面真的要比 Dribbble 好很多，至少能落地一些。

结尾

B 端产品当中的视觉部分，其实对于我们来说就是一个页面的信息排版。排版的规则都已经有了固定的安排，比如：表格页、表单页、详情页、配置页、工作台页，而这些页面只要你能够将页面信息排列清楚，确定一个合理的设计风格，这就是一个非常合格的设计稿。

我们在设计时尽可能控制你的设计欲望，圆角、字体、风格上进行合理的控制，相信你能做出更好的设计页面。

欢迎关注作者的微信公众号： CE青年Youthce

免费可商用！优设鲨鱼菲特健康体来啦！

土拨鼠 — 2023-05-28

双 11 刚刚过去，作为电商设计师的你是不是已经开始准备双 12 的视觉稿了？过了双 12 还有新年主题等一系列设计等着完成，简直令人头大！

当然，想要快速完成老板布置的任务，一款趁手的字体是必须的。

可能每位设计师的字库里都存有很多字体，但是能用到的只有那几个，一是因为字体侵权问题，在设计师交流群里经常可以看到有设计师在询问“XX 字体免费可商用吗？”等问题，尤其作为电商设计师，很多电商产品宣传中使用了版权字体后不得不因为侵权全网下架商品。

二是设计趋势发展太快，虽然如今免费的高素质中文字体越来越多了，但老板、客户们的要求也千变万化，使得这些字体已不能再满足大家日益增长的字体需求。

所以，献给设计师们的新年礼物来啦！

由字绘中国发起，新零售健康轻食品牌鲨鱼菲特联合优设与字由，为广大设计师特推出了一款专为健康而生，电商应用场景极强的优质字体——优设鲨鱼菲特健康体。

近两年优设也陆续发布了 4 款免费字体，比如速度感和力量感兼具的「优设标题黑」、电商领域的宠儿「优设好身体」、风格可爱的「优设字由棒棒体」、标题黑的升级版「优设标题圆」，都成为了设计师们字体库中必不可少的宠儿。

在今年即将结束之际，优设及字由共同设计，并联合鲨鱼菲特品牌再次为大家推出的这款鲨鱼菲特健康体，是优设好身体的升级版，造型上要比优设好身体更具有辨识度，设计上更加贴近健康品牌附有的亲和力和现代感，不仅会成为电商设计的又一大助力，更体现了当下追求健康的年轻用户群体特性。

一、字体获取方式

1. 前往字由官网（ www.hellofont.cn）下载字由客户端（Mac 版、Win 版自行选择）；
2. 字由安装成功后，开启字由，打开 PS、AI 等设计软件，选择文本所在图层后，在字由客户端搜“优设鲨鱼菲特健康体”，点击右侧按钮激活，即可免费使用，安全高效。

二、免费商用授权介绍

三、字体设计介绍与应用

字体设计之初是作为健康轻食品牌“鲨鱼菲特”的品牌 logo 去创作设计的。在符合当下追求健康的年轻用户群体调性的同时保持了品牌亲和力。

现整套字体在原有圆体圆润的外观和优美的弧度下，对字形、笔画细节进行再设计，结构纵向拉长，体现健康体态的纤细匀称感；同时在一些笔划转角、弧度控制曲线让细节之处富有一些硬挺的视觉感受。使字体整体风格更轻快时尚又不失精致与稳重感。

应用效果展示：

电商页面应用展示：

文字组展示：

LOGO 字体展示：

鲨鱼菲特品牌是「常温即食鸡胸肉」品类开创者，连续五年全网鸡胸肉销量第一的品牌。目前累计用户已经超过 1200 万人，深受 Z 时代年轻用户喜爱。

正如鲨鱼菲特品牌合伙人，字绘中国主理人徐郑冰一样，一直在中国汉字领域坚持创作，对于字体有自己的深入理解。希望借由这次与优设和字由的合作，再次为新零售领域贡献自己的一份力量，助力健康新消费经济腾飞。

警惕！UX设计师别再习惯页面思维了！

柴林 — 2023-05-28

从页面开始思考确实是很多产品经理和设计师的思维习惯，但那很有可能是一种不良习惯。

现在，信息流、大弹窗、半浮层等等这些产品界面形式的发展，在逐渐消解用户的页面跳转体验。所以，如果我们还在单个页面、单个页面地提供设计方案，那很有可能并不是最佳方案。

页面，是 UX/UI 设计师理解产品，进入设计的方式，但长期用页面来思考设计问题，成就了 UX 设计师的自我束缚的思维盒子。

就像 Ralph Ammer 创作的这个动态图形，我们在相同的框架下思考和学习，这让我们快速入门和成长。但成长到一定阶段，就需要打破这个思维的盒子。但是你如果身处这个盒子之中，想要 Think out of box，是非常困难的。

二维生物无法像三维生物一样思考。很有可能，真正的好的设计方案其实是在你当前苦苦思考的这个页面之外。

更多设计思维：

页面，是一个有明确边界的二维平面载体。我们现在之所以还会觉得以页面来思考问题奏效，是因为手机和电脑屏幕是平面的。这个平面的载体，很有可能在可见的未来得到颠覆。

元宇宙可能太远，就在 VR 虚拟现实界面设计中，你觉得“页面”还会存在吗？

1. 设计职位的名称扰乱了设计师的心智，跳出单页思维框架，才能实现能力进阶

有很长一段时间，我总是喜欢思考一些最根本的问题，并试图对这些问题给出一个自己的答案。

比如，人怎样活着才算有意义？设计的价值到底在哪里？上班打工是为了做对的事情还是为了做老板认为对的事情……类似这样的问题中，有几个我很早就有了答案。其中有两个是：

归根结底，交互设计设计的是什么？视觉设计设计的是什么？

这两个问题，我五年前的答案是交互设计设计的是用户行为，视觉设计设计的是信息和情感。现在看起来，这个答案看上去也并没有什么问题。

我不知道各位做设计的朋友怎么看，问上面那样的问题会不会很无聊，可能明摆着的：UI 设计和 UX 设计设计的就是一个个页面，视觉设计设计的就是 banner、海报、开屏、长图。

以媒介的角度来思考设计，会有书籍装帧设计、UI 设计、3D 设计、IP 形象设计、VI 设计等等这样的门类。这种命名方式是以最终的交付节点而命名的，因为最终的交付媒介是 UI 所以我们就叫 UI 设计师。往往以媒介来命名的设计工作比较直接、也更方便入门，所以很多更资深的设计师在设计能力提升之后更愿意换一个其他的名字。比如做 logo 设计的会把自己叫做“品牌设计师”，后者一听，就感觉大了很多，也难了很多，也更接近设计的本质。

那么 UX 设计/用户体验设计呢？我们无法在最终交付节点交付明确的用户体验，因为用户体验不是一个具体的媒介，而是用户的感受，并且非常不可控。

UX 设计/用户体验设计（或品牌设计）更像是一种以设计出发点命名的职业，含义应该是为了塑造好的用户体验（或品牌体验）而进行设计工作的设计师。所以这个讲法本身是可以跨越媒介的，也是跨学科的。理论上，如果你可以做好一个在线就医的服务体验设计，也可以做好一个线下医院的就医服务体验设计。理论上，如果你可以成功地设计出一个打动用户的品牌形象，也应该懂得如何根据业务目标进行品牌营销 campaign 的策划。否则我们懂的就只是皮毛。

现在也有公司在使用“产品设计师”这样的职位，这个职位名称我觉得要比 UI 设计、用户体验设计都要好。因为它既不会让设计师局限在一张张 UI 界面上，也不会让设计师在“用户体验”这个又大又虚的词汇中迷失。

2. 警惕“页面思维”

UX 设计、UI 设计的前身叫做网页设计，PC 网页设计时代也讲用户体验，User Friendly 这样的理念在 PC 时代就是有的。在 UI 设计起始之时，设计师们习惯以页面为单位来理解需求、展开方案、进行交付。在 PC 时代，很多承接网站设计的设计公司也都是以页面为单位来计费，那时候讲的“页面”背后的含义其实是“网页”（Web Page），很多公司招聘设计师的 title 也是“网页设计师”。

虽然现在设计的名词变化了，但设计师仍然会以“页面”为载体来输出自己的设计交付物，时间一长，工具都会影响思维，所以设计师就自然而然的用“页面”来思考问题。

与此同时，随着智能手机和移动应用（App）的发展，iOS 和安卓迅速迭代自己的设计系统，在这一迭代过程中产品应用的设计与研发方式都得到了快速的发展，在 Apple HIG 和安卓 MD 的设计规范中逐渐取消了页面（page）这一概念（或者从一开始就没有，待考证）。

设计师和产品经理在谈到页面的时候，往往想到的是一个个单独的页面。但平台级的设计系统以及开发工程师们已经不这么思考问题了。

walling

比如我们看 Walling 这样优秀的产品设计，他强调 Folder、Wall、Section、Brick 这样的层级概念，而不强调 Page。当然你也可以把 Wall 理解为 Page，如果一旦这样理解，那就陷入到了“好，我现在要创造一个页面，然后用文件夹把页面归类一下”这样的思维里。

3. 原子设计理论中被忽视的中间步骤

早在 2013 年，前端工程师 Brad Forst 将原子理论运用在界面设计中，形成一套设计系统，包含 5 个层面：原子、分子、组织、模板、页面。原子理论时至今日在国内的 UX 设计领域得到广泛应用，在讲到设计规范的时候，90%以上的 UI 设计师的作品集里，你几乎都可以看到这张图。

原子理论让 UI 设计回到了界面设计的第一性来思考问题，通过颜色、间距、文本、圆角等最最基础的设计元素来逐渐塑造设计调性、建立设计秩序。

但大多数团队基本只做到了原子到分子，跳过了更关键的部分直接去组成页面了。但其实我觉得，原子理论最中间的“组织”，是与产品/业务联系更紧密、更能够发挥设计价值的部分。而在这部分，大部分设计团队投入的普遍较少。从而还是陷入了“原子分子组成页面，页面组成产品”的思维之中。

如果你认为是一张张页面组成了产品，那就说明你一直是在以“页面思维”来思考产品。你可以用页面思维来理解一个网站，但不能以页面思维来理解一个工具类 App、一个平台类产品。

Brad Forst 在 2013 年画这张图的时候还是把设计的落脚点放到了“页面(page)”上，因为他是一个前端工程师，并不负责客户端的开发工作。如果我们放着客户端的规范不管，拿着前端工程师的理论去跟客户端工程师去沟通，是不是有点不妥呢。因为时至今日，我们翻一翻 Apple HIG，根本找不到 Page 这个东西。

所以我们要不要想一想，9 年前提出的原子设计理论，现在是不是已经过时了呢？

4. “页面思维”的弊端

如果我们以习惯以“页面思维”来理解产品结构，以“页面思维”来思考用户任务，我觉得可能会存在几个弊端：

① 对用户任务的关注度降低

如果以单个页面来思考问题，容易忽略页面与页面之间的交互关系。用户完成任务是需要跨页面完成的；

② 对产品架构的理解单一

树状架构是容易理解的，但真实的产品架构是网状的；

③ 思考问题表面化

由内而外的思考没问题，由表及里的思考也没问题。但如果从表面思考，也从表面产出，只看到水面上的冰山一角，认为那就是全部，可能就会有问题；

④ 设计创造性力受限

Think out of box，页面是一个二维的有限的画布，盯着这个画布容易受到思维限制，妄图在这个有限的平面里解决所有问题是不切实际的。因为也有可能真正对的解决方案并不需要这个页面。

以上。

欢迎关注作者微信公众号：「柴林的设计笔记」

如何清晰量化设计价值？试试这个超实用的GSSM模型！

UX进阶 — 2023-05-28

编者按：本文通过实战案例，帮你掌握一个能量化设计价值的GSSM模型。

更多设计量化模型：

对阿社来说，渠道拉新的产品至关重要，这波自驱的设计优化 leader 们也尤为看好。

来自微信朋友圈渠道拉新产品

业务方：这个策略（图右），ROI可能不高，原因有三：

加图的话，需要有个配置后台，这样会牵扯到更多资源投入；
加图后屏效变低了；
这些内容前面的详情页应该展示很清楚了，是不是没有必要再展示一遍；

“有必要啊！用户还是想要再确认一遍到底买了什么。”

“文案不是一样能确认么？”

“有图没图不一样，有图更直观的表达咱们的课程价值啊！加上吧！”

“ROI 不高算了吧”

“加上吧！”

“算了吧”

“…”

最终以不欢而散收场。

阿社所遇到的问题，症结就在于缺少量化指标，凭直觉一定会被业务质疑和挑战。

如何解决呐？今天分享一个设计大招-GSSM 模型，让你更清晰的量化设计。

一、理论讲解

GSM 模型是 google 的用户体验团队提出的一套指标体系，该模型提出之初是为了衡量用户体验的，后来被广泛用在指标维度拆解上。

在 google 团队的 GSM 理论基础上，我增加了一个策略 S（strategy），会让整个思路更顺畅。

Goal 目标：从业务目标到设计目标；
Strategy 策略：即设计点，颗粒度可大可小；
Signal 行为现象信号：策略会让用户产生什么行为/会发生什么样的现象；
Metric 度量指标：多为数据指标。

以一个最简单的 banner 为例，大家都知道衡量 banner 的指标是点击率（CTR），为什么是它？

（如下图）同样的位置，UV 曝光是不变的，那么想要提升 banner 的点击率，就要去提升按钮 UV 点击数。

GMMS 模型在 banner 中的应用

日常项目中，达成一个设计目标，策略可能不止一种，于是模型抽象为下图：

GMMS 模型及 thinkflow

有了这个分析模型，咱们看看阿社的问题是如何解决的。

二、实践应用

业务既然看ROI，我们就需要找到策略②的衡量指标；
这个指标最好是现有的数据；
如果没有，需要想办法小成本验证（因为资源问题）；

OK，开始找指标。

阿社的假设很简单，加上实物配图（策略），可以让用户更清晰的感受到我们课程大礼包的价值，从而巩固决策，提升下单点击意愿（设计目标）。

我们继续推演。

有了实物配图，会对用户产生什么影响呐？

用户可能会觉得还真挺值的，想要看看还有哪些，于是点击展开全部。

而这个行为的衡量指标，就是展开全部的点击率。

到这里，指标找到了。

同样的指标，在线上也有，叫“展开”。

阿社赶忙找业务要了这个点位的数据，31.2%，关心的人还不少。业务看着数据，观点也开始了动摇。

阿社趁热打铁，建议可以拿一个固定的 sku 来试试，不用配置，前端写死就成。成本确实非常低。

自然，问题解决了，方案顺利推进了下去。

AB 上线后，新版提交按钮转化比旧版提升了 20%，而展开全部的点击率，也提升了 33.3%。

凭借着 GSSM 模型，阿社成功证明了自己的设计价值！

三、理论进阶

以上是一个很小的案例，为了让大家方便理解。

高阶设计师所面临的不单单是一个页面那么简单，更多是一些复杂的链路/漏斗。于是在 GSSM 之前，有了 Pageflow（页面流/漏斗）。

既然已经掌握了 1 个页面的设计价值如何验证，那么遵循同样方法，一整个漏斗也不在话下。

但问题来了，所有的设计点都要去验证么？一个大型项目，交互的设计点、UI 的设计点无数，也验证不过来啊。

答案自然是否定的。

凡事要有重点，找到关键的业务指标，花更多的精力去打磨你的设计点，解决关键的问题，拿到好的数据指标。

这个设计点，才是所谓的“设计亮点”。

写在最后

今天的大招分享先到这里，能坚持看到这里的朋友，是真的爱学习呐~ 送上文中出现过的全套模型源文件，点击链接查看。

「GSSM模型」送上：https://mastergo.com/file/77346290571188

5000字干货！超全面的B端设计指南：消息通知

CE青年 — 2023-05-28

消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？本文就来说说消息通知组件的具体使用。

上期回顾：

一、消息通知的定义

具体有哪些组件是消息通知

我查阅了各大设计系统[1]，发现它们对于消息通知的定义都叫做“反馈”，即信息反馈给用户的形式。而在其反馈的组件当中，会包含有：全局提示（Message）、通知提醒框（Modal）、气泡确认框（Popcomfirm）、对话框（Modal）、抽屉（Drawer）、进度条（Progress）、结果页（Result）、加载中（Spin）、骨架屏（Skeleton）

但由于组件太多，我们把系统当中用到最多的消息通知部分单独拿出来分析，剩余部分则放在最后去做解析。

对于反馈的内容来说，系统当中会存在正面、负面、普通三种不同的反馈情绪，比如

你的账号已经过期，对于系统来说他就会提供一个负面的消息通知组件，因此我们会对消息通知的类型进行一个简单的分类：

正向主要包含有：全局提示（Message）、通知提醒框（Modal）、气泡确认框（Popcomfirm）

负向主要包含有：警告提示（Alert ）、对话框（Modal）、通知提醒框（Modal）

当然大家一定要记住，关于正向和负向的类型，它并不是绝对的，只是大多数情况下它的情绪与这个相关。

[1]查阅的设计系统包含：Element、Arco、Ant、Lightning...

二、消息通知的设计

关于消息通知究竟有哪些

为了让所有同学能够快速直接的了解消息通知的设计形式，我们尝试去“测评”，将目前的所有消息通知组件，然后按照：「操作干扰度、反馈消息的强弱、出现位置」三个维度来对消息通知进行分类，从而得出消息通知设计当中，它们的差别究竟在哪？

信息展示量：

信息展示量表示组件能够承载多少信息内容。因为不同的组件它们的使用环境本身并不相同，我们可以通过原子的划分大致归纳为：图标、文本、链接、按钮、容器差别。

操作干扰度：

操作干扰度主要是对用户当中操作会不会产生相应干扰，比如一个全局提示和一个对话框，它们对于用户的影响程度是完全不一样的，因此会使用干扰度进行判断。当然操作干扰度这个维度过于主观，我们又将其细分为：持续时间、是否阻断、信息来源三个方面。

持续时间：用于表示这个组件在页面当中究竟需要停留多久时间，这样能够帮助我们判断其干扰程度。

是否阻断：页面当中是否会出现蒙层用于阻断用户注意力。这也是判断干扰程度的重要指标。

信息来源：这条内容主要来自哪里，分为系统、用户两种来源方式。

出现位置：

这个组件究竟会在哪一个地方出现，主要考虑它们的呼出方式，以及对应呈现内容，能够帮助我们快速理解。

1. 全局提示丨 Message

全局提示在用户执行操作时，不会中断当前用户操作的前提下，通知提示一条简短的消息。

它在整个 B 端系统当中使用的频率非常的高，比如：我们在填写一个表单过后，就会收到全局提示；修改完一个信息过后，会收到一个全局提示。

而它在使用过程当中会有以下几个特点：

信息展示量：

全局提示只会展示：图标、容器、提示文字，相对来说它展示的内容较少，是一个非常简单的组件类型。

在实际工作当中，因为它内容量少，更多提示用户的便是正确的操作，比如已添加成功、编辑成功、保存成功等正向情绪。

操作干扰度：

关于干扰程度，我们刚才讲到一共会有三个判断依据，因此我就从这三个方面来去判断具体提示的干扰程度。

持续时间：非常驻，一般 3-5s 即可消失
是否阻断：否
信息来源：系统收到用户操作后的提醒

出现位置：

全局提示因为其内容较少（图标+文字），因此很多时候需要出现在较为显眼的位置。

我们在使用全局提示的时候，基本上都会出现在页面顶部居中的位置，通常距离顶部的距离为 40-60px。这个位置大概率是顶部导航与页面内容的交汇处，不会影响用户的使用。

注意事项：

关于注意事项，其实就是我们在实际工作当中，还需要去考虑的一些小知识点，我们将其汇总到此：

① 全局提示一共会有五种样式类型，分为是：指南提示（Info）、普通提示（Normal）、成功提示（Success）、警示提示（ Warning）、失败提示（ Error）。

这时候，认真的同学可能会问：老师，你刚才讲了全局提示不是表达正面的结果吗？怎么还会出现警告、失败等信息呢？

原因主要是失败也要分很多种，比如在一些小的操作时，你确实不能提供对应的功能，就可以展示警告信息：

② 全局提示“一般”不会存在关闭入口，因为它可以自动消失，不提供给用户关闭入口还会让他知道，这个通知本身就会自动消失。所以很多情况下可以忽略关闭入口这个选择。

③ 关于它的停留时间，我们可以在设计系统当中的 API 里进行自定义，通常 3s - 5s 即可。在去做组件时，一定要去看组件的对应开发文档，了解这个组件究竟支持哪些自定义功能（拒绝被开发忽悠）

④ 全局提示在短时间内，可以提升多次，多次提示时，按照先后顺序从上往下进行排列

2. 警告提示丨 Alert

警告提示常驻于页面中，用于表示持续性的提示信息。多用于危险、警告、紧急等负面情绪当中。

在实际工作当中，因为它的特殊性，一般会用在系统、全局性的危险通知上。比如你的订阅时间已超时、账号团队即将解散等通知上。

信息展示量：

这里警告提示会比全局提示展示的信息更多，它主要包含：图标、提示文字、辅助文字、按钮、关闭入口

操作干扰度：

持续时间：常驻，需用户点击关闭后才会消失
是否阻断：否
信息来源：系统收到用户操作后的提醒

警告提示的常用场景：多用于警告、危险等情况，需要提醒用户，引起他们的注意。比如提示欠费、需要充值

出现位置：

因为其需要常驻，所以通常在设计时候，我们会将它放在模块与模块之间，进行展示。这样既不会影响到其他内容呈现，同时自己又能常驻。

注意事项：

全局提示主要呈现警告、紧急的消息通知，如果想通知一些普通消息，完全可以使用通知提醒框来进行提示。
全局提示主要是在模块与模块之间去做呈现。

3. 通知提醒框丨 Notification

通知提醒框在页面当中，主要是以互动的消息为主，全局展示通知提醒，将信息及时有效的传达给用户。在实际的工作当中，通知提醒框主要用来提示互动等有价值的信息。

信息展示量：

这里通知提示框主要包含：标题、辅助文字、按钮、关闭入口

操作干扰度：

持续时间：常驻 / 3-5s 消失
是否阻断：否
信息来源：用户与用户之间的互动、系统通知

出现位置：

在整个通知提醒框的使用过程中，因为它本身就是与用户之间的互动所产生的，而这种活动就如同在桌面端当中你收到的消息，我们会将其归纳到右上角的位置去做呈现。这样既不会太影响用户，同时也能够保证消息通知的及时性。

4. 气泡确认框丨 Popconfirm

气泡确认框是我们在工作当中使用频率相对较低的组件。它能够通过组件当中的卡片，完成与用户的快捷对话，但是由于在实际的场景当中，对话确认是需要强提示的方式，因此总感觉气泡确认框在它的使用上，有着些许矛盾。气泡卡片轻量、不易干扰用户，但是对话框要求阻断意味更强。

信息展示量：

首先我们从信息展示量来说，气泡确认框主要由触发器、气泡卡片、图标、文本、按钮操作，五部分组成。

在设计时需要格外注意，气泡确认框本身不能够过于复杂，否则在一个气泡卡片当中，就显得格外拥挤。如果信息过多，就考虑使用对话框来进行呈现与优化。

操作干扰度

持续时间：用户点击触发器后才能展示，操作过后即可消失。
是否阻断：否（气泡卡片不会存在阻断的情况）
出现位置：跟随触发器位置进行呼出，通常会在触发器的上方来进行展示，如果触发器位置靠近边缘，则考虑移动到其他位置进行调整。

5. 对话框丨 Modal

对话框在整个系统当中非常重要，因为你会发现在整个系统当中或多或少都会有它的身影，比如一个常见的数据录入表单，它的整体感觉和对话框较为类似；又或者是一个穿梭框，你会发现也有异曲同工之处，因此我们先来看一下对话框究竟是什么？

对话框主要用于信息确认与信息录入，使用对话框会中断用户当前的任务流程，同时会对用户造成些许干扰，因此在使用的时候，我们都需要非常谨慎。

操作干扰度：

持续时间：常驻，需要操作完信息后，点击提交才会消失
是否阻断：是，通过黑色蒙层的方式，让用户聚焦于表单内部
信息来源：根据预设的内容，进行展示
出现位置：位于整个页面的中部，主要目的能够让用户聚焦于内容，减少分心。因为对话框的出现，用户必须操作完对应信息过后才能够进入到下一个环节，因此它在整个流程当中非常重要。

对话框的类型：

在整个对话框的展示当中，你会发现它主要分为三部分，分别是 Header 标题位、Content 内容部分、Footer 底部操作位，而在这三个部分所组成的内容当中。

其中由于它的用途不同，我们可以将其简单的分类为：确认对话框、消息提示对话框、功能业务对话框

确认对话框：展示对内容信息的二次确认，这样能够减少用户的误操作，降低操作风险。主要差别是内容部分以操作过程会出现的问题为主来进行展示。其本质就是一个二次确认的过程，需要用户去做出判断，它要比气泡确认框更加重要，阻断性也更强。

消息提示对话框：展示对应的状态提示，比如当你删除掉一个知识库这种重要操作时，我可以通过消息提示对话框来将成功或者失败的消息展示给你，并且也能够让用户知道问题究竟出现在哪里。其本质就是一个消息状态通知，只是更为重要。

功能业务对话框：将 Content 内容部分进行优化，用于展示更多复杂信息，比如各种复杂信息录入（输入框、单选、多选...）以及各种信息呈现，它能够通过功能业务对话框，去完成很多业务要求。同时使用弹窗的形式，能够帮助我们不脱离当前业务的前提下完成更多操作。当然在实际工作当中你会发现，它能够承载的内容是非常多的，比如步骤条、Tab 标签、各种选择录入，因此我认为这种类型的对话框本质上就是一个容器，可以去承载很多内容。

更多注意事项就是弹窗部分的内容，比如尺寸宽度究竟是多少、高度为多少，是否有蒙层等等... 如果不了解，可以去查看弹窗这篇文章。

三、组件的差异对比

了解组件的差别

为了让同学们能够快速了解这几个组件之间的差别，我们尝试把刚才提到的这么多组件进行相应的对比，分析一下其中差异点。

1. 全局提示与警告提示

首先这两个组件在设计样式上是非常相似的，并且本身使用环境差距不大，因此很容易把这两个组件进行混淆。其实我们可以从多个方面去进行对比区分：

全局提示不建议使用关闭入口
全局提示优先级更低，主要提示非紧急通知；警告提示则提示更多紧急需要用户立马操作的通知
全局提示会停留 3-5s 后自动消失；警告提示则需要操作后消失

2. 气泡确认框与对话框之间的差别

这两个组件之间，同为用户二次确认的组件类型，但在实际的业务当中有着重要级之间的关系。

气泡确认框相对适合阻断流程意味不强的情况，它更为轻量。对话框反之
很多时候气泡确认框会成为对话框的二次确认方式，这样能够避免出现弹窗套弹窗的尴尬局面

四、消息通知的优化

了解除了传统组件之外的通知方式

我们在去理解消息通知的时候，往往不能够只去看待消息通知本身的组件形式，最终的目的一定是让用户能够更快速、直观的了解到他所关心的内容，因此在设计上，我们可以进行对应的优化。

1. 声音提示

因为我们大多数 B 端产品都是采取网页端的形式进行内容呈现，因此往往会忽略通知提示当中的声音部分。虽然我们在网页端，但是也能够通过播放声音 + 页签的信息通知（你有一个新消息，注意查看），让用户知道他有重要信息需要处理，这样也能间接达到目的。

2. 多端联动

大多数 B 端产品，都会遇到系统当中主要都是聚焦于桌面端，移动端的体验几乎为零。因为很多产品目前的移动端都是使用小程序解决，那通知就变得更加困难，这时候其实可以尝试用一些通用方式打通设备限制。比如我们可以尝试发送微信订阅号推送系统通知，这样既能够保证用户日常的使用习惯，同时进行多设备间的联动。

再举一个例子，比如在日历模块，其实就可以通过日历本身的 CalDAV 帐户，来实现多设备间的日历联动，这样就能够保证桌面端不是一个孤岛~

3. 通知分类

通知本身就是高触发的一个场景，就类似于手机的短信一样，会存在大量的冗余信息。因此我们再去设计通知的时候，考虑到不同的通知类型一定要采取不同的处理办法。

而想要在工作当中做好这件事，必须先将系统当中所有的通知信息进行整理，从而将其进行分类，分类规则大体遵循：用户之间互动＞用户系统互动＞系统系统互动。

因此作为 B 端设计师，组件之间的差异一定要重视起来。

结尾

消息通知就像是我们用户与系统、用户与用户之间的一个桥梁，而各种消息通知能够让我们用户知道操作是否正确。也正是很多设计系统讲的原则：操作之后有反馈，你的反馈内容是什么，就会直接决定我是否敢于去操作。

欢迎关注作者的微信公众号： CE青年Youthce

简单又实用！5种设计师必学的海报设计装饰元素（二）

夏花生 — 2023-05-28

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

上一期的文章发出后受到很多小伙伴的欢迎，那今天继续为大家带来 5 种海报常用装饰元素设计的小技巧，本期的元素分别是：环绕文字、黑白方格、条形码、进度条(能量条)和文字警戒带。

一、环绕文字

将文字排列成特定的线型，让其环绕在画面主体周围，既可以平衡版面，也能打破原本的二维平面，营造一种立体空间感，我们可以将它看做是一种升级版的环绕线。这种文字环绕的效果可通过 Ai 中的「路径文字」或者「3D」功能来实现。

海报中的文字环绕应用

方法一：路径文字工具

路径文字在版式设计中经常被使用

方法二：3D-凸出及斜角工具

使用「路径文字」制作出的文字是扁平的，另一种具有立体感的环绕文字需要使用「3D-凸出及斜角」功能来实现。基础操作步骤见下图，也可以戳下方链接看进阶版视频教程：

立体环绕字进阶教程： https://uiiiuiii.com/photoshop/1212449713.html

二、黑白方格

犹如棋盘般规整的黑白方格是一种非常经典几何图案，常在酸性潮流海报中作为小面积的装饰图形，也作为作为背景图案，下面为大家介绍一种快速制作黑白方格的方式。

三、条形码

条形码自带现代工业的设计气息，在未来科幻风及机能风海报中有广泛运用。但是我们不需要自己在 Ai 里画一条条粗细的线，直接利用在线网站生成就行了。

条形码生成网站： http://t-x-m.com/

黑白方格、条形码及进度条元素在海报中的运用

四、进度条/能量条

进度条和条形码一样都是科技感和机能风设计中常用的装饰元素，下面为大家介绍几种常见的样式及简单快速的制作方法。

五、文字警戒带

文字警戒带在海报中通常有这几种用途：一是沿着画面边缘围 v 在海报四周，可以聚焦视线压住整个版面；二是横穿中部或底部，可平衡版面，丰富画面层次；在长图海报排版中，也可以起到分隔不同内容的作用。

文字警戒带的制作方法并不困难，使用混合工具可以快速实现复制多个相同设计元素的效果。制作过程中一是要注意字体，要选择与海报风格一致的；二是可以添加一些星形、线条、标点等符号元素，丰富设计形式。

混合工具入门教程： https://uiiiuiii.com/illustrator/1212279801.html

以上就是第二期的海报装饰元素设计技巧推荐，希望对大家的设计有帮助~ 喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~

6000字长文！超全面的互联网IP设计指南

飞凡实验室 — 2023-05-28

近年来品牌 IP 形象几乎成了互联网企业的标配，比如有阿里动物园、京东狗、鹅厂，好像每个互联网品牌都要有一个吉祥物，那什么样的平台需要 IP 形象？需要怎么样的 IP 形象？IP 如何赋能品牌？IP 如何变现？是我们在设计 IP 的时候，经常面对的灵魂 4 连问，今天我们就来带大家一起揭开 IP 吉祥物的面纱。

更多IP设计基础：

一、什么是 IP?

1. IP 的定义

IP 全称 Intellectual Property，译为知识产权，这是法律范畴的定义，IP 是法律对于劳动成果和知识产权的认可，电影、漫画、游戏、吉祥物本质都属于 IP 的范畴，IP 的范围很广，在文章开头讲的 IP 形象只是属于其中的一种类型。

2. IP 的五种类型

在研究市场中的 IP 类型之后，我们可以发现，市面上的 IP 主要分为以下 5 种类型：

① 形象 IP

形象 IP 主要依赖于形象展开的故事类型，比如我们前面提到的 IP 吉祥物就属于这种类型，它更多是基于某个角色形象来进行商业的变现，此形象在人们心中有着很深的印象。

比如：Hello Kitty、米老鼠、唐老鸭就属于形象 IP，它们在商业模式上拥有极大的用户群，衍生产品很多，IP 本身的内容创作较少，更依赖于授权的商业模式。

② 人设 IP

人设 IP 围绕着的是人，我们经常会听到这样的描述“某某明星人设崩塌”，也就是指的你在人们心目中塑造的人物形象，他们的故事、经历、性格、言行...组成了一个鲜活的人设。比如：雷军（小米创始人、敢于挑战苹果的中国企业家）董明珠（格力董事、做事雷厉风行、威严、严肃认真）

③ 世界观 IP

即世界观 IP，则更为宏大与复杂。世界观意为客观世界的设定，包含地理位置，时间，人种，宗教，建筑，艺术等等同样地，这类 IP 也有人设和故事，但内容会更关注世界观本身，IP 内容的世界观构建占比较高。比如《哈利波特》《冰与火之歌》《指环王》都是典型的世界观 IP，指环王人们很难准确的说出某个具体角色的名字，但是指环王中构建的宏伟的中土世界却是我们印象最为深刻的

④ 故事 IP

漫画、文学作品本质上都属于故事 IP，好的故事 IP 要么是能够打动人引起共鸣，产生启迪，具有持续产生价值的能力，比如鬼吹灯系列故事、安徒生童话、一千零一夜、格林童话...都属于故事 IP，人们会因为它的故事去购买这些纸质的书籍、音频、影像。

⑤ 文化 IP

文化 IP，指一种文化产品之间的连接融合，是有着高辨识度、自带流量、强变现穿透能力、长变现周期的文化符号。近年来，在国家实力日益增强的背景下，年轻一代具有更强的文化自信和民族认同，传统文化不再是遥远的文化古董，而是深受年轻人喜爱的潮流语言和社交符号。年轻人对“国潮”的热情使得文博 IP 蓬勃发展，文博类 IP 频频“出圈”，前有故宫博物院文创周边供不应求，后有敦煌博物馆异域文化元素频上热搜。

二、IP 的商业价值

1. 传播价值

互联网时代，IP 形象在品牌价值观传播中扮演的角色越来越重要。IP 形象作为一个品牌内核与价值观凝聚精炼和具象化后呈现的视觉符号，本身就可以作为品牌本身的代名词参与到品牌传播当中去。IP 在品牌传播方面具有天然的优势，一方面,IP 形象能够让用户快速建立品牌联想与品牌识别；另一方面，IP 形象是代表品牌的超级符号进行传播，其实质也是新时代下出现的虚拟的品牌代言人，它也是消费者和品牌沟通的桥梁。

2. 角色价值

孙悟空大家都知道，几乎 14 亿国人都知道他，他的角色可以衍生出各种文化、影视作品，几乎他可以链接各种产品，他的角色价值就是巨大的。

3. 文化价值

中国有众多文化的隗宝是值得被挖掘的，比如近些年来，故宫深挖品牌历史故事，通过年轻化的表达方式去述说故宫的文化故事，还有国潮受到新一代年轻人的追捧，这都说明文化的魅力和巨大价值。但是不管是新文化还是旧文化，都要以年轻人的方式去和他们交流，才能够让他们感受到并且喜爱。

4. 精神价值

我相信大部分的人小时候都读过安徒生童话，里面精彩的故事启迪着我们的童年，甚至影响着我们的说话做事的方式，这就是 IP 所带来独特的精神价值。

5. 市场价值

从这份收入榜单可以看到，成功的 IP 不止在单一的产品上产生市场价值，而是全面开花，衍生到各个领域。比如漫威、哈利波特衍生的内容包括了游戏、动漫、电影、商业授权...

三、IP 的 7 大设计趋势

1. 品牌 IP 人格化

IP 人格化就是通过贴近目标人群，在其所在的圈层形成共同的归属感和认同感，建立起人格化的形象。IP 人格化更加能够形成记忆，对人物故事也更加容易消化。比如熊本熊是日本非常杰出的 IP 人格化案例，熊本熊它有着人一样的职位，角色定位是熊本县的旅游局局长，它有着呆萌的人格化表情，经常不按常理出牌，是不是就像你身边的二逼朋友一样。

2. IP"网生"化

网生英文名称是 netlife，意为网络人生，意思是指 95-00 后的年轻人群，他们一出生就在网络大爆炸的年代。而所有的品牌都在面临着如何去和这群网生代的人群去沟通交流。比如伊利推出的 Byebye 君，其实就是在让品牌和网生代的年轻人直接对话，针对年轻人，它衍生出了很多的表情、漫画等众多的内容产品，通过这些与年轻用户进行深度的绑定。

3. 情绪化 IP

情绪化 IP，就是利用情绪迅速绑定消费者，这种因为情感而产生的购买动机就是情感营销的结果，所以 IP 设计也需要考虑情绪，尤其是年轻人的情感化表达，好的 IP 是有强烈的情绪代入感的，比如喜茶、丧茶的走红，能够看到品牌里的情绪化表达，还比如知名白酒品牌江小白，它火出圈的表达瓶，还有瓶身那个插裤兜里潇洒年轻人的插画，都在述说了年轻人的情绪。

4. 科技+IP

经典的 IP 和科技的结合让其可以更加时尚的走到更广泛的年轻人身边，为传统的 IP 赋予科技的属性。比如，北京的龙泉市推出了人工智能机器人贤二和尚，贤二 IP 本身就有很广泛的内容基础，再加上科技的加持，传统和科技这 2 者的碰撞，让人们产生了浓厚的兴趣。

5. IP 跨界联盟

现在很多的品牌都在借助 IP 进行跨界营销，寻求强强联合的品牌协同效应，以实现 1+1＞2 的的营销，跨界最重要的是要找到 IP 和品牌深层次的内涵和精神价值的对接。比如前段时间瑞幸与椰树的联名频频刷屏各大网络，一个主打椰奶的椰树，一个凭借超人气单品“生椰拿铁”大火的咖啡品牌瑞幸，两大玩椰子的品牌强强联合，推出了生椰新品；小黄车 ofo 和小黄人的联合营销，不仅能带给共享单车的情感体验，在视觉上也有高度统一，还能共享认知和共享粉丝，这样契合度高的合作才能创造社交媒体扩散效应。

6. 明星 IP

明星 IP 的次元破壁就是通过明星 IP 的次元以及虚拟形象打造，让明星本身的 IP 赋能到虚拟 IP 上，从而减少了很多的传播成本。可以看到现在很多明星都在跨界做商业，比如黄磊的黄小厨，黄渤的黄逗菌，需要提醒的是，即使有明星 IP 的赋能，但是要保持持久的生命力，内容和产品的打造才是持久的秘方。

7. 传统文化 IP

随着花西子、故宫等文化 IP 的爆火，可以看到年轻人不再崇洋媚外，拾起的是年轻人的文化自信。这不仅仅在于年轻人的变化，还在于传统文化在以新的形态重新与年轻人进行对话。比如“中国诗词大会”“朗读者”将传统文化转化新的语境和新的表达方式，与当下的用户进行沟通。

四、品牌 IP 设计需要考虑的5个重点

1. 塑造特色

相信大家都有这样的感受，在一个班级里面最令人印象深刻的是头尾的 2 拨人，要么是学习很好的，要么是经常在课堂捣乱，调皮捣蛋的刺头，最不起眼的就是中间的那波人。这就反应着一个问题，有特点有性格的人是最令人印象深刻的，同样 IP 塑造也是一样，我们从人物的形象到性格都需要塑造独特的特色。比如小黄人大眼呆萌的胶囊造型，还有它那呆、傻、贱、萌的行为，令人印象深刻，它甚至抢了主角的光环。

2. IP 符号化

一个图形、一个表情、一个动作都有可能成为令人印象深刻的经典符号，因此在塑造 IP 的时候，我们应该想办法为 IP 注入鲜明的符号，总结下来有以下集中类型:

第一符号化形象，越简单的越好识别，比如天猫的猫头被应用在各种场景下，拓展性和记忆性非常强，还有米老鼠，一看轮廓就知道它是米老鼠了。

第二颜色符号化，颜色也可以是专属的代表，比如蒂芙尼蓝，蓝色成了它专属的符号

第三符号化动作，每一个超级 IP 都需要属于自己的动作符号，你可能记不住他的样子，但你一定能记住他的 Pose，当你看到它的 pose 和剪影，脑袋就有画面了。

3. 制造冲突

在文化、角色、故事和细节的设定上，多制造些戏剧性的冲突可以让你的 IP 更加令人印象深刻。如果你走在大马路上，突然有一处地方吵起来了，基本上就会有很多人围观，同样在 IP 的故事情节设计是一样的。大家可以多去看看小黄人的电影《神偷奶爸》，在情节的设计上就制造了很多冲突，这个角色的塑造、冲突的制造堪称经典。

4. 赋予情感

IP 也需要和我们的用户建立情感的链接，这样 IP 才会有持久的生命力。IP 可以通过人设和故事，激发用户的情感和内心深处的共鸣，也可以通过语言、文字和用户进行情感的互动。比如，江小白的表达瓶其实就是在诉说着年轻人的生活和故事，大部分的年轻人看到了都会有很深的情感共鸣。

5. 赋予文化内涵

这里指的文化内涵，并不是单一的传统中式文化、国潮，因为不可能所有的产品都要走国潮的路线，而指的是广泛的文化，比如嘻哈文化、饭圈文化...文化就好像是一个社群，这里聚集了很多相同类型的人，文化的加持是走入圈子的最好方式。

五、IP 设计流程

IP 几乎是互联网设计师的必备技能，那么设计师如何才能产出好的设计呢，一套品牌 IP 的设计流程往往包括以下五个步骤：探索定义——创意设定——应用拓展——规范建立——升级进化。

1. 探索定义

在 IP 设计开始之前我们需要进行详尽的调研分析，这个步骤的目标是如何传递品牌 IP 的故事理念，打动目标用户，形成情感的共鸣，所以我们要思考以下这几个问题

① 背景调研

我们设计 IP 的目标是什么？帮助品牌传播、展示企业形象、塑造单独 IP？目标用户是哪些？

② 文化内核、文化共识

品牌 IP 文化的来源于哪里，企业文化、用户，还是其他的？

我们希望这个能够和我们的目标消费群体形成何种共鸣？如何打动我们的用户？

③ 主题故事

IP 传递的是何种主题？

④ 竞品差异

我们的竞品是哪些，希望 IP 塑造何种差异？

2. 创意设定

角色的设定，我们可以考虑 3 个点：角色、场景、故事

① 角色 - 有趣、特色、呆萌、夸张

有趣、呆萌、特色、夸张，经常是我们在塑造有记忆点角色时要提起的几个关键词，你可以看看身边有特点的人是不是也都具备了这其中的几个关键词，同时在角色塑造的时候我们要考虑的几个设计要点：造型、表情、服饰、质感，这也是设计师需要具备的基本技能要求

造型

独特的造型能够令人印象深刻，比如小黄人、大白、Kwas、大眼仔都是比较成功的 IP 形象，在一众的 IP 角色中造型最为突出，所以我们在造型设计上尽可能有记忆点，这样就能够减少更多的传播成本

表情

一个好的角色表情能够凸显 IP 性格特征，起到画龙点睛的作用，而不是千篇一律的大眼睛、微笑。

服饰

服饰的设计也是在 IP 设计中需要考虑的，服饰对塑造人物性格、交代人物角色、突出业务属性有着很重要的作用，比如，体现科技，用机器人的服饰；体现文化，用传统中式服饰；体现运动，用鸭舌帽、运动衣来呈现。

质感

质感对 IP 的美感起着非常重要的作用，这也是很多初级设计师在设计 IP 的时候最容易忽视的地方，很多人很难理解什么是质感，总结下来能够提升界面品质感的视觉表现就是质感，比如设计中常见的：毛玻璃、渐变、光影、3D、2.5D、金属，可以看到下面的 2 张对比图，都是文旅 IP，左边没添加质感感觉就是小学生设计出来的一样，给人粗制滥造的感觉。

② 场景 - 让角色形象更加立体

塑造场景的目的是为了让我们的角色在场景中进一步的刻画，也有助于用户更加立体直观的去理解人物，快速的将我们的文化理念传递给用户

③ 故事 - 快速传播的密码

在日常交流中，讲故事是我们快速获取信息和抓住中心点的常用方式。故事能让人们分享知识和情感，找到自己与所在群体中的位置，并理解周围的世界。

在探索定义到创意设定的这 2 个阶段我们可以用这样的一个品牌 IP 探索 6 宫格系统来探索和定义我们的 IP 角色（注：这个 IP 的模型基于赤犬制造所的《品牌 IP 源设定系统》）

接下来前段时间做的高途课堂 IP 概念改版的案例带大家了解下如何去使用这个模型：

品牌源点：科技让教育更美好，通过梳理了高途课堂的品牌人格模型中，我们看出高途课堂品牌是一个温暖、活力、充满想象力、不断探索、不断进取的形象，其中高途课堂的品牌 slogan 叫做“科技让教育更美好”，科技代表了未来，对于教育行业来说，启发孩子去探索去思考也是每个教育平台、每个老师的使命。

文化特征：探索未来，充满想象力，构建一个热爱学习、不断创新、勇敢探索未来世界的启发式课堂

文化共识：好的教育是启发探索，新时代的年轻父母群体，他们大多数都接受过比较好的教育，他们认为教育应该是德智体美劳全面发展

品牌角色：马+独角兽，途途是一只温暖、开朗的独角兽，它充满了想象力，勇于探索和发现，在它世界是对未来的憧憬，而马也有着前途似锦、马到成功的美好寓意

风格表达：温暖可爱，塑造一个温暖可爱的品牌 IP 形象，就像孩子身边的朋友、小宠物一样

场景故事：探索未来星球，希望能够构建一个未来的教育世界，启发我们的孩子去学习去探索，整个故事主题围绕着途途如何通过不断学习、不断思考一步步走向未来太空宇宙的故事。

3. 应用拓展

角色设定完了之后，就需要将品牌进行拓展应用了，品牌 IP 的拓展应用场景，我们主要可以分为这 5 种类型：品牌传播、品牌运营、产品体验、企业文化、文创内容

4. 规范建立

建立 IP 规范的有 2 个目的，一是让 IP 的应用能够保持统一规范，二是提升效率，在互联网的设计团队经常会将 IP 进行素材库和组件库的建立，比如顺丰的设计团队对新改版的 IP 常用的动作、表情、服饰，都搭建了规范的素材库，方便日常运营的随时取用。

5. 升级进化

IP 的设计不是一成不变的，我们需要在市场、企业业务的调整、用户的反馈...中进行不断的变化，来适应市场和消费者的变化，比如 QQ 的企鹅、米老鼠都是经过了数次的变化才有了今天的样子。