元件通用樣式
樣式區域主要進行元件的樣式的修改。由於元件的大多樣式相同,本文以矩形爲例進行樣式的說明。其它元件樣式若有特殊設置,將進行單獨說明。
名稱、顯示
名稱
選中元件的名稱,系統默認爲空(友好的命名可以在概要頁面快速查找)。
顯示隱藏
控制元件的顯示與隱藏(眼睛圖標),默認狀態爲顯示。
對齊、排列
對齊
對齊只對兩個及兩個以上元件有效。
左對齊
垂直居中對齊
右對齊
頂部對齊
水平居中對齊
底部對齊。
排列
分佈只對三個及三個以上元件有效。分佈可以將選中元件按照水平(橫向)或垂直(縱向)方向的進行等間距劃分。
- 橫向分佈
- 垂直分佈
位置尺寸
位置設置
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中的陰影只通過座標可以調整顯示方向。
邊距(文字)
顯示文字距離元件的父容器的距離。可以保持字體顯示位置的對應精確調整。
- 其實邊距挺實用的,合理的設置邊距可以方便原型的尺寸對齊,從而做出高保真的原型。