美文网首页嵌牛IT观察
《交互》如何呈现功能和定义框架

《交互》如何呈现功能和定义框架

作者: 错错对 | 来源:发表于2017-12-13 11:01 被阅读0次

姓名:王怀帅  学号:16040410035

转载自:http://www.jianshu.com/p/6ae497a5a3ec=有修改

【嵌牛导读】:通过构建故事版,把人物模型带入场景,来描绘交互过程,并从过程中提炼需求点,紧接着开始设计

【嵌牛鼻子】:交互、功能、定义框架

【嵌牛提问】:当形式设计和行为设计必须保持一致的时候,我们如何来定义视觉框架和交互框架?

【嵌牛正文】:一.定义交互框架

交互框架是指利用场景和需求来构建屏幕和行为草图,完成框架的设计。

按照以往管理,每块内容都有明确详细的操作步骤,来指导大家如何完成一件事,如何把一件复杂的事情分门别类的拆分,从而组合成一个明确的流程。

同样交互设计框架主要分为6大步骤。

1.定义形势姿态和输入法

交互设计的最终内容主要呈现在界面上,而界面的载体千差万别,有手机,电脑,仪表盘,机械操作盘,智能家具等一系列有界面的产品。

再开始定义框架前要详细的了解所设计的平台的熟悉,分辨率,尺寸,交互硬件的,是否彩色,以及再哪些场景下使用。比如车载系统,就要注意为不妨碍司机的注意力,内容要简洁且字体大明显,防止过多关注而发生交通事故。

2.定义功能性和数据元素

功能性和数据元素是指把具体的需求转化成界面上的语言,呈现给用户。使用用户能够理解的语言层级交互来设计界面,完成用户的任务。

我们需要从故事板和场景中提取功能和数据元素,把人物模型想象成真人,来描述他整个操作流程,如何一步步的完成目标。会遇到哪些问题,如何解决,如何反馈给用户。

在这过程中需要遵循设计四原则:

最有效的满足用户的目标;

最有效的满足设计原则;

最适合当前技术和成本考量;

能满足其他条件。

而且再把需求转化成界面时,一定要遵守设计和交互原则,不要轻易改变,迎合用户习惯,减少学习成本。

3.确定功能和层级

当我们有了解平台和功能数据时,就要开始分门别类,根据平台的大小,属性,姿态,外型使用环境,内容优先级进行组织和安排。

同一个界面为了达成一个目标,需要一系列的连环操作,需要确定优先层级顺序。

比如哪些元素需要大面积使用?

哪些元素可以优化工作流?

元素使用顺序能否改变?

是否符合交互原则?

元素的排布是否有助于人物模型做出决策。

4.勾画交互框架

把功能内容数据,以及相关组织和层级确认好后,心中已经有了大致的框架内容,此时只需要拿笔把他快速的画出来,变成视觉稿,来进行反复的敲酌。

勾画交互框架从先整体全局开始,多次反复的修改确认,先忽略细节,关键要快速协作可视性强,及时迭代更新。

5.构建关键路线和情景剧本

为了避免空想臆想,而乱了方向。需要以目标为导向,把人物模型放入场景构件一个故事板,详细具体的描绘操作流程,一步步的如何点击,具有多细节的场景。

第五步和第四步需要反复修改迭代细节,便想象场景便构件故事板,从故事板中想出最优解决方案,勾画原型落实视觉,共同商讨,继而不断精修。

6.验证性场景检查

前面我们主要考虑的是主要操作流程,常用场景,为了兼顾替代场景,不常用但又必须的场景(比如删除功能),边缘场景,我们需要把前面的确认方案放入这类场景做检测,而评估兼容性,以及为额外情况找出专门解决方案。

二.定义视觉框架

视觉框架主要是针对视觉语言,品牌概念,产品领域的风格等研究确定。

1.开发视觉体验特征

视觉特征主要包括产品的音调,语音和品牌承诺。下面有9个具体步骤清晰的列出如何确认视觉体验特征。

1). 收集竞品,形成品牌大纲;

2). 收集大品牌,某领域的巨头,研究如何在产品设计中贯彻品牌元素;

3). 研究同类竞品产品的界面内容和服务;

4). 定性研究受访者,是否“友好”“容易”;

5). 讨论示例的成功,失败或争议,寻找原因;

6). 确定定义,产品所需要的少量形容词,比如年轻,活力,稳重等;

7). 记录多义词的具体含义;

8). 思考竞品,在自己产品上保证有独特性;

9). 团队一起互相协助讨论产品特性。

2.开发视觉语言研究

视觉语言主要包括定义颜色,类型,控件。此时一般拿出3-5种完全不同的视觉方案,包含主要操作流程和主要界面,选择合适的视觉方案,确认后延续到后续的设计中,保持视觉的统一性。

把市场营销风格指导转换成对用户交互产品或网站有意义的形式和感觉。

3.将已选择的视觉风格用于屏幕原型

把确认好的视觉方案放入实际使用场景中,综合协调把控整体感觉。

还有两种是定义工业和服务框架,主要是工业设计中涉及多种多样的载体和场景,而非手机,电脑大众化的场景,则需要专门的研究对待。

相关文章

  • 《交互》如何呈现功能和定义框架

    姓名:王怀帅 学号:16040410035 转载自:http://www.jianshu.com/p/6ae497...

  • 《交互》5.如何呈现功能和定义框架

    前言 上章我们主要学会通过构建故事版,把人物模型带入场景,来描绘交互过程。并从过程中提炼需求点。那接下来便要开始设...

  • 前端学前知识了解

    在在互联网公司中,前端负责页面呈现和交互功能。 前端要根据设计稿进行对页面的还原,呈现和实现交互功能,在进行过程中...

  • 2019-04-22框架层

    框架层关注的是将要呈现给用户的模式和顺序,功能型关注交互设计;信息型关注信息架构。

  • #hello,JS:13-01技术方案:Ajax 使用和原理

    前端和后端如何交互,从网站的层面上,如何去呈现?如何和后端去交互?如何向后端获取数据和请求?需要一种方法。 一、页...

  • 接口测试

    1.接口的定义、功能和关注点定义:前后端就行数据交互的窗口功能:数据交互关注点:输入参数和输出参数2.测试模型V型...

  • 京东小程序产品规范

    产品交互风格定义 交互定义 用户交互的重要性 产品功能是否能和用户做好交互,重要是能够引导用户,给用户意料中的反馈...

  • iOS 开发·核心动画相关类

    CALayer 所属 QuartzCore框架。 UIView 有交互和显示功能, CALayer 是用来显示 添...

  • 原型图:手表地图导航功能定义

    目录 一、功能概述 1.1 功能框架 1.2 功能介绍 1.3 名词介绍 二、App和手表及原型图交互 2.1 A...

  • 怎么定义和分析一款软件产品的交互方式?

    怎么定义和分析一款软件产品的交互方式? 1、定义产品的交互方式可以命名为某某功能 2、分析茶农的交互方式需要先给出...

网友评论

    本文标题:《交互》如何呈现功能和定义框架

    本文链接:https://www.haomeiwen.com/subject/hnzmixtx.html