网站风格及框架规划

简介: 做网站重要的一环是页面制作,而页面制作的第一步就是确定网站风格及框架规划。

一、网站风格定位
网站页面的美化首先要考虑风格定位,网站的风格往往与行业有很大关系。对于不同性质的行业,应该体现出不同的网站风格。
如政府部门的网站风格一般比较庄重;娱乐行业则更加活泼轻松;电子商务网站则可以贴近日常生活,更亲民。任何页面都要根据主题内容决定其风格与形式,只有形式与内容达到和谐统一,才能收获理想的宣传效果。

简单介绍一下常用的几种网站风格:

高端商务风
商务风网站的主要目的除了展示企业形象外,还要加强企业与用户的连接。
所以这类网站更加强调实用性,页面简洁大气,层次分明;为增强互动性和销售转化还会提供问题反馈、留言咨询、预约表单等。

极简风
极简风的网站崇尚“少即是多”(Less is More)的设计理念。
在网页设计中,删除所有让用户无法专注的内容元素,只留下真正必要的要素,以实现接口界面的单纯化。
屏幕上的要素越少,用户的注意力被分散的可能性就越小,留下的要素传递信息的能力就越强。如果屏幕上的要素只有一个,那么信息就能准确无误的传递给用户。

时尚风:
时尚风的网站追求视觉效果,通过色彩的搭配与碰撞带来强大的视觉冲击来吸引用户的关注。
但是这类网站的风格重心在产品本身,要优先把产品图片处理得当,再考虑整体的页面布局。

扁平风
扁平风网站的设计重点就是「简单」,通过弱化纹理、透视、阴影等去除冗余的元素和排版,突出重点内容,让页面看起来更加干净美观。
这种风格的网站提升了网站信息的内容层级,让用户更加便捷的找到需要的内容。同时,扁平化的界面能更好的实现不同尺寸的转化。

二、网站框架规划
在确定好网站的风格后,下一步就是要设计版面布局。一个好的网页布不仅会让访客耳目一新,同时还能让访客轻松找到他们所需要的信息,以此来增强网站在用户心目中的形象。

网站框架规划包含3个方面,网站栏目规划、网站页面规划、网站功能规划。下面我就从这三个方面为大家一一讲解。

1、网站栏目规划
说在前面,成功的栏目规划是基于对用户需求的理解。当你对用户及其需求理解得越精准、越深入,网站的栏目就越具有吸引力,也就越能留住潜在客户。

所以,在做规划时,网站栏目应该具备以下两个功能。

①提纲挈领,点题。
网速越来越快,信息越来越丰富,但浏览者却越来越没有耐心。打开网站超过10s还没找到需要的信息,就会毫不客气的关掉。那么决绝,不带走一片云彩。
要想让浏览者在你的网站停下脚步,就要在页面上给出清晰的网站内容的“提纲”,也就是网站栏目,这样浏览者就可以一目了然的找到自己需要的内容。
总的来说,网站的栏目是对网站内容的高度提炼,不需要多么优美的文字,只要用最简练的语言提炼出网站每部分的内容,清晰的告诉浏览者你的网站是做什么的,有哪些信息和功能,就够了。

②清晰导航,便捷。
所以栏目除了有“提纲”的作用外,还应该为读者提供清晰直观的引导,让浏览者方便快捷的到达网站的所有页面。

网站栏目的导航作用通常包含以下几种情况。

全局导航
全局导航可以帮助用户随时跳转到网站的任何一个栏目,通常来说,全局导航的位置是固定的,可以减少浏览者查找的时间。

路径导航
路径导航显示了用户浏览页面的所属栏目及路径,帮助用户访问该页面的上下级栏目,从而更完整地了解网站信息。

快捷导航
对于网站的老用户而言,需要快捷的到达所需栏目,快捷导航就为这些用户提供了直观的栏目链接,减少用户的点击次数和时间,提升浏览效率。

相关导航
为了增加用户的停留时间,在做网站策划时还需要充分考虑浏览者的需求,为页面设置相关导航,让浏览者更方便的去往相关页面,能够无形中增加对企业的了解,提升合作几率。

2、网站页面规划
网站页面是网站营销策略的最终表现层,也是用户访问网站的直接接触层。所以在做网站页面规划时,应该站在用户的角度思考。
要遵循以下原则:
①要符合用户的浏览习惯:根据网页内容的重要性进行排序,让用户移动最少的次数,找到所需的信息。
②要符合用户的使用习惯:根据网页用户的使用习惯,将用户最常使用的功能置于醒目的位置,便于用户查找及使用。
③要符合用户的行业属性及网站特点:通过网页色彩、图片、布局等让客户在打开网页的一瞬间,就直观的感受到网站所要传递的理念及特征。
④图文搭配,突出重点:用户对于图片的认知程度远高于文字,所以,适当使用图片可以提高用户的关注度。此外,元素过多会分散用户的注意力,确立页面的视觉焦点也很重要。

3、网站功能规划
个人意见,网站功能规划得好,可以很大程度上增强用户粘性,可以说是搭建网站的点睛之笔。
一般网站的通用功能有:产品管理、文章管理、在线客服、表单管理、在线地图、电商管理等。

三、网页页面布局设计
网页设计与平面设计有许多共同之处,在了解一些设计的基本原则后,再针对网页的特殊性加以调整,还愁设计不出美观大方的页面嘛?!

1、版面编排原则
①主次分明、中心突出。
每一个页面,都有一个视觉中心,一般在页面的中央,或者中间偏上的部位。因此,一些重要的文章和图片可以放在这个位置,在视觉中心以外则安排那些稍微次要的内容。

②大小搭配、相互呼应。
较长的文章或标题,不要编辑在一起,要有一定的距离;同样,较短的文章,也不要编排在一起。对待图像的安排也是同样,要相互错开,错落有致,页面才会更好看。

③图文并茂、相得益彰。
文字和图像具有一种互补的视觉关系,文字太多,会显得页面沉闷,图像太多,又缺乏信息量,所以图文结合是最佳典范,既能活跃页面,又能提供丰富的内容。

④简洁一致、整齐划一。
保持简洁有两种做法,一是使用醒目的标题,二是限制所用的字体和颜色的数目。一般每页使用的字体不超过3种,一个页面使用的颜色少于256种。
保持页面整齐划一则需要从排版下手,每个页面的页边距、文本、图形的间距都保持一致等

2、常见的网站页面结构类型
①“厂”字型布局
基本布局是页面顶部为logo+广告条,下方左侧为主菜单栏,右侧显示正文信息。
这种布局方式一般应用于企业网站的二级页面。

②“国”字型布局
基本布局是最上面是网站的logo、广告语以及导航栏,下面是网站的主要内容,左右分别列出一些栏目,中间是主要部分,最下方是网站的基本信息。
大中型网站常见的布局方式。

③“框架”型布局
框架型布局一般分为上下或左右布局,一栏是导航栏目,一栏是正文信息。复杂的框架结构可以将页面分成许多部分,常见的是三栏布局,一栏放置图像广告,一栏显示导航栏,一栏显示正文信息。

相关文章
|
3月前
|
JavaScript 开发者 微服务
构建高效网站后台:插件化管理的艺术与实践
【7月更文挑战第5天】在现代Web开发领域,随着业务需求的日益复杂多变,网站后台管理系统面临着前所未有的挑战。为了提升系统的灵活性、可维护性和可扩展性,越来越多的开发者倾向于采用“插件化”管理的方式。本文将深入探讨如何在网站后台实现高效的插件管理体系,通过理论讲解结合实际代码示例,引导开发者掌握这一先进开发模式。
52 1
|
5月前
|
存储 前端开发 Java
软件体系结构 - 架构风格(13)MVC架构风格
【4月更文挑战第21天】软件体系结构 - 架构风格(13)MVC架构风格
125 0
|
5月前
|
开发工具 git
uniapp项目实践拓展章:代码统一风格
uniapp项目实践拓展章:代码统一风格
96 0
|
5月前
|
数据采集 运维 Kubernetes
我在平台与 AIGC 的交互组件一些设计经验
这里阐述以平台运营为主,这里假设说已经有一个平台,包括技术、数据、运维、管理、运营等基础设施的能力。 这个设计原来主要的问题是超自动化的提升,结合 LLM 为了更好的实现,在这个过程中,也包含了一些自主的感知和学习的能力,带有智能体的一定的特征。在前期的研究中也是不断的查看和摸索了很多的开源项目,包括一出来就热门的 Github 项目,但在使用遇到的情况更多的是还只是属于一些例子或者带有很多不稳定因素,并没有说见到能达到较稳定的层面。
|
前端开发
「前端经验总结」大型业务项目中,前端如何撰写设计文档
设计文档可以帮助开发梳理业务功能,呈现优质的开发思维的载体。另外,当开发思路逐渐丰富,开发速度也就提上来了。所以本篇分享笔者前端的开发中尤其是大型业务项目,是如何撰写设计文档的。
1310 1
|
12月前
|
JSON 数据可视化 JavaScript
OneCode 基于“真实代码”代码的建模设计,无缝整合二次开发
在很多优秀的低代码平台中都支持了本地代码导出的设计,方便开发者二次集成,但能够导出的前提是已经通过低代码平台进行了初步的数据建模,界面绘制等基础性的操作。这些导出的代码虽然很大程度上减轻了开发者的代码量,但在项目的迭代过程中,遇到数据或需求变更。这些代码就又会成为开发者巨大的负担,重新由低代码平台建模会产生代码上的冲突无法解决,而重新用code编写这一步代码则又面临手工代码与“机器代码”的整合问题。而更为致命的问题是项目上线后,当直接用户希望通过低代码工具进行维护系统时更是“闪崩”。 本文将结合OneCode的底层编译原理来讲解 OneCode基于真实代码的建模解决方案。
|
存储 缓存 监控
团队的技术方案设计模板
大家参考我这个方案设计模板(提纲)和相关介绍来做自己的方案设计的时候,可以根据自己的实际业务情况和背景做相关目录的删减,最后得出自己最终的方案设计,然后再去进行方案评审。
|
消息中间件 供应链 监控
业务团队如何形成统一的设计风格
首次上线应用,面对业务框架搭建你是否曾感到无从下手?维护线上应用,面对大量历史包袱你是否正避坑不及深陷泥潭?为何同样是业务应用,不同人的设计风格千差万别?为何最初的设计经过多个迭代后总是面目全非?新人来到团队,怎样才能快速了解业务,不被大量技术细节折磨?如果你也有这些困扰,希望本文能提供些许帮助。
385 2
|
XML 存储 设计模式
如何形成统一设计风格-实践篇
在上一篇《业务团队如何统一架构设计风格?》中,探讨了一种业务架构的设计规范,以期达到这些目标:用标准约束技术细节;用技术工具而非文档推行标准;持续重构而非造新轮子;重视业务建模。但通篇表述较为抽象。本篇将总结团队近来的架构演进工作,以更具体的技术细节,详细阐释该理念,作为“统一业务设计风格”的实践篇。文中详述了多个层面的设计规约和基于规约的搭建方式,并在末尾回答了上一篇的诸多疑问。
如何形成统一设计风格-实践篇
|
消息中间件 供应链 前端开发
业务团队如何统一架构设计风格?
首次上线应用,面对业务框架搭建你是否曾感到无从下手?维护线上应用,面对大量历史包袱你是否正避坑不及深陷泥潭?为何同样是业务应用,不同人的设计风格千差万别?为何最初的设计经过多个迭代后总是面目全非?新人来到团队,怎样才能快速了解业务,不被大量技术细节折磨?如果你也有这些困扰,希望本文能提供些许帮助。
业务团队如何统一架构设计风格?
下一篇
无影云桌面