99国产精品99久久久久久,国产肥白大熟妇BBBB视频,国产一区二区三区四区精华液毛,国产乡下妇女做爰

400-611-9921

當(dāng)前位置:首頁(yè) > 新聞資訊 > 縱天觀點(diǎn)
已然成熟的卡片式設(shè)計(jì),遵循著怎樣的設(shè)計(jì)規(guī)則?

2017-10-31

4529

當(dāng)一種設(shè)計(jì)技巧或者設(shè)計(jì)手法趨近于成熟的時(shí)候,我們常??梢钥偨Y(jié)出足夠完整的最佳實(shí)踐了。在這個(gè)移動(dòng)端逐步占據(jù)主導(dǎo)而桌面端設(shè)備仍然主導(dǎo)生產(chǎn)力的時(shí)代,強(qiáng)調(diào)同時(shí)兼顧兩大平臺(tái)的設(shè)計(jì),是自然而然的事情。對(duì)于許多人而言,在桌面端和移動(dòng)端上來(lái)回切換是一件非常平常的事情,設(shè)計(jì)師需要讓設(shè)計(jì)兼容不同屏幕,而卡片式設(shè)計(jì),正是這種語(yǔ)境下誕生,并且蓬勃發(fā)展到了今天。


無(wú)論主推卡片式設(shè)計(jì)的Android,還是卡片化元素越來(lái)越多的iOS,又或者是將卡片元素玩的得爐火純青的 Facebook、Twitter 等巨頭,我們可以清晰地看到卡片式設(shè)計(jì)的普及和巨大的能量。它足夠整潔,有著良好的參與感,能夠更好地組織內(nèi)容,易于擴(kuò)展且非常靈活。

同時(shí),諸多的優(yōu)勢(shì)和可能性也意味著,你想要設(shè)計(jì)出體驗(yàn)足夠好的卡片元素,需要有足夠好的策略和審慎的構(gòu)思,否則,你的設(shè)計(jì)很可能是個(gè)失敗的產(chǎn)物。


先說(shuō)說(shuō)卡片式設(shè)計(jì)本身

在真正開始探討卡片式設(shè)計(jì)的最佳實(shí)踐之前,我們還是需要梳理一下卡片式設(shè)計(jì)的基本概念和它的優(yōu)勢(shì)。

UI中的卡片借用了現(xiàn)實(shí)世界中的卡片的特征和概念。通常UI中的卡片是矩形的,其中承載圖像、文本、鏈接、按鈕等不同元素??ㄆ侨萜?,但是通常一個(gè)卡片中會(huì)集中承載一種或以一種元素為核心的一小組元素。不同的元素在不同的卡片中各司其職,不同的卡片組合到一起,構(gòu)成功能性的頁(yè)面,或者組合。


典型的卡片結(jié)構(gòu)

例如在一個(gè)電商網(wǎng)站中,設(shè)計(jì)師會(huì)使用卡片來(lái)承載類目列表,在設(shè)計(jì)媒體中,卡片被用來(lái)承載用戶發(fā)出的一條條內(nèi)容,在新聞?lì)惥W(wǎng)站中,卡片則常常拿來(lái)承載不同的新聞。


卡片的優(yōu)勢(shì)也很明顯:

承載著不同元素的卡片有著千變?nèi)f化的玩法,適合用來(lái)展示尺寸不同,屬性不同的各種元素。

響應(yīng)性:卡片移動(dòng)端屏幕當(dāng)中顯示效果頗為精美,移動(dòng)端需要流暢而靈活的布局,這一點(diǎn)卡片非常合適??ㄆ沟貌季指鼮殪`活,三個(gè)卡片在桌面上可以顯示為并排的3列,在移動(dòng)端上可以縱向拍成1列,這兩種布局都能貼合用戶的閱讀習(xí)慣。
組織性:卡片可以將不同類型的元素有效地組織到一起,無(wú)論是圖片、視頻、文本還是CTA按鈕,由于卡片本身的靈活性,設(shè)計(jì)師可以靈活地、有針對(duì)性地調(diào)整每一個(gè)元素而不用擔(dān)心影響其他的的元素??ㄆ瑯?gòu)建出統(tǒng)一的用戶模式,使得用戶可以更好地、快速地完成任務(wù)。
極簡(jiǎn):極簡(jiǎn)主義的設(shè)計(jì)是目前主流,也是流行的設(shè)計(jì)風(fēng)格。極簡(jiǎn)主義風(fēng)格下用戶更容易理解內(nèi)容,外觀上也更為優(yōu)雅??ㄆ皆O(shè)計(jì)在精神上和極簡(jiǎn)主義相通。
卡片式設(shè)計(jì)最佳實(shí)踐


·有目的地使用卡片


雖然卡片在UI設(shè)計(jì)中功能強(qiáng)大,但是不要僅僅為了用而用。絕大多數(shù)設(shè)計(jì)師是為了利用卡片本身的強(qiáng)大組織性才采用這一設(shè)計(jì)元素。

當(dāng)你的UI中有大量不同類型的元素,諸如圖片、文本、列表、CTA按鈕等,你需要借助卡片來(lái)整合。


所承載的元素展示的長(zhǎng)度可變
用戶不用考慮各種元素之間的尺寸差別
需要承載某些交互,比如輸入框、按鈕和鏈接等


·保持簡(jiǎn)約

每個(gè)卡片承載一種元素,執(zhí)行一個(gè)任務(wù)。各種不同的元素通常不應(yīng)該混雜在一起,不同的卡片將它們分散開來(lái),讓它們互補(bǔ)干擾。如果同時(shí)需要不同屬性的內(nèi)容共同完成一個(gè)任務(wù),那么要讓它們靠在一起,多卡片協(xié)同。限制卡片中文本的數(shù)量,盡量不要添加段落。

·引導(dǎo)用戶關(guān)注最重要的信息或操作

善用卡片的層次結(jié)構(gòu),突出關(guān)鍵內(nèi)容和信息。例如將承載管家信息的卡片放在頂部,還可以使用排版來(lái)突出關(guān)鍵的信息和交互。


·精心選圖

圖片是UI當(dāng)中視覺化元素的代表,它能讓界面吸引人,也能讓卡片脫穎而出。但是不是圖片素質(zhì)越好,對(duì)于UI就越好,圖片必須要傳達(dá)正確的信息,這是第一要?jiǎng)?wù)。圖片在卡片內(nèi)的位置,通常取決于它是主要內(nèi)容還是支撐性的內(nèi)容。


·支撐微交互

卡片本身是交互式元素,卡片上的鏈接和按鈕可以指向更為詳細(xì)的信息,卡片內(nèi)自然也可以承載更為多樣的微交互。比如,將光標(biāo)懸停于卡片之上的時(shí)候,可以觸發(fā)顯示其他的內(nèi)容。


·支持手勢(shì)

移動(dòng)端設(shè)計(jì)當(dāng)中,手勢(shì)是主要的交互。手勢(shì)不僅具備可用性,而且有趣的手勢(shì)和交互能夠創(chuàng)造有趣和愉悅的體驗(yàn)。通過(guò)滑動(dòng)來(lái)移動(dòng)卡片,以及使用點(diǎn)擊、長(zhǎng)按來(lái)組織卡片,通過(guò)上下滑動(dòng)來(lái)關(guān)閉卡片,早在 webOS時(shí)代就已經(jīng)有了。不過(guò),要讓整個(gè)手勢(shì)交互的邏輯順滑自恰,這樣才能讓體驗(yàn)無(wú)懈可擊。


·精心打磨

有創(chuàng)意的設(shè)計(jì)會(huì)讓人眼前一亮。尺寸合理、大小合適的高清圖片讓人賞心悅目。精心打磨的細(xì)節(jié)令人看著就舒服。你應(yīng)該盡量讓卡片給人快樂(lè)和愉悅的體驗(yàn)。


結(jié)語(yǔ)

卡片式設(shè)計(jì)如果能夠好好運(yùn)用,對(duì)于整個(gè)體驗(yàn)的效果是明顯而巨大的?,F(xiàn)如今的設(shè)計(jì)師已經(jīng)在卡片式設(shè)計(jì)上有了足夠深入的探討,多鉆研實(shí)例能夠讓你更好地掌握這一設(shè)計(jì)技巧。


本文來(lái)自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技

標(biāo)簽:廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)頁(yè)設(shè)計(jì)公司,廣州網(wǎng)站設(shè)計(jì)公司,網(wǎng)站建設(shè) 廣州,廣州 網(wǎng)站建設(shè),廣州企業(yè)網(wǎng)站建設(shè)營(yíng)銷型網(wǎng)站建設(shè),網(wǎng)站建設(shè)設(shè)計(jì),廣州網(wǎng)站開發(fā),網(wǎng)站制作設(shè)計(jì)

免費(fèi)咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項(xiàng)目顧問(wèn)通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問(wèn)

信息保護(hù)中,請(qǐng)放心填寫
關(guān)閉
免費(fèi)獲取方案
和田市| 沾化县| 惠水县| 法库县| 华坪县| 达日县| 紫云| 元江| 贡嘎县| 平定县| 台东县| 重庆市| 醴陵市| 濉溪县| 汉阴县| 鹤壁市| 景洪市| 梧州市| 长沙县| 镇巴县| 丰县| 桂东县| 黑水县| 黄浦区| 高淳县| 黑河市| 沭阳县| 长泰县| 临潭县| 江津市| 万盛区| 应用必备| 微博| 财经| 镇沅| 阳西县| 安图县| 保山市| 昌黎县| 巩留县| 襄垣县|