微信小程序设计指南 · 小程序(下)

2016-9-27    资深UI设计者

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

视觉规范

为方便设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便开发者调用的资源。

预览地址:https://weui.io

字体规范

微信内字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt),使用场景具体如下:

微信小程序设计指南 · 小程序-IAMUE-交互设计学堂

字体颜色

微信小程序设计指南 · 小程序-IAMUE-交互设计学堂

主内容 Black 黑色,次要内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段的说明内容而且属于主要内容用 Semi 黑;

微信小程序设计指南 · 小程序-IAMUE-交互设计学堂

蓝色为链接用色,绿色为完成字样色,红色为出错用色 Press与 Disable状态分别降低透明度为20%与10%;

微信小程序设计指南 · 小程序-IAMUE-交互设计学堂

列表视觉规范

微信小程序设计指南 · 小程序-IAMUE-交互设计学堂

表单输入视觉规范

微信小程序设计指南 · 小程序-IAMUE-交互设计学堂

按钮使用原则

列表外按钮上文字标准

按钮高度为44px下使用: 颜色 #000000 / #353535 字号 18pt

  • 可点状态下文字调整透明度为60%
  • 不可点状态下文字调整透明度为30%微信小程序设计指南 · 小程序-IAMUE-交互设计学堂

列表外按钮上文字标准

按钮高度为25px下使用: 颜色 #000000 / #353535 字号 14pt

页面线性按钮上文字标准

按钮高度为35px下使用: 颜色 #09BB07 / #353535 字号 16pt

图标使用原则

微信小程序设计指南 · 小程序-IAMUE-交互设计学堂

微信小程序设计指南 · 小程序-IAMUE-交互设计学堂

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

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档