交互设计师设计APP(二)—多设备的差异

通过了解分辨率确定原型大小,接下来了解不同设备的区别,借助交互设计师的经验去设计APP。结合自身工作思考,并参考《多设备时代的UI设计法则》、《贴心设计》,对比下较常见的设备:手机-pad-pc-自助大屏终端。写作起点是以设计师的身份去提问,然后解答。如有偏颇或补充欢迎探讨。

一、Question

1.PC端低保真不需要画状态栏注重网站功能即可,但是手机原型通常都标明手机电量、接入网络等系统状态是为什么?不同终端低保真都有哪些必备的界面元素?

2.手机、Pad、PC、自助终端的特点是什么?对界面设计有什么影响?

二、Answer

1、首先不同设备的区别

多设备的区别

2、关于设备特点解读

——设备归属决定了产品的姿态与连接属性。手机个人独享,pad家庭共享,自助机公众使用,该属性决定了产品的私密姿态,比如保存密码,个人手机默认记住密码,pad、pc是可选项,而自助机不该有。手机端会安装各类应用,不同app可以互享账号,比如已登录微信可以使用微信账号登录摩拜。PC端也可以互通,但自助机是公共设备大多为单一任务处理获取不到相关信息,无需获取也不能获取。自助机曝露在公众场合,人们害怕在陌生人或朋友面前表现的愚蠢,选择时的犹豫不确定会成倍的放大导致焦虑。所以在界面设计时更需要注意界面引导或更应该简洁处理。

——屏幕大小决定了信息量,信息层级。体现在功能、导航结构、界面层级不同。如PC端首页可以展示导航+内容,让用户一眼看出该系统有的功能。手机端则默认则是内容+页尾导航侧重主要内容,其他内容在下一层级展示更多让用户探索,必要的时候推荐到PC端网站处理。

——传感器、拍照等功能决定了交互灵活性。有传感器能感知到客户状态主动推送功能,如gps定位到某地则推送相关的商圈信息。外卖地图导航系统可以自动定位无需文字输入。手机pad还可以拍照自动识别银行卡号,无需输入,pc端只能输入数字,自助机有外延设备读取身份证、卡等操作。

——携带属性决定了产品使用场景。手机作为手持设备在商场试衣间、跑步、排队候车、地铁等多场景都能顺畅使用。pad、PC相对固定,自助大屏固定地点。同时作为手持设备手机和pad需要考虑横屏、竖屏情况。不同的使用场景考虑考虑异常情况不同。

——输入属性影响着产品复杂性?手机胖手指效应明显文字输入时误触概率高需有意识判断正确性,语音输入解决了部分场景下输入不易问题。pc有键盘设备输入便捷,可以处理复杂任务。自助机虚拟键盘大但是自助办理业务即来即走的属性让用户很难熟悉虚拟键盘的位置难以快速输入,应尽量减少输入型设计让任务尽量简单。

——网络接入方式不同需考虑加载速度与网络收费问题,手机接入移动4G网络速度还可以,但按流量收费让用户对图片与视频有顾忌,很多人性化的app也有对应的策略,如提醒所处网络环境询问是否继续爆发,在4G环境下需要点击才播放,在4G服务下显示文件大小让用户自主选择是否观看。WiFi接入的PC、自助机(部分自助机是企业内网)就无需考虑网络问题。又如产品图片太大是否影响加载速度,是否流量过高客户不使用,都是设计师应该考虑的问题。

——目前手机、pad、pc的技术成熟灵敏度较好,但大屏自助机很多要用尖硬物体按才奏效灵敏度较差,滑动效果不好所以设计界面不宜太长影响使用。

2、关于界面元素、操作方式、导航、界面层级的拓展解读,每一项都是需要细细研究的问题,此处简单聊一下,有机会再补充系列文章。

——回答问题一、原型本意为逼真,手机和pad显示状态栏屏幕小模拟真实设备时更应寸寸计较。不同终端要显示的必备元素始于需求,手机、pad、pc都数个人需要关注电量、网络等信息有异常时需处理显示这类信息,而自助终端是商家管理用户是不关注的电量等信息的,能用就行。又如logo标识用户处于哪,同时供商家营造品牌感。PC端和自助机在首页显示logo ,手机则在启动页显示应用内为节省空间不重复显示。界面元素始于需求有需求就设计对应的功能,手机padpc都有相应的规范而自助机还处于自由发挥的阶段。所以面对自助机设计师就秉持简洁的原则言之有物随心所欲的放飞吧。

——关于操作方式应尽量使用通用手势,避免用户重新学习你的新手势,iOS、Android都有比较成熟的规范遵守即可。如下为书中的鼠标与手指对比,移动端手指按下数量多且会遮挡屏幕对应的意外触发的情况更多,PC端大屏自助屏幕大遮挡小误触情况相对少。 

《贴心设计》鼠标与手指比较

——关于导航与信息层级导航,其作用是指路,告诉用户在哪,能看到什么,还可以去哪。如果时间空间充足可以一次显示所有内容,反之就要拆解信息。信息的拆解运用简约4策略:删除、分组、隐藏、转移,减少信息量并将信息分类,充分运用渐进暴露原则,在适当的时候通过手势或操作场景隐藏工具栏或搜索栏。如知乎文章浏览页,默认会显示搜索工具栏,当向下滑动时则隐藏搜索区域。因用户注意力有限,不同的设备都需要遵循简单原则,给内容以最大的尊重,而移动端这件事要做到极致。

哇哈哈哈,整理完这些终于有底气面对我的架构师、SA、开发工程师们啦。如果小伙伴们还有疑问的话,请留言我会尽量查资料帮忙解答的。

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

推荐阅读更多精彩内容