Sitemap" content="www.duozhankeji.com">

胸大的美女-技術中心

這裏象征著我們的態度和能力

正在逐漸流行的分屏式設計,常見的玩法有哪些?
发布者:佚名    信息来源:优秀网页设计    发布时间:2017-03-08      浏览次数:5635
分享到:

新浪微博

騰訊微博

QQ空間

豆瓣網

QQ好友

習慣了一欄式的設計,將屏幕一分爲二的設計常常會讓用戶感到更加新鮮。網頁中並排的兩欄呈現不同的信息,是分屏式設計的最典型特征,兩邊的信息可以包含相同類型的元素,可以呈現不同屬性的媒體內容,比如一邊是圖片,一邊是文本。

分屏式設計完美的解決了你需要同時呈現兩個不同內容的需求,這種UI界面突出了這兩項內容的對等地位,讓用戶自行浏覽,或者作出選擇。

你會發現,分屏式設計不僅僅是一種逐步流行的頁面設計趨勢,而且非常實際地解決了需要呈現同等重要內容、讓用戶選擇的設計需求。這種呈現方式看起來原始,但是確實有著明顯的優勢:

引起用戶對于特定區域的注意力
創造對比
非常規式的布局

此外,分屏式設計和響應式框架能夠很好的結合起來,這種類型的布局特別適合在桌面端大屏幕和平板電腦上使用,同時還能夠在小屏幕上以上下堆疊式的方式呈現出來。

分屏式設計的最佳選項

當你將屏幕劃分爲兩塊的時候,兩個區域內的內容的重要性是同等的,這也意味著你可以在這個界面中傳達雙重重要的概念。處于兩個對等區塊的元素就像陰陽魚一樣,從視覺到功能上,同等重要,互爲補充。

活力四射的配色和趣味十足的排版

得益于扁平化设计和Material Design 在设计领域的大范围普及,色彩和排版成为了目前设计的主要驱动力。鲜艳的色彩带来视觉刺激,而有趣的排版则让文本更有意思,两者的结合能带来颇为值得一看的设计。

圖片和色塊的組合

吸引用戶注意行爲召喚按鈕

分屏式設計在視覺設計可以很有張力,這也意味著身爲設計師的你同樣可以合理地運用留白創造視覺焦點,將用戶的注意力吸引到特定的元素上,這也是行爲召喚(CTA)按鈕的使用原理。

將屏幕視作一個卡片

分屏式設計本質上是從卡片式設計中延伸出來的,而遵循這一設計原理的網站通常都會將屏幕視作爲一個卡片,每一屏都是一個容器,每個卡片都承載一個交互和一條信息。

屏幕的左邊包含一個卡片,而右邊則包含了一對卡片

分屏式设计是自由的,它所包含的左右两大块其实是还可以继续往下细分的,比如下面的Stikwood 这个网站就将右侧的部分划分为更小的区块,用来承载更多的内容,提供更多的信息入口。


小貼士:盡量讓你的界面保持簡單,即使要分割出更多區塊,也盡量不要使用複雜的模式,否則UI界面會看起來很混亂。

構建視覺關聯

雖然分屏設計模式讓你可以在其中呈現截然不同的元素,但是兩個信息容器之間還是有關系和關聯的。創建關聯的方式很多,色彩是最常用的一種構建聯系的方式。通過“共享”最明顯的色彩,讓兩個不同的屏産生聯系,産生視覺流。如果這個色彩正好是品牌色的話,效果尤其明顯:

Bump 使用品牌色来构建视觉流,让界面和用户产生联系

Marka 也采用了类似的技巧,色彩对比度更加强烈

另外一個值得一提的技巧,是讓某個元素橫跨兩個區塊(比如文本),讓這個元素來作爲兩個區塊的連接點:

除了文字,你還可以使用色彩疊加來連接兩個部分:

這個分屏設計自偷案例中,右側的屏幕看起來像是左側屏幕的延伸一樣。

使用動效鼓勵用戶交互

动效越来越多的参与到我们的UI设计和交互中来,使用动效来鼓励用户但与到交互中是非常合理的设计策略。看看下面 Chekhow is Alive 这个网站的设计,设计师通过动效展示不同的角色,与你进行匹配。

結語

分屏式的頁面設計非常有趣,功能也足夠強大,不過你的內容是否適合用來這麽展示?所以,在如此設計之前,建議先問自己幾個問題:

分屏式設計是否和你的網站內容相匹配?是否有足夠的布局來進行分屏式設計?
你的用戶是否會喜歡這樣的布局?
將用戶的注意力一分爲二是否合適?

不論如何,內容爲王,而形式服從于內容,謹慎選擇。

4000-880-989
(24小時熱線)
聯系客服
微信公衆號

官方公衆號

小程序

2008-2020 CORPORATION ALL Rights Reserved. 昆明奧遠科技有限公司版权所有 滇ICP备18002679号-2 滇公網安備 53011102000818號
昆明那家网络公司好,新媒体运营,网站优化,网络推广,网站建设,网页设计,网站设计,网站推广,云南网站公司,昆明新媒体公司,云南网红主播,昆明SEO公司,昆明網站建設,昆明网络推广,昆明网站优化,昆明网站推广,紅河網站建設,大理网络公司,曲靖网络公司,丽江网站设计,昭通网络公司,保山大數據服务,智慧高速建设,智慧校园服务,云南IDC服务商,网络安全测评,等保测评,网站关键词排名优化服务,服务客户尽超2000余家,一切尽在奧遠科技,服务电话:13888956730