Material Design Avatar——一个自动生成 Material Design 风格头像的 PHP 类
lincanbin · lincanbin · 2015-04-30 16:00:08 +08:00 · 7320 次点击这是一个创建于 3494 天前的主题，其中的信息可能已经有所发展或是发生改变。
GitHub地址： https://github.com/lincanbin/Material-Design-Avatars
在线演示地址： http://www.94cb.com/Material-Design-Avatars/
已应用Material Design Avatar的一个开源论坛项目的地址： http://www.94cb.com/
新用户头像一个是个麻烦事，Gravatar也算一个解决方案，但是我个人觉得太丑。
正好觉得Android上的Gmail和Messager的生成的头像挺不错的，就自己写了一个生成这种头像的Class，字体用的Adobe的两个开源字体，色彩参考Android官方关于Material Design的文档。
第 1 条附言 · 2015-04-30 22:00:06 +08:00
这是Google Messager的截图。
这是正式部署这个类到论坛项目中的效果。
不得不说谷歌这个设计区分度非常好，原来论坛很多没上传自定义头像的用户现在也可以在列表页非常轻易地区分开。
因为用户名显示本来就不起眼，而原来头像也都是默认的同一个图片。
现在靠一大块纯色加ID首字，一眼看上去确实好看很多了，我也试过Gravatar，一些矩形组合还是没有大字直观，可能机器区分Gravatar会更容易，但是我也没打算给机器看。
这是Google Messager的截图。
这是正式部署这个类到论坛项目中的效果。
不得不说谷歌这个设计区分度非常好，原来论坛很多没上传自定义头像的用户现在也可以在列表页非常轻易地区分开。
因为用户名显示本来就不起眼，而原来头像也都是默认的同一个图片。
现在靠一大块纯色加ID首字，一眼看上去确实好看很多了，我也试过Gravatar，一些矩形组合还是没有大字直观，可能机器区分Gravatar会更容易，但是我也没打算给机器看。
 |
1
lincanbin OP 如果觉得中文字体包太大，可以直接删除掉，这样的话，就会自动取中文首字母生成头像。
|
 |
2
xiaogui 2015-04-30 16:10:35 +08:00
看着不错，哈哈，赞下
|
 |
3
Septembers 2015-04-30 16:28:38 +08:00
唯一值得吐槽的是 代码风格
|
|
4
lincanbin OP |
|
5
lincanbin OP http://www.94cb.com/t/2488
这是放到实际项目中的效果图。 Gravatar虽说可以做到独一无二，可是真的并不好看，然而这样的独一无二在很多时候并没有什么卵用。 还是好看比较重要。 所以一开始让我用Gravatar，其实我是拒绝的。 |
|
6
Septembers 2015-04-30 16:39:04 +08:00
@lincanbin 前端应该可以制作出这个效果只是字体跟随浏览器可能会有点不好看
|
|
7
lincanbin OP @Septembers 前端当然可以，我以前做过，做起来非常方便，一个容器放个字进去设置background，然后border-radius:50%就行了。
背景颜色的调色板索引可以用用户名的hash来做前端储存。 只是这样做起来并不合适，还得判断用户是否上传头像。 如果不打算让用户上传头像就可以这样做。 |
 |
8
kokdemo 2015-04-30 16:43:35 +08:00
@Septembers 可以用webfont解决的……不是啥问题
|
 |
9
AlisterTT 2015-04-30 17:07:11 +08:00
为什么我输入0的时候出来的是随机文字，是不是姿势不对...
|
|
10
lincanbin OP @AlisterTT 我demo的判断是直接拿输入判断，然后if(0)等于没有输入，我改一下。
|
 |
11
jamesxu 2015-04-30 17:19:35 +08:00
哪里能看出是 Material Design 风格。。。
就颜色？ |
|
12
lincanbin OP @jamesxu Material Design中关于Avatar的定义是比较宽松的，我是照着Google Messager & Gmail 做的，也遵循了相关规范，这么说也是没错的。
Avatars and thumbnails Avatars and thumbnails represent entities or content, either literally through photography or conceptually through illustration. Generally, they are tap targets that lead to a primary view of the entity or content. Avatars can be used to represent people. For personal avatars, offer personalization options. As users may choose not to personalize an avatar, provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand. Thumbnails allude to more information—letting the user peek into content—and assist navigation. Thumbnails let you include imagery in tight spaces. |
 |
13
holystrike 2015-04-30 18:24:12 +08:00
不错
做成composer包吧 |
|
14
lincanbin OP |
 |
17
Yien 2015-04-30 22:51:08 +08:00 via iPhone
感謝
|
 |
18
RihcardLu 2015-05-12 12:09:27 +08:00
太棒了，刚刚正想找呢。
|
|
19
RihcardLu 2015-05-12 12:16:43 +08:00
好像不能自定义颜色？
|
Select Language