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呀設為星標,只有這樣才能夠繼續準時收到我們的推送文章哦~比心
點我,這裡這裡