《微信ui设计规范.doc》由会员分享，可在线阅读，更多相关《微信ui设计规范.doc（12页珍藏版）》请在金锄头文库上搜索。
1、微信ui设计规范篇一：HTML5微信页面设计我保证你一分钟就能看完这篇文章! 真的.角色解释：需求方：有钱大爷设计人员：美工殿下前端工程师：前端文艺青年一个HTML5页面从提出到完成上线的流程：1、需求方、设计人员、H5实现人员三方共同讨论实现方案2、设计人员出设计图3、H5人员按设计图出H5页面4、需求方评估已实现的H5页面后给予反馈5、设计人员与H5人员根据反馈进行适当调整6、发布推广如何提出一个合理的微信HTML5页面设计诉求？合理分析诉求与公司团队拥有的资源：1、需求完成时间；时间给的越多，项目做的就越扎实，优化的也更好，就像造一座桥，三个星期完工，保质10年，1年完工，保质100年2
2、、现有技术能力；根据人员的能力选用合适的技术，以及设计对应能实现的视觉特效3、工作人员配备；有些狂拽酷炫屌炸天的特效需要专业的游戏或影视人员参与制作4、领导B格不解释5、公司B格不解释好吧以上都是枯燥的叙述，后面会有可爱的喵星人出现，所以往下看吧。三方需要达成的共识与常识一、手机屏宽度高度不一由于手机屏大小不一，所以H5页面所承载的设计图相应的宽高也会不一样，是否需要设计多套不同的设计图以适应不同的手机屏？最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸，但这样需要大量的人力与时间，而且维护成本太高，不符合大部分团队的实际情况。典型的手机屏尺寸如：导航栏+iphone状态栏高度： 64px
3、iphone4屏幕总宽度: 320px屏幕总高度: 480px微信网页可视高度: 416pxiphone5屏幕总宽度: 320px屏幕总高度: 568px微信网页可视高度: 504pxiphone6屏幕总宽度: 375px屏幕总高度: 667px微信内网页可视高度: 603pxiphone6 plus屏幕总宽度: 414px屏幕总高度: 736px微信网页可视高度: 672pxsamsung galaxy note3 （三丧手机开发者的黑洞。）导航栏+Android状态栏高度： 73px屏幕总宽度: 360px屏幕总高度: 640px微信网页可视高度: 567px仅iphone就4个尺寸了，更
4、别说Android阵营的手机了特别注意：以上不是手机的分辨率单位，而是普通电脑上浏览网页时的像素，这和客户端Native制作有很大的区别。比如iphone4,宽度就是320px像素，高度为480px，如果以实际分辨率来设计即640*960来排列设计，实际在H5页面显示时会显得很小。一般我们都是以用自适应的解决方案，以一套或两套效果图适应大部分的屏目，放弃极端屏或对其优雅降级，牺牲一些效果正因为只有一套或两套效果图，团队、公司拥有的手机型号又是有限的，那么其它型号的手机显示效果就需要大家脑补了。需要需求方脑补一下在特别小的屏或特别大的屏上你当前效果图的显示效果。二、两种效果图排列，以及对应的解决
5、方案1、效果图水平居中排列设计（较容易实现自适应）由于是水平居中，则两边可以用纯色平铺，不管屏有多宽，都可以以纯色填充，这就是最最容易的自适应了。篇二：微信小程序设计规范概要微信小程序设计的基本原则是微信设计中心针对在微信内上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态内建立友好、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。一、友好礼貌为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序侧提供的服务，友好地引导用户进行
6、操作。1. 重点突出每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。反例示意此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。纠正示意去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。反例示意操作没有主次，让用户无从选择纠正示意首先要避免并列过多操作让用户选额，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。2. 流程明确为了让用户顺畅地使用页面，在用
7、户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。反例示意用户本打算进行搜索，在进入页面时却被突如其来的抽奖弹窗所打断；对于抽奖没有兴趣的用户是非常不友好的干扰，平添一份对开发团队的恼怒； 而即便有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。二、清晰明确作为一个负责任的开发者，一旦用户进入我们的小程序页面，就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全的愉悦的使用体验。1. 导航明确，来去自如导航是确保用户在网页中浏览跳转时不
8、迷路的最关键因素。导航需要告诉用户，我在哪，我可以去哪，如何回去等问题。首先在微信系统内的所有小程序的全部页面，均会自带微信提供的导航栏，统一解决我在哪，如何回去的问题。在微信层级导航保持体验一致，有益用户在微信内形成较为统一的体验和交互认知，无需在各小程序和微信切换中新增学习成本或使用习惯。微信导航栏微信导航栏，直接继承于客户端，除导航栏颜色之外，开发者无需亦不可以对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系，让导航系统能够以合理的方式工作。微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色，在iOS和Android展示
9、有所不同，如下图所示： 导航区（iOS）导航区通常只有一个操作，即返回上一级界面。开发者可定义其内容，不可对样式进行修改导航区（Android）通常情况下，系统导航左侧唯一的操作为“离开小程序，回到微信，程序后台运行”。篇三：UI设计基本规范UI设计基本规范注：此处规范针对ios手机端应用，其他平台如pc,android,wp等未必适用。一字体:中文：黑体-简英文:：Helvetica字号：在PS中使用时，最小为24-28pt，一般最小标准为28pt，个别可小至24pt。 （注：由于Retina屏幕的关系，在将数据提交给工程师时，需要将数据除以二，如文字字号为28pt，则告诉工程师14pt，实
10、际显示大小也是14pt。因此在此处要求，设计时尽量使你的各项数据均是偶数。）颜色：一般不用纯黑色。二尺寸屏幕尺寸：iPhone4s及4：640*960px，326ppi，物理尺寸为英寸（屏幕左上角到右下角的距离），长宽比iPhone5及5c、5s：640*1136px，326ppi，物理尺寸为4英寸，长宽比 iPhone6：750*1334px，326ppi，物理尺寸为英寸，长宽比1. iPhone6 plus：1080*1920px，401ppi，物理尺寸为英寸，长宽比 按钮尺寸可触碰范围（可触碰范围不一定是按钮看起来的大小）最小为88*88px（实际上显示大小为44px, 若仔细观察，io
11、s7里面很多尺寸都是44或者44的倍数，如“设置”下的列表（Tableviews）每一行的高度一般都是44px.）各部件尺寸状态栏（显示电量信号那一栏）：iPhone4-5s：640*40px，iPhone6以上则等比放大导航栏（抬头写app名字）：iPhone4-5s：640*88px，iPhone6以上则等比放大（此处很多人会有疑惑，若导航栏为88px，而按钮最小也是88px，那如果按钮在导航栏上，如返回键等，那岂不是一样大小？这样的解决方法是：按钮大小规定的88px，是可触发的范围大小，按钮在设计时，为了更美观，可以设计小一些，但是可以让后台工程师把周围的范围也纳入可触发的范围。）标签栏
12、：如ios版手机QQ和微信底部的切换标签。iPhone4-5s：大小为640*98px，iPhone6以上则等比放大三ios6和ios7、8设计上的差别细线设计滤镜，毛玻璃，半透明导航栏和状态栏的合二为一四小图标的使用小图标的使用鼓励大家自己设计，但是要风格统一。也可以从网上下载，稍作改动加以使用。 设计可用ai或ps，但我个人比较喜欢ps。教程如下：五app图标App图标的尺寸需要5个，以适应于不同的应用场景。具体参数见下图。在上传图标到苹果app store时，实际上是不需要自己画圆角的，苹果公司会自动加上圆角遮罩。六输出输出就是切图，一般切图都是由设计师完成的，有的公司由前端完成。输出方
13、法：选好要输出的图层，右键，转换成智能对象双击智能对象图层的小图标，进入新建图层选择文件输出为web所用格式，请保证你的弹出框右上角预设中显示的是PNG-24，点击储存命名时，记得命名格式是”某某某页面_某某部件”，如主页面的一个返回按钮，就是“main_back”，请确保你的命名不是”main_back”（具体的命名方式有很多种，所以请务必在输出前就跟工程师沟通协定好）七数据提供给工程师需要提供的数据包括：页面效果图、坐标、尺寸、相对位置等，当然还要包括你当场最准确到位的沟通。确保每个数字都要除以二，并且提前告知工程师是否已经除以二了。坐标轴的位置通常以页面左上角（一般指状态栏左上角，有时候
14、是从导航左上角开始算，请务必和工程师沟通好）为原点（0,0），以横轴宽为X，以纵轴即高为Y。颜色的十六进制代码值。有时候工程师也需要RGB。示例：八工作流程老板or产品提出需求产品画出原型图（其实这一步是交互设计师完成的）将需求和原型图交付视觉设计师视觉设计师完成后反馈产品和老板修改修改完成后提交工程师提交工程师的部分应包含：效果图+详细坐标数据+正确命名的切图在这个过程中，沟通非常重要。要养成的习惯：命名、编组、双倍数。前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。做的每个图层都要给他个名字，一来你自己好辨认，二来你切图的时候也免去了重新命名的麻烦。九文档管理文档管理是一门非常高深和必要的学问。请务必确保你们的手在不断的ctrl+s，要准备一个移动硬盘和一个网盘（公司有自己的网盘：gzdingyi, 20XXdingyi）。请务必确保你的每一份文件都有源文件。十二关于IOS8的适配问题
