h5页面设计规范

h5页面设计规范

1、把重要内容布局在安全线之上。

目前包含android和ios最小分辨率均在640*960之上。计算Android和ios安全区域,以android的导航栏和标签栏最大值(48+100)为准:960-148=812,从状态栏开始812设计即是安全区域。

2、可点击部件尽量和屏幕四边保持20-30PX的距离。

3、设计的时候尽量以一个使用者的角度去设计,判断哪个页面需要状态栏,哪个页面只需要一个返回按钮。

4、iPhone输入法自带搜索按钮,没有必要再在页面上进行显示。

5、尽可能的对页面部件大小边距等元素进行大小的标注。

6、中文字体:黑体-简或者华文黑体。英文字体:helvetica neue lt。

7、字号选择:建议最小不超过18像素,其他字号双数,同种类别下用一样字号。

8、排版

集中:简单集中,中心元素不易过多,突出重点为最优。

9、给开发提供图片素材要控制在100k以内。这样不仅能提高加载速度,还能节省用户带宽。

10、在小小的手机屏幕里,碎片时间中,我们必须先抓人眼球,再抓住人心。

11、有时候构思的时间比做的时间还要长。

12、H5和app比起来优势在于开发周期时间短,传播起来有效率,并且在更新迭代的成本上要小很多。特别在游戏上,未来H5会有更多的可能性。

13、从页面布局上减少跳转:使用交互技巧隐藏文字

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,588评论 25 709
  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,402评论 2 237
  • 说起台湾,脑海中浮现的是长长的海岸线,是自行车划过公路的痕迹,还是与你躲过雨的屋檐?是夜市里的主角蚵仔煎,是肉燥做...
    洛洛莉ya阅读 1,282评论 5 25
  • 青石板留着谁的梦啊 一场秋雨 又落一地花 旅人匆匆地赶路啊 走四季 访人家 如同昨夜天光乍破了远山的轮廓 想起很久...
    简单alan阅读 476评论 1 3
  • 生命是一个轮回。自己即是70古稀的父亲的儿子,又是两个孩子的父亲。或许是因为进入不惑之年了,人喜欢回忆过去的时光。...
    客家传人阅读 528评论 0 3