网页界面设计：用模板还是自行设计？

Vũ Khôi

Wotech Electronics 博客作者

网页界面设计：用模板还是自行设计？

什么是网站界面设计？

网站界面设计（也称UI/UX设计）是为网页或Web应用创建用户界面（UI - User Interface）的过程。它涵盖网站上呈现的一切，包括：

图像： 图片、logo、图标等。
信息： 内容、文章、产品描述等。
视频： 宣传视频、教学视频等。
版式： 网站布局（layout）设计，页面上各元素的排布。
配色： 网站的主色调。
字体： 网站中使用的字体样式。
导航： 菜单、按钮、链接等，帮助用户在网站中导航。

网站界面设计的目标，是打造一个美观、易用（方便查找信息并完成所需操作）、能给用户带来最佳体验的网站。一个美观的网站界面会吸引用户，让他们在网站上停留更久。

网站界面设计是成功建设网站的重要一环。界面美观、易用的网站将吸引更多用户，为企业带来更高的营收与利润。

不过，设计网页界面需要耗费大量时间和知识，企业必须投入得当，才能拥有一个严谨、贴合用户的网站主题（Web theme，即网站界面）。因此，除了从零到有自行设计界面之外，市场上还有许多不同的解决方案可以满足多样化的需求。以下是几种界面解决方案：

专用型网站模板界面： 这类界面是设计师专门为特点鲜明的某些服务或产品打造的。这些界面通常非常贴合同行业的需求，适合刚成立、需要赶在开业之日拥有一个像样网站的企业。
多用途网站模板界面： 基于现成主题的思路，发行商希望服务更广泛的受众、向更多企业销售，因此设计了最易用的布局和中性的配色，让任何人都能使用，不受内容或行业限制。缺点是版式会相当乏味，用户可能没什么印象。
由AI（人工智能）生成的网站界面： 这是在ChatGPT开始成熟的2023年前后更新的新模式。用户只需在输入框中写下自己的需求，系统就会自动找出专用型模板和多用途模板推荐给用户选择，或按喜好进行修改。不过一切仍处于起步阶段，实际应用性还比较有限。
UI组件（UI Components，界面组件）： 这是Web应用程序员通常喜欢的一类界面，因为它灵活。这不是一个完整页面的模板。页面中的每个区块被称为一个组件（Component），程序员只需按需调用这些区块。不过要使用它，程序员必须具备审美，或必须与有网页界面设计经验的人配合。
一界面一用途： 这只是"从零设计界面"的一种华丽说法。采用这种方案，品牌气息、内容和设计意图都会被设计师有目的地计算和落实。结果如何取决于设计师的水平。该方案的缺点是耗时、耗投资，且非常依赖设计师的功力。

网页界面设计

什么是模板（Template）？模板在网页界面设计中有什么作用？

网站模板（Template，也称网站界面模板）是一套现成的设计模板，让你无需懂编程就能快速、轻松地创建一个网站。网站模板包含以下要素：

页面版式： 页面上各元素的排布方式，包括菜单、内容、图片等。
字体： 网站中使用的字体样式。
配色： 网站的主色调。
图像： 网站中使用的图片。
HTML与CSS代码： 构成网站界面的HTML和CSS代码。（有些网站界面不附带HTML/CSS，只有可供修改的设计文件，用户必须自己在不同平台上为这些界面编写代码）

使用现成的网站界面模板，在你需要快速建站又要满足审美要求时，是一个完全可以接受且值得支持的解决方案。不过这种方案需要契合实际，下面Markdao将分析其优缺点，为你提供更多选择依据。

用现成模板设计网站界面有哪些好处？

节省时间：

对某些网站项目而言，时间是服务于经营目的的首要因素。有了现成模板，用户只需调整网站界面设计使其契合呈现内容、替换图片和文字，即可投入使用。现成的版式（Layout）和动效（Animation）将最大限度节省时间。

目前，Wordpress、Joomla等流行的开源网站平台都已拥有无需编码的可视化建站系统（Visual Builder No-code）。而Squarespace、Webflow、Framer等流行的无代码（No-code）建站工具也有大量预制模板，让调整更快，甚至无需程序员介入。

节省成本：

由于需要调整的地方少，市场人员或具备技术基础的人员可以自行修改模板界面，企业因此可以在一定程度上避免产生外包费用。这让企业更加自主，能够轻松应对需求变化。

如果企业没有现成资源、必须使用数字代理（Digital Agency），那么借助现成的界面平台，加上扎实的功底，完成一个网站也会更快，3到5天（前提是内容已备好）就能让网站迅速上线。

易于更新：

内置丰富的网页版式库，让新增页面承载新内容的部署更快见效。如果在No-code建站工具上使用，则可以让市场人员无需增聘人手即可完成。如果需要做A/B测试，我们也有多种现成界面，可以为网站挑出最优方案。

如果模板界面来自信誉良好、购买后提供支持的供应商，我们就能持续在应用库中获取新界面。只需点击"更新"，界面就会新增许多风格相似的组件（component）和页面（screen），让网站不断"换新装"，带给用户惊喜。

出错概率可能更低：

要设计符合SEO标准的网页界面，你需要记住：不仅要注重网站的"门面"，还必须精通网站"背后"的技术，典型代表就是代码。与自行编写代码相比，使用带现成代码模板的界面能帮助你更精准地完成修改。

如今已有不少模板支持符合SEO标准的网页设计，因此你不必写太多代码，除非你需要对某个问题做深度修改。写得越少，出错越少，你的网站也就得到更好的优化。

‍

基于模板修改的网页界面设计

使用网站模板的3个局限

难以打造独特气质：

用现成模板进行网页界面设计给你带来许多便利，但与此同时，你也必须接受这种方式的局限。一份一键购买的现成模板，无法传递你的品牌精髓（Brand Essence）。

网站的主要目的是以文字和图片的形式传递内容与信息。如果内容先行、设计服务于内容，那么信息传达的效率会更加明显。如果内容在版式与设计之后才来，我们就是在把信息硬塞进去。其信息传达效果可能不如完全定制的网站界面设计。

因此，要达到最佳效果，内容仍须先行，并结合品牌风格，再基于以上两条标准挑选最合适的模板。然而，如果你没有设计知识，调整起来也并非易事。

所以，只需花少量费用，你就可以使用Markdao的平价网站设计服务。虽然价格亲民，但质量可以达到全新定制网页界面设计的70%左右。

网站优化更难：

如今各类模板的主要目标是拥有吸引用户、促成选择决策的界面，SEO则在其后。因此，界面中的优化有时并不能真正满足严苛的SEO要求。当然我们仍然可以调整，但如果从一开始就在界面设计时做好定制规划，优化效果会好得多。

有时这些模板界面在Google Page Speed Insight上的页面加载速度并不理想，因此需要深入修改主题来改善。这并不简单，而且可能让你的网站随时失去连接能力。虽然这并非SEO的先决因素之一，但优化GPSI评分，将决定你在与实力相近的对手激烈角逐时能否赢得排名。

在实施SEO的过程中，改善网站的用户体验（UX）非常重要，有助于提升网站的转化率（conversion rate）。这种情况下，有些小调整如果无法实现，也可能成为大障碍。

安全问题：

网页界面设计使用一套大众化的代码，可能让你的网站更容易被狡猾的对手入侵。此外，现成模板可能隐藏着主题设计者植入的广告，某些情况下甚至包含恶意代码，降低你的网站在搜索结果中的排名。幸运的是，Markdao Vietnam早已预见到这一局限，并拥有专属的网站防护方案，支持你的网站更长久地运行。

解析完全定制网页界面设计（Custom UI Design）模式

按需求定制网站设计： 网站根据客户的具体要求从零开始设计与开发。这种方式成本更高，但可以打造出独一无二的网站，满足客户的一切需求。

按需求定制网站设计是在互联网上创建一个网页的过程。它包括多种不同的工作，包括：

制定计划： 确定网站目标、目标受众和所需功能。
界面设计： 打造美观、易用、符合网站目标的界面。
内容开发： 撰写文章、制作图片和视频，并为网站收集其他内容。
编程开发： 编写HTML、CSS和JavaScript代码，实现网站功能。
检查与测试： 确保网站运行准确、没有错误。
发布与维护： 将网站发布到互联网上，并随时间更新内容与功能。

采用定制网站界面设计的优势

打造独一无二的品牌形象：

要为一个专属于品牌的定制界面注入灵魂，最重要的是一套完整的品牌识别手册（Brand Guidline）。有了它，网页设计师（Web Designer）才能帮你完善一个带有良好品牌印象的网站。运用形体、字体与色彩元素，为界面营造完美组合。

不仅限于图形与内容层面，定制界面还让我们能干预页头（header）、页脚（footer）、按钮（button）、字体排版（typography）、各背景区块，以及最重要的动效（animation）。凭借深度干预、贴合品牌定位，这是无人能够模仿你界面的终极武器。如果他们执意效仿，那无异于帮你的品牌在互联网上更加出名。

SEO优化：

关键词提前确定，SEO策略在实施前经过周密计算，使面包屑导航（Bread Crumb）、关键词布局和标题（Heading）拥有完整结构，未来无需改动。即使以后交给任何SEO代理（SEO Agency），也能大幅减少在你现有网站界面上进行站内SEO（SEO On-page）调整的时间。

减少插件使用，裁掉未使用的CSS与布局，让网站整体比使用模板的网站更轻。更优的速度就是竞争的基础。在移动设备上，图片会以远小于桌面端的尺寸加载，这也是企业在难啃市场中的竞争利器。

更加省钱：

获得咨询与使用规划、确定用户群体、绘制客户旅程（Customer Journey），这些工作即使你做了，也很难装进模板里。如果已有这些信息，网站界面将被设计得严谨周到、经久耐用，无需在网站界面完成后反复改动浪费时间。

易于修改：

一旦网站100%归你所有，你就可以随意修改，不会遇到任何版权或安全问题。当你想深度更改某个效果、某项技术，需要"挖掘"网站背后的一切时，这对你极为有利。独特设计（Unique design）允许以无限的方式增补各类页面样式。

‍

独特设计的网页界面

定制界面设计有哪些局限？

耗时：

选择独特设计（unique design）来做网页界面设计，意味着你需要给我们多留一点时间，把网站完善到最好。模板设计工序非常重要，必须从最初几步就进行缜密的设计规划，网站才能拥有最稳固的骨架。此外，挖掘贵公司的精神内核、找出真正突出的差异点，也需要额外的时间。

容易遇到不具备专业能力的单位：

市场上有很多单位没有足够能力完成完整的网站界面设计，原因很多，但通常主要有两个：

使用尚无经验的劳动力：让网站建造成本几乎与模板网站一样低。但质量大多比建一个模板网站还要差。在把这类界面对应的代码写出来时，如果设计者缺乏编程经验，还会遇到更多衍生问题。
用程序员（Developer）来做网站界面设计，跳过设计环节，从草图直接进入前端（Front-end）编程。2010年代初，这种情况非常普遍，因为当时网站设计人员不多，这项工作就由程序员承担。如今这一原因已有所减少，但市场上依然存在。

成本高：

独特设计模式的初始成本会高于选择现成模板设计。选择独特设计，就意味着你选择100%使用Markdao网页设计团队的心血。因此，更高的成本也就不难理解。反过来，你将获得一个独此一份、带有你自己风格的网站，而且只有你才拥有这个网站。

以下是Markdao设计团队完成的部分代表性网站设计项目：

Markdao丰田网站设计mockup