设计小团队Leader如何启动项目

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
5820 11 234 2017-12-21

纯粹是项目过程中的一些个人总结

背景


17TRACK,全球跨境包裹查询工具,App 于2015年发布,在没有任何推广的前提下自然增长,目前全球用户(iOS/Android/UWP)累计接近300万。


下图为现阶段的APP 首页:

Image title


本文章仅针对项目不同阶段,基于个人的经验分享。


需求确认阶段


不管如何,在接到需求的时候,切忌不要着急就去开展具体事务,先自己好好思考一下,基于现状,自己有什么思路。 


做事情切忌毫无方向就去冲闯,不然最后出来的东西难以说服别人,甚至还有返工的危险,前面多思考,多讨论,避开一些坑,后期的工作自然要顺利许多。 


在自己有一些比较具体的思路之后,再和需求方(BOSS)好好聊聊关于本次改版的一些想法,发掘真实需求,并且初步确认改版的方向。 


如本次项目,在与BOSS 初步沟通之后,明确了几点: 
1. 没有新功能的添加,纯粹地为体验、架构、视觉作优化;

2. 设计周期控制在3个月内,完成iPhone、iPad、Android(Phone & Pad)共4个平        台的设计;

3. 技术层面也要配合好,有“组件”的概念;


然后提炼具体问题,如:
1. 纯粹的UI改版,设计方向是什么?要解决什么问题?

2. 新的改版思路,4个平台的信息架构要梳理,工作节奏该如何安排?

3. 设计组件需要和技术端严密配合,如何安排?


在需求确认阶段会有很多坑,需要去深挖,并不断沟通,尽量信息同步。



项目启动阶段


明确需求,初步确立方向后,就需要具体地把思路和想法具象出来,制作一个可视化的PPT(我用的Keynote),把相关的人员都拉过来开个启动会议,会议目的很简单:1. 让参与者明确要做什么;2. 收集大家的意见;


PPT的思路: 
1. 把APP的主要问题提炼出来,建议不超过5条;

2. 针对问题的思路及解决的方向;

3. 以要解决问题的类型为基础,为大家普及一些理论知识,为后面具体要实现的模式 铺垫以更容易理解和接受,这个很关键;

4. 把自己的解决思路以关键字的模式提炼,2~3个点,并作出说明;

Image title

△ 上图为本人的简单演示稿,下文是制作的思考过程


App 端主要的服务对象是Buyer,本次改版的核心目标是以WEB端项目Buyer 为基础,从业务层、体验、视觉各个维度全面升级改造。


对现阶段App 提炼的3个主要问题: 

1. 新增用户系统后,信息架构及UI展示对用户的概念不够突出;

2. 对于产品的形态,还是以17TRACK查询主站的业务模式和架构在思考产品的形态;

3. 整体视觉体验感沉重,应尽可能以内容为主进行减负;


然后再针对问题梳理出设计目标:

1. 突出用户概念,同时输出吸引注册的方案;

2. 使用体验转换,与PC端Buyer 保持同步;

3. 为视觉“减肥”;


归根结底,主要目标就是“提升体验”,而如果达到这一点,对于一个工具型App 而言,在深思过后,在情感化和美感方面提升是比较容易有效果的。于是乎,PPT加上关于情感化和用户认知方面的理论知识。(向项目成员普及相关理论能对决策的设计目标更容易理解)


在最后提出了两个目标关键字:1. 快;2. 准 ;


然后简单归纳几点关键字的达成条件: 


所谓,这里指使用App 的感知体验: 动效的设计,要让用户感知到快的节奏; 功能的安排,操作频率高的操作更容易被发现; 提升用户对产品的认知体验,减少焦虑;

所谓,这里代表的是符合用户期待,界面干净整洁:优化信息架构; 简洁的UI界面,减少视觉负担; 统一严谨的设计规范,遵循4/8原则;


通过一场会议让项目成员都明白要做什么,怎么做,具体实施的方法等,同时也认可设计方向,后面事情就好安排了。



基础框架的探索及确认


由于App 主要的功能都体现在首页,信息架构并不复杂,所以,在信息架构方案的推导过程中,同时完成视觉效果,同步检验。


小团队,节奏比较灵活,加上自己对项目业务的理解也很了解,很快 4 个方案就出炉。这个时候,千万记住不要马上就进行审核,先稳下来,好好写一个方案的PPT演示,把自己的思考过程都写上去,这样有两个好处:

1. 自己能再次梳理整个方案的合理性;

2. 参与审核的成员更容易接受方案,给出针对性的建议。 


Image title

△ 上图为方案审核演示稿

主要说明 3 个要点:
1. 设计风格的方向是什么?

2. 为什么这样设计?即,基于用户数据得出的结论等;

3. 最终基于设计思考得出的几个方案演示,及针对性讨论;


在此给个小建议,每个方案都尽量往某个极端去设计,各有各的明显优势,这样的好处是:

1. 能让每个参与成员更容易发表意见;

2. 能较为顺利地得出大家认可的最终方案。


下图为 4 个概念Demo方案:


Image title

△ 方案一


Image title

△ 方案二



Image title

△ 方案三


Image title

△ 方案四


会议之后,再进行一些小的探讨,很快,大家的意见就达成一致了,最终如下图:

Image title

△ 最终方案


同时,这次的改版也下了个大决定,iOS的设计也会依据Material Design 的版式来做。




设计工作节奏安排


终于可以正式开展设计了,但也不要兴冲冲就启动设计,要优先规划整个设计节奏如何安排。即使项目时间比较充足,但没考虑清楚就开展工作,后面出现问题是很头疼的。


因为是一次较为重大的改版,负责App 端的小伙伴(coco)经验尚浅,为了保证质量和效率,作出了以下安排:

1. 本人负责完成Android Phone 的设计,并以此验证App 的信息架构、交互、视觉;

2. 每验证并确认一个模块,小伙伴同步设计对应的iPhone 版本;
3. 在设计验证阶段,一些创意性的工作可同步进行,如下拉Loading动画、小插图;


部分成果的展示:

Image title

△ 注册引导小插图 - 注册前 (By coco)


Image title

△ 注册引导小插图 - 注册后 (By coco)



Image title

△ 首页的部分界面动画


界面动效的设计执行,从项目周期计划来说,如果时间上比较充足,那就尽可能完善,否则,就挑选重要、频繁的交互进行动效的具象设计执行,关于界面动效设计我这里用的是Origami Studio ,这里就不展开对Origami Studio 的介绍了,有兴趣的童鞋可以看这里学习,鄙人写的一些教程。


工作上的几个小建议: 
1. 项目关键问题一点要想清楚,因为赶时间就盲目让小组成员开展工作,这叫作死;

2. 项目成员提问题,不确定的先记录,统一处理,然后一一答复;

3. 过程中极有可能出现一些小意外,保持警惕性,对进度要心中有数;

4. 设计细节要严谨,特别是团队成员能力并不是太强的时候;

5. 保持阶段性项目成员的进度沟通,维持信息同步;




关于协同工作


今年围绕Sketch 对设计工作进行了很多的调整。PS用于纯粹的视觉设计工具,运营设计、广告等;AI用于图形塑造,如图标、LOGO等;Sketch 用于UI界面的搭建,同时也用于交互线框的概念设计。


灵活运用Sketch 的Symbol 功能,设计规范的维护和管理变得轻松了,加上Sketch 新版本发布的Library 功能,基本满足了设计规范的整体维护流程,非常赞!



△ APP端



△ WEB端


然后,Sketch 配合Zeplin (国内也有不少人用),更是不用像以前那样弄标注稿了,甚至切图也不用自己动手,基本上开发完全自理即可,而设计师只要按新的设计方法执行到实际的工作中。这样一来,又是极大地释放了设计师的时间,可以有更多的时间思考和完善设计稿。



△ Zeplin 的项目管理,利用好分组和标签


Sketch 插件相信大家应该都有自己的需求,在这里着重介绍AutoLayout ,让实际的设计工作能摆脱更多的繁琐操作。最新版更是能实现一些Flexbox 的概念,个人测试之后,已经可以看到未来UI设计师们的工作方法要来一个大革新了。下面是个人基于新版Auto Layout的一些小尝试:


Image title

Image title

从上面两个例子大家可以看到,界面元素版式发生变化,不用再繁琐地去改变布局了,AutoLayout 插件能自动完成布局。有兴趣的童鞋能看看以下相关资料:

自动布局插件下载:Auto Layout for Sketch
指南与文档:Stacks (Flexbox) — Anima


成布局。当然,目前Sketch 版本在自适应方面的功能也做得不错


1. Resizing 就是定义图层的响应属性;

2. 这个是定义整个画板的;


具体的操作体现大家可以在Sketch 多尝试,并不复杂


在这个工具泛滥的年代,大家不要切记盲目跟风,根据实际的团队模式选择好工具才好。




一不小心就写了一大堆,本文主要是工作思路方面的分享,对于上面的内容有任何问题请留言,本人会抽空一一回答,辛苦你们耐心的阅读。


Image title


全部评论:11

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票