绿维网络绿维网络
 
建站资讯

建站资讯最新消息,企业数字化营销知识分享

旅游工作室网页设计

人气:  作者:  发表时间:2021-01-28 10:26:38
一、设计需求的确定
旅游工作室网页板块主要包括网站主页、新闻列表页、新闻详情页和图文列表页等。在本案例的设计中,我们将摒弃以往的一些设计思路,剑走偏锋,尝试一些新的设计风格。

用户浏览该类型的网站时,往往希望能通过网站看到世界各地的一些名胜景点,并从中选择一个理想的旅游目的地。因此,设计时应当把重点放在图片的选择以及图文的呈现方式上,这一点不仅适用于旅游类的网页设计,对于其他类型的网页设计来说,精致细腻的图片都会给设计锦上添花。

因此,在网页的视觉效果图设计阶段,一定要选择一些高品质的图片素材来填充模块。
设计网站首页时,可选用一些色彩饱满、艳丽的图片,这样更加能吸引用户的关注。在选择照片时,应尽量避免选择背景太杂乱的图片,以免干扰页面中的文字信息。

在页面的布局上,我们准备参照杂志的排版方式,尽量减少页面中的元素,保证页面中有足够的留白。这种布局方式在欧美风格的网页设计中极为常见,通常设计师会选用高质量的图片来填充页面,同时配合文字排版,达到让用户赏心悦目的。因此,我们也可以借鉴这种设计方式,简化页面布局,只保留有效信息,通过排版的变化让页面充满设计感。

二、首页设计
首页设计采用扁平化的设计风格,由于是旅游工作室的网站设计,所以选择了一幅高清的风景图片作为首页背景。选择背景图片时,要注意避开太过花哨的图片,注意背景与主标题的对比度。

1、在Photoshop中新建一个文件,并将文件命名为travel_index,将宽度设置为1920像素,高度设置为1080像素,分辨率设置为72像素/英寸。

2、选择一张高清图片导入当前窗口,作为首页的主体元素,以达到吸引用户眼球的目的。

3、在页面中部偏上的位置设计一个欢迎语。在当前窗口中设置两条参考线,分别为垂直居中和水平居中样式。

4、参照参考线,将文本摆放在参考线偏上的位置,并将文本设置为居中对齐样式。选择字体样式为英文字体即Arial,好处是能提升页面的设计感。

5、对标题文字即WELCOME进行“纵向拉伸”处理,设置“纵向拉伸”数值为130%,字号为90点,字间距为700,字体为Arial,字体属性为Blod。设置描述文字字体为Arial,字体属性为Regular,字号为26点,字间距为100,设置文字颜色为白色。

6、设计导航时,我们抛弃以往顶部的导航设计,将导航放置在页面的右侧,并做“垂直居中显示”处理,同时设置文字字号为16点,字间距为100,字体为Arila,字体属性Regular,字体颜色设置为白色。

7、对于“当前选项”内容的设计,选择用一条横线来表示。

8、在页面的最下方添加网站的版权信息,字体为Arial,字体属性为Regular,设置字号为14点,字间距为50,字体颜色设置为白色。

9、添加一个企业Logo。使用“矩形工具”,新建一个尺寸大小为180像素X180像素的矢量矩形图形,设置Logo背景色为红色,以突出Logo的位置。

10、将Logo文字和元素置于红色背景中,并缩放到合适的尺寸大小。

三、二级页:新闻列表设计
新闻列表板块的设计一般使用图片与文字相结合的排版方式,按照人从左往右的阅读习惯,通常图片会在左侧,文字在右侧,且图片的视觉量级要重于文字,因此“左图右文”的排版方式也可以起到视觉引导的作用。

设计过程中,在视觉区里域插入图片时,可采用“创建剪切蒙版”的方式,如此比较方便图片内容的后期修改。需要注意的是,在缩放图片前,需要先执行“转换为智能对象”的功能操作,否则会造成图片画质缺失。

四、二级页:新闻详情页设计
新闻详情页的设计延续部分列表页的设计,Logo、导航、左侧装饰效果以及底部版权信息保持不变,只在右侧做改动即可。

在图文的排列上,由于需要展示大段的文字,因此可适当放宽文字之间的间距与行间距,避免产生拥挤的感觉,从而造成视觉疲劳。另外,在字体颜色的选择上,要注意与背景色的对比不宜太过强烈。

五、二级页:促销信息列表页设计
在网站的二级页中,将促销信息也用图文搭配的方式来展现。延续前面二级页的设计风格,本页设计依然保持左侧形式不变,在右侧做样式调整。这里将图文列表长度缩短,仅保留图片与标题,使页面更为简洁,不过这里要注意的是,图片的数量不宜过多,须保持适当的留白。

随着社会的不断发展,用户阅读习惯也在不断发生改变,人们每天都会接触大量的信息,接收信息的过程中,人们更倾向于阅读图片而非文字,因此在图文的组合上,文字要尽量精简。

六、视觉效果图的展示
在视觉效果图完成后,需要将效果图用模板展示,这样做的好处是能够提升视觉效果图的美感,比单纯展示单张图片更能吸引人们的注意力。

总结:
在网页的设计过程中,需要注意以下3点。

1、页面中要留有适当的留白,以制造一些空间感,使其透气。

2、在色彩的选择上,可以尝试突破常规,但不建议使用超过3种颜色(无彩色除外),以免造成视觉混乱,重点不明确。

3、在设计过程中,应兼顾移动端的使用效果,如影响速度、浏览时的视觉效果等,(响应式设计如今已是网页设计必须考虑的问题,也是影响用户使用体验的重要因素)。

此外需要注意的是,在网页设计中,布局与排版并非一成不变,设计时可以从身边的事物中取材,并获得灵感,通过不断尝试可以摸索出新的视觉效果。
旅游工作室网页设计:http://www.luweit.com/news/jianzhan/196.html
标签:
热门标签
相关新闻
免费获取一份方案或报价
* 请认真填写需求信息,我们会在24小时内与您取得联系。

关于我们

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