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

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

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

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

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