移动端网站设计案例赏析

来自 葡萄谷游戏网>2019-05-17
深度

[ 葡萄谷游戏网原创专稿,未经允许请勿转载 ]

移动端网站设计案例赏析

移动互联网时代的悄然袭来改变着咱咱咱们的生活办法,同时也有大批的设计力量涌入移动端设计领域。在web2.0时代配景下孕育睁开起来的设计师咱咱们,在进入如许一个新鲜的领域时多少有些“水土不服”。盼望颠末过程本文能给大家带来一些新的探究偏向及尝试。


网络环境研究


根据 CNNIC 第 32 次互联网络睁开状况调查,停止2013 年 6 月,中国手机网民的总规模达 4.64 亿。此中,手机浏览器用户规模为3.69亿,同比增长21.0%,在手机网民中的渗透率为79.5%。用户应用手机浏览器的频率稳步晋升,75.6%的用户天天都应用,此中63.3%的用户天天应用屡次。

同时,从应用时长上看,手机上网开端挤占电脑上网光阴,成为我国网民的一种主流上网办法。手机浏览器作为移动互联网的入口地位将进一步稳固晋升同时也成为网民接入移动互联网的首要入口。在如许的局势下面仅在PC端树立网站已经开端无法称心用户的必要。移动端网站树立的必要性十分凸显。

13984154098658.jpg

13984157281918.jpg

如图所示,3G4G网络的占奥屎蚖IFI覆盖率正疾速增长,而相对占比也赓续的晋升。优越的网络环境将为移动端网站设计开拓更大的间。这为网站的视觉展现和流畅体验带来更多可能性,同时因为低速网络仍有比较大的占比,所以网站的机能优化仍然是每位设计师必要迫切存眷的要点。


平台支撑


13984154104495.jpg

浏览器作为网站的承载基础,上图数据表示智能移动设备的市场占领量十分高,而普遍智能移动设备体系的自带浏览器和第三方浏览器基本都是采纳webkit内核,对网站都有较高的兼容度,这为设计带来更多可控性。


(相较于IE6用户应用率仍高达24% 的PC端 【2013年6月微软数据:IE6最新市场份额,中国大陆】,webkit内核浏览器对ccs3和html5的网站支撑率到达的93.5%以上。)


交互差异性


分歧的终端有着分歧的交互办法。PC与移动设备的交互办法有着天壤之别,在PC上优越的页面交互办法放到移动端页面已然不完全合适。移动端有着更丰富的交互办法,比如利用手机陀螺仪的重力感应来实现一些交互(如利用重力感应实现视差的JS特效、 旋转屏幕停止转跳、“摇一摇”实现页面切换等等),比如长按保留计移动端交互已经慢慢有一套完善成熟的交互体系。设计师在这方面可以或许更多的去学习借鉴移动产品的优越交互办法应用到移动端网站设计中去,也应多纬度去相同了解其在网成实现的可行性。


相应式设计


而说到移动端网站不得不提相应式设计。什么是相应式?简而言之,便是一个网站可以或许或许兼容多个终端——而不是为每个终端做一个特定的版本。面对繁杂的移动设备分辨率,这听起来非常美妙,咱咱咱们接下来了颠末过程一个案例来了解一下。

案例:NEWTON RUN'NING
点击标题或许扫描二维码浏览(此网站在PC与移动端皆可体验)


13984154119238.jpg
13984154124767.jpg
13984154139848.jpg
13984154145352.jpg


颠末过程案例咱咱咱们能清楚了解到在各种移动终端层出不穷的本日,相应式设计的壮大兼容性取得了弘大的表示。同时树立在壮大的兼容性基础上,因为全终端共用一个网站,那么在开拓、经营和掩护上会更节省本钱,而在网站打造后期会给设计和重构加重任务;对付产品包装而言在分歧终端会有更同等更完备的品牌形象。

而在实际应用过程中发现,相应式设计在分歧移动终端上能获得兼容度较高的视觉呈现同时会有部分功效性不够完善(如按钮点击地区过。欢在PC端部分浏览器会出现错位等不兼容环境;咱咱咱们还发如今硬件机能较差的终端下,网站的流畅程度并不高(静态展现特效会出现卡顿);而在移动终端上网站的载入过程遭到网速的很大影响。所以应用相应式设计的同时对设计师在交互设计、视觉设计,机能优化和重构方面会有更高的请求。

尽管此去任重道远,但是在国内外浩繁设计师的极力下依旧涌现许很多多的优越案例。


案例赏析


案例:霍比特人

点击标题或许扫描二维码浏览(此网站在PC与移动端皆可体验,PC端推荐chrome浏览)


13984154158733.jpg
13984162086044.jpg

该站针对PC端与移动端做分歧的过细优化,精彩的视觉呈现和顺畅的交互体验让其有着浓烈的带入气氛与浑厚的史诗感,同时清楚的用户引导,有趣的深入探究和巧妙的互动小游戏让其成为一个难得的佳作。因为承载的内容十分丰富,所以消耗网络资源较为弘大,载入光阴略长。



案例:Make your money

点击衔接或许扫描二维码浏览(此网站在PC与移动端皆可体验)

13984154169107.jpg13984162788883.jpg

该站有着喜人的矢量插画设计作风,清楚的用户引导,生动流畅的静态展现,使得枯燥的介绍也变得让人容易接受起来,这不也正表示了设计的价值吗?


案例:腾讯互动娱乐UP2014 发布会约请函

点击衔接或许扫描二维码浏览(手机浏览为佳)

13984216819886.jpg

Html5动画设计,Svg格式文件优化,更简约新潮的视觉展现,更流畅的用户体验,让一个内容简约的页面立马上流了起来~!


案例:腾讯移动游戏大奖赛

点击衔接或许扫描二维码浏览(手机浏览为佳)


139841542010000.jpg
13984154216706.jpg
13984154223541.jpg


流畅的动画效果,简略有趣的小游戏,清楚的用户引导。好用、好看和有趣三个都有了~!


案例:陈赫小我移动网站

点击衔接或许扫描二维码浏览(手机浏览为佳)

13984154233741.jpg


13984154241983.jpg

以微信"大众号为入口的轻度的拟APP设计的网站,功效按钮设计正当,跳转顺畅,日程、签到等互动内容应用流畅。


案例:前海第宅移动站

点击衔接或许扫描二维码浏览(手机浏览为佳)


13984154255281.jpg
13984154263542.jpg


企业型网站,制作谨严,专题有创意,但对导航的设计制一略显遗憾,跳转不顺畅也导致用户体验较差。


案例:宜家PS2014新品发家贫

点击衔接或许扫描二维码浏览(手机浏览为佳)


13984154278407.jpg
13984154284077.jpg


情感化场景设计,针对用户群的痛点表到达位,但产品展现不够清楚,未守旧在线购买功效十分可惜。


案例:小米移动商城

点击衔接或许扫描二维码浏览(手机浏览为佳)

13984154296261.jpg1398415430808.jpg

脱胎于PC的平台站,布局正当,展现清楚,体验流畅,同时也较平淡规矩。


案例:优衣库牛仔系列页面

点击衔接或许扫描二维码浏览(此网站在PC与移动端皆可体验)


13984154315453.jpg
13984154328189.jpg


视觉上连续优衣库一贯的简约,相应式设计在多个终端上取得了比较完备的视觉效果。不敷的是在手机端上,按钮过小,给操纵带来一定艰难。


总结

看完案例回归到实际的项目中咱咱咱们会发现:设计师在履行后期的各纬度相同十分重要,分外是和重构工程师的提前相同,对付页面的还原度和用户体验会有很大的帮助;因为有着兼容度较高的浏览器为基础,尝试一些新颖动画特效会让你的网站看起来更生动新潮;

跳开PC端页面设计的固定思维,更多的利用移动端特有的交互办法,会带来更酷用户体验,比如对重力感应的应用等。本文粗浅的阐发盼望给设计师咱咱们带来一些思虑和帮助,有不敷之处迎接指正,也与诸君共勉。

文章评论
葡萄谷游戏网订阅号
友情链接:万力木业新闻网  内蒙医药网  新疆人才招聘网  西安市第八十二中学  新疆雅美美容资讯网  金融时报网  碎石土地知识网  家怡园林苗木网  商职财经  宠物资讯网