开发人员的 7 个设计原则

你说过这样的话吗？然后又发生过那样的事吗？

是的，我也是。哈哈

这里有 7 个有用的提示。

1/ 使用相对单位和百分比宽度

使用 em、rem 和百分比可以帮助您的 CSS 样式跨屏幕尺寸流动。

例如：如果你需要更改断点，你的宽度会在整个元素范围内生效。并且，只需更改元素的字体大小，你的字体大小也会随之改变。

2/ 内容（而非设备宽度）决定断点

您不希望陷入这样的循环：新设备、新媒体查询、新设备、新媒体查询......

为了防止这种情况发生，您可以这样做：

根据内容的自然特质来设置断点。随着屏幕尺寸的增加，选择在新布局中更合适的位置

轰！断点。

3/ 使用最小宽度媒体查询

使用最小宽度可确保加载移动样式，而不会混入桌面样式。

这可以显著改善移动体验和您网站的 SEO。

4/ 从列出功能开始，而不是设计布局。

如果您正在建立一个廉价航班网站，请不要问：“这个商品应该放在左边还是右边？”

而是问：“我们的用户需要什么？”

写出日期选择器、输入字段、搜索按钮等项目，然后将它们拼凑在一起。

5/ 遵循经验法则

75% 的用户使用拇指操作移动设备。请将关键操作放在拇指触手可及的地方。

💚：易于访问 = 最重要的元素
💛：小范围覆盖 = 次要元素
🧡：需要付出努力 = 用户始终会注意到

6/ 草图、设计、代码。

永远先画草图。注意草图的粗略程度，细节被省略了。这为设计工具的诠释提供了空间。

但它也很具体，它如何运作，需要构建什么，不需要构建什么，都非常清晰。

7/ LT浏览器

LT 浏览器专门用于测试网站响应能力。

✅ +45 种屏幕尺寸可供测试
✅ 内置调试​​开发工具
✅ 网络限制测试
✅ 本地测试
✅ Google Lighthouse 性能报告

我怎么现在才听说这个？

非常感谢这里引用的人们。

Luke Wroblewski：《移动优先》书籍
@adamwathan Steve Schoger：《RefactoringUI》
@chriscoyier：《CSS Tricks》
@dhh，@jasonfried：《Shape Up》书籍

就是这样！

--

如果您觉得这篇文章有帮助，请在 Twitter 上点赞这条推文让我知道。💖🙏