<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • UI組件要點「狙擊」:按鈕設計的這些坑別再踩啦!

          2022-3-3    純純

          按鈕設計


          為了設計正確的交互,我們需要回顧一下物理按鈕的歷史和起源。物理按鈕是UI組件的前身,當今的數字產品都還在大量使用它們。按鈕很棒,即使用戶不了解基本的機制或算法,只用手指觸摸就可以讓電器、汽車或系統運行/關閉。在《Power Button》中,作者Rachel Plotnick描述了當今按鈕文化的起源,并解釋了按鈕是如何成為數字命令方式的。


          “你按下按鈕,剩下的我們來做。” ——柯達相機的醒目標語吸引了潛在消費者。


          即使在今天,這也是吸引用戶的地方——通過簡單觸摸就能讓事情發生的即時滿足感。盡管有大量新的家用電器和設備都變成了觸摸屏,但物理按鈕并不會消失,因為它們讓人形成的行為習慣,會影響按鈕設計的直觀性和易用性,是一種永遠存在的實物參考。


          01 按鈕 vs 鏈接

          按鈕向用戶傳遞了操作的可執行性,在整個UI里很常見,例如:對話框、表單和工具欄等。按鈕和鏈接之間的區別,請注意:

          -鏈接是導航到另一個地方時應用的,例如:“查看全部”頁面、“ Roger Wright”個人簡介等;

          -按鈕是在執行動作時應用的,例如:“提交”、“合并”、“創建”、“上傳”等。



          02 讓用戶直觀感受按鈕狀態

          為按鈕創建正確的交互和樣式,是按鈕設計過程中重要的組成部分之一。在不改變組件或產生視覺干擾的前提下,每個按鈕的狀態都必須有明確定義,以使其與周圍布局區別開來。



          正常—表示該組件已啟用交互;

          突出提示—用戶使用鍵盤,進入編輯狀態;

          鼠標懸停—當用戶將鼠標置于交互式元素上方時;

          點擊—按下狀態表示用戶已輕點按鈕;

          進度/加載—用戶操作行為沒有立即執行,表示正在完成操作中;

          禁用—表示該組件當前處于非交互狀態,但將來可以啟用。


          03 按鈕的顏色、形狀和大小

          常見的是圓角矩形按鈕,這些按鈕即使在輸入框旁,用戶也能快速識別。按鈕樣式的選擇取決于用途、平臺和應用準則。以下是一些最受歡迎的樣式變化:



          04 建立按鈕樣式等級

          樣式主要用于區分重要和不重要的動作。創建動作層次結構,該層次結構將指導用戶進行多種選擇。通常,可以有一個突出的按鈕(該樣式通常稱為“首要”按鈕),剩下的按鈕則依據重要程度建立不同的樣式等級。



          05 《Don’t Make Me Think》

          這是可用性工程師Steve Krug撰寫的書籍標題,其中講到了一點:對用戶而言,界面清晰明了非常重要,不要給用戶制造難題。人們周圍其實已經被電子產品包圍了,多年使用各種設備、軟件的經驗,一定程度上固化了人們對按鈕外觀和功能的認知。如果與常見的“標準”存在較大偏差,也會給用戶造成困惑。



          避免對交互式和非交互式元素使用相同的顏色,否則用戶不知道該點擊哪里。


          06 一致性的重要性

          “一致性是最強大的可用性原則之一:當事物始終表現相同時,用戶不必擔心會發生什么。” —雅各布·尼爾森(Jakob Nielsen)


          一致性提升了速度性和準確性,有助于避免錯誤。創建可預測性,幫助用戶控制和實現產品中的目標。當創建主要、次要和第三種樣式時,試著找找一致元素,如顏色、形狀等。按鈕設計不僅要在設計系統內部保持一致,在整體平臺也要進行統一。



          07 使按鈕足夠大以實現可靠交互

          按下按鈕應該是一個簡單的操作任務,如果用戶無法正常進行,或在過程中錯誤地按到了相鄰元素,不但給用戶造成了負面體驗又浪費了時間。


          對于大多數平臺,請考慮被觸摸的目標至少為48x48dp。無論屏幕大小,這種尺寸的觸摸目標的物理尺寸應為9mm,觸摸屏元件的目標尺寸至少是7-10mm。



          對于圖標按鈕來說,請確保觸摸目標超出元素的可視范圍。這不僅適用于移動設備、平板電腦,同時也適用于網絡上的指示設備,比如鼠標。


          08 無障礙設計

          所有組件都應推行無障礙設計。目標區域的大小是影響可訪問性的因素之一,其他的則是字體大小、顏色和對比度,也有很多工具能檢查組件的設計性能。



          設計師應與開發團隊緊密合作,確保按鈕與屏幕閱讀器協同工作。添加role =“ button”將使一個元素作為按鈕控件出現在屏幕閱讀器上。


          09 手勢應用

          手勢應用,讓用戶可以通過觸摸與應用程序進行交互。使用觸摸來完成任務,不僅提供了觸覺控制還非常節約時間。某些手勢(比如滑動以觸發上下文動作、雙擊或長按來標記喜歡等)每天都被人們廣泛使用,但對于普通用戶而言,它們仍然不太明顯,建議把它們替換給高級用戶執行操作。



          10 按鈕標簽信息易于理解

          按鈕傳達的信息與其外觀一樣重要,錯誤的信息會讓用戶感到困惑,甚至是誤導用戶操作。正確的按鈕標簽會引導用戶完成操作,最好使用動詞,并在按鈕上標記其實際功能。


          就像按鈕在問用戶——“您要(添加到購物籃中)嗎?” 或“您要(確認訂單)嗎?”,避免使用Yes/No或過于通用的標簽,比如Submit。



          11 確定/取消,還是取消/確定?

          兩者都是正確選擇,但設計師可能會花幾個小時來討論哪個更合適。

          -確定按鈕在前,是自然流暢的閱讀順序。Windows把確定按鈕放在了前面;

          -確定按鈕在后,可以幫助改善流程。這種順序形式,幫助用戶再采取行動前,對所有選項評估,有效地幫助人們避免錯誤。蘋果則是把確定按鈕放在最后的;

          任何一種選擇其實都沒有錯,也不會造成什么可用性災難。



          12 避免使用禁用按鈕

          每個人都遇到過這種情況:在屏幕上停留了幾秒或幾分鐘,怎么操作都沒反應,這才發現原來是禁用按鈕使我們無法進行下一步。禁用控件讓組件短暫處于非交互狀態,但如果使用不當,則非常容易讓用戶產生負面情緒。



          我建議盡量避免禁用按鈕,最好始終啟用它,如果用戶未提供某些必需信息,則只需突出顯示空白字段或顯示通知可。


          文章來源:UX辭典(站酷)

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計m.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://m.sdgs6788.com

          存檔

          99精品伊人久久久大香线蕉| 久久青青草原精品国产不卡| 久久久一本精品99久久精品66| 日本欧美久久久久免费播放网| 久久最新精品国产| 无码任你躁久久久久久久| 国内高清久久久久久| 久久不见久久见免费视频7| 精品久久久久久国产三级| 色综合久久久久久久久五月| 久久国产精品国语对白| 日产精品99久久久久久| 亚洲伊人久久成综合人影院| 久久国产精品久久| 蜜臀av性久久久久蜜臀aⅴ麻豆 | 久久久久国产精品| 国内精品久久久久影院薰衣草| 一级做a爰片久久毛片人呢| 亚洲国产精品无码久久久蜜芽| 久久婷婷五月综合色99啪ak| 成人免费网站久久久| 无码AV波多野结衣久久| 国产精品亚洲综合久久| 久久精品亚洲男人的天堂| 久久乐国产精品亚洲综合| 久久精品中文字幕久久| 人妻丰满AV无码久久不卡| 99蜜桃臀久久久欧美精品网站| 亚洲国产成人精品无码久久久久久综合 | 久久精品国产精品亜洲毛片| 日韩精品无码久久久久久| 久久AV高潮AV无码AV| 久久人人添人人爽添人人片牛牛| 7777久久亚洲中文字幕| 国产三级久久久精品麻豆三级| 日产精品久久久一区二区| 国产一区二区三区久久| 嫩草影院久久国产精品| 国产精品美女久久久久AV福利| 久久国产成人午夜AV影院| 久久香蕉国产线看观看猫咪?v|