成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

形式與功能,卡片式設(shè)計的基礎(chǔ)概念和運用方法

作者:
2016-07-27
2014

“形式追隨功能”就能說明這一點。最近筆者在項目改版中也運用了相關(guān)卡片方法,發(fā)現(xiàn)效果不錯,所以希望借在項目里的思考與嘗試,拋出引子,供大家參考。

文章封面.jpg

在互聯(lián)網(wǎng)產(chǎn)品中,除了內(nèi)容型外,一些功能型的產(chǎn)品信息內(nèi)容也是相當(dāng)巨大的,特別是管理控制系統(tǒng),業(yè)務(wù)管理、功能操作、數(shù)據(jù)展示等。在信息量這么大的頁面中除了重視內(nèi)容質(zhì)量外,形式功能的組織與呈現(xiàn)也是同等重要,對提高用戶獲取有效信息的效率有著非常大的幫助。

上面所說的形式功能的組織與呈現(xiàn)其實講的是設(shè)計排版上的問題,當(dāng)然對設(shè)計師排版功力也有相當(dāng)?shù)囊蟆_@種排版優(yōu)化的方法有很多種,我這里主要圍繞卡片式設(shè)計的理論進(jìn)行深入探討,相信大家對卡片式設(shè)計已非常熟悉,雖然已流行了好多年,但是設(shè)計形式并不是隨著使用年齡的增長而消失,芝加哥學(xué)派路易斯.H.沙利文提出過:“形式追隨功能”就能說明這一點。最近筆者在項目改版中也運用了相關(guān)卡片方法,發(fā)現(xiàn)效果不錯,所以希望借在項目里的思考與嘗試,拋出引子,供大家參考。

卡片式設(shè)計的定義

在生活中,我們經(jīng)常接觸到各式各樣的類似右圖中的卡片,比如撲克牌、名片、機場和地鐵的指示牌等等。

2.jpg

如上圖,大家可以看出,他們普遍具有以下特點:

一清晰直觀,二簡單易懂,三信息模塊化。

比如撲克牌我們可以看出雖然只有一個圖案,一組文字,但很清晰傳達(dá)出這張牌所代表的含義;又比如機場和地鐵的指示牌,采用了圖標(biāo)、字體元素,很清晰直觀地引導(dǎo)乘客方向,這種由文字或圖案組成的方塊樣式叫做“卡片式設(shè)計”。這種輕巧、簡潔的實物設(shè)計也被慢慢應(yīng)用到虛擬設(shè)計當(dāng)中。

3.jpg

如上圖,現(xiàn)在卡片式設(shè)計的應(yīng)用場景非常廣泛,最有代表性的是微軟Win8、Win Phone 7的metro風(fēng)格,他們也是采用了大量的卡片式設(shè)計,據(jù)說這種Metro的設(shè)計靈感也來自于機場、地鐵指示牌。

另外google +、 google play等很多谷歌產(chǎn)品也同樣采用了這種設(shè)計,如下圖

4.jpg

正是因為卡片式設(shè)計在微軟、谷歌的產(chǎn)品界面的大量運用,很多互聯(lián)網(wǎng)企業(yè)也紛紛采用這種設(shè)計,這是應(yīng)用在PC端的界面,內(nèi)容部分也都采用了卡片式設(shè)計,如下圖:

5.jpg

下圖中的移動端的界面,模塊中可點擊部分也采用了卡片風(fēng)格。

6.jpg

這是印刷類的雜志界面,如下圖雜志里的部分展示信息,也采用了這種卡片式風(fēng)格。

7.jpg

卡片式設(shè)計的優(yōu)點

1. 增強點擊感

這是諾基亞手機的win phone系統(tǒng)(下圖),系統(tǒng)桌面的所有內(nèi)容都是一個個小方塊展示,類似一個塊狀類的按鈕,讓人聯(lián)想到是可以點擊的操作入口:

8.jpg

而且每一塊入口都是有區(qū)域大?。ㄏ聢D),從而避免造成誤點擊。

9.jpg

2. 排版整齊

如下圖,將信息、圖像歸類整合到一個方塊里,清晰直觀又避免頁面因為信息多而散亂,卡片的排列方式是按列或者行的方式進(jìn)行對齊展示,視線沿著橫向或者縱向瀏覽能快速找到想要的信息,此外,這種固定大小的卡片方塊也有利于柵格化排版。

10.jpg

比如下圖,頁面按5個單元進(jìn)行柵格,利用卡片方塊的展示,很輕松地計算并調(diào)整它的大小進(jìn)行柵格布局

11.jpg

3. 信息模塊化

如下圖,這是google now的一個界面,將信息、圖像按維度分類整合到一個卡片里,能有效地避免信息散亂、同時避免信息分類不明確像這種模塊化展示有效地減少用戶思考的時間,能快速找到自己所需的信息。

12.jpg

4. 響應(yīng)式設(shè)計

卡片方塊的高度和寬度的大小都是可以調(diào)整的,正是因為這種特性很適合用在響應(yīng)式設(shè)計里,卡片在不同的平臺展示,由于分辨率不同,卡片能自適應(yīng)地展示,以上是卡片設(shè)計的優(yōu)點。

13.jpg

項目實踐

去年做了DNSPod的項目改版,嘗試新的風(fēng)格探索。如官網(wǎng)和控制臺改版中,為了能讓信息更好的整合、更好地發(fā)揮不同信息的作用、發(fā)揮不同信息的功能,這次DNSPod官網(wǎng)改版中,banner、快捷入口,業(yè)務(wù)信息以及售賣模塊,也運用了卡片式設(shè)計的方法。

14.jpg

DNSPod管理控制臺概覽頁

15.jpg

總結(jié)

在信息量大的頁面中除了重視內(nèi)容質(zhì)量外,形式功能的組織與呈現(xiàn)也是同等重要,對提高用戶獲取有效信息的效率有著非常大的幫助,這時應(yīng)用卡片式的設(shè)計方式是不錯的選擇。


0
6
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

版權(quán)信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號