响应式网页设计注意事项
当前位置:贝知网>知识分享>设计开发>响应式网页设计注意事项
响应式网页设计注意事项
时间:2022-12-16 设计开发

响应式网页设计注意事项

响应式网页设计注意事项

极简主义的网站注重简洁、漂亮,抛开那些令人分心、和网站设计元素没有太大关系的元素,如颜色、文本、图像等等。接下来给大家讲讲响应式网页设计注意事项,希望对你们有帮助。

响应式网站设计思维比传统网站有较大的不同,因为考虑到PC、平板电脑、手机和其他终端的兼容性和适应性,设计上要兼顾很多事情,不能随心所欲设计,需要遵循的基本思维反应风格可以为之后的功能实现做铺垫。那么,响应式网页设计的考虑因素是什么呢?

内容精炼

设计网站特别是传统营销型网站将主页设计得很长,内容丰富,但反应网站时需要尝试简化内容,保持网站的简洁和清晰,用户能够快速的找到他们想要添加的信息就会增加好感,如果内容太多,响应起来也会很繁琐。

栅格化设计(箱体结构)

方形布局是由不同的内容信息组成一个网格,每个网格都有自己的信息。由于网格的矩阵是按行和列对齐的,用户可以更容易地找到信息,更重要的是,这有利于响应性自适应调整。

分屏视觉差异设计

分屏设计是栅格化概念的延伸。分屏设计通常只有两个信息容器(左右两大块也可以进一步细分)。相对于一栏式的设计,把屏幕分成两部分不仅能给访问者一种新鲜感,还能同时呈现两部分内容(这是单列所不能做到的)。

此外,分屏设计与响应框架配合得很好,这种框架在PC和大屏幕上展示最好,但也可以上下堆叠在小屏幕上。许多设计师现在使用强烈的色彩和有趣的排版来最大限度地提高分屏布局的视觉张力。

隐藏菜单

所谓隐藏菜单,其实就是简化了界面,将大量菜单项设置在一个小菜单图标上,当用户点击图标弹出时,可以极大地节省响应性网站的空间,为移动小屏幕浏览空间。

极简设计

过多的视觉效果或交互元素会成为访问者的负担。这就是极简设计悄然而至的原因,现在网页设计师们更感兴趣的是如何从极简设计中创造出漂亮的结果。

极简注意设计

极简主义的网站注重简洁、漂亮,抛开那些令人分心、和网站设计元素没有太大关系的元素,如颜色、文本、图像等等,这意味着我们需要能够识别哪些元素应该保留,哪些元素应该被删除,在网站排版、视觉效果、网站配色和留白等元素之间找到平衡点。

网页交互设计原则

一致性是产品设计过程中的一个基础原则,它要求在一个(或一类)产品内部,在相同或相似的功能、场景上,应尽量使用表现、操作、感受等相一致的设计。下面介绍网页交互设计原则,希望对您有帮助。

1.遵循用户的心理模式

用户在使用你产品时,是基于用户的心里和本能意识去操作界面。简单来说,当他遇到一个按钮时,他会想到这个按钮将会触发什么样的动作来满足他的需求。如果这个按钮不是用户预期想的操作模式,那么这个按钮设计就是有问题的。比如说,你每天都会去逛朋友圈,看看好友的动态,当有一天微信把朋友圈关闭了,用户每天的预期行为受到了限制,这样的操作就不符合“人性化”。

2.符合用户的使用需求

设计一个产品,最基础的原则就是要符合用户的使用需求。确定需求是一个产品经理的基本工作内容,有很多方法和工具可以帮助我们找到用户的需求。例如观察用户行为、分析数据、构建用户场景等等。从产品策划角度,我会把一个产品的体验分为3个层级,分别是能用、可用、易用。

3.一致性原则

一致性是产品设计过程中的一个基础原则,它要求在一个(或一类)产品内部,在相同或相似的功能、场景上,应尽量使用表现、操作、感受等相一致的设计。一致性的目的是降低用户的学习成本,降低认知的门槛,降低误操作的概率。

4. Less is More

它最初由建筑大师Ludwig Mies van der Rohe提出,是一种提倡简单,反对过度装饰的设计理念。这个原则历史悠久,在很多行业中衍生出了很多不同的解释。在互联网行业,类似“简约的设计风格”、“做减法”、“把不必要的内容收起来”、“7加减2原则”等等说法,都或多或少与这个原则有关。

Less最初的意思是反对“过度装饰”,并不是一味的追求所谓的“简单”。我所理解的Less,是我们要努力降低用户的认知和操作成本,这才是在互联网行业Less的本质。

5.使用用户的语言与之沟通

产品的最终使用权是在用户,用户不是设计师也不是开发者,他们大多数不懂设计理念和开发过程,对于产品的使用语言和文字要绝对靠向普通用户思维。但不要把用户当成不聪明的人,适当的为中层用户做优化。

6.设计目的性大于美观性

用户界面设计往往是UI设计师们发挥的最佳领域,美观的产品带来的不仅仅是视觉的冲击感受更是产品的升级迭代。但要注意的是,产品设计的目的性一定要大于美观性,不可因为产品的美观失去最基本的操作模式。大多数情况下,还是要基于标准的普通操作。

7. Don't make me think

这一原则可谓是贯穿于整个用户体验设计。我的理解就是用最简洁的方式和最短的时间,帮助用户完成目标就是好的用户体验。

8.直觉化

正确的操作部位必须显而易见,而且还要向用户传达出正确的信息,并且这些操作模式不需要学习,仅仅凭生活经验和本能就能操作。

9.允许犯错原则

允许用户在操作过程中犯错。这很大可能是设计上的问题而不是用户操作的问题。在用户犯错的时候,提供有效的信息引导他去正确的操作。要避免容易发生错误的情况,或者检查并在实际动作前确认选项提示用户。

10.信息反馈原则

人与机器之间的“交流”,本质上都是信息的传递过程。信息有去有回,才能连贯,才会形成有效的交互与彼此的理解。所以及时有效的反馈和解释尤为重要。

在几乎所有需要人机交互的界面上,当用户进行了某些操作,系统都需要使用变色、形状改变、振动、发光等方式来给用户即时的反馈,目的是告知用户,你刚才的操作我已经知道了。例如下图的iOS 11的控制中心的设计会高亮用户点击的图标并且使用不同颜色,未被点击到的图标则会显示灰色,用户能一眼就了解到自己的操作得到了反馈。