今年的双十一刚刚落下帷幕，“她经济”再度成为热词。天猫称今年天猫双11交易规模与去年持平，纵使整体消费略显疲态，但“她经济”相关品类却依旧强劲；抖音电商数据也显示，女性购买力远超过男性，女性护理行业销售实现高增长、高爆发…… 要知道，曾几何时，消费市场和各种品

如今，“她经济”已经成为了一股热潮，各大品牌都在打“更懂女性”的营销牌。但这些品牌真的懂女性吗？本篇文章就以运动服饰、汽车和酒水市场为例，分析这些品牌们是通过什么来吸引女性消费的，感兴趣的朋友快来看看吧。

今年的双十一刚刚落下帷幕，“她经济”再度成为热词。天猫称今年天猫双11交易规模与去年持平，纵使整体消费略显疲态，但“她经济”相关品类却依旧强劲；抖音电商数据也显示，女性购买力远超过男性，女性护理行业销售实现高增长、高爆发……

要知道，曾几何时，消费市场和各种品牌曾一度“看不见”女性。

比如，运动服饰市场上，由于以男性消费者为主要销售对象，安德玛吸引女性用户的方法为“简单粗暴”地将男性产品“号码缩小并变为粉色”；被冠以”速度与激情”标签的汽车市场，也向来与男性强相关，车企长期偏爱男性，忽略女性；而酒水市场，更是常年以男性为消费主力军，在各大酒水品牌的广告中，酒总是“男人的加油站”……

而时代变迁，市场更迭，“她经济”、“女性消费”和“女性营销”等如今却成为了一股热潮。从内衣、美瞳、彩妆等女性消费者为主的行业，到运动品牌、新能源汽车品牌和酒水品牌等原本忽视女性需求的行业，都开始瞄准女性消费红利，大打“更懂女性”的营销牌。

不过，“她经济”的内核理应是对女性需求的深度挖掘和尊重，不少品牌却只想靠营销分块蛋糕……

一、女性运动服饰：“细腰”、“翘臀”和“美腿”都标好了价格 “女性运动服饰是怎么打造的呢？缩小尺码，变成粉色。”

“在男性产品上系上了一个粉红蝴蝶结，就宣布大功告成了。”

……

这是曾经的运动服饰品牌对待女性用户群体的态度。而如今，早已时过境迁。

女性正成为运动市场的新消费主力，国家体育总局《2021年大众健身行为与消费研究报告》显示，女性体育消费显著增长，平均总消费达到6362元，相比去年增幅近50%，在购买健身卡及私教课程等方面显著高于男性。而CBNData《线上运动市场女性消费者洞察报告》显示，女性有健身习惯的比例高达7成。

于是，曾经对女性用户不屑一顾的运动品牌一改态度，迅速行动——一边是深耕女性市场已久的国外品牌lululemon们开始在中国市场掀起热潮，另一边则是一些包括阿迪达斯、安德玛在内的众多运动品牌强力布局女性市场，同时，还有MAIA ACTIVE、Particle Fever粒子狂热和Flipped Lab等众多声称更懂亚洲女性需求且专注女性运动服饰的新品牌诞生了。

这些瞄准“她经济”的运动品牌显然改变了曾经简单粗暴的设计思路，似乎的确更懂女性了。正如QuestMobile调查发现，女性运动服饰从多个维度改变了市场的增长逻辑。而市场调研公司NPD的数据显示出其中一个维度，即女性消费者的加入，使得时尚属性较强的品牌，服装占比逐渐提升。从产品设计来看，女性的运动服饰的确在外观和版型上更费心思。

锌刻度通过社交平台上各大博主的分享，以及电商平台上众多买家的评论发现，在国内，女性运动服饰最被关注的点除了色彩、大小和面料材质一类的基础问题，还包括“是否会卡裆？”、“是否容易露点”、“是否能收住小肚子”、“会不会出现内裤勒痕等尴尬线”等与女性身体结构紧密相关，但或许只有女生才会懂的真实问题。除此之外，也会有许多女性关注诸如“是否能够更凸显蜜桃臀？”、“会不会更显直角肩？”一类与身材细节更相关的问题。

于是，这些痛点成为了女性运动服饰品牌设计的重点。无论是粒子狂热还是MAIA ACTIVE，都试图通过线条、内嵌等方式，推出“腰精裤”、“云感裤”等产品，而紧随这些产品的标签则往往是蜜桃臀、细腰翘臀、天鹅颈等关键词。

而从各大品牌此前的爆款产品来看，粒子狂热第一件单品是一条不用穿内裤的运动弹力裤，就是为了解决很多女性穿紧身裤会出现勒痕的烦恼。MAIA ACTIVE的“腰精裤”通过高腰版型设计来收紧腰腹，从视觉上打造完美腰臀比。而Sumday Atheletics的健身文胸则通过腋下加高的设计来解决副乳凸显问题。

这对饱受身材焦虑的亚洲女性的诱惑力，不言而喻。然而，“细腰”、“美臀”和“天鹅颈”等等标签，都也暗中标好了价格。

一条普通的健身裤或瑜伽裤售价可能在100元左右，而粒子狂热和MAIA ACTIVE需要你把预算翻三倍，至于lululemon，那你至少得准备七倍的钱。

“亚洲的新女性们一方面饱受身材焦虑希望通过运动获得更完美的身材，另一方面又开始认同每一种身材都很美的观念，所以这些运动服饰品牌抓住女性的情感痛点，就很容易赢得女性消费者的共情和认可，哪怕这些产品溢价严重。”一家运动服饰代工厂的销售人员曾向锌刻度坦言，即便100元的瑜伽裤和300元的瑜伽裤质量相差不明显，做够了品牌宣传的后者也会更受欢迎。

lululemon和MAIA ACTIVE均出现质量问题

只不过，营销攻势始终并非长久之计，无论是lululemon还是国内的女性运动服饰品牌，已经有越来越多的消费者开始质疑其“不值这个价”。锌刻度在众多社交平台发现，不少消费者指出lululemon容易脱线、起球和变松等问题，并表示“不会再回购”。

而此前曾叫板辛巴的澳大利亚运动品牌YPL，声称以“Marks Your Body（标记你的身体），帮助女性解决所有身体焦虑”的理念服务数以亿计的女性消费者，也被不少消费者质疑产品质量。

据“时代财经”，在社交平台上，有网友吐槽，“跟风海淘买了一件，练深蹲时裆部直接破了个大洞。能不能燃脂不知道，但当场社死。”类似的评价在社交平台并不少见，还有消费者表示在薇娅直播间买的商品回来穿一次就破洞。

二、“更爱女人”的汽车：还以为女性都是外貌协会？ 不仅运动服饰，汽车行业，尤其是新能源汽车也在近年来开始卖力“讨”女性欢心。

要知道，在过去的很长一段时间内，汽车广告片中出现的主角多为男性，女性往往只是配角。

但从直接打出“更爱女人的汽车品牌”长城欧拉，到常常提及“女性思路”、推出了镜空粉等配色的蔚来，再到在女性用户的化妆需求上频频做文章的小鹏，甚至包括主打小巧可爱的五菱宏光……一度偏爱男性、擅长以男性需求设计的车企一改常态，在营销、设计和销售上，对女性愈来愈倾斜。

一个重要的原因就是，新能源汽车，的确往往会成为女性车主的首选。

据消费者洞察和市场研究机构J.D. Power（君迪）发布的2021中国新车购买意向研究SM（NVIS）显示，不同人群的购车偏好差异明显：95后女性考虑购买新能源汽车的比例最高，30至40岁的男性对国际品牌燃油车的购买意向更高。

而个灯数据营销也显示，相较燃油车车主们，新能源车主中女性占比会更高，达26.62%，是燃油车车主中女性占比的1.22倍；同时，以25-34岁年龄段人群为主，占比达48.51%，将近一半。

于是，以欧拉为代表的一系列新能源汽车，曾靠着女性市场迅速出圈。四年前，长城汽车成立新能源汽车欧拉品牌，并于2020年推出欧拉好猫系列。凭借着酷似保时捷的外观设计，以及瞄准女性用户的命名风格和营销方式，欧拉好猫以及欧拉整个品牌都曾尝到“女性红利”。

自 2021 年 6 月之后，欧拉好猫的销量一路攀升，至 11 月已经达到月销近 9000 辆的水平，不仅在同级别新能源汽车市场中处于绝对领先，即便放在所有 A0 级车型中，欧拉好猫的单月销量高居第二，全年销量也杀入了前五。

然而，“反噬”也比想象中来得更快。

自2021年11月被车主质疑虚假宣传，欧拉便深陷 “芯片门”这团乌云。这场风波的关键在于，欧拉好猫一度宣传使用的高通八核芯片，被消费者们发现并不符实，国内的欧拉好猫实际上使用的芯片为英特尔四核芯片。一经曝光，多名消费者发起投诉甚至上诉，部分车主发布联合声明提出诉求，而欧拉品牌先后发布两次声明回应，也多次修改补偿方案。但这场信任危机显然余波不断。

不少女性用户都对“芯片事件”以及好猫自身的通病感到失望，同时也对欧拉的态度感到不满。 “所谓的最爱女人不过是个幌子，这一次事件让我们看到了欧拉的真实态度，并没有把女性用户的权益放在第一位，让我们这些为颜而来的车主长记性了。”一位女车主在社交平台写道。

此外，据“AutoReport”，欧拉芭蕾猫上市后，显然也被现实泼了一盆冷水。在芭蕾猫价格公布之前，曾有不少业内人士猜测其定价大约会在15万左右。结果19.3万~22.3万元的定价一出，“太贵了”、“智商税”的质疑此起彼伏。上市三个月后，上险量只有1366辆。

而除了欧拉，小鹏汽车此前在女性用户需求上做出文章，同样让女性用户不太买账。

彼时，小鹏P7特意在主驾驶的前方设置了一个带有补光灯的化妆镜，相关博主在评测和推荐时大多都会点明这一点称，“专属女生的汽车功能”、“旅游、吃饭、逛街都能随时补妆”、“有柔光补妆镜再也不用到处找光补妆了”…… 但这一设计也引起了部分女性用户的不解，“其实P7的化妆镜平时的使用率真的不高，后来又申请了什么专利要推出根据目的地推荐妆容，真的是很难让人理解，毕竟也不是所有女性车主都要化妆，更不可能换一个目的地就要换一个妆容，感觉这个功能像是画蛇添足。”

这只是一些缩影。事实上，如果仔细观察市面上的女性向汽车，则不难发现这些车型充斥着对女性车主的刻板印象，大部分都以“小巧的造型”、“呆萌的外观”和“粉嫩的配色”为主，且大部分车企呈现出的态度是“女性买车只在意颜值”。不懂车、厌烦技术参数、急于求成、只负责选颜色、控价位，大概是不少车企对女车主的典型用户画像。

图片来源：威尔森检测分析

然而，女性用户真的都是“外貌协会”吗？根据威尔森对女性用户的调研报告，女性用车场景比男性更丰富、搭载乘客类型更多样、用车时长更长、对车辆的清洁更为频繁，因此她们要求汽车颜值、实用、品质都要并存。

此外，正如《第一财经》此前在报道中提到，喜欢钻研汽车技术、性能参数和琢磨用车技巧本就只是小部分爱好者的需求。把这些专业信息作为汽车销售的常用手法，甚至作为一种文化灌输给消费者是错误的。如果基于这种文化把消费者简单划分为懂车和不懂车，再贴上性别标签，那就更傲慢了。

也就不难想象，在这样的刻板印象之下，面对并不真懂女人的“欧拉们”，女性用户必然会用脚投票。

三、高颜值的低度酒：“小甜水”背后的甜蜜“陷阱” “洋河蓝色经典，男人的情怀”、“劲酒虽好，可不要贪杯哦”、“衡水老白干，喝出男人味”……

和汽车广告一样，你或许很难从之前的酒水广告中看到女性的声音和形象。但如今，酒水市场同样成为了掘金“她经济”的主赛道。

从表示要“打造一款专属中国女性的情绪饮料”的贝瑞甜心，到分别在“生活真美好”和“中国好声音”等综艺频频出现的寻感sensehunt和十七光年，再到以年轻女性为目标用户，以国风为主调性的落饮……都是近几年来靠低度酒出圈的新品牌。

数据也显示，在“她”经济的驱动下，适合年轻女性饮用的低度酒同比增长46%，年轻女性成为酒类市场新的增长点。而2021年低度酒消费者中女性比例高达63.2%。

于是，打开小红书、微博和各种短视频平台，总能看到“适合女生的小甜水”、“女生放心喝的小甜酒”、“少女心必备晚安酒”等各种低度酒推荐和营销。据北京商报，仅 2021 年上半年，电商平台的果酒销售额同比增长 1626.2%，社交平台上有关“女生酒”的营销铺天盖地，就连传统白酒品牌都在推出玫瑰、草莓主题的女性酒。

仔细观察这类低度酒，除了口味以果味为主，度数较低以外，高颜值是营销的一大热点。其中，贝瑞甜心就是以“甜心小方瓶”出圈，并声称包装颜值在线，“灵感来自古典绘画”等等。此外，醉鹅娘、梅见等品牌也都切中高颜值、微醺等特点去贴近年轻女性消费者。

而在这些营销推广的话术中，甜酒、果酒和小甜水们往往被打造成了闺蜜欢聚必备，或是独居生活的治愈良药。

各种女性酒推荐

但事实上，这些品牌多采用代工模式。例如，包括贝瑞甜心、十点一刻、醉鹅娘等网红低度酒品牌一直采用代工模式，仅有冰青等极少的低度酒品牌建立了自己的工厂。

而这一模式可能会造成不同品牌来自同一家代工厂，很难把控质量和品控，且形成同质化竞争。同时，这种“营销到位，产品贴牌”的路径下，溢价也不言而喻。

此外值得一提的是，这些“小甜水”背后还可能是难以忽视的甜蜜“陷阱”。

正如“丁香医生”此前写道，小甜水看起来人畜无害，“粉色、甜、果味，在如上的包装下，酒好像蜕去了那些过时的外衣，成为了像饮料、甚至是像牛奶一样每日必备，随手可得的饮品。然而，酒精的危害，远比你想象中更大，也更加针对女性。”

以上种种，不过是“她经济”风潮下的几个面向。不可否认的是，女性正成为越来越有力的消费群体，而各大赛道的品牌，不再忽视而是看见女性需求，并围绕女性需求寻找新的发展空间，也是一个积极信号。

然而，至少从眼下来看，不少主打女性市场的品牌还并未真正理解和尊重女性需求，仅仅是想分得一瓢女性红利。

作者：黎炫岐；编辑：文婕

来源公众号：锌刻度（ID：znkedu），专注科技、互联网新经济原创深度报道

本文由人人都是产品经理合作媒体 @锌刻度 授权发布，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

回顾互联网发展历程，从桌面端拨号上网到高速5G的移动互联网，随时随地互联互通对现实生活的影响力也逐步提升，虚拟与现实的距离也逐渐缩小。未来数字世界在沉浸感、参与度、永续性等方面对体验提出了更高的要求。 我们尝试把Roblox在招股书里描述的8个关键词：“身份，

互联网的发展，使得我们逐渐向虚拟世界的各种玩法靠拢，虚拟世界奉行“开放共创”的理念，也给产品领域与其他领域带来了许多新的玩法。本文就数字未来设计的一些玩法展开分析，一起来看看。

回顾互联网发展历程，从桌面端拨号上网到高速5G的移动互联网，随时随地互联互通对现实生活的影响力也逐步提升，虚拟与现实的距离也逐渐缩小。未来数字世界在沉浸感、参与度、永续性等方面对体验提出了更高的要求。

我们尝试把Roblox在招股书里描述的8个关键词：“身份，朋友，沉浸感，多样性，低延迟，随地，经济，文明”进行提炼，从虚拟世界的5个视角，对设计挑战和机遇进行总结和预测。

一、虚拟世界产品玩法延伸 虚拟世界奉行“开放共创”的理念，并受到加密技术的支持。这在产品玩法和数字资产领域也带来新的发展方向，值得设计师关注。

1. 游戏和社交更高度的融合 虚拟世界产品领域，游戏和社交是主要的突破口。社交的内容是游戏，游戏是特定情境内的社交。因此，社交游戏化是将社交通过游戏的方式来展现，让用户在玩游戏的过程中进行社交。而社交游戏化则是通过将游戏的机制融入社交系统中，从而让用户在社交的过程中，有游戏般的体验。游戏和社交的的高度融合是未来虚拟世界产品发展的重要趋势。

以《Roblox》为代表的开放世界游戏与传统的MMO（大型多人在线游戏）相比，最大的不同点在于更加开放的社交生态。作为游戏UGC创作平台，在这里玩家可以开发自己的游戏，也可以玩别人开发的游戏建立了稳定的虚拟世界社交关系。

以人气较高的《Adopt Me!》为例。《Adopt Me!》的玩法是玩家扮演家长或者孩子，选择收养孩子或是被收养，整体玩下来形式类似过家家。玩家可以购买手推车、妆发等各式各样的付费道具装扮自己。这是一种更加沉浸和开放的社交模式。

微软旗下公司开发的《我的世界》是一款和《Roblox》画风非常相似的开放世界游戏。2020年加州大学伯克利分校还在《我的世界》里举行了虚拟的毕业典礼，包含了现实流程中的校长致辞、学位授予、抛礼帽等。

年轻新世代更青睐于轻松、趣味娱乐的社交类游戏，通过小游戏+语音互动等方式来制造丰富和封闭的娱乐场景，释放社交压力的同时增加趣味性和沉浸感。

2. 加密潮牌和艺术收藏崛起 和元宇宙一起走红的还有NFT。NFT全称为非同质化代币，简单来说，他具有唯一性和不可拆分性，这使得它可以和现实世界中的一些商品绑定。NFT 流动性高可随时交易以及鉴别，独一无二的艺术创作使其具备收藏属性，加密处理使得其难以复制仿造，最终成就了它的稀缺和价值。

前不久，Nike 宣布收购了仅仅成立两年的虚拟运动品牌 RTFKT。RTFKT 这个名字因为与英文「artifact（人造物）」发音相似而来，同时这个名字也代表着其品牌理念。有人这样评价 RTFKT：如果在你小的时候曾想拥有一双 AirJordan 的话，那么当你的孩子出生他会想要一双 RTFKT。

无聊猿猴被很多 NFT 玩家认为是在 CryptoPunk 之后最成功的 NFT 收藏品项目，甚至部分用户认为它比 CryptoPunk 还要成功。无聊猿游艇俱乐部（Bored Ape Yacht Club）简称BAYC，是一个基于以太坊的NFT集合，包含10,000只独特的无聊猿（Bored Apes）。每只无聊猿都有一系列特征，这些特征由170多个特征以编程方式生成，包括表情、服装、头饰等。

前不久，adidas 三叶草宣布与 Bored Ape、The Sandbox、Coinbase 合作，正式进军“元宇宙”，加入 NFT 世界！

几周前虚拟艺术创作团体RTFKT Studios 与村上隆合作推出的「cloneX」系列发售。

3.  设计版权得到更好的保护和增值 加密艺术家和设计师可以利用NFT创造出独一无二的数字艺术品，助力设计版权增值。

鹅厂23周年，腾讯公司为员工发放了 23 周年纪念版NFT“数字藏品”，由腾讯旗下NFT交易平台「幻核」团队设计发行，腾讯旗下联盟链“至信链”提供链上存证。

该系列NFT以QQ企鹅形象为基础，进行了IP衍化，每一个形象都各不相同，每只QQ企鹅共有6个自定义部分，每个部位随机展现不同元素并组合成独有形象，共发行72000枚。其中有1000枚彩蛋款特殊造型“致敬”名人：李小龙、卓别林、诸葛亮、牛顿、爱因斯坦等等。

近日，京东也正式上线「灵稀」数字藏品交易平台，该平台所有数字藏品将由京东云提供的区块链技术服务京东智臻链进行唯一标识。目前国内布局数字藏品交易平台的科技巨头已经有三家：蚂蚁旗下的「鲸探」、京东的「灵稀」以及腾讯旗下的「幻核」。除了后者是独立APP，前两者均为小程序。

小结 虚拟世界时代将是一个以“设计”驱动的时代，设计师们将成为虚拟世界里的造梦师。面对虚拟世界的机会和挑战，设计师责无旁贷。

正如《人类简史》提到过的，“想象”是人类能一步步发展到今天的关键。我们无法确定未来世界的具体样貌，亦无法确定虚拟世界是否会到来，但虚拟世界的丰富将是必然，未来亦会有更多的设计师参与建设。

专栏作家

晓吾，微信公众号：体验主义，人人都是产品经理专栏作家。腾讯高级交互设计师，前创新工场、新浪微博交互设计师。专注社交创新与娱乐产品设计。

本文由 @晓吾 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

最近 AI 绘画有一种越来越火的趋势。近段时间，无论是朋友圈，还是一些社群里，亦或是知乎首页出现的话题，都有不少讨论 AI 绘画的情况。在惊叹于 AI 作品的精美时，还有更多人表达了对 AI 绘画的害怕和焦虑，担心是否会失业。

最近 AI 绘画有一种越来越火的趋势。近段时间，无论是朋友圈，还是一些社群里，亦或是知乎首页出现的话题，都有不少讨论 AI 绘画的情况。

在惊叹于 AI 作品的精美时，还有更多人表达了对 AI 绘画的害怕和焦虑，担心是否会失业。

知乎上有不少相关的话题

最近在用一款 AI 绘画软件——「即时 AI」。一开始是想体验，后来确实是“上瘾”，现在属于几乎每天都会去研究描述词然后去「即时 AI」里反复调试。

所以先说一下结论：放心，AI 绘画不会让你失业，但真的会让你“上瘾”，成就感也相应的很强。我想体验过 AI 绘画的人应该都有过这种状态。

选中「即时 AI」，一开始是冲着免费试用而且没有次数限制这一点去的。上手用了两次发现，这不仅是个操作简单、学习门槛很低的新手友好工具，还兼具强大的功能，让更专业的 设计师 们可以尽情发挥想象，创造更惊艳的作品。

简单是真的简单，输入文字点击「开始创作」按钮，几秒钟出图。上一次这么简单的绘画还是在简笔画的课堂上。给大家看看我的 AI 绘画作品，描述词从简单到复杂的看看效果。

先来个简单的，输入文字：海水

效果如下：

加点环境描述，输入文字：冬天，海边

效果如下：

专业一点，输入更多文字描述，和你希望 AI 学习的艺术家风格：

令人惊叹的海洋艺术作品，鲜艳的色彩，获奖杰作，绚丽夺目的美学八分渲染，8K 高清分辨率，Victo Ngai，Kilian Eng，Jake Parker。

效果如下：

这组图出来的时候是被惊艳到了，这个配色和画面的构图，有点国产动漫大片的既视感了。

只有文字描述，对于想要精确内容的人来说可能不够，所以「即时 AI」另一个比较牛的地方就是，支持使用图文描述生成创作，也就是，先画一个草稿，再用文字描述，让 AI 同时参考草稿和文字生成作品。更精准地将 AI 绘画的想象力和天马行空用于自己的创作中，尤其是设计创作。

如果说文字描述让 AI 与你一起自由的探索想象力，「即时 AI」支持图文描述，更像是“约束” AI 在更限定的范围发挥创造力，对于设计师来说尤其具有吸引力，构建基础图像之后，就可以让 AI 替你完成后续的工作。

用「即时 AI」以图绘图

很多人担心 AI 绘画会让自己失业，取代自己。说实话，我自己使用下来的感觉是：AI 绘画技术很难取代个人，反而会是一个很好用的生产力提效工具。

「即时 AI 」 生成复古海报

首先，AI 绘画并没有我们想象中的强大。很多人都知道有一张 AI 绘制的作品在一场数字艺术创作比赛中获得了金奖，但大家并不知道的是，这张图片经历了高达 100 多次迭代，和后期的数多次调整。AI 绘画离不开人，AI 绘画的创造结果本身是基于人这一主体的“创造力”。

获奖的 AI 绘画作品《太空歌剧院》 (图据网络)

其次，能够将 AI 绘画“驾驭”得非常厉害的人很少，或许将来会有一个工种叫做：职业 AI 绘画手，但这些人很有可能本就是艺术专业的，或者在接触 AI 做图前已经具备了极强的绘画能力和艺术鉴赏力。

最后，决定 AI 绘画作品质量的是人，尽管 AI 绘画可以“生万物”，但是只有你头脑思考过、嘴里说出来的那些“描述词”才能够让 AI 绘画更精准地被生产出来，这对于设计这种需要精准和实用的行业来说尤其关键。毕竟，艺术也许没有定论，但设计总要“实用”才行。

所以，我更希望大家去体验 AI 绘画，而不是恐惧它。对于设计师来说，AI 绘画可以提供素材、灵感、设计风格参考、色彩参考等等，是一个很好的辅助工具。

如果你想 0 麻烦快速体验 AI 绘画，那么推荐你试试这个我一直在用的「即时 AI」，几秒出图操作很简单，而且支持中文语义描述，不需要专门找英文翻译软件写英文描述词。

链接放在这里了，复制到浏览器打开并点击安装插件，就可以免费开玩了！

网站链接： https://js.design/pluginDetail

欢迎关注作者的微信公众号：「应谋鬼计」

鸿蒙4年了，2022年，搭载HarmonyOS的华为设备已达3.2亿，到今天还有不少人在争论它到底是不是安卓套壳。 日前，市场传闻小米也将出手机操作系统，有网友表示，如果小米真的出MIOS，是否会去掉手机开机页的Powered by Android？引发了大量

HarmonyOS 鸿蒙系统在正式面世时，便引发了众多互联网人的密切关注，而伴随着鸿蒙生态的成长，虽然不少人都逐渐使用起了搭载相应系统的设备，不过还是有人对这一系统发出疑义。具体如何看待这类疑义？不如来看看作者的解读。

鸿蒙4年了，2022年，搭载HarmonyOS的华为设备已达3.2亿，到今天还有不少人在争论它到底是不是安卓套壳。

日前，市场传闻小米也将出手机操作系统，有网友表示，如果小米真的出MIOS，是否会去掉手机开机页的Powered by Android？引发了大量网友的争论，鸿蒙把开机变成了Powered by Harmony，目前不少人执意的认为是安卓套壳，事实上，在知乎上，目前关于鸿蒙是否安卓套壳的争论也长期都存在，问题来了，鸿蒙到底是不是安卓套壳？

一、安卓套壳的争议从何而来？ 事实上，早在最初2020年，曾与华为在软件层面有着深度合作的谷歌在第一时间进行了响应，明确表示不再向华为授权最新版本的安卓系统，且禁止华为手机搭载谷歌GMS服务。

早在2019年，鸿蒙面世的时候，余承东提到HarmonyOS 鸿蒙有四大特性：

采用分布式架构，可以实现跨终端的能力互助共享； 低时延和高性能IPC带来高流畅的使用体验； 基于微内核技术的可信执行环境，通过形式化方法提升了内核安全，全面提升全场景终端设备的安全能力； 鸿蒙OS可支撑开发者实现一次开发、多端部署，最终实现跨终端生态共享。 华为的Harmony OS之所以有套壳Android的争议，是因为当初从美国宣布制裁华为到鸿蒙亮相，其间只有短短几个月。事实上，早在2015年，鸿蒙就已经在华为内部酝酿。到2019年拿出来，已经历经了4年的打磨。

此外，争议还来自于，鸿蒙操作系统有两个，一是Open Harmony，它华为捐赠给开放原子开源基金会的项目，它没有使用来自AOSP（Android Open Source Project安卓开放源代码项目）的代码，不能兼容Android应用，只能运行鸿蒙应用。

二是Harmony OS，是华为基于Open Harmony开发的商业化闭源发行版本，和Open Harmony的区别是使用了AOSP的一部分代码构建Android应用兼容层。

这被人认为，鸿蒙来自于安卓的AOSP，并表示，这与多年前阿里yunOS的操作类似，尤其是在某些版本的鸿蒙中出现了安卓系统的彩蛋，比如安卓特有的不兼容性。那个版本的鸿蒙就是在系统中把安卓换成鸿蒙。这被某些业内人士打了个比喻，就是谷歌造了一辆车，华为换了个标志。

而事实上，Harmony OS不是基于Android开发的，因为开发晚，所以需要兼容AOSP代码，才能更好的推进软件生态，但它的系统架构和Android不同，Harmony OS不是Android套壳，也不是Android分支，更不是Android魔改。

HarmonyOS 使用 AOSP 的核心原因，是可以利用已经开放、可以使用的开源代码，推进效率更快，开源意味着可以更快的站在前人的肩膀上，把生态做起来，同时也更好的面向物联网时代。

二、从宏内核到“微”内核，操作系统的玩法与本质已经变了 这里需要知道的是，安卓系统采用的是“宏”内核，而鸿蒙系统采用的是“微”内核，这也是它们之间最根本的区别。别看只有一字之差，所产生的结果却是天差地别。

宏内核是将手机系统所用到的所有驱动软件、底层代码、各种管理以及网络协议等都直接保存在了内核当中，好处是资源管理统一，劣势是代码量庞大，久用变慢卡顿，而且漏洞无法避免，系统可扩展性差。

微内核是由一群模块化的最小化软件程序划分成几个单独的运行在不同地址空间的服务，好是时延可控，内核安全性高，代码量小、内核精简、接口统一。

鸿蒙OS采用全新的微内核设计， 即只提供操作系统最基本的少数核心功能与基础服务 ，比如多进程调度和多进程通信等，它拥有安全特性和低时延等特点。

简单拿个比喻来说：微内核就是一个皇帝，所有权利集中在他手上，但办具体的事情要找别人。宏内核像国务院，组织机构很庞大，有好多人在管事。

据相关专业人士指出，从资源管理的角度来说，宏内核肯定是没问题；但是从安全的角度来说，微内核的优势比宏内核会明显得多。

之所以说安全性更高，也有业内人士打了一个比方： 微内核的设计就好比轮船的水密舱设计——将整艘大船隔离成一个个的水密舱，一个仓破了，船也沉不了 。同理，一处系统被攻破，整个系统不至于崩溃。

因此，我们看到，尽管Android系统是宏内核，但后来谷歌针对物联网时代，做了一个新的操作系统，叫Fuchsia，也是微内核，走的也是华为的这条路子。

因此，从这里可以非常明确的知道，如果鸿蒙是安卓套壳，谷歌面向物联网时代，就没有重开新操作系统的必要，直接用Android系统就可以，而 谷歌之所以选择与华为一样的微内核路线，显然是因为谷歌也看到4G时代的安卓操作系统可能不太适应5G时代的架构。

物联网时代需要连接包括电视机、汽车媒体系统、机电脑、家具物联和智能手机等产品，它需要面向5G万物互联打造全新的操作系统。这自然意味着微内核模式对应物联网时代操作系统要更有优势，这是一种兼容模式更高的操作系统。

这其实意味着 操作系统的玩法与规则也已经变了。

三、争议还在：意味着鸿蒙还不够强大 正是因为鸿蒙的兼容性，所以其基于AOSP的一部分代码构建Android应用兼容层，进而出现了套壳安卓的争议——在不少人看来，它还是基于AOSP，和人家MIUI，Flyme，包括华为的EMUI，本质上没有区别。

但是需要知道的是，AOSP是开源的，它的全称是“安卓开放源代码项目”的缩写，它是开源的代码！开源代码意味着可以为任何人所用。 安卓操作系统使用了 AOSP 的代码，HarmonyOS 也使用了这些代码，只要遵循有关协议，它们都可以进行二次开发，安卓无法限制鸿蒙使用并二次开发这些代码，同理鸿蒙也无法限制安卓使用这些代码。

这类似Ubuntu、Redhat 是基于 Linux。

事实上，如果套壳能够让华为绕过禁令，还能让谷歌没有办法进一步制裁，那几乎是不可能的。毕竟，如果涉嫌抄袭，搬运代码，谷歌安卓完全可以起诉，既符合其本身利益，又能打压华为，何乐而不为？

简单来说，它基于AOSP，但AOSP是开源项目，任何人都可以在这基础上二次开发，因为Linux内核开源协议要求使用了他们的部分也要开源，这些谷歌是没有所有权的，全球可用，谷歌也没有权限去打压。国内也有很多大公司开源了自己一些技术框架，国外也有人去使用。

因此，兼容安卓是对的思路，这意味着可以让鸿蒙更快的覆盖当下Android移动应用市场的应用，不然只用有鸿蒙版本的那几百个应用是很难冷启动。

从今天鸿蒙的成绩来看，兼容安卓是一种妥协，也是明智的，但也因此带来了更多的争议，不过发展到今天，从它的接入的设备数量来看， 基本上已经算是初具规模，不仅仅是系统生态去美化，更是生态高度自主化。

从这个角度来看 ，它基于基于AOSP是不是套壳这个争议，其实对华为并不重要，技术路线绝对不能再错了，对于华为来说，它没有那么多时间来重新走一次，现阶段依托开源去发展是更快的路线。

目前，HarmonyOS 已经完全自主化，没有人可以限制或者断供它， 它已经完全可以按照自己的节奏去发展、迭代与优化，这其实就是正确的思路。

在今天，超1000个硬件厂商尤其是大量家电厂商都在加入，在IoT领域的生态也在逐步形成。搭载HarmonyOS的华为设备已达3.2亿，鸿蒙智联已有合作伙伴超2200个，产品发货量超2.5亿，这其实已经走在成功的路上。

毕竟，自己能完全掌控操作系统发展的自主权，才是最关键的，尤其是谷歌在安卓系统上采用华为的EROFS超级文件系统，也是对鸿蒙套壳安卓的这种言论进行了间接回应——华为拥有对鸿蒙系统的绝对控制权。

自主权与控制权，这点鸿蒙已经做到，这才是事关核心。随着鸿蒙壮大，这种争议可能会越小，随着其设备数再翻一番，可能套壳不套壳，谈的人就越来越少了。当有人还在争论套壳，其实也在说明鸿蒙还不够强大。

因此，这个角度来看，鸿蒙依然需要继续向前走，当它足够强大，与谷歌Android、iOS、Windows、谷歌Fuchsia鼎足而立、给这些竞争对手带来压力的时候，鸿蒙套壳的争议自然就会消失了。

专栏作家

王新喜，微信公众号：热点微评（redianweiping），人人都是产品经理专栏作家，互联网从业者，百度百家、艾瑞网专栏作家、虎嗅网、钛媒体认证作者，关注IT热点背后的本质，TMT资深评论人。

本文原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

最近 AI 绘画有一种越来越火的趋势。近段时间，无论是朋友圈，还是一些社群里，亦或是知乎首页出现的话题，都有不少讨论 AI 绘画的情况。在惊叹于 AI 作品的精美时，还有更多人表达了对 AI 绘画的害怕和焦虑，担心是否会失业。

最近 AI 绘画有一种越来越火的趋势。近段时间，无论是朋友圈，还是一些社群里，亦或是知乎首页出现的话题，都有不少讨论 AI 绘画的情况。

在惊叹于 AI 作品的精美时，还有更多人表达了对 AI 绘画的害怕和焦虑，担心是否会失业。

知乎上有不少相关的话题

最近在用一款 AI 绘画软件——「即时 AI」。一开始是想体验，后来确实是“上瘾”，现在属于几乎每天都会去研究描述词然后去「即时 AI」里反复调试。

所以先说一下结论：放心，AI 绘画不会让你失业，但真的会让你“上瘾”，成就感也相应的很强。我想体验过 AI 绘画的人应该都有过这种状态。

选中「即时 AI」，一开始是冲着免费试用而且没有次数限制这一点去的。上手用了两次发现，这不仅是个操作简单、学习门槛很低的新手友好工具，还兼具强大的功能，让更专业的 设计师 们可以尽情发挥想象，创造更惊艳的作品。

简单是真的简单，输入文字点击「开始创作」按钮，几秒钟出图。上一次这么简单的绘画还是在简笔画的课堂上。给大家看看我的 AI 绘画作品，描述词从简单到复杂的看看效果。

先来个简单的，输入文字：海水

效果如下：

加点环境描述，输入文字：冬天，海边

效果如下：

专业一点，输入更多文字描述，和你希望 AI 学习的艺术家风格：

令人惊叹的海洋艺术作品，鲜艳的色彩，获奖杰作，绚丽夺目的美学八分渲染，8K 高清分辨率，Victo Ngai，Kilian Eng，Jake Parker。

效果如下：

这组图出来的时候是被惊艳到了，这个配色和画面的构图，有点国产动漫大片的既视感了。

只有文字描述，对于想要精确内容的人来说可能不够，所以「即时 AI」另一个比较牛的地方就是，支持使用图文描述生成创作，也就是，先画一个草稿，再用文字描述，让 AI 同时参考草稿和文字生成作品。更精准地将 AI 绘画的想象力和天马行空用于自己的创作中，尤其是设计创作。

如果说文字描述让 AI 与你一起自由的探索想象力，「即时 AI」支持图文描述，更像是“约束” AI 在更限定的范围发挥创造力，对于设计师来说尤其具有吸引力，构建基础图像之后，就可以让 AI 替你完成后续的工作。

用「即时 AI」以图绘图

很多人担心 AI 绘画会让自己失业，取代自己。说实话，我自己使用下来的感觉是：AI 绘画技术很难取代个人，反而会是一个很好用的生产力提效工具。

「即时 AI 」 生成复古海报

首先，AI 绘画并没有我们想象中的强大。很多人都知道有一张 AI 绘制的作品在一场数字艺术创作比赛中获得了金奖，但大家并不知道的是，这张图片经历了高达 100 多次迭代，和后期的数多次调整。AI 绘画离不开人，AI 绘画的创造结果本身是基于人这一主体的“创造力”。

获奖的 AI 绘画作品《太空歌剧院》 (图据网络)

其次，能够将 AI 绘画“驾驭”得非常厉害的人很少，或许将来会有一个工种叫做：职业 AI 绘画手，但这些人很有可能本就是艺术专业的，或者在接触 AI 做图前已经具备了极强的绘画能力和艺术鉴赏力。

最后，决定 AI 绘画作品质量的是人，尽管 AI 绘画可以“生万物”，但是只有你头脑思考过、嘴里说出来的那些“描述词”才能够让 AI 绘画更精准地被生产出来，这对于设计这种需要精准和实用的行业来说尤其关键。毕竟，艺术也许没有定论，但设计总要“实用”才行。

所以，我更希望大家去体验 AI 绘画，而不是恐惧它。对于设计师来说，AI 绘画可以提供素材、灵感、设计风格参考、色彩参考等等，是一个很好的辅助工具。

如果你想 0 麻烦快速体验 AI 绘画，那么推荐你试试这个我一直在用的「即时 AI」，几秒出图操作很简单，而且支持中文语义描述，不需要专门找英文翻译软件写英文描述词。

链接放在这里了，复制到浏览器打开并点击安装插件，就可以免费开玩了！

网站链接： https://js.design/pluginDetail

欢迎关注作者的微信公众号：「应谋鬼计」

点线面在用户界面中的应用貌似很少有人写，我挑业余时间进行了大量案例的翻阅分析，发现其中确有规则。首篇万字长文献给你。平面设计篇：平面设计高手教程！

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

首篇万字长文献给你。

平面设计篇：

平面设计高手教程！全方位解锁「点线面」的运用方法（附实操案例） 本文从点线面的定义、作用、设计方法帮你全方位科普点线面在版式设计中的运用，附上实操案例，基础差的平面设计师，这篇别错过了！

阅读文章 >

前言

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

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

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

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

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

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

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

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

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

点、线、面与康定斯基

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

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

从法学生到顶尖艺术家：抽象先驱瓦西里·康定斯基 瓦西里·康定斯基（Василий Кандинский，格里历1866年12月4日－1944年12月13日），画家和美术理论家。

阅读文章 >

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

点、线、面浅谈

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

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

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

正文开始。

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

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

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 全部由线性更改为了面性。同样的，国内的简书、天猫等产品也进行了图标的改版以提升其他页面的点击率。

② 关于按钮

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

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

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

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

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

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

万字干货！3个维度帮你有理有据做好CTA按钮设计 任何设计师都曾经与 CTA 按钮打过交道。

阅读文章 >

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的这次“改头换面”中被彻底应用及实现，并且对设计圈影响至今。

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

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

此篇完。

点线面在用户界面中的应用貌似很少有人写，我挑业余时间进行了大量案例的翻阅分析，发现其中确有规则。首篇万字长文献给你。平面设计篇：平面设计高手教程！

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

首篇万字长文献给你。

平面设计篇：

平面设计高手教程！全方位解锁「点线面」的运用方法（附实操案例） 本文从点线面的定义、作用、设计方法帮你全方位科普点线面在版式设计中的运用，附上实操案例，基础差的平面设计师，这篇别错过了！

阅读文章 >

前言

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

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

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

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

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

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

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

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

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

点、线、面与康定斯基

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

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

从法学生到顶尖艺术家：抽象先驱瓦西里·康定斯基 瓦西里·康定斯基（Василий Кандинский，格里历1866年12月4日－1944年12月13日），画家和美术理论家。

阅读文章 >

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

点、线、面浅谈

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

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

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

正文开始。

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

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

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 全部由线性更改为了面性。同样的，国内的简书、天猫等产品也进行了图标的改版以提升其他页面的点击率。

② 关于按钮

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

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

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

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

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

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

万字干货！3个维度帮你有理有据做好CTA按钮设计 任何设计师都曾经与 CTA 按钮打过交道。

阅读文章 >

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的这次“改头换面”中被彻底应用及实现，并且对设计圈影响至今。

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

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

此篇完。

11月16日，腾讯公布了2022年第三季度财报。财报显示，公司第三季度营收1401亿元，同比下滑2%；净利润399.4亿元，同比增长1%。 一直以来被视为顶梁柱的游戏业务，在这一季度表现不佳。财报显示，第三季度，腾讯在国际市场游戏实现收入117亿元，同比增长3

依靠着微信生态，视频号的成长在一定程度上是有先天优势的，于是不少人也预测着视频号的商业化潜能。而视频号本身也在向这一方向努力着，不过就在今年刚刚过去的“双十一”大促里，视频号的存在感却不如其他平台一样那么强烈。具体如何看待现在的视频号发展，不如来看看作者的解读。

11月16日，腾讯公布了2022年第三季度财报。财报显示，公司第三季度营收1401亿元，同比下滑2%；净利润399.4亿元，同比增长1%。

一直以来被视为顶梁柱的游戏业务，在这一季度表现不佳。财报显示，第三季度，腾讯在国际市场游戏实现收入117亿元，同比增长3%。在本土游戏市场，腾讯游戏收入为312亿元，同比大幅下降7%。

受到未成年人保护措施和新游版号迟迟不下发等多重影响，即使有着常年蝉联游戏收入头两名的《王者荣耀》与《和平精英》也难逃下滑趋势。

与此同时，视频号成为本季财报的“新宠儿”。本季度，腾讯社交网络业务和网络广告业务上的收入，都在下滑。但视频号逆流而上，带来直播服务收入增加，视频号中信息流广告需求强劲。

视频号会是腾讯王冠上的新宝石吗？

一、站在巨人肩膀上 实际上，上一季度中，视频号也作为发展新势力在财报中被点了出来，腾讯Q2财报显示，视频号总用户使用时长超过了朋友圈总用户使用时长的80%，日活跃创作者数和日均视频上传量同比增长超过100%。据QuestMobile报告，截至6月，视频号月活突破8亿，超过抖音。

这意味着，视频号的商业化潜能快速扩张，对腾讯的意义也越来越重要。

实际上，视频号也确实在积极开发自己的商业潜能。

早在2020年视频号上线不久，就已经火速上线直播功能，并开通购物车、接入第三方分销系统；到2020 年底，视频号已经将推流、连麦、打赏三大件补齐，作为最后入局的短视频选手，至少在硬件上快速拉近了与抖、快等平台的距离。

到2021年12月，已经发展了一年的视频号内容生态初具规模，部分视频号进行了“短视频购物车”的灰度测试，可在短视频下方直接挂链商品。可以说，从上线开始，视频号就已经在酝酿自身的商业化进程了。

到了今年，视频号的商业化模块看上去已经十分完善，又上线了众多商业化方面的功能，比如小任务、原生广告等。在种草资源方面，视频号已有“互选平台”和“小任务”两种方案。“互选平台”主要撮合品牌商家和头部KOL之间的合作；“小任务”则是“商家发布任务-创作者自主创作”的众包类营销产品。

7月21日，视频号对外正式上线视频号小店，并同步开放视频号小店开店入口。视频号小店能够完成商品审核上架、内容营销、消费交付等完整电商流程。

除了硬件设施之外，官方数据显示，2021年末，视频号直播带货的销售额对比年初整体增长了15倍，其整体复购率超过60％，客单价超过200元。目前，在视频号直播中，服饰箱包、美妆护肤、珠宝饰品等类目均取得了良好的经营成效，而食品生鲜、图书等类目则增长强劲。

看上去万事俱备，只缺一场让公众全面认知视频号的时机。

二、时机未到 那么，今年的双十一购物节会是这个时机吗？

稍晚于主流平台的双十一预热，10月31日，视频号开启今年“11.11狂欢节”活动，京东、荣耀商城等品牌将在视频号推出带货直播专场。

同时，为了商家和达人开播，视频号也推出了相应的流量激励计划：报名重点GMV场次激励计划的商家，单场峰值销售金额只要不低于10万-150万，且累计销售金额不低于1000万，就可以同时获得流量券和发现页曝光；达人直播间完成单场10万-100万不等GMV，则可以得到流量券的奖励。

但，在欢呼声下，视频号的商业化要走的路，其实还有很远。

素食博主Christine（@ALittleVegan克里斯叮）收到视频号的活动推送时，全网的双11活动，已经开始一周了。

推送告知Christine，在活动期间，视频号将提供一个关键词话题，在话题下带商品链接发布视频内容，将得到一定流量扶持。但作为一个多平台创作的视频博主，很早之前，Christine已经收到了其他平台的双十一活动推动，并已经开始按照活动给出的选题拍摄、上传内容参与活动了。

全程参加了视频号双十一活动，并首次在视频号试水了直播的Christine，感受却并没有那么好。

自从19年底转型做博主，Christine一直是多平台发展，而最开始起步时，正好赶上了视频号刚刚起步，借助自身私域流量，与“素食”赛道本身带有的私域属性，相较于其他平台粉丝只是冰冷的数据，视频号让她感觉没有那么严重的“悬浮感”。

早期，Christine通过探店视频获得了关注，而视频号的官方会针对内容进行运营，推动不同活动。而最近半年以来，Christine明显感受到这类活动减少了。视频号的流量，正在倾斜于更短、更加大众娱乐的视频，而她这样有些小众、需要时长来输出观点的内容，越来越不吃香了。

而更为重要的是，本次双十一，原本长期借助视频号小工具“小商店”来进行种草推广的Christine，由于工具升级到“小店”，大吃苦头。首先是，原本一直用得好好的小商店链接不能作为商品链接上架，Christine不得不在小店把直播需要用的商品全部重新上架。而在这之前，Christine收到的官方通知显示，11月14日小商店才会停用，但实际上，小商店的个链却在10月底被突然掐断。

另一方面，小店的功能相较于上一代“小商店”极其不完善，很多功能存在漏洞，例如，小店的客服必须是企业微信用户，但企业微信却不能发送商品链接，导致需要售后时，博主和消费者无法实现有效沟通。

实际上，今年的双十一，各大平台之间的边界感并不强，电商系统没那么强大的小红书、B站会选择站在购物平台的肩膀上，B站博主直播时往往挂着京东淘宝的外链，小红书虽然也有做商城大促，但也发挥了种草优势，在购物榜单上给淘宝引流。加上本身今年不再吹鼓GMV大数字，各大平台之间呈现一片祥和。

但对于博主来说，在平台讲究取长补短，发挥优势的双十一，视频号实际上疯狂暴露了自己的劣势。

作为一家运营不过三年的平台，无论是硬件设施、运营能力，实际上暂时做不到与其他独立平台相提并论，站在微信朋友圈的肩膀上，对于视频号来说，可能还需要一段时间。

作者：Ayaka；公众号：网娱观察（ID：wldygc2016）

原文链接：https://mp.weixin.qq.com/s/41chtrVlhcL_4Xh7gWPmiA

本文由 @网娱观察 授权发布于人人都是产品经理；未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

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

今天这篇文章比较偏基础，但胜在讲的很全面，自己做项目的时候也可以拿来自检。关于 字体排版 的方方面面都讲到了一些，尤其有一点是关于字体和字型的定义让我学到不少新知识，之前我在翻译的过程中没太在意这 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 你可以查到某个字体具体要花多少钱。

更多优质英文字体推荐：

5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！（二） 大家好，我是和你们聊设计的花生。

阅读文章 >

三、使用默认的样式 当你设计一个网页时，你只能使用 6 种类型的标题。

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

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

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

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

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

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

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

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

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

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

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

1. 对齐 左对齐

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

居中对齐

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

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

右对齐

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

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

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

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

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

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

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

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

不要忘记字母间距

七、检查颜色对比度 你在设计的时候能看清文本内容，不代表所有人都能看清楚。

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

从3个方面，帮你从零开始掌握WCAG色彩对比度 最近在学习大厂设计系统时，发现了 WCAG 标准。

阅读文章 >

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