如何创建网站模型
2014年，我与合作伙伴共同创立了MOTE。我们专注于电商，致力于在品牌旅程的每个阶段与客户合作——从初步市场策略和品牌识别，到设计、开发和营销——始终关注可持续增长。在我15年的电商网页设计经验中，我为各类客户制定了策略，客户中既有独立品牌，也有财富500强企业。我很高兴能分享我在职业生涯中积累的网页设计技巧和建议。
编辑预制的网站模板非常简单——如果你想看看你的网站在每行四个产品与每行两个产品的情况下的外观，你在几秒钟内即可预览。但对于完全定制的网站，修改代码可能既耗时又昂贵。这就是为什么设计师在进入开发阶段之前会创建网站模型。
阅读本文，了解更多关于网站模型的信息，以及创建网站模型的工具和最佳实践。
Table of contents
什么是网站模型？
网站模型是网站外观的静态视觉预览。它有助于你了解网站最终设计和布局，但尚未具备使网站具有互动性和适合发布的后端代码。网页设计师使用网站模型来探索不同的设计选项，然后再将网页设计交给开发人员进行编码。一旦网站在代码中构建完成，调整起来就会更加困难，因此高保真的网站模型（尽可能接近最终产品的模型）可以节省时间和金钱。
网站模型与线框图与原型的区别
线框图、模型和原型都是预览设计理念的不同方式。以下是每种情况的使用时机：
1. 线框图
线框图是展示网站布局和结构的图示，没有设计元素。你可以将线框图视为你网站设计的蓝图。
线框图可以是简单的纸笔草图，因此它是非设计师与设计师沟通自己愿景的有用工具。线框图还可以帮助设计师在处理具有新颖或深度互动元素的网站时，决定网站的基本轮廓和功能。
即使你正在构建一个较简单的电商网站，线框图也可以帮助你巩固整体销售漏斗和客户体验。由于线框图非常简单，它们是确保所有人达成共识的绝佳方式。
2. 模型
模型是高细节、静态的表示，展示了应用品牌决策的网站布局。与线框图不同，模型包括艺术指导、排版和颜色使用。
模型为用户提供了最终网站外观的真实预览，但网站尚未具备互动性。在构建定制网站时，模型至关重要，因为它们允许你在开始编码之前对设计进行更改。
3. 原型
原型是预览网站的最高保真选项。这些是交互式模型，使用预览链接来模拟用户体验，使网站设计更接近现实。
对于需要在开发之前测试不同互动元素的项目，原型非常有益。对于较简单的项目，你可能会直接从模型转到开发。
如何创建网站模型
无论你是自己设计还是与设计师合作，设计过程中的基础要素都是相同的。
1. 决定如何展示品牌
设计网站的第一步是退后一步，思考如何展示品牌。如果你与设计师合作，你可能会通过创意简报开始这个过程。这将帮助他们了解你的品牌、受众和灵感。
想要专注于特定功能是很自然的，但在沉迷于技术细节之前，先尝试放大思考：考虑一下你希望通过网站布局讲述的整体故事。
例如，你可能希望鼓励用户在你的主页上花更多时间。主页通常是品牌的初始接触点。它也往往具有最高的跳出率。但与其从功能或转化优化的角度出发，不如问自己：“我们如何与主页访客建立更深的联系？”
解决方案可能简单得多，比如在页面的可见区域写一句介绍品牌的句子。如果你的品牌价值观是你业务的核心，这正是展示这些价值观的绝佳机会。例如，展示可持续性或包容性等价值观，可能会引起目标受众的共鸣，让他们在你的网站上停留更长时间。
2. 创建线性叙事
你的网站应遵循线性叙事，这意味着每个部分和页面都应逻辑流畅，彼此衔接。成功的叙事可以确保当有人访问你的主页时，他们对你的品牌和产品有清晰的认识。在他们浏览网站的过程中，你应提供更多细节和功能，帮助他们找到适合自己的产品。
在传统的电商网站中，你的线性叙事就是销售漏斗：用户访问主页，了解你的品牌。从那里，他们找到你的产品集合页面，这些页面提供比主页更多的细节——首先展示最重要的信息，次要和第三类信息则触手可及。在成功的叙事流程中，用户将选择产品，进入购物车页面，最终完成结账过程。
3. 收集品牌元素
一旦你考虑了如何塑造网站的叙事，接下来就要收集将在设计中使用的品牌元素。
如果你有品牌指南，可以与设计师分享（或自己参考）。如果没有，你需要在创建模型之前决定品牌元素，如排版、图形和颜色。网站的网格布局将基于品牌字体的行高和字母间距，因此在绘制网站模型之前决定这些品牌元素非常重要。一旦你有了网格布局，就可以使用你的设计资产和创意简报创建模型。
4. 为每种页面类型设计模板
在设计网站模型时，你并不需要为每个网页创建一个模型。相反，你为不同类型的页面创建模型模板，例如集合页面模板和产品页模板。
在设计每个模板时，退后一步问自己：“什么会使体验最成功？”例如，如果你有六个或更少的精选产品，你的集合页面应展示每个产品，并在进入详细产品页之前，提供一些背景信息。
如果你有数十、数百甚至数千种产品的库存，你应设计一个具有更高级产品过滤功能的网站。这将帮助确保访问集合页面的人能够缩小搜索结果到最相关的产品。
5. 添加有意义的占位符
由于模型是你的网站最终外观的预览，因此在创建模型时，你可能仍在为网站生成内容。如果是这种情况，你可以使用有意义的占位符。
即使模型中使用的图像和文本是临时的，它们也应尽可能接近最终目标。这样，当你预览模型时，能够真正感受到网站的预期方向。例如，与其使用“lorem ipsum”占位符文本，你可以起草一些与品牌一致的示例文案。
6. 获取反馈
一旦你的模型准备就绪，是时候向利益相关者展示并获取反馈。创建网站模型的主要优势在于，你可以在不更改代码的情况下进行修订，因此利用这个机会确保所有利益相关者对模型充满信心，然后再投入生产。
网站模型工具
有许多设计工具可以用来创建网站模型，一些最受欢迎的工具包括：
1. Sketch
Sketch是一款允许快速迭代的网页设计应用。它于2010年专为用户界面设计而创建，能够创建模型和交互式原型。标准订阅费用为每月12美元（约84元人民币）。
2. Figma
Figma是一款允许实时协作的设计工具。如果有多人同时在一个模型上工作，Figma可能是一个不错的选择。可以免费注册Figma，但如果想使用其所有功能，套餐费用从每月15美元（约105元人民币）起。
3. Adobe XD
使用整个Adobe设计套件（如Photoshop、Illustrator、InDesign和Lightroom）的设计师喜欢Adobe XD，因为它与其他Adobe应用程序无缝集成。Adobe不再将XD作为独立产品出售，但你可以通过订阅Adobe Creative Cloud，以每月59.99美元（约420元人民币）的价格使用它。
网站模型常见问题
如何免费创建网站模型？
要创建网站模型，你需要一个设计工具，这通常是收费的。幸运的是，许多设计工具，例如Figma，提供免费试用或具有较少功能的免费版本，你可以用作起点。Canva也可以用来制作免费网站模型。
何时应创建网站模型？
在构建完全定制的网站时，网站模型非常有用，因为它让你在进入开发阶段之前，了解网站的外观和感觉。它为你提供了可以分享、参考和迭代的内容。在项目中，你可能在草绘线框图后创建网站模型，或者在确定项目需求后，直接跳过线框图，进入模型阶段。
网站模型是必要的吗？
根据具体项目的不同，你可能不需要创建网站模型。例如，如果你使用Shopify模板创建网站，你可以跳过模型，直接使用模板作为交互式原型。尽管如此，创建良好模型的许多原则仍然适用于这种方法。