上下构图形式是将版面分割为上下两部分，或让画面中的元素整体呈现出上下的分布趋势，主空间承载视觉点，次空间承载阅读信息，呈现的视觉效果平衡而稳定。
最典型的上下构图由「上图下字」或者「上字下图」两部分构成，图片及文字各占据一部分，互不干预，能清晰明了的传达出版面的信息。
主空间还经常使用图形化的标题文字充当画面主体，可以很好解决画面缺少图片层级的问题。
进行上下构图设计时，可以根据版面内容的信息体量划分画面的空间，常用的版面分割比例有：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.空间留白
使用留白破除两个空间的间隙，拉开画面的空间感，具有良好的视觉效果。
所以废话不多说，我们直接进入正题吧！
在过去，网站通常就是为了电脑大屏幕展示而设计，如果用手机访问，只能在巴掌大的屏幕里看缩小版的页面。虽然还有手机专供的WAP页面，但因为太简陋也无济于事。
随着智能手机、3G、4G、HTML5的普及，使用手机访问网站的人越来越多，为了让用户在手机上看到更合适的布局，且兼顾开发的效率，响应式的概念就被提出了。
通俗解释，就是通过一套代码，可以无缝匹配符合电脑、平板、手机预览效果的前端技术。比如下方Nike官网，就是应用了响应式设计后在不同客户端、分辨率下的效果。
虽然响应式的应用越来越广泛，但是从零开始去写一个响应式效果的网站对于程序员来讲是非常复杂的，因为当中包含了大量的逻辑、判断、适配内容。
所以，今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架。而应用最广泛的，就数Bootstrap了。
之所以提这个，是因为既然开发使用了别人写的框架，那么对于我们的设计稿也就上了紧箍咒，我们需要根据框架的要求来设计界面，这会稍后具体解释。
还有个问题，就是为了实现平板、手机和电脑不同的预览效果，并不是只有响应式布局一种技术，还有另一种技术——自适应。
通俗点说，自适应就是为不同客户端分别提供一套独立的前端代码，和响应式使用一套代码适配多种客户端不同。
响应式适合应用在一些简单的官网、展示类页面，展示的内容大致相同。而自适应适合应用在需要在不同客户端类型有较大差异的网站，这样只使用一套前端代码就完全行不通了。
比如爱奇艺的官网，为了符合用户体验，在移动端网页布局中精简替换了大量的内容，和电脑版已经没有太直接的联系了。
两种做法并没有好坏之分，只有适不适合项目之别。了解了它们的不同，我们就可以进一步学习响应式的规则了。
响应式布局的规则并不是特别复杂，只要注意两个问题：
1.分段响应规则
敲黑板，响应式的响应，面向的核心对象是浏览器窗口的宽度，而不是设备类型。所以打开使用响应式的网站，我们通过改变浏览器的宽度，就可以看见不同的展示效果，比如下图的星巴克官网。
也就是说，响应式规则就是为页面分配不同的宽度区间，每个区间有各自展示的样式，用来应对不同的场景和设备类型，常见的适配区间大致如下：
包含图片截图320-800：移动端收集屏幕800-1200：平板或上网本屏幕1200-无穷：一般的电脑显示器
第一种，内容增减。即部分模块在不同的分段内会有显示和隐藏的状态，尤其是一些网页端的内容觉得在小屏幕上展示会太多了，就在小屏幕场景中隐藏掉。
第二种，布局调整。主要是模块的排列和顺序发生变化，常见的就是模块一行的列数发生改变。
第三种，样式变更。即针对不同的分段设计完全不一样的样式，最多应用在导航栏的设计中，会为最小的分段使用iOS的Tabbar或安卓的Menu样式。
所以，归纳起来，就是页面针对不同的分段展示不同的结果，即页面中的组件触发了对应的变化类型。每个组件都可以应用不同的变化类型，而无需进行统一。
2.组件宽度适应
分段式响应，是响应式布局的第一层逻辑。而在触发关键值（Breakpoint）之间的区间，我们拖动窗口的宽度，会发现组件的宽度也随之改动，这就是——组件宽度适应。
组件宽度适应在手机UI的适配中非常重要，即完成不同屏幕宽的手机适配所应用的逻辑，所下面我们简单讲讲它的规则。
组件的宽度适应模式主要有两种类型，一种是容器宽度适应，一种是容器比例缩放，比如下面的图例。
正确做法是会定义下级元素针对父容器的响应方法，做到容器变更的同时其自身的显示也是合理的。比如相对容器左右间距一致、对齐方向一致、尺寸固定等设置。
而这种规则的设置，就是Sketch/Figma/XD中的响应式设置功能。只要设置得当，就可以获得一样的宽度适应效果。
如果对软件响应式功能了解不全面的同学，就可以自己多搜索一下对应的说明，我就不在这里过多的展开了。
再总结一下，响应式的规则就是页面组件先遵循当前分段展示的布局效果，并在这个区间内支持小范围宽度的变更和适应。
响应式设计是一种源自技术的概念，而不是单纯的设计风格、方法，所以设计响应式设计其实就是「面向编程设计」。
设计界面要吻合编程的真实方法和需求，而不是根据我们想怎么做就怎么做，所以整个流程不能只站在设计师自身的角度考虑，而要和前端程序员紧密沟通，首先确定响应几个宽度区间，以及它们对应的数值分别是多少。
然后我们就要完成对应数量页面的设计，因为前面我们说过，分段响应规则中会有明显的样式变动，这就要求设计师是一定要给出设计示例的，而不能依靠口头描述或程序员自由发挥。
完成这些设计稿以后，我们再进一步确定同一个区间内，组件的宽度适应规则是什么样的。多数情况下，这个阶段使用口述就可以，如果规则比较多，那么就可以在标注阶段把你要实现的效果记录上去即可。
全部设计稿和规则都沟通完毕以后，才进入切图导出的阶段。要提醒一次，在一些特殊的情况下，响应式的背景切图会和普通页面的背景切法不一样，尽可能让前端程序员检查一遍导出的文件。
只要根据上述的流程，在遇到不确定或者不清楚的情况，就和前端程序员做沟通，那么很快就可以将项目输出出来。
响应式这个概念虽然高大上，但并不是任何项目都要无脑往上套的。因为框架规则上的限制，导致我们很难在响应式页面中使用一些特别复杂、高级的视觉样式，导致最终呈现的效果往往非常简单或者过度依赖图片的质量。
所以，如果在功能较为复杂或需要复杂视觉支撑的网页中，就可以选择应用固定页面内容宽度的设计来完成。
大部分电商详情页教程都着重教你如何做好首焦图，「产品参数模块」这个部分则鲜有人提。今天这篇教程，用超多案例，帮你掌握「产品参数模块」的设计方法。
之前的模板消息已经废弃，现在改为订阅消息，订阅消息发布前，需要用户确认后才能接收订阅消息。
image
小程序端
index.wxml
index.js
constapp=getApp()
Page({data:{
}，send:function(){
wx.requestSubscribeMessage({tmplIds:['WZiCliW1zVtHXqX7dGnFNmFvxhW-wd9S_W4WfrwNvss'],
success(res){console.log(res.data)
header:{'content-type':'application/json'},
success(res){//推送if(res.data.errcode=='43101'){console.log("拒绝订阅消息")
}elseif(res.data.errcode=='0'){console.log("发送订阅消息")
}else{console.log("未知错误")
}
})
},
fail(res){console.log("没有openid，无法发送")
后端
//初始化CURL$ch=curl_init();//获取access_token//include'';require_once("access_token.php"); //目标服务器地址curl_setopt($ch,CURLOPT_URL, //设置要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); access_token.php $appsecret="你的小程序APPSECRET";//获取access_token和jsapi_ticketfunctiongetToken(){ $file=file_get_contents("access_token.json",true);//读取access_token.json里面的数据$result=json_decode($file,true);//判断access_token是否在有效期内，如果在有效期则获取缓存的access_token//如果过期了则请求接口生成新的access_token并且缓存access_token.jsonif(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_tokenfunctiongetNewToken($appid,$appsecret){global$appid;global$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函数 3、wx.request向send.php后端请求 4、后端获取access_token后，调用订阅消息接口POST一段json数据即可发送订阅消息 官方文档 Author:TANKING Date:2020-08-24 WeChat:face6009 如果要从大到小排列，则while(arr[n]>arr[n-interval]&&n>0)。 //希尔排序算法functionxier(arr){varinterval=parseInt(arr.length/2);//分组间隔设置while(interval>0){for(vari=0;i //Arrayvararr=[10,20,40,60,60,0,30]//排序方法arr.sort(function(a,b){/**returnb-a;—>降序排序*returna-b;—>升序排列*/returna-b;})//括号里不写回调函数则默认按照字母逐位升序排列//打印排序后的数组console.log(arr)//[0,10,20,30,40,60,60]对象数组排序（数组套对象） //对象数组排序vararr=[{name:'syy',age:0},{name:'wxy',age:18},{name:'slj',age:8},{name:'wj',age:20}];//排序方法functioncompare(property){//property:根据什么属性排序returnfunction(a,b){varvalue1=a[property];varvalue2=b[property];/**value2-value1;——>降序*value1-value2;——>升序*/returnvalue1-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标记的元素依次打印。 //Arrayvararr=[]//每个数组项做标记(1)for(leti=0;i 每一趟找出最大的值。 //Arrayvararr=[10,20,40,60,60,0,30]/**总共比较次数为arr.length-1次*每次的比较次数为arr.length-1次*依次递减*/vartemp;//交换变量标识//两层for分别表示当前项与第二项for(leti=0;i 假定某个位置的值是最小值，与冒泡排序类似。 //Arrayvararr=[10,20,40,60,60,0,30]vartemp;//交换变量标识//两层for分别表示当前项与第二项for(leti=0;i 手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。 专业又贴心医疗App页面设计 医疗行业设计案例 --手机appUI设计-- 七月，我们上线重磅基础能力——实时数据库，并开了实战直播课，让大家可以更好的理解并使用该服务。你的聊天室、站内信、投票、小游戏等需要高实时的功能正在想你招手，赶紧使用实时数据库服务又快又简单的开发它们吧。 Ps：目前实时数据库限时免费，就算以后收费，费用也是低到忽略不计。速速用上，不要错过这么硬核的能力。 九月初，FlutterSDK已进入测试阶段，很快就可以跟大家见面了。 FlutterSDK的使用比较简明易懂，例如对数据表的增删查改，在指定数据表后，对数据项进行对应操作即可，例如新增（create）、查找（get）、修改（update）和删除（delete）。 以下是对Flutter增删查改功能进行展示： TableObjectproduct=newTableObject('product');//获取名为product的数据表 //新增数据 TableRecordrecord=product.create();//创建一条空白记录 //为属性字段赋值 record.set('name','知晓云fluttersdk');//对name字段进行赋值 record.set('version','1.0');//对version字段进行赋值 //将数据保存到服务器 record=awaitrecord.save();//保存 //从服务器获取一条数据 TableRecordrecord=awaitproduct.get(record.id); //更新数据 record.set('version','1.1'); awaitrecord.update(); //删除数据 awaitproduct.delete(recordId:record.id); 目前知晓云FlutterSDK支持的功能如下： 数据表 用户 内容库 文件 云函数调用 本地存储 FlutterSDK正式上线后，我们还会输出实战教学视频，敬请期待！ 知晓云FlutterSDK 2020年已过去三分之二，好消息是，即将到来的中秋&国庆小长假以及知晓云近期的更新内容，除了即将上线的FlutterSDK，还有以下更新。 查看iOS开发文档 查看Android开发文档 如果你有其他需求，可以通过文末 对于各种风格、方法，我的观点始终是：做出来的设计要可用，有用，有良好的可访问性，用户可以轻松理解，就行了。不过，我更乐于从趋势中获得乐趣，而不是将它视作为约束，如果每个界面看起来都是一样的，那该是一件多么无聊的事情啊。 我个人非常喜欢漂亮的渐变和微妙的阴影，这样的设计常常显得魅力非凡。这种自然的过渡和光影的变化，非常贴合我们对于现实世界的感知，这就是为什么这样的设计能够俘获大量没有技术背景的用户的心——因为它们看起来友好，并且易于理解。 下面我们开始吧！ 怎么让我们的设计看起来柔和圆润呢？下面开始准备工作： 1、选择想要使用的配色（想想使用柔和的粉彩构成的背景主色调，搭配一个给人精致感的次要色，以及一个抓人注意力的强调色。） 2、选择合理的字体（我用的是BrandonGrotesque，这是我最喜欢的字体，它足够友好，能够营造有趣的氛围，且具有良好的可读性）。接下来，给字体设计不同大小和字重（最好不超过5种不同的样式）。其中，标题字体应该较大，正文字体较小，最小的字体用于细节呈现。注意，尽量不要在长句子里面使用全大写。 3、确定你所需要的阴影的高程（Height）和模糊度。 4、如果使用的是图标，确定使用填充样式还是描边样式。尽量不要混用。 要想接收表单数据，首先要在表单进行数据的绑定，我们可以使用v-model="keyword"进行绑定。 然后在js获取这个绑定的值。 index.vue js Date:2020-8-13 互联网行业进入下半场，精细化运营是关键。多语言支持能让产品更好地服务境内的其他语言用户，也为产品出海打下基础，随着WeChat/Alipay的全球化，你的小程序是否做好准备了呢？ 以下是滴滴出行小程序的中英文版本对比： 在上述业务背景下，Mpx框架——滴滴自研的专注提升小程序开发体验的增强型小程序框架，内建i18n能力便提上日程。 基于小程序的双线程架构设计，实现i18n存在一些技术上的难点与挑战，由于Mpx框架早期构建起来的强大基础，最终得以优雅支持多语言能力，实现了和vue-i18n基本一致的使用体验。 在使用上，Mpx支持i18n能力提供的API与vue-i18n大体对齐，用法上也基本一致。 编译阶段通过用户配置的i18n字典，结合框架内建的翻译函数通过wxs-i18n-loader合成为可执行的WXS翻译函数，并自动注入到有翻译函数调用的模板中，具体调用方式如下图。 //mpx文件 通过框架提供的wxs2js能力，将WXS翻译函数转换为JS模块注入到JS运行时，使运行时环境中也能够调用翻译函数。 //mpx文件