2024-6-21 資深UI設(shè)計者
關(guān)于卡片化設(shè)計如何在原型設(shè)計細節(jié)上進行打造制作的思路
前言:之前發(fā)布了幾篇關(guān)于組件如何構(gòu)建的文章,大家對組件的整體構(gòu)建步驟有了一定的了解,整體的大框架上都較為熟悉。本次分享主要切入點是如何運用設(shè)計規(guī)范以及前端基礎(chǔ)知識來輔助,進行原型交互細節(jié)提升,希望本次分享能夠帶給大家?guī)椭?/p>
為了更加方便本次的細節(jié)處理講解,本次將引入“卡片化設(shè)計模板”的制作來具體聊一聊交互細節(jié)的提升,制作的時候是如何將設(shè)計規(guī)范和前端基礎(chǔ)知識進行關(guān)聯(lián)運用的。
卡片化設(shè)計成品預(yù)覽鏈接
https://vip.uedart.com/demo/UEDART_026/%E9%A6%96%E9%A1%B5.html
項目背景:卡片化設(shè)計在手機端的頁面制作中運用十分廣泛,我們可以看到有許多APP的設(shè)計都是由卡片化進行衍變設(shè)計的。經(jīng)過一些知識的汲取和實踐的認知,我決定結(jié)合已有的一些卡片化設(shè)計的規(guī)范,將一些常用可復用的卡片模塊組件化。最終有了這個基于卡片化設(shè)計,集卡片設(shè)計規(guī)范、卡片組件和卡片頁面應(yīng)用于一體的項目。
項目目標:精細化卡片設(shè)計,多元化可復用
知識準備:卡片化設(shè)計規(guī)范,此主要借鑒了發(fā)布在優(yōu)設(shè)網(wǎng)關(guān)于卡片化設(shè)計規(guī)范的一篇文章,感謝作者的分享,讓本次制作能夠更有理論支撐。
根據(jù)卡片化設(shè)計的特點,項目模塊劃分為:設(shè)計規(guī)范、組件制作、頁面應(yīng)用。
確立好模塊后接下去的工作就相對簡單許多了,根據(jù)模塊進行結(jié)構(gòu)的思維導圖的梳理如下
在制作過程中,我將整體制作過程分為三大步
框架制作:大框架,為交互原型進行整體框架制作
頁面內(nèi)容:內(nèi)容制作,進行具體內(nèi)容的完善
細節(jié)處理:精雕細琢,進行細節(jié)的精細化處理
整體框架的制作分為:全局導航、內(nèi)容展示、框架細節(jié)
3.1.1全局導航
全局統(tǒng)一,這里我采用母版來制作。首先進行導航內(nèi)容區(qū)域劃分,明確導航最終想要的交互效果。
這里面需要注意的是左側(cè)logo區(qū)域與右側(cè)頻道切換組區(qū)域需要保持離邊距固定間距(Tip:思考為什么有這樣的交互要求,主要是因為為了保持良好的體驗感,需要適配不同分配率的屏幕大小主要是筆記本和臺式機)
這里應(yīng)用了動態(tài)面板的來做導航的自適應(yīng)寬度變化和固定位置屬性。
寬度自適應(yīng)變化
頻道切換組區(qū)域離右側(cè)邊緣固定間距40px
3.1.2 內(nèi)容展示框架
這里面總共有兩種不同模式的內(nèi)容展示
一類:大頁面內(nèi)容展示
一類:帶手機框的內(nèi)容瀏覽
這兩類的制作都是通過“內(nèi)聯(lián)框架”來實現(xiàn)
3.1.3 框架細節(jié)
整體的框架需要注意的幾個細節(jié)點
首先 切換導航需要設(shè)定選項組,除了下圖所示的導航其他導航也需要如此設(shè)定,且名稱不能重復
其次 加載的內(nèi)容頁面置于主頻道下方,方便設(shè)置切換導航時“內(nèi)聯(lián)框架”加載頁面選擇
再次 注意導航欄與底部foot的自適應(yīng)寬度變化
搭建好整體框架后,我們需要做的就是按照項目結(jié)構(gòu),進行各部分內(nèi)容的制作
3.2.1 設(shè)計模塊內(nèi)容制作
設(shè)計:根據(jù)卡片化設(shè)計規(guī)范,細分為以下7部分
色彩體系、文字體系、卡片質(zhì)感、邊距設(shè)定、標題設(shè)定、圓角規(guī)則、寬窄間距
3.2.2 組件模塊內(nèi)容制作
組件:根據(jù)通用類型的卡片模塊,細分為以下7部分
圖片流設(shè)計、卡片流設(shè)計、Feed流設(shè)計、金剛區(qū)功能入口設(shè)計、個人頂部內(nèi)容設(shè)計、左右滑動組合設(shè)計、卡券仿實物設(shè)計
3.2.3 頁面模塊內(nèi)容制作
頁面:根據(jù)不同行業(yè)的卡片化設(shè)計應(yīng)用,提取比較有代表性的8類頁面進行頁面的卡片化制作
資訊類別頁(參考頭條)、閱讀展示頁(參考微信讀書)、視頻列表頁(參考優(yōu)酷視頻)、音樂列表頁(參考網(wǎng)易云音樂)、金融列表頁(參考螞蟻財富)、優(yōu)惠券列表頁(參考餓了么)、銀行卡列表頁(參考支付寶)、個人主頁(參考知乎)
如何進行細節(jié)處理,首先要明白有哪些細節(jié)可以處理,在整體細節(jié)處理中,主要指導我制作思路的是下面三個方法:拆分法則、組合的應(yīng)用、4px倍數(shù)。
3.3.1 拆分法則
拆解可以是一層層遞進式拆解,先拆解主要模塊,再進而深入拆解每個模塊的細節(jié)點,這個過程有點像剝洋蔥,我們暫且稱之為“剝洋蔥”法則吧,我們可以用這樣的方法來定位我們要做的細節(jié)有哪些。
第一層拆解
卡片主模塊:卡片底板、內(nèi)容層、操作層
第二層拆解
卡片底板:卡片形狀、卡片圓角、卡片顏色、卡片陰影、分割線
內(nèi)容層:內(nèi)容區(qū)、內(nèi)容組合
操作層:操作入口、操作動作、反饋結(jié)果
第三層拆解
卡片形狀:矩形、圓角矩形、異形
內(nèi)容區(qū):視頻區(qū)、圖片區(qū)、文字區(qū)、內(nèi)容區(qū)大小
操作入口:button按鈕、圖標按鈕、幽靈按鈕、文字鏈接
第四層拆解
顏色填充:可見性、顏色值、透明度、
形狀邊框:可見性、顏色值、透明度、邊框粗細、邊框線型、單邊控制
文字:字體、字號、顏色值、下劃線、加粗、字間距、行距、上下左右邊距
3.3.2 組合的應(yīng)用
制作前的一些思考:前端的知識如何應(yīng)用在卡片化組件的制作中,讓我們的組件更有“規(guī)則”?
我們來看下下面這兩張圖,無論是在整體頁面的設(shè)計中,還是在單個卡片的設(shè)計中,我們都可以把要制作的東西看做一個整體,先從整體的維度切入,再細分元素,在整體的框架中嵌入元素組成一個整體。我稱它為box理論,一個大的box里嵌入多個小的box,我們在制作時可以帶有一些這樣的意識,盡量保證我們制作的卡片可具備三個維度:整齊、規(guī)范、可復用。
帶著這種方式應(yīng)用到制作里,我們來看下最終卡片的最終布局基本上是保持如下這樣的組合方式。
每個卡片都是一個組合,卡片內(nèi)所有的元素都有序的進行排列組合。
這樣做的好處:很好的控制了每個元素的邊界、需要替換時不會影響到其他元素的范圍。
3.3.3 4px倍數(shù)
盡可能的保證元素的參數(shù)都是4px的倍數(shù)(因我制作采用的是375*667的尺寸),這個依據(jù)主要是來源于設(shè)計規(guī)范的8點網(wǎng)格理論。
在我們起初的卡片設(shè)計規(guī)范里關(guān)于卡片的圓角規(guī)則與寬窄間距,定義的都是4px的倍數(shù),在接下去的制作中我沿用了這樣的規(guī)則,使得整體卡片的制作更有規(guī)范性。
卡片化設(shè)計成品預(yù)覽鏈接
https://vip.uedart.com/demo/UEDART_026/%E9%A6%96%E9%A1%B5.html
當有了較為規(guī)范的制作思路,一切制作起來就非常的順利,不論是制作交互原型還是做別的什么事情,都應(yīng)該帶著思維去實踐,好的思維會引導我們做事的節(jié)奏感。本次關(guān)于交互原型細節(jié)提升的方法介紹就到此結(jié)束了,希望對大家有所幫助。
藍藍設(shè)計(tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍藍設(shè)計的小編 http://tweetduck.com