交互设计日记02

作者: siyuyo | 来源:发表于2016-05-27 21:51 被阅读214次

    从体验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

    相关文章

      网友评论

        本文标题:交互设计日记02

        本文链接:https://www.haomeiwen.com/subject/iyaprttx.html