1. 首页 >
  2. 资讯公告 >
  3. 北京UI设计培训 移动H5页面设计的那些事

北京UI设计培训 移动H5页面设计的那些事

 Oct 24, 2015 2:06:38 PM  3135人 来源: 火星人教育

什么是H5页面

        随着时代的发展,移动端用户的增加,扫描二维码付款、登入网站、关注公众号、兑奖等 行为越来越多,一个新的概念移动适配站即H5页面诞生。它是通过HTMLCSSJS技术写 成的网站,需要适配多种分辨率的屏幕的。H5页面有:H5网站页和H5活动页。

H5APP的区别

        APP大家都很清楚了,就是安装在手机的一个应用程序,打开它就能进入该产品进行操作。 而H5页面则是可在不同浏览器和微信APP中打开的页面。

三个不同:

1.开发周期

        H5的开发趑于后台由前端研发,时间短。APP的开发则需重新开发前端和后台,时间长。

2.更新迭代

        H5的更新,只要研发更新完毕,用户只需重新进入一次页面,即可看到最新的页面。

        APP的更新,当研发更新完毕,此时用户需要重新下载一次APP,才可看到新的更新。

3.传播性

        H5的传播快,通过各种浏览器和微信入口等方式。APP的传播则相对H5比较慢。

H5网站页设计

        使用APP时,它的顶部导航是该产品的,且深层页面有返回按钮。而微信端,浏览器则是自 带的,没有返回。而苹果手机则有自带的返回按钮。

        也就是说,我们在设计H5页面时微信端),在深层页面,需要增加一个顶部返回功能。 有人会问了,安卓手机下方不是有虚拟键或者实体键的返回吗?在这里需要说一下在页面中加 返回和安卓手机虚拟键实体键的返回的区别。

        页面中的返回按钮:重新加载上一页的页面,可以实时更新页面的信息,比如买商品,刚才有 100个存货,在那段时间里可能卖出了5个,那么返回加载后看到95个,即页面被更新。

        安卓手机自带返回:不会重新加载上一页的页面,而是纯粹的返回上一页,比如买商品,刚才有 100个存货,在那段时间里可能卖出了5个,那么返回后看到还是100个,即页面没被更新。

设计微信端H5网站在深层页面时,加入返回功能。

滑动比较下时,在页面下方加入返回顶部按钮

然后说说底部导航,这里有几种呈现方式,它们的效果不同。

底部常驻式

        优点:在多个一级页面中常驻,让用户直观看到界面之间可以快速通过按钮切换。 

        缺点:一直占位,比如主页是商品时,一直挡住界面占了一部分位罝。

 

伸缩弹出式
        优点:一直存在于页面中,但是以一个小图标的形式,点击即弹出,并不太占位。
        缺点:用户需要两次点击的操作才可以进入页面。

侧滑弹出式
        优点:适用于多个功能页的切换
        缺点:用户需要两次点击的操作才可以进入页面。

灵活随动式
        优点:界面下滑时(此时用户手势向上滑)隐藏。界面上滑时(此时用户手势下滑)显示。
        缺点:若用户频繁性上下滑,导航一会显示一会隐藏可能会造成视觉干扰。

H5活动页设计

        H5活动页是用于宣传,推广,游戏,招聘,公司介绍等设计出来的。通过各种动效,趣味性, 幽默性等吸引用户去关注和分享。常见的动效有位移,旋转,翻转,缩放,逐桢,淡入淡出,粒子效果,擦除,摇一摇等。有一些介绍类页面还可以增加音频。

滑动切换 通过手势滑动切换屏幕

摇一摇 摇一摇手机后,弹出新的页面

擦出 用户用手指滑动固定区域,后方内容慢慢显示

旋转 点击后,页面某区域旋转。

增加音频页面进入时会有音乐,可开可关。

规范和切图

        近期用户使用中是640” 136的使用率最多,安卓屏幕较多,一般以苹果设计稿为准。

        和APP不一样是,没有必要安卓和丨S分别出一份设计稿,H5APP的代码是不一样的。

        在切图上又如何呢,是否三套?这个需要分情况。APP是将代码和图标放在一个应用程序中, 用户安装打开即可,可以根据不同分辨率加载不同图标,故需要切3套使用率最高的屏幕图标。 而H5是分情况,其中一个是自家的产品,由前端写入3套图标。另一种情况是自家开发平台后, 这个平台供他人使用,后台操作上传图标图片,这种只上传1套图标。

只提供给大众浏览的H5

        设计稿以640*1136为准,切图3套,分别为hdpi,xhdpi,xxhdpi,适配3种分辨率,图标写入在前端,这样可以让不同的用户根据自己的手机屏幕大小,系统自动加载对应的图标。

提供给商户使用,且商户可自行修改

        意思是,自家研发的微信平台里功能,出售给不会研发的商户,一般是一些线下实体行业转型。 但不知道怎么做,此时需要买一套微平台系统来用。而图标,广告图由他们自己上传,傻瓜式操作。而后台限定了只能上传一套图标,此时图标在后台。此时设计稿有2种情况。不同情况的设计稿和切图,不同手机用户看到的区别:


640*1136的设计稿,直接切图,对应为xhdpi

1080*1920的设计稿,直接切图,对应为xxhdpi

        若以64CT1136的设计稿,直接切图,对应为xhdpi时,大屏用户看到的页面图片图标是虚的, 中小屏用户则清晰,加载速度比较快。

        若以1080*1920的设计稿,直接切图,对应为xxhdpi时,几乎大中小屏的用户看到都是清晰的, 但是中小屏用户则需要加载大图片,优化上来说又不划算,加载速度比较慢。

总结:

H5网站导航:

设计微信端H5在深层页面时,加入返回功能的顶部导航。

滑动的比较下时,在页面下方加入返回顶部按钮。

底部常驻式导航,所有一级页面固定底部导航。

伸缩弹出式底部导航,点击可弹出一级导航。

侧滑弹出式底部导航,点击可在侧面滑出一级导航。

灵活随动式底部导航,页面下滑消失,页面上滑出现。

H5活动页:

动效设计时,可用位移,旋转,翻转,缩放,逐桢,淡入淡出,粒子效果,擦除,摇一摇等。 某些页面可增加音频。设计视觉重心在屏幕中间。融入趣味,好玩,新颖的风格设计,让人 自发性转发。

字体:

PC设计用华文细黑(浑厚MAC设计用黑体-简(锐利

尺寸:

情况1:只提供给大众浏览的H5,图标和图片的修改由自己的团队控制。

设计稿以640*1136为准,切图3套,分别为卜(^丨,卜(^丨,讣(^丨,适配3种分辨率,图标写入 在前端,这样可以让不同的用户根据自己的手机屏幕大小,系统自动加载对应的图标。

情况2:提供给商户使用,且商户可自行修改的。

()以加载速度为主,但大屏用户看是虚的:

设计稿以640*1136为准,切图1套xhdpi

(2)以高清为主,但加载速度较慢:

设计稿以1080*1920为准,切图1套xxhdpi

标注:

无需标注,将切图和源文件给前端即可,每个前端的写法会有不同。

优化:

让图标等资源大小适当减少,否则加载速度很慢,用户等太久体验感差。