今日要來跟咱們講講細節(jié)中的用戶體會規(guī)劃——按鈕規(guī)劃。以小見大,往往從面包屑導航、箭頭、按鈕...等這樣的小細節(jié)的規(guī)劃就足以影響用戶體會高度。接下來,要告知咱們的是怎么進步按鈕規(guī)劃的可用性。
它應當看起來可點擊/接觸
用戶看到可點擊的按鈕會有去點擊和接觸的激動。盡管按鈕在屏幕上會以各式各樣的尺度出現(xiàn),而且一般都具有杰出的可點擊性,可是在移動端設備上按鈕本身的尺度和按鈕周圍的空隙尺度都是十分有考究的。
普通用戶的指尖尺度一般為8~10毫米,所以尺度為10×10毫米的接觸交互對象是符合邏輯的,這也算是移動端上約定俗成的規(guī)矩了。
想要讓一個元素看起來可點擊,留意下面的技巧:
·微妙的陰影可以讓按鈕看起來“起浮”出界面,讓它看起來更接近用戶
·增加按鈕內邊距,讓它看起來更容易點擊,引導用戶點擊
·進行懸浮或許點擊操作的時分經過實時顏色和效果變化,提示用戶
顏色很重要
按鈕的顏色需求依據(jù)整個網(wǎng)站的配色來單獨搭配。作為用戶交互的中心,按鈕在頁面中合適使用特定的顏色進行強調。
按鈕的顏色應該亮堂而迷人,這也是為什么那么多UI規(guī)劃都喜愛采用亮堂的黃色、綠色和藍色的按鈕規(guī)劃。想要按鈕在視覺上突出,按鈕的顏色最好選取布景色在色輪上相對方位的互補色。
別的一個值得留意的是品牌用色。你需求為按鈕選取一個同你的品牌配色方案相匹配的顏色,它不只要有識別度,還要有關聯(lián)性。不管你配色方案怎么調整,按鈕首先要與你的首要配色保持關聯(lián)和共同。
尺度的影響更大
按鈕要大!規(guī)劃師常常被各種人戳屏,LOGO要大是被指責得最多的當?shù),而在進行按鈕規(guī)劃的時分,大也相同是鋼需。只有當按鈕尺度夠大的時分,用戶才能在一看到界面的時分就被它所吸引。盡管幽靈按鈕可以占有足夠大的面積,可是幽靈按鈕在視覺重量上的不足,使得它并不是最好的挑選。所以,咱們所說的大不只僅是尺度上的大,在視覺重量上相同要“大”。
當然,按鈕的巨細尺度也是一個相對值。有的時分,相同的尺度的按鈕,在一種情況下是完美的巨細,在別的一個界面中可能便是過大了。很大程度上,按鈕的巨細取決于周圍元素的巨細比例。假如按鈕是界面中可見的僅有元素,那么誰都不會錯過了。
方位也關鍵
按鈕應該放置在哪個方位?界面中哪些當?shù)乜梢詾槟銕砀嗟狞c擊量?
在絕大多數(shù)的情況下,按鈕應當依照你的頁面和APP的內容來增加:
·在表單的底部
·在行為呼喚類信息附近
·在頁面或許屏幕底部
·在信息的正下方
為何要放置在這些方位?因為他們遵循用戶的習慣和天然的交互路徑,不管是網(wǎng)頁仍是APP。
專注于比照
幾乎所有類型的規(guī)劃都會比照照度有所要求,在進行按鈕規(guī)劃的時分,不只要讓按鈕內的內容(圖標、文本)可以同按鈕本身構成杰出的比照,而且按鈕和布景以及周圍的元素也要形成比照。
那么,在你進行規(guī)劃的時分,需求考慮到下面的因素:
·顏色
·字體的字重和尺度
·元素的巨細
·布景與形狀
·陰影與漸變
·留白和內外距離
使用標準的形狀
當你在考慮按鈕的外形的時分,你只需求考慮兩種情況:
·圓形。隨著Material Design這種規(guī)劃規(guī)范的推廣,圓形的按鈕已經被咱們所接受了。圓形按鈕廣泛適用于時下流行的扁平化規(guī)劃風格,合適目前的用戶形式。
·矩形。矩形按鈕(包括方形和各種圓角矩形)是最常見也是按鈕在咱們認知中的默許形狀,它符合用戶的認知與習慣,絕大多數(shù)的按鈕長度寬度的兩倍(當然三四倍也有)。當用戶看到它的時分,馬上會明白應該怎么與之交互。至于使用圓角仍是直角,那便是別的一個問題了,挑選符合你的規(guī)劃風格的即可。
告知用戶做什么
每個按鈕都會包括一個文本指令,它會告知用戶這個按鈕的功用。所以,按鈕上的文本要盡量簡練、直觀,而且使用符合整個網(wǎng)站風格的語音語調。
然后,你需求“實行許諾”。當用戶點擊按鈕的時分,按鈕所指示的內容和成果應當合理、迅速地呈現(xiàn)在用戶眼前,無論是提交表單、跳轉到新的頁面,用戶經過這個按鈕應當獲得他所預期的成果。
按鈕中的內容一般包括:
·戳我!
·立即創(chuàng)建
·免費試用
·參加購物車
·查看更多
讓按鈕具有更高的視覺優(yōu)先級
幾乎每個界面都塞滿了各種不同的UI元素。規(guī)劃的過程中,規(guī)劃師往往會規(guī)劃出若干個不同的版本,而直到項目接近完結的時分,才從無比相近的幾個方案中挑選一個版本。
不要陷入這種困境。
按鈕就該有按鈕的樣子。按鈕應該是整個規(guī)劃中絕無僅有的控件,它在形狀、顏色和視覺重量上,都應當同其他部分區(qū)分開。想想看,當你創(chuàng)造出的按鈕和其他的控件都要大,顏色在整個配色方案中都絕無僅有,它絕比照黑暗中的螢火蟲還要來得顯眼。
以上便是關于進步按鈕規(guī)劃的可用性知識共享,這八個方面的分解析,是否對你有所啟發(fā)?你還可以試著憑借以上的建議,結合網(wǎng)站開發(fā)、APP開發(fā)方面的數(shù)據(jù)剖析,更加精確地了解用戶關于你所規(guī)劃的按鈕的實際效果。 |