版面布局不是一次全部搞定的,而是逐渐演化而来。通过以下四个步骤,来彰显公司成熟的专业设计流程.
第一步:产品业务人员和客户积极沟通,参考现成的经典网站,大致确定功能及板块布局.假设划分为以下的7个大盒子。
A,B1,B2,B3,B4,C,D
第二步<可选>:在上方的基础上,需求采集专业人员一方面和客户充分沟通,确定客户的基本功能需求,特殊功能需求,一方面,通过产品原型快速工具进行蓝图设计,并很快展示给客户。经过双方反复斟酌,再一次明确产品功能及界面布局:
假设使用Axure 原型工具,UI效果演示: demo
第三步:Web前端技术设计人员,根据上方蓝图要求,通过Bootstrap的Grid进行具体的布局设计,然后,再次展示给客户.
效果展示链接:演示 demo1 demo2 demo3 demo4
说明:主要采用Bootstrap的Grid网格布局大致模仿一个现成的网站布局。demo4中可以插入效果图片.