3个步骤,构建设计产品的框架 如何构建产品体系
yuyutoo 2024-10-27 16:56 6 浏览 0 评论
设计框架包括交互框架及视觉设计框架,框架设计应首先关注总体再去优化细节,最后验证与测试设计。
一、构建设计框架
在目标导向设计中,不要一上来就直接跳入细节设计,而应站在一个高层次上关注用户界面和相关行为的整体架构,我们把这叫做设计框架。
设计框架包括交互框架及视觉设计框架,在此阶段中,交互设计者利用场景和需求来创建屏幕和行为草图,视觉设计者使用语言研究开发视觉设计框架。
过早的把重点放在小细节、小部件和具体的产品交互上,会妨碍框架设计。我们应该采取自上而下的方式,首先关注总体,提出低保真而不包含具体细节的方案。低保真更容易收集用户反馈。
满足用户需求的方案满足以下条件
(1) 最有效满足用户目标
(2) 最符合设计原则
(3) 最适合当前的技术水平和成本考量
(4) 最能满足其他条件
对于需求向功能元素的转变来说,一般性的设计原则和具体的交互模式很重要
1. 勾画交互框架
勾画交互框架,又称为“方格图阶段”,开始阶段一定要看到整体且高层次的框架。在最终选择最佳方案前,尝试采用几种不同并列并用于验证性的场景,通常是有效的做法。在设计的初期花费过多精力研究复杂的细节,会阻碍设计者改变思路。
勾画大致的框架是一个反复的过程,最好由一到两个交互设计(理想情况下由一个交互设计者和一个“设计沟通者”,即根据设计叙述来思考的人组成)、一个视觉设计或者工业设计师组成的合作小组来进行。
在框架勾画阶段,无论使用什么工具,关键是要快速、协作型和可视性要强,并且易于迭代和分享。
与目标导向情景场景不同,关键线路场景以任务为导向,关注情景场景中广泛描述和暗含的任务细节。这不意味着我们可以忽视目标,目标和人物模型需求始终都是整个设计过程的度量尺,用来删除不必要的任务,优化必要任务。不过,关键线路情境剧本必须在细节上严谨地描述每个主要交互的精确行为,并提供每个主要线路的走查。
2. 定义视觉设计框架
(1) 开发视觉体验特征
(2) 开发视觉语言研究,在此阶段,交互设计通常只有一个最优的行为框架。与此不同,首次给涉众展现视觉时,我们通常会拿出3~5套方案。这些方案的视觉风格不同,但每种都包含了体验关键字和目标。使用体验特征进行设计方案的开发,能够在保持品牌含义一致性的同时,对体验进行描述,从而避免涉众根据个人喜欢和偏见进行决策。
通常,我们会开发一两个极端的备选方案,在某一方向上把外观和感觉推向极致,这会使不同方案的特点更加鲜明。
(3) 将已选择的视觉风格应用于屏幕原型
3. 定义服务设计框架
(1) 描述客户旅程(人物模型完成一个任务所需要的主要路径、次要路径,他们的目的)
(2) 创建服务蓝图(泳道图)
(3) 创建体验原型
4. 定义服务设计框架
(1) 描述客户旅程(人物模型完成一个任务所需要的主要路径、次要路径,他们的目的)
(2) 创建服务蓝图(泳道图)
(3) 创建体验原型
二、细化外形和行为
完成坚实、稳定的框架定义后,设计者会发现设计的剩余部分都变得明朗起来,关键线路场景的每一次重复都使得设计更加细化,产品的整体连贯性和流畅性也更加顺畅。这个阶段是转换到提炼阶段的过渡期,设计已经初具模型。
在这阶段,要关注更深且更细微的方面,并且设计者要形成自己的组件库(设计指南)
三、验证与测试设计
用户反馈和可用性测试对于发现交互框架中的主要问题及某些方面的细化,是很有帮助的。并且对于有些操作的微调也很有好处。
设计者参与可用性研究
- 将重点放在设计过程中的重要问题上
- 使用任务角色和其特性制定实验参与者的标准
- 运用场景开发用户任务
- 观察测试过程
- 和其他人一道共同分析研究中的发现
本文由 @SWM 原创发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自Unsplash,基于CC0协议。
相关推荐
- 全局和隐式 using 指令详解(全局命令)
-
1.什么是全局和隐式using?在.NET6及更高版本中,Microsoft引入了...
- 请停止微服务,做好单体的模块化才是王道:Spring Modulith介绍
-
1、介绍模块化单体是一种架构风格,代码是根据模块的概念构成的。对于许多组织而言,模块化单体可能是一个很好的选择。它有助于保持一定程度的独立性,这有助于我们在需要的时候轻松过渡到微服务架构。Spri...
- ASP.NET程序集引用之痛:版本冲突、依赖地狱等解析与实战
-
我是一位多年后端经验的工程师,其中前几年用ASP.NET...
- .NET AOT 详解(.net 6 aot)
-
简介AOT(Ahead-Of-TimeCompilation)是一种将代码直接编译为机器码的技术,与传统的...
- 一款基于Yii2开发的免费商城系统(一款基于yii2开发的免费商城系统是什么)
-
哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!...
- asar归档解包(游戏arc文件解包)
-
要学习Electron逆向,首先要有一个Electron开发的程序的发布的包,这里就以其官方的electron-quick-start作为例子来进行一下逆向的过程。...
- 在PyCharm 中免费集成Amazon CodeWhisperer
-
CodeWhisperer是Amazon发布的一款免费的AI编程辅助小工具,可在你的集成开发环境(IDE)中生成实时单行或全函数代码建议,帮助你快速构建软件。简单来说,AmazonCodeWhi...
- 2014年最优秀JavaScript编辑器大盘点
-
1.WebstormWebStorm是一种轻量级的、功能强大的IDE,为Node.js复杂的客户端开发和服务器端开发提供完美的解决方案。WebStorm的智能代码编辑器支持JavaScript,...
- 基于springboot、tio、oauth2.0前端vuede 超轻量级聊天软件分享
-
项目简介:基于JS的超轻量级聊天软件。前端:vue、iview、electron实现的PC桌面版聊天程序,主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket。支持...
- JetBrains Toolbox推出全新产品订阅授权模式
-
捷克知名软件开发公司JetBrains最为人所熟知的产品是Java编程语言开发撰写时所用的集成开发环境IntelliJIDEA,相信很多开发者都有所了解。而近期自2015年11月2日起,JetBr...
- idea最新激活jetbrains-agent.jar包,亲测有效
-
这里分享一个2019.3.3版本的jetbrains-agent.jar,亲测有效,在网上找了很多都不能使用,终于找到一个可以使用的了,这里分享一下具体激活步骤,此方法适用于Jebrains家所有产品...
- CountDownTimer的理解(countdowntomars)
-
CountDownTimer是android开发常用的计时类,按照注释中的说明使用方法如下:kotlin:object:CountDownTimer(30000,1000){...
- 反射为什么性能会很慢?(反射时为什么会越来越长)
-
1.背景前段时间维护一个5、6年前的项目,项目总是在某些功能使用上不尽人意,性能上总是差一些,仔细过了一下代码发现使用了不少封装好的工具类,工具类里面用了好多的反射,反射会影响到执行效率吗?盲猜了一...
- btrace 开源!基于 Systrace 高性能 Trace 工具
-
介绍btrace(又名RheaTrace)是抖音基础技术团队自研的一款高性能AndroidTrace工具,它基于Systrace实现,并针对Systrace不足之处加以改进,核心改进...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- .NET 奇葩问题调试经历之3——使用了grpc通讯类库后,内存一直增长......
- 全局和隐式 using 指令详解(全局命令)
- 请停止微服务,做好单体的模块化才是王道:Spring Modulith介绍
- ASP.NET程序集引用之痛:版本冲突、依赖地狱等解析与实战
- .NET AOT 详解(.net 6 aot)
- 一款基于Yii2开发的免费商城系统(一款基于yii2开发的免费商城系统是什么)
- asar归档解包(游戏arc文件解包)
- 在PyCharm 中免费集成Amazon CodeWhisperer
- 2014年最优秀JavaScript编辑器大盘点
- 基于springboot、tio、oauth2.0前端vuede 超轻量级聊天软件分享
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)