ARTICLE · 1131559
通用产品设计--PC端网页类产品和移动端H5产品
通用产品设计--PC端网页类产品和移动端H5产品 下面简要讲述通用产品设计的两大类：第一类：PC端网页类产品，第二类：移动端H5。 1. PC端网页类产品 在互联网刚起步的时候，PC端网页是最主流的产品形态。比如：大家都熟悉的三大门户网站（搜狐，网易，新浪）。最早期的产品主流形式都是由PC端网页组成的。 PC端网页类产品的设计相对来比较简单，为什么说相对简单，因为很大一部分原因是互联网发展到现在，创作了很多的PC端网页类产品，不管你是设计什么样式的产品，都可以找到和这个类似的产品同时进行借鉴和参考。 如果是设计官网类产品，可以借鉴各种官网的设计模版。如果是设计贴吧类产品，可以参考百度贴吧，如果是设计电商类产品，可以参考淘宝，如果是设计信息类产品，可以参考搜索，新浪，网易，今日头条等产品；如果是设计直播类产品，可以参考虎牙直播，战旗TV，斗鱼等产品。除了产品本身的模版之外，PC端网页类常见的登录/注册功能和交互设计等，都可以借鉴到自己的产品上。 
在这样的背景之下，PC端网页类产品的设计可以归纳为下面三个步骤： a. 基于原始的产品需求，完成PC端网页功能结构的设计，一些类似的/登录/注册的功能，可以参考和复用同类型的产品逻辑。 b. 在功能结构完整的基础上，完善信息结构，PC端网页通常以内容信息为主，设计PC端网页信息结构的过程中，可以参考和套用各种网页设计模版。这些模版经过了大量的产品使用，以及用户的使用。不管在视觉层面还是交互层面都有十分合理的产品设计方案。 c. 在信息结构和功能结构都完整的情况下，确保整个PC端网页类产品所有的交互逻辑都是闭环的。比如，单击一个链接，确定是在当前页面打开新页面，还是在新标签页打开新页面，进入下一页面后如何返回等。 2. 移动端H5网页类产品 在互联网产品，由互联网时代慢慢向移动互联网时代发展时，适用于PC端的网页产品也开始向移动端发展。由于屏幕尺寸变小，演变了很多新的产品形态。 H5就是最常见的产品形态之一。H5是HTML5的简称，是一系列制作网页互动效果的技术集合。H5是移动端的PC端网页。因为HTML5技术的优势刚好适配了移动互联网的发展，得到了市场和用户的广泛认可，所以使用HTML5技术制作的页面也称为HTML5网页。 HTML5网页产品的设计方法和PC端网页产品的设计方法比较类似。相对于PC端网页类产品比较复杂的信息结构而言，适应移动端的HTML5网页在屏幕变小之后，承接的元素较少，信息结构设计更加容易设计。 在交互设计层面，移动端HTML5网页的交互设计和PC端网页交互设计有所不同。移动端软件产品的交互设计会注重灵活多变的特点。比如：滑动，双击，双指缩小，双指放大，单击，五指收缩等交互动作。