头像篇帮你快速掌握头像基础设计知识!

最真实的例子,当我们在某社交软件将头像设置成帅哥/美女,搭讪与被搭讪的概率会成倍提升,这也是为什么行骗的人总是会先设置一个美女头像(背后抠脚大汉)总能提高成功率的原因,头像的魔力可见一斑。

不论是真实社交、虚拟网络,甚至跟社交毫不沾边,任何应用只要有用户的概念,就会有头像的存在,只不过产品头像权重、用户重视程度不同而已。在这个“看脸的时代”,跟陌生人搭讪的成本很高,第一步就用看头像来确定是否建立社交关系是最直接快速的方式。

在UI设计中,95%以上的应用会涉及到头像元素,例如消息列表、个人中心/主页、会员服务、评价、排行榜等功能版块,明明用昵称或几个文字就能说清楚的地方,偏偏设计了一个头像、而且还占据该信息组的主视觉。

一、头像在UI界面中的作用

1.多账号区分

2.凸显自身形象

某个用户使用了一张成熟稳重、端庄得体的形象照作为个人头像时,在大多数情况下,这个人一定不是个动不动就爆粗口的键盘侠或网络喷子,虽然“隔着屏幕你又打不到我”,但在发表内容时会注意自己的措辞,潜意识的维护自己的网络形象(头像),这就是现实与网络中头像的人格映射。

当碰到匿名社交时,为自己戴上面具后就会变得肆无忌惮,与前者相比,至少不再那么约束。

3.“面对面”沟通代表

如果是一个单身男性,当社交应用中有人加好友或请教问题时,针对有美女头像的用户,其响应效率、质量都会比其他头像的用户要高,这是不争的事实(别杠,我们不谈个例),这也说明自己时刻都在注意在对方心中的形象,总担心被对方看“穿”。

二、各场景中的头像类型

1.默认头像

1)灰色头像

灰色头像色彩感较弱,可能会导致视觉不平衡,打破画面的美感,但也正好通过这一丝的不和谐,用一种明显且突兀的方式提醒用户去更换头像,强迫症患者几乎无法抵抗。

2)彩色头像

2.系统推荐头像

1)用户选择

另外,最近很火的匿名社交应用Soul只能使用系统头像(可自定义调整),不允许上传图片,这源于平台希望用户抛开颜值,通过不同的个体审美、价值观等进行心灵交流,找到真正的灵魂伴侣。

同时,因为庞大的用户量,图片是否合法、质量的好坏带来了一系列的监管问题,使用系统推荐头像,在很大程度上能降低图片管理成本(PS:强制使用系统头像跟产品定位有着绝对的关系,并非拍脑门决定)。

2)系统选择

注册成功后,系统会随机匹配个人头像,相比用户自己在列表手动选择,则多了一份神秘感与期待感,让头像的设置变的更有趣,例如小红书、B站等应用。

3.文字头像

常出现在移动办公类应用中,由系统自动处理,基于OA类应用社交属性并不强,大多用于内部团队工作中的沟通交流,例如钉钉、纷享销客、飞书等。为了更清晰的获取对方个人信息,这类产品头像更倾向于上传自己的真实照片(部分企业强制),在用户未上传照片的情况下,系统会提取中文名字中的后两个字(两个字的全名显示)、英文名字前两个字母作为个人头像使用,方便团队成员更好的辨认。

4.群组头像

5.用户头像组

6.历史头像

1)同平台

2)跨平台

7.其他头像

除了上述头像类型外,还有如视频头像、GIF头像、轮播头像等,这些并不常用,了解一下就好。

另外就是之前刮起的一阵虚拟形象社交风潮而爆火的捏脸头像,极具针对性的新型头像类型,如果感兴趣,可以去下载Soul、崽崽APP体验,这里不多做赘述。

三、头像状态与附加操作

1.不同的用户状态

2.事件通知

常用于非社交类应用(社交应用有更专业的处理方式)的未读消息/事件通知,显示在头像右上角,点击查看后会消失。可设计不同的样式以体现视觉的强弱关系,对用户产生不同程度的引导。

·弱提示:小圆点提示,填充红色或主体色,提示程度较弱;·中等提示:白色圆形+数字提示,数字色彩可以是红色或主体色;·强提示:圆形白色描边及红色填充+数字反白,较突兀的提示方式。

3.挂件/装饰

很多挂件只是纯粹的装饰品,能起到美化、娱乐、趣味性的作用;增值服务、特权服务、认证类的标识更是一种身份的象征,体现出荣誉、尊贵的感觉;有小部分应用将用户的勋章标识重叠在头像某个位置,时刻给用户带来一种坚持完成任务之后的成就感,满足其虚荣心的表现。

4.交互操作

还有部分应用,在头像右下角通过有明确指向含义的图标引导用户操作。

四、方形与圆形的定义

说了这么多,依然不知道如何选择,那么笔者将根据一些常用到头像的三个模块给你一些建议:

五、头像设置步骤

2.上传限制

上传图片时,一般会对图片的格式(JPG/PNG/GIF等)、尺寸(宽*高)、文件大小(多少KB/M)作出限制,这些需要给予明确的提示,避免用户因操作多次失败而受挫离开,同时也能避免因用户不知道平台可使用GIF、视频等头像格式,而雪藏了产品的多元化服务。

3.图片裁剪

4.效果预览

需要给用户提供真实的效果预览图,避免用户因操作失误或对处理后的头像不满意再次重复整个更换流程。所见即所得,通过降低用户重复操作的概率也是提升用户满意度的方式之一。

六、引导用户上传头像

1.文案引导

当产品要求用户组做某件事情时,即便是为用户考虑,也需要给予一个合理的理由,可使用趣味、情感化或鼓励性质的文案引导用户主动上传头像,例如社交类应用“一切都很完美、就差一个帅气的头像了”、“换个好头像会让更多人认识你”等。或者用户在编辑个人信息时给予鼓励“恭喜你,只差最后一步了,换个头像就十分完美了”。

3.纳入注册流程

部分社交类应用将上传头像作为注册流程中的必选步骤,任何用户都无法跳过,切记这种方式非必要不可滥用/乱用,这相当于对用户注册增加了门槛,任何产品每多一点操作成本,都会有一批用户离开,需根据产品定位以及强制上传头像的重要性来决定,避免得不偿失。

七、结语

「无头像不社交」,在设计界面之前,设计师应该考虑清楚产品社交属性的等级,再来决定头像在界面中的权重、占比,至于如何使用,还需根据产品的实际情况并结合用户头像的基础知识合理的做出判断。

「麻雀最小、五脏俱全」,头像看似一个很简单的UI元素,但在设计过程中需考虑的知识点还是有很多,这就需要我们平时不断的积累、探索,并多多总结,再融合到实际的UI设计中,做出有理有据的设计。

THE END
1.VisionOn一款集流程图思维导图白板于一体的轻量级在线制图...VisionOn 的每个文件,便是一个无限画布。在每个画布中,存在左侧工具栏,支持图形、文本、文档、便签、容器、媒体、手绘、表格、思维导图、格式面板等多种元素。 依赖于左侧工具栏的多种元素,VisionOn 成为一个集流程图、思维导图、白板等功能于一体的制图工具和创意思考工具。 https://developer.aliyun.com/article/1292271
2.社交求职类App我的简历思维导图商业画布原型设计蚂蚁KL社交求职类App我的简历 思维导图 商业画布 原型设计,蚂蚁KL,UI,交互/UE,站酷网,中国设计师互动平台.第一次产品求职的作品https://www.zcool.com.cn/work/ZMTc3Mjc5NzI=.html
3.全球AI网站汇总思维导图模板新一代“AI人工智能”思维导图 https://shutu.cn/?from=aigc.cn 内容神器 – 新媒体文章编辑器 及时发现热点、搜索素材、选题分析 https://www.5ce.com/ 听悟 阿里达摩院发布的一款 AI 效率工具 https://www.tingwu.cn/ 壹伴助手 高效地排版、修图、找素材和回消息 https://yiban.io/ ...https://www.processon.com/view/6459dd33b32d8e579cd939cc
4.visio流程图插件免费Visio查看器是一款可以直接打开Gmail中的Microsoft Vision文件并进行查看的谷歌浏览器插件。 分类:Chrome生产工具插件 Lucidchart:免费的离线图表应用 2015-07-19 0人评论 48084次浏览 4.2分 Lucidchart是一款chrome离线图表应用,可以帮助用户绘制流程图、实体模型、UML、思维导图等更多的图表。 分类:Chrome生产工具插...https://huajiakeji.com/tag/Visio
1.Visio中的流程图使用事件驱动流程链 (EPC) 关系图创建业务流程的高级可视化模型。 有关详细信息,请参阅创建事件驱动的进程链 (EPC) 关系图。 故障树分析图 使用故障树关系图记录业务流程,包括六西格玛和 ISO 9000 流程。 有关详细信息,请参阅创建故障树分析关系图。 https://support.office.com/zh-cn/article/f064cd25-d7d5-47b8-87e1-ecb3c39cc165/
2.Visio怎么画思维导图?如何在Visio中绘制思维导图?在众多的思维导图工具中,Visio无疑是备受推崇的一款软件。那么,你是否也曾被它强大的功能所吸引呢?是否也想学会如何在Visio上画出精美的思维导图呢?别担心,今天我就来给你揭秘一下Visio画思维导图的小技巧!让我们一起来探索这个神奇的软件,为我们的思维增添一抹独特的色彩吧! https://www.foxitsoftware.cn/pdf365/mind/4829.html
3.怎么用visio画逻辑架构图visio如何画思维导图怎么用visio画逻辑架构图 visio如何画思维导图 成为职场的一员后,我越来越意识到,学会、掌握绘制思维导图是很重要的一件事情。很多学习、工作上的任务、难题,以思维导图的方式汇总、整理出来以后,会变得简单许多。因此,在学习、工作之余,我常常自主学习脑图的绘制技巧。https://blog.51cto.com/u_16099177/9604312
4.扒一扒ProcessOn新功能——一键编号图形组合左侧导航画布...思维导图.一键编号 思维导图新增多种全新主题风格,让您的创作赏心悦目 思维导图新增一键编号功能 流程图.图形组合 自定义组合图形功能:新增流程图我的图形功能,用户可以设置或者上传自己的图形 流程图.画布水印 流程图泳池泳道增加快捷操作菜单 流程图增加设置画布水印的功能 ...https://cloud.tencent.com/developer/article/2348560
5.《花雕学AI》33:如何用XMind制作AI思维导图鱼骨图和组织结构图4、图像:在分支上或旁边添加的图片,用来增强分支的视觉效果和记忆效果,图像可以是自己画的或从其他来源获取的。 要制作一个有效的思维导图,我们需要遵循以下几个原则: 1、从中心开始:先确定中心主题,然后从中心向外延伸分支,不要从边缘开始。 2、保持层次清晰:每一层的分支应该与上一层的分支有明确的关系,不要...https://blog.csdn.net/weixin_41659040/article/details/130598819
6.流程图制作工具和绘图软件MicrosoftVisio常见问题解答 全部展开|全部折叠 Visio 试用版可以使用多长时间? 哪些Microsoft 365 商业计划包含 Visio Web 应用? 我在尝试安装 32 位版本的 Visio,但我运行的是 64 位版本的 Office。我应该如何解决这个问题? 我有一个最新版本的 Office,但想保留我的旧版 Visio。我该怎么办? https://www.microsoft.com/zh-cn/microsoft-365/visio/flowchart-software
7.C语言总结向思维导图xmindXMind思维导图要如何制作? 2019独角兽企业重金招聘Python工程师标准>>> 思维导图这一快捷的记忆方法越来越受到大家的熟知,随之而来是思维导图软件被大家使用,XMind思维导图软件作为被大家熟知和广泛使用中的一种,也越来越被大家所接受,今天小编就和大家分享一下关于如何快速制作XMind思维导图。 1、打开xmind的时侯...https://www.pianshen.com/article/6937546302/
8.幕布幕布,极简大纲笔记,一键生成思维导图。 幕布是一款清单式的笔记工具,用更高效的方式和清晰的结构来记录笔记、管理任务、制定工作计划、头脑风暴。 帮助你在记录内容的同时,掌握结构化的思维方式,清晰的梳理出内容的脉络,加深头脑印象。 幕布能做什么? #写笔记 ...https://apps.apple.com/cn/app/inkonote-ocr-reading-notes/id1214302139?l=fr
9.小程序中如何绘制思维导图详解javascript技巧小程序中如何绘制思维导图详解更新时间:2021年10月13日 14:30:25 作者:AntCredit 小程序相信大家应该都很熟悉了,对于小程序的整个运营的方法,很多运营都比较关注,今天希望通过一个思维导图,这篇文章主要给大家介绍了关于小程序中如何绘制思维导图的相关资料,需要的朋友可以参考下...https://www.jb51.net/article/225226.htm
10.web.gzVisionPro充分展示苹果公司目前的先进技术,这类技术由于现有设备的形态或原始用例而受到限制。苹果还扩展和集成了一些技术,例如:扩展了iOS系统流畅、简单、视觉愉悦的用户界面,重点关注低延迟和自然的指令输入方法,包括眼球追踪、手势和语音命令;全新设计的R1芯片,专门处理来自传感器的信息;当前iPhone和自带激光雷达的iPadPro...http://web.gz-guangju.com/nodenews/458141.shtml
11.具惠善以导演身份亮相釜山称自导自演很奇怪图片图集具惠善以导演身份亮相釜山 称自导自演很奇怪,10月12日下午,釜山电影节举办“vision导演电影对话”活动,演而优则导的具惠善作为韩国新一代导演的代表,这次也带着她的第二部作品《桃树》亮相,在座谈会上她说到自己客串《妖术》之后感觉很怪异,并表示以后都不会再出现在自https://www.1905.com/newgallery/hdpic/474889.shtml
12.销售部的组织架构图销售部的组织架构图 2013年4月,笔者有幸参加了在江苏淮安清江中学召开的江苏省初中物理课程标准培训活动.有感于专家的引领,现场的示范和平时的学习,结合自己的实际情况,基于思维导图组织《压强》的教学探索,以期和同行交流.这是借用MindMapper制作的思维导图,把脑袋里https://www.360wenmi.com/f/file4k8h22az.html
13.heiaomi.com/newxr61329169/95763614.htm报道指出,3间Vision Pro供应商迄今已制造出足够生产50万至60万部设备的部件。其中一名员工指出,他们的工厂在5月暂停生产Vision Pro部件。据悉,苹果最近几周还告诉组装商立讯精密,可能需要在11月减产。 此外,天风国际知名苹果分析师郭明錤在其最新报告中表示,2024年第四季度至2025年上半年,iPhone 16共砍单约1000万部...http://heiaomi.com/newxr61329169/95763614.htm
14....AI对话绘图音乐视频功能,以及联网思维导图等插件。99AI 稳定版:可商业化的 AI Web 应用(免授权,无后门,支持快速部署),以 ALL-IN-CHAT 为目标。已支持 AI 对话、绘图、音乐、视频功能,以及联网、思维导图等插件。 - vastxie/99AIhttps://github.com/vastxie/99AI
15.思维导图工具推荐:幕布腾讯云开发者社区“在互联网时代,信息量爆炸性增长,我们需要有效地整理和呈现这些信息。思维导图是一个非常有用的工具,可以帮助我们组织思路、整理知识、规划任务和解决问题。”https://cloud.tencent.cn/developer/article/2324626
16.导入图像—GodotEngine(4.x)简体中文文档即便在 3D 中,“像素画”纹理也应该禁用 VRAM 压缩,因为压缩会对外观产生负面影响,较低的分辨率也无法得到显著的性能提升。这张表对这五个选项进行了横向比较,列出了各自的优缺点( = 最好、 = 最差):压缩模式压缩> 高质量? 备注 高质量 VRAM 纹理压缩仅在 Forward+ 和 Forward 移动渲染方法中受支持。 使...https://docs.godotengine.org/zh_CN/stable/tutorials/assets_pipeline/importing_images.html