火星网校
说说UI设计规范的那些事儿
发布时间：2024-03-12 14:06:51 浏览量：136次
设计规范对于设计师来说并不陌生，日常工作中也经常使用。统一的设计规范不仅有利于设计师提升效率，同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。
什么是UI设计规范
通俗来说，设计规范是围绕在某种风格或者大型设计项目下形成可视化、数据化的标准，针对相对独立的体系建立的统一遵守条款。
UI即User Interface（用户界面），UI设计规范是基于用户界面产品而制定的一套可复用设计库，也是为了方便设计师、开发和测试人员共同协作，而遵循的规律和法则。
产品要有可遵循的标准来规范视觉呈现和元素定义，保证日后的迭代可以延续产品所传递的思想和价值，能最大限度保证产品的一致性。
为什么要做设计规范
统一产品风格
对于同一个产品的多个页面来说，统一的设计规范能够使得产品视觉风格保持一致。同时可以保障良好的用户体验。
一个大型项目的视觉稿，往往会有几十个甚至是上百个页面。哪怕自己一手包办全部页面，恐怕也很难统一各个控件的样式，因为在设计过程中很容易产生细微的出入，时间长了也会忘记部分参数，导致每个控件都可能会有细微的差别。
更何况多个设计师共同合作，如果没有及时制定规范，每个人自由发挥，同一个控件便会出现不同的样式。
例：同一个产品中，设计师A的按钮是2px圆角，设计师B的按钮做成了8px，同时设计师C页面的按钮又做成了全圆角。
提高开发效率、解决代码冗余问题
通过设计规范，程序员可以了解到哪些控件是可以一次性写好并能重复调用，同时在规范的辅助下，程序员在搭建全局共用元素时规则更会加清晰。
例如icon、按钮、行间距、字体大小、色值等等。这样既可以提高开发效率，又可以减少客户端安装包的大小。
帮助新人快速上手
当新人刚加入团队时，对产品的风格和基调可能不太熟悉或者理解不透，可能无法快速进入设计工作，这时设计规范就可以帮他们快速上手，提高工作效率，并且也能保持产品风格和控件的统一性。
如何制定UI设计规范
第1步：明确设计原则
设计师要清楚的知道，产品需要传递给用户的设计特征和原则是什么，以及整个平台的约束是什么。
在 facebook 的设计语言原则里面，强调了他们的设计价值观：通用、人性、干净、统一、有用、快速、透明，在 facebook 所有设计中，都将这些要点作为他们设计的指导准则。
苹果的设计规范包括：完整性、一致性、直接操作、反馈、隐喻、用户控制等。
设计语言系统可以让产品在不同终端、不同场景中的表现保持一致性，也有机会通过植入品牌基因的方式形成视觉锤，提升产品的识别度以及消费者对品牌的认知。
因此，我们在建立设计规范的第一步，是根据公司战略布局，结合此产品的终极目标和产品定位，建立设计准则，明确设计原则，以保证整个设计体系的高效率和一致性，并以此来检验设计的标准性，为具体的设计问题提供解决方案。
第2步：制定基础规范
任何一款产品都需要制定基础规范来保持整体的一致性。基础规范包含栅格系统、色彩、字体等最基础的内容，此次以移动端为例来进行说明：
栅格系统
建立横向栅格系统，常用的是12栅格，12栅格比较好的地方能够同时被2、3、4整除。因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化，可以根据需求设置6、4甚至2栅格等。
还有一种是网格系统，制定最小的设计单位，界面中所有间距必须采用最小单位的倍数，包括模块之间的间距、文本之间的间距等。比如制定最小单位为4，那么排版时横向和纵向的间距都是4的倍数，比如8，12，24。根据最小单位制定间距，包括模块之间间距、文本之间间距等。
色彩
色彩规范要标明色彩的色值和使用范围，包含主色、辅助色、状态用色、文本色等。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
