UI設計基礎-卡片化設計篇

2020-12-26 專注UI設計

Hello Everybody~

今天給大家帶來的文章是網頁設計中的卡片設計,將針對網頁設計中的卡片作出分析,作為網頁設計師,您如何使用卡片?設計卡時,應注意什麼?下面就讓我們一起來看看吧!

「我要一張卡片」,這是客戶在與我談論需求時在上一期中所說的第一個需求點。毫無疑問,卡片化類型對於PC和行動電話都非常適用。從在線購物中心到社交媒體網站,卡片設計已成為網頁設計中的一種強大趨勢。最重要的原因必須是它的靈活性。

卡片可以是任何形狀,顏色和形式。但是通常,它們都包含圖片,圖標和一些基本的文本信息,例如標題,用戶名和位置信息。

「但是,其受歡迎程度的核心是其簡單性。您很少看到複雜的卡片設計。它出現的原因是為了引導用戶單擊它。」

是什麼讓卡片設計勢不可擋

在實用性和美觀性方面,卡片式設計可以說是優於其他設計的。下面列出的特徵可能是它可以獲勝的原因。

1.反應迅速

響應能力是一句老話,它已經成為一項硬性要求。大多數客戶已經為各種無窮無盡的行動裝置準備了響應式解決方案,因此,卡式誕生了。為了滿足各種屏幕尺寸的需求,卡片設計可以幫助用戶非常方便地專注於特定內容,還允許設計人員在設計過程中合理,簡潔地布置內容。

2.井然有序

混亂的網站令人頭疼。當我們在頁面上組織各種元素時,卡片設計可以為這些內容的布局提供出色的順序。這對設計人員和用戶來說是好的。

http://www.kelseydrake.com/

3.易讀性

卡片設計的一個非常重要的特徵是它們所包含的信息非常簡潔,這使它們變得有趣而引人入勝,但同時也使網站的內容相對簡單並快速瀏覽一目了然。諸如NamesForChange.org之類的網站使每張卡片都生動而易於理解。

https://www.namesforchange.org/

4.受社交媒體平臺青睞

想想如何建立社交媒體網站?他們需要的是清晰,易讀且快速的顯示。再次考慮卡設計,您沒有找到連接嗎?卡設計最著名的例子是Pinterest和Dribbble。

https://www.pinterest.com/

https://dribbble.com/

5.平等

卡設計的另一個特點是平等。當然,這裡的平等不是絕對的。也就是說,每個卡片在整個網頁的卡片設計中的重要性幾乎是相同的。這省去了所有人對內容進行排名的麻煩。您不妨查看AHH網站,您將了解。

http://www.ahh.com/

6.多功能性

名片設計可用於任何行業的幾乎任何目的,並且其創作靈活性非常好。可以說,設計風格還沒有定論,這給了設計師很大的創作空間。以Futurefabric.co.uk網站為例,設計師使用卡片設計來展示他的不同類型的作品。

https://www.futurefabric.co/

卡片設計中應注意什麼

說到重點!作為UI設計師,如果要應用卡片樣式,則需要注意這些地方(以下是我的經驗)

1.留白

留白是一個古老的話題,但是卡片的設計很容易忽略這個問題,因為您的注意力集中在卡上,如果不小心,就會陷入混亂。您必須充分利用空白(或負數空間)。不僅卡片外的空間,甚至卡片內的空間,產品展示之外的空間也都需要小心處理。看一下丹麥公司網站上的產品展示,並使用空白使網站非常平滑自然。

https://www.helbak.com

2.細節

卡片的設計帶來了簡潔,但同時必須強調內容的豐富性。這必須確保頁面可以提供足夠的頁面內容以在一定基礎上指導用戶,否則用戶只會感到迷茫。[Silk Tricky](Silk Tricky)的網站完美平衡了簡單性和內容豐富性。它允許兩張相鄰的卡顯示相同的內容,一張圖片和一個文本,並由於平鋪屏幕而剪切頁面。出於單調。它還使用「查看」的突出顯示按鈕來提醒和吸引用戶單擊以輸入詳細信息。

3.有所不同

卡的設計具有可重複性,但這並不意味著它必須單調。不要害怕在您的項目中添加有吸引力的個性化內容。客戶可能會拒絕它(如果他不喜歡它),但是這增加了為您的作品付款的可能性。令人眼花little亂的小動畫,獨特的色彩匹配樣式或令人耳目一新的字體都值得嘗試。就像White Frontier網站所做的努力一樣。

http://www.whitefrontier.ch/

4.使用網格

不用說,這對於使網頁看起來更加協調非常有用。

後記

卡片設計的擴展幾乎是無止境的。現在就打開您的Photoshop/Sketch/Adobe XD,看看可以提供多少種卡片設計布局?

小編:@Kerr Xu

更多閱讀

由於微信官方將公眾號文章的推送規則作出了新的改動,如果大家還想繼續看到我們為您分享的內容準時出現,一定要多點點右下角的「在看」,並點擊文章右上角的「...」UI呀設為星標,只有這樣才能夠繼續準時收到我們的推送文章哦~比心

點我,這裡這裡

相關焦點

  • 學UI設計需要會手繪嗎
    經常有很多人在問:學ui設計需要手繪嗎?一直以來都有人問類似的問題。那麼到底ui設計需要手繪能力嗎?手繪不好是不是不能做UI?不是科班出身,沒有手繪基礎怎麼學UI?今天我就針對UI設計要不要手繪能力做一些回答。
  • UI設計中配色設計攻略
    最近研究了一下配色方法,今天我就針對UI設計中配色設計攻略進行簡單的說明,希望能幫助到一部分小夥伴。有個有趣的研究成果 —— 「七秒鐘定律」:人們在挑選商品和服務時 ,只需要 7 秒鐘就可以確定是否感興趣,而在這短暫的 7 秒鐘內,色彩的作用佔到了 67%。
  • 2021設計趨勢:UI/UX篇
    3D無疑是2021的設計趨勢,每一個設計細分領域都有它的身影。新奇的是它開始在扁平化所主導的UI領域被應用。 另外一個能導致3D更應用更普及的是即將發布的蘋果新作業系統Apple’s Big Sur,在寫這篇文章時還沒有發布,甚至沒有公布發布日期,Big Sur 目前是測試版本,公開的測試版本8月6號可提供,同時有一個開發者版本。
  • 0基礎學習UI設計不為人知的內幕
    近幾年來,隨著網際網路的不斷發展變化,從而讓UI設計的工資變得越來越高,因為只要有網際網路產品在就需要UI設計師。UI設計行業目前的工資處於平均月薪過萬,在設計界也可以說是排行第一,比平面設計,網頁設計,室內設計,電商美工等都要高。
  • 小白學UI設計:如何做好UI配色?
    在UI界面設計中,配色是首先要面對的一個重要環節。顏色那麼多,我該選哪些顏色?該如何做出誘人的UI配色?本章將為大家分享UI界面設計中常用的配色原則和技巧。閱讀本文需要有一定的UI色彩基礎知識,還不是很懂的同學,建議先看看《如何做出誘人的UI配色(基礎篇)》一文。
  • UI設計中色彩搭配使用技巧
    網站的配色方案可以為整體品牌做出貢獻提升產品的知名度。它可以用於在設計或品牌中提醒用戶或吸引用戶的注意。AAA教育、在網易雲、可口可樂、肯德基和Adobe的網站上可以找到紅色。
  • 為什麼要選擇做UI設計
    學UI設計能學到太多太多的東西 於個人成長 UI設計師主要需要掌握的除了各種設計的軟體,PS、AI、CDR等,還需要掌握和知道一些基本的UI實現的方法和代碼,什麼html+CSS+JS、 JAVA、C#等。
  • 教程 ui設計專業—Mugeda 製作gif 圖
    1. http://www.mugeda.com/   打開Mugeda雲端H5互動設計平臺,進入設計舞臺
  • 微風:什麼是UI設計?
    大家好我是微風,一個愛設計愛生活的平面設計師,最近很多朋友都在問什麼是UI設計?零基礎能學習UI設計嗎?UI設計學習需要使用什麼軟體?就業前景怎麼樣呢!今天微風就來給大家介紹下什麼是UI設計,UI設計學習需要用到的軟體以及UI設計就業情況都給大家詳細的解說。
  • 如何做好UI、平面設計-視覺篇
    在這裡我們不想分析擬物設計和扁平化設計的優劣,更不想說誰更好,在當前形式服從內容的今天,我們只能說哪種設計風格更適合你的產品,就像你問我水喝酒哪一個更好喝一樣,我沒辦法回答你,只能看此時你最需要什麼。首先我們來看為什麼會出現扁平化設計,有人說是對擬物設計審美疲勞了,有人說是一群高級設計師追求突破做出來的設計潮流,也有人說是從平面設計中演化而來的我認為這些都是對的,扁平化設計師設計發展的必然規律。
  • 從0設計App(7):基於產品定位做 UI 設計
    之前的文章,可以在筆者的個人中心閱讀,歡迎訂閱~一、市場分析篇:市場分析(上);市場分析(下)二、競品分析篇:競品分析三、用戶調研篇:用戶調研(上);用戶調研(下)四、需求管理篇:需求管理五、架構流程篇:產品定位(上);系統架構/產品結構(中);
  • 一個完整的 UI/UX 設計案例研究
    翻譯文章 來源@追波範兒(dribbbledesign)原作者:Saleh Riazhttps://medium.muz.li/aero-fitness-a-ui-ux-design-case-study-f620186a46de
  • UI設計 | 製作更好的UI卡片的簡單設計技巧
    卡片布局示例UI卡設計原理精心設計的卡片可以使用戶更輕鬆地掃描可用信息。好的卡片設計是:高效的。卡片設計提示使用相關圖像基於卡的設計通常嚴重依賴視覺效果(圖像或視頻),因為視覺效果是用戶掃描卡時首先注意到的。選擇相關的圖像非常重要-可以一目了然地傳達單元含義的圖像。
  • 版式設計基礎要點包括哪些?
    版式設計的基礎在於能夠流暢地傳達信息,視覺感官上要順暢,讓信息在這樣的「流」的狀態下,準確、有效地傳播。版式設計所具備的基本特徵其實也是版式設計的原則。那麼,版式設計基礎要點包括哪些呢?今天就跟隨小編一起來了解下吧!
  • 一年級語文上冊第三單元第1課《ɑi ei ui》教學設計
    二、板書設計三、教學評價四、資源連結標調兒歌。(課件:出示「複韻母」三個字,注拼音)【設計意圖】複習鞏固前面學習的單韻母,規範口型,為複韻母的規範發音打下堅實的鋪墊,建立複韻母的概 念。學發音1.活動要求:(課件:出示活動要求)(1)觀察圖畫,找「ai ei ui」藏在哪兒。(2)編兒歌記住「ai ei ui」。
  • 平面設計、UI設計、Web前端有什麼不同?薪資水平如何?
    UI設計:UI即用戶界面設計,廣義上屬平面設計的一部分,更多的是針對網際網路尤其是移動網際網路的設計,如App頁面設計和布局,icon設計,互動設計等,設計時除視覺美感外,還需考慮人機互動的邏輯,主要載體是各種電子顯示屏。
  • PCB設計基礎
    PCB 基礎 PCB量測的單位 PCB設計起源於美國,所以其常用單位是英制, 而非公制 版子的大小通常使用英尺 介質厚度&導體的長寬通常使用英尺及英寸 1 mil = 0.001 inches 1 mil = .0254 mm
  • 什麼是設計——交互&UI
    編輯導語:網際網路產品設計主要指通過用戶研究和分析進行的整套服務體系和價值體系的設計過程,設計也分不同的方向,網際網路產品在設計過程中分成多個階段,每個階段是不同的設計活動;本文作者方向了設計的幾個方面,我們一起來看一下。一、什麼是設計1.
  • 怎麼設計遊戲原畫?0基礎學習原畫角色設計
    怎麼設計遊戲原畫? 0基礎學習原畫角色設計!在原畫設計中,原畫角色設計是很重要的一個環節,角色可以說是整部作品的靈魂,那麼如何才能設計好原畫角色呢?原畫角色怎麼設計?本期微課菌給大家分享一些遊戲原畫角色設計思路以及經驗,希望能對大家有所幫助!
  • UI設計發展前景如何,UI設計師崗位真的已經飽和了嗎?
    UI設計起源於美國矽谷,屬於高新技術設計產業,2000年以移動端UI界面前國內的UI設計剛開始萌芽,但當時做UI等於做平面設計。 基本也體現在網頁設計上,後來隨著flash的流行,一部分設計師開始去思考互動性。