线框图的那些事儿

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
5498 24 41 2016-08-03

关于线框图的知识你知道多少?

1.什么是线框图


线框图是指用线或者形状描绘出产品的界面,主要用来展示创意、布局、结构和验证需求的一种图。

线框图不等于原型!线框图不等于原型!线框图不等于原型!我们可以理解为线框图相当于是产品的草稿,但不能说线框图就是原型。


2.线框图需要考虑哪些问题


Image title

3.线框图的主要目的


1.表达出主要的内容


2.描绘出主要结构和布局以便验证需求



3.界面信息的描述


线框图是很重要的,无论是在构建网站、系统、或者是移动应用,线框图的重要性不言而喻。就因为它可以快速修改,方便设计和开发的协作和后续产品的迭代。


就算你软件技能不好,不够专业,但那又怎样?线框图的目的不在于你建立起来的模型看起来有多复杂,它需要你对产品未来形态方向的把控,不在于你使用什么软件、功能多NB、只在乎你把握住关键点没有。


4.绘制线框图有哪些方式


Image title


5.线框图的优点


1.在早期检测和修复主要问题



2.构建容易,成本低



3.思考核心内容,而不是美观



4.更有迭代的动力和意愿



5.便于携带和展示


总结:关于线框图的建议

不需要纠结工具,最重要的是设计思想。也不需要太多时间在配色、美化上面,不然就会大大降低效率,影响后期界面设计效果,为难视觉设计师,特别是是老板或客户不懂设计就会以为这是效果图,而不是线框图。



线框图重心在于验证产品的基本假设以及核心的价值,而不是转向产品的美观程度,美观的事情就交给视觉就好了。把时间花在其他方面不如多考虑一下页面逻辑、结构、布局等是否合理,想清楚自己的职责。特别是在产品的研发周期中,通过线框图,团队可以拓展思路,摸清产品流程,讨论其中的细节,线框图能够很效率。通过建立一个简单的页面跳转的带文字的线框图,你能够更快的在早起设计过程中发现钱在问题和更有效的解决方案。



关于高保真原型、功能性原型、以及各种看上去很酷炫的原型以及动效--这类的原型虽然说非常的华丽,但是好的产品不是一蹴而就的,相信大家也用过一些很好看的应用,但是就是觉得不好用,这就是我们为什么看到很多外表华丽的原型设计,往往会导致糟糕的用户体验。



是否因为项目进度、时间仓促而浪费大量资源,或者因完美主义使项目完成度太低?线框图可以让我们不必做多无用功和过度思考中,在过少的资源和过多的用户需求之中找到一个平衡点。


以上文章仅代表个人观点,如有不足之处,欢迎在评论区提出建议与探讨,谢谢!




据说点赞的最后都成了大神


Powered by Froala Editor

全部评论:24条

  • sanIang

    2018-09-21 15:44

    能问下,你这个线框图使用什么软件做的吗,那个连的线是怎么弄的?

  • Laborer

    2016-12-10 11:18

    因工作繁忙,暂时不提供分享了哦

  • kelvinspaceshk

    2016-11-13 15:37

    kelvinspaces@gmail.com

  • Laborer

    2016-09-01 09:36

    @黑米糍: 项目前期可以通过绘制简单的线框图来可以拓展思路,摸清产品流程,页面逻辑是否合理。 原型是通过电脑软件对其进行一定的加工后的,示意更加明确,页面与页面之间串联起来,它能够包含设计的交互和反馈,而高保真原型在体验上更接近产品,而这是线框图所不具备的。

  • ui_luke

    2016-09-01 01:19

    ui@123zy.cn 好人一生平安

  • 黑米糍

    2016-08-31 23:29

    那请教一下,原型和线框图的区别是什么??

  • loko0814

    2016-08-29 13:56

    loko0814@qq.com谢谢楼主

  • budaobu

    2016-08-29 10:11

    assingle131458@vip.qq.com ,感谢

  • 刘婧刘婧刘婧

    2016-08-19 16:22

    172205810@qq.com 求发!

  • ETouchLO

    2016-08-19 16:13

    youtian_lu@163.com,非常感谢

  • 故作坚强

    2016-08-19 14:24

    359407795@qq.com求发。非常感谢!

  • 哟嘿设计

    2016-08-18 17:53

    @Laborer: 好的~谢谢分享啊~

  • Laborer

    2016-08-18 16:06

    @哟嘿设计: 已经发送到邮箱了哦,之后还会不定期更新,敬请关注

  • Laborer

    2016-08-18 16:06

    @Kevin沈芃丞: 已经发至邮箱

  • 哟嘿设计

    2016-08-17 21:25

    450501824@qq.com 发我一份呗~3Q

  • Kevin沈芃丞

    2016-08-17 16:16

    1217452549@qq.com求发!!

  • Laborer

    2016-08-06 23:32

    @早晨从中午开始s: 已发送,请注意查收邮件

  • 早晨从中午开始s

    2016-08-06 17:39

    2227069798@qq.com求发

  • 羽翔hj

    2016-08-06 09:21

    @Laborer: 谢谢

  • Laborer

    2016-08-05 10:24

    @羽翔hj: 带流程的线框图做的好看是给别人看的,真的自己要用不会画成这种样子,软件不管是PS、Sketch、Axure都能做,你如果要做这种流程,你可以先在sketch或者Axure里画出来,然后再到PS里调效果

  • 羽翔hj

    2016-08-05 10:06

    问题在于那些用软件绘制的线框图,尤其是带流程的,是用什么软件做出来的,不会是用ps一个个画的吧?

  • Laborer

    2016-08-04 09:03

    @qwe123123: 谢谢,

  • qwe123123

    2016-08-04 08:54

    @qwe123123:

  • qwe123123

    2016-08-04 08:54

    不错啊

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票