用戶使用命令按鈕,觸發(fā)一個即時行為鳍鸵。
默認情況下苇瓣,用戶點擊回車鍵可以觸發(fā)當前聚焦的按鈕執(zhí)行命令。這是開發(fā)者設置的默認操作偿乖,用戶按tab鍵击罪,可以在按鈕之間跳轉聚焦哲嘲。
何時使用該控件陨簇?
思考以下問題俩滥,再做決定:
- 是不是需要表示即時觸發(fā)的行為?如果不是宜岛,考慮其他的選擇竣稽;
-
使用鏈接會不會更合適囱怕?在以下情況中,優(yōu)先使用鏈接:
1.當前行為會跳轉至另一個頁面丧枪、窗口或者幫助主題光涂。(wizard navigation中使用的“上一步”“下一步”按鈕除外);
2.操作命令出現在一段文字當中拧烦。
3.命令的權重默認是次級的忘闻,也就是說它不是當前窗口的主要操作。在這種情況下恋博,使用外觀上較為輕量級的按鈕齐佳、或者直接使用鏈接會比較合適。
4.命令屬于相關鏈接下展開的菜單或組债沮。
5.標簽文字太長炼吴,超過五個單詞長(英語中),這時使用命令按鈕并不美觀疫衩。 -
一組單選鈕和一對命令按鈕的組合是不是更合適硅蹦?在下面任意情況中,一組有明確含義的命令按鈕常被結合了確認闷煤、取消命令按鈕和單選項目的按鈕組合代替:
1.可選的操作多于五個童芹;
2.用戶在決定操作前需要看補充信息鲤拿;
3.用戶需要在確認操作前和選項交互(例如查看補充信息)假褪;
4.用戶把操作項視作一組選項,而非一組含義各不相同的的命令項近顷。
設計思路
使用省略號
盡管命令按鈕是一個觸發(fā)即時動作的控件生音,但是也會有需要展示更多動作詳情的情況。如果要表示當前動作需要展示額外信息(包括確認)窒升,在按鈕的標簽末尾加上省略號缀遍。
恰當地使用省略號很重要。它能暗示用戶在執(zhí)行操作前還需要做進一步的選擇歹苦,甚至直接取消整個操作。省略號的視覺暗示能讓用戶放心地探索你的軟件產品督怜。
但這不意味著你應該在任何會打開新窗口的按鈕上都使用省略號—只有當新窗口上的補充信息對執(zhí)行目標操作必不可少的時候才需要這樣做殴瘦。 并不是任何含有“會打開新窗口”暗示的按鈕都需要附加省略號, 例如關于、高級号杠、幫助(或其他鏈接到幫助主題的按鈕)蚪腋、選項、屬性和設置等等姨蟋。
一般來說屉凯,用戶界面上的省略號表示不完整性。只是需要打開其他窗口的命令不是不完整的--它并沒有展示執(zhí)行操作必須的補充說明眼溶,它只是必須另開窗口來使界面更加整潔清楚悠砚。在這種情況下,使用省略號就沒有必要了堂飞。
需要明確:使用簡潔清晰的標簽說明命令按鈕的操作灌旧,在合適的情況下使用省略號。
應用范例
命令按鈕有以下幾種類型:
標準命令按鈕 用來表示即時觸發(fā)的動作
默認選中命令按鈕 這種狀態(tài)的命令按鈕绰筛,用戶點擊enter鍵就能觸發(fā)操作枢泰。
用戶點擊標準命令按鈕,就會使之變成默認選中狀態(tài)铝噩。如果輸入焦點當前不在按鈕上衡蚂,則帶有默認按鈕屬性的命令按鈕將成為默認值。一個窗口中只能有一個命令按鈕是默認的骏庸。
輕量命令按鈕 輕量命令按鈕和標準命令按鈕很像毛甲,但它的按鈕邊框只有在鼠標hover的時候才會出現。
在上例中敞恋,這個按鈕的外觀非常不明顯(看起來像一個鏈接)丽啡。但用戶hover過它的上方,會出現按鈕邊框硬猫。
輕量命令按鈕可以用在所有適用于標準命令按鈕的情況下补箍,使用它可以避免按鈕形態(tài)的千篇一律。輕量命令按鈕在表達重要性不高的選項啸蜜、且用鏈接的形式不合適的情況下十分理想坑雅。
菜單按鈕 當需要展示一系列相關選項時,使用菜單按鈕衬横。
在對話框裹粤、工具欄、或其他沒有菜單欄出現的窗口中蜂林,使用菜單按鈕來代替菜單欄的功能遥诉。一個向下的小三角暗示點擊按鈕會展開菜單拇泣。
分裂式按鈕 用分裂按鈕來集合同一個功能命令的不同細節(jié)選擇,特別是在某種選擇特別常用的情況下可以使用矮锈。
在上例中霉翔,分裂按鈕集合了打開命令的六種可選項。默認的直接打開選項最為常用苞笨,所以用戶通常并不需要打開去看其它選項债朵。使用分裂式按鈕不僅節(jié)省空間,也能提供許多可選項供用戶選擇瀑凝。
和菜單按鈕不同的是序芦,點擊分裂按鈕的左邊部分是直接執(zhí)行當前標簽上的動作行為。在需要使用特定工具完成操作粤咪、且這次用戶的選擇很大幾率會和上次相同的情況下谚中,分裂式按鈕是很好的選擇。在下面示例中射窒,取色器按鈕就保存了用戶的上次選擇:
瀏覽按鈕 點擊瀏覽按鈕展示對話框藏杖,對話框中提供用戶可以選擇的有效值。
由瀏覽按鈕觸發(fā)的對話框能幫助用戶在文件脉顿、文件夾蝌麸、計算機、用戶名和顏色等等多種對象中作出選擇艾疟。瀏覽按鈕通常帶有一個不嚴格限定的輸入控件来吩,例如文本框。瀏覽按鈕的標簽一般是“瀏覽”蔽莱、“其他”或者“更多”弟疆,而且文字后通常帶有省略號,用以暗示需要進行更多內容的補充盗冷。
如果窗口上有很多瀏覽按鈕怠苔,你可以使用簡版形式:
漸進展開按鈕 漸進展開按鈕可以用來展示或者隱藏不常用的選項。
漸進展開是指仪糖,默認隱藏不常用的選項柑司,當需要選擇時再展開。漸進展開的標志暗示是雙箭頭锅劝,箭頭的方向即是將要展開或隱藏選項的動作將要發(fā)生的方向:
點擊上面的按鈕之后攒驰,標簽文字會隨之改變,暗示下一個點擊動作的效用與之前相反:
更多詳情和案例故爵,請參見 Progressive Disclosure Controls.
方向按鈕 方向按鈕用來指明動作發(fā)生的方向玻粪。
方向按鈕使用的不是雙箭頭,而是一個單箭頭角括號:
設計指南
一般情況
- 如果點擊按鈕無法立即響應,鼠標要展示等待加載中的狀態(tài)劲室。 如果沒有反饋伦仍,用戶會以為點擊沒起到作用,從而再次點擊痹籍。
- 如果同樣功能的命令按鈕在多個窗口上都有設置呢铆,盡量使用相同的標簽文字和存取鍵。在每個頁面上的位置也盡量設置得一致蹲缠。
- 對于有文字標簽的命令按鈕,寬度盡量小悠垛,高度使用標準值线定。更多詳情,參見建議設計尺寸和間距一節(jié)确买。
- 對每個頁面上的命令按鈕斤讥,盡量都設置成相同的寬度。 如果實現起來有困難湾趾,有文字標簽的命令按鈕寬度規(guī)格最多可以有兩個芭商。
- 在還有其他的控件與命令按鈕一起執(zhí)行交互操作的情況下,例如輸入框和一個“瀏覽”按鈕搀缠,有三種布局方式來暗示這兩個對象間的緊密關系:
- 按鈕與另一控件的右側對齊且頂對齊铛楣;
- 按鈕在另一控件下方放置,且左對齊艺普;
- 按鈕放置在其他控件中間簸州,并且豎向居中(如上例中的“增加”和“移除”按鈕,放在兩個菜單欄中間)歧譬。
- 如果有多個命令按鈕作用于同一個控件岸浑,排版方式是將它們豎向堆疊排列在控件右邊,與該控件頂對齊瑰步,或者橫向水平陳列在該控件下方矢洲,與該控件左對齊。
- 當命令按鈕附屬于其他控件時缩焦,使用上述的排版規(guī)則读虏,且只有在主控件被選擇時,其下屬的命令按鈕才被激活舌界。
- 不要使用過窄掘譬、過短或過高的帶標簽文字的命令按鈕 這樣外觀的命令按鈕看起來不夠專業(yè)。盡量使用默認長寬尺寸的命令按鈕呻拌。
- 盡量避免在命令按鈕上使用圖文組合的標簽葱轩。 圖文組合常常會使視覺效果更雜亂,而且這樣的設計并不能使用戶更容易理解。只有在例如“圖像是命令含義的標準默認圖標”等確實能有助于用戶對命令效果的理解的情況下靴拱,使用圖文組合的方式設置命令按鈕圖標垃喊。否則,標簽使用文字或者圖像袜炕,二者其一本谜。
- 不要使用命令按鈕來進行狀態(tài)的設置。 設置狀態(tài)的情況沿盅,使用單選按鈕或者多選框控件把篓。命令按鈕的唯一作用就是觸發(fā)行為。
分裂式按鈕
- 默認情況標簽展示最常用的選項腰涧。 如果常用選項不止一個韧掩,選擇一個不需要更多附屬信息來解釋的。
- 如果最有可能的選項是用戶上一次的最后操作項南窗,那就把默認標簽選項設置為用戶的上次選擇項揍很。
- 默認展示出的標簽選項,在下拉菜單中用加粗字體表示万伤。 這樣有助于用戶辨認出方便地找到默認值窒悔,特別是在默認命令項是動態(tài)內容、或者分裂式按鈕使用圖片而不是文本表達選項含義的時候敌买。
默認值
- 在每個對話框中給出一個默認選中的命令按鈕简珠。使用最保險的選項(防止數據和系統(tǒng)存取方面的丟失情況)作為默認選中項。如果此時不需要考慮這一點虹钮,使用用戶最可能選擇或者最為適宜的選項聋庵。
- 除非動作可以被輕易撤銷,否則不要使用具有破壞性的選項作為默認選中命令按鈕項芙粱。
建議設計尺寸和間距
標簽
- 每個命令按鈕都需要設置標簽祭玉。
- 如果命令按鈕只有圖標標簽,需要為它的Name屬性設置合適的文字標簽春畔。這樣在需要使用屏幕閱讀器等輔助設備的情況下脱货,用戶才能得到更多關于圖標標簽的信息岛都。
對于簡寫的瀏覽命令按鈕(標簽是“...”)臼疫,代碼上的標簽文字應該設為 Browse。
存取鍵 access key的設置是唯一的扣孟。設置規(guī)則烫堤,請參照 Keyboard。
特例
1.不要為確認和取消按鈕設置存取鍵凤价。因為Enter鍵是默認選中命令按鈕(通常是確認鍵)的存取鍵鸽斟,而Esc鍵是取消按鈕的存取鍵。這樣設置為其他存取鍵的設置預留出了兩個字母鍵位利诺。
2.不要為簡寫的瀏覽命令按鈕(標簽是“...”)設置存取鍵湾盗,因為瀏覽命令按鈕沒法設置存取鍵。盡量使用準確的立轧、而不是通用的標簽。理想情況下躏吊,用戶不需要閱讀其他內容來對標簽進行理解氛改。用戶更大可能性傾向于閱讀標簽上的文字,而非另外一段靜態(tài)的文字說明比伏。
特例
1.就算“取消”按鈕的含義不那么準確胜卤,也不要使用其它的文字。不應該讓用戶閱讀完所有的標簽赁项,再去思考到底哪一個按鈕含有取消操作葛躏。但是,當取消行為的作用對象不夠清晰(例如有好幾個動作的情況下)悠菜,可以對取消按鈕重命名舰攒。
- 用動詞開始標簽描述,清楚地描述標簽的行為悔醋。不要使用標點符號結尾摩窃。
特例
1.以下沒有動詞的標簽也是可以使用的:Advanced, Back, Details, Forward, Less, More, New, Next, No, OK, Options, Previous, Properties, Settings, 和 Yes。
遵循句式大小寫規(guī)則芬骄。這樣做能使產品更加符合Windows氣質 Windows tone猾愿,也有助于在命令按鈕上設置合適的短語標簽。
特例
針對應用系統(tǒng)账阻,為了避免有可能出現的大寫規(guī)則混淆,可以參考 title-style capitalization不要在命令按鈕上使用“現在”蒂秘,因為命令按鈕就自帶有即時執(zhí)行的含義。
特例:
當有必要的時候淘太,使用“現在”字眼姻僧,將開始任務的按鈕從執(zhí)行動作的按鈕中區(qū)分出來规丽。
- 在一個任務流中雄嚣,只能出現一個含有“立即”字眼的命令按鈕。例如喘蟆,一個“立即下載”按鈕之后缓升,不可能還接著另一個“立即下載”按鈕。
- 不要在標簽中加入“稍后”字樣來表示一個不會發(fā)生的操作蕴轨。例如港谊,除非真的是要表示一段時間之后再執(zhí)行安裝命令,若表示不要安裝橙弱,不要設置標簽文字為“稍后安裝”來對應“立即安裝”按鈕歧寺。直接設置為“不要安裝”或者“取消”。
- 高級設置按鈕的含義棘脐,是指和高級用戶相關的選項設置斜筐,或者指用戶的操作需要更高級更進一步的知識指導。不要使用高級設置按鈕來表示在技術上看起來更高級的功能蛀缝。例如顷链,打印機的裝訂設置選項并不是高級選項,但它的色彩管理功能是高級選項屈梁。
- 對于會打開其他窗口的命令按鈕在讶,在標簽上使用部分或全部要打開的二級窗口名稱煞抬。例如,瀏覽按鈕打開的對話框真朗,標題也應該是“瀏覽”或者“文件夾”此疹。在整個任務流程中使用一以貫之的語言描述,能夠讓用戶有方向感遮婶。
- 當命令按鈕是對問題作出回答時蝗碎,標簽要符合問題描述。不要用確定/取消按鈕來回答是/否問題旗扑。
- 需要進一步獲取其他用戶信息的命令按鈕蹦骑,以省略號結尾。
特例:
圖像標簽不帶省略號臀防。
- 如果動作結尾只是簡單地要展示另一個窗口,不要在標簽中使用省略號登疗。以下命令按鈕一般不要使用省略號:關于排截、高級辐益、選項、屬性和幫助智政。
- 對于缺少動詞的命令按鈕標簽,為了避免表意不明垦垂,按鈕的標簽文字應該是用戶最可能做出的動作牙瓢。如果用戶只是需要查看新窗口的內容而不需要交互操作一罩,就不要使用省略號撇簿。
- 如果一個窗口上有多于一個的“瀏覽更多”按鈕,標簽可簡寫為省略號“...”汉嗽。網格中的瀏覽按鈕也要使用簡寫版找蜜。
- 對于有方向性的命令按鈕洗做,使用單箭頭括號,箭頭方向指向動作的發(fā)生方向撰筷。
以下是常用命令按鈕的標簽和用法:
確認按鈕的標簽設置 (OK, Cancel, Yes/No, Close, Stop, Apply, Next, Finish, Done)关筒,請參照 User Interface Text.
說明
在提到命令按鈕時,請注意:
- 使用準確的標簽文字蒸播,大小寫也要注意廉赔,但不用寫出標有下劃線或省略號的存取鍵。不需要加上“按鈕”這樣的文字說明碉纳。
- 使用“點擊”描述用戶的交互動作馏艾。
- 在可能的情況下琅摩,使用粗體書寫標簽文字。在需要避免誤解的情況下蜕劝,使用雙引號包圍標簽文字轰异。
例如:點擊打印以打印文件搭独。