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

近万字干货!可能是最全面的交互基础知识总结

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

本文主要包含交互设计,基础知识等相关知识,郗鉴希望在学习及工作中可以帮助到您

本文堪称设计师必备的交互基础知识大全,无论你是新手还是工作多年,如果不是专业的交互设计师,对交互不够熟悉的,看这篇就完全够了。

一、交互设计是什么?

交互设计 Interaction Design 也被成为 IXD。交互设计建立起了人与计算机便捷沟通的通道,它的目标是创造可用性和用户体验俱佳的产品。作为 UI设计师,我们在工作之中经常会对接交互设计师和产品经理,他们具有丰富的交互知识和经验。那是不是我们作为 UI设计师,就只需要专心做好视觉层面的工作而不需要了解交互设计了呢?当然不是,在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好,视觉设计师是交互设计中非常重要的角色。

二、用户体验

在工作中经常听到 UED(用户体验设计)和 UCD(以用户为中心的设计),可见互联网行业非常重视用户体验,而用户体验绝不仅仅是要样子好看。有些设计师只关注视觉层面,认为产品战略等用户体验维度和自己的设计无关,那么就会和产品经理等角色处于不同的世界了。「他们为什么要我这么改?」、「为什么这里文字要浅一点?」有时不理解对方的思考角度就会造成争执。用户体验(User Experience)是用户使用产品的心理和感受,用户体验体现了产品设计以人为本的设计精神。其实早在互联网出现之前就有「顾客先点鸡就先有鸡」、「顾客就是上帝」这种说法,并且西方很多大公司如施乐、联合利华等大公司早在互联网行业出现之前就已经开始进行研究用户体验了,可见用户体验对所有产品是多么的重要。但是让人摸不着头脑的是,用户体验有时非常地主观。因为用户体验背后影响用户的因素有人的喜好、情感、印象、心理反应等,有些人明明有摩拜却要走很远找 OFO,也有人只吃肯德基而不吃麦当劳。这些选择并不是优胜劣汰,而是有背后的原因的。要想让我们的产品被人喜欢,我们需要研究用户。

三、用户研究七种方法

但用户可能是几百万人呢!我们面对这样抽象的群体然后告诉自己要以他们为中心设计这多么抽象啊。这么多用户甚至有时用户自己的声音也是矛盾的。我们到底怎么样了解用户的心声呢?

1. 用户画像

根据产品的调性和用户群体,用户研究团队可以设计出一个用户的模型,这种研究的方式被称为用户画像。用户画像是由带有特征的标签组成的,通过这个标签我们可以更好地理解谁在使用我们的产品。用户画像建立后,每个功能可以完成自己的用户故事:用户在什么场景下需要这个功能。这样,我们所设计的功能就会更接近用户实际的需要。

比如我们现在要设计一个女装购物应用,那么我们可以做这个用户画像:小美,在北京国贸 CBD 上班,21岁,收入8000,喜欢淘宝购物和电视购物。使用我们产品的目的是为了寻找正品时尚大牌服装进行网购。

  • 小美因为刚毕业所以一方面喜欢大牌一方面又资金短缺(启发:我们的产品是不是要解决这两个痛点?)
  • 小美是时尚OL,审美很高,不喜欢俗气的设计。(启发:界面设计是否考虑不要使用粉粉嫩嫩的颜色而使用大牌的黑白色?)。

看,即使小美并不真实存在,但是她指引了我们的产品设计。接下来,我们还可以给小美增加一个头像,在做设计时我们想象这个人就是真实存在的用户,她会对我们的设计有什么看法。当我们完成用户画像之后,还可以接着设计用户故事:小美经常需要在工作场合穿符合工作气质的衣服,也需要在约会时有晚礼服之类的服装,可是小美的收入有限,她眼光较高但是对价格过高的服装无法承担,她使用我们的 APP 就是为了寻找正品且价格适中的服装。那么,小美在哪里用我们的 APP 呢?这就要为小美继续设计一个用户使用场景了:小美在开会时可能会打开看看、在地铁里也会浏览、在清晨打开衣柜时也会浏览。基本来说是碎片时间,而且是有着装需求时。(启发:我们是不是需要把字号调大以适应地铁里颠簸的阅读环境?我们是不是需要设计省流量模式免得刚刚毕业的小美花一笔巨大的流量资费?)

△ 用户画像

2. 用户访谈

邀约用户来回答产品的相关问题,并记录作出后续分析。用户访谈有三种形式:结构式访谈(根据之前写好的问题结构)、半结构式访谈(一半根据问题一半讨论)、开放式访谈(较为深入地和用户交流,双方都有主动权来探讨)。用户访谈设置时要注意:用户不可以是互联网从业的专业人员、不可以提出诱导性问题、不要使用专业术语。用户访谈适合产品开发的全部过程。

3. 问卷调查

可分为纸质调查问卷、网络问卷调查。依据产品列出需要了解的问题,制成文档让用户回答。问卷调查是一种成本比较低的用户调查方法。问卷调查适合产品策划初期对目标人群的投放,另外注意一个问题最好收集10个问卷,也就是如果你有10个问题那么至少要收集100个问卷才是有效的。要知道不是所有人都愿意耐心地填写问卷,很可能敷衍了事的回答会扰乱我们的判断。

4. 焦点小组

焦点小组一般有6-12人组成,由一名专业人士主持,依照访谈提纲引导小组成员各抒己见,并记录分析。并且在焦点小组的房间里会有一扇单向玻璃窗,用户是看不到里面有谁的。而在里面坐着的通常是开发团队,他们可以清晰地看到用户是如何吐槽他们的产品的,但是他们没有权利直接和用户进行解释。焦点小组需要特殊的房间和设备,主持人也需要训练有素,焦点小组特别能够分析出用户在没有我们说明的情况下如何使用我们的产品和对产品的不满。

5. 可用性测试

通过筛选让不同用户群来对产品进行操作,同时观察人员在旁边观察并记录,可用性测试的要求是用户不可以是互联网从业者而应该是真实产品的用户群体。但是可用性测试一般要有一个可用的软件版本或者原型供人测试才可以,在软件开发的前期不适合用这个方法。

6. 眼动测试

使用特殊的设备眼动仪来追踪用户使用产品时眼睛聚焦在哪里,盲区是哪里。比如一个网站通过眼动测试可以知道用户的视觉会自动屏蔽网站的常见广告位置,这时如果希望提高广告的点击,就需要把广告位放置于用户聚焦时间较长的位置。眼动测试的设备比较专业,通常在小公司较难开展。

7. 用户反馈和大数据分析

根据市场提供的反馈和数据得出客观的判断和合理的推测。用户反馈也是用户研究的一个重点,用户反馈主要是用户通过产品的反馈入口主动向开发者提出的意见。

有了这些方法,我们就能更好地了解用户和接近用户了。但是要注意,用户研究也是有陷阱的。比如:填写问卷和参与调研的用户可能并不是核心用户;提交用户反馈的用户之外可能有更多沉默的用户等。总之用户研究是一个必要的手段,但是仍然需要产品团队来对产品的方向做出决断。

四、用户如何使用产品

1. 使用场景

刚才我们介绍了用户使用的场景是根据产品的功能和平台决定的。电脑的使用场景是正襟危坐,手持鼠标。而移动端则是随时随地使用,我们的用户可能在地铁里、在厕所里、在吃饭时、在上课中怕老师看到把手机藏在桌洞里、在工作中领导巡视后偷偷瞄、在辗转反侧睡不着的时候没有开灯地浏览等。这时我们要为用户考虑,如果他们在使用我们产品的各种场景中有什么需要,是不是需要省流量、是不是需要调整字号、是不是需要过滤蓝光、是不是需要护眼模式、是不是不方便看视频、是不是需要缓存视频、是不是界面目前单手不太友好、是不是扫二维码时需要个手电功能、是不是需要语音提醒、是不是需要清除访问记录。一个不考虑用户使用场景的产品一定是会遭到吐槽的。很久之前我听同事在吃饭时抱怨过「大爷的,也不搞个提示,早晨在地铁里用 4G 流量以为是在家用 WIFI,结果看了一集《甄嬛传》花了80块钱」、「哎?你是不是早晨开会时玩游戏了?你的比分都给我们推送了哈哈哈」。

△ 我的产品中的用户使用场景表格

2. 操作手势

网页设计所处的电脑端目前主要还是依靠鼠标点击来操作。鼠标点击的最小单位甚至可以是一像素。而移动端不太一样,移动端设备中我们使用手指来操作界面。一般来说,手指点触区域最小尺寸为7×7mm,拇指最小尺寸为9×9mm。也就是在我们@2x设计中为88px(或44pt)。这个神奇的88PX在移动端应用很广泛:很多表单单项的高度是88px、导航栏高度也是88px等等。那您可能会说,也不对吧,有些界面上的图标看上去没有88px啊。是的,但是那只是视觉,我们可以通过增加图标点击区域的方式(比如给60像素大小的图标左右增加22像素的透明区域)来让图标更好点击。千万在设计时不要把操作区域放得特别近,可以把所有点击区域用88px标记看是否有重叠的情况,避免点击一个图标时误点另一个图标。除了点击区域,移动端还可以利用各种手势来进行各种操作的设计。主要的手势有:

  • 单点触碰(Tap):点击用来选择一个元素,类似鼠标的左键,是最常用的手势。
  • 拖曳(Drag):点击某个元素然后拖拽进行移动,类似现实生活中移动物体的感觉。
  • 快速拖曳(Flick):速度很快的拖曳操作。
  • 滑动(Swipe):水平或垂直方向的滑动,比如翻阅相册和电子书翻阅的手势。

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

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

相关文章

  • 2017-08-06页面中防止缓存的解决方法
  • 2018-08-23收藏起来!设计师要经常问自己的100个问题
  • 2018-08-23设计到底有哪些价值?让谷歌设计Leader 来告诉你!
  • 2018-08-23人气好文!写给网页设计师的视觉设计基础手册
  • 2017-08-06CSS--overflow:hidden在项目实例中使用心得分享
  • 2018-08-23让APP中内容呈现更友好易用的5种常见导航设计模式
  • 2017-08-06网站前端性能优化之javascript和css篇
  • 2018-08-23「从硅谷回国,我没有任何犹豫」: 专访 Airbnb 中国设计经理 Vivian Wang
  • 2017-08-06html中Div与table的区别(各方面细节探讨)
  • 2018-08-23学会用这5个正确姿势阐述你的设计作品,轻轻松松一稿过!

文章分类

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

最近更新的内容

    • 实例解析!如何成为有交互和视觉思维的UI 设计师?
    • 这次圣诞活动的交互设计,居然踩了这么多坑!
    • 为什么「下拉刷新」能成为现象级的设计?
    • UCenter Home 站点添加统计代码
    • 我花了五个小时,完成了iOS 11新版App Store的交互探索
    • 中小团队来收!如何快速制作有效的UI设计规范?
    • 有哪些值得思考的用户体验现象?
    • 眼见不一定为实!设计中常见的 9 种视觉错觉!
    • 如何写好移动端产品文案?这儿有份超详细的规范指南
    • 腾讯出品!设计师辅技手册之项目同步管理法

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

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