设计出色响应式网站的十个技巧

落日映苍穹つ 2022-08-05 00:42 181阅读 0赞

移动技术并没有渐退的迹象，反而对于个人和企业去建立门户网站，必须考虑移动用户已经变成了趋势。对于那些在不同设备上看起来很酷、功能十分有效的正在发展中的网站，响应式设计仍保持实践性。作为一个Web设计师，也会尝试用各种各样的网页设计技术。如果响应式设计趋势让你印象深刻，并且也打算用响应式设计深入研究网站创新，那么你已经来到了初学者的门口。这里，已经包含了10个关于设计一个完美的响应式网站的很酷的建议。因此，让我们深入了解这些建议。  
![rwd][]

### 1. 确保性能是你主要的目标 ###

不管现在移动设备的网络连接速度有多快，在建立网站时都推荐为设别配备慢的网络连接。例如，由于4G网络在现代国家是受限制的，因此你需要特别注意设计移动友好的网站，能在2G和3G网络上完美的运行。确保网站的加载时间非常迅速。

### 2. 采用‘图像’方式 ###

对于每一个响应式网站，图像是一个很关键的元素。不像基于桌面的门户网站，一张很大的图片可以一个很好的指引。在移动优化的网站上使用一张这样的图片，对于网站所有者并没有好处。因此，需要裁剪图片或者整个删除图片，原因非常简单，小屏幕的移动设备没有能力按照预期的方式显示图片。在为不同的移动设备设计网站时，采取一个合适方便的图片管理计划并遵守它。有些情况下，你需要为桌面和其它移动访问者创建一个图片的多版本。

### 3. 避免包含导航菜单 ###

由于响应式网站的目标是类似平板和智能手机的小屏幕，所以建议隐藏主菜单导航。可以选择用图标结合可以提示用户菜单的方式代替。例如，你可以设计一个简单的下拉式菜单，它可以滑下或者扩展到覆盖整个屏幕。这也意味着，如果导航包含的元素超过三个，你可以只设计一个可以打开特定菜单的图标。

### 4. 试着尝试多个软件程序 ###

对大多数网站设计师，创建一个复杂的响应式web设计可能会从选定的软件程序中得到帮助。例如，使用一个类似‘Moboom’的模板创建一个相当简单的布局是有效的，但是对于复杂的布局，你可以会选择像GoMobi一样的特定软件，对于移动用户，它可以帮助你设计一个极好的网站布局。

### 5. 简化网站导航 ###

尽管传统的电子商务网站有创建复杂导航方案的方法，你可以更进一步，使用一个可以被可预测的标签提供的健壮的导航菜单。如果在浏览一个最受欢迎的电子商务网站，你会发现它包括了一个简单而清晰的导航系统，从而让访问者能体验公司提供的产品和服务。

### 6. 充分利用Google网页设计标准 ###

如果你是一个响应式网站开发的初学者或者已经开发了一些响应式网站，但是你不满意，那就有必要去了解一下Google的设计标准。除了获取针对智能手机关于响应式设计的优秀建议和技巧外，你也会了解你需要做的事情—如何使网页在不同的手持设备上快速加载。

### 7. 让你网站的内容可读 ###

为了阅读特定的文本片段，读者需要对其放大或缩小，这不是一个好的建议。作为一个经验，确保文本大小足够大，因而即使在小的屏幕设备上也是可读的，建议将文本设置成16px、12pt或者1em。

### 8. 了解网格和断点 ###

当设计响应式网站时，确定你对断点很熟悉。此外，还需要了解网格系统，这允许你在网页设计中实现行和列结构。

### 9. 对于高分辨屏幕，用两倍大小的图片 ###

按照这个建议，你需要两倍大小的图片，以让图片在高分辨率值的屏幕上看起来很锐利。同时，需要保证不会对网站的加载时间产生负面影响。

### 10. 考虑屏幕方向 ###

根据数据统计，41%的人使用直式（纵向）定向，59%的人喜欢横向定向。因此，你需要采用某中方式来设计你的响应式网站，让它在横向和纵向看起来都是极好的，特别是横向。

### 总结 ###

不管人们选择哪种设备，响应式设计使每个人都有可能访问和使用你的网站。我相信，上面列出的建议将会在你的下一个响应式网站开发项目中给你指导。

> 本文根据@ Hariom Balhara的[《Top 10 Tips on Designing Outstanding Responsive Websites》][Top 10 Tips on Designing Outstanding Responsive Websites]所译，整个译文带有我自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：[http://www.webdesignflip.com/2015/top-10-tips-on-designing-outstanding-responsive-websites/][Top 10 Tips on Designing Outstanding Responsive Websites]

译文出处：[http://www.ido321.com/1556.html][http_www.ido321.com_1556.html]

[rwd]: /images/20220805/509fec5d8d6f4fe9b72074f67929cd25.png
[Top 10 Tips on Designing Outstanding Responsive Websites]: http://www.webdesignflip.com/2015/top-10-tips-on-designing-outstanding-responsive-websites/
[http_www.ido321.com_1556.html]: http://www.ido321.com/1556.html