如何构建网站
构建网站的步骤如下:
1、域名注册。网站建设的第一步,你需要一个属于自己的网址,即域名。
2、网站空间注册。网站空间用于存放网站程序。网站空间分为ASP、PHP、NET三种类型。
3、网站备案
国内网站空间都需要进行备案,未备案的网站不允许上线。
4、上传网站程序
网络上有很多免费的网站程序,如论坛(discuz)、博客(Emlog、WordPress、Z-blog)、综合站(PageAdminCMS系统)等,根据你的网站需求选择合适的程序。
5、添加网站内容。我们可以在备案期间完成网站内容的添加,添加内容相对简单。进入网站后台创建网站栏目,根据需要创建相应数量的栏目。
6、解析域名和绑定域名。备案完成后,可以通过解析将域名指向空间IP,解析完成后,在空间管理面板上将解析好的域名绑定。在地址栏输入你的域名,就可以访问到你的网站。
一步步教你打造电商网站导航设计
双十一即将来临,大家终于又可以尽情购物了,但众多设计师还在为网站优化默默努力,尤其是新入门的设计师,电商网站的导航设计可能也会让他们感到困扰。别担心,今天这篇文章将教你如何做好电商网站的导航设计,这个技巧一般人我不轻易分享。
随着互联网的发展,通过电子商务网站进行商品交易越来越频繁,面对庞大的信息量,访客可能会感到迷茫。因此,优秀的导航设计能够提升网站的易用性,对实现电子商务网站的高效运作具有重要意义。
此外,电子商务网站的首页导航设计必须以用户体验为原则,既要将网站所有信息体现在有限的导航栏中,又要为用户提供重要的帮助信息。网站因其独特的重要性和不可替代性,在电子商务网站设计中日益凸显出关键地位。
1、符合网站内容结构
在设计电商网站导航之前,应对网站整体内容有全面了解,并进行归类。需要注意的是,无需在导航中一一展示所有板块。电商网站通常有两个导航,分别是网站头部的总导航和侧边的分类导航。一般来说,总导航会较为笼统地展示网站商品,而分类导航则会较为详细。总导航内容过多,无论在体验还是视觉上,都会显得拖沓。以下是一个案例,当当网的总导航分类显得较为复杂琐碎。
另一方面,导航中显示的内容应与网站内容紧密相关,这也体现了导航与内容的匹配度。其中涉及到导航中或导航周围的广告,正如当当网案例所示,导航周边融入一些广告无可厚非,恰当运用不仅不会引起用户反感,反而能提升用户满意度。但需要注意的是,应尽量避免与本站内容无关、广告成分过于明显的内容,过量的无关内容会让用户在购物时感到干扰。
2、结合网站业务目标
首页导航是网站当前状况的缩影,用户通过导航可以大致了解网站销售的商品。
因此,导航有必要随着网站主营商品的变更或根据商品销量进行调整,让用户看到的导航始终与网站内容以及时下热门相符。(例如优设网的顶部导航,就挑选了最实用的设计师网址导航以及大牛云集的设计讲座,强烈推荐给大家)在电商网站运营过程中,许多问题会逐渐浮现,因此网站改版也是无法避免的过程之一。但在改版之前,应先列出所有问题,再思考这些改动是否真正解决问题。
改版前:
改版后:
设计师在不同项目的设计过程中,过程基本相似,但关键在于,每一次网站设计都会根据客户不同的业务需求产生不同的设计目标。一旦心中有了这个目标,就应时刻提醒自己,无论设计多么花哨或简单,都必须完整地体现这一目标。
唯品会在目标的体现上较为明显,将主营商品栏目种类和近期活动以最清晰的方式展现出来,有效减少用户思考时间,让用户在最短时间内做出点击决定。
3、遵从用户使用习惯
根据用户的使用体验和感受设计网站是必然的,但很多设计师会用周围同事的意见代替大部分用户的意见,这一点非常不可取。在导航设计时,设计师应将使用对象视为新用户或没有耐心的用户,尤其是电商网站,在第一时间满足用户需求,尽量降低导航的学习成本。例如,鼠标悬停的分类展开方式可以很大程度地降低用户的学习成本。
用户在页面停留的时间都是按秒计算的,因此,导航必须一目了然,让用户产生依赖感。此外,当网站决定改版时,导航尽量不要做太大改变,因为导航是网站中较为重要的组成部分,也是用户相对依赖的模块。一旦导航发生很大变化,会让用户产生陌生感和距离感,新技术只应用于无关紧要的地方。
关于用户体验,这里还有一些小细节可以分享。当用户的鼠标从一级导航移动到二级导航的瞬间,有时会因为移动角度和时间上的偏差,无意悬停在下面的一级分类中。虽然这只是一个不经意的小细节,但会让一些不耐心的用户感到恼火。根据我们的初步调查,目前市面上主流的电商网站在这方面做得比较合格。
另外,亚马逊的网站过于“简洁”,导航的底色与网页底色,以及导航的字体与网页的字体都过于相近,这在查看的某一瞬间会造成用户的视觉混淆。(如下图)
另外,亚马逊的网站显得“简练”,导览的背景色与网页背景色,以及导览的字体与网页的字体都过分相似,这在浏览的某一瞬间会引起用户的视觉困惑。(如下图)
4、避免重复的类别
上文已经提及,在导览的设计过程中首先要对网站的整体运营内容有一个全面的掌握,掌握之后才能制定出具体的板块,而首页导览的作用就是将这些板块做出详细的类别划分,在明确导览的目的和重要性之后,把类似的类别组合在一起,形成一个整体,这也就是主导览了。
在主导览的左下或右下方会有一个比较全面完整的类别导览,我们称之为局部导览。在一些较为知名的电商网站中,局部导览的使用率可能更高于主导览,这两者之间其实存在一种微妙的递进关系,要尽量避免内容重复。
无论是文字还是图片,重复性的内容会很容易让用户产生疲劳感。如天猫案例所示,“医药保健”和“医药馆”在字意上很相近,而且点击后的确进入了同一个页面,这样的重复性内容会明显降低有针对性需求用户的购物体验。
5、使用合适的文案
为了迎合用户在导览上只愿意停留短短的几秒钟,导览文字内容的可用性就变得至关重要。文字标签是传达信息最有力的途径,因此,导览中出现的文案应该避免使用一些用户很难理解的词汇,比如专业术语、缩写和个性化语言等。其中最常见的就是缩写,很多电商网站会由于排版美观,或是文字长度上的限制而选用缩写,从而牺牲用户体验,增加了用户对导览的理解难度。
在电商网站导览中,文案的首要任务就是让每个用户都能准确快速的理解相关信息。而作为设计师,我们理所当然的投入许多时间一味的专注于视觉美学,这是几乎所有设计师的通病,但这一通病在导览设计中却成了致命伤。清晰明了的表达是美观的前提,任何交互项目的最佳状态就是实现透明化。
6、清晰的视觉体验
从视觉角度上来说,用户只用几秒钟的时间扫视网站,所以导览的视觉设计必须符合逻辑,用色彩给用户提供一种指引,成为用户点击的向导。可点击的部分尽可能的明显一些,减少用户对其的猜测。在色彩的使用上应避免大片亮色,这会间接地降低导览文字的可识别度,与此同时,电商网站面向的是所有的消费者,因此,在导览与导览文字内容的色彩搭配上也要考虑到一些色彩障碍者。
京东的网站在这一点上做的还是比较好的,每一个层级的导览颜色由深及浅,让用户有一种循序渐进的感觉。整个导览区域的色彩搭配也很恰当,无论鼠标悬停在任何地方,所在的位置都能反应出一个比较舒适的页面。
7、为用户提供反馈
当用户对导览中的某一个元素有了动作之后,导览项都应该对此做出相应的回馈,比如当用户在类别导览上悬停或是点击某些文字内容后,文字应该做出一些改变,可以是字体的大小、颜色的变化,或是任何其他合适的效果。关于这一点,国内的大部分电商网站都做的比较到位。
一号店的二级导览就有很恰当的反馈信息,一整个选中的板块都被不刺眼的色彩所填充了,让用户很清楚地知道自己目前所在的位置。而展开的三级导览选中后的颜色就与其原本标出的热门商品的字体颜色有些重复,比较容易混淆。
8、导览符合网站整体风格
导览与网站整体风格的搭配要区分为视觉和内容两个部分。
在视觉上,大多数网站基本不会出现大问题,因为所有的设计师都懂得导览基本上占据了整个页面的主视觉这个道理,电商首页中只有导览既需要迎合网站的整体又同时主导着网站风格。
从内容上来说,导览的内容与网站的点击量,甚至商品销量都有着密切的关系。一旦用户无法通过导览找到自己想要的商品,就意味着商家丢失了一位客户。而如果能在导览中推荐一些商品给用户,也许能促进网站商品的销售。
导览要符合网站整体的风格可以细节到每一个小细节,甚至于任何的线框字体。这样做的目的主要是减少用户的页面跳跃感,尽量避免用户因为页面跳转的原因而产生的思考和反应。同时,对网站的整体美观程度也有一定的好处。
9、利于搜索引擎优化
搜索引擎的优化是几乎所有初创电商都会选择的推广方式,而电商导览是电商网站最主要的入口,基于此,有很多栏目的导览并不利于搜索引擎的抓取。在内容的设置上,应该将主要内容一目了然的展现出来,这样的设计不仅利于用户查看,也让搜索引擎蜘蛛能顺着导览目录层层深入。所以,在导览栏中尽量使用文本,减少用户思考时间的同时利于搜索引擎的优化,按钮和图片会阻碍到搜索引擎的访问和抓取。
拍拍的导览相对于种类网站就显得特别简洁。主导览上只有几个主要的模块,既让用户能快速的了解到网站的主营项目,也实力利于搜索引擎的优化。
10、趋于专业化的导览
商业化和专业化对B2B电子商务网站尤为重要。时下有很多电商网站的导览看起来比较杂乱,在色调和布局上也过于幼稚,这样的导览会让用户对整个网站的风格基调产生截然不同的看法。如果电商网站需要体现出严肃简洁的特点,就应该尽量避免过多的运动效果。作为导览栏,比其他标题栏更高的高度,更大的加粗字体是个不错的选择,但一旦过度反而会看起来不够精致。
乐蜂网虽然是一个偏向女性化的网站,但单看导览还是比较专业的。没有过多的色彩,使用的颜色和字体也都趋于商务化,类别也尽可能的减少,这样的风格带给用户最直接的就是正规正统,能在一定程度上增加用户对网站的信任感。
乐蜂网尽管是一个偏重女性化的网站,但单从导航来看却显得相当专业。其导航栏色彩简约,选用的色彩和字体均偏向商务风格,分类也尽量精简,这种风格使得用户感受到的是正规和正统,这在一定程度上提升了用户对网站的信任度。
总结:
AnyForWeb认为,电子商务网站的导航设计并非一成不变,各类网站应针对自身特点进行设计。例如,亚马逊等综合类电商网站商品种类繁多,那么4000万商品和4000个商品的导航设计必然存在较大差异。我们可以看到,淘宝从最初的一级导航按用户人群划分,到如今不仅扩大了搜索框,一级导航也以功能为划分依据。
而垂直类电商的用户对商品有明确的目标,因此在导航设计上往往需要根据自身业务逻辑进行科学分类索引,如京东和一号店的商品种类划分。
还有一种类型是由传统企业转型而来的电子商务,这类电商网站的营销通常以单个品牌为主,例如案例中的优衣库。由于分类和数量较少,除了传统的科学分类索引外,首页的单品推荐对单个商品的营销也颇具效果。
电子商务网站的导航设计应以用户体验为出发点,既要将网站所有信息在有限的导航栏中展现,又要为用户提供重要的帮助信息。
AnyForWeb Design
原文作者:AnyForWeb视觉设计
其他文章推荐:
网页设计风格如何把握?10招轻松搞定!!
网页设计中的分割法则(设计师必知的网页栅格)
UI设计师必看:那些让页面更加出彩的小细节