中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：本文作者將通過ToolBar這個在移動端產(chǎn)品較為常見的組件，教大家如何快速高效的創(chuàng)建一個規(guī)范，且便于維護管理的可復(fù)用組件。

下圖對組件的標(biāo)注，只是為了方便講解這個案例，實際的制作并不需要按照該標(biāo)準(zhǔn)進行。

為了保持頁面的一致性，這里選擇用黑色的矩形代替系統(tǒng)的圖片組件；在不強調(diào)繪制高保真原型時，使用矩形代替圖片會讓原型的制作更加的靈活。

一、ToolBar組件標(biāo)準(zhǔn)化制作流程

如果按照常規(guī)的方式去繪制一個具有一定規(guī)范的原型（如上圖所示），是一件非常困難的事情，即便你是一個使用Axure非常熟練的人。

由于組件與組件之間的約束關(guān)系會隨著組件數(shù)量的增多而變得復(fù)雜，從而使得組件的拖拽，或是對齊、居中等操作變的繁瑣；雖然我們可以通過組件的組合來減少這種約束關(guān)系，但并不能從根本上解決效率底下的問題，我想這應(yīng)該是很多產(chǎn)品經(jīng)理不愿去設(shè)計規(guī)范產(chǎn)品原型的原因之一。

那么我們?nèi)绻凑障旅孢@種方法進行組件的設(shè)計會怎樣？

從上面的操作可以看出，我們減少了按鈕與按鈕之間、按鈕與ToolBar背景占位矩形之間的約束，從而讓組件的排版變得簡單；通過對按鈕單元組件的復(fù)制、粘貼、拖拽，配合智能參考線，組件吸附等功能的輔助，便能夠快速的創(chuàng)建一個具有規(guī)范的靜態(tài)ToolBar組件。

在產(chǎn)品原型的設(shè)計當(dāng)中，組件樣式的設(shè)置相對其位置的擺放而言，比較簡單而且可控，合理的使用會極大的提升你的繪制效率。

Axure支持四則運算，所以在一些涉及到數(shù)字的地方，我們可以通過直接輸入計算邏輯來達到我們的目的；比如設(shè)置【文本標(biāo)簽】寬度時，我們直接入數(shù)375/4，也就是ToolBar的寬度/按鈕個數(shù)，即可得到文本的寬度值。

對于組件相對位置的調(diào)整，除了常規(guī)的做法以外，我們還可以通過下面的步驟進行：

對于ToolBar這個組件來講，我們知道它有兩種狀態(tài)：選中和未選中。

常規(guī)方式下我們會對圖標(biāo)和文本的色值進行分別設(shè)置，但是當(dāng)組件的數(shù)量變多時，這種調(diào)整就會變得比較繁瑣，尤其是我們對組件進行組合操作之后；可如果我們通過調(diào)整組件的透明度發(fā)現(xiàn)一樣能夠達到目的，而且這個過程相對簡單，更容易操作。

到這里我們不難看出，繪制一個具有一定規(guī)范的原型（組件），其實并不復(fù)雜，但前提是我們找對了方法。

接下來，我們通過產(chǎn)品迭代的思路，對ToolBar這個組件進行一定的優(yōu)化，使其具有復(fù)用的可能；而這才是提升原型繪制效率的根本，我們要善于從Axure的學(xué)習(xí)、使用中創(chuàng)建屬于自己的組件庫。

二、ToolBar組件的優(yōu)化

ToolBar組件中的按鈕個數(shù)決定了頁面調(diào)用的次數(shù)，當(dāng)組件位于不同的頁面中時，如果組件發(fā)生了變化，那么修改起來會變得非常麻煩，反倒不如重新設(shè)計；所以我們需要對ToolBar組件進行調(diào)整，讓跨頁面修改變得簡單。

母版能夠很好的解決跨頁面修改的問題，但也會帶來一些新的問題：母版中組件的結(jié)構(gòu)及樣式一旦設(shè)定，所調(diào)用的頁面會與其保持一致，采用這種方式會導(dǎo)致ToolBar的選中未選中的樣式無法設(shè)置。

通過樣式交互以及添加對應(yīng)的交互事件，能夠幫助我們解決這個問題。

雖然這樣設(shè)置能夠解決ToolBar按鈕選中未選中樣式的問題，而且制作的過程也并不是很復(fù)雜，但使用起來還是比較麻煩，因為我們需要在調(diào)用ToolBar母版的每個頁面都做按鈕的選中操作；此外，為了能夠很準(zhǔn)確的選中目標(biāo)按鈕，可能還需要對按鈕進行命名，所以我們還需要進一步的完善該方案。

在原型頁面的命名中，一般來講會與ToolBar上的按鈕文字保持一致，所以我們可以通過這個特點設(shè)定判斷的條件：當(dāng)按鈕的文本與頁面名稱一致時，選中對應(yīng)的【文本按鈕】和【圖標(biāo)】（事件添加在文本按鈕上），當(dāng)該組件加載后會根據(jù)判斷結(jié)果進行按鈕的選中操作，并不需要人為再手動操作，是不是很方便。

這樣，我們設(shè)計的ToolBar組件在跨頁面修改方面變的更加容易，同時使用也變得簡單了起來。

三、ToolBar組件的進一步優(yōu)化

通過母版，我們解決了ToolBar跨頁面修改的問題，但是對于母版內(nèi)組件的修改卻并沒有改善，比如我們要將4個按鈕修改成3個或5個；雖然說重新做一個也不難，但如果能在現(xiàn)有的基礎(chǔ)上進行修改，那豈不是更為方便。

從結(jié)構(gòu)上看，ToolBar組件是一個標(biāo)準(zhǔn)按鈕單元 * N的結(jié)構(gòu)，對于這類結(jié)構(gòu)使用中繼器則是最好的選擇，將設(shè)計好的標(biāo)準(zhǔn)按鈕單元替換中繼器中默認的組件，并按下面的流程操作就可以創(chuàng)建出標(biāo)準(zhǔn)的ToolBar組件。

當(dāng)我們需要將4個按鈕的ToolBar調(diào)整成為5個時，只需要對中繼器里的組件進行調(diào)整，同時修改對應(yīng)的數(shù)據(jù)，便可很快的實現(xiàn)ToolBar組件整體的調(diào)整。

通過本文，我們完成了一個規(guī)范原型組件從0到1的設(shè)計，從1到N的優(yōu)化，最終的產(chǎn)出是一個可復(fù)用，便于修改的標(biāo)準(zhǔn)化的ToolBar組件。

寫在結(jié)尾的話：如果在學(xué)習(xí)軟件、繪制原型的過程中，把產(chǎn)出的作品當(dāng)作是一個產(chǎn)品去對待，那么收獲的產(chǎn)品思維是不是會更加的實用？

作者：GrowingPM；公眾號：GrowingPM

本文由 @曹蜀黍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。