杭州亚信UED交互设计实习小结

来到亚信实习,已经三个多月了,总结一些实习的心得与收获,以及经验与不足。

这学期是研二的下学期,上学期由于学校的安排,没能出来实习,是很遗憾的一件事。不过上学期把很多毕业论文开题相关的事情做掉了,这学期这方面的压力轻松很多。回到学校先整理了开题报告,改好了简历,之后一边整理完善优化之前的作品集,一边找实习和面试。

这时候正好杭州亚信在招实习生,于是投了简历,之后收到了面试通知。

面试与入职

亚信的面试很严格。在自我介绍之后,我介绍了自己的作品集,之后面试官针对我的作品,提出各种问题,后来总结归纳,大概包括以下几个方面:

对于iOS、Android设计规范的掌握;

可用性原则,主要参考尼尔森的可用性理论;

对于常见的、大型的、复杂的APP的分析与理解;

实际项目经验的积累;

看过的设计书籍。

以上问题,有些知识是我了解的,有些不太熟悉,实际项目经验方面是一片空白。

每一次面试,都是一次检验,查漏补缺,也指明了学习方向。进入亚信之后,一边了解公司业务,一边学习设计规范的相关内容,是我初期的学习内容。

亚信的主要业务和电信行业有关,服务于通信运营商,做B端的软件开发,我们项目组的工作也和此有关。

第一个项目:RTSS-Q2

入职亚信是三月中旬,当时项目组完成了RTSS项目Q1阶段的设计工作,已经进入开发阶段。我大约用了一个多月礼拜熟悉业务,之后就参与到Q2阶段的设计工作当中。RTSS项目是一个移动端的产品,主要功能是个人电信业务查询与管理,有点像中国移动手机客户端,服务于欧洲客户。这个产品在北京和南京都有合作,杭州主要负责数字资产和缴费相关部分,包括余额、充值、转账、积分、优惠券、账单缴费等功能,这些页面大部分都是我设计和优化的,当然经过了带我设计师的指导和修改。带我的两个设计师,一个是龙哥,一个是贞姐,给了我很多帮助。

设计流程与需求整理。

在接触实际工作之前,我对于项目流程的认知,都来自于间接知识,比如书籍、博客文章,还有自己的设计练习。来到公司之后,实际的项目流程和我想象有一些差别。我所在的亚信杭研UED部门,没有产品经理,业务需求由外部提供,由交互设计师整理,输出excel表格或是Xmind思维导图,没有产品需求文档。我在做交互设计的时候,会有很多困惑。一方面,刚刚接触通信行业,业务规则还不是很熟悉,另一方面,没有明确的需求文档,对于需求的整理就有困难。龙哥也没有给予明确的指引,只是说先按照给出的需求画原型,给他反馈之后再修改。我刚刚参与工作,缺少对于工作流程的思考和把控,就开始画原型。这样的流程很有问题,不明确的需求,模糊的业务理解,加之自己经验不足,只会造成各种问题的原型,于是反复修改。在之后的评审会议上,后台人员根据原型反馈的问题,很多是业务上的要求,这样造成的修改和返工很浪费时间。

在后续的项目中,我一方面提升自己的设计能力,完善原型,另一方面,在没有需求文档时,首先自己梳理功能需求,操作流程,页面架构,和设计师进行讨论,确认之后,再进入到原型设计阶段,将问题提前解决,提升流程效率。

功能架构。

在拿到RTSS项目Q2需求之初,在了解分析原有功能架构的基础上,思考新功能页面的架构安排。首先分开了预付费和后付费的功能,预付费用户包含余额、积分、优惠券、交易记录相关业务,后付费用户包含信用度、积分、优惠券、交易记录相关业务,将原有的一个页面分成两个来做。之后根据功能,分成几个模块,完成页面架构的梳理。在功能架构的基础上,根据要实现的功能,进行流程设计,安排功能操作和信息展示,这样后面做起来就比较顺畅。

业务流程梳理。

功能架构完成之后,开始梳理业务流程。余额相关业务,包含充值、转账和余额明细查询,充值和转账更多的是功能操作,余额明细查询更多的是信息展示。充值流程:输入充值号码,选择/输入充值金额,确认充值,支付。充值操作在一个界面上完成,需要注意功能组件的位置安排,还有充值号码、充值金额的报错提醒方式。转账功能类似,输入转账目标账号,金额,确认转账。

页面注释。

我之前在做设计练习时,是不写页面注释的。现在参加工作,团队成员要一起合作,完成一个产品,对于原型的准确理解十分重要。刚开始写注释的时候,对于注释的内容并不清楚,只是参考之前的页面,加上自己的理解书写,很不规范。后来经过读书学习,还有设计师的指导,才慢慢走上正轨。

对于多种情况的考虑。

页面上所有的操作,都会根据条件和情景的不同,做出不同的反馈。按钮的默认状态,各种可能情况,提醒和报错,都需要考虑周全。

设计评审。

在参加工作之前,是从来没有参加过原型评审会议的。在做完第一版页面时,项目组邀请前端、后台相关人员进行评审。评审内容一部分是我做的,一部分是龙哥做的。评审之前,心中还有些许忐忑,不知道会出现什么问题。评审的过程其实还好,主要围绕后台功能如何实现,原型表现是否切合业务规则逻辑进行。由于加入了优惠券支付,对于之前的业务有较多变更,后台人员对于功能实现方式和业务逻辑进行了长时间的讨论,最后才初定了业务规则。优惠券的功能在之后又进行了好几次讨论,每次都费时费力,我们也很无奈。如何节约会议时间,提升会议效率,是公司需要考虑的问题。

设计规范。

这里的设计规范,包含两部分内容,一部分是iOS/安卓设计规范,一部分是项目设计规范。在实习之前,对于系统的设计规范还了解不多。在做设计之初,有不少功能在其他应用中有所涉及,所以也借鉴了其他应用的页面与组件,结合当前功能的特点,加以修改。后来遇到有差异的功能,在自己设计组件和页面的时候,感到自己能力不足,对于各种移动端的视图和控件,没有应用的得心应手,有时候要去翻设计规范,参考其他app的界面布局。我一边做项目,一边学习设计规范,慢慢做页面的时候就熟悉起来。

在我完成一些页面,给带我的设计师看的时候,他说我做的页面和之前已有的页面风格不统一。我在做页面的时候,很多元素是从之前的界面上复制过来的,可是由于之前的界面元素就存在尺寸、颜色、字体的差异,我做的界面就很难和之前的界面统一。在项目初期,项目的设计规范是不存在的,需要在画界面之初预先规定界面元素的尺寸,在项目一个阶段结束的时候,再整理设计规范。所以我觉得,在项目设计规范方面,部门还有提升的空间。

第二个项目:Omni Channel

Omni Channel(以下简称Omni)的项目和RTSS项目是同时进行的,在我做RTSS项目期间,龙哥和贞姐整理了功能需求列表,在RTSS项目告一段落,评审结束时,我们三个进行了页面分工,开始做Omni项目。

在混乱中开始。

接到设计需求,我拿到的是一个excel需求列表,x-mind信息架构图,还有现有Axure文件中的user case,写着一些业务流程和页面字段。我当时基本上是蒙圈的,都不清楚一共有几个页面,每个页面放哪些内容,贞姐直接问我几天能完成,说时间非常紧,让我尽快做。我想问一些业务规则,可是她说她也说不清,因为这些业务都是后台的,我们只有后台的开发文档,没有具体的业务规则。这又是没有产品经理,没有需求文档的弊端。我们只能先按自己的理解画原型,拿到评审会议上,让后台人员评审,再完善业务规则。这样的设计流程,费时费力,很多时间都浪费在了确认功能和反复修改原型上,真的希望以后能够改进。

再次强调设计流程。

既然现实如此,也只能硬着头皮做了。我先理解拿到的设计需求,对照着拼凑出业务规则,开始画页面。好在有几个业务和移动端是基本相同的,就从那几个业务开始做。现在想来,又犯了设计流程错误。在没有理解清楚业务的情况下画原型,只会在后面反复修改。之前移动端没有出现大的流程和架构问题,是因为移动端相对来说业务简单。这次的Omni项目,需求功能有所增加,时间又紧,缺少了页面架构梳理,导致了时间的浪费。在user case中,字段和规则按功能列出,但是一个功能可能通过多个页面实现,多种信息也可能集成在一个页面展示,所以页面架构的梳理必不可少。时间再紧,流程不可少,这次是个教训。

纸面原型

之前听过纸面原型的种种好处,可是一直没有用过,以为纸面原型耽误时间,还要在软件里再画一遍。其实纸面原型真的很好,事半功倍,尤其是在设计初期,快速思考,将功能表现为界面,方便快速反馈和修改。在Omni的设计中,一些新页面,新功能,在设计之初使用了纸面原型,效果很好。我之前没有做过Web端的页面,画完纸面原型,再转到Axure软件中,可以顺利很多。

原型迭代。

Omni的原型经过了非常多次的迭代,每个页面都改过五个版本以上,有几个页面甚至有十个版本。版本迭代多的原因,一方面是用户体验的不断精益,另一方面是业务的不断明确与变更。涉及到业务变更的页面,包括Dashboard,详单查询,交易记录,余额明细,优惠券,支付相关功能;涉及到体验精进的页面,包括信用度详情,积分明细,转账,充值等业务。在做设计的过程中,业务需求不断变更,很多时间都用在跟着需求改页面上了,所以很烦。我觉得这一阶段的设计工作,主要围绕在实现功能上,完成“可用”的目标,适当提升“易用”水平,而“好用”的目标,基本无从谈起。不论设计流程怎样,这段做Web端页面的经历,对于我把握Web端交互设计有很多帮助。

沟通与合作的重要性。

在进行到开发阶段时,一件事让我更加重视沟通与合作。转账界面的一个功能设计,是在输入对方号码时,输入框下方弹出列表,展示最近充值的10个号码,方便用户进行选择。在前端同事写页面的时候,还和我确认了一下这个功能,我说是有的,我记得还是后台提供历史转账号码数据。后来页面写完的时候,向后台询问接口,才知道后台是没有这个接口的,历史转账账号数据由浏览器的cookies记录,直接显示在转账输入框里。于是前端同事的代码就浪费掉了,我也觉得很不好意思。在原型评审时,这个功能是通过了的,可是我并不清楚是由前端实现还是后台实现。于是我知道,在做页面的时候,除了要知道页面功能能不能实现,还要了解功能实现方式,是由前端负责还是后台负责,另外,在前端同事做页面的时候,也要及时沟通配合,协调前端和后台。因为部门没有产品经理,所以很多事情要设计师自己跟进。

与视觉设计师的合作。

由于公司业务的关系,Omni项目的页面有很多表单,还有一些数据图形化的内容,视觉效果要求简洁明快,清晰易懂,页面并不复杂。项目之前已经有了视觉规范,所以视觉同事的视觉稿完成的很快。在视觉稿完成之后,我整体看了一遍,风格没有什么问题,一些小的字段、格式错误,和她反馈之后,也没有进行修改,直接告诉前端同事在代码里修改就好了。后来,由于业务有一些调整,原型做出了相应修改,和视觉沟通之后,也是直接反馈给前端同事修改页面。

第三个项目:RTSS&Asset 7.7版本

RTSS&Asset 7.7版本,是在RTSS项目基础上进行优化的一个版本。由于涉及到项目跨团队合作,和外部系统进行整合,一些页面需要进行重新设计,也添加了新的功能需求。需要优化的页面,包括积分、优惠券和账单缴费,新增的功能,包括红包、详单、密码重置。

设计流程的完善。

这次做新功能的时候,依旧没有详细的产品需求文档,于是我自己整理相关内容,补充完善。主要内容包括,已经给出的需求简略描述,产品定义(使用人群、主要功能、产品特色),用户需求(目标用户、使用场景、用户目标),之后整理页面架构,思考任务流程。在整理完产品需求时,和龙哥讨论确认,通过之后再进入到原型绘制的过程。

再谈纸面原型。

这次做界面的时候,纸面原型的方法应用的很多,基本上所有新页面都是先画纸面原型,和龙哥讨论,之后修改,方案通过之后再绘制Axure原型,设计流程顺畅许多,设计效率大大提高。

体验设计。

这个版本的积分功能页面,做了很多在体验方面的迭代。积分相关功能,包括三部分,分别是积分绑定,积分转换,积分明细查询。积分绑定与转换功能,是指将第三方商户和Asset账户绑定,将第三方商户积分转换为Asset积分。整体的功能实现并不复杂,也有现有的竞品可以参考,设计的关键就在于,如何引导用户进行绑定与转换,其中也包含商户的展示,操作流程梳理的问题。我自己最早做的页面,将账户绑定和积分转换割裂开,分别实现功能,造成了用户操作的繁琐。之后的第二个版本,将两个功能在操作流程上做了融合,先绑定,后转换,可是对于新用户的引导并不顺畅,对于老用户,积分转换的快捷操作也并不方便。后来又做了几个版本,用户引导和信息展示始终没有找到平衡的解决方案。最后,龙哥对方案进行了修改,将新用户引导和已绑定商户都展示在首页上,实现了功能平衡。我后来觉得,体验设计的精进,要适当打破现有规则,界面设计要贴合用户使用,而不是一味的符合功能逻辑。

与视觉设计师的合作。

RTSS项目是在移动端,页面风格和之前的页面保持一致,是一种深黑色背景的商务风格。我将视觉稿和交互稿进行比对,整体的界面控件形式基本一致,只是在页面元素的细节排布上,综合美观程度、信息展示方式等,做出了细节优化。我对视觉设计师的工作成果感到满意。

其他项目

负账单转移页面

这个需求来自匈牙利的项目,安排在Omni项目告一段落的时候。简明解释业务,将一个账户下的负账单转移至另一个账户,并选择抵扣欠费和转移金额。业务不算复杂,只有一个页面和一个弹框,主要任务是完成符合业务逻辑的界面操作。我和后台人员了解需求,沟通之后,现场绘制纸面原型,并立刻反馈,修改通过之后,再绘制Axure原型。纸面原型主要解决界面元素与操作流程的相关问题,包括界面内容、表单排列、按钮位置、操作与反馈,之后的Axure原型,完善界面内容位置安排,考虑美观性。在Axure原型完成之后,反馈修改了两次,修改了一点内容,设计就完成了。这个页面以表单为主,前端可以参考项目的其他页面写代码,视觉同事就不需要做视觉页面了。

做这个页面的时候,我用Axure做交互动效还不熟练,动态面板的条件设置和动作设置是我不熟悉的内容,为了表达方案,通过几个页面的跳转实现。做完这个项目之后,我又学习了Axure的动效内容,提高软件技能。

这个项目的收获,主要就在于业务逻辑的梳理与表现,软件技能的提高上。

无主缴费页面

这个页面的需求更为简单,一共只有两个页面,第一个是无主缴费的查询页,第二个是信息展示与操作页。主要工作,即是输入框与表单内容的排列,简单操作的切换。依旧沿用之前的设计流程与方法,业务流程梳理-纸面原型-Axure原型。

自我学习

京东页面临摹

为了学习网页端的界面设计,龙哥安排我临摹京东的一些页面,包括首页和购物流程相关页面。在临摹的同时,注意思考业务流程与界面元素的关系,还有界面细节的处理方式,各种情况、操作的页面变化,如何优化用户体验。

在临摹的过程中,我思考了页面栅格系统在网页设计中的应用,相同元素的复用与统一,设计规范的应用,操作提示与反馈。这些内容对我之后的设计工作很有帮助。

读书-破茧成蝶

在实习期间,读完了《破茧成蝶——用户体验设计师的成长之路》,并整理了读书笔记。这本书也是一本讲设计流程与方法的书,和之前看的国外的书相比,更加贴近实战和国内特色。系统讲解了从需求分析、交互设计到设计表达、项目跟进的一系列过程,书中内容讲解很细,对于刚刚参加工作的设计师帮助很大。

后记

在亚信的三个多月,总结起来,RTSS项目Q2阶段像是入门演练,Omni项目是基础练习,RTSS的7.7版本是用户体验的提高。经过项目的锻炼,我逐渐掌握设计流程,提升设计技能,并不断思考,提升用户体验。

作为设计新人,不断学习,不断实践,总结经验,提高自己,日益精进,有所收获。

俊森

2016.6.30

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,478评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,825评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,482评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,726评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,633评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,018评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,168评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,320评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,264评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,288评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,995评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,587评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,909评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,284评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,862评论 2 339

推荐阅读更多精彩内容