我們在做
網(wǎng)頁設(shè)計時工具提示是一種強大的設(shè)計模式,尤其是在移動端的流量越來越多的今天,通過在用戶需要時準(zhǔn)確地提供附加信息來增強設(shè)計體驗。在本文中我們將向您展示如何設(shè)計工具提示以增強您的移動設(shè)計,并解釋移動工具提示在哪些方面最有效。
理想情況下,移動設(shè)計將是無縫的,無需技術(shù)文檔、在線幫助或工具提示。實際上,即使是最好的設(shè)計也可以從補充信息中受益。當(dāng)用戶點擊移動用戶界面 (UI) 中的圖標(biāo)、圖像、超鏈接或其他元素時,工具提示會提供此補充信息。
通過識別“實體填充”和“徑向填充”功能,上面顯示的工具提示使用戶可以輕松找到所需的繪圖功能。這些工具提示出現(xiàn)在適當(dāng)?shù)纳舷挛闹校⒉煌回?。初次使用的用戶可以輕松理解每個圖標(biāo)的含義,而有經(jīng)驗的用戶不太可能發(fā)現(xiàn)這些工具提示會分散注意力。簡而言之,設(shè)計師平衡了新老用戶的需求。這種成功平衡的結(jié)果是一組工具提示,用戶將其視為設(shè)計體驗的自然延伸。雖然關(guān)于對比度檢查器的解釋很清楚,但文本太長并且涵蓋了屏幕上的重要信息。結(jié)果是一個笨拙的工具提示,它解釋得非常混亂。避免麻煩的工具提示需要思考和計劃。
設(shè)計無縫融入整體設(shè)計的工具提示的關(guān)鍵是在設(shè)計過程的早期對其進行規(guī)劃。具體來說,設(shè)計有用的工具提示需要:1適當(dāng)?shù)臅r機,在草圖和早期原型制作階段注意工具提示和相關(guān)的設(shè)計技術(shù)。2正確實施,仔細考慮工具提示上下文、位置和清晰度。
時序是指在設(shè)計過程中何時考慮工具提示。通過參考 Jake Knapp 開發(fā)的廣泛使用的設(shè)計沖刺,我們可以確定設(shè)計過程中的正確階段,以對工具提示等設(shè)計元素做出決策。Knapp 的 sprint 過程包括繪制問題、繪制解決方案、選擇一個解決方案、構(gòu)建原型,然后測試該原型。簡而言之,產(chǎn)生一個想法,構(gòu)建它并測試它。下圖顯示了 Knapp 為期五天的設(shè)計沖刺流程。我已經(jīng)在草圖和原型日中添加了文本,以顯示設(shè)計師和開發(fā)人員何時應(yīng)該開始考慮工具提示。
在考慮工具提示時,草圖是合乎邏輯的起點,因為隨著布局和初步內(nèi)容的形成,潛在的混淆點就會出現(xiàn)。因為最初的草圖通常不包括完整或詳細的內(nèi)容,所以沒有必要在這個階段識別每一個可能的工具提示,甚至包括所有指定的工具提示。相反,重點是識別 UI 的哪些部分,精心設(shè)計的工具提示將幫助用戶完成手頭的任務(wù)或更容易理解內(nèi)容。
移動應(yīng)用程序的日益復(fù)雜和移動設(shè)備上有限的空間對設(shè)計有效的工具提示提出了重大挑戰(zhàn)。設(shè)計師可以通過關(guān)注以下方面來應(yīng)對這一挑戰(zhàn):檢查、檢查和重新檢查每個工具提示的上下文。對您來說可能很明顯的設(shè)計很容易讓初次使用的用戶感到困惑。關(guān)注上下文的原則適用于 UX 和 UI 設(shè)計的所有方面。這對于工具提示尤其重要,因為如果上下文不清楚,它們必要的簡潔性會使用戶感到困惑。工具提示應(yīng)突出且易于查找,但不應(yīng)妨礙屏幕上的重要信息。編輯每個工具提示以保持清晰和簡潔。正如許多編輯告訴他們的作者:“剪,剪,再剪?!?只要您記得為了清晰起見繼續(xù)編輯和濃縮,就可以在早期迭代中編寫更長的工具提示文本。