每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票纯粹是项目过程中的一些个人总结
背景
17TRACK,全球跨境包裹查询工具,App 于2015年发布,在没有任何推广的前提下自然增长,目前全球用户(iOS/Android/UWP)累计接近300万。
下图为现阶段的APP 首页:
本文章仅针对项目不同阶段,基于个人的经验分享。
需求确认阶段
不管如何,在接到需求的时候,切忌不要着急就去开展具体事务,先自己好好思考一下,基于现状,自己有什么思路。
做事情切忌毫无方向就去冲闯,不然最后出来的东西难以说服别人,甚至还有返工的危险,前面多思考,多讨论,避开一些坑,后期的工作自然要顺利许多。
在自己有一些比较具体的思路之后,再和需求方(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个点,并作出说明;
△ 上图为本人的简单演示稿,下文是制作的思考过程
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. 参与审核的成员更容易接受方案,给出针对性的建议。
△ 上图为方案审核演示稿
主要说明 3 个要点:
1. 设计风格的方向是什么?
2. 为什么这样设计?即,基于用户数据得出的结论等;
3. 最终基于设计思考得出的几个方案演示,及针对性讨论;
在此给个小建议,每个方案都尽量往某个极端去设计,各有各的明显优势,这样的好处是:
1. 能让每个参与成员更容易发表意见;
2. 能较为顺利地得出大家认可的最终方案。
下图为 4 个概念Demo方案:
△ 方案一
△ 方案二
△ 方案三
△ 方案四
会议之后,再进行一些小的探讨,很快,大家的意见就达成一致了,最终如下图:
△ 最终方案
同时,这次的改版也下了个大决定,iOS的设计也会依据Material Design 的版式来做。
设计工作节奏安排
终于可以正式开展设计了,但也不要兴冲冲就启动设计,要优先规划整个设计节奏如何安排。即使项目时间比较充足,但没考虑清楚就开展工作,后面出现问题是很头疼的。
因为是一次较为重大的改版,负责App 端的小伙伴(coco)经验尚浅,为了保证质量和效率,作出了以下安排:
1. 本人负责完成Android Phone 的设计,并以此验证App 的信息架构、交互、视觉;
2. 每验证并确认一个模块,小伙伴同步设计对应的iPhone 版本;
3. 在设计验证阶段,一些创意性的工作可同步进行,如下拉Loading动画、小插图;
部分成果的展示:
△ 注册引导小插图 - 注册前 (By coco)
△ 注册引导小插图 - 注册后 (By coco)
△ 首页的部分界面动画
界面动效的设计执行,从项目周期计划来说,如果时间上比较充足,那就尽可能完善,否则,就挑选重要、频繁的交互进行动效的具象设计执行,关于界面动效设计我这里用的是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的一些小尝试:
从上面两个例子大家可以看到,界面元素版式发生变化,不用再繁琐地去改变布局了,AutoLayout 插件能自动完成布局。有兴趣的童鞋能看看以下相关资料:
自动布局插件下载:Auto Layout for Sketch
指南与文档:Stacks (Flexbox) — Anima
成布局。当然,目前Sketch 版本在自适应方面的功能也做得不错
1. Resizing 就是定义图层的响应属性;
2. 这个是定义整个画板的;
具体的操作体现大家可以在Sketch 多尝试,并不复杂
在这个工具泛滥的年代,大家不要切记盲目跟风,根据实际的团队模式选择好工具才好。
一不小心就写了一大堆,本文主要是工作思路方面的分享,对于上面的内容有任何问题请留言,本人会抽空一一回答,辛苦你们耐心的阅读。
每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票
发表评论