网页如何才能吸引人
当前位置:贝知网>知识分享>设计开发>网页如何才能吸引人
网页如何才能吸引人
时间:2022-12-16 设计开发

网页如何才能吸引人

网页如何才能吸引人

节省时间的设计策略是让用户尽快看到购买按钮,这样他们就不必在页面中滚动寻找可点击的链接。这里有一些值得注意的技巧。接下来给大家讲讲网页如何才能吸引人,希望对你们有帮助。

用户的注意力持续时间很短。无论是通过对网页和app的数据分析,还是其他统计数据,都印证了这一事实。这也需要我们在设计上投入更多的精力去捕捉用户的好奇心和注意力,让他们在最短的时间内获取网站信息。

1.用户不需要仔细思考

对于用户来说,不需要复杂决策就可以做出决定的设计,是轻松而且容易获得的。那些让人不必费力思考就能获得信息的设计,总是让人联想到极简主义,但总的来说,它们更多的是简化元素和效果。当然,极简主义也是一个不错的选择。通常,限制信息的数量和避免信息过载是实现这种设计的唯一途径。

2.鼓励互助的视觉内容

网站本身就是一个非常有用的媒体平台,既然是媒体和内容,我们就应该充分利用这个品质。

通过视觉设计来吸引用户的注意力是一种简单的策略,在视觉设计中加入互动元素通常具有良好的转化率。

在设计中,从A点到B点应该是一个简单、快速的过程。电子商务设计师应该对此印象深刻。例如用户在社交媒体上看到一双网红鞋,想要获得它。最好是在点击链接之后能立即看到商品,这样购物行为的互动性就会更高。

节省时间的设计策略是让用户尽快看到购买按钮,这样他们就不必在页面中滚动寻找可点击的链接。这里有一些值得注意的技巧。一种是使用与社交媒体一致的图片,让用户一眼就能看出他们想要的东西。

3.分解复杂元素

通过将一个复杂的故事分解成更小、更容易吸收和理解的部分,用户将能够更容易地获得其中的信息。当涉及到文本段落处理时,较小的段落肯定比较大的段落更容易阅读和理解,而且用户通常更喜欢阅读这样的内容。

尝试一些像卡片设计,使用视差滚动来引导,或者总结主要内容并通过“阅读更多”来引导用户阅读原文。这样的技术可以增加用户的参与度,降低内容的复杂性。

网页交互设计原则

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

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的控制中心的设计会高亮用户点击的图标并且使用不同颜色,未被点击到的图标则会显示灰色,用户能一眼就了解到自己的操作得到了反馈。

移动视觉设计的原则

一、内容优先

对于手机而言,屏幕空间资源显得非常珍贵,为了提升屏幕空间的利用率,界面的布局应该以内容为核心,而提供符合用户心里预期的内容是移动应用获得成功的关键。那么在设计组织内容时,要注意一下几点:从产品设计开始,就不能抱有将pc上的一切功能都往移动端搬得思想。敢于删除不必要的内容,只抓重点,是对移动设计师德基本要求。

做到内容优先。在浏览内容的过程中,适时的隐藏一些干扰功能,让内容最大化。多采用手势操作,也能极好的隐藏一些操作元素。

二、为触摸而生

在触屏设备上,基于手指的手势操作已经代替了鼠标的点击操作。手势操作灵活多变,交互自然,但也带来识别性差,操作精度不高等缺点。

1、以信息架构为基础,建立手势交互规范

2、优先设计自然的手势交互,而不只是点击

3、引导用户在情境中学习手势操作

4、可出区域必须大于7*7mm,尽量大于9*9mm。在触摸操作设计时,我们已经知道,在界面中的可触物理区域不应该小于7*9mm,为了让用户能在各种情境中都容易操作,建议可触区域不应小于9mm,但是可触区域不同于屏幕中直接呈现的物理大小,为了视觉及审美的需要,有时设计时会把屏幕元素设计得较小。

三、转换输入方式

文字输入是移动端得软肋之一,不论手写输入还是键盘输入,操作效率都相对较低,在行走或单手操作时,输入的出错率也较高。那么在应用设计时要注意尽量避免文字输入,或者使用一些代替方案来提升输入效率。

1、减少文本输入,保留之前输入的内容。如在文本框中输入内容,要做到意外退出后能在返回,依然可以看到之前输入的内容。也可以通过关键字联想,如在搜索时输入一个字,可以通过联想匹配让用户尽快找到目标,而无需输入全部文字。

2、转化输入方式,可以通过将常用的输入框转化为选择控件,或其他自定义控件(如日期、地址、城市等可转化为选择项的)。

3、使用手机已有的传感器输入,如语音、扫描识别(二维码、条形码、文字、图片等)。

四、明确的反馈

屏幕小、硬件性能差、网络不稳定等等,移动产品需要面对各种情景,所以有效、清晰、及时的反馈起着重要作用。它能让用户知道自己的行为正在被后台程序响应和处理。

1、为用户的行为操作提供提供及时的反馈。如点击列表后背景会变灰色,这样在网络缓慢或性能较差的设备上,用户能快速察觉到已经点击成功,从而避免多次点击。

2、提供有价值的状态提示反馈。避免使用模态窗口,打断用户的当前任务。早期的app对模态框的滥用,让用户很容易忽视框中的内容。可以考虑toast、状态栏、导航栏等反馈方式,也可以考虑结合声音、震动、闪光灯等组合方式,让反馈信息更有效。

五、为中断而设计

考虑到移动应用使用情景复杂而不稳定,在移动场景中被打断是很平常的事情,所以确保在各个产出中断的情境下,让用户恢复之前的操作,保持用户的劳动付出。

1、保存用户的操作,减少重复劳动

网络终端状态:在移动应用上行服务数据时,都需要考虑网络状态出现异常的状况。例如新浪微博客户端,当博文发送不成功时会暂存到草稿箱中;iphone发送消息不成功,也会保存内容,标记为发送失败,允许用户重新发送。

编辑中断:在编辑内容的界面中,要考虑在各种中断事件后,保存已编辑的内容,减少用户的重复操作。

2、衔接记忆而不是重头开始

当用户在阅读是被打断,基于内容可分为两种不同的情况,一是书籍类的阅读,用户再次进入界面后,衔接上一次正在阅读的页面而不是书本的首页;另一种是新闻阅读类的阅读,需要根据时间间隔来判断,超过一天时间没有阅读,再次进入后,可以让用户选择是否继续阅读或返回首页最新内容,若时间间隔很短,则直接返回之前的页面内容继续阅读。

六、为用户的误操作而设计

1、在设计产品时,通过页面的设计、重组或特别安排,尽量的防治用户出错,因为比出现错误信息提示更好的是更用心的设计防治这类问题的发生。

2、优逸客表示为了避免用户的误用和误击,应该为用户提供撤销和重做的功能。

3、当用户操作有误需要错误信息提醒时,错误信息应该用语言表达,要较准确地反应问题所在,并且为用户提出一个建设性的解决方案。

七、一致性

一致性是设计的基本原则,它可以让产品更加的易用,降低用户的认知成本,从而带来整体体验的提升。

1、设计上的一致性:基本结构布局、模块化内容、文案、交互行为和视觉风格等方面的设计要遵循一致性的要求

2、于平台环境一致:例如ios屏幕左上角的返回设置,除非产品的特殊设计需要,否则尽量不改变这样的设计,保持与平台的一致性,避免用户在使用上的不习惯。

3、跨平台的一致性:移动产品往往是多平台布局,包括ios、android和web app,内容设计上的处理要追求一致性。