您現在的位置是:電腦技術吧?>? 編程技術 ??>??式設計,卡片式設計 網頁??>??正文詳情

式設計,卡片式設計 網頁

祖清昶2019-11-07 14:32:16 人圍觀
簡介設計網頁我要在前言中寫卡片的類型這是客戶在上一期與我討論需求時說的第一個需求點毫無疑問,這張卡在個人電腦和手機上都非常出色從網上購物中心到社交媒體網站,卡片設計已

  前言  我要卡式的,這是上一期客戶在和我聊需求的時候說的第一個需求點。

毫無疑問,卡式不論是適應PC還是手機都表現優秀。

從在線商城到社交媒體網站,卡式設計成為網頁設計中的一股強大風潮且風頭正勁。

其中最重要的原因想必就是它的靈活性。

  卡片,可以是任何形狀、顏色和形式。

但是總的來說,他們都包含了圖片、圖標和一些基本的文字信息,例如標題、用戶名和位置信息。

  然而,其風靡起來的核心還在于其簡單性。

你很少見到復雜的卡片設計,它之所以出現的目的就是為了引導用戶去點擊它  作為網頁設計師,你該如何使用卡片?當在設計卡片時,你應該注意些什么?下面讓我們來談談。

  是什么讓卡式設計勢不可擋  當提及實用性和美感,卡片式設計可謂當仁不讓的雄踞上風。

以下所列的特性也許是它能勝出的原因。

  1、響應式  響應式是個老生常談,它成為了一項硬性要求。

大部分客戶都為各種層出不窮的移動設備準備好了響應式方案,那么卡式就是如此應運而生。

在滿足各種屏幕尺寸需要之上,卡式設計能非常便捷地幫助用戶焦距到特定的內容,也讓設計師在設計時合理又簡潔地進行內容的布局。

  2、有序性  混亂不堪的網站令人頭疼,當我們在整理頁面不同種類的元素時,卡式設計就能為這些內容的排版提供一種奇妙的有序性。

這對于設計師和用戶來說都是項利好。

Kelsey Drake 的網站也許能展示出這一特點。

  3、易讀性  卡式設計一個非常重要的特性就是它們包含的信息十分簡潔,這讓它們變得有趣且引人入勝,但這也讓網站內容變得比較單一,很快就一覽無余。

像NamesForChange.org 這樣的網站就把每張卡片都設計得生動且讓人理解起來毫不費力。

  4、為社交媒體平臺所青睞  想想一個社交媒體的網站是怎樣建立起來的?它們需要的是清晰易讀和快捷的展示方式。

再考慮到卡式設計,你難道沒有發現這之間的聯系?最著名的卡式設計的例子就是Pinterest 和Dribble 啦!

  5、平等性  卡式設計還有一個特性就是平等,這里的平等當然不是絕對的,也就是說,卡式設計里每張卡片,它在整個網頁中的重要性是差不多相同的。

這也就讓大家省去了為內容進行等級排序的麻煩。

不妨看看AHH 的網站,你就能明白。

  6、通用性  卡式設計幾乎可以用于任何行業任何用途,它的創作彈性非常大。

在設計風格上可以說沒有任何定論,給了設計師非常大的可發揮的創意空間。

就拿Futurefabric.co.uk 這個網站來說,設計師利用了卡式設計去展示他的不同類型的作品。

  卡式設計中我們應該注意什么  來到重點了!作為UI設計師,如果你要運用到卡片式風格的話,有這些地方是你需要注意的(以下是我的經驗之談)  1、留白  留白是老話題,但卡式設計會非常容易忽略這個問題,因為你的注意力焦點都在卡片上面,一不小心你就陷入到了一片混亂里。

你必須善用留白(或者也叫負空間)。

不僅是卡片外的空間,甚至卡片內部,對于產品展示以外的空間也需要謹慎的處理。

看看Danish company 網站的產品展示就運用留白,將網站做得非常流暢自然。

  2、細節  卡式設計帶來了簡潔,但與此同時也必須強調一點,那就是內容的豐富性。

這在一定基礎上必須保證頁面能提供足夠多的頁面內容來引導用戶,否則用戶只會感到茫然。

[Silk Tricky](Silk Tricky )的網站完美地平衡了簡潔性和內容豐富性,它讓兩個相鄰卡片之間共同展示同一內容,一圖一文,又削減掉頁面因平鋪的畫面而顯出的單調。

它還利用了VIEW的高亮按鈕來提醒和吸引用戶點擊進入詳細。

  3、來點不一樣的  卡式設計有其重復性,但并不意味著它必須得單調沉悶。

別怕給你的項目中增加點吸引人的個性化的東西。

客戶也許不喜歡而否決掉,但它增加了你為創作所付出的一種可能性。

炫目的小動畫、別具一格的配色風格或者是讓人耳目一新的字體,這些都值得去嘗試。

就像White Frontier 這個網站所做的努力一樣。

  4、使用網格  這一條其實不用多說,想要讓網頁看上去更協調,網格可謂功不可沒。

  飛屋輕網站卡式設計范例  飛屋 從卡式設計開始之初就在很多地方嘗試了這一風格,下面展示一系列輕網站中卡式設計的樣例。

  DEMETER

  MEROPE

  THOTH

  ATHENA

  SEAWEE

  后記  卡式設計的延伸幾乎無窮盡,打開你的PS,看看你能想出多少個卡式設計的布局呢?

版權聲明:本文由 祖清昶 整理編輯。

原標題:卡片式設計,卡片式ui設計特點

轉載注明出處:http://www.dn9ww09s.icu/program/11444.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦顯示器品牌排行,電腦顯示器選什么牌子好

    電腦顯示器品牌排行,電腦顯示器選什么牌子好 相關圖片顯示器品牌隨著這個社會的發展,可以看出無論是家庭還是企業都離不開計算機,尤其是大屏幕顯示的臺式機,其用戶體驗比筆記本電腦更高電腦主機決定性能,而顯示器決定畫面效果...

  • 如何提高性能,怎么提高電腦性能

    如何提高性能,怎么提高電腦性能 相關圖片win7怎么提高游戲性能計算機是現代人最常用的辦公工具,它幾乎應用于所有行業,無論是新興行業還是傳統行業一臺正常運行的計算機將使我們的辦公室更有效率,而同一臺性能更好的...

  • 頁面打不開怎么辦,某些網站打不開怎么辦

    頁面打不開怎么辦,某些網站打不開怎么辦 相關圖片網頁打不開404頁的目的是告訴訪問者所請求的頁面不存在或鏈接錯誤,并引導用戶使用瀏覽網站的其他頁面,而不是關閉頁面離開。自定義404錯誤頁是增強用戶體驗的好方法值得花時間...

  • 電腦設置每天自動開機,電腦開機自啟動怎么設置

    電腦設置每天自動開機,電腦開機自啟動怎么設置 相關圖片如何開面店每天,上班族大約在那個時候打開電腦打開他們的電腦太麻煩了如果他們困了,他們會考慮改變他們可以設置計算機自動打開就這樣,上班前,電腦已經打開了上班后,您可...

  • 怎么添加背景圖像,ps怎么添加圖像

    怎么添加背景圖像,ps怎么添加圖像 相關圖片圖像邊框有時我們制作的網頁是由圖片組成的,那么如何給圖片添加超鏈接呢此時,我們可以先使用Dreamweaver中的圖像熱點鏈接,選擇要添加鏈接的圖像在軟件下面的屬性窗口攝像頭添加...

  • 新硬盤怎么分區裝系統,新硬盤如何分區win10

    新硬盤怎么分區裝系統,新硬盤如何分區win10 相關圖片光驅位裝硬盤無法識別現在,無論是軟件還是一些文件越來越大,對電腦硬盤空間的需求也越來越大,很多用戶都會為自己的電腦購買一個更大的硬盤,新硬盤就是要分區,讓我們看看...

  • 電腦機箱配置推薦,中關村在線電腦組裝

    電腦機箱配置推薦,中關村在線電腦組裝 相關圖片怎么組裝電腦無論是組裝機還是品牌機,對很多人來說,購買電腦都是一個不錯的選擇對于老手來說,電腦安裝配置列表必須非常簡單,而對于新手來說,則必須非常令人擔憂那么我們...

  • 文本,將圖片文字轉換為文本

    文本,將圖片文字轉換為文本 相關圖片照片轉換文字今天,讓我們先簡單介紹一下如何使用Dreamweaver制作網頁首先讓我們看看如何在Dreamweaver中輸入文本,我們在Dreamweaver站點中打開一個提取文字...

  • 酷睿i7和i5的區別,英特爾i5和i7的區別

    酷睿i7和i5的區別,英特爾i5和i7的區別 相關圖片i7i5處理器區別很多人在選擇計算機時對核心處理器的選擇不是很清楚哪個更好,i5還是i7恐怕演出不好我覺得很貴我覺得沒必要實際上,我不了解這兩個系列的處理器定位現在,我把Co...

  • 取消文字背景顏色,復制文字有背景顏色

    取消文字背景顏色,復制文字有背景顏色 相關圖片ps文字背景色這似乎是一個不必要的功能,但對于一向喜歡個性的人來說,這是一種有益的嘗試,就像挑戰一樣,去收集創新在網頁上選擇文本時,將顯示藍色背景這似乎是微軟的默認做...

熱評文章

  • 處理器amd和intel哪個好,intel與amd處理器對比

    處理器amd和intel哪個好,intel與amd處理器對比 相關圖片amd cpu眾所周知,對于普通人來說,個人電腦的組裝應該是極其復雜的,尤其是在沒有經驗的情況下因為要使它成為一個龐大的系統,需要裝配大量的零件但是,也出現了很多問題,其中...

  • 什么是樣式表,webcss樣式表

    什么是樣式表,webcss樣式表 相關圖片內部樣式表如果你想成為一名CSS專家,僅僅背誦一堆選擇器是不夠的,還需要提高CSS樣式表的可讀性、開發效率和可維護性在這里,Jina Bolton將分享她關于如何創建性感div樣式表...

  • cpu散熱器用什么好,哪種cpu散熱器比較好

    cpu散熱器用什么好,哪種cpu散熱器比較好 相關圖片cpu原裝散熱器好嗎計算機硬件的發展給計算機帶來了更高的性能體驗和更舒適的使用體驗同時,高能耗的CPU和顯卡也散發出更多的熱量,用戶對散熱的要求也在不斷提高散熱器提供良好...

  • 用戶行為研究方法,行為型模式

    用戶行為研究方法,行為型模式 相關圖片消極使用行為本文介紹了JavaScript行為在Dreamweaver中的操作和使用,希望對您有所幫助I.在Dreamweaver中將JavaScript行為附加到頁面的方產品使用行為...

  • tf卡和SD卡,什么是tf卡什么是sd卡

    tf卡和SD卡,什么是tf卡什么是sd卡 相關圖片tf卡怎么用目前市場上常用的數據存儲卡分為TF卡和SD卡它們是同一張存儲卡TF卡和SD卡是兩種容易被用戶混淆的存儲卡一般來說,它們不僅大小不同,而且用途也不同TF卡和SD卡內存卡tf卡...

  • 虛線css,css長條虛線

    虛線css,css長條虛線 相關圖片HTML虛線單擊鏈接時,將出現一個虛線框即使它被松開,它仍然存在。有時看起來很難看因為它不好看,所以不要用它如何擺脫它方法1在ie下,可以使用它的私有HTML屬性:hidehtml一條虛線...

  • 怎么把照片傳到電腦上,手機照片怎樣傳到電腦上

    怎么把照片傳到電腦上,手機照片怎樣傳到電腦上 相關圖片手機照片直接傳到u盤里智能手機的功能越來越發達,所以在我們的日常生活中,我們可以用智能手機做很多事情,有時候我們可以用智能手機拍漂亮的照片,從而留下漂亮的照片作為記...

  • 電腦組裝有哪些配件,電腦組裝需要哪些配件

    電腦組裝有哪些配件,電腦組裝需要哪些配件 相關圖片自己組裝電腦需要買哪些配件現在,無論是單機游戲還是網絡游戲,對電腦配置的要求都很高但是筆記本和品牌機的價格很高關鍵是電腦配置很低這是致命的說,視頻卡通常是低端或集...

  • 最早做隔空手勢,隔空手勢感應app

    最早做隔空手勢,隔空手勢感應app 相關圖片隔空手勢電視羨慕鐵人電影中的酷手勢操作其實,它背后的互動思維遠遠超出了你的想象未來的交互方式將會發生巨大的變化,而gap手勢是一個完全陌生的領域今天的好文章來自于Expp...

  • 查看電腦系統,怎樣查看電腦系統

    查看電腦系統,怎樣查看電腦系統 相關圖片電腦怎么恢復出廠設置操作系統是用戶與計算機之間的接口,也是計算機硬件與其它軟件之間的接口許多人不知道他們的計算機系統是XP還是win7,win8還是其他系統如何檢查現在,小編帶...

關注微信

变脸官网查询