PS AI教程H5设计思维与技法——hao123手绘与实景打造H5专题.docx

百度UE讲堂 PS教程——手绘与实景打造H5运营专题 【写在前面——什么叫H5专题】： 简单说来，H5专题是现在在移动端（手机、Pad）上面的一种推广形式。可能是游戏形式，也可能是一种翻页的故事形式，平时大家也可以在微信朋友圈里看到很多这种H5专题的推广。这种形式比较活泼生动、比较利于传播及推广产品。 【内容概要】： 今天给大家介绍一个生活服务类的H5专题——从前期整个思路推导，到整个专题的搭建过程。主要知识点有三个方面： 1. H5页面构成 2. 素材的再加工 3. 气氛营造。 4.PS+AI实际操作 【需求原型】： 不可否认，在所有项目的最开始，设计师需要解决的问题就是理解项目与需求。下面这张图就是产品经理给到UE设计师的活动策划，大家可以看到这个活动策划是纯文字的。 【最终效果】： 设计师需要根据这些文字构建起画面——可以通过手绘的形式，也可以通过口头描述的形式。再把它反馈给我们的产品经理，综合交流、沟通，最终产品经理和UE设计师达到意见的一致。我们来看最终效果： 【思维分析】： 简单分析一下该H5专题： 1.H5的交互形式其实非常简单，从下往上翻页。它的目的是给用户带来一个故事性的小专题。 2.使用的设计语言主要是手绘风格。在手绘风格的同时结合了一些实景，整体的风格偏怀旧，是一个情感化的气质。 3.理想和现实的落差感对比。可以看到，过去的画面是非常斑斓的，整个形式比较梦幻。而现在整体的色调和风格是非常暗淡的，正好体现了我们现实生活的平淡、无奈的感觉。通过这种配色以及视觉元素上的对比，给用户带来一个更好的落差感。 由此延伸一下，一个运营设计师平时在做项目时候的思路与重点，主要归结为以下三点：营造出专题氛围、突出主题和卖点、美化视觉。 再回归到此次的H5专题设计： 1.根据与产品经理的沟通及主题的理解，推导出这次主基调的关键词为——温馨、走心；视觉落差、梦想与现实的对比、虚幻色彩等； 2.根据主基调与关键词，推导情感化的表达形式为——手绘；推导落差感的表达形式为——色彩的对比、虚实的结合； 3.产品与品牌植入为：hao123及生活服务类的卖点； 【视觉规划与设计输出】： 进入了视觉规划阶段： 要解决的几个问题：场景的设计、素材选择、色彩选择、页面布局与素材处理 1.场景设计 我们这次的专题策划，主要是强调了理想场景和现实场景的对比落差，这个是我们专题的重点，结合我们H5这种移动端的操作习惯，那么使用这种上下翻页营造出前后对比，可能是比较好的处理方式。它能更好的把梦境和现实两个场景比较饱满的这种用视觉来做出对比感，所以我们最后在场景设计上选用这种全屏的、上下翻页的这种形式。 2.主题素材选择 主题素材也是构成我们整体视觉风格非常重要的一环，根据之前的设想，我们这次的视觉风格还是需要营造一个对比落差的感觉，所以在素材的挑选上也要遵循这种对比落差的感觉，来贯穿于我们整个的视觉风格。 因此，在理想状态，我们选用了这种口红、高跟鞋、爆米花等；现实状态选用了类似公交卡、闹钟、搓衣板等和生活息息相关、非常平庸的物品来营造我们平淡的现实生活。一方面，通过这种对比形成一系列的落差，给用户一些理想和现实对比的暗示。另一方面，也是暗含小心机，如之前说过的也需要在素材的选用上结合产品与品牌（此处为hao123）的特色、卖点，其实爆米花替代了hao123服务的特价电影票，漂亮的高跟鞋和口红正好针对一些女性的O2O上门服务，还有公交卡正好映射代驾、租车等服务，搓衣板正好映射上门洗衣的O2O服务。如此一来，给用户软性呈现的同时，达到推广产品的效果。 同时，为了烘托温馨的气氛，辅之以水彩、手绘的纸飞机、邮戳等这类轻松、理想梦幻的元素。 3. 色彩选择 要点：体现品牌色；营造气氛。 体现品牌色：hao123的品牌色为——绿色和橙色。所以在此次设计中选取了一定量的品牌绿来融入界面，作为整个专题视觉风格的一些点缀。 营造气氛：使用一些瑰丽飘渺、饱和度非常高的色彩来体现理想的画面，使用一些暗淡沉郁的、饱和度偏低偏灰的色彩来体现现实的画面，从色彩上亦形成一定的对比。 4.页面布局 在页面布局方面需要大家注意几个问题，由于移动端页面主要以竖版构图为主，而且它因为面积比较小所以承载的内容是有限的。我们这次页面的规格是这种竖长的720X1280分辨率，并且由于我们这次的专题是一个从下往上翻页的一个交互形式，所以我们把这个整个页面一个长页面分成三等份，以下面这个面积为主要的视觉焦点的一个基点，由此发散出这个三角形的位置，是整个页面的一个主画面的主视觉区域。其他元素从主视觉区域的中心向外发散，在文字部分由于可能我们这个专题是一个情感专题，它的文字使用的是一种手写型的文字，所以可能竖排版更适于它的情感化，或者说更适于我们这种竖版的平衡的构图形式。 5. 素材处理 把素材