給你靈感的23個優秀線框原型圖示例

如何在產品初始階段以最快的方式展現設計思路？我想大多數的UX/UI設計人員都會傾向於快速構建一個線框原型圖。這的確是一個很是明智的選擇。那麼問題來了，設計師如何才能作出一個優秀的線框圖設計呢？設計師能夠在哪裏獲取更多設計靈感？須要使用線框工具呢仍是用筆紙做圖就足夠？

今天，我整理了23個最佳移動端和網頁的線框圖示例，但願能給您帶來靈感。最後還有快速高效的線框圖工具推薦哦。看完你就會知曉以上問題的答案。

 

第一部分：移動APP線框原型圖示例

1.TickTick

類型：任務管理應用程序，工具類

 

TickTick是一個功能強大的任務管理應用程序，該程序具備引人入勝的動畫教程，教程經過添加一個真實的手機界面來引導用戶，從而卻確保該程序與用戶之間可以進行有效的交互，加強用戶體驗。

2.ColorfulClouds

類型：氣象類應用程序

 

ColorfulCloads是一個界面美觀的氣象類應用程序，它能夠準確預測將來的降雨量，空氣污染狀況以及更多的天氣條件。這個應用程序最吸引人的的部分是在其主界面上的平面氣象圖。該例子包含的主要界面有登陸頁面，天氣和污染頁面，天氣頁面，城市頁面，幫助和設置等其餘頁面。

3.Onefootball

Tyoe：體育運動類應用程序

 

A: Onefootball

Onefootball是一個適用於足球迷的應用程序，該示例包含了超過100個國際足球聯賽和比賽的突發新聞，統計數據，比分和實況視頻。在頁面「最喜歡的球隊」的首頁有一個浮動按鈕，能夠輕鬆查看球隊列表，它是經過一個滾動區組件來設置一個列表，而後在滾動區域上方添加按鈕實現的。

4. WeUI

類型：社區應用程序

 

WeUI是一個優秀的社區APP線框圖範例。WeUI的主要功能包含「信息通知和上傳」、「操做成功」以及「表單錯誤」等。該例子裏的全部圖標和組件形狀均可以在Mockplus圖標庫裏免費得到。

5. Qello-Concerts

類型：音樂應用程序

 

Qello Concerts是一個獨特的音樂應用APP線框圖示例。該APP包括了首頁，熱點頁面，頂尖音樂會推薦頁面，新歌發佈頁面，瀏覽頁面等主要界面。該例子經過使用彈出面板，滑動抽屜和其餘封裝好的組件，經過鼠標拖拽能夠快速完成交互。

6.Recipes

類型：食物APP

 

Recipes是一個專爲您的精緻生活打造的應用程序，在該程序裏，你能夠快速找到你須要的食譜。首頁的高品質的食物圖片很是吸引人，讓你垂涎三尺，這隻需使用圖片組件便可完成。該應用程序中的滑動菜單，是設計師使用Mockplus中的抽屜組件來實現的。此外，自動圖像填充功能能夠幫助您快速製做出一個精美的線框原型圖。

7.Way of Life

類型：管理類應用程序

 

如其名字所示，Way of Life是一個生活管理類應用程序，能夠幫助您記錄和管理你的生活。對於不善於時間管理的人來講，這樣的應用程序十分重要。在這個例子中，使用了時間選擇器來設置鬧鐘，並使用一些滾動數字來設置時間的小時和分鐘。在Mockplus中，要想製做這樣一個時間選擇器，你須要使用滾動區組件和文本組件，同時在滾動區中設置透明背景，把數字放在一個特定的組件裏以確保有序排列。

8.Swipes

類型：效率工具類APP

 

Awipes是一個效率工具應用程序，它能夠幫助你記錄事件，提升工做效率。該例子主要由登陸/註冊頁面和其餘重要頁面組成。一般咱們在登陸/註冊頁面會遇到這種狀況：輸入密碼，登陸按鈕會改變顏色並變成可點擊的。在Mockplus中，您能夠經過顏色變化交互來實現，並設置觸發條件爲「點擊時」。

9.South Devon Accounting

類型：服務類應用程序

 

這是一個提供會計和商業諮詢服務的應用程序。佈局清晰簡潔，主菜單由圖標和字符組成。在Mockplus中，只需使用帶圖標按鈕組件便可完成，它能夠同時編輯圖標和文本。

10.Encode

類型：教育應用程序

 

Encode是一個用於學習編程的教育應用程序。這個應用程序的顏色是系統預設的，佈局簡單明瞭。首頁包含了大量的列表，可使用Mockplus中的Repeater組件快速製做。此外，該頁面是一個很長的頁面，用戶須要滾動屏幕來查看更多的信息，這能夠經過兩種方式實現：一是Mockplus頁面上的小紅色滑塊，二是滾動區組件。

11.Weather App

類型：天氣APP

 

Weather App是設計師Matt Sclarandis製做的。他是經過使用Adobe Illustrator和Photoshop完成了這個初始線框圖設計，但該程序的實際運行應用程序是在java中編寫的。Weather App是一個用於桌面端和iPhone的天氣應用程序的線框圖設計集合。

12.Mobile Wireframe Kit

類型：綜合類手機運用程序

 

該線框圖示例有90多個手機屏幕界面和數百個元素。該移動線框圖示例是屬於綜合類的，適用於各種型的APP運用程序，能夠幫助您智能地生成各種線框圖模型。它還提供流程圖模板，很是適合用戶體驗交流或演示文稿。

13.User Profile Concept

類型：用戶主頁運用程序

 

這個線框圖例子是由一個很是有才華的設計師Tomasz Sochacki製做的。在其Behance頁面上，您還能夠找到該項目的視覺設計圖，所選版本圖和最終版本效果圖。

第二部分：網站線框原型圖示例

1.Global Sources

類型：電子商務

 

該例子是一個典型的電子商務網站線框圖。它包含了幾個主要界面：主頁，類別頁面，登陸頁面和消息頁面等。每種商品均可以在其頁面的中心區域展現詳盡信息，而且保證界面有序排列。

2.So Stereo

類型：音樂

 

該例子是一個簡單卻有趣的音樂類線框圖例子。其主要頁面包含主頁，搜索，發現，常見問題，隱私政策，服務條款等。最貼心和吸引人的部分是你能夠提交你喜歡的音樂，只需點擊主頁的「提交音樂」按鈕便可。

3.EdX

類型：教育

 

Edx是一個快速製做的教育類線框圖例子。能夠看出它只是最基本的框架和元素組合而成。主頁包括創業、課程、計劃、學校、合做夥伴以及關於咱們等頁面。該例子適用於任何類型的教育機構或在線課程。

4.StyleXstyle

類型：時尚

 

StyleXstyle是一個很是時尚的線框原型圖例子。它有基本的頁面，如細節，登陸，慈善拍賣，我的資料等。每一個頁面都精心設計，每一個元素都有序放置。用戶能夠經過導航輕鬆找到他們想要的東西。

5.Vale

類型：企業

 

Vale是一個用於企業的線框原型圖案例。在設計網頁線框原型圖時，常常會用到鼠標懸停交互。在Mockplus中，您可使用組件的狀態交互功能輕鬆實現。你須要作的惟一事情就是點擊右側屬性面板的顏色，邊界，文本等等屬性旁的小閃電圖標，就能夠很輕鬆地設置光標經過或鼠標移動時的交互效果。

6.Fedena

類型：管理軟件

 

Fedena是一個一體化的學院管理軟件和管理系統，其具備以下特色：時間表，出勤率，家長和師生交流等等。主要頁面包含註冊，登陸，論壇，下載，聯繫等。

7.The Value Engineers

類型：官方網站

 

該例子是一個戰略品牌顧問網站，它的突出特點在於其在品牌，戰略和創新方面擁有必定的專業知識和洞察力。此線框圖示例的主要頁面包括主頁，關於咱們，與咱們合做的人員，聯繫人，詳細信息等界面。

8. Caza

類型：房產

 

這個線框圖例子是由迪拜的設計師Waseem Arshad設計的。他認爲即將到來的房產類網站應該具備乾淨的界面，直觀的信息展現和響應式設計。該線框圖例子比較詳細，清楚地解釋了工做流程。

9. 3M Innovation Website

類型：創新類線框圖案例

 

此網站原型圖例子是一個附加到3M.com的線框圖整合，而且是可響應式的設計。該線框圖呈現了全球物理創新中心的數字家園，並重點介紹了容許3M創新推進人類發展和潛力發掘的新技術。

10.Wireframe for website

類型：通用型

 

該線框圖示例由設計師Sanjay Patel製做。這是一個通用的網站類線框圖例子，具備比較普遍的用途。佈局至關乾淨簡單。但缺少必定的創新。

第三部分：快速簡潔的線框圖設計工具推薦

看了這麼多優秀的線框圖設計例子，你是否是也很想本身去實踐一下呢？如何快速作出一個優質的屏幕線框圖呢？首先，你須要學會使用線框圖設計工具，它能夠幫助您快速記錄靈感。鑑於以上的優秀案例可能是使用Mockplus製做的，這裏我首先要推薦的就是國內最優秀的線框/原型設計工具Mockplus。

Mockplus致力於快速構建和迭代原型，爲設計師提供簡潔高效的設計方式，能在最短期裏創造出最優的設計成果。看看它是如何實現快速設計的：

第一，Mockplus擁有200多個高度封裝的交互組件，3000個矢量圖標，以及大量可供直接使用的模板、例子項目以及模板頁面，而且支持在Sketch中直接導出MP文件，爲快速設計提供了有效支持。

第二，Mockplus仍是快速交互的不二選擇。只需使用封裝可見的交互組件，用鼠標進行拖拽便可完成交互，不須要任何一行代碼。Mockplus目前支持3種交互方式：頁面交互，組件交互和屬性交互。交互命令還可一鍵自動還原，貼切而周到。

第三，Mockplus擁有8種快速測試和演示方式，支持手機端、瀏覽器及桌面端的原型測試。在線預覽和離線演示均可輕鬆實現，不受終端和網絡限制。

最後，Mockplus團隊推出了一系列別出心裁的設計，例如Microsoft Office風格的可視化格式刷，可快速進行批量複製，簡單直觀。3.2版本增長了格子功能，可輕鬆複製頁面佈局，而且可自定義屬性，很是人性化。Mockplus還支持腦圖設計模式，能快速完成項目的全部頁面構架，而後一件轉化爲原型項目。目前，Mockplus企業版已在準備中，相信不久就會和各位見面，敬請期待哦。

但願以上的案例能對您有所幫助。尚未使用過Mockplus的朋友們，能夠趕快行動起來了，Mockplus不管是設計線框圖，仍是作原型圖，仍是添加交互，均可以一步到位，讓您事半功倍。以上的例子文件以及頁面圖片等均可以在Mockplus官網免費下載哦，歡迎嘗試，毫不後悔。