中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

空心元素，尤其是幽靈按鈕，需要設(shè)計師對于細(xì)節(jié)和體驗有足夠的關(guān)注才能用好。

幽靈按鈕和類似的空心元素，在諸多的設(shè)計趨勢當(dāng)中，還是顯得頗為單薄的。它們的轉(zhuǎn)化率看起來不夠突出，和其他的固定形體相比，吸引力也一般，它們的視覺效果主要取決于周圍的對比度和環(huán)境本身，一句話，缺點很多。即便如此，它們并沒有很快消失，相反依然活躍在設(shè)計的一線。

它們能夠如此，很大程度上是因為我們對于這些元素已經(jīng)習(xí)以為常了。它們最初出現(xiàn)在 UI 界面上的時候，用戶所感到的迷惑和混亂，已經(jīng)逐步消失，我們都知道，它是一個按鈕。

現(xiàn)在的幽靈按鈕和類似的元素，已經(jīng)被市場和用戶所接受，在商業(yè)設(shè)計當(dāng)中并不鮮見，甚至承擔(dān)著行為召喚的功用，已經(jīng)足夠吸引用戶的視線了。

△?Ignite?Online

Ignite?Online 網(wǎng)頁中幽靈按鈕的用法，在過去是一種非常典型的方式，現(xiàn)在它的使用策略得到了不小的改進(jìn)，看看下面 Adidas 的 Climazone 頁面。

△?Climazone by?Adidas

在這里，幽靈按鈕有了更多的釋放控件，不僅有良好的懸停效果，而且通過排版讓組件之間關(guān)系更加明確、穩(wěn)固，左側(cè)的圓形元素則強化了設(shè)計上的一致性。

基于這幾個案例，我們想要用好這一設(shè)計趨勢，需要考慮下面的幾個小點：

• 確保它的周圍要有足夠的留白；
• 確保它本身要足夠大；
• 幽靈按鈕和背景要構(gòu)成足夠的對比；
• 使用適當(dāng)?shù)膱D形來承載它；
• 采用懸停特效，強化視覺上的指引性。

雖然這么說確實有點奇怪，但是幽靈按鈕這種線性風(fēng)格的按鈕設(shè)計確實是能夠提升用戶體驗的?？纯聪旅?Pholc 這個網(wǎng)站，設(shè)計師采用了分屏式的設(shè)計，兩個巨大但是不那么顯著的幽靈按鈕分別置于兩個區(qū)塊的中心，通過交疊帶來沉浸式的體驗。對于用戶而言，整個設(shè)計是清晰而直觀的，兩種并行的探索方式，擺在他們面前。

△?Pholc

線性藝術(shù)的回暖

幽靈按鈕帶有線性藝術(shù)的特征，但是它不是唯一的線性元素。在整個設(shè)計當(dāng)中，運用中空的線性元素隱約成為了一個流行趨勢。這種設(shè)計趨勢所包含的內(nèi)容是豐富而多樣的。比如在標(biāo)題周圍加上一圈纖細(xì)的和背景有微妙對比的邊框，不僅讓整個設(shè)計顯得更加優(yōu)雅，而且讓標(biāo)題獲得了額外的視覺關(guān)注度，就像下方的 Drawlight 和 Domaine Direct 兩個網(wǎng)站的設(shè)計。

△?Drawlight

△?Domaine?Direct

Feudi di San Gregorio 這個網(wǎng)站的設(shè)計也尤其值得注意，雖然同樣是使用了細(xì)線邊框來封裝標(biāo)題，但是它背后的設(shè)計團隊通過優(yōu)秀的視覺設(shè)計，讓標(biāo)題層擁有了真實的層次感，獨特的設(shè)計更容易俘獲用戶的關(guān)注。

△?Feudi di San?Gregorio

只需要在視覺上做微妙的調(diào)整，就能達(dá)到突出的效果，這一點非常值得學(xué)習(xí)。接下來，看看 ContraryCon 這個網(wǎng)站。

△?ContraryCon

網(wǎng)站首屏中心的字體部分采用了相對比較夸張的故障效果，周圍的邊框仿佛將夸張的效果限制在這個范圍以內(nèi)，它巧妙的抑制了故障效果的范疇，又讓用戶注意到這個區(qū)塊的關(guān)鍵信息，比如菜單、CTA 和 LOGO。

將空心元素作為裝飾使用

當(dāng)需要裝飾的時候，空心的幾何元素幾乎是這個領(lǐng)域無可比擬的王者。它可以被應(yīng)用到方方面面，下面的案例就是證明。

豐富背景，讓它不顯得沉悶單調(diào)，就像 Weslaco Economic Development Corp 和 The Artery 這兩個網(wǎng)站一樣。這兩個網(wǎng)站都將網(wǎng)格元素運用到背景當(dāng)中，看起來很棒。第一個案例當(dāng)中，網(wǎng)格和背景圖片結(jié)合到了一起使用，而另一個網(wǎng)站則是相對干凈的畫布，網(wǎng)格賦予了它良好的觸感。

△?Weslaco Economic Development?Corp

△?The?Artery

營造氛圍，就像 Intours DMC 這個網(wǎng)站一樣。大膽的藍(lán)色方形和左側(cè)的標(biāo)題相互呼應(yīng)，讓芭蕾舞演員仿佛置身于聚光燈之下。

△?Intours?DMC

增加裝飾和娛樂性，就像 Equal Parts 這個網(wǎng)站一樣，各種空心圖形當(dāng)中，加入了笑臉。開發(fā)者還加入了一些有趣的功能，你能在網(wǎng)頁上拖著這些圖形到處溜達(dá)。

△?Equal?Parts

線性藝術(shù)

空心元素歸根到底就是用線條勾勒出來的圖形輪廓，它最終指向了風(fēng)格微妙而個性十足的線性藝術(shù)。接下來我們看看兩個頗為突出的案例：Viennese Modernism ?和 Vos Besoins by the Buyer。

△?Viennese?Modernism

Viennese Modernism 這個網(wǎng)站的著陸頁和它現(xiàn)代主義的內(nèi)核保持著高度的一致。網(wǎng)格結(jié)構(gòu)中充滿了各式各樣的裝飾性線條與幾何形狀?？雌饋碜銐蛩囆g(shù)，足夠現(xiàn)代，也非常精巧。

△?Vos Besoins by the?Buyer

Vos Besoins 這個網(wǎng)站雖然也是圍繞著線條來構(gòu)建的，但是它和前面的案例非常相似，相對缺少藝術(shù)性，而技術(shù)性的味道更足。幽靈按鈕和大量的互補的細(xì)線組合在一起，融入度極高。

如果前面兩個現(xiàn)代主義風(fēng)格的案例讓你覺得略有一點不適應(yīng)的話，那么你可以看看下面兩個采用相對更傳統(tǒng)手段的網(wǎng)站設(shè)計，Arcys 和 Festive Folks，它們同樣展示出了線條的美感。

△?Arcys

△?Festive?Folks

Arcys 借助素描線稿來呈現(xiàn)科技感，而 Festive Folks 則采用手繪圖畫進(jìn)行藝術(shù)化的表達(dá)。

結(jié)語

空心元素，尤其是幽靈按鈕，需要設(shè)計師對于細(xì)節(jié)和體驗有足夠的關(guān)注才能用好。想要將幽靈按鈕和線性元素都充分運用好，你需要做到下面的三件事情：

• 確定組件的目標(biāo)：如果它是按鈕，那么它應(yīng)該具備行為召喚的特征，如果它是純粹的裝飾，那么它應(yīng)該融入場景或者作為焦點。
• 注意周圍的環(huán)境：線性元素很容易在信息量密集的頁面中迷失，最簡單的辦法是在它的周圍留白。
• 保持對比：如果做的好，能讓微妙的細(xì)節(jié)成為視覺焦點，通過合理的對比配比，讓關(guān)鍵的元素脫穎而出。

原文作者 :?Nataly Birch

譯者/編輯 :?陳子木

譯文地址：https://www.uisdc.com/ghost-buttons-hollow-objects

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議