从第一个因果开始,说说Web界面的三种布局

2020年10月18日13:46:08 发表评论 1 次浏览

从第一个因果开始,说说Web界面的三种布局

首因效应示例设计是为用户服务的,而不是设计本身。

社会心理里有一个概念:初级效应。解释了社会认知过程中,第一次通过“第一印象”输入的信息对后来对对象的认知产生影响,也就是我们常说的第一印象决定最后印象。在人与人的交往中,第一因果起着重要的作用。在用户与网站或其他互联网产品的互动中,首因效应也有很大影响。

以Web端为例,如果界面排列有序,颜色搭配得当,页面的重要和次要内容清晰可见,那么用户至少不会感到反感,有更大的意愿继续浏览,然后进行深度阅读、注册等操作;反之,如果整个页面混乱,没有重点,就像二手市场一样,用户第一反应就是这个网站有点低,马上就烦了。即使网站的内容质量高,恐怕用户也不会继续浏览,用户甚至不会在意网站的内容和信息,只想早点离开。Pms控制不了网站内容的质量,但如果用户因为界面布局和色彩搭配而留不住,那就要反思了。

所以要更好地利用第一因果,注意能给用户留下“第一印象”的界面布局,设计出符合用户使用和视觉习惯的界面,尽可能为用户提供一个无压力、舒适的使用环境。

Web界面布局是指网页的整结构分布。界面布局的目标是提高用户兴趣,方便用户阅读。过于花哨的页面可能会增加用户的兴趣,但也会影响浏览网站的视觉流量,甚至阻碍用户使用产品。所以要在视觉审美和页面内容之间找到。根据栏目的不同,网站的界面布局可以分为一栏、两栏、三栏。

一列布局

西·詹姆斯·加勒特(Jesse James Garrett)在《用户验元素》中说,成功的界面设计是用户一眼就能看到的“最重要的西”。单列布局显然是用户最容易关注重要事物的方式。

一栏式布局,顾名思,就是整个页面是一个信息展示区,优缺点突出。

优点:

结构简单,页面清晰,对用户没有过度的视觉压力,用户视觉流程清晰;

信息展示中,页面焦点突出,用户可以快速找到网页的关键内容。

缺点:

排版方式有限,页面能承载的信息量

由于排版和信息量的限制,这种布局适用于信息量小、用途单一的网站,主要用于企业网站主页、搜索引擎主页和填表页面。

企业网站主页

企业网站的目的是介和宣企业产品和企业文化。一栏式首页可以快速抓住用户的眼球,吸引用户的注意力,在企业宣中起到更好的作用,比如马首页。

企业主页采用单列布局时,需要注意两点:

需要使用大型精美图片或视频等。,造成强烈的视觉冲击,给用户留下深刻印象,增强品牌效应,留住用户进一步浏览;

由于一栏能显示的信息量有限,所以主页上要增加导航或重要链接的门户,引导用户深度浏览,起到门户和信息分流的作用。

搜索引擎主页

用户使用搜索引擎的需求明确且单一,只搜索目标词的相关内容。因此,搜索引擎的首页应该为用户提供方便快捷的录入,尽量减少非搜索相关因素对用户的影响。所以常见的搜索引擎首页设计上主要是简洁清爽,没有大图或者复杂的设计,突出搜索框和按钮。比如百度谷歌的首页,以及一些网站的站内搜索页面。

表单填写页面

在表单页面,用户的需求也是清晰单一的,用户需要尽快填写表单,这样操作本身就不会占用多时间。所以填表页面和搜索引擎页面的设计要求基本一致,以简洁整洁为优先。下图是JD.COM的注册页面。

这里要说一下知乎的网页设计。对于未注册的用户,知乎的首页是注册/登录页面。这种设计的一个好处是引导用户注册,另一个好处是首页清爽专业。但是在这个设计的同时,也意味着没有登录的用户无法作为游客浏览内容,给用户来了一定的压力。然而,换话说,它也屏蔽了用户,提高了使用障碍,并促进了社区氛围的造。所以这个首页和注册/登录一体化设计,有利有弊,值得借鉴。

第一页是注册/登录页的设计在一些有用户进入壁垒的网站中很常见,典型的例子就是pt网站。

两列布局

两列布局结合了一列布局和三列布局的优缺点,是一种折中的界面布局。相对于栏目类型,可以容纳更多内容,但不具备视觉冲击力;与三栏式相比,其信息并不拥挤凌乱,但不具备内容大的优势。

柱布局可分为左窄右宽、左宽右窄、左右相等。每种方式都有不同的页面重点和视觉流程,其适用的页面类型也不同。

左窄右宽型

设计上,左边窄,放导航信息或者其他辅助信息,右边宽,放主要内容。所以左边的导航信息要用来引导用户浏览网页,用户的视觉流程也要相应的从导航开始,然后浏览页面内容。

这种设计方法适用于内容丰、导航清晰的网页,是Lagou主页的界面设计。com和163信箱。

,对于左窄右宽的布局,推荐导航等次要信息,如JD.COM的产品详情页面,也可以放在左侧。

左宽右窄

设计上,左边宽,放主要内容的地方,右边窄,放次要内容的地方,多用于辅助导航或广告信息。这种布局模式突出了用户目前浏览的内容,引导用户关注当前内容。这种界面布局在一些面向内容的网站中比较常见,比如百度的搜索结果页面,以及知乎里几乎所有的页面。

左右相等

在设计中,左右两侧都是信息显示区。在大小上,方比例较小,甚至一致,这在一些没有主次内容的网站中很常见。

这种设计是极端的。在这种网页中,用户很难找到关键内容,视觉流程也不够清晰。毛采用这种布局,页面的左右两边设计成独立的分区,不同的分区可以分别滚动浏览。

综上所述,双柱布局具有折中的特点,没有明显的缺点,也是目前最常用的布局模式。总结三种两列布局的特征和视觉流程,如下所示:

三列布局

三列布局是最复杂的界面布局。

优点:

可以尽可能多地显示信息内容,尽可能地增加信息密度。

缺点:

会造成页面上的信息拥挤,增加用户查找目标信息的时间成本,降低网站内容的可控性。

三柱布局主要分为中间宽、两边窄、两柱宽、一柱窄。即使选择一个,三栏的宽度在设计上也不是一成不变的,宽度比例要根据导航和内容的比例来调整。

中间宽两边窄

在这种布局中,中柱宽度较大,在视觉比例上相对突出,更容易引人注目。所以用户默认中间的关键信息,两边的内容都是次要信息或者广告;在这种布局中,用户的视觉流被引导集中在中间,然后移动到两侧。这种界面布局的典型应用是新浪微

因为新浪微内容多,细分类别多,其首页有两个导航区,左侧是主导航区,使用Tab导航,右侧是辅助导航区,使用推荐导航。

两列宽一列窄

与宽中窄边的布局相比,这种方法具有显示更重要的内容和提高页面利用率的优点,但同时也不像以前的方法那样突出和集中,用户视觉流容易分散。这种界面布局常见于信息量巨大的门户网站的首页设计,比如讯首页。

混合布局

目前很多信息量丰富的大型网站,尤其是电子商务网站的界面布局,不仅仅是上述的一种,而是几种布局方式的组合。以JD.COM首页为例,进入页面时,主界面从左到右为三栏:列表导航区、信息展示区、推荐导航区,而以下商品展示和广告空间采用一栏式界面布局。这种多布局的页面设计,不仅通过导航引导用户的视觉流向,还通过精美的图片吸引用户的注意力,保证了页面空间的充分利用,可以说是一种合理高效的界面设计。

最后,无论什么样的Web界面布局,都是为信息展示服务的。无论是导航指导还是内容指导,无论是一栏还是多栏,最终目的都是为了帮助用户尽快看到最想要的内容。说到底还是那话:设计是为用户服务的,不是设计本身。

相关阅读信息过载时的三种淘金方式

编者按:信息的爆炸性增长给我们带来了更多的知识,但也带来了巨大的负面影响。它可能导致信息灾难,也可能构信息乌托邦。

视收From来看,企业不提前布局的原因是什么

昨天,域名圈的大哥许军发来了这样的朋友圈,大概意思就是视现在对域名的重视。去年,他从美洲银行买了一辆from,并把它送给了电动汽车公司法拉第

A5销:我们眼中的关键词研究与分析

优化网站对于站长来说,他们都希望自己的网站在优化后得到最好的结果,比如更好的排名,更大的流量,更多的客户,更多的订单,而这是站长想要的

JD.COM 818手机降价有哪三种形式?

手机不仅是交谈和上网的工具,也是跨时空的情感桥梁。手机已经成为当今社会人们情感的另一种寄托。甚至很多人都离不开手

一个6天的站,谈谈你对PBDIGG的感受

一假期接触PBdIGG已经第天了。我有很多经验可以和你分享。首先我觉得是一个很不错的php程序,靠站长或者编辑来更新

从第一个因果开始,说说Web界面的三种布局

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: