51阅读吧 - 为您打造专业优质的文章分享平台!
您的当前位置: 51阅读吧 >

网站设计总结|怎么设计网站目录结构?

NO.1 怎么设计网站目录结构?

  网站目录是网站建设的一个重要组成部分,其直接影响到一个网站今后是否利于SEO优化以及用户的体验和转化率;我们对于网站目录因此不得不重视,而对于网站目录结构设计是网站前期就要思考好的,因为网站任何结构一旦定型,后期就很难再去改动它,所以我们在前期网站开工时就应该想好这点。

  那么,怎么样的目录才是好的目录,才是符合用户体验和更利于SEO优化的呢?

  

 

  1:在设计网站目录时候需要思考用户是否会点击。

  我们需要知道如果没有用户点击的目录是毫无意义的,因此,如果你的网站如何有很多没有用的目录,就需要进行更改和删除;而对于已经设计好的网站,我们可以配合百度站长工具来查询相关数据,如目录上面的热力图等等,要去掉无用的目录,更换对用户有益和用户需要的目录。

  2:设计网站时候需要把目录扁平化。

  我们的目录设计最多内外链接结构不应该超过三层;太多深层次的目录设计,不仅仅不利于网站内容的收录和蜘蛛的爬取,更不利于用户的体验;一般来说,我们设计的时候尽量要扁平化的目的就是为了要使搜索引擎收录网站内容更容易。

  3:目录设计时候尽一切可能避防双导航模式。

  双导航模式是过去的很多SEO优化相关的书经常介绍和推荐的模式,实质这是一种错误的推举,这种模式只适合大型网站,因为大站内容实在太多,用户流量也多,分类也实在不得已太细致才做的,而如果你是小站,一定不要做这种模式(比如我们偶尔会发现一些企业站也这样做,是完全受到了误导,让用户找到自己的东西更困难了),我们需要做的是精简。

  4:网站产品类别少的,一般不要做过多目录分类。

  减少网站目录无用分类是有利于网站健康的站点“瘦身”,这样做后不仅仅使网站更加美观,而且会使得网站的用户更容易找到他想要的内容,让网站看起来也更整洁,整体用户体验也更好;同时,对于部分网站,还能加大网站的运行速度,扩大用户的首页视野,让用户能在第一时间看到首页的大部分内容,同时也为用户节省了成本去进行全网站的目录寻找(很多用户没有这个耐心),所以,我们要切记:网站并非分类越多越细致越好,物极必反,太繁琐反而不仅仅不能帮助用户更快找到他要的内容,反而更难以找到。

  5:企业站类等小网站不建议左侧导航和下拉框。

  之所以这样说,是因为企业网站大多产品最多不过几十类甚至更少,而左侧导航十个有九个产品放置没有几个,对于这样的,我们完全没必要去为了迎合搜索引擎去做伤害用户体验的事情,这样会让用户点了几次找不到他想要的产品后,会对该网站印象大打折扣从而跳出,当我们发现大量的用户不喜欢这个网站的时候,那么你当初所认为的搜索引擎会喜欢的还会喜欢吗?下拉框同理,能让用户一次性点到可以看到且呈现出来的内容为什么要让用户点两次?

  6:医疗网站不建议三列目录。

  三列的目录大多是没有作用的,这样并不利于排名,反而会使得排名更下降。目前发现大量的医疗网站模仿一些知名网站,整体的设计制作甚至颜色都模仿如39健康网等站点,这种盲目的模仿只会将网站推入深渊。因为每个网站自身情况是不同的。

  以上几点是针对网站建设目录常见情况而言的,而对于某些特别的网站,无论你的目录如何设计,始终都应该思考一个最重要的东西:你设计的目录是否对用户有益,我们要永远站在这个角度,再就是能精简的就精简,能让用户少点击的直接呈现的,而不要设计得太深层。只有这样,你的网站目录才能真正做好,符合用户体验,同时也更利于SEO优化,利于网站排名。

  文章为360商海网原创,转载敬请注明出处:http://www.360sh.cn/

NO.2 2013年网站设计的十二个趋势总结

  2013年只剩几天,审视2013网站设计趋势正逢其时,有些趋势已在2013大放光彩,有些刚刚显露。不论你是专业的网站设计师还是小企业主,紧跟趋势都能帮您更好的地设计客户的网站或是您自己的网站。

  内容优先

  网页设计师围绕内容进行设计,而不是先完成设计再填塞内容。围绕内容进行的设计往往简洁明了,以最直观的方式把访客寻找的内容展示在他面前。比起先设计页面后填充内容的页面,围绕内容进行设计的网站更容易带来流量, 也往往有更高的成交转化率。

  自适应设计

  自适应设计是2012到2013年网页设计的一个趋势。自适应设计在设计上不是浮华,但是通过CSS技术,使页面在不同大小的屏幕上和不同的显示终端都能正常显示,智能手机和平板电脑的增长迫使网站设计师不得不去探寻将同样的内容推送到不同显示终端的新方法,而不需要访客下载APP或者为网站开发特定的版本。

  色块组合

  随着微软Windows 8系统的发布,极简风格的兴盛,内容优先概念的普及,很多网站用类似WINDOWS 8 Metro 风格的方式进行设计,Metro 风格的设计把内容放在不同大小的方块中,方块中有事也配有图片或者大图标,鼠标经过图像的效果也常常出现。

  支持苹果Retina显示屏

  2012年,苹果公司在IPNONE4、IPAD和笔记本电脑中引入了RETINA显示屏,Retina是苹果公司更高像素液晶显示屏幕的品牌名称。苹果宣称,Retina显示屏像素之高,以至于在标准的观影距离内,人眼无法看出来画面是真人还是动画。2013年很多网页开发人员已开始使用更大分辨率的图片和CSS自适应技术以使得访客在装载Retina的Apple产品上能有更好的显示。JS技术是另一种将高分辨率的图片推送到装有Retina显示器的显示终端的有效方法。

  无限屏

  很多社交网络,比如腾讯微博、QQ空间支持无线屏—通过下拉滚动条,网站自动在同一个页面加载更多的内容,. 设计师通过无限屏的方式改善用户体验,减少翻页,使访客不用另外打开页面就能打开自己想看的内容

  平行视差

  平行视差是2012年屏幕滚动的另一个流行风格,今年依旧流行。当2个或者更多的平行物体以不同的速度移动。随着浏览器对平行视差效果的支持越来越多,平行视差已成为给网站正价深度和互动性的常用方法。

  单页面网站

  内容有限的设计理念,以及其他设计趋势如无限滚屏、平行视差使得单页面网站在2013年显得很流行。这些网站弱化第一屏的设计,使得访客更容易发现他们感兴趣的内容的入口

  全幅照片或视频背景

  去年,,超大背景图片成为昆山网站建设的趋势,.不光是全副背景图片流行,大的视频用作背景也将成为趋势。. 很多网站已经在网站背景设计中将相关的视频合并在一起使用,挑起网站访客的视觉欲望。

  App 风格界面设计

  APP设计中的流行元素已在昆山网站设计中大行其道。对网站用户来讲,网页上的App风格界面很直观,在移动终端上显示时,响应操作的方式也更加熟悉。

  CSS3 效果

  越来越多的浏览器支持CSS3, 很多设计师利用更新的脚本语言提供的效果,CSS3允许设计师利用少量的脚本语音制作阴影、透明元素、甚至动画,而不用笨重的PNG透明图片或者FLASH.

  大号字和加粗的标题

  页面标题中的大号字和加粗的标题字体在2013年已变得越来越流行。 大字体和内容优先的设计使得访客很容易识别出他们寻找的内容,快速地进入到重要的信息

  圆形的设计元素

  许多设计师不再用方形的、块状的设计元素,转而使用更有效率的的圆形。圆形巧妙地排成仿真,使看惯了方格和和直角的人感到为之一振。圆形甚至在METRO风格的设计中和大图标中也有应用

  正在消失的趋势

  有几个在2012年流行的趋势已经不再流行了。比如:模仿实物的设计元素,已让位于简单化。单色浅色的手机APP风格界面,丝带和针织效果也用得很少了。江山代有才人出,各领风骚新一年。

  本文原创编辑来自http://www.qingzhizhuan.cn

NO.3 网站设计分析:皮革城设计总结 对线下进行还原

  

1头图

 

  在服装服饰市场的基础上,以皮革维度对市场进行强营销。从材质维度对买家进行导购,以真皮为堆头打造品质,以革为推手促进交易,还原线下皮革市场的场景。

  

2定位

 

  从业务需求上来看,要将皮革城打造成一个相对独立,以真皮为核心、革(潮元素)为推手的高端特色市场。由于皮草、皮革受众多为女性,故女性化也成为皮革城设计的重要标签。

  在此基础上的特色市场设计应区别于传统的行业频道页面,保持相对独立以及突出批发特色。

  

3风格探索-标题

 

  前期设计风格探索中,我们将皮革城的设计拆解为3个方向,分别是:色彩设定、质感运用、结构排版。

  1)色彩设定

  在色彩的探索上,跳出WEB设计的局限。收集了大量手机端、营销设计、服装设计的作品,包括到线下的商城去寻找设计的灵感。试图运用视觉感受营造一种高端、以女性为主的批发市场氛围。

  

4色彩

 

  分析结果:以紫色搭配金棕色来烘托市场氛围,契合皮革类产品气质。

  2)质感运用

  在质感运用方面,需要寻找新的切入点去挖掘产品的个性特征。使它区别于传统频道页面,让用户耳目一新。

  

5质感

 

  分析结果:走扁平化的设计风格。阿拉伯设计师Abu Naji认为扁平化设计不仅仅是一种时尚,更是一场“反对数据过载的革命”,是一项改变过多细节的净化技术。

  3)结构排版

  在信息结构的编排上,从用户体验的角度出发,合理控制信息密度与阅读节奏,灵活突出以真皮为主导的营销策略,丰富市场信息。

  

6结构

 

  分析结果:采用灵活的模块化结构,强化信息分区。

  

7设计过程-标题

 

  在把握大的设计方向后,我们用解构的方法去落实具体的设计。

  简单的理解,解构主义——解开之后再构成。著名建筑师弗兰克•盖里曾经说过:“建筑设计应当抱有与科学研究相同的态度,即破旧立新,而不是对固有观念的重复。”那么,这种方法运用到我们的设计中,即是从理解业务到打破固有模式的框架,重构页面。

  我们主要提炼出2个模块来分析一下。

  1)首屏设计

  以下是我们常见的频道页面交互稿。

  

8交互1

 

  可以看到此模块由LOGO区、搜索区、导航区、类目区、BANNER区构成。如果直接润色成为视觉稿,信息的视觉层次会不够清晰。我们调整重构模块后,得到以下视觉稿:

  

9视觉1

 

  对比一下我们做了哪些改变:

  

10对比1

 

  将原有的6个模块打散后重新组合,整合到规整的4个模块中去。结构更加清晰、简单。

  1. 加重了类目区的比重,默认突出展示女式分类,突出运营主打女款市场。

  2. 放大了BANNER区。在一期规划中加大视觉冲击力,营造皮革城的品牌感。也为二期规划预留足够的切割资源位。

  3. 相对弱化导航区。皮革城从基本属性上来说,是一个聚合型引流页面,我们希望引导用户直接产生交易。

  2)产业带模块设计

  

11交互2

 

  交互稿中有5个产业带,其中突出展示广州与海宁。在这2个区域中需要展示30张图片。如果不重构页面,最终会导致信息爆棚。

  我们将设计稿整理成为:

  

12视觉2

 

  加入TAB切换来灵活展示全部内容。在承载了大量内容的前提下,简单的切换动画使页面更富生趣。

  下面来梳理一下这块的设计思路:

  

13对比2

 

  在页面设计中营造出音乐般的节奏感,便能有效的引导用户在阅览时有节奏的“停顿”,减少阅读疲劳。配合区块化的设计,有利于感知不同区块的信息,使用户迅速定位及了解全局。如果不采用区块化的设计,就需要用更多的留白空间去营造节奏感,使得页面冗长,造成一定量的用户流失。

  

15设计规范2

 

  BANNER的规范既可以减少运维同学的制作成本,也可以控制住页面的统一性,使广告更好融到入页面中去。

  

16项目成果

 

  皮革城的数据从初期到稳定期呈现出一个健康的上升趋势。上线初期CTR在100%左右,稳定后上浮50%,达到150%—160%。页面UV在稳定后维持在6000左右,较初期上线投放更精准。

  

17结语

 

  皮革城围绕皮质维度进行导购,颠覆了服装服饰市场按品类导购的模式。它的个性化突出了服装市场的特性,既有市场的创新,也是对线下皮革行业的还原。皮革城会在后期的规划迭代中,进一步优化,提升用户体验。

  http://pigecheng.1688.com/

NO.4 网站设计分析:国际QQ新版官网项目总结

 

18

 

  项目背景:

  国际QQ官网是宣传国际QQ品牌的主力站点、下载国际QQ的重要入口。旧版国际QQ官网更加偏向于一个门户类网站,重点提供相关新闻资讯,互动社区,群组推荐等基础服务,而对于产品本身的功能介绍,品牌推广以及下载服务提供的版面较少。虽然网站提供的相关社交服务能够更好的提高产品活跃度,不过由于国际QQ的用户群体与QQ的用户群体存在着很大的差异,很大一部分使用国际QQ的用户并没有用过QQ,对于产品本身甚至是功能使用还不是很熟悉。而新版国际QQ官网的主要目标是以宣传和推广国际QQ品牌为主,相应的加入适量的社交服务。减少网站后期的运营压力,强化品牌风格,并且旧版官网整体视觉风格已经相对过时。在这个背景下,有必要对国际QQ官网进行一次大改版。

  网站结构与内容调整:

  旧版官网出于运营的考虑,加入了很多第三方网站链接以及新闻资讯消息等等,导致整个国际QQ官网没有很好的去说明产品本身,同时资讯的运营也给相对较小的国际版团队带来了不小的压力。根据这个问题我们对于新版框架进行以下调整:

  网页Tab根据内容调整重新分级,新版Tab分为 Download,Feature,Explore,Help几个大类,去掉Events,Lifestyle,Web directory等运营类版面,只提供部分第三方服务在Explore一项。

  模块化整体页面布局与内容,推进响应式网页设计进行,使在不同的设备与环境下都能够更好的浏览国际版官网,实现移动端和PC端的一站式无缝体验。

  网站设计定位:

  新版官网将对网站定位进行重新调整,更多的让用户了解什么是国际QQ,更方便的找到下载入口,从而传达出国际QQ的品质感。其次,设计方向上会做出很大的改变。之前的旧版官网过于工具化,这次改版会加入更多的感情元素,通过情感化设计更好的传达我们产品的主旨。

  交互&视觉设计:

  交互设计:

  交互设计这次的主要的难点是对网站结构调整带来的页面布局设计,而首页是难点。首页这次除了要展现6个功能点以外,还要展现部分的Explore信息,这样势必会造成首页页面过长,对于用户浏览不是一个很好地体验,最后经过和产品讨论,决定把功能点分成3个分类,通过分级Tab形式展现功能点。而Explore只展现相对比较热门的3类,横向展现在底部。以展现功能点为主,Explore往后排保持页面的主次性。

  

nnw1

 

  视觉风格:

  做网站视觉风格设定时一定要考虑好整体方向,首先一定要符合承载产品的气质,同时也一定要考虑好后期页面实现的技术要求和时间成本。因为考虑到国际QQ本身产品的定位,相对于QQ,去掉了很多例如微博,朋友网等社交运营服务,基本只保留了以聊天为主的产品框架,主攻外国用户,所以产品风格大气,简洁。视觉风格决定采用最近比较流行的flat风,不仅能够使网站整体视觉风格更加清晰简明,同时矢量化图形也能够更好的配合responsive响应式网页样式的实现。

  首页视觉设计:

  首页的第一屏对于整个网站的风格展示以及产品定位起着十分重要的作用。这次尝试使用三个不同的场景banner做为主要展示元素,分别是展现的国际QQ在“朋友间,家庭里,工作中”的使用状态。朋友间的畅快交流,家庭里的温暖对话,工作中的无缝沟通无不体现了国际QQ “Boundless World, Boundless Chat”的产品定位,情感化元素也更能抓住用户眼球,提供网站转化率的同时也丰富产品层次。

  

Pic1

 

  而新版官网首页呈现的的另一大重要信息是6个feature功能点。对于功能点展现,传统产品类网站基本是以产品截图来说明,这次改版采用插图结合相关界面元素来诠释六个功能点,不仅能够很好地诠释产品功能,同时矢量化图片放大缩小也不会存在质量损失,能够更好地适应响应式网站的多平台实现,减少视觉修改成本。

  

pic22233

 

  

sdfsdgg

 

  Download页面设计:

  旧版官网由于产品发展的关系,只提供了桌面客户端的下载区域。随着国际QQ产品线的不断丰富,必须提供多模块下载区域来满足产品需求。Download页面采用顶部Tab切换方式供用户选择不同平台国际QQ产品的下载。顶部会有网页所在位置提示,同时采用深色背景条做底与首页banner相协调,使用户从首页跳转至下载页面时保持视觉的贯通性。

  

123414r-已修復-已修復

 

  用户反馈和成果:

  国际QQ新版官网改版以后,网站整体设计,方向定位,产品下载量等各方面均得到了提升。网站自8月20号上线一周以来总体访问量增加了20%,国际QQ产品大陆下载量增加了2倍(香港为6倍)有效的为国际QQ的产品及品牌进行宣传。

  请访问国际QQ官网了解更多:http://www.imqq.com/

  感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。

  注明出处格式:腾讯ISUX ()

NO.5 php网站设计与部署问题总结分享

  php网站设计与部署问题总结

  本文是本来在部署一套服装类网站时遇到的问题,这些问题涉及到了php程序设计问题和php各个版本之间的差别引起的问题。特此做了个总结,希望能够对比人有所帮助,避免不必要的为问题。

  1.本人遇到的第一个问题是session问题。一不细心真会让人掉入陷阱里,摸索个老半天。

  本人写了个my_session_start($lifetime),除了启动一个会话外,它还完成了两个功能,一个是设定生存时间,也就是函数引入的lifetime变量;另一个是设定一个会话id,我们知道session_start()已经可以自动恢复旧的会话id了,但如果一个一个用户的cookie删除了,会话就无法恢复了,本文里是通过会员数据库里保存的session_id重新恢复到当前会话里。

  问题就出在了保存my_session_start($lifetime)这个公共函数的文件里。本人的服务器上是没有php编辑器的,由于测试过程中要修改一个参数,直接使用了记事本修改这个文件。修改完之后原先没有什么问题的程序,突然一直报错了,数值改回去仍然报错,图片如下(另外再模拟的一个文件):

  

 

  而且通过输出session_id(),会发现session_id不断的更改。cookie的值一都为空。PHPSESSID值无法送到客户端。我们知道session_start();这个函数在启动一个会话前会操作cookie的读取或写入,当发现cookie里保存有PHPSESSID(本人的session_name,视个人配置有所不同),就读取并恢复,如果没有,就新建一个会话id然后传送到cookie保存。图片的错误信息很明确,就是说session_start()执行前,已经有输出内容了,导致无法输出phpsessid到cookie里。但我仔细查看了my_session_start($lifetime)函数所在文件,无任何空行,无任何输出,到底是怎么回事呢。网络上找了老半天,试了很多方法都不行,最找到原因了。原来是编码搞的鬼。utf-8编码格式有分 无BOM 和 带BOM信息的,而PHP是不识别BOM头得,utf-8的bom信息是为了兼容utf-16等之后的版本的,微软自带的记事本是支持bom头得,当我用记事本修改该php文件的时候,php文件自动就添加了bom头信息,这个头信息是隐藏的,所以程序才一直提示会话启动时无法发送cookie到客户端。使用uedit将该文件转换为utf-8(无BOM)格式后问题解决。一切都是BOM头惹的祸啊。

  2.跟php版本相关的问题

  本人的服务器php版本是5.2版本,本人实际写程序的时候使用的是5.4版本,归根结底太追时髦了,有不认真研究php各个版本之间的差别。

  首先是__DIR__常量,本人碰到的错误如下图所示,

  

 

  本人的程序很多地方都有所使用这个常量,以绝对路径引用一个文件,有时候只有这样才能满足要求,本人习惯于使用这个常量,偏偏这次碰见一个php5.2的服务器,经查__DIR__魔术常量是php5.3版本才引入的,其实还有其他很多方法可以取代它,如dirname()/$_SERVER[DOCUMENT_ROOT]等等,没则只能是一个个的重改喽。

  其次,session_status(),php5.4才引入的,1 代表session_write_close()调用过,代表关闭session写入,这在带框架的页面有时可以提高加载速度。

  总结这次问题,php版本上不可太追时髦,尽量使用主流的版本和功能。很多时候,服务器不是我们能控制的;另外不要随便使用记事本来修改php程序。

  本文源自三合网络:http://www.7wa7.com,A5首发,转载请注明出处,谢谢!

上一篇:期末考试你准备好了吗|高考、你好 上一篇:如何去掉痘印|如何去掉图片水印
与该文相关的文章

温馨提示:如果您对51阅读吧有任何建议,请通过网站联系邮箱向我们反馈,感谢各位的建议与支持!