广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

UI设计规范的理解与搭建

发布日期:2025-01-03 10:52:57 浏览次数: 1252 来源:CppTeam


什么是ui设计规范?为什么要搭建ui设计规范?相信这是很多ui新手都会面对的问题。

那么接下来,就让我们一起解开疑惑吧!


什么是UI设计规范

01

UI设计规范(User Interface DesignStandards)是指在设计用户界面时需要遵循的,能显著提高作品质量,设计效率的一系列原则和最佳实践。

换言之,就是设计合格UI作品所要遵循的最基本的原则。

根据搭建对象和使用对象的不同,用通俗的话来讲,ui设计规范可以大致分成大品牌的设计规范(品牌视觉识别系统)和个人及团队搭建的设计规范两类。

“大品牌的设计规范”通常是由大型公司等制定的,用以确保产品设计一致性的规范。(例如苹果公司的设计资源库Apple 设计资源 - Apple Developer

而这些设计规范,可以通过登录各大公司设计官网获取,或者在figma等设计软件的资源社区explore community进行获取。

对于ui设计师而言,这无疑是一份宝贵的学习资源~

示例:figma资源社区入口

 “个人及团队搭建的设计规范”则是一种根据不同需求搭建的“个性化”设计规范。这些规范能够更加灵活更新迭代,快速响应市场变化。

想要学习如何搭建这样的规范吗?

那就让我们一起看看下面的内容吧!


如何搭建UI设计规范

02


1. 分析需求,确定风格

分析项目实际设计需求,确定整体设计原则和设计风格,确保设计作品的不同部分在颜色、字体、按钮样式、图标和布局等方面保持风格一致。

为此,我们可以适当使用情绪板等工具作为风格指南。示例:



2. 定义配色

即通过前面的风格分析,搭配合适的主色,辅助色和中性色。


3. 定义字体

规范字体大小尺寸,样式,标题层级,打造清晰的层级结构 。


4. 搭建组件库

定义按不同种类按钮,对话框,输入框,导航栏,表格等的样式和状态 ,创建基础组件;

设计一套风格统一的图标,作为图标组件;

运用栅格系统等辅助整体空间布局的系统,创建布局组件;

基于团队实际需要,使用适当的方式将各种组件抽象整合在一起,搭建组件库。

示例:



5. 更新迭代

在设计规范使用过程中,收集使用反馈验证使用效果,综合团队成员使用意见,对现有设计规范适当进行更新迭代。

这是搭建一个基础的ui设计规范的基本步骤,用于加深大家对其的理解。想要搭建更加完整的,实用的ui设计规范,还需要根据具体的使用场景做不同的精进和调整。

END


优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!