超多干货!国内知名UED团队的设计流程是怎样的? - 优设网 - UISDC

超多干货!国内知名UED团队的设计流程是怎样的?

2014/09/23 38827评论区

ued-team-design-flow-1

编者按:阿里上市了,木有进入大公司的同学也不要灰心,今天分享一篇国内知名UED团队的设计流程的好文,现在学起来,以后可以更快上手,同时也能一窥大公司的工作流程,让自己更加专业,赶紧来学习吧!

写在前面:流程用好了是好东西,用不好是阻碍。

今天写的设计流程的思考,以下。:)

设计存在于设计流程中。

设计师的工作是基于设计流程的。

和很多朋友讨论过设计流程。这个流程在每个国家、每个行业、每个公司、甚至是同个公司的不同业务下,都是不一样的。所以要写出来,很难统一概括。

与设计师相关的设计流程,可能一个基本认知是这样的:

产品需求,交互设计,视觉设计,前端开发。

再丰富一些:

市场分析,创意阶段,用户研究,概念设计,设计控件预设,交互设计,交互Demo,用户测试,视觉预研,视觉设计,设计Demo,用户验证测试,前端开发,开发Demo,展示Demo,迭代,用户测试,测试数据回收,用户数据验证,灰度,全量,项目总结,规范输出,控件库,用户跟踪反馈……

再凌乱一些:

以上所有点,顺序是可以根据敏捷开发的需求,灵活排列的。也可以随机组合。

所以,现在大多公司的设计流程,是一个标准且完整的架子。在实际设计项目中使用,并不一定是那么规范和统一的。有时项目大,可能流程走的完整;有时项目小步快跑,流程就会被精简为一个可用且贴合业务的小流程。

taromagazine

设计流程为什么这么不可控?因为设计不是完全理性、可工程化的。

一辆汽车可以通过完整有效的流程快速组装起来,且能保证质量;点子、思路、设计,不能这样。没有人能提供一个设计流程,能保证任何人进入这个流程,挨着一步一步做,就能做出设计精品。所以设计流程,是帮助产品设计推动,且为设计思路提供思考维度的一个不可工程化的方式。

我在美国、中国、德国工作时,都和设计师小伙伴一起制定了很多设计流程和方法。每个都不一样。

但是我发现,思考维度是类似的。

所以今天,我想借用Jesse James Garrett书中对用户体验要素分层的一个参考,来描述下设计流程的思考维度。

书名:用户体验要素:以用户为中心的产品设计
作者:Jesse James Garrett

1,Surface 表现层
2,Skeleton 框架层
3,Structure 结构层
4,Scope 范围层
5,Strategy 战略层

这是书中对用户体验要素分层的想法。我觉得贴合设计流程来描述,应该反过来说。

一、Strategy 战略层

经营者想要什么?用户想要什么?这两个问题能回答清楚,才能算是了解这个产品设计的战略层。

经营者想要什么是商业需求,用户想要什么是用户需求。有了这个基本理解,才能准确理解产品设计的商业价值和用户价值。

听上去很简单。但是做起来不一定简单。很多设计师在执行层,得到需求,完成设计工作。我个人认为大部分设计师是能清晰理解用户需求的;但是不一定每个设计师都能清晰理解商业需求。

例如做一个社交产品。年轻设计师很清楚这个社交产品面对的用户群体和核心用户场景(做了基本的Persona和Scenario分析),比较了解用户在使用这个产品过程中的心理模型和行为习惯(通过共感等方式)。但是年轻设计师可能不够了解这些问题:这个社交产品的商业价值是什么?怎么给公司带来收益?每一个点击、每一个新增用户、每一个广告位、每一个流失、每一个转化率各自意味着什么?这些细节对商业数据的影响?

这个理解程度差异直接给年轻设计师带来两个问题:与产品方合作的时候讲不清楚,达不成一致;对产品理解的全局观不到位(很难成为产品的Owner)。

我有时会对团队的设计师提一些问题,是与用户体验设计相对无关的。例如:

这个产品的未来3年你怎么看?
这个产品现在所处的区间,是否有巨大优势且可以成功?
这个产品真实的产品差异点在哪儿?

这些都是战略层问题。也是一些设计师小伙伴忽略的部分。

所以,设计流程第一步,我觉得应该是透彻理解产品的战略层,包括商业价值和用户价值,也就是,怎样帮助公司持续发展地赚钱?怎样帮助用户提升他们的生活品质?

这一点有10年经验的广告人E大也谈过,更加具体,右戳学习!《职场好经验!如何应对客户想看效果图的要求》

二、Scope 范围层

产品到底需要什么样的功能和特性?换言之,这个产品要做什么。

早期的互联网产品,怎么丰富怎么来。产品经理希望把100个内容模块都一起扔到一个页面上。那个时候做设计真心是痛苦啊。现在好多了,大家都越来越清楚聚焦、简洁的重要性。

一个产品,有1-3个杀手级功能、特性就足够精彩。

例如:Facebook的赞;Foursquare的Check in;Yo的Yo;微信的语音聊天等。

设计流程第二步,就是要知道产品需要什么样的功能。这些功能要足够满足第一步中的商业价值和用户价值,还需要把故事说清楚。在一个产品中,功能不需要太多。

设计师面临的挑战是:做新产品的时候,输入方太多,点子太多,如何选择如何执行,压力很大;做改版的时候,可能现有版本的功能特性已经很多,没有办法聚焦,你要改动的时候,又会影响产品现有的形态和利益,如何精进?

这些问题都可以从第一步战略层的思考得到输入和帮助,甚至可以直接解决问题。

laga1

三、Structure 结构层

结构层里重点思考结构的具体表达方式,例如流程的进行方式、界面元素的位置逻辑、导航的布局原则等,所以这个层关注信息框架和交互流程设计。

这就是设计师进入交互设计的时候,是第三步。海量的设计准则、丰富的设计经验、灵感和创意,都可以在交互设计中得到体现。交互设计可以说是具体设计的第一步,一个产品执行过程中的质量和创新程度,交互设计是起始点。

产品方和用户关注最多的,一个产品好不好用,就依赖于交互设计中的每个细节:流程是否流畅;提示是否充足;容错性好不好;操作是否自然;界面是否统一;效率是否高……

在设计流程的第三步中,交互设计需要准确把握商业价值、用户价值,理解产品的核心功能特性,有效有质量地描述整个产品结构、节奏、特质。是设计执行中非常关键的一步。

Planet_Propaganda

四、Skeleton 框架层

框架层主要就是做每个界面了。这是设计执行中,交互设计量最大的工作。

界面中每个元素,例如文字、图片,如何细致地布置在一个页面中。文字设计要精确到字段的大小、字体的大小,图片设计要精确到组合布局的展示、形状的释义等。精细的交互稿可以完全展现产品形态,一个黑白的产品形态。

框架层,大部分设计师每天都接触,就不一一讲述方法了。只讲两个点。

细致

这个时候的细致体现在设计师每个元素布局、像素精准、整体感观、交互逻辑定位、交互标注等方面。足够细致的交互稿,可以提升产品设计结果品质、帮助视觉设计更好地进行视觉创意、帮助开发测试更准确理解产品设计。

创新

战略层、范围层,我们已经经历了创新的主要阶段。框架层是二次创新的黄金机会。很多微创新、界面创新、特效创新,都来自这个阶段。苹果新的iOS与Google新的设计准则中强调的交互动效创新,很多可以发生在框架层设计阶段。

五、Surface 表现层

关注感官的关键阶段。视觉设计师、艺术家是核心。

一个产品经历了各种打磨,终于到最终呈现的阶段。最终用户看到的产品,80%是来自于表现层的设计工作。虽然产品设计背后的业务逻辑、功能巧思、开发创新非常多,但是用户看到的感官部分,表现层设计是最多的。

表现层是最直观地看设计师本事的阶段。优秀的视觉设计师、动效设计师、品牌设计师可以在这个层发挥得淋漓尽致。

以上5层并没有区分角色。而且我不认为每个角色应该局限在某一个层中。

交互设计师

我建议是要完全进入5个层的,这样对你把握整个产品的特质、故事、灵魂非常重要。要做到不仅仅是Designer,而是Owner,这5个层你都得完整理解并有一定控制权。

视觉设计师

也不要仅仅停留在后几个层。诚然,视觉设计师在设计流程的后面多一些,所以要去理解前几个层不那么直观,例如视觉设计师可能不会参加战略层和范围层的会议。但是你想想,视觉设计师已经有充足的艺术气息、视觉设计技能,再加上对前几个层的理解,会是多么强大啊。

用户研究工程师

在这5个层是非常关键的。你们是用户和业务之间的桥梁。用户是什么样子,他们的一颦一笑一举一动,都是你们带来的。所以用户研究应该贯穿在5个层中,通过使用不同的用户研究方法(专家测试、用户测试、用户画像、问卷、数据分析等)去提供产品设计支持。

前端开发工程师

现在的要求更高了,不仅仅是要实现,还要创造。强大互联网公司(Google)的工程师文化是有依据的,技术创新是设计创新的一大输入点。前端开发工程师精通技术,如果再理解业务懂设计,基本是无敌的。

希望这个5层的设计流程思考维度分析,对你以后对设计的理解有一定帮助。:)

谢谢阅读。

thanks,yoyo

设计师进阶好文推荐!

腾讯设计师的进阶建议,超实用!
《17条经验之谈!视觉设计师如何进阶提升自己能力》

想过稿就得先了解下设计评审!
《说到心坎了!关于设计评审的一些思考》

提高效率才有时间进步呀!
《秒变设计快刀手!10个帮设计师提高效率的经验分享》

原文地址:zhihu
作者:@EDC尤原庆
uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量78万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ued-team-design-flow

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里