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

举报
产品人卫朋 发表于 2021/10/29 22:23:32 2021/10/29
【摘要】 确定UI设计规范首先要明确页面风格: 如何确定页面风格? 1)客户 分析年龄、出身、喜好风格 2)PM a、商业目标、为什么要做这款产品? b、产品所述行业、竞争对手、竞品分析 c、相关资料:VI、LOGO、网站、PPT、线下资料 d、主要逻辑特色等 e、客户要求交付文件:psd、图片、axure 3)用户 a、目...

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

如何确定页面风格?

1)客户

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

2)PM

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

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

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

d、主要逻辑特色等

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

3)用户

a、目标人群及特点

b、用户痛点及需求

c、使用场景

规范内容:

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

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

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

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

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

图片:图片尺寸、比例

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

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

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

蒙版:不透明度

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

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

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

以分答H5为例:

1、前言

2、色彩规范

重要:

一般:

文字:

3、文字规范

文字规范示例:

4、按钮规范

5、页面布局

顶部导航和底部导航

只有底部导航

 

 

refer:

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

 

 

 

 

 

文章来源: blog.csdn.net,作者:简一商业,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/liwei16611/article/details/104582440

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200