请欣赏h5设计心得体会（精选4篇），内容由多美网整理，希望对大家有所帮助。
h5设计心得体会 篇1
去年JDC出了不少优秀的武媚娘…不，H5模板制作呢，大家都很拼，同时当然也积累了一些经验和教训，今天结合咱们的实战案例，从字体，排版，动效，音效，适配性，想法这几个方面好好聊一聊关于H5的设计，希望对同学们有帮助。
字体
H5移动端页面设计心得分享 三联
排版
在有限的手机屏幕空间内，我们积累的经验告诉我们最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。
20jd20150124
比如JDC的“拍拍十二星座实用手册”的项目，只用了最简单的图形和文字居中摆放。
以可口可乐的这个“我们在这我们在乎”为例，相较而言，越左边的排版会越容易引起关注。这是因为我们懒惰的大脑里最初看到这种简洁排版会立刻出现“嗯我可以马上看完不费劲”的潜意识信息而带着轻松的态度去阅读。
动效
1 / 前期跟前端设计师进行沟通，讨论页面中元素的动效呈现。例如一些元素的位移，旋转，翻转，缩放，逐桢，淡入淡出，粒子效果，照片处理等等，还有3D展示效果。这个网站里有h5所能实现的效果)
16jd20150124
比如JDC出品的“京东HR招聘”里面就用了位移，缩放，淡入淡出的效果。而“京东微店七宗罪”的最慷慨这一屏则是用到了粒子效果，每个钱币翻转下落的速度不一样显得画面更真实。今年在朋友圈疯转的维多利亚和特斯拉的H5用的是擦除的效果，模糊的遮罩足够挑起人们的好奇心。
以上两款，包括今年最火的H5案例都在这了 >>>《如此风骚!20xx年刷爆朋友圈的十大 HTML5 技术案例》
2 / 背景动效其实比较推荐缓动效果，如“京东管培生招聘”的例子里星空中一闪而过的流星，间歇性出现不抢主角风头再好不过了.
3 /复杂多变的动效不一定是好的，要考虑到加载速度等用户体验问题。
音效
1 / 考虑到用户使用场景的多样性，那种介绍类的如果要加背景音乐，尽量不要太粗暴。有一点循序渐进最好，给用户留时间在骚扰别人之前可以关闭。
或者可以在开始时是关闭状态。但做游戏h5页面的时候，音乐可以没有关闭开启按钮，因为用户对接下来发生的事是有预知的。
2 / 考虑每一页音乐按钮放置的明显性。如果能用其他页面元素去替代音乐符号作为按钮也是极好的。
给前端设计师的音乐文件：格式为mp3等，单轨，最好30秒以内。为了加载速度，文件大小尽量控制在：100k以内最佳，可以用Adobe Audition等软件来压缩。作为无限循环的背景音乐，截取时一定要注意头尾得连接得上。
交互
1 / 展示型: 有很多种不同的交互方式，最常见的是翻页，这种方式制作起来相对简单，多用于展示一些新的产品，功能，或者活动介绍等。技术上现在市面上已经有H5在线生成器，基本上给图片和文字就可以帮你进行处理。
除了翻页以外，还有点击，输入文字，擦除屏幕，滑动屏幕等，玩法非常丰富。在“拍拍圣诞活动”里就用到了重力感应，摇一摇可以随机判断，让用户有了自己参与的乐趣。
2 /游戏型：像是起初朋友圈红过的围住神经猫，或者是我们的“拍拍Jump”这类需要计算逻辑，得出分数或者结论的小游戏。
3 /产品型：有一些H5是作为一个长期运营的产品存在的，用户的访问可能会更固定，比如微信里的购物页面等。
手机端之间：一般我们先用640X1136进行设计，参考线会标在960高的地方，主要元素最好不要过高以适配各种机型。其他安卓机器前端切图时可以适当拉伸，变化不会太大就不用每个进行适配。
响应式设计：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。
为不同电子设备单个布局，尽量使用纯色而非渐变
想法
被大众主流乐于分享的`信息大概有这么几种：
最直接的利益驱动，分享有奖或者需要众筹等，
对自己有用并且也对周围人也会有新鲜感的信息，
自己参与游戏或者测试得到的结果。
不管是分享给朋友或朋友圈还是QQ对话，让用户主动去分享你的带有很大性质的广告意味的信息在自己的社交群体中，此条信息与自己相关并且别人也能参与进来当然是最理想的。
可口可乐北极熊求合影的例子就是一个很好的宣传方式，借由简单的合成照片技术让人们有意愿去分享自己努力创作的照片。还有UJEANS的设计延续了品牌的调性就是实用，在选择你的牛仔裤喜好时也同时穿插了商品的说明，显得不那么生硬，它比较符合理由3。
在我们设计一个H5页面时，很重要的一点就是站在自己的角度跳出来去看你做的东西，首先一点是你和你周围的人愿意转发分享这个东西吗?它有趣吗?它对其他人也是有用的信息吗?
在做“1212陪你一二到底”的时候，我们的设计师要在最后引出有优惠券领取这个信息，前面也用用尽了节操去设计文案和人物，在此体会一下文案的重要性，它是贯穿整个H5的灵魂。第二张图上的小字“海外大牌足不出户购遍全球”是产品想说的硬广告台词，但在小小的手机屏幕里，碎片时间中，我们必须先抓人眼球，再抓住人心，所以”身体和快递，至少一个在路上“。
对于展示型和互动型H5来说最重要的还是想法。对于设计师来说，也许他们给到我们的只有几行文字，那时候前期构思这个H5的时间有可能比真正做的时间还要长。
比如拍拍网全球同步发售iPhone6的这个消息要做成H5，如果我们只是做一张炫酷的图片告诉大家我们这里有iphone6分享朋友圈有可能中奖，也会有利益驱动的诱惑让人去转发分享。但通过大家的脑爆，我们将这句话变成“关于Phone6的哥德巴赫猜想”，根据测试结果得出有趣的结论，这样转发的并不是赤果果的求中奖行为，还带着有趣的插图和自己测出来的杀马特范，是不是显得更含蓄更不经意呢。这样最终转发的理由上述1，2，3好像都有了呢。
今年JDC大概做了十多个H5 页面，产量颇丰。 H5和app比起来优势在于开发周期时间短，传播起来有效率，并且在更新迭代的成本上要小很多。特别在游戏上，未来H5模板制作会有更多的可能性。我们也会坚持去研究和尝试，不管是新技术，还是更有趣的营销方式，和大家共勉。
h5设计心得体会 篇2
一、运营H5概况：
1.1APP产品流程(运营设计的相关背景)
先说说产品的流程，移动产品从出生到和用户见面大多都会经历这么几个阶段：
在功能定位——交互流程(Ui)——视觉界面(GUI)——开发和测试，这几个步骤，基本实现了产品从0到1。如果要公司战略中考虑将上线的APP被更多的用户见到、使用到，那么就需要运营登上历史舞台了;
1.2UI设计分工/职责
公司如果规模比较大，产品需求和运营需求都会分配到对应的产品UI设计师或者运营设计师，他们负责那些工作呢? 产品设计：界面布局的合理性以及如何引导用户完成操作等流程化设计;运营设计：活动专题、焦点图(banner)等更加偏向于视觉化和营销类的设计。而在运营H5页面设计中，它需要考虑的是这两个的集合，一要兼顾视觉化的、创意的、吸引人的，也要兼顾能合理布局页面信息，引导用户进行操作(购买/收藏等行为)。
1.3运营H5活动的功能目标
正如《交互设计精髓》这本书中开篇提到的——以目标为导向进行设计，运营活动也不例外，运营需求的功能目标总结为四个类型：01活动运营型：游戏/邀请函/贺卡/测试;02品牌宣传型：公司/产品的微官网;03产品介绍型：提升转化率;04总结报告型：增加用户粘性;
1.4运营H5活动表现形式
目前比较常见的有四种类型：01简单图文;02红包/送券/贺卡/邀请函;03做任务：问答/评分/测试;04游戏;
1.5公司运营情况
由于每个公司针对的用户群不一样，因此在具体的运营需求，其需求的功能目标也会不一。如妈咪知道，运营需求每个月都会有，尤其是在产品发布新功能、节日(春节/端午/中秋等)、重大活动(公司周年/问诊节等)这几个时期提需求，具体的功能目标如下：
20xx年第四个季度运营需求
二、运营H5设计流程
在了解了运营H5活动的一个基本概况后，能帮助我们在做设计的时候，以目标为导向进行设计，当然落到实际情况，接到运营H5需求，也还是需要考量视觉层面的东西。
2.1日常准备
好设计来自有准备，在这里我做的准备如下：
2.1.1观察生活，记录灵感。线下：商场的橱窗设计，广告招贴画，地铁的广告贴;线上：竞品，电商等app;与美术有关的：插画，漫画等，用心去观察，随时记录自己当时的灵感，都是以后设计中的财富。
2.1.2收集和整理。每逢节假日，淘宝，京东，外卖的app的营宣活动特别多，及时参与，及时截图保存，竞品的相关医学类的活动也是及时参与，了解其的玩法和现有的设计手法。灵感库网上还有推荐Dribble、Behance、pinterest、花瓣、Google的Panda插件)等，个人的收藏习惯中比较偏好花瓣，只要你有网络，手机/公司电脑/家里电脑都可以随时看。
花瓣画板
tip01:对于建立画板名称看个人习惯，分组和命名方式完全依照自己的习惯记忆和搜索方式来定即可。
tip02:需要每天刷，大量的阅览，搜集喜欢的需要的，并隔一段时间做删减工作，删去觉得已经过时了的、没用的(毕竟随着实战经验和眼界的提升，有些图看不上了嘛)。tip03:可以尝试分析她们的优缺点，如果可以的话以邮件方式给内部组员分享。
2.1.3练习与模仿。好的效果和展现形式都可以模仿，字体变形，光影表现等，基本的技法都是可以在平时积累的。题主比较懒，这个我平时一般看到好的，会收集起来，在实践过程中，直接复制粘贴，临摹。
2.1.4公司资源管理策略。对于这点题主表示很有发言权，刚进到公司，我不知道自己要达到一个设计水准，也不知道同组设计师的设计水准，如果公司有共享文件，可以借熟悉公司环境的前两天了解一下(刚入职一般不会着急给你需求，时间还比较宽裕)。题主的的做法是在share查看之前的设计，了解你要输出的.产物list，如何管理输出物文件(命名/文件夹管理等)。获知你大概要达到的高度，或者是否可以超越，能否有直接挪用的资源，哪种手段不太熟悉可以直接询问同事(一般做设计的同事都比较友善的)。
准备工作大致是四个思路，基本可以为帮助你在实际项目中，帮你快速得到创作源泉和灵感，大大提高你的工作效率。
2.2真正实战
2.2.1前期准备
这个阶段主要包含这四个方面：沟通需求/分析定位/风格确定/视觉推导。
已之前的妈咪问诊节开幕活动的需求为例来阐述。
交互稿(ppt文件)
(1)沟通需求阶段(分析定位)：
做设计的话，沟通肯定是必不可少的了，这里分别涉及到了跟需求人(主要是运营策划)/交互设计师/前端设计师/领导之间的沟通，题主刚接手运营H5设计欠缺这块经验，有一个设计反复被要求改稿，反思了，就是因为前期沟通这一环节出了问题。可见前期沟通时多重要的事情啊，千万不能少这一步骤。后来我是怎么完善的呢? 首先，好的习惯是，从运营策划那拿到交互稿后，从上到下完整的先过一遍交互稿，一方面是看交互稿的内容完不完整，是不是还有些内容点忘记做了，另一方面也会咨询一下交互设计师，有哪些地方是需要设计师特别注意的啊，有没有什么内容是要优先做的啊等等，如果没有特殊要求的话，我一般都是会从弹窗开始。
其次，页面信息涉及到手机号码/错误提示/日期选择/地址输入等内容，一方面需要和运营策划沟通，是否需要手机验证码;另一方面也需要和开发沟通，询问是否他们H5的模版(时间选择器/地址选择器等)如果有的话，就不必花费时间进行设计，因为开发也不会按照一个运营活动单独写一个实现的代码，不过记得在tapd需求单上进行备注，以及和需求&;开发同步。如果没有，作为设计师的你那就需要考虑各种状态的设计等。
第三，询问弹窗的文案标题这些是否是最后确认了，以免涉及到字体变形最后发现文案要改那真是麻烦，如果拿到需求觉得标题不是特别好或者有疑问的时候，最好和运营直接沟通商量，看能不能对文案有一些修改调整，私自改动那将面对后期改动的惨剧。
第四，沟通阶段的，关键的点在于准确了解运营活动的意图/定位。通过运营活动传达一种什么目的/态度，营造一种什么气氛，好玩的，有趣的，暖心的，促销的，还是高端大气的。虽然现在风格可以我们自己来定，但决定权还是没有那么大，在需求沟通阶段还是最好询问一下，以免走偏。
以上就是我的一些前期准备工作，算是沟通完了，接下来我们继续看。
(2)风格确定阶段
需要考虑到活动的受众人群的年龄和活动主题的气质色彩。由于运营活动主要由运营组提出，磨合多了，风格彼此了然，但是医学小组或者其他的提出H5需求，设计师可以将各类型风格展示出来，给对方挑选一个合适的方向。
大致风格就是这么几种。
设计经验：01预防针：了解对方思路，大家脑海里也许已经有一个大概的风格印象。02根据活动的上线时间长短，时间，个人能力等条件来选择;03不要被风格约束，能够自由发挥，不要总做同一种风格，希望有所尝试。
对接需求时，我也会和运营说一下自己的意见：不想太约束，能够自由发挥，不想总做同一种风格，希望有所尝试。
这一阶段传达主要目的：需求方脑海里也许已经有一个大概的样子模型。但我们也不能够说得太细，只是需要了解方向思路对不对就好了，一方面是因为还没有开始执行你也没法具体到很细致的地方，另一方面是因为，如果一开始就把整个页面的设计全定死了，那往后如果出现突发情况或者被需求人误以为页面就是这样了，后面你想灵活发挥就很难了。
(3)视觉推导阶段：
通过重要的沟通阶段(风格确定阶段可有可无，前期可能需要，但随着需求接的多了，对方会信任你的设计，不用每次有需要确认风格)，那接下来很重要的事情就是勾画草图，找感觉。(运营H5活动，一般是入口和页面构成，像我所在的公司，运营H5入口为弹窗，那弹窗的重要性可想而知，需要考究之前所说的视觉化的、创意的、吸引人的，如果有些H5活动不需要入口，那第一个页面的视觉为先来考虑。) 第一个问题来了，在绘制草图时如何构思?
题外话：我实习的时候，运营H5活动基本是和我坐正对面的美女设计师芳芳包揽的，但后期工作需求的调整，运营H5开始分配到了我，运营设计从0到1，起初其实很害怕，不知道接了需求如何着手开始。和小组成员请教，也没法得到很详实的答案，一点点积累，后来需求接的多了，突然想明白了，这不是类似于写作文嘛，写作文列提纲，那同样的，接到需求后，根据活动的上线内容和要求，提取关键词等头脑方式来进行联想，是最终画面效果符合活动主题。
比如说节日类型的活动需求--中秋节，她有哪些元素呢?月亮，嫦娥，兔子，桂树，月饼等;圣诞节：圣诞树，圣诞老师，袜子，礼棒，圣诞颜色(红绿白)等;这些元素可能一下子考虑不全，没关系，咱们可以上花瓣搜，关联搜索，获取大概等元素，然后组合绘制草图。
在[妈咪问诊节盛大开幕]活动中，我提取的关键词如下：
妈咪问诊节-关键词提取
你可能会问我，能不能在花瓣上去找出完全一模一样的案例，能找到当然很好，但是每个公司的运营需求目标都不一样。要找到一摸一样的这种情况少见，不要太抱希望，有些时候，根据关键词在花瓣或百度查找，找不到合适的素材，那就看丑的素材也能构思好的画面内容的，一定要坚信自己可以搞定需求。
那第二个问题，如何做?保守的做法：一般画2-3个草图，可供对方选择。和需求方沟通需要和运营说明的是，草图是呈现一个大概的模样，具体在电脑端设计可能有差别，如果在草图花费太多时间，精力，可能在整个流程中不太适宜。(有时候，也会推翻，因此，让对方提供参考图，把握大方向，这样可以避免电脑端快结束了还要改稿)。
草图VS成稿
通过以上就是我的一些前期准备工作，算是沟通完了，接下来我们继续看。
2.2.2中期执行阶段
(1)弹窗/第一个页面：
进入电脑绘制阶段了，是不是好开心啊。因为在上一准备阶段中基本找准了需求核心，可以按照自己的设计能力来做设计了(说不定还有突破)。从第一页开始，之前我习惯先填充画布的颜色，定个大氛围基调，再做主标题的效果，而且不管三七二十一，先做了字体变形再说，最后画画面;我知道很多人的习惯和我一样，但需求有很多变数，比如说：
需求方突然要改标题文案怎么办?
把字做好后发现其他的商品图或元素怎么排都排不好看了怎么办? 光做一个字体设计就花费了项目一大半的时间怎么办? 所以基于种种原因的考虑(说多了都说泪)，我们要学乖，调整优化自己的做图顺序。
借用婷姐说电商设计的话“先把文案先丢在画布里，弄好画面形象后再去做标题部分的，并且有时候标题字体需要设计一下，有时候只是需要打几个字做个排版就好了，要看具体情况的，因为不是说做了字体变形就一定好，不做字体变形就一定不好”。
绘制弹窗之后，及时和需求方对第一个图，以免方向走偏，走偏了之后也能及时调整，不浪费更多的时间。(确定弹窗可能需要一段时间，这期间，可以着手做别的设计需求，时间有效利用，不要干等运营的回复，当然你可以主动问。) 是不是说漏了一个配色?
我的主要依据01活动定位/目的;02产品app的品牌调性进行选择;03数据统计等。如妈咪知道的针对用户群，因此色彩选择上使用活力，明艳的颜色，色调一般偏明亮调，黄色/粉色都比较吸引用户的点击。
配色
(2)其他页面设计
弹唱确定之后，继续下一个页面，看到红色标识的页面，怎么设计页面、布局信息呢?
h5设计心得体会 篇3
1、交互上，慎用向右滑动的操作方式。
如：刮刮乐涂抹效果，左右滑动翻页等。
原因：苹果手机上，向右滑动容易触发返回“上一级页面”效果。
2、交互上，慎用横屏展示效果。
原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的手机，长宽比例不一，难以展示最佳的视觉效果。
3、视觉上，功能按钮等，远离页面底部(大概128px，这个尺寸不是固定值)，具体看重构采用什么适配方式(仅供参考：640*1136 px，从上往下计算，主要内容在1008px内)。
原因：更好的适配各种屏幕的手机，避免按钮被挡住。
4、视觉上，慎用“光线叠加效果”或PS里面的“图层样式”效果。
如：给图层加个“柔光”、“滤色”、“色相”等等效果，除非这个视觉元素可以合并为一体。
原因：给重构挖坑，导致不好切图，无法还原视觉效果。
5、视觉上，矢量图?想做简单的动画?导出SVG格式试试!
原因：能减少体积的事，为什么拒绝呢……
6、动画上，尽量避免全屏动画，优先考虑局部动画的方式。
如：各种粒子效果全屏飘过等。
原因：如果呈现的视觉效果无法用代码实现，就意味着要用全屏尺寸的序列帧来处理，体积上会飙升，影响加载体验。
7、动画上，序列帧压缩小技巧，静态的画面，保存较高质量。中间运动的模糊状态，大胆的压低画面质量吧。
原因：压缩体积，运动状态就算有锯齿也不明显。
8、重构上，，压缩下，有效减少体积。
原因：额，这个也要说原因?好吧，偷偷告诉你，现在这网站不止可以压缩png，还可以压缩jpg，更重要的是……支持批量下载了!
9、重构上，音乐请压缩下，能大大减少整体的体积。
技巧：如果没有特殊要求，可以考虑弄成单声道音频文件，比特率48或更低就行了。
10、重构上，安卓机不支持多个音频同时播放……意味着无法背景音乐跟音效同时播放!(苹果机则没问题)
11、重构上，视频无法自动播放，首次播放需要用户点击触发。
(视频用什么格式?建议用mp4格式，并用H.264编码器)
12、重构上，测试请多留意“魅族”手机和华为P6/P7等，屏幕底部采用虚拟按钮的'手机。设备容易出问题。
说那么多，再来几条小知识。
到底是什么用浏览器内核?额，这个问题还真难说清楚。
安卓：
微信5.4-6.1版本，如果有安装QQ浏览器，则用QQ浏览器的内核。否则用手机系统自带的。
微信6.1版本后，内嵌了QQ浏览器的内核。
QQ浏览器：6.2版本及以后使用blink内核。之前用webkit内核。
苹果：
一直都是系统自带的……
向上滑动翻页的操作，视觉指引的箭头应该是向上，而不是向下哦;除非你是点击翻页效果，才用向下的箭头。
指纹扫描?亲屏幕触发互动?吹口气检测气体成份?
这些都是伪技术，开开心心被玩弄下就好了，哈哈。
不过像多屏互动，音频分析等，通过各种接口做技术支持，实现一些互动操作，这些可是未来的趋势哦!
h5设计心得体会 篇4
前段时间接到任务，需要寻找一个第三方软件公司开发一个节日游戏h5。
百度一下发现这类开发公司很多，仔细比较后选择了一家广州公司。用了三天时间，确定h5细节敲定了合同价格，然后就上报领导等待。
接着就是长达一周的静默，期间我也催促过领导早点定下来，因为扣除开发时间离预订上线的日子已不多。不过，回复总是让我再等等。
提醒领导无果后，我跟美工说明项目的页面要求，让她先设计起来，免得仓促之间来不及。但还是没用，领导没布置任务，美工也缺乏动力开工。
我以为项目要黄，结果等来的是赞助找到立刻开始。离上线只有5天，但软件公司光开发就要10天。堪称不可能完成的`任务。
跟软件方反复协商后，修改了原方案给为精简版h5，即使这样也很难保证顺利交付，而且几乎没有测试时间。为此我们还逼迫签订了一份免责协议。如果，软件出现问题，保证不会追究软件方的开发责任。
在一顿屁滚尿流，连滚带爬的赶工后，项目终于上线。长舒一口气外，还让我学到了三点。
1.想提醒领导注意deadline
一般的提醒没用后，要试试“威胁”工期来不及，项目无法上线，整个活动效果会大打折扣。先打预防针，即使后来真来不及也不会太怪你。
2.提前准备项目资料
催促同事早点准备资料，想要有效果可能还要依靠领导的。遇到问题多向领导，让领导为你所用，或获得授权方便行事。
3.给自己留足空间
在和乙方商量中，一定要给自己留足空间。计划22号上线，就一定要说21号上午上线。项目中意外一定有，给自己留足“本”才能不手忙脚乱。