火星網(wǎng)校
如何改進您的按鈕設(shè)計
發(fā)布時間：2024-04-03 11:56:06 瀏覽量：120次
在這種情況下，我們不是在談?wù)撐餮b的紐扣，也不是那些將褲子連在一起的紐扣。今天我們將討論作為交互中基本元素的按鈕。您可能認為按鈕只是一個按鈕，但它可以變得更多。按鈕的設(shè)計變得比您想象的要復(fù)雜一些。今天我們將討論什么是一個好的按鈕。
按鈕應(yīng)該看起來像一個按鈕
在線，按鈕充當視覺提示，有助于增強用戶體驗。為了讓用戶獲得完整的體驗，他們不必猜測按鈕的位置。如果您真的希望訪問者點擊該按鈕，它應(yīng)該看起來像一個可以按下的按鈕。這是你需要做到的：
1.給它一個形狀
你希望你的按鈕脫穎而出。要做到這一點，你必須給你的按鈕一個可識別的形狀。它應(yīng)該從頁面上的其他內(nèi)容中脫穎而出，并立即被識別為用戶可以與之交互的內(nèi)容。信不信由你，網(wǎng)上最常見的按鈕形狀不是一個圓圈，就像你可能想象的那樣。你最安全的選擇是使用矩形。但不是普通的矩形，而是帶有圓邊的。這些通常效果最好，因為它們足以引起人們的認可，但不足以破壞網(wǎng)站設(shè)計的流程。
如果你覺得有創(chuàng)意，你也可以使用不那么傳統(tǒng)的東西，比如菱形，三角形，甚至是自定義形狀。使這些易于識別的關(guān)鍵是在整個網(wǎng)站中保持一致。 個性風格，這總是讓用戶更感興趣。
2.使用陰影和亮點
陰影在設(shè)計中起著重要作用，因為它們會讓它們看起來像彈出一樣。每個好的UI設(shè)計都需要突出背景的元素，同樣在《5個更好的網(wǎng)站導(dǎo)航技巧》也一樣適用。這表明它們是可點擊的或不可點擊的。就像在現(xiàn)實生活中一樣，例如，筆記本電腦的鍵盤上有可以按下的按鈕。除了按鈕的形狀外，陰影和高光在識別交互式按鈕方面起著非常重要的作用。
3.根據(jù)目的標記按鈕
當我們使用的唯一按鈕是播放、倒帶、前進和停止時，我們進化了很多。他們過去常常被每個人都熟悉的符號所代表。今天，幾乎不可能有這么多在每個按鈕上放置符號并期望人們記住它們。好消息是我們不需要這樣做，因為我們可以選擇簡單地在該按鈕上寫下它的含義。
可能會發(fā)生消息不夠清晰的情況。在這種情況下，將構(gòu)造標簽作為后續(xù)行為并沒有錯，這解釋了某個按鈕的動作。這些需要為用戶提供拒絕或接受按鈕操作的選項。
將按鈕放在可以找到的位置
我們認為用戶永遠不應(yīng)該尋找按鈕。放置它們的方式讓每個人都能找到它們。最簡單的方法是將它們放在人們期望的位置。此外，在確定放置它們的位置之前測試它們的位置沒有任何問題。一個很好的例子就是當你登錄任何給定的網(wǎng)站時。您始終輸入您的姓名和密碼，登錄按鈕就在其下方。沒人會指望登錄按鈕在其他任何地方。
輕松與按鈕交互
考慮按鈕相對于頁面上其他所有內(nèi)容的大小。確保按鈕足夠大以便與之交互，但不要太大以至于影響它在頁面的美觀。研究表明，最佳尺寸為10mmX10mm。 要記住的另一個方面是兩個可點擊按鈕之間的距離，給按鈕一些呼吸空間。你不希望任何人不小心點擊錯誤的按鈕。
允許用戶以可視方式與按鈕交互
按鈕看起來不錯，但如果它不像按鈕那樣，整個項目毫無意義。當用戶點擊時，使按鈕給出視覺反饋。這有兩個方面的幫助：第一種方式是，它感覺更像是一個按鈕，這讓每個人都開心；第二種方式是它讓用戶快速確認他們實際點擊了按鈕。
突出顯示重要按鈕
按鈕具有不同的角色，從最小到主要。更重要的按鈕應(yīng)該很容易區(qū)分在任何其他不重要的按鈕之間。解決方案可能是使用不同的顏色，概述，或使更大更重要的按鈕。
總結(jié)摘要
為了改進您的按鈕設(shè)計，您需要了解：
按鈕應(yīng)該看起來像一個按鈕;
按鈕應(yīng)放在可以找到的位置
與按鈕的交互需要很容易
與按鈕的交互應(yīng)該提供視覺反饋
應(yīng)突出顯示重要按鈕
對于這樣一個簡單的概念，肯定有很多關(guān)于按鈕的知識。雖然細節(jié)很小，但沒有比按下好按鈕更令人滿意的了。希望這些技巧可以幫助您設(shè)計能夠為您的用戶提供良好體驗的按鈕。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學習UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學UI設(shè)計要多久？培訓完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 設(shè)計中的色彩心理學:淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
9. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設(shè)...
-
10. 武漢UI設(shè)計培訓班費用怎么樣？想學UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓班的費用是多少嗎？不知道學UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓班的學費價格以及學習內(nèi)容。
最新文章
