简述:腾讯移动端页面设计规范 对你有启发吗?

2018-4-9    蓝蓝

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

小编今天分享一下腾讯移动端页面设计规范,看看会对你有什么启发?

简述:腾讯移动端页面设计规范 对你有启发吗?

直接进入主题

首屏范围:750X1218像素

移动端的首屏尤为重要,很多时候用户只关注到首屏的内容。并且很多移动端页面采用分屏浏览的的形式,这种形式让用户更集中注意力在一个画面中。首屏范围的设定选取的主流机型IPHONE6的分辨率大小,安全宽高为向下兼容到iphone5s的尺寸。

首屏范围的由来

市面上的机型超过65%的长宽比为178:100,如果按照设计app的思路,只需要选取一个中间设备ip6尺寸来适配即可,但我们发现微信/手Q的浏览器头部并不是按照等比来缩放的,所以如果设计稿按照iP6尺寸来等比例放大到iP6 plus上,会出现留有一条黑边。

简述:腾讯移动端页面设计规范 对你有启发吗?

iphone5/6的头部为128高度; 而iphone6 plus的高度为192导致浏览框的比例不完全统一

适配剩下35%尺寸

让设计稿在178:100的比例中显示最佳状态,在其他尺寸尽量信息完整

页面排版

简述:腾讯移动端页面设计规范 对你有启发吗?

标题文字

1、主标题建议在7个字内,一行最多不超过7字,标题一般是经过设计的字体

2、副标题文字需要能够说明详细活动信息,字体建议在24-40号之间

3、标题文字超过7个字的情况下,文字折行处理,并且加强重要词语

正文标题与内容

标题:字号48,使用粗体

正文:字号30点,使用常规体

引文和次要信息:字号24

段首无需空格,左对齐即可

简述:腾讯移动端页面设计规范 对你有启发吗?

简述:腾讯移动端页面设计规范 对你有启发吗?

文章列表的字号与间距

文章的标题不宜过长,建议控制在18字内

文章列表的间距需不得小于90px

字号建议用26~30号

页面组件

按钮

1、页面只有一个按钮时候,按钮居中对齐,按钮高度需要大于80px

2、如果按钮的重要级相当,建议用左右布局;不一致则建议用上下布局

简述:腾讯移动端页面设计规范 对你有启发吗?

页签与导航

简述:腾讯移动端页面设计规范 对你有启发吗?

1、移动端页面页签最多5个,页签字数一般2个,支持左右滑动切换页签

2、页签整体宽度与对应的内容宽度对齐,高度大于90px;字体大于30号,使用粗体

简述:腾讯移动端页面设计规范 对你有启发吗?

头部条的高度建议120px,icon的大小为100x100px

首页导航条:标签最多不超过三个

图标

热区大小 最小面积:44x44像素

图形大小 最小面积:30x30像素

游戏下载

建议将LOGO放置于页面的右上角,按钮大小:170x64像素左右

简述:腾讯移动端页面设计规范 对你有启发吗?

看完这些,是否对你有所启发呢?

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档