迎接挑戰並在 UX 設計實習中表現出色的指南

這是關於我的用戶設計實習的故事。 我並不是說你的實習會和我的一樣。 事實上，如果我可以說一件事來塑造你的期望，那就是：準備好把它們都放在一邊。 最重要的是，請記住給自己空間和時間來學習。 我分享我的故事是為了提醒我，儘管我遇到了困難，但我是多麼掙扎，一切進展如何，這樣我就永遠不會停止嘗試，你也不會。

這一切都始於 2018 年 5 月，當時我在西班牙格拉納達下了飛機，身邊放著一個行李，背上背著筆記本電腦，腦子裡還有些生鏽的西班牙語。 這是我第一次來歐洲，接下來的三個月我將在 Badger Maps 做 UX 設計實習。 我在 UX 方面還很陌生，此時我已經學習了不到一年，但我已經準備好並渴望在專業環境中獲得經驗。

跟著我學習如何應用技術知識來完成分配給我的實際設計任務：

• 使用 Sketch 為我們的 iOS 應用創建一個設計系統；
• 設計一個新功能，顯示數據導入中發生的錯誤；
• 學習基本的 HTML、CSS 和 Flexbox 來實現我的設計；
• 使用 Adob​​e Illustrator 和 After Effects 創建動畫。

本文適用於像我這樣的初學者。 如果您不熟悉 UX 設計並希望探索該領域 - 請繼續閱讀以了解 UX 設計實習是否適合您！ 對我來說，我最終完成的工作遠遠超出了我的預期。 我學會瞭如何設計系統，如何在設計與用戶需求之間妥協，實施新設計的挑戰，以及如何創造一些“快樂時刻”。 實習的每一天都呈現出一些新的和不可預測的東西。 在我的實習結束時，我意識到我創造了一些真實的、有形的東西，就像我掙扎的所有東西突然就位一樣。

推薦閱讀：如何獲得一流的平面設計實習機會

第 1 章：樂高積木

我的第一個任務是為我們現有的 iOS 應用程序創建一個設計系統。 我過去曾為我自己的項目和應用程序創建過設計系統，但我從來沒有回顧過它們，也從來沒有為不屬於我自己的設計做過。 為了完成任務，我需要在 Sketch 中對模型進行逆向工程； 我首先需要更新和優化文件以創建設計系統。

也正是在這個時候，我得知我電腦上的 Sketch 程序已經過時了大約一年半。 我不知道新版本中的任何符號、覆蓋和其他功能。 經驗教訓：保持軟件更新。

在擔心符號頁面之前，我通過畫板瀏覽了模型畫板，確保它們已更新並與當前發布的應用程序版本一致。 完成後，我開始為不同的元素創建符號和覆蓋。 我從頁眉和頁腳開始，然後從那裡繼續。

根據經驗，如果一個元素出現在多個頁面中，我會將其設為符號。 我在設計系統中添加了不同的圖標，建立了圖書館。 然而，很快就發現設計系統的發展和變化比我試圖組織它的速度更快。 進行到一半時，我不再試圖讓符號保持井井有條，而是選擇在完成重新創建每一頁後返回並重新組織它們。 當我不再在模型和符號之間來回奔波並擔心兩者的組織時，我可以更有效地工作。

很容易理解 Sketch 中的覆蓋和符號。 這些功能使該程序比我以前使用的程序更強大，並增加了文件在未來設計中的可操作性。 創建設計系統本身的任務要求我深入研究程序並了解我們應用程序設計的所有細節。 我開始注意到間距、圖標大小或字體大小方面的細微不一致，我可以在工作時進行糾正。

最後一步是返回符號頁面並組織所有內容。 我清除了所有符號，刪除了那些不使用的符號和任何復製品。 儘管有點乏味，但這是該過程中非常有價值的一步。 在閱讀完文檔後檢查符號讓我有機會重新評估我是如何為每一頁創建符號的。 將它們組合在一起迫使我考慮它們在整個應用程序中是如何相關的。

通過這個思考過程，我意識到創建一個命名系統是多麼具有挑戰性。 我需要創建一個足夠廣泛的系統以包含足夠多的元素，足夠具體以避免模糊，並且可以很容易地被其他設計師理解。 在我找到一個我滿意的可行系統之前，我嘗試了幾次。 最終，我根據它們在應用程序中的使用位置來組織元素，將列表之類的部分組合在一起。 它適用於像 Badger 這樣的應用程序，該應用程序針對應用程序中的不同功能進行了不同的設計。 最終產品是一個更有條理的文件，對於任何未來的設計迭代都將更容易使用。

作為這個項目的頂點，我嘗試了現代化的設計。 我重新設計了整個應用程序的標題，從本地蘋果應用程序中汲取靈感。 令人高興的是，團隊也對此感到興奮，並正在考慮在應用程序的未來更新中實施這些更改。

總體而言，將 Sketch 文件處理到如此詳細的內容是一種意想不到的有益體驗。 通過重做每一頁，我對字體大小、顏色和間距等事情有了更深入的了解。 複製現有設計的練習需要對細節非常關注，這非常令人滿意。 這就像組裝一個樂高模型：我擁有所有的零件，並且知道最終產品需要看起來像什麼。 我只需要組織所有內容並將它們組合在一起以創建成品。 這也是我喜歡做 UX 設計的原因之一。 它是關於解決問題和拼湊一個謎題，以創造每個人都能欣賞的東西。

第 2 章：設計

我實習的下一部分讓我開始從事一些設計工作。 任務：為 Badger Web 應用程序設計一個新的導入頁面。

該團隊正在努力重新設計獾與 CRM 集成，以創建一個允許用戶查看任何數據同步並自行管理其帳戶的系統。 當前的連接涉及大量來自 badger CSA 和 AE 的實際工作，以建立和維護。 通過為用戶提供直接與數據導入交互的界面，我們希望改善 CRM 集成的用戶體驗。

我的目標是設計一個頁面，該頁面將顯示任何數據導入中發生的錯誤，同時向用戶傳達如何以及在何處對其數據進行必要的更改。 如果有更多與單個導入相關的錯誤，或者用戶希望一次查看所有錯誤，他們應該能夠下載所有這些信息的 excel 文件。

目標

1. 創建一個導入頁面，通知用戶正在導入的狀態；
2. 提供 Badger 和 CRM 之間帳戶同步的歷史記錄，以及與每次導入相關的詳細錯誤；
3. 為在 Badger 中出現導入錯誤的每個帳戶提供指向 CRM 的鏈接；
4. 允許用戶下載所有未解決錯誤的 excel 文件。

用戶故事

擁有 CRM 帳戶的 Badger 客戶：
作為擁有 CRM 的客戶，我希望能夠將我的 CRM 連接到我的 badger 並可視化所有數據同步，以便我了解流程中的所有錯誤並根據需要進行更改。

獾：
作為一個獾，我希望用戶能夠管理和查看他們的 CRM 集成的狀態，這樣我就可以節省時間和手動工作，幫助和解決用戶將他們的獾同步到他們的 CRM 帳戶的問題。

在我真正深入研究設計之前，我們需要經過一些思考來決定要顯示哪些信息以及如何顯示：

1. 批量導入與連續導入
   根據用戶的類型，有兩種方法可以將數據導入 Badger。 如果通過電子表格完成，導入將被批處理，我們將能夠以組的形式可視化導入。 然而，與他們的 CRM 集成的用戶需要在他們的 CRM 中進行更改時不斷更新他們的 Badger 數據。 設計需要能夠處理這兩種用例。
2. 導入記錄
   因為這是一項新功能，所以我們不能完全確定用戶的行為。 因此，決定如何組織信息具有挑戰性。 我們是否應該允許用戶在他們的歷史列表中無限滾動？ 他們將如何搜索特定的進口？ 他們應該能夠嗎？ 我們應該逐日或逐月顯示活動嗎？

最終，我們只能對這些問題中的每一個做出最佳猜測——知道一旦用戶開始使用該功能，我們就可以在未來進行適當的調整。 在考慮了這些問題之後，我開始製作線框圖。 我有機會設計完全不同的東西，這既解放又具有挑戰性。 最終設計是沿途創建的各種設計中的單個元素的頂點。

設計過程

這個過程中最困難的部分是學習重新開始。 我最終了解到，僅僅出於審美目的而將某些東西強加到我的設計中並不理想。 理解這一點並讓我的想法消失是獲得更好設計的關鍵。 我需要學習如何一次又一次地重新開始探索不同的想法。

挑戰

1.使用空白

馬上，我需要探索我們想要在頁面上顯示的信息。 我們可以包括許多細節——當然還有空間去做。

所有不必要的信息都增加了太多的認知負擔，並剝奪了用戶真正關心的內容。 而不是試圖擺脫所有的空白，我需要處理它。 考慮到這一點，我最終刪除了所有不相關的信息，只顯示我們期望用戶最關心的內容：與數據導入相關的錯誤。

這是最終版本：

2.導航

下一個挑戰是在顯示信息的側邊欄和標題之間做出選擇。 側邊欄的優點是在用戶滾動時信息將始終可見。 但是我們還必須確保側邊欄中包含的信息在邏輯上與頁面其餘部分中發生的事情相關。

標題提供了乾淨的單列設計的優勢。 缺點是它佔用了大量垂直空間，具體取決於標題中包含多少信息。 它還在視覺上將標題的內容優先於用戶下方的內容。

一旦我確定了在哪裡顯示什麼信息，側邊欄導航就成為更合乎邏輯的決定。 我們希望用戶主要關注與他們的導入相關的錯誤和一個大標題，太多的信息會落在折疊之下。 然後，側邊欄可以成為導入和活動摘要的容器，在用戶滾動時可見。

側邊欄設計：在我決定要有一個側邊欄之後，它歸結為決定要包含哪些信息以及如何顯示它。

我努力創造一個視覺上有趣的設計，因為幾乎沒有信息可以展示。 出於這個原因，我再次發現自己添加了不必要的元素來填充空間，儘管我想優先考慮用戶。 我嘗試了不同的內容和顏色組合，試圖找到設計和可用性之間的折衷。 我使用它的次數越多，我就越能將設計解析為最基本的內容。 區分有用信息和填充物變得更容易了。 最終產品是一個流線型設計，只有一些匯總統計數據。 它還提供了極大的靈活性，可以在將來包含更多信息。

導入流程：導入頁面設計完成後，創建導入進度頁面。 這裡最大的設計挑戰是決定如何顯示正在進行的導入同步。 我嘗試了彈出窗口和疊加層的不同解決方案，但最終解決了在側邊欄中顯示進度的問題。 這樣，用戶仍然可以在導入過程中解決任何錯誤並查看其帳戶數據的歷史記錄。 為防止導入中斷，“同步數據”和“返回 Badger”按鈕被禁用，因此用戶無法離開頁面。

設計完成後，我轉向 HTML 和 CSS。

第 3 章：HTML/CSS

這個項目是我第一次體驗任何類型的編碼。 雖然我之前嘗試過學習 HTML 和 CSS，但我從未達到任何熟練程度。 還有什麼比自己設計的模型更好的開始呢？

理解組織 HTML 文檔的邏輯讓我想起了用符號和覆蓋組織 Sketch 文檔。 然而，相似之處到此為止。 編碼感覺像是一件非常陌生的事情，我一直試圖繞開我的腦袋。 正如我的導師所說，“你在編程中展示的肌肉與在設計中非常不同。” 現在有了最終產品，我完全相信學習編碼是我自接受便盆訓練以來學到的最酷的事情。

在設置文檔並了解基礎知識之後，第一個挑戰是使用 Flexbox。 我創建的設計涉及並排的兩列。 右側部分用於滾動，而左側部分保持靜止。 假設我可以讓它工作，F​​lexbox 似乎是一個乾淨的解決方案。

實現 Flexbox 包括大量的試錯和盲目複製代碼，而我則在各種網站上翻騰，閱讀教程和檢查代碼。 在我的導師的指導下完成整個過程，我們最終讓它發揮了作用。 我永遠不會忘記那一刻，我終於明白，通過使用flex-direction: column我可以將所有元素放在一個列中，而flex-direction: row幫助將它們放在一行中。

現在它很有意義，儘管我最初對它的理解完全相反（我認為flex-direction: column會將元素放在彼此相鄰的列中）。 令人驚訝的是，直到代碼運行後我才意識到這一點。 我正在查看我的代碼並意識到我根本不理解它。 是什麼提示了我？ 在我的 CSS 中，我將flex-direction: row編碼到我命名為column的類中。 這個場景很好地說明了我第一次編碼經驗的其餘部分。 我的心智模型很少與代碼的邏輯保持一致，它們經常發生衝突並分道揚鑣。 發生這種情況時，我不得不回去，找出我的誤解，並更正代碼。

設置 Flexbox 後，我需要弄清楚如何在右側部分滾動時讓左側列保持固定。 事實證明，這無法像我希望的那樣通過一行代碼來實現。 但是通過這個工作幫助我理解了親子關係，這對我在剩下的過程中提供了極大的幫助。

對垂直時間線和錶盤進行編碼也是一個過程。 時間線比我最初預期的要簡單。 我能夠創建一個細長的矩形，為其設置內部陰影和漸變填充，並將其分配給每個活動日誌的寬度。

錶盤很棘手。 我嘗試用​​純 CSS 實現它，但收效甚微。 有幾次我考慮將設計更改為更簡單的東西（比如進度條），但我很高興我堅持下去了。

一個主要的鬥爭是讓進度盤與邊界上的背景圓圈重疊。 這就是我稍微改變設計的地方——進度盤的未加載部分沒有被切掉，它在周圍重疊。 這是我最初不願意做的設計和代碼之間的妥協。 然而，事實證明，我對最終結果感到滿意，一旦我意識到這一點，我很高興做出妥協。 最後的錶盤是通過 JavaScript 實現的。

在我的編碼過程中有一個時刻，我把我曾經寫過的每一行代碼都扔進了每個班級，試圖讓它發揮作用。 為了彌補這種事後諸葛亮，我需要花費相當長的時間來檢查所有元素以刪除無用的代碼。 我感覺就像是房東把不付房租的房客趕出去了。 這絕對是在保持一定水平的內務管理以及對代碼進行審慎和深思熟慮方面學到的一課。

大部分的經歷感覺就像是盲目的遍歷和回顧性學習。 然而，沒有什麼比看到成品更讓人滿足的了。 經歷這個過程讓我以一種我以前從未做過的方式與我的工作互動，並讓我深入了解了設計是如何實現的。 在我對實習的所有期望中，我從未預料到能夠編寫代碼並創建自己的設計之一。 即使在被告知我可以在第一天這樣做之後，直到看到此頁面完成後我才相信。

第 4 章：與獾寶寶一起工作

作為將 Badger 用戶與其 CRM 帳戶集成的過程的一部分，我們需要我們的用戶登錄他們的 CRM——要求我們將他們從 badger 重定向到本地 CRM 網站。 為了防止突然從一個網站切換到另一個網站，我需要設計中間加載頁面。

我從您的普通靜態重定向頁面開始。 它們很簡單，絕對實現了它們的目的，但我們對它們不太滿意。

挑戰在於創建一些簡單而有趣的東西，讓用戶在幾秒鐘內就可以看到他們離開我們的網站。 設計需要自我介紹，解釋它存在的原因，並在任何人看膩之前離開。 這本質上是一種快速約會的練習。 考慮到這一點，我決定嘗試動畫——特別是受現有標誌啟發的厚臉皮小獾的動畫。

使用獾標誌作為起始參考點，我在 Adob​​e Illustrator 中創建了不同的獾字符。 最初的標誌對於加載動畫來說感覺有點太嚴重了，所以我選擇了一些更可愛的東西。 為了保持一致性，我保留了原始徽標中的紅色胸部和麵部特徵，並圍繞這些元素創建了一個身體和頭部。 頭部和條紋需要一段時間才能按摩成我滿意的形狀。 身體的形狀稍微容易一些，但是在頭部和身體的大小之間找到合適的比例需要更長的時間。 一旦我確定了這一點，我就準備好開始製作動畫了。

我的第一直覺是嘗試定格動畫。 我想它會很棒——一個華萊士和格羅米特。 但在第一次嘗試、第二次嘗試以及隨後的所有嘗試之後，很明顯，小時候看那個節目並沒有讓我完全具備製作定格動畫所需的技能。

我只是無法達到我想要的平滑度，並且對於非常短的加載動畫來說，有些小不一致感覺太刺耳了。 動畫通常以每秒 23 幀的速度運行，而我的獾動畫每秒只有大約 15 幀。 我考慮添加更多幀，但根據導師的建議，決定嘗試使用角色動畫。

這是我第一次製作超過 5 個移動部件的動畫，並且肯定有一個學習曲線來理解如何以視覺上令人滿意的方式為二維角色製作動畫。 我需要為單個元素設置動畫，使其獨立於整體移動，以使動作可信。 隨著我製作動畫，我導入的圖層變得越來越細化。 當我了解程序的行為以及如何使獾移動時，頭部從一層變成了五層。

我錨定了身體的每個肢體，並將每個身體部位作為孩子設置到身體的父層。 我在大腿和肩膀的頂部相應地設置了錨點，以確保它們適當地移動，然後使用旋轉和緩動來模擬身體部位的運動。 頭部有點棘手，需要一些獨立於身體的垂直運動。 為了使跳躍看起來更逼真，我希望頭部在被身體其他部分向上推之前稍微懸在空間中，並在他的其餘部分之後稍微下降。 我還調整了角度，試圖讓他看起來像是用鼻子領先，跳躍時向上，奔跑時直截了當。

頁面上的動畫將用戶重定向回 badger，展示了baby badger 帶著一個裝滿來自 CRM 信息的背包跑回 badger。

最後：困惑的獾。 這是為我需要創建的最後一個頁面完成的：一個錯誤頁面，通知用戶集成過程中出現意外並發症。 還有什麼比同情、困惑的獾更好的方法呢？

這裡棘手的部分是將現有卡通獾的側面輪廓和標誌結合起來，創造出一個正面的頭部形狀。 在開始這個項目之前，我從未見過真正的活獾。 不用說，Badger 這個月已經進入了我的谷歌圖片搜索。 我驚訝地發現獾的頭實際上是平的。 在我最初的幾個設計中，我試圖模仿這一點，但對結果並不滿意。 我對形狀進行了更多處理，調整了鼻子、條紋和耳朵的位置以達到最終效果：

這個動畫製作過程迫使我將已有的知識提升到一個更高的水平。 我需要超越我所知道的，而不是用我認為我能做的事情來限制自己。 我最初是從定格動畫開始的，因為我不相信自己會做角色動畫。 通過給自己嘗試新事物和不同事物的機會，我能夠實現超出自己期望的事情。

結論

我在實習中度過的三個月非常令人欣慰。 每一天都是關於學習和嘗試新事物。 我所做的每一件事都面臨挑戰——即使是我更熟悉的任務，比如設計。 每次我創造一些東西時，我都非常不安全，並且擔心它會被如何接收。 有很多自我懷疑和很多被拋棄的想法。

出於這個原因，成為團隊的一員並有一位導師帶領我朝著正確的方向前進是令人難以置信的。 被告知嘗試其他事情通常是我嘗試其他事情並取得更大更好的成就所需的唯一鼓勵。 我喜歡把自己想像成打地鼠遊戲中的囓齒動物，一次又一次地被擊打頭部，但總是一次又一次地彈出。 現在掙扎和挑戰已經結束，我只想從頭再來。

我很感激我學到的東西，以及我是如何被迫超越我認為我能做的。 看到我在幾個月內走了多遠真是太瘋狂了。 我對作為一名 UX 設計師的理解有了很大的提高，從弄清楚功能到敲定設計，然後編寫前端代碼來實現它。 這次實習教會了我還有很多東西需要學習，並激勵我繼續工作。 我開始明白，我能做的永遠不應該被我知道怎麼做的限制。