创建最佳网络用户体验—支持转换和业务成功—通常需要设计测试和迭代. 直到最近, 尝试各种web配置的成本可能会很高, 对网站架构进行重大更改，需要进行昂贵的编码和CSS更改. 但是像Squarespace这样的自动化网站构建器, 款, WordPress, 和Webflow都有拖放画布, 自定义页面布局，并且可配置内容管理系统这使得营销部门成为可能, 网页设计小组, 个人设计师无需编写一行HTML或CSS代码即可创建和编辑网站.

快速组装、发射和改进的能力登陆页面博客和网站对企业来说也是一个很大的优势. 在其网站上，Webflow突出了一个建立网站的客户的案例研究快四倍另一个提高了25%以上的转化率我相信他们. 作为自由职业者 UI / UX的设计师有十年从零开始编写网站的经验，我使用Webflow创建了一个基于web的投资组合模板为创意专业人士在短短五天内，并为客户设计几个定制网站. 这个工具有从根本上改变了我工作的方式, 将我设计网站的时间缩短了一半, 这样我就可以腾出时间来专注于登陆页和交互元素这能带来自然流量提高转化率.

虽然自动化可能会威胁到花了数年时间磨练各自手艺的设计师和开发人员, 我发现它非常有力量. 下面是Webflow最佳实践和功能的详细介绍, 以及如何利用它们来取得商业成功.

轻松优化

我使用Webflow创建的第一个客户网站是为一家塞尔维亚商业咨询公司创建的，该公司专门从事法律和税务咨询. 客户想要一个10页以下的自托管网站，可以在短短几周内在紧张的预算下建立. 它需要由现有的非技术人员完全管理，这样公司就不必雇佣新员工了. 它还必须看起来不错，有一个调色板, 字体，并选择照片和微妙动画这将反映出风度翩翩，值得信赖的质量品牌的. 由于所有这些原因，Webflow是一个很好的解决方案.

我开始这个项目时，就像对待以前的雇主和客户一样. 与领导团队紧密合作, 我制定了一个有目标市场和明确目标的设计策略. 从那里, 我在Balsamiq中构建线框，并使用Figma生成可重用设计元素的母版页面. 使用插件, 我将这些元素引入Webflow，并将它们分组在自定义类中，以进行清理, 整个站点的一致外观.

这个项目在细化和优化阶段偏离了我早期的网页设计经验. 在将我的设计资产导入Webflow之后, 它的拖放环境使得它非常容易添加, 重新排列, 并实时组织组件. 在过去, 这种实验需要手动编码更改，然后在HTML显示和浏览器窗口之间切换以跟踪我的进度—这是一项耗费时间的任务.

Webflow的界面和易于使用的设计工具的视图. — 在Webflow的界面中，您可以设计页面并实时查看更改. (Pavle Lucic)

我还利用了Webflow的响应式设计预览和测试工具. 谷歌和其他搜索引擎抓取和索引网站基于它们对用户的感知价值, 那些加载速度快、能根据用户的设备自动调整显示的网站在搜索引擎结果页面上的位置会更高. 与超过一半所有来自移动设备的网络流量, 谷歌使用网站内容的移动版本作为其主要方法索引搜索结果, 响应式设计已经与改进的网页可见性紧密联系在一起, 加载时间, 以及点击率.

Webflow使用CSS媒体查询和四个预定义的移动模板, 平板电脑, 桌面, 和大屏幕-确保您的网站布局, 图片, 字体大小在不同设备上看起来清晰易读. 而不是手动编写断点并定义元素缩放规则, Webflow为您完成了这项工作. 此外, 它可以让你预览网站在各种设备上的外观，并使用布局工具对网格和边距进行调整. 除了看Webflow的预览, 我建议在一系列实际设备上查看您的网站，以便发现和解决问题.

Webflow中显示的是web页面的移动视图. — 这个Webflow中的移动视图预览展示了如何检查网站在各种设备上的外观，并在需要时进行调整. (Pavle Lucic)

而咨询客户主要想要一个高效的, 功能性网站，用于添加和编辑文章和SEO内容, 领导层还希望支持动态的用户体验. 所以我选择了Webflow基于滚动和悬停的交互功能，比如动画, 灯箱, 和视频. 无需编写任何代码, 我整合了一个员工个人资料图片的动画贴图，当你在员工脸上拖动光标时，它会给人一种在2D平面上倾斜的错觉. 动画只是一个小小的改动，但它让用户注意到工作人员的平易近人. 它还鼓励访问者在网页上逗留, 和, 对那些有足够诱惑的人来说, 注册免费咨询, 这是咨询公司获得新业务的重要第一步.

提高协作

协作对于任何设计项目都是至关重要的, 然而，通信过程和文件共享很容易变得混乱和混乱. 如果您遇到过一个名为, 说, “最终定稿第二稿,你知道版本控制的重要性. Webflow有一个叫做工作区的功能，可以让多人同时在一个项目上协作(类似于Google Docs)。. 一旦被邀请到工作空间, 团队成员可以实时编辑和更新文件, 评论特定的页面元素, 并直接或群发消息给同事. 使用共享文件作为事实的单一来源有助于避免在部门和分布团队之间浮动的多个草稿的混乱.

Webflow的工作区视图，其中合作者已被邀请在站点上工作. — Webflow的工作区仪表板允许您邀请合作者对内容进行审查和评论. (Pavle Lucic)

我特别欣赏工作区中直截了当的角色和权限设置如何澄清设计团队的责任——帮助避免权力斗争和防止工作被覆盖. 另一个提高生产力的协作工具是页面分支功能，它允许多个设计人员并行处理不同的页面，而不会影响实时站点.

根据我的经验, Webflow赋予文案人员权力, 战略家, 内容和产品营销人员做他们最擅长的事情:写作和编辑. 使用直观的前端编辑工具, 内容团队不需要通知工程师重新格式化代码片段框或向产品页面添加视频动画. 一旦分配到编辑角色, 个人或团队可以使用Webflow内置的内容管理系统(CMS)来更新博客和网站副本, 整理和上传照片和视频, 并为图像写入Alt文本.

一篇博客文章被上传到Webflow的内容管理系统. — 没有设计或工程背景的团队成员可以在Webflow的CMS中创建和编辑内容. (Pavle Lucic)

最大限度地提高转化率和影响力

除了设计一个功能和美观的网站, 您将需要找到并管理客户在项目结束后运行其站点所需的许多工具和数据源, 这很有挑战性. 幸运的是，Webflow将许多集成和跟踪工具集中在一起.

例如, 我曾经通过集成第三方翻译提供商在客户的Webflow站点上启用了多语言支持. 用这个简单而有效的方法, 客户的网站可以被世界范围内更广泛的用户访问. 另外, 与Shopify和WooCommerce等电子商务系统集成, 您可以授权客户处理订单, 同步产品目录, 并通过一个仪表板管理他们的在线商店.

Webflow与分析和报告服务(如Hotjar和Google analytics)的集成允许您评估网站设计的有效性. 例如, 您可以通过利用热图等数据来精确定位需要UI和UX改进的页面和组件, 愤怒的点击, 跳出率.

一旦我为客户的网站设置了集成, 我利用它们来包含新的特性和功能, 例如电子邮件选择加入表单, 产品页面, 以及社交网络动态. 集成还可以用于自动化流程，并节省新闻通讯分发和社交媒体发布的时间.

除了, 我使用Webflow的细粒度前端SEO控件来提高我的客户的搜索性能，并为他们的网站吸引更多的流量. 具有简单的菜单和图像大小的语义控制, 页面标题和描述, 元数据描述, URL重定向, 加载首选项, 你可以优化一个网站与外部插件或工程支持的最小依赖.

最后, 分布在100个数据中心的由aws驱动的托管堆栈(这是吸引我的咨询客户的因素之一)确保站点加载速度快，可以处理大流量. 这种能力对网站访问者是有益的，也提高了客户网站在搜索引擎中的排名，这些搜索引擎将加载速度纳入其算法.

像标题标签和元描述这样的字段使用户能够优化页面. — Webflow CMS中的基本SEO配置, 例如标题标签和元描述, 会影响谷歌搜索结果的点击率吗. (Pavle Lucic)

可扩展的解决方案

值得注意的是，Webflow并非没有缺点. 该公司提供免费的入门计划, 但高级期权可能价格不菲, 特别是对于较大的团队或企业. 对于想要创建具有高级功能的高度定制网站的公司, 例如图像画廊和订单预订系统, 它可能不是最合适的. Webflow确实提供了添加自定义代码的方法, 但是与开发人员使用代码编辑器完成的工作相比，其结果没有那么微妙, 以及不熟悉HTML的用户, CSS, JavaScript会觉得这个特性没什么用.

尽管如此，我还是很欣赏Webflow节省的成本和时间. 根据我的经验, 它的协作功能是通过允许营销来提高效率的关键, 设计, 和工程团队一起实时创建网站, 而不是孤立无援, 所以重要的想法不会丢失. 除此之外，我发现Webflow是一个非常用户友好的工具. 有了这些Webflow最佳实践和很少甚至没有编码经验，设计师是否可以使响应式网站具有吸引人的布局和设计元素，优于他们的竞争对手. 最重要的是, Webflow作为设计工具的速度使我能够快速调整网站以满足用户和客户的需求，并根据需要进行迭代以提高转化率.