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

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

电子产品网站建设解决方案

人气: 发表时间:2021-01-25 08:51:13
在网站的建设中,我们经常会遇到电子类产品的网站建设,下面,我们以一个电子产品的网站为例,给大家分享一下电子产品网站建设的解决方案。

一、概念图的绘制
概念图的绘制,在功能的设置上可以先参考一个电子产品行业做得比较好的网站,进行一定的参考。

网站首页的主要功能,一般包括导航、搜索、Banner、部分产品展示(视频图片)以及网站辅助信息等;产品详情页的主要功能包括导航、产品图、购物车、产品详情及网站辅助信息等。

在网页设计中,可根据之前设定好的网站主要功能来绘制简单的概念图。在练习中可以先充分发挥创意与想象,不必在思维上限制太多,也不必担心技术上的可行性,直到创作出多种设计方案后,可根据个人喜好,并结合用户需求来优化设计细节。

提示:在实际工作中,设计师们在概念图设计阶段,还需要与相关技术人员不断沟通方案的可行性,听取合理化建议,进而修正设计方案,以求达到最佳的设计效果。

概念图需要画出页面的布局、功能及大概的展示效果,在概念图中,我们做了两种不同布局样式的尝试。电子产品官网的设计,网站栏目分别为导航、Banner、产品视频展示、产品静态图片展示及网站信息。

在设计中,除了首屏的Banner外,产品的展示图都相对较小,因此,在页面布局中,我们将产品展示作为重点区域来设计,占据了页面的大部分空间,这样做是为了突出产品的形象,用产品外观的精致感来打动用户,提升用户的购买欲和页面的设计感。

绘制草图主要涉及的绘制作工具有铅笔、中性笔、马克笔等。对于草图的绘制工具并没有具体的要求,在绘制过程中需要完整展示页面布局,实现产品的需求,并能通过草图验证页面布局的合理性。网页设计中草图的作用是方便产品研发初期沟通工作,并确立需求,因此对于草图绘制一般没有太严苛的要求,只要线条精简,能清晰的地表达需求即可。另外,可在页面中直接对方案做出修改。

二、原型图的制作方法
确定好概念图之后,就可以根据概念图制作原型图了,在原型图中需要准确标注各个模块的主要功能、比例和信息展示方式,为随后即将制作的视觉效果图提供依据。

原型图的制作工具主要有Axure PR、Mockplus等。对于网页设计师来说,原型图制作并不是必备技能,只需要简单了解即可,有兴趣可以自己动手制作原型图。原型图相对草图来说,涉及的规范较多,且一般需要对页面布局进行比较规范化的标注,同时,将整个网页的交互过程做了展示,方便网页设计师进行接下来的工作。

三、确立基本风格和规范
确立网页的风格是设计前需要重点考虑的问题,它决定了整个设计的基调,同样,工作中也经常会遇到与甲方讨论设计方案采用何种设计风格的问题。要注意的是,在设计风格的确认阶段,需要用一些相对具体的词汇来进行描述,如“蓝色调”“扁平化风格”等,而不是“高大上”“洋气”以及“高端”等这种抽象的概念。作为甲方,有时可能无法用专业的词汇来描述自己的想法,如果设计师们可以提供一些不同风格的案例供甲方参考,会大大提高沟通效率。

而针对设计规范,则需要用具体的数据来作为设计依据,并贯穿整个设计过程,这样才能保证整个网站设计具有一致性。同时,规范化的设计可以减少开发人员的工作量,加快项目的研发进度。

1、根据风格确定配色
色彩可以表达情感,以电子产品为例,具体分析网页设计中应该如何为网站选择合适的配色。

在商业设计前期,设计师需要了解该品牌的相关信息,设计的内容必须符合品牌的宣传理念。

2、确立设计规范
(1)在电子产品网站的设计中,为了配合大屏显示器的显示效果,将网页内容部分的宽度设定为1200像素,目前1000像素~1200像素的网页设计已经逐渐占据主流,这样展示使页面在视觉上更加舒朗、透气。

(2)字体、字号和行间距
在网站字体的选择上,中文字体使用“微软雅黑体”,英文字体使用Arial。在首页设计中,正文使用的字号为16点,标题使用的字号为22点,使用的行间距均为28点。

在二级页中,为了使信息更加易读,字号相比首页来说有所放大。

在字体颜色的选择上,既要与背景色形成高度对比,又要避免对其他信息或图形造成视觉干扰。因此,在设计中,需要高亮提示的信息部分使用红色,其他的字体颜色均选择网站的两种辅助色即白色和深灰色。

四、网页制作的基本方法
1、新建画布与设置参考线

(1)新建画布
在“菜单栏”中执行“文件>新建”命令,在弹出的“新建”窗口中将画布命名为Website_V0.1,然后将宽度设置为1920像素,将高度设置为3000像素,将分辨率设置为72像素/英寸,将颜色模式设置为RGB颜色,将背景内容设置为白色,设计好之后单击“确定”按钮,完成新建。

(2)设置参考线
根据之前设置的画布宽度(1920像素)和中间内容宽度(1200像素)的大小情况,从左侧标尺拖出参考线作为参考。

2、导航栏的设计
在制作“导航栏”之前,需要了解的是,原型图中设定的导航信息主要是品牌Logo,其次为产品分类、关于我们和搜索图标功能。

提示:在视觉效果图的制作过程中,图标(icon)应尽量使用适量格式,以便于缩放和调整。如果需要用到图片,要将图片转换为智能对象再使用。

导航部分做完后,将所有图层编组,并命名为导航,完成后将该组锁定。每个部分做完之后要对“组”进行锁定,避免在接下来的操作过程中出现麻烦。

3、主内容区的设计
(1)Banner的设计
在该页面中第1屏的位置放置一个1200像素X670像素的Banner,并且根据用户的需求,在这里需要设置一个“立即购买”的入口。排放元素时,我们选择了一张白色的背景图,既能让产品的相关信息清晰地在背景中显现出来,又能让页面看起来干净、通透。根据Banner中各个元素的安放位置,将“立即购买”按钮设置在该页面的左下方位置,且以红色样式显示,以刺激用户购买。

按钮可通过适量图形的绘制来实现。首先在“工具栏”中选择“矩形工具”,然后在画布中绘制一个275像素X75像素的矩形,同时设置矩形的填充样式为无,矩形描边为2像素。

描边的颜色选择网站的主色调即红色,设置完成后编组整理,完成后的页面效果。

提示:对于设计新人来说,如果缺乏设计灵感,可以在样式上参考其他同类型优秀网站的设计,将别人的思路借鉴过来,再通过反复练习和思路和整理,丰富自己的设计经验。

(2)产品展示区设计
在Banner的下方,根据原型图设计,做一个产品展示区。针对该区域的设计,采用一个“错位”的设计方法,即以产品图在背景色中部分重叠的摆放方式,将上下衔接起来,使整个页面的设计更具整体性,让版面活跃起来。

(3)视频制作区域
视频区域的背景色选择浅灰色,目的是更好地配合视频展示,不会在用户观看视频的时候产生不必要的视觉干扰。

在视频的左侧设置一个视频简介信息,背景色选用红色。具体取色上使用的是醒目的大色块,目的是让整个区域更加突出,吸引用户。
在视频播放器的设计上,首先使用“矩形工具”制作一个770像素X720像素的矢量矩形,然后将提前选好的“视频默认图”拖入画布中,调整到合适的位置后,选择“创建剪贴蒙版”选项新建剪切蒙版,目的是便于后期调整视频区域的尺寸,不再需要重复剪裁视频默认图。

在视频简介部分的设计上,选择将背景区域部分覆盖在视频的位置,营造出一种层次感。

(4)“产品展示”区域的制作

在产品展示区域的制作过程当中,首先将“产品”素材重叠放置在视频的部分,且为了突显产品的立体感,我们还为素材添加一些“投影”效果。

(5)辅助信息栏的设计
辅助信息常出现在网站的最底端,且这部分的设计可以选择较为简洁、明了的样式。

五、二级页设计
在网页中,二级页面的主要功能在于在线购物,需求相对简单,其设计重点是掌握排版技巧,且素材图一定要精致,以吸引用户的视线,从而提升用户的购买欲。

在具体设计的过程中,要特别注意利用好高亮色,以提升整个页面的气氛。背景主要使用了深灰色,深灰色搭配高清产品图能够体现科技感,也不会对产品造成视觉干扰。

1、导航栏的设计
二级页的导航设计延续首页的风格,导航栏的高度保持120像素不变,将品牌Logo适当缩小,且上下垂直居中显示,导航的背景颜色设置为深灰色。

2、“在线选购”界面的制作
针对“在线选购”界面设计,在第1屏的位置,采用了750像素的高度,目的是尽可能地放大产品图,同时将更多的选择信息展现给用户。产品图片右侧的信息流,使用“左对齐”的排版方式,且产品标题使用了红色。

然后在该产品标题的下方设计一个产品简介区域,注意此处不宜出现过多的文字内容,以免影响用户的视觉体验。完成之后设置一个“用户评分”的展示功能,在星形的处理上,使用了圆角形状,使其看上去更加柔和,同时也是为了配合耳机的圆润造型,让视觉上更加协调。星形颜色设置为较亮的明黄色,因为在深色背景下,黄色会显得十分活跃和明显,完成设置的效果。

在“用户评分”区域的下方罗列了产品的几个特性,这部分内容使用了较小的字号,与标题的字号形成了对比,使整个界面的层级关系清晰、明朗。

针对该产品我们为用户提供了3种颜色进行选择,颜色的表现形式选用合适的图形,设计理念主要包括两个方面,一是与产品外形轮廓的形状接近,易形成统一的视觉感受,二是与品牌的Logo形成高度统一。

六、产品介绍栏的设计
在该区域的设计上,我们希望能重点突出产品的细节,并且能够在排版上灵巧多变,跟首页的设计类似。依然选择左右对称的排列方式,平衡视觉重心。

在页尾区域,添加与首页相同的辅助信息,这样整个页面的制作就完成了。

七、标注的方法
在视觉效果图完成之后,要对效果图进行尺寸标注,以方便前端工程师进行后面的工作。标注时所涉及的软件有多种,这里使用的软件是马克鳗。

标注时,需要将各部分的背景色色值、宽度、高度、文字色值、字号和行间距等标注在图上,完成标注后,网站设计的部分就算完成了。

总结:在网页设计中,页面元素多被框在一些模块当中,这样的块状布局虽然可以使页面整齐划一,但难免容易让用户感到死板。因此在网页设计的实际应用当中,元素的展现可采用重叠、模糊等形成,这样可以使版式灵动多变,且富有层次感,带给用户耳目一新的感受。并且,现今的网页设计也正在逐步突破以往的样式束缚,越来越多的新颖样式呈现在我们面前。因此,我们可以通过多看、多学的方式,将好的设计元素运用到设计作品中,但要牢记的是切勿生搬硬套,适合的风格才是好的风格。
如没特殊注明,文章均为东莞网站建设编辑,转载请注明来自:http://www.luweit.com/solutions/193.html
标签: 网站方案
相关方案
免费获取一份方案或报价
* 请认真填写需求信息,我们会在24小时内与您取得联系。

关于我们

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