百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

3个步骤,构建设计产品的框架 如何构建产品体系

yuyutoo 2024-10-27 16:56 3 浏览 0 评论

设计框架包括交互框架及视觉设计框架,框架设计应首先关注总体再去优化细节,最后验证与测试设计。

一、构建设计框架

在目标导向设计中,不要一上来就直接跳入细节设计,而应站在一个高层次上关注用户界面和相关行为的整体架构,我们把这叫做设计框架。

设计框架包括交互框架及视觉设计框架,在此阶段中,交互设计者利用场景和需求来创建屏幕和行为草图,视觉设计者使用语言研究开发视觉设计框架。

过早的把重点放在小细节、小部件和具体的产品交互上,会妨碍框架设计。我们应该采取自上而下的方式,首先关注总体,提出低保真而不包含具体细节的方案。低保真更容易收集用户反馈。

满足用户需求的方案满足以下条件

(1) 最有效满足用户目标

(2) 最符合设计原则

(3) 最适合当前的技术水平和成本考量

(4) 最能满足其他条件

对于需求向功能元素的转变来说,一般性的设计原则和具体的交互模式很重要

1. 勾画交互框架

勾画交互框架,又称为“方格图阶段”,开始阶段一定要看到整体且高层次的框架。在最终选择最佳方案前,尝试采用几种不同并列并用于验证性的场景,通常是有效的做法。在设计的初期花费过多精力研究复杂的细节,会阻碍设计者改变思路。

勾画大致的框架是一个反复的过程,最好由一到两个交互设计(理想情况下由一个交互设计者和一个“设计沟通者”,即根据设计叙述来思考的人组成)、一个视觉设计或者工业设计师组成的合作小组来进行。

在框架勾画阶段,无论使用什么工具,关键是要快速、协作型和可视性要强,并且易于迭代和分享。

与目标导向情景场景不同,关键线路场景以任务为导向,关注情景场景中广泛描述和暗含的任务细节。这不意味着我们可以忽视目标,目标和人物模型需求始终都是整个设计过程的度量尺,用来删除不必要的任务,优化必要任务。不过,关键线路情境剧本必须在细节上严谨地描述每个主要交互的精确行为,并提供每个主要线路的走查。

2. 定义视觉设计框架

(1) 开发视觉体验特征

(2) 开发视觉语言研究,在此阶段,交互设计通常只有一个最优的行为框架。与此不同,首次给涉众展现视觉时,我们通常会拿出3~5套方案。这些方案的视觉风格不同,但每种都包含了体验关键字和目标。使用体验特征进行设计方案的开发,能够在保持品牌含义一致性的同时,对体验进行描述,从而避免涉众根据个人喜欢和偏见进行决策。

通常,我们会开发一两个极端的备选方案,在某一方向上把外观和感觉推向极致,这会使不同方案的特点更加鲜明。

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

3. 定义服务设计框架

(1) 描述客户旅程(人物模型完成一个任务所需要的主要路径、次要路径,他们的目的)

(2) 创建服务蓝图(泳道图)

(3) 创建体验原型

4. 定义服务设计框架

(1) 描述客户旅程(人物模型完成一个任务所需要的主要路径、次要路径,他们的目的)

(2) 创建服务蓝图(泳道图)

(3) 创建体验原型

二、细化外形和行为

完成坚实、稳定的框架定义后,设计者会发现设计的剩余部分都变得明朗起来,关键线路场景的每一次重复都使得设计更加细化,产品的整体连贯性和流畅性也更加顺畅。这个阶段是转换到提炼阶段的过渡期,设计已经初具模型。

在这阶段,要关注更深且更细微的方面,并且设计者要形成自己的组件库(设计指南)

三、验证与测试设计

用户反馈和可用性测试对于发现交互框架中的主要问题及某些方面的细化,是很有帮助的。并且对于有些操作的微调也很有好处。

设计者参与可用性研究

  1. 将重点放在设计过程中的重要问题上
  2. 使用任务角色和其特性制定实验参与者的标准
  3. 运用场景开发用户任务
  4. 观察测试过程
  5. 和其他人一道共同分析研究中的发现

本文由 @SWM 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

相关推荐

如何在HTML中使用JavaScript:从基础到高级的全面指南!

“这里是云端源想IT,帮你...

推荐9个Github上热门的CSS开源框架

大家好,我是Echa。...

前端基础知识之“CSS是什么?”_前端css js

...

硬核!知网首篇被引过万的论文讲了啥?作者什么来头?

整理|袁小华近日,知网首篇被引量破万的中文论文及其作者备受关注。知网中心网站数据显示,截至2021年7月23日,由华南师范大学教授温忠麟等人发表在《心理学报》2004年05期上的学术论文“中介效应检验...

为什么我推荐使用JSX开发Vue3_为什么用vue不用jquery

在很长的一段时间中,Vue官方都以简单上手作为其推广的重点。这确实给Vue带来了非常大的用户量,尤其是最追求需求开发效率,往往不那么在意工程代码质量的国内中小企业中,Vue占据的份额极速增长...

【干货】一文详解html和css,前端开发需要哪些技术?
【干货】一文详解html和css,前端开发需要哪些技术?

网站开发简介...

2025-02-20 18:34 yuyutoo

分享几个css实用技巧_cssli

本篇将介绍几个css小技巧,目录如下:自定义引用标签的符号重置所有标签样式...

如何在浏览器中运行 .NET_怎么用浏览器运行代码

概述:...

前端-干货分享:更牛逼的CSS管理方法-层(CSS Layers)

使用CSS最困难的部分之一是处理CSS的权重值,它可以决定到底哪条规则会最终被应用,尤其是如果你想在Bootstrap这样的框架中覆盖其已有样式,更加显得麻烦。不过随着CSS层的引入,这一...

HTML 基础标签库_html标签基本结构
HTML 基础标签库_html标签基本结构

HTML标题HTML标题(Heading)是通过-...

2025-02-20 18:34 yuyutoo

前端css面试20道常见考题_高级前端css面试题

1.请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?display:flex;在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩flex:1;子元素设置...

vue引入外部js文件并使用_vue3 引入外部js

要在Vue中引入外部的JavaScript文件,可以使用以下几种方法:1.使用``标签引入外部的JavaScript文件。在Vue的HTML模板中,可以直接使用``标签来引入外部的JavaScrip...

网页设计得懂css的规范_html+css网页设计

在初级的前端工作人员,刚入职的时候,可能在学习前端技术,写代码不是否那么的规范,而在工作中,命名的规范的尤为重要,它直接与你的代码质量挂钩。网上也受很多,但比较杂乱,在加上每年的命名都会发生一变化。...

Google在Chrome中引入HTML 5.1标记

虽然负责制定Web标准的WorldWideWebConsortium(W3C)尚未宣布HTML5正式推荐规格,而Google已经迁移到了HTML5.1。即将发布的Chrome38将引入H...

HTML DOM 引用( ) 对象_html中如何引用js

引用对象引用对象定义了一个同内联元素的HTML引用。标签定义短的引用。元素经常在引用的内容周围添加引号。HTML文档中的每一个标签,都会创建一个引用对象。...

取消回复欢迎 发表评论: