本期內(nèi)容我們將繼續(xù)講解使用xiaopiu原型工具來實現(xiàn)我們網(wǎng)站、APP、小程序的框架搭建。我們將盡可能的針對小白用戶用簡單的工具來表達(dá)我們內(nèi)心產(chǎn)品的想法。

我們從下圖剋有看到左側(cè)紅框處為我們常用的畫圖工具，右側(cè)為頁面欄和樣式欄。在做原型圖的我們應(yīng)該規(guī)范工具的使用，來保證最終輸出的內(nèi)容具有一定的邏輯性，讓設(shè)計師能夠理解我們的想法。至于怎么規(guī)范使用，我們可以把鼠標(biāo)移到對應(yīng)工具上，也會有對應(yīng)的屬性名顯示，讓我大概知道這個工具是用在什么地方上的。工具用的最多的應(yīng)該當(dāng)屬矩形（快捷鍵R），很多初次使用的操作者可能都是用著這個工具來表達(dá)整體架構(gòu)的設(shè)想，但是我們應(yīng)該要再規(guī)范化點，如果頁面涉及到圖片的展示，我們就應(yīng)該用到圖片工具（快捷鍵P），有圖標(biāo)的展示我就應(yīng)該用圖標(biāo)工具（快捷鍵I），這樣做出來的原型圖就能更易于理解，節(jié)省無意義的溝通成本。另外xiaopiu內(nèi)置了大量的組件和圖標(biāo)，直接使用這些工具能夠更好的幫助我們節(jié)約時間，在原型圖的制作上我們沒必要去想各種UI的內(nèi)容，只要有對應(yīng)符合需求的組件放上去即可，至于如何美觀就等到設(shè)計階段再去考慮，這樣的操作方式能夠讓我們更高效的進(jìn)行產(chǎn)出。我們可以在頭幾次制作的時候僅考慮這些功能的時候，后面做的多了我們就要考慮更細(xì)致的內(nèi)容包括模塊與模塊之間的間隔，模塊顏色深淺對應(yīng)的層級重要性表達(dá)等等，等我們做完這些之后我們就可以初步將此作品稱為低保真原型圖，如果我們本身具備有良好的設(shè)計能力，我們可以進(jìn)一步的把我們所要展示圖片、素材等放上去，xiaopiu支持直接對圖片進(jìn)行拖曳，但免費版的有200MB的空間大小限制，所以我們可以多多考慮重復(fù)利用。
 

既然我們做出學(xué)會做簡單使用工具后，我們應(yīng)該怎么告訴設(shè)計師一些原型圖的想法呢？當(dāng)然如果能夠面對面的溝通講解那是最好的，但是很多時候如果是外包公司的話就會有很多限制，所以我們要使用到工具欄右側(cè)備注工具，當(dāng)我們單擊單個模塊的時候都可以進(jìn)行備注的填寫，這樣我們分享這個案例的時候就能夠讓其他人能夠一目了然了。
 

說到分享xiaopiu也支持多種分享方式，包括公開分享、私密分享、加密分享，能夠針對不同的群體來選擇不同方式來保護(hù)我們的創(chuàng)意和想法。具體的操作可見下圖所示。
 

那么這就是我們小白人員初步使用原型圖工具從開始到最后的整個過程，希望我們能夠通過每一次的操作來不斷提升自己，隨著能力的提升我們甚至可以創(chuàng)建一些簡單的交互效果讓整個頁面更加生動，最后調(diào)皮的說一句如果不想學(xué)的話可以來找我們方維網(wǎng)絡(luò)為您提供全稱的服務(wù)。