产品设计规范

2016-01-23 本文已影响2415人 windtony

产品设计这个涉及的范围有点大！先来了解学习下规范吧！

一、先细分讲解下移动端App的设计规范：

标准色规范

标准色规范

我之前做过前端开发，而且一直都是移动端(微信和App)方面的，但我很少去了解颜色搭配方面的问题，看了上面的文章才发现，原来是有标准色规范！

颜色方面的，我暂时不评论，做到视觉设计方面，再较真！

标准字规范

标准字规范

这里我就有话语权了！

1，设计师做出来的图和规范的字体最小的是20px,由前端输出的结果最小的会是10px，那么问题来了？手机系统（安卓和IOS）的内核都是webkit，所以最小的字体大小是12px，不可能出现10px。所以，规范上来讲，需要前端和设计师来协调，谁是中间人？---产品经理啊！

2，这个问题怎么解决？
首先我们先确定要兼容的界面范围(即断点范围)，我们要搜集国内大部分手机的机型，分辨率，屏幕大小这些数据。下面的干货就是我做前端总结出来的！

断点分析:国内的奇葩手机厂商，够开发者们受的，特别是华为和魅族(魅族大概是384px).

/* 手机断点 */

/*min-device-width或max-device-width指的是设备整个渲染区宽度(设备的实际最大或最小宽度),

用了它可能在某些安卓机无法调用到下面的样式,因为某部分安卓机的屏幕大小不一致.*/

/*iphone4等屏幕高度480px的解决方案*/

@media only screen and (max-device-height:480px) {

}

/*iphone5以上的屏幕高度解决方案*/

@media only screen and (min-device-height:481px) {

}

@media only screen and (min-width:360px) and (max-width:374px){

/*三星大屏幕机最低宽度:Note2-Note3,S2-S4*/

}

@media only screen and (min-width:375px) and (max-width:430px) {

/*Iphone6 plus,红米等大屏幕手机*/

}

/*手机横屏:orientation:landscape*/

@media only screen and (min-width:480px) and (max-width:569px) and (orientation:landscape) {

/*小米1,1s,iphone4,4s,5,5s等屏幕横屏宽度断点*/

}

@media only screen and (min-width:570px) and (max-width:640px) and (orientation:landscape){

/*三星,红米等手机屏幕横屏宽度断点*/

}

@media only screen and (min-width:641px) and (max-width:667px) and (orientation:landscape) {

/*Iphone6横屏宽度断点*/

}

@media only screen and (min-width:736px) and (max-width:767px) and (orientation:landscape){

/*Iphone6 plus横屏宽度断点*/

}

@media all and (orientation:landscape) {

/*这里是指所有屏幕横屏时*/

}

/*平板和电脑:最低宽度768px*/

@media only screen and (min-width:768px) and (max-width: 959px) {

}

@media only screen and (min-width:960px) and (max-width:1024px) {

}

@media only screen and (min-width:1025px)and (max-width:1536px) {

}

如何让字体实现响应？随着页面的大小而变大或缩小？就在这里使用断点设置html的百分比！(在屏幕为320px的时候，html是62.5%)

/*1rem=10px,同时,浏览器或App最细的字体大小是12px*/

/*字体自适应*/

/*比如说你在320px分辨率时,设置字体大小为1.2rem时,现在在不同宽度都可以看上去一样大小实现自适应.*/

/*设计师是以iphone6为设计标准时,16px=100%,每个断点以2px递增页面最小的字体大小(6.25%=1px)*/

h1{font-size:2.8rem;}

h2{font-size:2.6rem;}

h3{font-size:2.2rem;}

@media only screen and (min-width:360px) and (max-width:374px){

/*三星大屏幕机最低宽度:note2-note3,S2-S4:14px*/

html{font-size:87.5% !important;}

}

@media only screen and (min-width:375px) and (max-width:430px) {

/*Iphone6,Iphone6plus最低宽度:16px*/

html{font-size:100% !important;}

}

/*手机横屏:最低宽度480px:18px*/

@media only screen and (min-width:480px) and (max-width:740px)and (orientation:landscape){

html{font-size:112.5% !important;}

}

/*平板电脑:最低宽度768px:20px*/

@media only screen and (min-width:768px) {

html{font-size:125% !important;}

}

我已经把前端的部分列出来了，那么剩下就是设计师该思考问题的时候了。

在不同屏幕上，字体大小该是多少？主标题，副标题，文案等字体大小分别是多少？这个一定要从视觉设计方向去思考！

下面该来探讨下页面规范：
希望你是看过关于8px原理的朋友，因为如果你了解过这方面的话，就会知道节约成本，快速兼容IOS和安卓的开发是直接以安卓的720px x 1280px的规范！有以下原因，你可以参考:

1，间距：720px除以8px可以分成90份，来横向布局，这样前端做开发的时候就会轻松很多了，间距的css复用性强。因为我发现很多设计师在计算间距大小的时候，是不会思考这个方面的。

2，有专业的设计师计算过，在IOS和安卓上的大小比较，设计师写的Px，前端开发者一般是直接除以2就可以了！

3，宽度，间距我们已经计算过了，但往往很少去思考过高度，高度是多少比较合理呢？要根据什么来判定呢？所有的高度最好的计算方式是宽度除以1.618(黄金比例)，然后我们可以继续利用这个计算方式加上断点@media来去做响应式或自适应页面兼容不同屏幕的大小。最麻烦的就是这个高度了，你设计页面的时候，只考虑到在360px屏幕大小的手机，但375px，384px，414px等这些手机的高度难度不用改变吗？宽度可以用百分比，但高度用百分比的话，你会发现并不靠谱！

好了，页面的宽度，高度，间距已经解释完毕，又返回字体大小方面的，如果你要做到最佳效果，还是可以继续思考字体大小也以8px来做倍数去实现相关效果会比较好！

同时，我做前端开发App使用的字体是华文宋体，如下：(参考腾讯团队在github上的共享)