目前除了微信小程序，还有支付宝小程序，百度小程序，字节跳动小程序、京东小程序等，各大流量平台都希望借助小程序的服务连接能力，为企业和用户提供更好的服务。企业在小程序赛道上的战略布局，可以借助平台的流量，获得更多的用户和变现。

有些人会认为小程序用户增长是运营的事情，与产品和开发无关，实则不然。对于全栈工程师来说，他们不仅能做好小程序，还能玩溜小程序，真正全方位、无死角实现用户增长最大化。

小晓云近期采访了几位开发者，他们的小程序有些已经突破百万用户，在自己的领域中获得持续性的发展。开发者围绕用户增长中的拉新、留存、转化等维度，为我们提供了关于产品设计和开发的建议，希望以下的经验对你们都有帮助。

分享 1：小程序视觉和交互是重点，可以借鉴同行让产品更符合大众需求

小程序的特点是「即搜即用，用完即走」，更适合那些轻量级的工具型应用。用户来得快去得也快，则更需要简洁、轻便的设计定位。UI 设计师和前端开发者平常可以通过知晓商店等小程序商店，多参考同类型优秀小程序的设计与交付，以此优化自己的小程序。虽然小程序视觉和交互并不会带来用户裂变式增长，但这个是留住用户最基本的要求了。

分享 2：微信小程序订阅消息是一个用户回流的神器

今年微信小程序从模板消息升级为订阅消息，这是一个帮助小程序实现用户回流重要能力了。对于开发者来说，重点思考：如何合理的向用户直观传达订阅消息、在何处弹出订阅消息。开发者在接入订阅消息能力时，应该选择适合业务场景的模板，并进行文案的引导，同时可以尝试，发起一次订阅时同时订阅多个模版，让用户一次性获得更多消息，提高订阅率。新用户粘性较低，可以借助订阅消息发送奖励通知等，召回用户。

分享 3：结合业务和用户特点，策划符合平台调性的活动

我们原先是做体育领域的资讯和商城 App，微信小程序发布后，庞大的微信流量给了我们一个拓展用户的新机会，于是在 2017 年与知晓云结缘，并相伴 3 年了。用户增长其实不是简单的一两句话可以总结，所以我先分享其中一点。体育领域的资讯，能吸引和留住用户的，主要靠资讯的时效性、赛事活动、体育明星的加持，因此我们曾组织体育明星的投票活动，粉丝乐于参与，同时也提高了认同感和优越感。投票功能设置的门槛很低，但我们增加了很多排行榜的文案引导，加强粉丝的紧迫感，同时也增加了很多分享文案引导，让粉丝主动分享。这个是针对体育领域上很成功的增长案例，当然也可以应用于其它追星平台等。

分享 4：做好数据分析，让数据驱动用户增长

精细化运营的核心就是数据驱动，明确关键指标，并且通过数据分析的方式进行评估，然后不断优化。数据埋点的缺点是开发成本高，所以我们是基于无埋点，一次性集成 SDK，采集页面访问、点击行为、用户特征等全量数据。

分享 5：研究小程序平台的用户喜好，提供他们想要的服务

我是做 QQ 小程序的， QQ 小程序的用户对于社交、恋爱等偏娱乐的场景更感兴趣，针对性提供头像制作、起网名、小游戏等服务有比较大的市场。所以可以结合平台用户的特点和喜好，开发相关服务的小程序，更有利于小程序的发展和变现。

以上内容均来自知晓云开发者的经验分享，如果你对哪一个内容感兴趣，可以在文末或者小晓云微信上留言，对于大家感兴趣的内容，我们将再次邀请开发者进行更全面更完整的分享。

知晓云成立三年以来，通过提供不断更新的开发工具，帮助开发者提高开发效率，轻松完成优秀的作品。但我们服务不止于快、省，还要在增长与变现上赋能开发者/企业。

知晓推送

在线可视化操作加上业务系统轻松集成，可以一键推送全平台的订阅消息推送服务，轻松触达亿万用户。

实时数据库

支持各类高实时性的业务场景，以简便的开发方式、更高的时效性实现在云端和客户端来的数据实时同步。通过实时数据库实现的即时聊天室、投票、直播间送礼和弹幕、小游戏等互动功能，提升用户留存和转化。

运营后台

一键生成可视化的运营管理后台，User Dash API 和开箱即用的前端组件库，开发者可以快速编写一套独立的运营后台，并支持一键部署至知晓云服务器，是开发者的利器，也是运营者的福音。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

微信小商店已经正式上线，对企业、个体和个人三种开店类型全量开放。微信小商店可以帮助商家免开发、零成本、一键生成卖货小程序。微信小商店团队将负责商品发布、订单管理、交易结算、物流售后、直播带货等技术和服务流程。

微信小商店个人开店非常简单，3秒搞定，毫不夸张，堪称模板商终结者。个人开店仅需身份认证即可，绑定银行卡可以提现，1个微信号仅支持开通1个个人主体的小商店。

企业、个体工商户需要上传营业执照、经营者信息、结算银行账户信息等基础信息，1个微信号可以开通3个“企业和个体”主体的小商店。

当前微信小商店现阶段支持售卖的商品类目超过1500个，主要包括：宠物生活、家用电器、手机、通讯、数码、电脑、办公、服饰内衣等，后续可售品类会增多。

如何开店

1. 只需搜索小程序 小商店助手
2. 进入后只需填入店名等极少量信息，选择个人店铺的话不需要上传资质
3. 点击确认就能极速拥有自己的小程序店铺啦！
4. 麻麻再也不用担心我被模板商折磨啦！

在 小商店助手 里面还能查看店铺数据、在售商品、新增商品、待付款商品、订单管理、客服管理、店铺设置 等，功能非常强大！

上架新商品也是非常简单快捷，直接上传商品图片，加上标题和一些描述信息就可以。

而且不论是开店审核还是商品上架审核，都非常迅速，作者尝试了几次都在一分钟左右就审核完了！

需要注意的一点是微信会收 0.6% 的交易金额提成哦，毕竟此路他开此树他栽树嘛~

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

项目背景

站内攻略作为每年大促玩法的预告者，承担了向用户输出平台节奏、吸引用户预约回流的重要任务。 不同于着眼于转化的卖货会场，或是着眼于分享的互动H5，如何能让用户更好地了解京东的大促平台玩法，便捷用户的购物旅程，就成为了它的主要任务。

设计思路&设计执行

1. 产品化思路与定位

在开始设计之前，我们对比了2017年至今的所有攻略页面，发现往年页面存在缺乏延续性、定位不清晰的问题。作为大促信息传达的先行军，往期的攻略反而更多承担了转化型的会场类任务，对于优惠信息的预告往往是轻描淡写地用文案带过。而每一次的攻略样式都是「船新版本」，也产生了较大的人力消耗。

然而尽管攻略的任务是信息传递，但作为整体大促链路中的一环，它终究还是需要为大盘GMV服务。那么应该如何平衡二者，以达成更好的数据效果呢？

首先，从攻略存在的核心意义——助力集团大盘GMV的提升出发，它需要达成以下几个目标：

• 让用户愿意逛：让用户明白京东大促的节奏和玩法、并且在了解后有意愿参与；
• 让用户愿意买：提供能提升用户购物欲望的决策信息；
• 让用户养成习惯：当攻略持续为用户产生了用户价值后，就可以养成用户「来京东购物前先看攻略」的心智，从而更好地引导用户进行操作。

然而纵观大促会场全局，许多卖货会场也可以达成这些目标，那么站内攻略和它们相比有具有哪些差异性呢？我们可以从对内和对外两个角度进行分析：

对内差异化：从站内来看，「我的」和「AI助手」也都承担了向用户进行活动会场推荐的功能，但「我的」是围绕用户已有的操作展开管理和推荐，是绝对精准的量身打造，「AI助手」是理性层级下的导购，需要用户先产生「想法」，再指导操作；站内攻略则是引导用户未来行为的指导和说明，先组织、筛选促销信息，再使用户产生「想法」，从而产生操作，有一定「逛」的性质。

对外差异化：从站外来看，站内攻略的定位与「什么值得买」有些近似。相比之下，站内攻略的优势则在于它能更紧密地围绕京东用户的消费习惯进行定制化推荐，和近年来以长图为主的阿里系攻略相比，则提供了更为丰富的操作（如预约），一定程度上能减少用户的记忆成本。

基于以上基础，我们对往年攻略的用户画像进行分析，并对攻略进行了横向与纵向的对比，总结出了攻略作为一个长线产品视角下的迭代思路，并根据攻略的特性制定了分时期的北极星指标：提升预热、专场期的预约加购率、提升全时期的活动分流以及提升高潮期的商品转化。那么我们又是如何根据这三个指标来拆解细分策略的呢？

2. 提升预约加购——日历优化

交互层面：动效辅助内容聚焦

作为站内优惠信息的聚集地，如何清晰简洁传达内容，一直是交互侧需要重点思考解决的难题。于是在本次攻略中，我们对比了往期攻略中的预告样式，在数据表现较好的日历样式基础上，对页面的层级进行了进一步的简化，配合动效的引导操作，以便用户能够更聚焦地浏览日历部分的核心内容：

视觉层面：视觉层级清晰

经过对交互稿的分析理解，以下3个痛点，对此次页面的信息层级和画面舒适度是一个考验：

• 内容信息较多：为了提升预约吸引力，这次在单日预告内露出了更多的BI单品，同时增加了预约瓜分京豆的玩法，所以这次首屏的内容信息和双11相较而言，是有所增的。
• 日历展示状态增加：日历尝试了新的交互样式，有展开和收起两种状态。
• 卡片颜色多：为了让用户感知到每日主题的差异，日历卡片的颜色会根据每日主会场的主题颜色相呼应。

那么如何通过视觉的手段，让视觉层级清晰展示且画面颜色和谐呢？下面从最基础的视觉构成里的构图和色彩两方面进行分析并落地：

「构 图」整体用方形进行构图和内容分割

方形是最简洁的几何形态，对于信息量较大的页面，方形会让设计空间利用最大化，并且可以排除形态上的干扰，结构清晰的展示信息内容，让用户通顺的浏览页面。

简化视觉层级

在交互稿上，瓜分京豆模块和日历选择器两部分内容划分较为明显，但所留出的空间，会增加视觉层级的复杂度。为了尽量简化视觉层级，找交互同学商量是否可以在保持内容划分清晰的情况下，把瓜分京豆模块背景和日历选择器拉通，同时，也咨询了前端同学，视觉这样处理在实现上是否会有问题。最终，三方达成一致后，采用了视觉最终呈现的方案。

「颜 色」

为了更好的覆盖618全时期，挑选了色环上三种距离基本相等的色彩进行从暖色到冷色的色相渐变。

• 头图运用了较为清透的黄色至红色的暖色渐变，适用于618全时期，体现了大促的热闹氛围；
• 头图过渡到日历选择器，则是运用了从头图的红色渐变至紫蓝色，这样既能让选择器的文字信息清晰识别，也能将头图和日历选择器两部分内容进行自然的分割，减少了线面分割所带来的复杂层级关系；
• 瓜分京豆模块的颜色则选用了偏中性的黄色，这样一来和每日不同颜色的卡片搭配和谐，二来和头图有所呼应，整体画面色彩保持平衡。

前端层面：复杂交互动画与跨平台功能适配

关于选中移动动画

日历选中动画部分我们需要实现的一种跟随移动的效果，那么我们需要考虑的是在当前日期是有可能去到任何一个可点击日期的位置。

实现方式：

用纯css方式控制，方块使用背景图的方式实现，通过控制类名移动位置，比如.move-[start]-[end]，缺点：需要写好每个日期对应到其它日期的位置，不够灵活

用js控制。把日期看成一个棋盘格子，每个格子都占相同的坑位大小。我们把当前日期看作a，移动至日期看作b。假设把a移动至b的横向占格子数设为n，把a移动至b的纵向占格子数设为m。那么n=当前下标 % 行个数，m=当前下标 / 行个数取整。那么a移动到b的x = w * n，y = h * m (w为格子宽度，h为格子高度)。

注：宽度获取使用block.getBoundingClientRect().width；clientWidth会忽略小数位

• 关于展开收起动画，半圆实现：
• 可以使用clip-path
• 我的实现方法为使用border-radius+height实现，半圆的弧度使用两倍大圆取其部分圆弧显示，展开收起实现使用高度修改：在低端机会略卡，因为每次使用会引起页面重绘（有待探讨优化）
• 使用svg，canvas等
• 关于app预约，小程序预约
• app预约采用的是京东app日历预约，用户开启手机日历（写入）权限后，预约就会写入用户的手机日历，在活动开始前会以日历提醒的方式提醒用户。
• 小程序预约走的是微信大账号提醒流程，预约需要分三步进行：预约-> 授权 -> 上报授权状态。进行完上述步骤后，用户会在活动开始前10分钟左右通过大账号（已关注用户）或服务通知（未关注用户）收到消息

2. 提升活动分流——福利秘籍

提升筛选效率

福利秘籍专区作为大促期间福利互动活动的集中地，承担了为互动分流，为用户提供快速查找筛选可参与活动的任务。而互动往往存在较为复杂的规则，对用户而言存在较高的理解成本。此次除了集团主推的互动，又增加了对于事业部互动的展示，对于保证页面展示效率也带来了一定的挑战。通过对往期迭代内容进行数据对比，同时参考其余会场对于多信息展示的策略，最终我们采用了BI展示，同时对用户弱相关的互动卡片进行折叠的方式提升页面的效率；而在卡片的信息展示上，选择重点突出活动可得的利益点，让用户一眼即可筛选出对自己最有价值的互动进行参与。

视觉创新优化

虽然运营同学对双11的秘籍视觉比较认可，但是仍然提出了希望有秘籍形式感的同时，能进行视觉创新的诉求。经思考后，我认为运营的诉求无法满足：

• 视觉风格和618大促整体风格保持统一；
• 能体现秘籍感的视觉表现手法有限；
• 视觉创新的前提是要保证信息清晰的展示给用户；

于是带着以上3点找运营同学再次沟通清楚对方的真正诉求到底是什么，经沟通，对方最重要的诉求是希望有视觉创新，秘籍形式感诉求较弱。接下来针对重要诉求集中发力，并结合此次618视觉概念（光点、光线），找到了视觉创新优化的解决方案，并和运营达成了一致。

「构图」

上面提到了方形可以排除形态上的干扰，考虑到活动入口图数量较多，且氛围图不可把控，左侧以方形构成，右侧结合了618主图形——光线，把文字和氛围图分开，让各部分信息更加聚焦。

「颜色」

结合双11用研结论——活动入口主题不够鲜明，除了活动文案类似的因素，我认为颜色也是影响因素之一。所以这次在上部分平台级活动入口，采用了2种暖色的近似色交替构成，下部分事业部活动入口，统一采用了1种和上部分近似色的冷色构成；单个活动入口，文字和氛围图的背景进行统一色相的明暗深浅变化。从整体楼层来看，从上至下，由暖至冷，不仅活动主题有了明显差异化，而且较好的过渡到下一楼层；从单个活动入口来看，左右深浅颜色的划分，不仅对不可把控的氛围图适应性更强，且主题文案更加明显。

「表现形式」

整体页面在按钮的部分采用新拟态风格，在保证吸引力的同时，也减少了颜色过多的问题，减少了信息层级。新拟态风格更适合工具功能类产品，本次只尝试使用在了页面的按钮部分，风格上也会有眼前一亮的感觉。

3. 提升商品转化——今日导购

分时期变化的楼层策略

针对高潮期的转化指标，我们参考了往期的迭代经验，发现随着大促节奏的渐进，临近高潮期时，页面的转化模块表现往往有较大的提升。于是在本次设计中，我们针对这个数据表现，对楼层顺序进行了动态调整，高潮期将转化楼层前置，以更好地匹配不同时期的用户需求。

同时根据往期的楼层数据表现，本次我们也延续保留了数据表现较好的模块类型，例如增加了榜单的露出，以辅助页面目标的达成（以下数据来自于lan.jd.com)。

楼层整体化、内容吸引力包装

基于之前今日楼层视觉整体感较弱的问题，这次楼层背景色和页面背景色有所区分，楼层内模块颜色和楼层背景色同色，较往期此楼层来看更加整体化，又能让页面层级更加清晰。

其中，针对这次品牌入口和上海美影厂IP形象结合的策略，为了提升用户吸引力，且不干扰信息内容的前提下，视觉上采用了和用户共情，且和IP形象契合的元素——老电视机，同时按钮文案也进行场景契合的包装，增加趣味性。

项目成果

与往期站内攻略对比，本次618站内攻略主要在以下方面有较为明显的提升：

品牌视觉契合及创新

在延续主视觉元素的同时，视觉风格有所创新，在页面的按钮部分采用新拟态风格，减少颜色过多而导致的复杂信息层级问题，同时也保证了视觉吸引力

视觉精致程度

整体页面颜色较有节奏，且更加清透舒适

元素细节（打光、投影等）的刻画更加精致

信息层级清晰度

通过对颜色的合理规划，有主次的文字信息，让单个楼层更整体化，各楼层模块划分清晰

数据表现

根据上线后的表现，本次福利互动模块的点击数据获得了显著的提升，今日模块的点击转化率相比往年也获得了成倍的增长，页面目标基本达成。

项目沉淀

1. 好的经验

针对攻略这类规律性存在的活动会场，我们可以针对其主要的功能组成模块进行数据导向的设计与迭代，来更好地指导后续的优化方向；同时也可以辅助业务侧更加清晰地规划会场定位，提升页面对用户以及大促的整体价值。

2. 如何沟通

Q：需求方一味的追求热闹复杂的视觉样式创新，该怎么办？

A：热闹的氛围对于大促活动来说固然非常重要，但也要根据页面类型去判断（重氛围or重信息)。设计师要倾听诉求并搞清诉求的根本原因，并用专业的角度判断诉求的合理性，以及价值大与否。热闹氛围塑造的前提是不能影响信息的识别，否则就会本末倒置，并且热闹氛围的视觉样式要和该场景逻辑匹配 。

3. 待优化项

虽然本次页面大部分模块基于产品化的思路迭代均获得了一定的正向反馈，但产品的发展往往是个曲折上升的过程，活动会场也不例外。结合上线后反馈，站内攻略依然有以下可优化点：

日历操作体验

根据用研结果显示，日历操作体验问题反馈较多，日历模块为滑动改变日期，而非点击跳转日期的操作方式，与用户的认知不符，且首屏动效较复杂，在安卓机型上体验较为卡顿。后续如有同样的交互方式，需优化操作体验。

福利互动入口主题文案

根据用研反馈，主题文案描述不直观，不易理解，导致用户容易滑过整个模块。建议后续活动主题能简单清晰的描述优惠和玩法。

综上，未来站内攻略需要进一步探索主要功能模块对用户的价值，探索其在大促链路中独特的差异性；同时保留高用户价值模块并持续优化，以求达到更好的用户体验，用设计策略为用户与业务带来更多的价值。

文章来源：优设    作者：JellyDesign

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

今天的这篇文章也将围绕着「文字」展开，相信大家看完后会对「文字」有一个全新的了解，也将明白文字对于版面的意义是巨大的，处理好它，基本上你的版面也就编排的差不多了。好了，下面我们开始今天的内容吧。

首先来看几张不同类型的海报，第一张文字占比较高，第二张图片占比较高，第三张文字与图片占比是五五开。

然而不管是属于哪种类型的，它们的核心目的都是在传达信息。因为对于一张海报来说，我们不光会看还会去阅读它们。

平面设计就是通过文字来「说话」的。

而在广告设计中，图片的占比会非常高，因为广告多以图片为主，通过图片我们能大致的猜测出设计师想要表达的东西是什么。

总结一下：广告设计多以图片为主，意在通过图片传达概念；而平面设计则多以文字或图片为主，意在通过文字传达信息。

那么作为信息传达的载体，字体就显得格外重要了。下面我会从字体的分类、字体的搭配、字体的气质与设置细节着手，慢慢带领大家去认识字体，首先我们来看看字体的分类都有哪些。

中文字体大致可分为：黑体、宋体、圆体、书法体与卡通体等。

其中书法体又细分为：楷书、行书、草书与隶书等。

在列举的这些字体中，最常用就是：黑体、宋体和圆体，而在书法体中，最常用的是楷书与行书。为什么说这些字体常用呢？因为在许多优秀的设计作品中，这些字体的出现概率都非常高，尤其是黑体与宋体。

下面说一下英文字体，大致可以分为：衬线体、无衬线体、手写体与展示字型等。

其中最常用的就是：衬线体与无衬线体。理由与中文一样，它们也是使用率很高的字体，其次还有一个原因就是在以中文为主的设计中，它们与中文字体搭配起来比较契合。

拿黑体来说，与之搭配的英文字体就是无衬线体，因为它们的笔画特征相似度很高。

宋体搭配的就是衬线体，因为宋体的笔画特征是有粗细变化且有装饰线，而英文的衬线体也刚好有与之相似的地方。

而圆体则是搭配拥有相似特征的无衬线体。

因为常用的书法体通常使用毛笔书写，所以在笔画特征上没有与之相匹配的英文字体，大多数时候我们会选择用衬线体来搭配，具体原因我会在后面的字体气质环节为大家讲解。

虽然也有别的搭配方式存在，但我给大家提供的这些都是最常用和最安全的。说完字体搭配问题后，下面我们来看看这些字体，所包含的气质又有哪些。

首先是黑体，它具有科技感与现代感，这是由它简洁干练的笔画特征决定的。

其次黑体也能表现出运动与时尚的感觉，因为运动与时尚本就是偏现代的词汇。

接着是宋体，它具有文化与历史的气质，这个比较好理解。

而除了能表现出历史与文化感之外，宋体还能表现出清新与雅致的感觉，这是由宋体的笔画特征决定的，横细竖粗且末端带有装饰，与优雅精致的感觉十分契合。

圆体的特点也是非常明显的，在看到它时脑海中的第一印象就是可爱与卡通。

除了刻板印象外，圆体那种圆滚滚的笔画给我们的感觉还有安全和易亲近，所以圆体也能用来表现儿童与温暖感觉的题材。

一说到书法体，能直接联想到的关键词就是传统与历史，因为书法的演变就是我们汉字发展的轨迹。然后我们回过头来讲一下，为什么书法体可以和西文中的衬线体搭配。

原因就在于衬线体也具备书法体的某些气质，比如传统、文化、历史等。与书法体在早期的东方一样，衬线体在早期的西方也是主要的字体之一。

温暖、人情味儿，说到书法体可能很难联想到这两个词，但是书法体确实具备这种气质。跟黑体这种棱角分明的字体相比，书法体是手写出来的，它的笔画特征给我们的感觉就是有「温度」的。

在字符面板中，除了选择字体与改变字号以外，这两个区域相信大家用的还是比较多的，它们分别是：行距设置与字距设置。

拿行距来说，在使用时有几个比较常用的设置方法，比如用当前文字的字号乘以1.2、1.732或是2。不过，通过这个方法所算出来的数值只是一个参考，也就是说你可以在这个基础上做些调整。

比如：在计算出的数值的基础上进行递增或是递减，这时你要做的就是用眼睛去观察，觉得大了就减少一些，觉得小了就增大一些。

其中，用字号乘以1.2适用于标题。

比如上方那个标题的字号是40pt，那么行距的数值就是用40乘以1.2等于48。下方这个是在此基础上做的一个调整，稍微增大了一些行距。

字号乘以1.2适用于标题，而用字号乘以1.732或2则更适用于小字号的文字，比如内文。

上方是用字号乘以1.732的例子，字号是9pt，用它乘以1.732得出来的数值是15.588，四舍五入取个整数得到的行距就是16，下方这个是用字号乘以2得到的效果。

大多数情况下我建议大家用字号乘以1.732的行距，大小比较适中。

跟行距不同的是，基本上来说字距是无需调整的。当然还是那句话，要靠自己的眼睛来衡量，如果你觉得字与字之间离的很近的话，那么可以增大一些字距，反之，则可以减小一些。

其次就是，当你遇到一些偏轻松慢节奏的设计，比如典雅清新类的文学小说时，就可以适当的增加一些字距来营造这个感觉。

比如这两张海报，左边的是经典的居中结构，右边的是包围结构，构图都是可以的没有任何问题，但为什么看起来还是怪怪的呢？因为文字组没有刻画好。

为了让大家能更深刻地体会到文字组对于版面的意义，修改了这两张海报，其中构图不变只改文字组。

这个修改前后的对比还是非常直观的，可见文字组对版面的影响有多大。如果说构图是版面的骨架的话，那么文字组就是版面的五官，骨架再好五官不行结果也是可想而之的。

文字组分为：左对齐、居中对齐、顶对齐以及两端对齐。

其中与左对齐与顶对齐对应的有：右对齐与底对齐。

给大家找了一些各种对齐方式的案例。这是左对齐的形式。

这是右对齐的形式，与左对齐相比右对齐属于不常用的对齐方式，主要是出于易读性的考虑，但并不是说不能用。

这是居中对齐的形式，最经典的对齐方式之一。

这是顶对齐的形式，是文字竖排时最常用的对齐方式。

这是底对齐的形式，跟顶对齐相比也是属于不常用的对齐方式。

最后是两端对齐的形式，横排与竖排都可以使用这种对齐方式。

如果作品看得足够多，应该见过这种形式的组合，它同时包含了多种不同对齐方式，我们称其为「对齐组合」。

比如我们可以借鉴结构，以这个文字组为例，它的结构是这样的：两端对齐、中间的文字字号大，上下的文字字号小，按照这个套路我们来试着做一个组合。

在编排前，我们先阅读一下文案，通过文字可以得知，这是一个与篮球明星有关的内容，气质上来说会偏现代一些。

所以字体可以选择一款黑体，英文部分则搭配一款无衬线体。

根据之前总结到的这些特征，下面就可以开始编排文字了。

按照那个组合的套路，我们先将两端对齐中较大字号的文字给编排出来，而标题信息无疑是非常适合用来放大的。

接着再将上方和下方的小字号文字给编排出来。

其中要注意的就是这段文字的行距，我参考了logo的高度来进行设置。而整个组合中，字距是基本没有进行调整的。

值得一提的是，在两端对齐的文字组中，这种小大小的形式非常好用。因为它的节奏变化丰富，所以大家在做两端对齐的文字组时不妨试试。

这就是借鉴结构的效果了，精髓在于要多去分析别人的形式与套路，并从中获取做组合的灵感。除了能借鉴结构之外，我们还可以借鉴标题字数+结构，是什么意思呢？

以这个组合为例，它的标题有7个字，整个组合是由顶对齐与两端对齐构成的一个对齐组合。

它的组合结构为小中大，按照这些特点我们来尝试借鉴。

这是要用到的文案信息，通过阅读文案可以得知，这是一个关于炸鸡套餐的内容。

通过去看kfc的各种物料，发现运用黑体的场景还是比较多的。

所以，在字体搭配上选择用黑体与无衬线体。

根据之前总结到的这些特征，下面就可以开始编排文字了。

按照小中大的特点，依次将信息给编排出来。

完成后可以在组与组之间，添加一根小线段用于连接，以起到过度的作用，如果大家现在回过头去看原图的话，也能发现这一特征。

其中，标题的行距就是用标题的字号乘以1.2算出来的。

字距我也做了调整，因为默认0的字距看上去有些拥挤。

可以看出跟原图相比，在不破坏组合结构的情况下，针对文字信息的编排是做了些调整的，比如：原稿最左侧是两行顶对齐的小文字，在借鉴时将它换成了logo，因为我们是要借鉴它的结构，而不是为了跟原稿做的一模一样，具体还是要根据我们的内容来合理编排。

首先我们来看这张图，一个标准的两端对齐、组合结构与之前那个是一样的，中间的字号大，上下的字号小。

除去这些外还有一个小特征就是，在大字号中间还有一层小字号的文字。

接着我们再来看这张图，它的特点就是图片叠压在了文字的上方。至于它的结构我们可以不用考虑，因为结构已经找好借鉴了。

这是要用到的文案与图片。通过文字可以得知，这是一个关于介绍昆虫的图书，且配有一张插图。这个插图的风格是手绘形的，偏写实一些没有那么的卡通。

结合这些特点我选择的字体搭配方式是，宋体配衬线体。

因为字体搭配这部分我又借鉴了一些相关风格的书，发现它们的字体搭配方式用宋体比较多。

分析完文案找到字体搭配方式后，在结合之前总结的一些组合特征，我们就可以开始编排了。

先将中间比较大的那层文字给编排出来，然后在它中间处置入一个小字号的文字。

中间层编排完成后再来编排上下层的文字，字号不用太大，整体注意好两端对齐。

调整字距的地方有两处，首先是标题，调整的原因在于默认值我觉得有些小了，其次是标题中间的那行文字，调整它的原因在于不想字号放太大。

因为是两端对齐的结构，不调整字距的话。标题中间那行文字只能通过放大字号来达到目，然而这个效果并不是我想要的。

综合考虑，选择了这个，最后，把图片置入进去叠压在文字的上方。

图叠压在文字上有一个无法避免的问题就是，被压住的文字会出现无法识别的情况，英文还好但是中文却不行，因为在这个组合中，中文是用来阅读的文字，英文仅充当装饰用。

既然中文是重要的信息，那为什么还要去遮挡它呢？因为有提示，通过这两个字你也能猜出来被压住的文字是什么。

这就是借鉴结构+表现手法的例子，多一张图片的加入，混合借鉴后的效果与原稿的相似度就会降低。

下面我们来看这张图，它既有顶对齐又有两端对齐的感觉，像这种组合我将它称为顶部两端对齐。

它的组合结构也是一个小大小的形式。

分析完上一个组合后，再来看看这个组合，值得借鉴的地方有两处，首先就是整体的结构，其次就是字体搭配。由于已经借鉴了上一个组合的结构，所以这个组合要借鉴的就是字体搭配。

在原图的这个字体搭配中，英文是最好判断的，这个字体是衬线体，中文则比较陌生了，既不像黑体也不像宋体。

感觉是被设计过的，不像是字库里的字体，我通过观察发现，它既有宋体横细竖粗的笔画感觉，又有黑体干净利落的特征。

所以，我在字库字体中找到了一款具有类似感觉的字体：姚体。

在字体搭配上选择用姚体搭配衬线体。这里需要强调的一点是，在挑选字体借鉴的过程中已经考虑到了与文案的气质相匹配的问题，下面我们就来看看文案。

标题叫「遇见你之前」，给人的感觉比较文艺，而姚体我们前面也分析过了，它是具有宋体特征的，而且笔画细长，整体给人的感觉就是比较文艺的。

分析完成后，结合之前总结的组合特点就可以开始编排了。

第一步，还是按照小大小的感觉将组合给编排出来，注意好顶部两端对齐。

接着在组与组的缝隙处加入线条就完成了。

在这个组合中标题的行距与字距，默认状态下是左边这样的，字距还好，行距却非常大，这个时候你就不能套用之前讲到的倍数去算行距了。那样行距只会越来越大，所以这里我们要根据视觉效果来调整。

这样，一个借鉴结构+字体搭配的例子就完成了。

这是要用到的文案与图片素材，首先，老规矩分析一下文案，选择与之契合字体。书名叫《流星之绊》，还是比较文艺的。

根据这个书名，搜索了一下原书的样子，在这三个不同的版本中，所感受到的气质有：温情和雅致，在字体的选择上与之较为契合的有：书法体与宋体，这两个字体的选择在这三个不同的原版本中也都有体现。

打算用宋体，与其搭配的英文首选就是衬线体了。

这是第一个要借鉴的对象，可能有人会说这不像文字组，这确实不是文字组，但并不代表它不能被联想成文字组。

比如它的结构是由一个顶对齐与一个左对齐构成的对齐组合，而且下方的那个左对齐文字是放在了顶对齐的负空间处的。

其次，顶对齐的文字字号较大，下方左对齐的文字字号较小。

这就是根据那张图所总结出的一些组合特征，下面我们就根据这些特征来编排文字。

先排出顶对齐的文字，然后在其负空间处置入左对齐的文字信息。

排到这发现右下角还有块小缺口，既然是要做一个对齐组合的话，那么就要把它填满。

关于顶对齐的中间部分为什么要这么做，是因为标题的字数不足以作出顶对齐的感觉，为了解决这个问题，选择重复了一次标题并且将它的笔画打散了，而打散的灵感来源于「流星」，它们就像流星一样散布在天空中，不知道什么时候就会掉落下来。到这为止是书封的上半部分，下面我们来编排下半部分。

这是要用到的借鉴图，它也是一个由顶对齐与左对齐构成的对齐组合。

除了这个外它顶对齐部分的文字跟左对齐的比，也是属于较大的。

这是从那个组合中，总结出的组合特征，与上一个几乎一样。

按照总结出的组合特征，将文字给编排出来。

其中顶对齐与这段左对齐的文字，它们的行距是用字号乘以1.732算出来的，字距则是做了些微调整，因为当文字缩小后，它的字距在视觉上看着也会变小，所以我在默认0的基础上将字距增加到了50。

这就是根据那两张图片所借鉴出来的文字组了，下面把它们置入进版面中。

整体是一个上下结构的，这种类型在构图中属于上下构图。这也是为什么会找那两张图来当参考的原因，因为提前已经考虑好了构图。

接下来做烘托氛围的工作，先把底色换成夜空的黑色，然后配上图片。

接着更换字体的色彩恢复识别性，其中黄色的部分是为了与白色部分做区分。

然后给腰封换上色彩以恢复下方的文字的识别性，再挑选一些信息，在它们的下方配上黄色，目的是为了与上方的色彩做呼应。

最后，将书脊编排出来，这个案例就编排完成了。

以上就是版式三部曲之文字篇的所有内容了，回顾一下，由两个部分组成。第一部分是：字体的分类、字体的搭配、字体的气质与设置细节。具体包括：字体有哪些不同的类型、在选中字体的类型后，要如何选择与之搭配的英文字体。字体气质主要讲的是，不同类型的字体都有哪些味道，它的意义在于当你确定好项目的风格后，可以根据不同字体的气质，快速的找到与项目定位契合的字体。

文章来源：优设    作者：研习设

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面，使作品不仅具有美感，还能清晰表达设计者的目的。不同构图能使画面产生不同的视觉变化，进而给观者带来不同的心理感受。同的心理感受。本期分享的是上下构图的使用方法，此构图形式具有良好的视觉效果，也比较容易掌握，是非常实用的构图方式。

什么是上下构图

上下构图形式是将版面分割为上下两部分，或让画面中的元素整体呈现出上下的分布趋势，主空间承载视觉点，次空间承载阅读信息，呈现的视觉效果平衡而稳定。

最典型的上下构图由「上图下字」或者「上字下图」两部分构成，图片及文字各占据一部分，互不干预，能清晰明了的传达出版面的信息。

主空间还经常使用图形化的标题文字充当画面主体，可以很好解决画面缺少图片层级的问题。

上下构图空间划分比较固定，为了得到丰富的视觉效果和良好的设计感，需要通过精心设计的编排来丰富版面的视觉效果。比如文字的横竖排版，元素之间的对比、点线面的运用、巧妙的留白等。

构图比例

进行上下构图设计时，可以根据版面内容的信息体量划分画面的空间，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等。在设计时也可以反复进行调整，直到找到最为合适的构图比例。

1. 1:1分割

把画面平分为上下两部分，形成对称均衡的分割构成。

1:1分割比例构成方式，多用于版面中两部分内容处于并列或对立的关系。

2. 黄金分割

「黄金分割比例（1:1.618）」被认为是最具美感的分割比例，具有严谨的艺术性、和谐性，蕴藏着丰富的美学价值。

在设计中有意识地运用黄金分割比例进行设计，可以营造出富有美感的版式效果。

3. 白银分割

「白银分割比例（1:1.414）」是日本率先采用的一种分割比例，目前广泛运用在版式设计的布局中。

与黄金分割相比，白银分割次空间占据的比例更大一些，能够承载的信息量也更多。

4. 2:1分割

采用2:1的比例，图片主体在画面中占据主导地位，视觉焦点更清晰。

主要的信息（标题）常融入图片中放在主空间成为画面主体，阅读性文字则放在次空间。

5. 3:1分割

3:1分割的比例与2:1比例相似，但图片在画面中占据主导地位更强，主空间承载视觉点，次空间承载阅读信息。

通过比例，可以让版面分割更严谨。但没有那个比例关系绝对正确，需要根据画面的项目调性、信息体量、信息功能与图文主体而定。如使用其它比例分割的优秀案例：

空间调整

把图文按比例分别编排在版面上下方，是比较严谨规范的构图方式，但是为了避免版面的呆板，可以通过调整版面空间变换出多种编排形式。如以下几个案例：

缩小图片和文字空间，使留白处形成外空间，增加层次感。

在背景（绘画作品）上重新划出新的空间，形成内外空间对比，既丰富了画面层次，又让版面变得生动有趣。

通过图片文字的错位排版和负空间的巧妙留白，让原本呆板的上下构图变得灵活多变，充满个性。

让图片位置重心偏移，打破均衡稳定的构图形式。标题的破图处理，也增加了版面的灵活性与丰富性。

在上方空间上划分出新的空间，这样的手法可以很好让空间具有多变性，也可以让我们的设计更加灵动。

灵活运用

上下构图的框架看似比较固定，但是也能通过设计手法，变换出多种编排形式，巧妙破除上下分割的单一性与呆板感。

1. 曲线分割

把生硬的直线改为呈现出动态的曲线或斜线进行画面的分割，版面显得更生动活泼。

2. 图片裁切

把方形图片裁切为其他形状，使上下构图没有明显的分割线，也可以呈现出良好的视觉效果。

3. 文字破图

使用文字串联起上下两个空间，破除上下构图版面的单一性。

4. 元素串联

利用图形、色块等元素串联空间，让主次空间建立起联系，具有丰富的视觉效果和良好的设计感。

5. 图片退底

把图片主体进行退底处理，重新营造场景，弱化空间的分区。

6. 空间留白

使用留白破除两个空间的间隙，拉开画面的空间感，具有良好的视觉效果。

总结

• 上下构图是将版面分割为上下两部分，或让画面中的元素整体呈现出上下的分布趋势，主空间承载视觉点，次空间承载阅读信息，呈现的视觉效果平衡而稳定，是非常实用的构图方式;
• 进行上下构图设计时，可以根据版面内容的信息体量划分画面的空间，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等;
• 为了避免版面的呆板，可以通过调整版面空间变换出多种编排形式;
• 可以通过曲线分割、图片裁切、文字破图、元素串联、图片退底、空间留白等手法，变换出多种编排形式，巧妙破除上下分割的单一性与呆板感。

文章来源：优设    作者：艺海拾贝Design

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

今天分享一个很多设计师头疼已久的问题，关于网页响应式布局原理和设计方法。文章主要包含三个部分：

• 响应式页面是什么
• 响应式布局的规则
• 响应式的设计流程

所以废话不多说，我们直接进入正题吧！

响应式页面是什么

在过去，网站通常就是为了电脑大屏幕展示而设计，如果用手机访问，只能在巴掌大的屏幕里看缩小版的页面。虽然还有手机专供的 WAP 页面，但因为太简陋也无济于事。

随着智能手机、3G、4G、HTML5 的普及，使用手机访问网站的人越来越多，为了让用户在手机上看到更合适的布局，且兼顾开发的效率，响应式的概念就被提出了。

通俗解释，就是通过一套代码，可以无缝匹配符合电脑、平板、手机预览效果的前端技术。比如下方 Nike 官网，就是应用了响应式设计后在不同客户端、分辨率下的效果。

虽然响应式的应用越来越广泛，但是从零开始去写一个响应式效果的网站对于程序员来讲是非常复杂的，因为当中包含了大量的逻辑、判断、适配内容。

所以，今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架。而应用最广泛的，就数 Bootstrap 了。

之所以提这个，是因为既然开发使用了别人写的框架，那么对于我们的设计稿也就上了紧箍咒，我们需要根据框架的要求来设计界面，这会稍后具体解释。

还有个问题，就是为了实现平板、手机和电脑不同的预览效果，并不是只有响应式布局一种技术，还有另一种技术 —— 自适应。

通俗点说，自适应就是为不同客户端分别提供一套独立的前端代码，和响应式使用一套代码适配多种客户端不同。

响应式适合应用在一些简单的官网、展示类页面，展示的内容大致相同。而自适应适合应用在需要在不同客户端类型有较大差异的网站，这样只使用一套前端代码就完全行不通了。

比如爱奇艺的官网，为了符合用户体验，在移动端网页布局中精简替换了大量的内容，和电脑版已经没有太直接的联系了。

两种做法并没有好坏之分，只有适不适合项目之别。了解了它们的不同，我们就可以进一步学习响应式的规则了。

响应式布局的规则

响应式布局的规则并不是特别复杂，只要注意两个问题：

• 分段响应规则
• 组件宽度适应

1. 分段响应规则

敲黑板，响应式的响应，面向的核心对象是浏览器窗口的宽度，而不是设备类型。所以打开使用响应式的网站，我们通过改变浏览器的宽度，就可以看见不同的展示效果，比如下图的星巴克官网。

我们可以发现，浏览器宽度每达到一个数值（Breakpoint）的时候，页面的排版和样式就会发生明显的变化，而这就是响应式设计最重要的功能 —— 分段展示。

也就是说，响应式规则就是为页面分配不同的宽度区间，每个区间有各自展示的样式，用来应对不同的场景和设备类型，常见的适配区间大致如下：

包含图片截图 320-800 ：移动端收集屏幕 800-1200：平板或上网本屏幕 1200-无穷：一般的电脑显示器

面对分段式的布局、样式变更，我们就要关注到底发生了哪些变化。总结起来，可以简单的归纳成三种组件的调整：内容增减、布局调整、样式调整。

第一种，内容增减。即部分模块在不同的分段内会有显示和隐藏的状态，尤其是一些网页端的内容觉得在小屏幕上展示会太多了，就在小屏幕场景中隐藏掉。

第二种，布局调整。主要是模块的排列和顺序发生变化，常见的就是模块一行的列数发生改变。

第三种，样式变更。即针对不同的分段设计完全不一样的样式，最多应用在导航栏的设计中，会为最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 样式。

所以，归纳起来，就是页面针对不同的分段展示不同的结果，即页面中的组件触发了对应的变化类型。每个组件都可以应用不同的变化类型，而无需进行统一。

2. 组件宽度适应

分段式响应，是响应式布局的第一层逻辑。而在触发关键值（Breakpoint） 之间的区间，我们拖动窗口的宽度，会发现组件的宽度也随之改动，这就是 —— 组件宽度适应。

组件宽度适应在手机 UI 的适配中非常重要，即完成不同屏幕宽的手机适配所应用的逻辑，所下面我们简单讲讲它的规则。

组件的宽度适应模式主要有两种类型，一种是容器宽度适应，一种是容器比例缩放，比如下面的图例。

容器是一个比较抽象的概念，类似设计软件中的编组，它集合了所有下级元素，但本身并没有实际的内容和样式。在响应式规则中，下级元素并不会和这个容器等比变动，出现下面这种错误的效果。

正确做法是会定义下级元素针对父容器的响应方法，做到容器变更的同时其自身的显示也是合理的。比如相对容器左右间距一致、对齐方向一致、尺寸固定等设置。

而这种规则的设置，就是 Sketch/Figma/XD 中的响应式设置功能。只要设置得当，就可以获得一样的宽度适应效果。

如果对软件响应式功能了解不全面的同学，就可以自己多搜索一下对应的说明，我就不在这里过多的展开了。

再总结一下，响应式的规则就是页面组件先遵循当前分段展示的布局效果，并在这个区间内支持小范围宽度的变更和适应。

响应式的设计流程

响应式设计是一种源自技术的概念，而不是单纯的设计风格、方法，所以设计响应式设计其实就是 「面向编程设计」。

设计界面要吻合编程的真实方法和需求，而不是根据我们想怎么做就怎么做，所以整个流程不能只站在设计师自身的角度考虑，而要和前端程序员紧密沟通，首先确定响应几个宽度区间，以及它们对应的数值分别是多少。

然后我们就要完成对应数量页面的设计，因为前面我们说过，分段响应规则中会有明显的样式变动，这就要求设计师是一定要给出设计示例的，而不能依靠口头描述或程序员自由发挥。

完成这些设计稿以后，我们再进一步确定同一个区间内，组件的宽度适应规则是什么样的。多数情况下，这个阶段使用口述就可以，如果规则比较多，那么就可以在标注阶段把你要实现的效果记录上去即可。

全部设计稿和规则都沟通完毕以后，才进入切图导出的阶段。要提醒一次，在一些特殊的情况下，响应式的背景切图会和普通页面的背景切法不一样，尽可能让前端程序员检查一遍导出的文件。

只要根据上述的流程，在遇到不确定或者不清楚的情况，就和前端程序员做沟通，那么很快就可以将项目输出出来。

结尾

响应式这个概念虽然高大上，但并不是任何项目都要无脑往上套的。因为框架规则上的限制，导致我们很难在响应式页面中使用一些特别复杂、高级的视觉样式，导致最终呈现的效果往往非常简单或者过度依赖图片的质量。

所以，如果在功能较为复杂或需要复杂视觉支撑的网页中，就可以选择应用固定页面内容宽度的设计来完成。

文章来源：优设    作者：超人的电话亭

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

大部分电商详情页教程都着重教你如何做好首焦图，「产品参数模块」这个部分则鲜有人提。今天这篇教程，用超多案例，帮你掌握「产品参数模块」的设计方法。

文章来源：优设    作者：美工美邦

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

之前的模板消息已经废弃，现在改为订阅消息，订阅消息发布前，需要用户确认后才能接收订阅消息。

image

小程序端

index.wxml

<button bindtap="send">发送订阅消息</button>

index.js

const app = getApp()

Page({ data: {

 }， send:function(){

   wx.requestSubscribeMessage({ tmplIds: ['WZiCliW1zVtHXqX7dGnFNmFvxhW-wd9S_W4WfrwNvss'],

success:(res)=> { // 在登录的时候，获取到的openid进行缓存，现在直接把openid提取出来即可 wx.getStorage({ key: 'openid',

         success (res) { console.log(res.data)

           wx.request({ url: 'https://www.xxx.com/send.php?openid='+res.data, data: {},

header: { 'content-type': 'application/json' },

             success (res) { // 推送 if(res.data.errcode == '43101'){ console.log("拒绝订阅消息")

               }else if(res.data.errcode == '0'){ console.log("发送订阅消息")

               }else{ console.log("未知错误")

               }

             }

           })

         },

         fail (res) { console.log("没有openid，无法发送")

         }

       })

     }

   })

 }

})

后端

<?php //设置 header  header("Content-type:application/json"); //接收参数 $openid = $_GET["openid"];

//初始化 CURL $ch = curl_init(); // 获取access_token // include ''; require_once("access_token.php");

//目标服务器地址  curl_setopt($ch, CURLOPT_URL,

'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token='.$access_token);

//设置要POST的数据 curl_setopt($ch, CURLOPT_POST, true);

$data = '{

 "touser": "'.$openid.'",

 "template_id": "模板ID",

 "page": "pages/index/index",// 要跳转的页面

 "lang":"zh_CN",

 "data": {

     "thing4": {

         "value": "欢迎使用专插本最前线小程序"

     },

     "thing5": {

         "value": "小程序由公众号：广东专插本最前线开发"

     }

 }

}';

curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); // 对认证证书来源的检查 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); // 从证书中检查SSL加密算法是否存在 curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2); //获取的信息以文件流的形式返回，而不是直接输出 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //发起请求 $result = curl_exec($ch); echo $result; //关闭请求 curl_close($ch); ?>

access_token.php

<?php // 声明页面header header("Content-type:charset=utf-8"); // APPID、APPSECRET $appid = "你的小程序APPID";

$appsecret = "你的小程序APPSECRET"; // 获取access_token和jsapi_ticket function getToken(){

   $file = file_get_contents("access_token.json",true);//读取access_token.json里面的数据 $result = json_decode($file,true); //判断access_token是否在有效期内，如果在有效期则获取缓存的access_token //如果过期了则请求接口生成新的access_token并且缓存access_token.json if (time() > $result['expires']){

       $data = array();

       $data['access_token'] = getNewToken();

       $data['expires'] = time()+7000;

       $jsonStr =  json_encode($data);

       $fp = fopen("access_token.json", "w");

       fwrite($fp, $jsonStr);

       fclose($fp); return $data['access_token'];

   }else{ return $result['access_token'];

   }

} //获取新的access_token function getNewToken($appid,$appsecret){ global $appid; global $appsecret;

   $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret."";

   $access_token_Arr =  file_get_contents($url);

   $token_jsonarr = json_decode($access_token_Arr, true); return $token_jsonarr["access_token"];

}

$access_token = getToken(); ?>

逻辑

1、通过button控件出发send函数

2、send函数调用wx.requestSubscribeMessageAPI，微信允许接收订阅消息

3、 wx.request向send.php后端请求

4、后端获取access_token后，调用订阅消息接口POST一段json数据即可发送订阅消息

官方文档

1、https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html

2、https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/subscribe-message/subscribeMessage.addTemplate.html

Author:TANKING

Date:2020-08-24

Web:http://www.likeyun.cn/

WeChat:face6009

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

开发中，遇到数组排序的需求很频繁，这篇文章会介绍几个常见排序思路。

一、希尔排序（性能最好）

如果要从大到小排列，则 while(arr[n] > arr[n - interval] && n > 0) 。

// 希尔排序算法 function xier(arr){ var interval = parseInt(arr.length / 2);//分组间隔设置 while(interval > 0){ for(var i = 0 ; i < arr.length ; i ++){ var n = i; while(arr[n] < arr[n - interval] && n > 0){ var temp = arr[n]; arr[n] = arr[n - interval]; arr[n - interval] = temp; n = n - interval; } } interval = parseInt(interval / 2); } return arr; } // Array var arr = [10, 20, 40, 60, 60, 0, 30] // 打印排序后的数组 console.log(xier(arr))//[0, 10, 20, 30, 40, 60, 60]  


    


    

二、sort排序（普通数组 / 数组嵌套对象）

一堆数组排序

// Array var arr = [10, 20, 40, 60, 60, 0, 30] // 排序方法 arr.sort(function(a,b){ /*
    * return b-a; —> 降序排序
    * return a-b; —> 升序排列
    */ return a-b; })//括号里不写回调函数则默认按照字母逐位升序排列 // 打印排序后的数组 console.log(arr)//[0, 10, 20, 30, 40, 60, 60]  


    


    

对象数组排序（数组套对象）

//对象数组排序 var arr = [ {name:'syy', age:0}, {name:'wxy', age:18}, {name:'slj', age:8}, {name:'wj', age:20} ]; // 排序方法 function compare(property) {//property:根据什么属性排序 return function(a,b){ var value1 = a[property]; var value2 = b[property]; /*
        * value2 - value1;  ——> 降序
        * value1 - value2;  ——> 升序
        */ return value1 - value2;//升序排序 } } // 打印排序后的数组 console.log(arr.sort(compare('age'))) /*
0: {name: "syy", age: 0}
1: {name: "slj", age: 8}
2: {name: "wxy", age: 18}
3: {name: "wj", age: 20}
*/  


    


    

三、桶排序

特点：简单，但非常浪费内存，几乎不用。

桶中出现的数组元素都做个标记 1，然后将桶数组中有 1 标记的元素依次打印。

// Array var arr = [] // 每个数组项做标记(1) for(let i = 0; i < arr.length; i++) { let key = arr[i] arr[key] = 1 } // 遍历打印出每项 for(let j in arr) { debugger console.log(j) }  


    


    

四、冒泡排序

性能：一般（需要每项进行比较）。

每一趟找出最大的值。

// Array var arr = [10, 20, 40, 60, 60, 0, 30] /*
* 总共比较次数为arr.length-1次
* 每次的比较次数为arr.length-1次
* 依次递减
*/ var temp;//交换变量标识 // 两层for分别表示当前项与第二项 for(let i = 0; i < arr.length - 1; i++) { for(let j = 0; j < arr.length - 1; j++) { // 如果当前项大于第二项(后一项)则交换 if(arr[j] > arr[j+1]) { temp = arr[j] arr[j] = arr[j+1]; arr[j+1] = temp; } } } // 打印排序后的数组 console.log(arr)//[0, 10, 20, 30, 40, 60, 60]  


    


    

五、选择排序

性能：一般（需要每项进行比较）。

假定某个位置的值是最小值，与冒泡排序类似。

// Array var arr = [10, 20, 40, 60, 60, 0, 30] var temp;//交换变量标识 // 两层for分别表示当前项与第二项 for(let i = 0; i < arr.length - 1; i++) { for(let j = i + 1; j < arr.length; j++) { // 假设第二项是最小值(是则交换/否则继续比较) if(arr[i] > arr[j]) { temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } } } // 打印排序后的数组 console.log(arr)//[0, 10, 20, 30, 40, 60, 60] 



 


    


    

六、插入排序

// Array var arr = [10, 20, 40, 60, 60, 0, 30] // 排序算法 for(var i = 0; i < arr.length; i++) { var n = i; while(arr[n] > arr[n+1] && n >= 0) { var temp = arr[n]; arr[n] = arr[n+1]; arr[n+1] = temp; n--; } } // 打印排序后的数组 console.log(arr)//[0, 10, 20, 30, 40, 60, 60]







转自：https://blog.csdn.net/weixin_44198965/article/details/107996497?utm_medium=distribute.pc_category.none-task-blog-hot-4.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-4.nonecase&request_id=

作者：王佳斌

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。

专业又贴心医疗App页面设计

医疗行业设计案例

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

   --手机appUI设计--

（以上图片均来源于网络）

  蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

  更多精彩文章：

       手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）