Redesign Health - Services 頁面設(shè)計(jì)

 1. 整體風(fēng)格

• 視覺氣質(zhì)：整體基調(diào)偏 理性、專業(yè)、低調(diào)，采用米色背景 + 黑灰文字，輔以少量紫色/漸變作為強(qiáng)調(diào)色，既保持了沉穩(wěn)，又帶來了一點(diǎn)現(xiàn)代感。

• 風(fēng)格走向：屬于 極簡(jiǎn)主義 + 企業(yè)級(jí)設(shè)計(jì)，強(qiáng)調(diào)可讀性和內(nèi)容層次，而不是過度的裝飾。

 2. 布局與信息架構(gòu)

• 雙欄布局：左側(cè)為主內(nèi)容區(qū)，右側(cè)為補(bǔ)充信息區(qū)（Case studies、Impact 等），符合 B2B 網(wǎng)站“敘事+數(shù)據(jù)”的信息邏輯。

• 模塊化結(jié)構(gòu)：整頁分為“服務(wù)介紹 → 合作伙伴 → 核心方法 → 案例 → 數(shù)據(jù) → 頁腳”，層次清晰，便于用戶快速掃讀。

• 留白運(yùn)用：邊距和行距充足，讓密集的信息不會(huì)顯得壓迫。

3. 字體與排版

• 字體選擇：大標(biāo)題用襯線字體，正文與導(dǎo)航用無襯線字體，形成了“理性 + 權(quán)威”的組合感。

• 層級(jí)對(duì)比：大字號(hào)的引語（客戶推薦語）、醒目的數(shù)字（16、0.35），在頁面中承擔(dān)“視覺錨點(diǎn)”，讓用戶瀏覽時(shí)有重點(diǎn)停留。

 4. 色彩與圖像

• 主色調(diào)：米白+深灰，低飽和、溫和，符合醫(yī)療健康行業(yè)對(duì)“信任感”的需求。

• 強(qiáng)調(diào)色：紫色作為關(guān)鍵數(shù)字/圖表的點(diǎn)綴色，既突出重點(diǎn)又不會(huì)過于跳脫。

• 圖片選擇：多為真實(shí)的會(huì)議、交流、合作場(chǎng)景，營(yíng)造出“可信賴、有人情味”的氛圍。

 5. 信息傳達(dá)方式

• 數(shù)據(jù)可視化：用簡(jiǎn)潔的折線/柱狀可視化來傳遞成果（例如 0.35、16 這樣的數(shù)字），強(qiáng)化專業(yè)性。

• 案例驅(qū)動(dòng)：通過真實(shí)案例（Global Pharmaceutical Partner / Medical Center）讓抽象的“服務(wù)價(jià)值”更具象。

• 客戶引語：引用客戶高管的話語，用來增加背書和信任感。

6. 亮點(diǎn)

• 沉穩(wěn)專業(yè)但不死板：通過紫色和漸變線條避免了“金融感”的冷硬。

• 閱讀體驗(yàn)好：大段文字通過模塊拆分 + 圖文混排，提升了可讀性。

• 可信度高：案例、數(shù)字、客戶語錄多維度支撐了企業(yè)實(shí)力。
  
  

  

  蘭亭妙微(m.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

2025 年 6 月，法國設(shè)計(jì)師 Pierre Patrault 出品“lgm/”網(wǎng)頁設(shè)計(jì)項(xiàng)目。該作品以 Web UI/UX、品牌識(shí)別、落地頁面為設(shè)計(jì)主軸，旨在通過最簡(jiǎn)結(jié)構(gòu)與視覺語言，打造清晰直觀的線上品牌窗口。

本項(xiàng)設(shè)計(jì)秉持“少即是多”的原則：簡(jiǎn)潔的版式結(jié)構(gòu)、統(tǒng)一的視覺元素與留白設(shè)計(jì)，讓每一個(gè)視覺焦點(diǎn)都直指品牌核心；用戶在瀏覽中自然而然地獲得信息層級(jí)，引發(fā)情感共鳴。

項(xiàng)目由 Pierre Patrault 主導(dǎo)創(chuàng)意設(shè)計(jì)與用戶界面；Teddy Vermeulin 負(fù)責(zé)開發(fā)落地頁面，并與品牌與視頻代理 Advitam 合作完成整體傳播支持。三者協(xié)作默契，將創(chuàng)意、技術(shù)與品牌傳播融為一體。

“lgm/”的發(fā)布，不僅是一次視覺嘗試，更是一次品牌線上表達(dá)的新實(shí)踐：精準(zhǔn)、高效、富有引導(dǎo)性的設(shè)計(jì)語言，助力品牌與用戶間建立清晰、信任與溫度兼?zhèn)涞臄?shù)字連接。
創(chuàng)意理念
“基于簡(jiǎn)潔現(xiàn)代的視覺語言，lgm/ 項(xiàng)目以極簡(jiǎn)主義為核心，將品牌形象與用戶體驗(yàn)無縫融合，致力于在首屏即傳達(dá)品牌精髓，賦予每一次交互以直觀引導(dǎo)。”

3. 設(shè)計(jì)與體驗(yàn)亮點(diǎn)

結(jié)構(gòu)清晰：落地頁布局明晰、信息層級(jí)分明，讓用戶輕松抓住核心內(nèi)容。

極致簡(jiǎn)約：利用充足留白、統(tǒng)一調(diào)性、統(tǒng)一視覺元素，降低視覺干擾，提升品牌溝通效率。

交互細(xì)節(jié)（若有）：如鼠標(biāo)懸停動(dòng)畫、滾動(dòng)觸發(fā)效果等，可寫出“精致微互動(dòng)增強(qiáng)用戶參與感”。

蘭亭妙微(m.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

當(dāng)美好的愿望遭遇現(xiàn)實(shí)

作為 Pennylane 的高級(jí)設(shè)計(jì)運(yùn)營(yíng)專家，我以為我們已經(jīng)破解了設(shè)計(jì)文檔的密碼。我們基于 Notion 的系統(tǒng)全面、條理清晰，理論上堪稱完美。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

在我的文章《設(shè)計(jì)文檔：一致性和協(xié)作性 UI 開發(fā)的關(guān)鍵支柱》中，我倡導(dǎo)基于 Notion 的方法作為設(shè)計(jì)系統(tǒng)文檔的黃金標(biāo)準(zhǔn)。回顧過去，那篇文章展現(xiàn)了我對(duì)文檔的熱情，但它也揭示了我對(duì)文檔實(shí)際使用人員應(yīng)該是什么樣子的盲點(diǎn)。

在我原本以為只是例行檢查設(shè)計(jì)和工程團(tuán)隊(duì)時(shí)，我突然意識(shí)到了這一點(diǎn)。結(jié)果，我聽到的不是成功的故事，而是令人不安的事實(shí)：我們精心制作的文檔，對(duì)于最需要它的人來說，基本上是隱形的。

一位前端工程師承認(rèn)： “我通常只是嘗試自己解決問題，這比在多個(gè)平臺(tái)上搜索要快得多。”

“當(dāng)我找到正確的文檔時(shí)，我可能已經(jīng)構(gòu)建了該組件的三個(gè)版本，”另一位用戶分享道。

這并不是我們團(tuán)隊(duì)能力的失敗，而是我們的方法未能適應(yīng)人們的實(shí)際工作方式。

改變一切的研究

之前，先簡(jiǎn)單介紹一下背景。設(shè)計(jì)師為空狀態(tài)組件編寫的文檔是這樣的：

按 Enter 鍵或單擊即可查看完整尺寸的圖像

工程師需要的技術(shù)文檔是什么樣的：

按 Enter 鍵或單擊即可查看完整尺寸的圖像

我沒有為現(xiàn)有的文檔辯護(hù)，而是決定傾聽。幾周來，我對(duì)設(shè)計(jì)和工程領(lǐng)域的20名團(tuán)隊(duì)成員進(jìn)行了深入訪談。訪談結(jié)果清晰地展現(xiàn)了以下幾個(gè)摩擦點(diǎn)：

來自設(shè)計(jì)師：

• 在截止日期的壓力下，跨平臺(tái)維護(hù)文檔成為次要任務(wù)
• 后期反饋循環(huán)與工程團(tuán)隊(duì)產(chǎn)生了緊張關(guān)系
• 設(shè)計(jì)意圖與技術(shù)實(shí)現(xiàn)之間的差距似乎難以逾越

來自工程師：

• 文檔與編碼環(huán)境脫節(jié)
• Figma 設(shè)計(jì)與實(shí)現(xiàn)的組件之間的視覺不一致造成了混亂
• 大量的文字解釋無法與直接探索代碼的即時(shí)性相媲美
• 多個(gè)事實(shí)來源導(dǎo)致決策癱瘓

根本原因是，我們創(chuàng)建了一個(gè)滿足組織需求但忽略了用戶自然工作流程的文檔系統(tǒng)。

將文檔重新想象為一種生活工具

解決方案不是編寫更好的文檔，而是從根本上重新思考文檔是什么。

我們不需要要求團(tuán)隊(duì)適應(yīng)我們的系統(tǒng)，如果我們的系統(tǒng)適應(yīng)他們呢？

愿景：將文檔從靜態(tài)參考轉(zhuǎn)變?yōu)闆Q策制定過程中的動(dòng)態(tài)、視覺伴侶。

我們的新理念：展示，而不是講述

1. 我們注重視覺優(yōu)先的溝通，而非描述組件的外觀，而是結(jié)合上下文進(jìn)行展示。現(xiàn)在，每個(gè)組件都包含其默認(rèn)狀態(tài)、主要變體以及實(shí)際應(yīng)用，一目了然。
2. 工作流集成文檔現(xiàn)已集成到 Figma 中，這是我們?cè)O(shè)計(jì)師日常使用的工具。無需再切換上下文，也無需跨平臺(tái)搜索。
3. 信息披露采用漸進(jìn)式分層結(jié)構(gòu)：重要細(xì)節(jié)預(yù)先呈現(xiàn)，必要時(shí)提供更深入的背景信息。團(tuán)隊(duì)可以根據(jù)自身情況靈活參與。

新的文檔架構(gòu)

組件標(biāo)題

干凈、簡(jiǎn)約、專注于基本要素、組件名稱、實(shí)時(shí)代碼的直接鏈接和完成狀態(tài)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

視覺規(guī)格

以最純凈的形式顯示的組件，其變體被清晰地標(biāo)記，并由復(fù)雜分子的分離資產(chǎn)層支持。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

情境指導(dǎo)

工藝技巧、行為文檔和使用指南以視覺方式與交互式示例一起呈現(xiàn)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

按照這里顯示的順序我們有：

1. 內(nèi)容指南鏈接，由我們的 UXW 作家創(chuàng)建并托管在 Notion 上
2. 一些關(guān)于工藝技能的“技巧”，以促進(jìn)持續(xù)改進(jìn)并幫助團(tuán)隊(duì)采用先進(jìn)的技術(shù)
3. 對(duì)于具有水平滾動(dòng)模式的表格，我們有尺寸指南和通用行為。此元素也可以在創(chuàng)建表格時(shí)用作模板
4. 使用不同的顏色標(biāo)記來表示與每條線的交互
5. 調(diào)整列大小功能已記錄為可在應(yīng)用程序上實(shí)時(shí)使用

注意事項(xiàng)

一些多功能組件需要“注意事項(xiàng)”部分來說明使用它們的限制和最佳實(shí)踐。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

應(yīng)用內(nèi)示例

模板展示實(shí)際用例中的組件，彌合孤立組件和完整用戶體驗(yàn)之間的差距。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

最終結(jié)果

完整、全面的文檔，一目了然，沒有不必要的文本或過時(shí)的信息。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

結(jié)果

反饋具有變革性：

“終于有符合我語言的文檔了，”一位設(shè)計(jì)師分享道。 “我不用離開 Figma 就能看到我需要的一切。”

一位前端工程師表示： “這些可視化示例讓我省去了與設(shè)計(jì)團(tuán)隊(duì)反復(fù)溝通的時(shí)間。我可以立即看到預(yù)期的行為。”

但真正的成功標(biāo)準(zhǔn)并非贊譽(yù)，而是使用率。我們的新文檔正在被積極地查閱、在設(shè)計(jì)評(píng)審中被引用，并在工程討論中被引用。它已經(jīng)成為我們工作流程中不可或缺的一部分，而非事后才想到的。

建立在成功的基礎(chǔ)上

這次旅程讓我明白，優(yōu)秀的文檔就是在人們所在的地方與他們會(huì)面并支持他們自然的工作方式。

我們的下一個(gè)挑戰(zhàn)是將這些相同的原則應(yīng)用到我們的 UI 工具包平臺(tái)，確保我們以工程為中心的工具像我們的設(shè)計(jì)文檔一樣直觀且工作流程集成。

教訓(xùn)

這次轉(zhuǎn)型最重要的啟示在于人性。我們的利益相關(guān)者并不抗拒文檔，他們抗拒的是那些無法滿足他們需求的文檔。

通過從同理心出發(fā)，進(jìn)行真正的研究，并圍繞實(shí)際工作流程而不是理論理想設(shè)計(jì)我們的文檔系統(tǒng)，我們創(chuàng)造了一些不僅僅存在的東西：它蓬勃發(fā)展。

對(duì)其他設(shè)計(jì)團(tuán)隊(duì)的啟示：你的文檔的好壞取決于它的采用程度。在寫下任何文字之前，先問問你的用戶他們真正需要什么。答案可能會(huì)讓你大吃一驚，并激發(fā)你徹底重新思考如何分享設(shè)計(jì)知識(shí)。

蘭亭妙微(m.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

Figma 是設(shè)計(jì)師的游樂場(chǎng)，但有時(shí)感覺滑梯壞了，沙盒里充滿了錯(cuò)誤。

你懷著設(shè)計(jì)精美作品的崇高目標(biāo)打開文件……然后花了 90 分鐘調(diào)整按鈕、命名圖層，還和自己爭(zhēng)論字體大小。真有意思！

值得慶幸的是，有一些工具可以幫我們擺脫這種緩慢瘋狂的循環(huán)。這些工具可以幫我們處理那些無聊、重復(fù)的工作，這樣你就可以真正專注于設(shè)計(jì)，也就是你擅長(zhǎng)的部分。

以下 7 種工具可自動(dòng)化您的 Figma 工作流程。

1. MadeinFigma：跳過無聊的東西

將顯示縮放圖像

讓我們從最明顯的開始。

MadeinFigma專為那些厭倦了第 47 次設(shè)計(jì)相同登錄屏幕的人而設(shè)計(jì)。它包含預(yù)置的產(chǎn)品套件、UI 組件、網(wǎng)站版塊、儀表板和產(chǎn)品流程。

從真實(shí)完成的布局開始，然后逐步構(gòu)建，無需拖拽矩形框耗費(fèi)三個(gè)小時(shí)。只需復(fù)制粘貼、調(diào)整，即可完成。

它不僅節(jié)省時(shí)間，還能讓你把腦力投入到實(shí)際問題上，比如如何為客戶設(shè)計(jì)一個(gè)美觀的身份驗(yàn)證流程。

2. 內(nèi)容卷軸：別再輸入“John Doe”了

將顯示縮放圖像

你正在填寫表格。你需要一些示例姓名、郵箱、頭像和地址。你盯著屏幕。你的大腦卻無法想象出一個(gè)令人信服的虛擬人物。

這就是Content Reel發(fā)揮作用的地方。它會(huì)立即用真實(shí)的數(shù)據(jù)填充您的設(shè)計(jì)，這樣您就不必再假裝每個(gè)用戶都被命名為“測(cè)試用戶 3”。

使用它來插入看起來真實(shí)、行為真實(shí)的內(nèi)容，并且不會(huì)讓您的 UI 看起來像是在真空中制作的。

3. Autoflow：輕松連接屏幕

將顯示縮放圖像

想要繪制流程圖嗎？厭倦了在 18 幀之間手動(dòng)繪制箭頭嗎？

Autoflow可以自動(dòng)完成這一切。選中兩個(gè)框架，砰，連接線就畫好了。這是 Figma 嚴(yán)重缺失的智能連接工具。

它非常適合展示用戶旅程，而不會(huì)讓您的畫布看起來像舊的犯罪調(diào)查委員會(huì)。

4. Similayer：像老板一樣管理你的圖層

將顯示縮放圖像

你的 Figma 文件有 300 個(gè)圖層。你想更改所有按鈕的顏色。手動(dòng)選擇它們是一種數(shù)字自殘。

Similayer允許你選擇所有具有相同屬性的圖層，例如文本樣式、填充、描邊等。只需單擊一下，即可將所有圖層整合在一起進(jìn)行編輯。這真的很讓人滿意。

使用它來進(jìn)行清理、批量編輯，或者在周一早上感受強(qiáng)大的力量。

5. Iconify：無盡圖標(biāo)，零遺憾

將顯示縮放圖像

沒有 Iconify 的設(shè)計(jì)就像沒有清單去買東西。你以為你會(huì)記得你需要什么，結(jié)果回來時(shí)卻只帶了一罐豆子，心中充滿了深深的恐懼。

Iconify讓您無需離開 Figma 即可訪問超過 100 個(gè)圖標(biāo)集，包括 Material、Feather、FontAwesome 等。

非常適合當(dāng)您的設(shè)計(jì)尖叫“在這里添加一個(gè)圖標(biāo)”時(shí)，您尖叫著回答“哪一個(gè)？！”

6. FigGPT：讓人工智能來做

將顯示縮放圖像

我們生活在人工智能時(shí)代，老實(shí)說，我們最好也傾向于人工智能時(shí)代。

FigGPT是一個(gè) AI 插件，它可以幫助生成占位符副本、建議布局想法，甚至在你的大腦退出聊天時(shí)命名你的框架。

它并不完美。它仍然把按鈕叫做“請(qǐng)點(diǎn)我”。但在截止日期前，它是個(gè)不錯(cuò)的數(shù)字伙伴。

7. Design Lint：捕捉你錯(cuò)過的東西

將顯示縮放圖像

你知道嗎，當(dāng)你完成設(shè)計(jì)，準(zhǔn)備展示的時(shí)候，有人指出你的行高正好有一幀不對(duì)嗎？是的，我也遇到過這種情況。

Design Lint會(huì)檢查您的文件是否存在不一致、缺少樣式、未鏈接的元素、異常顏色，這樣您就不會(huì)在下次審核中受到批評(píng)。

這就像一個(gè)一絲不茍的實(shí)習(xí)生，他唯一的目的就是指出你的錯(cuò)誤，但是很客氣。

提示：不要讓自動(dòng)化讓你變得懶惰

這些工具可以提供幫助，但它們并不能取代實(shí)際的品味和判斷。

使用自動(dòng)化可以節(jié)省時(shí)間，減少錯(cuò)誤，避免重復(fù)做 400 次相同的任務(wù)。但仍然需要檢查間距。仍然需要調(diào)整字體排版。仍然需要進(jìn)行一些巧妙的設(shè)計(jì)，讓最終產(chǎn)品更具人性化。

因?yàn)殡m然機(jī)器人很擅長(zhǎng)替換你的 lorem ipsum，但它們?nèi)匀粺o法決定你的號(hào)召性用語應(yīng)該是“立即購買”還是“開始旅程”。

蘭亭妙微(m.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。