给你灵感的23个优秀线框原型图示例

JewelMarino 6年前
   <p>如何在产品初始阶段以最快的方式展示设计思路?我想大多数的UX/UI设计人员都会倾向于快速构建一个线框原型图。</p>    <p>如何在产品初始阶段以最快的方式展示设计思路?我想大多数的UX/UI设计人员都会倾向于快速构建一个线框原型图。这的确是一个非常明智的选择。那么问题来了,设计师如何才能做出一个优秀的线框图设计呢?设计师可以在哪里获取更多设计灵感?需要使用线框工具呢还是用笔纸作图就足够?</p>    <p>今天,我整理了23个最佳移动端和网页的线框图示例,希望能给您带来灵感。最后还有快速高效的线框图工具推荐哦。看完你就会知晓以上问题的答案。</p>    <p>第一部分:移动APP线框原型图示例</p>    <p>1.TickTick</p>    <p>类型:任务管理应用程序,工具类</p>    <p><img src="https://simg.open-open.com/show/9d5e24b1e8c828296a51dbb65bce08cc.png"></p>    <p>TickTick是一个功能强大的任务管理应用程序,该程序具有引人入胜的动画教程,教程通过添加一个真实的手机界面来引导用户,从而却确保该程序与用户之间能够进行有效的交互,增强用户体验。</p>    <p>2.ColorfulClouds</p>    <p>类型:气象类应用程序</p>    <p><img src="https://simg.open-open.com/show/9874485de451792cd6e8cd03ef7a0d09.png"></p>    <p>ColorfulCloads是一个界面美观的气象类应用程序,它可以准确预测未来的降雨量,空气污染情况以及更多的天气条件。这个应用程序最吸引人的的部分是在其主界面上的平面气象图。该例子包含的主要界面有登录页面,天气和污染页面,天气页面,城市页面,帮助和设置等其他页面。</p>    <p>3.Onefootball</p>    <p>Tyoe:体育运动类应用程序</p>    <p><img src="https://simg.open-open.com/show/5efd4b6bcc0433e019be777d8d374545.png"></p>    <p>A: Onefootball</p>    <p>Onefootball是一个适用于足球迷的应用程序,该示例包含了超过100个国际足球联赛和比赛的突发新闻,统计数据,比分和实况视频。在页面“最喜欢的球队”的首页有一个浮动按钮,可以轻松查看球队列表,它是通过一个滚动区组件来设置一个列表,然后在滚动区域上方添加按钮实现的。</p>    <p>4. WeUI</p>    <p>类型:社区应用程序</p>    <p><img src="https://simg.open-open.com/show/4f6f932b115e848827d8e64d7be8da53.png"></p>    <p>WeUI是一个优秀的社区APP线框图范例。WeUI的主要功能包含“信息通知和上传”、“操作成功”以及“表单错误”等。该例子里的所有图标和组件形状都可以在Mockplus图标库里免费获得。</p>    <p>5. Qello-Concerts</p>    <p>类型:音乐应用程序</p>    <p><img src="https://simg.open-open.com/show/471cc79efbffc9a2a2c4c4324597c066.png"></p>    <p>Qello Concerts是一个独特的音乐应用APP线框图示例。该APP包括了首页,热点页面,顶尖音乐会推荐页面,新歌发布页面,浏览页面等主要界面。该例子通过使用弹出面板,滑动抽屉和其他封装好的组件,通过鼠标拖拽可以快速完成交互。</p>    <p>6.Recipes</p>    <p>类型:食物APP</p>    <p><img src="https://simg.open-open.com/show/14fc35acf92d3c781b0ecfb8455f42ca.png"></p>    <p>Recipes是一个专为您的精致生活打造的应用程序,在该程序里,你可以快速找到你需要的食谱。首页的高品质的食物图片非常吸引人,让你垂涎三尺,这只需使用图片组件即可完成。该应用程序中的滑动菜单,是设计师使用Mockplus中的抽屉组件来实现的。此外,自动图像填充功能可以帮助您快速制作出一个精美的线框原型图。</p>    <p>7.Way of Life</p>    <p>类型:管理类应用程序</p>    <p><img src="https://simg.open-open.com/show/ad0d7df91d53b6fe375a996a73780ab5.png"></p>    <p>如其名字所示,Way of Life是一个生活管理类应用程序,可以帮助您记录和管理你的生活。对于不善于时间管理的人来说,这样的应用程序十分重要。在这个例子中,使用了时间选择器来设置闹钟,并使用一些滚动数字来设置时间的小时和分钟。在Mockplus中,要想制作这样一个时间选择器,你需要使用滚动区组件和文本组件,同时在滚动区中设置透明背景,把数字放在一个特定的组件里以确保有序排列。</p>    <p>8.Swipes</p>    <p>类型:效率工具类APP</p>    <p><img src="https://simg.open-open.com/show/8e1c26f2c72223b798601857f45b9184.png"></p>    <p>Awipes是一个效率工具应用程序,它可以帮助你记录事件,提高工作效率。该例子主要由登录/注册页面和其他重要页面组成。通常我们在登录/注册页面会遇到这种情况:输入密码,登录按钮会改变颜色并变成可点击的。在Mockplus中,您可以通过颜色变化交互来实现,并设置触发条件为“点击时”。</p>    <p>9.South Devon Accounting</p>    <p>类型:服务类应用程序</p>    <p><img src="https://simg.open-open.com/show/a94ea5fed1a3f854acefc83bbef759f6.png"></p>    <p>这是一个提供会计和商业咨询服务的应用程序。布局清晰简洁,主菜单由图标和字符组成。在Mockplus中,只需使用带图标按钮组件即可完成,它可以同时编辑图标和文本。</p>    <p>10.Encode</p>    <p>类型:教育应用程序</p>    <p><img src="https://simg.open-open.com/show/ae452e737ecfe00eb9dca93ad60cb5ad.png"></p>    <p>Encode是一个用于学习编程的教育应用程序。这个应用程序的颜色是系统预设的,布局简单明了。首页包含了大量的列表,可以使用Mockplus中的Repeater组件快速制作。此外,该页面是一个很长的页面,用户需要滚动屏幕来查看更多的信息,这可以通过两种方式实现:一是Mockplus页面上的小红色滑块,二是滚动区组件。</p>    <p>11.Weather App</p>    <p>类型:天气APP</p>    <p><img src="https://simg.open-open.com/show/be23e04151e163f4dd67015c728d6fed.png"></p>    <p>Weather App是设计师Matt Sclarandis制作的。他是通过使用Adobe Illustrator和Photoshop完成了这个初始线框图设计,但该程序的实际运行应用程序是在java中编写的。Weather App是一个用于桌面端和iPhone的天气应用程序的线框图设计集合。</p>    <p>12.Mobile Wireframe Kit</p>    <p>类型:综合类手机运用程序</p>    <p><img src="https://simg.open-open.com/show/0331be73fc3b5aade3e6d3f7921f3e9d.png"></p>    <p>该线框图示例有90多个手机屏幕界面和数百个元素。该移动线框图示例是属于综合类的,适用于各类型的APP运用程序,可以帮助您智能地生成各类线框图模型。它还提供流程图模板,非常适合用户体验交流或演示文稿。</p>    <p>13.User Profile Concept</p>    <p>类型:用户主页运用程序</p>    <p><img src="https://simg.open-open.com/show/6c169b9bb6d797aa4aee1f8c2ef7a098.png"></p>    <p>这个线框图例子是由一个非常有才华的设计师Tomasz Sochacki制作的。在其Behance页面上,您还可以找到该项目的视觉设计图,所选版本图和最终版本效果图。</p>    <p>第二部分:网站线框原型图示例</p>    <p>1.Global Sources</p>    <p>类型:电子商务</p>    <p><img src="https://simg.open-open.com/show/d1943bf32a3125028916b93a7b83edb2.png"></p>    <p>该例子是一个典型的电子商务网站线框图。它包含了几个主要界面:主页,类别页面,登录页面和消息页面等。每种商品都可以在其页面的中心区域展示详尽信息,并且保证界面有序排列。</p>    <p>2.So Stereo</p>    <p>类型:音乐</p>    <p><img src="https://simg.open-open.com/show/011bfef66c166a6c8ca449a4472942ab.png"></p>    <p>该例子是一个简单却有趣的音乐类线框图例子。其主要页面包含主页,搜索,发现,常见问题,隐私政策,服务条款等。最贴心和吸引人的部分是你可以提交你喜欢的音乐,只需点击主页的“提交音乐”按钮即可。</p>    <p>3.EdX</p>    <p>类型:教育</p>    <p><img src="https://simg.open-open.com/show/b26af9595d348edd3fd73fae518f0ed6.png"></p>    <p>Edx是一个快速制作的教育类线框图例子。可以看出它只是最基本的框架和元素组合而成。主页包括创业、课程、计划、学校、合作伙伴以及关于我们等页面。该例子适用于任何类型的教育机构或在线课程。</p>    <p>4.StyleXstyle</p>    <p>类型:时尚</p>    <p><img src="https://simg.open-open.com/show/76c234866ccdfce49b7399d9ac98afc1.png"></p>    <p>StyleXstyle是一个非常时尚的线框原型图例子。它有基本的页面,如细节,登录,慈善拍卖,个人资料等。每个页面都精心设计,每个元素都有序放置。用户可以通过导航轻松找到他们想要的东西。</p>    <p>5.Vale</p>    <p>类型:企业</p>    <p><img src="https://simg.open-open.com/show/f8793001b4ca62f57b9b08757f042d84.png"></p>    <p>Vale是一个用于企业的线框原型图案例。在设计网页线框原型图时,经常会用到鼠标悬停交互。在Mockplus中,您可以使用组件的状态交互功能轻松实现。你需要做的唯一事情就是点击右侧属性面板的颜色,边界,文本等等属性旁的小闪电图标,就可以很轻松地设置光标通过或鼠标移动时的交互效果。</p>    <p>6.Fedena</p>    <p>类型:管理软件</p>    <p><img src="https://simg.open-open.com/show/aa06ca9d823837fb5c0e356ca9ead6a0.png"></p>    <p>Fedena是一个一体化的学院管理软件和管理系统,其具有如下特点:时间表,出勤率,家长和师生交流等等。主要页面包含注册,登录,论坛,下载,联系等。</p>    <p>7.The Value Engineers</p>    <p>类型:官方网站</p>    <p><img src="https://simg.open-open.com/show/a9aa1bd7c1aaf9582995124f9f8bf9af.png"></p>    <p>该例子是一个战略品牌顾问网站,它的突出特色在于其在品牌,战略和创新方面拥有一定的专业知识和洞察力。此线框图示例的主要页面包括主页,关于我们,与我们合作的人员,联系人,详细信息等界面。</p>    <p>8. Caza</p>    <p>类型:房产</p>    <p><img src="https://simg.open-open.com/show/b33ff834e408b4d8a0225a8d63eddb7c.png"></p>    <p>这个线框图例子是由迪拜的设计师Waseem Arshad设计的。他认为即将到来的房产类网站应该具有干净的界面,直观的信息展示和响应式设计。该线框图例子比较详细,清楚地解释了工作流程。</p>    <p>9. 3M Innovation Website</p>    <p>类型:创新类线框图案例</p>    <p><img src="https://simg.open-open.com/show/3c6a9dd05d5a39ad084328416cd67f24.png"></p>    <p>此网站原型图例子是一个附加到3M.com的线框图整合,并且是可响应式的设计。该线框图呈现了全球物理创新中心的数字家园,并重点介绍了允许3M创新推动人类发展和潜力发掘的新技术。</p>    <p>10.Wireframe for website</p>    <p>类型:通用型</p>    <p><img src="https://simg.open-open.com/show/db6156be8eaa48cc54683b0f0b07a3b6.png"></p>    <p>该线框图示例由设计师Sanjay Patel制作。这是一个通用的网站类线框图例子,具有比较广泛的用途。布局相当干净简单。但缺乏一定的创新。</p>    <p>第三部分:快速简洁的线框图设计工具推荐</p>    <p>看了这么多优秀的线框图设计例子,你是不是也很想自己去实践一下呢?如何快速做出一个优质的屏幕线框图呢?首先,你需要学会使用线框图设计工具,它可以帮助您快速记录灵感。鉴于以上的优秀案例多是使用Mockplus制作的,这里我首先要推荐的就是国内最优秀的 <a href="/misc/goto?guid=4959757083147599093" rel="nofollow,noindex"> <strong>线框/原型设计工具Mockplus</strong> </a> 。</p>    <p>Mockplus致力于快速构建和迭代原型,为设计师提供简洁高效的设计方式,能在最短时间里创造出最优的设计成果。看看它是如何实现快速设计的:</p>    <p>第一,Mockplus拥有200多个高度封装的交互组件,3000个矢量图标,以及大量可供直接使用的模板、例子项目以及模板页面,并且支持在Sketch中直接导出MP文件,为快速设计提供了有效支持。</p>    <p>第二,Mockplus还是快速交互的不二选择。只需使用封装可见的交互组件,用鼠标进行拖拽即可完成交互,不需要任何一行代码。Mockplus目前支持3种交互方式:页面交互,组件交互和属性交互。交互命令还可一键自动还原,贴切而周到。</p>    <p>第三,Mockplus拥有8种快速测试和演示方式,支持手机端、浏览器及桌面端的原型测试。在线预览和离线演示都可轻松实现,不受终端和网络限制。</p>    <p>最后,Mockplus团队推出了一系列别出心裁的设计,例如Microsoft Office风格的可视化格式刷,可快速进行批量复制,简单直观。3.2版本增加了格子功能,可轻松复制页面布局,并且可自定义属性,非常人性化。Mockplus还支持脑图设计模式,能快速完成项目的所有页面构架,然后一件转化为原型项目。目前,Mockplus企业版已在准备中,相信不久就会和各位见面,敬请期待哦。</p>    <p>希望以上的案例能对您有所帮助。还没有使用过 <strong> <a href="/misc/goto?guid=4959757083147599093" rel="nofollow,noindex">Mockplus</a> </strong> 的朋友们,可以赶快行动起来了,Mockplus无论是设计线框图,还是做原型图,还是添加交互,都可以一步到位,让您事半功倍。以上的例子文件以及页面图片等都可以在Mockplus官网免费下载哦,欢迎尝试,绝不后悔。</p>    <p> </p>    <p>来自:http://www.ui.cn/detail/330526.html</p>    <p> </p>