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

相关推荐

  • 手机app开发交互设计的四大要素

    app开发中的交互设计是用户体验好坏的关键点,在开发手机app时,注重的应该是交互设计的效果。用户是交互设计的直接受益人,手机app怎样进行交互设计才能让用户舒心,在这里有四个要素需要把握。手机app开发交互设计在开发过程中是重中之重,这个环节一旦出现问题,用户的体验也会变得别扭难受。怎样进行交互设计,很多人都找不到其中的诀窍,其实只要把握四要素,一切就会变得比较简单。一、遵循平台规范的基本原则遵循平台规范的基本原则并不是说限制于设计规...

    2018-03-24
  • 聊聊动态效果在体验设计中的应用

    首先,为什么要动?可能你会想到以下几条理由:呵呵,你要这么想就完了。

    2017-05-22
  • 动态与富态

    一、动态:动画表达的设计应用 ”动态“的设计常常能使页面的呈现更加动感,有活力,富有吸引力。具体来说,”动态”的设计在产品应用中常用于以下几种情形: 1.1. 丰富内涵 先试试为这段产品介绍做设计: Dropbox可让…

    2015-10-08
  • 用户体验设计中最常见的误解

    UX Myths网站收集了很多关于用户体验设计中最常见的误解和解释了为什么他们不适用。现在将这些经验研究整理出来,为各位设计从业者做参考,避免依赖个人的主观经验来做判断。建议你阅读完之后,还是应该结合自身的经验来审视你的设计是否满足用户的需求。

    2017-05-25
  • PM的利器——流程图基础

    一、什么是流程图?流程(flow):一系列的逻辑关系(因果关系、时间先后、必要条件、输入输出),在特定的情境下满足特定用户的特定需要的总结。固化、变化。图(chart):形式表现;图形化、可视化;传播性、优化迭代性;二、为什么要画流程图?流程图:角色、流转、规则、顺序、输入、输出;流程图三、流程图有哪些?(1)设计草图:角色、任务、逻辑、输入输出(2)线框图、交互原型图:内容、布局、权重、交互手绘线框图sketch线框图(3)视觉图、U...

    2018-04-08
  • 影响网页内容的七种设计误区

    如果你的设计当中出现了这些问题,请不要担心。它们的解决方案并不复杂,通常也不需要经过复杂的重设计来完善,只需要进行适当的调整即可。

    2017-05-03
  • 交互设计就业前景怎么样?

    交互设计师/用户体验师 5年内22倍增长需求。在我几年前选择交互设计这个专业的时候还没有什么人知道是什么。还是蛮有趣的,就是想尽一切办法让用户满意。国内以前只有浙江大学才有这个专业,现在应该很多大学都有了…

    交互专题 2016-10-25
  • B2B vs. B2C 网站:关键用户体验差异

    尽管B2B网站和B2C网站有很多相似的地方,但B2B的客户却有着截然不同的需求。

    2017-05-14
  • Axure RP软件安装教程

    Axure RP各种版本软件安装教程及下载地址:链接:https://pan.baidu.com/s/1AUHDQmeQejc9OMg7t2gmzQ密码:n29o

    2018-04-29
  • 【干货】关于交互设计那点事儿

    交互设计作为现在的热门行业之一就业前景和薪资待遇都很好今天我们就来聊聊交互设计那点事儿先来看一下关于交互行业概览和工作机会。金融公司(Bloomberg,CapitalOne)科技公司(Google,Facebook,Microsoft,Tencent)设计公司(NASN,government,NGO)我们所了解以上这些大名鼎鼎的公司,都是需要很多交互设计师的。那么用户体验设计师、交互设计师、UI设计师有什么区别用户体验设计师,就是我们...

    2018-04-21