在做交互设计时,你需要知道这几大定律

形式是跟随功能的,功能是满足用户需求的。尊重你的用户,让每个产品的细节都是合情合理的,然每一寸体验是“走心”的!


形式是跟随功能的,功能是满足用户需求的。尊重你的用户,让每个产品的细节都是合情合理的,然每一寸体验是“走心”的!

在做交互设计时,你需要知道这几大定律

在产品经理这个岗位上,不懂点儿交互设计,貌似就缺点儿什么似的。在我们生长的环境中,不乏有各种以大写U开头的缩写,交错呈现在每一个产品经理心中:

  • UI:User Interface 用户界面(也就是我们俗称的“射鸡师”)
  • UE or UX: User Experience 用户体验
  • IxD:Interaction design 交互设计(通常情况下,UE/UX+IxD=PM)

在此基础上,衍生了三类设计方式:

  • User Interface Design 用户界面设计
  • User Experience Design 用户体验设计
  • UCD:User Centered Design 以用户为中心的设计

在大型的公司,也许你还能分清每个U所代表的分工。然而在一般创业型公司,一个好的产品经理已经被默认认为应该具备所有这些大写U开头的素质。不同程度的掌握这些所谓的基本素质将成为你生存在创业公司的砝码。

既然为了做好产品经理,我们就必须得努力“get”到这些技能,给自己的产品经理生涯加分,那么既然是技能或者说是基本素质,我们是不是应该首先知道这些所谓的看似高大上的知识,他们的基本原理是什么?所谓的学科或者专业,能支撑他们的科学依据又有哪些呢?

交互设计之父的阿兰·库珀有一句名言:“除非有更好的选择,否则就遵从标准”。

1.Fitt’s Law/菲茨定律

在此不在累述基本原理,找度娘满屏都是!

启示:屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

举个栗子:下图是某职业在线教育平台,官网首页改版前后的截图对比(左图为改版前,右图为改版后),我们可以从对比图看出,改版后的首页把网站的边界区域利用的非常充分,通过边和角的优化,更加突出产品的核心定位及给用户传达的方向,即:”我们是一个在线教育平台,我们这里有很多好的课程,我们很专业….”。

在做交互设计时,你需要知道这几大定律

在做交互设计时,你需要知道这几大定律

2. Hick’s Law/席克定律

这个定律简单归纳一句就是:让复杂的东西变得简单,Don’t make me think! 

席克定律不适用的情况::在一个非常复杂的层次结构中进行分层选择;每个选项需要大量的阅读理解;

举些栗子:如果你本来就是一个内容丰富,层次结构很多的产品,譬如商品购买类。那么你所有的分类选项就只能合理分层并归纳选择,如京东、携程、去哪儿。那么这类产品的这部分功能就不太适合席克定律,同时当你的产品内容已经非常丰富了,一打开app就是茫茫多的内容,那么请别在用不太能立刻读懂的文字或者短语去表达你的选择及分类信息,徒增用户的阅读理解,如下图最右侧的截图:

在做交互设计时,你需要知道这几大定律

3. Tesler’s >Law/泰思勒定律

复杂性守恒定律。

启示:每一个过程都有其固有的复杂性,存在一个临界点,超过了这个临界点就不能再简化了,你只能将固有的复杂性从一个地方转移到另外一个地方。除了现在很多产品使用“查看更多”、“查看全部”、“查看详情”之类的文字,将更多的内容从用户的操作范围转移到另外一个地方以外。其实我们可以想到一个最为常见的栗子去支撑以上的定律,那就是ios相册选择图片:

在做交互设计时,你需要知道这几大定律

4. 7±2法则

启示:我们可以看到所有的底部导航模块,从未超过5个模块,所有的内容区块展示也从未超过5;我们的电话号码也是7位数字,不会超过9位数字或者小于5位数字。

在做交互设计时,你需要知道这几大定律

5. Others

在做交互设计时,你需要知道这几大定律

讲了这么多交互设计中的定律后,你是否已经在反复琢磨,原来我们很多时候做的产品功能都是有科学依据且都是有很严谨的总结的?当然所有的定律只是支撑你更加自信的实现产品体验的低层建筑。正所谓“经济基础对定上层建筑。”在产品经理这条路上,如果你想要得到满足感,生产超出用户预期的产品,那么你就一定先花时间“买”到这些定律,让它们成为你的财富,然后在实际工作中“拆”掉它们,做到“心中有时自然有,心中无时自然无。”

最后送给所有产品人er一句装逼的话:“形式是跟随功能的,功能是满足用户需求的。尊重你的用户,让每个产品的细节都是合情合理的,然每一寸体验是“走心”的!”

 

作者:权莉,微信昵称:Mandy权。一名快乐的产品经理!~

本文由 @权莉 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-20 11:30
下一篇 2017-05-20 13:26

相关推荐

  • 分享两个交互设计作品

    今天跟大家分享的是二两童靴的两个交互设计作品,第一个是平安保险产品配置后台交互设计,第二个是台州银行客户经理移动办公App交互设计,希望大家多多交流。如果你也有好的作品想在我是UE网上展示,可以加学习群15…

    2015-07-02
  • EVA「Flow」Living in the Future | Flow 正式上线

    吕骋说:“智能语音助手解决的是人机交互,但并没有解决人人交互,我认为,把人机交互和人人交互打通才是最重要的。” 为了保证最佳的视觉体验,我们特意制作了搜狗输入法的对应皮肤 大家在搜狗输入法的皮肤商店里,…

    交互设计 2015-09-11
  • 国外的视觉设计好在哪里?

    最近为了团队能做好产品首页设计,我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次(国内to B产品起步较晚,在设计方面的研究几乎空白),而这种差距和设计技法没有太多关系,更多的是对产品个性的把握和传达。

    2017-06-01
  • 巧用交互设计中的暗黑模式

    如何巧妙运用交互设计中的暗黑模式,我们需要更多的思考和学习。不要介意用户骂你流氓,那说明你流氓的不高明 有些操作非常容易就能达成,有些操作明却非要多出几个步骤;有的icon的位置按照设计规则与用户使用习惯…

    2015-12-02
  • 在设计功能时,怎样的交互才是合理的?

    或许在本文中,你不会得到所谓的干货。但小编相信,一旦你读完了,你的思想认知会更上一层的。具体想了解关于《从这四个点,正确完善地拆解一款 App》的,可以看下这篇文章,要从多角度去看文章去分析。

    2017-05-07
  • [PSD组件资源] iOS 10 GUI for Photoshop PSD源文件

    今天给大家推荐的是 iOS 10 GUI for Photoshop PSD ,ios交互设计规范,大小有266M,需要下载 PSD 源文件。

    2016-09-14
  • 为何设计师要学会做版本控制?

    XX项目视觉稿.PSD

    XX项目视觉稿新版.PSD

    XX项目视觉稿最新版.PSD

    未标题-1.PSD

    XX项目视觉稿最终版.PSD

    我已经不想做了.PSD

    XX项目视觉稿这个一定是最终版.PSD

    XX项目视觉稿最终的最终版.PSD

    这稿坚决不改了就这么着吧.PSD

    这个标题是凑字数的.PSD

    2017-05-24
  • 【UXRen原创】杀死转化率的 4 大 UX 错误

    作者:Sean Ellis   译者:吆喝科技   本文编译自 Sean Ellis 所撰写的《UX mistakes that are killing your conversions 》 ,作为资深交互设计师, Sean Ellis 谈论 UX 在转换率优化的重要性。Sean Ellis 是 Qual…

    交互专题 2017-08-07
  • 专业的网页风格指南应该如何制作?

    文案规范
    视觉指南

    配色方案,包括每种色彩的具体参数,以及其他可接受的色调
    字体和排版方案,包括每个部分的字体类型、尺寸、字重以及具体用法
    LOGO,包括它的样式、变体、尺寸以及位置的说明
    拼写、关键词的选择、文案的风格(包括按钮、社交媒体等)
    图片使用规范,包括色彩、裁剪规则和视觉表现方面的标准
    SEO信息,比如可选的标签和关键词
    栅格标准(主要用作网页排版和印刷)
    空间与留白方面的说明(设计的松紧度等)
    关键点的说明(团队成员可能会提出的问题或者有待澄清的点)

    在内容表述上不要限制太多,这毕竟是风格指南,重点是视觉上的引导,设计是核心;
    将相关、相联的条目整合到一起做快速指引:一个页面介绍色彩,在另外一个页面做排版的规范等等;
    用图片案例来展示界面应有的外观,而不要单纯用枯燥的文字来做介绍;
    提供可用的具体说明。比如配色方案中提供色彩的RGB或者CMYK的具体值,确保色彩的运用能够一致;
    将一部分的设计案例分解说明,确保每个元素的功能和使用规则都足够明晰;

    2017-05-22
  • 如何在Sketch中快速创建调色板?

    今天我将会教你如何在Sketch中快色的创建调色板。这是个很棒的技巧,是年前我从Marc Edwards那里学到的。首先我们先创建三个正方形,它们是可以被三整除。在我们的例子中,我们将先创建一个240pt高和240pt宽的正方形。我们将重命名这些图层为红色、绿色和蓝色。让我们将红色图层的填充改为#FF6161,绿色图层为#4F953B和蓝色的图层为#0076FF。选中这3个图层,然后按“A”快捷键来选择画板工具。我们现在从右边的检查器上...

    2018-04-17