6个问题,带你全面了解交互设计

随着行业的发展,只会图形 UI 设计和只会交互设计的设计师职业生涯都会遇到瓶颈。1. 什么是交互设计
2. 当今UI 设计师的能力要求
3. 交互设计主要做什么工作内容
(1)产品UI框架设计
(2)产品UI风格设计

产品UI 框架选择
简单式(单一内容)
翻页式(多页内容)
宫格式(较多入口)
上导航
下导航(4-5大类+分支内容)
舵式
抽屉侧边栏(1个重点+其他次要内容)
隐藏式

4. 线框原型图绘制方法

方法一:黑白灰+色块
方法二:黑白灰+高保真图形
方法三:黑白灰+突出色+高保真图形

5. 交互流程图绘制
6. 动态交互原型设计


随着行业的发展,只会图形 UI 设计和只会交互设计的设计师职业生涯都会遇到瓶颈。

6个问题,带你全面了解交互设计

本文主要是以下6个问题的讲解~

1. 什么是交互设计

2. 当今UI 设计师的能力要求

3. 交互设计主要做什么工作内容

(1)产品UI框架设计

(2)产品UI风格设计

  1. 产品UI 框架选择
  2. 简单式(单一内容)
  3. 翻页式(多页内容)
  4. 宫格式(较多入口)
  5. 上导航
  6. 下导航(4-5大类+分支内容)
  7. 舵式
  8. 抽屉侧边栏(1个重点+其他次要内容)
  9. 隐藏式

4. 线框原型图绘制方法

  • 方法一:黑白灰+色块
  • 方法二:黑白灰+高保真图形
  • 方法三:黑白灰+突出色+高保真图形

5. 交互流程图绘制

6. 动态交互原型设计

我们一个个来看~

1. 什么是交互设计

可以简单理解为交互设计是偏向理性的设计,图形设计是偏向感性的设计。这两部分构成了我们常说的UI设计,user interface design.

6个问题,带你全面了解交互设计

UI设计为什么要包含理性的交互设计呢?这要从2007年移动互联网爆发说起,那时图形UI设计炫酷之风盛行,例如当时音乐播放器设计,都是这种模拟唱片或磁带的写实风。

6个问题,带你全面了解交互设计

6个问题,带你全面了解交互设计

但今天这些设计都被改掉了。其实好用的相册是方便用户更快索引照片。好用的音乐播放器不是模拟超写实图标,还不如歌词与音乐同步,甚至不如翻译英文歌词有价值。

6个问题,带你全面了解交互设计

所以,用户更需要解决实际问题的设计。

6个问题,带你全面了解交互设计

2、当今 UI 设计师的能力要求

6个问题,带你全面了解交互设计

随着行业的发展,只会图形UI 设计和只会交互设计的设计师职业生涯都会遇到瓶颈。

3、交互设计做什么

产品架构设计

也就是将众多的需求按照最终呈现的页面进行架构设计。

6个问题,带你全面了解交互设计

产品 UI 风格设计

我们以IOS为例子,你会发现一个平台是由多个系统控件组成的,不同控件解决不同的问题,这些控件组成了软件平台的UI操作风格。例如IOS和windows的UI操作风格就完全不同。

  1. 产品UI 框架选择
  2. 简单式(单一内容)
  3. 翻页式(多页内容)
  4. 宫格式(较多入口)
  5. 上导航
  6. 下导航(4-5大类+分支内容)
  7. 舵式
  8. 抽屉侧边栏(1个重点+其他次要内容)
  9. 隐藏式

4、线框原型图绘制方法

  • 黑白灰+色块
  • 黑白灰+高保真图形
  • 黑白灰+突出色+高保真图形

5、交互流程图绘制

交互设计是面向过程的设计,所以需要描述清楚产品整体使用流程及相应的情况。使用交互文档进行描述是很好的方式,交互文档将作为技术开发,测试及设计人员进行全面的界面设计的依据。

6个问题,带你全面了解交互设计

6、动态交互原型设计

为了更好的将产品的动态展示给Boss或者其它相关团队成员,可以用最简单的方式进行动画演示,让成员可以更快更好的理解产品的使用。

好~以上内容就是全部内容了~

 

作者:百度UE讲堂

来源:微信公众号【百度UE讲堂】

版权声明:人人都是产品经理尊重行业规范,所转载的文章都注明作者和来源,若标注有误,请联系主编QQ:419297645更改。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25237/

(0)
CatherineCatherine
上一篇 2017-05-11 03:14
下一篇 2017-05-11 05:08

相关推荐

  • 《用户体验要素》:一张图读懂用户体验五要素

    《用户体验要素》是一本讲产品的好书,作者为我们清晰地介绍了关于用户体验的五个要素,五个要素是按照产品的整个生命过程来描述的。产品设计五要素分别是:战略层、范围层、结构层、框架层、表现层。《用户体验要素》说这本书清晰,是因为五个要素很清楚,按逻辑步骤总结出来的。但,这也是这本书唯一清晰的地方了,因为,这本书在细节描述上还是很凌乱的。产品设计五要素对于读这本书而言,能够领会作者的思想就可以,不必要拘泥于具体的细节。原因有二:一是,这本书的细...

    2018-04-04
  • APP设计:那些打动人心的设计点(4)

    你好,这是2017年的第12篇文章。自从写了这个系列,每天除了吃饭睡觉工作,其余的时间都在用各种APP,观察各种产品。在同质化越来越严重的今天,这些产品的微交互,是用户喜欢或讨厌一个产品的重要原因,不容被忽视。

    2017-05-04
  • 如何输出一份合格的交互设计文档?

    做一件事之前一定要先想清楚做这件事的目的,为什么要做这件事,只有这样,才能万变不离其宗,不会变成为了做事而做事,这很可怕。拿交互设计文档来看,为什么要写交互设计文档,这是开始写之前要想清楚的。

    2017-05-15
  • HOW TO—撰写可用性测试报告

    在报告可用性测试结果时,首要关注的应当是本次测试的发现与改进建议,并且将测试的发现与建议按照严重等级划分优先级。其次,还应当包括测试计划和测试执行过程,当然不用面面俱到,但是加入部分细节内容可以帮助读者了解此次测试所使用的方法,方便其评判该报告的可信度。在报告中,尽量保持段落简短,多使用图表、短视频等方式来描述。

    2017-05-28
  • 浅析设计图表色彩的简单方式

    译者按:对色彩的研究通常要么太过随意缺乏逻辑,要不太过理论化难以理解,这篇文章用非常浅显易懂的方式,讲述了一个专门研究数据可视化的团队探寻图标色彩搭配的历程,给出有力的论证,并得出很棒的结论,非常值得一读。对色盲色弱来不够友好*:原文中问题一的标题是“Low Accessibility”,通常用形容来产品对残障人士的友好度不够,这一点在欧美国家经常作为需要重视的产品硬指标(也是由于他们的色盲色弱发病率比亚洲高很多)。因为在中文里没有简短精准的说法,所以我在写的是“对色盲色弱不够友好”。
    逻辑性较强的人*:原文的写法是“left-brained folks”,直译是左脑型的人。通常左脑型的人被认为逻辑严谨,右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用,所以我写的是“逻辑性较强的人”。

    2017-05-01
  • 埃森哲设计思维成就价值创新:从“外在美”到“内在美”

    作者:杨鹏(埃森哲数字设计与创新经理);田晖(埃森哲数字咨询服务总监);王曦(原埃森哲数字设计与创新顾问)   领先企业已经认识到,设计不仅仅停留在产品的 “外在美”,而应聚焦在更具商业价值的“内在美”。那…

    交互专题 2017-09-18
  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10
  • APPLE WATCH 中文手册:WatchKit使用iOS语言

    WatchKit应用扩展可以使用绝大多数iOS技术。由于应用扩展和应用还是有一些不同,因此某些技术的使用可能会受到限制,或者不受到推荐。下面是决定是否使用特定技术的准则: · 避免使用需要用户权限的技术,比如Core …

    2015-06-15
  • iOS App中数据加载的6种方式

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态。那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢?今天这篇文章,会介绍6种常见的加载模式设计,和3种减少等待感的具体手法,希望对追求极致体验的产品人有帮助。

    2017-06-02
  • 想成为高级交互设计师?这是我的5个经验总结

    Echo :交互设计师真正提高的标志是思维思想上的提高,而非专业技能的提高。

    2017-10-16