旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
北京市海淀區(qū)漫動(dòng)者職業(yè)技能培訓(xùn)學(xué)校 全國(guó)統(tǒng)一咨詢(xún)熱線(xiàn):010-5367 2995
首頁(yè) > 熱門(mén)文章 > UI設(shè)計(jì) > UI設(shè)計(jì)中卡片化設(shè)計(jì)的運(yùn)用方法

UI設(shè)計(jì)中卡片化設(shè)計(jì)的運(yùn)用方法

時(shí)間:2020-08-17來(lái)源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-08-17點(diǎn)擊量:作者:Gella

  在互聯(lián)網(wǎng)產(chǎn)品中,除了內(nèi)容型外,一些功能型的產(chǎn)品信息內(nèi)容也是相當(dāng)巨大的,特別是管理控制系統(tǒng),業(yè)務(wù)管理、功能操作、數(shù)據(jù)展示等。在信息量這么大的頁(yè)面中除了重視內(nèi)容質(zhì)量外,形式功能的組織與呈現(xiàn)也是同等重要,對(duì)提高用戶(hù)獲取有效信息的效率有著非常大的幫助。
 

  上面所說(shuō)的形式功能的組織與呈現(xiàn)其實(shí)講的是設(shè)計(jì)排版上的問(wèn)題,當(dāng)然對(duì)設(shè)計(jì)師排版功力也有相當(dāng)?shù)囊蟆_@種排版優(yōu)化的方法有很多種,我這里主要圍繞卡片式設(shè)計(jì)的理論進(jìn)行深入探討,相信大家對(duì)卡片式設(shè)計(jì)已非常熟悉,雖然已流行了好多年,但是設(shè)計(jì)形式并不是隨著使用年齡的增長(zhǎng)而消失,今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中卡片化設(shè)計(jì)的運(yùn)用方法進(jìn)行簡(jiǎn)單的說(shuō)明。
 

  卡片式設(shè)計(jì)的定義
 

  在生活中,我們經(jīng)常接觸到各式各樣的類(lèi)似右圖中的卡片,比如撲克牌、名片、機(jī)場(chǎng)和地鐵的指示牌等等。

 



 

  如上圖,大家可以看出,他們普遍具有以下特點(diǎn):
 

  一清晰直觀,二簡(jiǎn)單易懂,三信息模塊化。
 

  比如撲克牌我們可以看出雖然只有一個(gè)圖案,一組文字,但很清晰傳達(dá)出這張牌所代表的含義;又比如機(jī)場(chǎng)和地鐵的指示牌,采用了圖標(biāo)、字體元素,很清晰直觀地引導(dǎo)乘客方向,這種由文字或圖案組成的方塊樣式叫做“卡片式設(shè)計(jì)”。這種輕巧、簡(jiǎn)潔的實(shí)物設(shè)計(jì)也被慢慢應(yīng)用到虛擬設(shè)計(jì)當(dāng)中。
 

  另外google +、 google play等很多谷歌產(chǎn)品也同樣采用了這種設(shè)計(jì),如下圖

 



 

  正是因?yàn)?a href="http://m.5wd995.cn/ui/2546.html" target="_blank">卡片式設(shè)計(jì)在微軟、谷歌的產(chǎn)品界面的大量運(yùn)用,很多互聯(lián)網(wǎng)企業(yè)也紛紛采用這種設(shè)計(jì),這是應(yīng)用在PC端的界面,內(nèi)容部分也都采用了卡片式設(shè)計(jì)。
 

  下圖中的移動(dòng)端的界面,模塊中可點(diǎn)擊部分也采用了卡片風(fēng)格。

 



 

  這是印刷類(lèi)的雜志界面,如下圖雜志里的部分展示信息,也采用了這種卡片式風(fēng)格。

 



 

  卡片式設(shè)計(jì)的優(yōu)點(diǎn)
 

  1. 增強(qiáng)點(diǎn)擊感
 

  這是諾基亞手機(jī)的win phone系統(tǒng)(下圖),系統(tǒng)桌面的所有內(nèi)容都是一個(gè)個(gè)小方塊展示,類(lèi)似一個(gè)塊狀類(lèi)的按鈕,讓人聯(lián)想到是可以點(diǎn)擊的操作入口:

 



 

  2. 排版整齊
 

  如下圖,將信息、圖像歸類(lèi)整合到一個(gè)方塊里,清晰直觀又避免頁(yè)面因?yàn)樾畔⒍喽y,卡片的排列方式是按列或者行的方式進(jìn)行對(duì)齊展示,視線(xiàn)沿著橫向或者縱向?yàn)g覽能快速找到想要的信息,此外,這種固定大小的卡片方塊也有利于柵格化排版。
 

  3. 信息模塊化
 

  如下圖,這是google now的一個(gè)界面,將信息、圖像按維度分類(lèi)整合到一個(gè)卡片里,能有效地避免信息散亂、同時(shí)避免信息分類(lèi)不明確像這種模塊化展示有效地減少用戶(hù)思考的時(shí)間,能快速找到自己所需的信息。
 

  4. 響應(yīng)式設(shè)計(jì)
 

  卡片方塊的高度和寬度的大小都是可以調(diào)整的,正是因?yàn)檫@種特性很適合用在響應(yīng)式設(shè)計(jì)里,卡片在不同的平臺(tái)展示,由于分辨率不同,卡片能自適應(yīng)地展示,以上是卡片設(shè)計(jì)的優(yōu)點(diǎn)。

 



 

  總結(jié)
 

  在信息量大的頁(yè)面中除了重視內(nèi)容質(zhì)量外,形式功能的組織與呈現(xiàn)也是同等重要,對(duì)提高用戶(hù)獲取有效信息的效率有著非常大的幫助,這時(shí)應(yīng)用卡片式的設(shè)計(jì)方式是不錯(cuò)的選擇。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問(wèn)AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。



 

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

老師想和你聊一聊

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者教育科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話(huà):010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖