UI設計中,用戶界面按鈕的幾種基本類型(二)
2019-05-31

折疊按鈕(漢堡包按鈕)

它是隱藏菜單的按鈕。當你單擊或輕擊它時,菜單會展開。這種菜單(以及按鈕)之所以得名,是因為它由三條水平線組成,看起來像典型的面包-肉-面包式的漢堡組合形狀。如今,它是Web和移動布局中廣泛使用的交互元素;盡管如此,關于其利弊的爭論仍然很激烈。

經常訪問不同網站的活躍互聯網瀏覽者,確切知道這個按鈕隱藏了不同類別的網站內容,所以這個技巧不需要額外的解釋和提示。好處是,這種菜單預留更多頁面空間,使界面更簡約和透氣;從功能上看,它為其他重要的布局元素節省了大量空間。還可以更好地適配響應式和自適應式設計,隱藏導航元素,使界面在不同設備上看起來更加和諧。

反對折疊菜單的論據是基于這樣一個事實:對于不經常使用網站的人來說,這個設計元素可能會讓他們感到困惑,并且可能被具有高度抽象特征的圖標誤導。它可能會對導航產生負面影響,并可能成為用戶體驗差的原因。因此,應用漢堡包按鈕的決策應在用戶研究和確定目標受眾的特征和需求之后做出。

雖然漢堡包菜單的使用仍然屬于現代網站設計和App設計中有爭議的話題,但它們也經常被設計者使用。

添加按鈕

通過單擊或輕擊該按鈕,用戶可以向系統添加一些新內容。根據App的類型,它可以是列表中的新帖子、聯系方式、位置、備注、條目,也可以是數字產品的新產品。有時,點擊這個按鈕,用戶會直接轉到創建內容的彈出窗口,在其他情況下,也會有一個中間階段,在這個階段,用戶可以選擇其他選項,并使添加內容更加準確。

滑動選項卡按鈕

單擊或輕擊后,此按鈕將打開各種選項。這是在不重載屏幕的情況下設置適當的交互流的另一種方法,對于屏幕空間有限的移動界面尤其適用。

旅行計劃App:標簽欄的核心交互元素是一個加號按鈕,允許用戶向特定的旅行添加新旅行或新項目。為了簡化體驗,將按鈕擴展為一組滑動選項卡按鈕,這些按鈕標記特定類型的內容,以便用戶可以在進行選擇后,并到達必要的內容頁面。

分享按鈕

隨著社交網絡、聊天和電子郵件的普及,這些按鈕簡化了將App或網站設計內容與用戶的社交檔案連接的過程。這種類型的按鈕可以將內容或成就直接分享到社交網絡帳戶。為了讓這種聯系更清晰,它的圖標帶有特定社交網絡的品牌標志,很容易識別。現在,如果分享不是用戶在頁面上所期望的關鍵操作,它們通常不會被標記為按鈕(沒有額外的形狀、顏色標記、下劃線等),你只會看到社交應用圖標,但是它們是交互式的。這種展示方法支持極簡主義,并有效利用留白空間。它還讓用戶專注于主要功能,但總是能看到快速分享到社交網絡的途徑。

這是一個優雅簡約的建筑公司企業網站。在主頁的左下角,你可以看到社交應用圖標。它們很容易被注意到,但平衡得很好,不會分散用戶對核心導航和行動按鈕的注意力。那更多關于設計按鈕的內容,也可以結合上一文《UI設計中,用戶界面按鈕的幾種基本類型(一)》,詳細了解。

半透明按鈕

該按鈕是一個看起來是空的透明按鈕。按鈕外形看起來是空的,中空的,甚至接近透明的。其作為按鈕的視覺可識別性通常具有一個形狀,該形狀由圍繞按鈕文字的相當細的線包圍。這種按鈕有助于設置可視層次結構,以防有幾個行動按鈕元素:核心的行動按鈕在一個填充的按鈕中顯示,而次要的(仍然可激活的)在一個半透明按鈕中展示。

這是一個餐廳App的注冊界面。它有三種不同類型的按鈕:核心的行動按鈕是一個填滿的按鈕,提供了最流行、最簡單的快速注冊方式;半透明按鈕提供訪問頻率低的選項;文字按鈕排列到下一行并將提出的問題作為行動提示,并使用顏色標記。這樣的方法有助于建立屏幕上幾個按鈕的可視化層次結構。

濤飛網絡,提供高端網站定制服務、移動互聯產品、整合營銷服務,探索區塊鏈技術,并實現商業價值最大化,為所有謀求長遠發展的企業機構貢獻全力。

上一篇:網站無法獲得足夠流量的10個原因

下一篇:白帽SEO技術優化技巧攻略,劃重點

猜你感興趣的內容
您也許還感興趣的內容
时时彩不亏钱的买法