uselayouteffect和useeffect,mockup软件使用方法

wireframe、prototype、mockup三者经常混用，很多人把三者称为原型，真的是这样吗？

让我们来看看这三者之间的区别。 先做选择题吧：

从图中可以看到，prototype和其他两者的区别在于是否可以交互、是否可以单击、prototype是动态的，wireframe和mockup是静态的。 wireframe和mockup的区别在于是否忠实。

wireframe 之于 prototype 就像建筑蓝图之于样板房

wireframe——不关注外观，只关注功能。 wireframe的中文名称为“线框图”，表示产品概念、产品体系结构、内容优先级、页面布局和操作逻辑。 由于重点关注产品的主要功能以及在各种场景下应该如何操作，因此视觉元素应该尽量简化。 另外，也不需要考虑。 颜色以黑色和白色灰色为中心，最大加入蓝色。 蓝色常用于区分导航栏和底部块。 那是最低生活保障的真的。

可以手绘在纸上

(Source:galynbunnell )

在白板上随便涂鸦

(Source: Bradley Hawkins )

也可以用软件工具做

(“墨刀”画的线图) )。

它就像城市的地图导航，只负责展示这个城市的大致框架。 用它导航，可以清晰整个城市的布局，但无法体会具体的美。 隐藏在城市每个角落的细节之美。

wireframe是沟通工具，主要任务是快速可视化产品概念，让团队成员快速理解产品概念，展开讨论，快速收集大家的反馈。 收集反馈是为了改善产品。 因此，那不是产品的最终版本。 在讨论中收集到的反馈可能会对产品产生很大的变化。 因此，不需要考虑太多的视觉细节。 因为反正需要更改。

wireframe关键字：

Mockup——是表现产品整体视觉设计的“视觉原稿”。 在wireframe (线条框架)的基础上，添加包括图形、排版、配色等更加详细的视觉表现在内的更加丰富的视觉要素，这一点基本上与产品的最终设计原稿相同。

与wireframe (行框图)一样，Mockup也是静态的，无法操作。 专注于产品外观，加入丰富的视觉元素，忠实度高。

Mockup表达细节，常用于视觉设计讨论，用于快速收集和改进产品视觉设计反馈。

我试着在dribbble上搜索了一下。 真长啊

Mockup关键字：

Prototype——可操作原型Prototype中文“原型”是一种可操作的原型，它能比较真实地模拟用户与UI界面的交互。 这样通过挖掘和及时纠正产品早期存在的潜在问题，帮助设计师不断验证-纠正自己对产品的想法。

高保真原型 vs 低保真原型

将多个Mockup (视觉稿)图设置为可操作的模型时，Mockup为prototype，称为高保真原型。

如果将多个wireframe (行框图)设置为可操作的模型，则此时wireframe为prototype。 我们在低保真原型

Prototype最重要的特性是可操作性，判断是否为Prototype的标准是是否可动操作。

由于原型的关键词是可动操作，所以用ps制作的输出原稿不是原型，而是用小刀实现的输出原稿是原型。 下图：

prototype 关键词

Wireframe、prototype、mockup各有优缺点和不同的使用场景，无论是产品经理还是产品设计师，在正确的阶段做正确的事情是很重要的。 在产品的不同阶段使用不同的输出稿，避免时间和精力的浪费，迅速输出想法，迅速接受反馈及时修改和验证产品设计，加快产品的迭代过程，降低大规模回顾的修改，是合格产品经理和