交互设计日记02

从体验wwf-together,看现在智能手机有哪些可应用的交互方式。

WWF_Together欢迎页.jpg

前几周apple store推荐了这个app.所以就下载来看了看,发现这个app有很多新的交互方式,图片质量也很高,所以花了一两个小时认真地体验了一下这个app。

下面我将这个app使用过的交互方式整理出来,并结合一些相关的应用来进行补充介绍。

** 整理方法**:
在体验app时做下记录,将我认为有一定设计感的以及创新性的细节都记录下来(当然还可以顺带记录下在体验的时候发现的不足之处),之后对这些小点进行分类和概括。 这里我分为三类,包括:

1.结合硬件比较新颖合适的互动形式;

2.界面设计;

3.展示和呈现信息的方式;

体验时的记录

**现在我按照这三个类别来一一介绍:
**
一.交互方式上;
1、三维模型旋转查看。


可转动的“折纸”地球

三维模型呈现信息的形式,现已有较多的应用。首先是因为三维图像在外观上看起来具象有趣,同时用户进行拖动点击等操作,结合一些视觉和听觉上的反馈,这种呈现形式十分吸引用户。
一些教育类的应用,比如“卜石”,就是将一个山体模型作为主界面(导航图),直观的展示了玉石从生成,雕琢历史,品类等方面的内容分类。其关于玉石形成的历史也是用3d模型显示地质结构,十分生动。


卜石主页面

玉石形成过程中,不同时期的地质构造

像“明清家具欣赏”,“榫卯”等app还可以实现三维图像的拆解,将部件构造拆散重装等。我猜测,像卜石的主界面以及玉石欣赏那种可以旋转查看的,应该是需要建模之后实时预览;而其它的不能旋转拖动的,应该就是建模之后,将不同角度的内容导出序列祯后进行播放。
还有一些视觉上做的比较好的游戏比如walkr,则讨巧的使用了伪3d效果。
walkr的游戏界面

2.让用户通过对横纵轴,圆盘,地图等图形进行操作,来自主控制阅读的时间和进程。

用户通过转动黑点位置,试听不同分贝的声音
转动时间表,模拟时间流逝的过程
拖动横轴,查看不同年份的logo

3.结合手机硬件功能进行设计-比如拍照摄像,声音采集,震动和方位监测,速度感应等。
1)摄像头的多种玩法。
a)实时调用视频进行对照观看。
如图所示,在同一个画面的对比,调用两次视频,在其中一个视频上添加了灰度层。让用户马上知道在黑夜环境里,不同的视觉感知有何差异。

对比观看

b)拍照+贴纸(马上给你增强现实感😋)
瓶子里有一只鲨鱼

c)借用用户将摄像头等同于自己的眼睛的心理,模拟观看时的角度和活动方式。(不过这里并没有使用摄像头相关的数据,而是用手机螺旋仪来分析用户的转动和偏转的动作,这样就可以模拟用户在不同的视角进行观看了。后面的全景照片,模拟海龟潜水等功能也是同理。)

体验企鹅视角

通过螺旋仪捕捉手机倾斜角度,转动企鹅身体,了解企鹅如何在海底进行伪装。

通过螺旋仪捕捉手机倾斜角度,体验企鹅潜水的能力

2)声音采集与调用
通过调用麦克风功能,收集用户发出的声音,根据用户声音的分贝数给予不同的视觉反馈。在鲸鱼这部分,发出的声音越大,画面中出现的鱼就越多。
温馨小提示:app里面有个“声音小彩蛋”-每个蓝色的动物icon点击之后都是有声音的哟。

调用麦克风功能

用户发出声音后出现

3)手机震动频率,点触次数,速度距离追踪。
这里都结合动物的特性,比如蝴蝶扇动翅膀的频率高,雪豹跳跃的距离远,美洲虎的奔跑速度快等,收集用户数据,再进行比对,让用户对这些动物的身体数据有一个更具象的认识。之后再进行一些说明。


点触次数计算

速度追踪

4)全景照片探索环境(通过螺旋仪监测用户方位,调整全景地图)


IMG_2829.PNG

二.界面上(包含动态与视觉设计):
1.合理的图文关系
2.良好的操作体验(快速导航,返回,重做,疑问,及时反馈等)
3.结合现实物理性质和用户心理的设计。
物理性:app模拟了用户在物理世界的行为方式,比如让砍掉遮住字的竹子,拨开挡住视线的冰块,涂抹掉面前的图层看到文字等等。 在对于动物的讲解时的呈现方式也是如此,比如设计犀牛的交互时,主要抓住了犀牛定时驱赶蚊虫的习性;设计猩猩的交互时,抓住了猩猩会恐吓陌生人的行为特征。
游戏性:使用了一些小游戏调动用户进行相关学习。比如鲨鱼种类匹配就是采用了水果机的游戏方式。通过简单小游戏让用户获取知识;还有一些竞赛pk的小游戏,通过收集用户相关的数据与动物进行比对,然后鼓励用户分享,传播。

三.展示与呈现信息上:
1.数据可视化:突出重点+统一图形化+标签化
突出重点指的是,只呈现最关键的信息。
2.服务于阅读:有趣的功能的增加最终都要服务于阅读和获取信息。
3.多种媒介的使用:声音,照片,全景照片,影片等等
4.统一的视觉形式:纸张和折纸形式。整个app的翻页切换,转场以及界面元素都是采用了折纸的形式。所有的细节都贯穿始终。让我想起了material design的设计理念。
关于material design这篇文章写的很好,推荐大家看一下: https://www.zhihu.com/question/24276657
5.动态设计里的仿生设计:
app里面有一个点特别打动我,就是讲熊猫宝宝出生后要经过六周的时间才能睁开眼睛,所以设计师设计了用户转动时间表后有一个转场衔接熊猫宝宝的图像,这个转场模拟了熊猫宝宝第一次睁眼的动作!我当时就觉得,这个设计师一定是有情怀的人呀!!

猴,以上就是我对这个app的各种歌颂赞扬。那我现在来说说它的不足。(其实也不多)
1.二次阅读不方便,每一次阅读都被要求完成当页的指定动作,却不能直接到结果页。
2.有些游戏动作会造成误操作,比如涂抹的时候,要求整个屏幕都要涂抹,但是在边缘拖动的时候,很容易误操作成左右切换。
3.同样的功能点有时候操作有反馈内容,有时候又没有。没有统一的操作规范。
4.中文版排版有些问题。

最后,十分建议大家没事可以去体验一下这个app哟。

以下是一个小小补充,主要是整理了一下现在智能手机的硬件功能,作为我们设计交互行为的基础条件。(随意整理,并不完全准确,欢迎大家补充指正)
1.环境光&距离传感器孔
2.充电指示灯(呼吸灯)
3.听筒孔
4.喇叭box,扬声器
5.微机电陀螺仪(MEMS):捕捉用户的转动和偏转的动作
6.感应模块:湿度,光度,距离,声音,气压,指纹,压力等
7.nfc模块:Near Field Communication 短距离数据传输
8.蓝牙模块
9.配合无线射频技术(条形二维码)
10.指纹识别模块
11.3d touch
12.前cam和后cam-二维码识别;增强现实等
13.红外线
14.手电筒
15.震动马达(taptic engine):
haptics engine 线性反馈式马达(从视听扩散到触觉)
根据不同场景调整工作方式,用户在不同位置,场合,时间感受到不同的震感。
16.触摸屏:Multi-touch

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

推荐阅读更多精彩内容