<div id="jd3wh"></div>
        <em id="jd3wh"></em><dl id="jd3wh"></dl>

        <div id="jd3wh"></div>

        • 思緣論壇首頁
        • 思緣圖庫
        • PS教程
        • 論壇搜索
        • 下載記錄
        • 每日簽到
        • 設計軟件,PS下載
        • VIP素材區預覽
        • VIP素材區下載
        • 緣分幣充值
        發新話題
        打印

        [其他] 按鈕設計的七大原則

        按鈕設計的七大原則

        注:按鈕是交互設計中必備的元素,它在用戶和系統的交互中承擔著非常重要的作用。在本文中,我將分別介紹創建有效按鈕必須要知道的七項基本原則。


        一、按鈕就是按鈕當涉及到與用戶界面交互時,用戶需要立即知道什么是“可點擊的”,什么不是。設計中的每一個項目都需要用戶進行解碼,一般來說,用戶解碼需要的時間越多,可用性就越差。
        但是用戶如何理解某個元素是否具有交互性呢?他們靠以前的經驗和視覺符號來判斷界面中元素的含義,這就是為何創建按鈕時必須使用恰當的視覺元素(比如尺寸、形狀、顏色、陰影等)。視覺符號具有重要的信息價值——有助于在界面中創建可視性。
        不幸的是,在許多界面中,交互性的符號很弱,大大地減少了可發現性。如果交互不夠清晰,用戶連哪些是可以點擊的,哪些是不行的都弄不清楚的話,設計做的再酷也沒什么意義了。
        對于移動端的用戶來說,這個問題就更嚴重了。在嘗試了解單個元素是否具有交互性時,PC端用戶可以將光標移到元素上,并檢查游標是否改變了狀態。然而移動端用戶就沒這種機會了,他們只能點擊,除此之外沒有別的方法可以檢測了。
        不要以為對用戶來說,界面中的東西都是顯而易見的。
        在許多情況下,設計人員故意不將按鈕標識為交互元素,因為他們認為交互元素對用戶來說是顯而易見的。在設計界面時,您應該始終牢記:使用熟悉的設計創建按鈕,用戶理解交互元素的能力是遠不及你的,因為作為設計師,你當然知道你的設計有什么用。
        下面給幾個絕大多數用戶都會熟悉的按鈕:
        • 帶有正方形邊框的填充按鈕
        • 充滿圓角的按鈕
        • 充滿了陰影的按鈕
        • .幽靈按鈕


        在以上的例子中,“充滿陰影的按鈕”對用戶來說是最清晰的,用戶一看到這個按鈕的維度就知道這是可以點擊的。
        不要忘記留白!
        按鈕本身的視覺固然重要,其周圍的空白部分也很關鍵。以下面的“幽靈按鈕”為例,有些用戶也許會把它當成是信息框。


        二 、把按鈕放在用戶想要的地方按鈕應該放在用戶容易發現的地方,不要讓用戶滿世界的找按鈕。如果用戶找不到按鈕,他們就不會知道這個按鈕的存在。盡可能使用傳統的布局和標準的UI模式。
        傳統的按鈕布局提高了可發現性;采用標準的布局,用戶可以很容易地理解每個元素的目的——即使它是一個沒有強指針的按鈕。將標準布局與干凈的視覺設計和充足的空白相結合,將使布局更容易被理解。
        不要和用戶玩按鈕游戲,測試設計的可發現性,當用戶第一次來到包含一些可操作行為的頁面時,他們應該很容易就找到相應的按鈕才對。
        三、標注按鈕的功能帶有通用或誤導性標簽的按鈕可能會給用戶帶來巨大的挫敗感,編寫按鈕標簽時要清楚地解釋每個按鈕的功能。理想情況下,按鈕的標簽應該清楚地描述它的作用。
        你得讓用戶清楚的知道點了某個按鈕之后會有什么反應。來看個簡單的例子,假設用戶不小心點了“刪除”按鈕,就會看到以下消息:


        在這個語境里,“OK”和“Cancel”到底代表什么意思?大多數用戶都會問自己:“如果我點了Cancel會發生什么?”
        所以,不要設計一個只由兩個按鈕“OK”和“Cancel”組成的對話框或表單。
        用“Remove”作為標簽就比“OK”清晰多了,用戶看了就知道到底是什么意思。另外,如果“Delete”是一個潛在的危險操作,你可以用紅色來標注一下。



        有人說:旋轉木馬是最殘忍的游戲,彼此追逐卻有永恒的距離……

        TOP

        四、按鈕的大小要適當按鈕大小應該反映該元素在屏幕上的優先級,大按鈕意味著更重要的動作。
        優先級高的按鈕:讓最重要的按鈕看起來就是最重要的,增加它的尺寸(按鈕更大對用戶來說就是更重要),使用對比色來吸引用戶的注意力。


        做按鈕時要考慮移動端用戶的操作友好性,很多APP里的按鈕做的太小了,導致用戶常常誤操作。


        麻省理工學院的觸覺實驗室研究發現:
        手指墊的平均長度在10-14mm之間,指尖的長度為8-10mm,所以10mm x 10mm就是一個很好的最小觸摸目標尺寸。


        五、注意順序按鈕的順序應該反映用戶和系統之間交互的本質。問問你自己,用戶期望在這個屏幕上看到的是什么樣的順序,并據此設計。
        例如,如何在分頁中排列“向前/向后”按鈕? 一般來說,向前移動的按鈕應該在右邊,向后移動的按鈕應該在左邊。
        六、避免使用過多的按鈕很多APP和網站都存在這個問題,提供的選項太多,用戶反倒什么也不會做了。設計APP或者網站的頁面時,多想想你認為用戶最應該進行的操作是什么吧。
        七、提供視覺或聽覺反饋
        當用戶點擊按鈕時,他們希望界面可以給些恰當的反饋。如果沒有任何反饋,用戶會以為系統沒有收到他們的操作,然后就會重復點擊。這種行為常常導致多個不必要的操作。
        為什么會這樣?作為人類,在與某物進行互動之后我們總是期望能得到反饋的。不管是視覺的、聽覺的或者觸覺的,總得讓我們知道互動成功了。


        對于某些操作,比如下載,它不僅需要確認用戶輸入,而且還顯示進程的當前狀態。


        八、結論盡管按鈕是交互設計的一個普通元素,但它值得投入大量的精力,把這個元素做好。記住,按鈕用戶體驗設計最主要的兩個點就是識別和清晰。
        作者:Nick Babich(微信公眾號:集創堂)
        原文鏈接:https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4
        翻譯:熊小熊(微信公眾號:集創堂)

        有人說:旋轉木馬是最殘忍的游戲,彼此追逐卻有永恒的距離……

        TOP

        樓主寫這么多東西也不容易,值得肯定。感謝樓主分享經驗
        另帖子下面的原文鏈接已失效。

        TOP

        發新話題

        關于本站 廣告服務 聯系我們 版權隱私 合作站點 網站地圖 免責申明 管理團隊

        工信部備案:滬ICP備09005587號 蘇州市公安局備案編號:32058302001042

        Powered by Discuz Copyright © 2005-2015 www.3097030.com All rights reserved.

        3d开机试机号今天100期
              <div id="jd3wh"></div>
              <em id="jd3wh"></em><dl id="jd3wh"></dl>

              <div id="jd3wh"></div>

                    <div id="jd3wh"></div>
                    <em id="jd3wh"></em><dl id="jd3wh"></dl>

                    <div id="jd3wh"></div>