欢迎您来到中软卓越!中软国际教育-权威官方IT教育机构 加入收藏
  • 教育部授予:“软件工程专业大学生实习实训基地”资质
  • 商务部授予:“中国服务外包示范培训中心”资质
  • 工信部授予:“国家信息技术紧缺人才培养工程521计划”资格
2016年产学合作
协同育人项目
优秀合作伙伴奖

400-1616-861

 > IT技术知识点

2月必将流行的3个适用性网页设计趋势!

时间:2018-02-02 16:31:11 作者: 点击次数:0

 很多时候,设计趋势并不会表现的那么明显,甚至你看到它们也不一定会注意到。但是它们也是客观存在的。通过整个一月份的观察和总结,我们认为接下来的一个月当中,圆形元素、分屏式布局和深色背景+浅色文本会成为流行的网页设计元素。

 

这些元素看起来都挺常用的,不过当大家开始扎堆用的时候,就以“趋势”的形式体现出来了。


 

1
圆形元素

 

 

从形状心理学的角度来看,圆形和环形有着完整、和谐的心理学特征,在很多不同的场合,它常常会拿来传达爱情、能量的意象。

 

在 Material Design 的规范中,圆形按钮被大规模运用,并且由此开始,圆形在UI设计中开始承担越来越多的责任。

 

不过,由于绝大多数的屏幕和画布大都是矩形的,圆形元素通常不会贴边使用,也避免了在布局进行响应式变化的过程中,圆形元素的扭曲和形变。下面的案例当中,圆形元素都被很好的运用起来,布局保持着良好的流动性。

 

KymberleeJay 这个网页使用圆形元素来承载首页的主要文案,背景图片中的女性人物的目光则起到了不错的视觉引导作用。


1.jpg

 

Buddha Pizza 这个页面则让文字构成圆环,围绕这批萨,创造出独特的视觉奇观。


2.jpg

 

Hotel Poispois 这个页面则使用浮动的圆形来提升视觉,它们也可以被视作为巨大的按钮,将用户导向不同的页面。


3.jpg

 

 

 

2
分屏式设计

 

 

分屏式设计很有意思,它流行一阵子之后销声匿迹,然后又回归,来来去去好几回。最近这一设计趋势又回归了,这一次回归的分屏式设计看起来更加大胆,细节的搭配上则更加微妙。

 

分屏式设计的好处在于,它可以更好地呈现响应式的设计,在桌面上左右分屏,在移动端上上下叠加。无论怎么呈现,用户都不会因为这种设计而错过任何的信息。

 

分屏式设计之下,一个屏幕同时展示两块不同的内容,也让不同的内容和元素有了对等的展示空间。

 

分屏式设计让用户能够自主控制交互,让他们面对不同的内容的时候能够选择自己喜欢的内容和方式来操作。

 

Taco Bill 的网站就是一个很好的例子,当你打开网站的时候,设计师就为用户提出了两个问题:你是想打包带走事物,还是预订之后在餐厅里吃?通过分屏的方式,用户有了两个不同的选择。分屏式的设计让用户的选择更加直观、可视化。


4.jpg

 

Nikos Pandazaras 的作品集网站则选择了截然不同的设计思路。他将导航置于屏幕的中间,而摄影作品则左右各一并排放置,两者的重要性无疑是对等的,用户可以同时看到两幅不同的作品,屏幕的利用率倒是挺高的。


5.jpg

 

D’Aucy 在进行分屏设计的时候,选择了更加微妙的策略。左侧仅有图片,搭配着有纹理的背景;右侧的背景选择了近似的色彩却没有加上纹理,仅有文本标题。两者在保持近似一致的视觉设计的同时,又巧妙地呈现出差异性。


6.jpg

 

 

 

3
深色背景+浅色文本

 

 

深色背景+浅色文本是一个相对经典的组合。不过最新的玩法和之前的略有不同,许多设计师在深色的背景之下,加入了动效和视频。

 

无论加入的视频或者动效是显著的还是微妙,它们都很好地吸引了用户的注意力,增加了视觉上的愉悦感。比如 Top Estates 和 Bullying and Behavior 这两个网站,均是采用了相对微妙的背景动效。


8.jpg

 

白色的文本让整个设计的信息对比度有了保证,甚至让内容显得鲜明而突出。通常保持静态的文本和背景中深色的动效和视频构成了动静对比,使得这些网页在体验上显得非常有感觉。

 

背景显得越黑暗,整体所营造出的神秘感就越明显。较深的背景也增加了整体的可读性,背景中的动态元素则很好的营造了氛围和情绪。

 

这样的设计看起来并不复杂,但是其中所蕴含的信息量一点都不比其他的设计方案来的少。

 

9.jpg

 

 

 

结语

 

 

这次所总结的三种设计趋势拥有着良好的适用性,在几乎任何设计项目当中都可以适当地融入进去。无论是进行网页重设计,还是开始全新的设计项目,这些设计趋势都可以试着运用进去。当然,首先最重要的,始终是你的设计目标是什么。

相关文章
    无相关信息