企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

用腾讯高手总结的设计流程,轻松应对大型项目!

发布时间:2017-01-12 12:08:41

TAGS:网站设计

设计轻松应对大型项目.png5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

面对双11、春节等有计划的大型节日 or 突发紧急的设计项目,该用哪些不同的方法应对?腾讯ISUX 的设计师蝈蝈总结了自己的工作流程,春节马上就到了,提前学起来,到时工作才不慌。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

前言:
5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

工作需求每天都有,但总有一些冥冥之中会被更多人关注,如实事热点、周年庆典、大版本发布、热门合作等,那这些被更多关注的项目是否就是传说中的大型项目呢?视觉设计师在这样的项目中,又该如何发挥自己大的作用,找到自己的定位,保证高质量高效率的完成项目呢?
5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

uisdc-isux-20170111-15Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

项目需求中,往往会根据产品功能的优先级、重要程度、工作量级、影响效应范围、资源投入量等维度来对其进行项目级别的评判,如该项目需求能对团队、产品、品牌(甚至企业和社会)造成重要影响意义的,都可被认定为大型项目(重要项目)。也因其对团队、产品的意义区别于日常需求,所以相较于平常而言定会受到更多的关注和期待。视觉设计师作为输出线的中间环节,需要环扣上下游的整体协作,且作为用户浏览的媒体介质的设计者和输出者,在这之中的作用不可忽视。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

由于之前有幸参与了几次团队较大型项目需求的设计,对设计师在类似项目中的定位与协作方式积淀了自己的一些感悟和收获,在此和大家分享一下!5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • 大型项目类别5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一般情况下,大型项目可按时间划分为两种:计划型与紧急、突发型。
5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  •  1. 计划型5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有可预见性,如传统节日、周年庆典、年中/年终大促,或有计划的大型改版、新产品发布等,准备时间相对充沛,且时间可弹性调整。整体设计目标以博人眼球、刺激高转化率或品牌的品质宣传为主。
5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

uisdc-isux-20170111-25Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

时间充沛的前提下,对输出的精度和效果自然需要更高的要求,这时我们须在日常需求的流程基础上增加更多的流程细节,如前期的脑暴、更多次的评审、扩大范围的体验反馈等,以此筛选出高质量的输出,达到大家对大型项目应有的预期。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当项目确定执行,可在立项之前预先做些准备工作:5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

日积月累:5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

传统节日与年终活动等都会定时定期出现,设计素材和灵感可在平日里有计划的搜集和积累,不要等到节日到来时急急忙忙去搜索、苦想。届时如有相同需求的设计师在同一时间做同样的设计,容易不约而同、撞稿、不出新意。(也许你会说,那只能怪你自己设计没有创意,但我会说,相同节日、相同地域、相同诉求、相同文化背景的前提下,你冥思苦想出来的创意以为独一无二却根本不能排除被撞稿的可能性。而你平日的灵感累积点却能比当前情境下,在创新点上有所区分、关注的侧重也可能不同而更有趣且更广泛,这样的积累再回看也许能带给你更多的方向参考。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

(Ps:养成良好的分类习惯,在需要时它也可以是你的加速度。)5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

分类方法:《15G的素材怎么管?手把手教你打造一个低管理成本的素材库》5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

春节特供素材:《春节特供中文字体!10款年味十足的书法字体打包免费下载》5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

uisdc-isux-20170111-35Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

项目信息5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

确定项目新信息,如项目背景、目标、合作团队、可投入的资源、宣传力度预估还有项目时间等。计划型大项目,一般都存在往年的延续或ft 性质的合作小组,所以这些基本信息都可以从以往案例中搜集到或者通过产品、运营同学了解到。还需要重点了解的是:项目重要决策人的方案偏重方向等,如果方向错了,那将会带来全盘被推翻的风险。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Brain-Storming5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有了前面两项的资料后,就可以组织头脑风暴了。这里不要忽视设计之外的产品、开发哥哥的意见哦,如果可以的话,请更多的召集设计之外的同学,产品、开发虽然都不是设计出身,但是想法是没有界限的,说不定哪一个爆点就能刺激你的灵感,迸发好的方案,也能让你从不同角度了解产品和用户喜好,会有意外的收获。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

比脑暴还好用的灵感聚合法:《哎哟,这里发现一个比头脑风暴还靠谱的创意产生方法!》5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

确定立项时,需要确定的东西更多当然也更细,所以不要慌乱,让我们来做一个清晰的流程规划吧:5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 第一步:确认工作量,预留人力资源5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

绘制内容结构框架分布图,按职能拆分需交付的页面,越精确越好。如一些功能页面现有可复用,可免去交互、视觉输出的页面,需清晰标记,并同步UI开发同学可预先开始搭建工作。为后段大工作量留存更多时间。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

uisdc-isux-20170111-45Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

第二步:排优先级,时间预估5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

根据拆分的页面任务,考虑设计的先后顺序。大项目页面数量较多,不可能一次性输出全部的设计方案,时间上即使有预留也不可让下游环节干等,人力资源足够的前提下设计方案可以并行,人力紧张的情况下建议分批次输出,让下游同学可以尽早展开工作,可让项目时间更充裕。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

第三步:确认上线时间,确认各交付时间节点5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

确认上线时间后,根据各职能评估的完成时间,制作清晰的交付时间表格,(也可以是我们排期时常用的甘特图)并同步整个项目团队。每个环节需要确立明确接口人,负责在每个交付节点标记需要上游产生的交付物和信息,并且确认交付情况,设计侧一定要确立主视觉,把控整个视觉输出的品牌统一性与设计质量审核。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

下图是之前一次大促时的交付时间表格:(可看到表格中需要交付的12个任务分项,与每个任务的交付时间,各任务的责任人、接口人等前面提到的重要信息。每个任务人员的时间是各自串联的,保证其可执行性)5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

uisdc-isux-20170111-55Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

(也可以选择甘特图,也是以图表的方式通过活动列表和时间刻度表示出特定项目的活动顺序与持续时间。基本是一组线条图,横轴表示时间,纵轴表示项目或分工,线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行,及实际进展与计划要求的对比。管理者由此可便利地弄清一项任务(项目)还剩下哪些工作要做,并可评估工作进度。办公软件中一般可在条形图工具中插入并自动生成,大家这个应该用的较多就不卖丑了)5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

uisdc-isux-20170111-65Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

第四步:在交付时间节点前,安插方案评审环节5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

交互和视觉阶段,建议至少安排各两次(及以上)评审环节,评审能确立方案的可行性,重要的是可以避免后期的不必要返工。主视觉风格决定了整个项目想要带传达给用户的感受,所以风格是重点审核部分,记得动用立项前期准备的脑暴资料哦!ps:作为视觉设计师,要不忘设计的态度,时刻提醒自己,除了眼前的这个方案一定还存在一个更好的方案,时间允许的前提下不妨再对自己狠一点,过程虽然痛苦,但结果往往会带来惊喜!)5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

第五步:视觉走查与跟进5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计方案完成后,在UI和前端开发阶段,视觉走查必不可少,即使再有经验的设计师也不可能把所有情况都考虑到,所以在开发过程中补充一些细节是在所难免的,当然这样的情况能避免是理想的。因项目的重要性质,至少安排两次(或更多次)走查,确保视觉还原度。当然走查完毕后仍要继续跟进,确保方案真实落地且被严格执行。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

第六步:上线前内部体验5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

虽然有测试同学,但是他们在功能上可以保证体验的流畅性,而设计展示与体验还是需要更多双眼睛一起参与完成的,上线前的仔细才会让上线后的页面更加分!5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

第七步:移动端展示的校验5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

包括移动端的性能体验与图片、文字的展示,其中需要分享到社交媒体所需要的传播图片准备,响应式的匹配等5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

uisdc-isux-20170111-75Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

计划型时间较为充裕,所以步骤分的可以细致些。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

拿腾讯云的周年活动为例,每一年的9月9日定会为周年筹划一次较大的促销回馈活动,在此之前自己会有意识的针对周年、庆典、促销等关键字保存一些可激发灵感的素材,如配色、绘图等。在距离周年2个月时,会主动征询产品和运营同学对今年周年庆的一些筹划方案,与大致的启动时间,在确保今年筹划的量级基础上,评估自己从容完成项目设计的时间,并给与产品同学时间预留的建议。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在实际项目开始时,拆分并确定此次周年庆的会场数量,按照往年惯例会在周年庆之前推出一个活动预热页面,而主会场会存在一个抽奖模块,其他则是一些固定行业分会场的页面,那么即可确认视觉需要输出的页面个数为6个,抽奖涉及到的通知弹窗5个。那么按9月9日上线的deadline,即可往前倒推页面的交付时间点。其中预热与正式会场必然要保持一致的设计风格,那么这6个页面中,预热与主场馆首页是需要主视觉来设计完成的,而行业会场可以由其他设计同学根据主视觉风格延展就好,可确认下来视觉的人力需要2-3人,因为提前筹备所以时间预留较为充沛,那么主视觉+辅助视觉各一个即可很好的完成。 之后即可和交互、UI开发、开发同学评估完成所需时间,后做出可执行的时间表格,并严格按照时间节点交付,就能完美的engding上线啦。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

活动页面中为费时的要数首屏头图的设计了,既占据了重要的篇幅,又牵控着主要的元素风格,所以当活动主题确认后,交互同学搭建线框图的同时,就可以着手首屏的设计了。这样能给自己预留更多的设计时间,也能给自己尝试更多方案的机会。关于首屏的功能,大多数情况下主要用于品牌打造,展示使用,并没有后台或操作等功能,如时间并没有这么充裕的情况下,可先将内容框架设计完成交由下游开始重构工作,首屏设计可暂由占位符替代,上线前更换即可。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 2. 紧急、突发型5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

突发型项目,没有相应的准备时间,在接到通知那一刻起,就已完成立项。需要做的是分秒必争的马上投入到项目执行中去。项目目标是确保短时间内抢急上线,但即使是时间紧迫,合作流程与各环节的交付节点是绝不可被省略的。还有前期的功能讨论设计师也好不要缺席,无论是否晦涩难懂,都能在一定程度上帮助理解产品,也能减少在设计过程中的沟通成本,了解产品定位,任务流程各个方面。做到这样才能在紧乱的场景下让团队有序的合作,环环相扣而不生差乱。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计合作流程5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

拆分任务页面 —— 标记设计与开发可并行页面——并确认设计优先级——确认上线时间并倒推各职能环节交付时间节点(交付时间包含方案修改校验)——分配执行人员、环节接口人——严格执行5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

交付时间节点
5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

(下图为并行时间节点分配图)5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

uisdc-isux-20170111-85Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

突发型项目,唯一目标是保证快上线,时间是唯一的奢侈品,所以各环节必须串行配合,将页面交付细分到模块,让每一个职能都能环环相扣,大程度的统筹时间分配与利用率,真正的与时间赛跑。时间紧张,难免需要加班配合,但早晚加班也是有策略的,充分了解上下游的加班习惯和决策者以及外界实事时间点,会发现有些需求点未必需要第一时间返回公司或加班,可以在下一个流程之后再补齐,如占位的配图、icon的高清匹配等。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

思考:5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在紧急突发型项目面前,设计师往往会犯很多本末倒置的错误,如在非常时期纠结哪种配色更好,哪种样式更搭等等,这些考量在平常也许正是设计细节的点睛之处,但在当前时间要求下,这些考量就是舍本逐末的表现。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

经过近一次微信小程序的项目,从中受益良多,相信很多视觉设计师也和我一样会情不自禁的关注了相对没有那么重要的细节部分,而掩盖了项目目标的重要性。以下是这次项目的一些收获,或者说是自己面对与其他日常项目时不一样的,需要注意的地方:5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

必须强制转移关注重点5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计师对美都有一种说不清道不明的执着,对自己设计的页面存在情不自禁的寻求一百分的强迫症,在突发型之外的项目中,这本是加分光环,但在紧急情况下,这样的完美执着无疑似团队的毒药,对项目进程有拖滞的危害。项目性质决定着上线deadline,如果一味的关注视觉呈现,只会拖慢下游进度,影响上线目标。所以视觉同学必须强制自己将关注重点从设计感转移至上线目标上来,优先确保功能的清晰展示,细节的设计可在迭代中仔细摸索。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

提前预判性5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

时间紧迫的项目下,争分夺秒是必须的,视觉作为中间环节,可在交互进行阶段,提前分析页面的时间花费分布,预判可以和交互并行的模块或页面,并提前启动设计,给自己争取更多的时间。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

优先结构框架的设计,细节内容占位预留
5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

上下游配合,视觉在给自己争取跟多时间的同时,也可尽量多的为下游UI开发同学争取些时间。例如在页面中,会存在模块阵列或列表等结构,视觉侧工作自然需要将每一个模块对应的配图、控件、文案设计好,但是对于UI开发同学来说是需要先搭建这个阵列的结构,然后在逐一替换模块细节内容的。所以视觉同学可以优先只设计一个模块然后给到下游阵列的结构,UI开发同学即可提前展开工作,减轻后期时间分配上的压力。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

(如下图所示为常见网页形态结构,整个页面UI开发同学先需要得到的其实是设计师确认的框架结构,至于里面的图标、banner配图、抑或是文字内容都是可以后面提供的。具体来说,如下图中,场景切换部分为三分阵列版式,灰色方框为图标占位预留,UI开发同学只需要图标占位尺寸即可,图标细节和形态,设计师在后面完成整体页面框架后-上线前补齐即可。)5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

uisdc-isux-20170111-95Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计元素快速复用5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联


5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

不要过多的纠结于与众不同的创新,在设计规范内如有类似模块请优先复用,在保证统一性的前提下确保上线目标。因创新存在试错的隐藏属性,时间不富足的情况下,没有办法保证其高可行性,而已有模块即使在创新设计上减分了,但是却经过了试错的考验,相比之下更能保证上线的安全系数。5Q1北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7044,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号