<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 如何改進UI中的按鈕設計,試試這5個方法!

    2022-10-28    seo達人

    一、UI設計中不同類型的按鈕

    1、CTA按鈕

    號召性按鈕(CTA)是界面中的交互元素,用來執(zhí)行特定的操作,例如聯(lián)系我們、訂閱信息、購買產(chǎn)品或加入購物車等。

    CTA按鈕作為執(zhí)行重要操作的按鈕,在設計上應該更醒目,能讓用戶快速分辨出來。

    圖片

     

    2、文字按鈕

    文字按鈕是以可點擊的文字作為按鈕,文字底部沒有圖形背景。文字按鈕的操作面積小,突出程度低,多用于不太重要的操作。

    圖片

     

    3、下拉按鈕

    在有的網(wǎng)站導航欄中,單擊選項會出現(xiàn)下拉列表,展示更多二級選項,方便用戶可以查看并選擇更多的操作。

    圖片

     

    4、描邊按鈕

    描邊按鈕是背景透明效果的按鈕,用于輔助操作。當界面中有多個按鈕時,使用描邊按鈕有助于劃分視覺層次結(jié)構(gòu),高優(yōu)先級的按鈕使用填充效果,輔助按鈕使用描邊按鈕。

    圖片

     

    5\漢堡按鈕

    漢堡按鈕隱藏在菜單欄中,當我們點擊時,菜單將展開并顯示所有的選項。漢堡按鈕廣泛應用于web和移動應用中。

    圖片

     

    6、懸浮按鈕

    懸浮按鈕(FAB)位于界面的最高層級,優(yōu)先級高,通常為圓形,在界面中執(zhí)行最常見的操作。

    FAB按鈕常用于創(chuàng)建新項目或者發(fā)表內(nèi)容等操作,F(xiàn)AB的位置應確保按鈕具有較高的可訪問性和可視性。在有的產(chǎn)品中,點擊FAB會出現(xiàn)更多的操作,將常用的操作聚集到一個按鈕中。

    圖片

     

     

    二、有效的按鈕設計實踐

    1、讓按鈕看起來可點擊

    當用戶與界面交互時,他們應該快速明白什么是可點擊,什么是不可點擊的。作為設計師,我們不會希望用戶花很長的時間來理解他們看到的元素,因為用戶花的時間越長,產(chǎn)品的可用性就越差

    為了確保用戶能夠明確知道按鈕是否可點擊,我們可以使用用戶熟悉的按鈕樣式,例如方形邊框的填充按鈕、圓角填充按鈕、帶有陰影的填充按鈕、描邊按鈕等。

    圖片

    其中最為常見和熟悉的設計是帶陰影的彩色填充按鈕,當用戶看到這樣的按鈕時,他們會立刻明白這是一個可點擊的按鈕。

     

    2、考慮按鈕在界面中的位置

    按鈕的位置很重要。作為設計師,我們不希望用戶花時間尋找按鈕,而是應該將按鈕放在用戶期望的位置上,方便用戶去操作。

    對于按鈕在界面中的位置,首先要了解F型和Z型的瀏覽模式。

    F型瀏覽模式

    圖片

    在F型模式中,用戶通過水平移動的方式讀取界面上方的內(nèi)容,構(gòu)成F的頂部欄。然后用戶向下移動頁面,再次水平移動,再以垂直移動的方式瀏覽左側(cè)的內(nèi)容,形成F型的主干。當界面中有大量數(shù)據(jù)時,通常會遵循這樣的瀏覽模式。

    圖片

    Z型瀏覽模式

    圖片

    Z型瀏覽模式模仿了人眼閱讀的路徑——從左到右,從上到下。

    用戶首先從左上角到右上角掃描,形成Z的頂部條。然后向左下角掃描,最后再向右看,形成Z型的瀏覽動線。

    圖片

     

    3、標注按鈕的作用

    按鈕應該始終有清晰的注釋,展示點擊時將執(zhí)行的操作。過于通用或者模糊的注釋可能會讓用戶感到困惑。

    圖片

     

    4、正確調(diào)整按鈕大小

    按鈕的大小代表了元素優(yōu)先級的高級。尺寸較大的按鈕表示更重要的操作。

    當在一個界面中存在多個操作按鈕時,為了讓最重要的按鈕看起來更突出,可以考慮讓這個按鈕比其他按鈕的尺寸更大,并且利用顏色和對比,讓這個最重要的按鈕更吸引視線。

    圖片

     

    5、始終提供反饋

    每當用戶點擊按鈕時,他們期望界面能有提示或者反饋。在激活按鈕時,按鈕應該改變狀態(tài),給用戶一個反饋,便于用戶知道點擊按鈕發(fā)生了什么。

    圖片

     

     

    最后

    以上總結(jié)了設計中按鈕的6種類型以及5種改進按鈕設計的方法,希望通過這些內(nèi)容能讓大家對按鈕設計更重視,對已了解的按鈕設計知識查缺補漏!

    慢慢來比較快,如覺得有幫助,


    作者: Clippp

    轉(zhuǎn)載請注明:學UI網(wǎng)》如何改進UI中的按鈕設計,試試這5個方法!

    藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。


    分享此文一切功德,皆悉回向給文章原作者及眾讀者.
    免責聲明:藍藍設計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 91精品婷婷国产综合久久| 真实国产精品vr专区| 久久精品国产99久久无毒不卡 | 国产精品免费福利久久| 国精无码欧精品亚洲一区| 99re8这里有精品热视频免费| 久久精品9988| 精品久久久久久久久久久久久久久| 日韩精品无码Av一区二区| 日韩AV无码精品人妻系列| 成人午夜精品视频在线观看| 尤物国精品午夜福利视频| 久久精品99无色码中文字幕| 99久久国产热无码精品免费久久久久| 国产精品无码AV一区二区三区| 区亚洲欧美一级久久精品亚洲精品成人网久久久久 | 精品国产呦系列在线观看免费 | 一本色道久久88综合日韩精品| 99久久精品免费看国产免费| 久久这里只有精品视频99| 亚洲精品国产成人片| 国产精品91视频| 久久精品无码免费不卡| 成人国产精品一区二区视频| 99久久精品国产麻豆| 国产色婷婷五月精品综合在线| 人人妻人人澡人人爽精品日本| 亚洲精品乱码久久久久久蜜桃| 国产国产精品人在线观看| 无码aⅴ精品一区二区三区浪潮| 日本精品久久久久中文字幕| 日韩一区二区三区在线精品| 精品国产午夜福利在线观看| 国产乱人伦偷精品视频| 国产亚洲精品a在线无码| 欧美精品久久久久久久自慰| 欧洲精品久久久av无码电影| 人妻AV一区二区三区精品| 久久Av无码精品人妻系列| 精品无码国产自产拍在线观看| 精品永久久福利一区二区|