交互设计的那些事

  iPhone、Galaxy S3 以及 Lumia 920是市场上如今最引人注目的三款智能手机,正好对应iOS、Android及Windows Phone三大平台,尽管三大操作系统在市场份额、出货量以及用户认可方面都有着不小的差异。但更能我们兴趣,更有讨论价值的其实是这三大平台在设计方面的差异,这不仅最终决定着用户的体验,也决定了开发者的参与热情。


  来自微信公众帐号“互联网er的早读课”的这篇文章从包括变局、导航逻辑、设计风格等六大方面的差异对三大平台的交互设计进行了较为深入的分析和讨论,极具参考价值。

  一,布局形式的差异

  1)iOS 经典的“tab bar”

  在 iOS 应用内如果要切换不同的模块,或者页面内要切换不同的栏目,往往都会用到“tab bar”这一形式的控件。这个经典设计从 iOS 早期沿用至今,大部分 iOS 应用都是这样设计的。当然,iOS 本身是很包容的,最近也很流行抽屉式导航。但是 tab bar 一直是最受欢迎也最好被用户认知的方式:


  2)Android 提供了 2 种视图控制方式

  在 Android 4.0 规范出来之后,Android 提出了 2 种视图控制方式,一种是直接在导航栏的标题下加入一个触控按钮,点击后会弹出切换栏目的菜单(图中 2 标注的位置)


  比如日历应用点击后可以切换不同的视图,另外一种是直接在导航栏的下面加入了一个视图控制栏(下右图中 2 标注位置),和 iOS 的 tab bar 很像,不过是仅放在了上面,而且提倡支持手势滑动切换:


  3) Windows Phone 的创新

  Windows Phone 与上面两个平台就差距很大了,因为 Windows Phone 独特的 Metro UI 提倡回归传统的阅读体验,像浏览报纸和杂志一样浏览手机上的内容,更关注与内容而不是修饰,所以 Windows Phone 整体都给人一种像在看杂志的感觉。Windows Phone 的视图控制通过一种叫做“全景视图”的方式展开(下图)。


  实际上,4 个视图的内容是在一个页面上的,而且是一个页面同时加载的。用户的手机默认只显示第一屏的内容,通过滑动把后面的内容拉出来。

  这种视图方式很创新,而且方便阅读,不得不说浏览的体验好了很多。但是需要注意的是:

  因为其实这3个栏目是同一页面视图,所以不要将内容放的过多,否则加载会很慢影响效率;

  对交互设计过程中的排版和视觉提出了很高的要求;

  另外,Windows Phone 还提供了一种叫做枢轴的方式,枢轴和 iOS 的 tab bar 相差不是很大,只不过完全是通过滑动来切换栏目的:


  (枢轴布局)

  二,导航逻辑的差异

  大家都知道 iOS 是没有实体返回按键的,所有返回都是通过导航栏的 back 按钮来完成。


  在 iOS的导航逻辑中,我们可以明显的看出来,整个程序是一页一页的切换,就像一个幻灯片。而返回按钮也就是切换到上一页。所以,iOS 的返回控制的是页面。

  但是 Android 和 Windows Phone 就不是这样了,Android 和 Windows Phone 是有物理返回按钮的,点击物理返回按钮,控制的不光是一个页面,而且包括了上一步的操作,比如说:

  所以 Android 和 Windows Phone 的返回逻辑是按照时间流来判断的,而不仅仅是页面,返回按钮控制的是动作。

  需要特意提一下的是:Windows Phone 的返回逻辑不单限于应用内,还影响到应用之间。也就是说你当前正在桌面,再点击一次 back,就会进入你上一次打开的应用。

  另外在 Android 4.0 开始,提出了一个向上的概念,就是导航栏标题前面的一个小箭头,点击这个箭头,是回到该页面的上一个层级:


  三,应用之间联系的差异

  众所周知,iOS 是一个封闭的系统,而 Android 是一个开放的系统。

  我们可以比喻 iOS 每一个应用都是一个小房间,每个应用都在自己的房间里做自己的事情,互相之间不进行任何来往。而 Android 则是一个大大的办公区,每个应用虽然也有自己的工位,但是可以互相串门或者借用东西,而 Windows Phone 则遵循着和 iOS 差不多的方式。到了 iOS 6 的时候可以支持应用直接互相跳转了,但那也仅限于你跳出去了,就不再回来了,也就是说到了那个房间你就是那个房间的人了,与之前的房间没有关联了。

  这种差异会让 Android 上的应用设计有了更多的可能,身为设计师的你可以根据这一特性设计很多不错的功能,比如系统美化或者系统优化,杀毒,拦截电话等功能,而 iOS 和 Windows Phone 就不能。但是这也让 Android 系统面临了很严峻的安全问题,所以Android上各种优化和杀毒软件很流行。

  四,多任务的差异

  多任务的差异用一句话来形容就是:iOS 和 Windows Phone 都是假的多任务,而 Android 是真的多任务。

  五,分辨率的差异

  亲,你知道Android现在有多少种分辨率吗?


  (TECH2IPO 注:此数据图显示的是 2011 年 Android 手机状况,现在,相关问题已经有所缓解和减轻。)

  适配一直是 Android 很头痛的问题,身为前端往往要为不同的分辨率调效果而保证界面不会变形和模糊。而分辨率问题不仅仅影响视觉这一块,对交互设计也有很大的影响。因为这些手机往往屏幕比例也是不同的,你需要考虑不同的长宽比下,你的界面布局应该是怎样的。所以在设计 Android 的时候,你不能要求把界面布局写死,应该尽量保证每个控件都是浮动的,而且自己能评估出各种古怪的布局下的效果。

  iOS 和 Windows Phone 就会好很多。iOS 分辨率分为 320×480,640×960,640×1136,Windows Phone 分辨率分为 480×800,800×1280,800×1136。虽然看起来也蛮多的,但是界面的比例基本上没有什么变化。所以对于交互上的布局影响并不是很大,视觉设计师也可以通过脚本缩小裁图简单的解决问题。

  六,设计风格的差异

  设计风格是这 3 个客户端自己独特的个性,设计风格不单影响的是视觉设计的层面,对交互设计也非常的重要。尤其是在考虑动效,拟物化交互的时候需要重视。iOS 的设计风格偏向拟物化风格,这个拟物化不光是视觉上做出很多拟物的小按钮小控件的,为了配合视觉,你往往在交互上也可以加一些生动有趣的内容。


  比如说像最新的 Path,进入商店时遮阳板会有一个收起的效果,小卡片也会根据重力感应而摇摆。如果交互上就能体现出平台的设计风格的话,无疑会非常讨好用户,增加产品细节上的亮点。

  Android 平台就简单一些了,在整体的布局和交互形式和 iOS 差不多的情况下,尽量的简洁,呈现一种科幻的风格即可以了。Android 平台尽量少用拟物化的动效,因为 Android 系统对于动画效果的渲染比较差,如果太复杂的话可能会让界面非常的卡。

  Windows Phone 平台则有着很大的不同,Metro UI 的理念要求设计者更多的考虑如何展现内容,使用平滑的过渡动画。而且还对设计者的排版和平面设计提出了一些考验。所以建议交互设计的人好好读读 WindowsPhone界面设计准则,并且平时就积累一些Windows Phone界面的视觉界面感觉,不然视觉设计师很可能会埋怨你哦!

时间: 2024-10-31 02:38:56

交互设计的那些事的相关文章

交互设计的那些事:ANDROID、IOS和WP平台的六大差异

iPhone.Galaxy S3 以及 Lumia 920是市场上如今最引人注目的三款智能手机,正好对应iOS.Android及Windows Phone三大平台,尽管三大操作系统在市场份额.出货量以及用户认可方面都有着不小的差异.但更能我们兴趣,更有讨论价值的其实是这三大平台在设计方面的差异,这不仅最终决定着用户的体验,也决定了开发者的参与热情. 一,布局形式的差异 1)iOS 经典的"tab bar"在 iOS 应用内如果要切换不同的模块,或者页面内要切换不同的栏目,往往都会用到&

做交互设计应该知道的视觉几件事

UI偶尔会听到产品经理和交互设计抱怨,视觉设计稿和最初规划差别太大,我自己也遇到过类似状况.究其原因,大多还是沟通中出现了问题. 有效沟通,信息的对等是很重要的.这个对等,既包括让视觉设计尽早了解产品需求,获得与其他人员对等的信息;也包括交流双方知识领域的对等,彼此多了解对方领域内容,才能更好地沟通. 对于交互设计师来说,视觉设计是合作最多的一环,交互原型终归要以视觉的形式呈现在用户眼前.因此,懂些视觉设计,更易于将交互方案传递给用户.同时,交互设计作为多学科交汇的职位,懂些视觉更是自己能力的提

交互设计中的5项视觉指导原则

  视觉是人的第一感观,它在影响用户行为方面起着决定性作用,视觉信息对产品的交互产生了深远影响. 来自UXPin的Jerry Cao,通过本文向我们解释了如何保持视觉与交互的协调. 我不想贬低文字的重要性,但也不想忽视视觉.两者是同等重要的交互设计元素.文字就是交互,但那些视觉元素(比如图标.菜单.图像等)才是用户实际上操作的东西.虽然有些可用性专家会提及Craigslist甚至Amazon,作为丑陋但可用(而且受欢迎)的网站案例.但毫无疑问,美感总会有所帮助. 情感是用户体验的关键:视觉设计优

给非科班生的自学路径图之交互设计篇

  所有群里最常见的新人问题就是--零基础怎么学习交互设计?其实,很多时候零基础不可怕,但最怕的就是零基础带来的那种浮躁,比如往往他们都追求速成.每个职业人都有零基础的时候(废话),而在社会上获得工作机会又要求你有相关经验,于是这就形成了一个新人最恐惧的矛盾--越没经验越没机会,越没机会越没经验. 今天给大家推荐一些我个人认为相对靠谱的零基础学习途径,做完这些,想直接去 BAT 校招应该是可以一战的,或者退一步去一个小型公司进一步积累经验应该也会有很大的希望. 1. Design Guideli

交互设计新人的核心竞争力

从实习的第一天起,我就数着日子在过,时间走的太快拦也拦不住,要做要学的事情又太多.转眼七月已经过去,总觉得还是有点后知后觉,花了一个月的时间去适应新环境和新工作,慢慢才知道寻求突破点的重要性,所以今天来聊聊我所理解的交互设计师的核心竞争力. 竞争力一:业务驱动力 最开始,我总在想业务是比较窄的,比如我做电商,以后就只能在电商领域,以业务为导向的竞争力会不会不具有普适性,只能在一个公司一个业务线上具备竞争力?但现在想来,这种观点可能是错误的,交互设计的最终目标是解决复杂问题的能力,这种能力会通过业

交互Demo设计:交互设计心得经验分享

文章描述:交互Demo设计,是每个交互设计师最最基本的技能,这也是一个梳理思路很好的方式,但不是唯一的形势,Axure也不是唯一工具.只要能清晰表达产品思路.界面UI.流程逻辑及交互状态的好用工具都是值得去尝试的. 为方便产品经理.设计师.开发及项目相关人员能够看到直观的效果,进行更有效的沟通;提供直观的产品设想,说明用户将如何与产品进行交互,在交互设计的过程中一定会产出各种各样的产出物,如流程图.思维图.纸上的草稿.甚至高保真演示稿. 这里简单分享下自己在项目过程中的交互Demo设计的一些心得

互联网产品交互设计:保证用户不在网站中迷路

文章描述:交互设计实用指南系列(7)–避免迷路. 任何位置都能明确"我在哪里?这里有什么?从这里能去哪里?" 迷路可不是一件好玩的事情,试想你驾车行驶到高速公路分叉口时,却看不见任何路牌,那该会怎样地困惑.沮丧.愤怒和恐惧.为了避免迷失方向,我们发明了各种导航工具,大到卫星定位系统,小到指南针,人类在这一事情上,极具创意. 在网站上迷失方向,虽然不是什么生死攸关的事,但会带来许多负面影响,如:用户体验下降.任务不能完成,用户流失等.我们可以通过良好的导航系统来避免这个情况发生.好的导航

交互设计的职能:交互设计师具体做什么

文章描述:本章主要详述一下交互设计的职能--交互设计师具体做哪些内容? 本章主要详述一下交互设计的职能--交互设计师具体做哪些内容? Ⅰ. 先了解一下交互设计的基本概念: 交互设计是一种目标导向设计,所有的工作内容都是在围绕着用户行为去设计的.交互设计师通过设计用户的行为,让用户更方便更有效率的去完成产品业务目标,获得愉快的用户体验. Ⅱ.交互设计在项目流程中的位置和任务: 项目前期的流程和节点: 职能的细化就是为了让产品在每个专业环节都做到极致,提高竞争力.如果是为了走流程,每个环节都是任务式

产品需求设计(以迅雷看产品为例)交互设计与视觉设计

文章描述:从产品到设计. 很多网页设计师认为自己做好设计就可以,其他的事可不用理会和学习,那就大错特错了!一个优秀的设计师,必须深入了解产品本身.相关交互结构及用户体验等常识!这样设计师设计的东西才能深入产品中去,避免不犯错误!设计来源生活和思考,同样作为一个网页设计师,要不断地学习.思考.分析产品才能设计出更好的作品! 这里主要以迅雷看看产品为例,谈设计及用户体验的点点滴滴!希望对刚跨入网页设计这行的童鞋们有所帮助! 主要两个方面讲: 1.了解产品需求设计(以迅雷看产品为例) 2.交互设计与视