技術(shù)資訊
圓形效果在界面設(shè)計(jì)上的應(yīng)用與分析
2013-12-09 23:35:57
圓形被認(rèn)為是能夠被人眼最快識(shí)別出的對(duì)象之一。這就意味著我們的大腦有能力處理在圓形中的信息比處理在常規(guī)的三角或矩形中的數(shù)據(jù)略快一些。對(duì)于小型的以手勢(shì)為基礎(chǔ)的交互界面中,這種能力真的非常關(guān)鍵。這一點(diǎn)對(duì)移動(dòng)設(shè)備來(lái)說(shuō)尤為典型,在大多數(shù)的情況下,這成為了選擇基本UI元素形狀的決定性因素。青島網(wǎng)站設(shè)計(jì)中也是如此。賞心悅目的曲線取代了尖銳邊緣,有助于營(yíng)造一種溫暖舒適的氣氛,讓感觀愉悅。它有效地增強(qiáng)了青島網(wǎng)站建設(shè)用戶體驗(yàn),讓交互界面簡(jiǎn)單而明了。
人腦處理圓形中的信息更加快和有效,設(shè)計(jì)得當(dāng)可兼具良好的使用性以及更大的吸引力,本文以移動(dòng)設(shè)備為例,這一類設(shè)備恰好是使用圓形的指尖形狀,為設(shè)計(jì)提供了更大的自由度,本文適合移動(dòng)端設(shè)計(jì)的同學(xué)以及對(duì)此感興趣的同學(xué),不僅從交互上并且從視覺(jué)上都能夠?qū)σ詧A形為基本元素的設(shè)計(jì)起到一定的啟發(fā)作用。
選擇圓形一個(gè)最普通的原因就是它模仿指尖的形狀的能力下意識(shí)也將圓形元素與按鈕聯(lián)系在一起。因此,作為一條規(guī)律,你很容易發(fā)現(xiàn)行為召喚的按鈕(call-to-action buttons)應(yīng)用在環(huán)形結(jié)構(gòu)后,有相當(dāng)一部分應(yīng)用程序大肆地在設(shè)計(jì)中使用這一形狀。例如,音樂(lè)導(dǎo)向的應(yīng)用,或者是可視化的鬧鐘以及時(shí)鐘都離不開(kāi)環(huán)形結(jié)構(gòu)。
Eli Williamson設(shè)計(jì)的Lock Screen Concept使用絢麗的相片背景來(lái)吸引用戶的注意力。緊湊的排版,醒目的圓形圖案以及主體的白色給應(yīng)用增加了雅致與空間感。
Cüneyt ?EN設(shè)計(jì)的Timer有著綠色的發(fā)光風(fēng)格。近似霓虹閃爍式的圖標(biāo)及帶有光效圓形在黑暗的純色背景下非常顯眼。
Timm Kekeritz設(shè)計(jì)的Partly Cloudy被貼上了懷舊的標(biāo)簽。柔和的調(diào)色板,新穎的旋鈕,復(fù)合的畫布營(yíng)造出一片舊日情懷。
Marco Nenzi設(shè)計(jì)的ClapUp由于逼真的旋鈕和按鈕,新穎的時(shí)鐘以及質(zhì)樸的白色背景而看起來(lái)清爽而且高端。
Corey Liu設(shè)計(jì)的Charging Animation采用了現(xiàn)實(shí)主義方式。設(shè)計(jì)師巧妙地將生活元素植根于帶有綠色液體的中心圖標(biāo)中,使它看起來(lái)栩栩如生且魅力非凡。
Michael Sambora設(shè)計(jì)的Bikester #2 wip展現(xiàn)了淡色與一系列精致細(xì)節(jié)刻畫核心部件相結(jié)合產(chǎn)生的有力的視覺(jué)沖擊。
Tomáš Zeman設(shè)計(jì)的Company Income App基于Metro 8美學(xué),出色的集成了淡淡的二維單色圓形元素及大量自由空間。
Nate Dicken設(shè)計(jì)的Foresee – Let’s Go Swimming!特意注入了一些明亮的顏色來(lái)使交互界面看起來(lái)明亮而歡快。
Boris Valusek設(shè)計(jì)的Superminds呈現(xiàn)出慣用的水平條紋式的布局,每一行都包含著圓形頭像和小標(biāo)題。
Zahir Ramos設(shè)計(jì)的Laundry Master App,通過(guò)完美集成擬物化洗衣機(jī)相關(guān)按鈕和旋鈕和驚艷的刻畫,吸引了常規(guī)客戶,從而在這類應(yīng)用中獨(dú)樹(shù)一幟,脫穎而出。
Ben Dunn設(shè)計(jì)的Napp App成功應(yīng)用一些整齊微妙的整體控制牢牢地抓住了用戶的注意力。
Alex Bender設(shè)計(jì)的Movenpick app是一個(gè)美食相關(guān)應(yīng)用。通過(guò)用令人垂涎的冰淇淋球照片在交互界面增加圓形風(fēng)格,描述了可以買到的產(chǎn)品的整體多樣性。
Vlad Mereuta設(shè)計(jì)的WheelTunes,是一個(gè)基于手勢(shì)的帶有很棒音樂(lè)氛圍的播放器。中心圓形頭像主圖標(biāo)也起著播放進(jìn)度條的作用。
Simon用幾乎所有空白背景,基本的圖形框架和潦潦幾筆文字宣揚(yáng)著最小化設(shè)計(jì)風(fēng)格。
Jakub Antalík設(shè)計(jì)的Coffely,由于扁平風(fēng)格的精彩應(yīng)用簡(jiǎn)潔而自然地呈現(xiàn)出準(zhǔn)確而輕快的界面。
Circle在整個(gè)設(shè)計(jì)中都應(yīng)用了圓形元素,從頭像顯示,狀態(tài)通知以及其它按鈕都用到了圓形。
Megamegacube設(shè)計(jì)的Quotes app讓事情保持簡(jiǎn)單易懂,將時(shí)髦的紅色背景,平實(shí)的白色的圖案元素以及常規(guī)字體巧妙地結(jié)合在了一起。
Michal Ratajczak設(shè)計(jì)的Trail Offroad Nightmode給人一種模糊的感覺(jué)。應(yīng)用類似60年代的圖標(biāo)以及受到鐘表界面的啟發(fā)計(jì)算機(jī)字體,在深色背景的襯托下,增添了UI的復(fù)古情趣。
Uriel Albarran O. 設(shè)計(jì)的Mixer elements刻畫了占據(jù)了整個(gè)空間的逼真而精致的黑色輪盤。
Louis Saville設(shè)計(jì)的Hack Day App Preview擁有和諧的藍(lán)色風(fēng)格,并出色地被白色相關(guān)加粗樣式和可辨識(shí)的圖標(biāo)所補(bǔ)充,體現(xiàn)了很商務(wù)的感覺(jué)。
Ismail MESBAH設(shè)計(jì)的Phone App UI – Party Maker運(yùn)用跳動(dòng)顏色的混合,和俱樂(lè)部主題高度模糊的背景、光滑的粗字體以及派對(duì)導(dǎo)向的圖標(biāo)都非常地搭調(diào)。
Celia Sun設(shè)計(jì)的Celia’s Weather傳達(dá)出歡快與清澈的感覺(jué)。主體的淺灰調(diào)色系,略微膨脹的旋鈕,精巧的陰影,準(zhǔn)確注入的明亮元素,讓交互界面顯得簡(jiǎn)潔細(xì)膩。
Frantisek Krivda設(shè)計(jì)的Flat Style Color Wheel通過(guò)顯眼的由藍(lán)色到白色漸變的圓環(huán)來(lái)展示數(shù)據(jù)。
Myroslav Galavai設(shè)計(jì)的Plant monitoring tool擁有自然啟迪風(fēng)格的UI,展現(xiàn)了非常棒的照片操作、相片集按鈕和纖維質(zhì)感的背景。
Ronge Ruan設(shè)計(jì)的HR Alarm Clock利用大量圖案元素添以充滿活力的效果。明亮的放射狀漸變和淺色背景帶來(lái)了積極的情緒。
Ali O. ??設(shè)計(jì)的Gas combi remote control app是由精巧的圖案、和諧的調(diào)色盤、漂亮的光和影創(chuàng)造出來(lái)的。
Samuel Bednár設(shè)計(jì)的Alarm Clock App通過(guò)交錯(cuò)的樣本刻畫出了非同尋常的鐘表界面,所有元素都是扁平風(fēng)格的設(shè)計(jì)。
Arles Festival, iPhone App V2.0利用有吸引力的輕少女風(fēng)格的導(dǎo)航系統(tǒng)?;诰W(wǎng)格,菜單上的每個(gè)項(xiàng)目都有著精細(xì)的點(diǎn)畫筆觸、線框圖標(biāo)和優(yōu)雅的大寫字母。
圓形風(fēng)格的應(yīng)用程序交互界面在青島網(wǎng)站建設(shè)中也非常常見(jiàn)。旋鈕、按鈕、開(kāi)關(guān)、進(jìn)度條、頭像以及其他種種經(jīng)常以圓形出現(xiàn),并添以振動(dòng)狀漸變、巧妙的陰影、精細(xì)的圖標(biāo)、單色扁平感及易辨識(shí)的風(fēng)格。這一形狀對(duì)于基于手勢(shì)的iPhone和其它智能手機(jī)的交互界面并不驚奇。
本文的選例都是帶有明確的圓形風(fēng)格的移動(dòng)交互界面,這些界面自然地融入了UI流暢性,更多的可用性和吸引力。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁(yè)面設(shè)計(jì)開(kāi)發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開(kāi)發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2014-05-17 18:35:52] 如何提高百度的權(quán)重值?(原創(chuàng))
- [2011-12-31 12:52:00] 彈出窗口控制代碼匯總
- [2019-05-24 09:56:02] 青島網(wǎng)站制作哪家強(qiáng)
- [2015-02-07 16:39:56] 如何提高網(wǎng)頁(yè)關(guān)鍵詞也是優(yōu)化網(wǎng)頁(yè)細(xì)節(jié)?
- [2014-11-22 10:36:53] WEB設(shè)計(jì)的趨勢(shì):聚焦簡(jiǎn)潔強(qiáng)調(diào)字體
- [2011-10-10 12:01:25] 青島網(wǎng)站設(shè)計(jì)如何做到文章偽原創(chuàng)
- [2011-10-25 22:24:40] 增加網(wǎng)站流量的10種方法
- [2015-08-19 00:10:10] 如何加強(qiáng)網(wǎng)站程序的安全性
- [2015-04-06 22:52:03] 0x80041315:任務(wù)計(jì)劃程序服務(wù)沒(méi)有運(yùn)行
- [2011-10-11 23:19:32] 青島網(wǎng)站設(shè)計(jì)中如何創(chuàng)建網(wǎng)站布局和內(nèi)容
- [2015-08-23 23:26:52] 如果通過(guò)視覺(jué)差進(jìn)行網(wǎng)站設(shè)計(jì)
- [2014-11-29 13:24:10] 網(wǎng)頁(yè)設(shè)計(jì)中的按鈕小竅門
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島網(wǎng)站營(yíng)銷 網(wǎng)站規(guī)劃 青島網(wǎng)站SEO 網(wǎng)站的速度 青島輪胎網(wǎng)站設(shè)計(jì) 微網(wǎng)站 青島抖音小程序開(kāi)發(fā) 高端網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃 企業(yè)建站 舒適的界面 視覺(jué)靈感 企業(yè)網(wǎng)站設(shè)計(jì) 手機(jī)網(wǎng)站建設(shè) 微信營(yíng)銷的優(yōu)勢(shì) 扁平化設(shè)計(jì) 青島開(kāi)發(fā)區(qū)建站公司 H5 網(wǎng)頁(yè)設(shè)計(jì) 程序開(kāi)發(fā) IT資訊 robots 審美 網(wǎng)站SEO 搜索引擎蜘蛛 網(wǎng)站優(yōu)化 圖形網(wǎng)格 如何做網(wǎng)站優(yōu)化 響應(yīng)式設(shè)計(jì) 企業(yè)網(wǎng)站