首页

上万字干货!超全面的用户画像设计指南

清阳 用户研究

image.png啥是用户画像,今天兰亭妙微UI设计公司带大家深入了解

想做成这件事,得先理解用户画像是啥。

用户画像是结合用户的社会属性、生活习惯、消费行为等等信息抽象出来的标签化合集。咱们要通分析用户的背景、行为场景、特征、性格等等猜出用户需要啥,咱们应该做啥功能。

  1. 比如说你发现网恋搭子经常玩妲己、小乔、王昭君这样的英雄,那咱可以猜测这人大概是女孩,要是和你打游戏天天玩的不是兰陵王就是关羽、廉颇,那我建议你谨慎。
  2. 然后你还发现她经常在月初买新皮肤,通过这个表现可猜测她大概是个家庭条件还不错的大学生。(因为大学生多数都是月初领低保。牛马都是月中领低保。)
  3. 通过对她各项特征进行总结、猜测,然后再利用其表现转化为对企业(项目)有价值的内容。直白点说怎么针对你,骗走你兜里的钱。
  4. 有伙伴可能说:了解用户不是为了更好的服务用户么?其实你这么说也没毛病,但咱服务好用户最终目的是啥?还不是为了转化企业价值?
  5. 回到你网恋妹妹这件事来总结:因为她总玩软辅,月初购买皮肤,所有推测她大概是妹妹,且还在上大学。对于这样的搭子你能想出什么策略呢?1.一起玩的时候不能骂她。2.要保护好,多夸她,提供情绪价值。3.巴拉巴拉……
  6. 如果你是和兄弟一起玩联盟你会怎么说。儿子!爸爸亚索(英雄)玩的贼 6。
  7. 为啥你对妹妹和兄弟的态度这么不一样?这就是通过画像区分人群,针对不同人采用不同策略。那么在设计过程中也是一样的。咱们要考虑不同用户要如何下菜碟。

基础概念晓得了以后咱进阶一下。用户画像、用户角色、用户属性的不同和相通之处。

用户画像

  1. 对用户的全面描述,包含用户的基本信息、行为习惯、需求、痛点等等。大家会常提的基本是:人口统计信息(年龄、性别、职业等等)行为特征(使用习惯、购买行为等)心理特征(兴趣爱好、价值观等等)都在其中
  2. 咱们通过以上这么多内容去给用户分类,让人群划分更加具象。比如说王者、大师、白银、废铁等级的划分,就属于咱们看得到的用户分类(依据操作水平)。同理到设计中大咱们常常分为粘性用户、忠诚用户、潜在用户等等。这些都属于理解了用户基本信息后的进一步细化(分层)。分层以后更容易匹配旗鼓相当的对手,如果不通过画像分层会怎样?你想想如果你一个废铁水平每天匹配到我这个王者,你是啥心情?可能玩着没两天你觉得被虐的太惨了没意思,退游了。我觉得每天虐菜好没意思,退游了。

image.png

用户角色

  1. 基于用户画像创建的虚构人物角色代表特定类型用户,用来帮助团队更好地理解用户需求和设计产品。
  2. 比如说“搬砖的设计师”、“摸鱼的领导”等,角色背景(职业、生活方式等),角色目标(使用产品的目的),角色痛点(在使用过程中遇到的问题)
  3. 很多聪明小明可能就问了:“我就是这么做的啊,为啥他们总说一眼假?”你那玩意是不是真的你自己没数么?这个男人叫小帅,他干了啥干了啥,那个女人叫小美她怎么怎么样了。
  4. 演示一下我所筛选的诸多作品中大家画像都是咋写的:小美、女、24 岁、职场白领、肤白貌美大长腿、爱购物、喜欢鲜花、爱浪漫。瞧瞧你的用户画像是不是这样写的?看起来这个画像好像没啥毛病,可是女孩子都是肤白貌美大长腿啊,都喜欢购物啊,都喜欢花啊!就算不做画像也能想到这些,这种类型的画像用在哪个产品里好像都合适。咱就是说这画像有和没有不就是没啥区别么?这个话说了和没说有啥区别呢?为啥一眼假?因为大家做画像总是有种废话文学的赶脚,正所谓“十年磨一剑,五年磨半截”“听君一席话,如听一席话”
  5. 用户角色得是看起来真实的常态的人,是众多用户行为的缩影,从真实用户中提取出来的。这个虚拟人物的特征一定是非常全面的,需要包含他的介绍、个人信息、工作信息、性格特点等等,要把它理解为一个真实的人。
  6. 有伙伴通过用户画像输出的用户状态是这样的:”小美很抑郁很孤独,小帅也很孤独吧啦吧啦...“大哥?这就编的离谱,难道用了你的 APP 就不抑郁不孤独了?这就好比你去看医生不能只说:“我难受”你要说清楚具体咋不舒服,哪不舒服。你啥症状也不说就只说难受,你让医生咋办?
  7. 总结:画像要真实的、常态的、痛点和需求表现不能泛泛,要具体。

用户属性

  1. 描述用户特征的具体指标,通常是量化的。
  2. 基本信息(如年龄、性别、地区)、行为数据(如访问频率、购买金额)、偏好设置(如喜欢的产品类型、使用的设备)大家可能会觉得用户属性和用户画像有点区分不开,没关系,就理解为他是用户画像附属内的的小弟就行了。

总结:用户画像是对用户的全面描述,用户角色是虚构的代表性用户,用户属性是用户群体的可量化特征。三者相辅相成,有助于更好地理解和满足用户需求

image.png

咱们咋利用画像中的信息?

帽子叔叔用来审问你的画像和你电商产品的画像那肯定不一样的嘛~不同的企业对于不同的“嫌疑人”要观察的点自然也不一样。

不同维度下咱们能利用画像干啥?以下内容仅作为切入点帮助大家理解。

image.png

你买直升机么

基于人口统计特征分类

  1. 关注的内容就是:年龄、性别、职业、收入水平、教育背景等。
  2. 平时拼夕夕给你推荐直升机么?为啥不给你推荐?是因为你不喜欢吗?这就是电商平台的个性化推荐,他们会根据的的年龄和性别、收入不同推荐不同类型的商品,拼夕夕可能不是很相信你小小年纪买得起直升机。
  3. 再比如基于用户画像的设计的千人千面,设计不同的首页布局和推荐模块,以适应不同用户群体的偏好。

基于行为特征分类

  1. 包含内容:购买频率、使用时长、访问渠道、互动方式等。
  2. 如果你经常剁手平台就猛猛给你推新品就行了,反正你会买。如果是低频用户呢?多展示一些用户好评激励你进行购买。
  3. 时间短就给你推修驴蹄子、锻刀大赛、荒野生存、美女擦边。在页面表现上来说如果使用时间长,那咱就可以考虑用什么样的形式打广告不会强打断用户,因为长时间使用的用户粘性应该比较高,比较能容忍,那就设计一些植入,例如说某音的小窗广告入口设计。如果时间短那设计要考虑怎么通过设计吸引,比如说更有趣的彩蛋、点赞触发感强化等等不多举例了。
  4. 对于活跃用户,可以使用动态更新的内容卡片,显示最新消息和互动。对于不太活跃的用户,我就使用静态展示,突出重要通知和精选内容,帮助他们快速了解最新动态。

基于心理特征分类

  1. 兴趣爱好、价值观、生活态度、个性特征等。
  2. 你喜欢刺激喜欢挑战不可能,那咱们做设计时可以这样搞,给用户设置目标,例如 7 日打卡、例各项比赛 pk、等等,不服输是吧?好!给你匹配氪金大佬天天虐你、嘲讽你,你能忍么?忍不了你会咋办?充钱你能变得更强!

基于生命周期阶段分类

  1. 潜在用户、首次用户、活跃用户、流失用户等。
  2. 针对不同生命周期阶段的用户(如新用户和老用户),SaaS 产品可以提供不同的引导策略。为新用户设计详细的入门指导和工具提示,而为老用户提供高级功能的使用技巧和更新通知。

上面这些你有没有种似曾相识的感觉?你是不是也想到过这些?其实很多设计师在潜移默化受用户画像影响,基本上咱们每一个设计点都可以回溯到用户画像中,说人话就是你这啥这样设计基本都可以在画像中找到依据。为啥你的画像做不好,设计做不好呢?只不过是大家没认真思考过推导过程,产品说是咱做啥。大家可以尝试把以前做过的功能回推一下,想一想你的设计是在满足用户的什么需求,她的需求能对应到以上提到的哪一个分类里面。

image.png

打标签

用户画像就是在打标签

请用最简单的词汇概括你女票们,你会想到哪些词汇?“肤白貌美”“优雅”“前凸后翘”“博学多识”“善解人意”“熬夜冠军”“抬杠运动员”“吃货”“可爱”“独立思考”等等,凡是你想到的词汇都可以理解为是你为她打的标签,这就是你将女票变成了一个标签合集。

这些小标签咱们还可以继续做分类(把小标签归到大分类中),比如说“肤白貌美”“前凸后翘”可以归类到“外貌”,形成一个具体的合集。

image.png

父子关系

关于标签分类:

比如说你、你女票、你老公、你女票的男朋友、你们四个可以划分为“男”“女”大分类中,同时还可以归属于一个更大标签“人”中。咱们都是在某些合集和归类之里。无非是大合集小合集的关系。

那么针对不同合集采用不同策略。

比如刚才被氪金大佬虐杀的你,为啥他不虐别人只虐你?你就没有问题吗?你的问题可能是因为你同时具备“不服输”标签和“多金”标签,所以系统才会匹配这样的人给你上压力。因为你是个不服输的穷×给你上多大的压力你也不充钱啊!所以在系统层面上你可能同时具备两个标签才会给你推大佬。

  1. 在做画像时也一定要注意,有时用户给咱们的信息不见的准确,需要通过用户行为进行判断。你的网恋对象一定是异性吗?不一定吧?之前我玩一款游戏叫《哈利波特》注册的就是女号,为啥我要注册女号?因为我想住女生宿舍,可住进以后发现室友都是顶着女号的抠脚大汉!!那系统怎么判断你是男还是女?如果这个人天天去竞技场打 PK,那大概可以判断是老爷们,如果说这人不修炼技术,天天在游戏里搞换装、参加舞会,那这个人大概了就是女的。
  2. 举例子来说,曾有一段时间,淘宝每天给我推荐漂亮小裙子、丝袜、性感内衣。这什么会这样?有可能是那一段时间我买的衣服都比较中性,一时之间系统对我的性别产生了质疑,所以试探性推荐来看我的状态,进而判断我的性别。

虽说设计师对标签这个姿势不需要掌握那么深,但多知道点总不会错。

  1. 你知道你公司的用户的标签是什么吗?
  2. 你知道这些标签怎么来的么?
  3. 标签背后的用户行为是什么?
  4. 标签 A 和标签 B 同时存在时会有啥不同的化学反应?
  5. 大家都在谈“用户分层”那么你们怎么定义忠诚用户的?他的特性是什么?当然了,这些其实更多的是产品层面的事情,但是如果你一点也说不上来,我只能说你根本不懂用户。

咱们继续八卦一下标签分类的事

标签可分为。静态标签、动态标签、预测标签

image.png

静态标签

静态标签

用户主动提供的数据,或者你通过手段获取的数据,一般来说是用户不咋变的信息,姓名、性别、年龄、身高、体重、职业、兴趣爱好、情感状态、所在地区、设备信息、手机号等等。大概率不会变的信息,总不会今天你是男,明天变成女吧?静态标签主要用来了解咱们用户的基础需求。

image.png

动态标签

动态标签

动态嘛,他是会变的,这些标签是有保质期的,需要咱们定期地更新来保证标签的有效性。比如说用户的网络信息,他的上网时长、啥时候上网。比如说用户的使用习惯,她的频次、使用时长、使用时间段、是用的移动还是 PC、关闭和打开的频次间隔。比如说用户行为,她的购物习惯是啥,价格、品质、频率、风格倾向是运动还是职场?品牌倾向是啥、复购率是多少、支付方式是啥,她的浏览习惯是啥?首页详情页停留多久,是精准搜索还是模糊等等,这里就不举例子来说了。

总之这些都是就近发生的具备有很多的不确定性的事儿。

预测标签

她的兴趣点、关注点、潜在需求等等,是咱们通过某种特定规则猜出来的。

比如说你闺蜜是一个漂亮妹妹,情绪稳定,平时也不介入你的情感生活(静态标签:女、情绪稳定、无男友)但在某次你和她吐槽你男票时她情绪变得无比激动痛骂渣男并极力劝你分手!(动态标签:情绪激动、强烈反应、关心朋友)那你会不会怀疑她想搞定你男票?(预测标签:对你男朋友的潜在兴趣、对感情的需求)静态标签为我们提供了闺蜜的基本信息,动态标签反映了她在特定情境下的行为变化,预测标签则对她的潜在需求和动机进行了推测。这种分析能够帮助我们更好地理解她的行为和可能的心理状态。(故事胡编的、如有雷同纯属巧合)

数据的角度进一步的对这些标签做切分又可以分成很多种。

事实标签、模型标签、预测标签

image.png

事实标签

事实标签(你的历史过往)

事实标签就是真实的,具体的事,其中也就是姓名啦、年龄啦、生日啦、居住地啥的等等,当然其中还包含购买记录、浏览记录。这些都是真实在用户身上生效的事。举例子来说你的女票问你谈过几个女朋友,你们都交往了多久,分手原因是啥等等,这就属于在调取你的过往事实标签。

image.png

模型标签

模型标签(你当下都在干啥)

对用户的历史数据分析得出的特征描述,它反映了用户的行为模式、兴趣和偏好,模型标签属于是对你的多个真实行为做了一个组合,属进一步提纯。还是继续说你女票询问你的事,她得出的答案如果是这样的。

交往历史:

之前的女朋友数量:8

平均交往时长:6 个月

分手原因:没新鲜感、没感觉、发现她有问题等

行为模式:是否在社交媒体上频繁展示与不同女性的互动:你经常给美女点赞。

是否有同时与多位女性交往的记录:你和多个妹妹聊天

情感态度:

对待感情的态度:曾玩弄感情

对女性的评价和态:贬低、物化女性

结合以上你的事实标签得出模型标签:渣男!!!

通过对用户标签的整合,描述用户的当前特征和行为模式。

image.png

预测标签

预测标签(你未来会干啥)

预测标签是基于模型标签生成的未来行为预测,试图预测你未来可能的兴趣或行为。

利用模型标签和机器学习算法,预测用户未来可能感兴趣的产品或服务。集合以上的事实标签和模型标签不难预测了吧?那就是你遇到了新妹妹还是会出轨。

image.png

三者关系

在举个例子说一下三种标签的关系。

  1. 事实标签(真实的事)你,18 岁,女,上海,购买记录:买了 5 件短裙。浏览记录:浏览了多个香水和时尚配饰
  2. 模型标签(对你多个标签的归类)兴趣类别:时尚爱好者行为类型:高频购买者消费习惯:倾向于购买时尚相关产品
  3. 预测标签(对你的猜测)可能感兴趣的产品健身器材(如连衣裙、潮流外套)健身课程(如手袋、珠宝)流失概率:低(因为你是高频购买者,表明对平台的忠诚度高)可能的情感状态:可能谈恋爱(基于购买性感内衣和超短裙的行为推测)

估计很多伙伴公司连画像都没有吧?就算有可能你也没看过,很多设计师在设计过程中大多时候全靠意淫。虽然很多公司都没有这些东西,可咱出去找工作面试官就非要问,你说说这不就是欺负老实人吗!就是欺负你啊,能怎样?把上面内容吃透就不怕问了!

把该科普的科普完,这下大家应该能更好的理解用户画像有啥用了。

更好的理解用户需求、优化产品设计、精准市场营销、提高用户留存率、支持决策制定等等。

image.png

画像有啥用 ?

  1. 用户画像能帮咱们深入理解用户需求、动机和痛点“我儿子贼宅,总让我带饭,怎么破?”你会不会想到小葵花课堂开课啦!孩子不听话打一顿就好了~。但是如果你发现这个发帖人的标签里有“男/大学生”你又当如何?
  2. 针对性设计:这位男大学生的需求是啥?我不想给“儿子”带饭。痛点是啥?可能是考虑到大家的情感关系。那如何破?
  3. 方案一:他也在寝室里宅不出去,看谁先饿死。
  4. 方案二:建议他也拜一位义父,让义父给全寝室带。
  5. 这就是咱们根据用户画像得出的针对性方设计案咯~

通过分析用户画像,团队可以确定哪些功能对目标用户最重要,从而合理安排开发优先级。

王二狗、李铁蛋、张铁头都是你的暧昧对象(Tui~渣男)其中你更喜欢李铁蛋一些,你现在想出去约会,请问在王二狗、李铁蛋、张铁头和刘亦菲中你会和谁去约会??一定是李铁蛋吧?因为她是你的目标用户啊,其次可能是王二狗和张铁头。你会选择刘亦菲么?当然不会,因为她并不在你的用户画像以内,更重要的是那是我老婆。

image.png

自己看吧

用户画像帮助企业识别和细分目标市场,使营销活动更具针对性和有效性。

有了用户画像,运营不用再担心广告像石沉大海。比如,你喜欢猫,用户画像就会告诉商家“嘿,这位朋友可能需要猫粮!”然后你的购物页面上就会出现各种猫咪用品,简直比你妈还懂你。

根据用户画像提供个性化的服务和内容,增强用户的黏性和忠诚度。

  1. 了解用户的需求和痛点后,企业可以主动进行沟通和服务,提升用户体验。通过用户画像优化产品,让企业知道该改进什么或者增加哪些新功能。甚至连客服都能更贴心,因为他们已经提前知道你可能需要什么帮助。
  2. 比如说你是卖水果的,忽然发现有一批活跃用户的活跃度降低了,那得联系一下这批活跃用户,为啥最近不买水果了?其中有人一个说:哎~你家的水果有坏果。那此时你应该怎么做?先去查那批水果还有哪些人购买了,是不是他们都活跃度下降了。没下降?那不管他了,但是那些很在意这件事的人呢?给他道歉、补偿、或者其他的举措。(别骂我是奸商哈~我不卖水果,只是借这个例子给大家说一下他以通过标签划分做出不一样的策略)

通过分析用户的行为、兴趣和需求,帮助企业精准了解用户到底是谁,喜欢什么,甚至还可能预测他们下一步会做什么。说白了,就是让企业从“蒙着眼睛射箭”变成“开着瞄准镜打靶”。请看下面的图形化总结,方便大家更直观理解标签模型~

说实话,用户画像的执行体系太大了,给用户打标签怎么标记才是合理的?用户的级别到底怎么划分?和你聊一次天算舔狗,还是聊十次算舔狗?今天他和我聊天了,我标记他是舔狗,如果明天不聊了怎么算?基于用户当前的标签能不能衍生出更多的操作场景?这些场景是否真的成立?其中的弯弯绕绕实在是太多了,今天说的内容不一定能完全与你的画像匹配,大家得根据自身业务去搞。

image.png

可以根据这个图来安排你的脑图

以上差不多说完了关于用户画像的作用和模型的建立,在简单的说一说画像方法吧

首先咱们为啥要做用户画像?

  1. 你都还没饿,你会想吃大餐么?大概不会,如果要做画像应该是遇到了某些问题需解决。而且这个问题是贴合实际业务的、涉及到利益的,不然也没必要解决不是吗?
  2. 画像的出发点要结合实际业务诉求、企业效益挂钩才有用。

其次你有对业务做梳理吗?你要针对谁做画像?对什么业务板块做画像?

  1. 你的业务目标是啥?想要达成什么样的目标?是挽留分手?还是带她看你家猫后空翻?还是准备求婚?
  2. 你这次的目标是针对谁的?是女朋友 1 号?还是 2 号?还是 3 号?你一定会有一个划分。是潜在用户?还是流失用户?还是谁?咱们要划分清楚你要针对的用户群体是谁。

如果以上的内容你都想清楚了,那针对你的业务目标、用户群体你需要提取哪些数据呢?你想要得到啥信息呢?

获取信息方式

  1. 数据埋点定性画像、定量画像、定性+定量画像(访谈、问卷、焦点小组、AB 测)
  2. 用研体系就过于庞大,没办法和用户画像同时展开说,想要了解用研的伙伴可以移步我的其他文章,后续会逐步为大家补充其他的用研方法。

你需要的数据都分布在哪?

静态数据、动态数据、预测数据

以上的信息全都做完了,那考虑一下咱们针对这些数据能做出什么样的分析,你是不是会推测出新的标签,或者有新的归类,是不是能把用户分层做的更加细致。

最后举个画像例子大家浏览一下吧

image.png

点明主题 ,用户画像的目的是在于想了解用户的使用场景与其依赖的功能有哪些。(潜在意思是俺要在这些高度依赖功能中找问题。)

image.png

image.png

桌面研究数据 、企业内部数据、问卷数据合集,形成画像角色标签合集。

image.png

对某类人中的典型用户跟踪总结 ,其中包含个人属性、生活方式、社会属性、家庭属性等等。

image.png

用户角色拆解 ,使用车辆的用户分别都有谁,他们的核心诉求都是啥。

 

image.png

列出在不同属性作用下的用车场景以及功能 。

image.png

总结画像能带来的切入点在哪里:

针对前面分析的内容判断出结果,我们应该在哪里找到设计切入点。(其实这个画像也是我编的,全都是桌面研究搞来的数据,但是你瞅瞅是不是相对来说比你那个靠谱一些?)

最后的最后~脑图串联一下知识点~

image.png

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

 

深度解析|大厂都在用的「选项顺序效应」,如何影响用户决策?

清阳 设计思维

数字化产品竞争中,「选项顺序效应」被大厂广泛应用,借首因、近因效应调整选项顺序,左右用户决策。深耕UI/UE设计的兰亭妙微(蓝蓝设计)在实践中发现,它是衔接产品目标与用户体验的关键。本文结合大厂案例与兰亭妙微实践,解析其对用户决策的影响,提供落地参考。

什么是选项顺序效应?

选项顺序效应(Order Effect) 指用户面对一系列选项时,选项的呈现顺序会显著影响其决策结果。这种现象主要由两种认知偏差驱动:

  • 首因效应(Primacy Effect):最早出现的选项因获得优先曝光,更容易在用户记忆中留下印象。

  • 近因效应(Recency Effect):最后出现的选项更接近决策时刻,在短时记忆中更为突出。

在认知心理学层面,这与人类有限的注意力资源、工作记忆容量以及信息加工方式密切相关。用户并不会严格比较所有选项,而是依赖顺序线索进行“满意化决策”(Satisficing)。

在UX/交互设计中,该效应常见于:

  • 表单与调查(选项顺序影响回答倾向)

  • 电商与订阅套餐(不同顺序改变选择分布)

  • 导航与推荐系统(前置或置底选项更易被点击)

核心风险:用户的选择可能更多受顺序驱动,而非真实偏好。若在设计或研究中忽视这一点,可能导致数据偏差与不公的用户体验。

image.png

为什么顺序效应如此强大?

1. 注意力分配

用户的视觉焦点通常遵循阅读习惯(从上到下、从左到右),前置位置天然获得更多曝光。

2. 记忆机制

  • 首因效应:最早出现的选项因更多复述与加工,更易转化为偏好。

  • 近因效应:最后出现的选项因处于决策“临界点”,直接影响最终选择。

3. 认知负荷与满意化决策

当选项过多时,用户难以全面比较,会采用“选择第一个合理选项”的启发式策略。

4. UX场景中的放大因素

  • 导航栏或底部菜单:靠前或靠下的功能更易被点击

  • 订阅套餐:首位选项被视为“默认选项”,末位高价套餐因“对比效应”更突出

  • 问卷调研:固定选项顺序可能导致结果偏差

核心洞察:用户的选择并非完全理性,界面排列与信息呈现方式深刻影响着决策路径。

设计场景中的顺序效应应用

1. 导航与功能入口排序

场景:底部导航栏或首页主菜单,常将“消息”“首页”等高頻功能置于最左侧或最上方
逻辑:利用首因效应,确保用户优先接触核心任务,降低操作成本

2. 订阅套餐与付费选项

场景:会员订阅页常见“基础版—推荐版—高阶版”布局,并对中间档进行视觉强化
逻辑:结合顺序效应与折中效应,引导用户选择中间档,提升转化

3. 表单与问卷选项设计

场景:兴趣选择、调研问卷
逻辑:为保证数据客观性,应采用随机化选项顺序,避免结果偏差

4. 产品推荐与信息流排序

场景:推荐列表或信息流
逻辑:前列选项点击率与转化率显著高于后列,基于“认知吝啬”原则,用户倾向于选择思考成本更低的前列结果

5. 专业启示

  • 积极作用:优化排序帮助用户快速定位高频功能、常用选项,提升效率

  • 潜在风险:问卷结果可能偏离真实意图;过度迎合商业目标可能侵蚀用户信任

核心思考:顺序效应既是交互优化的工具,也可能成为操控用户选择的手段。设计师需在效率与公平性间寻求平衡。

案例分析:顺序效应在产品中的实战

案例一:美团外卖商家列表

场景:美团外卖频道中,顶部Tab固定展示「附近商家」与「特价外卖」两个入口。滑动时右侧动态面板偶发提示引导切换至「特价外卖」,底部导航栏左侧按钮由“外卖”动态切换为“刷新”。

设计说明

  • 「附近商家」置于首位,符合用户直觉预期

  • 「特价外卖」虽在次序上处于弱势,但通过动态引导与样式差异获得额外感知加权

  • 底部导航栏的再定义,使用户在滚动后自然转向“实时更新”

启示:顺序效应中,若需突显非首位选项,可借助动态触发、UI再编码、差异化样式打破固有注意力分布。但过度引导可能带来注意力稀释与操作负担。

image.png

案例二:京东外卖首页频道与筛选逻辑

场景

  1. 顶部Tab依次为:精选推荐、品质正餐、咖啡、奶茶果汁、快餐便当……遵循由泛化到具体、主流到小众的排序

  2. 「精选推荐」下设有“外卖百亿补贴”专栏及个性化推荐餐馆列表

  3. 餐馆列表支持多维度筛选(优惠活动、商家特色、品质优选、配送速度)

设计说明

  • 将“精选推荐”置于首位,确保用户第一眼落在平台最想推广的内容

  • 高频需求(品质正餐、咖啡奶茶)置于前列,符合使用概率分布

  • 多维筛选满足理性比较需求,降低选择焦虑

启示:顺序效应不仅体现在Tab排列,更贯穿专栏配置与筛选组合。通过“顺序+补贴+筛选”三层递进,逐步引导用户决策。但过度强调补贴可能导致用户忽视多样化商家,筛选维度过多也可能增加决策成本。

image.png

案例三:Instagram底部导航栏

场景:Tab顺序为:首页、搜索与探索、发布、Reels、个人主页

设计说明

  • 首页首位:确保用户进入应用后立即接触社交动态,增强亲近感

  • 发布按钮居中:强化“内容生产”的战略地位

  • Reels第四位:紧随发布入口,借助邻近性推动短视频增长

  • 个人主页末位:形成“消费→发现→生产→沉浸→展示”的闭环路径

启示:Tab顺序基于用户心理路径引导,逐步塑造行为习惯。但战略倾斜可能稀释社交关系核心,使平台从社交转向纯内容消费。

image.png

顺序效应的边界:何时会失效?image.png

  1. 信息密度过高:选项过多时,首尾优势被削弱,用户更多依赖搜索、筛选或排序功能

  2. 用户目标明确:用户带着特定目的时,顺序效应几乎失效

  3. 习惯与算法干扰

    • 高频使用形成固定操作路径

    • 个性化算法动态排序可能降低用户对首尾推荐的信任

    • 中间选项若使用强烈视觉强调,可能覆盖顺序优势

设计的责任:平衡引导与公平

伦理考量

  • 知情权与透明度:确保用户理解推荐逻辑,避免误导或操控感

  • 避免过度操控:首尾位置与稀缺、优惠叠加可能引发焦虑或后悔

  • 平等呈现:在信息密集型平台,避免无意中造成曝光偏差

  • 长期信任:短期优化若损害信任,将影响品牌长期价值

反向策略:用顺序激发自主选择

image.png

  • 刻意打破首尾优势,将重要选项置于中间或随机排序,迫使用户主动浏览

  • 内容平台可通过交替首尾内容,提升冷门内容曝光率

  • 教育平台:调整习题顺序,避免学生只关注首尾任务

  • 电商平台:将冷门商品穿插中间位置,促成更多探索

反向使用启示:顺序效应不仅能引导用户,也可通过反向策略激发主动性与探索欲。设计师应让心理机制为用户价值服务,而非单纯追求短期转化。

 

设计总结

选项顺序效应揭示了:人们面对多个选项时,先看到或最后看到的选项更容易影响决策。这对设计师而言既是机会,也是责任。

核心洞察

  • 首位和末位天然吸引注意,可用于突出关键动作或推荐内容

  • 当用户目标明确时,顺序影响减弱,需结合视觉层级强化信息

  • 有意识地调整或打乱顺序,可以让用户探索更多中间选项

最终思考:设计不仅是优化行为,更是尊重用户决策的自由。巧妙的顺序安排,既能提升效率,也能保持体验的公平与透明。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

5 种用户浏览模式全解:用科学眼动逻辑优化页面布局

清阳 设计思维

众所周知,我们大部分用户群体的阅读习惯是从左到右、从上至下,这与西方文化基本一致。下文将从浏览模式、浏览路径、页面布局三个维度展开分析,结合研究成果与实践经验,优化页面布局,提升用户阅读效率与体验。
 
早在 2006 年,尼尔森团队发表《眼睛轨迹的研究》报告,提出了广为人知的F 型浏览模式。除该模式外,经资料梳理,用户浏览网页时还存在多种典型模式,以下为详细总结(兰亭妙微 ui 设计公司)。
 

一、F 型浏览模式:长文本页面的主流轨迹

image.png

F 型是用户浏览长篇内容的核心模式,眼球以扫描为主,而非深度阅读,眼动热图呈现清晰的字母 F 形态。
 
  1. 顶部水平扫视:先聚焦内容区上半部分,形成 F 的顶栏;
  2. 次段短距扫视:向下滑动后,二次水平扫描范围更短,构成 F 的下横线;
  3. 左侧垂直扫描:最后沿页面左侧快速浏览,形成 F 的竖杆。
 
该模式适配 PC 端、手机端所有文本型页面,手机端因屏幕更小,F 型轨迹更紧凑。
 

F 型布局设计要点

 
  1. 头两段内容是核心,直接决定用户是否继续停留;
  2. 关键词前置,放在标题、副标题和段落开头;
  3. 左侧优先放置关键信息,契合用户垂直扫描习惯。
 

二、Z 型浏览模式:轻信息页面的最优选择

image.png

Z 型轨迹遵循从左到右、从上到下的古腾堡原则,眼动路径形成字母 Z,适合无大段文本的展示型页面。
 
用户视线会自然落在 Z 的起点(左上)和终点(右下),这两个位置是放置核心信息、行动按钮的黄金区域。
 

Z 型布局设计要点

 
  1. 重要信息放在左上、右下视觉落点;
  2. 简化中间区域内容,避免干扰视线流动;
  3. 适合落地页、首页、海报型页面设计。
 

三、专注浏览模式:深度阅读的特殊场景

image.png

专注模式是逐字精读状态,用户会投入大量时间阅读全文,不会遗漏信息。
 
仅在任务驱动、强兴趣导向时出现,比如学习资料、工作文档、深度干货文章等场景。
 

设计适配建议

 
  1. 减少干扰元素,保持排版简洁舒适;
  2. 保证文字清晰度、行间距与可读性;
  3. 无需刻意引导视线,聚焦内容本身即可。
 

四、斑点浏览模式:关键词驱动的碎片化浏览

image.png

用户只关注加粗、变色、高亮的关键词,或自身感兴趣的信息,眼动热图呈现零散斑点状。
 
这是用户快速筛选信息的常见方式,核心是只看重点、跳过无关内容
 

设计适配建议

 
  1. 核心信息用加粗、对比色突出;
  2. 控制高亮元素数量,避免视觉混乱;
  3. 关键数据、利益点单独标注。
 

五、分层蛋糕浏览模式:标题导向的高效扫描

image.png

当页面有清晰的标题、副标题、分级加粗时,用户会只看突出层级,快速略过正文,眼动轨迹像分层蛋糕的纹路。
 
这是仅次于专注模式的高效信息获取方式,也是用户最常用的快速阅读逻辑。
 

设计适配建议

 
  1. 建立清晰层级:主标题→副标题→重点句→正文;
  2. 用标题提炼核心,让用户 3 秒读懂内容;
  3. 重点内容加粗,弱化冗余文字。
 

 

关键排版结论:图片与布局的适配逻辑

 
  1. 信息型图片:对齐排版、Z 型排版差异极小,都能吸引用户关注;

    image.png

  2. 装饰型图片:优先用左对齐排版,用户可自动忽略,不干扰文字阅读;Z 型排版会增加图片曝光,但易分散视线;

    image.png

  3. 首图至关重要:决定用户对后续图片的价值判断,避免顶部放无意义装饰图;
  4. 用户浏览习惯:看完页面底部会回滑查看,建议添加「回到顶部」功能。
image.png

 

最终总结

  1. 长文本用F 型,展示页用Z 型,多种模式可嵌套使用;
  2. 信息图优于装饰图,无意义图片会被用户自动忽略;
  3. 核心信息放视觉热点区,层级清晰、关键词前置是通用原则;
  4. 适配用户回滑习惯,优化页面上下交互体验。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

 

为什么很多大厂主按钮不用主题色?原来还有这5个设计方法!

清阳 交互设计及用户体验

我发现很多人设计主按钮,只会用主题色。而兰亭妙微 ui 设计公司在服务大量企业级产品过程中发现,很多大厂设计的主按钮,并不统一用主题色。

注意,这里讲的不是作为陪衬的次按钮,而是一个页面上最显眼的主按钮 CTA (Call to Action) 按钮。

 

image.png

一、背景对比色:极致醒目,适配多色背景

image.png

核心逻辑:采用与背景色强对比的黑白基础色,让按钮在色彩丰富的界面中脱颖而出,解决主题色因画面元素干扰而辨识度不足的问题。

image.png

大厂案例:闲鱼主题色为黄色,搜索按钮选用黑色;YouTube 极少使用红色主题色,主按钮以黑色为主,而在黑底广告卡片上则切换为白色;Spotify 绿色主题色之外,大量主按钮采用白色。这类设计的共性是黑白与背景形成反向对比,白色背景配黑按钮,黑色背景配白按钮。

image.png

image.png

image.png

实测验证:美国电商平台 Etsy 曾对商品详情页 “加入购物车” 按钮做黄 / 黑配色 A/B 测试,最终选择黑色方案,数据证明其视觉吸引与点击转化效果更优。
 

image.png

image.png

适用场景:页面包含大量图片、视频、彩色元素,需要主按钮快速抓住用户注意力的场景,如首页搜索、内容播放页核心操作、电商商品页转化按钮。
 

二、背景相似色:低调适配,避免过度抢眼

image.png

核心逻辑:使用半透明色、浅灰色等与背景色调相近的色彩,让按钮融入界面的同时保持可识别性,适用于 “需作为主按钮,但无需过度醒目” 的交互需求。
 
大厂案例:酷狗短视频广告的 “看全集” 按钮为半透明样式;喜马拉雅播放页按钮均采用半透明设计;闲鱼帮助与客服页底部主按钮用浅灰色;金融 App Revolut 的按钮也以半透明为主。

image.png

image.png

image.png

 

设计考量:这类场景的背景往往色彩鲜艳(如视频、彩色广告图),叠加主题色易显杂乱,而强对比色又会过度吸引注意力,甚至干扰用户核心操作。例如未成年模式的 “不再提醒” 按钮,若设计得过于醒目,可能导致有实际需求的用户误触。
 

image.png

适用场景:背景色彩多变的视频 / 广告界面、辅助性核心操作、需避免用户误触的功能按钮。
 

三、环境色:随境变色,实现视觉和谐

image.png

image.png

image.png

核心逻辑:让主按钮色彩跟随界面环境(如广告 banner、内容卡片)动态变化,贴合环境色调的同时保证识别性,让整体视觉更协调。
 
大厂案例:美图秀秀首页主按钮会随广告 banner 的色彩同步调整;YouTube 部分广告卡片的按钮,色彩会根据卡片内容进行适配。
 
设计要点:该方法对技术实现有一定要求,需保证按钮色彩与环境的适配性 —— 既不能与环境色融合导致识别困难,也不能对比过强破坏整体美感,核心是 “和谐中突出交互”。
 
适用场景:首页广告 banner 旁的核心操作按钮、个性化内容卡片的交互按钮、注重视觉美感的创意类 App 界面。
 

四、模块色:色彩定类,助力快速识别

image.png

image.png

image.png

核心逻辑:根据产品功能模块的固定属性赋予专属色彩,让用户通过色彩快速关联按钮功能,形成视觉记忆,替代主题色的单一标识作用。
 
大厂案例

image.png

  1. 行业通用模块色:国内 App 的会员模块普遍使用金色,即便品牌主题色不同,酷狗(蓝色)、微信读书(蓝色)、携程(蓝色)的会员相关按钮均为金色;营销 / 优惠券模块多采用橙红色,闲鱼(黄色)、QQ 音乐(绿色)、饿了么(蓝色)的优惠券按钮均沿用这一配色。image.png
  2. 产品专属模块色:猎聘 App 用橙色代表求职者模块、蓝色代表招聘方模块,通过色彩划分不同身份的功能入口。
     
    设计价值:对老用户而言,无需看清按钮文字,仅通过色彩就能快速判断功能,大幅提升交互效率;对新用户而言,固定的模块色彩能快速建立功能认知。
     
    适用场景:产品有明确功能模块划分的场景,如会员体系、营销活动、身份选择、功能分类等。
 

五、状态色:色彩表意,规避操作误触

image.png

image.png

核心逻辑:利用用户的色彩认知习惯,将按钮与操作状态绑定,用色彩传递 “可操作 / 不可操作”“正向 / 负向” 的信息,通过色彩提示规避误触。
 
大厂案例

image.png

  1. 基础操作状态:所有手机的来电显示界面,均用绿色代表 “接听(正向操作)”、红色代表 “拒绝(负向操作)”,贴合大众的色彩认知习惯。
  2. 电商操作状态:淘宝直播间商品列表,橙色按钮代表 “可立即抢购”,蓝色按钮代表 “不可抢购可预约”,用色彩明确区分商品操作状态。
  3. 风险操作提示:删除、取消等负面 / 风险操作的按钮多采用红色,通过醒目的色彩提示用户谨慎操作。
     
    设计原则:遵循用户的普遍色彩认知,不随意颠覆固有习惯(如避免用绿色代表删除、红色代表确认),让色彩成为操作状态的 “视觉提示牌”。
     
    适用场景:有明确操作状态区分的场景、包含风险 / 负面操作的界面、需要用户快速判断操作可行性的交互入口。
 

主按钮放弃主题色的核心原因与适用场景总结

 

核心设计逻辑

 
大厂主按钮不用主题色,本质是从 “品牌视觉统一” 转向 “交互体验优先”,当主题色无法适配界面场景、满足交互需求时,选择更贴合实际的色彩方案,具体原因可归纳为 5 点:
 
  1. 界面色彩过于丰富,主题色的醒目度不足;
  2. 环境色彩多变,主题色难以与整体视觉和谐;
  3. 主按钮为辅助性操作,无需过度抢眼;
  4. 需通过色彩划分模块,帮助用户快速理解功能;
  5. 需通过色彩传递操作状态,避免用户误触。
 

通用设计建议

 
当遇到以下 3 种情况时,可直接放弃主题色设计主按钮:
 
  1. 按钮周围的色彩鲜艳、元素丰富,主题色易被淹没;
  2. 产品有明确的功能模块划分,需要色彩建立视觉记忆;
  3. 按钮为辅助性核心操作,或包含风险操作,无需 / 不宜过度醒目。
 
主按钮的色彩设计,最终的核心不是 “是否使用主题色”,而是 “色彩是否服务于交互”。品牌主题色可作为视觉基础,但在实际设计中,需结合界面场景、用户需求、操作逻辑灵活调整,让色彩既贴合产品视觉体系,又能真正引导用户高效交互。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

从方法到工具,兰亭妙微设计师带你高效搞定图表设计

清阳 设计资源

数据可视化,是用视觉语言与数据对话。一份好的图表设计,不仅要美观,更要精准传递信息、高效辅助决策。兰亭妙微UI设计公司结合实战经验,从图表选型、设计原则、视觉规范、实用工具四大维度,帮你从零到一做好专业图表设计。
 

 

一、数据可视化的核心价值

image.png

数据本身是抽象的,可视化是让数据产生价值的关键。它能把复杂数字转化为直观图形,帮我们快速识别趋势、差异、分布、占比、流转等核心信息,避免因表达不当导致信息失真。

image.png

日常设计中,很多人过度追求视觉效果,却忽略数据与图表的匹配度,最终让好看的图表失去实用意义。好的可视化,永远是数据为先,设计为辅
 

 

二、图表设计核心方法:先选对,再做好

image.png

图表设计以目标为导向,先明确要传递的信息,再匹配图表类型,三步即可完成正确选型。
 

1. 图表选型三步法

image.png

(1)读懂数据:明确核心关系

 
先锁定页面最重要的数据,确定要表达的核心关系:
 
  • 比较:不同类别数据差异
  • 趋势:随时间 / 序列的变化
  • 分布:多变量关联与规律
  • 构成:整体与部分的占比
  • 流转:流程阶段的数值变化
 

(2)分析用户:匹配阅读需求

image.png

不同角色关注重点不同:
 
  • 管理者:看整体趋势、核心结果
  • 业务岗:看细分对比、个体变化
  • 执行层:看明细数据、流程节点
 

(3)按数据关系选图表

image.png

  • 比较类:柱形图、条形图、折线图
     
    柱 / 条形图:快速对比类别差异,是最通用的选择;
    image.png
    折线图:展示连续数据(如时间)的变化趋势。
  • 分布类:散点图、气泡图、雷达图

    image.png

    散点图:看变量相关性;气泡图:新增维度用大小表达;雷达图:多指标综合对比。
  • 构成类:饼图、环形图、树状图

    image.png

    饼 / 环形图:展示单一维度占比;树状图:呈现层级化结构占比。
  • 流转类:漏斗图、瀑布图、桑基图

    image.png

    漏斗图:转化流程分析;瀑布图:数值增减变化;桑基图:数据流向与分配。
 

2. 信息图形(Infographic)

image.png

偏向艺术化的可视化形式,适合科普、新闻、报告等场景,侧重易懂、美观、定制化,需要设计师具备信息提炼与视觉美化能力。
 

 

三、图表设计四大原则

 
遵循原则,避免信息扭曲,提升可读性。
 
  1. 准确性

    image.png

    数据真实无扭曲,优先用大众熟悉的图表(柱、线、饼);颜色不超过 5 种,降低认知负担。
  2. 一致性

    image.png

    颜色、样式、术语全局统一,同一指标固定用同一颜色,保持视觉连贯。
  3. 辅助性

    image.png

    用标题、图例、交互提示降低理解成本;小众图表需加说明,通用图表保持简洁。
  4. 可扩展性

    image.png

    适配多设备尺寸,兼顾宏观(整体)与微观(单点)数据;通过小图预览、大图交互实现层级展示。
 

 

四、图表视觉设计规范

 

1. 基础构成

image.png

  • 标题与说明:清晰点明核心结论,副标题补充数据范围、时间等背景;
  • 坐标轴与网格:横轴常用作时间 / 类别,纵轴为数值;网格线密度适中,小图可省略;
  • 图形元素:柱、线、点等保持简洁,适配真实数据与极限场景。
 

2. 颜色设计

image.png

  • 用法逻辑:色相区分类别,明度 / 饱和度表达数值梯度;
  • 配色方式:邻近色(温和统一)、互补色(强对比突出)、连续渐变(体现数值变化);
  • 品牌适配:沿用品牌色,或从 Logo、素材图提取配色,保持视觉统一。
 

3. 数据墨水比

image.png

核心:用最少的装饰,传递最多的数据信息
 
  • 保留核心数据元素,删除无关装饰;
  • 不过度简化导致信息缺失,在简洁与完整间平衡。
 

 

五、高效图表设计工具

 
无需复杂操作,在线 / 开源工具快速出图:
 
  1. Flourish:在线可视化平台,模板丰富,支持多数据源导入与一键导出;image.png
  2. ECharts:开源免费,配置灵活,兼容多端,适合前端开发与设计师使用;image.png
  3. Tableau Public:拖拽式操作,快速制作交互式仪表盘,支持在线分享;image.png
  4. Informationisbeautiful:创意可视化模板,适合制作高颜值信息图;image.png
  5. D3.js:前端可视化库,支持高度自定义交互图表;image.png
  6. 配色工具:Muzli Colors、Coolors、Brand Colors、Flat UI Colors。

     

    转载:优设

    兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

经典图标设计标准,零基础也能快速掌握

清阳 图标设计文章及欣赏

谷歌Material Design的图标设计标准正在重新定义界面视觉语言。兰亭妙微UI设计公司深度解析从简洁性、几何形状到风格统一的三大核心原则,详解24dp标准尺寸下的网格系统与布局规范,并揭秘复杂图标的细节处理技巧。无论是圆角控制还是描边粗细,这套方法论让零基础设计师也能快速掌握专业级图标设计。

今天分享的是「图标设计准则」。图标是界面设计里的 “刚需元素”,一个小图标能快速传递很多信息。好的图标需要兼顾简洁、现代、友好。但图标的尺寸很小,设计时既要严格遵守设计规则,又得清晰表达信息,这样才能保证整套图标的风格统一、辨识度高。

今天就来聊聊大厂在用的图标设计原则和设计规范,配合案例进行设计分析~

01 图标设计的3个核心原则

① 形式够简洁

给大家举个例子,就说下面的小船图标,想让图标清晰好认,就得做减法,那么用正面的简约船身造型最合适。

如果图标设计的过于细致,例如图标中添加了船帆、桅杆或者旗帜等细节,太写实的图标不仅会降低识别速度,还会破坏整套图标的视觉统一性。

设计总结:

✅ 简化图标造型,提升清晰度和辨识度

❌ 拒绝过度写实,避开复杂繁琐的设计

② 多用几何形状打底

使用几何图形和统一的基础形状来设计图标,能打造出清晰醒目的视觉感受。哪怕结构简单,也能保持清晰的形态,缩小到小尺寸时也照样容易分辨。

反过来讲,尽量少用那些纤细、松散的不规则形状,它们会破坏线条的连贯性,让整套图标看起来乱糟糟的,没个统一的调性。

设计总结:

✅ 靠几何图形和统一的造型,打造醒目视觉效果

❌ 少用纤细、不规则的形状

③ 整套风格保持一致

这里给大家看一组风格统一的图标示例。对品牌识别和系统适配来说,保持图标集的视觉一致性太重要了。

要是把不同风格的图标混在一起用,用户根本没法把它们当成“一家人”。所以同一套图标里,不管是形状、线条粗细,还是比例、边角处理,都得按同一个标准来。

设计总结:

✅ 单套图标集里视觉风格要保持统一

❌ 千万别混搭不同风格的图标

02 图标尺寸怎么选?

在谷歌的Material Design 3 设计规范中,标准 (基线) 图标尺寸是24dp×24dp,设计时建议按100%的比例来做,这样能保证像素级的精准度。

除了这个标准尺寸,还有20dp、40dp、48dp这几种常用尺寸可以选:

20dp:适合用在桌面端、紧凑布局,或者那些小尺寸的视觉元素

40dp/48dp:针对显示器、大屏幕,还有标题栏这类特殊场景

03 标准图标布局

设计图标时,内容需要放在有效区域内里。有效区域是指页面滚动或适配不同设备时图标不会被遮挡的“安全可视区域”。

如果想让图标的视觉冲击力更强,可以让内容延伸到有效区域和裁剪区域之间的留白处,但不能超出裁剪区域,不然图标很容易被裁剪显示不全。

具体要怎么布局呢?看下面这两点就够了:

① 有效区域:图标内容要放在20dp×20dp的范围内,四周各留2dp的边距

② 边距:给有效区域留出2dp边距,既能让图标和周围元素拉开视觉距离,又能让整体看起来更平衡

接下来通过一个图标案例来简单总结一下:

上图从左到右分别代表了在有效区域、在有效区域和裁剪区域、在裁剪区域之外创建的图标案例。

设计总结:

✅ 图标内容保持在20dp×20dp的有效区域里,记得留2dp边距⚠️ 想加视觉冲击力?内容可以延伸到边距区域

❌ 任何情况下,图标都不能超出裁剪区域

① 网格和关辅助线

一套图标中可能有的是圆形,有的是方形,那怎么才能保证形状不同的图标保持视觉大小的一致性呢?

这种情况大家在设计图标时应该都碰到过,解决方法可能大多是通过眼睛对比查看,把看着小的图标调大一些或者把看着大的图标调小一点。这种方法效率不高,而且设计出来的图标大小不容易保持一致性。

这里提供一个更科学和高效的辅助图标设计方法——使用网格和辅助线,照着这些辅助线来设计图标,能轻松保持比例一致。

例如常用的24dp×24dp图标网格,由正方形、圆形、竖矩形、横矩形这四种基础辅助线构成。它们就像图标的“骨架”,能帮所有图标保持统一的比例和对齐效果,哪怕放大10倍看,结构也照样清晰。

给大家拆解一下这四种辅助线:

方形辅助线:边长18dp,是图标的基础平衡基准。比如图表类图标就可以照着这个方形来画,保证比例稳定。

圆形辅助线:直径20dp,用来设计圆润平衡的图标。像地球图标用这个圆形打底,就能和其他图标和谐搭配。

垂直矩形辅助线:高20dp、宽16dp,适合强调纵向比例的图标。比如文档图标围着这个竖矩形设计,比例会特别清晰。

水平矩形辅助线:高16dp、宽20dp,适合横向比例的图标。像邮件图标用这个横矩形当基础,形状会很均衡。

04 图标结构解析

一个完整的图标,由圆角、起始/结束点、内部形状、外部轮廓等组成。

① 图标圆角

这里重点说下大家容易踩坑的“圆角”的设计:例如下图的银行卡图标,采用外角2dp圆角、内角尖角的设计,这样既柔和又利落。

如果把圆角做得太大,如下图左侧文档图标,图标的辨识度就会下降;如果一个图标中混用不同半径的圆角,如下图右侧的图标,整个图标看着就会很杂乱。

设计总结:

✅ 按规则设置圆角,统一圆角半径

❌ 避免圆角半径过大/半径混用的情况

② 描边粗细

推荐的图标描边粗细是2dp或常规 (400),也可以根据需求灵活调整,例如在MD3设计规范中就提供了100 (细)到700 (粗)的多种选择。

这里有两个小技巧:

设计直角线性图标时,描边的末端尽量做成直角,例如下图左侧的箭头图标,45度切割的直角就很清晰;在下图右侧的添加图标中,内部的加号也采用了2dp的描边粗细,与外轮廓保持一致。

另外要注意一套图标需要保持相同的描边粗细。如果描边x粗细不一致,不仅会模糊图标形状,还会破坏视觉一致性。

设计总结:

✅ 描边粗细保持统一,直角图标末端也用直角

05 复杂图标怎么处理?

如果图标需要一些精细的细节,可以通过一些灵活的调整来提升辨识度,但不能扭曲基础的几何形状或破坏整体比例。

比如回形针图标,为了在24dp的空间里放下多个曲线,可以把 2dp的标准描边粗细微调成1.5dp;再比如拉面图标,下面的碗作为托底采用2dp的粗描边,上面的筷子拉面等元素细节更多,则采用1.5dp的细描边,让细节更清晰。

还有一个小原则:设计复杂图标时,尽量保持正面视角,别做倾斜、旋转的等距或者3D效果——多余的深度感会增加识别难度。

设计总结

✅ 正面视角设计,细节微调不跑偏

❌ 少用倾斜、旋转的等距/3D呈现方式

最后

图标是一种高效的视觉语言,能打破语言壁垒,快速传递信息。但它的优势,必须建立在清晰的结构和统一的规则之上。

设计时基于标准的辅助网格走,保持比例均衡、视觉重量一致,设计出的图标才不会喧宾夺主,反而能提升整个产品的用户体验。

转载:人人都是产品经理

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微带您欣赏ui设计:解析国外 Agrilo 园艺 APP,看 AI + 设计如何重塑家庭种植体验

蓝蓝设计的小编 移动端UI设计文章及欣赏

在全球数字化浪潮下,农业科技与日常生活的结合越来越紧密,国外涌现出不少兼具技术实力与设计美感的优秀产品。今天,北京兰亭妙微将带大家解析一款来自海外的 AI 园艺科技 APP——Agrilo,从用户体验与 UI 设计视角,看看它是如何用科技与美学解决家庭园艺痛点,为行业带来启发的。
 

对于许多都市园艺爱好者来说,养花种草是治愈生活的美好方式,但实际养护过程中却常常遇到各种难题:土壤湿度难以把握、施肥缺乏科学依据、酸碱度失衡导致植物生长不良…… 这些问题长期以来都依赖个人经验,缺乏标准化、数据化的指导,让不少人的种植热情屡屡受挫。而国外这款 Agrilo APP,正是瞄准这一痛点,通过 AI 技术与专业土壤检测相结合,打造出一套完整的家庭园艺智能管理方案,为用户提供科学、简单、高效的种植支持。
 

作为一款 AI 驱动的农业科技产品,Agrilo 的核心价值在于将复杂的农业知识轻量化、工具化。它能够实时监测土壤的 pH 值、湿度、氮磷钾营养含量等关键指标,并通过智能算法分析,为用户生成精准的养护建议,包括浇水频率、施肥用量、种植注意事项等。即使是没有任何种植基础的新手,也能通过清晰的指引轻松上手,真正实现科学种植,让每一株植物都能在最佳环境中健康生长。
 

从 UI/UX 设计角度来看,这款国外案例展现了极高的成熟度。整体界面采用极简克制的设计风格,深灰色主调营造专业可靠的氛围,亮黄色点缀提升视觉活力,信息层级清晰分明,数据展示直观易懂。操作流程流畅自然,没有冗余步骤,充分体现了 “以用户为中心” 的设计理念,让高科技产品不再冰冷复杂,而是贴近日常、易于使用。这也是值得国内产品设计团队学习与借鉴的地方。
 

通过解析 Agrilo 这款国外优秀 APP,我们可以清晰看到:好的产品不仅需要强大的技术支撑,更需要优秀的设计将技术价值传递给用户。北京兰亭妙微一直专注于 UI/UX 设计与用户体验优化,在关注国内外前沿案例的同时,持续将先进设计理念融入实际项目,为客户打造兼具美学与实用性的产品体验。
 
未来,我们也将继续探索更多垂直领域的设计可能,从全球优秀案例中汲取灵感,不断提升设计能力,为更多科技产品赋予更好的用户体验,让设计真正赋能产品、服务用户。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

深耕设计内核!兰亭秒微 UI 设计核心知识点全解析

涛涛 设计管理与成长

在 UI 设计领域不断发展创新的当下,扎实掌握核心知识点是设计师打造优质作品、赋能产品体验的根本,更是企业构建专业设计团队、夯实产品竞争力的关键。兰亭秒微立足产品设计与研发实践,结合行业前沿设计理念和站酷平台优质 UI 设计知识沉淀,从设计分类、核心原则、界面设计、交互规范等多个维度,梳理 UI 设计核心知识点,为团队设计师搭建系统化的知识框架,让设计工作有章可循、有法可依,助力设计师在实操中精准运用知识点,打造兼具实用性与美感的产品设计。

体系化赋能设计!兰亭秒微 UI 设计师知识体系全梳理

涛涛 设计管理与成长

在数字化产品快速迭代的当下,UI 设计作为产品与用户之间的核心连接桥梁,其专业性和体系化程度直接决定了产品的用户体验与市场竞争力。兰亭秒微深耕产品设计与研发领域,始终重视 UI 设计团队的专业能力建设,深知碎片化的知识积累难以支撑设计师应对复杂的产品设计需求,唯有搭建完整、清晰的知识体系,才能让设计师在工作中提纲挈领、高效输出,为公司产品打造更优质的视觉与交互体验。

B 端设计师必懂的开发知识:核心价值与学习方向

涛涛 前端及开发文章及欣赏

深耕 B 端产品 UI/UX 设计领域,聚焦企业级产品的体验落地与效率优化。在长期的 B 端设计实战中,我们发现一个核心共识:懂开发知识的 B 端设计师,才能真正输出可落地、高适配、强协同的设计方案。B 端设计的核心是解决企业业务效率问题,而设计方案的最终落地离不开技术实现,脱离开发逻辑的设计,终究只是无法落地的 “飞机稿”。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档