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