编辑导语：Web页面的美观设计对于用户来说是非常重要的，Web除了一些后台系统的开发设计外，其实框架设计也是它的重要组成部分；本文是作者分享的关于Web产品设计的操作指南，教你从0到1快速起手Web的设计，我们一起来看一下。最近在做工具类Web端的改版项目，查阅了网上各种关于Web设计的文章感觉年代都比较久远了；因此这边借着项目踩过的一些坑给大家总结一份比较实用的Web产品设计“葵花宝典”，可以帮助大家0-1快速起手Web的设计。无论是现在用的还是将来可能用的，先收藏着绝对有备无患。一、如何定义Web产品的框架说到Web很多铁汁就会马上联想到可怕的企业级B端，毕竟C端的内容现在已经大量移动端化了。那么Web系统设计一旦是大家想的大量类似后台系统的东西，对于设计师而言岂不是没啥用武之地？其实在庞大的Web类别中，设计的类别分为很多种：从工具到后台，UX设计师起到很重要的一点作用就是判断Web产品适配的框架并进行定义。之前看很多文章通过Web服务的用户（即这个Web是B端还是C端）来定义视觉与框架，比如淘宝电商的PC版就是个C端的Web，对应一种布局框架；而SaaS后台系统是个B端的Web，又对应一种框架什么的。我对着我们的项目纠结了很久还是觉得这样的分法无法兼容所有Web产品；举个“栗子”：我们在做的是一个AI视频面试系统（PC），用户包括HR以及专业面试官，按服务用户来说这无疑是个企业级的B端产品了；但我们如若按照B端纯效率的框架进行设计是无法满足产品AI智能化目标的需求，也无法很好的与竞对形成差异。参看以下示例图：因此推荐大家依据产品目标与用户的使用场景来定义Web系统的框架，也就是说同一个Web产品的也可以依据场景使用的不同出现不同目标属性的框架。这里我们回忆一下常见的2种产品目标属性对应的Web框架：效率工具属性——左右布局/T型布局等：常用于工具型、后台等有较高效率目标的产品功能；依据信息内容、层级的复杂程度应用T型与C型布局、甚至更复杂的口型布局和综合布局等。陈列表现属性——上下布局常用于
