編輯導(dǎo)語：筆者之前發(fā)布了幾篇關(guān)于組件如何構(gòu)建的文章，大家對組件的整體構(gòu)建步驟有了一定的了解，整體的大框架上都較為熟悉；本次分享主要切入點(diǎn)是如何運(yùn)用設(shè)計(jì)規(guī)范以及前端基礎(chǔ)知識來輔助，進(jìn)行原型交互細(xì)節(jié)提升，希望本次分享能夠帶給大家?guī)椭?/p>

為了更加方便本次的細(xì)節(jié)處理講解，本次將引入“卡片化設(shè)計(jì)模板”的制作來具體聊一聊交互細(xì)節(jié)的提升，制作的時(shí)候是如何將設(shè)計(jì)規(guī)范和前端基礎(chǔ)知識進(jìn)行關(guān)聯(lián)運(yùn)用的。

卡片化設(shè)計(jì)成品預(yù)覽鏈接：

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

一、項(xiàng)目準(zhǔn)備

項(xiàng)目背景：卡片化設(shè)計(jì)在手機(jī)端的頁面制作中運(yùn)用十分廣泛，我們可以看到有許多APP的設(shè)計(jì)都是由卡片化進(jìn)行衍變設(shè)計(jì)的；經(jīng)過一些知識的汲取和實(shí)踐的認(rèn)知，我決定結(jié)合已有的一些卡片化設(shè)計(jì)的規(guī)范，將一些常用可復(fù)用的卡片模塊組件化；最終有了這個(gè)基于卡片化設(shè)計(jì)，集卡片設(shè)計(jì)規(guī)范、卡片組件和卡片頁面應(yīng)用于一體的項(xiàng)目。

項(xiàng)目目標(biāo)：精細(xì)化卡片設(shè)計(jì)，多元化可復(fù)用。

知識準(zhǔn)備：卡片化設(shè)計(jì)規(guī)范，此主要借鑒了發(fā)布在優(yōu)設(shè)網(wǎng)關(guān)于卡片化設(shè)計(jì)規(guī)范的一篇文章，感謝作者的分享，讓本次制作能夠更有理論支撐。

二、項(xiàng)目規(guī)劃

根據(jù)卡片化設(shè)計(jì)的特點(diǎn)，項(xiàng)目模塊劃分為：設(shè)計(jì)規(guī)范、組件制作、頁面應(yīng)用。

確立好模塊后接下去的工作就相對簡單許多了，根據(jù)模塊進(jìn)行結(jié)構(gòu)的思維導(dǎo)圖的梳理如下

三、項(xiàng)目制作

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

• 框架制作：大框架，為交互原型進(jìn)行整體框架制作。
• 頁面內(nèi)容：內(nèi)容制作，進(jìn)行具體內(nèi)容的完善。
• 細(xì)節(jié)處理：精雕細(xì)琢，進(jìn)行細(xì)節(jié)的精細(xì)化處理。

1. 框架制作

整體框架的制作分為：全局導(dǎo)航、內(nèi)容展示、框架細(xì)節(jié)

1）全局導(dǎo)航

全局統(tǒng)一，這里我采用母版來制作。首先進(jìn)行導(dǎo)航內(nèi)容區(qū)域劃分，明確導(dǎo)航最終想要的交互效果。

這里面需要注意的是左側(cè)logo區(qū)域與右側(cè)頻道切換組區(qū)域需要保持離邊距固定間距（Tip：思考為什么有這樣的交互要求，主要是因?yàn)闉榱吮３至己玫捏w驗(yàn)感，需要適配不同分配率的屏幕大小主要是筆記本和臺式機(jī)）。

這里應(yīng)用了動(dòng)態(tài)面板的來做導(dǎo)航的自適應(yīng)寬度變化和固定位置屬性。

寬度自適應(yīng)變化：

頻道切換組區(qū)域離右側(cè)邊緣固定間距40px：

2）內(nèi)容展示框架

這里面總共有兩種不同模式的內(nèi)容展示：

• 大頁面內(nèi)容展示；
• 帶手機(jī)框的內(nèi)容瀏覽。

這兩類的制作都是通過“內(nèi)聯(lián)框架”來實(shí)現(xiàn)：

3）框架細(xì)節(jié)

整體的框架需要注意的幾個(gè)細(xì)節(jié)點(diǎn)：

首先，切換導(dǎo)航需要設(shè)定選項(xiàng)組，除了下圖所示的導(dǎo)航其他導(dǎo)航也需要如此設(shè)定，且名稱不能重復(fù)。

其次，加載的內(nèi)容頁面置于主頻道下方，方便設(shè)置切換導(dǎo)航時(shí)“內(nèi)聯(lián)框架”加載頁面選擇。

再次，注意導(dǎo)航欄與底部foot的自適應(yīng)寬度變化。

2. 頁面內(nèi)容

搭建好整體框架后，我們需要做的就是按照項(xiàng)目結(jié)構(gòu)，進(jìn)行各部分內(nèi)容的制作

1）設(shè)計(jì)模塊內(nèi)容制作

設(shè)計(jì)：根據(jù)卡片化設(shè)計(jì)規(guī)范，細(xì)分為以下7部分：

色彩體系、文字體系、卡片質(zhì)感、邊距設(shè)定、標(biāo)題設(shè)定、圓角規(guī)則、寬窄間距。

2）組件模塊內(nèi)容制作

組件：根據(jù)通用類型的卡片模塊，細(xì)分為以下7部分：

圖片流設(shè)計(jì)、卡片流設(shè)計(jì)、Feed流設(shè)計(jì)、金剛區(qū)功能入口設(shè)計(jì)、個(gè)人頂部內(nèi)容設(shè)計(jì)、左右滑動(dòng)組合設(shè)計(jì)、卡券仿實(shí)物設(shè)計(jì)。

3）頁面模塊內(nèi)容制作

頁面：根據(jù)不同行業(yè)的卡片化設(shè)計(jì)應(yīng)用，提取比較有代表性的8類頁面進(jìn)行頁面的卡片化制作：

資訊類別頁（參考頭條）、閱讀展示頁（參考微信讀書）、視頻列表頁（參考優(yōu)酷視頻）、音樂列表頁（參考網(wǎng)易云音樂）、金融列表頁（參考螞蟻財(cái)富）、優(yōu)惠券列表頁（參考餓了么）、銀行卡列表頁（參考支付寶）、個(gè)人主頁（參考知乎）。

3. 細(xì)節(jié)處理

如何進(jìn)行細(xì)節(jié)處理，首先要明白有哪些細(xì)節(jié)可以處理，在整體細(xì)節(jié)處理中，主要指導(dǎo)我制作思路的是下面三個(gè)方法：拆分法則、組合的應(yīng)用、4px倍數(shù)。

1）拆分法則

拆解可以是一層層遞進(jìn)式拆解，先拆解主要模塊，再進(jìn)而深入拆解每個(gè)模塊的細(xì)節(jié)點(diǎn)，這個(gè)過程有點(diǎn)像剝洋蔥，我們暫且稱之為“剝洋蔥”法則吧。

我們可以用這樣的方法來定位我們要做的細(xì)節(jié)有哪些。

第一層拆解：

卡片主模塊：卡片底板、內(nèi)容層、操作層。

第二層拆解：

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

內(nèi)容層：內(nèi)容區(qū)、內(nèi)容組合。

操作層：操作入口、操作動(dòng)作、反饋結(jié)果。

第三層拆解：

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

內(nèi)容區(qū)：視頻區(qū)、圖片區(qū)、文字區(qū)、內(nèi)容區(qū)大小。

操作入口：button按鈕、圖標(biāo)按鈕、幽靈按鈕、文字鏈接。

第四層拆解：

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

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

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

2）組合的應(yīng)用

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

我們來看下下面這兩張圖，無論是在整體頁面的設(shè)計(jì)中，還是在單個(gè)卡片的設(shè)計(jì)中，我們都可以把要制作的東西看做一個(gè)整體；先從整體的維度切入，再細(xì)分元素，在整體的框架中嵌入元素組成一個(gè)整體。

我稱它為box理論，一個(gè)大的box里嵌入多個(gè)小的box，我們在制作時(shí)可以帶有一些這樣的意識，盡量保證我們制作的卡片可具備三個(gè)維度：整齊、規(guī)范、可復(fù)用。

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

每個(gè)卡片都是一個(gè)組合，卡片內(nèi)所有的元素都有序的進(jìn)行排列組合。

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

3）4px倍數(shù)

盡可能的保證元素的參數(shù)都是4px的倍數(shù)（因我制作采用的是375*667的尺寸），這個(gè)依據(jù)主要是來源于設(shè)計(jì)規(guī)范的8點(diǎn)網(wǎng)格理論。

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

四、總結(jié)

當(dāng)有了較為規(guī)范的制作思路，一切制作起來就非常的順利，不論是制作交互原型還是做別的什么事情，都應(yīng)該帶著思維去實(shí)踐，好的思維會引導(dǎo)我們做事的節(jié)奏感。

本次關(guān)于交互原型細(xì)節(jié)提升的方法介紹就到此結(jié)束了，希望對大家有所幫助。

本文由 @時(shí)光若刻 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議