好的設(shè)計要多分享，5款優(yōu)秀在線原型設(shè)計案例
APP類
外賣送餐APP-UberEats
UberEats是繼Uber主應(yīng)用推出后五年來發(fā)布的首個獨立送餐應(yīng)用，在能夠使用UberEats的城市中，Uber每天將與數(shù)家餐廳進(jìn)行合作，向其用戶提供食品，而送餐的任務(wù)還是由Uber的駕駛員來完成，其完成一單服務(wù)通常只需要幾分鐘。就像使用打車服務(wù)一樣，用戶可以通過智能手機(jī)追蹤其所訂食品的送遞進(jìn)度。
這類APP中用的最多的組件就是圖片，可以設(shè)計出圖片輪播、滾動區(qū)等效果來展示豐富的圖片素材。
在這款原型中，我用了面板、內(nèi)容面板以及選項卡等常用組件完成了圖片輪播等交互效果，同時也為頁面跳轉(zhuǎn)的交互增加了動畫，從而讓頁面之間的交互更加流暢，以及更接近真實APP的效果。
??
? ? ? ? ? ? ? ? ? ? ??
2、電影資料庫-IMDb APP
IMDb（Internet Movie Database）隸屬于亞馬遜公司，是一個關(guān)于電影演員、電影、電視節(jié)目、電視明星和電影制作的在線數(shù)據(jù)庫，包括了影片的眾多信息、演員、片長、內(nèi)容介紹、分級、評論等。對于電影的評分目前使用最多的就是IMDb評分。
本例子界面源自IMDb的移動端APP設(shè)計，風(fēng)格簡潔而嚴(yán)謹(jǐn)，兼具資料庫類型產(chǎn)品的理性和電影產(chǎn)業(yè)的時尚感。
? ? ? ? ? ? ? ? ? ? ? ??
本模板在原生APP的設(shè)計上進(jìn)行了一些改動，保證視覺效果的同時，讓整體交互更簡潔。模板復(fù)現(xiàn)了IMDb移動端中隨處可見的水平滾動效果，還加入了視頻播放、下拉菜單、Tab選項卡、評分條、開關(guān)等多種預(yù)置組件。
本例子包含閃屏、主功能、專欄文章、資源集合、影視詳情、視頻播放、評分、評論及設(shè)置等實用界面，可以輕松在創(chuàng)建設(shè)計感和交互性兼具的社區(qū)類型的APP設(shè)計。
? ? ? ? ? ? ? ? ? ? ? ??
小程序類
點餐小程序-書亦燒仙草
書亦燒仙草是一款基于微信生態(tài)的點單小程序，用戶能在小程序中下單支付，繼而到店自取。
? ? ? ? ? ? ? ? ?? ? ? ?
相較于APP，小程序的功能相對簡潔且開發(fā)成本低，通過模版化的設(shè)計可以幫助團(tuán)隊搭建頁面，快速迭代上線。
本次例子共24個頁面，包含了從線框開始到最終的UI設(shè)計，使用了輪播、彈窗等柔和的交互方式，使用的組件包含包括面板、內(nèi)容面板、選項卡等常用組件，展示基本的頁面跳轉(zhuǎn)。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
網(wǎng)頁類
1、智慧校園平臺
這是一款數(shù)字化校園管理平臺的高保真設(shè)計模板。軟件提供一站式數(shù)據(jù)管理服務(wù)，能夠管理老師和學(xué)生基本信息，以及提供一系列管理應(yīng)用。例子中將展示可視化數(shù)據(jù)圖，教師和學(xué)生的信息管理、人員出勤，課程安排、成績查詢等頁面的流程。
??
? ? ? ? ? ? ? ? ? ? ??
模板提供了12個設(shè)計頁面，使用了列表/選項卡/分段控件、面板、內(nèi)容面板等組件，演示了頁面中及頁面間的交互效果。所有元素還可以智能生成標(biāo)注，項目協(xié)作時成員添加的評論，所有成員都可查看與回復(fù)，同時支持@項目成員查看評論。?
? ? ? ? ? ? ? ? ?? ? ? ?
2、游戲視頻平臺-Twitch
Twitch海外著名的面向視頻游戲的實時流媒體視頻平臺，具有非常個性的朋克元素設(shè)計，在年輕群體中擁有相當(dāng)好的口碑。
? ? ? ? ? ? ? ? ? ? ? ??
本次例子共10個頁面，使用最高頻的一些原型功能：彈窗，頂部固定，滾動區(qū)，內(nèi)容切換等。使用的組件包括列表、面板、內(nèi)容面板、選項卡等。
使用該款例子可以學(xué)習(xí)如何在設(shè)計中創(chuàng)建游戲視頻、娛樂直播等類型的網(wǎng)頁原型，同時也可以作為設(shè)計時的靈感來源。
?
?? ? ? ? ? ? ? ? ? ? ??
例子清晰簡潔，沒有使用過于復(fù)雜的原型構(gòu)建技巧，便于新手用戶借鑒和參考。?
