微信ui设计规范.docxVIP

微信ui设计规范 　　篇一：HTML5微信页面设计 　　我保证你一分钟就能看完这篇文章! 真的..  　　角色解释：  　　需求方：有钱大爷  　　设计人员：美工殿下  　　前端工程师：前端文艺青年  　　一个HTML5页面从提出到完成上线的流程：  　　1、需求方、设计人员、H5实现人员三方共同讨论实现方案  　　2、设计人员出设计图  　　3、H5人员按设计图出H5页面  　　4、需求方评估已实现的H5页面后给予反馈  　　5、设计人员与H5人员根据反馈进行适当调整  　　6、发布推广  　　如何提出一个合理的微信HTML5页面设计诉求？  　　合理分析诉求与公司团队拥有的资源：  　　1、需求完成时间；  　　时间给的越多，项目做的就越扎实，优化的也更好，就像造一座桥，三个星期完工，保质10年，1年完工，保质100年  　　2、现有技术能力；  　　根据人员的能力选用合适的技术，以及设计对应能实现的视觉特效  　　3、工作人员配备； 　　有些狂拽酷炫屌炸天的特效需要专业的游戏或影视人员参与制作 　　4、领导B格  　　不解释  　　5、公司B格  　　不解释  　　好吧以上都是枯燥的叙述，后面会有可爱的喵星人出现，所以往下看吧。  　　三方需要达成的共识与常识  　　一、手机屏宽度高度不一  　　由于手机屏大小不一，所以H5页面所承载的设计图相应的宽高也会不一样，是否需要设计多套不同的设计图以适应不同的手机屏？  　　最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸，但这样需要大量的人力与时间，而且维护成本太高，不符合大部分团队的实际情况。  　　典型的手机屏尺寸如： 　　导航栏+iphone状态栏高度： 64px 　　iphone4  　　屏幕总宽度: 320px  　　屏幕总高度: 480px  　　微信网页可视高度: 416px  　　iphone5  　　屏幕总宽度: 320px  　　屏幕总高度: 568px  　　微信网页可视高度: 504px  　　iphone6  　　屏幕总宽度: 375px  　　屏幕总高度: 667px  　　微信内网页可视高度: 603px  　　iphone6 plus  　　屏幕总宽度: 414px  　　屏幕总高度: 736px 　　微信网页可视高度: 672px 　　samsung galaxy note3 （三丧手机开发者的黑洞。。）  　　导航栏+Android状态栏高度： 73px  　　屏幕总宽度: 360px  　　屏幕总高度: 640px  　　微信网页可视高度: 567px  　　仅iphone就4个尺寸了，更别说Android阵营的手机了  　　特别注意：以上不是手机的分辨率单位，而是普通电脑上浏览网页时的像素，这和客户端Native制作有很大的区别。  　　比如iphone4,宽度就是320px像素，高度为480px，如果以实际分辨率来设计即640*960来排列设计，实际在H5页面显示时会显得很小。  　　一般我们都是以用自适应的解决方案，以一套或两套效果图适应大部分的屏目，放弃极端屏或对其优雅降级，牺牲一些效果  　　正因为只有一套或两套效果图，团队、公司拥有的手机型号又是有限的，那么其它型号的手机显示效果就需要大家脑补了，  　　需要需求方脑补一下在特别小的屏或特别大的屏上你当前效果图的显示效果。  　　二、两种效果图排列，以及对应的解决方案 　　1、效果图水平居中排列设计（较容易实现自适应） 　　由于是水平居中，则两边可以用纯色平铺，不管屏有多宽，都可以以纯色填充，这就是最最容易的自适应了。 　　篇二：微信小程序设计规范 　　概要  　　微信小程序设计的基本原则是微信设计中心针对在微信内上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态内建立友好、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。  　　一、友好礼貌  　　为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序侧提供的服务，友好地引导用户进行操作。  　　1. 重点突出  　　每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。  　　反例示意  　　此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户