交互学堂
专注分享专业知识

风格指南和模式库

风格指南的最佳案例

当为多设备网站创造体验时,风格指南和模式库对于帮助Web团队保持理智是不可或缺的工具。

风格指南具有很多优点:建立一种通用语言,易于测试,节省时间和精力,并对返回操作提供了一个很有用的参考。 最重要的是,随着时间的推移它为网站的修改、扩展奠定了未来友好型基础。

风格指南的产生

显然,为了更好的使用风格指南,首先需有一个风格指南。 从哪里开始? 我建议在Styleguides.io上查找所有的资源、工具和示例来支持你的网站。

对于建立一个风格指南,一个好的开始是进行接口的库存以记录整个现有的接口。选择正确的工具来帮助创建风格指南也是必要的。

使其跨学科

我看到的关于风格指南最大的缺陷之一是他们通常只遵循一种创建规则。 开发人员创建代码和库来简化工作,而设计师创建接口模式库来建立一致的设计模式。

当然这些都是诺贝尔的努力,但是一个更大的,更有价值的目标是创建一个对于设计师、开发人员、项目经理、企业主,甚至第三方都有用的工具。 风格指南可以作为一个酒吧,帮助每个人在一个公司说同样的语言和构建意识/系统的升值。

让它平易近人

为了对每个人都有用,风格指南应该清楚地传达它是什么和为什么它很重要。 一些风格指南(通常developer-specific)往往是有点泥泞的或直接跳转到代码示例。 这可以恐吓其他学科,使他们相信资源并不适合他们。

如上述问题,所以应该花时间去设计一个平易近人的风格指南。

使它不可知

基于模式的设计和开发需要你的眼睛有点模糊。 创建设计重用系统时,从当前内容和名称中以一个未知的身份退一步去思考是必要的。 “旋转木马”,而不是“主页旋转木马”。 “过滤器”而不是“产品网格过滤器”。 “单选按钮组”而不是“双选选择按钮”等等。

命名模式以一种未知者的方式可减少重复,使系统更小、更高效、更便携。

使其上下文结合

模式库是伟大的,但它们往往是一个抽象的概念。 外界很多模式库并不提供模板如何及在哪适应的相关内容。 比如“水平制表符”在哪里? 检查模板模式弥补什么? 如果我更改“手风琴”模式,要打破什么?

我最喜欢的模式的实验室特性之一是它能够展示任何给定的模式的构成,并显示模式。 这可以帮助团队理解如果更改一个特定的模式,那么全球模式是如何和他们需要测试/ QA在哪里。设计人员和开发人员如有具有能够在语境和断章取义的融会贯通的能力是非常有益的。

使其易于维护

创建一个与生产环境是完全同步的风格指南可称作圣杯了。

CSS和javascript可以很容易地从一个地方迁移到另一个地方,但图案标记可能会变得具有挑战性。

我强烈推荐Ian Feather 关于孤独星球并结合他们的生产环境所创建的一个风格指南。在风格指南及底部做了些许改变,并在实际生产环境中更新,非常聪明的做法。

不幸的是很难规范这种解决方案(可用的各种后端环境使得事情困难),但我鼓励通过工具、技术和思考这个问题。 下一版本模式实验室将允许人们使用所选择的模板引擎,它可以帮助标记更接近你的后端生产代码。 另外, 每当Sass改变时这一类的模式实验室组件构建器由Evan Lovely自动更新风格指南。

向一个自动同步风格指南方向努力是很重要的,以防止资源变得过时。

使其成为工作流程的一部分

如果它是一个有用的资源,风格指南需要成为工作流程中不可或缺的一部分公司流程

我承认这一点,大部分我交付给客户的风格指南已经弃之了。当你在外面,一个公司的工作流程的风格引导具有挑战性。 真正的变化过程需要来自内部。 像大多数事情一样,真正的挑战是人们和公司问题而不是技术问题。 幸好我看到更多的团队加强板和好的风格指南作为其工作流的基石。

使它可见

只能公众知道风格指南的存在才有用。 这就是为什么我强烈建议公开你的风格指南。

大型公司几乎都存在着右手不知道左手在做什么的问题。 文档和资源通常是在内部分享或放在没用的地方。 通过你的风格引导公众,你不要仅仅看到外面的世界,而是使它让更多公司内部的人可见。 毕竟,这些都是将利用它的人。

当然也可以作为招聘工具分享你的风格指南,显示你在现代Web时代的最佳实践,并提供一个了解你的技术堆栈,风格,和工作流。

使它影响范围更大

对于网站团队,模式库可反复证明自己的价值。 所以为何不扩大范围并创建一个许多其他领域可否受益于风格指南中心呢?品牌资产设计语言语音和语调写作可以并且应该是一致的和可用的。 利用Web风格指南建立一个更广泛的对话。

使其持续

没有一个公司想每3 - 5年就要重新更换设计风格。 一个好的系统需经得起时间的考验,而建立一个坚实的风格指南可以帮助做到这一点。

这种情况并非不可变,现在建立一个设计系统可以很容易改变这些变化。 毕竟,即使有一个全新的设计,你仍然需要按钮、输入、图像类型等等。 从一开始就建立风格指南是有益的,并且随着时间的推移将变得更有价值。

 

赞(0) 打赏
未经允许不得转载:IAMUE » 风格指南和模式库

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏