2016-2-19 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
來(lái)源:莫貝網(wǎng)
總有一些新的設(shè)計(jì)趨勢(shì)蓄勢(shì)待發(fā)?,F(xiàn)在誰(shuí)又能忘記視差滾動(dòng)這種設(shè)計(jì)手法呢?這種網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)從幾年前一直延續(xù)到現(xiàn)在,越來(lái)越多的用戶開(kāi)始認(rèn)可并關(guān)注這種視差滾動(dòng)式的網(wǎng)頁(yè)。
而在諸多新興的設(shè)計(jì)趨勢(shì)當(dāng)中,基于卡片的網(wǎng)頁(yè)設(shè)計(jì)也開(kāi)始在整個(gè)網(wǎng)頁(yè)設(shè)計(jì)浪潮中占有一席之地。雖然比例不高,但是對(duì)他認(rèn)可的設(shè)計(jì)師和用戶正在穩(wěn)步增加。
也許你對(duì)于曾經(jīng)火爆一時(shí)的瀑布流還有印象,它也算是卡片式設(shè)計(jì)的一個(gè)分支,而最典型也是最具有影響力的,是Pinterest,國(guó)內(nèi)的花瓣和它有著異曲同工之妙。當(dāng)用戶打開(kāi)這些網(wǎng)頁(yè)的時(shí)候,他們會(huì)逐漸洞悉到這種看似簡(jiǎn)單的設(shè)計(jì)背后對(duì)于信息和內(nèi)容的高度整合,也會(huì)逐漸折服于這種簡(jiǎn)單但優(yōu)雅的設(shè)計(jì)方法。
當(dāng)然,卡片式設(shè)計(jì)并不止于此。而在你的網(wǎng)站中采用卡片式設(shè)計(jì)也有著足夠的好處。
當(dāng)你查看任何卡片式設(shè)計(jì)的時(shí)候,你是無(wú)法忽視整個(gè)設(shè)計(jì)中貫穿始終的柵格系統(tǒng)。每一個(gè)卡片的邊緣都在整個(gè)設(shè)計(jì)中成為一套更大的柵格系統(tǒng)的一部分,他們?cè)诔叽绾烷g隙上保持著一致性與和諧性。
毫無(wú)疑問(wèn),規(guī)則的柵格化系統(tǒng)是有助于整個(gè)信息架構(gòu)的建立的。信息架構(gòu)為網(wǎng)站創(chuàng)造一套智能化的規(guī)則和流程,訪客可以更輕松地吸收網(wǎng)站所提供的信息,明確每一個(gè)頁(yè)面的功能和目的,掌控整個(gè)網(wǎng)站。
想想看,強(qiáng)調(diào)一致性的卡片式設(shè)計(jì)可以更好地引導(dǎo)用戶的視覺(jué)??ㄆ木仃囍辽偈前戳谢蛘甙葱袑?duì)齊的,用戶的眼睛可以沿著橫向或者縱向有序地瀏覽。這種瀏覽方式可以讓用戶更快地找到對(duì)他們而言重要的內(nèi)容。
拿攝影雜志Contrastly舉個(gè)例子。如果你順著柵格來(lái)瀏覽卡片會(huì)讓你意識(shí)到這種信息架構(gòu)的重要性。和許多網(wǎng)站一樣,的文章在上面,舊的文 章在下面。新的文章通常更重要,而文章下方的相關(guān)鏈接是同樣重要的文章。這樣的瀏覽方式確保了信息的條理,也讓用戶閱讀更順暢,黏度也更高。
我們不止一次聽(tīng)說(shuō)“人是視覺(jué)動(dòng)物”這個(gè)說(shuō)法,而當(dāng)我們遇上卡片式設(shè)計(jì)的時(shí)候,這個(gè)說(shuō)法有了新的含義??ㄆ皆O(shè)計(jì)讓不同部分的樣式設(shè)計(jì)趨于相同,在這種信息架構(gòu)之下,同一個(gè)頁(yè)面下的視覺(jué)的重要性令文案居于次席。
這也使得圖片成為了卡片式設(shè)計(jì)的重中之重,而研究也表明,圖片可以更好的提升網(wǎng)頁(yè)設(shè)計(jì)。高品質(zhì)的照片,和出現(xiàn)人臉的照片能更好的提高網(wǎng)頁(yè)的轉(zhuǎn)化率。事實(shí)上,有幾種常見(jiàn)的圖片處理方式,可以提升網(wǎng)頁(yè)的 轉(zhuǎn)化率。
換句話說(shuō),強(qiáng)化圖片使用后的卡片式設(shè)計(jì)的網(wǎng)站會(huì)對(duì)用戶更有吸引力。這也解釋了為什么Alexa網(wǎng)站排名中,Pinterest 在美國(guó)排到了第15名。
看看Pinterest吧。當(dāng)你在網(wǎng)站中搜索“美食”的時(shí)候,那些漂亮的照片和精心制作的美食會(huì)瞬間抓住你的眼球,你不會(huì)在第一時(shí)間注意到下面的說(shuō)明,高品質(zhì)的圖片賦予你以網(wǎng)站的第一印象,然后才是其他。
每個(gè)設(shè)計(jì)師都會(huì)告訴你用戶體驗(yàn)最重要。而這也是作為設(shè)計(jì)師的我們應(yīng)該置于首位并且試圖做到的??ㄆ皆O(shè)計(jì)之所以會(huì)引起如此廣泛的認(rèn)同和共鳴,很大程 度是因?yàn)樗鼘?duì)于用戶體驗(yàn)有顯著提升。通常卡片式設(shè)計(jì)會(huì)讓用戶持續(xù)地瀏覽網(wǎng)站,并不斷回來(lái),讓用戶在網(wǎng)站中停留的時(shí)間更長(zhǎng),并且持續(xù)不斷地提升轉(zhuǎn)化率。
擁有優(yōu)秀的用戶體驗(yàn)的網(wǎng)站會(huì)讓用戶毫無(wú)掛礙地找到他們想要的東西,而Dribbble就是這樣的一個(gè)典型。Dribbble作為知名的創(chuàng)意作品展示社區(qū),它的設(shè)計(jì)師深諳卡片式設(shè)計(jì)的優(yōu)勢(shì),可以讓用戶體驗(yàn)更簡(jiǎn)單直觀,也更好。
設(shè)計(jì)師們優(yōu)秀的構(gòu)思和精致的小樣本就適合于展示,網(wǎng)站的卡片式設(shè)計(jì)和用戶的訴求緊密地結(jié)合到了一起。最具吸引力的圖片極為有效地抓住用戶的眼球,網(wǎng) 站的柵格式布局讓每張圖片都相對(duì)均勻地吸引用戶的注意力,從而讓用戶最快地找到真正吸引自己的作品,然后他們會(huì)自然地點(diǎn)開(kāi)圖片,一探究竟。 Dribbble 在卡片式設(shè)計(jì)的基礎(chǔ)上,調(diào)整每一個(gè)交互和細(xì)節(jié),讓用戶以舒適而方便的方式來(lái)發(fā)掘他們真正想要的東西。
移動(dòng)端流量超過(guò)桌面端流量早就不是什么新聞了。2015年僅美國(guó)一地移動(dòng)端流量就占據(jù)了總流量的51%,而卡片式設(shè)計(jì)對(duì)于移動(dòng)端的良好兼容性,使得 它逐步成為大勢(shì)所趨,甚至有取現(xiàn)有響應(yīng)式框架而代之的傾向。相比于目前復(fù)雜多變的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì),卡片式設(shè)計(jì)讓內(nèi)容更容易被消化,也可以讓它們?cè)谝苿?dòng)端更 輕松地顯示。
換個(gè)角度來(lái)看,屏幕上的卡片其實(shí)更像是手機(jī)和平板屏幕的簡(jiǎn)化抽象出來(lái)的。當(dāng)然,卡片要一次性匹配所有屏幕并不是一件簡(jiǎn)單的事情,但是有了響應(yīng)式設(shè)計(jì)的經(jīng)驗(yàn),這似乎也并不是一件難于實(shí)現(xiàn)的事情。
這樣一來(lái),隨著移動(dòng)端市場(chǎng)份額的增長(zhǎng),卡片式設(shè)計(jì)的增長(zhǎng)勢(shì)頭也不會(huì)減緩。
設(shè)計(jì)趨勢(shì)這種東西,有的會(huì)長(zhǎng)期成為眾人所追捧的潮流,有的則在短暫的輝煌之后逐漸沉寂??ㄆ皆O(shè)計(jì)更像是前者,一方面它是持續(xù)的進(jìn)化之后的成果,另一方面它在這個(gè)移動(dòng)端興起的時(shí)代,呈現(xiàn)出實(shí)用而易用的顯著優(yōu)勢(shì),后勁十足的卡片式設(shè)計(jì)會(huì)在接下來(lái)越發(fā)流行。
它提供了一致性的繼續(xù)你想架構(gòu),充分運(yùn)用用戶對(duì)于清晰而漂亮圖片的癡迷提升轉(zhuǎn)化率。卡片式設(shè)計(jì)對(duì)于用戶體驗(yàn)的提升,使得用戶可以在網(wǎng)站上更容易找到他們想要的內(nèi)容,不論是出于需求還是由于趨勢(shì),它都將成為主流。
坦率的講,卡片式設(shè)計(jì)并不是特別新穎的東西,但是它的確為目前的設(shè)計(jì)諸如了一陣強(qiáng)心劑。老的東西并不一定是過(guò)時(shí)的,重要的是它是否有益與當(dāng)前的設(shè)計(jì),迎合時(shí)代的需求,能否帶領(lǐng)你我走向更遙遠(yuǎn)的未來(lái)。
原文地址:webdesignerdepot
譯文地址:優(yōu)設(shè) 譯者:@陳子木
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com