最近独立负责公司的一个项目(下面简称:云栈)的设计,对于自己工作的流程,思维,一直都没有形成完成的体系。借用这次整个项目周期较长,自己的可控度较大,所以决定整理一下,希望能形成一个设计工作流程的雏形,不断优化,完善。
项目背景:公司是有主公司和子公司,两家公司组成,
1.子公司是主要做建站平台(XShoppy),针对跨境电商的卖家(小微公司,无能力自建电商网站)。业务功能主要是提供便捷的建立独立电商网站,各类电商有关的插件(商品评论,促销倒计时等),域名绑定,支付渠道等。
2.母公司主要做的就是跨境电商的业务,在Shopify(国外自建网站top one的平台)建立自己的网站,通过Facebook投放公告,将中国的产品卖往世界各地。
目前子公司的系统在为母公司的员工服务,母公司的员工是子公司的内侧用户。但是困难重重,目前投放广告的转化率(ROR)和Shopify比较,还有一段距离,这将是接下来一年重点突破,子公司生死存亡的关键点。
3.“云栈”平台是子公司的另一个项目,跨境电商小微卖家(公司)大多缺乏供应链管理的意愿和能力,信息化程度较低,效率低,制约了扩充和发展。云栈专门为卖家解决供应链管理。通过XShoppy+云栈的组合,为卖家(公司)提供跨境解决方案,从前端陈列到后端履约提供一站式的闭环服务。
在前期产品到仓库、物流等实地调研时候,形成了初步的原型。主要针对商品、发货进行管理。我拿到的是一个简单版本的单页面原型。该页面主要描述几个关键点,功能点,关键字段,以及字段说明。如图
针对拿到手的这个原型,我首先做的第一个动作是(当然之前就有参与需求的讨论与评审,竞品分析,有了初步的产品框架)浏览整个原型,以免自己脑子的地图和产品的不一致。之后就仔细查看每个界面的字段,以及字段说明,思考其合理性,和产品交流。
基本上信息对齐之后,我就会开始制作设计稿了。设计稿的制作分步骤叙述:
1.确认主色,辅助颜色。运用互补色,和相近色原理。
云栈的主色用的是蓝色(#34385C),辅助颜色用的是绿色(#64A894),字体主色是深蓝色(#1A2D3C)。
2.制作元件、组建。元件是一个个色块(控制图标和背景的颜色),图标。组建是多个元件的组合。如图
3.组合界面,把各个功能模块,用相应的组建组合起来,类似搭积木一样。如图
我在做设计时,基本上以组件为主,之后组合界面其实就简单了,但是在做各个组件时,要考虑不同的状态,怎么组合方便。之后开发也可以根据组件去搭建我们公司的整套UI组件(暂时还是使用现成的组件,通过修改别人的组件来实现。)用别人的组件,限制很大,后期跟进设计还原,就会出现各种问题,效果也大打折扣,小团队应该都有这种痛苦吧。
基本上,我在独立设计一个项目时,都会按这个流程去完成工作。完成一个迭代之后,会收集一些用户反馈,做一些简单的复盘(还没有形成体系),有时候紧接着下一个迭代,也就忽略了复盘,没有及时找出犯的错误。