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

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

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

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

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