教你如何做原型设计

33 篇文章 2 订阅
订阅专栏

一、原型图核心功能:需求可视化

网站原型图设计是【需求可视化】的一个过程,是让网站的初步构思有一个可视化的展示原型图是网站成型之前的一个简单框架,网页内的重要元素和板块功能将会通过绘制原型图,进行简单的布局和排版。

可以在纸上进行手绘原型草图、也可以将原型图画成一张精美的高保真图稿,只要能够将所有的需求呈现出来,与团队成员快速对接进行协作即可,更为重要的是能够将需求落地,进行测试、验证、优化、确认,最终形成一份完善的网站原型。

简而言之,原型图是根据需求所设计出来的可视化图稿,一个简单实验模型,利于快速、便捷地验证需求的解决方案。

二、原型图的作用

1. 探索与实验

原型的本质是一种测试工具,根据自己的需求探索网站功能或方向,从而实验一些想法是它最为主要的目的。我们不妨先搭建一个简单的网站原型开始,只将必备的基本信息和功能体现出来,然后开始测试,甚至可能在纸上绘制草图即可。

2. 理解与验证

当我们接收到一个个分散的需求点时,我们需要做的是将分散的需求点具象成可视化的闭环,这时就可以通过绘制原型图来展示网站需求的视觉效果,直观的看到网站成品交付时的理想状态,因此越贴近理想状态的原型图,也就越合格。

就如很多时候你并不知道自己想要什么,可以试着绘制一个简单的原型图来展示自己的想法。或者在接收到不全面的需求,以及没有充分理解需求的真实意图时,通过原型图展示你对需求挖掘和分析的结果,可以有效验证该需求的可行性。

3. 交付与对接

原型图是一个可以起到很好展示作用的有力工具,更是产品经理向执行团队进行阐述和说明需求的高效工具,可以借助原型图对网站布局和功能等进行一一说明,给开发团队提供一个清晰的概念,清楚各自的职责是要做什么,是怎样的一个逻辑,明确目标才能够根据各自的职责进行网站开发。

三、原型图的具体应用场景及好处

场景一:原型图设计是需求落地的第一步。

通常情况下,网站开发前的所有策划和规划大多是口头传达、文档呈现,较为碎片化,策划思路只停留在ppt或文档上,存在着很多不确定因素。

我们需要真正落地,才能明确所有的规划和策划点,进行测试、验证,原型图设计师需求落地的第一步,也是非常关键的一步,这也是考验一位产品经理项目落地能力的关键点。

优秀的产品经理能够以原型图的方式,把采集整理的需求概述可视化,形象地绘制出来,以便项目团队更直观的理解,以便快速发现问题后进行沟通调整。

场景二:原型图可有效的防止视觉效果对我们造成干扰。

一直以来,我们会把网站的“好用”与“好看”分为两个阶段来进行,“好用”即通过原型图设计完成,将网站的实用性和视觉的美观性剥离,可有效的防止视觉效果对我们造成干扰,从而让我们可以专注于做出一个实用性较高的网站架构。

许多企业并没有将网站原型图设计纳入建站流程中,这是因为他们仅仅将网站/网页以平面设计的角度,去评判视觉美观性,并不会深入考虑网站架构是否合理、逻辑是否通畅、访客会有怎样的体验感,这是巨大的错误。

毕竟企业网站是单向信息传达的工具,是没办法与访客做过多互动的,大多数情况下,信息都是在等待访客去点击查看,属于单向的操作去完成一次信息的沟通和交流,如果访客在操作的过程中,感到不适,都有可能是造成重大影响。

网站的大多数浏览阅读操作,都需要鼠标点击交互来完成,就像手机需要手指点击进行交互来完成的,网站页面不是一个静态的单页,因此我们需要用一个完全没有美感的线稿来思考网站的交互逻辑,这样在没有任何的视觉干扰,就不需要担心网站实用性会出问题。

场景三:原型图能拉近团队的沟通。

团队成员之间可围绕网站原型进行交流,除了产品经理之外,可以让其他成员更好地理解整个产品的构思及目的,一个好产品需要团队成员们都在顺畅的沟通交流下,才能得到好结果。

通过对产品原型的探讨,可以引导我们思考得更深入,思考的越深,方向也会越准确,原型虽然会占用一些时间,但是可以确保整个网站建设过程中,整个团队的方向不会跑偏。

确定了网站原型,我们可以非常纯粹且专注的去思考,如何去把网站的视觉做好,不会受到架构的干扰。保证这两者的完全独立,才能保证网站的出品是优秀的。

四、如何做好原型设计?

1. 产品思维的应用

大多数人都不会将网站看作是互联网产品,更多的是将其定位为一个信息公告窗口,这种错误的理解是导致不少网站缺乏竞争力的主要原因。

我们在建站时需要始终要带着「产品思维」,这一思维将会贯穿于整个网站建设的流程,网站作为产品最终导向是服务,服务的受众是访客群体,不同的访客群体又处于不同的场景中,充分挖掘访客来到网站的真实需求,从而针对网站体验感等不足进行优化。

在这当中,我们不仅需要发掘网站所服务对象的真实需求,还需要针对于制造及运营“产品”有一系列的解决方案,将某些产品或服务进行产品化。

因此,做好原型设计离不开产品思维,产品思维主要包括了访客、场景、迭代这三个方向,从这三个方向可以延伸出访客画像、行为特点、需求场景、数据埋点等内容。

a. 目标访客是研究重心

访客作为我们网站的源头,我们检验网站是否优质,决定权也在访客手里,对访客要有充足的认知,我们才有可能做出优质且成功的网站。

首先,我们前期的市场调研分析出网站的访客画像,针对目标访客画像进行有针对性的策划和构思,除此之外,我们还需要思考访客的行为,例如有些访客喜欢浏览快速阅读内容,有的访客喜欢深入了解及阅读站内文章,我们可以将这些访客行为特点进行划分。

常见的企业网站,我们将分访客行为特点进行划分:

  • 专业探索者:业内人士,深度阅读型群体
  • 专业浏览者:业内人士,快速跳读型群体
  • 非专业浏览者:外行人,包含应聘者、投资人等

访客群体划分的目的是为了更好的进行内容提炼与内容层级架构划分,打造逐层递进的网站架构,满足不同人群的不同浏览习惯,最终达到更好的信息传达效果。

网站浏览者习惯快速查看信息,通过我们可以通过「信息整合」,可以在同一板块进行内容切换,避免页面板式信息重复和繁多;并且探索者可以通过「查看详情」引导深入了解,这种常见方式可以同时满足这两类人群的浏览习惯和需求。

还需要注意一点,并非一个架构就能通用于每个网站,我们始终坚持网站架构服务于网站内容,而并非先定下网站架构再往架构内填充内容,因为这样的传统建站思维往往无法建成一个好网站。

原文地址:百度安全验证

原型设计系统原型设计系统
04-03
原型设计系统,不需要些代码就可以完成界面设计和部分的逻辑,这里提供了一些控件和逻辑模块的代码,大家可以参照控件和逻辑模块,根据自己的业务功能来完成。这里还提供了设计文档和设计的demo供学习使用,大家一起学习进步。。。。。。
十大原型设计工具(附带墨刀使用程).pdf
10-11
* Proto .io是一款轻便好用的在线原型设计工具,在大多数浏览器中都能使用,支持导入Sketch和PS设计稿交互。 * Proto .io具有界面清爽,拥有较为丰富的UI组件,可以直接用链接分享原型,且因为集成了移动录屏工具...
原型设计全攻略:思路、程及常用工具
2301_79599164的博客
07-04 985
原型设计是指设计师根据需求文档,用线条和图形绘制产品框架图,以显示产品交互逻辑和动态交互体验的简单交互方式。与所有文本的需求文档相比,产品原型图更直观地让所有制作人员和甲方都知道产品逻辑和产品创意。它也是整个UI设计中最关键的阶段之一,原型图在很大程度上决定了用户使用产品的体验。内置海量设计模板的原型设计工具本文从原型设计的定义、元素、类型步骤、设计思路和工具选择五个维度,深入分析了原型设计的用途和意义。作为UI设计中最重要的阶段之一,原型设计也起着非常重要的作用:连接需求文档,连接UI视觉设计和开发。
原型图设计指南:从基础到精通
最新发布
haishao520的博客
07-26 972
在标记交互稿之前,对每个标记的含义进行定义和规范,形成统一的规范,使团队成员容易理解。例如,标记功能用水滴表示,页面跳转关系用圆形+箭头表示。
原型方法论
亮一方购物导航
04-28 2177
原型方法论---关于软件原型方法若干问题的讨论撰写:Blueski日期:2003-3-14关键字:原型,尊重客户,原型评价,可视化,变更成本,开发团队蓝图1 引子太多了!终于签下合同-->得到了“正式”的客户提供的“需求书”的几片纸-->凭借自己的理解立即投入开发-->“木已成舟”,生米终于熬成粥-->用户拒绝接受?-->艰难地修改,反复修改,开发人员厌倦了,而用户对系统用之无味,弃之可惜,遂成鸡
原型设计
学习,是一种生活方式
05-27 917
一、什么是原型设计?   首先,让我们看看在体验设计的过程中的“原型设计”。   以下结合个人对UCD理解和项目经验,梳理和简化的传统体验设计的流程。(流程是每个群体的工作方式,好像我们的长相,很难完全一样,并且时常改变,不能盖棺定论。)   简而言之,传统的原型设计往往是定位于概念设计或整个设计流程初期的一个过程。随着项目大小、时间周期等,UED人员往往会根据需求确定纸原型、低保真原型
原型设计的关键步骤与方法
luobosicys的博客
06-26 1204
原型设计是软件开发过程中的重要环节,它可以帮助设计师和开发团队更好地理解用户需求,提前发现问题,并加速产品设计和开发周期。在本篇博客中,我将分享关于原型设计的关键步骤和常用方法,帮助读者更好地掌握原型设计的技术。通过需求收集与分析、初步草图阶段、交互和界面设计以及迭代与优化,可以创建出符合用户需求和产品目标的有效原型。交互和界面设计原型设计的核心部分,它关注用户与产品的交互体验和界面设计原型设计是一个迭代的过程,通过不断的测试和优化,逐渐完善设计和功能。
原型设计入门学习笔记
itboy
02-21 775
原型设计 课程简介 原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。 产品原型可以概括的说是整个产品面市之前的一个框架设计。以网站注册作为例子,整个前期的交互设计流程图之后,就是原形开发的设计阶段,简单的来说是将页面的模块、元素、人机交互的形式,利用线框描述的方法,将产品脱离皮肤状态下更加具体跟...
PPT法快速设计原型模板,只需要修改内容即可
07-21
【PPT法快速设计原型模板】是一种高效的设计方法,尤其适用于UI设计师和产品经理在初期阶段快速构建...同时,这种方法也降低了原型设计的门槛,让更多非专业设计师也能参与到原型设计中来,促进了团队的协作与创新。
AXURERP案例程 ue设计技巧 ax原型设计软件程.pptx
01-22
"AXURERP案例程 ue设计技巧 ax原型设计软件程.pptx" 本资源是关于Axure RP原型设计软件的案例程,旨在授用户如何使用Axure RP进行原型设计、线框图设计、交互设计原型测试等。该资源提供了详细的程,...
Axure RP 8交互原型设计案例程(微课版)-Axure源文件.rar
07-13
总的来说,这个"微课版"的程将涵盖Axure RP 8的各个方面,帮助你从零开始掌握这款强大的原型设计工具。通过实例学习,你可以逐步熟悉其操作,提升设计能力,从而在产品设计领域更加游刃有余。程中包含的源文件,...
axure高级篇进阶程_产品经理必备_需求分析_原型设计_产品原型
03-06
Axure 9 高级篇程”中,你将深入学习如何利用Axure进行更高效的需求分析和原型设计,包括高级交互设置、自定义组件库的创建、复用元件和宏的运用等。通过这些程,你将成为Axure的专家,能够在产品设计流程中...
原型设计(1)
m0_54654081的博客
12-05 851
原型设计工具 根据设计者的专业程度,可以将原型设计工具分为两大类,一是专业原型设计工具,二是非专业原型设计工具。专业的原型设计工具常用的就是墨刀和Axure,墨刀是一款在线原型设计工具,其优点是云办公模式,支持协同设计,即时保存,不用担心因电脑断电或故障而导致设计内容丢失,其缺点是组件丰富程度不高。 Axure是电脑端的原型设计工具,其优点是组件丰富,功能比较强大,使用用户群体较大,其缺点是设计内容要及时保存,否则会因电脑断电或故障而导致设计内容丢失,给用户带来一定的困扰。非专业的原型设计工具有PPT和
原型系统设计概况
weixin_30273501的博客
10-18 609
一.目标 “原型系统+规则库=行业软件” 二.构成 自定义表单 自定义规则 自定义流程 自定义报表 自定义打印 三.详述 1. 表单 应该可以进行表单界面的可视化设计设计的表单具有基础的增删改查等功能,对于增删改查等权限划分规划到规则设计中来配合实现。 表单设计中应该要包含一套基础控件库,控件可以绑定表对象,数据对象,函数对象,规则,并可以...
原型设计的重要性你真的知道吗?
设计“1+2”,摹客就够了!
06-01 3377
一个好产品的诞生,必定离不开原型设计原型设计是整个产品开发中最重要的, 并且确定了整个软件的方向,重要性就和建筑师的设计图一样。 “很难想象一个没有原型的产品是如何诞生的。原型设计的核心目的在于测试产品,没有哪一家互联网公司可以不经过测试,就直接上产品和服务。”本文将介绍什么是原型设计原型的类型有哪些?他们的优缺点是什么?最后我将介绍一些我喜欢的原型工具。
与你一起走进原型设计的世界——原型设计方法
追求卓越
08-07 6918
Hi,你好,我是大黄蜂。这一篇文章简单谈谈有关原型设计的一些方法。 1、设计思维与习惯 首先,我觉得原型设计时非常重要的一点就是要有好的设计思维和习惯。产品就是工程,工程就要严谨有序,在大工程量级时,模块化前期不快,但中后期的优势明显,通过不断积累可以形成原型复用库。这些设计思维和习惯是我在进行原型设计过程工作中的一些小体会,归结起来主要有以下几点: (1)全局意识:就是要在原型...
Axure RP Pro 5 中文程:交互原型设计精髓
"交互原型设计软件_Axure_RP_Pro_5_中文...通过以上步骤,你将能熟练掌握Axure RP Pro 5,从而高效地完成交互原型设计任务。在实践中不断探索和练习,你会发现这款工具的强大之处,也能更好地提升你的产品设计能力。
写文章

热门文章

  • 类图到底该如何画 32656
  • SQL存储过程 26100
  • ER图总结 18254
  • Jmeter实现多用户压测 16477
  • 教你如何做原型设计 15373

分类专栏

  • 运维篇 4篇
  • 云原生 6篇
  • JVM 3篇
  • 中间件篇 7篇
  • Spring 4篇
  • 源码相关 1篇
  • Redis 1篇
  • 数据结构+算法 1篇
  • 总结 33篇
  • MySQL 3篇
  • Java基础 11篇
  • 设计模式 17篇
  • bug总结

最新评论

  • 微服务-gateway跨域配置

    码农真苦啊: 在吗 有个问题请教一下

  • 教你如何做原型设计

    知礼: 转化为母版 可通用 一次性修改

  • 状态模式(State)

    飞行的小恐龙: 这样写的话和策略模式有什么区别呢

  • Java实现生产者消费者问题

    why_ohh: 请问为什么在消费者类里面还要判断缓冲区满的情况呢?

  • git-解决.gitignore文件不生效问题

    幻想Adfor: 因为那些被忽略的文件可能是项目依赖文件或者项目报错生成的日志,以及一些项目启动时自动根据当前环境生成的文件

最新文章

  • nginx使用详解
  • Nginx配置文件详解
  • 微服务-kubernetes安装
2023年53篇
2022年25篇
2021年22篇
2019年1篇

目录

目录

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丸子还是团子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或 充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

玻璃钢生产厂家北京季节性商场美陈多少钱宝鸡水景校园玻璃钢雕塑厂家菏泽知名玻璃钢卡通雕塑玻璃钢佛像雕塑怎么样玻璃钢骆驼雕塑公司地址金水区玻璃钢广场雕塑温州鼎湖玻璃钢人物雕塑玻璃钢雕塑用的是什么玻璃钢玻璃钢雕塑可以现场制作吗金昌玻璃钢动物雕塑玻璃钢雕塑设计商甘肃玻璃钢道教雕塑植物大树玻璃钢雕塑贵州特色玻璃钢雕塑价位萝岗玻璃钢造型雕塑玻璃钢花盆哪里有卖广东大型玻璃钢雕塑市场玻璃钢卡通水果雕塑怎么选东方玻璃钢景观雕塑呼和浩特公园玻璃钢雕塑价格玻璃钢官兵士兵雕塑园林玻璃钢雕塑低价批发济南步行街玻璃钢雕塑无锡通用玻璃钢雕塑服务至上龙华玻璃钢雕塑厂家博白玻璃钢雕塑公司贵阳玻璃钢雕塑厂性能可靠玻璃钢雕塑漳平玻璃钢雕塑常见玻璃钢花盆批发香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人?张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身!外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫:哈马斯三号人物被杀测试车高速逃费 小米:已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化