没有样式库，想要团队设计师搭建组件同频有点难！！！

确定产品设计中的最小原子，为团队构建组件认知达成共识提供基础，护送页面设计元素细节的一致性。 本文主要阐述了风格是什么，如何构建风格库和风格库的应用。在项目中提前定义风格库将有助于团队设计师在同一频道构建组件认知。我希望它能帮助你理解风格库的知识！ 1.什么是风格？ 风格是产品设计中最小的原子，决定了一套可视化设计组件库最基本的形式，主要包括颜色、文字、 边角、阴影 、图标 、线条。 2.如何构建样式库？ 2.1、确定颜色 颜色是指界面设计中使用的颜色系统，颜色主要从以下三个方面确定：品牌颜色、中性颜色和功能颜色。为避免干扰UI学生在设计中的色彩决策，通常在交互设计输出交互稿时使用中性色。 2.1.1、品牌色 品牌色彩是最直观的视觉元素之一，体现了产品觉元素之一。 应用场景包括:关键行动点(按钮)、操作状态(进度)、重要信息亮(价格)、图形化(图标)等场景。品牌色值UI以学生定义为准，通常用中性色代替交互设计。 2.1.2、中性色 中性色主要用于界面的文本部分，除了背景、边框、分割线等场景外也很常见。考虑到深色背景和浅色背景的差异，中性色在着陆时是通过透明度实现的。主要原因是透明度实现的颜色可以与背景颜色叠加，保持颜色调性；颜色值实现的结果会有缺陷（如下图所示）。 透明度色值 2.1.3、功能色 功能颜色是界面设计中的一种特殊场景颜色，主要是成功、失败、警告、链接等。功能颜色的选择需要遵循用户对颜色、成功（绿色）、失败（红色）、警告（黄色）、链接（蓝色）的基本认知。具体的颜色值为UI以学生定义为准，通常用于交互设计 “中性色 图标” 替代。 2.2、确定字体 字体是界面设计中最基本的组成部分之一。通过定义字体在设计中的使用规则，平衡阅读的舒适性。确定字体主要从以下四个方面开始：字体家族、主字体、阶、行高和重量。 2.2.1、字体家族 系统默认界面字体优先于字体家族，为不同的环境显示条件提供了一套可读的备用字体。系统默认字体可以在交互设计中，MAC默认使用系统字体 苹方_简，Windows默认使用系统字体微软雅黑。 2.2.2、主字体 基于计算机显示器的阅读距离(50) cm）， 12 显示器上的物理大小对用户的阅读体验不友好， 14 它的大小不仅能满足用户的可读性，而且更舒适、更清晰，还能保证界面的层次感。当大于时 14 表格信息的呈现会受到一定程度的影响，比如因为文字太大而无法容纳更多的信息。 2.2.三、字阶与行高 字阶是指一系列不同尺寸的定期字体，打开页面的信息水平。行高是指包裹在字体外的无形盒子，提供上下文之间的呼吸空间。 2.2.4、字重 在大多数情况下，出现 regular 以及 medium 两种字体重量，Regular 主要用于文本和辅助文本，Medium 主要用于标题类，突出层次关系，使信息更清晰，对应代码 500 和 400。考虑到数字和西文字体本身面积小，建议使用 Semibold，使中西文混排时更加合适，对应代码 600。 2.3、确定边角 边角用与角两侧相切的弧代替原来的角。在界面设计中，适当的边角不仅能反映产品的色调，还能提供更友好的视觉体验。确定边角主要从矩形元素、浮出控件、条形元素三个方面入手。 2.4、确定阴影 阴影来自于现实生活中反映物体之间距离的物理现象。在界面中，阴影被用来塑造空间层次关系，以便用户能够更好地理解元素之间的高距离和层次关系。确定阴影主要从以下三个方面开始：阴影类型、阴影类型和阴影值。 2.4.1、阴影类型 阴影由两个不同阶层的平面产生，大小由两者之间的高度决定。阴影类型在界面设计中分为 4 一级：无阴影（S0）、小阴影 （S1）、中阴影（S2）、大阴影（S3 ）。 S0：无投影 物体靠近地面，投影与物体完全重叠，阴影值不在界面中定义。如：输入框等； S1：小投影 物体处于低水平。此时，物体被操作（悬架、点击等）触发为悬架状态。当操作完成或取消时，悬架状态反馈也消失，物体返回到原始水平，如：卡 hover、按钮 等； S2：中投影 物体位于中间层。此时，物体与基准面之间的关系是扩展和跟随。物体由地面上的元素产生，并将跟随元素水平的移动，如下拉选项框、气泡提示、拖动排序等。 S3：大投影 物体位于高层，与对话框等其他层次无关。 2.4.2、阴影方向 阴影的方向取决于光源和物体的相对位置。假设光源的高度保持不变，光源与物体的距离与物体与阴影的距离成正比。光源越远，阴影就越远。阴影的方向通常用于界面 X, Y 坐标轴表示。 2.4.3、阴影值 在不同的高度上，阴影的颜色、模糊和面积是不同的。物体离地面越远，阴影颜色越浅，模糊度越高，面积越大；相反，颜色越深，模糊度越低，面积越小；阴影是模拟现实世界的反馈。为了更符合现实阴影，采用了三层阴影的表达方式，使阴影更柔和，更符合现实状态。 2.5、确定图标 图标是图形界面的重要组成部分，可以帮助用户理解界面信息，给用户正确友好的指导。图标的确定主要从以下两个方面开始：图标的大小和选择合适的图标。 2.5.1、图标尺寸 在界面设计中，为了避免图标数量过多，根据斐波那契数列 1、2、3、8、13、21、34… 定义图标的主尺寸 : 8px(最小尺寸)，16px、24px、40px、64px(最大尺寸。 2.5.2.选择合适的图标 在选择合适的图标时，为了保持图标的统一，我们需要考虑图标的整体视觉区域是否基本一致，点、线、圆角和三角形是否基本一致。 https://www.iconfont.cn 您可以获得免费图标。 2.6、确定线条 线主要用于管理和分隔列表和页面布局中的内容，以产生更好的视觉效果和空间感。线条的确定主要从以下两个方面开始：线条的风格和厚度。 2.6.1、线的样式 在界面设计中，线条主要分为实线和虚线两类，但虚线的风格变化更加多样化，给人不同的感觉。为了统一整个界面，线条的风格不应超过3种。 2.6.2、线的粗细 界面设计中使用的线条越粗，页面中的视觉感知就越强。线条厚度主要分为三个层次： 细线条（1px）、中线条（2PX）、粗线条（3px）。 3.风格库的应用 样式库的应用主要分为两部分，1)根据设置 “颜色” 、“文字” 、 “边角” 、 “阴影” 、 “图标” 构线搭建组件库；2)调整样式库的参数，快速生成新的组件库。 3.1、搭建组件 根据设定 “颜色” 、“文字” 、 “边角” 、 “阴影” 、 “图标” 构件库与线搭建，下图以按钮为例： 3.2.快速生成新的组件库 从一个项目切换到另一个项目，新项目的组件库可以通过调整样式参数快速生成。以下图为例： 「总结」 样式库在项目中 “颜色” 、“文字” 、 “边角” 、 “阴影” 、 “图标” 和 “线条” 可以通过Axure组件样式管理设置参数定义，团队设计师可以通过直接设置样式有效地构建统一的组件。通过调整样式库中设置的参数，可以快速生成新的组件库，以适应不同的项目。 假如你在设计 0-1 希望三部曲《框架布局》、《格栅系统》、《响应式》的布局能对你有所帮助！ 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。