ui界面设计规范，最新ui设计规范( 四 ) _互联网

不同于设计代码的分类逻辑(最简单的例子就是loader和spinner的命名:代码中的loader和设计中的spinner)
功能差异:设计规范中有代码无法实现的功能，或者代码增加了设计中没有考虑的功能。
你可能觉得不错，毕竟设计和代码是两个领域。至少对于文档作者来说，这种分离是相当方便的(只考虑自己的需求，管理自己的进度) 。
但真正的读者需要的是“单一的真实来源” 。如果你是一个既需要设计又需要代码的读者，你会发现自己在两个网站之间不停地切换。这两个地方都有对你有价值的内容。感觉就像打网球的时候陷入了拔河。
要点:小心设计和代码的分离。虽然一开始方便了内容作者和发布者，但之后也会有风险。这种做法也可能导致设计和工程之间的距离在潜移默化中被放大。
内容合并的两种方案:堆叠还是切换？
例如，晨星设计系统将设计和代码放在一个页面上，因此读者可以找到完全统一的名称、指南和功能描述。
一页堆叠:将设计和代码放在一页中，垂直滚动查看。
请点击进入图片说明。
堆叠布局会使页面变得冗长。当然，还有另一种方法可以使用tab来切换内容。
切换页面时:将设计和代码放在一个页面中，通过tab切换内容。
请点击进入图片说明。
要点:将设计与代码混合是可能的。可以根据自己的需求选择以上两种布局方式。
按类型排列和分组内容。
无论选择哪种布局方式，文档内容的模块结构和顺序都应该一致:
简介
情况
设计参考
代码参考
其实只要把“案例”放在读者一进来就能看到的地方，设计和代码参考都能一键到达，就是好的设计。以下是业内几种典型的模式:
左图:在ibm carbon模式下:hudl的统一系统模式；右图:闪电设计系统模式
请点击进入图片说明。
Ibm carbon认为应该先显示代码，交互用法和样式分别放在其他选项卡中。 Hudl的统一体系颠倒了顺序，设计优先于代码。 Salesforce的lightning设计系统将代码和组件用例放在标签上方，开发者指南的标签是默认选中的，而最后两个标签奇怪地留为空白。
外卖:开头把介绍和案例放在最重要的位置，但是后面的模块没有独特的方案。你需要自己做出符合自己团队情况的判断。
如果页面很长，为读者提供定位导航。
你的文档页面越长，就越需要给读者一个清晰的认识，让他们知道这个页面会包含哪些内容，目前在哪里。垂直定位导航条是一个很好的方案:它始终存在于页面的右侧，滚动时同步跟踪位置，可以包含副标题。
晨星设计系统在文档页面右侧设计了两级导航栏。
请点击进入图片说明。
外卖:无论选择哪种形式，最重要的是保持整个系统的逻辑一致，符合读者的预期和心智模型。
展示设计？显示代码？还是全部展示？
通过将设计与代码相结合，读者将只对一个方面感兴趣，他们会给出自己的观点:
设计师可能会问:我可以隐藏这些代码案例和指南吗？
工程师可能会问:我可以隐藏这些与设计规范相关的文字吗？
考虑添加一个选项或按钮来隐藏设计/代码内容。例如:
仅设计:隐藏代码指南、代码片段、属性表等。

特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。