B2B行业网站页面元素之间的对齐标准

  网页里各种元素水平方向的对齐方式主要有:左对齐、右对齐、居中对齐和两端对齐等4种方式,常用的为左对齐、居中对齐,右对齐和两端对齐基本很少使用,尤其是两端对齐,本文作者李学江认为一般只在平面设计的时候会使用。

  1、页面各种元素对齐方式的基础知识

  A、左对齐在网站布局中是最常见的对齐方式:它整齐一致并且安全,因为大家对这种对齐方式很熟悉并且也乐意接受,所以对任何设计来说,左对齐都是最保险的对齐方式。

  B、在高品质网页设计中,好的对齐方式占了很大的比重:当物品排成一行时,通常看上去感觉更好。因此,使用不同的对齐方式来建立对比是较难的而且要更谨慎的使用,但是如果做的好的话是非常有效的。比如:在文章中,我们常常是用左对齐的文本段落和居中对齐的标题来混合起来,这是使用不同的对齐方式建立对比的最好例子。

  C、从用户视线行为来分析对齐方式:用户的视线常常是从上到下,从左到右,那么框架之间最好的就要左右对齐,上下对齐,让视线更流畅。导航页的内容链接,当用户看完一个链接后,会接着看下一个链接,左对齐仍然是最好的方式。

  2、框架与框架之间的对齐方式

  第一部分讲了,用户的视线常常是从上到下,从左到右,那么框架之间最好的就要左右对齐,上下对齐,让视线更流畅。但是有时左边框架的内容更高,右边要放2个模块才可能和左边一样多,这个时候我们必须要确保右边2个模块或多个模块刚好和左边的一个框架对齐,这样看起来才更统一。

  3、内容与小图标之间的对齐方式

  标题栏上的小图标与标题栏名称、内容链接左边的小图标等,都是采用上下居中对齐,左边左对齐的方式,一般内容链接左边都有一个小图标,小图标右边的标题也要左对齐。而且整站上下不同的框架之间,也要上下对齐。

  4、产品图片、人物图片等与内容的对齐方式

  这种方式分为两种,水平对齐方式与居中对齐方式。

  A 文字放图片下方:这种方式一般为居中对齐,因为如果左对齐,文字如果少了,会显的比较难看,尤其是人物图片,只有一个人名。

  B 文字放图片右边:文字水平方向要左对齐,因为用户看了图片,就要看图片周围的文字,如果采用右对齐或居中对齐,都会使视线不连贯。垂直方向要两端对齐,看起来更规整,一般是标题和导读内容与图片两端对齐。

  更多的对齐方式在《B2B行业门户网站设计开发实战研究报告》第四章第四节里做了详细阐述。

  5、信息录入提交表单页面

  在表单页面使操作区域对齐,将大大提升用户完成任务的效率,所以输入框左对齐是必须的,当用户输入完一个框后,接着往下一个框,可以节省用户的时间。但是作为提示输入内容的文字,则要右对齐最好,因为提示语言有的多有的少,会造成提示语言和输入框之间产生空白区域,加重了用户的认知负担,用户必须花相当多的时间以便在标签和输入框之间移动视线。

  操作过程中,用户更关注输入框本身,而不是标签。用户眼睛关注点的转移速度是非常快的,并且即使不从头阅读标签也能明白它的意思,对于用户的行为分析,本文作者在《B2B行业门户网站策划实战研究报告》里做了详细的阐述。

时间: 2024-10-01 04:02:00

B2B行业网站页面元素之间的对齐标准的相关文章

8招教您做好B2B行业网站页面设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 B2B行业网站由于具有B2B网站的特性和门户网站的特性,决定了页面设计与其他网站一些不同点.在写作"B2B行业门户网站页面设计"章节之前,在此从理论上讲下页面设计及制作的基本要点,供大家参考,讲的不对的,希望大家批评指正. 1 页面用色.框架及整体风格应该是严谨的,充满商业氛围的 由于B2B行业网站的内容是严谨的.高端的,涉及行业的发展动态.各种技术交流.企业的营销管理知识等信息,注定了内容是严谨的.高端的;由于其涉的是企业与企业之间的交

B2B行业网站“页面结构”分析及应用

中介交易 SEO诊断 淘宝客 云主机 技术大厅 B2B行业网站策划提供给网站设计师的策划文档里,一般都表明了每个部份的内容和功能所采用的页面结构,但是并不代表设计师就能理解策划者在页面结构方面的考虑,以及由于有的策划者对网络了解不太深入,或者说有一些疏忽,从而在页面结构上考虑的不周全,这个时候设计师和网站管理者就要对策划文档进行纠正,所以无论是网站管理者.产品经理.设计师.页面制作人员,都要对B2B行业网站的页面结构进行简要的了解,我们可以不知道怎么去做,但是一定要知道,这样做是不是对的.下面就

如何做好B2B行业网站页面内容设计留住用户

对于B2B行业网站的页面设计,大家可能更多考虑页面用色.导航条.按钮.标题栏的设计,内容设计可能常常被大家忽略.但是如果内容设计的不好,可能会让你的所有设计被毁于一旦.比如如何让内容有主次之分.层次感,使内容看起来不会太乱.太多,使用户不愿意继续阅读下去,很快离开网站,不能留住用户继续访问. 在本研究报告前面章节我讲过,永远要记得用户在没有明确的阅读内容前是扫描而不是阅读,在导航页面,用户很乐于扫视一句一句的内容,对于大面积没有重点的内容,没有耐心,我们必须在网页上提供既简短又有一定视觉焦点的内

B2B行业网站“文字样式设计”一般标准

当我们打开各种B2B行业网站,看到最多的就是各种文字,以各种方式表达出来,显示在访问者眼前,文字是门户类型网站最多的内容,同时文字与图片.视频是网站最重要的三种表达方式之一. B2B行业网站,更多的服务于企业的交易需求.了解行业知识的学习需求及交流需求,本文作者李学江认为,这些需求更多还是要通过文字来表达和传递,不同的字号.颜色.粗细.行距,代表了产品策划者.网站设计者所期望向网站访问者传递的信息.下面来简要讲解下在B2B行业网站设计制作时具有的标准. 1 B2B行业网站导航栏文字字体.字号.粗

B2B行业网站设计分享:网站设计制作的标准

文章描述:B2B行业网站"文字样式设计"一般标准. 当我们打开各种B2B行业网站,看到最多的就是各种文字,以各种方式表达出来,显示在访问者眼前,文字是门户类型网站最多的内容,同时文字与图片.视频是网站最重要的三种表达方式之一. B2B行业网站,更多的服务于企业的交易需求.了解行业知识的学习需求及交流需求,本文作者李学江认为,这些需求更多还是要通过文字来表达和传递,不同的字号.颜色.粗细.行距,代表了产品策划者.网站设计者所期望向网站访问者传递的信息.下面来简要讲解下在B2B行业网站设计

B2B行业网站文字样式设计一般标准

中介交易 SEO诊断 淘宝客 云主机 技术大厅 当我们打开各种B2B行业网站,看到最多的就是各种文字,以各种方式表达出来,显示在访问者眼前,文字是门户类型网站最多的内容,同时文字与图片.视频是网站最重要的三种表达方式之一.B2B行业网站,更多的服务于企业的交易需求.了解行业知识的学习需求及交流需求,本文作者李学江认为,这些需求更多还是要通过文字来表达和传递,不同的字号.颜色.粗细.行距,代表了产品策划者.网站设计者所期望向网站访问者传递的信息.下面来简要讲解下在B2B行业网站设计制作时具有的标准

B2B行业网站“标题栏设计”的一般标准

在B2B行业网站的框架设计制作过程中,标题栏设计制作是工作量最大的,页面框架中最多的.网站Logo和导航条的设计,基本每个页面都是和首页一样的,相比之下工作量会小很多.无论是网站首页.二级栏目页,还是导航页.内容最终页,优秀的标题栏总能让读者方便快捷的找到想阅读的内容,又不会对页面内容产生干扰作用. 1 B2B行业网站标题栏设计的一般标准 B2B行业网站与一般的商业门户网站在标题栏设计上大部分是相同的,但是由于B2B行业网站更多的访问者和使用者是在办公室学习和工作的,需要更严肃的氛围,他们需要的

分析B2B行业网站标题栏设计的一般标准

中介交易 SEO诊断 淘宝客 云主机 技术大厅 在B2B行业网站的框架设计制作过程中,标题栏设计制作是工作量最大的,页面框架中最多的.网站Logo和导航条的设计,基本每个页面都是和首页一样的,相比之下工作量会小很多.无论是网站首页.二级栏目页,还是导航页.内容最终页,优秀的标题栏总能让读者方便快捷的找到想阅读的内容,又不会对页面内容产生干扰作用. 1 B2B行业网站标题栏设计的一般标准 B2B行业网站与一般的商业门户网站在标题栏设计上大部分是相同的,但是由于B2B行业网站更多的访问者和使用者是在

按标准设计B2B行业网站按钮 促进用户互动

本人曾经讲过,设计师的分析能力远远大于设计技术本身,那分析什么呢?本研究报告认为,用户行为分析是设计师最应该精通的.对于按钮,无论是真按钮,还是伪按钮(伪按钮是:仅表示这个链接与数据提交相关,或者就是为了突出链接,用按钮表示,叫"伪按钮"),之所以要以按钮的形式表示,最大的目的还是希望让用户知道点这个按钮时可以提交数据,是可以和网站交互的,或者点了以后就可以出现与网站或用户交互的页面出现,那么评价设计成败的标准就变成了:有需求的用户是不是注意到.愿意去点这个按钮,而不是这个按钮本身多么