首页 > 开发 > 设计 > 正文

[QQ for Mac 3.0官网改版]交互设计师的条理、细节与情怀

2017-09-15 09:33:10  来源: 网友分享

“交互设计师应该是怎样的设计师?”

类似的话题,是一直存在于自己脑海的。成为设计师一直是自己的理想,觉得这是一个集严谨和创意于一体,严肃又浪漫的职业。而在平时的工作范围中,交互设计师不是视觉设计师,不能用视觉稿表达浪漫;交互设计师也不是产品经理,除了分析数据,思考用户心理、需求场景,也需要有在交互设计角色上的独特作用。

那么,除了输出那些枯燥的流程图线框稿之外,交互设计师怎么样才能保持设计师的气质,找到点“严肃又浪漫”的设计师感觉呢?

下文就结合QQ for Mac 3.0官网的小案例来聊聊。

xa0

条理:给用户最简单的界面

条理是严肃的部分,是交互设计的本分。对于官页设计来说,设计过程中条理包含两个方面:整理内容和选择合适的结构。

xa01.内容整理

在原有的2.x官网版本上,交互设计师首先对官网上的所有内容进行了重新盘点:

内容整理

整理后发现,所有内容可以按照各自之间的联系,分为简单的四类:运营、功能、支持和其它入口。

内容的整理,可以为选择合适的结构奠定基础。内容的类别越多,区块就会越多,结构就会越复杂,用户在浏览时的成本就越高。好的设计,应该让用户在使用的过程中,依靠直觉就能完成任务,而不需要过多额外的学习。所以在整理内容后,设计应该力求界面的简洁、结构的简化。

xa02.结构简化

将内容整理清楚之后,我们对官网的结构进行了简化。

结构简化

简化后,3.0官网可以采用简单规律的单栏结构。用户的视觉流向基本只要保持一个方向,滚动鼠标就能浏览所有的主要内容,大大降低浏览成本。

xa0

细节:再来点灵动的吧

前面的部分已经完成一个保证可用性的官网,但正如引言里所说,作为设计师,我们区别于“不用催进度的产品经理”的地方在哪里呢。如果精益求精些,可以在一些细节上进行精细化的设计。

1.选择精细化的对象

首先需要明确的是,不是所有的细节都都适合做进一步的设计。精细化的设计往往会使被设计的元素更加的强调和突出。所以,如果对象不正确,会适得其反,做出喧宾夺主的刻意设计。在思考有无可进一步设计的细节时,应该着眼于一些重要的内容或者关键操作。在3.0官网里,主要选择了3.0特色功能介绍作为进一步设计的对象。

2.精细化设计是有目的的设计

设计的目的是解决问题,精细化设计也不例外。所以精细化设计的方式也应该是产生实际作用的。

由于3.0是一个大版本,其中产品新的功能特性,无论是种类上,还是细节上,涉及的量都比较多。所以,这里设计的目的是:让功能信息的呈现更直观。在这里,对应不同的功能特性,我们采用了不同的动画处理方式:

精细化GIF

例如AIO面板的细节标注划入,是由于产品在关键功能上做了改动,这些改动,需要用户关注;通知中心的动画出现方式,让用户不用阅读问题,一眼就明白这个新功能与通知中心的关联;swiftly智能搜索的动画,在有限的空间里,表现此功能无限的扩展性。

3.细节设计的完整性

加入精细化设计后,完整考虑到动画出现的时机和次数,是交互设计师的任务。对应每个功能的动画,会在用户首次滚动聚焦到显示该能时才出现,并且只出现一次,这样一方面确保在最佳的时机让精细化设计发挥作用,另一方面也可以避免对用户浏览过程的骚扰。

xa0

情怀:直抵人心

有了条理清晰,又有细节层次的设计后,情怀是可以为设计注入灵魂的部分。特别是官网这样带有品牌性质的案例。

1.官网的任务:满足理性诉求和情感诉求

官网最主要的目的是让用户认可并下载,达到这个目的的方式一般包含两方面:首先是满足用户的理性诉求,告诉他们,这个软件有哪些优秀的功能;另外是满足用户的情感诉求,直抵人心,让用户从对功能的认可,上升到对品牌的认可,从而达到目的。

理性诉求是比较容易在设计上表现的,要满足用户的情感诉求,就需要有些情怀了。那么在交互设计师的职位上,如何影响“情怀”的因素呢?

2.情怀的直观表达——品牌文案

所谓情怀,就是“怀有某种情感的心境”。设计与产品合作的过程中,有些工作内容并不存在硬性的界定,在这里我们认为,与流程线框相比,品牌slogan或是宣传文案,同样是产品设计解决问题的元素,如果能在产品理念和宣传文案确认的阶段就融入产品团队产生影响,之后的设计表达也会更完整顺畅。