产品|概念梳理｜恕我直言不懂这些没法做系统( 二 ) 变革|许科敏|江苏省政府|两化

3. 基础基础可以理解为是设计表现层当中最小颗粒度的合集，简单地理解就是将一页中的元素不断地拆解，拆解到无法拆解的状态之后，剩下的元素就是“基础”，比如字体、颜色、图标、布局（间距）、声音、动效等等。

文章插图
“基础”的搭建马虎不得，因为他是最小的构件，应该用最科学的方法来设计。例如在搭配颜色这个元素时，我们可以采用拓展公式计算方法、手工叠加、公式计算、色彩曲线工具等方法来设定精确的色值。
https://colorbox.io/
https://lyft-colorbox.herokuapp.com/

文章插图
4. 组件组件也称之为组件库，组件库是身为设计师接触最多的事物了，也是设计系统的灵魂所在了，主要可以分为设计组件库和代码组件库两这两个大部分。

文章插图
设计组件库相信大家都不会陌生，这里我推荐两个工具网站semantic-ui.和tetrisly，尤其是tetrisly它包含sketch与figma的组件使用很方便。
https://semantic-ui.com/
https://tetrisly.com/figma/

文章插图
代码组件库主要是前端开发人员使用，会有一些代码规范的说明。这里我推荐QMUI工具和Bit.dev两款工具。
https://qmuiteam.com/web/page/index.html
https://bit.dev/

文章插图
重点推荐Bit.dev，这是一种由第三方组件构建的平台，它有一个叫做组件共享的功能，即当鼠标悬停在一个组件上时，会产生高亮状态，以提示该组件的名称、版本和父区域。

文章插图
假设鼠标点击按钮此组件时，还将跳转到相关联页中显示这些按钮组件的范围，有兴趣的同学可以体验一下。

文章插图
一套完整的设计组件库一般是由公共组件和业务组件构成的，它和设计系统一样，只是作为参考的规范使用，组件库也是要根据业务进行微调整，需要不断进行优化的，所以并不是一尘不变的。
随着业务和产品的数量增多，公共组件库的数量也一定会增加，因此搭建组件库时候有两个问题特别值得注意：

注意点一：在组件库搭建时候尤其要注意公共组件库的使用效率问题，如果使用率较低的组件总是出现，那么公共组件库就会很臃肿，所以要及时去除不通用的组件保留常用组件。
注意点二：公共和业务组件并不是越多越好，盲目地追求“大而全”一定是不可取的，要时刻提醒自己“合适的组件库要比全面的组件库更为重要”。

文章插图
5. 模式（规范）模式这个词大家刚一听到可以会有点陌生，其实早期在《1975 NASA Graphics Standards Manual》手册中模式这一概念产生。现在也常被人称呼为感知模式或者是设计规范。
对此大家不必了解得那么深入，一句话就可以概括了“为了避免重复造轮子，就搞了几个通用的流程，以保证产品开发流程的效能问题”这里的模式可以被简单地理解为习惯使用的解决方案，即设计团队给用户在我们的产品中完成一系列操作的使用说明书，它可以是一个模型或者用户的习惯。

文章插图
比方说，发送语音时我们都要按住按钮，进行语音记录，如果我们对产品有类似的语音对话功能，可以直接使用微信的交互逻辑，不用自己发明新的交互逻辑，这样做的好处就是降低用户的学习成本。看一下华为鸿蒙设计系统，就会有关于交互手势规范说明的注释。