❶ 圓形頭像和方形頭像在產品交互或視覺設計上的根本區別概念是什麼
作者：冬筍
鏈接：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：前面是一一四，中間是一八八，後面是四九三一。有問題就在裡面問我，這樣你可以少走很多彎路，做起來有效率，記得多跟有經驗的人交流，別閉門造車。如果沒有比較好的教程，也可以管我要。