⑴ 對按鈕的一些認識
按鈕的定義
就是網頁或應用中用來承載用戶操作的元件。用來承載用戶某一個具體的命令(操作),用戶在按下Button後程序系統執行一系列的行為。
通常在視覺上會著重表現。
按鈕是一個普通的必不可少的,幾乎我們每天都要接觸無數次的設計元件,同時在Web或者App上創造流暢的用戶體驗必不可少。
按鈕 的尺寸
點擊Button的是滑鼠或手指。
MIT Touch Lab的研究結果表明手指接觸面積平均為10-14mm之間,指尖平均為8-10mm,所以最佳的熱區尺寸應設定為10mmX10mm。
按鈕 的形狀
通常是直角矩形或者圓角矩形。直角形的按鈕向我們傳遞一種正式嚴肅的感覺。圓角能夠加強信息的傳遞,並且能夠將人的視線集中在元素的中心位置。其他形狀,如圓形,三角形等。
按鈕 的顏色
按鈕的顏色有千萬種,可能考慮到界面的設計風格;考慮到對用戶的心理暗示;考慮到要傳達給用戶的理念會選擇合適的顏色。比如大眾默認的紅色按鈕傳達有警告、不可以的意思,同時也最能引起注意的顏色;藍色則傳達著可行,暢通之意;灰色則傳達著不可用,不可點擊之意,如灰置按鈕就是這樣應用的。
按鈕 的樣式
1.立體按鈕
立體按鈕樣式相較於扁平按鈕設計增加了一維空間,在復雜或寬裕的空間中強調功能,立體按鈕比扁平按鈕更加顯眼。
2.扁平按鈕
扁平的按鈕不突出,在點擊時會有背景顏色,不打擾內容。
3.開關按鈕
用同一個Button表示開啟和關閉,節省空間。
4.幽靈按鈕
透明背景,與頁面文字一樣顏色,只加上邊框,通常基於品牌或設計的考慮。
5.懸浮按鈕
懸浮按鈕用於驅動動作時使用。當然在其它場景使用並不局限於單一形狀,可以是圖片文字結合,也可以是icon單獨構成,懸浮於頁面中。
懸浮按鈕也是谷歌設計的重要部分,它是一個圓形的材質按鈕,點按之後按鈕浮起並表現墨水暈開的效果,利用本身的圓形形狀懸浮於界面之上與其他元素進行區分,加上運動動作,包括漸變,展開和轉化為單一定點。
按鈕 的狀態
按鈕有可用不可用兩種狀態,以及在交互上默認狀態、滑鼠或懸浮時的狀態和按下時的狀態。
之前有提到灰置按鈕,就是不可用的。如下圖的應用按鈕,現在這種情況是不可用,不能點擊的。
只有在你做出相應的改動時,這個按鈕才會被喚醒,變成可用可點擊的狀態。
在Web中按鈕的默認狀態下;
滑鼠懸停時是這樣;
按下時是這樣的。
在界面設計按鈕時都要考慮到這個交互問題,承現三種不同狀態。
按鈕 的構成形式
按鈕可以分為純文字的、純icon的,純圖片的以及這三種元素各自相結合的,最常見的就是純文字形、純icon形和文字icon結合形,純文字的太常見,就不用再例圖說明了。
按鈕 的使用形式
單個 按鈕 ,最常見的。
按鈕組 ,一般成組出現,共用邊框,在視覺上成一個整體長條形狀。末尾可能有更多的按鈕隱藏,通過下拉箭頭表示。
列表型 按鈕 ,類似Select,從可選的列表中選擇一項或者多項的菜單。
按鈕 的擺放位置
按鈕應放置在用戶能夠直接找到或者他有預期能看到的地方。例如,iOS UI 設計規范給明了按鈕的合理位置。
按鈕要執行的命令和位置的關系非常重要,,特別是在出現成對的選項時(就像」上一個」和」下一個」),確保設計強調了最主要或者最重要的動作。
在下面的例子中我們使用了紅色的按鈕顏色表現一個潛在的具有破壞性的動作,並且,主要動作不但可以通過顏色和對比度去引起注意,還可以看它是否置於對話段落的右邊。
⑵ 如何實現webqq的按鈕樣式
你是想問用什麼軟體來實現?
⑶ 怎麼給按鈕添加CSS樣式
給按鈕添加css樣式的方法:
添加方法:
1、.btn {BORDER-RIGHT: #7b9ebd 1px solid; 右邊線
2、PADDING-RIGHT: 2px; 內邊距 右
3、BORDER-TOP: #7b9ebd 1px solid; 上邊線
4、PADDING-LEFT: 2px; 內邊距 左
5、FONT-SIZE: 12px; 文字大小
6、BORDER-LEFT: #7b9ebd 1px solid; 左邊線
7、CURSOR: hand; 滑鼠移上去時,變成手形。
8、COLOR: black; 顏色黑 (表示文字顏色)
9、PADDING-TOP: 2px; 內邊距 上
10、BORDER-BOTTOM: #7b9ebd 1px solid }底邊線
(3)web按鈕樣式擴展閱讀
CSS樣式部分
大小 {font-size: 12px},x-large;(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD
樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)
行高 {line-height: normal;}(正常) 單位:PX、PD、EM
粗細 {font-weight: bold;}(粗體) lighter;(細體) normal;(正常)
變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)
大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)
修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)
常用字體: (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景屬性: (background)
色彩 {background-color: #FFFFFF;}
圖片 {background-image: url();}
重復 {background-repeat: no-repeat;}
滾動 {background-attachment: fixed;}(固定) scroll;(滾動)
位置 {background-position: left;}(水平) top(垂直);
字間距 {letter-spacing: normal;} 數值 /*這個屬性有用,多實踐下*/
對齊 {text-align: justify;}(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)
⑷ web中如何改變button的形狀
2種辦法:
1. 使用Map
可以通過HTML的MAP標簽,把圖片上的任意形狀規定為按鈕。
2. 對按鈕使用樣式
<input type="button" value="aaa" alt="" style="background-image:url('aaa.jpg')" />
⑸ HTML中如何改變按鈕的顏色
HTML button按鈕的邊框樣式與顏色都是可以修改的,用基本的HTML語法難以設計出美輪美奐的按鈕風格,透過CSS卻可以很容易的辦到,在本篇HTML button按鈕邊框樣式與顏色的修改介紹中,我們將會用到CSSborder屬性其中的邊框樣式(border-style)以及邊框顏色(border-color)來製做,當然按鈕本身的寬度(width)與高度(height)也必須搭配使用,無論是button還是submit按鈕都可以用這樣的技巧,但不同的瀏覽器可能會有一點點小小的差異,這跟瀏覽器本身有關系,設計按鈕的css效果時,通常要多用幾個瀏覽器測試。
範例一、HTML button按鈕邊框樣式與顏色
範例二延續範例一的程式碼,增加了background-color 的屬性,替按鈕增加背景顏色,這里為了讓範例比較簡潔一點,所以背景顏色都是用粉紅色(pink)呈現,你也可以自己修改為其他不同的背景顏色。
⑹ ps圖層樣式下拉菜單中找不到「web翻轉樣式、web樣式……」
你試下載入樣式。把photoshop cs∕required∕預置∕樣式」文件夾里卻有這幾項載入啊
⑺ Web標准控制項中有哪3種不同類型的按鈕控制項
Button, ImageButton, LinkButton.
區別在於呈現的html不同。他們也有一些具體的屬性不同。
LinkButton : WebControl, IButtonControl, IPostBackEventHandler
Button : WebControl, IButtonControl, IPostBackEventHandler
ImageButton: Image, IPostBackDataHandler, IPostBackEventHandler, IButtonControl
從繼承樹上看,Button和LinkButton都直接繼承自WebControl。但是ImageButton是經過Image才繼承自WebControl的,另外它實現了IPostBackDataHandler介面。
⑻ web前端中fc-button是什麼框架里邊的按鈕
button是按鈕的意思,一般出現在<input />標簽當中
⑼ 如何設置web窗體中的默認按鈕
web窗體中button默認生成的html控制項為input type="submit" /,即提交表單按鈕,不論button是否編寫事件,客戶端均會與伺服器產生交互,所以會有頁面重載的情況。不想設置為提交按鈕,只需把button屬性UseSubmitBehavior修改為False即可,這樣最終生成的html控制項會變成input type="button" / 如果不行,設置button的onClientClick屬性為"javascript:return;"則按鈕不再響應任何事件