<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 設(shè)計趨勢:網(wǎng)頁設(shè)計中的幽靈按鈕

    2014-10-24    藍藍設(shè)計的小編

    完全基于所有網(wǎng)站中微小的設(shè)計元素——按鈕。

    幽靈按鈕——那些透明的、可點擊的物體——忽然間就變得無處不在。以狂風暴雨之勢席卷正網(wǎng)頁設(shè)計領(lǐng)域。誰能想到,像按鈕這么簡單的事物,能夠改變我們看待網(wǎng)頁設(shè)計的方式?

    參考:預測網(wǎng)頁設(shè)計趨勢

    什么是幽靈按鈕?

    bilder

    nzk

    幽靈按鈕有著最簡單的扁平外形——正方形、矩形、圓形、菱形——沒有填充色,只有一條淡淡的輪廓。除了外框和文字,它完完全全(或者說幾乎完全)透明。(因此得名“幽靈”)

    這些按鈕通常比網(wǎng)頁上傳統(tǒng)的可點擊按鈕大,也被置于顯要位置,例如屏幕的正中央。

    各種類型的網(wǎng)站(包括移動APP)中都能發(fā)現(xiàn)幽靈按鈕的身影,它有著多種設(shè)計風格,卻幾乎都與單頁網(wǎng)站有關(guān)聯(lián),還有那些極簡風格或近扁平風格的設(shè)計方案。這種風格的按鈕在全屏照片背景的網(wǎng)站中也大受歡迎,不像傳統(tǒng)按鈕那樣,這種簡潔的樣式,是出于不干擾圖片的考慮。

    你有仔細觀察過你的iPhone(運行iOS7)上的圓角按鈕嗎?每個設(shè)計元素都是幽靈按鈕。

    一位Designmodo設(shè)計師這樣描繪這項新興趨勢:

    “幽靈按鈕的出現(xiàn),從某種程度上來說,與人們熱衷于在半透明全屏背景上放置界面與表單有關(guān)。于是,時機到來了,它在背景圖片、產(chǎn)品形象和幽靈表單元素之間分配了用戶的注意力,使得幽靈按鈕不靠遮擋背景來體現(xiàn)自己的存在,卻依然可見。”

    設(shè)計元素

    20jeans

    couple

    幽靈按鈕有一系列典型的組成元素。盡管這并非完整的使用準則,但使用幽靈按鈕時,其中多數(shù)都在發(fā)揮作用。

    • 按鈕是中空的
    • 它外圍有一圈輪廓,通常只有一點點厚度
    • 它包含了簡短的文字
    • 顏色通常只有黑白
    • 按鈕往往比傳統(tǒng)按鈕更大
    • 幽靈按鈕一般占據(jù)頁面顯要位置
    • 幽靈按鈕可以單獨或成小組出現(xiàn)
    • 通常使用扁平或近扁平的設(shè)計方案
    • 幽靈按鈕內(nèi)部可以使用小的幾何形圖標,不過很少這么做

    幽靈按鈕的優(yōu)勢

    habr

    mixture

    那么,是什么使得幽靈按鈕如此管用?有必要把這項趨勢用在你下個項目中嗎?

    幽靈按鈕給人特別干凈的外觀和感受。簡單自然的按鈕,能使得頁面的主體設(shè)計更加突出。(尤其在大幅圖片上表現(xiàn)更好)

    幽靈按鈕幾乎可以搭配任何設(shè)計方案,因為他們是透明的。這使得按鈕可以從根本上承接周遭的設(shè)計特征。

    幽靈按鈕延續(xù)了“2013年度趨勢——扁平設(shè)計”的演化。這樣的設(shè)計趨勢要成為當下主流,唯一的方法就是繼續(xù)演變,接納新的概念。

    幽靈按鈕提供了一種帶有視覺驚喜的元素,因為這個按鈕和用戶預想的可不一樣。

    設(shè)計和創(chuàng)建幽靈按鈕很簡單。切記保持簡約。

    幽靈按鈕應該精細微妙,而非浮華炫目。 幽靈按鈕無需過分扎眼,就足以創(chuàng)造出有感召力的視覺焦點。在眾多網(wǎng)頁設(shè)計中,幽靈按鈕是屏幕上唯一的大型元素(這就是它如此有效的原因)。正因為如此,它抓住眼球,誘使用戶點擊按鈕。而且這也是優(yōu)秀用戶界面的特征。

    幽靈按鈕有助于打造高端的設(shè)計風格。在設(shè)計中,簡單往往就是高雅。

    幽靈按鈕的劣勢

    creative-ad

    esposure

    雖說幽靈按鈕在設(shè)計上體現(xiàn)出諸多優(yōu)勢,同時有些劣勢也需要考慮。采用任何新趨勢之前,都要掂量它的優(yōu)勢與劣勢,然后決定是否在項目中使用。

    幽靈按鈕可能太溶于背景中,使用戶產(chǎn)生困惑。并非所有用戶都了解設(shè)計;有些人對難以識別非傳統(tǒng)樣式的按鈕,也不會知道它是做什么的。

    幽靈按鈕在高對比度或者顏色豐富的圖片上很難處理。這些按鈕往往不是黑色就是白色。假如你用的背景圖是黑白交替的,幽靈按鈕幾乎看不到,也無法閱讀。

    為了便于使用,幽靈按鈕依賴特定尺寸與位置。放置按鈕時要格外小心,讓人容易發(fā)現(xiàn)它,并且不能遮蓋圖片的關(guān)鍵部分。

    幽靈按鈕有時會明顯影響與它搭配的圖片

    幽靈按鈕的文案比“點擊此處”要復雜。其中的文字,需要足夠清晰的構(gòu)思與文案,并置于其余部分的上下文語境中。

    幽靈按鈕如今已無處不在。想要使自己看起來跟得上潮流趨勢?選擇時興的事物前,請確保它確實對你的項目有幫助。

    幽靈按鈕的案例集

    切記,把握任何趨勢,關(guān)鍵是要用好它。正如一位Designmodo用戶所說:

    “我相信設(shè)計界誕生的每種趨勢,都有它意義深遠的用途。最重要的是不要沉迷其中,選擇中庸之道。”

    就此而言,它正是使用幽靈按鈕和其他潮流趨勢的關(guān)鍵所在。 接下來給你帶來一組幽靈按鈕的案例集,希望對你的創(chuàng)造力有所啟發(fā)。這個案例集是從各種線上網(wǎng)站、進行中的項目、和Dribbble和Behance這類網(wǎng)站的作品集元素中收集而來。(點擊每張圖片,可以查看來源深入了解)
    parrralax

    visage

    anyilu

    studio-up

    offshore

    audrey

    umbrella

    ghost-button

    indiegogo

    paulvonexcite

    Barclays

    today

    日歷

    鏈接

    個人資料

    藍藍設(shè)計的小編 http://m.skdbbs.com

    存檔

    主站蜘蛛池模板: 综合精品欧美日韩国产在线| 国产精品白浆在线观看免费| 久久夜色精品国产网站| 久久99国产精品二区不卡| 在线成人精品国产区免费| 99热成人精品国产免男男| 97精品久久天干天天天按摩| 99精品在线观看| 国产高清国产精品国产专区| 色婷婷噜噜久久国产精品12p| 一区二区三区国产精品| 91国在线啪精品一区| 中文国产成人精品久久不卡| 精品国产亚洲男女在线线电影| 欧美成人精品一区二区三区| 国产精品无套内射迪丽热巴| 亚洲2022国产成人精品无码区 | 亚洲色精品aⅴ一区区三区| 北条麻妃国产九九九精品视频| 国产亚洲精品自在久久| 亚洲精品你懂的在线观看| 亚洲成网777777国产精品| 精品国产人成亚洲区| 99免费精品国产| 亚洲永久永久永久永久永久精品| 91精品国产9l久久久久| 精品国产一区二区三区无码| 久久99精品久久久久久hb无码| 亚洲精品无码永久中文字幕| 合区精品中文字幕| 欧洲精品码一区二区三区免费看| 久久久久国产精品嫩草影院| 精品人妻少妇一区二区三区| 日韩精品区一区二区三VR| 亚洲精品自产拍在线观看| 亚洲欧美精品午睡沙发| 亚洲国产精品嫩草影院久久| 亚州日韩精品专区久久久| 欧美日韩精品系列一区二区三区| 日韩精品视频在线观看免费| 久久精品国产精品亚洲|