❶ 圆形头像和方形头像在产品交互或视觉设计上的根本区别概念是什么
作者：冬笋
链接：https://www.hu.com/question/23506420/answer/24955628
来源：知乎
着作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
结论：
在以方形为基本元素的页面里，出现一个明显的圆形区域有非常好的效果（恰好是头像需要的、被强调的效果），但若圆形区域批量出现，会和页面内其他大量方形外廓造成冲突。
以空间页的场景为例：
头图、单条feed、feed里的图片－－最基本的（非头像的）图片元素，大多是方形。原因可能是对大数量级＋质量不可控的图源做异形处理，未必有好的效果。据说还要考虑前端性能压力。
以及，我们电脑or移动设备的屏幕、浏览器的窗口、还有页面上划分出来的各个区域，通常都会有明显的方形外缘。
如下图。（夹带私货：我非常不知道为什么微博设计团队特别爱用引导线）
<img src="https://pic3.mg.com/_b.jpg" data-rawwidth="628" data-rawheight="346" class="origin_image zh-lightbox-thumb" width="628" data-original="https://pic3.mg.com/_r.jpg">
一眼望去方形套方形、方形挨方形时，如果单独出现一个圆形区域，能瞬间吸引视觉焦点，高大上。
在空间页的场景里，值得/应该这么做的，主人的头像算一个。如下图。
<img src="https://pic1.mg.com/_b.jpg" data-rawwidth="619" data-rawheight="333" class="origin_image zh-lightbox-thumb" width="619" data-original="https://pic1.mg.com/_r.jpg">
但是如果有方又有圆，一大波小圆头像正在袭来，麻烦也跟着来了：
<img src="https://pic4.mg.com/_b.jpg" data-rawwidth="620" data-rawheight="346" class="origin_image zh-lightbox-thumb" width="620" data-original="https://pic4.mg.com/_r.jpg">
上图严格对齐了栅格＋等高－－－这么无趣的手法都用了！页面仍然乱。
如果是瀑布流，处女座还能活么。
移动端的屏幕小。批量显示用户时，如果用小圆头像，可以考虑弱化方形外廓，避免视觉冲突：
<img src="https://pic1.mg.com/_b.jpg" data-rawwidth="314" data-rawheight="473" class="content_image" width="314">
一个不恰当使用圆头像的例子：
1、页面中明显的方形外廓和明显的圆形外廓都出现，此种场景下头像并非需要强调的核心元素。
2、这个页面还有其他不妥之处：有多种字体、字号、字色，有不同风格的 ICON，图片下的ICON字体和底导航处的ICON字体不一样。
<img src="https://pic3.mg.com/_b.jpg" data-rawwidth="313" data-rawheight="475" class="content_image" width="313">
编辑于 2014-12-24
15 条评论
感谢
分享
收藏
•
没有帮助
•
举报
•
作者保留权利
收起
25
赞同
反对，不会显示你的姓名
Ataraxia
，再就业中的交互设计师，求推介
25 人赞同
对于圆形头像和方形头像的差别，我是这样想的：方形头像和圆形头像的识别效率哪种更高？1.头像的目标是做什么用的？我的理解：头像是做用户识别的。识别不同用户的方法有很多：用户名、用户ID、头像、邮箱、手机等等。因为人脑对图像的接收处理能力比文字强…
显示全部
对于圆形头像和方形头像的差别，我是这样想的：方形头像和圆形头像的识别效率哪种更高？
1.头像的目标是做什么用的？
我的理解：头像是做用户识别的。识别不同用户的方法有很多：用户名、用户ID、头像、邮箱、手机等等。因为人脑对图像的接收处理能力比文字强很多，另外人体特征导致人脸比人体其他部分的识别效率更高，所以很多互联网在识别用户上，普遍采用了用户头像的方法。
方形头像和圆形头像的目的一样，都是做人脸识别标识用户的。人脸的特征是这样的:
<img src="https://pic2.mg.com/_b.jpg" data-rawwidth="900" data-rawheight="584" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic2.mg.com/_r.jpg"><img src="https://pic3.mg.com/_b.jpg" data-rawwidth="1200" data-rawheight="1390" class="origin_image zh-lightbox-thumb" width="1200" data-original="https://pic3.mg.com/_r.jpg">
2.方形和圆形的差别
方形和圆形都是场景的形状，其视觉焦点的差别是圆形的焦点很聚焦，在圆心位置。方形的焦点在九宫格四点上。
<img src="https://pic3.mg.com/_b.jpg" data-rawwidth="993" data-rawheight="1000" class="origin_image zh-lightbox-thumb" width="993" data-original="https://pic3.mg.com/_r.jpg"><img src="https://pic3.mg.com/_b.jpg" data-rawwidth="500" data-rawheight="375" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.mg.com/_r.jpg">
3.用户一般使用什么图片做头像
最理想的情况下，用户使用自己的真实人脸照片做头像。现实情况中，用户会使用各种各样的图片做头像。在电脑上拍摄照片不容易，QQ就提供了很多张不同的图片，如风景照，静物照，卡通人物头像等默认头像给用户选择。在智能手机兴起后，用户拍摄照片非常容易了，但出于隐私等各种原因的考虑，很多人还是不会采用标准的真实人脸照片做头像。
另外如果用户是企业/公司用户，一般使用企业/公司的logo做头像。
4.方形头像和圆形头像的识别效率哪种更高？
A.如果用户采用标准的人脸照片做头像，圆形的头像可以让用户忽略掉照片的背景（花花草草什么的），更快地聚焦到人脸。这种时候，我倾向圆形头像的识别用户的效率更高。但也不绝对，识别两个双胞胎的头像的某个位置的小差别，方形的聚焦点位置多的优势会让它更容易识别出来。
B.如果用户不是采用标准的人脸照片做头像，那么两者的差别就不大了，因为这时是看照片的整体而不是着眼于脸部了。
C.但如果用户是企业，方形的头像就更好适配。因为很多企业的logo是矩形的，使用圆形头像不一定能容纳地下，或者搭配一起不协调。
5.圆形的轮廓可以更好地暗示用户这是头像
方形的图片在web上很常见，商品图是方形的，各种社交网站的缩略图是方形的...方形的图片不能让用户马上联想到头像。而圆形的图片是不常见的，拍出来的照片是矩形的，圆形的图片在web上的应用主要是头像和图标。圆形的图片可以更好地让用户理解这是头像。
另外用户在上传个人照片时，如果使用圆形的轮廓头像，可以让用户更倾向于使用人脸的照片做头像。因为很多需要看整体照片的风景照不适合于聚焦某点上的展示方式。
6.测试
上面的都是个人的想法，也许不准确，很难说服所有人。我想可以通过做一个简单的测试来了解方形头像和圆形头像哪种识别用户的效率更高。
A.准备500个用户的信息（头像，昵称和签名），尽量模拟头像展示的常见形态。
B.从中随机找出30个用户，请其信息聚合到另外一个页面上，打印下来。
C.另外请20个人过来，给他们看打印下来的30个人的信息，让其从这500个用户找出这30人，统计时间，看看哪个效率更高一点。
<img src="https://pic2.mg.com/_b.jpg" data-rawwidth="1345" data-rawheight="718" class="origin_image zh-lightbox-thumb" width="1345" data-original="https://pic2.mg.com/_r.jpg"><img src="https://pic2.mg.com/_b.jpg" data-rawwidth="1345" data-rawheight="718" class="origin_image zh-lightbox-thumb" width="1345" data-original="https://pic2.mg.com/_r.jpg">
发布于 2014-11-02
3 条评论
感谢
分享
收藏
•
没有帮助
•
举报
•
作者保留权利
收起
YONG
，to think and to do
2 人赞同
学习了前面的答题者从各个角度的分析思路。现提供一个感性一点的短答案：人的头部更靠近圆形，使用圆形头像更有利于突出“人物“的头部特征；毕竟人形不是方形的；圆形其实就是一个点，比方形更容易成为视觉聚焦凝聚点；方形头像中一般是人（或者主角）与环…
显示全部
学习了前面的答题者从各个角度的分析思路。现提供一个感性一点的短答案：
人的头部更靠近圆形，使用圆形头像更有利于突出“人物“的头部特征；毕竟人形不是方形的；
圆形其实就是一个点，比方形更容易成为视觉聚焦凝聚点；
方形头像中一般是人（或者主角）与环境的组合，交代的是人物和环境的关系；
总结：虽然圆形头像对头像的突出感会更强；但这并不是选择头像形状时唯一要考虑的因素。其它需要考虑的因素有：
与页面其它元素的和谐；（如上面有人提到的方形和圆形的冲突，本质就是页面上焦点太多容易显得杂乱）
圆形图片的处理和网络前端展示成本：毕竟能通过拍照获得的以及各种网络图片都是方形的；
……
两种形状的头像各有特点，具体选择哪一种要综合考虑上述因素，以及头像需要表达的意思。
不过话说回来，有人注意过手机客户端上设置圆形头像时的交互体验了吗？至少我感觉，交互细节很不自然。
如何制作圆形头像？
选择图片：从相册选择／手机拍照
将选中图片截取成系统支持的大小：通常是拖动矩形截取框，在选中的大图中选择需要截取为头像的区域，此过程中考虑周到一点的应用会支持缩放图片，让矩形截取框能包含更多的东西，但是一般的app并没这么周到；
确定矩形截取框位置后，点击确定，系统自动将选中的矩形区域处理成圆形头像；
发现问题了吗？截取头像的过程中，你一直看到的是矩形图片，但是最终的头像却需要在一个黑盒子中处理成一个未知的圆形，根本无法所见即所得。一般情况下，用这种方式制作的圆形头像都有点偏离中心，对强迫症和处女座很不友好好嘛？从用户制作头像的角度来说，方形头像更易制作，毕竟我们拍得照片都是方形的，毕竟所见即所得。
所以不要再盲目跟风用什么“时髦”的圆头像了，设计师OR产品经理除了考虑页面展示和谐度，更需要考虑与圆头像相关联操作如制作、预览头像等的体验。
❷ 网站头像”是指在推广链接前端增加图标的一种新推广样式
如何申请网站头像？
目前本产品仅面向加V客户开放
-如果您还没有加V：
请您先申请加V，完成后约5个工作日内，将对您开放网站头像的申请入口。可按下方的具体申请流程完成产品申请，通过审核后即可在满足网民用户体验时展现网站头像。
-如果您已是加V客户：
请您先进入凤巢账户，签署《新兴产品客户承诺函》；
然后可通过如下两种方式进行申请：
方式一：进入凤巢后台“推广管理”下的“高级样式”，提交符合要求的物料。
方式二：登陆“chuangxin..com”，直接进入平台进行申请。
详细图示如下：
（1）进入“投放管理”版块，可查看目前的物料投放情况
更多问题，请到推广客户端帮助频道查询：http://yingxiao..com/support/editor/index.html了解更多网络推广信息，请查看：http://e..com。
❸ html中如何设置浏览器中标题前的logo
在<head></head>标签之间输入
<link rel="icon" href="图片位置" type="image/x-icon"/>
或者用favicon表示：
规格有32×32、48×48、64×64、128×128，直接用PS做一个图片，命名为favicon.ico，然后用FTP软件上传到网站根目录替换原来的文件即可，如果不想用FTP软件，也可以在网站的后台进行更换。
Favicon是favorites icon的缩写，亦被称为website icon（网页图标）、page icon（页面图标）或urlicon（URL图标）。Favicon是与某个网站或网页相关联的图标。
(3)web前端头像扩展阅读
关于favicon图标的用途
favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,比如下面的网络的logo， 目前主要的浏览器都支持favicon.ico图标 。
1、生成图标ico
很多网站都支持在线将图片转成ico格式,图片的大小一般是几百k左右
在线生成ico
❹ 27了 转行做web前端 来得及吗
你好，任何时候，只要你想学习，都是没有问题的。
WEB前端入门简单，只需要从HTML/CSS/JS去入手就可以了。
活到老学到老嘛，多少岁都可以参加培训的。
培训的虽然大多为应届生，但也有年龄大一些的人在追求着新的知识。
想了解更多，看我的头像。
❺ 前端上传图片头像到七牛云格式变成text
流程：七牛云后台的对象存储功能，nodejs后台生成七牛云的token，前端利用elementUI/ice的upload组件，文件名和token作为参数请求到七牛云后台。
配置已经完成，写接口用的是express，koa同理，主要做法是先接收前端的图片流转换成图片写入本地image文件中，然后再存储到七牛云，再将本地生成的图片删除，需要新建一个image文件夹
❻ 前端头像裁剪的图，上传到服务器怎么实现
服务端用php之类的接收，前端用XMLHttpRequest当做文件POST上传就好了。
❼ Web前端培训费用多少
各个机构的web前端培训费用都不一样，都大概在一万五千元到两万元之间。
选择一家靠谱正规的【Web前端培训机构】一是要看学校师资力量，二是了解教学方式，目前的教学方式分为2种：面授和视频授学。国内线下面授web前端培训费用，各个机构存在一定的差异，因为各机构提供的教学服务不同所以费用也会不尽相同，但是基本上web前端培训的费用在1.5万元至2万元左右。线上的web前端培训费用一般也就在6千元和1万元左右，相比线下的话学费是省很多。还有就是线上有一个优势就是课后老师会进行一对一指导和随时对学生解答疑惑。线下的老师在于朝九晚五，这一点是很难做到的。而且线上一般都是用零碎的时间来学习的，这也是很多转行想学习web方面的小伙伴最终选择线上学习的原因，不过具体的还是要自己去了解毕竟每个人的想法都是不一样的。感兴趣的话点击此处，免费学习一下
想了解更多有关web前端培训费用的相关信息，推荐咨询【达内教育】。该机构致力于面向IT互联网行业，培养软件开发工程师、测试工程师、UI设计师、网络营销工程师、会计等职场人才，拥有行业内完善的教研团队，强大的师资力量，确保学员利益，全方位保障学员学习；更是与多家企业签订人才培养协议，全面助力学员更好就业。达内IT培训机构,试听名额限时抢购。
❽ 我今年都28岁了，转行做WEB前端晚吗
28岁不是正当年嘛，不晚呀，三个Web前端的学习技巧，助力早日成为优秀的Web前端工程师。
一、不断学习
任何一门科学都需要不断学习，尤其是更新速度很快的前端领域。时刻关注前端动态，是你跟上前端潮流的一个好方法。前端的体系过于庞大，技术框架多而杂，如果你在学习的过程中经常抱怨，那么就需要适当调整学习的态度，因为在以后的工作中会面临更大的挑战。
二、抓住根基
主抓基础，避免盲目。前端领域知识点很多，聪明的人懂得花时间学习成体系的知识并且研究得足够深入，擅于抓住重点，而不是盲目的看到别人用什么框架就去学什么。根据不同的项目选择合适框架，并且和项目实践关联起来，切实锻炼自己的前端开发能力。
三、坚持创新
发挥你的创新意识，可以写一些有意思的小工具、插件，推广出去，你会在学习前端的道路上找到很多志同道合的朋友。
总之，掌握以上方法可以让你在接下来的Web前端学习中事半功倍。
❾ web前端开发资料
我这里也有，我觉得很好的
链接：
❿ Web前端的学习顺序及内容是什么
第一阶段:
HTML CSS:HTML进阶、CSS进阶、div css布局、HTML css整站开发。
JavaScript基础:Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
JS基本特效:常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
JS高级特征:正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础。
JQuery:基础使用悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。
第二阶段:
HTML5和移动Web开发
HTML5:HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas。
CSS3:CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
Bootstrap:响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。
移动Web开发:跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。
第三阶段:
HTTP服务和AJAX编程
WEB服务器基础:服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
PHP基础:PHP基础语法、使用PHP处理简单的GET或者POST请求。
AJAX上篇:Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。
AJAX下篇:JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。
第四阶段:
面向对象进阶
面向对象终极篇:从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
面向对象三大特征:继承性、多态性、封装性、接口。
设计模式:面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。
第五阶段:
封装一个属于自己的框架
框架封装基础:事件流、冒泡、捕获、事件对象、事件框架、选择框架。
框架封装中级:运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
框架封装高级和补充:JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。
第六阶段:
模块化组件开发
面向组件编程:面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。
面向模块编程:AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。
第七阶段:
主流的流行框架
Web开发工作流:GIT/SVN、Yeoman脚手架、NPMer依赖管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架:Angular.js、Backbone.js、Knockout/Ember。
常用库:React.js、Vue.js、Zepto.js。
第八阶段:
HTML5原生移动应用开发
Cordova:WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。
Ionic:Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。
React Native:React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。
HTML5 :HTML5 中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5 开发和部署。
第九阶段:
Node.js全栈开发
快速入门:Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。
核心模块和对象:全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操做。
祝你学有所成！
如果大家对于学习前端有任何不懂的可以随时来问我，我给你提供一个非常不错的前端交流学习qun：前面是一一四，中间是一八八，后面是四九三一。有问题就在里面问我，这样你可以少走很多弯路，做起来有效率，记得多跟有经验的人交流，别闭门造车。如果没有比较好的教程，也可以管我要。