• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 网易资深高手:交互设计师必备的9种能力

网易资深高手:交互设计师必备的9种能力

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互设计,用户体验,经验分享,网易UEDC等相关知识,希望在学习及工作中可以帮助到您

网易UEDC – 杨杰 :?有好多交互新人或尚未跨进交互设计大门的同学,会经常问的一个问题:交互设计师需要具备怎样的技能和能力?

本文将以「小饼」一个交互新人的成长过程以及工作中遇到的问题,来跟大家分享交互设计师必备的9种能力。

1. 产品意识

设计师有时候会收到用户的反馈,如:哎?你们易信的颜色是不是太亮了,能不能调整一下?

这时候作为交互新人的小饼,他的第一反应是:哦,好吧,既然用户有这样的反馈,那么我们就去调整方案。

首先,要思考一下用户的这些反馈或需求,是「真需求」还是「伪需求」?

福特曾经说过:如果我最初问消费者他们想要什么,他们会告诉我:要一匹更快的马!

每位设计师应该都知道,当用户表示需要「要一匹更快的马」时,他真实的想法其实要一个更快的交通工具。所以当我们面对用户的反馈时,要去思考需求的真伪。我们不可能一味满足用户的需求而不顾产品目标,所以需要在用户需求和产品目标中找到平衡点。最近在设计某个产品支付系统的退款功能,从产品角度来说不希望过多用户选择退款。那么最终的设计方案是,将退款的入口做的很隐蔽,而且流程比较繁琐(没错,就是故意的)。这样就满足双方需求了,达到产品目标和用户需求的平衡。所以交互设计师要有产品意识,不能只去满足用户,也要顾虑到产品和商业目标。

2. 以用户为中心

小饼同学的设计方案常常会受到用户的一些质疑:

  • 哎?这个APP到底怎么来用啊?怎么我完全看不懂该如何去操作?
  • 这个提示为什么会在这里?
  • 为啥分享结束后,不能自动返回到之前的页面?还傻傻地留在原来的页面?

这些是交互设计师经常遇到的问题,没有以用户为中心去思考和设计。

什么叫以用户为中心的设计方法?具体讲,就是我们从需求产出,到整个需求的细分,以及我们方案的产出和验证都是围绕着以用户为中心的。如果需要分析用户,我们就会走到用户的生活场景里去看他们怎么使用产品的。

比如,站在用户的身后,从他们的视角去观察如何使用。同样我们也会对用户进行一些细分,对人群进行组合或抽离出某个具体概念,这叫「用户画像」。

当设计师以用户为中心的方法进行设计时,往往会要考虑三件事情:

  • 用户是谁?
  • 他是在什么场景下去使用产品?
  • 他希望通过产品去解决什么问题?

3. 逻辑思维能力

随着小饼的不断成长,他开始接受更多更复杂的任务。有一天,老大给他了一个大活:哎?小饼啊,我们云阅读的支付成功率很低,你研究下如何优化?

那怎么去优化呢?小饼一头雾水。

作为一名交互设计师,当我们的老板向我们提出「最近的支付率很低」或者「我们的用户量很低」,怎样去优化它?

这里就涉及到我们的逻辑分析能力。网易云阅读支付环节的整个流程,我们称之为「交互流程图」,会把用户在使用产品的每个接触点都列举出来,然后再去分析用户在每个接触点都会遇到怎样的问题。

在这个案例我们进行了如下三种处理:

  • 删除:删除「web结算页面」,之前的页面已经有了,再次出现属于重复信息。
  • 合并:「购买结算页面」,将统一操作流程的页面合并在一起,去除不必要的页面。再看余额充值的环节,「确认充值」、「选择充值方式」、「充值金额」这三个流程都可以放到一个页面里,以减少用户在页面间的跳转,避免在此流程中造成用户流失。
  • 修改:「购买成功」页面提供更好的反馈体验通过砍掉不必要、合并相同和修改体验不好的页面,这样整个流程的优化完,支付比例有了非常显著的提升。

关于逻辑分析能力,不仅体现在我们对于交互流程和业务流程上的梳理,同时也体现在我们对数据的解读和分析上。上面的例子中,我们通过「数据漏斗模型」来分析每个环节用户的流失情况,然后针对性地提出解决方案。

4. 页面排版能力

作为交互新人难免会收到同事的反馈建议,比如:

  • 产品同学会说: 哎?小饼同学,你这块的逻辑不太对啊,这些信息明明是一起的,为什么你设计方案里看起来不像是一起的呢?
  • 视觉同学会说:哎呀,交互设计师,为什么你们的交互一定要做得这么丑,难道就不能做得漂亮一点么?

所以交互设计师需要怎样的排版设计能力呢?线框图是交互设计师的主要产出物,它包含了所有页面流程和单页面的信息布局。

就像如下图所示,如果欠缺思考的随意布局可能给下游的同学造成很大的困扰。比如,没有认真对待信息间距而造成的误导,错误的提示色也会给视觉同学造成干扰。所以建议交互设计师通过简单的黑白灰样式来表达页面优先级以及重要程度的区分。如果觉得某个信息很重要,可以颜色重一点,也可区域更大一些。这些格式塔心理学的知识对我们页面排版能力的提升很重要。

设计师常用排版的原则:

  • 隐藏:如果有很多信息,但是用户又不太常见,那么可以把它隐藏起来,就「众筹红包」右上角这里的问号,这里是关于众筹红包的解释说明,对于用户而言是不需要经常去关注的,所以把它隐藏起来。
  • 删除:一些额外的信息对整个页面是不太重要的,就可以把它删除掉。
  • 合并&组织:如果很多信息的逻辑关系是在一起的,我们可以把它们合并或者进行重新组织,把它们放得近一点,也可以把它们打乱再重新去整合。

5. 细节处理能力

小饼同学又遇到了问题。

boss:哎?你这个阅后即焚的方案,为什么细节漏掉那么多!

小饼一头雾水:哎?我并没有觉得我遗漏任何细节啊,那不就是我单独的一个发送方把页面发给另一方,对方看完之后就消失掉了。就这么简单的一个方案。

上图是小饼同学做的交互方案。上面是发起方,有一个「阅后即焚」的功能,点击之后发给另外一方,这时接受方就会看到这条信息,并点击进行去查看。仔细看一下,他到底遗漏了那些信息?

  • 发送方如何选择图片,单张还是多张?
  • 发送方发送后,自己是否能够查看,可以看几次?
  • 接收方查看消息时,是否有时间和次数限制?
  • 接收方查看消息中,是否有防止截屏的机制?

6. 用户研究能力

有一天突然被老大问到: 你的方案到底靠不靠谱,你有没有验证过?

小饼突然间就蒙圈了:哎?没有验证过。我觉得挺好的。

老板暴跳如雷:你觉得就可以了吗?拿出证据来!

这里说的的验证或证据,就是通过用户研究来验证设计方案。那么用户研究有什么好处呢?

  • 低成本:在线上前的快速验证,避免提升开发成本和对用户体验的伤害。
  • 高效:不需要上线版本,有时候几张纸面原型就能让用户体验,发现设计的问题。
  • 设计能力提升:通过用户的反馈来验证设计思路,培养和提升设计师的设计能力和自信心。
  • 简单高效的用户验证,往往能够把我们从设计困惑中解救出来。

举个例子,当初易信2.0改版时希望把主tab页面改成「发现」,但是碍于「过于同质」的压力,迟迟不肯做决定。后来当我们进行用户测试时,用户未觉得有什么不妥。有时候,设计师过于从自身角度去思考问题,而忽略真实用户的体验,设计师纠结的「设计洁癖」,对于真实用户而言也许并不重要,甚至都不会注意到。 初级设计师都会在纠结在抄袭与创新之间,都会经历三个阶段:

  • 为了借鉴而借鉴。
  • 为了避免借鉴而差异化设计。
  • 为了用户习惯而设计。

当我们不再关心是不是抄袭或者借鉴,而是关注产品能不能满足用户的使用场景时,才是回到设计师的「初心」了。

7. 沟通能力

随着设计师的一个不断成长,常会去跟产品沟通需求和方案,小饼又遇到了哪些难题呢:你这个方案太伤害用户体验了,可不可以不要这样做?

产品说:不可以的。这个方案是销售提出来的,我完全没有办法改变他们。

此时小饼作为设计师,就暴跳如雷地说:这么蛋疼的需求!我不做了!

我不做了,真的就能解决问题吗?设计师

您可能想查找下面的文章:

  • 交互设计和心理学之间的18条奇妙联系
  • Apple Watch 交互设计中四个全然不同以往的经验揭密
  • 资讯类产品阅读列表的交互设计思考与经验分享
  • 163邮箱登录框交互设计的改进经验与分享
  • 超全面!Android 应用与iOS 应用之间的设计差异对比
  • 超全面的设计异常情况和处理方式汇总
  • 以Apple Music为例,为你解读格式塔7大法则
  • 界面设计中,交互方式是选择滑动还是点击呢?
  • 新手交互设计师如何迅速成长?爱彼迎高手来教你!
  • 在开始 VUI 设计之前,你需要做些什么?

相关文章

  • 2017-08-06如何去掉内联样式 通过style属性定义的(element.style)
  • 2017-08-06新手建站入门教程 域名的解析与绑定
  • 2018-08-23专业科班方法!写给视觉设计师的印刷基本知识和技巧
  • 2018-08-23说点心里话!「QQ飞车×Vans随我造」项目背后的设计故事
  • 2018-08-23如何做好 Banner设计?我总结了这4类基础知识
  • 2018-08-23网易云音乐产品负责人:如何做好用户研究的?(下)
  • 2018-08-23腾讯实战案例!如何用服务设计打造未来银行?
  • 2018-08-23想成为UXD设计师?先学会这4件事!
  • 2018-08-23春节专题!App 设计系列之切图的命名规范与标注说明
  • 2017-08-22python 文件头的编码声明问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • APP授权设计:如何让用户不反感并同意授权
    • 让网站图片生成灰色效果的三种方法
    • 前端开发工程师和美工对于网站开发所掌握的知识的区别
    • 常用的几个单页应用程序网站分享
    • 交互基础小课堂!目标导向设计之“设计研究”
    • 风骚一点!在网页中玩转霓虹色的正确姿势
    • 网易设计师:超全面的交互规范设计流程
    • 超实用!信息架构基础知识科普手册
    • 学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!
    • 移动互联网时代:响应式网页设计已成为大势所趋

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有