網站設計中的UI按鈕設計藝術 - 金沙設計 SUMAART

網站設計中的UI按鈕設計藝術

By:limo- 2019-10-29 09:13:51

在網站設計中優秀的按鈕設計是大多數網站使用者從未考慮過的事情,因為當它執行良好時,它幾乎是無形的。最好的按鈕很容易點選,有明顯的功能,幫助使用者不加思考地與設計進行互動。


這是一個相當簡單的公式,但如果你把它作為事後的想法,它可能很難設計。


今天,我們來看看在網站設計中的按鈕設計趨勢,以及一些幫助你網站設計中使用者介面按鈕的小技巧。讓你的按鈕設計與這些提示,趨勢和想法,以激發你的按鈕設計靈感。


01、保持簡單



這一切都回到了設計理論中的經典短語:保持簡單,愚蠢。


網站設計中的按鈕設計也不例外,按鈕設計不必過於複雜,它應該是明顯的和帶功能性的。有時,其他的設計趨勢可能會妨礙這一點,這也可能會影響網站的轉化率。


所以,當涉及到按鈕設計時,不要想太多,只要記得它是一個按鈕,那麼一個按鈕應該要看起來像一個按鈕,就是這麼簡單。


02、提供足夠的對比



與擁有一個可識別的按鈕幾乎同樣重要的是確保它在網站設計中是容易被看到的。


影象頂部的幻影按鈕樣式快速趨勢和褪色的原因是因為按鈕的對比度不足以使其易於辨別。使用者無法立即找到它們。


不要隱藏對比度差的按鈕,要讓他們脫穎而出,用豐富的顏色和空間對比,使他們站在螢幕上的其他元素。在按鈕周圍留下足夠的填充物,這樣他們才能呼吸。


這使得使用者更容易找到按鈕並將其標識為可單擊元素,同時也使按鈕在物理上更容易單擊,而不會錯誤地得到錯誤的元素。


03、使用顏色



你注意過網站設計中有多少按鈕是紅色或橙色的嗎?這是因為明亮的顏色會吸引人們注意這些元素,並鼓勵人們採取行動。


使用顏色也是一種非常流行的設計技巧,從明亮的顏色到簡單的漸變按鈕,這種顏色可能是幫助人們與設計進行互動的最簡單的方法之一。


04、寫一份能產生期望的縮微報告



不要犯這樣的錯誤:一個帶有“點選這裡”字樣的按鈕。

按鈕設計中的微縮版本應該能夠清楚地預測單擊後的結果,告訴使用者他們接下來會得到什麼。這可能是簡單的“提交”輸入資料,或點選連結“瞭解更多”,或觀看視訊。不管操作是什麼,都要在縮微副本中告訴使用者。


這些資訊可以幫助建立使用者之間的信任,並增加使用者認為可取的操作/互動之間的轉換。


05、參與微妙的動畫



在按鈕設計中有一種趨勢,網站使用兩個並排的按鈕。一個是滿滿的,一個是幽靈風格的。兩者都包含一個懸停動畫,進一步強調了兩個可點選的選擇。


動畫可以幫助人們關注按鈕,甚至鼓勵點選。在按鈕上新增懸停動畫已經成為一種普遍接受的使用者模式,併為使用者提供了一個簡單的提示,讓他們參與其中。


只是不要太過火,旋轉、旋轉、閃爍的按鈕與其說有用,不如說是討厭。


06、把它做得足夠大



按鈕應該包括一個直徑至少10毫米的可點選區域(tappable),並且越大越好。這個建議來自麻省理工學院觸控實驗室的一項研究,該研究考察了與觸控裝置相關的手指墊大小。


讓我們換個角度來看,物理計算機鍵盤上典型的鍵是15毫米乘15毫米。這個目標很好。(只是別忘了考慮不同的螢幕尺寸,這樣你的按鈕就不會在小螢幕上消失了。)


如果您確實需要使用較小的按鈕,請考慮為其新增較大的單擊半徑。這樣,如果使用者錯過了按鈕本身,它周圍有足夠的空間,以便所需的操作仍然發生。


07、使用熟悉的風格



有幾個大家都熟悉的通用按鈕樣式,用其中一個。


一個矩形填充按鈕,內有正方形邊和文字


一個矩形填充按鈕,裡面有圓角和文字


帶有可見投影的矩形填充按鈕


矩形重影按鈕


簡單的圓形按鈕,最常用在右下角表示支援、幫助或聊天


08、放置在期望的位置



按鈕不僅需要按預期的方式出現和發揮作用,還需要放在使用者可以找到它們的地方。


對於主頁,這包括在主標題或文字塊下面放置按鈕。按鈕通常與文字保持左對齊,或者位於螢幕的中心。


對於表單,按鈕出現在輸入之後。一些單獨的輸入表單將同一行的按鈕對齊到輸入的右側。


一般的CTA按鈕直接出現在它們引用的內容下面。


播放或啟動視訊或遊戲的按鈕通常位於預覽螢幕的中心。


購物車或電子商務按鈕通常在右上角。


09、別忘了反饋



按鈕是否響應互動?確保按鈕介面設計中包含明顯的反饋迴圈。


提供按鈕已經完成其工作的視覺或指導性提示。有些按鈕會比其他的需要更多的工作。例如,連結到另一個頁面或網站的按鈕會在新頁面載入時提供反饋,說明按鈕已經工作。如果資訊正確提交,表單提交按鈕可能會在螢幕上顯示“謝謝”訊息。


10、故意使用按鈕



按鈕太多會造成混亂。


在有意義的地方使用按鈕,不要在網站設計中新增過多的按鈕。使用者不會清楚地知道點選哪裡和什麼是最重要的。


儲存按鈕用於網站目標。他們應該引導訪問者去看那些在你的整體設計中最重要的元素。


結論


網站設計中的網站按鈕是一個元素,它可以將你的動作呼叫轉換成結果。花點時間考慮一下這個設計,從顏色到功能再到微縮圖。測試按鈕設計,以確保您的介面具有最實用的版本。


如果你有一個工作的按鈕,不要落入趨勢的陷阱而改變設計。當涉及到按鈕時,函式應該是優先順序最高的。