设计一个小程序的流程 第1篇
即原子设计法或者设计系统？（概括为一种较规范的设计方法）主要规范的方向有两个。
一：规范设计控件，统一设计元素类别。目的在于通过设计元素的复用提高设计效率，以及统一设计内容的视觉效果，便于构建规范。早期有意识的设计与构建规范并行，优于设计完成后总结归纳规范。
二：遵循开发者思维进行设计，模拟开发人员的box实现原则进行控件的设计。目的在于提高切图效率及开发效率更能提高设计还原度，便于后期维护。
由于产品原型与交互稿制作期间，设计师都有参与，因此对界面布局等结构层和框架层的内容都已达成一致。因此可根据最终原型直接开展设计。（如果直接拿到的是产品已经产出的原型，设计师一定要从设计角度及用户角度重新审视交互稿。最低要保证不低于竞品的体验，走查并避免一些需要学习成本的交互，如非必要，请参考上线产品而不是重新设计交互原则。）
小微会议是一款偏工具型的会议办公类产品，主打基于微信圈的会议提醒的功能。用户可以方便的创建会议并通过微信分享的方式发送至群和个人用户，提高下发会议通知的效率，且会议发起方能清晰的了解到参会情况。
小而简的功能决定了其设计风格应当更加倾向简洁清晰。用色则采取常用的蓝色系，属于工具类产品高频用色。定义好配色，间距等规范后，完成首页设计并输出规范交由合作设计师。首页效果及规范如下如所示。
表单设计是产品的重中之重，而input项的体验是产品核心体验的重中之重。微信官方提供有完备的控件可以直接使用，但为追求视觉效果及产品差异化，最终决定重新设计表单组件。设计表单过程中通过参考各种线上的表单设计，以及查阅大量表单设计规范原则。最终以只问所需、反馈、防错与纠错、合理排序为基本原则开展设计。表单设计体验可以参考此文章：。
设计一个小程序的流程 第2篇
完成方案后，开始执行，整个产品迭代遵循计划-执行-检验-纠正循环往复的体系。
设计规范的的一个核心目的在于指导项目开发人员及设计人员以更高质量和更高效率完成产品设计。在此基础上可以进行查漏补缺，规范设计产出以及开发者的实现效果。
不同于我们平时收藏的各大厂输出的精致庞大的设计规范，此类规范是在产品中后期完成产品规格的统一后逐渐形成的，需要多人维护，庞大（内容量大，各类设计元素，从logo到品牌推广，合作方案等等）细致（有归纳详尽的控件及原子级设计元素）。更适合产品由1到100的过程，而不适合产品自0到1的研发期场景。
而我所面对的场景是完成本项目设计需要多人协作，这一特点要求我必须在产品设计的伊始完成通用设计规范的构建。此规范目的为统一不同设计师的设计产出，其作用为指导设计师设计产出，由于时间因素等原因，此规范尽量简单易用，无法做到全面，但要求高度概括。 在进行UI设计的起始主动制定规范，表面上限制了设计师自身的发挥空间，但保证了设计的严谨性，而且规范不是一成不变，灵活运用并能够随时更新。
以构建早期通用设计规范为目标，我总结出以下几项用于指导设计师，统一视觉产出。
设计一个小程序的流程 第3篇
大家可以发现，其实我所说的不看好小程序的未来，只是不看好微信小程序的未来，但是小程序这种生态模式，绝对是未来的一个趋势所在，因为它拥有特定的应用场景，符合人们对于碎片化，场景化的功能与服务的期待。
所以我认为，小程序的设计模式是设计师一定要去学习的，而企业也一定要研究自己的产品是否在小程序下有应用场景，因为谁都不能保证，小程序是否也会有像App一样，发生流量井喷的一天，到那时候如果再上车，真的就为时已晚了。
很多朋友问我为什么挑选这个时间来写小程序？为什么不赶小程序大火的时候写？或者为什么不写一些别的流行趋势上的话题？
第一，写文章不是为了追赶流行趋势，而是写我想写的内容。
第二，只有市场冷静下来，我们才能更清晰的分析一件事情，包括我在内也是。只引入我思考的过程，而不带有主观的偏见，是我写文章的原则。
希望我能一直带着这样的态度给大家带来更多有益的内容。
另外，由于文章的篇幅有限，很多的内容其实经历过了很多次筛选，才最终呈现给大家，希望能帮助到正在研究小程序的你。
感谢阅读！
设计一个小程序的流程 第4篇
排序是布局的关键因素，不同产品遵循不同原则进行排序。概括来说仍然是亘古不变的两个方向，即业务向和体验向。左上至右下重要性呈递减趋势，展示必要信息与功能而隐藏次要信息。以及遵循基础的格式塔原理，通过不同间距区分模块。
当下设计软件众多，用户界面设计首推sketch，没有mac机的同学也可以使用adobeXD来提高设计效率。接下来想分享的是sketch的组件功能，能大幅提高设计效率，减少后期维护成本，易于形成产品自身高度统一的规范。此功能极度契合原子设计法和设计系统等设计方法论。（超级传送门：）实际操作如下图。
当然组件并不是简单的将成组的元素再次打包一遍。组件化的关键在于更标准的规范以及更低的修改和维护成本。设计组件需要有宏观的设计意识，既考虑当下的布局也要考虑设计的延展性，同时要了解基本的开发实现逻辑，比较常用的如下图的box设计原则。基于此设计的组件不仅仅存放于设计素材库，更能通过开发实现纳入代码组件库。说夸张些一劳永逸，既方便自己又方便了开发人员。
除去组件，更小的设计元素也能规范化，如字体和颜色。
当产品中有多个模块可复用时，整理完毕的组件可以大幅提你的设计效率，同时也保持着设计规范，便于切图与标注。开发场景和设计场景保持一致，直接对组件进行拼接即可。使用组件工作的场景如下。
下面是第一版本小程序整理的组件库部分截图。它如何提升工作效率，大可一试，一试便知。
在设计进行期间难免会出现未曾考虑到的状况，或走查遗漏的部分。有关次要的功能或体验可以记录并传达至产品经理，留作后期产品迭代时补充。早期版本未完成的任务条目是最适合的迭代版本启动项。
当这个问题涉及到产品核心功能的核心体验，或者涉及到业务目标的核心指标，那我们必须在当下立即解决。一般由产品与设计师沟通，并将结果公布于团队成员，都无异议后更新文档或邮件。但产品与设计人员的沟通，一般不会是一帆风顺的。双方各司其职，一为体验发声，一为业务争执。两种立场本身都没有错，需要的是冷静的沟通，权衡利弊，最终达成商业与体验的平衡。通过合理解释 条分缕析讲清楚问题，促使产品同意修改一些细节交互（与产品沟通要以达成一致为目的，最终大家都以产品目标为驱动，不存在矛盾甚至仇恨，你说服我或者我说服你，最终使产品既能为企业获得利润又能为用户带来价值，以一方说服一方或达成一个共同方案为目标，如果双方始终无法达成一致，那意味着这个问题很严重，需要更多人的参与进行决策。
为产品体验去撕逼是一件在正常不过的事情，争取更优体验，产品以业务目标为导向，而设计要为产品本身的体验负责，只有争取才能不断提升体验，达成商业与体验的平衡才是真正的优秀产品。正如《About face》中：如果我们设计的数字产品能够让人们方便的达成目标，他们会感到满意，提高效率，心情愉快。如此一来人们会高兴的购买使用产品，还会推荐别人购买，假使我们能以低成本实现上述目标，就能取得商业上的成功。
设计一个小程序的流程 第5篇
微信小程序拥有庞大的控件库，可以支持大部分设计需求，但产品为追求差异化和视觉质量，需要设计师单独设计所有控件的样式，如input、时间检查器等。（真香定律早期患者，打死我从这跳下去也不用默认控件）
需求评审是产品启动的重中之重，所有产品开发需要涉及到的人员都需要参加，为产品出谋划策，从自己所从事方向的专业角度探索需求点以及规避问题点。在14年谷歌对外分享的产品设计课中较早的将这一理念推广开来。
项目启动之初，公司决策者召开第一场需求评审会，此评审会目标为介绍待开发的产品，并商讨可行性及预估成本。
参会人员：决策者、产品经理、开发人员、设计人员
设计一个小程序的流程 第6篇
那么我们作为设计师，第一步需要了解的就是，究竟小程序和App之间有什么区别？作为设计师，应该在注意哪些问题，这将是本篇文章前半部分的主要内容。
01. 开发 成本、开发周期不一致
从开发成本看，小程序和APP有较大的区别。APP开发需要两个版本来适应不同操作系统的手机，产品开发周期长，开发人力投入多，因此开发成本高。而小程序只需要根据腾讯提供的开发平台就能进行开发，无需考虑手机操作系统的区别，一次开发就能适配所有的机型，开发周期短，开发人力投入少，因此开发成本低。
一款App从提出需求到上线，通常的开发周期是321原则，即开发3个月，测试调整2个月，试运行1个月。而小程序开发周期在2周左右，甚至功能简单的10天内即可上线使用，所以是一种相对快速高效的模式。
小程序由于依附于微信，所以我们其实只需要制作一稿设计便可适配绝大多数的手机，而不像App那样，需要针对不同的手机进行不同的适配。
事实上这是小程序相对于App的一个巨大的优势。在开发App时，很多企业在初创期，由于成本问题不得不选择到底是放弃Android用户还是IOS用户。然而小程序只需要设计 开发一次的成本，在理论上就获得了全部微信用户接触到产品的机会。所以从这个角度考虑，小程序是非常节省成本的一种模式。
02. App需要设置大量的数据埋点，而小程序则不需要。
微信第三方后台已经集合了诸多的数据供小程序方查看，在初级阶段，这些数据已经足够产品作为更迭的基础了。
没有做过小程序的朋友可能不太了解，微信提供的不仅仅是数量全面的埋点，而是可以自定义埋点位置以及爬取数据类型的系统。甚至还自带一些简单的分析系统，帮助运营人员更好的掌握小程序的总体运营情况。
除了已经封装好的数据监控点，运营人员还可以自定义分析事件，这几乎是一个可以达到“营销平台”级别的分析系统了。
同时，简单明了的看版系统，也非常节省业务人员的数据清洗成本，同时，最大程度的避免了开发人员由于机械重复性的埋点工作而导致的主观漏采与错采现象，这也是小程序的优势所在。
03. 小程序有依附于微信的高效信息共享机制
小程序与微信形成的信息共享，可以非常方便的达到获客目的。例如注册登录机制，我们几乎不需要自己手动在小程序上进行注册登录。直接通过 Union ID 授权的方式，即可让用户用统一的注册账户用遍所有的小程序。据测，用户进入小程序时，同意微信手机号码授权的转化率大致在35%，相对来说是一个非常可观的转化率了。
除此之外，微信给小程序厂商提供了诸多接口，不仅仅是方便了小程序厂商，信息风向更多的是能够让用户更加快速便捷的在小程序中解决问题。这一块内容会在之后章节中详解。
设计一个小程序的流程 第7篇
大多数上线产品都需要有多个设计师来维护，体量较大的产品甚至会细分多个模块由单独的设计师负责。多人协作中的协作方本身没有困难点，多人协作的前提是有统一的设计规范来规整不同设计师的产出，否则会出现设计稿差异过大，重复反工事倍功半的情景。因此此项目在启动之初需要尽早输出一份通用设计规范，此初版规范用于指导设计师视觉产出，同时也可以在完善后提供给开发人员用于设计数值的查阅，如颜色、间距、字号等。
设计一个小程序的流程 第8篇
结束了上半部分的理论分析，那么我们来聊一聊到底我是怎么看待小程序这个平台以及这个生态的。
其实不只是企业家需要考虑这个问题，设计师同样也需要考虑这个问题。前一阵子我一个朋友就来找我诉苦，说他不想在现在这个公司做下去了。原因就是，公司布局了五六个小程序，就是没有一款App的项目提上日程，他以后不想走小程序设计这条路，所以不得已跳槽到一家有App产品的公司。其实这个问题转化出来也很简单，就是小程序到底有发展前景吗？小程序是否会成为一个和苹果搭建起来的AppStore一样的平台？
事先声明一点，我不针对个人、企业或者某家资本，对这些将要提及的名字也没有恶意，还是老规矩，对于商业，我们不谈道德，只看决策。
01. 工具无界限，产品有派系
曾几何时，我们在解锁共享单车时，第一个打开的就是微信；现如今微信这样一个培养了我们使用二维码习惯的产品，却无法成为人们解锁单车的首选。
北京市面上存在的单车总共有7种：美团单车，摩拜单车，ofo，青桔单车，小蓝单车，哈啰单车，永安行。但是目前只有旧版的摩拜单车，青桔单车能用微信小程序扫码解锁。（小蓝单车小程序已经停止运营，ofo虽然没有停止运营，但是在小程序中已经无法搜索到单车服务了）而同样，摩拜单车和美团单车可以通过美团App解锁，小蓝单车和青桔单车可以通过滴滴App解锁。
可以发现，微信对于共享单车界的统治力早已不复存在，现在无论用哪款单车，微信都不是人们首先能想到的入口了。
虽然技术水平上小程序完全可以承载市面上大部分的工具，但是产品之间的派系分别，导致我们可能永远不可能在微信一款软件上一劳永逸的体验到所有服务。就像我们永远无法在微信小程序中发现“淘宝”小程序一样。其实小程序在这一步上，已经不可能像App Store一样打造一个完整的生态了。阿里一家的存在，就已经让微信失去了电商行业的半壁江山。
甚至更有趣的是，在小程序热度排行榜中，位居前十的小程序中有5个是腾讯投资的企业下属产品，还有1个是腾讯自身的产品。
但这本身无可厚非，因为这就是正常的商业竞争策略，只是选择了这种策略生长的小程序，优势就是可以将流量最大化的向自己的生态中转化，缺点就是会有很多产品因此无法融入其中，小程序的生态，终究不会是一个全面而完整的生态。
02. 很多小程序都是完整产品的试用版
很多人曾在小程序风靡时预言，将来很多的产品都会入驻小程序，阉割掉次要功能，只保留核心功能在小程序中，这样才可以既遵循小程序的轻量化原则，又可以让用户体验到产品的优势，形成转化。但有趣的是，市场却形成了另一套完全相反的机制。
Bilibili小程序可以便捷的让用户随时随地观看视频，但是却机智的阉割掉了画质选项。这个小程序确实解决了一部分用户对于观看视频的便捷性、分享视频的传播性的需求，但在这个手机流量多到可以铺张浪费的年代，“高糊画质”无异于加重了用户被“望梅止渴”欺骗的想法，而更多的转向了下载App只为了更高清的画质与更多的操作自由。
微博小程序与bilibili小程序的做法如出一辙，虽然微博小程序的功能也很全面，看起来几乎和微博App所具有的功能几乎一致，但是一旦我们妄图用微博小程序代替App来使用时就会发现，微博小程序竟然不能发带图片和视频的微博。
知乎小程序亦是如此，他几乎阉割掉了所有用户和社区互动的渠道，用户在小程序中只能接受知乎的信息，而无法发布回答与评论（只能点赞或者反对）。
甚至从名称我们就可以看出微博和知乎想要突出的重点（热门微博与知乎精选），在于让用户浏览微博和知乎中已经存在的信息，而当用户想真正参与进整个社区时，发现几乎所有的入口都被封死。在知乎中甚至连互动中的评论功能都被阉割掉了，完全给用户一种隔着玻璃罩看珍藏品般的感觉。
所以各个互联网产品不约而同的选择了同一种方法来运营小程序，即小程序永远是正规App的试玩版。因为微信的重点在于社交，而用户在社交过程中能使用“哔哩哔哩”“微博”与“知乎”的场景只有分享社区中的内容这一种场景了。所以所有的互联网产品都将社区中的主要内容呈现在了小程序中，而所有与分享无关的功能，即使满足“即用即走”的特性，也并没有在小程序中保留下来。（比如发带图片的微博，这应该非常符合即用即走的特性了，但并没有被小程序保留下来）
03. 流量与格局
张小龙对于小程序有很多设想，其中一个就是打造一个属于微信的生态系统，有人曾问我微信小程序生态系统会不会最终能成长为和IOS抗衡的力量？
我觉得很难。
2017年5月18日开始刷屏，第二天即5月19日便被微信叫停服务，微信方面给出的理由是，小程序匿名聊聊“涉嫌诱导分享”。这是第一款被腾讯官方明确封杀掉的微信小程序。之后匿名聊聊换壳上线，改名“走心聊聊”。但可惜的是，走心聊聊依然没有逃过被封杀的悲惨结局，上线没过多久，走心聊聊便因违反《即时通信工具公众信息服务发展管理暂行规定》，再次被暂停服务。
如果说“匿名聊聊”触碰的是微信的社交这块蛋糕，所以被封杀情有可原。那抖音被微信封杀的过程简直是让很多互联网企业大失所望。
在第一次封杀H5时，微信方给出了明确的回应。该H5在最后一页存在诱导分享行为，违反《微信外部链接内容管理规范》，因此平台对其进行了处理，分享到朋友圈仅自己可见。但是在微信全面封杀抖音外部链接以及切断使用微信账号登陆抖音的功能时，微信方却完全没有给出任何官方解释。
如果说封杀抖音是因为头条系产品（包括今日头条与抖音）有运用cookie机制挖掘用户在腾讯体系内更多好友关系的嫌疑。但是接下来微信的做法无疑是令众多互联网中小企业看到了自己依附微信生存的结局。
据不完全统计，在短视频盛行时期，微信已经将20多款短视频类App的分享链接封杀。
但是此时微信却力推腾讯系的短视频App – 微视，甚至为了微视打破了自己既定的规则 —— 开放了在朋友圈上传30秒视频的权限。
所以其实根本就没有什么“诱导分享”这样的说法，网络上流传着一句话“微信封杀是中国互联网公司躲不过的一道坎儿”。
设计一个小程序的流程 第9篇
写在前面：
其实在张小龙的嘴里，我们已经得到了答案。他对于小程序的几项基本原则已经足以说明问题，比如其中的一项就是“用完即走”，其实这不仅仅是张小龙给到的小程序的定义，而是小程序本身拥有的属性。在现代这个时代，用户的注意力被越来越分散，我们很多的设计其实都是为了缓解用户焦虑。
在小程序的官方文档中也提到了相关的元素，在现代社会，大家拿到一款新的产品之后都喜欢自己研究而非去研读说明书。但是实际上，小程序的官方文档是非常值得阅读的内容，里面的规范内容目的不仅仅是为了让小程序整体显得整齐划一，更多的内容是为了保证小程序能够有良好的用户体验。从而增加用户的留存率。
所以，本篇文章的主要内容是在“小程序官方文档”的基础之上，来探索更多的小程序设计的规律，建议大家在阅读之前，可以先自行阅读小程序官方文档，再来看本文，才会有更多收获。
01. 小程序的用户路径必须单一
App的功能点可以很多，但是小程序的用户路径必须单一。
当然，这句话只符合想要入局的中小型企业，在建立小程序的初期，没有额外的流量渠道，那么最好的留存用户的方式就是让用户能够高效的解决问题，对应到小程序的框架设计，即是简短高效的用户路径。
不止中小企业如此，也有很多大型企业，开始从“复合型小程序”转向小程序矩阵，目的就是为了给用户提供专一的体验路径。因为从PC到APP，再到小程序，用户场景和时间在被不断切碎，产品功能也要不断简化，更专注，才更能吸引用户完整的体验用户流程。
02. 良好的一次性使用机制
1.设计一次性引导机制。
在用户第一次使用小程序时，一些必要的提示是提升用户体验的关键因素。
2.减少特殊的交互模式的设计，必要时要进行足够的引导。
运用用户更熟悉的交互模式，更能让用户拥有良好的体验，更快速的完成整个路径与流程。
03. 减少动态设计和装饰性元素
同样这个原理只适用于刚刚布局小程序的企业，而不适用于大厂的小程序设计。但其实在 App 中，为了凸显品牌调性，动态元素和装饰性元素是一定会出现的。品牌调性几乎是 App 设计的一个非常重要的环节。
这并不意味着小程序中的品牌调性不重要，而是说在某些环节中，良好的交互体验比品牌调性重要的多。
04. 页面扁平化
即减少页面跳转，能不跳转就减少跳转，跳转新页面会增加用户适应新页面元素的成本，同时小程序的页面层级过多，会让用户感觉到繁琐焦虑。这个方法可以缩短用户触达产品的路径，也是小程序用来减少用户干扰的重要手段。
这样做的好处就是让用户对小程序的架构有更全面的理解。用户在较少的跳转路径中，始终清晰的知道自己处在小程序中的位置。这也是增加用户对于产品安全感的一种方式。
05. 用选项和自动填充代替输入和表单
在小程序初期，还未拥有悬浮窗功能。这个时候的表单输入对于用户和产品来说简直是噩梦。比如用户需要输入一个信息，而这个信息储存在手机中，那么用户就需要中断当前操作去查看信息。再通过其他的方式回到目前的操作填写信息。在此过程中，很有可能由于操作过于繁琐而丧失客户。
即使增加了悬浮窗功能，用户输入信息的操作干扰也还是存在，所以能够尽量避免信息输入就要避免，以点选、拖动等手势操作代替文字输入。将热门的、常用的、历史信息前置，减少用户的重复劳动。
在其他的小程序对比中，我们一样可以发现类似的在用户体验上的差别。
有一次一个朋友来向我咨询关于他司电商小程序转化率如何提高的问题，我便运用了这个理论，去给他们的产品做了一个梳理，最后切实的获得了数据上可观的提高。
06. 减少等待，反馈及时
小程序官方文档里花了大量的篇幅去阐述给予用户“加载状态”与“完成状态”反馈的重要性，而反馈设计的好坏，对留存率存在着至关重要的影响。除了“微信官方文档”中提到的“启动页加载”“页面下拉刷新加载”“页面内加载”“模态加载”“局部加载”“全局加载”外。
另外一种加载状态同样至关重要，即“预加载状态”。预加载是一个老生常谈的话题，如果一款产品没有设计预加载，会给用户心理造成很强的不安全感，这点在小程序尤为明显，所以设计预加载场景是提高用户体验至关重要的因素，尤其针对一些网络状况不好的用户。
其中以百度云盘的尤为出色，他的预加载模式是动画效果呈现的，可以让用户清晰的了解数据正在加载。
如果没有设计预加载，可以自行设计加载模块，或者用微信提供的通用加载模块，也是一个退而求其次的选择。
而最坏的做法，就是完全不设计任何用于提醒的内容，这种极差的用户体验几乎会全盘劝退用户。