1.0.65

列表头像设计你知多少?

普通推荐
微杨
南京/UI设计师/4年前/5062浏览
列表头像设计你知多少?普通推荐
微杨

有社交属性的APP产品都有消息列表头像,可是你对它了解有多少呢?还是说它只是你最熟悉的陌生人?

 



        消息功能模块应该是大家日常生活中接触最多的APP功能了,只要是有社交属性的产品都有此功能,想必大家也都非常熟悉,日常的工作处理跟进,友谊情感的加深都离不开它,可是你真的对它了解有多少呢?还是说他只是最熟悉的陌生人?接下来就和大家一起聊一聊我总结出的那点事。



消息功能的元素构成


       消息功能模块的样式虽各有千秋,但大致相同,包括;头像,姓名/主题,消息内容/个性签名,时间信息,还有一个就是极具有中国特色的必不可少的全宇宙超级无敌可爱 mini小红点了….


       在这么多元素中,我在这里想和大家讨论的是关于头像范畴的这点事,它虽身居高位(视觉捕捉的前沿位置和体态)却很少被我们深切关注过,在我们的日常项目设计中我们对它是真有点拿村长不当干部的感觉,不知道各位小主是不是这样的感觉哈….

       那就先让我这个小卒子,替大家前去打探个究竟,看一看头像这玩意儿有哪些好玩的地方,我们从以下几个角度去探索一下:


  • 造型

  • 颜色

  • 属性识别



造型


        以主流社交产品为例,头像区域造型主要有:圆形和方形(圆角),即使是方形也是有圆角,以微信为例16px圆角,纵观app头像的发展演变,也是大都从方形迭代成圆形,不过即使是腾讯系的微信(方)和QQ(圆)也是截然不同,我想大多数人不要问:why?what is the matter?



   圆形和方形分别对人有哪些影响呢?《设计心理学》对图形形状给人的影响作了充分的解答:


1.方形


  这种形状被认为是最常用的形状。我们每天都会看到它们很多次。墙壁和家具,书籍或显示器,手机和相机以及许多其他日常用品都有方形或矩形。这种形状的直线和直角给人一种可靠性和安全感。人们强烈地将方形与建筑物联系起来,这就是为什么它们带来了信任和权威的感觉。


  代表含义:科学 、强度、 勇气、 安全、可靠性


2.圆形


  这种形状的第一个也是最重要的意义是永恒,因为它们没有开始或结束。圆与太阳和地球以及其他宇宙物体有着很长的联系,而椭圆与整个宇宙相似。这就是为什么圆形可以给人一种神奇和神秘的感觉。此外,与以前的形状不同,圆圈没有角度,因此它们更柔软,更温和。


  代表含义:永恒 、团结、和谐、神秘、积极、温暖柔和




       从感知上来讲,圆形更容易聚焦,因为他只有1个中心点,而方形有更多分散的焦点,不容易聚焦,人类的眼睛构造就是天然圆形,我们更容易优先捕捉到圆形。

       所以我们做具体项目要基于我们产品的定位,去设计提炼符合我们品牌调性的风格控件。每一个app都有它自己独有的气质和声音。不是拍脑袋,凭感觉去设计。所以至于为什么腾讯的产品用的形状不一样,他们也有自己的发声:







      颜色是一个产品的灵魂符,能直观传达产品的调性,每一种颜色都有自己的语言,在设计项目中我们会根据产品的定位和情感传达推演选择符合自己气质的颜色:







  1、红色代表热情、活泼、热闹、温暖、幸福、吉祥 


  2、橙色代表光明、华丽、兴奋、甜蜜、快乐 


  3、黄色代表明朗、愉快、高贵、希望 


  4、绿色代表新鲜、平静、和平、柔和、安逸、青春 


  5、蓝色代表深远、永恒、沉静、理智、诚实、寒冷 


  6、紫色代表优雅、高贵、魅力、自傲 


  7、白色代表纯洁、纯真、朴素、神圣、明快 


  8、灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 


  9、黑色代表崇高、坚实、严肃、刚健、粗莽

     ……





  头像的默认配色亦然,现在主流样式有:灰白色系、品牌色、定义匹配色







       其中钉钉的默认配色是由多色向品牌蓝单色迭代,是一个做减法的过程,减少多余的辅助颜色降低视觉干扰,增强了品牌的传播力度,固化用户的品牌认知心智。

       黑白灰在色彩学上属于无色系,是最安全最高级的的颜色,中庸而又平和,用在任何场景都不会虚飘,这也是其它默认场景配置中使用更多的色彩。





属性识别



        属性识别主要是指用户获取头像并快速识别出对象是谁的这样一种标签属性,它大致包括以下几种样式(上传照片的除外):


  • 品牌色/灰色+默认头像

  • 定义4色或多色匹配/品牌色+姓名后2字或尾单字

  • 群组消息头像叠加,以灰/品牌色为背景



1.头像字色显示



       对于默认状态名字显示的情况,不同的产品策略也有差别,阿里《钉钉》取得是姓名后两个字段,《脉脉》取得是姓名的最后1个字段:






2.多色定义



       关于多色背景定义的其他产品的定义策略我不甚了解,但我做过一个类似的《阿联酋》电信的项目,那我就把我知道的策略和大家分享下:



        根据品牌色设定出4个辅助颜色,将姓名首字母对应的ASCII码数值除以3所得余数,与这四种颜色去一一匹配,有一点不足就是这样在未上传照片的情况下会有很多颜色,不利于聚焦有效信息,这也是后来其它类似产品设计做减法的原因吧。




3.群组



       群组的形式大都是头像叠加组合显示,各自的规则有所差异,《微信》的群组小于9个分别展示出来,以9为边界值,大于等于9都显示9个头像组合;

    《钉钉》的群组以4个边界值,超过4个人的群组头像都统一显示出4个,小于4个分别对应显示。头像的选取按照加入群的先后顺利排列展示。



      以上关于列表头像设计的信息点你都get到了嘛?“麻雀虽小,五脏俱全”,看似简单的一个元素,其实都含有很多隐形的知识点,我们在设计过程中要不断探索,不断深挖,这样我们做的的设计在和产研小伙伴评审的时候才能做到有理有据有节,才能经得起大家和同行的推敲。



220
阅读原文
|
举报
17
分享
原创文章 平面 UI 网页 UI设计 头像设计 列表头像 消息列表 头像
声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。
评论
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
登录注册
侵权申诉 企业服务 帮助中心
京网文[2023]1747-060号 京公网安备11010502000501号 京ICP备11017824号-4 京ICP证130164号Copyright © 2006-2024 ZCOOL站酷

聚圣源通讯起名店名大全女孩起名用贞字好吗红酒网店起名大全集给姓景的男孩起名东宫小说阅读免费怀字起名老虎怕什么免费店铺起名网免费打分铁手团水果疏菜公司起名左耳百度云名女孩新生儿起怎样起狗的名字姓海起名名典起名网免费服务频道给小孩起名 姓李北方汉子电视剧除夕的传说费城联合vs新英格兰洪兴太子你好陈水扁起名字女孩带王字旁的2021金属公司起名字大全免费以数字起名为工作室起名贵阳租房挡土墙图集安装公司起什么名字好喋血钱塘江剧情介绍简单机械ppt淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻让美丽中国“从细节出发”清明节放假3天调休1天男孩疑遭霸凌 家长讨说法被踢出群国产伟哥去年销售近13亿网友建议重庆地铁不准乘客携带菜筐雅江山火三名扑火人员牺牲系谣言代拍被何赛飞拿着魔杖追着打月嫂回应掌掴婴儿是在赶虫子山西高速一大巴发生事故 已致13死高中生被打伤下体休学 邯郸通报李梦为奥运任务婉拒WNBA邀请19岁小伙救下5人后溺亡 多方发声王树国3次鞠躬告别西交大师生单亲妈妈陷入热恋 14岁儿子报警315晚会后胖东来又人满为患了倪萍分享减重40斤方法王楚钦登顶三项第一今日春分两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?周杰伦一审败诉网易房客欠租失踪 房东直发愁男子持台球杆殴打2名女店员被抓男子被猫抓伤后确诊“猫抓病”“重生之我在北大当嫡校长”槽头肉企业被曝光前生意红火男孩8年未见母亲被告知被遗忘恒大被罚41.75亿到底怎么缴网友洛杉矶偶遇贾玲杨倩无缘巴黎奥运张立群任西安交通大学校长黑马情侣提车了西双版纳热带植物园回应蜉蝣大爆发妈妈回应孩子在校撞护栏坠楼考生莫言也上北大硕士复试名单了韩国首次吊销离岗医生执照奥巴马现身唐宁街 黑色着装引猜测沈阳一轿车冲入人行道致3死2伤阿根廷将发行1万与2万面值的纸币外国人感慨凌晨的中国很安全男子被流浪猫绊倒 投喂者赔24万手机成瘾是影响睡眠质量重要因素春分“立蛋”成功率更高?胖东来员工每周单休无小长假“开封王婆”爆火:促成四五十对专家建议不必谈骨泥色变浙江一高校内汽车冲撞行人 多人受伤许家印被限制高消费

聚圣源 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化