1. 程式人生 > >怎樣使用原型設計中的組件樣式功能

怎樣使用原型設計中的組件樣式功能

“樣式”是一個集中管理你整個項目的頁面和部件的外觀和感受的解決方案。可以把它理解為微軟Office Word中的樣式,或修飾HTML的CSS樣式。

當更新項目的視覺設計時,使用樣式可以節省你很多時間。他們還可以幫助標準化或統一化多個團隊成員對項目文檔的編輯風格。一致的風格也可以幫助定義和加強你的品牌的外觀和感受,增加線框圖和原型的專業性。

何時會使用到樣式呢?這幾種情況下樣式可以派上用場。

?大型項目:當你有一個大項目並且可交付物需要有一致的外觀和感受時。

?多人協作:當你和團隊其他成員協作,並需要保持每個人的編輯風格保持一致的時候。

?長期項目:當你計劃在整個項目周期長期維護和更新你的文檔時,樣式可以幫你節省很多時間。

也有一些時候你不需要考慮使用樣式,比如當你在做一個快速的原型時,你知道這個原型的壽命不長。但對於要使用一段時間的項目文檔,最好盡早使用樣式。你會很快知道這麽做的好處,並且不需要在項目變得龐大時再去費力更新裏面的內容。

這樣看來,可以說樣式是很重要的功能,能大大地幫助我們提高原型制作的效率。作為當今兩大網紅原型工具,Axure和Mockplus都支持樣式功能。那麽下面就來講講Axure和Mockplus組件樣式功能上的具體用法:

Axure

在應用界面左上方點擊“project”(項目),在下拉菜單中選擇“widget style editor”(元件樣式編輯器),即可彈出樣式編輯器。

或者在界面右側“Inspector”(監視器)下“STYLE”(樣式)處點擊“Manage Widget Styles”(管理原件樣式),即可彈出樣式編輯器。

在樣式編輯器上端可以"add"(添加樣式)、“duplicate”(復制樣式)、“delete”(刪除樣式)、“move widget up/down”(上下移動樣式)。左側為樣式清單,右側為選中的樣式的屬性,在右側即可編輯樣式。這樣能清楚地以文字形式展現樣式庫、羅列樣式,易於管理;但是看不到樣式具體的樣子,改起屬性來比較抽象。

樣式的屬性顯示在界面上端第三欄和界面右側“Inspector”(監視器)下“STYLE”(樣式)處。

Mockplus

Mockplus中樣式功能展示在應用界面的右上方。

保存樣式:選中組件,設置好該組件的外觀後,點擊圖中的加號,即可把組件當前的外觀屬性保存起來。

應用樣式:應用時,選中某個類型的組件後,右側即會加載該類型組件的樣式,點擊對應的樣式,即可把該樣式設置到選中的組件上;

還可以同時選中多個同類型的組件進行樣式設置。但部分簡單的組件是不支持樣式的,如靜態分類下的組件。

刪除樣式:刪除時,只需要把鼠標移動到該樣式上,就會顯示一個紅色的刪除按鈕,點擊即可刪除;需要註意的是:只能刪除自己添加的樣式。

添加樣式庫:需要輸入樣式庫名稱及描述;名稱會顯示到下拉框的位置;描述用於對庫進行一個簡短說明,在管理樣式庫的時候可以看到。

管理樣式庫:名稱前的圓點表示庫的同步狀態;右側按鈕,分別表示:編輯樣式庫信息、同步該樣式庫、分享樣式庫、刪除樣式庫;列表各項其它信息為:作者、分享人數、備註。

分享樣式庫:可以添加或刪除分享成員,成員來源為企業內部添加的成員賬號。企業版的成員用戶還可以編輯共享的組件樣式。

怎樣使用原型設計中的組件樣式功能