網站設計趨勢:現代可固定目標(以及如何實現) - 素馬網站設計

網站設計趨勢:現代可固定目標(以及如何實現)

By:limo- 2020-10-22 11:26:09

可靠的點擊目標可以成就或毀掉您的手機網站或app,按鈕或鏈接的大小、形狀、位置和整體設計決定了用戶是否成功完成了一個動作。這看起來是一件小事,但卻是在網站設計中最重要的元素之一。


現代可操作的目標容易識別,以預期的方式工作,并鼓勵參與。


今天我們來看看如何設計它們,如何制作有效的號召行動項目,以及關于顏色和字體選擇的考慮。


梯度和顏色




當網站設計中涉及到按鈕和其他可切換目標時,您可能會注意到最大的設計趨勢之一是顏色。漸變和明亮的顏色是標準。


這些吸引注意力的選擇幫助用戶識別一個點擊目標,并將注意力轉移到屏幕上的動作上。


曾經有一段時間,幾乎所有人都在用紅色或橙色來設計按鈕和點擊元素,但現在已經讓位給了其他顏色,尤其是漸變。


藍色、紫色和綠色漸變可切換目標是目前最流行的設計選擇。它們在淺色或深色背景(或模式)上都很好用,這使得它成為用戶可以控制默認配色方案的設計的可行選項。


藍色、紫色和綠色漸變可切換目標是目前最流行的設計選擇。


大小事項




點擊目標的大小不僅僅是美觀,它在可訪問性方面也同樣重要。


對于可應用元素的大小,大多數指導原則建議至少為44px。這大概是成年人手指墊的大小。


這并不是說所有的視覺元素都至少是這個大小,但是您應該確保元素周圍的整個可切換區域超過這個大小。(想想在應用程序內的廣告上關閉一個極小的“x”是多么煩人,通常會導致錯誤地點擊廣告本身。)適當的可執行區域可以解決這個問題。


AAA級成功的可訪問性指南指出,“指針目標”的大小必須至少是44×44的CSS像素,只有少數例外,與鏈接上下文相關。


設計的視覺功能




可切換目標看起來像用戶應該接觸的東西嗎?


雖然這可能是一個超級簡單的概念,但它經常被遺忘。視覺啟示使用眾所周知的和公認的模式和設計元素,使用戶在看到交互元素時更容易知道該如何處理它。


可執行目標的常見視覺啟示包括:


內聯文本鏈接的下劃線或不同顏色


為物體投下陰影或內部陰影


圓角或圓


具有可操作文本的元素,例如“登錄”或“提交”


在沒有任何其他對象的列中分隔位置


創建懸停和焦點狀態




懸停狀態是桌面設備上交互元素的一種廣泛認可的選項。當鼠標移動到可單擊的項目上時,它可能會改變顏色、移動或以與以前不同的方式作出反應。


這些操作對于移動點擊目標并不真正有效,因為沒有鼠標或光標可以在屏幕上移動。但這并不意味著它們不同等重要。


懸停狀態對于設計的桌面版本很重要。就移動設備而言,這種微交互演變成一種活動狀態,顯示按鈕或點擊元素是否/何時處于活動狀態或以觸覺方式“按下”。


當用戶通過鍵盤或屏幕閱讀器導航到點擊目標時,它進一步將焦點狀態作為一種可訪問工具。焦點狀態將顯示當前選中的目標,比如突出顯示窗體中的活動框,或者對設計中的某些元素進行關閉/打開切換(比如打開鍵盤)。


填充是充分的


除非您在設計一個暗模式,否則您可能希望確保用戶點擊的是目標,而不是附近的對象。在每個可執行元素周圍充分填充可以解決這個潛在問題。


除了使tap元素至少為44px之外,還要在整個tap區域中包含至少8px的空間。更好的做法是在其周圍使用相當于tap元素大小一半的填充。這有助于防止意外敲擊。


文本是可讀的和可操作的




可切換元素設計中的文本為動作和交互提供了上下文。


在文本指令的外觀方面,有兩種趨勢。


按鈕和點擊元素使用標題大小寫


字體很簡單,一般或中等風格


在編寫UI副本時也有一些考慮事項。


文本是直接可操作的,并告訴用戶接下來會發生什么,即使它比“點擊這里”稍長一些。


但是去掉所有不必要的單詞


避免行話或可愛的語言,直接表達


在整個設計中保持一致并使用相同的術語(用戶是“登錄”還是“登錄”?)


Halo以鏈接為目標


文本鏈接不像其他可應用元素一樣遵循所有相同的規則,但在設計時應該同樣考慮。


首先要考慮的是使用內聯文本鏈接的頻率。這些鏈接在小屏幕上很難點擊,而且鏈接越多,這些鏈接區域越有可能重疊,導致用戶使用錯誤鏈接。


最好的建議是盡量少使用它們,盡可能多使用按鈕樣式的鏈接。


下一個最好的建議是在文本鏈接周圍創建一個擴展暈圈或點擊區域,以使點擊更容易有效。這在菜單中的文本鏈接或頁腳中的鏈接中很常見。(在正文中這樣做沒有什么意義。)


WCAG可訪問性指南對內聯目標提供了更多的指導:


目標可以出現在一條線上的任何位置,并且可以根據可用屏幕的寬度改變位置。由于目標可以出現在行內的任何位置,因此其大小不能大于可用的文本和句子或段落之間的間距,否則目標可能會重疊。因此,包含在一個或多個句子中的指標被排除在指標規模要求之外?!?/p>


點按目標可以(并且應該)具有層次結構




您的設計可能包括幾種類型的可執行目標,每一種都有自己的外觀和感覺。


基于網站或商業目標的按鈕選擇或可切換目標的級別,這種設計層次正變得越來越普遍。


可執行目標的設計層次結構是什么樣的?


首先,確定您需要多少級別。對于大多數項目來說,一個主要的和第二個選項就足夠了,但是有些項目會進入第三級和第四級點擊元素。


為每一個設置一個樣式。從主要設計開始。它可能是一個顏色/漸變按鈕。這是您希望用戶首先點擊的元素。次要的設計應該類似于主按鈕,但包括以下變化之一:幽靈風格,較少的對比顏色,或較小的尺寸。第三層和第四層按鈕也可以使用相同的更改。


在層次結構的頂部的按鈕應該有最大的對比度和最大的大小,并根據需要的使用比例減少。


您是否希望用戶首先看到并與之交互的點擊元素?使用具有清晰視覺層次結構的可切換元素來建立用戶流和意圖。


點擊元素應該有一個尺寸和突出度的設計,用戶可以很明顯地看到它應該被觸摸(注意上面中間的橙色+按鈕)。在幫助預測用戶意圖方面,大小可能是最重要的考慮因素之一。


警告:雖然點擊目標層次結構是件好事,但是太多的選項會讓用戶感到沮喪。這是一種需要檢驗的微妙平衡。


結論


是的,我們還在為拇指設計。無論手機多大(或多?。?,這一點都是正確的??汕袚Q的目標可以是任何東西,從按鈕到控件,再到文本鏈接,用戶可以通過這些共性讓網站或應用程序按照設計的方式運行。


一個好的可執行目標看起來像是應該被觸摸(或點擊)并執行用戶期望的操作的東西。


遺憾的是,設計這些元素往往是設計過程中被遺忘的一部分。在您的項目中不要落入這個陷阱。


?
开心飞鹰