Material Design Avatar——一个自动生成 Material Design 风格头像的 PHP 类

[lincanbin]

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的文档。

这是Google Messager的截图。


这是正式部署这个类到论坛项目中的效果。
不得不说谷歌这个设计区分度非常好，原来论坛很多没上传自定义头像的用户现在也可以在列表页非常轻易地区分开。
因为用户名显示本来就不起眼，而原来头像也都是默认的同一个图片。
现在靠一大块纯色加ID首字，一眼看上去确实好看很多了，我也试过Gravatar，一些矩形组合还是没有大字直观，可能机器区分Gravatar会更容易，但是我也没打算给机器看。

[lincanbin]

如果觉得中文字体包太大，可以直接删除掉，这样的话，就会自动取中文首字母生成头像。

[xiaogui]

看着不错，哈哈，赞下

[Septembers]

唯一值得吐槽的是 代码风格

[lincanbin]

@Septembers 将近十年前VB还很火那会儿留下的习惯，多人协作项目时我也会主动配合团队风格。
个人项目就我怎么看得爽就怎么写。
总之类是一个黑盒，你不要看里面的代码就是了！

[lincanbin]

http://www.94cb.com/t/2488

这是放到实际项目中的效果图。
Gravatar虽说可以做到独一无二，可是真的并不好看，然而这样的独一无二在很多时候并没有什么卵用。
还是好看比较重要。
所以一开始让我用Gravatar，其实我是拒绝的。

[Septembers]

@lincanbin 前端应该可以制作出这个效果只是字体跟随浏览器可能会有点不好看

[lincanbin]

@Septembers 前端当然可以，我以前做过，做起来非常方便，一个容器放个字进去设置background，然后border-radius:50%就行了。
背景颜色的调色板索引可以用用户名的hash来做前端储存。
只是这样做起来并不合适，还得判断用户是否上传头像。
如果不打算让用户上传头像就可以这样做。

[kokdemo]

@Septembers 可以用webfont解决的……不是啥问题

[AlisterTT]

为什么我输入0的时候出来的是随机文字，是不是姿势不对...

[lincanbin]

@AlisterTT 我demo的判断是直接拿输入判断，然后if(0)等于没有输入，我改一下。

[jwk345]

哪里能看出是 Material Design 风格。。。
就颜色？

[lincanbin]

@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.

[holystrike]

不错
做成composer包吧

[lincanbin]

@holystrike https://packagist.org/packages/lincanbin/material-design-avatars

[breeswish]

同 @jamesxu 看不出 material design

[lincanbin]

@breeswish

[Yien]

感謝

[kechx]

太棒了，刚刚正想找呢。

[kechx]

好像不能自定义颜色？

[lincanbin]

@RihcardLu Material Design有指定了能使用的颜色，因此只能使用指定的颜色，每次都会随机抽取颜色。