新入職一家公司，公司目前是屬于一個(gè)組建團(tuán)隊(duì)的過(guò)程中彩倚。缺少產(chǎn)品設(shè)計(jì)筹我，PC端已經(jīng)寫(xiě)了部分，我作為移動(dòng)端第一個(gè)入職的員工帆离，總要從零開(kāi)始蔬蕊。這不在開(kāi)會(huì)的時(shí)候多了一句嘴，移動(dòng)的原型圖就交給了我來(lái)做哥谷。只能硬著頭皮搞了
首先來(lái)看看我們要使用的工具
MockPlus下載地址 是慕課網(wǎng)的吧岸夯，不喜歡了解這些，好用就行们妥。
打開(kāi)新建一個(gè)項(xiàng)目
選擇一個(gè)設(shè)備猜扮，就是你為啥設(shè)計(jì)的原型圖， 我這里選手機(jī)哈监婶。
剛剛創(chuàng)建好的會(huì)幫你創(chuàng)建一個(gè)界面
對(duì)于移動(dòng)手機(jī)端的最常見(jiàn)的樣子就是三級(jí)控制器旅赢，tab, navi, vc。類(lèi)似這個(gè)樣子的
首先我們創(chuàng)建三個(gè)控制器
創(chuàng)建完以后
選中首頁(yè)惑惶，創(chuàng)建我們的tab欄
把這個(gè)拖到首頁(yè)的底部煮盼，像這樣擺好
創(chuàng)建tab的每一個(gè)item,item 由文字和圖標(biāo)組成
單行文字
圖標(biāo)選擇區(qū)域
分別拖一個(gè)圖標(biāo)和文字，雙擊文字可以修改內(nèi)容
然后選中圖標(biāo)和文字带污，點(diǎn)擊左上角的組合圖標(biāo)
選中的操作是按住command分別點(diǎn)擊圖標(biāo)和文字
組合成功之后僵控，可以方便的進(jìn)行一起移動(dòng)和復(fù)制操作
選中組合之后，按住command+d鱼冀，可以方便的額復(fù)制出一份报破，這里要復(fù)制三分
像這樣擺好，然后雙擊圖標(biāo)編輯圖標(biāo)千绪，雙擊文字編輯文字充易。
帶目前為止，我們的tab欄已經(jīng)做好了荸型。??
創(chuàng)建內(nèi)容容器蔽氨，
找到內(nèi)容面板，
將他拖到首頁(yè)中，并吧大小調(diào)整好鹉究。
點(diǎn)擊加層
我們有三個(gè)控制器就是加兩個(gè)
然后就是連線(xiàn)了
MockPlus宇立，連線(xiàn)一般都在控件的右上角
選中一個(gè)控件饲梭，這個(gè)控件的右上角就會(huì)出現(xiàn)一個(gè)點(diǎn)
分別連線(xiàn)
三個(gè)都連好了以后宁昭，會(huì)出現(xiàn)紅色的閃電侄泽，表示這個(gè)控件有被綁定事件的琳状。
到最后一步了牍帚，我們現(xiàn)在可以的來(lái)進(jìn)行頁(yè)面的鏈接的逻杖，還記得一開(kāi)始創(chuàng)建的三個(gè)控制器嗎怔球？
首先改變內(nèi)容面板的當(dāng)前圖層為圖一
然后將右上角的點(diǎn)和左邊的對(duì)應(yīng)控制器鏈接起來(lái)
鏈接完了以后倔矾，可以發(fā)現(xiàn)內(nèi)容面板的三個(gè)圖層的名稱(chēng)改變了
然后我們離開(kāi)首頁(yè)他去，去到三個(gè)子頁(yè)面中分別創(chuàng)建一個(gè)頂部導(dǎo)航條
還是選這個(gè)毙驯，右邊有修改組件樣式的地方，自己可以多嘗試灾测，熟悉了就好了
改好了以后就是這樣的
把另外的兩個(gè)控制器都改了爆价，就算最終完成了。
我們最后選中首頁(yè)媳搪，點(diǎn)擊頂部中間的三角形铭段，運(yùn)行我們的最終效果
發(fā)現(xiàn)tab有邊框很丑，可以去掉秦爆。在上面加一個(gè)線(xiàn)條就好
最后的效果
完成了序愚，要下班了。等限。爸吮。
