<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          為什么純文本按鈕會(huì)損害移動(dòng)應(yīng)用的可用性

          共 2638字,需瀏覽 6分鐘

           ·

          2022-07-01 00:22

          點(diǎn)擊 ▲ 三分設(shè) 關(guān)注,和 6 萬(wàn)設(shè)計(jì)師一起學(xué)習(xí)進(jìn)步

          譯客 2019 · 第 13 



          移動(dòng)應(yīng)用按鈕的可用性標(biāo)準(zhǔn),應(yīng)比桌面應(yīng)用按鈕的高。由于屏幕較小且用手指導(dǎo)航,移動(dòng)應(yīng)用上的按鈕必須易于點(diǎn)擊,閱讀和識(shí)別。大多數(shù)實(shí)心按鈕符合這一標(biāo)準(zhǔn),但純文本按鈕很少符合。在您的應(yīng)用程序上使用純文本按鈕之前,以下內(nèi)容是你應(yīng)該知道的。


          純文本按鈕更難點(diǎn)擊

          手指比鼠標(biāo)光標(biāo)大,將手指放在較小的目標(biāo)上感覺(jué)很尷尬。用戶的手指遮擋了按鈕的內(nèi)容,使得他們沒(méi)有視覺(jué)上的提示來(lái)確認(rèn)是否提交了該動(dòng)作。如果純文本按鈕里的文本足夠長(zhǎng),用戶通過(guò)露出手指外的內(nèi)容,會(huì)得到一個(gè)小的視覺(jué)反饋,這會(huì)好一點(diǎn),但仍然不足以使他們確保已經(jīng)擊中了目標(biāo)。
                        
          小尺寸的純文本按鈕強(qiáng)迫用戶精確地移動(dòng)手指以擊中目標(biāo)。但越精確越需要用戶付出更多的努力。他們必須密切注意手指和目標(biāo),以確保他們點(diǎn)中了按鈕所在區(qū)域。
          缺少直邊使得純文本按鈕邊界難以區(qū)分,更難以瞄準(zhǔn)。實(shí)心按鈕不會(huì)出現(xiàn)這樣的問(wèn)題,因?yàn)樗鼈兙哂懈蟮哪繕?biāo)區(qū)域和筆直的邊緣。

           
          所有大寫的純文本按鈕都難以閱讀

          為了解決純文本按鈕的點(diǎn)擊問(wèn)題,一些設(shè)計(jì)師將它們的文本按鈕全部大寫。Google的Material Design系統(tǒng)推廣了這種按鈕風(fēng)格,但也有其缺陷。
          全部大寫確實(shí)為純文本按鈕提供了更直的邊緣和更大的目標(biāo)區(qū)域。但這并沒(méi)有好很多,因?yàn)槟繕?biāo)區(qū)域只是略大,但是大寫樣式卻降低了可讀性。
                 

          所有大寫的純文本按鈕都難以閱讀,尤其是對(duì)于有閱讀障礙的用戶。用戶依靠字母的形狀來(lái)識(shí)別單詞。大寫字母外形上沒(méi)有對(duì)比鮮明的上升和下降,這使單詞更難以閱讀。
                 


          純文本按鈕難以感知

          純文本按鈕和文本之間唯一的區(qū)別是顏色。這種相似性使得純文本按鈕難以識(shí)別,尤其對(duì)于色盲用戶而言。如果沒(méi)有明顯的外圍形狀,用戶更有可能忽略純文本按鈕,并錯(cuò)過(guò)點(diǎn)擊它。
                 


          用什么形式替代純文本按鈕

          許多人在二級(jí)操作里使用純文本按鈕的形式,來(lái)表示此按鈕優(yōu)先級(jí)較低。但有更好的方法可以做到這一點(diǎn),同時(shí)不會(huì)損害移動(dòng)應(yīng)用的可用性。

          輪廓按鈕

          一種方法是在文本周圍設(shè)計(jì)輪廓以制作輪廓按鈕。這使按鈕的邊緣可見(jiàn),為用戶提供更大,更清晰的目標(biāo)。他們的手指可以落在輪廓上或輪廓內(nèi)的任何地方,以提交操作。 
          缺乏背景色可以防止它與按鈕內(nèi)部主要的號(hào)召性用語(yǔ)競(jìng)爭(zhēng)。輕盈但可見(jiàn)的輪廓是理想的,因此它不會(huì)干擾按鈕中的文本。
                     

          淺色陰影按鈕

          純文本按鈕的另一種替代方法是將文本內(nèi)容放在淺色陰影按鈕上。淺色陰影按鈕可區(qū)分按鈕邊框和背景,不會(huì)與主要號(hào)召性用語(yǔ)競(jìng)爭(zhēng)。陰影應(yīng)該幾乎融入背景,但仍然保持足夠的可視對(duì)比度。
                  

          哪種帶來(lái)更好的視覺(jué)呈現(xiàn)
          輪廓按鈕和淺色陰影按鈕都可以作為二級(jí)操作的樣式。但是淺色陰影按鈕的視覺(jué)重量略高,按壓感覺(jué)更好。背景為手指提供了一個(gè)堅(jiān)實(shí)的目標(biāo),而不是一個(gè)單薄的輪廓。

          什么時(shí)候純文字按鈕起作用



          什么時(shí)候純文字按鈕起作用

          以下這些案例展示了純文字按鈕的出現(xiàn)起了作用。不要將它們用于二級(jí)操作,而是將它們用于三級(jí)操作。三級(jí)操作不會(huì)得到那么多的點(diǎn)擊,也不需要多么突出。一級(jí)和二級(jí)操作更重要,因此他們需要更多的視覺(jué)重量。

                        
          另一處純文本按鈕具有意義的地方,是在用戶想采取行動(dòng)需要幫助的情況下。當(dāng)您需要向用戶提供與上下文有關(guān)的信息以幫助他們選擇最佳選項(xiàng)時(shí),請(qǐng)使用純文本按鈕。純文本按鈕可防止用戶將幫助視為號(hào)召性用語(yǔ),因?yàn)榧兾谋镜男问讲粫?huì)與其他按鈕競(jìng)爭(zhēng)。
                  

                 

          不要濫用純文本按鈕


          在界面上的放置純文本按鈕很容易,因?yàn)樗鼈儾恍枰ㄙM(fèi)太多精力去設(shè)計(jì)。但是,這樣做的結(jié)果是讓那些無(wú)法有效閱讀、識(shí)別和選中按鈕的用戶感到受挫。不要放任懶惰,濫用純文本按鈕。您的CTA入口(按鈕)可以包含文字,但它們應(yīng)看起來(lái)始終像個(gè)按鈕,而不是一段話。


          原文標(biāo)題:Why Text Buttons Hurt Mobile Usability
          文章來(lái)源:uxmovement
          原創(chuàng)作者:Anthony
          原文鏈接:https://uxmovement.com/mobile/why-text-buttons-hurt-mobile-usability/
          翻譯作者:桃花果
          授權(quán)獲?。?span style="letter-spacing: 0pt;">張聿彤
          文章審核:王翎旭
          文章編輯:王翎旭
          該譯文并非完整原文,內(nèi)容已做部分調(diào)整。如在閱讀過(guò)程中發(fā)現(xiàn)錯(cuò)誤與疏漏之處,歡迎不吝指出。如需轉(zhuǎn)載,請(qǐng)注明來(lái)自 三分設(shè) 


          熱門文章推薦

          譯客專欄 2022 · 第 10 篇


          共創(chuàng)成長(zhǎng)訓(xùn)練營(yíng)

          三分設(shè)·星火會(huì)員


          我們一起聊設(shè)計(jì)

          三分設(shè)·微信讀者群/城市群

          歡迎添加 ??  星標(biāo),獲取每日好文推薦,每天早上 8 點(diǎn),準(zhǔn)時(shí)充電。加入設(shè)計(jì)微信交流群 三分設(shè)讀者 5 群,期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長(zhǎng), 添加 益達(dá) 微信號(hào)【 Lil_Bug or【 Red-boy2020,備注【 三分設(shè)讀者 】加入讀者群!

          分享設(shè)計(jì)心得,定期直播,零距離連麥,答疑解惑





          點(diǎn)開(kāi)『閱讀原文』,歡迎你的加入星球

          瀏覽 17
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  日韩一区高清 | 北条麻妃99 | 爱草综合 | 做爱视频软件 | 国产精品成人精品久久久 |