成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

為什么UI設(shè)計(jì)中，用戶的個(gè)人頭像大多是圓形的？大舌頭藉由歸納網(wǎng)路社群中專家的討論，逐步厘清這個(gè)秘密

大家有沒(méi)有覺(jué)得有越來(lái)越多的平臺(tái)或App ，喜歡使用“圓形” 作為用戶的“個(gè)人頭像” 形狀。該不會(huì)是近期的設(shè)計(jì)風(fēng)潮？還是大部分UI設(shè)計(jì)師的愛(ài)好？或有其他特別的原因呢？大舌頭藉由歸納網(wǎng)路社群中專家的討論，逐步厘清這個(gè)秘密，內(nèi)容精彩不要錯(cuò)過(guò)喔 ~

個(gè)人頭像的定義與發(fā)展：

隨著網(wǎng)路用戶族群快速增加，他們對(duì)于藉由平臺(tái)與其他用戶互動(dòng)的需求就越高，也因此發(fā)展出許多可互動(dòng)的平臺(tái)類(lèi)型，例如論壇、信箱、聊天室、部落格到社群等。其中每個(gè)用戶都代表著一個(gè)獨(dú)特個(gè)體（無(wú)論是真實(shí)身份或虛擬角色），這些個(gè)體會(huì)有相對(duì)應(yīng)的資訊，以及代表個(gè)體的個(gè)人頭像。而個(gè)人頭像通常是具個(gè)性化（用戶覺(jué)得能代表自我）的標(biāo)志，大多以平面或3D圖像的方式呈現(xiàn)。

UI上的個(gè)人頭像英文為”P(pán)rofile Picture”或”Avatar”，其中Profile Picture在字義上較容易理解，反倒是Avatar，各位讀者可能會(huì)充滿問(wèn)號(hào)，因?yàn)榇蠹覍?duì)Avatar的印象應(yīng)該都是阿凡達(dá)電影（藍(lán)藍(lán)的那出XD）。根據(jù)techpedia  平臺(tái)上的描述，Avatar一詞出現(xiàn)于1985年，由盧卡斯電影公司（Lucas Film）內(nèi)發(fā)展線上角色扮演游戲（Habitat）專案人員（Chip Morningstar & Joseph Romero）首先提出。此詞源自于印度教對(duì)”圣人降臨（a descent of the Supreme Being） “的描述，在英文里有”化身（incarnation）”或“代表（manifestation）”之義。

網(wǎng)友對(duì)個(gè)人頭像形狀選擇的觀點(diǎn)：

其實(shí)，選擇何種形狀的論戰(zhàn)已不是新聞了，有眾多專家在相關(guān)論壇中發(fā)表意見(jiàn)與討論。大舌頭擷取與整理他們?cè)?/span>Quora與Stack Exchange平臺(tái)上討論與發(fā)表的論述，并簡(jiǎn)單的分類(lèi)如下。不過(guò)，大舌頭先申明，以下內(nèi)容的排序并無(wú)經(jīng)過(guò)提及次數(shù)統(tǒng)計(jì)（僅隨機(jī)排列），且多數(shù)回應(yīng)也無(wú)相關(guān)驗(yàn)證或研究資料，所以大家可當(dāng)成不同“觀點(diǎn)”參考就好。

感受與認(rèn)知

1. 方形太無(wú)趣了。

2. 大腦可較輕易的處理圓形內(nèi)的訊息，減少認(rèn)知的壓力。

3. 相較于方形，圓形更柔性、有機(jī)、安全、順眼、現(xiàn)代與友善，也更能與他人情感交流。

4. 更有關(guān)注的感覺(jué)，例如想到望遠(yuǎn)鏡或放大鏡的視野。

5. 大多照片的四周都是無(wú)意義的背景或訊息，圓形可以將其切除。

6. 通常拍照會(huì)把”人”擺在中心，而圓形中心到四周距離都一致，可讓臉更突出。

視覺(jué)

1. 視線在方形的焦點(diǎn)有5個(gè)（四個(gè)角+中心），而圓形只有一個(gè)（中心）。

2. 圓潤(rùn)的線條或角度，可讓視線自然的追隨與運(yùn)動(dòng)，不會(huì)像看到90度角而停頓下來(lái)，更詳盡的內(nèi)容可參考這篇。

3. 在掃視的情況下，使用圓形可協(xié)助使用者辨識(shí)或區(qū)分是否為內(nèi)容，因?yàn)閮?nèi)容通常會(huì)置于用方型容器，例如文字、照片或?qū)］嫷取?/span>

其他

1. 行動(dòng)裝置普及后，因圓形與手指按壓在螢?zāi)簧系男螤铑?lèi)似，而被廣泛的使用。

2. 其實(shí)人類(lèi)早就有這樣的應(yīng)用，例如將人物應(yīng)用于圓形硬幣與圓形藝術(shù)畫(huà)中。

3. 只是一個(gè)設(shè)計(jì)的風(fēng)潮，剛好流行到”圓形”這個(gè)周期。

4. 很多準(zhǔn)則或模板都只提供圓形版本。

5. 現(xiàn)在的CSS3技術(shù)讓圓角（圓形）輕易實(shí)現(xiàn)且各瀏覽器也幾乎都有支援 。

作者Anthony 于UX movement 上提出了相關(guān)觀點(diǎn)：

在UX movement  中，作者Anthony也提出了一些有別于上述的觀點(diǎn)，大舌頭簡(jiǎn)單整理并陳述如下：

角度的邊緣，看起來(lái)較明顯

通常方形的銳利四角，因?yàn)閷?duì)比（顏色或形狀）的關(guān)系，在視覺(jué)上會(huì)更明顯，造成干擾。使用圓形并無(wú)此問(wèn)題，所以更可強(qiáng)調(diào)重點(diǎn)– “臉部”。

方形對(duì)角線較長(zhǎng)

方形的對(duì)角線比邊緣還長(zhǎng)，用戶目光易延伸出去；圓形半徑長(zhǎng)皆一致，用戶可花更少時(shí)間在理解內(nèi)容，眼球也較不需要移動(dòng)。

圓型用于非人物圖片，效果也是一樣的嗎？

雖然使用圓形的個(gè)人頭像可排除不相關(guān)的背景，更聚焦于人臉上，但非人物的圖片（風(fēng)景或食物等）也有同樣效果嗎？Anthony認(rèn)為不一定，因?yàn)榭赡芤虼耸チ嗽搱D片要傳達(dá)的資訊，如景深或細(xì)節(jié)等。

大舌頭觀點(diǎn)：

上面已整理了許多專家的觀點(diǎn)，大部分是相當(dāng)?shù)恼J(rèn)同的。不過(guò)，大舌頭也有一些觀點(diǎn)是以上未提到的，想補(bǔ)充給大家做參考，如下：

較強(qiáng)的設(shè)計(jì)感

大舌頭認(rèn)為圓形的個(gè)人頭像，能讓介面?zhèn)鬟f較強(qiáng)的設(shè)計(jì)感。不過(guò)這點(diǎn)會(huì)受設(shè)計(jì)師應(yīng)用的手法，或使用者的主觀感受影響。此外，平臺(tái)無(wú)法限制使用者上傳圖片的品質(zhì)，若上傳圖片的品質(zhì)、構(gòu)圖或美感較差，將其套用在圓形的遮罩里，介面的設(shè)計(jì)感會(huì)比方形的好。

高度親和力

就如同人與人的交際，在初次見(jiàn)面時(shí)，會(huì)認(rèn)為帶有嚴(yán)肅表情的人較難相處，而微笑滿面的人可馬上聊起來(lái)。為什么會(huì)有這種先入為主的觀念呢？這就是“親和力”高低層度的差異所致。而曲線與圓在人們的印象中，就是親和力的象征。若介面上使用圓形的元素（個(gè)人頭像等），使用者可能會(huì)產(chǎn)生，此產(chǎn)品學(xué)習(xí)曲線較低的印象。

好的開(kāi)始就是成功的一半，對(duì)吧！

雖然矩形可讓空間利用最佳化，但應(yīng)用圓形又可多一點(diǎn)留白空間

若不考慮使用者體驗(yàn)與美學(xué)，將不同的內(nèi)容以方形排列，將最具有效能（一種貨柜的概念），但這樣的產(chǎn)品絕對(duì)不會(huì)受到用戶歡迎的。因此，設(shè)計(jì)師都應(yīng)了解留白帶來(lái)的效益，例如降低視覺(jué)負(fù)擔(dān)、增加閱讀性、區(qū)隔不同內(nèi)容與更具美感等。適當(dāng)?shù)牧舭讓?duì)產(chǎn)品來(lái)說(shuō)相當(dāng)重要，同時(shí)也考驗(yàn)設(shè)計(jì)師的基礎(chǔ)訓(xùn)練是否扎實(shí)。就個(gè)人圖像而言，同樣尺寸下，圓形又能比方形多一些留白空間（在四角處），除了增加與其他內(nèi)容的區(qū)隔性外，也能讓介面帶點(diǎn)趣味性。

使用圓形個(gè)人頭像的技巧

css 怎么做？該注意什么？

感謝css3 與各瀏覽器的技術(shù)支援，現(xiàn)在只需要針對(duì)個(gè)人頭像的HTML tag or class 寫(xiě)一行border-radius: 100%; 的css 屬性就可以達(dá)到！為了向下相容老舊的瀏覽器，必須針對(duì)不同核心的瀏覽器添加不同的前綴，如下：

點(diǎn)我，看看怎么做

給予使用者上傳圖片的建議

不知道大家有沒(méi)有這樣的經(jīng)驗(yàn)，就是當(dāng)你挑好圖片并上傳后，發(fā)現(xiàn)圓形的形狀外框遮住了許多重點(diǎn)（例如臉的一角），效果不如預(yù)期。其實(shí)，設(shè)計(jì)師可以在上傳圖片的介面上，提供給使用者一些建議。例如，畫(huà)出一個(gè)人臉可在圓形里完整呈現(xiàn)的區(qū)域，這樣使用者就會(huì)比對(duì)自己的圖片，并挑選較符合者；或是提醒圖片上有字的話，建議的大小為何（可看的清楚）；提示不能使用非法圖片等。

提供多種預(yù)設(shè)圖片，及更完善的圖片編輯器

有些使用者手上剛好沒(méi)有適合的圖片，或認(rèn)為不重要，可能就不會(huì)設(shè)定個(gè)人頭像了。不過(guò)，平臺(tái)若是希望呈現(xiàn)出多種角色互動(dòng)的氛圍（如社群網(wǎng)站），或有協(xié)作辨識(shí)的需求（如trello）。設(shè)計(jì)師可在設(shè)定流程的頁(yè)面上，提供多種預(yù)設(shè)個(gè)人頭像供使用者快速選擇（如多款顏色或企業(yè)識(shí)別的變形應(yīng)用），或設(shè)計(jì)某種自動(dòng)機(jī)制（如帳號(hào)的第一個(gè)字母）。另外，利用第三方社群登入方式，也能自動(dòng)載入在該平臺(tái)上傳的頭像，是個(gè)對(duì)使用者較便捷的方式。

再者，若能提供完善的圖片編輯器，也能吸引使用者做出更符合自我形象與品質(zhì)更好的頭像，例如挑選濾鏡、色相與明度調(diào)整等。不過(guò)，圖片編輯器的有無(wú)，應(yīng)該要取決于平臺(tái)服務(wù)的本質(zhì)。

同尺寸下，圓形看起來(lái)比方形小

某一圓形的直徑與正方形的邊長(zhǎng)一致，若將兩者放在一起，視覺(jué)上會(huì)認(rèn)為圓形的較?。ㄈ缦聢D左）。如果排版有將兩者放在一起的需要，可將圓形放大一點(diǎn)，以達(dá)到視覺(jué)的平衡（如下圖右）。

使用 gif

有越來(lái)越多的平臺(tái)允許使用者放上gif 檔作為個(gè)人頭像，以呈現(xiàn)動(dòng)態(tài)效果，這讓使用者更可彰顯其特色或品味，例如：

• 夸張表情變化，來(lái)表示我的個(gè)性開(kāi)朗搞笑

• 不同視角的放空照片切換，就是要告訴大家，我就是個(gè)文青！

• 旋轉(zhuǎn)的3D 模型，代表我是位動(dòng)畫(huà)師