我临摹了7款产品的原型总结出这些原型图经验

主题

通过为期一周的原型图绘制练习，深刻理解原型图设计的核心，为自己产品道路未来发展打好坚实根本。

背景

在6天中临摹了7款成熟产品（包含36氪、网易云音乐、微博、腾讯视频、In、支付宝、美拍），共18个页面。

收成心态的打造

产品经理事情最随意马虎被人忽略的误区之一：敷衍、无所谓的心态画原型图。

在设计原型图时就必须以严谨、负责的心态去面对。
很多低级产品经理或者从事多年产品的人都忽略了原型图设计这个最根本也最主要的能力，产品经理本来输出内容就不多，多数情形都是原型图和需求文档。

在“大家都是产品经理”这个大旗下，绘制原型是一个多么大略又根本的事情，只要会利用axure工具就可以画原型了（连程序猿都可以办到）。
但原型图和需求文档是产品经理最基本的输出，由于基本、大略，却又包含了最深刻的事理在里面—-设计的过程和想法的表达。

在我练习原型图一周后深刻认识到原型图的主要性，并总结了以下心得：

借鉴成熟产品时学会思考别人产品的设计事理，不要仅是大略的抄袭和模拟，却不知为何这样设计；这样做有两个问题：其一是我们没去剖析别人为什么这么做，在不同场景下设计办法不一定适宜所有情形，大概在你的产品里就不适用，反而起到反效果；再者是只会大略的模拟，实在你就永久比别的产品慢一步，并且你会逐渐损失作为一个产品人最核心的能力—-深入思考。
面对同类产品的不同设计方案时，学会比拟剖析，从布局办法、视角顺序、参数选择等去综合思考；忌讳暴躁、不负责、不思考、机器抄袭的设计方案； 在以上3点的条件下可以建立如下好处：在开拓参与前即可进行“不存在的产品迭代”，而非等到产品开拓上线后再去思考如何迭代；靠原型图进行推演仿照用户利用场景和用户感想熏染。
如果没有精确的去面对原型图设计，一定导致设计的原型都是粗糙和敷衍的，是无法做到“不存在的产品迭代”这个核心理念的。

文章详情页设计剖析

在临摹资讯产品的资讯详情页时，就碰着了最范例的同类产品在资讯详情页的不同设计理念，比拟今日头条和36氪两种设计方案之后，才创造原型设计的真正伟大之处是一种妙不可言的感悟和体会，只有在存心去透彻剖析和理解设计的事理才会创造统统核心都在细节奇妙处。

产品经理常常喜好把用户体验挂在嘴边，而真正的体验则都是从细节做起，我们都学会了去说的更好而不知道如何做好，体验到底该怎么做？可以细化到一句文案的顺序变革、词语的调度，都会导致用户对产品体验发生质的转变，产品设计便是把细节打造完美，而打造细节就在于一直的去通过不同设计方案的比拟、剖析、思考得出最优设计方案，也即一个打磨产品原型的过程。

我们以资讯详情页在设计菜单栏和标题时的四种方案来做剖析讲解；四种方案分别如下：

深色标题栏+标题居中深色标题栏+标题左对齐透明标题栏+标题居中透明标题栏+标题左对齐

首先看无标题栏设计（透明标题栏）这种办法，它在产品设计中是不常见的，一样平常产品做法都会把顶部标题栏用深色做突出，为的是让用户视角更好的把稳到标题栏去操作一些主要功能。
而透明标题栏的设计好处在于通过借助颜色的利用（颜色跟内容底层同等），让用户觉得不到标题栏的存在，可以在产品整体视角空间上显得更加“宽广”一点，而标题栏的存在会压缩人们的视角空间，将运用面积变小了（举个栗子：网易云音乐把皮肤换成白色）。

而在资讯详情页中，“透明标题栏”的设计办法所传达的视角效果就完备不一样了，由于透明标题栏的设计在这里会让人以为文章标题并不在“顶部”，而是在“顶部偏下”的位置，由于“上面是空的”，并且由于“上面是空的”给了一种内容的视角延长，在标题“暗示”上就显得弱化了（举个栗子：36氪）。

反例便是今日头条，通过“深色标题栏”的设计就会让人认为文章标题已经在“顶部”。

在上图中我们可创造，36氪和今日头条的标题设计方案也有细微差别。
36氪的标题是居中设计，这样的设计事理是由于不规则形状所产生的割裂感能把标题和正文内容非常明显的进行区分，而今日头条的标题左对齐设计办法则无法达到不规则性子所产生的视角效果。

从这里我们可以创造，没有一种设计方案是绝瞄准确或适应所有产品运用处景的，通过在不同产品同样的“透明标题栏”设计，所产生的效果是不一样的。

同类产品的不同布局

在很多时候我们也很随意马虎忽略这样一个事实：即同行业、相同目标用户的同类产品，也须要考虑其产品的不同点导致终极产品的不同设计方案和终极展现形态。
不同点紧张会在这几个方面：产品核心代价不雅观不同、产品定位不同、产品核心功能不同、运用处景不同。

连续来举个栗子：

同是音乐类产品的网易云音乐和QQ音乐，我们仔细不雅观察也会创造很故意思的地方。
云音乐跟QQ音乐最大的差异在于核心功能上，云音乐核心功能是推举，QQ音乐是搜索。

由于产品代价不雅观和核心功能的不同，造就了他们在设计方案上的大相径庭。
云音乐的搜索功能是在操作最未便利且处于视角盲区的右上角，但纵然如此也不影响云音乐整体的产品架构，由于云音乐核心功能在推举，而不须要通过频繁的利用搜索功能才能找到自己喜好的音乐。
而QQ音乐则把搜索功能以搜索框的形式放在了顶部菜单栏的中间，从视角上更突出该功能的主要性。

产品颜色

在大量成熟的产品中，我们也可创造一些关于颜色的利用规律，虽然产品色彩搭配是由UI来卖力，但终极产品整体呈现效果还是须要我们产品经理来审核把关。

在色彩的选择上最忌讳把设计图哀求做的各种好看和酷炫，实在设计师和普通人一样，都有自己的审都雅，一味追求俊秀和酷炫，而忽略特定的用户、特定的场景、特定的需求，这样的设计图方案是无法为用户创造任何代价的。

通过不雅观察和临摹多个成熟产品创造好的产品一定是非常突出和随意马虎识别产品主色调的，在色彩上同样讲究简约原则。
一样平常情形产品不会超过3种色彩搭配，颜色过于繁芜，会加强人们对付信息的辨识难度，造成不必要的信息滋扰。

如何剖析一款产品

市情上成熟的产品可以给予我们参考和借鉴的意义，给予我们自己设计产品做出方案上的勾引，但是如何去剖析一款产品并结合到自己的产品上则成了关键。
我总结了这几个绘制原型图的核心维度：页面布局、核心功能位置、视角顺序及视角落脚点、参数的选择及位置（参数选择环绕需求、核心功能、产品动机来决定）、元素间层次关系。

元素关系可以通过颜色、大小和形状的不同来进行区分，详细在原型设计中可以通过间隔线区分、系统底层留白、不同颜色板块区分等方法来打造清晰的元素间层次关系，让干系联的元素排列在一起，使得产品的整体层次感更加有条理。

原型绘制的小细节

原型设计初始阶段不建议利用最深的颜色来表达，给颜色降一维，让真正须要利用深色去突出某功能时留出一定空间。

临摹作品展示

资讯详情页4种方案比拟

透明标题栏+标题居中，透明标题栏+标题左对齐

深色标题栏+标题居中，深色标题栏+标题左对齐

过程感悟为什么要画原型图 绘制的过程=设计的过程；绘制的结果=想法的表达；看重设计时的思考过程，如何更好表达对产品的理念和想法，而不是机器抄袭；认识不同设计方案的事理、浸染和利用场景，通过多种设计方案比拟和剖析，扩展自己原型设计的素材，应对将来设计产品时有灵妙策划的选择； 进一步闇练节制参数选择、页面布局、功能位置、视角顺序、元素关系等核心技能；从原型设计中可初步大略体会产品的取舍之道；

怎么画原型图 认知模型：根据产品核心功能和功能构造，思考页面整体布局，功能的摆放位置，如何突出核心功能，如何建立视觉顺序，如何建立元素层次关系，如何选择主要参数；绘制原则：先动手，再思考；采取素材：基本素材（线、框、字）；隐蔽素材（间隔、颜色、大小、图案、透明度、位置）； 绘制过程：原型整体框架搭建（系统底层→顶部操作层→内容底层→元素层）；页面设计流程是由布局→参数→元素关系（思考逻辑是正向流程，剖析验证则是反过来，如果元素关系不知足就修正参数，参数不知足就修正布局）；原型图的核心：设计的过程和想法的表达、参数的选择、视角顺序。

文末

任何一个越根本的技能越核心，由于越根本越具有通用性，所有高阶技能都是由根本技能演化升级而来，而很多让人心血膨胀的高段位技能由于太专业反而不具有通用性，只能办理某个固定的问题。
打好坚实根本是我们身为产品经理必修之路，为未来的发展建立精确的认知，切勿由于暴躁、看不起的自傲心态而走向认知上的弯路。

#专栏作家#

枯叶，微信公众年夜众号：枯叶咖啡馆。
大家都是产品经理专栏作家。
近6年履历的产品经理，善于社交、社区、细分群体挖掘。

本文原创发布于大家都是产品经理。
未经容许，禁止转载。

题图来自 Pexels，基于 CC0 协议