2025 年 6 月，法國設計師 Pierre Patrault 出品“lgm/”網頁設計項目。該作品以 Web UI/UX、品牌識別、落地頁面為設計主軸，旨在通過最簡結構與視覺語言，打造清晰直觀的線上品牌窗口。

本項設計秉持“少即是多”的原則：簡潔的版式結構、統一的視覺元素與留白設計，讓每一個視覺焦點都直指品牌核心；用戶在瀏覽中自然而然地獲得信息層級，引發情感共鳴。

項目由 Pierre Patrault 主導創意設計與用戶界面；Teddy Vermeulin 負責開發落地頁面，并與品牌與視頻代理 Advitam 合作完成整體傳播支持。三者協作默契，將創意、技術與品牌傳播融為一體。

“lgm/”的發布，不僅是一次視覺嘗試，更是一次品牌線上表達的新實踐：精準、高效、富有引導性的設計語言，助力品牌與用戶間建立清晰、信任與溫度兼備的數字連接。
創意理念
“基于簡潔現代的視覺語言，lgm/ 項目以極簡主義為核心，將品牌形象與用戶體驗無縫融合，致力于在首屏即傳達品牌精髓，賦予每一次交互以直觀引導。”

3. 設計與體驗亮點

結構清晰：落地頁布局明晰、信息層級分明，讓用戶輕松抓住核心內容。

極致簡約：利用充足留白、統一調性、統一視覺元素，降低視覺干擾，提升品牌溝通效率。

交互細節（若有）：如鼠標懸停動畫、滾動觸發效果等，可寫出“精致微互動增強用戶參與感”。

蘭亭妙微(m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

每個設計師都有自己獨特的設計呈現方式。根據項目的不同，設計師會使用不同的方式展示他們的設計。Clickdummy 原型是展示屏幕流程最常用的方式，方便簡潔。通常情況下，設計師會以“編號+標題”的格式為所有屏幕命名，并通過導出結果中 JPG 文件的順序來表達屏幕之間關系的邏輯。

我很高興能使用像 Invision App 這樣的工具來理清我的設計。然而，ClickDummy 原型在構建大型復雜的軟件項目和功能性應用程序時并不理想。有時，我們會將屏幕放在 Sketch 文件中的不同頁面中，以使結構更清晰，但卻失去了整體的視覺效果。當你向項目經理、客戶和開發人員展示你的設計時，你會發現這個過程效率低下。

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

我們需要一個高效、流暢的流程來優化演示和交接。我的經驗是線框圖和UI的流程。這是一種非常新穎的方式，但效果很好。

我們知道 Behance 和 Dribbble 上有很多精美的線框和 UI 流程。其實很多設計師也在做同樣的事情。我在上海MINGLabs工作的時候，我的法國設計師同事 Lucas 教給我一個方法，它不僅易于理解，而且美觀高效，可以作為交接的 UI 呈現流程。后來，這個方法在我的遠程自由職業中得到了運用，并不斷改進。這對降低溝通成本非常有幫助。

為什么我更喜歡線框和 UI 設計流程？

1. 幫助設計師鞏固他們的想法
2. 顯示屏幕之間關系的邏輯
3. 使與客戶的溝通更加輕松，呈現的內容更加清晰可見
4. 使與開發者的溝通更加便捷，降低溝通成本。
5. 有利于與其他設計師合作

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

我如何制作流程？

當然，我的應用和網站都是用 Sketch 設計的。我建議從第一個線框圖開始設計流程。之后再設計主頁和兩三個輔助頁面。

步驟1

您可以創建一個新的畫板。畫板大小要足夠大，能夠覆蓋所有屏幕。這樣做的目的是為了更容易添加線條和注釋，也方便在最后時刻導出完整流程圖的概覽。不過，現在沒必要添加屏幕數量。等您心中有了概覽之后，再添加也不遲。

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

步驟2

流程包括 5 個組件：

1. 屏幕
2. 畫面名稱，格式為“ 數字＋字母+標題”或者“ 數字+標題”
3. 動作和位置（紅點）
4. 線
5. 筆記

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

步驟3

流程的結構是從左到右組織的。頁面位置越靠右，層級就越低。我的習慣是把首頁之類的第一頁放在左側。設計流程如下：

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

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

問題

線框和 UI 流程改善了溝通。但它并不完美，實際上有時甚至有點令人毛骨悚然。

1. 每次增加屏幕，數字就會亂。我的命名方法可以避免這種混亂，但不是最佳方法。
2. 一旦移動了屏幕，連接的線就必須重新繪制。
3. 導出的概覽 pdf 無法顯示每個屏幕的名稱。

蘭亭妙微(m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

基本原則
清晰、簡潔、一致、可操作暗示以及隱喻（可供性）、反饋、容錯、高效、易記憶易學習。

1. 清晰
內容、結構、界面效果都是清晰可見的，加強情感的修飾，注意只使用文字與排版來表達頁面，以字體、字號、顏色、版式，精妙動畫效果來增加界面的精致性與設計不夠。盡量避免平滑、陰影。
2. 簡潔
為了用戶聚焦，限制明確頁面唯一的或者最重要的目標性，不讓用戶讓焦鈦的選擇感。
3.一致性
界面元素的標準控件化：問題使用系統交互元素，以及界面和用戶之間對話風格的統一：標準文本風格、口吻、語氣、統一話術。
4.可操作暗示隱以及喻意
讓用戶看到這個就是可以交互的，按鈕要像按鈕，與文本內容以及其他界面元素有所區別。另外可增加操作引導，在操作時給予引導，而不是獨有的一股腦引發引導。隱喻本可以單獨做一個原則，但這里與可操作暗示大約類似，隱喻指的是虛擬界面可以做到讓用戶經驗類似的喻，確實是現實物理世界的隱喻還是虛擬數字世界。讓用戶無成本遷移感。5
. 反饋
任何操作都要給予可感知的操作反饋，當點擊或者其他時，被操作交互的要素要給予短暫的強調，另外通過動畫給予進度提示，
6.容錯與安全感
降低用戶犯錯成本，做到高危操作可恢復。應用應該通過使用熟悉的、可預見的交互元素，確認重要的操作、可回溯的取消手段等方式，來讓用戶覺得自己處于被保護的狀態中。此外還有防錯原則，采用本質的安全設計方式（固有）安全），比如表單未完成按鈕不可用...
7.高效
兩個方面，用戶高效使用的性以及高效開發的性，要關注網頁技術新功能，快速迭代那些優秀且通用改裝的新功能。
8.易學習易記憶
這是最后一條，在做到前面的原則之后，這條應該是取締的，但是由于技術性平臺的特殊性，涉及專業性技術術語等等的東西，所以對于一些非技術人員或者不太懂行的技術人員，需要提供提醒文檔嵌入，方便用戶學習。

蘭亭妙微(m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

1. 項目背景 & 設計目標

• 項目名稱與內容：這是為 ComplyControl——一個專注金融領域的前沿 AI 合規模塊（具備實時監控、智能檢測與欺詐發現功能）的品牌形象與網站界面設計項目 Behance+1。

• 完成時間與平臺：發布于 2025 年 6 月 4 日，整合品牌設計、網站 UI/UX 及用戶界面，使用 Figma 與 Webflow 等工具進行創作與實現 Behance。

2. 品牌視覺識別（Brand Identity）

• 標志設計：圖中展示了簡潔現代的標志（logo），結構緊湊且具識別度，呈現強烈的科技感與專業感 。

• 配色策略：項目運用了對比鮮明的暖色（如橙紅）與冷色（藍色），輔以深色底調，強化視覺沖擊力，同時展現了兼具活力與穩重的品牌氣質 。

• 字體風格：在字體展示中可見清晰可讀的無襯線體，搭配簡潔的數字表現，進一步傳達專業且現代的品牌語言 。

3. 界面設計（UI/UX & Website）

• 移動界面布局：圖中呈現了移動設備上的 UI 布局，包括導航菜單與交互按鈕，采用扁平化設計，按鈕與圖標配色清晰，對焦用戶操作體驗 。

• 數據可視化：圖表或百分比數據顯示以清晰簡練的方式呈現關鍵指標（如 95%、40% 等），輔助用戶快速理解核心內容 。

• 整體風格語言：整體風格簡潔、科技感強烈，布局邏輯清晰，強調功能與信息可視化，有助于金融產品的信息傳遞與可信感建立。

4. 工具與創作流程

• 設計工具：項目中使用了 Figma 進行界面與原型設計，利用 Webflow 實現響應式網頁開發與交互效果。同時還運用 After Effects、Photoshop 以豐富視覺表現與動畫效果 。

• 多方協同：項目由 Embacy Design 領銜，聯合多位設計師及機構參與，展現了團隊協作的深度與創意整合能力 。

總體評價與亮點

蘭亭妙微(m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

當美好的愿望遭遇現實

作為 Pennylane 的高級設計運營專家，我以為我們已經破解了設計文檔的密碼。我們基于 Notion 的系統全面、條理清晰，理論上堪稱完美。

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

在我的文章《設計文檔：一致性和協作性 UI 開發的關鍵支柱》中，我倡導基于 Notion 的方法作為設計系統文檔的黃金標準。回顧過去，那篇文章展現了我對文檔的熱情，但它也揭示了我對文檔實際使用人員應該是什么樣子的盲點。

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

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

“當我找到正確的文檔時，我可能已經構建了該組件的三個版本，”另一位用戶分享道。

這并不是我們團隊能力的失敗，而是我們的方法未能適應人們的實際工作方式。

改變一切的研究

之前，先簡單介紹一下背景。設計師為空狀態組件編寫的文檔是這樣的：

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

工程師需要的技術文檔是什么樣的：

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

我沒有為現有的文檔辯護，而是決定傾聽。幾周來，我對設計和工程領域的20名團隊成員進行了深入訪談。訪談結果清晰地展現了以下幾個摩擦點：

來自設計師：

• 在截止日期的壓力下，跨平臺維護文檔成為次要任務
• 后期反饋循環與工程團隊產生了緊張關系
• 設計意圖與技術實現之間的差距似乎難以逾越

來自工程師：

• 文檔與編碼環境脫節
• Figma 設計與實現的組件之間的視覺不一致造成了混亂
• 大量的文字解釋無法與直接探索代碼的即時性相媲美
• 多個事實來源導致決策癱瘓

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

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

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

我們不需要要求團隊適應我們的系統，如果我們的系統適應他們呢？

愿景：將文檔從靜態參考轉變為決策制定過程中的動態、視覺伴侶。

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

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

新的文檔架構

組件標題

干凈、簡約、專注于基本要素、組件名稱、實時代碼的直接鏈接和完成狀態。

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

視覺規格

以最純凈的形式顯示的組件，其變體被清晰地標記，并由復雜分子的分離資產層支持。

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

情境指導

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

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

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

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

注意事項

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

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

應用內示例

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

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

最終結果

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

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

結果

反饋具有變革性：

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

一位前端工程師表示： “這些可視化示例讓我省去了與設計團隊反復溝通的時間。我可以立即看到預期的行為。”

但真正的成功標準并非贊譽，而是使用率。我們的新文檔正在被積極地查閱、在設計評審中被引用，并在工程討論中被引用。它已經成為我們工作流程中不可或缺的一部分，而非事后才想到的。

建立在成功的基礎上

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

我們的下一個挑戰是將這些相同的原則應用到我們的 UI 工具包平臺，確保我們以工程為中心的工具像我們的設計文檔一樣直觀且工作流程集成。

教訓

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

通過從同理心出發，進行真正的研究，并圍繞實際工作流程而不是理論理想設計我們的文檔系統，我們創造了一些不僅僅存在的東西：它蓬勃發展。

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

蘭亭妙微(m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

從《沙丘》UI概念設計看游戲界面經驗

前幾天在 Behance 上刷到一個《DUNE｜Personal Work》的 UI 概念項目，整體完成度很高。作為設計師，我覺得這類作品不僅是視覺享受，也能總結出一些值得借鑒的經驗點。這里就結合其中的陣營選擇界面和整體展示，整理一些觀察和思考。

1. 版式與結構：焦點與對稱

這類「陣營選擇」場景，本質上是一個決策界面。作者采用了很經典的結構：

• 中央突出：當前選中的陣營（走私者）放在正中間，卡片更大、更亮，帶有金色光暈。

• 對稱排布：左右陣營呈對稱分布，層級自然清晰，符合玩家的瀏覽動線。

• 信息分區：上半部分是角色立繪和陣營徽記，下半部分是機制說明和操作提示。模塊分明，不容易迷失。

經驗點：在決策型界面中，居中放大+光效高亮，是非常直接有效的焦點策略。

2. 視覺語言：氛圍與辨識

《沙丘》的世界觀強調沙漠、貴族與荒涼感，UI 也延續了這一氛圍：

• 材質：背景有金屬與沙塵質感，帶來厚重感。

• 色彩：每個陣營配有主色（綠色、棕色、藍色、金色、紅色），既強化辨識，又有“品牌”味道。

• 徽記：幾何化的陣營符號，簡潔且容易記憶。

經驗點：大型世界觀游戲的 UI，最好在顏色、圖形符號和氛圍感上形成自洽體系。

3. 信息呈現：符號化與層次感

在陣營說明區，信息拆解得很合理：

• 優缺點：紅色 V 表示劣勢，綠色 ▲ 表示優勢。非常直觀，不需要額外解釋。

• 敘事與機制結合：不僅給數值效果，還加了劇情描述（例如與弗瑞曼的沖突），讓選擇更有代入感。

經驗點：把理性信息（數值）和感性信息（劇情）結合，能讓玩家在選擇時既動腦又動情。

4. 交互與引導：清晰的操作提示

底部的操作提示很細致：

• A 選擇 / B 詳情 / X 故事，分別對應不同層級的操作需求。

• 玩家既可以直接做決定，也可以深入劇情，滿足不同類型的用戶。

經驗點：關鍵節點上提供“淺 → 深”不同層級的操作選項，能兼顧快進型玩家和沉浸型玩家。

5. 作品展示方式：完整體驗

Behance 項目整體除了界面，還展示了：

• 不同場景的 UI（例如主菜單、HUD、資源界面）。

• 色彩與符號系統，確保整體一致性。

• 工具說明（Photoshop / Midjourney / 后期合成），透明展示流程。

經驗點：在作品集展示中，不僅要秀界面，還要展示系統性思考和設計過程。

總結

這份《DUNE》個人 UI 概念作品給我的幾點啟發：

1. 決策型界面要突出焦點，用對稱和光效增強層級。

2. 色彩與符號體系是陣營/角色類 UI 的關鍵資產。

3. 信息既要數值化，又要敘事化，提升代入感。

4. 操作引導要考慮不同層級的玩家。

5. 作品集展示不僅是炫圖，還要有系統設計思路。

如果你正在做游戲 UI 或作品集，這些經驗都值得借鑒。

蘭亭妙微(m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。