編輯導語：如何對網(wǎng)站進行設(shè)計，在保留原有品牌形象的同時，滿足企業(yè)與用戶雙方需求，提升用戶體驗，讓網(wǎng)站界面變得更富有吸引力？本篇文章里，作者結(jié)合自身經(jīng)歷，分享了他對NASA網(wǎng)站進行現(xiàn)代化再設(shè)計的經(jīng)驗，不妨來看一下。

前段時間，我應聘了 NASA SEWP（企業(yè)范圍采購解決方案）的 UI 設(shè)計師職位，這是 NASA 的一個的分部門，他們與政府合作并為之提供 IT 相關(guān)的商品和服務。作為面試過程的一部分，我必須針對關(guān)于他們產(chǎn)品的兩個案例問題提出解決方案：

1）鑒于 NASA SEWP 從未對其視覺識別（標志、排版、配色方案等）進行合理的設(shè)計，我們希望看到一些初步的草圖，說明你將如何改進 SEWP 的品牌形象以使之符合現(xiàn)代美學，同時又不丟掉作為 SEWP 文化基礎(chǔ)的俏皮精神（ 預期成果：大致的Logo、配色方案和排版方案）。

2）NASA SEWP 目前的網(wǎng)站更像是一個工具箱，并沒有一個明確的使用邏輯能讓新用戶快速適應它。請根據(jù)你的 UX/UI 設(shè)計的經(jīng)驗，評估此網(wǎng)站并概述一些初步的建議，使用戶流更直觀，提供更好的用戶體驗（請?zhí)峁┐致缘牟輬D和優(yōu)秀的案例參考）。

請向我們展示如果這是你的第一個項目，你將如何開始解決這一問題，無需創(chuàng)建原型或任何高保真。

在上次的文章中，我介紹了關(guān)于第一個問題的解決方案，所以在這里我們將對SEWP的主頁和供應商查詢工具的頁面布局進行一次嘗試，并確定改進的機會。

如果你了解我，就知道我喜歡動漫。你可能也知道我認為《鋼之煉金術(shù)師：Brotherhood 》是有史以來最棒的動漫。

你可能不知道（除非你看過那篇關(guān)于動漫與用戶體驗設(shè)計關(guān)系的文章），設(shè)計就像煉金術(shù)：它包括理解問題，解構(gòu)問題以確定解決方案，并重建新的解決方案進行測試或執(zhí)行。我將應用這個框架來解決這一問題，我們可以把這一問題陳述為：

我們?nèi)绾沃亟M NASA SEWP 的主頁和供應商查詢工具頁面，使其更具吸引力和更直觀？

首先，讓我們明確我們在尋找什么！

一、了解問題?Understanding the Problem（s）

NASA SEWP 當前主頁

首先是 NASA SEWP 的主頁，很明顯，在這上面雜亂地擺布著很多信息，沒有一個清晰的流程或方向感，此外該網(wǎng)站也不是響應式的。在明確此頁面所存在的問題時，有以下幾點讓我印象深刻：

• 沒有介紹部分；
• 鏈接和號召性用語太多，層次結(jié)構(gòu)太少；
• 過度擁擠的導航欄；
• 文字太多，沒有圖片；
• 側(cè)面元素可能會分散注意力；
• 灰色的外部背景和頁腳；
• 頁腳鏈接感覺太分散；
• 社交媒體圖標的感覺和風格不一致。

另一個需要優(yōu)化的頁面是供應商查詢工具，該工具用于查找可以與政府機構(gòu)簽約的公司，以獲得他們需要的任何服務或產(chǎn)品。

加載動畫非常不合適，表格滾動了很長時間

該頁面的問題我總結(jié)了以下幾點：

• “LOADING” 覆蓋后原圖移位；
• 很難找到過濾器選項；
• “返回頂部” 按鈕居中，與表格重疊；
• 提供的特定供應商的信息很少；
• 非常長的滾動時間（感覺就像無限滾動）；
• 這更多是一個技術(shù)或后端問題，在瀏覽器中按下返回鍵后，理應從供應商回到表格，但實際情況下卻會讓你回到前一頁而不是表格。

現(xiàn)在我們了解并掌握了問題的背景，現(xiàn)在可以分析如何解決這些問題。在研究解決方案之前，最好有一些靈感來源可供借鑒。讓我們解構(gòu)采購服務領(lǐng)域的一些案例，看看它們做得好的地方。

二、解構(gòu)問題?Deconstructing Some Examples

采購領(lǐng)域有兩個優(yōu)秀的網(wǎng)站可供我們學習，幫助我們實現(xiàn)更新 NASA SEWP 網(wǎng)站的創(chuàng)意，它們就是 IBM 的采購服務網(wǎng)站和 Carahsoft。

首先，這兩個網(wǎng)站都是響應式的！在移動設(shè)備上有一個清晰的結(jié)構(gòu)和流程，因此可以任意的擴展到更大寬度的屏幕。這兩個網(wǎng)站也有一個浮動導航欄；當向下滾動網(wǎng)頁時，用戶隨時可以訪問其他頁面或菜單。

首先我們分析一下 IBM 的網(wǎng)站，因為它在 SEWP 當前所存在問題的方面做得非常出色。

1. IBM 網(wǎng)站

IBM Procurement Consulting Services 以簡潔而吸引人的方式為用戶提供了場景

IBM Procurement Services 的導航欄簡單但也很完整。他們沒有將所有內(nèi)容都塞在一行中，而是將元素分成兩行。

第一行包含 IBM 徽標（它會將您帶到 IBM 的主頁）、搜索和賬戶 icon 和一個包含導航鏈接的漢堡式菜單。同時還將移動端可訪問性考慮在內(nèi)，第二行在較大寬度的屏幕上會顯現(xiàn)出來，里面包含了同樣在漢堡菜單中的下拉元素，便于訪問。

還有一個提供背景圖片以及主要和次要 CTA 按鈕的主頁橫幅。在此部分下方是一組浮動鏈接，當您向下滾動時，這些鏈接會固定在頁面頂部，對于較長的頁面來說非常有用。

IBM 在構(gòu)建良好的用戶體驗方面做得很好。視口右下角還有一個聊天功能，以防人們需要提問或與 IBM 的同事聯(lián)系。

關(guān)于頁面可擴展性，從技術(shù)角度來看，IBM 似乎利用了 flexbox 或網(wǎng)格系統(tǒng)來對齊、定位和構(gòu)建其內(nèi)容。內(nèi)容本身也很容易被用戶理解，而且在必要時還使用了圖像和圖表來補充文本。

最后，頁腳的設(shè)計很簡單，沒有太多鏈接，并且頁腳中的內(nèi)容（和正上方的 CTA 橫幅）感覺更有條理和整齊。

2. Carahsoft 網(wǎng)站

Carahsoft 遵循與 IBM 類似的結(jié)構(gòu)，因為它具有部分導航元素和內(nèi)容

雖然 Carahsoft 的導航部分占用了更多空間，但它仍然很好地組織了它的元素。第一行包含公司本身的鏈接（職位招聘和介紹等）和一個搜索框，第二行是品牌 LOGO 和聯(lián)系鏈接，占據(jù)了大部分空間，第三行公司的下拉菜單。

盡管主頁橫幅較小，但它仍然存在，并以輪播的形式為提供了關(guān)于采購領(lǐng)域的信息。

Carahsoft 通過對信息或鏈接進行分組、分割和突出顯示進行排版。該網(wǎng)站還包括實時聊天功能，但它確實會占用更多空間，并且在您單擊關(guān)閉按鈕時會完全消失。

最后，該網(wǎng)站的頁腳包含了相當多的內(nèi)容（比 SEWP 的頁腳內(nèi)容更多），由于其元素的結(jié)構(gòu)是按列排布的，所以當縮小視口寬度時，這些列就會折疊成行。

現(xiàn)在我們分析了一些鼓舞人心的例子并總結(jié)出了它們優(yōu)秀的地方，讓我們將這些知識應用到重建 NASA SEWP 的主頁中，同時考慮供應商查詢工具頁面的相關(guān)元素之間的排版。

三、重構(gòu)解決方案?Reconstructing the Solution

通過將學習到的優(yōu)點應用到 NASA SEWP 的網(wǎng)頁設(shè)計中，確定了如下的改進機會點。

1. 主頁

我對主頁提出了如下的改進機會點：

• 包括一個主頁橫幅部分（帶有 1-2 個 CTA 或輪播圖的圖片）；
• 合并和刪除優(yōu)先級較低的 CTA，使用顏色強調(diào)主要 CTA；
• 顯示最重要的導航鏈接，并將其余的放在一個漢堡式菜單里；
• 將文字配以圖像和圖形（也可以考慮使用較短的文本）；
• 在主體或?qū)Ш街邪@些元素；
• 白色是我們的朋友：保持一致的留白；
• 重新排列頁腳元素以使其更具流動性和結(jié)構(gòu)性；
• 使底部的社交 APP 圖標保持一致的風格（例如從 Font Awesome 中提?。?。

根據(jù)這些要點，我繪制了主頁概念圖如下圖所示：

我嘗試了不同的主頁橫幅結(jié)構(gòu)以及供用戶優(yōu)先瀏覽的內(nèi)容。最終決定當然取決于用戶研究和測試，以及對 SEWP 來說 SEO 和轉(zhuǎn)換的優(yōu)先級。

為了適應當代社會現(xiàn)代化發(fā)展程度，尤其是考慮到現(xiàn)在超過一半的網(wǎng)絡(luò)流量發(fā)生在移動設(shè)備上時，我繪制了一些移動 APP 概念圖，以提高該網(wǎng)站的可訪問性。

（說明：我選擇了第一版（V1），因為它占用的垂直空間較少，而且主要內(nèi)容都包含在內(nèi)）

2. 供應商查詢工具頁面

供應商查詢工具本質(zhì)上是一個表格搜索引擎，因此，用戶如果不知道要搜索什么，或者在頁面上得到太多反饋結(jié)果，可能會感到不知所措。

牢記這些要點，我提出了以下的改進機會點并將它們應用到我的草圖中：

• 將“加載”輪或圖形構(gòu)建到表格中；
• 加入過濾器選項（# 產(chǎn)品、字母、供應商類型、合同等）；
• 如果保留 “回到頂部”按鈕，最好將其放在一邊；
• 提供有關(guān)提供商的更多詳細信息（聯(lián)系方式、經(jīng)常顯示的地址、鏈接等）；
• 每頁顯示一定數(shù)量的搜索結(jié)果（也可以讓用戶控制每頁的瀏覽量）；
• 加入一個后退箭頭按鈕，幫助用戶可返回查找工具頁。

與主頁一樣，我也設(shè)計和思考了供應商查詢工具頁面的移動端版本，使用戶在移動端也能夠正常地訪問供應商工具及其提供的內(nèi)容。

四、寫在最后?Closing Thoughts

由于 NASA SEWP 從未有過正式的設(shè)計方向，因此承擔完全改造 UI 以及擴展網(wǎng)站的 UX 的角色是一件非常有趣的事情。

團隊驚喜地發(fā)現(xiàn)我在概述重新設(shè)計概念時考慮了響應式設(shè)計和移動端布局，并圍繞是否需要在網(wǎng)站上實現(xiàn)實時聊天的功能進行了討論。我主張在用戶測試中將其考慮在內(nèi)，以查看客戶和訪問者是否使用該功能或發(fā)現(xiàn)它的價值。與第一個針對品牌形象改造的測試相同，這個練習也為我提供了展示設(shè)計方案和促進與隊友討論的機會，謝謝閱讀！

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

作者：Ahmed Ayoub

原文：https://bootcamp.uxdesign.cc/case-study-a-modernized-redesign-10cefa80e0dd

譯者：陳熠璇；審核：吳鵬飛、李澤慧、張聿彤；編輯：孫淑雅

本文由@TCC翻譯情報局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議