2024-6-21 資深UI設計者
關于卡片化設計如何在原型設計細節上進行打造制作的思路
前言：之前發布了幾篇關于組件如何構建的文章，大家對組件的整體構建步驟有了一定的了解，整體的大框架上都較為熟悉。本次分享主要切入點是如何運用設計規范以及前端基礎知識來輔助，進行原型交互細節提升，希望本次分享能夠帶給大家幫助。
為了更加方便本次的細節處理講解，本次將引入“卡片化設計模板”的制作來具體聊一聊交互細節的提升，制作的時候是如何將設計規范和前端基礎知識進行關聯運用的。
卡片化設計成品預覽鏈接
https://vip.uedart.com/demo/UEDART_026/%E9%A6%96%E9%A1%B5.html
項目背景：卡片化設計在手機端的頁面制作中運用十分廣泛，我們可以看到有許多APP的設計都是由卡片化進行衍變設計的。經過一些知識的汲取和實踐的認知，我決定結合已有的一些卡片化設計的規范，將一些常用可復用的卡片模塊組件化。最終有了這個基于卡片化設計，集卡片設計規范、卡片組件和卡片頁面應用于一體的項目。
項目目標：精細化卡片設計，多元化可復用
知識準備：卡片化設計規范，此主要借鑒了發布在優設網關于卡片化設計規范的一篇文章，感謝作者的分享，讓本次制作能夠更有理論支撐。
根據卡片化設計的特點，項目模塊劃分為：設計規范、組件制作、頁面應用。
確立好模塊后接下去的工作就相對簡單許多了，根據模塊進行結構的思維導圖的梳理如下
在制作過程中，我將整體制作過程分為三大步
框架制作：大框架，為交互原型進行整體框架制作
頁面內容：內容制作，進行具體內容的完善
細節處理：精雕細琢，進行細節的精細化處理
整體框架的制作分為：全局導航、內容展示、框架細節
3.1.1全局導航
全局統一，這里我采用母版來制作。首先進行導航內容區域劃分，明確導航最終想要的交互效果。
這里面需要注意的是左側logo區域與右側頻道切換組區域需要保持離邊距固定間距（Tip：思考為什么有這樣的交互要求，主要是因為為了保持良好的體驗感，需要適配不同分配率的屏幕大小主要是筆記本和臺式機）
這里應用了動態面板的來做導航的自適應寬度變化和固定位置屬性。
寬度自適應變化
頻道切換組區域離右側邊緣固定間距40px
3.1.2 內容展示框架
這里面總共有兩種不同模式的內容展示
一類：大頁面內容展示
一類：帶手機框的內容瀏覽
這兩類的制作都是通過“內聯框架”來實現
3.1.3 框架細節
整體的框架需要注意的幾個細節點
首先 切換導航需要設定選項組，除了下圖所示的導航其他導航也需要如此設定，且名稱不能重復
其次 加載的內容頁面置于主頻道下方，方便設置切換導航時“內聯框架”加載頁面選擇
再次 注意導航欄與底部foot的自適應寬度變化
搭建好整體框架后，我們需要做的就是按照項目結構，進行各部分內容的制作
3.2.1 設計模塊內容制作
設計：根據卡片化設計規范，細分為以下7部分
色彩體系、文字體系、卡片質感、邊距設定、標題設定、圓角規則、寬窄間距
3.2.2 組件模塊內容制作
組件：根據通用類型的卡片模塊，細分為以下7部分
圖片流設計、卡片流設計、Feed流設計、金剛區功能入口設計、個人頂部內容設計、左右滑動組合設計、卡券仿實物設計
3.2.3 頁面模塊內容制作
頁面：根據不同行業的卡片化設計應用，提取比較有代表性的8類頁面進行頁面的卡片化制作
資訊類別頁（參考頭條）、閱讀展示頁（參考微信讀書）、視頻列表頁（參考優酷視頻）、音樂列表頁（參考網易云音樂）、金融列表頁（參考螞蟻財富）、優惠券列表頁（參考餓了么）、銀行卡列表頁（參考支付寶）、個人主頁（參考知乎）
如何進行細節處理，首先要明白有哪些細節可以處理，在整體細節處理中，主要指導我制作思路的是下面三個方法：拆分法則、組合的應用、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
當有了較為規范的制作思路，一切制作起來就非常的順利，不論是制作交互原型還是做別的什么事情，都應該帶著思維去實踐，好的思維會引導我們做事的節奏感。本次關于交互原型細節提升的方法介紹就到此結束了，希望對大家有所幫助。
藍藍設計(ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發