Axure教程:根據文字內容自動調整按鈕大小!

3 評論 4744 瀏覽 7 收藏 3 分鐘

在用Axure做原型時,經常要對Button的長度和寬度做調整,我們通常會使用鼠標拖動的方式來調整,可是當按鈕文字長度不一樣,經常的拖動會非常繁雜,有沒有提高效率的方法呢?

效果圖

我們先來看一下效果圖~(按鈕的使用主要是在PC端,做后臺原型時使用較為頻繁)

Axure小技巧 | 根據文字內容自動調整按鈕大??!

制作方法

首先我們選擇一個你需要的使用的元件。一般來說會用下面兩個帶邊框的元件,顏色可以根據情況進行修改。

Axure小技巧 | 根據文字內容自動調整按鈕大??!

其次我們需要對元件進行邊距和邊角等做處理,這一步是對按鈕的美觀做處理。

在這里我對選中這個元件并對這個元件設置Padding(所有內邊距):

  • L為left(左邊距,即文字與左邊框的距離)
  • T為top(頂邊距,即文字與上邊框的距離)
  • R為right(右邊距,即文字與右邊框的距離)
  • B為bottom(底邊距,即文字與下邊框的距離)

除此之外還可以設置圓角、字距、字體大小等等,在此不細說。

Axure小技巧 | 根據文字內容自動調整按鈕大小!

最后我們對設置好美觀的元件設置根據內容自動調整

選中元件,點擊下方圖中所示的兩個按鈕,點擊左側橫狀的按鈕可以自動調整寬度,點擊右側豎狀的按鈕可以自動調整高度。

小tips:當你手動拉伸元件大小之后,自動調整大小的功能會失效哦,如果需要自動調整的話需要重新再進行點擊哦~

Axure小技巧 | 根據文字內容自動調整按鈕大?。? /></p>
<p>這樣通過復制進行使用或者保存到元件庫中就可以很方便的使用了喲!你學會了嗎?</p>
<p> </p>
<p>作者:小樹懶,正在努力提升自己的小辣雞,公眾號:瘋子家的樹懶</p>
<p>本文由 @小樹懶 原創發布于人人都是產品經理。未經許可,禁止轉載</p>
<p>題圖來自Unsplash,基于CC0協議</p>
                        </div>
                        <div   id=

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 一直還不知道有這個功能,這個好

    來自湖北 回復
    1. 真的很方便哈哈

      來自廣東 回復
  2. 哈,看完還是不太會?你可能需要從Axure基礎開始學

    這里推薦你加Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:原型禮包

    :mrgreen: 領取適合產品新人的原型設計大禮包哦,cc還會不定期分享Axure免費視頻課程呢!

    來自廣東 回復