如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

0 評論 4314 瀏覽 5 收藏 9 分鐘

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

下圖對組件的標注,只是為了方便講解這個案例,實際的制作并不需要按照該標準進行。

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

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

一、ToolBar組件標準化制作流程

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

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

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

那么我們如果按照下面這種方法進行組件的設計會怎樣?

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

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

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

在產品原型的設計當中,組件樣式的設置相對其位置的擺放而言,比較簡單而且可控,合理的使用會極大的提升你的繪制效率。

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

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

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

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

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

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

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

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

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

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

母版能夠很好的解決跨頁面修改的問題,但也會帶來一些新的問題:母版中組件的結構及樣式一旦設定,所調用的頁面會與其保持一致,采用這種方式會導致ToolBar的選中未選中的樣式無法設置。

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

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

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

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

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

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

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

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

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

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

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

當我們需要將4個按鈕的ToolBar調整成為5個時,只需要對中繼器里的組件進行調整,同時修改對應的數據,便可很快的實現ToolBar組件整體的調整。

如何快速高效創(chuàng)建產品原型組件之APP ToolBar組件

通過本文,我們完成了一個規(guī)范原型組件從0到1的設計,從1到N的優(yōu)化,最終的產出是一個可復用,便于修改的標準化的ToolBar組件。

寫在結尾的話:如果在學習軟件、繪制原型的過程中,把產出的作品當作是一個產品去對待,那么收獲的產品思維是不是會更加的實用?

 

作者:GrowingPM;公眾號:GrowingPM

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!