ui如何设计自适应的界面（5点做好ui设计自适应界面）

UI设计中如何做响应式设计与自适应设计?由于科技在不断的发展，小伙伴们上网就不单单只依靠台式电脑了，还有平板电脑笔记本电脑都是可供大家选择的。面对不同的屏幕分辨率网站是如何进行适配的呢?胡老师就和大家聊聊UI设计中如何做响应式设计与自适应设计?

文章目录：

1.什么是响应式设计?

2.什么是自适应设计?

3.响应式设计的利弊

4.自适应设计的利弊

5.总结

1. 什么是响应式设计?

响应式设计就是开发人员使用CSS来确保网站的每个页面都可以根据用户视口的大小重新设置格式，并且只需要为网站创建一个代码库即可。他们使用断点来告诉站点何时调整以适应不同的屏幕尺寸。同一站点在大型台式计算机屏幕上可能具有四列布局，在较小的笔记本电脑屏幕上可能具有三列布局，在平板电脑屏幕上具有两列布局，而在手机上具有单列布局。无论您在响应式网站上使用哪种设备，都将找到相同的基本内容和设计。

2. 什么是自适应设计?

在自适应设计中，为每个设备的屏幕创建不同的网站布局。加载时，站点会识别屏幕的大小并提供为该视口制作的布局。实际上，您可以为六种常见的屏幕尺寸(从非常小到非常大)分别创建不同的用户体验：320px，480px，760px，960px，1200px和1600px。

但是，由于为六种不同的屏幕尺寸设计网站会非常耗时，因此可以通过参考网站现有版本的用户分析来确定用户最常访问的屏幕尺寸，从而限制工作量。例如，如果分析表明大多数用户在其Apple iPad和Samsung Galaxy手机上使用该网站，则应专门针对这两种屏幕尺寸而不是所有六种可能的屏幕尺寸设计用户体验。

3.响应式设计的利弊

从UX交互设计人员的角度来看，响应式设计的最大优势在于，与自适应设计相比，它所需的工作量要少得多，无论是最初创建它还是维护它。此外，响应站点将容纳无限数量的屏幕尺寸，考虑到似乎定期发布具有新奇屏幕尺寸的设备，这是一个好消息。响应型网站也被认为是适合移动设备使用，因此它们在搜索引擎排名中的排名也更高。

另一方面，响应式网站要求开发人员进行更多的编码，即使UX交互设计人员和开发人员密切合作以确保布局可在尽可能多的设备上使用，也无法控制每个设备上的布局。结果，某些设备可能没有在其上布置网页来创造最佳的用户体验。UI设计中如何做响应式设计与自适应设计https://www.aaa-cg.com.cn/ui/2814.html?hjx此外，由于无论访问什么设备，都会交付整个网站的代码，因此响应式网站的加载速度可能较慢。这也会损害用户体验。

由于其具有灵活性，所以响应式设计通常是优化网站的首选解决方案，尤其是当该网站是从头开始打开到包含许多网页时。

4.自适应设计的利弊

对于UX交互设计人员而言，设计自适应设计所需的各种布局会更加容易，因为它只需要为每个屏幕尺寸的固定宽度创建线框即可。这意味着UX交互设计人员可以完全控制每种布局，并可以确保每种屏幕尺寸的用户体验都是最佳的。结果，如果UX交互设计人员认为为不同的屏幕尺寸包含不同的内容是有意义的，那么他们可以这样做。

例如，用于食品配送服务的自适应站点可能包括台式计算机的主屏幕，该主屏幕显示餐厅选项和不同类别的食品以及餐厅位置搜索功能。同时，手机上同一站点的主屏幕可能仅包含餐厅位置搜索功能。

自适应站点对于开发人员来说更容易实现，并且因为它们仅提供给定屏幕尺寸所需的代码，所以它们的加载速度比响应站点快得多。

就是说，对于UX交互设计人员而言，自适应设计可能需要承担很多责任。虽然可以通过仅设计六个常见屏幕尺寸中的两个或三个来限制工作，但这意味着，如果用户在非设计的设备上访问该网站，则该网站将无法正确格式化。即使设计了所有六个屏幕尺寸，仍然不会覆盖不常见的屏幕尺寸。

自适应设计通常最好用于网站的重新设计或增强。如果客户需要一个现有网站的移动布局，而他们无意改变，则自适应设计可能是最佳选择。

5.总结

现在，您应该对什么是自适应设计和自适应设计以及两种方法的利弊有基本的了解。在确定哪种方法最适合您的下一个UX交互设计项目时，请记住以下几点：

5.1响应式设计可以根据所访问设备的屏幕尺寸(从大型台式计算机到小型移动电话)来更改其布局和外观。

5.2自适应设计要求为将要访问该网站的每个设备创建不同的布局。

5.3响应式设计通常需要UX交互设计人员进行较少的工作，但是他们必须与开发人员合作以确保可以在每种可能的屏幕尺寸下使用网站布局。

5.4自适应设计需要用户体验设计师为单个网站创建多达六个不同版本的屏幕，以用于不同尺寸的屏幕。尽管工作量很大，但它使UX交互设计人员可以针对这些布局所涵盖的每种设备优化用户体验。

5.5自适应设计通常最适合从头开始设计的较大站点。

5.6自适应设计通常最适合刷新的较小站点。

自适应