火星网校
掌握这8个H5设计小技巧，让你的页面炫酷又有个性！
发布时间：2024-08-01 15:57:44 浏览量：268次
随着HTML5技术的成熟，H5页面越来越受大家欢迎，各种H5页面层出不穷，那如何才能让自己的H5页面在众多页面中脱颖而出呢？
运用几何图形
生活中随处可见几何图形的存在，简单的三角形、正方形、长方形和圆形甚至几根线条就可以组成很多简洁大气的图形，适当的运用几何图形能够给H5页面带来动感与节奏感。
几何图形构图常用于公司宣传，产品介绍中，可以给人一种很强烈的整洁和商务感。
*注意：一般会是纯色大块搭配渐变，主要突出形状和区块。
运用蒙版
当背景颜色比较复杂的时候，通常会使用蒙版，主要方法是插入形状，调色至与背景中的颜色比较协调，降低透明度，这样既不会影响图片的完整性，又能够让文字更加清晰。
蒙版的运用比较普遍，MAKA众多H5都采用这种版式制作。
在内容不多的情况下，选用居中的构图，可以让人们的视线集中在页面中部，可以让整个H5页面显得更加精致简洁，同时也更加专注于重点内容。这种构图方式非常普遍，几乎适合所有类型的H5。
海报式设计通常是一张大图覆盖整个屏幕，再加一些文字标题作为点缀，效果更类似于我们平时看到的一些海报大片，非常的有视觉冲击力。
这种设计比较适合产品宣传、旅行画册、个人简历等等，可以放一些产品图片、照片、个人写真。
交互上，慎用向右滑动的操作方式。如：刮刮乐涂抹效果，左右滑动翻页等。
因为苹果手机上，向右滑动容易触发返回“上一级页面”效果。
交互上，慎用横屏展示效果。
体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的手机，长宽比例不一，难以展示最佳的视觉效果。
视觉上，功能按钮等，远离页面底部（大概128px，这个尺寸不是固定值），具体看重构采用什么适配方式（仅供参考：640*1136 px，从上往下计算，主要内容在1008px内）。
原因：更好的设备各种屏幕的手机，避免按钮被挡住。
视觉上，慎用“光线叠加效果”或PS里面的“图层样式”效果。如：给图层加个“柔光”、“滤色”、“色相”等等效果，除非这个视觉元素可以合并为一体。
掌握上述8个技巧，做好H5一点都不难，快来制作你的H5作品吧~
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
