从一个网站地图
你有没有飞机窗口望出去,看到一个全新的细分的轮廓成形下面吗?这就像一个站点地图:一个结构需要构建的足迹信号,从30000英尺。
站点地图提供了一个网站的层次结构和图显示了每个页面都属于这个层次。
(注意:在这篇文章中,我们讨论了网站地图网站规划和沟通工具,而不是文字XML站点地图你会创建帮助搜索引擎蜘蛛爬行你的网站——尽管规划工具应该基本上定义XML站点地图将包含)。
当你构建你的层次结构,是至关重要的,你不断地引用您的项目的目标。这是因为该网站的层次结构需要反映,为实现这一目标作出贡献。
例如,如果您正在构建一个电子商务网站,一个你的目标无疑是出售产品。欧宝体育在线首页因此,你的站点地图应该将产品指数和页面或层次结构的顶部附近,所以欧宝体育在线首页游客可以立即看到他们需要去实现你的目标和他们的:买东西。
创建站点地图
你可以按照几种不同的方式方法的设计你的站点地图。你要选择你的方法基于两个特质:
- 获取你需要的信息捕捉能力
- 需要传达的信息传达能力
换句话说,它需要能表达你想要表达的信息的方式是清楚你的听众。
例如,下面是3共同创建一个站点地图的方法,以及每个是最好的传达的信息:
1。列表
列表格式是一个简单的有序或无序列表,使用嵌套转达的层次结构。这里有一个例子基于核心Webflow的一部分网站:
指数
——设计师
- - - - - - CMS
——编辑器
——举办
- 客户
- Groupon
- 新的故事
- 可能的
- 盐
- 自由职业者
这是很好的交流页面主题和相对的层次结构。你可以立即看到的页面设计师,CMS,编辑,主持,和客户都收到相同级别的地位,与特定客户故事,在一个较低的水平。
这是什么不所以善于沟通用户这些页面之间的路径。没有指示,例如,设计师,CMS,编辑器和主机出现下拉标签所有功能在网站的主导航。或者每一个页面链接到网站的主页。
使一个列表格式方便,比如一个页面库存,但是你不想交给一个客户说,“这是人们如何将浏览的网站。”
2。水平图
希拉里·皮特的站点地图(这部分的顶部)是一个水平图,可能最熟悉的形式的网站地图。
喜欢,它抓住了网站的高级视图。不像列表格式,它更清楚显示页面之间路径/经验,正如你所看到的在检验流程运行在地图的中心。
使它更好的交流工具,层次结构和人们如何将客户浏览网站和其他非技术人员。虽然作品优美的技术上倾斜!
值得注意的是,皮特的网站是一个电子商务商店,它不提供全面的库存的网站页面。可能有一个或一千个不同的产品页面,不管这张地图,作为产品页面将几乎肯定会通过动态模板或处理欧宝体育在线首页UI工具包,从产品流指数产品细节不太可能因产品而异欧宝体育在线首页。然而,如果有产品类型需要不同的内容模型,要注欧宝体育在线首页意这些。
3所示。垂直图
垂直图基本上就是一个水平图其翻倒在一侧。因为从左到右流意味着进步(在文化阅读流从左到右),垂直图是最有用的更包含映射的经验,如特定的用户流量,或更具体的结构区域的站点。
皮特的购买流程部分的水平图是一个很好的人选一种垂直图(事实上,是垂直图,嵌入水平)。
陷入困境的你的地图吗?尝试一种卡!
如果你和你的客户已经明确定义项目的目标,有一个好的机会,构建你的站点地图会很自然。但在更大的项目,和详细的内容,您可能需要打破一个久经考验的工具:卡片排序。
运行一种卡,只是收集你自己,你的客户和其他利益相关者一起亲自(或数字)。然后写下你所有的页面索引卡片上的名字和协作排序分类对你有意义。一旦完成,创建一个站点地图基于排序的卡片和由少数成员(理想情况下)运行它的目标受众,以确保它是有意义的。
一旦你确定站点地图,你可以深入你的线框图,这变得更加具体和详细的轮廓。
网站地图工具
任何有框的设计工具,箭头,和文本编辑功能的构思时可以帮助你完成工作。但它有助于(很多)使用工具,这些方框和箭头预先存在的元素(通常称为模板)。
这里有几个站点地图元素加载所附带的工具:
为什么你需要线框
如果一个站点地图提供了你的整个网站的蓝图,一个线框代表了单个页面的蓝图(或一组页)。这就是你会看到如果你可以把你的网站地图,然后放大,提高单个页面的高级地图。
网站地图,一个线框捕获层次结构。但是这一次,单个页面层次结构是有限的,因此定义的相对重要性流过页面内容。
与原型相似,线框图可以在各种水平的忠诚。基本上一些线框图是最终设计,完成最后的字体和大小,照片样品,甚至生产就绪的副本。欧宝体育在线首页其他人更示意图,坚持一组黑白盒和斑点,内容有一天会出现。
因为广泛的形式,重要的是要清楚地解释你的涉众的最后你的线框图。
花一些时间来回顾这个线框从内容的角度来看。实际上有很多含义,要么需要变成了内容标准,或修订内容标准记住!
例如:
- 大标题类型意味着文章不能有超过6或7字
- 卖弄风骚的文章可以相对较长,这可能有助于减轻上述限制
- 每一篇文章都需要突出一幅图像
- 滑块标题需要极由于类型的大小
- 有一个“乡村切换器”在右上角,这可能意味着需要翻译网站内容。设计有重大影响,在德国6或7字标题可能是更长的时间比一个用英语写的
这只是开始。
给利益相关者就足以让正确的想法
别以为一个线框原型。线框图提供一个示意图表示,与图形和内容(通常)剥夺了,显示的基本结构。原型,另一方面,应该提供一个工作版本的最后一个站点(虽然精确度的,范围广泛的)。
线框允许利益相关者了解内部的单个页面,网站将流程和功能。因为没有一个线框设置在代码中,利益相关者可以自由在你开始之前请求翻天覆地的变化设计。
线框以可视方式传达网站的结构,每个人都能理解。类似可以复杂的状态变化来描述不熟悉的人设计,而是一个线框可以澄清,用一个简单的视觉或两个。
需要明确一件事之前你告诉任何人你的线框图是它们代表什么。
很明显任何观众,这些线框图不代表最终的产品是如何的外观和功能。欧宝体育在线首页保持简单明了,所以每个人都可以想象这个项目会带来什么。简单的灰度形状应该足够了。
如果有疑问,注释
因为你的线框是一个web页面的示意图,您可能需要包括任何额外的notes /注释,可以澄清这些经验。
看看下面的线框图。作为一个设计师,你毫无疑问立即认识到灰色圆和四个破折号作为标志和导航链接。但大多数客户不知道他们在看没有“导航”callout !
就我个人而言,我喜欢标签线框部分的线框,只要我能想出一个清晰的、简单的名称。我刚刚见过太多利益相关者误解一节的目的,并有误解扭曲他们的反馈,跳过这简单的加法。
站点地图和线框图帮助你得到一个在内容
什么先有鸡还是先有蛋?谁在乎,重要的是蛋黄。设计就像shell一起保存的内容。
无论多么伟大的设计看起来,它不会弥补的事实,其内容可能会腐烂的。
线框图帮助如何?通过展示我们需要什么内容,大约多少空间致力于每一个部分。线框应流直接从您的网站内容策略,在每个页面显示内容的层次结构,每个页面如何适应总体战略。当作家正在从这样一个地图,达到他们的目标变得更加容易。
这并不是说你需要从主页开始。事实上,许多人认为你的主页应该的去年你创造的东西。
你从哪里开始呢?最重要的内容——即。,that which contributes most to your project’s core goals.
这个网站希望促进网上销售吗?然后你需要确保每一个产品都有一个编写良好,新的篇章描述,加上所有的规格欧宝体育在线首页潜在买家想知道。这对构建CMS领域你需要为你的产品集合!欧宝体育在线首页
是你的网站更大的品牌再造的一部分吗?确保你知道你的项目符合“重塑,而你所有的资产需要沟通这个新公司的身份。
你不需要做所有的写作。相反,专注于确保UI是可以理解的,乍一看,要是而言会去那里。
例如,你可以有一些标题东方人们页面内容,然后用占位符填写其余字体BLOKK或者是流字体。确保每个部分标签显示内容将去哪里,这样客户不分心的填充内容。
内容形状设计
内容包括在网站上的一切物质。无论是视频解释产品,动画显示一个应用程序是如何工作的,或者一个非营利欧宝体育在线首页的关于页面,每个元素沟通有一个消息或讲述一个故事。你不需要所有的这些内容在设计之前,但它确实有帮助。
我们已经讨论过一个线框如何塑造内容。但这也可以工作在另一个方向。再一次,你不必完成所有内容。但是如果你有一切你想要包括的大纲,您可以创建一个站点地图和轮廓线框图的基础上。
即使知道了类型网站的内容需要将帮助你想出一个站点地图和线框。这个内容不需要充实,但知道会有一个博客,一个联系人页面为客户寻求报价,和关于公司的历史的一个页面将帮助你找出所有需要结构化。sitemap分解一个网站最基本的组件和一个线框给更详细的每个页面将包含什么。
如果你准备好完整的内容,把这些内容到你的线框,看看它适合。如果内容超过专属空间,您可能需要进一步划分。然后您可以将这个额外的页面添加到线框和调整内容的组织。这是对一个设计师的容易方法后的事实。
知道你的搜索引擎优化
搜索引擎优化不应该马后炮。在你坐下来开始之前站点地图和线框图,武装自己的关键词一个客户想要的目标,和形状的结构和组织相应的网站,其内容。
线框图阶段可以成为一个伟大的地方开始你的搜索引擎优化工作,因为你可以做到没有干扰来自充分发展的内容。没有页面上的所有这些话,你可以专注于关键SEO元素(如标题、元标记,导航元素。这些SEO-ified线框可以作为一个伟大的创造者的大纲最后的内容。
当你把在工作之前,这个过程变得更容易
站点地图和网站线框图奠定基础。当你准备把思想放在网站的目标,建筑,和用户体验,你会有一个目的导向的过程。当成功的道路已经扫清障碍,它使更快的旅程。