前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >知道这10点,你才是真正会画线框图

知道这10点,你才是真正会画线框图

作者头像
奔跑的小鹿
发布于 2022-03-16 00:15:38
发布于 2022-03-16 00:15:38
1.1K0
举报
文章被收录于专栏:无原型不设计无原型不设计

在让UI设计师产出高保真设计稿之前,产品经理需要绘制线框图,来向UI设计师传递网站布局结构、产品内容、信息化层次、界面功能、用户行为等信息。线框图没有严格的规定或秩序要遵守,但一定要清晰具体地描述布局细节,为设计师提供项目的概述。

那么究竟什么是线框图?为什么要画线框图呢?

首先我们需要搞清楚,线框图并不能算是真正意义上的原型。许多设计师和产品经理都非常容易将线框图理解为原型图。我们一起来看看线框图和原型图的区别。

线框图:线框图是一种低保真且静态的呈现方式,只需要明确呈现内容大纲,信息结构,布局,用户界面的视觉以及交互行为描述即可。

原型图:原型图是程序开发过程中的重要步骤,通常是以中高保真的形式呈现,更接近最终产品的形态,并且允许我们进行一些初步的测试,用以考量产品的可用性。它能够实现和验证产品的设计理念。

在产品设计阶段的初期,我们会先画出产品的线框图,来明确表达自己的设计想法。这是因为线框图无需过多的视觉效果,能够帮助我们快速确定页面的主要层级划分和功能。同时,线框图没有过多的视觉元素,当我们发现问题时,可以更加方便地进行更改,节省修改时间。因此,在正式绘制原型设计稿之前,画线框图时很有必要的。

在画线框图时,我们一定要注意以下10点

1.画线框图之前,先研究产品需求

在画线框图之前,我们必须先知道产品的作用是什么。在这一阶段我们需要考虑两个重点目标:商业目标和用户目标。围绕这两个目标的研究,可以帮助我们更好地理清产品需求,也可以让我们了解,如何通过线框图实现我们的目标。

2. 尽可能多地展示各种想法

当我们产生了很多个想法时,一定要第一时间把脑海中的想法画出来。因为想法在脑海中呈现具有一定的难度,而线框图则可以更加直观地进行表达。当我们将尽可能多的想法展示出来,就可以对比发现每个想法的优缺点,也就更有机会找到最佳的解决方式,这也是线框图的价值所在。

3.保持简单,保证效率

前面我们提到,画线框图可以帮助我们在产品设计阶段初期节省大量时间,因为线框图具有创建速度快和结构简单的优点,可以让我们拥有更多时间去探索各种布局,将重心放在传达想法上,而不是展示设计艺术和技巧。因此在画线框图时,不需要过多地关注细节,而是要保持简单,尽可能快地完成工作。

4. 确保线框图易于理解

线框图作为交流的工具,是为了帮助其他人了解我们的想法。我们在画线框图的时候,一定要理清视觉层次,确保任何人都可以轻松地看懂。

5.尽量使用占位符,而不是真实的UI元素

在产品设计的早期阶段,可能无法使用真实数据,因此我们可以在线框图中使用占位符,来呈现页面布局。如图像可以用“X”来表示,文字可以用平行的线条来表示,视频可以用矩形和黑色实心三角来表示。

6.使用颜色突出显示特定元素

线框图的颜色需要保持最低限度,如黑色、灰色等中性颜色,这样可以让设计师更加直观地了解整体流程结构,而不被强烈地色彩吸引。但如果需要展示某些部分的含义,可以使用颜色突出显示特定的元素,让查看线框图的成员将注意力集中在这些元素上面。

7.注释线框图

由于线框图是静态的,当界面较为复杂时,可能会存在想法难以传达的情况。因此在画线框图时,还需要提供对应的批注或注释。帮助设计师清楚明了地梳理产品逻辑,以及理解用户与产品之间是如何进行互动的。

8.利用线框图进行团队协作

产品设计并不是一个人的工作,最好的设计决策来自于团队协作。因此,我们将想法通过线框图呈现出来后,一定要和团队成员分享,团队成员给出的意见,不仅可以帮助我们判断想法是否具有价值,还可以帮助我们完善和优化线框图,快速进行下一个设计决策。

9.做好历史版本管理

将画好的线框图分享给团队成员评审后,我们需要收集反馈并对线框图进行修改迭代。在修改之前,我们要注意做好历史版本管理,便于对比不同版本之间的区别,来做出更好的选择。

10. 选择好的工具

绘制线框图的工具会直接影响我们的工作效率和结果。传统的纸笔虽然可以帮助我们快速表达想法,但不利于修改和迭代。因此,我们需要一款强大好用的线框图工具,来帮助我们提升工作效率。比如摹客原型这样的在线原型设计工具,不仅可以利用封装的元素,快速绘制线框图,还可以将其转换为高保真原型,进行用户测试或交付开发。

常用的线框图工具

1.Axure

Axure是一款老牌原型设计工具,我们可以直接使用Axure丰富的组件来创建APP或网站的线框图。作为专业的原型设计工具,它也支持将静态的线框图转换为可交互的原型。同时支持多人协作和版本管理。

2.摹客

在国内的同类型工具中,只有摹客拥有强大的矢量绘图功能,在进行头脑风暴时,我们可以利用摹客的矢量绘图工具和无边界画布,让灵感创意快速具象化。同时,摹客作为一款强大的高保真设计利器,产品经理和设计师也可以使用摹客快速绘制高保真,轻量设计还可以直接使用摹客交付给开发。

经典线框图案例分享

最后为大家分享几组使用Mockplus绘制的线框图,可以点击链接在线预览或下载使用。

1.效率类App-One List

2.美食类App-Recipes

3.工具类App-Asana App

4.旅游类App-Triposo

5.健康类App原型制作分享-Pillow

更多案例, 可前往摹客教程网查看。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/02/24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
原型设计用得最多的是PS吗?该如何画原型?
在产品开发的前期工作中,产品经理或设计师通常需要进行原型设计工作,创建一个可交互和可视化的原型,以更准确地表达他们的设计构思和想法,并为项目顺利递交给开发人员做好准备。进行原型设计时,使用设计工具来画原型图是最高效的方式。
奔跑的小鹿
2023/07/04
5370
原型设计用得最多的是PS吗?该如何画原型?
线框图?原型图?为何傻傻分不清楚
首先,我们需要搞清楚的一点就是线框图不是真正意义上的原型。许多设计师和产品经理,甚至是经验丰富的设计大牛往往也很容易混肴这些专业术语。什么是线框图?什么是原型?什么时候使用线框图?什么时候使用原型? 我们都看过小说,小说呈现给我们的只是文字表达,由作者赋予的人物形象。我们常常在语文考试中都会这样回答“本文中的人物形象生动、鲜明”,这里的“生动”指的只是我们通过作者的视角想象出来的,我们并没有看过真实的人物。但当这部小说被拍成电影或电视剧,导演根据自己的理解选角,演员们赋予了他们鲜活的生命,这就是原型,小
奔跑的小鹿
2018/03/16
8540
线框图?原型图?为何傻傻分不清楚
软件原型设计工具有哪些?
原型设计是将想法转变为设计过程中至关重要的一环。经常有设计师小伙伴可能会问到,“哪个原型设计工具是最好的呢”?实际上这是一种错误的提问方式,尤其是在当下原型工具种类繁多,针对不同需求各有优势的大环境中更加如此。就设计师而言,更在意的应该是“哪个原型设计工具对我现阶段的目标是最好的”?在这里,笔者列出了在3种常见场景下最合适的原型图设计工具的推荐清单,希望对你有所帮助。
奔跑的小鹿
2021/06/02
1.4K0
一篇文章带你摸清高保真、低保真原型间的区别
那么在产品设计中,我们应当选择低保真原型还是高保真原型?两种原型的使用场景又是什么?小摹对此都做出了相应的分析,一起来看一下吧!
奔跑的小鹿
2022/02/08
1.8K0
一篇文章带你摸清高保真、低保真原型间的区别
12345,教你画好线框图
线框图是一种低保真度的设计原型,在去除所有视觉设计细节之下,进行页面结构、功能、内容规划。线框图对于产品的作用就如同建筑蓝图,在项目的初始阶段规定好产品各方面的细节,作为整体项目说明,因为绘制起来简单、快速,也经常用于非正式场合,比如团队内部交流。可以说线框图是产品流程中不可或缺的一部分,那么本文就通过两个定义、三个优点、五步流程、四个技巧、一款工具,来详细介绍线框图。
奔跑的小鹿
2019/01/24
9050
12345,教你画好线框图
强烈推荐!2018最受欢迎的8款产品原型工具
工欲善其事必先利其器。作为一名产品经理,如何才能快速地设计一款产品?一款优秀的产品原型工具必不可少。如何才能选择一款适合自己的原型工具呢?小编特意整理了8款工具以供参考,并从学习曲线,性价比,功能优缺点等方面进行了简单的介绍。希望能够帮助大家挑选一款称心如意的工具,提高工作效率。
奔跑的小鹿
2019/01/24
3.6K0
强烈推荐!2018最受欢迎的8款产品原型工具
从0到1教你画原型图
相信很多刚入行的产品新人,接到的第一项工作任务就是针对公司产品需求画一份原型图出来,怎么样才能顺利的完成任务呢?
奔跑的小鹿
2022/03/16
1.4K0
从0到1教你画原型图
智能设计新时代:5款强大的AI原型设计工具推荐
随着人工智能生成内容(AIGC)相关研究的突破,人类社会正面临一个全新的转折点。诸如多模态、可控扩散模型和大型语言模型等技术正在直接改变创意设计领域的生产过程。
奔跑的小鹿
2023/06/26
13.6K0
智能设计新时代:5款强大的AI原型设计工具推荐
产品原型在工作推动中重要作用
从早期接触互联网产品相关工作,最初在需求传递的整个流程中,我们将想法页面上形成草图,表现形式上看到的是一系列由图片占位符、文字、线框、按钮等元件组成作为一个静态页面呈现。随着需求传递过程中沟通成本的提升,需求细节的严谨性、在与UI/UE的沟通中,需要对表现层之下按钮、布局、交互和元素的位置,进行优化设计布局,以达到这些元素在页面上的最佳体验效果,让用户在需要的时候,用户如何到达某个页面能快速找到所需位置,并且在他们在当前页面完成任务后,快速给出反馈和需要去的下一个页面这是产品需要思考的路径。
奔跑的小鹿
2022/12/20
6280
产品原型在工作推动中重要作用
超全面的 UI 工作流程指南(二):原型设计
本篇为工作流程第二节:原型设计。上期回顾:《超全面的 UI 设计工作流程指南(一):需求分析》
奔跑的小鹿
2021/01/15
2.4K0
超全面的 UI 工作流程指南(二):原型设计
基于用户需求,打造原型设计工具中的卓越用户体验
随着互联网的发展,产品设计需求也随即增多,市面上的原型设计工具都差不多,呈现差异化是当前原型工具从竞争中脱颖而出的关键。
奔跑的小鹿
2022/09/20
7660
基于用户需求,打造原型设计工具中的卓越用户体验
产品经理该不该画高保真原型图?深挖需求场景与解决方案
原型图绘制是每位产品经理绕不开的基本功,通过可视化的形式展现产品功能设计与页面交互逻辑,同时也是连接团队沟通协作的重要成果。但“产品经理到底该不该画高保真原型图”这个话题,一直以来都存在争议。有人认为这是UI设计师的活,产品只需画草图表达逻辑;也有人坚持认为,高保真原型才是真正能推动项目向前的关键。
产品大余
2025/06/17
1290
产品经理该不该画高保真原型图?深挖需求场景与解决方案
原型对接工作流!摹客iDoc全面支持Mockplus、Axure原型
这是UPA(国际用户体验专业协会)发布的完整产品用户体验设计流程图,画面看起来蜿蜒曲折,像极了现实中设计开发流程的繁复难言,从开始走到流程结束的人,自然是最苦逼的产品经理。然而,画面呈现的复杂度和产品经理现实中水深火热的处境相比,可谓冰山一角。
奔跑的小鹿
2019/06/14
8030
B端原型设计太复杂?看这一篇轻松入门
近年来,B端市场前景展现广阔,B端产品经理也成为了炙手可热的高薪岗位。作为负责管理和推动B端产品开发和生命周期的负责人,B端产品经理在企业市场中发挥着重要作用,因此他们往往也是具备全局能力框架的专业人员。
奔跑的小鹿
2023/07/12
1.2K0
B端原型设计太复杂?看这一篇轻松入门
一句话评述8个最热的原型工具
早在十年前,要是提到原型工具,大概也只有笔纸和白板了。现如今,原型工具如雨后春笋般涌出,形式也各样,有在线的,也有桌面端的,让人目不暇接。今天小编就为大家吐血整理了今年夏天最热的8款原型工具。 1.
奔跑的小鹿
2018/03/16
1.1K0
一句话评述8个最热的原型工具
工欲善其事必先利其器——产品篇
善其事,关键在于搞明白产品经理相关的工作内容,针对工作,合理有效的利用软件,才能达到事半功倍的效果。
雪雁-心莱科技
2018/12/27
4980
16款值得一用的iPhone线框图模板 (PSD & Sketch)
在任何网站或移动应用设计的过程中,线框图作为设计元素和功能的图示,它有助于帮助定义和更好地传达信息层次结构,让参与设计和开发的人员更好的理解设计师的思路和设计的功能点。
奔跑的小鹿
2019/01/24
2.1K0
16款值得一用的iPhone线框图模板 (PSD & Sketch)
原型设计的重要性你真的知道吗?
一个好产品的诞生,必定离不开原型设计。原型设计是整个产品开发中最重要的, 并且确定了整个软件的方向,重要性就和建筑师的设计图一样。 “很难想象一个没有原型的产品是如何诞生的。原型设计的核心目的在于测试
奔跑的小鹿
2018/03/16
1.1K0
原型设计的重要性你真的知道吗?
2020年UI设计师必备工具清单
UI设计师一直是IT行业最热门职位之一,因其薪资待遇较高,学习门槛较低而广受欢迎。在百度指数搜索“UI设计”来看,从2012年开始,UI设计的搜索呈明显上升趋势,尤其是在2016年左右出现“井喷式”增长。
奔跑的小鹿
2020/03/20
1.8K0
2020年UI设计师必备工具清单
9款原型设计工具与Sketch的强强组合,轻松构建交互原型!
原型设计的发展历史经历了纸上原型、静态线框设计、到现在的可交互式原型。作为设计过程中最初始的阶段,设计师们对原型设计的要求也越来越高。因此,如今的原型设计工具格局也发生了很大的变化。
奔跑的小鹿
2019/01/24
3.1K0
9款原型设计工具与Sketch的强强组合,轻松构建交互原型!
相关推荐
原型设计用得最多的是PS吗?该如何画原型?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档