绿维网络绿维网络
 
解决方案

解决方案量身定制企业品牌数字化营销解决方案

酒店预订网站建设解决方案

人气: 发表时间:2021-01-26 09:33:34
一、设计需求的确定
网上酒店预订是日常生活中常会使用的网页功能之一。一般情况下,使用的流程为用户注册、酒店选定以及完成支付等。

这里选取了某一个酒店的“网站首页”作为参考案例,进一步优化其网页布局,以便更好的符合酒店方面的开发需求。

根据多数网站的设计惯例和用户的使用习惯,网站首页一般设置有酒店选择、促销信息以及网站介绍等功能;在网页的布局上,需要做到张驰有度,保留适当的留白空间来缓冲大量信息带来的视觉疲劳感。

二、确立设计规范
网站的设计风格,依然选择当下流行的扁平化风格。同时,希望用户在浏览网站时能有赏心悦目的感觉,因此在设计上会采用大量的实景图片来提升视觉体验,颜色选择明度、饱和度较低的色彩,以保证视觉上不会显得混乱。

在字体设计上,用部分英文字体来提升设计感,英文字体选用的是Arial和ProximaNova,中文字体选用的是微软雅黑。

三、导航设计
导航采用顶部设计,用较重的黑色来压住顶部的色调,同时在导航的左侧搭配较明亮的红色Logo,既显得十分稳重又不会过于沉闷。导航的设计建议用简清爽的风格,不宜过于花哨。

1、在Photoshop的“菜单栏”中执行“文件>新建”命令,然后在张出的“新建”对话框中将文档命名为BookingWebsite-V0.1,将宽度设置为1920像素,高度设置为3700像素,分辨率设置为72像素/英寸。

2、新建一条高度为40像素的参考线,然后选择“矩形工具”,并沿参考线绘制一个1920像素X40像素的适量矩形图形,并将图层填充为黑色。

3、将内容区的宽度设置为960像素,然后新建两条参考线以控制中心内容的范围,参考线左右边距的计算方式为(1920-960)÷2=480。

4、在主内容区的左上角设置一个网站Logo。新建一个矢量矩形图形作为Logo背景,设置图形尺寸大小为150像素X150像素,并将颜色填充为玫红色。

5、将练习时使用的Logo拖入画布当中,并将其置于Logo背景图层的上方。

6、导航右侧为Sign in(登录)和Sign up(注册)入口,设置字体为Arial Regular,字号为14号,字体颜色为灰色。

四、Banner设计
案例的Banner中包括一部分表单、促销信息的设计。表单的设计需注意选项要明确,避免产生岐义,否则容易使用户混淆和误选。同时,应注意控制各个部分的间距,促销信息的设计应注意虚实对比,尽量避免大量的文字描述,以免造成视觉疲劳,这里建议采用图片与文字结合的方式。

在Banner背景的设计上,我们摒弃了以往常见的“矩形分割”样式,采用了类似“笔刷”的背景样式,从而使整个页面显得更为活泼。在这里,可以找一些笔刷的矢量素材来实现这一样式。

1、新建画布
新建一条高度为950像素的参考线,选择“矩形工具”,并沿参考线绘制一个尺寸为1920像素X950像素的矢量矩形图形,并将该图形的图层命名为bg-banner。

2、将选好的背景图拖入画布
按住Ctrl键的同时用鼠标左键单击图层面板中的bg-banner图层,然后用鼠标右键单击“背景”图层,同时选择“创建剪切蒙版”。

3、这一步将通过叠加“矢量笔刷图形”来制作笔刷效果。首先将选好的笔刷拖入画布中,并调整好形状和位置。

4、为“笔刷”图层添加“图层样式”效果。选中该图层并打开“图层样式”面板,勾选“颜色叠加”选项,将“混合模式”设置为正常,颜色调置为白色。

五、图文排版设计
针对本案例中的“企业介绍”区域,采用了“图文结合”的方式,这也是当下设计中常用的设计风格。同时,在摆放图片的文字时,应采用统一的对齐方式,以保持视觉上的统一感。此外,文字的摆放应注意字体视觉的强弱对比,可用不同字号或不同颜色等方式来对信息的层级加以区分。

1、新建画布
将需要的文字和图片都拖入画布当中,设置图片的文字为“居中对齐”样式,设置主标题字号为50点,字体为Proxima Nova,字体属性信息为Bold,字体颜色为深灰色。

2、为保持视觉上的统一性,为“企业介绍”区域里的每个图标添加一个边框。在“工具框”中选择“矩形工具”,产绘制一个矩形图形,设置矩形的描边颜色为蓝色,描边大小为3像素,颜色填充样式为无。将绘制好的边框复制两个出来,并分别修改粉红色和黄色,然后逐一将图标框定起来。

3、文本层级用不同颜色、不同字号加以区分和显现
设置标题文字的字体为Arial,字体属性信息为Bold,字号为18点,字体颜色为深灰色。

4、设置详情描述文字的字体为Arial,字体属性信息为Regular,字号为14点,字体颜色为浅灰色。

六、图集设计
图集部分的设计采用左右滑动的“焦点”样式,既可为页面增加动感,也避免了因为图片过多而影响页面的美观度。设计时要注意单张图片的宽高比,尽量保持在3:2、4:3或5:4的比例。

图集展示部分的背景与Banner类似,均采用“笔刷”的样式。笔刷素材的选择尽量要有一些变化,可以通过垂直或水平变换来营造不同的效果。

1、新建画布
标题字号要与其他同等级的标题字号保持一致,设置字体为ProximaNova,字体属性信息为Bold ,字体颜色为白色。

2、设置标题下方的文字字体为Arial,字体属性信息为Regular,字号为14号,字体颜色为白色。

3、图集的展示采用“轮播”的形式,单张图片(含背景)宽度的计算公式为(总宽度-图片间距X3)÷4。假设将图间距设为22像素,则单张图片(含背景)宽度的计算公式为(960-22X3)÷4=222像素。这里按照2:3左右的比例将图像高度设为300,根据这一尺寸,新建一个矢量图形,设置尺寸为222像素X300像素,颜色填充为白色。

4、新建一个矩形矢量图层,设置矩形尺寸为200像素X220像素,颜色可任意填充,然后将图层命名为bg-img,同时对该图层与图集的单张背景图层做“居中对齐”处理。

5、将需要展示的图片拖入画布当中,然后按住Ctrl键的同时用鼠标左键单击图层面板中的bg-Banner图层,然后用鼠标右键单击“背景”图层,同时选择“创建剪切蒙版”。

6、为图片添加描述性文字内容,设置文字标题的字体为Arial Regular,字号为14点,字体颜色为浅黑色。

7、添加副标题文字信息,设置副标题的文字为Arial Regular,字号为14点,字体颜色为红色。

8、为了使页面有一些层次感,这里为白色背景图层添加一些投影效果。用鼠标左键单击该背景图层,在弹出的“图层样式”面板中,选择“投影”选项,设置混合模式为“正常”,不透明度为100%,角度为90度,距离为4,颜色为灰色。

9、将上一步制作好的图层编组,并将该组复制3个出来,同时横向水平拖动,设置组间距为22。

10、在左右两边各添加一个箭头,这部分的设计就完成了。

七、企业信息设计
企业信息和辅助信息的背景设计,同样采用“笔刷”的样式,制作方法与之前相同。在遇到图片或文字展示的情况时,可以对背景图进行“高斯模糊”处理来减弱视觉效果,这种设计手法在日常设计中的应用广泛,灵感主要来自相机拍照产生的景深效果,因为模糊的背景可以突出前景元素,具有非常好的视觉体验。

图文排版需要控制文字的数量,尽量不要出现大篇幅的段落描述,否则会令用户产生焦虑和紧张的心理。相比大段的描述,精简的文案更能吸引用户的注意力,也更能引起用户的阅读兴趣。

针对页面左侧的标题和文字信息,在设计上使用了相同的字体,但用不同的颜色和字号进行了层级区分。排版时,可参考和借鉴多种形式,并加以结合运用,而不必拘泥一种形式。

辅助信息区域和设计,不必使用太多花哨的颜色做搭配,以免给用户过于强烈的视觉刺激。可选取明度和饱和度都比较低的色彩来进行搭配,同时注意控制页面内设计元素的数量,避免喧宾夺主,这也是辅助功能区的基本设计原则。

由于深色可以压住整个页面的视觉效果,使网页看上去更为稳重,因此针对该区域最下方的“社交链接信息”部分,背景色使用的是整个网页中除顶部导航外最深的深灰色。

该区域里的4个社交媒体图标的背景颜色,选择的是4种较为明亮的颜色,目的是突出媒体图标,同时衬托出整个网页的活泼之感。

提示:在设计过程中,如果遇到过于沉闷的配色方案,可使用少量明度或饱和度较高的色彩来提升页面的设计感。配色时,要注意观察这些颜色是否与周边的设计元素相协调。
如没特殊注明,文章均为东莞网站建设编辑,转载请注明来自:http://www.luweit.com/solutions/195.html
标签: 网站方案
相关方案
免费获取一份方案或报价
* 请认真填写需求信息,我们会在24小时内与您取得联系。

关于我们

东莞市绿维信息技术有限公司致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发,等服务范围,并且涵盖基础的域名服务、主机服务;企业邮箱、网络营销等应用服务;
more>
立即咨询
快速获得解决方案
咨询电话
135 8088 5012
公司地址
广东省东莞市南城建设大厦7F
公司邮箱
Copyright ©2016-2021 东莞市绿维信息技术有限公司 粤ICP备18104664号-2