h5设计心得体会四篇
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。下面就是小编给大家带来的h5设计心得体会四篇，希望能帮助到大家!
h5设计心得一
一、运营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公司运营情况
由于每个公司针对的用户不一样，因此在具体的运营需求，其需求的功能目标也会不一。如妈咪知道，运营需求每个月都会有，尤其是在产品发布新功能、节日(春节/端午/中秋等)、重大活动(公司周年/问诊节等)这几个时期提需求，具体的功能目标如下：
2016年第四个季度运营需求
二、运营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，起初其实很害怕，不知道接了需求如何着手开始。和小组成员请教，也没法得到很详实的答案，一点点积累，后来需求接的多了，突然想明白了，这不是类似于写作文嘛，写作文列提纲，那同样的，接到需求后，根据活动的上线内容和要求，提取关键词等头脑方式来进行联想，是最终画面效果符合活动主题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。