国产第|页草草影院

  • <xmp id="624qc">
    <optgroup id="624qc"></optgroup>
  • 入口UI設計器容易被忽略的按鈕設計

    發布時間:2020-07-21 10:33:00

    按鈕是交互設計的常見元素。,是重要的UI元素之一。

    按鈕是交互設計的常見元素。,是重要的UI元素之一。

    在今天的文章中,我們將向您介紹創建有效按鈕操作以改善用戶體驗的基礎知識。

    用戶如何理解元素是按鈕?答案很簡單:視覺提示可以幫助人們確定點擊率。在可點擊元素上使用適當的視覺符號使其看起來像按鈕是很重要的。

    根據站點或應用程序的樣式,基本上可以確定按鈕的形狀。其中,矩形按鈕被引入數字**,用戶對其非常熟悉。

    當然,你可以更具創意,使用其他形狀(圓形、三角形甚至自定義形狀),但要記住,獨到的想法可能會證明有點冒險。你需要確保人們可以很容易地用不同的形狀識別每個按鈕。

    無論您選擇什么形狀,請確保在整個界面控件中保持一致,以便用戶可以將所有UI元素識別為按鈕。

    為什么一致性如此重要?因為用戶會有意識或無意識地記住細節。例如,將特定元素的形狀與按鈕相關聯。因此,一致性不僅有助于創造漂亮的設計,而且為用戶提供更熟悉的體驗。

    下圖顯示了這一點。在應用程序的一部分(如系統工具欄)中使用三種不同的形狀,不僅會讓用戶感到困惑,而且是一種錯誤的設計實踐。

    這個想法沒有錯,但保持設計的一致性同樣重要。

    陰影是他們正在尋找的UI元素的有價值的線索。陰影將元素與背景分開,使它們易于識別為可單擊或可單擊的元素,因為顯示的對象看起來像是被按下(單擊或單擊)的對象。即使是平的按鈕(幾乎平的,準確的),仍然有微妙的線索。

    如果一個按鈕投射出一個微妙的陰影,用戶通常會理解元素是交互式的。

    避免使用沒有明確含義的用戶界面元素。因此,UI中的每個按鈕都應該有正確的標簽或圖標。

    可操作界面元素(如按鈕)上的標簽應始終綁定到用戶將執行的操作。當用戶理解按鈕的動作時,用戶會感覺更舒服。模糊標記(如“submit”或抽象標記(如下面示例中的標記)不能提供有關操作的足夠信息。

    action按鈕應該確認任務是什么,這樣用戶就知道當他們單擊它時會發生什么。用動作動詞來表示按鈕的功能是很重要的。例如,如果用戶注冊了一個帳戶,將顯示“創建帳戶”按鈕,告訴他們按下該按鈕時會發生什么。這項任務非常明確和具體。這些清晰的標簽可以作為即時幫助,讓用戶有信心選擇正確的操作。

    不要讓用戶尋找按鈕;放置按鈕,以便用戶可以輕松找到或期望看到它們。

    如果要設計應用程序,請在選擇適當的位置和按鈕順序時遵循平臺GUI指南。為什么?因為它可以節省人們遵循用戶期望的一致設計的時間。

    對于基于web的應用程序,您應該考慮哪個布局適合您的用戶。確定這一點的正確方法是通過測試。

    如果您正在設計移動導航,請注意按鈕位置的實踐。本文底部的導航設計黃金法則涵蓋了這個主題。

    按鈕大小和視覺反饋在幫助用戶與之交互方面起著關鍵作用。

    您應該考慮按鈕與頁面上其他元素的關聯程度。同時,你需要確保你設計的按鈕足夠大,可以讓人們互動。

    當單擊是應用程序或站點的主要輸入方法時,您可以依賴mittouchlab研究來選擇適當的按鈕大小。研究發現,手指墊的平均尺寸在10-14mm之間,指尖在8-10mm之間,使得10mm×10mm具有良好的小觸靶尺寸。當鼠標和鍵盤是主要的輸入方法時,可以稍微減少按鈕的測量,以適應密集的用戶界面。

    您應該考慮按鈕元素的大小,以及可單擊元素之間的填充,因為填充有助于分離控件并為用戶界面提供足夠的喘息空間。

    這個要求不是關于按鈕的用戶初始視圖,而是關于與UI元素的交互。通常,按鈕不是單個狀態對象。它具有多個狀態,并為用戶提供視覺反饋,以指示當前狀態應為優先級。

    確保設計強調主要或突出的動作。使用“顏色”和“對比度”可以讓用戶集中精力執行操作,并將按鈕放置在用戶可能注意到的突出顯示中。

    一些重要的按鈕,比如CTA,被設計用來指導用戶采取你想要的行動。要創建一個有效的“流行語”按鈕來吸引用戶的注意力并引導他們單擊,您應該使用與背景相對應的高對比度顏色,并將該按鈕放置在用戶的路徑中。

    如果我們看看Gmail的用戶界面,界面非常簡單,幾乎是單色的,除了發送按鈕。一旦用戶寫下了消息,他們會立即注意到漂亮的藍色按鈕。

    同樣的規則也適用于網站。如果您查看下面的行為示例,首先要注意的是“注冊”流行語按鈕。在這種情況下,顏色和位置比文本更重要。

    您可以使用彈出窗口和對話框中的按鈕來查找另一個吸引用戶注意的示例。在選擇主要動作和次要動作時,視覺區分是幫助人們做出可靠選擇的有用方法:

    與按鈕相關的主要正面動作需要更強的視覺重量。它應該是一個視覺主導的按鈕。

    次要行動(如“取消”或“返回”選項)的視覺權重應該弱,因為減少次要行動的視覺顯著性可以將潛在錯誤的風險降至,并進一步引導人們走向成功。

    為了確保您的按鈕設計適合您的用戶,您需要問幾個問題:

    用戶是否將您的元素標識為按鈕?思考一下設計是如何改善溝通的。使按鈕看起來像一個按鈕(為此使用大小、形狀、陰影和顏色)。

    按鈕的標簽是否提供了一個清晰的消息,當您單擊它時會發生什么情況?命名一個按鈕并解釋它的功能通常比使用一個通用的標簽(如“OK”)要好。

    你的用戶能很容易地找到按鈕嗎?按鈕在頁面上的位置與其形狀、顏色和標簽一樣重要??紤]用戶在頁面中的路徑并放置按鈕,這樣用戶就可以很容易地找到或期望它們。

    如果視圖中有兩個或多個按鈕(例如,一個對話框),帶有主操作的按鈕是否具有強的視覺權重?通過對每個按鈕使用不同的視覺權重來區分兩個選項。



    国产第|页草草影院