這個網站（minimal-portfolio-swart.vercel.app）發現一個不錯的交互效果，用戶體驗效果很不錯。如上圖所示，這個卡片上有一根白色的線條圍繞著卡片移動，且在線條的卡片內部跟隨這一塊模糊陰影，特別是在線條經過卡片圓角部分有特別絲滑的感覺。

今天的文章就來解析如何實現這種效果，文末附源碼預覽地址。根據示例圖片分析需要實現的功能點如下：

• 線條跟隨卡片邊框勻速移動
• 線條內部對應有模糊陰影
• 圓角部分絲滑動畫

這里為什么單獨說明圓角部分是因為這塊需要特殊處理，請看后面的文章。

思考

看到這個效果首先感覺是絲滑，沿著邊框移動的動畫元素如果是根據當前邊框實時計算而來的話，那么難度和算法會勸退很多人。

需要換一種思路，本質移動的線條元素和邊框并沒有關系，而是一個元素沿著邊框移動，線條和卡片內部的陰影就是一個元素，通過某種透視的方式產生了這種效果。

透視

通過透視的方式實現一個邊框效果，我們可以用2個盒子嵌套，父級設置1像素的padding，如下代碼簡單的實現一個邊框效果。

.outer {
  width: 400px;
  height: 200px;
  margin: 100px;
  background: rgb(54, 224, 202);
  padding: 1px;
  position: relative;
}

.inner {
  background: rgb(99, 99, 99);
  width: 100%;
  height: 100%;
}

效果圖：

然后增加一個子元素作為移動的元素，這個元素基于父級定位在邊框位置，由于動畫是沿著卡片內部四周移動，要確保在每一條邊上的透出的長度保持一致，所有創建的這個子元素是一個正方形。

.moving-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: #fff;
    animation: moveAround 8s linear infinite;
}

并對這個元素增加簡單的animation動畫，沿著內邊框移動。

這個動畫需要注意的一個點是要使元素在移動的過程中保持勻速的動畫，需要計算每個關鍵幀之間的距離，并根據這些距離來調整每個關鍵幀的百分比。這樣可以確保元素在每個時間段內移動的距離與時間成正比，從而實現真正的勻速移動。

這里我們以上面的卡片舉例，其寬度為400px，高度為200px，元素沿矩形的邊框移動。

• 計算總路徑長度：總長度 = 2 (寬度 + 高度) = 2 (400px + 200px) = 1200px
• 計算每段所占的時間比例：水平邊所占比例 = 400px / 1200px = 1/3 ≈ 33.33%，垂直邊所占比例 = 200px / 1200px = 1/6 ≈ 16.67%

動畫代碼如下：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: calc(100% - 80px);
    }
    50% {
        top: calc(100% - 80px);
        left: calc(100% - 80px);
    }
    83.33% {
        top: calc(100% - 80px);
        left: 0px;
    }
}

最終完成的簡單版動畫效果如下：

這里為了方便大家看增加了透明度展示內部移動的元素，若去掉透明度則只有邊框上的一根線。

邊框效果處理

仔細看上面的圖可以發現在邊框盡頭時的過渡效果不好，瞬間從一條邊切換到另一條邊。首先還原網站的效果，增加邊框圓角，然后將內部移動的元素通過圓角變成一個圓形，這時候還需要同步調整內部元素的定位和動畫移動時設置的定位，保證內部圓形的中心和邊框的一致。

增加圓角處理：

.outer {
  border-radius: 20px;
}

.inner {
  border-radius: 20px;
}

.moving-element {
  border-radius: 40px;
  /* 圓心和邊框一致 */
  transform: translate(-40px, -40px);
}

調整動畫過程中的定位：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    83.33% {
        top: 100%;
        left: 0px;
    }
}

此時的動畫效果：

此時的邊框位置動畫已經很接近網站的效果，進一步觀察在圖中的效果可以發現在邊框角落的位置有一點卡頓的感覺，這是因為邊框位置我們設置了圓角，但是元素移動的軌跡是直角，導致視覺上停頓了一下。這里我們需要進一步優化animation。設置圓角后內部動畫元素移動的點應該從4個變成8個，且對應的位置需要和圓角的大小一一對應才能保障流暢的動畫效果。

如下所示黑色圓點是到四個頂點的動畫坐標，新的綠色圓點是基于圓角后的動畫移動坐標。

基于上面的動畫百分比算法計算出最新的比例及坐標代碼如下：

@keyframes moveAround {
  0% { left: 40px; top: 0px; }
  28.93% { left: 360px; top: 0px; } 
  33.99% { left: 400px; top: 40px; } 
  44.82% { left: 400px; top: 160px; }
  49.88% { left: 360px; top: 200px; } 
  78.81% { left: 40px; top: 200px; }
  83.87% { left: 0px; top: 160px; } 
  94.70% { left: 0px; top: 40px; } 
  100% { left: 40px; top: 0px; } 
}

這里的動畫需要注意的是圓角部分綠色按鈕之間的動畫距離需要使用使用勾股定理計算。比如右上角的兩個點之間的計算方式是：

從 (360, 0) 到 (400, 40) = √((400-360)2 + (40-0)2) = √(1600 + 1600) = √3200 ≈ 56.57px

此時的動畫效果：

模糊陰影

現在就差最后的陰影部分還未實現，仔細觀察移動的線條并不是全實心純色，而是有漸變的效果，目前移動的元素是一個正方形，設置背景色為徑向漸變即可，修改背景色的代碼如下：

background-image: radial-gradient(#fff 40%,transparent 80%);

現在還需要將內部的漸變進一步模糊，注意這里僅僅是模糊元素背后的背景，不能影響卡片上面其他的元素內容展示。這里我們使用backdrop-filter設置blur模糊效果。

CSS屬性 backdrop-filter 用于在元素后面的區域上應用圖形效果（如模糊或顏色偏移）。這個屬性可以讓你對元素背后的背景進行處理，而不影響元素本身的前景內容。

最后進一步調整顏色還原網站的效果如下：

這個效果不僅可以做卡片展示，作為按鈕的背景效果也很不錯：

最后

到此整體的代碼實現過程就結束了，完整還原的網站的動畫效果。這是一個對用戶體驗很不錯的卡片效果，原網站實現的部分細節不一樣，整體實現原理差不多，基于兩個元素的1像素間距透出移動的線條，配合使用backdrop-filter設置純背景模糊效果，有興趣的可以嘗試看看。

作者:南城

來源-微信公眾號:南城大前端

出處:https://mp.weixin.qq.com/s/g-_3iD97PxmGL7RGwRrSvg

品設計中，簡潔清晰傳達出復雜概念是件難度不小的事，但也是很重要的事，這不僅關系設計的準確性，更關乎整個項目的順利進行。在這種情境下，線框圖的作用不容小覷。它作為設計思路的初步可視化手段，不僅是產品經理表達產品概念的工具，也是團隊協作和溝通的橋梁。

本文將帶你了解有關線框圖的全部內容——從它的定義、特點，到工具推薦，再到如何繪制線框圖。相信看完文章，你對線框圖一定不再陌生！

一、線框圖是什么？

1、線框圖

線框圖，是把數字化產品設想落地的第一步。

比如你想做個APP，腦海中已經有大致的方向，你需要用紙筆或工具把APP的界面框架表達出來，這個內容就叫線框圖。

線框圖是展示產品界面元素布局的簡化圖形，通常不涉及美學元素，如顏色、圖像等，而是通過基本的線條和形狀來表達頁面的結構。它的核心作用在于確定元素的布局和功能，如導航欄、按鈕、圖像區域及文本框等。

由于線框圖方便好用易修改的特點，在產品設計流程中，線框圖也是溝通設計思路、協調團隊意見和快速迭代概念的有效工具。它能幫助產品經理快速聚焦功能布局，而非視覺細節，從而在項目初期明確產品清晰的方向。

2、線框圖與原型圖

說到線框圖，不得不提原型圖。

原型圖根據保真程度的不同，可分為低、中、高保真原型，而線框圖就是最低保真度的原型圖。

那線框圖與高保真原型圖有什么不同呢？

1）保真度

所謂保真度，指的是產品界面與真實產品界面的相似度，產品界面越精細、越接近真實產品界面，保真度就越高。

• 線框圖更關注功能和結構，不關注外觀，用色簡單，以黑白灰為主，是低保真的。
• 高保真原型圖則包括顏色、圖像和動畫等，更接近最終產品的外觀。

2）使用階段

• 線框圖一般在設計的早期階段使用，作為討論和規劃的基礎。
• 高保真原型圖則在設計后期使用，當基本的布局和功能已經確定后，用于測試和演示設計的實際體驗。

3、交互效果

線框圖可以是靜態的，也可以有一些簡單的頁面交互效果，而高保真原型圖基本是動態的，需要用來模擬用戶與產品界面的互動。

二、5款好用的線框圖工具推薦

明確了線框圖的定義和特點，接下來說說畫線框圖需要用到的工具。

為了幫助產品經理和設計師高效地繪制線框圖，市面上提供了許多工具，以下為大家推薦5款好用的工具：

1、摹客RP

摹客RP（https://www.mockplus.cn/rp?hmsr=wentt101fj）是一款在線線框圖工具，無需下載安裝，就能上手繪制線框，它具有強大的交互能力、 支持多人協作、全面覆蓋設計需求、能夠滿足多種應用場景。

功能亮點：

• 流程圖模式：流程圖模式可以幫助你快速梳理邏輯，讓線框圖產出更高效。
• 海量設計資源：摹客RP提供了海量的圖標組件，以及多種類型、多種場景的原型設計模板，拖拽即用。
• 強大交互：輕松制作各種復雜交互和動畫，讓靜態的線框圖栩栩如生。
• 團隊協作和共享：支持多人同時在線協作編輯，一鍵分享演示網頁設計，實時評審優化。

價格：

可免費使用

學習難度：

入門簡單，無需專業基礎也能快速上手。

使用環境：

只需網頁瀏覽器即可使用，不受設備系統的限制。

推薦理由：

摹客RP是畫線框圖的利器，上手無壓力，海量組件和圖標用得不要太爽，還有出色的多人實時協同能力，能極大提升工作效率！

推薦評級：

?????

2、Axure RP

Axure RP（https://www.axure.com/）于2003年發布，是一款老牌的專業原型設計工具，擁有強大的組件庫，可快速完成產品或Web線框圖、流程圖及原型設計。

功能亮點：

• 功能強大且專業：Axure提供了豐富的交互元素和動作，可以創建復雜的交互流程和狀態轉換。
• 支持動態面板和復用模板：Axure可以輕松實現不同頁面和交互狀態的設計和切換。
• 支持HTML原型預覽：可將原型導出為HTML格式，并可以在Web瀏覽器中預覽原型。
• 擁有無限畫布的設計區域，方便添加文字解析。

價格：

美元/月起，可免費試用30天

學習難度：

新手入門難度大，交互設計復雜比較深奧，需要一定時間的學習。

使用環境：

需下載客戶端，支持Windows和MacOS

推薦理由：

Axure擁有強大的交互設計功能、豐富的組件庫，非常適用于需要高保真度原型和復雜交互設計的項目。

推薦評級：

????

3、Balsamiq

Balsamiq（https://balsamiq.com/）是一款流行的快速原型設計工具，旨在幫助用戶快速創建可視化的草圖和線框圖。其獨特的手繪風格界面使得用戶能夠輕松地設計出簡潔而直觀的界面原型，無需過多關注細節和設計風格。

功能亮點：

• 快速創建原型：Balsamiq提供了豐富的UI元素庫，用戶可以通過簡單的拖放操作快速構建界面原型。
• 手繪風格：其設計元素以草圖風格為主，讓用戶專注于布局和功能，而非視覺效果。
• 多平臺支持：可在Windows、Mac和Web瀏覽器中使用，適應各種工作環境。
• 實時協作：支持團隊成員實時協作，方便多人合作進行原型設計。

價格：

按項目收費（元/月起）

學習難度：

界面簡潔直觀，學習難度低，即使是新手也能快速上手。

使用環境：

支持Windows、Mac和Web瀏覽器

推薦理由：

Balsamiq是一個強大且易于使用的原型設計工具，非常適合早期快速原型設計階段，產品經理可以在快速制作多個原型版本。

推薦評級：

?????

4、UXPin

UXPin（https://www.uxpin.com/）是一款專注于用戶體驗（UX）設計的工具，它提供了豐富的功能來創建高保真度的交互原型和設計系統，幫助設計師和團隊打造出更優秀的產品。

功能亮點：

• 交互式原型設計：UXPin允許用戶創建高度交互的原型，包括復雜的動畫效果、狀態切換和真實的用戶交互，幫助模擬和驗證產品功能。
• 設計系統（Design Systems）：支持創建和管理設計系統，包括組件庫、樣式指南和可重復使用的設計元素，有助于保持設計一致性。
• 即時共享和協作：提供實時協作和評論功能，團隊成員可以即時共享和編輯設計，并進行反饋和討論，促進團隊協作。
• 用戶測試和反饋：支持用戶測試和收集反饋，讓設計師能夠了解用戶對產品的感受和體驗，有針對性地改進設計。

價格：

提供和免費版和付費版（6美元/月起）

學習難度：

界面簡潔直觀，學習難度低，即使是新手也能快速上手。

使用環境：

支持Windows、Mac和Web瀏覽器

推薦理由：

UXPin有強大的交互式原型設計功能、設計系統管理能力和實時協作特性。

推薦評級：

????

5、FlowMapp

FlowMapp（https://www.flowmapp.com/）是一個專注于用戶體驗（UX）和用戶界面（UI）設計的在線工具，它提供了一系列功能來幫助團隊協作、規劃和設計更好的用戶體驗。

功能亮點：

• 網站架構圖：允許創建詳細的網站架構圖，幫助團隊可視化網站的結構和導航流程。
• 用戶旅程圖：可以繪制用戶旅程圖，使設計團隊能夠理解和規劃用戶與產品的交互。
• 流程圖：提供流程圖工具，用于規劃和展示項目或服務的工作流程。
• 協作功能：支持團隊協作，包括實時編輯、評論和共享功能，使團隊成員能夠共同工作和交流想法。

價格：

可免費創建一個項目，付費版16美元/月起。

學習難度：

界面直觀，易于上手，特別是對于有UX/UI設計背景的用戶更簡單。

使用環境：

FlowMapp 主要在Web瀏覽器中運行

推薦理由：

FlowMapp是一個功能豐富的UX規劃平臺，可以廣泛用于網站和應用的設計和規劃階段。

推薦評級：

????

三、如何繪制線框圖？

工具了解了，如何開始畫線框圖呢？以下是一些關鍵技巧和步驟指南，可以幫助你畫出清晰、邏輯性強和團隊滿意的線框圖。

1、明確產品需求

在開始畫線框圖之前，我們需要做好調研，理清產品需求，明確產品的目標和功能，并收集相關資料，如用戶需求、功能需求和參考資料等，這樣可以幫助我們明確產品頁面需要哪些元素，如何通過線框圖實現目標。

2、設置布局和結構

明確產品需求后，我們開始動手畫線框圖。首先要選擇一款線框圖工具，以摹客RP（https://www.mockplus.cn/rp?hmsr=wentt101fj）為例，新建一個項目，選擇合適的項目類型，即可開始繪制線框圖。

通過拖動左側組件到中間工作區，在畫板上規劃出頁面主要區域，如導航、內容和圖片等，畫出簡單的框架示意圖。

在線框圖階段，要注意保持簡潔和邏輯清晰，只需通過簡單的形狀和線條來表示頁面布局，文案和圖片都可以用占位符先占位，不需要精確展現。

3、添加交互

線框圖的交互效果可以不用太復雜，但可以添加簡單的頁面交互和一些重要交互。

4、細化和注釋

畫好了大致的頁面框架，需要對局部進行優化。 比如，細化頁面每個區域和元素的大小、間距和位置，確定文案內容以及交互等，確保其合理性。另外，還需從用戶體驗的角度，逐一審查線框圖，確保頁面導航邏輯清晰，易于訪問。

5、反饋優化

產品設計不是一個人的決定，而是協作的過程。在這個階段，我們需要與團隊成員分享線框圖，收集反饋意見，特別關注布局和功能性。

然后，根據反饋，調整線框圖中的元素位置、大小和交互，確保最終版本滿足設計需求和用戶體驗。

在摹客RP中，你可以邀請成員加入項目，多人同時在線修改，修改內容實時更新，省去繁雜的文件傳輸過程。團隊成員還可以通過摹客協作直接在設計稿上批注，一站式完成線框設計反饋修改更新全過程。

總結

線框圖在產品設計過程中扮演著至關重要的角色，它是產品經理表達創意想法的工具，也是后續產品開發成型的基礎。通過線框圖，設計團隊可以在項目初期階段就高效地確定產品的基本結構和功能，從而避免后期消耗更多時間去修改。

如果你想真正掌握線框圖，不妨嘗試用摹客RP自己畫一個，相信當你上手操作后，離畫出完美的線框圖就不遠啦！