确定UI设计规范首先要明确页面风格:

如何确定页面风格?

1)客户

分析年龄、出身、喜好风格

2)PM

a、商业目标、为什么要做这款产品?

b、产品所述行业、竞争对手、竞品分析

c、相关资料:VI、LOGO、网站、PPT、线下资料

d、主要逻辑特色等

e、客户要求交付文件:psd、图片、axure

3)用户

a、目标人群及特点

b、用户痛点及需求

c、使用场景

【UI设计】产品设计之UI设计规范_物联网

规范内容:

标准色:样式、色值、应用场景、备注

字体:中英文字体名称、样式、字重、字号、应用场景、备注

图标:尺寸范围、触控范围、颜色

间距:列表项间距、图文间距、留白、文字与文字间距、行距

列表:文章列表、标签列表

图片:图片尺寸、比例

头像:普通尺寸、特殊尺寸、应用场景

形状:描边、线分割、矩形分割线、矩形、圆形、椭圆形、色值、尺寸大小、圆角大小、阴影

背景:背景多预留一些,避免拉伸、压缩

蒙版:不透明度

按钮:尺寸大小、颜色、状态(不可点击、可点击、按下时)

表单:输入控件、大小、文字、placeholder、验证提示

弹框:默认操作提示框、默认错误/警告/成功提示

【UI设计】产品设计之UI设计规范_产品设计_02

以分答H5为例:

1、前言

【UI设计】产品设计之UI设计规范_物联网_03

2、色彩规范

重要:

【UI设计】产品设计之UI设计规范_物联网_04

一般:

【UI设计】产品设计之UI设计规范_IoT产品之原型及UI设计_05

文字:

【UI设计】产品设计之UI设计规范_产品设计_06

3、文字规范

【UI设计】产品设计之UI设计规范_IoT产品之原型及UI设计_07

文字规范示例:

【UI设计】产品设计之UI设计规范_IOT_08

【UI设计】产品设计之UI设计规范_IoT产品之原型及UI设计_09

4、按钮规范

【UI设计】产品设计之UI设计规范_IOT_10

【UI设计】产品设计之UI设计规范_IOT_11

【UI设计】产品设计之UI设计规范_物联网_12

【UI设计】产品设计之UI设计规范_IOT_13

5、页面布局

顶部导航和底部导航

【UI设计】产品设计之UI设计规范_物联网_14

只有底部导航

【UI设计】产品设计之UI设计规范_物联网_15

 

 

refer:

https://huaban.com/pins/799714841/