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

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

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

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

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

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

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

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

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

首先，讓我們明確我們?cè)趯ふ沂裁矗?/p>

一、了解問(wèn)題?Understanding the Problem（s）

NASA SEWP 當(dāng)前主頁(yè)

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

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

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

加載動(dòng)畫非常不合適，表格滾動(dòng)了很長(zhǎng)時(shí)間

該頁(yè)面的問(wèn)題我總結(jié)了以下幾點(diǎn)：

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

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

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

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

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

首先我們分析一下 IBM 的網(wǎng)站，因?yàn)樗?SEWP 當(dāng)前所存在問(wèn)題的方面做得非常出色。

1. IBM 網(wǎng)站

IBM Procurement Consulting Services 以簡(jiǎn)潔而吸引人的方式為用戶提供了場(chǎng)景

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

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

還有一個(gè)提供背景圖片以及主要和次要 CTA 按鈕的主頁(yè)橫幅。在此部分下方是一組浮動(dòng)鏈接，當(dāng)您向下滾動(dòng)時(shí)，這些鏈接會(huì)固定在頁(yè)面頂部，對(duì)于較長(zhǎng)的頁(yè)面來(lái)說(shuō)非常有用。

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

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

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

2. Carahsoft 網(wǎng)站

Carahsoft 遵循與 IBM 類似的結(jié)構(gòu)，因?yàn)樗哂胁糠謱?dǎo)航元素和內(nèi)容

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

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

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

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

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

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

通過(guò)將學(xué)習(xí)到的優(yōu)點(diǎn)應(yīng)用到 NASA SEWP 的網(wǎng)頁(yè)設(shè)計(jì)中，確定了如下的改進(jìn)機(jī)會(huì)點(diǎn)。

1. 主頁(yè)

我對(duì)主頁(yè)提出了如下的改進(jìn)機(jī)會(huì)點(diǎn)：

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

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

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

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

（說(shuō)明：我選擇了第一版（V1），因?yàn)樗加玫拇怪笨臻g較少，而且主要內(nèi)容都包含在內(nèi)）

2. 供應(yīng)商查詢工具頁(yè)面

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

牢記這些要點(diǎn)，我提出了以下的改進(jìn)機(jī)會(huì)點(diǎn)并將它們應(yīng)用到我的草圖中：

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

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

四、寫在最后?Closing Thoughts

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

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

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

作者：Ahmed Ayoub

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

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

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

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