前言：之前發布了幾篇關于組件如何構建的文章，大家對組件的整體構建步驟有了一定的了解，整體的大框架上都較為熟悉。本次分享主要切入點是如何運用設計規范以及前端基礎知識來輔助，進行原型交互細節提升，希望本次分享能夠帶給大家幫助。

為了更加方便本次的細節處理講解，本次將引入“卡片化設計模板”的制作來具體聊一聊交互細節的提升，制作的時候是如何將設計規范和前端基礎知識進行關聯運用的。

卡片化設計成品預覽鏈接

https://vip.uedart.com/demo/UEDART_026/%E9%A6%96%E9%A1%B5.html

1 項目準備

項目背景：卡片化設計在手機端的頁面制作中運用十分廣泛，我們可以看到有許多APP的設計都是由卡片化進行衍變設計的。經過一些知識的汲取和實踐的認知，我決定結合已有的一些卡片化設計的規范，將一些常用可復用的卡片模塊組件化。最終有了這個基于卡片化設計，集卡片設計規范、卡片組件和卡片頁面應用于一體的項目。

項目目標：精細化卡片設計，多元化可復用

知識準備：卡片化設計規范，此主要借鑒了發布在優設網關于卡片化設計規范的一篇文章，感謝作者的分享，讓本次制作能夠更有理論支撐。

2 項目規劃

根據卡片化設計的特點，項目模塊劃分為：設計規范、組件制作、頁面應用。

確立好模塊后接下去的工作就相對簡單許多了，根據模塊進行結構的思維導圖的梳理如下

3 項目制作

在制作過程中，我將整體制作過程分為三大步

框架制作：大框架，為交互原型進行整體框架制作

頁面內容：內容制作，進行具體內容的完善

細節處理：精雕細琢，進行細節的精細化處理

3.1 框架制作

整體框架的制作分為：全局導航、內容展示、框架細節

3.1.1全局導航

全局統一，這里我采用母版來制作。首先進行導航內容區域劃分，明確導航最終想要的交互效果。

這里面需要注意的是左側logo區域與右側頻道切換組區域需要保持離邊距固定間距（Tip：思考為什么有這樣的交互要求，主要是因為為了保持良好的體驗感，需要適配不同分配率的屏幕大小主要是筆記本和臺式機）

這里應用了動態面板的來做導航的自適應寬度變化和固定位置屬性。

寬度自適應變化

頻道切換組區域離右側邊緣固定間距40px

3.1.2 內容展示框架

這里面總共有兩種不同模式的內容展示

一類：大頁面內容展示

一類：帶手機框的內容瀏覽

這兩類的制作都是通過“內聯框架”來實現

3.1.3 框架細節

整體的框架需要注意的幾個細節點

首先 切換導航需要設定選項組，除了下圖所示的導航其他導航也需要如此設定，且名稱不能重復

其次 加載的內容頁面置于主頻道下方，方便設置切換導航時“內聯框架”加載頁面選擇

再次 注意導航欄與底部foot的自適應寬度變化

3.2 頁面內容

搭建好整體框架后，我們需要做的就是按照項目結構，進行各部分內容的制作

3.2.1 設計模塊內容制作

設計：根據卡片化設計規范，細分為以下7部分

色彩體系、文字體系、卡片質感、邊距設定、標題設定、圓角規則、寬窄間距

3.2.2 組件模塊內容制作

組件：根據通用類型的卡片模塊，細分為以下7部分

圖片流設計、卡片流設計、Feed流設計、金剛區功能入口設計、個人頂部內容設計、左右滑動組合設計、卡券仿實物設計

3.2.3 頁面模塊內容制作

頁面：根據不同行業的卡片化設計應用，提取比較有代表性的8類頁面進行頁面的卡片化制作

資訊類別頁（參考頭條）、閱讀展示頁（參考微信讀書）、視頻列表頁（參考優酷視頻）、音樂列表頁（參考網易云音樂）、金融列表頁（參考螞蟻財富）、優惠券列表頁（參考餓了么）、銀行卡列表頁（參考支付寶）、個人主頁（參考知乎）

3.3 細節處理

如何進行細節處理，首先要明白有哪些細節可以處理，在整體細節處理中，主要指導我制作思路的是下面三個方法：拆分法則、組合的應用、4px倍數。

3.3.1 拆分法則

拆解可以是一層層遞進式拆解，先拆解主要模塊，再進而深入拆解每個模塊的細節點，這個過程有點像剝洋蔥，我們暫且稱之為“剝洋蔥”法則吧，我們可以用這樣的方法來定位我們要做的細節有哪些。

第一層拆解

卡片主模塊：卡片底板、內容層、操作層

第二層拆解

卡片底板：卡片形狀、卡片圓角、卡片顏色、卡片陰影、分割線

內容層：內容區、內容組合

操作層：操作入口、操作動作、反饋結果

第三層拆解

卡片形狀：矩形、圓角矩形、異形

內容區：視頻區、圖片區、文字區、內容區大小

操作入口：button按鈕、圖標按鈕、幽靈按鈕、文字鏈接

第四層拆解

顏色填充：可見性、顏色值、透明度、

形狀邊框：可見性、顏色值、透明度、邊框粗細、邊框線型、單邊控制

文字：字體、字號、顏色值、下劃線、加粗、字間距、行距、上下左右邊距

3.3.2 組合的應用

制作前的一些思考：前端的知識如何應用在卡片化組件的制作中，讓我們的組件更有“規則”？

我們來看下下面這兩張圖，無論是在整體頁面的設計中，還是在單個卡片的設計中，我們都可以把要制作的東西看做一個整體，先從整體的維度切入，再細分元素，在整體的框架中嵌入元素組成一個整體。我稱它為box理論，一個大的box里嵌入多個小的box，我們在制作時可以帶有一些這樣的意識，盡量保證我們制作的卡片可具備三個維度：整齊、規范、可復用。

帶著這種方式應用到制作里，我們來看下最終卡片的最終布局基本上是保持如下這樣的組合方式。

每個卡片都是一個組合，卡片內所有的元素都有序的進行排列組合。

這樣做的好處：很好的控制了每個元素的邊界、需要替換時不會影響到其他元素的范圍。

3.3.3 4px倍數

盡可能的保證元素的參數都是4px的倍數（因我制作采用的是375*667的尺寸），這個依據主要是來源于設計規范的8點網格理論。

在我們起初的卡片設計規范里關于卡片的圓角規則與寬窄間距，定義的都是4px的倍數，在接下去的制作中我沿用了這樣的規則，使得整體卡片的制作更有規范性。

卡片化設計成品預覽鏈接

https://vip.uedart.com/demo/UEDART_026/%E9%A6%96%E9%A1%B5.html

總結

當有了較為規范的制作思路，一切制作起來就非常的順利，不論是制作交互原型還是做別的什么事情，都應該帶著思維去實踐，好的思維會引導我們做事的節奏感。本次關于交互原型細節提升的方法介紹就到此結束了，希望對大家有所幫助。