ui头像设计制作(ui设计师头像)

473 2023-11-22 18:30:32

最真实的例子是,当我们在社交软件上将头像设置为帅哥/美女时,搭讪和被搭讪的概率就会成倍增加。这就是为什么作弊的人总会先定一个漂亮的头像(背后挖脚的大佬)总能提高成功率,头像的魔力可见一斑。

无论是真实的社交、虚拟的网络,甚至与社交无关的应用,只要有用户的概念,就会有头像,但产品头像的权重和用户关注程度是不同的。在这个“面子时代”,与陌生人搭讪的成本非常高。第一步,通过头像来判断是否建立社交关系是最直接、快捷的方法。

ui头像设计制作(ui设计师头像)

在UI设计中,95%以上的应用都会涉及到头像元素,比如消息列表、个人中心/主页、会员服务、评价、排名等功能版块。显然,一个昵称或者几句话就能说清楚。设计了一个头像,也占据了信息组的主视觉。

那么,对于简单的方形或圆形小头像,还有哪些我们不知道的细节呢?今天我就通过这篇文章和大家聊聊头像元素的方方面面。希望对大家有所帮助。欢迎。一起讨论,互相交流。

01/

头像在UI界面中的作用

1.多个账户的区分

由于特殊原因,许多销售、客户服务和其他职业可能在同一应用程序中拥有多个帐户。当您需要确认当前登录的是哪个账户时,查看头像是最好的区分方式(需要设置不同的头像)。当然,也有一些有异常需求的用户拥有其他账户。我相信头像会有所不同。为了避免“社会死亡”,这里不便多说它们的作用。

此外,比如QQ登录、微信账号切换页面,也会采用醒目的头像来快速区分账号信息。

2。突出你自己的形象

当用户使用成熟稳重、端庄得体的形象作为头像时,大多数情况下,这个人绝对不是键盘侠或者经常说脏话的网络巨魔,尽管“隔着屏幕都能看到”。你不能打我”,但你在发布内容时会注意你的措辞,并下意识地维护你的网络形象(头像)。这就是现实与网络虚拟形象之间的性格映射。

当遇到匿名社交时,给自己戴上面具会让你变得肆无忌惮,至少比前者受到的限制更少。

3。“面对面”沟通代表

很多时候,无论是与朋友聊天,还是在不同的应用中发表评论,拥有头像的用户总感觉他们是在平等地交流。说这话感觉很抽象。这是一个例子:

如果你是单身男性,当有人在社交应用中添加好友或提问时,使用美女头像的用户的响应效率和质量会高于使用其他头像的用户。这是不争的事实(别争论,我们不举例子),这也说明你时刻关注着自己在对方心目中的形象,时刻担心被“识破”。”另一个人说。

02/

每个场景中的头像类型

1.默认头像

对于不需要强制登录的应用,在切换到个人中心时,一般都会有一个默认的头像占位符,可以是人物剪影,也可以是品牌吉祥物,以保证用户在登录前保持页面的完整性。另外,即使用户登录后上传自己的头像,在遇到网络延迟、头像加载失败、匿名操作等情况时,系统默认头像也可以作为临时替代。常见的默认头像有两种颜色模式:灰色和彩色,两者各有优缺点。

1)灰色头像

灰色头像色感较弱,可能会造成视觉不平衡,破坏画面美感。然而,正是通过这种轻微的不和谐,它以明显且突然的方式提醒用户更换头像,这对于强迫症患者来说几乎是不可抗拒的。

2)彩色头像

大多与品牌颜色、吉祥物等结合展示,也能丰富画面,增加趣味性。与灰色的头像相比,更加生动。无论用户是否登录或更改头像,都可以维护该界面。视觉平衡,唯一的缺点可能会降低用户更换头像的欲望。

2。系统推荐头像

1)用户选择

大家早期接触过的QQ就是最典型的案例。系统提供了多种头像供用户选择,甚至将一些头像纳入了QQ会员功能中。当用户没有合适的图片作为头像,难以选择时,则使用系统推荐的头像。不仅可以降低用户的选择成本,还可以满足一些个性化需求。如果默认头像与产品相关联,还可以作为品牌传播渠道,可谓两全其美。

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

同时,由于用户数量庞大,图片是否合法、质量是否良好,带来了一系列监管问题。使用系统推荐头像可以很大程度上降低图片管理的成本(PS:强制使用系统头像和产品定位有绝对的关系,不是一拍额头就决定的)。

2)系统选型

注册成功后,系统将随机匹配个人头像。与用户手动从列表中选择相比,增加了一种神秘感和期待感,使得头像设置更加有趣,比如小红书、B站等应用。

3。文字头像

它经常出现在移动办公应用中,由系统自动处理。基于OA的应用社交属性不强,多用于内部团队工作中的沟通,如钉钉、分香麦客、飞书等,为了更清楚地获取对方的个人信息,此类产品头像的可能性更大上传自己的真实照片(某些公司强制要求)。如果用户没有上传照片,系统会提取中文姓名的最后两个字符(两个字符)。显示角色全名),并使用英文名的前两个字母作为个人头像,方便团队成员更好的识别。

4。团体头像

它只出现在群聊中,由多个群成员的头像组成。不同的应用程序对头像上限的设置不同。最常见的是4和9。大多数群组头像不支持自定义上传。会按照当前群成员人数(1-4人、1-9人)排列成网格,并且不会超过设定的上限,例如钉钉群、微信群。QQ群等

5。用户头像组

在部分应用场景中,产品通过多个用户头像的堆叠组合,通过“羊群效应”引导后续用户跟随从众心理,提高转化率,比如有多少用户购买了、有多少用户中奖了等此外,视频平台直播间还会排列并展示排名靠前的用户头像组合,以吸引其他用户的关注。

6。历史头像

1)同一平台

QQ会收集用户之前使用过的头像,并提供单独的入口。当用户需要更换头像时,可以选择再次使用。虽然重用的机会不高,但仍然是一种情怀。用户可以清楚地知道头像的变化。历史的轨迹,充满回忆。

设置微信头像时,还可以选择使用之前的头像,这样更容易让用户后悔设置新的头像。这可以理解为撤消更改操作。如果需要对图片进行裁剪,也方便用户反复与之前的头像进行比较。

2)跨平台

第三方登录是标准配置。用户可以无差别继承第三方账号的头像、昵称等信息,节省大量时间和运营成本,如微信、QQ、支付宝、微博授权登录等。

7。其他头像

除了以上的头像类型之外,还有视频头像、GIF头像、轮播头像等,这些都不常用,就了解一下吧。

此外,社交网络上掀起了一股头像风潮,捏脸头像也十分流行。是一种针对性很强的新头像类型。如果您有兴趣,可以下载Soul和ZaizaiAPP来体验一下。这里我就不详细说了。

03/

头像状态及附加操作

1、用户状态不同

使用彩色头像和黑白头像来区分用户是否在线是最直观的表达方式。比如打开QQ好友列表,对方是否在线一目了然。另外,QQ的在线状态还延伸为多种子级别的状态,如:离开、忙碌、听音乐、请勿打扰……等,设置成功后,会重叠在QQ的右下角。小图标形式的头像。朋友看到后,您可以清楚地了解当前状态下是否可以立即联系到您。抖音采用了比较简单的方法。头像右下角有小绿点表示在线,如果没有绿点则表示离线。

2。活动通知

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

弱提示:小点提示,用红色或主色填充,提示级别较弱;中号提示:白色圆圈+数字提示,数字颜色可以是红色或主色;提示性强:圆形白色描边和红色填充+数字高亮是一种比较突兀的提示方式。

3.吊坠/装饰品

很多挂件只是纯粹的装饰品,可以起到美化、娱乐、情趣的作用;增值服务、特权服务、认证标识是身份的象征,体现尊贵和尊贵的感觉;有少数应用将用户的勋章标志重叠在头像的某个位置,总是会给用户一种坚持完成任务后的成就感,满足自己的虚荣心。

4。互动操作

在很多应用中,设置功能都隐藏在个人中心页面的头像区域。点击后会进入个人主页、个人信息页面或更改头像页面。还有一些没有实际功能、纯粹为了好玩的交互,比如双击微信好友头像“拍照”、在个人中心拖动头像就会出现红心等等,不同程度地为用户创造意想不到的惊喜。

还有一些应用程序通过头像右下角具有明确指向含义的图标来引导用户进行操作。

例如,在填写表单时,您需要添加头像。上传成功后,头像右下角会出现删除图标;灵魂个人中心头像右下角增加个性化商城入口;QQ和即时会提示用户点击相机图标直接更换头像。这些引导图标相对较小,需要精确的点击。为了避免无效操作,请在不影响其他交互的情况下,尽量扩大图标热区。

04/

正方形和圆形的定义

虽然我们使用和研究过大量的互联网产品,但我们对于头像的形状可能并没有太关注。以目前主流产品为例,QQ、抖音都是圆形头像,微信、钉钉则是圆形头像。如果你真的想在方形(圆形)头像中决出胜负,那么显然大多数产品都使用圆形头像。正方形和圆形有什么区别?设计时如何选择?我们一起来聊聊吧。

方形头像可以更好地利用照片中的空间并减少空间损失。圆形通过裁剪让空间更加平衡,看起来更加精致;正方形可以在四个角和中心点形成聚焦区域,使用灵活,而圆形则具有完美的边框。不聚焦冲突,能凸显核心;古埃及曾认为圆形是上帝赐予人们的神圣形状。因为形状有完美的边框,可以给人一种公平、信任的感觉,而长方形则可以给人一种专业、稳定的感觉。圆形显得活泼,方形显得严肃;QQ团队曾经给出过答案,因为产品定位是给人一种年轻、活跃的感觉,而人脸也接近圆形,裁剪最终可以更好地突出一个人的面部特征(在脸部)-观赏时代),而且显然使用圆形更合适。微信设计师说图片本质上是正方形的(相差甚远)。方形头像可以最大程度地减少图片的损失,而且微信的定位也比较成熟。方形的造型也能给用户一种稳定可靠的感觉,更符合用户的习惯。如果一定要用圆形,就把头像做成圆形即可,方圆皆可;

说了这么多,我还是不知道如何选择,所以笔者根据头像常用的三个模块给大家一些建议:

1、个人中心/主页:如果没有特殊需要,大多数情况下使用圆圈,不会出错;2.消息列表/即时对话:根据产品定位和上述参考对比决定,如果没有明确要求,使用其中一个形状创建后,可以统一在同级别的其他页面上;3.评论/交流区:直接循环,无理由。头像本来就很小,所以剪掉不相关的信息会让它更加集中。

05/

头像设置步骤

1.头像来源

移动设备上传头像的来源主要有系统推荐、历史头像、相册选择、拍照等。在电脑上,由于设备限制等原因,一般只上传系统推荐和本地图片。

2.上传限制

上传图片时,一般会对图片的格式(JPG/PNG/GIF等)、尺寸(宽*高)、文件大小(KB/M)有限制。这些需要给予明确的提示,以避免用户必须执行多次操作。如果因失败而灰心丧气地离开,也可以避免用户不知道平台可以使用GIF、视频等头像格式,从而隐藏了产品的多元化服务。

3.图像裁剪

由于图像来源和拍摄技术的不同,对于水平和垂直图像,系统首先会自动将其裁剪并靠近边缘进行方形处理(以避免压缩/拉伸),然后用户可以调整大小并选择最佳位置。

4.效果预览

需要为用户提供真实的效果预览,避免用户因为操作失误或者对处理后的头像不满意而重复整个替换过程。所见即所得,降低用户重复操作的概率也是提高用户满意度的方法之一。

06/

引导用户上传头像

1.文案指导

当一个产品要求某个用户群体做某事时,哪怕是为了用户着想,也还是需要给出一个合理的理由。可以通过有趣、情感化或鼓励性的文案来引导用户主动上传头像,例如社交应用中的“一切都很好”。就完美了,只要一张帅气的头像就可以了”、“把你的头像换成更好看的,可以让更多的人认识你”等等。或者用户在编辑个人信息时可能会给予鼓励,“恭喜你,你只是就剩下最后一步了,换个头像就完美了。”

2、第三方授权

之前提到过第三方登录方式。我相信这也是懒癌患者上传头像最直接、最粗暴的方式。

3.纳入注册流程

一些社交应用程序将上传头像作为注册过程中的必需步骤。没有用户可以跳过它。请记住,除非必要,否则不要滥用/使用此方法。这相当于提高了用户注册的门槛。任何产品的每一次额外操作都会导致一批用户离开,这需要根据产品定位以及强制上传头像的重要性来确定,避免得不偿失。

07/

结论

“没有一个化身是不社交的。”在设计界面之前,设计师应该考虑产品社交属性的高低,然后决定头像在界面中的权重和比例。至于如何使用,需要根据产品的实际情况,结合用户的头像。做出合理判断的基础知识。

“麻雀是最小的,五脏六腑都有。”头像看似是一个非常简单的UI元素,但是在设计过程中还是有很多知识点需要考虑的。这就需要我们不断地多积累、多探索、多总结,然后融入到实际的UI设计中,做出有根据的设计。

上一篇: 交互设计方案册方案册(交互设计方案怎么写)
下一篇: 约稿白菜设计方案(约稿白菜设计方案)
相关文章
返回顶部小火箭