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

如何在產品初始階段以最快的方式展示設計思路？我想大多數的UX/UI設計人員都會傾向于快速構建一個線框原型圖。

如何在產品初始階段以最快的方式展示設計思路？我想大多數的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官網免費下載哦，歡迎嘗試，絕不后悔。

 

來自：http://www.ui.cn/detail/330526.html