• UID25
  • 登录2016-05-02
  • 粉丝8
  • 关注2
  • 发帖80
  • 主页
  • 金币1443枚
社区居民
原创写手
billy 发布于2015-10-24 10:41
0/964

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

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

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

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

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

图片:2010092518185279.jpg


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

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

图片:2010092518190558.jpg


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

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

图片:2010092518193143.jpg


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

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

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

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

图片:2010092518194890.jpg


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

图片:2010092518200872.jpg


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

图片:2010092518232179.jpg


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

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

5、一次做一件事情,避免一个按键承载太多的功能
Android的菜单键是一个全局按键,使用频率比较高,根据不同的场景功能又各不相同,用户较难形成一致的体验,系统级的菜单和上下文菜单也容易让用户混淆。

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

图片:2010092518193143.jpg


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

图片:2010092518204357.jpg


在整个界面转换的过程中,苹果会添加一些动画元素,作用有三:
a) 缓解用户等待的焦躁情绪,如:经典的程序登录界面动画。
b) 暗示用户当前界面的来源。如:有信息层级关系的左右切换动画。

图片:2010092518205788.jpg


c) 增强用户体验

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

 拟物化设计

图片:2010092518211013.jpg


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

0人打赏
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 68840/364   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 38921/190   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 36007/0   Python爬虫:常用浏览器的useragent

  • 35820/255   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 35227/145   省时省力的Android组件群来了,非常棒的原型参考

  • 27843/2   超全!整理常用的iOS第三方资源

  • 26905/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 26479/142   2016抢红包软件及源码

  • 21495/30   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 21159/25   Android工程师面试题大全

  • 20907/27   2016程序员跳槽全攻略

  • 20709/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 20527/155   Android版类似UC浏览器:非常赞,产品级的源码

  • 19785/20   码魂:程序员的牛B漫画

  • 18064/10   2016年最全的Android面试考题+答案 精编版

  • 17824/3   吐槽那些程序员的搞笑牛逼注释

  • 17076/42   一个绚丽的loading动效分析与实现!

  • 16878/85   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 16832/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 16792/1   iOS 动画总结

  • 16036/45   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 15817/23   个人收集的Android 各类功能源代码

  • 15604/10   女程序员的梦,众网友的神回复

  • 15366/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 15309/11   年会上现场review代码是怎么样的体验!

  • 15217/81   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 14818/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 14777/23   珍藏多年的素材,灵感搜寻网站

  • 14766/101   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 14693/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 14622/20   Android福利第三波【Android电子书】

  • 14179/76   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 13904/0   iOS中文版资源库,非常全

  • 13834/15   基于Android支付宝支付设计和开发方案

  • 13797/18   65条最常用正则表达式,你要的都在这里了

  • 13304/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 12953/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 12633/7   一张图搞定iOS学习路线,非常全面

  • 12571/7   用程序员的姿势抢过年的火车票

  • 12405/46   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 12274/10   成为Java顶尖程序员 ,看这11本书就够了

  • 12096/10   微信支付终于成功了(安卓,iOS),在此分享

  • 12007/18   一张图搞定Android学习路线,非常全面

  • 11843/0   GitHub iOS 库和框架Top100 

  • 11766/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 11551/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 11549/29   【持续更新中】Android福利贴(一):资料源码

  • 10972/4   46 个非常有用的 PHP 代码片段

  • 10851/3   即时通信第三方库

  • 10539/8   流媒体视频直播方案

  • 10404/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 10380/18   八个最优秀的Android Studio插件

  • 10267/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 10075/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 10057/10   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 9488/6   开箱即用!Android四款系统架构工具

  • 9316/10   十大技巧快速提升Android应用开发性能

  • 9259/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 9217/3   一张图看清Linux 内核运行原理

  • 8999/1   Android性能优化视频,文档以及工具

  • 返回顶部