解读iPhone平台的一些优秀设计思路

标签: 交互设计 Android IPhone 工业设计 案例 | 发表时间:2010-06-22 10:05 | 作者:小玉 志强
出处:http://cdc.tencent.com

  本文试图从iPhone的角度结合一些iPhone平台项目的设计经验提炼出iPhone平台的一些优秀设计思路,以供大家在做移动互联网设备设计时参考。

1、移动互联网设备和传统手机的区别

  在传统手机时代,标准的通话键、挂机键、菜单键是手机的标配,用户被教育成了用键盘来操作数据,于是我们就养成了使用键盘的习惯,经典的案例就是诺基亚主导的时代。

  在移动互联网时代,特别是触屏的大规模应用,手机的功能已经发生了转变,对互联网内容的浏览、下载、消费等等成为主要应用场景,触摸屏成为行业趋势,直接对内容进行操作,在屏幕范围内的点击成为主要的操作。绝大部分操作通过直接和内容交互完成,不要让用户通过中间设备间接进行控制。

  因此,就可以理解为什么苹果会这么激进,只保留了一个home键,而将其他功能性的操作全部做在了屏幕里面。

  在底部的几个按键的处理上(返回、菜单、home、搜索),Android的做法似乎介于传统手机和iPhone两者之间,既保留了传统手机的一些特性,但也在学习iPhone的触屏做法。从苹果遵循极简的设计思路来看,iPhone做得更彻底、更加极致一些。

 

2、高度直觉化的界面

  苹果采用了隐喻等方式来暗示用户这里的操作,目的就是降低用户的学习门槛,使用户第一眼就知道怎么去用iPhone,典型的案例就是锁屏界面的解锁操作,以及缩放照片的操作。

  iPhone采用了全触屏的操作方式,绝大部分操作都通过直接触摸完成,仅提供一个home键的实际按键,这种做法配合multi-touch技术,无论是完成一个任务还是体验游戏,操作都最大程度简化了用户的操作路径。

  为此,iPhone还提供了各种丰富的手势,基于此,开发者可以创造丰富的操作体验。比如:tweetie 2

 

3、在需要时给我导航,且告诉我将去向何处

  在iPhone平台上,如果应用程序有信息层级关系(比如邮箱>收件箱>邮件),利用title进行导航,导航栏左侧始终是返回按钮,右侧如果有必要,可以放针对内容的操作控件,中间有标题。

  对这里的导航按钮来说,始终只有返回上一级的功能,且明确指明上一级的title是什么。

  那么,另外一个问题是 如果这里的信息层级太深怎么办?是否需要给出返回首页等按钮或者更长的面包屑路径,这里需要考虑的是怎样减少程序的信息层级而不是一味地去将这里的导航复杂化。

  iPhone提倡直接对界面元素进行操作,返回上一级也是如此,无需通过其他物理按键来切换页面,你所需要做的事情就是直接在屏幕上点击。


Navigation Bar

 

  4、稳定的界面结构——tab bar,toolbar的位置

  iPhone典型应用的界面结构很稳定,导航栏和页签栏的位置不会因为应用不同而发生变化,用户能形成比较一致的体验。

  Android平台在规范性方面不如iPhone,比如:

  a)  Andorid对标题的处理方式比较奇怪,有的程序有标题栏,有的地方没有,不符合一致性原则;另外,还存在大小两种尺寸的标题栏。

  b)  tab bar的位置。有的应用放在顶部,有的放在底部,体验不一致。

  另外,对手持设备来说,关注焦点是从上而下的,tab bar的关注点没有内容那么高,其实只是在需要的时候可以方便地进行切换就足够了,放置于顶部对于手持设备来说操作很不便。

 

5、一次做一件事情,避免一个按键承载太多的功能

  Android的菜单键是一个全局按键,使用频率比较高,根据不同的场景功能又各不相同,用户较难形成一致的体验,系统级的菜单和上下文菜单也容易让用户混淆。

  苹果的做法是将菜单里的功能进行分解,重要操作用户可直接操作(如通讯录的添加联系人,iPhone是直接放出来,Android是将其放到菜单里面),其他操作或集中在设置或通过滑动等交互方式进行扩展。(tweetie 2是将针对当前联系人的更多操作通过滑动的操作展示出来)

 

6、增强用户体验

  iPhone在增强用户体验上有很多点值得学习。比如core animation提供了大量优雅的动画可以直接使用,以实现华丽的动画效果。

 

为什么用动画?

  在整个界面转换的过程中,苹果会添加一些动画元素,作用有三:

  a)  缓解用户等待的焦躁情绪,如:经典的程序登录界面动画。
  b)  暗示用户当前界面的来源。如:有信息层级关系的左右切换动画。

  c)  增强用户体验

 

用什么动画?

  界面常用的几种动画:

  a)  有信息层级关系的采用左右切换动画。
  b)  针对当前视图内容的操作常用的采用model view的从下往上升起的动画。如:写邮件,action sheet。

 

拟物化设计

  除此之外,还有声音元素、透明设计等其他手段以提升用户的使用体验。


版权所有 © 2008 - 2010
您看到的文章来自 腾讯CDC博客 http://cdc.tencent.com ,原文链接为 http://cdc.tencent.com/?p=2690 ,转载时请注明出处。

相关 [iphone 平台 设计] 推荐:

解读iPhone平台的一些优秀设计思路

- 志强 - 腾讯CDC
  本文试图从iPhone的角度结合一些iPhone平台项目的设计经验提炼出iPhone平台的一些优秀设计思路,以供大家在做移动互联网设备设计时参考. 1、移动互联网设备和传统手机的区别.   在传统手机时代,标准的通话键、挂机键、菜单键是手机的标配,用户被教育成了用键盘来操作数据,于是我们就养成了使用键盘的习惯,经典的案例就是诺基亚主导的时代.

Redesign——iphone中的“再”设计

- FreeQs++ - 用户体验与交互设计
很久以前看过一本书,讲的是一些设计师如何把已有产品、品牌进行重新设计,既保持原有特色,又焕然一新. 工作中似乎充满着“再”设计,无论是网站改版,还是外面产品的复制模仿,或是一些成功产品的跨平台、操作系统的移植….. 尤其,随着移动app的发展和升温,PC端的产品有逐渐向手机端移植的趋势. 如何将一款pc端产品成功移植到手机端,必然要对交互操作进行“再”设计.

iphone Web App 导航设计探讨

- Vingel - 互联网的那点事
最近在做iphone端Web App的项目. 由于产品形式新颖,技术环境不成熟,公司给与了较宽松的研发时间. 在一个月的交互设计阶段,每个环节都得到多次讨论推敲,我从中感悟颇多. 导航系统的设计是一个比较典型的点,拿出来与大家分享讨论一下. iphone Native App较常见的导航如下图所示:.

超越iPhone和Android:开发者的5个新兴平台

- - 译言-精品外文翻译 - 最新译作
超越iPhone和Android:开发者的5个新兴平台. 从汽车到起居室,技术和市场正迅速地为编程先驱们创造各种获利的机会. 作者:Peter Wayner. 印象中很早以前,我曾在一次午饭时和朋友们试图搞清楚,如果我们能够为手机编程序的话,我们该做什么. 现在想起来,我们当时的主意真是逊. 也许把拨号界面的字体换换,或者给手机添加一个屏幕保护画面.

浅析iPhone平台三种应用类型的布局方式

- - 百度MUX
在手机这样一个小小的有限的屏幕尺寸里,要使界面保持清晰合理、简洁美观,就涉及到产品“框架布局”的设计问题,我们需要根据不同的产品需求及应用场景来设计合理的界面布局. iPhone平台的标准界面布局为顶部标题栏、中部内容区、底部工具栏/标签栏,设计师们根据不同的应用类型以及不同的使用情境进行着巧妙的布局,其中不乏很多勇于打破常规,精巧合理的布局设计.

Android、iPhone和Java三个平台一致的加密方法

- - 移动开发 - ITeye博客
先前一直在做安卓,最近要开发iPhone客户端,这其中遇到的最让人纠结的要属Java、Android和iPhone三个平台加解密不一致的问题. 因为手机端后台通常是用JAVA开发的Web Service,Android和iPhone客户端调用同样的Web Service接口,为了数据安全考虑,要对数据进行加密.

魅族MX设计图曝光 外形圆润像iPhone 4

- 小熊TONY - cnBeta.COM
最近国内的手机业界真是热闹非凡,OPPO Find、阿里云手机、小米手机,你方唱罢我登场,让我们差点都忘记了还有一台重量级的产品也要在年底登场,那就是魅族MX. 不知道出于什么原因,在M8和M9上曾经非常高调的魅族这次几乎连一丝一毫关于MX的消息也没泄露,但是近日国家产权局公布的一份外观设计专利却为我们揭开了这台神秘旗舰的部分面纱.

不拘规范的iPhone优秀应用设计细节

- Eastar Lee - 牛博山寨 编辑推荐
作为一个刚入行的交互苦逼女,最烦恼的事情是如何解决“iPhone原生的界面控件无法满足产品日益增长的功能需要”这个大矛盾. 一方面,如果保守地采用传统的iPhone控件,不能给产品带来太多的创新价值;另一方面,如果过于突破,又害怕不能通过APP Store的审核,开发同学辛苦之后却竹篮打水一场空. 纠结通过的时候,看到APP Store上有一些创新的设计,并从中获得启发的时候就特别开心.