原型设计 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享12项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

作品集指导

优设设计专家语音在线指导

开通VIP

领取更多设计师实用特权

投稿

原型设计话题

首页
设计文章
原型设计

总监出品！HMI可交互概念原型的设计流程科普

交互

总监出品！HMI可交互概念原型的设计流程科普

如今 App 和网页可交互原型的制作方法和设计流程早已普及，但 HMI 可交互原型制作方法和设计流程还处在探索阶段，在这篇文章中，我想聊聊我遵循的设计流程和迭代过程。

2022/12/28

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

交互

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

交互设计师如何从零开始构建交互流程的？本文用「上传菜谱」的案例让你略窥一二。

2022/04/29

从四个维度，帮你了解原型图背后的黄金圈法则！

交互

从四个维度，帮你了解原型图背后的黄金圈法则！

作为基础功能的原型图，你知道它背后的黄金圈法则吗？本文将从四个维度对此进行分析，希望对你有帮助。

2021/05/03

入门基础！新手设计师应该学习的5个知识点

职场

入门基础！新手设计师应该学习的5个知识点

本文聊聊设计师的故事——新手设计师职场常入的 5 个误区，帮你成功避坑成为优秀设计师。

2020/05/12

原型该画到什么程度？来看腾讯设计师的心得总结！

交互

原型该画到什么程度？来看腾讯设计师的心得总结！

不知道你有没有这样的经历：为了不让原型图看起来太丑，会纠结各种细节处理（间距、大小），结果造成工作周期延长，精力损失。为了让原型接近于真实效果，会思考各种精致布局，结果 leader 来一句「你现在做这么好看干嘛，这个功能都没确定好。」所以今天想聊聊「交互原型」这一话题，也算是对自己成长的一个总结和沉淀。

2019/08/26

超全面的 UI 工作流程指南（二）：原型设计

交互

超全面的 UI 工作流程指南（二）：原型设计

完整的 UI 设计流程到底是怎样的？从需求到产品上线，要经历多少个阶段，每个阶段有哪些应该掌握的基础知识？本次优设独家专题为你从零开始梳理出 UI 工作流程，适合新手阅读学习。

2019/07/11

超详细评测！2019年值得关注的四个原型制作工具

交互

超详细评测！2019年值得关注的四个原型制作工具

Cezary Ołowski ：如今各大公司在产品功能竞争上，比起之前口若悬河的宣传，现在更多的是将功能直接展示出来。相信你也有过这种经历，有时用言词解释某些 idea，倒不如在白板或者纸上写下来更省时、易懂。而这张纸上的说明就是原型。

2018/12/12

这3个方法，让你的Axure 也能实现自动标注！

神器推荐

这3个方法，让你的Axure 也能实现自动标注！

Axure 制作 toB类项目的 Web端原型比较常见，可以将原型做得非常系统、交互逻辑逼真，适用于大部分测试和演示等场景中。甚至很多设计师直接使用 Axure 制作高保真原型，对于这些设计师，尺寸标注成了一大难题。如今，主流的原型设计工具都标配了自动化尺寸标注功能，然而即使是最新发布的 Axure9 依旧没有这一功能。

2018/11/19

如何设计规范的原型图？来看高手总结的方法！

交互

如何设计规范的原型图？来看高手总结的方法！

首先需要了解交互稿和原型图的联系与区别：按照常规的工作流程，交互设计师最终交付的产物包括任务流程图、信息架构图、页面原型图、页面交互说明、页面流程图，这些都可以归纳到交互设计文档中。因此原型图只是交互稿的一部分，本文将铺开阐述设计规范的原型图应该注意哪些。原型图设计遵循的首要原则是：在满足将产品需求转化为界面功能需求的同时，尽可能的维持原型图的美观简洁，人类始终向往和追求一切美好的事物，即便是黑白的世界，一样会带给人美的享受。

2018/09/07

掉进这6个陷阱，可能会毁了你的原型设计！

交互

掉进这6个陷阱，可能会毁了你的原型设计！

编者按：Nick Babich 这两年文章产量比以前低了不少，不过素质和出发点倒是一直非常发人深省。在文章结尾的 One More Thing 当中，我加入了一些关于乔布斯早期对于原型设计的一些「激进」的看法，也许这是原型设计的未来的一个方向，也说不定。很难想象，如果没有原型设计，如今的数字产品设计流程会变成什么样。

2018/07/04

Figma 3.0 版本重磅发布！为你揭秘这款2018年最值得体验的设计软件！

神器推荐

Figma 3.0 版本重磅发布！为你揭秘这款2018年最值得体验的设计软件！

可能有很多人并没有用过 Figma，甚至都没听过。所以，我先简单介绍一下这款软件。首先看下这款软件在2017年的使用排名：△ 数据来源：http://uxtools.co/tools/designFigma 是一款基于浏览器的协作式 UI界面设计软件，与一般的 UI设计软件不同，它不仅拥有强大且智能的 UI设计功能，还完美支持多人协作功能，是第一款真正支持协作功能的 UI设计软件，该软件有在线版和桌面版。

2018/06/26

我花了80天，开发出这个3分钟快速搭建界面原型的设计工具

教程

我花了80天，开发出这个3分钟快速搭建界面原型的设计工具

最近一直在关注设计系统，恰逢笔者正准备毕业，毕业设计就索性开发了一个模块化组件搭建界面原型的 Web 工具 —— Atomframer 。通过对设计模式的选取，三分钟即可搭建一个用于快速沟通的界面原型。一、Atomframer我总结定义了共计82种常见的设计模式，基本满足了大部分基础移动端页面的使用场景。

2018/05/29

这7个UI/UX应用，是2018年最值得关注的设计师工具

神器推荐

这7个UI/UX应用，是2018年最值得关注的设计师工具

对于用户而言，网站不仅仅需要有优美易用的布局和漂亮美观的图片，网站的细节和整体体验都要足够突出，才能让人印象深刻。你想让访客去哪里，希望他们看到什么，以及如何让他们顺利地获得想要的信息，这都是设计师需要借助各种工具和技巧来实现的事情。这就是 UI 和 UX 真正考验人的地方。

2018/04/20

超全面总结！如何画出专业的原型图？（下）

交互

超全面总结！如何画出专业的原型图？（下）

怎么样的原型图才算是专业的原型图呢？文章总结了一些经验，希望对你有所帮助。文章分为上下两篇，阅读上篇内容→《超全面总结！

2018/02/14

超全面总结！如何画出专业的原型图？（上）

交互

超全面总结！如何画出专业的原型图？（上）

怎么样的原型图才算是专业的原型图呢？文章总结了一些经验，希望对你有所帮助。本篇文章（原型上篇）重点内容：清晰的视觉层次视觉流结构功能预见性信息的焦点即为视觉的焦点足够简单考虑到边界条件首先，我们要明确原型图是画给谁看的，通常是以下几类人：开发、部门领导、UI设计师和测试，一个完善的产品流程离不开着几个角色。

2018/02/13

高级设计师：如何用科学的方法做出专业的原型图？

交互

高级设计师：如何用科学的方法做出专业的原型图？

Echo ：本文将以酷狗K歌ios版（虚构）为载体举例说明，什么样的原型图才能算得上专业而细致？希望各位可以很清晰的感知这套方法。什么样的原型图才能算得上专业而细致？

2018/01/22

画交互原型方案前，你应该思考的三个点

教程

画交互原型方案前，你应该思考的三个点

Echo ：一个优秀的交互设计师，一定要从用户目标出发。了解用户的核心痛点，满足用户的需求，只有这样才能打造一个好的产品。本文主要针对从事交互行业两年内的入门或初学交互设计师，并重点讲述如何精准清晰的做好交互方案，主要内容有以下三点：画交互原型前要了解用户使用产品的核心需求思考用户在使用产品时的痛点场景梳理产品信息框架在国内，交互设计行业兴起至今，不过十年左右，许多院校还没有专门的交互设计课程。

2017/09/17

基础小课堂！从零开始教你做高保真原型图+UI 设计规范

交互

基础小课堂！从零开始教你做高保真原型图+UI 设计规范

编者按：《从零开始设计App》系列到这篇已经是第三期了，上期是低保真原型图，这期@Sophia的玲珑阁聊聊如何从零开始制作高保真原型图和UI 设计规范。往期回顾：《设计师怎样从零开始设计一款APP？》《从零开始设计一款APP之如何做原型图》Hi-fi 输出上篇文章提到，在Hi-fi阶段大概可以分为前期、中期和后期三个阶段。

2017/03/30

从零开始设计一款APP之如何做原型图

交互

从零开始设计一款APP之如何做原型图

@Sophia的玲珑阁：这个系列的文章把整个设计过程的经验总结成文，逐点分享，上期是概述+立项，这期聊聊低保真和高保真原型图的作用、处理工具和文件要求等。Low-fi，即低保真原型图，整个APP设计阶段，设计师真正开始上手的环节。待PM制作好PRD文档和逻辑流程图之后，交互设计师开始依据已有的结论，画出Low-fi。

2017/03/24

菜鸟变高手！为何我如此推崇低保真原型测试（附方法）

交互

菜鸟变高手！为何我如此推崇低保真原型测试（附方法）

雨涵：对设计菜鸟来说，低保真原型测试可以帮你快速提升设计能力、填补一切设计理念的漏洞、获知难以察觉的细节问题、说服别人接受你的设计等等，作用极大，而且用文中的方法，2天就可以搞定。适读人群：交互设计师、用户体验设计师、UI 设计师阅读时长：约6分钟什么是低保真原型测试低保真：线框图低保真原型：可交互的线框图低保真原型测试：用可交互的线框图做的用户测试说详细一点点，就是交互设计师在线框图阶段就可以完成的用户测试。如果你觉得这么早做用户测试代价太大，那么我可以告诉你，对于轻量产品来说，从静态线框图到完成...

2017/02/13

低保真原型

事半功倍！帮你设计加速的7款顶尖原型工具

交互

事半功倍！帮你设计加速的7款顶尖原型工具

对于许多刚刚开始接触原型设计的设计师而言，很容易混淆线框图（Wireframe）、视觉稿（Mockup）和原型（Prototyping）这三个基本概念。在许多项目和相关文章中，这些概念经常被混用。虽然在功用上，三者有许多相似点，然而差异也非常明显。

2016/09/21

等等，原型设计的重要性你真的明白么？

交互

等等，原型设计的重要性你真的明白么？

编者按：设计网页或者APP的过程中，为什么一定要设计原型呢？能不能不做原型直接设计并开发出产品呢？当然能，但是有了原型，这一切会更加轻松，后续的麻烦也更少。

2016/09/19

专业干货！VR新工具之便捷实用的POV纸质原型

产品

专业干货！VR新工具之便捷实用的POV纸质原型

@C7210 ：在VR领域，传统草图形式已经难以提供前期探索阶段所需的灵活性与便捷性。而POV纸质原型的宗旨在于以尽可能灵活快捷的方式实现VR环境设计目标，一方面可以展现场景的全貌，同时又允许我们透过用户的视角去观察虚拟环境及其中的互动元素，本文便是相关的实战经验汇总。和很多人一样，我（英文原文作者）在实际体验过VR之后，便开始为其中所蕴含的各种可能性及巨大的潜力而着迷。

2016/07/17

只需浏览器，就能帮你搞定原型设计

交互

只需浏览器，就能帮你搞定原型设计

给网站设计原型是一个全面系统的过程，在此过程中你需要拿出一套线框图并确保基本的交互功能。单纯的线框图可以是静态的图片，甚至可以是手绘的草稿，但是原型大多是动态的，可交互的，至少主要的页面和功能能基本呈现出来。不过，设计师通常会选择使用图像编辑工具来进行原型设计，只不过这样一来，绝大多数的工具很难实现足够的交互，这也催生了不少开发商转向研发基于浏览器的原型设计工具。

2016/07/13

别急着上高保真！教你在设计实战中用纸和笔做原型设计

交互

别急着上高保真！教你在设计实战中用纸和笔做原型设计

编者按：随着软件越来越多，很多设计师都能迅速做出精美的高保真原型，所以今天@-朱宇軒这篇好文特意给喜欢一开始上手就用高保真的同学提个醒，用纸和笔也许能整个设计过程更爽。至于用纸笔的好处以及什么时候该用高保真原型，让这篇好文为你揭秘！先用纸和笔来画草图能让整个设计过程变得更爽我爹是一个插画师，所以我记得小时候，家里到处都摆着老爹干活的家当。

2016/06/10

凝练总结！帮你奠定设计项目基础的线框图五步法

教程

凝练总结！帮你奠定设计项目基础的线框图五步法

编者按：许多设计项目是从线框图的设计开始的，但是真正专业的线框图到底要经历哪些步骤呢？今天这篇来自UXPin设计师Faye Bridge的文章，帮你总结了一套实用的线框图设计五步法，帮你从最早的阶段奠定整个项目的基础~想要让整个数字产品或者设计项目结构化，线框图是它最早也是最重要的组成部分。线框图向整个团队展示了布局、导航、视觉层次、信息架构和内容优先级等关键的问题，它勾勒出了整个项目的基本轮廓，呈现了关键信息。

2016/04/24

低保真原型

阿里干货！如何培养正确的原型设计思维？

教程

阿里干货！如何培养正确的原型设计思维？

舒舟：Adobe近日发布Adobe Experience Design CC（原Adobe Project Comet）公测版，新兴的原型工具Silver被InVision收购，业界类似事件的发生再次掀起了原型工具讨论的热潮。尽管当前阿里集团各团队的研发流程不尽相同，各有千秋，但原型对团队的帮助却越来越明显。译者上家公司的Scrum团队就是在Sprint中以交流、草图和原型为主，文档输出逐渐弱化，可惜5年前的设计工具还没有发展到这么成熟的阶段，很多创意只能依靠静态的paper prototype沟通。

2016/03/28

App产品原型

PS终结者？来看这十款前景无限的新兴设计工具

教程

PS终结者？来看这十款前景无限的新兴设计工具

之前我们提及新设计工具的时候，常常会将它们视作为PS、AI这类传统劲旅的附庸，即使是日渐强大的Sketch也因为Mac平台独占而无法更大范围地替代PS的稳固地位。可是前赴后继的新设计工具真的都那么鸡肋么？不知不觉之间，大局的天平正在逐步倾斜。

2016/03/13

来挑个顺手的！2016年值得一试的七款原型设计利器

神器推荐

来挑个顺手的！2016年值得一试的七款原型设计利器

编者按：2016年，你的设计软件更新了没？今天给同学们推荐7款原型设计工具，除了经典的Axure，也有一些异军崛起的新利器，优缺点和价格都列出来了，按照自己的需求挑一款吧。1. Axure PR难度：★★★★价格标准版-$289一个注册码专业版-$589一个注册码Axure RP是美国Axure Software Solution公司旗舰产品，是一款专业的原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。

2016/02/01

交互原型工具

疾速成型！5天内搞定产品设计是怎样一种体验

教程

疾速成型！5天内搞定产品设计是怎样一种体验

产品设计过程是有一个比较固定的周期的。但是，如果你能将整个流程的运作速度提升起来，用更频繁的反馈获得更好的结果，你还会使用当前的设计流程么？用更短的时间获得更多的迭代，这种快速设计过程是一种截然不同的设计思路。

2015/11/13

1/2

1
2
下一页
前往页

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：扫码添加

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营