本文由作者?時光若刻?于社區(qū)發(fā)布

前言：

本次分享主要切入點(diǎn)是如何運(yùn)用設(shè)計規(guī)范以及前端基礎(chǔ)知識來輔助，進(jìn)行原型交互細(xì)節(jié)提升，希望能給大家?guī)椭?/p>

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

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

https://vip.uedart.com/demo/UEDART_026/index.html

01

項目準(zhǔn)備

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

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

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

02

項目規(guī)劃

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

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

03

項目制作

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

框架制作：大框架，為交互原型進(jìn)行整體框架制作

頁面內(nèi)容：內(nèi)容制作，進(jìn)行具體內(nèi)容的完善

細(xì)節(jié)處理：精雕細(xì)琢，進(jìn)行細(xì)節(jié)的精細(xì)化處理

3.1 框架制作

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

3.1.1全局導(dǎo)航

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

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

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

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

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

3.1.2 內(nèi)容展示框架

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

一類：大頁面內(nèi)容展示

一類：帶手機(jī)框的內(nèi)容瀏覽

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

3.1.3 框架細(xì)節(jié)

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

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

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

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

3.2 頁面內(nèi)容

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

3.2.1 設(shè)計模塊內(nèi)容制作

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

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

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

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

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

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

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

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

3.3 細(xì)節(jié)處理

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

3.3.1 拆分法則

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

第一層拆解

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

第二層拆解

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

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

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

第三層拆解

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

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

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

第四層拆解

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

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

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

3.3.2 組合的應(yīng)用

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

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

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

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

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

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

3.3.3 4px倍數(shù)

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

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

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

https://vip.uedart.com/demo/UEDART_026/index.html

總結(jié)

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

↘好文推薦：

優(yōu)惠券最全玩法詳解

產(chǎn)品經(jīng)理要懂的「技術(shù)那些事」

以叮咚買菜為例，看生鮮電商的春天是否已經(jīng)到來？

點(diǎn)個“在看”吧

總結(jié)

以上是生活随笔為你收集整理的交互原型细节提升之路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。