3个步骤,构建设计产品的框架 如何构建产品体系
yuyutoo 2024-10-27 16:56 4 浏览 0 评论
设计框架包括交互框架及视觉设计框架,框架设计应首先关注总体再去优化细节,最后验证与测试设计。
一、构建设计框架
在目标导向设计中,不要一上来就直接跳入细节设计,而应站在一个高层次上关注用户界面和相关行为的整体架构,我们把这叫做设计框架。
设计框架包括交互框架及视觉设计框架,在此阶段中,交互设计者利用场景和需求来创建屏幕和行为草图,视觉设计者使用语言研究开发视觉设计框架。
过早的把重点放在小细节、小部件和具体的产品交互上,会妨碍框架设计。我们应该采取自上而下的方式,首先关注总体,提出低保真而不包含具体细节的方案。低保真更容易收集用户反馈。
满足用户需求的方案满足以下条件
(1) 最有效满足用户目标
(2) 最符合设计原则
(3) 最适合当前的技术水平和成本考量
(4) 最能满足其他条件
对于需求向功能元素的转变来说,一般性的设计原则和具体的交互模式很重要
1. 勾画交互框架
勾画交互框架,又称为“方格图阶段”,开始阶段一定要看到整体且高层次的框架。在最终选择最佳方案前,尝试采用几种不同并列并用于验证性的场景,通常是有效的做法。在设计的初期花费过多精力研究复杂的细节,会阻碍设计者改变思路。
勾画大致的框架是一个反复的过程,最好由一到两个交互设计(理想情况下由一个交互设计者和一个“设计沟通者”,即根据设计叙述来思考的人组成)、一个视觉设计或者工业设计师组成的合作小组来进行。
在框架勾画阶段,无论使用什么工具,关键是要快速、协作型和可视性要强,并且易于迭代和分享。
与目标导向情景场景不同,关键线路场景以任务为导向,关注情景场景中广泛描述和暗含的任务细节。这不意味着我们可以忽视目标,目标和人物模型需求始终都是整个设计过程的度量尺,用来删除不必要的任务,优化必要任务。不过,关键线路情境剧本必须在细节上严谨地描述每个主要交互的精确行为,并提供每个主要线路的走查。
2. 定义视觉设计框架
(1) 开发视觉体验特征
(2) 开发视觉语言研究,在此阶段,交互设计通常只有一个最优的行为框架。与此不同,首次给涉众展现视觉时,我们通常会拿出3~5套方案。这些方案的视觉风格不同,但每种都包含了体验关键字和目标。使用体验特征进行设计方案的开发,能够在保持品牌含义一致性的同时,对体验进行描述,从而避免涉众根据个人喜欢和偏见进行决策。
通常,我们会开发一两个极端的备选方案,在某一方向上把外观和感觉推向极致,这会使不同方案的特点更加鲜明。
(3) 将已选择的视觉风格应用于屏幕原型
3. 定义服务设计框架
(1) 描述客户旅程(人物模型完成一个任务所需要的主要路径、次要路径,他们的目的)
(2) 创建服务蓝图(泳道图)
(3) 创建体验原型
4. 定义服务设计框架
(1) 描述客户旅程(人物模型完成一个任务所需要的主要路径、次要路径,他们的目的)
(2) 创建服务蓝图(泳道图)
(3) 创建体验原型
二、细化外形和行为
完成坚实、稳定的框架定义后,设计者会发现设计的剩余部分都变得明朗起来,关键线路场景的每一次重复都使得设计更加细化,产品的整体连贯性和流畅性也更加顺畅。这个阶段是转换到提炼阶段的过渡期,设计已经初具模型。
在这阶段,要关注更深且更细微的方面,并且设计者要形成自己的组件库(设计指南)
三、验证与测试设计
用户反馈和可用性测试对于发现交互框架中的主要问题及某些方面的细化,是很有帮助的。并且对于有些操作的微调也很有好处。
设计者参与可用性研究
- 将重点放在设计过程中的重要问题上
- 使用任务角色和其特性制定实验参与者的标准
- 运用场景开发用户任务
- 观察测试过程
- 和其他人一道共同分析研究中的发现
本文由 @SWM 原创发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自Unsplash,基于CC0协议。
相关推荐
- 建筑福利-pdf转dwg格式转换器,再也不用描图-极客青年
-
作为一名经常熬夜画图的建筑狗或者cad用户,你体验过pdf图纸描图到cad吗?前几天一个老同学找我,说他的毕业设计需要我帮忙,发给我一份pdf图纸文件,问我怎么把pdf图纸转换成dwg格式。机智的我灵...
- 想学 HTML,不知从何入手?看完这篇文章你就知道了
-
很多人都说HTML是一门很简单的语言,看看书,看看视频就能读懂。但是,如果你完全没有接触过,就想通过看一遍教程,背背标签,想要完全了解HTML,真的有点太天真了。HTML中文...
- 「前端」HTML之结构
-
今天继续为大家分享前端的知识,如果对前端比较感兴趣的小伙伴,可以关注我,我会更大家继续分享更多与前端相关的内容,当然如果内容中又不当的或者文字错误的,欢迎大家在评论区留言,我会及时修改纠正。1.初识H...
- 手把手教你使用Python网络爬虫下载一本小说(附源码)
-
大家好,我是Python进阶者。前言前几天【磐奚鸟】大佬在群里分享了一个抓取小说的代码,感觉还是蛮不错的,这里分享给大家学习。...
- 用于处理pdf文件格式的转换器
-
在上传过程中如果单个文件太大则容易中断,而且文件太大的话对与存储也有些弊端。那么我们应该想到将文件进行压缩(注意这里压缩指的是不改变文件格式的压缩,而不是用变成压缩文件。这里就将以下用专门的软件压缩P...
- 乐书:在线 Kindle 电子书制作和转换工具
-
之前Kindle伴侣曾推荐过可以在Windows和Mac系统平台上运行的kindle电子书制作软件Sigil(教程),用它可以制作出高质量的的ePub格式电子书,当然最后还需要通...
- 付费文档怎么下载?教你5种方法,任意下载全网资源
-
网上查资料的时候,经常遇到需要注册登录或者付费的才能复制或者是下载,遇到这种情况大多数人都会选择重新查。...
- 捡来的知识!3种方法随便复制网页内容,白嫖真香呀
-
网上的资源真的多,所以许多人常常会从网上找资料。我们看到感兴趣的内容,第一时间可能会想要收入囊中。比如说截个图啊,或者挑选有意思的句子复制粘贴,记录下来。可是,有些时候,却会遇到这样的情况:1、内容不...
- AI的使用,生成HTML网页。
-
利用deepseek,豆包,kimi以及通义千问,写入相同的需求。【写一个网页,实现抽奖功能,点击“开始”,按键显示“停止”,姓名开始显示在屏幕上,人员包括:“张三”,“里斯”,“Bool”,“流水废...
- pdf转换成jpg转换器 4.1 官方正式版
-
pdf转换成jpg工具软件简介pdf转换成jpg转换器是一款界面简洁,操作方便的pdf转换成jpg转换器。pdf转换成jpg转换器可以将PDF文档转换为JPG,BMP,GIF,PNG,TIF图片文件。...
- 办公必备的office转换成pdf转换器怎么用?
-
2016-02-2415:53:37南方报道网评论(我要点评)字体刚从校园走出社会,对于快节奏的办公环境,难免会觉得有些吃力。在起步阶段力求将手头上的事情按时完工不出错,但是渐渐的你会发现,别人只...
- 为什么PDF转Word大多要收费?
-
PDF转Word大多都要收费?并非主要是因为技术上的难度,而是基于多方面的商业和版权考虑的,下面给大家浅分析下原因:...
- 如何用python生成简单的html report报告
-
前提:用python写了一个简单的log分析,主要也就是查询一些key,value出来,后面也可以根据需求增加。查询出来后,为了好看,搞个html表格来显示。需要的组件:jinja2flask...
- 学用系列|如何搞定word批量替换修改和格式转换?这里一站搞定
-
想必不少朋友都会碰到批量修改word文档内容、压缩文档图片、文件格式转换等重复性文档处理工作的需要,今天胖胖老师就推荐给大家一个免费工具XCLWinKits,一站搞定你所有的需要。什么是XCLWinK...
- 这款PDF文档转换神器,能帮你解决PDF使用中的许多难点
-
不管是平时的学习还是工作,相信许多朋友都经常接触PDF文件。可以说,PDF文件在我们的日常办公学习过程中的重要性和Word文档一样重要。在之前的更新中,小编介绍了几款非常不错的PDF文档格式转换软件,...
你 发表评论:
欢迎- 一周热门
-
-
前端面试:iframe 的优缺点? iframe有那些缺点
-
带斜线的表头制作好了,如何填充内容?这几种方法你更喜欢哪个?
-
漫学笔记之PHP.ini常用的配置信息
-
其实模版网站在开发工作中很重要,推荐几个参考站给大家
-
推荐7个模板代码和其他游戏源码下载的网址
-
[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗
-
正在学习使用python搭建自动化测试框架?这个系统包你可能会用到
-
织梦(Dedecms)建站教程 织梦建站详细步骤
-
【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)
-
2024PHP在线客服系统源码+完全开源 带详细搭建教程
-
- 最近发表
- 标签列表
-
- 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)