【Axure10】樣式區域-元件樣式(常規以矩形爲例)

元件通用樣式

樣式區域主要進行元件的樣式的修改。由於元件的大多樣式相同,本文以矩形爲例進行樣式的說明。其它元件樣式若有特殊設置,將進行單獨說明。

名稱、顯示

名稱

選中元件的名稱,系統默認爲空(友好的命名可以在概要頁面快速查找)。

顯示隱藏

控制元件的顯示與隱藏(眼睛圖標),默認狀態爲顯示。

對齊、排列

對齊

對齊只對兩個及兩個以上元件有效。

  • 左對齊

  • 垂直居中對齊

  • 右對齊

  • 頂部對齊

  • 水平居中對齊

  • 底部對齊。

排列

分佈只對三個及三個以上元件有效。分佈可以將選中元件按照水平(橫向)或垂直(縱向)方向的進行等間距劃分。

  • 橫向分佈
  • 垂直分佈

位置尺寸

位置設置

X:元件左上角的X軸位置。

Y:元件左上角的Y軸位置。

旋轉設置

°(旋轉):元件旋轉的角度(支持負角度的輸入,負角度系統會自動換算)。

W:元件的寬度。

H:元件的高度。

圓角

設置元件的圓角,圓角支持四個角度單獨設置圓角,

  • 半徑:設置元件的半徑大小
  • 可見性:設置矩形四個角那些爲圓角,可以控制圖標的四個頂點設置,選中狀態存在顏色區分。

文字自適應

文字自適應寬度:在元件中存在元件上的文字採用自適應的方式。

文字自適應高度:在元件中存在元件上的文字採用自適應的方式。

  • 文字的寬、高自適應在9中存在此功能,但是狀態是未知狀態,在10中進行了狀態的優化,如果選擇了某方向的自適應,在位置屬性部分對應的方向就是選中狀態。
  • 文字自適應可以防止文字在不同瀏覽器中預覽導致文字換行錯位。可以其配合邊距進行使用,也是常用且實用的一個功能。

元件全局樣式

元件在默認狀態下,都存在對應的默認樣式,在常規情況下,可以在元件的默認樣式上進行對應的修改調整,達到所需的效果樣式。

默認樣式選擇

選擇內置的其它樣式或新建樣式進行選擇。

樣式一鍵同步

針對全局樣式,新增了可以一鍵改變全局的同組件的樣式。可以快速方便的將現有設置的樣式同步至全局(同一樣式參數的)。

是不是有點繞,舉個例子說明下:

創建3個矩形A、B、C

按照順序編輯A的樣式、B的樣式、C的樣式

如果此時點擊B的樣式同步全局,只會同步改變A的樣式,C不會改變。

如果此時點擊C的樣式同步全局,會同步改變A與B的樣式,C不會改變。

管理元件樣式

進行全局所有元件樣式的統一管理,支持樣式的新增等。

透明度

管理當前元件的整體透明度參數。

排版(文字)

主要進行元件中文字樣式設置與排版等(元件中存在文字均可進行設置)。

字體:

可以選擇替換文字的字體格式。

注意:

  • 1、如果原型需要在非本電腦展示,使用特殊的字體沒需要在演示電腦提前安裝,不然瀏覽器會自動更換爲默認字體。
  • 2、注意字體的版權,確認是可以商用的字體(這裏有太多故事...),避免版權糾紛)。

字體屬性:

如果安裝爲系列字體,可以選擇字體的其他樣式屬性進行調整。

字體大小:

調整字體顯示的大小。

注:常規瀏覽器最小兼容字體大小爲12px,爲了防止預覽時字體不一致(小於12px會自動放大),需設置字體大於等於12px。如需設置12px以下哎,且需要正常預覽,可以在瀏覽器中修改設置字體大小屬性。

字體顏色:

調整字體顯示的顏色。

行間距:

當存在換行的字段時,行間距控制上下行的距離。

字體對齊:

左對齊、水平居中對齊、右對齊、上對齊、垂直居中對齊、下對齊。

字體其它屬性設置

字體屬性設置:

加粗、傾斜、下滑線、刪除線。

基線

設置字體是否爲上標、下標、正常。

  • Normal:正常。

  • Superscript:上標(例如:某某的平方)。

  • Subscript:下標(例如:腳註)。

注:通過上下標的設置,可以實現部分公式的表示。

字母大小寫

設置文字中字母的大小寫自動轉換。

  • Normal:正常。

  • uppercase:大寫。

  • Lowercase:小寫。

注:只需進行設置,系統會自動進行字母的大小寫轉換。

字間距:

字體之前的間距。

字體陰影:

給字體添加陰影,可以設置陰影的大小和偏離方位(通過座標控制)。

填充

  • 顏色填充:選中元件進行顏色填充,部分支持漸變色。

  • 漸變色支持線性和徑向。

  • 支持顏色填充單獨透明度設置。

  • 圖片:選中的元件進行圖片的填充。

  • 圖片同時支持填充樣式、位置定位點選擇。

邊框(描邊)

顏色:

描邊的顏色。

線寬:

描邊的寬度。

類型:

可以選擇不同虛線間隔的描邊。

箭頭樣式:

在線段中可以調節樣式。可以設置對應描邊的樣式,例如不同間距的虛線。

可見性:

可以調整描邊的四邊是否顯示。點擊對應的方向,進行設置,選中與未選中有顏色區分。

陰影

  • 外部:在元件的內部添加陰影。

  • 內部:在元件的外部添加陰影。

  • 模糊:將陰影進行模糊處理,數值越大越模糊

  • 擴展:將陰影向外(設置的方向)進行延伸,數值越大,延伸越大。

陰影在原型製作中比較少用,在用到的時候自己可以嘗試多調整下,來達到想要的效果。Axuer中的陰影只通過座標可以調整顯示方向。

邊距(文字)

顯示文字距離元件的父容器的距離。可以保持字體顯示位置的對應精確調整。

  • 其實邊距挺實用的,合理的設置邊距可以方便原型的尺寸對齊,從而做出高保真的原型。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章