Axure教程：根據(jù)文字內(nèi)容自動(dòng)調(diào)整按鈕大??！

3 評(píng)論 4796 瀏覽 7 收藏 3 分鐘

在用Axure做原型時(shí)，經(jīng)常要對(duì)Button的長(zhǎng)度和寬度做調(diào)整，我們通常會(huì)使用鼠標(biāo)拖動(dòng)的方式來(lái)調(diào)整，可是當(dāng)按鈕文字長(zhǎng)度不一樣，經(jīng)常的拖動(dòng)會(huì)非常繁雜，有沒(méi)有提高效率的方法呢？

效果圖

我們先來(lái)看一下效果圖~（按鈕的使用主要是在PC端，做后臺(tái)原型時(shí)使用較為頻繁）

Axure小技巧 | 根據(jù)文字內(nèi)容自動(dòng)調(diào)整按鈕大??！

制作方法

首先我們選擇一個(gè)你需要的使用的元件。一般來(lái)說(shuō)會(huì)用下面兩個(gè)帶邊框的元件，顏色可以根據(jù)情況進(jìn)行修改。

Axure小技巧 | 根據(jù)文字內(nèi)容自動(dòng)調(diào)整按鈕大?。? /></p> <p>其次我們需要<strong>對(duì)元件進(jìn)行邊距和邊角等做處理</strong>，這一步是對(duì)按鈕的美觀做處理。</p> <p>在這里我對(duì)選中這個(gè)元件并對(duì)這個(gè)元件設(shè)置Padding（所有內(nèi)邊距）：</p> <ul> <li>L為left（左邊距，即文字與左邊框的距離）</li> <li>T為top（頂邊距，即文字與上邊框的距離）</li> <li>R為right（右邊距，即文字與右邊框的距離）</li> <li>B為bottom（底邊距，即文字與下邊框的距離）</li> </ul> <p>除此之外還可以設(shè)置圓角、字距、字體大小等等，在此不細(xì)說(shuō)。</p> <p><img data-action=

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
Yasi
后臺(tái)，ToB，公眾號(hào)：瘋子家的樹(shù)懶
3篇作品 27705總閱讀量
09-087504 瀏覽
對(duì)話(huà)多鄰國(guó)CEO｜不撒大錢(qián)、不投硬廣，多鄰國(guó)如何靠“催命式勸學(xué)”拿下近億月活？
02-197432 瀏覽
抖音外賣(mài)，前途光明，困難更多
07-254156 瀏覽
“小藍(lán)鳥(niǎo)”將成為歷史，馬斯克想打造美版微信？
10-264326 瀏覽
你按下的這個(gè)按鈕，背后有哪些設(shè)計(jì)和學(xué)問(wèn)？
02-174341 瀏覽
小紅書(shū)上，商家想把情人節(jié)推成另一個(gè)「雙11」
評(píng)論
評(píng)論請(qǐng)登錄

  1. 一直還不知道有這個(gè)功能，這個(gè)好

    來(lái)自湖北 回復(fù)

    1. 真的很方便哈哈

      來(lái)自廣東 回復(fù)

  2. 哈，看完還是不太會(huì)？你可能需要從Axure基礎(chǔ)開(kāi)始學(xué)

    這里推薦你加Axure實(shí)戰(zhàn)班的助教小可愛(ài)@CC-起點(diǎn)學(xué)院（微信：qidiancc520），回復(fù)關(guān)鍵詞：原型禮包

    :mrgreen: 領(lǐng)取適合產(chǎn)品新人的原型設(shè)計(jì)大禮包哦，cc還會(huì)不定期分享Axure免費(fèi)視頻課程呢！

    來(lái)自廣東 回復(fù)