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

相关推荐

  • 网络心理学与用户体验:如何使用户爱上我们的产品?

    什么是网络心理学?网络心理学(Cyberpsychology)是研究人与科技交互的背景下人们的心理与行为的新兴学科。它关注网络世界以及网络对人们行为产生的影响。近年来,网络心理学逐渐脱离其他研究人类行为的学科(如社会心理学),形成了自己专门的心理学研究领域。了解来自这个新领域的研究可以帮助设计人员更准确地预测人类在使用不同技术时会如何反应。因此,在思考如何使用户爱上我们的产品时,了解网络心理学是一个非常有用的手段。通过更好地理解用户与技...

    2018-02-23
  • 智能语音交互设计 1 — 总览篇

    大家好,从本周开始会进行Conversational AI Design Newsletter编写。希望把一些现有的语音交互的研究成果和一些关于Conversational AI的方法收集起来分享给大家。source: Pinterest第一篇 — 总览篇语音助手(Voice Assistant)主要由几种重要的技术组成:自动语音识别系统(ASR),自然语言处理(NLU),和机器学习(Machine Learning)。ASR类似于我们...

    2018-02-05
  • 绘制用户体验

    在今年的UX Weeks大会上,Jim Kalbach组织了一场Mapping Experience的工作坊,提出在产品和服务之间关系日益密切的今天,如何形成一个服务生态系统,是商业竞争中的重点。其实阿里巴巴集团在早前就提出了“商业生态”这个概念,但是到底应该如何做?Jim提出:想要在竞争中胜出,其中非常重要的,就是必须清楚的了解自己提供的各种产品和服务是如何相互作用的,以及是怎样在用户的生活中发生影响的。

    2017-05-16
  • 常见的登录交互方式

    现在市场上面的APP种类繁多,而登录注册的方式也有很多,下文就简单来分析一下各种登录的交互方式,谈谈自己对这些方式的见解。 1.账户密码输入型 首先最常见的就是输入账号密码型的,这种交互方式可以在注册时就获…

    2016-03-23
  • App界面设计风格

    设计风格的配色除了要注意男女性的喜好差别,还应该重视通过冷暖色彩+明暗亮度搭配表现给用户的印象和心理感受。详见《色彩在移动APP设计中的应用》

    2017-06-05
  • 设计基础|设计的7条心理学原则和定律

    译者注:上图的中文版金字塔并非原文内容,找来帮助大家理解。译者注(图中文字):
    费茨定律示例
    它是什么意思呢?费茨定律表明,你应当让按钮和其他界面元素足够大,因为用户点击小按钮十分困难。
    如果你有个小按钮,像【OK】这样,可以增加一些内边距,或者让它更宽:【 OK 】
    如果说网站上有个按钮,让整个按钮都能点击——而不仅仅是文字标签。
    而且,如果你把物体放在很远的地方,最好就要增大它的尺寸作为补偿。

    2017-05-24
  • 关于微交互动效的“六脉神剑”

    好的产品必备的两点要素:功能和细节设计。功能吸引用户使用你的产品,细节设计塑造产品的差异化,将你的用户留下。功能满足需求,细节打动人心。

    2017-05-22
  • 基于Axure的移动端APP产品设计规范

    文章结构:① 全局元素与控件设计规范 ② 全局注释规范 ③ 一些基本的产品设计原则一、全局控件元素设计规范我们经常会看到很多产品都有一个标志颜色,来增加产品的辨识度,例如淘宝的橙色,小黄车的黄色等。在产品设计过程中,为了保持视觉的统一性,通常会有一套配色方案,配色方案确定了产品的主色调和辅色调,所有的控件和元素都应用这一套配色来设计。除了配色还有,还有字体元素,按钮元素,以及其他控件元素等,产品设计开始就应该定义好这些基本规范,不仅能保...

    2018-03-04
  • 【整理】交互设计七大标准

    1交互设计七大标准(1) 菲茨定律(Fitts'Law)2交互设计七大标准(2) 希克法则(Hick’s Law)3交互设计七大标准(3) 神奇数字 7±2 法则4交互设计七大标准(4) The Law Of Proximity 接近法则5交互设计七大标准(5) 复杂性守恒定律6交互设计七大标准(6) 防错原则7交互设计七大标准(7) 奥卡姆剃刀定律(简单有效原理)请关注公众号“UX设计艺术中心”,学习更多转载此文,请署名原作者及来自微...

    2018-03-15
  • 电梯按钮的交互设计

    开始注意和观察电梯的按钮面板,是因为觉察到自己因常乘的两部电梯设计细节方面的种种不同而陷入了混乱。电梯常常会和自己"想的不一样",即预设的或已建立的心理模型失效了,我们不得不重新审视电梯的操作面板,重新建立心理模型,找到对应的按钮。如果日常常搭乘几部电梯,它们之间的操作规则和心理模型还不一样的话,一是容易让人混乱,二则给人增加了记忆负担,实在是很麻烦。觉得这一小块可操作区域很有趣很值得分析之后,好奇之下找了不少图进行研究,五花八门的设计...

    2018-02-06