设计师的前端准则

itspinkpot.com

在设计圈儿里，会coding的选手越来越多了；对设计师来说，会写代码并不是一个强制要求，不过这个技能的确会对于设计师的作品质量形成明显的影响。那这是不是意味着设计师必须得会写代码了呢？这种思想教条的思想下提出的疑问并没有问到重点。事实上，重点是设计师应当了解什么准侧，从而提高自己的设计？

Let Go of Control

放弃控制

Responsive Website Design: Everything You Need To Know

网页的本质是灵活，而灵活就意味着你必须放弃一部分控制。首先，你需要放弃精准像素这个概念：界面是流动的，所以我们的设计决策也应当有流动的思维。不会有人在Photoshop里去做排版，然后像对待海报一样，将它们以百分比像素大小去打印出来。

Avoid Too Much Variation

避免过多变化

BIFOCALS GROTESK FONT FAMILY

在设计的过程当中，元素的变化会越来越多，尤其是颜色、字体大小、间距。而当元素变化过多时，CSS就会变得臃肿，这加大了程序员开发和维护的难度。这个问题在一些大型项目中会被急剧放大，对页面的表现造成负面影响。要解决这个问题很简单：审查自己的设计，去繁化简，保证其极简性。

Keep Performance in Mind

以页面表现为核心

页面表现不仅仅是技术问题，也是设计关注的核心。把页面表现当成设计过程中的一部分。设计师在提高页面表现的层面上有很多可以做的地方如设定一个页面表现预期，考虑条件式加载，排除不必要的加载，使用SVG代替像素图片，优化图片以及鼓励你的开发团队也采用响应式图片策略。通过以页面表现为中心，教育并带领团队中的其他人也这么做，确保用户不会因为加载速度缓慢而影响体验。

Understand Source Order

了解资源顺序

desket.co

这里的资源顺序是指在页面上显示的各个元素在HTML页面上的顺序。在默认情况下，页面各元素会依照从上至下，从左至右的顺序进行排列。界面设定决定了这些元素的实际宽度。虽然，将CSS作为外部样式很容易，但在HTML内部修改元素顺序就会变得比较麻烦且伴随着一些限制。你应该在设计的过程中充分考虑这种自然的资源顺序对你的设计造成的影响。如果你需要改变某些设计，请有选择的，有充分理由的去改变。

Know Your Numbers

了解（设计）数值

datepipeline UI

看到实际项目效果与预期不符是一件令人沮丧的事情。从字体大小、元素间间距到栅格的制定，设计中充斥着各种各样你应当了然于胸的数值。如果你的开发团队正在使用一个框架，那么你就应当了解这个框架的默认样式和可改变的参数有哪些。如果你的项目是基于某个特定平台，那么你应当非常了解该平台的DPI及其他的参数。了解这些数值，你才能够更顺畅的与开发对接一些设计细节。

Let Content Determine Breakpoints

让内容决定产品形态

通过受欢迎的硬件或通用屏幕分辨率来作为产品形态的起始点就像在沙洲上建房子一样：地表在不断改变，要知道通过当前形式来决定产品从本质上来说就有很大缺陷。一个更合理的方式是通过内容本身来决定产品形态而非通过少数硬件的分辨率来决定。

Maintain Consistency

保持一致性

Designing the new Uber App

在以用户为中心的设计中，一致性是不可或缺的，它能够降低用户的使用难度。一致性保证了设计中语言的通用性，这使得开发也更加容易，因为它保证了开发case的极简程度。随时审查自己设计的一致性，简化无意义的特殊设计是非常重要的。

Communicate Early and Often

尽早且充分沟通

与开发团队合作最重要的一点就是沟通，尽早且充分沟通。积极主动，了解开发团队的需求，在做设计的过程中加强开发团队的参与，重返考虑开发团队指出的问题或提议是一个成功合作的重要组成部分。记住：开发团队与你的目标是一致的，他们也希望为用户创造一个最佳的体验环境。

原作者：Jon Yablonski

Front-End Principles for Designers

https://jonyablonski.com/2015/front-end-principles-for-designers/