習(xí)慣一欄式的設(shè)計(jì),將顯示屏一分為二的設(shè)計(jì)經(jīng)常會(huì)讓用戶覺(jué)得更為新鮮。網(wǎng)頁(yè)頁(yè)面中并列的兩欄展現(xiàn)不一樣的信息內(nèi)容,是分屏功能式設(shè)計(jì)的最典型性特點(diǎn),兩側(cè)的信息內(nèi)容能夠包括同樣種類的原素,能夠展現(xiàn)不一樣特性的新聞媒體內(nèi)容,例如一邊是照片,一邊是文字。
分屏功能式設(shè)計(jì)極致的解決了你需要另外展現(xiàn)2個(gè)不一樣內(nèi)容的要求,這類UI頁(yè)面突顯了這兩項(xiàng)內(nèi)容的對(duì)等影響力,讓用戶自主訪問(wèn) ,或是做出挑選。
你能發(fā)覺(jué),分屏功能式設(shè)計(jì)不僅是一種逐漸流行的網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)趨勢(shì),并且十分具體地解決了必須展現(xiàn)同樣關(guān)鍵內(nèi)容、讓用戶挑選的設(shè)計(jì)要求。這類展現(xiàn)方法看上去初始,可是的確擁有 顯著的優(yōu)點(diǎn):
·造成用戶針對(duì)特殊地區(qū)的專注力
·造就比照
·非傳統(tǒng)式的合理布局

除此之外,分屏功能式設(shè)計(jì)和響應(yīng)式網(wǎng)站架構(gòu)可以非常好的融合起來(lái),這類種類的合理布局尤其合適在桌面上端顯示屏和平板上應(yīng)用,另外還可以在小顯示屏上之上下層疊式的方法展現(xiàn)出去。
在今天以前,優(yōu)設(shè)也曾預(yù)測(cè)分析太過(guò)屏式設(shè)計(jì)的流行:《查缺補(bǔ)漏!極有可能被小看的三種有意思的網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)趨勢(shì)》
分屏功能式設(shè)計(jì)的最好選擇項(xiàng)
如果你將顯示屏區(qū)劃為二塊的情況下,2個(gè)地區(qū)內(nèi)的內(nèi)容的必要性是同樣的,這也代表著你能在這個(gè)頁(yè)面中傳遞雙向關(guān)鍵的定義。處在2個(gè)對(duì)等區(qū)塊鏈的原素如同陰陽(yáng)魚一樣,從視覺(jué)效果到作用上,同樣關(guān)鍵,互為補(bǔ)充。
活力四射的配色和趣味十足的排版設(shè)計(jì)
歸功于扁平化設(shè)計(jì)設(shè)計(jì)和Material Design 在設(shè)計(jì)行業(yè)的大范疇普及化,顏色和排版設(shè)計(jì)變成了現(xiàn)階段設(shè)計(jì)的關(guān)鍵推動(dòng)力。艷麗的顏色產(chǎn)生視覺(jué)效果刺激性,而有意思的排版設(shè)計(jì)則讓文字更有趣,二者的結(jié)合能產(chǎn)生甚為值得一看的設(shè)計(jì)。

顏色.和排版設(shè)計(jì)的組成
圖片和圖形的組成
吸引住用戶留意個(gè)人行為招喚按鍵
分屏功能式設(shè)計(jì)在視覺(jué)效果設(shè)計(jì)能夠很有支撐力,這也代表著作為設(shè)計(jì)師的你一樣能夠有效地應(yīng)用留白藝術(shù)造就視覺(jué)效果聚焦點(diǎn),將用戶的專注力吸引住到特殊的元素上,這也是個(gè)人行為招喚(CTA)按鍵的應(yīng)用基本原理。
將顯示屏看作一個(gè)信用卡
分屏功能式設(shè)計(jì)實(shí)質(zhì)上是以卡片式設(shè)計(jì)中拓寬出去的,而遵照這一設(shè)計(jì)基本原理的網(wǎng)址一般 都是會(huì)將顯示屏視做為一個(gè)信用卡,每一屏全是一個(gè)器皿,每一個(gè)信用卡都承載一個(gè)互動(dòng)和一條信息內(nèi)容。
顯示屏的左側(cè)包括一個(gè)信用卡,而右側(cè)則包括了一對(duì)信用卡
分屏功能式設(shè)計(jì)是隨意的,它所包括的左右兩個(gè)塊狀實(shí)際上是還能夠再次向下細(xì)分化的,例如下邊的Stikwood 這一網(wǎng)址就將右邊的一部分區(qū)劃為更小的區(qū)塊鏈,用于承載大量的內(nèi)容,給予大量的信息內(nèi)容通道。
小提示:盡可能使你的頁(yè)面維持簡(jiǎn)易,即便要切分出大量區(qū)塊鏈,也盡可能不必應(yīng)用繁雜的方式,不然UI頁(yè)面會(huì)看上去很錯(cuò)亂。

搭建視覺(jué)效果關(guān)系
盡管分屏功能設(shè)計(jì)方式讓你能在這其中展現(xiàn)迥然不同的元素,可是2個(gè)信息內(nèi)容器皿中間或是有關(guān)系和關(guān)系的。建立關(guān)系的方法許多 ,顏色是最常見(jiàn)的一種搭建聯(lián)絡(luò)的方法。根據(jù)“共享資源”最顯著的顏色,讓2個(gè)不一樣的屏造成聯(lián)絡(luò),造成視覺(jué)效果流。假如這一顏色恰好是知名品牌色得話,實(shí)際效果特別是在顯著:
Bump 應(yīng)用知名品牌色來(lái)搭建視覺(jué)效果流,讓頁(yè)面和用戶造成聯(lián)絡(luò)
Marka 也選用了相近的方法,顏色飽和度更為明顯
此外一個(gè)值得一提的方法,是讓某一元素跨過(guò)2個(gè)區(qū)塊鏈(例如文字),讓這一元素來(lái)做為2個(gè)區(qū)塊鏈的節(jié)點(diǎn):
除開(kāi)文本,你要能夠應(yīng)用顏色累加來(lái)聯(lián)接2個(gè)一部分:
這一分屏功能設(shè)計(jì)實(shí)例中,右邊的顯示屏看上去好像左邊顯示屏的拓寬一樣。
應(yīng)用動(dòng)畫特效激勵(lì)用戶互動(dòng)
動(dòng)畫特效愈來(lái)愈多的參加到大家的UI設(shè)計(jì)和互動(dòng)中,應(yīng)用動(dòng)畫特效來(lái)激勵(lì)用戶但與到互動(dòng)中是十分有效的設(shè)計(jì)對(duì)策??匆幌孪逻?Chekhow is Alive 這一網(wǎng)址的設(shè)計(jì),設(shè)計(jì)師根據(jù)動(dòng)畫特效展現(xiàn)不一樣的人物角色,與你開(kāi)展配對(duì)。

總結(jié)
分屏功能式的網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)十分有意思,作用也充足強(qiáng)勁,但是你的內(nèi)容是不是合適用于那么展現(xiàn)?因此 ,在這般設(shè)計(jì)以前,提議先問(wèn)一下自己好多個(gè)問(wèn):
·分屏功能式設(shè)計(jì)是不是與你的網(wǎng)站內(nèi)容相符合?是不是有充足的合理布局來(lái)開(kāi)展分屏功能式設(shè)計(jì)?
·你的用戶是不是會(huì)喜愛(ài)那樣的合理布局?
·將用戶的專注力一分為二是不是適合?
不論怎樣,內(nèi)容為主,而方式聽(tīng)從于內(nèi)容,慎重挑選。