浅谈响应式网站建设的几种布局类型

响应式设计已然成为当前网站建设的标配技术,无论是出于不同设备需要还是用户需求,响应式网站都备受欢迎,它能为用户带来良好的体验效果。尽管如此,在建站之前,响应式布局类型的选择同样需要进行认真考量,才能将网站的优势发挥出来。

响应式网站的页面排版布局主要分为几种,针对网站的实际需要,可选择不同的布局类型进行网站建设,下面奇亿网络谈谈常见的几种布局类型。

第一,灵活切换的固定模式布局。这种类型的响应式设计则是根据当前主流的多种设备尺寸,对页面的宽度进行灵活调整,形成多套页面布局设计,通过设备屏幕尺寸的测试效果来选择最佳的布局尺寸。此类型的响应式网站建设成本较低,但同样存在着缺陷,毕竟随着网络科技的不断发展,还会有更多主流设备的出现,而网站不能很好的适应千变万化的设备,造成后期需要更改的麻烦。

 

第二,具有弹性效果的布局。用这种类型的布局设计相较于第一种的布局更加灵活,主要是通过像素百分比调试的方式,给网站设定一定范围内的适应尺寸,那么建站者就可根据需要适应的设备设定尺寸,网站即可在较长时间内保证不被设备的进化而淘汰。但这种布局也有它的不足之处,它通常较适合等分结构或者通栏页面设计,其它的使用起来较复杂繁琐。

 

第三,则是混合模式的布局。混合模式的响应式布局除了拥有以上两种类型的布局优势之外,它能实现的展示效果更加顺畅,包括像素混合和百分比混合的适应性更强,能完美地利用网站空间资源,将网站呈现给用户。譬如页面分栏较为复杂的响应式网站则会采用这种布局类型,但它的开发成本较高。

3
 

很多时候,以上几种类型的单独使用估计还无法满足网站的理想效果,因此,许多网站也会采用混搭的形式同时设计,但奇亿网络提醒,没有完美的网站,并非使用的类型越多就能将响应式网站表达得越好,因此,网站是种要保持简单轻巧的原则,网页的实现过于复杂,会影响到用户体验,那么所有用心良苦的设计都会失去本该有的价值和意义。

HTML5三个设计方向的自我定位

e45ee7ce7e88149af8dd32b27f9512ce

导语:如今,移动端H5如雨后春笋般迅速发展花样繁多,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来。

如今,移动端H5如雨后春笋般迅速发展花样繁多,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来。那么如何在众多H5中脱颖而出?如何使手上的资源发挥最大化?如何扬长避短,做出吸睛的H5?都是摆在我们面前的问题。

在我看来移动端H5可以向三个方向进行设计定位:内容方向、交互方向和视觉方向。

1、内容方向是指介绍内容为主的H5,从用户情感出发,基于大众所熟知和想了解的方面入手。如节日类、信息广告类、电视影片类等。

2、交互方向是指注重与用户建立丰富的互动体验,以用户操作为主要卖点。如游戏类、广告类。

3、视觉方向是指以画面为主的H5,这里指的不单单是好看,而是把重点放在画面执行上,画面更有丰富的动效,做到非常强力视觉冲击力。

设计策划占到以上3方向的一种为“优”,具备两种为“精”,有三种为“神”。但是,重要的是每个方向需要做到极致。我认为目前能占两种的H5还是有一些的,不过具备三种的几乎是不可能。因为想要在这三方向都顾及到的话,最致命缺陷就是文件量太大,目前的带宽和设备的限制对过大的H5传播有着很大影响。

一、内容方向的H5

首先介绍下内容方向的优秀H5。重点放在内容方面要引人入胜,能够吸引特定用户,把H5有目标、有目的的去投放。

《活着》项目组策划的《活在此时》,充分透析了北漂一天的忙碌生活,直击为了生活而奋斗着的年轻人内心,主题震撼,内容充实,闻者心动,见者伤感。

e45ee7ce7e88149af8dd32b27f9512ce
 

为抗战胜利70周年举行盛大阅兵仪式而策划的《阅兵手册》,内容上充分展示了各个方阵的信息,在看阅兵直播的同时,手持这款H5,既长见识还能在人前卖弄。

7d0665438e81d8eceb98c1e31fca80c1
 

系列H5《传统节气》。随着人们开始越来越关注传统文化的传承,二十四节气的由来、习俗等知识,越来越多的人想深入了解。实时推出《传统节气》,既满足了此类人群的需求,又弘扬了传统文化知识。

7d0665438e81d8eceb98c1e31fca80c1
 

二、交互方向的H5

交互方向的H5,重点放在和用户的交互体验方面,让用户有很强的参与感。这就需要在互动过程中要做到完美的体验,吸引用户一步一步按照设计师思路看完H5。

交互方向H5一大类是小游戏,早期的围住神经猫、虐心的小鸟等都是火遍朋友圈。《俄罗斯阅兵—抢答1分钟》参与互动答题,再配上风格独特的手绘图案,可以说是H5中的精品。

a2b1e6813eec96052c81d40ba16e8c59
 

一夜爆火的《吴亦凡即将入伍》游戏推送广告,创新的交互方式让人眼前一亮。整个H5都会让观众惊奇的看到最后。

d72d187df41e10ea7d9fcdc7f5909205
 

《万能时装屋》和《哆啦A梦道具专卖店》,都是可以选择不同的元素,自由组合,最终达到不错的广告效果。

《万能时装屋》是用户在不同的部位选择自己喜欢的装饰,最后把选择的装饰生成一个完整的形象,电商就可以推荐用户一些喜欢的产品,而且可以拼出搞笑、无厘头的形象,增加H5应用趣味。

《哆啦A梦道具专卖店》借用哆啦A梦神奇道具的组合,也是生成实际存在的产品,推送给用户,不免让大家觉得非常有趣神奇。

fad6f4e614a212e80c67249a666d2b09
 

三、视觉方向的H5

视觉方向的H5拥有着炫酷的画面、华丽的动效以及特点鲜明的手绘,让人印象深刻,过目不忘。

说到视觉表现力,不得不提的是大众点评出过一系列H5,无论是画面效果还是夸张的动效,都能给人留下深刻的印象,但是对于内容和交互上就没有那么深入人心了。

0a8005f5594bd67041f88c6196192646
 

《AKQA Winterlands》借势圣诞节,让用户进入水晶球,环视3D场景,让用户有身在其中的感觉,在视觉和互动上达到双赢。

38b3eff8baf56627478ec76a704e9b52
 

了解策划H5的三个方向,不管是编辑、设计师或是开发工程师都可以根据自身的特点去策划H5,编辑如果觉得自己能把内容做的引人入胜,就可以在内容方向下功夫。设计师自然需要在交互上视觉上发挥最大的能力。

尽量在某一方向上做到最优的同时,兼顾其他两方向。定会做出精品H5。


Fatal error: Uncaught Error: Call to undefined function create_function() in /www/wwwroot/www.menglei.net/wp-content/plugins/autoptimize/classes/autoptimizeStyles.php:96 Stack trace: #0 /www/wwwroot/www.menglei.net/wp-content/plugins/autoptimize/autoptimize.php(293): autoptimizeStyles->read() #1 [internal function]: autoptimize_end_buffering() #2 /www/wwwroot/www.menglei.net/wp-includes/functions.php(5373): ob_end_flush() #3 /www/wwwroot/www.menglei.net/wp-includes/class-wp-hook.php(324): wp_ob_end_flush_all() #4 /www/wwwroot/www.menglei.net/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters() #5 /www/wwwroot/www.menglei.net/wp-includes/plugin.php(517): WP_Hook->do_action() #6 /www/wwwroot/www.menglei.net/wp-includes/load.php(1260): do_action() #7 [internal function]: shutdown_action_hook() #8 {main} thrown in /www/wwwroot/www.menglei.net/wp-content/plugins/autoptimize/classes/autoptimizeStyles.php on line 96