您現在的位置是:電腦技術吧?>? 編程技術 ??>??圓形元素,園內的元素??>??正文詳情

圓形元素,園內的元素

殷子昂2019-11-20 11:11:39 人圍觀
簡介圓里面可以加什么元素圓形元素廣泛應用于界面設計,從普通的圓形圖標到圓形的頭部,或圓形的輪廓形狀。圓是一種特殊的形狀,在許多幾何圖形中都能很快被注意到。因此,在使用

圓形元素在界面設計中被廣泛運用,從常見的圓形圖標到圓形的頭像,又或是圓形的輪廓形狀。

圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。

也正因為如此,在使用圓形元素設計界面時會有一些注意事項。

  一、圓形頭像  放眼望去,圓形頭像已然占領了我們的手機。

不妨看看下面舉的這些例子,如下圖所示。

  從左到右依次是搜狗地圖、QQ、Instagram。

當然,還有很多其它的例子,就不一一列舉啦。

此刻,肯定有同學已經按耐不住要跳出來反駁了,微信和Facebook就不是圓形頭像,不信你看下面兩張圖。

  方與圓之間,孰對孰錯,請繼續看下文分解。

  1.用戶使用頭像的目的  不管是圓形頭像,還是方形頭像,其歸根結底都是頭像。

用戶使用頭像的目的,主要是作為個人身份的象征。

區別于其他用戶的特征有很多,例如用戶名、用戶ID、用戶頭像。

在這些備選項中,頭像最便于快速識別和記憶,尤其是帥哥美女。

  除此之外,還有一部分通過頭像來彰顯自己的個性,例如美女通常會使用自己的性感自拍作為頭像來表現自己的魅力,又或是使用卡通人物或形象作為頭像來表現自己的藝術氣息,再或是使用萌寵作為頭像來表現自己的愛心或是呆萌。

  2.用戶使用什么照片作為頭像  隨著智能手機的越來越普及,人們拍攝照片的門檻也變得越來越低,越來越多的用戶使用自拍的照片作為頭像。

照片的內容五花八門,例如人物、風景、花草、寵物。

即使是正常的人物照片,背景中也會摻雜著很多其它的元素,例如下圖所示。

  第一張照片中人物背景雖然虛化了,但背景仍然很凌亂,一些微弱的對比色很容易就搶奪了用戶的視線。

第二張照片中人物是配角,豪車才是真正的主角,這類型的自拍照不再少數。

第三張照片人物拍攝的光線陰影錯亂,故意露出一線背景內容,其用意如何昭然若揭。

此外,用戶手機的好壞、拍照水平也不一致,拍攝出的照片質量也參差不齊。

  使用這些照片作為頭像時,人物不但不被突出,反而被弱化了。

雖然智能手機屏幕越來越大,但是當頭像集體在界面中展示的的時候,每個頭像依然較小。

  3.方形頭像和圓形頭像的區別  方形頭像和圓形頭像的區別可以用兩張對比圖來說明,如下圖所示。

  左圖是方形頭像,右圖是圓形頭像。

通過對比,可以發現以下幾點:  a、圓形頭像能夠更好地幫助用戶聚焦到人臉。

雖然左圖能夠完整地呈現人物特征,但是干擾信息較多,例如背景中的燈光、門柱、屏風。

對比之下,右圖更為清晰地展示了人物的臉部特征,例如錐子臉、美瞳、假睫毛。

在前面的分析中也提到,手機拍攝的照片質量參差不齊。

在這種現實情況下,圓形頭像更有利于忽略照片的背景,提高頭像的識別效率。

  b、嚴格意義上講左圖并不能稱之為頭像,而更應該稱之為照片。

原因很簡單,頭像嘛,自然應該以展示頭為主,而左圖中頭像只占畫面四分之一不到的區域。

從這個角度來說,顯然右圖更為合適。

在選擇照片作為頭像時,如果是圓形,用戶更愿意選擇臉部的照片作為頭像;如果是方形,用戶則相對更隨意,通常是全身或是半身照。

不信,你可以打開自己的微信,看看自己的好友頭像,或者往前滑滑看看前面的配圖。

  c、日常生活中,我們看到的大多數相框都是方形的,圓形的相框較少,這是因為大多數照片都是方形的。

因此,使用圓形的輪廓來表現頭像,能夠快速地和照片區分開來,更加突出。

  當然,使用圓形的輪廓作為頭像,還有一些其它的原因,例如技術上的進步。

  早期由于CSS等技術的不成熟,圓形、圓角圖形的處理非常麻煩,現在變得容易很多。

  二、圓形的icon  在APP的UI設計中,我們會經常看到一排排圓形的icon,例如下圖所示。

  上圖中,前面兩個分別是美團和淘寶。

在設計上,都有兩行橫排的圓形圖標。

最后一張圖是搜狗地圖的服務tab頁,可以發現也有縱向排列的一溜圓形圖標。

  在這里,要回答兩個問題:  1.為什么要用圓形?  2.為什么要用圓形而非矩形?  第1個問題很方便回答。

每個功能入口的圖標都不相同,如果去掉圓形輪廓,勢必會顯得十分凌亂。

大家都知道圓形是一個封閉的形體,加上圓形之后就能夠弱化圖標的差異性,讓其變得更加規整,看起來也更加清爽,整齊劃一。

同時,在功能上也表明各個圖標之間的平等地位,不會因為某個圖標形狀特殊而有所偏袒。

  在回答第2個問題之前,首先回歸圓形和方形的基本特征,  圓形:動,曲線,運動,靈動,流動  方形:靜,直線,規則,嚴肅,理性  圓形和方形比起來,顯得要靈動很多,不至于那么呆板、嚴肅。

如此,不難理解為什么用圓形而非矩形。

  其次,圓形能夠使圖標在方形頁面中脫穎而出不覺得這幾個圓形圖標在頁面中非常突出搶眼么?原因嘛,很簡單。

我們的手機屏幕大多是方形的,界面中的大多數元素也是方形的,這時候用一點少量的圓形,自然在界面中形成焦點,這一點在后面的分析中還會見到。

  除了這種形式之外,還有一些單個的圓形圖標浮于頁面底部,通常執行的是返回至頂部的操作。

  三、圓形和方形的結合  圓與方就像太極中的陰與陽,相生相克,而又生生不息。

巧妙地將圓形與方形進行結合,能夠讓頁面變得生動活潑的同時,也能夠更好實現功能上的引導,如下圖所示的幾個案例。

  第一幅圖是谷歌手機地圖,地點右上角的出行方式圖標剛好被方形的臨時層一分為二。

從功能上來講,出行方式是下一步的行為,不屬于臨時層里的內容,因此置于右上角的位置是比較合適的。

從UI角度來說,圓形與方形結合,使的圓形變得更加突出顯眼;同時圓形置于右上角,頁面也不那么死板,反而讓頁面變得生動、活潑起來。

  第二幅圖是宜人貸,微微鼓起的弧度讓這個理財項目變得十分突出,同時也打破了頁面沉悶的布局。

  第三幅圖是kitchen stories,整個頁面保持左右居中,作者的頭像居中現實,對頁面進行了分割的同時起到了承上啟下的作用。

  在頁面設計中,圓形元素通常不是獨立存在的,而是和其他元素相生相息,相互包容。

尋求好的視覺效果的同時,也要弄清楚頁面元素之間的相互關系,這樣產出的設計才是真的好設計。

  四、圓形的輪廓  結合現實物體,借用圓形輪廓,打造頁面點睛之筆。

還是舉幾個栗子給大家看看吧,如下圖所示。

  第一幅圖所示的是網易云音樂的播放界面。

圓形輪廓與唱片保持一致,雖然占據了頁面的主要空間,但是使的整個頁面變得文藝簡潔。

  第二幅圖所示的是搜易貸的賬戶頁面。

可用余額采用瓶裝水的設計,余額較多則水漲的越高,同時會有晃動的效果,栩栩如生的同時讓頁面變得靈動起來。

  第三幅圖所示的是樂動力的首頁。

步數越多,則描邊進度條越多,暗色變得越暖。

與現實生活中的儀表盤相對應,漸變色搭配圓形,使的頁面變得主次分明,極富視覺沖擊力。

  可以發現,在使用圓形元素時要注意頁面的平衡,例如左右和上下的對齊居中。

為了保證頁面的均衡和清爽,通常會在圓形元素周圍保留較多的空白。

這些都是在使用圓形元素時需要注意的事項。

版權聲明:本文由 殷子昂 整理編輯。

原標題:圓形設計元素,圓元素的圖形

轉載注明出處:http://www.dn9ww09s.icu/program/13743.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • ofo福利,ofo福利網站

    ofo福利,ofo福利網站 相關圖片ofo91小黃車有福利今天是星期五。我相信你們已經為周末做好了準備。Ofo還將于10月20日推出超級星期五活動。ofo超級星期五有什么好處?如何獲得ofo超級星期五的獎金福利小黃車...

  • 獲取iframe內的元素,怎么獲取iframe里面的元素

    獲取iframe內的元素,怎么獲取iframe里面的元素 相關圖片iframe獲取同級窗口的元素定義嵌入的浮動框架的創建注意iframe元素等同于在一個文檔中嵌入另一個文檔,或者類似于此元素在Internet Explorer中的浮動框架iframe...

  • window7如何顯示隱藏文件,win7隱藏文件夾無法顯示

    window7如何顯示隱藏文件,win7隱藏文件夾無法顯示 相關圖片win7系統查看隱藏文件文件用于命名長期存儲在計算機上的數據流。你知道如何在win7中顯示隱藏的文件嗎?如何在win7中隱藏文件后綴?現在,超人軟件編輯器將向您介紹win7隱藏文件w7系...

  • 擴展名,默認擴展名

    擴展名,默認擴展名 相關圖片excel的擴展名經過多次尋找和摸索,終于成功了。總結如下:(再次感謝網絡上的文章)1。Dreamweaver可以識別*。Kid文件并將其作為HTML頁面處理。需要修改兩個文件:以下2010支持的文件擴...

  • 全能解碼播放器免費下載,完美解碼怎么使用

    全能解碼播放器免費下載,完美解碼怎么使用 相關圖片完美解碼播放單個停止很多安裝在電腦上的播放器不過是iqiyi和騰訊視頻。事實上,市場上有很多有用的參與者。很遺憾錯過了他們。例如,完美解碼播放器與其他網絡播放器相比工作良...

  • gif怎么去水印,gif去水印軟件哪個好

    gif怎么去水印,gif去水印軟件哪個好 相關圖片手機gif動圖上改字此功能對個人站長處理后非常實用1。用防火墻2打開GIF文件。在GIF上添加水印效果(鍵入文本,設置透明度)3。在“歷史記錄”面板上保存操作。(另存為33)4。明蘋...

  • 拼多多雙十一官方有活動嗎,雙十一拼多多打幾折

    拼多多雙十一官方有活動嗎,雙十一拼多多打幾折 相關圖片拼多多雙十一幾號結束作為購物神器,品多多不能錯過雙11的好日子。那么平度多的雙11有什么活動?現在,超人軟件編輯也想介紹一下如何使用pinduoduo的Android紅包,希望能幫拼多多怎么...

  • 大漏洞,ntlm漏洞

    大漏洞,ntlm漏洞 相關圖片請求頭爆出過的重大漏洞如今,WiFi可以說已經進入千家萬戶,所以最近,互聯網上WiFi的爆炸式增長有了重大的安全漏洞,導致恐慌。那么WiFi的主要安全漏洞是什么?如何彌補WiFi的主...

  • 相關內容,黨務工作手冊相關內容

    相關內容,黨務工作手冊相關內容 相關圖片婦女節相關內容問題1:怎樣做一個按鈕?為什么我的文本按鈕很難點擊?解決方案是在按鈕編輯區的時間線上只有4幀,第4幀的點擊是按鈕的反應區,在舞臺上看不到,但起到了按鈕反...

  • strap是什么意思啊,strat

    strap是什么意思啊,strat 相關圖片strat是什么意思中文翻譯那些經常扔iPhone的小朋友對safestat并不陌生。無論他們是越獄還是拯救白蘋果,SabestAT插件都是一個神奇的人工制品。Safestrat無法讀取設shout是什么意思...

熱評文章

  • 常用的繪畫軟件手機版,sketchbook官方下載

    常用的繪畫軟件手機版,sketchbook官方下載 相關圖片手機上可以畫畫的軟件有哪些對于喜歡畫畫的人來說,隨時隨地拿著畫板很不方便。這時,如果手機上有繪圖軟件,就方便多了。哪個是最好的移動繪畫軟件?我們去看看小編。接下來...

  • 百度文庫下載器,免費下載百度文庫的軟件

    百度文庫下載器,免費下載百度文庫的軟件 相關圖片百度文庫怎么免費下載百度文庫經過整頓,規范了很多,文章更全面、更權威,但相應的,免費文檔也少了。有時候你可以找到所需的文檔,但它們是百度文庫獨有的。此時,除了付費...

  • Flash的幀,Flash的幀有三種

    Flash的幀,Flash的幀有三種 相關圖片flash的幀有哪三種在flash導出的第一幀中,這太傻了!在導出的第一個框架中,毫無疑問,您需要下載加載前用來附加的MC、sound和V2組件來顯示加載條!所以通常情況下,裝載量不flash普...

  • 黃油相機里的字體,黃油相機怎么用字體

    黃油相機里的字體,黃油相機怎么用字體 相關圖片黃油相機自帶字體牛油相機作為一款小巧、清新、風格十足的照片美化軟件,相信有很多小朋友只是使用它還不夠了解詳細的功能。那黃油相機怎么把字體變黑呢?黃油相機如何調整字...

  • 響應式模板,什么是響應式模板

    響應式模板,什么是響應式模板 相關圖片響應式html頁面模板HTML5Zero包含了來自各個網站的網站模板資源,但它并不是以數量取勝,而是經過精心選擇的結果。本網站收集的模板均支持響應式網頁設計,即可根據網站中包含的不...

  • 努比亞z17s吧,努比亞z17s怎么樣

    努比亞z17s吧,努比亞z17s怎么樣 相關圖片努比亞z17s屏幕怎么樣z17s作為努比亞第一款全屏幕手機,吸引了眾多小伙伴的關注。那努比亞z17s呢?現在,超人軟件編輯也想回答如何插入努比亞z17s的sim卡。希望你喜歡。努比亞Z努比亞...

  • 網易云音樂人申請網址,如何入駐網易云音樂人

    網易云音樂人申請網址,如何入駐網易云音樂人 相關圖片網易云音樂人邀請碼在哪網易云音樂之所以能受到大家的喜愛,是因為網易音樂人推出的許多原創音樂是一大原因。那么網易云音樂人如何應用呢?網易云樂師怎么會唱歌?現在,超人...

  • 網頁切圖怎么切,網頁如何切圖

    網頁切圖怎么切,網頁如何切圖 相關圖片網頁切圖規范許多初學者在剛學完CSS時感到無助,需要做實際的操作來裁剪網頁。這里我想簡單總結一下網頁裁剪第一點的一些經驗和要點:我們網站的logo部分一般采用H1 a鏈接的網頁需...

  • 股票可以手機交易嗎,手機通達信軟件下載官網

    股票可以手機交易嗎,手機通達信軟件下載官網 相關圖片十大證券交易app股票的走勢一直在實時變化,我們不能總是呆在電腦前。當你有東西要離開電腦時,你怎么能繼續追蹤股票的走勢?在這個時候,移動股票交易軟件將幫助很大。好吧,...

  • 摳圖方法,摳圖教程

    摳圖方法,摳圖教程 相關圖片蒙版摳圖煙火墊已經不是很聰明很長一段時間了,所以有時我不得不向Photoshop兄弟求助,以便有更好的圖片效果。不過,PS哥的體質太強了,不能和FW一起玩。不,為了充分photoshop摳圖怎...

關注微信

变脸官网查询