正文

ui設(shè)計卡片風(fēng)格（ui設(shè)計卡片風(fēng)格有哪些）

發(fā)布時間：2023-04-28 01:29:11 稿源：創(chuàng)意嶺閱讀： 1278

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui設(shè)計卡片風(fēng)格的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、UI設(shè)計－卡片流、圖片流、Feed流拆解
2、產(chǎn)品UI設(shè)計摘要
3、UI設(shè)計中的新擬物風(fēng)格是怎樣的？
4、UI設(shè)計有什么風(fēng)格?

ui設(shè)計卡片風(fēng)格（ui設(shè)計卡片風(fēng)格有哪些）

一、UI設(shè)計－卡片流、圖片流、Feed流拆解

卡片作為信息的承載體，在界面設(shè)計應(yīng)用得非常廣泛。弄清不同卡片的設(shè)計細節(jié)點，能讓我們做設(shè)計化繁為簡，設(shè)得心應(yīng)手。在設(shè)計的過程中，我們要有拆分思維，將復(fù)雜的模塊、組件，拆分為細小的基礎(chǔ)元素，逐一攻破。

圖片流、卡片流、feed流，“流”是按照某種時間線，去呈現(xiàn)我們的內(nèi)容。

花瓣、Pinterest的首頁展現(xiàn)方式就是用的卡片流去承載圖片、用戶頭像、用戶名等信息的。

1.圖片流功能作用

a.幫助用戶快速瀏覽圖片與篩選圖片

b.使用戶減少干擾，沉浸式閱讀

2.圖片流細節(jié)構(gòu)成

從縱深角度，把圖片流拆分為背景層、內(nèi)容層、控件層。

我們最需要關(guān)注的是內(nèi)容層的設(shè)計。內(nèi)容層又拆分為：圖片內(nèi)容區(qū)域、信息內(nèi)容區(qū)域這兩部分。

3.內(nèi)容層設(shè)計注意點

a、圖片卡片設(shè)計要點

1.圖片區(qū)域高度不固定。

2.信息區(qū)域主要樣式高度固定。這里在設(shè)計時需要重點規(guī)定上下間距。（字數(shù)不一樣多，會導(dǎo)致信息區(qū)域高度不一樣，但是從樣式上來講，是固定的，因為這一部分是可復(fù)用的）

b、用戶頭像

1.用戶頭像設(shè)計應(yīng)注意左右平衡。保持頭像高度與左邊文案高度一致，可以保證左右平衡。

2.頭像素材要選取背景簡單、統(tǒng)一的視覺中心、統(tǒng)一的明暗度的圖片，而且選取的圖片一定要符合我們產(chǎn)品的氣質(zhì)。我們在做設(shè)計稿的時候，一定要選取統(tǒng)一的圖片，比如圖片的視角、明暗度等。這樣才能保證我們頁面的統(tǒng)一性，確保設(shè)計稿的效果。千萬不要覺得線上環(huán)境頭像很亂、圖片很丑為由，就不去選取一些優(yōu)質(zhì)的圖片，從而降低我們的專業(yè)度。

c、圖片流板塊設(shè)計要點

1.保持對應(yīng)要素間距統(tǒng)一。這樣也利于開發(fā)。（數(shù)值根據(jù)自己產(chǎn)品規(guī)范去定義，只要保持相同要素間距統(tǒng)一就行）

2.注意信息層級劃分。利用字體顏色、大小、字重去區(qū)分。在這里需要我們?nèi)タ紤]哪些是用戶關(guān)注的信息。

3.注意圓角大小。圓角設(shè)置一般在6-10px 為宜。

4.圖片流要點總結(jié)

卡片流樣式在支付寶、美團app中是很常見的?？ㄆ鞯慕M成部分有點像圖片流的內(nèi)容區(qū)域板塊。卡片流的設(shè)計樣式是比較固定的。

1.卡片流作用

a.卡片流是讓用戶了解更多信息的入口

b.卡片流的信息呈現(xiàn)能讓用戶快速抓取重要信息，節(jié)省用戶時間

2.卡片流拆分

將卡片流按照“UI星辰大海”拆解為以下幾部分，分別從每一部分去突破。

2.卡片流設(shè)計要點

a.基礎(chǔ)布局?；A(chǔ)布局也就是簡單的背景色、分割線，就不多講解了。注意背景色不要太臟、太暗就行。

b.文字

文字設(shè)計時，也需根據(jù)自己產(chǎn)品設(shè)計規(guī)范去靈活應(yīng)用，從字顏色、大小、字重上去區(qū)分文字層級。主副文案大小差別至少4像素。

c.內(nèi)容層級－卡片組件

卡片流設(shè)計主要發(fā)力設(shè)計的區(qū)域為卡片組件?？ㄆM件拆分為表頭、表內(nèi)容、表尾三部分。表內(nèi)容部分可以有不同的內(nèi)容呈現(xiàn)形式。

表頭部分

▲圖標(biāo)高于文字高度。間距符合二分原則（左邊距是右邊距的兩倍）。

▲表頭部分的圖標(biāo)一定要簡潔、具有呼吸感。內(nèi)圖標(biāo)與圓底比例接近1:2。

表內(nèi)容部分

▲根據(jù)產(chǎn)品的卡片作用，去對此部分內(nèi)容進行設(shè)計。一定要控制好間距，保持此部分的呼吸感。

表尾部分

▲表尾部分一般會放置文字按鈕、或簡單的按鈕。對于文字按鈕需根據(jù)重要程度從自重、顏色、大小上去突出。對于簡單的按鈕上下邊距與左右邊距需符合二分原則（接近二分原則，沒有那么死板）

feed流是投喂用戶想要的內(nèi)容。常用在很多資訊app中,如今日頭條、酷安等app。

1.feed流作用

a.幫助用戶持續(xù)地獲取最新的訂閱內(nèi)容

b. 使用戶減少干擾，沉浸式閱讀。

2.feed流細節(jié)拆分

a.配圖

▲配圖的選取應(yīng)遵循背景感覺、烘托主題、色彩關(guān)聯(lián)這三個原則。從美團外賣、餓了么這些產(chǎn)品可知，首頁選取的圖片一定是嚴格把控的，符合產(chǎn)品的氣質(zhì)、而且有想買的欲望。

▲圖片尺寸

不同的產(chǎn)品、不同場景出現(xiàn)的圖片比例是不一致的。在feed流中長出現(xiàn)的圖片比例為3:2 （這里只簡單的給出數(shù)值、后續(xù)會詳細講解圖片尺寸）

c、列表流

對于列表流，最重要的是把控間距。建議建立最基本的間距，比如為8px，然后根據(jù)親密性來依次增加偶數(shù)像素，來拉開層級關(guān)系。

d、分段控件

設(shè)計時，選中文案比未選中文案一般大2px；顏色一般選取品牌色。小橫條通常設(shè)計為3px（1x下）

e、輔助按鈕

▲注意左右平衡。設(shè)計時圖標(biāo)與文案一樣高。

卡片流、圖片流、feed流在界面設(shè)計中用的越來越廣泛。掌握好其中的設(shè)計要點、會對我們的設(shè)計效率、設(shè)計效果有很大的幫助。以上內(nèi)容，只是自己平時學(xué)習(xí)的總結(jié)與積累，希望對你有所幫助，但是切記死板套用哦～

二、產(chǎn)品UI設(shè)計摘要

http://www.sj33.cn/digital/wyll/201611/46667.html

沉浸感，說的是一種讓你猶如身臨其境的模擬真實的效果。就像最初的美術(shù)來自于對現(xiàn)實的模擬一樣，這種擬真的設(shè)計，至今仍然受用。

因而我們能看到像這樣的網(wǎng)頁設(shè)計，它以全屏式的大幅圖像和視頻為主，以一種簡單卻有效的方式，迅速把你帶入它所設(shè)定的情境之中。

同樣的，在APP設(shè)計中也有類似的UI設(shè)計風(fēng)格，大視野背景圖：

用通欄的圖片作為背景，或者是作為整個APP的背景，或者是作為內(nèi)容區(qū)塊的背景，既提升了視覺表現(xiàn)力度，又豐富了APP情感化元素。一些信息或操作，浮動在圖片上。這種設(shè)計方法，對字體和排版設(shè)計要求更高，難度也更多，但極容易渲染出氛圍。

大視野背景圖風(fēng)格也分為兩種，一種是內(nèi)容區(qū)塊中采用大視野背景圖，好處是可以利用圖片做區(qū)塊分割，難度是圖片拼接后的效果不一定好看，所以可能還需要配合描邊、留白等設(shè)計手段優(yōu)化拼接。

另外一種就是全屏背景圖甚至打通狀態(tài)欄，前景做內(nèi)容排版、導(dǎo)航、操作。好處是設(shè)計非常具有生命了，所以有朋友把這種風(fēng)格也叫有計劃設(shè)計，說的就是回歸大自然的設(shè)計手法。

但風(fēng)險也是很明顯的，就是前景的信息排布設(shè)計其實是有很大挑戰(zhàn)的，必經(jīng)花花綠綠的背景太過于干擾注意力，導(dǎo)致前景的文字內(nèi)容可讀性會變?nèi)酢Ｋ孕枰阎匾僮饔妹鞔_的按鈕區(qū)隔出來，閱讀型文字跟背景圖要用明顯的反色，還是不行的話就把文字浮在半透明蒙層上，解決可讀性問題。

“滾動”，并不算是一個新的設(shè)計趨勢。

在過去的幾年內(nèi)，滾動式的閱讀體驗在小屏幕設(shè)備上的發(fā)展尤為突出。想想你手機上的 app，一定有很多采取的是這種滾動式設(shè)計。

正如你所看到的這個國家地理的官方網(wǎng)站一樣，這種滾動設(shè)計的好處非常直白：它提供給用戶一個更為流暢的瀏覽體驗，以一個線性的方式，引導(dǎo)用戶在短時間內(nèi)不受打擾地閱讀到更多的內(nèi)容。

僅用一個主色調(diào)，是不是就能夠很好的表達界面層次、重要信息，并且能展現(xiàn)良好的視覺效果？事實上也正是如此，隨著iOS7的發(fā)布，我們看到越來越多唯一主色調(diào)風(fēng)格的設(shè)計，會采用簡單的色階，配套灰階來展現(xiàn)信息層次，但是絕不采用更多的顏色。

整個界面采用粉色的主色調(diào)，從標(biāo)題欄到標(biāo)簽頁，從操作按鈕到提示信息，除了黑白灰之外，全部采用粉色設(shè)計，這種簡介的的配色風(fēng)格，反倒起到了很好的信息傳達效果，也具有良好的視覺表現(xiàn)力，設(shè)計師在內(nèi)容排版上的技巧實在是加分。

可以說唯一主色調(diào)設(shè)計手法，是真的做到了移動端APP的最小化（Minimal）設(shè)計，減少冗余信息的干擾，使用戶專注于主要信息的獲取。

而與唯一主色調(diào)形成對照關(guān)系的，就是Metro引領(lǐng)的多彩色風(fēng)格，為什么我一定要給我自己的產(chǎn)品定義一種主色調(diào)，多彩色就不能是主色調(diào)嗎？于是出現(xiàn)了不同頁面、不同信息組塊采用撞色多彩色的方式來設(shè)計的風(fēng)格，甚至同一個界面的局部都可以采用多彩撞色，也產(chǎn)生了不少優(yōu)秀的設(shè)計。

列表多彩色的設(shè)計案例，這種列表多彩色，用鮮亮的多彩色來區(qū)分信息，確實能起到突出的效果，視覺上極其醒目。

可是對于一些內(nèi)容型的APP，也許并不適用，比如GoogleKeep的多彩卡片，確實是在內(nèi)容閱讀上會起到反效果。百度云記事本第一版設(shè)計也是多彩色的，但是后來考慮到文字記事比較多，為提供良好的文字閱讀體驗，還是把多彩色改成灰白色微質(zhì)感的設(shè)計。

2013 年開始盛行的扁平化設(shè)計中，強調(diào)簡潔的功能界面區(qū)分，拋棄多余的元素。至今，這種設(shè)計風(fēng)格依然有著借鑒的價值。

不過，隨著扁平化的流行，它的弊端也開始顯現(xiàn)出來：一時之間幾乎是所有的平面設(shè)計都在強調(diào)扁平化，這使得它們趨于雷同，看上去毫無個性。

想要在扁平化設(shè)計中，加點不一樣的元素讓它更為生動，漸變色不失為一個好的選擇。

漸變色能讓設(shè)計看起來更活潑有趣。

插畫可以讓設(shè)計具有“性格”，比起傳統(tǒng)的攝影，它是一種直觀的與用戶進行情感交流的視覺語言。

對于品牌來說，沒有什么能比用插畫來塑造品牌形象、傳遞品牌性格還要簡單有效的方式了。作為一種有趣的情感表達，插畫可以是量身定制的，因而它能幫助獲得用戶的信任，讓人感覺更為親切。

首頁以簡筆畫的形式很直觀地表達了產(chǎn)品的幾大功能，能夠幫助用戶快速理解。

此外，插畫的實現(xiàn)途徑并不唯一。它提供多種創(chuàng)意方向的選擇，不同的插畫也可以傳遞不同的情緒。比如簡筆風(fēng)的手繪看上去單純可愛，精細繁復(fù)的筆觸可以產(chǎn)生一種“高級”質(zhì)感，當(dāng)插畫與攝影結(jié)合，則給人一種虛實難辨的奇幻感。

概括說來，視差指的是頁面的背景，以一個比前景慢的速度移動，從而產(chǎn)生一種視覺上的縱深感。

視差可以結(jié)合圖片、文本，以一個不太嚴格的頁面布局，帶來一種流暢直觀的瀏覽體驗。視差效果的好處顯而易見，它提供了一個充滿活力的界面，并且讓用戶印象深刻。

一直以來，這種卡片式設(shè)計都在移動用戶界面設(shè)計中占有重要的位置。

卡片式設(shè)計是一個通用的用戶界面模式，小到移動端的信息瀏覽，大到重要的會議演講。它最大的好處大概就是，能在同一個時間內(nèi)，盡可能地、分門別類地展示大量的信息。它能夠讓用戶進行更為快速的瀏覽并做出選擇。

以卡片為單位，可以形成一套完整的解決方案，處理文本、圖像、視頻之間的關(guān)系。此外，卡片本身也擁有很強的靈活性。想要給這些普通的卡片設(shè)計多點花樣的話，設(shè)計師還可以通過翻轉(zhuǎn)、旋轉(zhuǎn)、疊加和過濾等方式，來讓它們發(fā)生變化。

用大圖和標(biāo)題文字吸引用戶，強化了無盡瀏覽的體驗，吸引用戶一直滾動下去。

微交互，指的是小屏幕上的動畫形式。

從用戶體驗的角度來看，這種微交互通過屏幕上的動畫轉(zhuǎn)化，以一種更為明確的視覺反饋，告訴他們，讓他們知道他們的點擊行為引起了什么，以及下一步會發(fā)生什么。

一個最簡單的例子是很多網(wǎng)站或者 App 在打開欄目時會應(yīng)用的設(shè)計。

聰明的設(shè)計師能夠把微交互設(shè)計的娛樂性放大，讓用戶獲得更多的樂趣。從好玩的加載動畫，到流暢的圖標(biāo)轉(zhuǎn)換，一個好的微交互設(shè)計，可以同時擔(dān)負娛樂和通知這兩種功能。

http://www.sj33.cn/digital/wyll/201611/46667.html

三、UI設(shè)計中的新擬物風(fēng)格是怎樣的？

新擬物風(fēng)格是否適合所有類型的APP場景還有待探討，或許在一些工具類的APP可以考慮進行嘗試，例如：音樂播放器、計算器、簽到類、操作工具類APP，在UI設(shè)計上可以考慮在部分按鈕、卡片式設(shè)計、表單類的內(nèi)容上進行嘗試。

1. 基本原理

最基礎(chǔ)的新擬物化效果分別有「凸起效果」和「凹陷效果」，兩者差異化在于對光影的處理方式不同。凸起效果使用外投影來實現(xiàn)，疊加層級依次為：基層-亮投影-暗投影;凹陷效果效果使用內(nèi)投影來實現(xiàn)，疊加層級依次為：亮投影-暗投影-基層。亮、暗投影的數(shù)值建議偏移值形成正負并保持一致，透明度依據(jù)實際情況進行調(diào)整。

2. 結(jié)合顏色

以深色、單色、漸變?nèi)M顏色進行了嘗試，整體上來的處理方式都是以基層的顏色為基礎(chǔ)對HSB進行調(diào)整，深色與單色的處理方式較為一致，漸變色的投影或陰影則需要根據(jù)不同的顏色進行調(diào)整，來達到合適的效果。我們可以通過HSB的顏色模式來進行微調(diào)，達到明暗投影的效果

3. 設(shè)計方式拓展

常態(tài)的表現(xiàn)往往并不難滿足我們所有的設(shè)計，因此我們可以基于常態(tài)的設(shè)計樣式再結(jié)合其他的設(shè)計方式，讓整體的感受更加豐富。

4. 小結(jié)

新擬物化的設(shè)計雖然新穎，但是否適合所有的設(shè)計?這個是值得思考的問題。面對一個新的趨勢，建議可以多去研究和了解這方面更深層的內(nèi)容，這樣在實際應(yīng)用才能更加得心應(yīng)手。

以上就是關(guān)于UI設(shè)計中的新擬物風(fēng)格的相關(guān)分享，希望對大家有所幫助，想要了解更多內(nèi)容，歡迎及時關(guān)注本平臺!

四、UI設(shè)計有什么風(fēng)格?

UI設(shè)計風(fēng)有：

1、三維呈現(xiàn)。和之前UI或運營設(shè)計中常見的都是二維的處理手法不同，使內(nèi)容更加有縱深感從而也提升了設(shè)計的趣味性，尤其是運用在運營設(shè)計上會讓畫面顯得更加豐富。

2、漸變色。漸變不再是像擬物化時代為了還原物體本身的空間所做的處理，而是為了營造氛圍和產(chǎn)品氣質(zhì)使用。設(shè)計師能把不同的設(shè)計語言靈活的去運用，而不僅限于某個系統(tǒng)平臺。

3、半扁平化設(shè)計。半扁平化設(shè)計是結(jié)合了material design和flat design兩種風(fēng)格的處理手法，使簡潔的設(shè)計上多一些空間感，讓系統(tǒng)的不同層面的元素都是有原則、可預(yù)測的，不讓用戶感到無所適從。

以上就是關(guān)于ui設(shè)計卡片風(fēng)格相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。