规范设计准则在设计师的日常工作中具有不可或缺的重要性。统一的规范不仅助力设计师提升工作效率,还为产品、开发、运营、测试等相关人员提供良好的产品体验认知基础。
通俗来讲,设计规范是在特定风格或大型设计项目中形成的一种标准化、数据化的视觉标准,旨在为相对独立的体系建立统一的执行条款。
UI,即User Interface(用户界面),其设计规范是为用户界面产品制定的一套可复用设计库,旨在促进设计师、开发及测试人员的协同工作,遵循一定的规律和原则。
产品需遵循一套标准来规范其视觉呈现和元素定义,以保证日后迭代能够延续产品的核心思想和价值,从而实现产品的一致性。
对于同一产品的多个页面,统一的设计规范能确保产品视觉风格的连贯性,同时保障良好的用户体验。
在大型项目的视觉稿中,可能包含几十甚至上百个页面。即使由同一设计师全权负责,也难以确保各个控件样式的完全统一,因为在设计过程中细微的差异会随时间累积。当多个设计师合作时,若没有及时制定规范,各自为政,同一控件就可能出现多种样式。
例如,在同一个产品中,设计师A的按钮采用2px圆角,设计师B则选择8px圆角,而设计师C的按钮又是全圆角。
通过设计规范,程序员能明确哪些控件可一次性编写并重复使用。规范的辅助使得全局共用元素的搭建更加清晰有序。
例如icon、按钮、行间距、字体大小及色值等。这不仅能提高开发效率,还能减小客户端安装包的大小。
当新成员加入团队时,设计规范能助其快速熟悉并适应产品风格和基调,从而提高工作效率并保持产品的一致性。
设计师需清晰理解产品要传达的设计特征和原则,以及整个平台的约束。
如的设计原则强调通用性、人性化、简洁性等价值。苹果的设计规范则包括完整性、一致性等要点。
设计语言系统能使产品在不同的终端和场景中保持一致的表现,并有机会通过植入品牌基因形成独特的视觉标识,提升产品的辨识度和消费者对品牌的认知。
在建立设计规范的首要步骤中,我们需根据公司战略布局和产品的终极目标及定位来设定设计准则和原则。这不仅能保证设计体系的高效和一致性,还能为具体的设计问题提供解决方案。
任何产品的基础规范都是保持整体一致性的关键。基础规范涵盖栅格系统、色彩、字体等基础元素。以移动端为例,具体说明如下:
栅格系统
建立横向栅格系统时,常采用12栅格。2、3、4能整除12的数值安排具有灵活性。如产品轻量化,可根据需求选择6、4甚至2栅格等。还有一种是网格系统,它规定了最小的设计单位及间距标准。
色彩规范
需明确标注色彩的色值和使用范围,包括主色、辅助色、状态色及文本色等。若涉及渐变色,需标明色值和角度。对于日间和夜间模式,需分别注明对应色值。
字体规范
需整理并说明各个场景下的字号选择。清晰的说明能让其他设计师理解何种场景下使用何种字号。还需标明各个字号的行高。
控件是由色彩、文字、图形等组成的小元素。遵循基础规范后还有图标、按钮、标签、分页器等。以图标为例,为确保不同图标的视觉大小一致,需制作图标绘制模板和制作说明。
按钮
按钮根据功能和重要性分为不同尺寸和类型。需明确何种场景下使用哪种按钮。其颜色、字体等需遵循产品的色彩及字体规范。按钮通常有常规状态、点击状态及失效状态等,部分情况下还可能存在加载状态。
组件由多个控件组成,因此需在基础规范和控件规范完善的基础上制定组件规范。组件通常包括导航、表单、弹窗等。以导航为例,顶部导航栏的标题需考虑文字极限值,图标位置及间距需考虑最小可点击区域等。