交互设计 |《匠心体验》

《匠心体验》是一本不错的案例集,我试着提炼一些交互设计框架。

交互展示

从元素的形式、内容和呈现方式三个方面来看。

元素的形式

我把它分为界面元素和硬件交互元素。

界面元素

界面元素有按钮、输入框、图片等。元素的基本属性有点击态可供性等。

可供性具体不解释了。要注意:

  • 有些元素有自然可供性(如图片,一些产品图片等很容易被认为可点击)
  • 要正确表达
  • 无可供性时可制造

没有正确表达可供性:图片、导航傻傻分不清。

图1.jpg

界面元素可进行组合成为模块。我能想到的有导航。导航有直接导航、汉堡导航等。但有时,也要想着避免和简化导航。

平板 App:Monoprix Courses

图2.jpg

一个反例:达美乐披萨 App
首页只有导航,迫使用户必须从一个选项开始。

图2-2.jpg

硬件交互元素

分为手势和传感器。

手势

最适宜的用法:符合语义学含义(如滑动移除)

特点:

  • 可发现性低
  • 容易忘记

因此最好应用于最重要、高频功能,便于用户习得。

一个矛盾需要权衡:惯用手势的语义学含义最重要功能矛盾

Instagram:

图3.jpg

传感器(运动、位置、环境等)

最适宜的用法:符合语义学含义

Boggle:

图4.jpg

Google Translate:

图4-1.jpg

摇一摇的坏处:

  • 误操作
  • 手机越来越重

最好应用于最重要、高频功能,便于用户习得。

总结一下,元素的两种分类方式:
界面/硬件交互
单一元素/组合

元素的内容

信息/数据

设计时注意考虑:

  • 突出性
  • 简洁性

元素的呈现方式

包括布局方式(空间上)、出现顺序(时间上)

主要找到的呈现方式有强化和暗示。

强化

  • 声音
  • 动画
  • 文字说明
  • 对比色

这里也有一个矛盾需要权衡。即强化 vs 入侵性。有强化作用的,往往入侵性更强,可能并不友好。

暗示

  • 语义学暗示(动画)

杂志 Courrier International:

图5.jpg
  • 露出一截的暗示(露出下一个产品/信息的部分)
  • 显示在背景的暗示

Houzz:暗示从第二张照片开始消失。

图5-1.jpg

用户、场景

同样的功能,在设计时需要考虑不同的用户、用户在不同时间点的操作。不同的场景。

用户的操作

刚刚进行的操作 vs 用户的目标

我们在设计时要去满足用户的目标、需求,也要考虑用户在不同时间历程上的操作。例如刚刚进行的操作,需要设计反馈。

世界报:

图6.jpg

满足需求的操作 vs 鼓励用户进行的操作

有些考虑如何满足需求,而有些时候,考虑如何在没有需求时鼓励用户操作。

用户的分类

第一次,很多次
很少用,经常用
新手、中间、专家

这些都会影响交互的设计。

场景的分类

正向场景 vs 约束场景

约束场景有:等待、报错/异常、广告

重点聊一下等待。

实际等待时间 vs 感受等待时间

这个概念挺重要,我们可以通过设计降低用户感受的等待时间。

什么时候等待时间会格外漫长呢?

  • 搜寻重大、敏感的信息时:阅读恋人的回信、打开重要文件等。
  • 任务本身具有时间压力,活动具有时间限制:为持续时间短的场景拍摄照片、录制声音、记下掠过心头却又容易忘记的想法。
  • 使用环境压力大:尤其在户外,或环境不够安全,或希望保持一定私密性,如在课堂上、餐桌上、开会时。

那么可以做些什么呢?

  • 预加载
  • 展示进程
  • 适应 app 的: 游戏类加载时显示 tips / 新闻类加载时显示警句

Yummly:

图7.jpg

不要做:

  • 启动画面(启动画面像挡在用户面前的一堵高墙)
  • 启动画面+游戏
  • 启动画面+广告

原则(认知)

这里介绍一些设计时的原则,或者在设计时需要平衡的部分,偏认知层面考量。

限制(用户感受到的)时间堆积

比如点击后如果去到不同页面会让用户觉得漫长、乏味。
可以做浮层,在背景中暗示用户可以随时回到原来界面。

我们甚至可以假设,用户可能敢冒更大风险去浏览自己可能不喜欢的内容,因为他知道返回原来页面或去往其他页面的操作十分便捷。

要说明、引导 vs 没人看说明,要一用就会

前者如有些 icon 不如文字+ icon。有些手势需要解释。
这里的原则是在保证用户理解度、无歧义的基础上尽可能减少认知负担。

简洁 vs 不完整、受限制、贫乏

追求简洁,但不可以后者。

效率 vs 价值

提高效率的方式:

  • 快捷方式
  • 简化数据输入
  • 减少步骤
  • 利用硬件交互元素(扫码识别卡号,代替输入)
  • 扩大可触控区域
  • 尊重习惯:惯用的图标、手势

扩大可触控区域:

图8.jpg

但也要考虑对效率的追求,是否伤害了用户价值。

Messages:

图9.jpg

保护用户 vs 打扰用户

例如有些删除操作,为了避免误操作,而设置的过于冗长。
再如,我们需要给予反馈,而不是强迫确认。

Allocine:


图10.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343