微信h5页面的视觉设计原则

让页面体现出与众不同的个性。

要点一、微商在设计微商购物商城页面时，应让页面体现出与众不同的个性。由于加入微商的商家众多，想要在众多商家中脱颖而出，吸引更多的用户，就要抓住自己商品独有的特色和风格。商家需要找出自己商品与众不同的地方来设计页面，才可以给用户带来独特印象，从而吸引更多的用户。要点二、微商在设计微商购物商城页面时，应该融入创新的设计，让页面更加与时俱进。商家在设计页面时，不要沉溺于过去以往的设计方式，根据产品的更新推进，设计出别出心裁的微商购物商城页面。比如将商品的作用功效与其他商品的不同之处设计在页面上。让消费者一看就明白商品的特征，知道这款商品的真正用途，就有可能直接购买消费。要点三、微商在设计微商购物商城页面时，可以融入独到的营销方法来实现产品利益化。想要通过微商购物商城页面抓住用户的消费心理，除了要与众不同，还要有自己别出心裁的营销方法。商家只有在微商购物商城页面设计出别出心裁的营销方案，比如将一些优惠活动设计在页面上，这样会吸引更多消费者的眼球，消费者看到有优惠，就会心动，心动了就有可能促进消费。要点四、微商在设计微商购物商城页面时，可以多姿多彩的表现方式来抓住顾客的消费心理。要不仅局限于以往的纯文字表达方式，可以根据自身的状况来插入图片。如果有需求，也可以适当的插入视频，音频和图片，做到声情并茂。让顾客可以从不同的角度了解产品，进而抓住顾客的消费心理，促进消费需求。

屡屡刷爆朋友圈的H5页面肯定就是首当其冲的，提到H5页面，就立马想到“围住神经猫”，上线微信朋友圈3天的时间便创造了用户500万，访问量超1亿的神话。

工具：易启秀，易传单，前者更有名，后者更稳定。都免费。制作psd分层文件。把背景和需要动的分别保存（动态部分要png）。

1.登录网站，点击右上角进入个人主页。

2.选择“创建作品”。

3.选择“手机端”进行创建。

4.这样就可以利用左侧工具栏进行制作。

5.在工具栏第一栏里我们可以添加照片，视频或者动态图等素材。

6.制作完成后选择“保存”或者“发布”即可。

当H5结合中间件产品Cordova（Cordova调用手机底层的api接口例如重力感应，收发信息，GPS等功能）后，并将H5+cordova放在安卓和苹果系统的SDK中打包成应用，变成为了跨平台的移动应用了。实际上，还是用到了安卓和苹果系统内嵌的浏览器，相当于在应用中浏览H5编写的页面，cordova负责调用手机的原生功能。再将他们放到开发环境中打包，H5就能够开发跨平台应用了。

微信H5制作方法的另外几种也可以试一下可以自己使用html5+css+js来制作。找一些免费的h5页面制作平台，如最酷网、秀米、一页等来免费制作。在网上找一些h5页面模板，来修改成自己的。

本教程前面三篇文章：

通过本系列前面三篇文章的介绍，大家对微信小程序的视图和控制器，微信调试器的用法，以及如何消费微信平台提供的 Public API，已经有了一个最基本的认识了。在这个基础上，本文让我们进一步学习微信小程序的页面跳转路由设计。

这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图，然后实现从第一个视图到第二个视图的跳转。

首先开发第二个视图：

做过 Angular 开发的朋友们对上面的视图设计一定不会陌生。这个视图的数据源由模型 logs 提供，是一个列表结果，列表每个元素的数据源是模型 logs 里的一条记录，用 log 代表。

为了让 log 看起来显示更整齐，在 log 内容之前，显示每条 log 的索引。因为 log 的索引从 0 开始，所以用 {{index + 1}} 在索引前加一，这样显示的索引更符合普通人的阅读习惯。

这个视图的控制器：

控制器 logs.js 的实现：

在控制器里调用 Page 构造函数，给当前控制器指定名为 logs 的数据模型。

这个数据模型的值填充，通过微信框架提供的 API wx.getStorageSync 来获取。

wx.getStorageSync 的含义在微信小程序 官网 上有定义：从本地缓存中同步获取指定 key 对应的内容。

第二个视图的 UI 和控制器都开发完毕，剩下的事情就是在第一个视图里定义一个触发点，让它能触发到第二个视图的跳转。

我在第一个视图上通过属性 bindtap 绑定了一个点击函数 bindViewTap :

bindViewTap 在第一个控制器 index.js 里的实现：

跳转还是通过微信小程序提供的 API wx.navigateTo :

保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。

学习了微信小程序页面路由跳转之后，我们来进行一个实际的需求开发。

效果：我在手机上打开微信小程序，自动显示出我当前所在的地理位置：

具体步骤：

ReservationService.getGeocode 的实现：

看下面一个使用高德地图 API 将经纬度转换成文字描述的地址的例子，使用 postman 发送请求：

API 响应：

假设我用 vue 开发了一个 web 应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试。

假设我的 web 应用的访问入口是如下公众号菜单的"预约"按钮:

那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在 web 开发者工具里,将开发者本人的微信号添加进去:

点击"绑定开发者账号":

输入待绑定的微信账号:

点击绑定,该微信号会收到一条消息,询问是否绑定:

点击同意操作完成绑定。

接下来, 把要调试的 web 应用的 url 放到微信开发者工具地址栏里，回车之后，微信开发者工具就会弹出一个询问窗口，点击 Allow 之后，就可以在微信开发者工具提供的类似 Chrome 开发者工具调试器一样的界面里进行单步调试了。

这个粘贴到地址栏的 url 很有讲究。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

其中 appid= 后面的值，是从微信公众号控制台里拷贝出来的 appid ：

redirect_uri, 即为我们开发的 web 应用，部署到服务器之后生成的 url，需要经过 url encode 处理：

https://www.xxx.com/smart

这个 url 准备好之后，将其粘贴到微信开发者工具地址栏里，回车，即可看到一个对话窗口，要求获得我们公开信息的许可：

点击 Allow 之后，就可以像使用 Chrome 开发者工具的调试器一样，在微信开发者工具里进行单步调试了：

本文首先介绍了微信小程序多页面内的路由跳转设计，接着通过获得手机当前经纬度并转换成地址的需求实现，进一步深入了解了微信小程序如何消费微信平台提供 Public API 的方法。

本教程前面三篇文章：

你好，不会技术的可以使用网上的自助工具实现呢。你可以搜索下“微吾”这个工具。

这个工具有几个突出的优点：

1、提供丰富的模板和素材，如果要求不是很高，可以直接使用并修改成自己想要的。

模板包含：企业宣传、招聘启事、投票手机、报名表、相册、请柬、商务活动模板、个人简历、商品宣传、活动邀请函、招聘等，超过20大类。

丰富的素材：图片库包含：办公类、风景类、生活类、创意类、美食类、人物类、建筑类、情感类、动物类、科技类、背景类等11大类别。

2、自带动画效果，炫酷且容易吸引眼球。

动画设置种类繁多，主要分为三种：入场动画（进入时）、退场动画（离开时）、特效，一共有85种类型动画供选择。

另外，使用者可以自主设置动画时长、动画延迟、动画次数、是否循环动画、是否反向循环等。

操作简单方便。五步骤生成动画。

3、简单易操作。

无需编程，即可快速设计和发布炫酷的H5页面。

设计时减少无关的设计元素对用户的干扰，礼貌的向用户展示程序提供的服务，友好的引导用户进行操作。

每个页面设计时都有明确的重点，便于用户快速理解，避免出现其它与用户的决策和操作无关的干扰因素。

用户在进行某一操作流程时，应避免出现目标流程之外的内容打扰用户

明确告知用户身在何处，又可去哪儿，确保用户在页面中游刃有余的穿梭

微信在小程序内不提供统一的导航栏样式，开发者可自定义，建议，所以的次级页面在左上角提供返回上一级页面操作。另外，iOS可以右滑返回，安卓可以通过物理键返回

1 、小程序菜单 ：微信会在右上方放置官方的小程序菜单，固定位置，开发者不可对其内容自定义，但可以选择深浅两种配色，要预留出该区域空间

2、页面内导航

开发者添加标签分页Tab导航，标签分页栏可固定在页面顶部或底部。标签不得少于2个，不多于5个

小程序首页可选择微信提供的原声底部标签分页样式，仅供首页使用。可自定义图标样式，标签文案及文案颜色

顶部标签分页栏颜色可自定义，务必注意保持分页栏标签的可用性，可shi性和可操作性。

页面过长加载会引起用户不满，但是加载等待不可避免，要及时反馈以缓解用户等待的不良情绪

启动页将突出展示小程序的品牌特征和加载状态。除品牌标志展示外，页面上的其他元素如加载进度，均由微信统一提供，不能更改

微信小程序内，微信提供标志的页面下拉刷新及加载能力和样式，无需自行开发

用户可自定义页面内容的加载样式，不过应尽量简洁，并使用简单动画告知用户加载过程； 模态加载，除了在某些全局性操作下不要使用

局部加载反馈只在触发加载的页面局部进行反馈，这样的反馈机制是微信推荐的

全局加载反馈，可参考下图，使用标题栏提示加载小程序页面内容的过程。

注意：1、若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。

     2、载入过程中,应保持动画效果 无动画效果的加载很容易让人产生该界面已经卡死的错觉。 

  3、不要在同一个页面同时使用超过1个加载动画。

除了在用户等待的过程中需给予反馈外，对操作结果页需要给予明确的反馈.

4.1 局部页面操作，可在操作区域直接反馈，如点击多选控件

4.2 页面全局操作， 图标型弹出提示 ，1.5s自动消失，并不打断流程，适用于不需要强调的操作提示； 文字型弹出提示 ：适用于轻量化用文字解释当前状态或提醒不严重的错误； 模态对话框 ：对于需要用户明确知晓的操作结果状态可通过模态对话框来提示

结果页：用于操作结果已经是当前流程的终结情况，最为强烈和明确告知用户操作已完成

在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。

要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。

1、减少输入

手机键盘区域小，输入困难而且容易引起输入错误，应尽量减小用户输入，利用现有接口或其他一些易于操作的控件来改善用户输入体验。

如下图，在添加银行卡时，采用摄像头识别接口来帮助用户输入。可利用微信对外开放的例如地理位置等接口

让用户在不得不手动输入的情况下，尽量让用户做选择而不是键盘输入，如：在用户搜索时提供搜索历史课帮助用户快速进行搜索

2、避免误操作

考虑点击热区，避免可点击区域过小或密集而造成误操作

3、利用接口提示性能

分析如下：

微信公众号的界面设计可以采用第三方编辑器进行设计，都是免费的，直接可用的格式，带有很多模板，根据需要选择后替换为自己所需要的文字和图片即可。

1、  百度搜索在线编辑器，进入编辑器界面。

2、点击左侧分类格式，就会列出各种预存格式供选择。点击一个样式后，就会自动插入右侧编辑器中，整体编辑完毕后，复制即可直接粘贴到微信公众号自带的编辑器内。

3、  其他更多样式，也可以用相同方式进行编辑，还可以整个图文消息内容编辑完毕后，再一次性复制粘贴到微信公众号自带的编辑器内，保存再群发。

扩展资料：

微信公众号是开发者或商家在微信公众平台上申请的应用账号，该帐号与QQ账号互通，通过公众号，商家可在微信平台上实现和特定群体的文字、图片、语音、视频的全方位沟通、互动 。形成了一种主流的线上线下微信互动营销方式。

2016年1月18日，腾讯在北京发布消息称，中国政务微信公号已逾10万。

2018年4月，广东省网信办发布消息表示，为进一步净化网络空间，规范微信传播秩序。腾讯依据有关法律法规和用户协议，依法封停违法从事互联网新闻信息服务、编发谣言和虚假信息、传播淫秽色情信息及侵权假冒信息等微信公众号9.9万多个。

2018年6月27日，微信官方宣布，微信公众平台上线开放转载功能，文章可以直接被转载，不需要人工再次确认。

参考资料：百度百科：微信公众号

H5如此势头，不得不让营销汪对H5页面的未来充满了期待，越来越多的人开始在营销中运用H5页面。其实在移动端各个领域，H5页面的叫法很多，也会称为翻翻看、手机微杂志、广告页、场景应用、海报\画报（动态海报、指尖海报、掌中海报、动画海报、微画报、微海报）等等，经常能见到的就是滑动翻页。

然而大企业大公司的土豪都在利用自己强大资源和技术比拼H5场景页面，一些小企业或普通独立营销者就只能眼巴巴看着吗？

h5单纯设计定制的话,首页大概是800到1500每页，内页设计600到1000每页。如果是原画设计的话另算，一般需要2000+每页了。具体建议你可以找天客通平台给你报价。

h5页面定制需要按照你需要的功能来报价，下面是我整理的一些需求，你可以确定下具体的，然后跟合作公司沟通。

当然也会根据你制作的页数的数量来去另外计费。还有一个是否要数据，数据收集到的数据是否需要下载，这些都需要计算到费用里面，还是比较细致的。

h5单纯设计定制的话,首页大概是800到1500每页，内页设计600到1000每页。如果是原画设计的话另算，一般需要2000+每页了。