如何在产品初始阶段以最快的方式展示设计思路？我想大多数的UX/UI设计人员都会倾向于快速构建一个线框原型图。这的确是一个非常明智的选择。那么问题来了，设计师如何才能做出一个优秀的线框图设计呢？设计师可以在哪里获取更多设计灵感？需要使用线框工具呢还是用笔纸作图就足够？ 今天，我整理了23个最佳移动端和网页的线框图示例，希望能给您带来灵感。最后还有快速高效的线框图工具推荐哦。看完你就会知晓以上问题的答案。 [size=5][b][/b][/size] [size=5][b][back=transparent]第一部分：移动APP线框原型图示例[/back][/b][/size] 1.TickTick 类型：任务管理应用程序，工具类 [img]http://cdn.mockplus.cn/image/2018/02/9bbab09e-1749-41a9-a325-8ac9d60adf22.png[/img] TickTick是一个功能强大的任务管理应用程序，该程序具有引人入胜的动画教程，教程通过添加一个真实的手机界面来引导用户，从而却确保该程序与用户之间能够进行有效的交互，增强用户体验。 2.ColorfulClouds 类型：气象类应用程序 [img]http://cdn.mockplus.cn/image/2018/02/c51395bf-c7f0-4b07-a98c-0b4813fb04bd.png[/img] ColorfulCloads是一个界面美观的气象类应用程序，它可以准确预测未来的降雨量，空气污染情况以及更多的天气条件。这个应用程序最吸引人的的部分是在其主界面上的平面气象图。该例子包含的主要界面有登录页面，天气和污染页面，天气页面，城市页面，帮助和设置等其他页面。 3.Onefootball Tyoe：体育运动类应用程序 [img]http://cdn.mockplus.cn/image/2018/02/bc8c7fa6-7ef8-46fb-9e0d-3abe1e2d36c5.png[/img] A: Onefootball Onefootball是一个适用于足球迷的应用程序，该示例包含了超过100个国际足球联赛和比赛的突发新闻，统计数据，比分和实况视频。在页面“最喜欢的球队”的首页有一个浮动按钮，可以轻松查看球队列表，它是通过一个滚动区组件来设置一个列表，然后在滚动区域上方添加按钮实现的。 4. WeUI 类型：社区应用程序 [img]http://cdn.mockplus.cn/image/2018/02/f0594817-ac43-4779-b4a3-26603931cb0a.png[/img] WeUI是一个优秀的社区APP线框图范例。WeUI的主要功能包含“信息通知和上传”、“操作成功”以及“表单错误”等。该例子里的所有图标和组件形状都可以在Mockplus图标库里免费获得。 5. Qello-Concerts 类型：音乐应用程序 [img]http://cdn.mockplus.cn/image/2018/02/d9d767fc-9e20-447a-9664-49b98fb62cd7.png[/img] Qello Concerts是一个独特的音乐应用APP线框图示例。该APP包括了首页，热点页面，顶尖音乐会推荐页面，新歌发布页面，浏览页面等主要界面。该例子通过使用弹出面板，滑动抽屉和其他封装好的组件，通过鼠标拖拽可以快速完成交互。 6.Recipes 类型：食物APP [img]http://cdn.mockplus.cn/image/2018/02/7546b17b-731c-4c4c-8d5b-f8071ce62bd6.png[/img] Recipes是一个专为您的精致生活打造的应用程序，在该程序里，你可以快速找到你需要的食谱。首页的高品质的食物图片非常吸引人，让你垂涎三尺，这只需使用图片组件即可完成。该应用程序中的滑动菜单，是设计师使用Mockplus中的抽屉组件来实现的。此外，自动图像填充功能可以帮助您快速制作出一个精美的线框原型图。 7.Way of Life 类型：管理类应用程序 [img]http://cdn.mockplus.cn/image/2018/02/a83586de-82a4-40fd-a045-90e4fd0c0349.png[/img] 如其名字所示，Way of Life是一个生活管理类应用程序，可以帮助您记录和管理你的生活。对于不善于时间管理的人来说，这样的应用程序十分重要。在这个例子中，使用了时间选择器来设置闹钟，并使用一些滚动数字来设置时间的小时和分钟。在Mockplus中，要想制作这样一个时间选择器，你需要使用滚动区组件和文本组件，同时在滚动区中设置透明背景，把数字放在一个特定的组件里以确保有序排列。 8.Swipes 类型：效率工具类APP [img]http://cdn.mockplus.cn/image/2018/02/d3994a8a-cd6b-4b5f-ac8d-3744b521ea0d.png[/img] Awipes是一个效率工具应用程序，它可以帮助你记录事件，提高工作效率。该例子主要由登录/注册页面和其他重要页面组成。通常我们在登录/注册页面会遇到这种情况：输入密码，登录按钮会改变颜色并变成可点击的。在Mockplus中，您可以通过颜色变化交互来实现，并设置触发条件为“点击时”。 9.South Devon Accounting 类型：服务类应用程序 [img]http://cdn.mockplus.cn/image/2018/02/80e739d7-a58a-4c68-82f1-6b399cfd200d.png[/img] 这是一个提供会计和商业咨询服务的应用程序。布局清晰简洁，主菜单由图标和字符组成。在Mockplus中，只需使用带图标按钮组件即可完成，它可以同时编辑图标和文本。 10.Encode 类型：教育应用程序 [img]http://cdn.mockplus.cn/image/2018/02/feb61290-a8ce-4dd9-bb95-bd0ed7c9658e.png[/img] Encode是一个用于学习编程的教育应用程序。这个应用程序的颜色是系统预设的，布局简单明了。首页包含了大量的列表，可以使用Mockplus中的Repeater组件快速制作。此外，该页面是一个很长的页面，用户需要滚动屏幕来查看更多的信息，这可以通过两种方式实现：一是Mockplus页面上的小红色滑块，二是滚动区组件。 11.Weather App 类型：天气APP [img]http://cdn.mockplus.cn/image/2018/02/262bd255-e317-4877-9a01-9bffb50651cd.png[/img] Weather App是设计师Matt Sclarandis制作的。他是通过使用Adobe Illustrator和Photoshop完成了这个初始线框图设计，但该程序的实际运行应用程序是在java中编写的。Weather App是一个用于桌面端和iPhone的天气应用程序的线框图设计集合。 12.Mobile Wireframe Kit 类型：综合类手机运用程序 [img]http://cdn.mockplus.cn/image/2018/02/d570295a-ecbc-4fe1-ab89-5564571585c0.png[/img] 该线框图示例有90多个手机屏幕界面和数百个元素。该移动线框图示例是属于综合类的，适用于各类型的APP运用程序，可以帮助您智能地生成各类线框图模型。它还提供流程图模板，非常适合用户体验交流或演示文稿。 13.User Profile Concept 类型：用户主页运用程序 [img]http://cdn.mockplus.cn/image/2018/02/60af4351-bc5a-4915-aed9-97ee02c5fae8.png[/img] 这个线框图例子是由一个非常有才华的设计师Tomasz Sochacki制作的。在其Behance页面上，您还可以找到该项目的视觉设计图，所选版本图和最终版本效果图。 [size=5][b]第二部分：网站线框原型图示例[/b][/size] 1.Global Sources 类型：电子商务 [img]http://cdn.mockplus.cn/image/2018/02/eeb555ca-1ef5-4cc7-a469-b46ad972435a.png[/img] 该例子是一个典型的电子商务网站线框图。它包含了几个主要界面：主页，类别页面，登录页面和消息页面等。每种商品都可以在其页面的中心区域展示详尽信息，并且保证界面有序排列。 2.So Stereo 类型：音乐 [img]http://cdn.mockplus.cn/image/2018/02/ef2659c0-bf9e-49c2-970d-cbdb2a03d3f0.png[/img] 该例子是一个简单却有趣的音乐类线框图例子。其主要页面包含主页，搜索，发现，常见问题，隐私政策，服务条款等。最贴心和吸引人的部分是你可以提交你喜欢的音乐，只需点击主页的“提交音乐”按钮即可。 3.EdX 类型：教育 [img]http://cdn.mockplus.cn/image/2018/02/0ca0de5a-abab-4f09-8854-f89fd80107fc.png[/img] Edx是一个快速制作的教育类线框图例子。可以看出它只是最基本的框架和元素组合而成。主页包括创业、课程、计划、学校、合作伙伴以及关于我们等页面。该例子适用于任何类型的教育机构或在线课程。 4.StyleXstyle 类型：时尚 [img]http://cdn.mockplus.cn/image/2018/02/72f24b2c-028b-4333-afbd-14926e537459.png[/img] StyleXstyle是一个非常时尚的线框原型图例子。它有基本的页面，如细节，登录，慈善拍卖，个人资料等。每个页面都精心设计，每个元素都有序放置。用户可以通过导航轻松找到他们想要的东西。 5.Vale 类型：企业 [img]http://cdn.mockplus.cn/image/2018/02/9f7a8b5c-8899-4d59-808a-1931721ac71d.png[/img] Vale是一个用于企业的线框原型图案例。在设计网页线框原型图时，经常会用到鼠标悬停交互。在Mockplus中，您可以使用组件的状态交互功能轻松实现。你需要做的唯一事情就是点击右侧属性面板的颜色，边界，文本等等属性旁的小闪电图标，就可以很轻松地设置光标通过或鼠标移动时的交互效果。 6.Fedena 类型：管理软件 [img]http://cdn.mockplus.cn/image/2018/02/6545421f-bbf1-4647-803e-d5328a21a86c.png[/img] Fedena是一个一体化的学院管理软件和管理系统，其具有如下特点：时间表，出勤率，家长和师生交流等等。主要页面包含注册，登录，论坛，下载，联系等。 7.The Value Engineers 类型：官方网站 [img]http://cdn.mockplus.cn/image/2018/02/db7b2dd6-ea7e-40c7-8392-23d575153050.png[/img] 该例子是一个战略品牌顾问网站，它的突出特色在于其在品牌，战略和创新方面拥有一定的专业知识和洞察力。此线框图示例的主要页面包括主页，关于我们，与我们合作的人员，联系人，详细信息等界面。 8. Caza 类型：房产 [img]http://cdn.mockplus.cn/image/2018/02/2c254c26-16ba-451b-a8a4-618c7eae2f2f.png[/img] 这个线框图例子是由迪拜的设计师Waseem Arshad设计的。他认为即将到来的房产类网站应该具有干净的界面，直观的信息展示和响应式设计。该线框图例子比较详细，清楚地解释了工作流程。 9. 3M Innovation Website 类型：创新类线框图案例 [img]http://cdn.mockplus.cn/image/2018/02/13d58924-d3dc-48d2-8460-7de381d03097.png[/img] 此网站原型图例子是一个附加到3M.com的线框图整合，并且是可响应式的设计。该线框图呈现了全球物理创新中心的数字家园，并重点介绍了允许3M创新推动人类发展和潜力发掘的新技术。 10.Wireframe for website 类型：通用型 [img]http://cdn.mockplus.cn/image/2018/02/28a9a202-6151-4c91-9f3c-5885e014607b.png[/img] 该线框图示例由设计师Sanjay Patel制作。这是一个通用的网站类线框图例子，具有比较广泛的用途。布局相当干净简单。但缺乏一定的创新。 [size=5][b]第三部分：快速简洁的线框图设计工具推荐[/b][/size] 看了这么多优秀的线框图设计例子，你是不是也很想自己去实践一下呢？如何快速做出一个优质的屏幕线框图呢？首先，你需要学会使用线框图设计工具，它可以帮助您快速记录灵感。鉴于以上的优秀案例多是使用Mockplus制作的，这里我首先要推荐的就是国内最优秀的[url=http://www.mockplus.cn/?hmsr=wen]线框/原型设计工具Mockplus[/url]。 Mockplus致力于快速构建和迭代原型，为设计师提供简洁高效的设计方式，能在最短时间里创造出最优的设计成果。看看它是如何实现快速设计的： 第一，Mockplus拥有200多个高度封装的交互组件，3000个矢量图标，以及大量可供直接使用的模板、例子项目以及模板页面，并且支持在Sketch中直接导出MP文件，为快速设计提供了有效支持。 第二，Mockplus还是快速交互的不二选择。只需使用封装可见的交互组件，用鼠标进行拖拽即可完成交互，不需要任何一行代码。Mockplus目前支持3种交互方式：页面交互，组件交互和属性交互。交互命令还可一键自动还原，贴切而周到。 第三，Mockplus拥有8种快速测试和演示方式，支持手机端、浏览器及桌面端的原型测试。在线预览和离线演示都可轻松实现，不受终端和网络限制。 最后，Mockplus团队推出了一系列别出心裁的设计，例如Microsoft Office风格的可视化格式刷，可快速进行批量复制，简单直观。3.2版本增加了格子功能，可轻松复制页面布局，并且可自定义属性，非常人性化。Mockplus还支持脑图设计模式，能快速完成项目的所有页面构架，然后一件转化为原型项目。目前，Mockplus企业版已在准备中，相信不久就会和各位见面，敬请期待哦。 希望以上的案例能对您有所帮助。还没有使用过[url=http://www.mockplus.cn/?hmsr=wen]Mockplus[/url]的朋友们，可以赶快行动起来了，Mockplus无论是设计线框图，还是做原型图，还是添加交互，都可以一步到位，让您事半功倍。以上的例子文件以及页面图片等都可以在Mockplus官网免费下载哦，欢迎尝试，绝不后悔。