中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：如何對網站進行設計，在保留原有品牌形象的同時，滿足企業與用戶雙方需求，提升用戶體驗，讓網站界面變得更富有吸引力？本篇文章里，作者結合自身經歷，分享了他對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 在構建良好的用戶體驗方面做得很好。視口右下角還有一個聊天功能，以防人們需要提問或與 IBM 的同事聯系。

關于頁面可擴展性，從技術角度來看，IBM 似乎利用了 flexbox 或網格系統來對齊、定位和構建其內容。內容本身也很容易被用戶理解，而且在必要時還使用了圖像和圖表來補充文本。

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

2. Carahsoft 網站

Carahsoft 遵循與 IBM 類似的結構，因為它具有部分導航元素和內容

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

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

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

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

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

三、重構解決方案?Reconstructing the Solution

通過將學習到的優點應用到 NASA SEWP 的網頁設計中，確定了如下的改進機會點。

1. 主頁

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

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

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

我嘗試了不同的主頁橫幅結構以及供用戶優先瀏覽的內容。最終決定當然取決于用戶研究和測試，以及對 SEWP 來說 SEO 和轉換的優先級。

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

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

2. 供應商查詢工具頁面

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

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

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

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

四、寫在最后?Closing Thoughts

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

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

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

作者：Ahmed Ayoub

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

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

本文由@TCC翻譯情報局 翻譯發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議