聊到按鈕的設計,我們有太多的話要說。確認按鈕在左邊還是右邊,幽靈按鈕到底可靠不可靠,陰影的存在到底合理不合理,等等等等。但是今天不聊這些,我們來聊一下,如何設計一個高轉化率的按鈕:
我們常常會揪住某個設計細節不放,深入討論直到透徹。這樣的探究并非毫無意義,因為即使是最細小的細節也可能會讓近乎完美的設計毀于一旦。
所以,今天的文章我們繼續深入到設計的細節當中,探討按鈕的設計。用戶每天都會接觸按鈕,從現實世界到虛擬的界面,從移動端要桌面端,它是如今界面設計中最小的元素之一,同時也是最關鍵的控件。當你在設計按鈕的時候,是否想過用戶會在什么情形下與之交互?按鈕將會在整個交互和反饋的循環中提供信息?
在早期的扁平化設計當中,用戶常常因為按鈕的感知度較差而完全處于懵逼狀態,這也從側面反映出按鈕本身在UI設計中的重要作用。
用戶看到可點擊的按鈕會有去點擊和觸摸的沖動。雖然按鈕在屏幕上會以各種各樣的尺寸出現,并且通常都具備良好的可點擊性,但是在移動端設備上按鈕本身的尺寸和按鈕周圍的間隙尺寸都是非常有講究的。
普通用戶的指尖尺寸通常為8~10毫米,所以尺寸為10×10毫米的觸摸交互對象是符合邏輯的,這也算是移動端上約定俗成的規則了。
想要讓一個元素看起來可點擊,注意下面的技巧:
按鈕的色彩需要根據整個網站的配色來單獨搭配。作為用戶交互的核心,按鈕在頁面中適合使用特定的色彩進行強調。
按鈕的色彩應該明亮而迷人,這也是為什么那么多UI設計都喜歡采用明亮的黃色、綠色和藍色的按鈕設計。想要按鈕在視覺上突出,按鈕的色彩最好選取背景色在色輪上相對位置的互補色。
另外一個值得注意的是品牌用色。你需要為按鈕選取一個同你的品牌配色方案相匹配的色彩,它不僅要有識別度,還要有關聯性。不論你配色方案怎么調整,按鈕首先要與你的主要配色保持關聯和一致。
按鈕要大!設計師常常被各種人戳屏,LOGO要大是被指責得最多的地方,而在進行按鈕設計的時候,大也同樣是鋼需。只有當按鈕尺寸夠大的時候,用戶才能在一看到界面的時候就被它所吸引。雖然幽靈按鈕可以占據足夠大的面積,但是幽靈按鈕在視覺重量上的不足,使得它并不是最好的選擇。所以,我們所說的大不僅僅是尺寸上的大,在視覺重量上同樣要“大”。
當然,按鈕的大小尺寸也是一個相對值。有的時候,同樣的尺寸的按鈕,在一種情況下是完美的大小,在另外一個界面中可能就是過大了。很大程度上,按鈕的大小取決于周圍元素的大小比例。如果按鈕是界面中可見的唯一元素,那么誰都不會錯過了。
按鈕應該放置在哪個位置?界面中哪些地方能夠為你帶來更多的點擊量?
在絕大多數的情況下,按鈕應當按照你的頁面和APP的內容來添加:
為何要放置在這些位置?因為他們遵循用戶的習慣和自然的交互路徑,不論是網頁還是APP。
幾乎所有類型的設計都會對對比度有所要求,在進行按鈕設計的時候,不僅要讓按鈕內的內容(圖標、文本)能夠同按鈕本身構成良好的對比,而且按鈕和背景以及周圍的元素也要形成對比。
那么,在你進行設計的時候,需要考慮到下面的因素:
當你在考慮按鈕的外形的時候,你只需要考慮兩種情況:
每個按鈕都會包含一個文本指令,它會告訴用戶這個按鈕的功能。所以,按鈕上的文本要盡量簡潔、直觀,并且使用符合整個網站風格的語音語調。
然后,你需要“履行承諾”。當用戶點擊按鈕的時候,按鈕所指示的內容和結果應當合理、迅速地呈現在用戶眼前,無論是提交表單、跳轉到新的頁面,用戶通過這個按鈕應當獲得他所預期的結果。
按鈕中的內容通常包括:
幾乎每個界面都塞滿了各種不同的UI元素。設計的過程中,設計師往往會設計出若干個不同的版本,而直到項目接近完成的時候,才從無比相近的幾個方案中挑選一個版本。
不要陷入這種困境。
按鈕就該有按鈕的樣子。按鈕應該是整個設計中獨一無二的控件,它在形狀、色彩和視覺重量上,都應當同其他部分區分開。想想看,當你創造出的按鈕和其他的控件都要大,色彩在整個配色方案中都獨一無二,它絕對比黑暗中的螢火蟲還要來得顯眼。
文章轉載請保留網址:http://cctvsc.cn/news/industry/1765.html