• <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 首页 > 网页教程 > 设计分享 > 网页分屏式设计最常见的玩法有哪些?

    网页分屏式设计最常见的玩法有哪些?

    时间:2017-02-28    来源:优设网

    习惯了一栏式的设计,将屏幕一分为二的设计常常会让用户感到更?#26377;?#40092;。网页中并排的两栏呈现不同的信息,是分屏式设计的最典型特征,两边的信息可以包含相同类型的元素,可以呈现不同属性的?#25945;?#20869;容,比如一边是?#35745;?#19968;边是文本。

    分屏式设计完美的解决了你需要同时呈现两个不同内容的需求,这种UI界面突出了这两项内容的对等地位,让用户自行浏览,或者作出选择。

    你会发现,分屏式设计不仅仅是一种逐步流行的页面设计趋势,而且非常实际地解决了需要呈现同等重要内容、让用户选择的设计需求。这种呈现方式看起来原始,但是确实有着明显的优势:

    ·引起用户对于特定区域的注意力

    ·创造对比

    ·非常规式的布局

    此外,分屏式设计和响应式框架能够很好的结合起来,这种类型的布局特别适?#26174;?#26700;面端大屏幕和平板电脑?#40092;?#29992;,同时还能够在小屏幕上以上下堆叠式的方式呈现出来。

    分屏式设计的最佳选项

    当你将屏幕划分为两块的时候,两个区域内的内容的重要性是同等的,这也意味着你可以在这个界面中传达双重重要的概念。处于两个对等区块的元素就像阴阳鱼一样,从视觉到功能上,同等重要,互为补充。

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

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

    色彩和排版的组合

    ?#35745;?#21644;色块的组合

    吸引用户注意行为召唤按钮

    分屏式设计在视觉设计可以很有张力,这也意味着身为设计师的你同样可以合理地运用留白创造视觉焦点,将用户的注意力吸引到特定的元素上,这也是行为召唤(CTA)按钮的使用原理。

    将屏幕视作一个卡片

    分屏式设计本质?#40092;?#20174;卡片式设计中延伸出来的,而遵循这一设计原理的网站通常都会将屏幕视作为一个卡片,每一屏都是一个容器,每个卡片都?#24615;?#19968;个交互和一条信息。

    屏幕的左边包含一个卡片,而右边则包含了一对卡片

    分屏式设计是自由的,它所包含的左右两大块其实是还可以继续往下细分的,比如下面的Stikwood 这个网站就将?#20063;?#30340;部分划分为更小的区块,?#32654;闖性?#26356;多的内容,提供更多的信息入口。

    小贴士:尽量让你的界面保持简单,即使要分割出更多区块,也尽量不要使用复杂的模式,否则UI界面会看起来很混乱。

    构建视觉关联

    虽然分屏设计模式让你可以在其中呈现截然不同的元素,但是两个信息容器之间还是有关系和关联的。创建关联的方式很多,色彩是最常用的一种构建联系的方式。通过“共享”最明显的色彩,让两个不同的屏产生联系,产生视觉流。如果这个色?#25910;?#22909;是品牌色的话,效果尤其明显:

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

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

    另外一个值得一提的技巧,是让某个元素横跨两个区块(比如文本),让这个元素来作为两个区块的连接点:

    除了文字,你还可以使用色?#23454;?#21152;来连接两个部分:

    这个分屏设计案例中,?#20063;?#30340;屏幕看起来像是左侧屏幕的延伸一样。

    使用动效鼓励用户交互

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

    结语

    分屏式的页面设计非常有趣,功能也足够强大,不过你的内容是否适合?#32654;?#36825;么展示?所以,在如此设计之前,建议先问自己几个问:

    ·分屏式设计是否和你的网站内容相匹配?是否有足够的布局来进行分屏式设计?

    ·你的用户是否会?#19981;?#36825;样的布局?

    ·将用户的注意力一分为二是否?#40092;?

    不论如何,内容为王,而形式服从于内容,谨慎选择。

    相关推荐
    双色调配色、分屏式设计、空间共享式排版的网页设计趋势
    圆形元素、分屏式设计、深色背景+浅色文本网页设计分享
    CSS酷站网页水?#25945;?#32463;典设计欣赏
    欧美CSS酷站网页背景设计之光影特效赏析
    酷站欣赏之欧美棕色调网站设计案例赏析
    如?#20301;?#20110;心理学设计的目的来制作受用户欢迎的网页
    二十款网页图?#24149;?#25490;设计样式欣赏
    黑色的艺术:三十款暗黑色调的欧美CSS酷站欣赏
    35套精美绚丽的创意酷站设计欣赏
    网页设计的文字色?#35270;?#21487;读性分析
    如何掌握网页广告字体设计的技巧
    40款超个?#28304;?#31961;纸张纹理风格的CSS酷站欣赏
    15款富有创意的的html电?#29992;?#29255;设计欣赏
    国外49款创意型404错误网页欣赏(附演示网址)
    手绘风格的15款超级漂亮网站欣赏
    网易频道页面的改版过程分享
    网页设计师必备的13款国外CSS酷站参考画廊
    多款韩国绚丽风格的游戏网站界面设计欣赏
    网页设计中的构图技巧分享
    网页设计的几何圆之美
    网页交互设计的一些理解
    网页设计中上一页和下一页的用户体验分析
    ?#24179;?#20998;割布局在网页设计中的应用
    简单而又不单调的网页视觉设计技巧
    让用户感觉很糟糕的网页设计之十大原因
    淘宝网新年改版之网页宽度最佳尺寸浅析
    圆形元素在网页设计中如何应用的25个案例
    如何学习才能成长为?#24187;?#26356;好的设计师?
    淘宝案例分析之商城页面的用户体验
    85个优秀的超大字体网页设计欣赏
    用实例理解网页设计的80/20规则
    寻找应用服务或程序类网站的设计规律
    10个国外网页设?#23631;?#22495;最具影响力的人物
    30个出色的网页设计色彩搭配案例欣赏
    10个优秀的网页设计教程与素材博客
    网站专题设计的一些细节经验分享

    精彩推荐

    ?#35753;?#25945;程

    任选五走势图
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 30选5开奖结果133期 青海11选5前三和值表 澳门赌场连线 2元彩票网首页 西甲球队排名 曾道人特码彩图解释 四肖中特三期必中 北京11选5前三组选推荐 平码三中三09--15--41 彩计划9cbcc下载 排列三进100期走势 福建22选5今晚开奖结果 海南体彩官网下载 一尾中特公式官网 山东时时彩网