我不確定我們是否意識(shí)到2014年最重大的趨勢(shì)正在來(lái)臨。它完全基于所有網(wǎng)站中微小的設(shè)計(jì)元素——按鈕。
幽靈按鈕——那些透明的、可點(diǎn)擊的物體——忽然間就變得無(wú)處不在。以狂風(fēng)暴雨之勢(shì)席卷正網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域。誰(shuí)能想到,像按鈕這么簡(jiǎn)單的事物,能夠改變我們看待網(wǎng)頁(yè)設(shè)計(jì)的方式?
什么是幽靈按鈕?
幽靈按鈕有著最簡(jiǎn)單的扁平外形——正方形、矩形、圓形、菱形——沒(méi)有填充色,只有一條淡淡的輪廓。除了外框和文字,它完完全全(或者說(shuō)幾乎完全)透明。(因此得名“幽靈”)
這些按鈕通常比網(wǎng)頁(yè)上傳統(tǒng)的可點(diǎn)擊按鈕大,也被置于顯要位置,例如屏幕的正中央。
各種類型的網(wǎng)站(包括移動(dòng)APP)中都能發(fā)現(xiàn)幽靈按鈕的身影,它有著多種設(shè)計(jì)風(fēng)格,卻幾乎都與單頁(yè)網(wǎng)站有關(guān)聯(lián),還有那些極簡(jiǎn)風(fēng)格或近扁平風(fēng)格的設(shè)計(jì)方案。這種風(fēng)格的按鈕在全屏照片背景的網(wǎng)站中也大受歡迎,不像傳統(tǒng)按鈕那樣,這種簡(jiǎn)潔的樣式,是出于不干擾圖片的考慮。
你有仔細(xì)觀察過(guò)你的iPhone(運(yùn)行iOS7)上的圓角按鈕嗎?每個(gè)設(shè)計(jì)元素都是幽靈按鈕。
一位Designmodo設(shè)計(jì)師這樣描繪這項(xiàng)新興趨勢(shì):
“幽靈按鈕的出現(xiàn),從某種程度上來(lái)說(shuō),與人們熱衷于在半透明全屏背景上放置界面與表單有關(guān)。于是,時(shí)機(jī)到來(lái)了,它在背景圖片、產(chǎn)品形象和幽靈表單元素之間分配了用戶的注意力,使得幽靈按鈕不靠遮擋背景來(lái)體現(xiàn)自己的存在,卻依然可見(jiàn)?!?設(shè)計(jì)元素
幽靈按鈕有一系列典型的組成元素。盡管這并非完整的使用準(zhǔn)則,但使用幽靈按鈕時(shí),其中多數(shù)都在發(fā)揮作用。
按鈕是中空的
它外圍有一圈輪廓,通常只有一點(diǎn)點(diǎn)厚度
它包含了簡(jiǎn)短的文字
顏色通常只有黑白
按鈕往往比傳統(tǒng)按鈕更大
幽靈按鈕一般占據(jù)頁(yè)面顯要位置
幽靈按鈕可以單獨(dú)或成小組出現(xiàn)
通常使用扁平或近扁平的設(shè)計(jì)方案
幽靈按鈕內(nèi)部可以使用小的幾何形圖標(biāo),不過(guò)很少這么做
幽靈按鈕的優(yōu)勢(shì)
那么,是什么使得幽靈按鈕如此管用?有必要把這項(xiàng)趨勢(shì)用在你下個(gè)項(xiàng)目中嗎?
幽靈按鈕給人特別干凈的外觀和感受。簡(jiǎn)單自然的按鈕,能使得頁(yè)面的主體設(shè)計(jì)更加突出。(尤其在大幅圖片上表現(xiàn)更好)
幽靈按鈕幾乎可以搭配任何設(shè)計(jì)方案,因?yàn)樗麄兪峭该鞯?。這使得按鈕可以從根本上承接周遭的設(shè)計(jì)特征。
幽靈按鈕延續(xù)了“2013年度趨勢(shì)——扁平設(shè)計(jì)”的演化。這樣的設(shè)計(jì)趨勢(shì)要成為當(dāng)下主流,唯一的方法就是繼續(xù)演變,接納新的概念。
幽靈按鈕提供了一種帶有視覺(jué)驚喜的元素,因?yàn)檫@個(gè)按鈕和用戶預(yù)想的可不一樣。
設(shè)計(jì)和創(chuàng)建幽靈按鈕很簡(jiǎn)單。切記保持簡(jiǎn)約。幽靈按鈕應(yīng)該精細(xì)微妙,而非浮華炫目。
幽靈按鈕無(wú)需過(guò)分扎眼,就足以創(chuàng)造出有感召力的視覺(jué)焦點(diǎn)。在眾多網(wǎng)頁(yè)設(shè)計(jì)中,幽靈按鈕是屏幕上唯一的大型元素(這就是它如此有效的原因)。正因?yàn)槿绱?,它抓住眼球,誘使用戶點(diǎn)擊按鈕。而且這也是優(yōu)秀用戶界面的特征。
幽靈按鈕有助于打造高端的設(shè)計(jì)風(fēng)格。在設(shè)計(jì)中,簡(jiǎn)單往往就是高雅。
幽靈按鈕的劣
雖說(shuō)幽靈按鈕在設(shè)計(jì)上體現(xiàn)出諸多優(yōu)勢(shì),同時(shí)有些劣勢(shì)也需要考慮。采用任何新趨勢(shì)之前,都要掂量它的優(yōu)勢(shì)與劣勢(shì),然后決定是否在項(xiàng)目中使用。
幽靈按鈕可能太溶于背景中,使用戶產(chǎn)生困惑。并非所有用戶都了解設(shè)計(jì);有些人對(duì)難以識(shí)別非傳統(tǒng)樣式的按鈕,也不會(huì)知道它是做什么的。
幽靈按鈕在高對(duì)比度或者顏色豐富的圖片上很難處理。這些按鈕往往不是黑色就是白色。假如你用的背景圖是黑白交替的,幽靈按鈕幾乎看不到,也無(wú)法閱讀。
為了便于使用,幽靈按鈕依賴特定尺寸與位置。放置按鈕時(shí)要格外小心,讓人容易發(fā)現(xiàn)它,并且不能遮蓋圖片的關(guān)鍵部分。
幽靈按鈕有時(shí)會(huì)明顯影響與它搭配的圖片
幽靈按鈕的文案比“點(diǎn)擊此處”要復(fù)雜。其中的文字,需要足夠清晰的構(gòu)思與文案,并置于其余部分的上下文語(yǔ)境中。
幽靈按鈕如今已無(wú)處不在。想要使自己看起來(lái)跟得上潮流趨勢(shì)?選擇時(shí)興的事物前,請(qǐng)確保它確實(shí)對(duì)你的項(xiàng)目有幫助。
幽靈按鈕的案例集
切記,把握任何趨勢(shì),關(guān)鍵是要用好它。正如一位Designmodo用戶所說(shuō):
“我相信設(shè)計(jì)界誕生的每種趨勢(shì),都有它意義深遠(yuǎn)的用途。最重要的是不要沉迷其中,選擇中庸之道?!?就此而言,它正是使用幽靈按鈕和其他潮流趨勢(shì)的關(guān)鍵所在。
接下來(lái)給你帶來(lái)一組幽靈按鈕的案例集,希望對(duì)你的創(chuàng)造力有所啟發(fā)。這個(gè)案例集是從各種線上網(wǎng)站、進(jìn)行中的項(xiàng)目、和Dribbble和Behance這類網(wǎng)站的作品集元素中收集而來(lái)。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
文章名稱:設(shè)計(jì)趨勢(shì):網(wǎng)頁(yè)設(shè)計(jì)中的幽靈按鈕
文章起源:http://www.rwnh.cn/news1/324251.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、定制開(kāi)發(fā)、建站公司、企業(yè)建站、營(yíng)銷型網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)