今年，我与网页设计师和开发人员进行了许多讨论 关于用户界面（UI）和用户体验（UX）及其差异。对于电子商务商家来说，如果您计划对在线商店进行任何类型的重新设计，了解这两者之间的区别非常重要。
您在线商店中最关键的组成部分之一是用户体验。无论您的网站外观多么优雅，如果无法提供买家所期望的用户体验，他们就会离开您的网站并去其他地方购物。由于如今有许多设计精良的商店，购物者要求所有网站都具备这种体验。
本文探讨了 UI 与 UX 之间的区别，以及为什么在重新设计网站时，您需要团队中配备合适的人才。
定义用户体验
以下是一些影响您在线商店用户体验的元素：
- 视觉吸引力：颜色、品牌标识、图像、布局。
- 搜索与导航：快速找到所需内容的能力。
- 站点地图：网站的分类与分组方式。
- 内容：与产品及产品类别相关的文本、图像和视频的数量和质量。
- 易用性：用户能否轻松地在网站上浏览，进出购物车，创建购物清单，查找运费？
- 帮助的可获得性：在线聊天、电子邮件帮助、自助服务账户。
- 性能：网站速度快吗？
- 支付选项和流程：你们提供多种支付方式吗？用户能否存储信用卡信息，使用 PayPal Express 或其他第三方支付系统进行结账？
- 购物车：它是否具有视觉吸引力？是否提供运费信息？
- 图像功能：缩放和平移、替代图片？
- 个性化：商店是否在提供个性化内容？
- 商品陈列：促销商品是否展示得当且易于获取，是否使用了畅销书列表、交叉销售和向上销售？
现实情况是，用户体验受到网站每个元素的直接影响。你可能拥有一个设计精良、导航流畅且性能出色的网站，但如果你的购物车缺少运费估算器，你可能会因为一个虽然设计较差但包含该功能的网站而失去买家。
以下是 Lowes.com 商店中设计良好的子菜单示例。在大多数网站上，用户需要点击一到两层才能访问在此单个下拉菜单中可用的内容、链接和相关资源。因此，用户体验从一开始就非常好，为购物者节省了时间。
Lowes.com 拥有一个设计精良的子菜单。
UI 和 UX 设计师
就在5年前，大多数 UI 设计师实际上同时从事 UI 和 UX 工作。当时，重点主要集中在品牌、颜色和整体布局上。人们也会考虑导航、最小化点击次数以及减少使用返回按钮的需求。在设计购物车等场景时，会投入大量精力确保图标的颜色、大小和位置能够正确识别身份。然而，很少有设计师专注于上一节中列出的用户体验的其他方面，几乎没有人将自己主要定位为 UX 设计师。
此后，这两个领域逐渐分化为不同的职位描述。UI 设计师往往更侧重于创意、品牌和视觉吸引力方面；而 UX 设计师则关注站点架构、页面布局、每页的重点及可操作项——包括其他资源和内容的可用性、弹出窗口与标签页哪种更合适等。通常，UI 和 UX 设计师会在整个过程中协作，但他们的角色正日益专业化。UX 设计师通常更难找到，且费用更高。
设计流程
让我们来看看设计流程，并明确角色、职责和交付成果。并非每位设计师或机构都采用相同的方式。事实上，很少有这样的情况。因此，你需要与潜在的设计师详细讨论这一点。务必充分理解你将获得的交付成果。这些成果越详细、越精确，你的开发团队需要做的额外工作就越少，从而减少误解和错误的机会。
- 创建信息架构：这通常由 UX 设计师完成。目标是确定站点地图、类别的数量和类型、页面模板的数量，以及每个页面上将包含的内容、元素、链接和可调用操作。这通常涉及系统架构师或开发人员来监督所需的技术集成，以及对电商平台原生功能的本地知识。
- 品牌塑造：这通常由 UI 设计师完成。它包括视觉元素、颜色、排版、标志和高层级布局。
- 初始原型：这些是网站的粗略草图，用于捕捉整体布局和元素的位置。这通常在原型工具中完成，不考虑颜色、实际图片等因素。可以由 UI 或 UX 设计师单独或共同完成。通常首先准备首页的原型，因为首页包含最常见的元素（页眉、页脚和导航）。通常会制作多个迭代版本。
- 线框图：由用户体验设计师准备，它是每个页面的表示形式——无论是否包含图形元素——并附有详细的链接和集成文档，可以将其类比为建筑的蓝图；所有元素的页面布局精确无误，弹出窗口、链接、展开式菜单及其他页面操作等多层交互行为均被明确标识，如今市面上有许多不同的线框图制作工具，其中不少还包含了更多图形元素。
- 最终效果图：由用户界面设计师准备，它们在<line>线框图的基础上为每个页面添加所有图形元素；最终效果图以像素级精度呈现，并通过分层设计包含各项交互行为和各个独立元素，以便开发人员能够访问网站所需的全部素材库，理想情况下它应具备交互性以代表所有可操作元素，交付物通常是原生的Photoshop、Illustrator或Fireworks文件，这通常取决于设计师的个人偏好。
- 开发阶段：由开发团队接手，他们负责创建CSS、HTML、Java和AJAX代码，并完成必要的集成工作。
需要注意的事项
在选择设计团队时，请查看其工作流程中各个阶段的作品。要求他们提供信息架构、初始草图、线框图和最终交付成果。尝试询问设计团队，他们的原型是否完整，或者是否需要更多修改。
务必测试他们实际交付的网站的可用的性。归根结底，这才是带来最多销售的关键。