?

男人j进女人p,姚蕊的婬乱生活h,成人亚洲在线观看视频,亚洲盗摄视频在线

首頁 >新聞動態(tài) > 行業(yè)動態(tài)

網(wǎng)頁設(shè)計中按鈕設(shè)計要素

時間:2021-07-04來源:網(wǎng)騎士

設(shè)計師在設(shè)計網(wǎng)頁的時候,經(jīng)常需要給網(wǎng)頁設(shè)計按鈕,來提高網(wǎng)頁的視覺效果,引導用戶進行點擊操作,那么按鈕如何設(shè)計呢?小編給大家整理了一份按鈕資料,希望對大家有所幫助。


什么是按鈕?

按鈕是一個具有明確指示動作的交互元件 。例如,如果按鈕上顯示 “立即支付”,則單擊它可能會要求你提供信用卡詳細信息。

在 UI 設(shè)計中,按鈕是必不可少的,因為大多數(shù)界面都需要我們采取某種行為才能繼續(xù)。無論是保存,審核還是下載內(nèi)容等操作,按鈕無處不在。使用按鈕可以做更多的事情,接下來我將闡述五個簡單的步驟更好地來設(shè)計按鈕,要注意雖簡單,但卻非常重要。

按鈕具有幾個定義特征:

一個典型的按鈕具有填充,邊框和陰影這幾個屬性。對于距離而言,它們有一個內(nèi)邊距和一個外邊距,這是我們按鈕的安全空間。通過設(shè)置圓角值 ,按鈕的形狀可以變成尖銳的或完全圓潤的角。按鈕上的標簽通常是文本,有時可能會帶有圖標 。向按鈕添加一個向右的 V 形圖標,將增加頁面轉(zhuǎn)換率(>)。標簽文本由字重,顏色和字體樣式定義。

接下來,我將提出改善按鈕設(shè)計的五個黃金法則:

1. 按鈕看起來必須像一個按鈕

我們習慣于現(xiàn)實世界中的按鈕是矩形(有時是圓形)。如果我們設(shè)計中的按鈕形狀既不是矩形也不是圓形(也不是圓形矩形),很可能讓用戶感到迷惑。這就是為什么即使現(xiàn)在的 UI 按鈕幾乎完全扁平,但擬物化設(shè)計實際上仍然存在于數(shù)字化界面中。用戶界面上的按鈕仍然需要看起來像電視遙控器上的按鈕 。

具有 “有機的形狀”,圓點作為按鈕將不起作用。三角形和六角形也將耗費用戶更長的時間來將它們認知為按鈕,甚至有些用戶可能永遠不會發(fā)現(xiàn)界面的按鈕。如果你不想以矩形或圓形作為主要按鈕形狀,則可以選擇使用帶下劃線的文本鏈接 。如果不確定顏色,則深藍色通常是最佳選項。

我們已經(jīng)習慣性認知,帶下劃線的文字是一個鏈接,Google 搜索頁每天都在加強我們的這一心理模型。

2. 尺寸

在現(xiàn)實生活中,你是否曾經(jīng)需要先找到一根針來確保按下超小型復位按鈕來重置電子設(shè)備?這樣的設(shè)計是有目的的,因為這樣就可以避免在不注意的情況下重置設(shè)備。但是假設(shè)在界面中所有按鈕都這么小,這將讓它們難以使用。按鈕應足夠大以便用戶舒適地使用它們,但是需要有多大?

在觸屏時代,我們通常通過相對于屏幕密度的典型指尖尺寸來進行測量 。按鈕為 44-48px 尺寸的正方形會讓我們感到舒適。某些應用程序(例如 Tinder )嘗試將其行動按鈕放大 50px(高度),也取得了不錯的效果。顯然,按鈕的尺寸不能超出這個范圍太多,但是在 50-60px 的范圍內(nèi)還是值得一試的。

在為 PC 端設(shè)計時,我們可以將按鈕縮小一些,因為鼠標光標更精確,但一定不要太小。我們?nèi)孕枰WC用戶可以很容易地將鼠標指向按鈕,因此最小的按鈕應設(shè)為 32px 左右 。

3. 對齊就是一切!

所有 UI 中最大的視覺問題是按鈕標簽文本無法對齊 。雖然大多數(shù)設(shè)計人員和開發(fā)人員設(shè)法將其水平居中,但很少將每個按鈕都能垂直居中 。大寫標簽顯然更容易居中,但是在同時使用大小寫字母時,最好堅持使用基線對齊(或僅將其與首個大寫字母對齊,而忽略降序的 y,j 和 g 字母)。

按鈕大小和字體大小適配性也很重要 。如果你有一個 32px 的按鈕和 17px 的文本,則無法將其完美地放在中間,需要調(diào)整其中一個使之互相適應。

4. 在陰影上下功夫

陰影可以幫助一個對象在背景上突出顯示出來 ,并幫助用戶將其識別為可單擊或需點擊的對象 。因為陰影會讓按鈕看起來比背景距離遠 ,用戶自然就會明白,可以將其按下。

為了使按鈕看起來更友好,可以在陰影顏色中添加背景色。在上面的示例中,陰影是藍色的一種混和色。應避免使用深色和對比鮮明的陰影 ,因為即便這種陰影吸引到了用戶的注意力,但看起來過于尖銳令人不快,就很容易丟失掉用戶的注意力 。

5. 易讀的標簽文字

按鈕標簽文字需要居中,但它們還需要足夠的呼吸空間以使其易讀 。 避免按鈕周圍的文字沒有空格。規(guī)則是在標簽上方和下方空出標簽字體中的 “大寫字母 W 的間距”。側(cè)面空出 “兩個大寫字母 W 的距離”。

當然,按鈕可以在上述間距的基礎(chǔ)上更寬,因為那個標準只是讓它是看起來既美觀又易讀的最小尺寸。

以上就是網(wǎng)頁設(shè)計中按鈕的設(shè)計技巧,如果想了解更多網(wǎng)頁設(shè)計,可關(guān)注深圳網(wǎng)騎士科技。

相關(guān)資訊

?
聯(lián)系