【译】简单七步，点亮你的网页设计

时间：2023-09-04 01:06:01 | 来源：网站运营

时间：2023-09-04 01:06:01 来源：网站运营

【译】简单七步，点亮你的网页设计：原文链接：




找到更有条理的页面设计流程，实现更快捷、高效的网站浏览体验。

网页设计师们通常会十分关注技术性问题，如线框、代码以及内容管理等。但其实，真正厉害的设计，不是关于如何组合社交媒体上的按钮或是营造出华丽的视觉效果，而是创造出一种与企业总体战略相一致的网页浏览体验。

好的网站设计不仅仅是审美享受，更重要的是，通过视觉、文字及互动模块设置，它能帮助访问者更了解产品、企业以及品牌。这意味着，网页上的每一个元素都应该服务于一个既定目标。

但问题是，如何实现这一个整合的目标呢？从网页设计的宏观角度而言，这需要将形式和功能运用于同一账户。

在我看来，网页设计一般需要以下7个步骤：

1. 明确目标。客户想要通过网页获得的东西就是网页设计应该达成的目标，如在设计开始之前问自己，目标是什么？




2. 定义范围。一旦明确目标之后，就可以确定项目实施细化，如此网页需要多少页、多少要素以达成目标？完成这些工作的时间线是如何的？




3. 网站地图及线框生成。明确范围之后，就可以开始网站地图设计，如何让内容与其他各元素能互相作用。




4. 内容生成。在脑海中有了一个网页的宏观蓝图之后，就可以开始考虑具体每一页的内容了，永远记住，要保证搜索引擎优化能让每一页都集中于一个确定主题。这很重要，因为这一步所处理的内容与下一步的工作密切相关。




5. 视觉元素。在网站架构与一些内容就位之后，就可以开始着手视觉品牌设计了，不同客户要求不同，即便已经定义明晰，你可能依旧需要从一些零散的元素中确定视觉风格。在这一过程中，视觉设计稿、情绪板、元素拼贴等工具会很有帮助。




6. 测试。到现在为止，你已经能看到所有的页面样式，并且知道用户访问时的呈现方式，所以，是时候做一个预检了。结合网站的手动浏览和自动站点网络爬虫功能，识别用户体验角度所有关于简单断裂连接的问题。




7. 启动！一旦所有环节都能正常运转，是时候计划并执行你的网站设计了！这就包括计划启动的时间点以及与用户沟通的模式，如，你将如何上线这一网站？怎么让大家知晓？




在这之后，就可以开香槟庆祝了！

现在，让我们深入一点探究每一步骤吧~




1. 明确目标。




第一步最重要的是理解你将要如何帮助客户解决问题

在这一最初的步骤当中，设计师需要明确网站的最终目标，当然这通常需要跟客户及董事的密切沟通。这一环节中需要探究和回答的问题一般包括以下：




1、这一网站是用来干什么的？

2、用户期望从网站获取什么？

3、网站的最重要功能是信息获取、销售还是娱乐？

4、网站需要清晰传递品牌核心理念么？还是这一网站只是品牌建设策略当中的一个分支，其有更为具体而微的目标？

5、竞争对手（如果有）是如何做的？此网站要如何区别于竞争对手？

对任何一个网站设计而言，这一步都是最重要的。如果上述问题不够清楚，整个项目就有可能朝着错误的方向前进。

将目标写下来或者总结一段话会比较有用，这样能保证设计是在正确的方向上，确保你是理解网站的目标用户的，而且，要在对手中保证竞争力。

关于这一步骤，可以点击这一链接获取更多：

关于网站目标确定更多可用工具：

·用户画像

·创意纲要

·竞品分析

·品牌特质

2. 定义范围




最常见也最难搞的问题之一就是网页设计中范围定义的变化。客户脑海中有一个明确的目标，但这设计的过程中，这一目标会逐渐扩张、演变甚至发生改变。接下来的事情你也知道，你不仅仅是在设计一个网站，同时还有网站应用、邮件以及提示等。




这不单单好似设计师的工作，因为这通常会带来更多工作量，但如果逐步提高的预期和既定的时间线、预算不相符，那项目很有可能在短时间之内变得超乎想象般不切实际。







甘特图，就是指一个项目的实际时间节点具体呈现，包括任何重大标志性阶段成果，能帮助实现边界设定并在规定时间内完成项目。对设计师和客户而言，这都是一个切实可见的确定目标和任务手册。

定义范围小工具

·合同

·甘特图（或者其他的可视化时间线呈现方式）

3. 网站地图及线框生成







一个简单的网站只需要简单的网站地图，注意如何确保页面层级，网站地图是所有好的网站设计的基础，它能帮助设计师迅速理清网站信息架构、解释多种内容之间的关系。


建立一个没有网站地图的网站就好比一个没有蓝图的房屋，当然这很少能成功的。

下一步就是搭建线框，一般而言，线框能提供一个网站的视觉设计和内容元素，同时也能协助辨识网站地图潜在的不足与缺憾。




虽然线框设计不包括任何最终设计元素，但它像是一个最终网站呈现的指导。有设计师会用Balsamiq或者Webflow等工具来完成线框设计，个人而言，我比较喜欢回归最基本的样式——用纸和笔完成。

网站地图和线框生成小工具：

·纸笔

·Balsamiq

·Moqups

·Sketch

·Axure

·Slickplan

·Writemaps

·Mindnode




4. 内容生成




一旦网站框架都就位，你就可以开始网站最重要的工作了：内容创造。

内容包括两个重要目标：




1）内容指引参与和行为。

首先，内容互动能指引访问者在网站完成浏览目标，这就涉及到内容本身（文字）与其呈现方式（字体和排版等）。

无趣、没有生活气息且过长的文章很难吸引访问者注意力。短小、精悍、有吸引力的文字一般都能吸引读者继续点击其他页面。

如果你的内容真的有很多，也不要满屏都是文字，多分段，用一些视觉元素让内容看起来更有吸引力、更有参与感。

2）搜索引擎优化

内容也能提高网站搜索引擎的可见性，这种通过生产及改善内容以提高搜索排名的方式即称为搜索引擎优化SEO。

对任何一个网站来说，获取正确的关键词和重要段落都十分重要。我经常用的是工具之一是Google关键词计划，这个工具能显示目标关键词和短语的搜索量，这样你就能进一步明确人们通过网页都在搜索什么。随着搜索引擎变得越来越智能，你的内容也应该策略化安排，谷歌趋势（Google Trends）也能很迅速检测人们真正利用网站搜索什么。

很多网站设计过程都是围绕着搜索引擎优化的，你想要重要显示的关键词，离开头越近越好。关键词也应该出现在H1标签、描述标记及主题内容中。

文笔流利、有信息量且关键词丰富的内容一般也会更容易被搜索引擎检索到，这也使得网站的出镜率变高。

一般来说，客户会有一大堆内容需要呈现，所以，根据指引将关键词和段落按序排列就显得尤为重要。




内容生成的炫酷工具：

· Google Docs

· Dropbox Paper

· Quip

· Gather Content

便捷搜索引擎工具：

• Google Keyword Planner

• Google Trends

• Screaming Frog’s SEO Spider

5. 视觉元素




最后，是时候设计网站视觉风格了，这部分的设计一般会根据客户现存品牌元素、颜色选择以及logo等所定，但这也是一个好的网页设计师能展现自己设计才能的舞台之一。

图像在网站设计中占据着前所未有的重要程度。高质量图片不仅让网站给人一种专业的视觉效，同时也是在传递着一种信息、建立一种信任。

视觉内容能提升点击量、参与度，甚至营业额，但除此之外，人们也希望能在网站上看见更多图案。不光是因为图像让人们更容易获取重要信息，而且图像能深层次传递文本信息，甚至在不需要文本的情况下也能获取信息。

我推荐用专业图片编辑器，要时刻记住图片很重要，好看的图片能让访客在网页停留更长的时间，个人使用Optimizilla来保证图片质量，你也需要保证你的图片和你的网站内容一样能有代入感。

视觉设计是和网站用户交流的一种方式，如果方法得当，视觉元素能在一定程度上促进网站的进步，如果方法不当，这个网站对用户而言可能就是一个网址而已。

视觉元素推荐工具：

·常见图片工具（Sketch, Illustrator, Photoshop等）

·情绪板，VI设计图纸，元素拼图等

·视觉风格指引

6. 测试




一旦网站内容和视觉元素都就位，就可以开始测试了。

全面测试每一个网页并保证每一个链接都是正常运作的，并且所有网页浏览与加载是正常的。一个小小的解码错误可能就会导致错误，而找到这些错误则十分费力，最好是在网站呈现给观众之前就能找到并修复。

编者的话：在这个阶段，我强烈推荐Screaming Frog出品的SEO Spider，这是一款包含很多标准审核任务的工具，而且最多支持全球500多个URL。

最后，多看一眼你网页的标题和描述，甚至是网页标题的顺序也能影响到页面搜索引擎。

送你一片测试阶段绝佳好文：

测试阶段工具：

· W3C连接检查器

· SEO Spider

7. 启动！




现在，就到了大家最喜爱的环节了——启动！当然前提是已经彻底全面测试过，而且各项指标均让人满意。




别指望会一切完美。可能还是会有一些小细节没有完善，网站设计好似一个细水长流且需要不断维护的过程。

而且，网站设计其实是要在形式与功能之间找到平衡点，你需要运用正确的字体、颜色以及设计主题，但人们浏览网站的体验一样重要。

熟练的设计师们一般都能精准衡量这两者之间的关系，并且在其中找到平衡点。

关于正式启动网站阶段，要时刻记住，就算已经无限接近这项工作的尾声，但网站设计之美就在于这项工作永远不会结束。一旦网站开始运作，你就可以持续运营，并且加入新的内容和特点，还有监测分析，内容优化等。







原文标题：The Web Design Process in 7 Simple Steps

原文首发于“惜阅”公众号:)