什么是布局?网站制作过程中的“布局”是指页面内容的尺寸、间距及地方。有效的布局对于帮助用户迅速找到他们想要的内容至关要紧,并可以在结构外观上令用户感到舒服。博久网络科技专业网站制作怎么样设计有效的布局?1.具备明确的视觉层次。布局应当让页面各元素之间的关系和重要程度一清二楚。你可以通过适合用下列属性来达成视觉层次:焦点:指用户第一关注的地区。形式上被赋予焦点属性的UI元素必须要表达关键的内容。视觉流:指用户关注地区的顺序。可以参考任务逻辑和用户的浏览习惯来设计适合的视觉流。好的视觉流应该明确、合理、顺畅、自然。关联:在逻辑上有关的UI元素应具备明确的视觉关系。错误:逻辑上有关的UI元素在空间上被分隔,且无明显的视觉关联。对齐:使页面工整,信息呈现有序,便于用户扫视。错误:没对齐影响了页面成效且不便于用户扫视。不要由于功能需要和对极限状况的顾虑而随便牺牲掉页面的视觉展示。强调:可以参考UI元素间的相对要紧程度进行强调。
2.针对用户的阅读模式来设计布局。大多数人的阅读习惯是从左向右,至上而下。阅读分为沉浸式阅读(immersive reading)和扫视(scanning),前者的目的在于理解,后者在于定位。浏览网站时,用户不会沉浸在UI本身,而是沉浸在他们的目的任务中,因此扫视是最常用的阅读模式。用户只在确信必要时才仔细阅读很多文本。针对扫视的布局设计可以适合强调主要的UI元素,弱化次要的。包含:
1)将主UI元素放在扫视路径上。
2)防止将要紧信息放在左下角或者页面底端或者需要滚动不少的控件上。
3)考虑用渐进展开方法来隐藏次要的UI元素。
4)将任务有关的要紧信息要直接表目前控件上。用户更倾向于关注交互控件上的标签,而不是辅助型的静态文本。错误:用户需要阅读辅助型文本后才能明确“确定”按钮有哪些用途。正确:直接将按钮有哪些用途描述作为控件标签,便于用户理解。
5)不要展示大段文本,去除非必须的文本。多文本时格式化展示。注:常规模式也存在例外。眼动议实验指出,真实用户的行为非常没规律。此模式的目的在于帮你做出更好的决定,而不是精确的描述用户行为。
3.合理借助页面空间。维持页面的视觉平衡。防止拥挤和对空间的浪费。确保重点数据没被截断,除非数据特别长。错误:逻辑上有关的UI元素在空间上被分隔,且无明显的视觉关联。控件的尺寸和间距适合,没非必须的滚动。一个任务尽可能在一屏内完成。实质状况中,大家用户的页面空间要小于屏幕分辨率,它会因各种原因而压缩,如:非全屏操作(弹出窗口和对比浏览),浏览器本身及各种辅助栏对屏幕的占用等,设计中要考虑这类状况。
4.不要让布局本身成为突出的UI元素,维持视觉简洁(visual simplicity)。降低内容和展示上的嵌套层级。降低控件不同尺寸的数目,比如,在界面上只用一两种按钮宽度。使用轻量级的分组和分割方法,可以用布局本身和分隔符代替分组框。用尽可能少的对齐线。
5.选择与页面种类相匹配的版式。在设计之初,应充分考虑页面承载的内容、功能和属性,继而选择合适该页面的版式。不适合的版式会导致用户的阅读困扰,减少任务的完效果率。标准和规范:
1.栅格化:大家所说的栅格化是指在工作中对栅格系统的打造和应用。网页栅格系统源自平面栅格系统,它以规则的网格阵列来指导和规范网页中的版面布局与信息分布。栅格化可以使信息呈现工整简洁、美观易读,减少页面开发和运维本钱。它结构变化相对灵活,扩展性强。
2.以8px为横向栅格单位:以8px为横向栅格单位,页面所有元素宽度都可以是2的倍数,包含图片和版块宽度,如此可以在一定量上加快页面(尤其是对于J|PEG图片)的渲染速度(基于计算机内部二进制的运算机制)。其在扩展和兼容性上也有肯定优势。在阿里巴巴中文站中,布局间距的最小单位为8px,布局区块使用32px(8px*4)和24(8px*3)两种粒度单位,分别组成以下两种可达成的栅格系统:32px:适用于市场、社区等有关页面24px:适用于旺铺有关页面3.页面定宽:自适应可以参考浏览器显示状况自动调整页面宽度,但由于用户水平方向的聚焦范围有限,所以当页面过宽时,用户的浏览和操作本钱会增加;而当页面过窄时 (如用户同时开启两个浏览器对比查询产品搜索结果),自适应则会致使布局变形和内容错乱。给页面规定宽度可以防止这类问题。博久网络科技在 综合考虑当下主流分辨率状况、浏览器外观对显示空间的占用、人机工程学中对水平视角和聚焦范围的规定与8px单位等多种原因后,大家觉得960px是一 个相对愈加适当的页面宽度。在阿里巴巴中文网站中,推荐用定宽960px的页面,去除左右各4px的边距,中间的可视宽度为952px。
本文标题:网站制作中怎么样设计有效的网站布局?目前链接:https://www.cdcxhl.com/news/77037.html
网站制作、网络营销推广公司|博久网络,是专注品牌与成效的网站建设,网络推广营销网站优化公司;服务项目有网站制作等