如何从0-1开始网站设计？

一阶段：需求分析

这一阶段的主要工作是梳理应用程序的功能点和0级流程图（了解一般功能的流程）。如果工作量太大，迭代版本将被分割。每个版本的迭代工作是根据需求的重要性和相关性的顺序来安排的。迭代时间通常是每周1-2个版本。

通过分析，理清了系统的总体结构和功能模块

全局结构包括：是否需要全球化、权限控制范围、页面适应性、前端和后端框架、更新模式。

功能模块包括网站主菜单

有很多方法可以确定。如果对旧网站进行改造，可以根据旧网站的结构和新的要求进行重新设计。

如果是新网站，首先要确定网站主要解决哪些问题，为谁服务，在什么情况下，谁是主要的服务对象，对象将如何使用，需要什么功能支持来解决这些问题。是根据市场需求和销售方法。

如果有竞争产品，将几种竞争产品组合起来，看看对方如何解决这些问题。很难获得销售版本，也很难理解Tob竞争产品的实际用途。大部分信息是从销售沟通中获得的，我一直在寻找方法。

二阶段: 分析功能

将大功能模块分解成小功能点（推荐脑图），列出功能点及相关字段，并以结构图的形式给出页面设计。

这实际上是两个人的工作。产品经理负责绘制原型图，UX/UI负责通过原型绘制网站设计图。但是，由于前端框架的生态越来越成熟，tob网站本身对外观的要求也不高，比如直接提供Axure、sketch控件和页面样式的antd，产品经理实际上可以在UI中兼职（但是，或者还不能设计一个logo。）

从网页设计的角度来看

首先，计算机终端的页面大小通常分为1024×7681366×7681280×8001280×1024144×9001600×9001920×1080。现在一般的设计尺寸是1920*1080，小支撑是1366*768，这是前端自己计算出来的。如果需要支持pad和手机，需要给出相应尺寸的设计图。

基本结构：

以antd的左菜单模式为例。Antd以8px为网格。基本的要求是给出横幅高度（8px*n一般为64px）、左菜单展开宽度（200+8*n）、左菜单折叠宽度（一般8*n为56px）、页脚样式、中间显示部分与横幅菜单页脚之间的距离。需要注意的是，文本是不能折叠的，对于支持全球化的网站来说，还需要考虑是否可以将其置于多语种的情况下。

有了这个页面的基本框架，就可以开始根据需求进行详细的设计了

详细设计：

在这一部分中，一些设计将首先给出，而一些设计将在整个页面的结果发布后进行调整。大多数网页都等不到页面设计完成，所以我会在开头列出要求，包括：

页面主/次字体大小行高颜色-antd默认主字体14px行高22次字体12px行高20。一般来说，页面字体大小不超过三个，否则会很乱。

Icon:color size需要将经过颜色调整的SVG格式图像打包到前端，其中一半放入共享文档中，并在Axure中用标签标记地址。