（实例）网页设计基本流程

整理了之前的PC端的项目，从产品功能框架、梳理业务流程，页面视觉实现，期间跟前后端的有效沟通确保项目的顺利实施，项目实施过程的团队协同是至关重要的。

平台：PC端

需求：投资借款功能设计

时间：2018/08-2018/10

项目介绍：

设计PC端投资及借款平台，用户可在平台选择投资市场，审核用户放款资格，完成投资操作，同时在保证用户质押金额满足用户在平台上发布借款，提供用户充值通道，后台统计用户投资金额及收益。个人中心及新手帮助引导用户快速掌握平台功能操作。

产品框架：确定产品核心功能模块

1、投资：用户完成在线投资操作，查询详细投资信息及交易记录

2、借款：用户可以用已有资产或购买资产在平台发布借款需求，查询借款借款及还款时间，质押率等

3、个人中心：账户设置、安全设置、交易记录

4、新手指引：投资流程指引、借款流程指引、安全操作指引、平台介绍

产品功能框架

主业务流程：梳理主要业务流程，确定功能步骤

1、用户提交投资申请及发布借款需求认证流程

2、身份认证判断

基本流程图

投资流程：

1、我要投资：可投资市场信息展示—选择投资市场—生成订单—等待申请人付款—等待收款人确认

（用户完成注册、登录、判断用户可放款金额。）

2、我的投资：投资金额及当前盈利—投资信息—查询状态（全部、待处理、待还款、已还款等）

投资流程图（我要投资&我的投资）

借款流程：

1、我要借款：身份认证、质押金额判断—确定借款金额及还款周期等—安全协议—发布审核

2、我的借款：借款信息—查询状态（全部、待处理、待还款、已还款等）—处理状态

借款流程图（我要借款&w我的借款）

核心流程设计：确定设计风格和样式

网页尺寸：1920x1080px

颜色：（投资）深蓝色#225579  ：理智、稳重、完全   （借款）橙黄色#fd782b：收获、安全、向上

字体：微软雅黑 正文14-16px、标题 18-24px

页面风格：简约、商务

投资流程：

设计思路：

1、可投资信息列表展示，主要市场行情卡片展示

2、投资，借款分栏展示，隐藏部分非核心提示内容

3、客服实时跟踪交易状态，确保收付款资金安全性

投资页面设计细节 投资操作演示

借款流程：

设计思路：

1、下拉列表选择信息，减少用户输入操作

2、后台自动计算数据，用户可直接获得数据结果

借款页面设计细节 借款操作演示

其他部分内容：保持网页整体风格的一致性

1、首页模板、登录、注册

2、个人中心

3、我的资产、我的投资&我的借贷

其他内容设计