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

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

线框图是在视觉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》如何让用户保持专注度和效率

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,122评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,070评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,491评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,636评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,676评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,541评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,292评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,211评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,655评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,684评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,295评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2 355

推荐阅读更多精彩内容