完成一项任务并不罕见 网站设计 计划只是为了回顾和思考, “如果我知道我今天所知道的，我会做不同的事情.”

我们都有过这样的经历. 我们对一个新项目感到兴奋, 和客户开玩笑, 签订合同, 然后开始制作原型. 生活看起来很美好，但项目的基础并不稳固.

不可避免地, 一旦第一个设计概念被提出，修订和范围蔓延就开始悄悄进入, 然后就开始走下坡路了. 沟通不畅, 一切都没有按计划进行, 并最终, 新设计的网站就像你被雇来修理的那个怪物.

世界级的设计和 用户体验 不是从一个漂亮的模型开始，而是建立在战略规划和设计愿景的基础上，关注公司的目标. 首要目标不能是，“让我们做一个更漂亮的网站。.”

网站设计师负责用户体验(UX)和用户界面(UI). 我们的工作是确保用户在与我们设计的界面交互时获得最佳体验. 这需要从项目的概念开始就进行周密的规划.

这篇文章概述了一个可靠的过程，将有助于确保你的下一次网站重新设计是建立在一个坚实的基础上.

网站改版前期项目研究的价值

为了演示这个过程，让我们浏览一下a的各个阶段 网站设计 完成了对 考古西南, 一个探索和保护美国西南部考古遗址的非营利组织.

经过初步调查 客户的领域 和 竞争仔细检查每一个可用的网站资源. 这种分析是单独收费的，并在项目报价编写之前进行. 这种工作方式可以防止网页设计师试图解释项目后期可能浮出水面的问题时产生的模糊或夸大的估计.

以西南考古为例, 我面对的是一个迫切需要关注的网站——一个古老的CMS门户网站里堆积着堆积如山的杂乱内容. 情况很糟糕，所以我开始创造秩序.

第一步:熟悉内容

在改造房子的时候，重要的是在拆除之前尽量抢救有价值的材料. 同样的原则也适用于 网站设计. 你需要一页一页地浏览网站，把所有的内容都拿出来. 作为设计师, 我们必须弄清楚哪些内容值得成为独特的帖子类型，哪些页面是静态的.

一旦完成了这个, 制定一个如何组织一切的策略, 但不要决定哪些内容应该保留，哪些应该删除. 为什么不?

在处理现实世界的业务和组织时, 有许多不同的人负责网站的内容, 存在的内容数量可能是惊人的. 最好的方法是先对所有东西进行分类.

我通常从主导航开始，逐页浏览. 这样，我就有 信息架构 在第一次客户会议之前把站点地图放下.

不幸的是，西南考古处的遗址并不典型. 大多数链接无法通过顶部导航访问，而是隐藏在内容中. 如果我只引用基于导航的项目，我可能会感到非常惊讶.

通过与客户团队中的不同人员交谈, 我能够更好地了解项目的范围, 在和客户开完会之后, 我确定了他们网站的重点, 工作流, 内容, 和特性. 在此基础上，我们想出了以下核心内容类型(有些是新的，有些是现有的):

第二步:创造焦点. 简化. 组织.

一旦所有的内容被组织到标签框, 是时候为新结构制定蓝图了, 它将以最佳形式展示内容. 但首先，我们需要集中注意力.

根据西南考古, 人们访问他们的网站来研究正在进行的项目的信息, 了解即将发生的事件, 读一本月刊. 这些活动回答了这个问题。”什么 人们在网站上做什么?，但不要透露 为什么 人们首先访问这个网站.

“为什么是该网站的重点. 为了找到焦点，要看组织的核心.

在这种情况下，我确定“位置”是西南考古的核心. 没有位置, 不会有考古遗址, 没有废墟, 当然也没有博物馆或展览. 考古学中的一切都与地点有关.

有了重点，我们就可以简化和组织. 西南考古, 我首先将内容分成与地点无关的类别, 比如团队页面和年度报告. 整理一下之后，我得到了这张粗略的地图:

上图代表了出现的两个核心区域: 要做的事情 和 位置. 要做的事情 (左)涵盖了网站访问者可以了解和执行的活动. 位置 (右)专注于与特定地点相关的网站内容. 为什么要这样构造呢?

其理念是，普通用户可能不知道视频或项目的名称，但可能知道地点的名称. 通过这种方式，访问者可以找到与位置相关的内容.

此外，每个色块 位置 表示唯一的帖子类型. 从组织的角度来看, 展品, 类, 网上的展览都是性质不同的活动.

在老考古西南遗址, 杂志有单独的静态页面，还有一个在线商店，游客可以在那里购买杂志. 为了使购买更简单，我在杂志模板中集成了一个购买选项.

剩下的组织结构很简单:

• 一个“关于”页面，以了解有关该组织的更多信息
• 直接链接到“商店”页面
• “捐赠”页面
• 一个新的“更新”页面

商店和捐赠页面是赚钱的工具, 所以它们必须包含在主导航中.

一旦组织蓝图完成，就该连接实际内容了.

第三步:让客户参与进来

站点地图包括页面类型，但不包括内容映射. 经验丰富的网页设计师知道，大多数问题发生在客户开始向他们的网站添加内容时. 为了避免这个问题，从一开始就让客户端参与进来.

西南考古, 我创建了一个包含站点地图的谷歌文档, 我要求客户将旧的内容与新的结构进行映射.

如果有什么地方不太合适，我们会在以后解决它. 这是关键的一步. 为什么? 除了让客户参与到这个过程中, 它在实现开始之前揭示了结构问题.

在这种情况下, 一些站点地图菜单项被更改, 鉴于客户有多个捐赠页面, 为此创建一个独特的帖子类型是有意义的.

通过线框图创建视觉结构

在这一步，我开始给作品一个视觉结构. 让系统运行良好，并成功地整合了“一切都与位置有关”的概念,“我创建了帖子类型之间的双向关系.

基本思路是这样的:当游客来到西南考古网站并选择大峡谷时, 他们将看到有关该位置的信息, 但他们也会找到与项目相关的信息, 事件, 展品, 网站管理员将其他所有内容标记为特定于位置的.

因为链接是双向的, 游客也可以通过访问项目页面进入大峡谷. 最后，我得出了这样的结论:

位置索引页显示所有位置，最近的位置在顶部. 搜索栏是用户到达页面后看到的第一件事. 谷歌地图将占据屏幕的80%左右. 这允许用户在地图上选择点, 当他们滚动或搜索时, 列表网格将进入视图.

在单个位置页面上，主体位于左侧，因为它是最重要的信息. 相关的元信息是次要的，所以它在右边. 达到均衡的布局, 在第一种情况之间有一个明确的层次结构是至关重要的, 第二个, 第三个元素块. 这使得眼睛可以毫不费力地在各个部分之间移动.

在考古西南布局, 用户的视线从标题开始, 然后移动到内容块, 最后是右边栏. 每条相关内容都按照相关性的顺序显示. 例如, 如果用户正在阅读有关大峡谷的内容, 这些内容之后可能会有照片和地图.

因为这主要是一个教育网站, 重要的是要有一个“与此位置相关”的选项. 然而, 没有多少内容是与每个位置唯一相关的, 因此，我将很少使用(但相关)的内容合并到正文下方的单个块中.

将杂志和视频拇指放在相关内容下增加了额外的功能 视觉元素 并引导用户进入“购买”页面. 该页面通过显示相关位置完成. 这是吸引用户进一步探索网站的好方法. 下一步是对其他帖子类型继续使用这种结构.

为主页提供一个明确的目标

有了帖子类型的通用模型，我就可以专注于主页了. 第一步是提出主页的目标——这是UI设计的重要组成部分. 该客户的研究表明，许多用户无意中发现了这个网站，却没有完全理解它是什么. 因此，用户看到的第一件事就是介绍和欢迎文本.

新的核心焦点围绕着第二街区的位置. 接下来是发生在 archaeologysouthwest.org (当前杂志、博客、事件、时事通讯等). 下面是布局过程的迭代:

对于V1(左)，我设计了一个类似于原始主页的基本布局. 没有太多的等级制度. 用户首先看到的是特色位置, 但是从那以后, 他们可能会迷失在纵队中.

对于V2(中间)，我创建了一个单独的列，更容易让眼睛跟随. 然而，它仍然可以改进. 这就是内容知识起主要作用的地方. 我知道西南考古馆在同一时间举办的活动从不超过两场, 因此，在主页上为几个事件留出空间是没有意义的.

在V3(右)中，我关注的是即将发生的事件. If, 出于某种原因, 有两个以上的事件, 用户可以点击“更多”按钮查看其余内容. 我还特别强调了当前杂志，因为它是客户的摇钱树. 用户从顶部开始，以f型向下工作. 眼流量为:

Featured Location > Welcome > Magazine > Events > News

有一个可视化的线框和网站的结构到位, 它更容易固化功能和事物的工作方式. 此时此刻, 我还要和客户开会讨论功能和用户交互流程, 这两点在这个阶段都更加清晰了.

以后还会有修改吗? 是的，但它们将是微调，而不是整个流程的改变. 最重要的是，不会有意外.

结合品牌风格指南

现在是激动人心的部分——将线框图转换成人们可以使用和体验的东西. 在这个项目中，我的目标是通过实施品牌色彩和 排版.

尝试排版组合

排版是好的网页设计不可或缺的一部分，所以我们必须尽早确定我们的字体方案. 大多数西南考古标识使用Univers Condensed Light和Adobe Caslon字体. 没有规定什么时候使用Adobe Caslon, 但我注意到它不像Univers那样经常被使用.

我做了一个小字体研究，看看什么样的字体搭配能给一个专业的非营利组织带来最好的感觉. 然而, 我也不希望我的字体方案看起来与客户的营销材料有太大的不同.

在进行字体比较之后, 很明显，adobecaslon应该是标题字体，Univers将用于字幕. 将主要标题设置为句子大小写，使品牌更有个性, 而全大写更能营造企业氛围.

优化网站的外观和感觉

我打算创造一个轻松开放的体验，这样用户就会觉得西南考古既平易近人又非常能干. 基于分析数据, 大多数访问者使用桌面浏览器(可能是因为大多数人访问该网站是为了研究). 因此，我最初的重点是为桌面用户设计.

当来自台式机时, 我希望游客们能立即看到这个特色地点, 欢迎文本, 接下来是即将发生的事件，然后是杂志标题的一部分. 通过这种方式，人们首先看到公司是关于什么的，以及他们在推广什么.

On 移动设备，优先级略有不同. 因为用户在移动中访问信息, 事件更重要, 所以他们的排名靠前.

我还更新了脚注中的捐赠按钮，将其从按钮更改为句子，使其更加友好.

强势收尾:注意细节

用户访问详细信息页面有两个原因——要么是想了解更多关于地标的信息, 或者他们已经知道了一个位置，正在寻找额外的信息(方向), 电话号码, 等). 因此，立即提供这两个选项非常重要，这样用户就不必去搜索了.

我决定将详细信息栏从内容区分离出来，让它更有分量，让页面更有趣. 这有助于创建组合层次结构, 所以当一个访问者来到这个页面, 他们将首先看到页面标题，然后是一个小图片库，然后是详细信息列.

这种类型的设计确保用户会立即注意到位置的其他细节. 在栏的周围加上一些额外的填充物，使人们的目光更集中，更容易浏览信息.

正如人们所期望的那样，移动视图会崩溃. 首先清除内容，然后是元信息. 我把视频和杂志放在手机页面的最后，因为它们对手机用户来说是最不重要的. 其他页面遵循相同的结构来创建一致的流程和体验.

网页重新设计是建立在仔细规划的基础上的

回顾网站重新设计的过程, 很明显，大部分时间都花在了组织和计划上. 整个项目只有30%的时间花在了场地设计上.

通常,当 设计师 展示他们的作品, 他们没有传达出花了多少时间在沟通的具体细节上, 引导没有经验的设计师直接进入模型. 结果? 项目脱轨，客户不满.

详细的规划必须做，以使网站重新设计是成功的. 花时间进行项目前研究, 熟悉现有的内容, 让客户参与是至关重要的步骤.

最终, there’s no way around it; the path to amazing 网站设计s 和 professional confidence is paved by a methodical approach to project organization.