不只好看，更能說話：Stripe新官網設計的幕後心法
📋 Brief
Stripe的設計主管Katie Dill分享了他們如何重新打造官網。影片不僅展示了新網站的設計巧思，更深入解析了Stripe從商業策略、品牌故事到用戶體驗的全面升級過程。她還透露了AI如何影響設計流程，讓網站不只美觀，更能精準傳達企業價值與規模。
⏱️ 內容分段導航
| 時間段 | 內容摘要 |
|---|---|
| 00:00 - 00:25 | 影片開場與設計主管介紹 |
| 00:26 - 04:02 | 舊網站的挑戰與改版動機 |
| 04:03 - 06:40 | 網站作為企業宣言：新設計的核心理念 |
| 06:41 - 08:38 | 獨特的信任證明：GDP實時計數器 |
| 08:39 - 11:33 | 「便當盒」設計：模態視窗的漸進式揭露 |
| 11:34 - 14:44 | 動畫與互動的深層意義：趣味與精準的平衡 |
| 14:45 - 15:47 | 精雕細琢的堅持：不為發佈而妥協 |
📖 詳細內容
01｜影片開場與設計主管介紹
核心觀點： 影片開場歡迎Stripe設計主管Katie Dill，她將帶領觀眾了解Stripe新網站的幕後故事，並探討AI如何影響他們的設計流程，預告這將是一場關於設計與科技如何結合的深度對談。
重要原話：
"Katie and her team recently launched a brand new Stripe homepage. She's going to take us behind the scenes of the new website and talk about how AI is changing her team's design process." (中文翻譯：Katie和她的團隊最近發佈了全新的Stripe首頁。她將帶我們深入了解新網站的幕後故事，並談談AI如何改變她團隊的設計流程。)
個人感受： 看到Stripe這樣頂尖的公司也積極擁抱AI來改變設計工作，讓我對未來的工作模式充滿期待。感覺設計師的職能會更往策略和創意端移動。
延伸思考： AI的引入，是否意味著基礎的設計執行將被自動化，設計師必須更專注於品牌敘事、用戶心理和策略層面的思考？
可參考的行動： 研究看看目前市面上有哪些AI輔助設計工具，並試用它們來簡化日常設計工作中的重複性任務。
02｜舊網站的挑戰與改版動機
核心觀點： Stripe的舊網站雖然視覺上依然新穎，但隨著公司產品線和服務對象的極速擴展（從單純支付到AI計費、多國企業服務），原有的敘事架構已無法完整傳達其日益複雜的業務全貌。網站資訊過長且敘事主軸混亂，需要全新的視覺語言和故事線來匹配企業的成熟度。
重要原話：
"it was because the business had just evolved beyond the point of what this story was was being told on this site." (中文翻譯：那是因為公司業務的發展已經超越了舊網站所能講述的故事範圍。)
個人感受： 聽到設計師說舊網站其實「撐」得很好，不是因為過時才換，而是業務發展太快，讓我很意外。這讓我想到很多時候不是東西不好用，而是我們長大了，它跟不上了。
延伸思考： 這提醒我們，一個好的設計不只考量當下，更要為未來的業務增長留有彈性，或者至少要意識到隨著時間推移，核心敘事可能需要重塑。
可參考的行動： 重新檢視自家公司或個人網站的首頁，問問自己：「這個頁面能否在幾秒內，清晰傳達我現在最想讓客戶知道的三件事？」如果不能，就該動手調整了。
03｜網站作為企業宣言：新設計的核心理念
核心觀點： 新網站的設計理念，是將網站視為企業的「宣言書」。它不僅要清楚表達Stripe是什麼、做什麼以及為什麼做，更要透過視覺選擇、字體細節和互動方式，間接傳達公司的細心程度與價值觀。設計團隊花費超過一年時間，不為求快，只為精準捕捉最能代表Stripe的設計語言。
重要原話：
"I think one part of it is it's it's your manifesto whether you explicitly call it that or not." (中文翻譯：我認為其中一部分是，無論你是否明確地這樣稱呼它，它都是你的宣言書。)
個人感受： 「網站是企業宣言」這個觀點讓我腦洞大開。以前總覺得網站只是展示產品，現在才明白它承載了更多關於品牌精神和企業靈魂的東西。這讓設計的份量變得很重。
延伸思考： 如果將網站看作宣言，那麼每次設計更新，其實都是公司一次重要的自我審視與對外溝通。這要求設計團隊必須深度理解企業的願景與策略。
可參考的行動： 在規劃任何品牌呈現（不論是網站、簡報或電郵）時，先問自己：「這份呈現要傳達出我們公司的哪些核心價值？」並在細節中體現這些價值。
04｜獨特的信任證明：GDP實時計數器
核心觀點： Stripe在新網站的顯眼位置放置了一個實時更新的全球GDP佔比計數器。這個獨特的設計不僅視覺吸睛，更直接且有力地展示了Stripe在全球經濟中的巨大影響力，為潛在客戶建立了強烈的信任感和可靠度，尤其對於那些尋求規模化解決方案的大型企業至關重要。
重要原話：
"It's not many companies that could um that could have a live counter of the percentage of the global GDP, not even just US GDP that is running on Stripe." (中文翻譯：沒有多少公司能夠實時顯示全球GDP中，有多少百分比是運行在Stripe平台上的，甚至不只美國GDP。)
個人感受： 看到GDP計數器的時候，我真的被震撼到了。這不只是一個數字，更是Stripe實力的直觀證明。這種用數據說話的方式，比任何文字描述都更有說服力。
延伸思考： 如何將公司獨特的競爭優勢或用戶規模，轉化為視覺化、直觀且令人印象深刻的元素，而不僅僅是文字敘述？這需要跳脫傳統的思考。
可參考的行動： 思考自家產品或服務中最具說服力的數據是什麼？有沒有可能將這個數據設計成一個獨特的視覺元素，放在網站最容易看到的地方？
05｜「便當盒」設計：模態視窗的漸進式揭露
核心觀點： 為了解決舊網站資訊過載的問題，Stripe在新網站中採用了被稱為「便當盒（bento）」的模組化設計。每個「便當盒」代表一類解決方案，輕巧呈現核心資訊和吸引人的圖像。當用戶點擊時，會彈出一個模態視窗提供更多產品細節，讓用戶無需離開首頁就能深入了解，這種「漸進式揭露」的方式避免了資訊轟炸，提升了探索體驗。
重要原話：
"So, we want to give you essentially progressive disclosure as a way of of getting towards the more details behind the products and more things that we offer." (中文翻譯：所以，我們想提供你一種漸進式揭露的方式，讓你逐步了解產品背後的更多細節以及我們提供的更多服務。)
個人感受： 「便當盒」這個比喻太形象了，既解決了資訊過多的問題，又讓瀏覽過程變得很輕盈、很有趣。模態視窗的設計也確保了用戶體驗的連貫性，這點很聰明。
延伸思考： 這種漸進式揭露的設計思路，不僅適用於網站，也能應用在產品設計、教學流程或任何需要引導用戶逐步理解複雜資訊的場景。如何判斷哪些資訊應該先顯示，哪些應該後顯示？
可參考的行動： 如果你的網站或產品頁面有太多資訊，試著將其拆解成幾個核心模組，並考慮使用彈出視窗（而不是導向新頁面）來提供第二層的資訊，看看用戶的回饋如何。
06｜動畫與互動的深層意義：趣味與精準的平衡
核心觀點： Stripe網站中的動畫與互動元素並非為了華麗而存在，而是經過精心調校，旨在傳達公司對細節的重視，並讓網站感覺「活生生」。這些微妙的動態不僅提升了用戶體驗，更間接證明了Stripe在處理金融數據和保護用戶資訊方面的嚴謹與可靠，同時也讓網站瀏覽過程增添了趣味性。AI工具在加速實現「良好」的動效上發揮作用，讓設計師有更多時間打磨「卓越」。
重要原話：
"If you see the care that goes here, then you you're right to assume that we also put that care behind the scenes in the way that we move money and the way that we protect uh a company's information." (中文翻譯：如果你看到我們在這裡所投入的細心，那麼你就能正確地推斷出，我們在處理資金流動和保護公司資訊方面，同樣也投入了那樣的細心。)
個人感受： 我很喜歡設計師強調動畫「不是為了動而動」，而是有其深層意義。這讓我重新思考，那些看似無關緊要的細節，其實都在無形中塑造著用戶對品牌的信任感。
延伸思考： 在數位產品設計中，如何避免動畫變成干擾，反而能強化核心訊息？這需要對用戶行為和品牌調性有深刻的理解。
可參考的行動： 檢視目前網站或應用程式中的互動效果，評估它們是否都具備明確的「意圖」？如果沒有，試著為每個互動效果定義一個想傳達的訊息或功能。
07｜精雕細琢的堅持：不為發佈而妥協
核心觀點： Stripe團隊在新網站發佈前，即使已經有「還不錯」的動畫效果，但為了追求完美，他們選擇延後發佈，花費更多時間打磨動畫之間的轉換流暢度與細節，直到達到「真正順暢、精準」的理想狀態。這種對品質不妥協的態度，體現了公司對細節的極致追求，即便這意味著發佈時程的推遲。
重要原話：
"And it was a decision, you know, a group decision that we should wait and we should do it right." (中文翻譯：這是一個決定，一個團隊共同的決定，我們應該等待，並把它做好。)
個人感受： 看到Stripe團隊願意為了動畫的流暢度而延後發佈，真的讓我對他們的匠人精神感到佩服。這種「把事情做對，而非趕著做完」的態度，是我覺得最值得學習的地方。
延伸思考： 在追求快速迭代的時代，如何平衡發佈速度與品質之間的關係？有時候，等待和精修是否能帶來更大的長期價值？
可參考的行動： 在你下次即將發佈一個項目時，問問自己：「這真的已經達到我們能力範圍內最好的狀態了嗎？有沒有某個細節，值得我們再多花一點時間去打磨？」
💎 精華收穫
這部影片讓我明白，一個成功的網站不僅是產品的展示櫃，更是企業願景和價值觀的延伸。Stripe的案例清楚地告訴我們，透過深思熟慮的設計，網站能夠超越美觀，成為與用戶建立信任、傳達品牌精神的有力宣言，尤其當AI工具能幫我們處理重複工作時，設計師更能專注於創造獨特且有意義的體驗。
由 PotatoLearning Hub 自动生成