TUhjnbcbe - 2024/9/11 17:58:00
编辑导语: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型布局、甚至更复杂的口型布局和综合布局等。陈列表现属性——上下布局常用于