給你靈感的23個(gè)優(yōu)秀線框原型圖示例

時(shí)間：2023-09-14 01:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-14 01:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

給你靈感的23個(gè)優(yōu)秀線框原型圖示例：如何在產(chǎn)品初始階段以最快的方式展示設(shè)計(jì)思路？我想大多數(shù)的UX/UI設(shè)計(jì)人員都會(huì)傾向于快速構(gòu)建一個(gè)線框原型圖。這的確是一個(gè)非常明智的選擇。那么問(wèn)題來(lái)了，設(shè)計(jì)師如何才能做出一個(gè)優(yōu)秀的線框圖設(shè)計(jì)呢？設(shè)計(jì)師可以在哪里獲取更多設(shè)計(jì)靈感？需要使用線框工具呢還是用筆紙作圖就足夠？

今天，我整理了23個(gè)最佳移動(dòng)端和網(wǎng)頁(yè)的線框圖示例，希望能給您帶來(lái)靈感。最后還有快速高效的線框圖工具推薦哦?？赐昴憔蜁?huì)知曉以上問(wèn)題的答案。

第一部分：移動(dòng)APP線框原型圖示例

1.TickTick

類型：任務(wù)管理應(yīng)用程序，工具類




TickTick是一個(gè)功能強(qiáng)大的任務(wù)管理應(yīng)用程序，該程序具有引人入勝的動(dòng)畫教程，教程通過(guò)添加一個(gè)真實(shí)的手機(jī)界面來(lái)引導(dǎo)用戶，從而卻確保該程序與用戶之間能夠進(jìn)行有效的交互，增強(qiáng)用戶體驗(yàn)。

2.ColorfulClouds

類型：氣象類應(yīng)用程序




ColorfulCloads是一個(gè)界面美觀的氣象類應(yīng)用程序，它可以準(zhǔn)確預(yù)測(cè)未來(lái)的降雨量，空氣污染情況以及更多的天氣條件。這個(gè)應(yīng)用程序最吸引人的的部分是在其主界面上的平面氣象圖。該例子包含的主要界面有登錄頁(yè)面，天氣和污染頁(yè)面，天氣頁(yè)面，城市頁(yè)面，幫助和設(shè)置等其他頁(yè)面。


3.Onefootball

Tyoe：體育運(yùn)動(dòng)類應(yīng)用程序




A: Onefootball


Onefootball是一個(gè)適用于足球迷的應(yīng)用程序，該示例包含了超過(guò)100個(gè)國(guó)際足球聯(lián)賽和比賽的突發(fā)新聞，統(tǒng)計(jì)數(shù)據(jù)，比分和實(shí)況視頻。在頁(yè)面“最喜歡的球隊(duì)”的首頁(yè)有一個(gè)浮動(dòng)按鈕，可以輕松查看球隊(duì)列表，它是通過(guò)一個(gè)滾動(dòng)區(qū)組件來(lái)設(shè)置一個(gè)列表，然后在滾動(dòng)區(qū)域上方添加按鈕實(shí)現(xiàn)的。

4. WeUI

類型：社區(qū)應(yīng)用程序




WeUI是一個(gè)優(yōu)秀的社區(qū)APP線框圖范例。WeUI的主要功能包含“信息通知和上傳”、“操作成功”以及“表單錯(cuò)誤”等。該例子里的所有圖標(biāo)和組件形狀都可以在Mockplus圖標(biāo)庫(kù)里免費(fèi)獲得。

5. Qello-Concerts

類型：音樂應(yīng)用程序




Qello Concerts是一個(gè)獨(dú)特的音樂應(yīng)用APP線框圖示例。該APP包括了首頁(yè)，熱點(diǎn)頁(yè)面，頂尖音樂會(huì)推薦頁(yè)面，新歌發(fā)布頁(yè)面，瀏覽頁(yè)面等主要界面。該例子通過(guò)使用彈出面板，滑動(dòng)抽屜和其他封裝好的組件，通過(guò)鼠標(biāo)拖拽可以快速完成交互。

6.Recipes

類型：食物APP




Recipes是一個(gè)專為您的精致生活打造的應(yīng)用程序，在該程序里，你可以快速找到你需要的食譜。首頁(yè)的高品質(zhì)的食物圖片非常吸引人，讓你垂涎三尺，這只需使用圖片組件即可完成。該應(yīng)用程序中的滑動(dòng)菜單，是設(shè)計(jì)師使用Mockplus中的抽屜組件來(lái)實(shí)現(xiàn)的。此外，自動(dòng)圖像填充功能可以幫助您快速制作出一個(gè)精美的線框原型圖。

7.Way of Life

類型：管理類應(yīng)用程序




如其名字所示，Way of Life是一個(gè)生活管理類應(yīng)用程序，可以幫助您記錄和管理你的生活。對(duì)于不善于時(shí)間管理的人來(lái)說(shuō)，這樣的應(yīng)用程序十分重要。在這個(gè)例子中，使用了時(shí)間選擇器來(lái)設(shè)置鬧鐘，并使用一些滾動(dòng)數(shù)字來(lái)設(shè)置時(shí)間的小時(shí)和分鐘。在Mockplus中，要想制作這樣一個(gè)時(shí)間選擇器，你需要使用滾動(dòng)區(qū)組件和文本組件，同時(shí)在滾動(dòng)區(qū)中設(shè)置透明背景，把數(shù)字放在一個(gè)特定的組件里以確保有序排列。

8.Swipes

類型：效率工具類APP




Awipes是一個(gè)效率工具應(yīng)用程序，它可以幫助你記錄事件，提高工作效率。該例子主要由登錄/注冊(cè)頁(yè)面和其他重要頁(yè)面組成。通常我們?cè)诘卿?注冊(cè)頁(yè)面會(huì)遇到這種情況：輸入密碼，登錄按鈕會(huì)改變顏色并變成可點(diǎn)擊的。在Mockplus中，您可以通過(guò)顏色變化交互來(lái)實(shí)現(xiàn)，并設(shè)置觸發(fā)條件為“點(diǎn)擊時(shí)”。

9.South Devon Accounting

類型：服務(wù)類應(yīng)用程序




這是一個(gè)提供會(huì)計(jì)和商業(yè)咨詢服務(wù)的應(yīng)用程序。布局清晰簡(jiǎn)潔，主菜單由圖標(biāo)和字符組成。在Mockplus中，只需使用帶圖標(biāo)按鈕組件即可完成，它可以同時(shí)編輯圖標(biāo)和文本。

10.Encode

類型：教育應(yīng)用程序




Encode是一個(gè)用于學(xué)習(xí)編程的教育應(yīng)用程序。這個(gè)應(yīng)用程序的顏色是系統(tǒng)預(yù)設(shè)的，布局簡(jiǎn)單明了。首頁(yè)包含了大量的列表，可以使用Mockplus中的Repeater組件快速制作。此外，該頁(yè)面是一個(gè)很長(zhǎng)的頁(yè)面，用戶需要滾動(dòng)屏幕來(lái)查看更多的信息，這可以通過(guò)兩種方式實(shí)現(xiàn)：一是Mockplus頁(yè)面上的小紅色滑塊，二是滾動(dòng)區(qū)組件。

11.Weather App

類型：天氣APP




Weather App是設(shè)計(jì)師Matt Sclarandis制作的。他是通過(guò)使用Adobe Illustrator和Photoshop完成了這個(gè)初始線框圖設(shè)計(jì)，但該程序的實(shí)際運(yùn)行應(yīng)用程序是在java中編寫的。Weather App是一個(gè)用于桌面端和iPhone的天氣應(yīng)用程序的線框圖設(shè)計(jì)集合。

12.Mobile Wireframe Kit

類型：綜合類手機(jī)運(yùn)用程序




該線框圖示例有90多個(gè)手機(jī)屏幕界面和數(shù)百個(gè)元素。該移動(dòng)線框圖示例是屬于綜合類的，適用于各類型的APP運(yùn)用程序，可以幫助您智能地生成各類線框圖模型。它還提供流程圖模板，非常適合用戶體驗(yàn)交流或演示文稿。

13.User Profile Concept

類型：用戶主頁(yè)運(yùn)用程序




這個(gè)線框圖例子是由一個(gè)非常有才華的設(shè)計(jì)師Tomasz Sochacki制作的。在其Behance頁(yè)面上，您還可以找到該項(xiàng)目的視覺設(shè)計(jì)圖，所選版本圖和最終版本效果圖。

第二部分：網(wǎng)站線框原型圖示例

1.Global Sources

類型：電子商務(wù)




該例子是一個(gè)典型的電子商務(wù)網(wǎng)站線框圖。它包含了幾個(gè)主要界面：主頁(yè)，類別頁(yè)面，登錄頁(yè)面和消息頁(yè)面等。每種商品都可以在其頁(yè)面的中心區(qū)域展示詳盡信息，并且保證界面有序排列。

2.So Stereo

類型：音樂




該例子是一個(gè)簡(jiǎn)單卻有趣的音樂類線框圖例子。其主要頁(yè)面包含主頁(yè)，搜索，發(fā)現(xiàn)，常見問(wèn)題，隱私政策，服務(wù)條款等。最貼心和吸引人的部分是你可以提交你喜歡的音樂，只需點(diǎn)擊主頁(yè)的“提交音樂”按鈕即可。

3.EdX

類型：教育




Edx是一個(gè)快速制作的教育類線框圖例子?？梢钥闯鏊皇亲罨镜目蚣芎驮亟M合而成。主頁(yè)包括創(chuàng)業(yè)、課程、計(jì)劃、學(xué)校、合作伙伴以及關(guān)于我們等頁(yè)面。該例子適用于任何類型的教育機(jī)構(gòu)或在線課程。

4.StyleXstyle

類型：時(shí)尚




StyleXstyle是一個(gè)非常時(shí)尚的線框原型圖例子。它有基本的頁(yè)面，如細(xì)節(jié)，登錄，慈善拍賣，個(gè)人資料等。每個(gè)頁(yè)面都精心設(shè)計(jì)，每個(gè)元素都有序放置。用戶可以通過(guò)導(dǎo)航輕松找到他們想要的東西。

5.Vale

類型：企業(yè)




Vale是一個(gè)用于企業(yè)的線框原型圖案例。在設(shè)計(jì)網(wǎng)頁(yè)線框原型圖時(shí)，經(jīng)常會(huì)用到鼠標(biāo)懸停交互。在Mockplus中，您可以使用組件的狀態(tài)交互功能輕松實(shí)現(xiàn)。你需要做的唯一事情就是點(diǎn)擊右側(cè)屬性面板的顏色，邊界，文本等等屬性旁的小閃電圖標(biāo)，就可以很輕松地設(shè)置光標(biāo)通過(guò)或鼠標(biāo)移動(dòng)時(shí)的交互效果。

6.Fedena

類型：管理軟件




Fedena是一個(gè)一體化的學(xué)院管理軟件和管理系統(tǒng)，其具有如下特點(diǎn)：時(shí)間表，出勤率，家長(zhǎng)和師生交流等等。主要頁(yè)面包含注冊(cè)，登錄，論壇，下載，聯(lián)系等。

7.The Value Engineers

類型：官方網(wǎng)站




該例子是一個(gè)戰(zhàn)略品牌顧問(wèn)網(wǎng)站，它的突出特色在于其在品牌，戰(zhàn)略和創(chuàng)新方面擁有一定的專業(yè)知識(shí)和洞察力。此線框圖示例的主要頁(yè)面包括主頁(yè)，關(guān)于我們，與我們合作的人員，聯(lián)系人，詳細(xì)信息等界面。

8. Caza

類型：房產(chǎn)




這個(gè)線框圖例子是由迪拜的設(shè)計(jì)師Waseem Arshad設(shè)計(jì)的。他認(rèn)為即將到來(lái)的房產(chǎn)類網(wǎng)站應(yīng)該具有干凈的界面，直觀的信息展示和響應(yīng)式設(shè)計(jì)。該線框圖例子比較詳細(xì)，清楚地解釋了工作流程。

9. 3M Innovation Website

類型：創(chuàng)新類線框圖案例




此網(wǎng)站原型圖例子是一個(gè)附加到http://3M.com的線框圖整合，并且是可響應(yīng)式的設(shè)計(jì)。該線框圖呈現(xiàn)了全球物理創(chuàng)新中心的數(shù)字家園，并重點(diǎn)介紹了允許3M創(chuàng)新推動(dòng)人類發(fā)展和潛力發(fā)掘的新技術(shù)。

10.Wireframe for website

類型：通用型




該線框圖示例由設(shè)計(jì)師Sanjay Patel制作。這是一個(gè)通用的網(wǎng)站類線框圖例子，具有比較廣泛的用途。布局相當(dāng)干凈簡(jiǎn)單。但缺乏一定的創(chuàng)新。

第三部分：快速簡(jiǎn)潔的線框圖設(shè)計(jì)工具推薦

看了這么多優(yōu)秀的線框圖設(shè)計(jì)例子，你是不是也很想自己去實(shí)踐一下呢？如何快速做出一個(gè)優(yōu)質(zhì)的屏幕線框圖呢？首先，你需要學(xué)會(huì)使用線框圖設(shè)計(jì)工具，它可以幫助您快速記錄靈感。鑒于以上的優(yōu)秀案例多是使用Mockplus制作的，這里我首先要推薦的就是國(guó)內(nèi)最優(yōu)秀的線框/原型設(shè)計(jì)工具M(jìn)ockplus。

Mockplus致力于快速構(gòu)建和迭代原型，為設(shè)計(jì)師提供簡(jiǎn)潔高效的設(shè)計(jì)方式，能在最短時(shí)間里創(chuàng)造出最優(yōu)的設(shè)計(jì)成果?？纯此侨绾螌?shí)現(xiàn)快速設(shè)計(jì)的：

第一，Mockplus擁有200多個(gè)高度封裝的交互組件，3000個(gè)矢量圖標(biāo)，以及大量可供直接使用的模板、例子項(xiàng)目以及模板頁(yè)面，并且支持在Sketch中直接導(dǎo)出MP文件，為快速設(shè)計(jì)提供了有效支持。

第二，Mockplus還是快速交互的不二選擇。只需使用封裝可見的交互組件，用鼠標(biāo)進(jìn)行拖拽即可完成交互，不需要任何一行代碼。Mockplus目前支持3種交互方式：頁(yè)面交互，組件交互和屬性交互。交互命令還可一鍵自動(dòng)還原，貼切而周到。

第三，Mockplus擁有8種快速測(cè)試和演示方式，支持手機(jī)端、瀏覽器及桌面端的原型測(cè)試。在線預(yù)覽和離線演示都可輕松實(shí)現(xiàn)，不受終端和網(wǎng)絡(luò)限制。

最后，Mockplus團(tuán)隊(duì)推出了一系列別出心裁的設(shè)計(jì)，例如Microsoft Office風(fēng)格的可視化格式刷，可快速進(jìn)行批量復(fù)制，簡(jiǎn)單直觀。3.2版本增加了格子功能，可輕松復(fù)制頁(yè)面布局，并且可自定義屬性，非常人性化。Mockplus還支持腦圖設(shè)計(jì)模式，能快速完成項(xiàng)目的所有頁(yè)面構(gòu)架，然后一件轉(zhuǎn)化為原型項(xiàng)目。目前，Mockplus企業(yè)版已在準(zhǔn)備中，相信不久就會(huì)和各位見面，敬請(qǐng)期待哦。

希望以上的案例能對(duì)您有所幫助。還沒有使用過(guò)Mockplus的朋友們，可以趕快行動(dòng)起來(lái)了，Mockplus無(wú)論是設(shè)計(jì)線框圖，還是做原型圖，還是添加交互，都可以一步到位，讓您事半功倍。以上的例子文件以及頁(yè)面圖片等都可以在Mockplus官網(wǎng)免費(fèi)下載哦，歡迎嘗試，絕不后悔。