7被浏览701分享邀请回答21 条评论分享收藏感谢收起11 条评论分享收藏感谢收起查看更多回答优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 10 分钟
通过上两节的文章，大家可能已经对sketch这款软件的基本操作有了一个大概的了解。但很多朋友可能会有疑惑，”好像sketch的功能也没有那么强大啊?””也就是个普通的矢量绘图软件吧?” 恩，你错了，因为你忽略掉了一件东西—插件。 插件是让sketch保持强大的独门绝技，很多软件看起来不支持的功能，通过插件都可以实现，大大提高工作效率。 下面，静电来介绍下sketch常用的，受大家欢迎的插件。
一、安装插件的方法
sketch有两种插件安装的方法，一种是传统的安装方式，另一种是通过一款叫sketch toolbox的小软件来快捷安装。
首先看第一种安装方法，打开sketch（这里以最新版本的sketch3 为例），然后选择菜单 Plugins&Reveal Plugins Folder，即可打开插件文件夹。 打开后即可知道路径，不用刻意去记这个路径在哪里。
打开后可以看到以一个个文件夹命名的，就是一个个的插件。以下就是静电的电脑中安装的插件。 目前sketch官网上零星分散着一些插件的压缩包（相关链接：） 我们可以通过下载相应的压缩包，并解压到上述的Plugins下面，然后重启sketch，如果成功，在plugins菜单就会出现相应的选项。
或者，可以直接解压文件夹，选择里边的以。sketchplugin结尾的文件，双击直接安装，出现下面的提示，则安装成功。
但是，使用这种方法安装插件，需要一个个的找插件，非常麻烦。那么大家还记得静电在第一节的sketch教程中给大家的两个下载地址吗？一个是sketch安装文件，另一个就是关于插件的sketch toolbox。地址再贴一次给大家，没有下的同学一定要装哦（sketch toolbox下载地址：），下载并安装后即可使用。打开sketch toolbox，大家会看到各种各样的插件，如下图：
只需简单点击install按钮，即可方便的安装插件，再也不用费时费力的一个个的找了。
二、插件推荐
ok，这个时候大家可能会有选择恐惧症了，这么多插件，我要从何选起呢？ 别着急，静电给大家推荐几款最常用的。
顺便推荐一下Photoshop的高效插件！
推荐插件：Content Generator Sketch Plugin
做app设计的时候，我们可能会使用各种各样的头像来营造真实效果。 但寻找头像并做遮罩是一件非常耗时耗力的事情，但我们又不想把头像做的千篇一律对吧？ 这个时候神器来了，快来下载这款 Content Generator Sketch Plugin吧。 只需选中你要填充头像的图形，他会帮你随机选择并填充合适的图像。 看看效果吧。
这个插件比较大，大概80m左右，所以请多耐心的等待下载完成。 如果实在下载很慢，那么请使用这个网址使用迅雷直接下载，然后按照上文的方法解压并拷贝到文件夹中：
当然随机生成用户名也是可以的。
还可以有随机的大段文本生成。
恩，这样的效果图，岂不是比做一个元素然后不断拷贝粘贴帅气多了?毕竟，我们的效果图要模拟最真实的效果不是吗?
推荐插件：Sketch Measure
我们在做完设计稿后，需要告诉前端开发工程师，图片是多大尺寸，这段文本是多大字号，间距是多少。这个时候，sketch messure就派上用场了，相比传统的标注方式，在软件内标注极大提高了我们的工作效率。我们只需选中两个元素，然后选择plugins菜单， 就可以标注图片尺寸，文字字号，间距等等等等，这一切不需要你自己一个个的打字上去哦，只需要告诉sketch你要标注那些元素，要标注什么，就可以一键搞定了。 效率极大提高，我们可以腾出更多的时间来更好的设计我们的作品了。
tips：要标记，首先选择要标记的一个或者多个元素，然后选择plugins里的标注方式即可完成自动标注了。标注完成的设计稿，直接输出就可以给前端开发工程师了。
另外要注意的一点，标注的时候，一定要选对相应的Design Resolution 。 安卓的按照安卓的解决方案标注， ios的按ios的方式标注。这样才能确保你的设计稿被前端工程师正确的实现出来。静电认为，这个标注非常方便，特别是标注字体的时候，插件直接按照标注解决方案换算出正确的字号，方便开发工程师调用。对于ios和安卓的标注，一般各自选择一套即可。 比如ios选择Retina，安卓可以选择xxhdpi或者xhdpi。
推荐插件：icon stamper
icon stamper是一个可以一键生成iOS多种图标尺寸的插件。 你只需要做一个最大的图标，这个插件可以自动帮你生成一整套各种尺寸的图标，然后可以一次导出。不用在ps中一个一个的设计啦。 来，让我们看看这款插件如何使用。
首选，选择菜单 File & New From Template & iOS App Icon
第二步，在名为iTunesArtwork@2x”的artboard中设计你的图标。 设计完成后，选中所有元素，按command+G组合成一个组，并选中这个组。
第三步，选择 Plugins & icon-stamper & Icon Stamper 即可生成各种大小的图标了。
第四步，选择File&Export，即可批量导出。
推荐插件：Rename it
对于app设计者来说，我们通常需要切出不同尺寸的图标来适应各种机型或者分辨率。这个时候，我们需要将某些参数体现的文件名或者图层名称，方便我们非常快速的知道，这个图层的属性，比如长宽高等等。 或者，我们需要批量将文件或者图层进行命名。 Renameit 插件可以轻松帮我们办到。
目标:将图中的三个形状按照宽高来批量命名。
第一步，选择要批量命名的元素。
第二步，选择Plugins & Rename it ，在弹出的对话框中，设定命名规则。 这里要说明的是， %N %W这些都是变量，会根据图片的尺寸来自动填充，我们需要的是设定这个规则即可， 接着我们输入下面的参数（请自己填写文件后缀），然后确定。 这个时候图层就会按我们要的规则明明。
图层命名规则参数:
– 输入号 “+” 和你想添加的文本即可在适当的位置添加固定字符（如：+ button）
“%N” 将图层名按顺序加上数字后缀。“%n” 则是加上倒序的数字。（如：item %N）
– 保留并移动原图层名： 输入新的图层名时，使用 “*” 号代替原图层名。（如：big * button）
– 添加图层的长度和宽度：输入 “%w” 或者 “%h” 来添加图层的长和宽。（如：rectangle %w 或者 rectangle %w x %h）
推荐插件：Duplicator
使用这个插件，我们可以将一个元素有规律的复制并排列，并可以选择复制次数及间距。 使用很简单，静电就不截图演示了。
推荐插件：Sketch Qrcode
生成矢量二维码，直接在sketch中解决，不用再去找二维码生成网站了。
ok，sketch强有力的左膀右臂已经介绍完毕了。有了这些插件，我们可以更方便的进行设计。 下一节，我们重点谈谈sketch的钢笔工具，毕竟，矢量软件嘛，路径什么的必须得及其熟练才行，小伙伴们，如果发现有其它好的插件，欢迎一起交流，也欢迎关注我的微信jingdesign91。 我们下期见。
Sketch设计教室系列好文！
附上贴心小技巧：
从零开始学Sketch教程合集！
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量76万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
PS教程！教你用PS创建梦幻的“爱丽丝梦游仙境”主题照片
在本次的Photoshop教程中，你会学到如何通过使用智能滤镜、混合素材做出“爱丽丝梦游仙境”主题的照片。这个教程会告诉你如何混合素材，创建光...
几何纹理应该算作是颇具现代感的装饰风格，但将几何形状经过创造性的叠加，就会组合成新的纹理图案。这种图案略带复古风味，我们可以运用这些复古的纹样打造无缝图案，...编者按：今天这篇好文聊的不是简单的弥散阴影，而是笔者在逛网站时发现的一个效果更为精致的阴影，而且这类效果在耐克LOGO、苹果官网都有所体现，能快速提升产品的...编者按：这类效果最近很受欢迎，很多高大上的3D 二维码/插画都是这么做出来的。想快速掌握3D 工具的同学，这个教程绝对是练手的好机会。 优设最新的AI 教程...编者按：今天的教程绝对值得转发马克！微博美女摄影师@林初寒 的片子清新自然，个人风格强烈，特别受欢迎。不过今天是教同学们如何通过后期调色达到相近的效果，作者...tiah：椭圆矩形是介于圆和圆角矩形中间的形状，是主题图标绘制最流行的形状之一，有一些新人和身边朋友问我怎么绘制这种形状，今天分享一下我的绘制方法，总共3个...编者按：今天@团团疯了 给同学们带来一篇超简单的Illustrator 教程，效果好看带点萌，操作界面经过汉化，能轻松看懂，非常适合新手练习，快的话大概30...编者按：如何将爱豆的照片做成人物插画？这篇教程可能是最简单的方法了。你可以学到头发和眉眼口鼻等脸部元素的绘制方法。 优设最新的AI 教程： 《AI教程！手把...编者按：效果清新到爆的后期教程！这类肤色是现在非常受欢迎的人物效果，当然，大神 @他山之眼 同学给出的不仅是方法，也是可以举一反三的后期思路，值得收 &gt...编者按：今天给大家来一个超现实特效教程，难度不大，主要考验同学们对不同素材的组合加工能力，译者@Chloe.Rowe林雅诺 已经把软件和图片素材已经打包好，...
我们的团队
大家在关注
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里[实例] ReSur教你用Sketch快速制作矢量ReLogo - 为程序员服务
[实例] ReSur教你用Sketch快速制作矢量ReLogo
ReLogo即“10×10方形格中包含4×8格的像素大写”R”和4×5格的像素小写”e” 式样”的标识，”R”和”e”相距1格，其”Re”整体与边界相比在上下左三边各留空了1格的距离，字形偏长，与10px的Helvetica Regular字体的”Re”分别去其2px和1px中轴线后所得图形一致（当然这是后来发现的）。
在不得已的情况下可以改进其点阵排布以凸显显示效果，如网站使用的16×16像素favicon，但是字形在视觉上必须保持一致。
在节日的时候可以有节日Logo，且内容不一定是”Re”，故不受上一条结论的限制，但是Logo在风格上必须保持一致。
最初的版本设定在2008年包含黑色分割线，并包括了一个绿色背景的版本，第二版本将黑色分割线改为白色（2011年8月），第三版本取消分割线并更换背景到一个更加鲜艳的色块组合（2013年12月），第四版本彻底扁平化并修正一些细节（2014年9月）。
原材料只有一张图片形式的ReLogo（如下）
现在打开Sketch，导入现有的这张图片。对齐顶点到(0, 0)以方便操作
按“R”键打开矩形工具，拖动鼠标到让宽度等于单个色块的边长值，同时按住Shift保持宽高比。轻轻拖动它对齐到（出现两条交叉红线）ReLogo的左上角，并在属性取消边框的勾选，标记为A1。
再次选中A1，按住“Option”键，往下轻轻拖动，直到拖出的图形和A1的下半部分严丝合缝对齐，即A2。
现在，重复按 Command + D 共计复制8次，嗯，第一列A1~A10很快就出来了
锁住背景图层ReLogo，然后框选A1~A10，按 Command + G 把它们全部分到A组
按照前面的方法横向拖出B组（第二列）-& 然后Command + D 复制8次
所有基底真的很快就出来了。现在的样子，像不像一个等待整容的人正被纱布包裹着呢？
将背景图层ReLogo直接拖到所有图层最上面或选择后按 Control + Option + Command + ↑ 快捷键 来置顶图层
然后双击A组（第一列）来展开A组 －如果刚才锁定的图层取消了，选择的时候需要同时按Option来实现第二个图层透选功能，下同
选中A1，确保鼠标位置一直位于A1内部，按 Control + C 进入拾色模式，现在拾色器显示的是最上层锁定层取样的颜色
这时点下鼠标将这个颜色赋予底层的A1。可以看到A1的填充已经实现
重复这一操作
点击选中图层 -& Control + C -& 点击确认
（双击进图层组）
不到两分钟，所有色块填色完成
这时可以按 Shift + Command + H 来反复 显示／隐藏最顶端的图层 来肉眼观察上下颜色是否一致。
确认无误后隐藏顶端的图层，按照需要的大小缩放输出即可。
虽然操作简单，但是重要的是如何在制图的过程中保持高效和思维的活跃
下期我们学习通过Maya用纯粹的代码来制作3D版ReLogo，是不是很酷炫呢，敬请期待！
Live Curious
原文地址：, 感谢原作者分享。
您可能感兴趣的代码如何用sketch制作精致的APP原型10 months ago赞赏还没有人赞赏，快来当第一个赞赏的人吧！161收藏分享举报文章被以下专栏收录好产品能提高幸福感推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&好产品能提高幸福感&,&permission&:&COLUMN_PUBLIC&,&memberId&:140323,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&好产品能提高幸福感&,&urlToken&:&pengideas&,&id&:7164,&imagePath&:&f4a57eb2943efc6a94909.png&,&slug&:&pengideas&,&applyReason&:&&,&name&:&产品之路&,&title&:&产品之路&,&url&:&https:\u002F\\u002Fpengideas&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:763,&avatar&:{&id&:&f4a57eb2943efc6a94909&,&template&:&https:\u002F\\u002F{id}_{size}.png&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Ff4a57eb2943efc6a94909_l.png&,&articlesCount&:21},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-ee407bbdf61a98c28c791428_r.png&,&lastUpdated&:,&imagePath&:&v2-ee407bbdf61a98c28c791428.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[368,],&summary&:&一年前写过一篇文章：\u003Ca href=\&https:\u002F\\u002Fp\u002F\& data-editable=\&true\& data-title=\&如何用Axure快速制作APP交互原型\& class=\&\&\u003E如何用Axure快速制作APP交互原型\u003C\u002Fa\u003E，相对来说还算比较受欢迎。从文章的标题也能看出两点重要信息：工具是\u003Cstrong\u003E「Axure」\u003C\u002Fstrong\u003E，主要特点是\u003Cstrong\u003E「快速」\u003C\u002Fstrong\u003E。Axure作为一个老牌的设计工具，算是产品经理入门必备，而最近几年火起来的一个设计软件——sketch…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T18:48:27+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2120337,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&如何用sketch制作精致的APP原型&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:7164,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-ee407bbdf61a98c28c791428_r.png&,&author&:{&bio&:&产品狗，微信公众号：pengideas&,&isFollowing&:false,&hash&:&12dfaf77d3efd4385ac00ddf07ce69af&,&uid&:92,&isOrg&:false,&slug&:&liu-peng-96&,&isFollowed&:false,&description&:&大学三年毕业，产品狗&,&name&:&刘鹏&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fliu-peng-96&,&avatar&:{&id&:&8854dde58&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:140323,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:521127}],&title&:&如何用sketch制作精致的APP原型&,&author&:&liu-peng-96&,&content&:&\u003Cp\u003E一年前写过一篇文章：\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003E如何用Axure快速制作APP交互原型\u003C\u002Fa\u003E，相对来说还算比较受欢迎。从文章的标题也能看出两点重要信息：工具是\u003Cstrong\u003E「Axure」\u003C\u002Fstrong\u003E，主要特点是\u003Cstrong\u003E「快速」\u003C\u002Fstrong\u003E。\u003C\u002Fp\u003E\u003Cp\u003EAxure作为一个老牌的设计工具，算是产品经理入门必备，而最近几年火起来的一个设计软件——sketch，则异军突起，逐渐成为了互联网从业人员的新宠，不仅仅可以拿来画交互，也是UI设计的利器。所以，用sketch产出的内容有一个很大的特点就是颜值高，这篇文章就尝试讲解一下如何用\u003Cstrong\u003E「sketch」\u003C\u002Fstrong\u003E制作\u003Cstrong\u003E「精致」\u003C\u002Fstrong\u003E的APP原型，当然只要使用熟练，速度也是足够快的。\u003C\u002Fp\u003E\u003Cp\u003E需要先申明的一点，本文不是一篇sketch的入门教程，如果对sketch一点不熟悉的话，建议先看一遍sketch用户手册。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E1. sketch自带模板\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003ESketch做的非常人性化的一点，就是自带了很多模板，而且用来画交互完全够用，省去了从网上各种非正规渠道找资源的麻烦，如果你是sketch的老用户，而不知道自带模板功能的话，真的是要面壁思过了。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-3f60c5f105bff_b.png\& data-rawwidth=\&1246\& data-rawheight=\&336\& class=\&origin_image zh-lightbox-thumb\& width=\&1246\& data-original=\&https:\u002F\\u002Fv2-3f60c5f105bff_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1246'%20height='336'&&\u002Fsvg&\& data-rawwidth=\&1246\& data-rawheight=\&336\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1246\& data-original=\&https:\u002F\\u002Fv2-3f60c5f105bff_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-3f60c5f105bff_b.png\&\u003E\u003Cp\u003E其中，APP相关的模板有两个“iOS用户界面设计”和“Material Design”，顾名思义，分别用来设计ios界面和Android界面。以ios为例，模板中包含了常用的各种控件：状态栏、导航栏、弹窗、键盘等等，当我们需要的时候，直接拿过来用，不仅省事而且非常精致，并且如果我们多去研究并拆解一下官方的这些控件的制作过程，能给我们提供很多设计思路，比如如何用各种形状拼合成想要的图形，如何利用填充和阴影达到想要的视觉效果......这部分就不展开讲解了，留给你自己去发现。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-d20d28f2cecdf3ff9d687e_b.png\& data-rawwidth=\&1240\& data-rawheight=\&1068\& class=\&origin_image zh-lightbox-thumb\& width=\&1240\& data-original=\&https:\u002F\\u002Fv2-d20d28f2cecdf3ff9d687e_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1240'%20height='1068'&&\u002Fsvg&\& data-rawwidth=\&1240\& data-rawheight=\&1068\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1240\& data-original=\&https:\u002F\\u002Fv2-d20d28f2cecdf3ff9d687e_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-d20d28f2cecdf3ff9d687e_b.png\&\u003E\u003Ch2\u003E\u003Cstrong\u003E2. APP原型样式\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E知道利用sketch自带的APP界面模板之后，我们首先讨论一下APP原型采用哪个样式比较合适。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E2.1 待选样式\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E在Sketch中插入画板的时候，软件会提供一些常用设备的尺寸供用户选择，我们需要用到的是iPhone6（375×667px），为什么一定要采用iPhone6呢？非常重要的一点，是因为上边提到的sketch自带模板，iOS界面的所有控件大小全部是以iPhone6尺寸为基准的，拿过来可以直接使用。如果采用了plus或se的手机型号尺寸，控件大小和画板大小标准不一致，还得需要人为调整，异常的繁琐。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-6b44ec3af7cde_b.png\& data-rawwidth=\&803\& data-rawheight=\&308\& class=\&origin_image zh-lightbox-thumb\& width=\&803\& data-original=\&https:\u002F\\u002Fv2-6b44ec3af7cde_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='803'%20height='308'&&\u002Fsvg&\& data-rawwidth=\&803\& data-rawheight=\&308\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&803\& data-original=\&https:\u002F\\u002Fv2-6b44ec3af7cde_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-6b44ec3af7cde_b.png\&\u003E\u003Cp\u003E当我们在同一个画布（或称为页面）下插入多个iPhone6画板时，sketch会自动排列所有的画板，间隔100px。然后经过一番设计，在各个画板上填充相关元素之后，大概就形成了这样一份交互稿，如下图：\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-cf23f7bf912_b.png\& data-rawwidth=\&2420\& data-rawheight=\&775\& class=\&origin_image zh-lightbox-thumb\& width=\&2420\& data-original=\&https:\u002F\\u002Fv2-cf23f7bf912_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2420'%20height='775'&&\u002Fsvg&\& data-rawwidth=\&2420\& data-rawheight=\&775\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2420\& data-original=\&https:\u002F\\u002Fv2-cf23f7bf912_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-cf23f7bf912_b.png\&\u003E\u003Cp\u003E看上去，整齐划一、非常美观，所以这种样式比较适合从全局的角度来展示APP所有页面的交互样式，但并不适用于作为交付物，提供给开发和测试同学在实际工作中使用，主要的问题有以下两点：\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E标注信息无法体现\u003C\u002Fstrong\u003E，标注信息包括了“页面之间的跳转关系”和“相关交互逻辑的说明性文案”。在sketch内，由于位于画板之外的元素无法显示并导出，如上，即以一个iPhone6页面为一个画板，造成画板之外的“箭头”或“文字”就无法派上用场；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E功能点结构化的展示比较欠缺\u003C\u002Fstrong\u003E，上面也提到了，这种形式比较适合进行全局展现，但在实际项目运作中，会拆分成多个相关的独立功能点，并且每个主要功能点，又要分为正常主干流程和多个异常分支流程，同时对于分支流程来说，不一定需要整个页面做信息呈现，很可能局部模块展示就足够了。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E针对第1个问题，其实也有专门用来做标注的sketch插件，比如Notebook，直接用插件做标注虽然方便，但是格式太受限，非常的不灵活，尤其是经常需要修改时候，所以在我试用了两次之后，最终还是放弃了。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E2.2 采用样式\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E否定了上边提到的APP原型样式后，我们又该如何通过其它的样式来解决遇到的一些问题呢？\u003C\u002Fp\u003E\u003Cp\u003E在sketch中，是以画板或切片为单位进行导出的，所以我们可以根据需要，自由把握一个画板的大小，而不是局限于以一个iPhone6页面为一个画板。比如如果需要全局展示APP整体样式，则可以将所有APP页面放在一个画板中，如果只是讲解某个具体的功能点，则可以只将涉及到的APP页面放在一个画板中。\u003C\u002Fp\u003E\u003Cp\u003E那每个具体的APP页面该怎么体现呢，很简单，通过一个375×667px 的矩形框来表示一个常规的APP页，或许你已经注意到了，这个尺寸正好是sketch默认的iPhone6画板的大小，采用这个尺寸矩形的好处就是，所有自带的控件仍可以继续无缝的使用。\u003C\u002Fp\u003E\u003Cp\u003E这样做的另一个好处，APP页面之外可以体现更多的元素，比如表示跳转关系的“箭头”，比如解释性“文字”，比如表示分支流程的“局部模块”\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-5cd9c919efb_b.png\& data-rawwidth=\&1371\& data-rawheight=\&838\& class=\&origin_image zh-lightbox-thumb\& width=\&1371\& data-original=\&https:\u002F\\u002Fv2-5cd9c919efb_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1371'%20height='838'&&\u002Fsvg&\& data-rawwidth=\&1371\& data-rawheight=\&838\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1371\& data-original=\&https:\u002F\\u002Fv2-5cd9c919efb_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-5cd9c919efb_b.png\&\u003E\u003Cp\u003E如图所以，其中有几点使用习惯可以参考一下：\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E\u003Cp\u003E可以针对每个画板或者某个功能模块，宏观上用一句话概括一下功能点，从而帮助阅读者能快速的知道下面的交互针对哪个具体功能，如图中左上角的标题所示，说明这是与“增加在线客服”相关的需求；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E可以对每个具体的页面取一个小标题，从而帮助阅读者快速定位这是哪一个页面，如图中“1.1 个人中心”、“1.2 在线客服”两个页面标题，同时在需要引用其它相关页面的时候，也可以通过1.1、1.2的序号进行快速定位；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E对于每个页面的注释信息，可以采用一个固定的特殊颜色来进行区分，对于颜色选择恐惧症来说，直接从sketch全局颜色库中选择一个即可，另外注释部分放置的位置，可以在相关页面的右侧，也可以在下侧，具体怎么选择可以根据信息多少等实际情况来考虑；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E对画板中相关的元素根据相关性进行灵活的编组，比如可以将如图所示的1.1和1.2两个页面编成两个大组，同时对每个大组，再根据“页面”和“注释”两部分分别编组，当然层级可以继续下探，比如“注释”组中可以根据“文字”、“箭头”维度继续分组，具体维度的和粒度，可以根据个人习惯而定；\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Ch2\u003E\u003Cstrong\u003E3. 控件使用技巧\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E讲完了原型样式，下面说一下控件的使用技巧，主要有组件和文本样式两部分\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E3.1 组件\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E上边提到过，sketch自带模板中包含了很多常用控件，我们可以直接在自带的模板基础上进行设计，也可以自己创建一个新文件作为模板，然后根据情况，将需要使用到的控件复制过来用。我个人倾向于后一种，因为很多时候不需要这么多，按需提取即可，另外除了直接采用自带控件，自己也可以创建，同时可以灵活的维护多套模板，使用在不同的项目中。\u003C\u002Fp\u003E\u003Cp\u003E无法采用哪种使用形式，控件的使用中都会涉及到了一个非常重要的sketch功能点，那就是“组件\u002FSymbol”，sketch自带模板中的控件实际上就是组件的形式，它能够帮助我们方便的在多个页面和画板中重复运用某组内容，其实类似于Axure中的母版功能。比如APP端常用的cell控件，可以将常用的几种类型维护成组件，需要使用的时候，直接拖过来用，方便快捷。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-428c2ab4e2b6ad05eec79b2fb0be9243_b.png\& data-rawwidth=\&1052\& data-rawheight=\&177\& class=\&origin_image zh-lightbox-thumb\& width=\&1052\& data-original=\&https:\u002F\\u002Fv2-428c2ab4e2b6ad05eec79b2fb0be9243_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1052'%20height='177'&&\u002Fsvg&\& data-rawwidth=\&1052\& data-rawheight=\&177\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1052\& data-original=\&https:\u002F\\u002Fv2-428c2ab4e2b6ad05eec79b2fb0be9243_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-428c2ab4e2b6ad05eec79b2fb0be9243_b.png\&\u003E\u003Cp\u003E除了系统层面的“状态栏”、“导航栏”、“键盘”等组件，针对特定的项目，自己也可以将常用的某个模块创建为组件，比如电商项目中常用的商品模板，可以创建“商品\u002F横排”“商品\u002F竖排”两种形式的组件，从而可以不断的快速复用。\u003C\u002Fp\u003E\u003Cp\u003E并且有个命名的小技巧可以参考一下，通过符号“\u002F ”进行名称的层级划分，sketch会自动将“\u002F”符号之前名称相同的组件归为一组，分门别类之后，我们在插入组件的时候就能快速定位，尤其是组件比较多的时候。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-e4e43d522d1a8e35eaef5_b.png\& data-rawwidth=\&1133\& data-rawheight=\&315\& class=\&origin_image zh-lightbox-thumb\& width=\&1133\& data-original=\&https:\u002F\\u002Fv2-e4e43d522d1a8e35eaef5_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1133'%20height='315'&&\u002Fsvg&\& data-rawwidth=\&1133\& data-rawheight=\&315\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1133\& data-original=\&https:\u002F\\u002Fv2-e4e43d522d1a8e35eaef5_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-e4e43d522d1a8e35eaef5_b.png\&\u003E\u003Cp\u003E在使用“组件”功能的时候，我们会经常遇到一种情况，视觉样式都是一样的，但是文案有不同，比如“按钮”控件，和上边提到的“cell”控件。sketch非常完美的解决了这个问题，当我们插入一个组件后，可以用特定的文字去覆盖原有组件的文字，甚至不透明度、混合形式、阴影都可以自定义。如下图所示，我从同一个组件插入了三个按钮，每个都可以配置不同的文案和不透明度。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-2defeefb3d1722_b.png\& data-rawwidth=\&1133\& data-rawheight=\&231\& class=\&origin_image zh-lightbox-thumb\& width=\&1133\& data-original=\&https:\u002F\\u002Fv2-2defeefb3d1722_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1133'%20height='231'&&\u002Fsvg&\& data-rawwidth=\&1133\& data-rawheight=\&231\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1133\& data-original=\&https:\u002F\\u002Fv2-2defeefb3d1722_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-2defeefb3d1722_b.png\&\u003E\u003Cp\u003E综上，我们可以直接复制sketch中自带的控件（以组件形式存在），也可以自己把常用的某些模块创建为组件，这些就组合成了针对某个项目的特定组件库，在画交互的时候直接可以复用，并且还支持文案、不透明度等自定义，效率和美观性都得到了保障。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E3.2 文本样式\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E“组件”功能的核心使用场景就是某些元素经常需要复用在不同地方，字体和图层也如此。在一个项目的交互稿中，使用到的样式种类是有限的，如果对每个元素如果都单独维护，会比较繁琐，sketch中的“文本样式”和“图层样式”功能就完美解决了这个问题，针对文字和图形元素，在“检查器”中选择需要共享的样式，能够快速的将颜色、阴影、不透明度等样式配置套用过来，而不再需要做重复性的样式配置，非常的便捷。\u003C\u002Fp\u003E\u003Cp\u003E可以根据需要，整理一套自己常用的样式规范，比如”正文常规性文字”，统一采用“微软雅黑，色值#ffffff，字号18pt”的样式，在之前提到的“页面注释说明”，统一采用“微软雅黑，色值#5CD600，字号20pt”.......将规范维护成共享的样式文本，在需要的地方直接复用即可，不仅仅提高了效率，并且保证了交互稿统一美观性。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-853d25d708fcc1_b.png\& data-rawwidth=\&1026\& data-rawheight=\&239\& class=\&origin_image zh-lightbox-thumb\& width=\&1026\& data-original=\&https:\u002F\\u002Fv2-853d25d708fcc1_r.png\&\u003E熟练使用“组件”和“文本样式”，不仅仅是在创建的时候能提高效率，尤其是在涉及修改时，你会发现只要修改一处，全局同步调整完成，那种快速带来的痛快感更加明显。当然效率的提升是一方面，通过不断复用标准精致的控件，采用统一规范的文本样式，也保障了交互稿整体的美观性。\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1026'%20height='239'&&\u002Fsvg&\& data-rawwidth=\&1026\& data-rawheight=\&239\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1026\& data-original=\&https:\u002F\\u002Fv2-853d25d708fcc1_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-853d25d708fcc1_b.png\&\u003E熟练使用“组件”和“文本样式”，不仅仅是在创建的时候能提高效率，尤其是在涉及修改时，你会发现只要修改一处，全局同步调整完成，那种快速带来的痛快感更加明显。当然效率的提升是一方面，通过不断复用标准精致的控件，采用统一规范的文本样式，也保障了交互稿整体的美观性。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E4. 原型文件维护和导出\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E原型设计的一些思路说的差不多了，那不同项目以及不同版本的原型该怎么维护比较合适，将原型同步给团队成员的方式有哪些呢？\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E4.1 原型文件维护\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E需要注意的一点是，上边提到的“组件”和“文本样式”，它们均保存在某一文件中，并不能在不同文件中共享，并且这两个东西是跟项目有比较大的相关性，所以我比较倾向于一个项目维护一个sketch文件，比如“某某应用APP端原型”文件。\u003C\u002Fp\u003E\u003Cp\u003E以一个页面（或称为画布）呈现一个版本的原型内容，然后在某个页面\u002F版本内，以一个画板呈现一个功能点模块的原型内容。当然，主体思路是这样的，特殊情况也可以做灵活的调整，比如对应用的第一个版本来说，原型内容会非常多，也可以分成多个页面来呈现。\u003C\u002Fp\u003E\u003Cp\u003E这样做，不仅仅是“组件”和“文本样式”可以在一个项目内复用，其它相关的元素，比如某个页面，或者某个画板，都可以更加方便的复用。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-49cdcc67f11ba53fde3ea3c6_b.png\& data-rawwidth=\&746\& data-rawheight=\&184\& class=\&origin_image zh-lightbox-thumb\& width=\&746\& data-original=\&https:\u002F\\u002Fv2-49cdcc67f11ba53fde3ea3c6_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='746'%20height='184'&&\u002Fsvg&\& data-rawwidth=\&746\& data-rawheight=\&184\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&746\& data-original=\&https:\u002F\\u002Fv2-49cdcc67f11ba53fde3ea3c6_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-49cdcc67f11ba53fde3ea3c6_b.png\&\u003E\u003Cp\u003E\u003Cstrong\u003E4.2 导出和共享\u003C\u002Fstrong\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E然后简单说一下导出，对于交互稿来说，基本上以画板为单位进行导出就够了，至于是图片格式，还是PDF等其它格式，以团队内其他成员普遍接受的形式既可。当然也可以用插件，以HTML的格式进行导出，我常用的就是这一种，好处就是以网页形式打开，在左侧可以看到所有画板的列表，也就是某个版本内所有的功能点信息，相互切换也比较方便。\u003C\u002Fp\u003E\u003Cp\u003E最后推荐一个sketch插件，sketch-measure 下载地址：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Futom\u002Fsketch-measure\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eutom\u002Fsketch-measure\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 这块插件功能非常强大，导出只是其中一个（我就是用这块插件来导出html格式原型），更多功能可以自己去探索。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-cfeca1ebc2e103e20cff77_b.png\& data-rawwidth=\&803\& data-rawheight=\&262\& class=\&origin_image zh-lightbox-thumb\& width=\&803\& data-original=\&https:\u002F\\u002Fv2-cfeca1ebc2e103e20cff77_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='803'%20height='262'&&\u002Fsvg&\& data-rawwidth=\&803\& data-rawheight=\&262\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&803\& data-original=\&https:\u002F\\u002Fv2-cfeca1ebc2e103e20cff77_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-cfeca1ebc2e103e20cff77_b.png\&\u003E\u003Ch2\u003E\u003Cstrong\u003E5. 总结\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E以上，基本就是用sketch设计APP原型的整体思路，产出物从视觉上看会非常精致，完全达到了高保真原型的水准，使用熟练的话，制作效率也非常高。在同样甚至更短的时间内，如果能设计出更精致的原型，何乐而不为呢？\u003C\u002Fp\u003E\u003Cp\u003E当然，设计思路不仅仅适用APP端，也同样适用于web端项目，只需要将页面大小和相关控件更换一下就可以。\u003C\u002Fp\u003E\u003Cp\u003E欢迎关注公众号「产品之路」：pengideas，回复“sketch模板”可获得包含文中截图内容的sketch文件。\u003C\u002Fp\u003E&,&updated&:new Date(&T10:48:27.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:14,&collapsedCount&:0,&likeCount&:161,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-ee407bbdf61a98c28c791428_r.png&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&产品经理&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&原型设计&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&Sketch&}],&adminClosedComment&:false,&titleImageSize&:{&width&:900,&height&:500},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&pengideas&,&name&:&产品之路&},&tipjarState&:&activated&,&tipjarTagLine&:&你有收获吗？&,&sourceUrl&:&&,&pageCommentsCount&:14,&tipjarorCount&:0,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T18:48:27+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&You're here to express love not live in fear.&,&isFollowing&:false,&hash&:&092ffec4b8d317b3516d27&,&uid&:44,&isOrg&:false,&slug&:&chen-kuo-2&,&isFollowed&:false,&description&:&&,&name&:&陈 Hua&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fchen-kuo-2&,&avatar&:{&id&:&v2-06e27d374f5acbb65ffd&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&研究生&,&isFollowing&:false,&hash&:&3ead9de93882&,&uid&:582100,&isOrg&:false,&slug&:&wu-di-7-24&,&isFollowed&:false,&description&:&&,&name&:&吴迪&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwu-di-7-24&,&avatar&:{&id&:&v2-a493ee2f677f146c9d3d78&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&4abaaf5d5a54eab622b1f&,&uid&:68,&isOrg&:false,&slug&:&yukunyi&,&isFollowed&:false,&description&:&&,&name&:&fishky&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyukunyi&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&当你长跑的时候，你就光芒万丈&,&isFollowing&:false,&hash&:&8f8db0d57bbed&,&uid&:04,&isOrg&:false,&slug&:&chenhao-zhu-92&,&isFollowed&:false,&description&:&&,&name&:&Chenhao Zhu&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fchenhao-zhu-92&,&avatar&:{&id&:&v2-4dd42bc85dbab&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&4b0fe5cae90cf&,&uid&:302100,&isOrg&:false,&slug&:&dan-qin-bu-ru-tiao-wu&,&isFollowed&:false,&description&:&&,&name&:&弹琴不如跳舞&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fdan-qin-bu-ru-tiao-wu&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\\u002F50\u002Fv2-3f60c5f105bff_200x112.png\& data-rawwidth=\&1246\& data-rawheight=\&336\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\\u002F50\u002Fv2-3f60c5f105bff_r.png\&\u003E一年前写过一篇文章：\u003Ca href=\&https:\u002F\\u002Fp\u002F\& data-editable=\&true\& data-title=\&如何用Axure快速制作APP交互原型\& class=\&\&\u003E如何用Axure快速制作APP交互原型\u003C\u002Fa\u003E，相对来说还算比较受欢迎。从文章的标题也能看出两点重要信息：工具是\u003Cstrong\u003E「Axure」\u003C\u002Fstrong\u003E，主要特点是\u003Cstrong\u003E「快速」\u003C\u002Fstrong\u003E。Axure作为一个老牌的设计工具，算是产品经理入门必备，而最近几年火起来的一个设计软件——sketch…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fv2-0f2514e9adcbe7f9702bb7f_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&产品设计&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&产品经理招聘&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&交互设计&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&产品狗，微信公众号：pengideas&,&isFollowing&:false,&hash&:&12dfaf77d3efd4385ac00ddf07ce69af&,&uid&:92,&isOrg&:false,&slug&:&liu-peng-96&,&isFollowed&:false,&description&:&大学三年毕业，产品狗&,&name&:&刘鹏&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fliu-peng-96&,&avatar&:{&id&:&8854dde58&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&pengideas&,&name&:&产品之路&},&content&:&\u003Cp\u003E前段时间发了一篇文章：\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003E两个真实产品案例所引发的思考\u003C\u002Fa\u003E。主要对两个切身经历的产品案例，进行了一些分析和思考。有读者评论说可以多分享一些案例形式的人讲解，正好最近又遇到一个比较“有意思”的案例，可以拿出来说道说道。\u003C\u002Fp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-6cdcd64cb6b746da5e0ee31_b.png\& data-rawwidth=\&1430\& data-rawheight=\&136\& class=\&origin_image zh-lightbox-thumb\& width=\&1430\& data-original=\&https:\u002F\\u002Fv2-6cdcd64cb6b746da5e0ee31_r.png\&\u003E\u003Ch2\u003E\u003Cb\u003E背景说明\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E作为一个电商平台，前不久我们上线了申请开发票功能，用户可以选择“普通发票-个人”、“普通发票-单位”、“专用发票”三种类型，其中“专用发票”类型需要填写的信息比较多，在该功能上线一期，出于精简考虑，系统没有保存专票信息。\u003C\u002Fp\u003E\u003Cp\u003E在后边的版本迭代中，我们紧接着把专用发票的模块功能提上了日程，在做具体设计的时候，身为产品同学我和交互同学产生了比较大的分歧，主要的问题点有如下三个：\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E一、专用发票的模板数量提供一个还是多个？\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E交互同学的想法是可维护多个，给用户提供更多的自主性。我坚持的是初期只维护一套模板即可，我又有哪些考虑呢？\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E首先，多套专票模板的用户需求量到底能有多少？\u003C\u002Fb\u003E根据以往数据统计，开票的用户本身就是一小部分，并且开专票的比例也很少，其中又同时需要多个专票模板的用户肯定更是少之又少。并且单纯的从主观性上考虑，开具的专票内容相对是固定的，而不像网购的收货地址，可能有家庭地址、公司地址、女朋友的地址等等。所以，多套模板的需求是否存在，或者说需求量有多少目前还是存疑的。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E然后，在看一下多套模板带来的成本有哪些？\u003C\u002Fb\u003E最显而易见的就是开发成本，因为需要支持多套模板，用户任意添加，其开发维护成本势必会增加。还有隐性的用户使用成本，尤其是那些基本上都是使用一套专用发票的用户，无论是在申请开发票填写信息时，还是维护过程中，交互的逻辑相对也会更复杂一些，后边的第二点也会具体说明到这块内容。\u003C\u002Fp\u003E\u003Cp\u003E综上两点，多套专用发票模板的需求量还是存疑的，并且也会带来额外的成本，所以我倾向选择一期仅提供一套专票信息模板即可。当然，后面的版本迭代中，完全可以再根据实际情况进行调整。这也算是在践行着\u003Cb\u003EMVP\u003C\u002Fb\u003E的设计思路。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E二、申请发票过程中专票信息模板的处理方式\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E前面说明了，发票的类型一共有三种供选择：“普通发票-个人”、“普通发票-单位”、“专用发票”，具体的交互逻辑如下，选择好类型之后则需要填写对应的信息，其中前两种类型信息很少，只需考虑给专票信息提供模板即可。\u003C\u002Fp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-d4fd3c74efdc74b1b5dbe3d_b.png\& data-rawwidth=\&1286\& data-rawheight=\&282\& class=\&origin_image zh-lightbox-thumb\& width=\&1286\& data-original=\&https:\u002F\\u002Fv2-d4fd3c74efdc74b1b5dbe3d_r.png\&\u003E\u003Cp\u003E假定确定只维护一套专票信息模板，申请开票的过程中用户若选择了“专用发票”，此时专票模板中的信息该如何体现出来呢？\u003C\u002Fp\u003E\u003Cp\u003E常见的一种处理方式，就是当用户选中“专票类型”后，直接把专票信息模板中的信息显示出来供用户查看，确定无误的话则直接提交，如果有问题的话可以点击编辑按钮，进入二级页面进行修改。同时交互上也要考虑，用户第一次申请开专票，没有维护模板的情况下的处理方式。\u003C\u002Fp\u003E\u003Cp\u003E这种处理方式有一个问题，如果选择“普通发票-个人”、“普通发票-单位”类型，则是表单项需要填写，而选择“公司专用发票”后却是展示专票模板，并可以进入修改的二级页面，这使得在同一个路径中，分成了不同的交互逻辑，本身会有点怪异；并且这种专票模板的处理方式，在已上线的一期方案基础上，无论是交互逻辑和技术实现上都会变得更加复杂，实际的用户体验也是个未知数。\u003C\u002Fp\u003E\u003Cp\u003E以上是交互提出的方案，而在我最脑海中最初设想的另外一种处理方式：当用户选中“专用发票”类型后，页面下方仍然是需要填写的表单项，此时系统做判断，分为两种情况：1）如果是第一次申请专票，没有记录任何专票信息，则为正常的空表单需用户填写；2）如果系统已经记录了专票信息，则表单把模板信息做默认填充，用户检查无误的话，直接提交，如果发现有信息需要修改，直接在默认填充的信息上进行修改后提交，并且此时系统会更新专票模板的信息。\u003C\u002Fp\u003E\u003Cp\u003E这种处理方式在只维护一套专票模板的基础上，只是做了表单项的默认填充，无论是交互逻辑，还是技术实现上都更加简洁清晰。并且这种处理方式很好的包含了第一次无专票模板的场景和有专票模板的场景，另外用户如果在开票过程中需要修改信息，也更加直观自然。所以最终我还是坚定选择了这种处理方式。\u003C\u002Fp\u003E\u003Cp\u003E然后，针对这个点再谈一下问题一遗留的那个问题，如果要支持多套模板，那在申请开发票的流程中，其处理方式必定会更加复杂，不仅要能够从多套模板中选择一个，也要能够修改某个模板信息，并且还要能在开票过程中直接新增模板。这不不仅仅会加大技术实现的成本，并且在需求不明确的情况下也会增加现有用户的使用成本。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E三、是否在个人中心增加专票信息维护入口\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E除了在申请开发票的过程中，可以填写\u002F修改专票的信息，那在个人中心页面是否要增加的专票信息维护的入口呢？\u003C\u002Fp\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-cf86bee06a37f2d6959b78_b.png\& data-rawwidth=\&1540\& data-rawheight=\&846\& class=\&origin_image zh-lightbox-thumb\& width=\&1540\& data-original=\&https:\u002F\\u002Fv2-cf86bee06a37f2d6959b78_r.png\&\u003E\u003Cp\u003E交互设计师最初的设计方案是不需要，他给出的原因主要有两点：1）以上已经分析过，需要维护专票信息的用户是一小部分，所以不应该为了少部分用户的需求而在个人中心页面增加独立的入口；2）专票信息应该出现在被需要的地方就够了，就是申请开票过程中。\u003C\u002Fp\u003E\u003Cp\u003E针对第1点，我觉得应该要有一个限定的场景，就是在任务的主流程中，要足够简化，不能因为个别用户的特殊需求而损害了大部分正常用户利益。可是“个人中心”的定位本身就是个人相关信息的展现，而发票信息很自然的应该被归为其中的一部分，并且在这里放置发票信息，并没有对其他正常用户造成额外的干扰。所以这个观点根本无法套用在这个场景中。\u003C\u002Fp\u003E\u003Cp\u003E针对第2点，如果只考虑大部分的正常使用场景确实如此，可是如果当用户在非开票时想要修改专票信息该怎么办呢？可能有人也会质疑说：这是一种非常低频的使用场景。的确如此，可同时我们也可以继续思考，为了满足这部分低频场景下的需求，在个人中心增加了发票信息的维护入口后，又会带来什么损害吗？如果答案是否定的，并且我们也认可“专票信息”同属于“个人信息”中的一类，为何不增加入口维护呢？\u003C\u002Fp\u003E\u003Cp\u003E其实，对于这个问题，“专票信息”在某种程度上跟“收获地址”是类似的，而电商平台通用的做法就是，除了在下单时可以填写\u002F修改收货地址，在个人中心也会提供相应的维护入口。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E总结\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E以上，是针对专票信息维护这个产品案例，我在设计过程中的一些思考，其中主要的思路可以总结为以下几点：\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E当需求不明确时，尽量简化功能，甚至暂时不做，即学会MVP的设计思路；\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E除了考虑功能带来的收益，也要考虑实现成本，当成本过大而收益有限时一定要慎重；\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E尽量保证前台交互方式的一致性和简洁性，不要让用户有过多的思考；\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E在保障前台用户体验的前提下，也要考虑系统实现的复杂性和难易程度，尤其针对迭代功能，设计方案尽可能在原有基础上简化处理；\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E除了要支持主流的使用场景，也要考虑是否可以满足某些特殊的使用场景；\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E当犹豫是否要支持某些低频的使用场景时，也可以反向思考如果要支持，需要付出多大的成本，又会带来哪些损害，当收益比足够大时，就可以考虑；\u003Cbr\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cbr\u003E\u003Cp\u003E虽然在讨论中，我比较强势地否定了很多交互设计师的观点，但也要坦诚我的设计思路中也会存在局限，存在有所欠缺的地方，所以也欢迎大家来拍砖，一起讨论。\u003Cb\u003E做产品设计往往就是这样，很多时候不存在完美无瑕的方案，但是通过反复的思考和讨论，能够不断得出更好的方案。\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E欢迎关注「产品之路」公众号：pengideas\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T19:33:48+08:00&,&url&:&\u002Fp\u002F&,&title&:&没有完美的方案，只有更好的方案&,&summary&:&前段时间发了一篇文章：\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003E两个真实产品案例所引发的思考\u003C\u002Fa\u003E。主要对两个切身经历的产品案例，进行了一些分析和思考。有读者评论说可以多分享一些案例形式的人讲解，正好最近又遇到一个比较“有意思”的案例，可以拿出来说道说道。\u003Cb\u003E背景说明\u003C\u002Fb\u003E作为一个电商平台，前不…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:1,&likesCount&:3},&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fv2-e2b26a0af19c175bafa4a_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&产品经理&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&个人成长&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&产品经理入门&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&产品狗，微信公众号：pengideas&,&isFollowing&:false,&hash&:&12dfaf77d3efd4385ac00ddf07ce69af&,&uid&:92,&isOrg&:false,&slug&:&liu-peng-96&,&isFollowed&:false,&description&:&大学三年毕业，产品狗&,&name&:&刘鹏&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fliu-peng-96&,&avatar&:{&id&:&8854dde58&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&pengideas&,&name&:&产品之路&},&content&:&\u003Cblockquote\u003E如果你感觉到能力提升速度达不到自己的预期，不妨停下来好好思考思考，自己在哪方面可以有所改变。\u003C\u002Fblockquote\u003E\u003Cp\u003E春节回家期间，跟正在上高三的小侄女聊了一下她的学习状况，得知她数学偏科十分严重，满分150的试卷只考了30多分。对于“数学”这个高难度的学科而言，每个班级中都会呈现出严重的阶梯性分化现象，“头部”学生趋近满分，而“尾部”学生得分少的可怜。究其缘由，除了天赋差异的客观因素，在学习方法和技巧等方面是否有值得完善的地方呢？\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E在工作中也如此，站在同一起跑线上的应届生，能力提升的速度有快有慢，相互之间的差距逐渐加大。换个角度说，某些人三年工作经验带来的能力提升可能等于甚至超过其他人十年工作经验的积累。究其缘由，除了工作环境、项目机遇等客观因素，在个人成长中的主观态度和处事行为等方面是否存在着差别呢？\u003C\u002Fp\u003E\u003Cp\u003E对于学生而言，课本中学到的是“知识”，但如果只死记硬背“知识”却毫无意义，只有将“知识”转换成“解题能力”后才能在考试中拿高分；对于职场员工来说，工作中积累的是“经历”，只有将这些“经历”转换成对应的“工作能力”才能有效提高自身的核心竞争力。人与人之间差距的产生，很多时候就是因为在“能力转化”上效率有高有低造成的。\u003C\u002Fp\u003E\u003Cp\u003E那要如何成为一个高段位的学习者，让自己的能力快速提升呢？这是一个非常宏观复杂的问题，以下我只是尝试结合“一些数学学习建议”和“产品经理工作中的有限经验”，所做的一些思考，供大家参考。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E一、学习和积累“元知识”\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E关于数学学习的第一条建议就是，要多翻课本，熟练掌握最基本的定理和公式等知识点，比如“正余弦定理”、“求导公式”等，这些就是“元知识”。而对于产品经理来说，就是设计理念和交互规范等基本知识点，比如“APP端常见的几种导航方式”，“信息反馈形式”，甚至是某些常见的“技术实现方案”。\u003C\u002Fp\u003E\u003Cp\u003E为什么要着重强调掌握“元知识”，因为这是提炼自身能力的根基元素，就像对数学试题来说，变化的是题型样式以及已知条件或求解问题，但不变的是对基本的知识点的考察。\u003C\u002Fp\u003E\u003Cp\u003E如果知识点都没有掌握甚至不够熟练，根本没办法解题。这是非常简单的一个道理，但是仍有很多学习不好的学生，对课本中的知识都还不了解的情况下就盲目做题，往往事倍功半，甚至徒劳无功。\u003C\u002Fp\u003E\u003Cp\u003E对产品经理来说同样如此。在学校中没有完全对口的专业，也就没有系统性的理论知识学习，很多人甚至只是看了几本书，了解了一些概念，就走上了产品的路。\u003C\u002Fp\u003E\u003Cp\u003E为了提升自身能力，在工作中也需要刻意学习和积累产品相关的“元知识”。当“元知识”足够丰富的时候，面对问题能想到的解决方案才能更多，设计思路自认会更加开阔；相反的，如果“产品元知识”匮乏，产品解决方案很可能是单一的，或不够完美，甚至是毫无头绪。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E二、基于探究的深入学习\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E数学成绩不好的学生还有一个不好的习惯，就是盲目的采用“题海战术”，表面看起来是“做”了很多题目，但是要么是浏览题意后不会做略过了，要么就是对照着标准答案把过程抄一遍了事。这种学习方法的效率也非常低，只追求了“量”，而忽略了“质”。\u003C\u002Fp\u003E\u003Cp\u003E高效的学习方法，应该是针对有疑问的题目深入的探究下去，在探究中可能会发现有仍未掌握的“元知识”，或是可以将已有的解题方法加以改进，或是总结出此类题型统一的解题规律，无论如何总可以深化对答案的理解，这就是基于探究的学习。\u003C\u002Fp\u003E\u003Cp\u003E做产品的道理也类似，不要一味的追求项目经历或功能模块的多少，要学会抓住每一个有价值的点，深入的探究下去。在逐渐深入探究的过程中，你可能会发现更合适的产品解决方案，也可能不断推翻先前的判断，从而使自己的认知不断升级，也可能会剥离出一个通用的设计思路或是“产品元知识”，从而用来指导下一次的产品设计。\u003C\u002Fp\u003E\u003Cp\u003E之前我写过的一篇文章\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003E“两个真实产品案例所引发的思考”\u003C\u002Fa\u003E，就是对工作中遇到的实际案例进行了深入的探究，功能点或许很小，但是深入思考后，带来的收获却可以非常大。\u003C\u002Fp\u003E\u003Cp\u003E基于探究的学习还有一个好处，就是帮助我们从问题出发，形成长期的、一贯的思考路径。不仅仅能帮助我们透彻的掌握住所遇到的问题和相关知识，更能提高我们面对新问题时的解决和应对能力。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E三、探索过程比得出结论更加重要\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E当遇到不会做的数学题目时，大部分同学只关心正确的答案到底是什么？而很少去思考解题过程是怎么样的，自己为何没有想到？这种只关心结论的学习方式，很容易陷入到一种死板僵化的思考模式中，没办法做到举一反三和融会贯通。当题型发生变化，或者已经条件和求解问题调换一下，很可能就无从下手了。\u003C\u002Fp\u003E\u003Cp\u003E聪明的学习者，则会探索解题的过程和思路，会做相应的归纳和总结，这也是上学时老师要求我们要有“错题本”或“总结本”的意图。当对过程了然于胸时，得出答案就是顺其自然的事情。\u003C\u002Fp\u003E\u003Cp\u003E作为产品经理，在学习过程中也是如此，当我们分析竞品时，或者在听取产品前辈的指导时，不要仅仅只关注其最终所采用的设计方案，还要学会去探索为什么要这样做。是出于什么样的业务背景来考虑的？是否有效支撑了不同的使用场景？\u003C\u002Fp\u003E\u003Cp\u003E同样，在我们自己设计产品方案时，切忌轻易的下任何结论，而应该是深入的思考，衡量多个影响因素之间的重要程度，考虑不同的使用场景下的处理方式等等，当过程探索的细无巨细时，结论很多时候就变得显而易见了。\u003C\u002Fp\u003E\u003Cp\u003E探究过程的学习思路是通用的，比如当我们看一篇议论文，我们可能要去思考，作者是使用了什么样的材料论据、通过了什么样的推理，才使其论点成立、能够把人说服，看一本书时亦是如此。\u003C\u002Fp\u003E\u003Cp\u003E当我们有意识的去探索整个创造过程时，我们才能高效的借鉴和学习当事人最精华的思考路径，而不仅仅局限于表面的结论，同样，当我们自己作为主导人时，也才能经过更全面缜密的思考过程，得出更完美的结论，如此，我们自身的能力才会有更快的提升。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E总结\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E成长速度是受多方面因素所影响的，有些是无法改变的客观环境，比如家庭出身等；有些是通过努力可以改变的客观环境，比如工作环境、项目经历等；还有些则是以个人主观意识为主的学习方法和思考方式等等。\u003C\u002Fp\u003E\u003Cp\u003E以上，是我的一些小思考，如果你感觉到能力提升速度达不到自己的预期，不妨停下来好好思考思考，自己在哪方面可以有所改变。\u003C\u002Fp\u003E\u003Cp\u003E如若对你有所启发，欢迎点赞......或关注公众号：pengideas（产品之路）\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T11:52:36+08:00&,&url&:&\u002Fp\u002F&,&title&:&为什么你能力提升的速度太慢？&,&summary&:&如果你感觉到能力提升速度达不到自己的预期，不妨停下来好好思考思考，自己在哪方面可以有所改变。春节回家期间，跟正在上高三的小侄女聊了一下她的学习状况，得知她数学偏科十分严重，满分150的试卷只考了30多分。对于“数学”这个高难度的学科而言，每个…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:4,&likesCount&:16}},&annotationDetail&:null,&commentsCount&:14,&likesCount&:161,&FULLINFO&:true}},&User&:{&liu-peng-96&:{&isFollowed&:false,&name&:&刘鹏&,&headline&:&大学三年毕业，产品狗&,&avatarUrl&:&https:\u002F\\u002F50\u002F8854dde58_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&liu-peng-96&,&bio&:&产品狗，微信公众号：pengideas&,&hash&:&12dfaf77d3efd4385ac00ddf07ce69af&,&uid&:92,&isOrg&:false,&description&:&大学三年毕业，产品狗&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\\u002Fpeople\u002Fliu-peng-96&,&avatar&:{&id&:&8854dde58&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&nwebStickySidebar&:&sticky&,&androidPassThroughPush&:&getui&,&newMore&:&new&,&liveReviewBuyBar&:&live_review_buy_bar_2&,&liveStore&:&ls_a2_b2_c1_f2&,&searchHybridTabs&:&without-tabs&,&isOffice&:&false&,&homeUi2&:&default&,&answerRelatedReadings&:&qa_recommend_with_ads_and_article&,&remixOneKeyPlayButton&:&headerButton&,&asdfadsf&:&asdfad&,&qrcodeLogin&:&qrcode&,&newBuyBar&:&livenewbuy3&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&zcmLighting&:&zcm&,&favAct&:&default&,&appStoreRateDialog&:&close&,&mobileQaPageProxyHeifetz&:&m_qa_page_nweb&,&iOSNewestVersion&:&4.2.0&,&default&:&None&,&wechatShareModal&:&wechat_share_modal_show&,&qaStickySidebar&:&sticky_sidebar&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&default&}},&columns&:{&next&:{},&pengideas&:{&following&:false,&canManage&:false,&href&:&\u002Fapi\u002Fcolumns\u002Fpengideas&,&name&:&产品之路&,&creator&:{&slug&:&liu-peng-96&},&url&:&\u002Fpengideas&,&slug&:&pengideas&,&avatar&:{&id&:&f4a57eb2943efc6a94909&,&template&:&https:\u002F\\u002F{id}_{size}.png&}}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}