AI圖表、無限白板、高效協(xié)同、讓你的想法更有用
旗艦級設計工具
產(chǎn)品經(jīng)理專屬，原型設計更專業(yè)
設計師專屬，UI設計更專業(yè)
交付Sketch/XD/PS/Figma/Axure設計稿
在線原型設計工具，高效易用強大
分享產(chǎn)品設計技巧、案例、資源、工具、新聞，與你一起精進設計。
5 min read
全能設計協(xié)作平臺，產(chǎn)品經(jīng)理用RP，UI設計師用DT
打開微信，點擊底部的“發(fā)現(xiàn)”，使用 “掃一掃” 即可將網(wǎng)頁分享到我的朋友圈。
微信是一款社交類的APP應用——聊天軟件，支持多人群聊。 交互效果主要有滾動內容界面、選擇組件觸發(fā)按鈕狀態(tài)變化、點擊下拉展開列表、點擊彈出面板等交互操作。 先簡單看看動圖： 點擊這里，可以立即在線預覽：微信原型模板 再送上UI Flow大圖： 原型中有消息列表頁面、通訊錄列表界面、發(fā)現(xiàn)列表界面、我的個人資料列表界面、朋友圈界面以及發(fā)朋友圈的文字圖片編輯界面。 以上設計的所有頁面可以在這里下載分...
美麗說是國內白領女性時尚消費品牌，精選上千家優(yōu)質賣家供應商，為用戶提供女裝、女鞋、女包、配飾、美妝等品類的優(yōu)質時尚商品。 此原型模板所用到的組件有搜索框、下拉菜單、輸入框、選項卡等。交互動作有切換選項卡實現(xiàn)內容的切換。 這個原型的主要頁面有：首頁、上衣、褲子、裙子、登錄頁面。 點擊這里，可以立即在線預覽：https://run.mockplus.cn/B4gMX3kbesUI4Ghx...
One List是一款效率類工具，這款App最大的亮點是前面用了6頁動畫，來引導用戶如何操作這款軟件，引導頁采用動畫的形式，比較有趣，且演示清晰易懂。今天我也會給大家分享如何利用原型工具Mockplus來實現(xiàn)引導動畫。 先簡單看看動圖： 點擊這里，可以立即在線預覽：http://run.mockplus.cn/W2qfYImZXg5zEaH4/index.html 引導頁動畫制作步驟如下： 1....
Bear是一款記事工具，App畫風簡約可愛，這只萌熊也是這款App的最大亮點，為了真實還原這款工具，我也是將熊的圖片放進了原型中，其次就是一些常見的交互動效，這次給大家講解一下Mockplus中如何實現(xiàn)側滑菜單效果。 先簡單看看動圖： 點擊這里，可以立即在線預覽：http://run.mockplus.cn/niWz9rg0LCnuyKZk/index.html 三個步驟輕松搞定側滑菜單： 1....
Recipes是一款美食菜譜類App，這次用到的一些交互主要是圖片的左右切換、 滾動的微交互，Mockplus在滾動的支持上比較友好，可以拉長手機外殼，或者使用滾動區(qū)組件，選擇后者可以做滾動頁面上面的懸浮按鈕、懸浮菜單等。下面一起來看看。 先簡單看看動圖： 點擊這里，可以立即在線預覽：http://run.mockplus.cn/337s5n5TY2tvSrL7/index.html 再送上U...
Asana是一款工作任務管理工具，它有手機端和網(wǎng)頁端，這款App在配色上很棒，采用了一些漸變色，這里由于是制作原型，采用的色彩依然是黑白灰，主要體現(xiàn)功能和交互，這類App，功能上，注重任務創(chuàng)建方便快速、任務完成進度跟蹤，任務分類歸檔清晰，對于團隊任務，分工明確，管理便捷等，下面一起來看原型，之后會和大家分享這款軟件的網(wǎng)頁版，可以對比App端和網(wǎng)頁端的一些設計規(guī)范和區(qū)別。 先簡單看看動圖： 點擊這...
Bon App!是一款美食類App，這次也是嘗試做出高保真的原型，最大可能的還原了App的配色和交互。因為是高保真，所以特別注意的就是細節(jié)的設計，圖標、按鈕形狀、輸入框樣式等，在屬性上都做了相應的設置，Mockplus的組件屬性還是相當豐富，但如果涉及到一些個性化的組件，就需要使用一些基本組件的拼湊（比如二維碼掃描）；另外，交互方面也高度還原，彈出、內容切換、滑動這些基本交互都能輕松實現(xiàn)，一起來看...
Pillow,一款健康類App，主要是睡眠管理類型的，這類App比較講究頁面視覺上的舒適安心。功能上，有一個時間選擇器，這個功能采用的是兩個滾動區(qū)組件，分別在組件內設置小時和分鐘數(shù)值，演示時，用戶可以上下滑動來分別選擇時和分的數(shù)值，直觀的表達了交互效果。 先簡單看看動圖： 點擊這里，可以立即在線預覽：http://run.mockplus.cn/YVS4lFUqznF8OLoC/index.ht...
今天帶給大家的，還是一款旅游類App，這類App在設計時的一些注意問題前面已經(jīng)給大家分享過了，這次重點給大家展示的是這一款原型中的啟動頁面，在設計的時候，只用了一個簡單的交互效果：隱藏顯示，觸發(fā)方式是載入時。只需要幾秒鐘，這個啟動頁面的交互效果就輕松搞定。一起來看： 先簡單看看動圖： 點擊這里，可以立即在線預覽：http://run.mockplus.cn/yRQ4R8odtbmEmcbA/in...
Zobies, Run，一款運動類App，幫助監(jiān)督你實行自己的健身計劃。這款App我試著做了板塊的立體視覺效果，由于Mockplus中沒有陰影效果（當然在原型階段這是不必要的），但是為了嘗試讓這款App的特點更突出，我用矩形組件去除部分邊框，只留下底部邊框，再將底部邊框顏色加深，從而實現(xiàn)一個立體效果的選項，其次，分隔條我也使用了兩根不同顏色的線條組合，做出了立體分割的效果。下面，來一起看看效果吧。...
隨著微信的普及，小程序也開始進入了人們的生活，方便快捷的操作，無需安裝的特點得到了人們的喜愛和認同，那么，開發(fā)小程序必不可少的當然是微信的組件規(guī)范，今天就給大家?guī)砹宋⑿懦Ｓ玫囊恍┙M件，使用Mockplus的朋友可以下載后直接使用哦，之后，我也會嘗試小程序的原型，讓大家對小程序更加了解。 先簡單看看動圖： 點擊這里，可以立即在線預覽：http://run.mockplus.cn/Tnr9w9Ty...
Hi~今天做了一套音樂類App Qello Concerts，這類App和美食、旅游類較類似，都是需要后期圖片的填充，因此圖片質量至關重要。在做原型的過程中，基本組件就能滿足要求，但是這次嘗試用Mocplus中的基本組件結合移動交互做了一個異性選項卡，外觀和切換動畫效果還不錯，下面一起來看看吧！ 先簡單看看動圖： 點擊這里，可以立即在線預覽：http://run.mockplus.cn/f9Lf...
Guides是一款旅行類App，這款App本身的顏色并不多，重點是要突出各個旅游景點的圖片，所以這類App講究后期對圖片質量的把控，特別是圖片占比較大的頁面。在原型設計上，主要還是注意交互友好、對景點的介紹全面以及搜索方便等，下面一起看看效果。 先簡單看看動圖： 點擊這里，可以立即在線預覽：http://run.mockplus.cn/HOXcctwauq6oxuWf/index.html 再...
工作時間：9:00-22:00
摹客協(xié)作
摹客RP
摹客DT
摹客超級版