编者按:本文来自成都彩程设计的CTO肖轶翔「@yxshawn」,关注「iOS,人机交互,UED,音乐人,多媒体,哲学,科幻,电子,迷幻」。他在文中对iOS 应用和普通网站设计中止

了对比

,并提出了自己

的设计理念。

iOS APP体验设计不像互联网的体验设计那样,有一堆的办法

论和能够

“自创
”的案例。 目前除了苹果的<Human Interface Guidelines>和前Palm的<Zen of Palm>外,没有找到更好的设计哲学和办法

论。

事实上,即便

认真地研读了HIG和Zen of Palm,致使

是Oolon Colluphid的哲学巨作你也无法严厉
依照

Guideline设计出一款出色的APP。其缘由
,我得从程序猿和设计湿说起。

程序猿 vs 设计湿

最被思想处于上世纪初的人了解

的软件设计开发是由 1. 美工 2. 程序员 3. 项目经理 构成。我这里讲的设计湿不是美工!这是前提。由于
美工只关怀

好不美观
,他们简直

不关怀

(或者不懂)产品的易用性。

怎样
鉴别程序员和设计师呢? 你无法用会不会写代码来辨别

他们(毕竟很多设计师是会写编程的,例如彩程设计的设计师们,反之亦然),但是你却能够

用经过
他们平常
思索

方式来辨别

他们。

程序员: “哇!这个功用
好!我们能不能在我们的APP中加上呀?
” 这种场景常发作
在他们看到了一个很 “COOL” 很 “绚丽”的APP后常发出的慨叹

(或者心里的慨叹

)。

设计师答:“我们凭什么要加这个功用
呢?

程序员更倾向于关注功用
自身

,希望把一切
好的东西都加到自己

的作品中。例如,好的设计方式

,高效的算法,看似绚丽的特效。普通
程序员的作品有两类,第一类是功用
比北京的车子还要多,你需求
一本牛津字典一样厚的阐明

书才干
搞懂怎样
运用
。另一类有十分

绚丽的特效,界面飞来飞去,一出神
就以为自己

在耍杂技了。

设计师更倾向于关注产品整体,他们通常都有产品的功用
洁癖。他们通常会从摄影中找到共鸣: 一张好的照片有三个要素 1.有一个鲜明的主题。 2. 画面中的元素能够

快速地把观众的留意
力转向这个主题。3. 只需

一个主题,一切
有主题不相关的重点通通

砍掉。

不幸的是,很多iOS的开发者是从程序猿跳出来做的。 泪流满面地用咆哮

体高喊 “我们程序猿也终于能够

赚钱了!!!有木有!!!有木有!!!” , 于是他们做出来的东西能够

用下图扼要
地阐明

iOS App体验设计

没错!问题不在于功用
是不是足够的多,而是体验能否
足够的好,能否
能处置

问题。而特别
在做iOS的APP设计的时分
,由于设备的自身

特性
直接决议
了设计完好

不同于网站的体验设计。

我们以为
,主要区别有以下三点:

1. 视觉焦点&操作焦点

iOS App体验设计

所谓视觉焦点和操作焦点的问题,我们能够

从传统的电脑运用
说起。 我们控制电脑通常是经过
鼠标, 手用鼠标控制屏幕的指针, 移动

到某个位置, 点击、双击、拖动等完成操作。 我们看到的是屏幕,操作的是鼠标。我们的视觉焦点是屏幕,操作焦点是鼠标。属于视觉焦点和操作焦点不同的类型。

而有触摸屏的设备和电脑最大的一个区别就是它们的视觉焦点和操作焦点是同一个点。 因而

,我们想翻开
一张图,只需求
用手点一下图。

视觉焦点和操作焦点同一的最大益处

就是十分

容易学习运用
这类设备。但是正是由于
两点同一,当我们在操作的时分
同时也会挡住焦点。

这一特性会影响到很多UI设计,例如:拿出你的iPhone,把手放在iPhone上,你会发现你的iPhone最大宽度也就4个手指的宽度。

iOS App体验设计

我们用圆圈代表被挡住的区域,其中绿色区域是安全

区域,代表我们心理上以为
一定能够

精确

地点到的区域;而黄色区域代表我们心理上会有点忐忑,不能肯定
能否
能点中的区域。例如某拍照软件的设计:

iOS App体验设计

没错,问题显而易见
。 从UI的设计上来看,假定

是个网页的话,视觉的确

没什么问题(当然,删除按钮放在修正
的旁边原本

就是愚笨
的做法,这一点就先不说了)。但是由于视觉焦点和操作焦点同一的缘由
,点击修正
就变得十分

艰难

与慌张
,何况旁边还是一个删除按钮。

2. 空间感知

iOS App体验设计

传统的互联网网页间的跳转,我们都熟知的是应用
链接。链接能够

在整个网站致使

是网站间恣意
跳转,点了链接后就进入了一个全新的空间。空间感知为网状的,没有头没有尾,在恣意
一个点经过
网址都能够

进入。

在移动

设备的应用程序设计中,进入APP通常都是一个固定的点,每个操作就带入另一个空间,假定

失去了空间感知,就像失去了地图,用户会很容易有迷失的觉得

而由于屏幕的大小等要素
,APP不能直接通知
用户空间是什么样的,但是能够

经过
各种伎俩

来给用户以暗示。例如:

Camera+中,两个主要的场景,一个是拍照,一个是照片管理。两者之间空间是上下的关系,当用户在拍照场景下点击相册时,界面会向上推进
显现
照片管理的场景。反之亦然。此时向用户暗示的场景如图所示:

iOS App体验设计

更复杂一些的空间暗示,如Reeder iPhone版。空间中的每个位置十分

明晰
,并且用动画的方式流利
地向用户暗示这种空间感。不只
如此,Reeder iPhone版的加星去星的空间感知不是上下左右,而是前后的关系。请自行置办

后体验。

除此之外,Reeder iPad版本和Our Choice的空间感知也做得十分

的棒。以Our Choice和Reeder iPad为例(视频)。Our Choice在选章节的场景进入章节内文时,选章节的场景会减少
,经过
“近大远小”的常识在一个平面内暗示两个场景间的空间关系。 Reeder 也采用了相似

的方式。

3. 体位化设计

iOS App体验设计

以iPad为例子,通常我们运用
iPad的时分
有两种体位,第一种是把iPad放在桌面上中止

操作,这种体位运用
APP,无论按钮在哪里,点击都需求
用一只手完成,两个步骤间的按钮距离

远近也不会成为担负
。 而当手握着iPad的时,这种特殊体位,问题就呈现
了。

(假定

你有手机,请往常

拿在你的手上)倘若

你只希望用一只手完成操作,你会发现,你用大拇指点击屏幕中一切
点,却只需

绿色区域是很易点击的。如下图所示,iPad的易操作区域也是散布

在弧形区域内。

iOS App体验设计

接下来用一个视频还阐明

坏的体位化设计和好的体位化设计的区别。

前半部分

坏的体位化设计,是由于
设计没有思索
到操作姿势

,致使

于左边一排不常用的功用
占领
了最重要的黄金区域,而常操作的区域却远离易操作的区域。 操作起来就比吃掉一只死苍蝇还难受。 然后
者,好的体位化设计,一切
的常用功用
,一只手,不需求
太多移动

就能够

全部完成: 上篇文章,下篇文章,标志
未读,标志
加星。

当然,假定

你是我们《牛壹周》的忠实读者,那你一定记得我们的风火轮(详见牛壹周1.2之无敌风火轮)和一阳指(牛壹周1.1更新手记)? 没错,我们坚决地去掉了一阳指,由于
这是一个漂亮却难用的设计(至少不是一个好的体位化设计)。 我们在架构上保管

了风火轮(当然,只是在程序中保管

,但并未启用),由于
这是一个很好的体位化设计案例。 例如,在阅读杂志的时分
,我们常要翻下一篇文章,传统的操作是先进目录,然后再找到要看的文章,再跳转。 而运用
风火轮,如视频所示,你的手完好

不用分开
屏幕,无论你的手有多大多少,无论你是左撇子还是右撇子。

在行将
发布的iOS5中,iPad的键盘设计也很好地表现
了所谓体位化设计的精髓

iOS App体验设计

终了

iOS设备,致使

是包括Android在内的一切
移动

设备,他们都由于
共同
的运用
场景,似的设计不同于网页设计。 很多“美工”,致使

程序员从网页设计转变角色来设计移动

设备APP经常
忽视

这些隐形的要素
,最终招致
产品设计水平

难以进步
。假定

说近年来交互设计师在网站设计中的位置
越来越高,那在移动

设备的设计中,他们的位置
会更为重要。视觉焦点/操作焦点、空间感知和体位化设计这三个iOS设备的特性
事实能够

类比到Android致使

更多的设备中,当然也不局限这三个特性

当然,也正是由于
这些缘由
,当我们听到他人

兴奋地通知
我们:“哇!HTML5能够

做到一切
设备自顺应
ye~”的时分
,我们通常是不屑,心里默想“程序员!”。 当然,这里并非贬低之意。只是,有一点不得不招认

,不同尺寸的设备,不同的分辨率,若想取得

最好的体验,“自顺应
”让机器顺应
了却让人难以顺应
。例如一个按钮原本

有1厘米高宽的,一个自顺应
,在iPhone上就只需

原来的1/3时,你叫人怎样
点击? 当然这样的例子很多。 大多数这种不花功夫还大赚的宣传,就犹如电线杆贴满的小广告,通常都是短少

优质应用的不可救药

的硬件厂商为了快速处置

痛楚而买肾的做法。当然,对技术敏感的工程师就不盲目

地帮着一同
呼喊
而已

彩程设计对移动

设备还会持续察看

思索

。更多的设计办法

和哲学会持续和大家分享。 敬请关注。

作者:肖轶翔「@yxshawn」

除非注明,本站文章均为原创或编译,转载请注明: 文章来自36氪

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章