@产品设计那些事儿首页投稿(暂停使用,暂停投稿)@IT·互联网

《交互9》线框图的设计指南

2017-12-25  本文已影响413人  视觉笔记糕小糕

一.谁需要,为什么需要线框图

线框图是在视觉UI之前需要做的,为避免视觉的反复改稿,以及预算开发成本,和相关部门讨论方案可行性,需要快速高效的画出产品设计方案。让工作中以最低成本,最快反馈速度,协作。

视觉设计师需要线框图再根据品牌调性,统一视觉元素,细化图标,和突出产品的定位和品调。

后端开发需要根据线框图确认功能内容层级框架,整体交互流程,预估功能点实现的难易程度。

运营,市场分析师用线框图确认产品是否实现商业目标,重点内容是否被突出,是否符合市场的当前热点趋势。

总结来说,线框图解决问题主要是:

  1. 结构:各页面如何安放?
  2. 内容:页面显示什么?
  3. 信息层级:如何组织显示相关内容?
  4. 功能:界面是如何工作的?
  5. 行为:如何与用户交互,运转 ?

二.线框图的种类和软件

线框图主要分为手绘和软件绘制。
分为低保真原型,高保真原型,媒体原型,可直接交互原型。

例如方框图,灰框图,文本高保真,图片高保真,色彩高保真等。

内容层级越丰富,细节涉及点越多,越接近视觉高,越保真。但它的目的是上述所说关注结构,内容,层级,功能,行为。在绘制原型时切莫注重过多视觉细节,本末倒置,反而影响思路和效率。

常见的非软件工具:

1.草图 or 白板
来自网络

优点:效率,速度,灵活无干扰;
缺点:重复工作低保真,不标准,有限的细节等

可增加工具,类似使用纸质原型,和打印以及交互设计尺子,提升草图绘制效率和标准化。

但总体草图绘制无干扰元素,专注到原型本身,适合于头脑风暴,前期初步方案构思,确认,以及收集灵感点子。

使用工具和打印原型纸是为了视觉更美观,标准化,绘制更效率速度。

2.视觉设计软件工具
来自网络

视觉设计软件常指:photoshop,Illustrator,sketch等视觉作图软件。

对于熟悉此类软件的设计师,基本上可实现所有想到的功能设计,也可嵌套常用模版提升效率。不熟悉的设计师,则需要很大入门学习软件操作成本。

缺点是:软件本身功能庞大累赘,不够轻便,切不方便团队协作。无法制作可点击的交互原型。

3.原型设计软件工具

Axure:无论是产品经理,交互是设计师最常用的是Axure,它可加载模版原型,以及标注说明,绘制流程图,众多素材图标元素选择。可导出网页直接分享团队协作方便。是目前工作使用概率占比较大的原型软件。

墨刀:最近新尝试的一款线上原型绘制工具,对于新手或Axure不熟练的设计师来说,在axure2小时实现的界面,也许墨刀让你1小时实现。

软件本身嵌套大量设计模版,界面更加简洁,操作视觉化,可在手机上浏览效果。直接连线跳转,绘制可点击的交互原型。
可直接导出原型流程图,并分享为网页或图片。团队在线协作,直接共享同一个项目,实时更新反馈。支持直接从sketch中导入设计稿。

缺点:多为移动端原型设计,不适合电脑端网页原型,不适合内容页面量大的原型。

三.线框图设计原则

交互设计需要始终记得我们的核心用户是谁?
用户的需求和目标是什么?
商业目标是什么?
产品设计模式是否可以借鉴?
实现当下功能会有哪些问题和困难?
哪些需求是为了满足用户?
限制条件是什么?例如时间,资源,技能,薪水等。

遵循的原则有:
1.设置预期效果不仅是目标。
无需设置太过详细的目标,抠的太死减少发挥控制,受制于流程。

2.从用户的需求入手:设计和艺术的区别在于设计更能卓有成效的解决问题。提前明确真实用户实际场景的需求。避免添加个人想当然的使用习性。

3.专注考虑产品如何运作:重点不是你的产品有什么功能。例如注册不是让这个功能如何完善,而是如何让用户无痛快捷顺利的注册完成。支付时如何让用户放心支付;按钮不仅仅是功能性按钮,而是如何吸引引导用户完成操作等,让每步设计充满价值。

4.从简单的开始,保持简单:明确产品的特色,吸引用户记住产品。前期简单有利于更多时间思考测试,找出最佳解决办法。因为简单而专注极致。

5.改变并不等于提高:并非所有的改变都能带来提高,有些细节无论如何修改都难满足用户,产品无实质性的进展。需要不断深入挖掘产品问题,剖析本质原因。这是一个不断尝试测试调研试错的循环过程。

6.一切元素皆有意义:草图线框图原型都是用来交流的语言。界面上颜色,字体,大小文本都有自己的意义。

7.一致不等于同质化:一个产品使用同一种设计语言设计模式,让用户熟悉习惯,产生信任感,统一感。
8.低保真原型未必不好:不被花哨炫技遮挡交互的本质,低保真效率,探索更多可能。
9.多实验测试:多走流程才能发现捷径和创新。
10.考虑开发问题:仰望星空,也要脚踏实地。只有被实现使用才有价值,注重技术因素。

手绘导图笔记

四.线框图始终是一个工具

不必太过于追求完美,原型是表达产品理念而非最终形式。
大家不在意概念元素是否精美,而是未完成的概念合适才能完成,完成后有多精致。线框图只是用来组织逻辑,规划架构,容纳创意的容器。
一旦确认后,就要赶紧投入到实现阶段,产出成本被使用才能体现它最终的价值。

前期回顾:
第1章:《交互》1.产品设计开发是怎样的过程
第2章:《交互》2.如何理顺问题,搞清设计目标
第3章:《交互》3.如何建立有效的人物模型
第4章:《交互》4.如何构建场景和挖掘设计需求
第5章:《交互》5.如何呈现功能和定义框架
第6章:《交互6》如何设定良好产品的行为基础
第7章:《交互7》数字产品礼仪和做人感悟
第8章:《交互8》如何让用户保持专注度和效率

我是糕小糕,糕小糕,正在用思维导图阅读法,攻克经典书籍。希望整理的对你有用。
正所谓:书宜杂读,业宜精钻
你知道吗,你的赞,会让我欣喜若狂

上一篇下一篇

猜你喜欢

热点阅读