正文

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

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

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

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

本文目錄:

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

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

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

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

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

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

1.圖片流功能作用

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

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

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

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

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

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

a、圖片卡片設(shè)計(jì)要點(diǎn)

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

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

b、用戶頭像

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

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

c、圖片流板塊設(shè)計(jì)要點(diǎn)

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

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

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

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

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

1.卡片流作用

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

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

2.卡片流拆分

將卡片流按照“UI星辰大?！辈鸾鉃橐韵聨撞糠?，分別從每一部分去突破。

2.卡片流設(shè)計(jì)要點(diǎn)

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

b.文字

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

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

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

表頭部分

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

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

表內(nèi)容部分

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

表尾部分

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

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

1.feed流作用

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

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

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

a.配圖

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

▲圖片尺寸

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

c、列表流

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

d、分段控件

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

e、輔助按鈕

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

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

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

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

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

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

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

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

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

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

但風(fēng)險(xiǎn)也是很明顯的，就是前景的信息排布設(shè)計(jì)其實(shí)是有很大挑戰(zhàn)的，必經(jīng)花花綠綠的背景太過于干擾注意力，導(dǎo)致前景的文字內(nèi)容可讀性會(huì)變?nèi)?。所以需要把重要操作用明確的按鈕區(qū)隔出來，閱讀型文字跟背景圖要用明顯的反色，還是不行的話就把文字浮在半透明蒙層上，解決可讀性問題。

“滾動(dòng)”，并不算是一個(gè)新的設(shè)計(jì)趨勢(shì)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用大圖和標(biāo)題文字吸引用戶，強(qiáng)化了無(wú)盡瀏覽的體驗(yàn)，吸引用戶一直滾動(dòng)下去。

微交互，指的是小屏幕上的動(dòng)畫形式。

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

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

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

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

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

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

1. 基本原理

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

2. 結(jié)合顏色

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

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

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

4. 小結(jié)

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

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

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

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

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

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

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

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