pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

網(wǎng)頁設(shè)計新趨勢!你聽說過“幽靈按鈕”嗎?

 網(wǎng)頁設(shè)計新趨勢!你聽說過“幽靈按鈕”嗎? 三聯(lián)

  @陳子木 透明按鈕,顧名思義,也就是在設(shè)計網(wǎng)頁中的按鈕之時,不再設(shè)計復(fù)雜色彩、樣式和紋理,而是外僅以線框示意輪廓,內(nèi)只用文字示意功能,背景透出,與整個頁面/背景合而為一的設(shè)計方式。國外的設(shè)計師稱之為“幽靈按鈕”(Ghost Buttons),盛贊這種按鈕通透簡約,貼合整體風(fēng)格又不失神韻,別具魅力。這種按鈕的設(shè)計早已有之,但是在iOS和安卓雙雙風(fēng)格轉(zhuǎn)向之后,它攜了扁平之風(fēng)雷,成了網(wǎng)頁設(shè)計的新趨勢,擁有類似設(shè)計的網(wǎng)頁設(shè)計作品入雨后春筍一般,映入眼簾。

  網(wǎng)頁按鈕設(shè)計中的“幽靈”

  說透明按鈕是“幽靈”并沒有錯,“薄”和“透”是這種設(shè)計的最大特色。不設(shè)底色不加紋理,按鈕僅有一層薄薄的線框標(biāo)明邊界,確保了它作為按鈕的功能性,又達(dá)成了“纖薄”的視覺美感。置于按鈕之后的背景往往相對素雅,或加以純色,或高斯模糊,或色調(diào)沉郁,這使得即使有按鈕也不影響觀看全圖,背景得以呈現(xiàn)又不影響按鈕的視覺表達(dá),雙方相互映襯而達(dá)成微妙的平衡。有意思的是,設(shè)計師在使用這種搭配之時,比起以往有了更多的自由。一則方式簡單,二者處理起來并不復(fù)雜,得心應(yīng)手。二則易于調(diào)整,想突出背景,只需強化圖片清晰度和色彩明暗飽和,將按鈕挪到視覺焦點之外,按鈕內(nèi)用以更加纖細(xì)的字體即可;若想突出功能,引導(dǎo)用戶,只需加強背景模糊程度,降低明度,將標(biāo)題、文案、按鈕置于焦點,按鈕中的字體可以適當(dāng)加粗,色彩可以用得更加跳脫,稍加調(diào)整就可臻于高大上。

  所以,用此來做網(wǎng)頁設(shè)計,不難,而作為大勢所趨,你也可以輕易拿下,不是么?閑話少敘,先上案例。

  1. NUJI

  這款iOS APP的首頁設(shè)計并未設(shè)計復(fù)雜的背景和紋理,僅是將iOS界面中的雨傘圖片高度模糊化疊于底層,襯托出左側(cè)的文字和透明按鈕,以及右側(cè)的iPhone與UI。幾乎與文案同寬的大號透明按鈕在此極為明顯,如果用戶對此APP有點興趣,就不會錯過按鈕所鏈接的演示視頻。

  2. IUVO

  IUVO的網(wǎng)頁中不僅有多個線框按鈕,而且配以多個使用線條勾勒出的簡約線框圖標(biāo),極大地豐富了頁面設(shè)計。虛化了的遠(yuǎn)景和凝實清晰的近景相得益彰,也使得按鈕和圖標(biāo)格外突出。同時,左側(cè)的導(dǎo)航欄還使用了轉(zhuǎn)場動畫,使得整個頁面活起來了。

  3. PAPAYA

  PAPAYA是一個功能型網(wǎng)站,你可以在此預(yù)訂各種活動的門票。網(wǎng)頁被橫向一分為三,用以展示三個不同的活動,暗色調(diào)的背景使得黃色的時間和白色的事件顯得明顯而突出,視線下移就可以自然而然地看到購票按鈕。上下字體一致,透明按鈕框纖細(xì)而不喧賓奪主,贊。

  4. CHARLES-AXEL PAUWELS

  這個網(wǎng)頁的設(shè)計正如上文所說,背景虛化,明度較低,突出了網(wǎng)站的前景視覺元素。線框Logo置于頂部,經(jīng)過虛線分隔,突出中間的網(wǎng)站名稱。大小字體對比,強化名稱,而又說明了網(wǎng)站功能。最下方三個透明按鈕則在你明確主題之后,提供了路徑功能,讓你作出選擇,可謂一氣呵成。

  5. VISAGE

  設(shè)計師在設(shè)計這個網(wǎng)頁的時候,也遵循了文章開頭所說的原則,不同的是,他所設(shè)計的透明按鈕上添加了轉(zhuǎn)場動畫。當(dāng)你將鼠標(biāo)移動到按鈕上的時候,按鈕會自動放大,并且填充上相應(yīng)的色彩,并且文字顏色出現(xiàn)反轉(zhuǎn),吸引用的眼球。這種對透明按鈕的巧妙運用,值得學(xué)習(xí)。

  6. THE DISTANCE

  這個首頁并沒有使用虛化或者明度太低的背景,但是背景構(gòu)圖和整體色調(diào)非常簡單整齊,下面三個霓虹色的透明按鈕和背景里的店招相互輝映,活潑自然。

  7. TRIPPEO

  整個網(wǎng)頁色調(diào)明亮清新,除了漸變的背景就是內(nèi)容。高飽和度的藍(lán)色背景里有點狀的世界地圖作為紋理點綴,使之不顯得單調(diào)。大小錯落的內(nèi)容靠左對齊,最下方是透明按鈕。

  8. UNION ROOM

  這個網(wǎng)站使用了視頻作為背景,訪問者只需要通過變化的背景就可以明白組織的工作流程。通過調(diào)色之后的背景視頻并不影響前景的Logo、文字和透明按鈕,整個網(wǎng)站顯得巧妙而優(yōu)雅。

  9. CTEMF

  雖然設(shè)計師選擇了讓文本來填充圖片之外的地方,但是他依然讓透明按鈕置于頁面的正下方最容易被發(fā)現(xiàn)的地方,這使得整個網(wǎng)頁內(nèi)容豐富,但是結(jié)構(gòu)簡單直觀。

  10. 20JEANS

  這個網(wǎng)頁的處理方式比較均衡,右側(cè)的人物和灰色的墻體構(gòu)成了背景,沒有虛化沒有淡化,黑色的字體和透明按鈕在左側(cè)與右側(cè)的人物相互照應(yīng),與之前的網(wǎng)不一樣的地方在于它并沒有過度偏重內(nèi)容,并且看起來很時尚。

【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章給大家詳細(xì)介紹了HTML頁面跳轉(zhuǎn)及參數(shù)傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現(xiàn)照片墻3D效果的示例代碼,可以實現(xiàn)鼠標(biāo)經(jīng)過圖片實現(xiàn)改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現(xiàn)文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設(shè)置字體大小) 教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 安徽千住锡膏_安徽阿尔法锡膏锡条_安徽唯特偶锡膏_卡夫特胶水-芜湖荣亮电子科技有限公司 | 吉林污水处理公司,长春工业污水处理设备,净水设备-长春易洁环保科技有限公司 | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 首页-瓜尔胶系列-化工单体系列-油田压裂助剂-瓜尔胶厂家-山东广浦生物科技有限公司 | 诚暄电子公司首页-线路板打样,pcb线路板打样加工制作厂家 | 餐饮小吃技术培训-火锅串串香培训「何小胖培训」_成都点石成金[官网] | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 干粉砂浆设备_干混砂浆生产线_腻子粉加工设备_石膏抹灰砂浆生产成套设备厂家_干粉混合设备_砂子烘干机--郑州铭将机械设备有限公司 | 数码听觉统合训练系统-儿童感觉-早期言语评估与训练系统-北京鑫泰盛世科技发展有限公司 | 桨叶搅拌机_螺旋挤压/方盒旋切造粒机厂家-无锡市鸿诚输送机械有限公司 | 杭州|上海贴标机-百科 | 拉力机-拉力试验机-万能试验机-电子拉力机-拉伸试验机-剥离强度试验机-苏州皖仪实验仪器有限公司 | 自动配料系统_称重配料控制系统厂家 | 土壤肥料养分速测仪_测土配方施肥仪_土壤养分检测仪-杭州鸣辉科技有限公司 | 知名电动蝶阀,电动球阀,气动蝶阀,气动球阀生产厂家|价格透明-【固菲阀门官网】 | 一氧化氮泄露报警器,二甲苯浓度超标报警器-郑州汇瑞埔电子技术有限公司 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 太原装修公司_山西整装家装设计_太原室内装潢软装_肖邦家居 | 水冷式工业冷水机组_风冷式工业冷水机_水冷螺杆冷冻机组-深圳市普威机械设备有限公司 | 精益专家 - 设备管理软件|HSE管理系统|设备管理系统|EHS安全管理系统 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂_帽子厂_浙江高普制帽厂 | 影像测量仪_三坐标测量机_一键式二次元_全自动影像测量仪-广东妙机精密科技股份有限公司 | 济南拼接屏_山东液晶拼接屏_济南LED显示屏—维康国际官网 | 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | 智能楼宇-楼宇自控系统-楼宇智能化-楼宇自动化-三水智能化 | Safety light curtain|Belt Sway Switches|Pull Rope Switch|ultrasonic flaw detector-Shandong Zhuoxin Machinery Co., Ltd | 等离子空气净化器_医用空气消毒机_空气净化消毒机_中央家用新风系统厂家_利安达官网 | 滚珠丝杆升降机_螺旋升降机_丝杠升降机-德迈传动 | 北京晚会活动策划|北京节目录制后期剪辑|北京演播厅出租租赁-北京龙视星光文化传媒有限公司 | 医养体检包_公卫随访箱_慢病随访包_家签随访包_随访一体机-济南易享医疗科技有限公司 | 上海皓越真空设备有限公司官网-真空炉-真空热压烧结炉-sps放电等离子烧结炉 | 长春网站建设,五合一网站设计制作,免费优化推广-长春网站建设 | 京马网,京马建站,网站定制,营销型网站建设,东莞建站,东莞网站建设-首页-京马网 | 成都LED显示屏丨室内户外全彩led屏厂家方案报价_四川诺显科技 | 吸污车_吸粪车_抽粪车_电动三轮吸粪车_真空吸污车_高压清洗吸污车-远大汽车制造有限公司 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | WF2户外三防照明配电箱-BXD8050防爆防腐配电箱-浙江沃川防爆电气有限公司 | 干粉砂浆设备-干粉砂浆生产线-干混-石膏-保温砂浆设备生产线-腻子粉设备厂家-国恒机械 | 太阳能发电系统-太阳能逆变器,控制器-河北沐天太阳能科技首页 |