案例研究｜NASA 网站的现代化再设计.docxVIP

案例研究｜NASA 网站的现代化再设计 编辑导语：如何对网站进行设计，在保留原有品牌形象的同时，满足企业与用户双方需求，提升用户体验，让网站界面变得更富有吸引力？本篇文章里，作者结合自身经历，分享了他对NASA网站进行现代化再设计的经验，不妨来看一下。 前段时间，我应聘了 NASA SEWP（企业范围采购解决方案）的 UI 设计师职位，这是 NASA 的一个的分部门，他们与政府合作并为之提供 IT 相关的商品和服务。作为面试过程的一部分，我必须针对关于他们产品的两个案例问题提出解决方案： 1）鉴于 NASA SEWP 从未对其视觉识别（标志、排版、配色方案等）进行合理的设计，我们希望看到一些初步的草图，说明你将如何改进 SEWP 的品牌形象以使之符合现代美学，同时又不丢掉作为 SEWP 文化基础的俏皮精神（ 预期成果：大致的Logo、配色方案和排版方案）。 2）NASA SEWP 目前的网站更像是一个工具箱，并没有一个明确的使用逻辑能让新用户快速适应它。请根据你的 UX/UI 设计的经验，评估此网站并概述一些初步的建议，使用户流更直观，提供更好的用户体验（请提供粗略的草图和优秀的案例参考）。 请向我们展示如果这是你的第一个项目，你将如何开始解决这一问题，无需创建原型或任何高保真。 在上次的文章中，我介绍了关于第一个问题的解决方案，所以在这里我们将对SEWP的主页和供应商查询工具的页面布局进行一次尝试，并确定改进的机会。 如果你了解我，就知道我喜欢动漫。你可能也知道我认为《钢之炼金术师：Brotherhood 》是有史以来最棒的动漫。 你可能不知道（除非你看过那篇关于动漫与用户体验设计关系的文章），设计就像炼金术：它包括理解问题，解构问题以确定解决方案，并重建新的解决方案进行测试或执行。我将应用这个框架来解决这一问题，我们可以把这一问题陈述为： 我们如何重组 NASA SEWP 的主页和供应商查询工具页面，使其更具吸引力和更直观？ 首先，让我们明确我们在寻找什么！ 一、了解问题?Understanding the Problem（s） NASA SEWP 当前主页 首先是 NASA SEWP 的主页，很明显，在这上面杂乱地摆布着很多信息，没有一个清晰的流程或方向感，此外该网站也不是响应式的。在明确此页面所存在的问题时，有以下几点让我印象深刻： 没有介绍部分； 链接和号召性用语太多，层次结构太少； 过度拥挤的导航栏； 文字太多，没有图片； 侧面元素可能会分散注意力； 灰色的外部背景和页脚； 页脚链接感觉太分散； 社交媒体图标的感觉和风格不一致。 另一个需要优化的页面是供应商查询工具，该工具用于查找可以与政府机构签约的公司，以获得他们需要的任何服务或产品。 加载动画非常不合适，表格滚动了很长时间 该页面的问题我总结了以下几点： “LOADING” 覆盖后原图移位； 很难找到过滤器选项； “返回顶部” 按钮居中，与表格重叠； 提供的特定供应商的信息很少； 非常长的滚动时间（感觉就像无限滚动）； 这更多是一个技术或后端问题，在浏览器中按下返回键后，理应从供应商回到表格，但实际情况下却会让你回到前一页而不是表格。 现在我们了解并掌握了问题的背景，现在可以分析如何解决这些问题。在研究解决方案之前，最好有一些灵感来源可供借鉴。让我们解构采购服务领域的一些案例，看看它们做得好的地方。 二、解构问题?Deconstructing Some Examples 采购领域有两个优秀的网站可供我们学习，帮助我们实现更新 NASA SEWP 网站的创意，它们就是 IBM 的采购服务网站和 Carahsoft。 首先，这两个网站都是响应式的！在移动设备上有一个清晰的结构和流程，因此可以任意的扩展到更大宽度的屏幕。这两个网站也有一个浮动导航栏；当向下滚动网页时，用户随时可以访问其他页面或菜单。 首先我们分析一下 IBM 的网站，因为它在 SEWP 当前所存在问题的方面做得非常出色。 1. IBM 网站 IBM Procurement Consulting Services 以简洁而吸引人的方式为用户提供了场景 IBM Procurement Services 的导航栏简单但也很完整。他们没有将所有内容都塞在一行中，而是将元素分成两行。 第一行包含 IBM 徽标（它会将您带到 IBM 的主页）、搜索和账户 icon 和一个包含导航链接的汉堡式菜单。同时还将移动端可访问性考虑在内，第二行在较大宽度的屏幕上会显现出来，里面包含了同样在汉堡菜单中的下拉元素，便于访问。 还有一个提供背景图片以及主要和次要 CTA 按钮的主页横幅。在此部分下方是一组浮动链接，当您向下滚动时，这些链接会固定在页面顶部，对于较长的页面来说非常有用。 IBM 在构建良好的用户体验方面做得很好。