移动产品界面设计介绍课件.ppt

1、移动产品界面设计介绍目录页 CONTENTS PAGE 移动产品界面设计基础一移动交互基本原则二移动交互的变化和趋势三移动视觉展示的变化和趋势四移动用户设计体验（UCD）五移动产品特性 移动设备的方便携带，也同时带来它浏览时间的碎片化。以智能手机为例：我们通常在短暂的时间里，完成一件任务或者是进行一个娱乐事件，比如：散步、坐公交、睡前、午后闲暇、旅行的时候，开始拍照、分享、做笔记、玩游戏、购物，等等。在平均短短5-30分钟的时间里，思路常常被打断，手机常常被拿起放下，高效和轻互动，就成为了移动设计的特点。而对于平板电脑而言，它的使用时间一般为在家中较为安静，舒适的环境空间下使用，使用时间也较为

2、固定。手势对比移动产品使用特点l 屏幕尺寸： 通常是指屏幕的物流尺寸，是屏幕的对角线长度。比如2.8英寸。3.7英寸。l分辨率： 是指屏幕上拥有的像素的总数。通常使用“宽带x长度”来表达。虽然大部分情况下分辨率都表示为“宽度x长度”，但分辨率并不意味着屏幕的比例。 Apple为了防止在交流过程中（尤其对于编程实现）分辨率对思维的迷惑，统一使用点（point）对界面元素的大小进行描述，例如： iPhone、iPod Touch界面描述320点x480点 iPhone、iPad Touch界面描述768点x1024点 换算管理普屏1点（1pt）=1像素 Retina屏1点（1pt）=2像素 这样，

3、不管我们是在为普屏还是Retina屏进行设计与开发，我们都可以清楚地，并且统一地使用点对界面元素的大小进行描述了iPhone屏幕分辨率与尺寸 第一代的iPhone屏幕尺寸3.5英寸，分辨率为320 x480,屏幕密度为165PPI，而从iPhone4开始屏幕密码增加了两倍，分辨率达到640 x960。而现在iPhone5的分辨率则为640 x1136。 在设计iPhone的应用程序界面时，设计师要以640 x960的基准进行设计，然后制作一套缩小2倍的图片资源（未缩的我们叫2倍图，缩了得叫一倍图）以为所有iPhone都使用了相同尺寸，所以最终能在2种分辨率上显示的物理大小完全相同。 由于iPh

4、one5只是高度发生变化，在适配时一般保持设计控件大小不变，只是内容露出增多。但对于一些满屏设计的界面则需要考虑是否需要另外设计一份页面640 x1136（如app背景图，启动图等等）iPad屏幕分辨率与尺寸 第一代的iPad屏幕尺寸为9.7英寸，分辨率为1024*768，屏幕密度为132PPI。全新的iPad屏幕密度同样提升了2倍，分辨率达到了2018*1536。最近新出的iPad mini屏幕尺寸为7.9英寸，分辨率为1024*768。 在设计iPad的应用程序时，设计师要以2048*1536的基准进行设计，然后制作一套缩小2倍的图片资源（在为缩的我们叫2倍图，缩了的叫一倍图）iPad m

5、ini由于和iPad比例一样，不需要另外设计，直接可以使用相应的一倍图适配到设备中。Android屏幕分辨率与尺寸 Android设备的屏幕相对复杂一些，因为它们有各种尺寸和分辨率。为了让跟中分辨率的屏幕显示合适的大小以便用户阅读或者操作，同时又能满足Android设备多样性的需求，由于，Android官方通过对各种屏幕进行密度等级划分，最后分为“低密度（LDPI）”、“中密度（MDPI）”、“高密度（HDPI）”、“超高密度（XHDPI）”这四个规格，并同时将“中密度”定义为基准线。这样在设计Android应用程序的界面时，我们就可以一视同仁把中密度的屏幕作为基准进行设计，然后给其他密度的屏

6、幕提供相应的图片资源，最后通过系统的适配性自动处理，一样使得相同的内容在各种屏幕上可以显示比较接近的大小。 一般我们设计为480*800的尺寸。iPhone界面布局iPad界面布局页面布局-状态栏/导航栏l导航栏（navigation bat)l状态栏 导航栏展示在顶部状态栏的下方 在一个应用的不同视觉中进行导航 提供对当前视图内容进行管理的空间 导航栏可以仅仅以横向居中方式显示当前视图的标题 当用户进入其他视图时，导航栏的标题应该更改为当前位置的标题，并且应该提供包含上一位置的后退按钮。 除了后退按钮外，导航栏可以在标题右侧包含第二个按钮，如编辑添加。l实际应用上： 顶部状态栏不一定就是导航

7、栏，可以没有，也可以是搜索栏等等。 导航栏大于44pt,页面标题左对齐 状态栏是展示关于设备的重要信息，包括信号强弱、网络连接情况、电池情况等。l实际应用上： 一般而言所有界面都需要状态栏，除非是游戏等沉浸式的app，和某些全屏显示图片的界面。页面布局-标签栏l标签栏（tab bar)l当图标意义足够明确，可以不使用文字l当标签意思过于抽象，可以全部只使用文字l实际应用上： 形状不一定就是长方形，不一定所有标签都等宽。标签栏显示在屏幕的下方边缘 标签栏向用户提供了再应用的不同模式或不同视图间切换的能力标签栏显示图标和文本，每个标签栏元素等宽地显示 无论横屏竖屏都不改变其高度标签栏不超过5个时，

8、可以再标签栏中等宽地展示当标签栏超过5个时，系统会展示其中4个并展示一个“更多”的标签可以再卡片栏山显示一个提醒标记页面布局-工具栏l工具栏（tool bar)l 实际应用上： 家居杂志和太平洋电脑网客户端内页工具栏展示工具栏显示在屏幕下方边缘包含用于针对当前页面内容执行动作组的按钮在工具栏上相应的元素等宽的进行排列工具栏中提供不超过5个元素是较为合适的，推荐用户点击区域为44pt*44pt设备手持方向从竖向变为横向时，会自动改变工具栏的高度页面布局-点击区域 在设计任何可点击的部件时，设计师应该首先考虑设计区域是否易于让用户点击，因此在设计规范里，任何可点击的不见，大小都不应该小于44pxt

9、*44pt 因此，按钮不应小于44pt*44pt;app的banner广告图高度也不应小于44pt;列表的图高度也不应小于44pt等等页面布局-设计区域 由于在设计中，设计师是按照retina屏幕分辨率去设计的，在设计的最后输出一倍图的时候我们需要将2倍图缩小成一倍图，因此在2倍图的设计中，必须保证每个单独存在的个体大小是双数像素，如148px*248px。这样才能使用在缩小一倍图的时候不会出校13.5*17.5像素的情况 iOS的控件还有很多很多，以上列举的是比较常见到的，是做每个app都会设计到的。另外还有键盘，提示框，时间和日期选择器，选择器，进度显示栏，搜索栏，滑动调节器等等。这些一般

10、可以直接使用系统提供的样式，不需要另外设计页面布局-字体设计在iOS中默认字体分为三类：第一种：STHeiti-Light.ttc和STHreiti-Medium.ttc 代表的是中文字体第三种：_H_helvetica.ttc 和_H_HelveticaNeue.ttc 代表的是英文以及数字字体第三种：LockClock.ttf代表的是锁屏时间字体在iOS中里的中文字体 苹果默认的中文字体是Heitis SC（黑体-简，黑体-简的英文名称为Heiti SC）heiti为黑体的拼音，SC代表简体中文（Simplified Chinese），是Mac OS X Snow Leopard（版本10

11、.6）包含的简体中文字型，也是iPhone OS 3.0（版本4.0后改名为iOS）及iPod nano 第五代依赖的预设简体中文字型。 当我们在用PC设计的时候，比较接近这种字体的是方正黑体简体。 相对中文而已，iOS里的英文和数字的字体样式就比较多了，在设计的时候可以挑选合适界面的英文字体使用，但需要注意该字体是否在各个版本的系统能够通用。 中文应用在界面上面时，一般我们用方正黑体简体做设计。而且不能够带有任何的设计效果和样式（智能是纯色，可以带有阴影，由技术来实现） 但也有例外，例如是写在图片上面的文字；一些比较特殊的不会更改的词句这时可以用其他字体和使用样式，由切图来实现。页面布局-图

12、标设计一般设计最大尺寸的1024px*2014px再缩小为各个尺寸的图标iPhone app 图标iPad app 图标图标输入：iOS会为图标自动生成圆角高光带投影（也可设置不生成高光），所以提交的时候提交直角图标即可，直接输PNG：1024px（不要使用alpha透明度）页面布局-切图1.切方法1：直接在psd上切图。方法2：新建透明图层，拖进该部件。2.输出切好后选择：“储存为web和设备所用格式”图片格式PNG24,保持透明度 图形用户界面中的图形有两种实现方式，一种是用代码画出来，另一种则是使用图片。在直接使用之前，有一个psd到png 的切图过程。 在缩小为一倍图进行切图的时候，如

13、果该元素使用的像素不是双数，或者坐标不在双数坐标上，就会出现虚拟像素，此时需要进一步调整。页面布局-切图一般相同关系和曾经排列的图标或元素，不管他们各自的尺寸是多少，都切成相同的切片（alt拖动即可复制单签切片）除切片外，另外一个需要输出的是颜色。一般给程序RGB值和颜色代码2个数值。 流程：设计师发出设计稿给程序员查看：-程序员根据设计稿编写输出切图文档（文档包括页面链点（名称）、该切图截图、命名方法、切图尺寸大小、相关设备）-设计师根据文档进行切图，最后打包发给程序员。）切图时一般需要切一倍图和2倍图，两倍图是在相应的一倍图命名后加2x. 因为app在实际运用时，如果发现当前的设备是Ret

14、ina屏，会自动需找图片“pic2x.png”,自动加载针对Retina屏的图片素材页面布局-切图文档里若没有特别表面改切图的尺寸，则完全按照设计稿元素的实际尺寸进行切图。对于点击元素不足44pt*44pt的情况，一般切图时需要切上旁边的空白像素以满足此标准。查看文档时需要留意程序员是否漏掉某些按钮或点击区域的选中状态、按下状态或不可以点击状态。一般按钮上的文字不切出，由程序员实现。目录页 CONTENTS PAGE 移动产品界面设计基础一移动交互基本原则二移动交互的变化和趋势三移动视觉展示的变化和趋势四移动用户设计体验（UCD）五移动交互基本原则1增强交互2简单、直接的操作3支持全方位操作4

15、增强反馈和交流5除非特别必要时，不要提供声音反馈6减少全屏切换7提供指尖大小的点击区域8弱化界面控件9多点触控10减少输入11使用浮动窗口12立即启动和随时准备停止13避免不必要的交互移动视觉展示基本原则1信息扁平化2旋转屏幕时保证首要内容为重点3避免布局变化过大或者无缘无故的改变4避免使用UI元素或者定义一个旋转手势来完成旋转动作5为每个显示方位各提供一个启动图片或动画6工具栏中显示分段控件7使用标签栏8整体视觉效果9重新思考列表10工具栏中显示分段控件11不要到处粘贴公司或产品的名称及Logo12隐喻效果目录页 CONTENTS PAGE 移动产品界面设计基础一移动交互基本原则二移动交互的

16、变化和趋势三移动视觉展示的变化和趋势四移动用户设计体验（UCD）五移动交互的变化和趋势基于动作的交互技术使得电脑可以识别人类的行为与动作。比如现在基于动作的系统能解读人类面部表情，或者手部动作所隐含的意思。1、基于动作的交互技术语音是较早就进行的一种自然交互技术，语音拨号、语音命令控制、简单的数据输入等工具已经开始在一些移动设备中使用。利用语音识别技术，用户通过语音输入来拓宽移动设备输入的窄道，而语音的信息反馈则使用户可以使用除视觉之外的第二感觉通道来接收信息。2、基于语音的交互动作可以充当人机交流时更无缝的一种方式，例如iPhone bump这个软件，能让两个人通过“碰”一下来交换联系信息。

17、这个动作和碰见某人、交换名片类似，这种交互方式对于最终用户来说感觉很自然。其实这些是应用了移动设备本身的LBS和重力感应，实现“碰撞”设备交互数据，其它还可以应用到如通讯录、照片和应用程序等等范围。移动交互的变化和趋势前年推出的一些Wikitude Travel Guide软件除了象现在这样在一个俯瞰图上叠一个路线图，并且在用户即时实拍的影象上显示地理导航信息，并设备合成与真实环境相关的实时信息（现实增强技术的潜在功能之一）。现实增强技术的应用当然不限于导航，例如iPhone手机上的Yelp软件能滚动显示你针对当前正在拍摄的酒店的顾客评价；诺基亚手机上的Point and Find 能让用户马

18、上检索相关信息，用户仅需要把手机的摄相头对准检索对象即可来。在其它领域，增强现实也可以得到较多的应用，例如：教育：网络课堂上建立学生与教师在显示器前的直接互动；医疗：医生们可以用增强现实来远程指导病人解决问题。3、现实增强技术 移动交互的变化和趋势要尽量充分地利用相关服务的技术能力，对用户在上下操作环境中的各方面特征进行更加细微准确的了解与分析。考虑对用户的地理位置信息、工作计划、任务安排、会议行程、行事历、微博feed、Gmail账户等中的订阅、提醒服务、通讯录等进行合理合法的利用，使产品应用能够为用户提供更加智能、更加个性化的内容及功能。目前的一些些智能化只是局限于表象，也仅仅是初级阶段，

19、而产品的真正智能化则在于产品自身的特性，例如下一代智能分析将从传统的离线分析转向在线嵌入式分析。用户可以从分析历史数据来解释发生了什么，到对历史和来自多种系统的实时数据进行即时分析以模拟和预测未来。下一代智能分析会在第三维度上成熟，从由个别进行的结构和简单的数据分析移向来自众多系统对多种类型的复杂信息的分析。这就需要有云计算、大数据、内存计算甚至是物联网等技术去支撑。例如Zite的内容阅读类应用，它会读取用户在Google Reader、Twitter和Delicious账户中的内容信息，分析用户的个人喜好，并在此基础上向用户推荐其他内容源当中的相关文章。例如让用户试着在这款应用中授权其Del

20、icious账户，五秒钟之内，它就完成了对用户曾经收藏过的文章的分析，并基于用户的兴趣方向生成了一本完全个性化的杂志，让用户可以阅读到更多感兴趣的新文章。4、智能化与个性化的交互移动交互的变化和趋势随着传感器和智能被添加到像连接到因特网上的移动设备这样的物理器件中，互联网的扩展要素包括嵌入式传感器、图像识别、信息短距离相互传输和近距离无信通信（NFC）支付等，使得移动设备中数据可以像物品一样被随时随地的交换，包括用户的身份信息。近距离无信通信（NFC）让用户在一个兼容的读卡器前挥一下他们的手机就可以完成付款。一般移动设备自带的NFC功能，包含用户各种卡类信息，从而可以取代用户的银行卡、饭卡、公

21、交卡和门卡等等。5、与物联网结合的交互移动交互的变化和趋势触屏移动设备通过对手指划动屏幕的手势进行识别，来完成与移动设备的交互。但是由于识别技术的限制，可用的手势种类不多，随着其他计算视觉等技术在手机上的成熟运用，则手势识别会有更大的发展。类似的例如Palm Pre有一个手势感应板能识别手指的滑动方式，从右到左意味着后退，把一应用从屏幕丢出去意味着退出、缓缓向上拖动意味着唤醒全局导航。6、手势交互目录页 CONTENTS PAGE 移动产品界面设计基础一移动交互基本原则二移动交互的变化和趋势三移动视觉展示的变化和趋势四移动用户设计体验（UCD）五移动视觉展示的变化和趋势采用流体布局，而不是固定

22、宽度，这样更多的样式表被查询设备选择网页能够随着不同设备屏幕的变化而自适应变化，从而使得不同屏幕尺寸的设备都能够拥有完美的显示。通过对不同的浏览器宽度用不同的CSS来进行渲染，能够控制在不同宽度下个元素的表现效果。增强适配性，平面化的图形便于横向拉伸，分辨率增大的同时，顶部可以由两栏合并为一栏，手机和平板可以使用同一个程序，所以应用程序将更多的考虑高分辨率的显示效果，而不是简单的栏目自适应拉伸，去刻意填满屏幕，故今后的相关设计中，则应充分考虑到栏目的合并或平行化。1、响应式界面设计（有虚拟化桌面的倾向，并且逐渐达到一个产品均适应不同设备平台，即多平台、多设备浏览的统一）移动视觉展示的变化和趋势

23、自WP7使用Metro风格之后，Windows8为代表的界面会将这种新兴设计风格推向主流，Metro的特点就是简洁与直观，没有过分华丽的炫目背景与精致的功能图标。Android 4.0系统的视觉设计，放弃了原有的设计风格，整体正在向平面化、格子风的设计方向进化，虽然没有那么强烈的Metro设计风格，但是这足以可以体现Metro风格的影响力。2、平面化、格子化视觉风格移动视觉展示的变化和趋势部分移动应用由于发展时间比较长，已经变得有些臃肿，默认的五个标签栏已经满足不了架构需求。类似Pad的侧边栏越来越多出现在手机界面设计，有助于减少界面的层级关系，充分利用显示空间，或者让目录型数据便于在较低分辨

24、率的界面中操作。侧边栏可以保证视觉的稳定性，如果和界面操作不冲突的话，可以依靠左右滑动手势调出侧边栏，提升操作效率。侧边栏也可以放置操作按钮，但可能会导致界面看起来显得拥挤，更多的侧边栏样式及应用场景还需要根据实际产品应用情况不断地进行尝试。3、侧边栏菜单移动视觉展示的变化和趋势动态效果设计和交互视觉都息息相关，是一种动态交互行为的用户反馈特效。优秀的动态效果设计，能够增加用户交互的亲和力和趣味性，提升产品的用户体验。动态效果会被越来越多的平台软件应用，移动设备硬件的提升，给动态效果体验设计带来了展示的机会，给软件产品的用户体验升级提供了更大的空间。4、动态效果（媒体化效果之一，现阶段往往是使

25、用在产品功能之间的转换）移动视觉展示的变化和趋势动态效果设计和交互视觉都息息相关，是一种动态交互行为的用户反馈特效。优秀的动态效果设计，能够增加用户交互的亲和力和趣味性，提升产品的用户体验。动态效果会被越来越多的平台软件应用，移动设备硬件的提升，给动态效果体验设计带来了展示的机会，给软件产品的用户体验升级提供了更大的空间。而Foursquare和Gowalla会在合适的时机，提醒你可以执行某个操作。某个按钮挪了位置，快速去添加好友，开始签到并与好友分享图片。通过这样一种Tips告知的形式，让用户关注到系统的状态，引导用户可以继续走向哪里，可以启动很好的帮助用户熟悉应用的作用。5、合理的用户引导

26、移动视觉展示的变化和趋势产品的定位和核心功能决定了主界面的布局，对于不同信息架构的产品，主界面会有很大的不同，但是要使产品从同类产品的相似界面中脱颖而出只有使用户专注。从主界面点击超过三次才能操作的功能被使用机率则非常低，普通用户不会乐于使用深层界面被掩藏的功能。同样，也有数据表明，在界面上突出某项功能的视觉特征，会提高用户使用该功能的机率；对具有“利用碎片化时间”和“显示区域较小”特征的移动应用来说，让用户在多个功能按钮中进行选择，也会成为影响用户体验的因素。另一个影响视觉设计的因素是：设计的重点与单个功能的使用率。6、突出主要功能（或者产品定义的核心）移动视觉展示的变化和趋势提到在移动设备

27、的小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用“跳板”的方式来简化界面，既保持了直观又维护了功能。又例如Flickr对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。Flickr的核心是照片，它的用户或许不希望看到又大又笨的导航，用户明确想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和导航（而事实上，很多导航元素已经在照片本身的交互上实现了）。7、简化界面移动设备的屏幕越来越大，但还是要减少不必要视觉元素干扰用户，特别是对于浏览类产品，更注重扩大主体显示区域。目前有一

28、些移动设备上的浏览器将地址栏放置底部，增加显示空间，同时让用户的操作集中在界面底部。又例如百度手机浏览器WP7版单指滑动工具栏可以缩放页面，这也是动效的应用案例之一，目的同样也是为了扩大主体显示区域。8、全局显示移动视觉展示的变化和趋势一些应用把界面设计成层，利用iPhone本身独有的特性让其固定，或垂直、水平滚动。这种方法有几个好处：1、减少了必要的传统导航元素数量（更少的按钮有助于避免界面混乱）；2、为用户获取信息提供了快速通道；3、有更多屏幕空间承载有用信息。又例如Path带动了大cover的设计，但是那么大的背景图占用了半屏面积，多少有点浪费，于是叠加在上面的信息层成为必然，利用好面积

29、的同时又能把需要展示的信息充分展示完全。9、层的应用目录页 CONTENTS PAGE 移动产品界面设计基础一移动交互基本原则二移动交互的变化和趋势三移动视觉展示的变化和趋势四移动用户设计体验（UCD）五用户体验已经成为核心要素l随着互联网+移动互联网市场环境的日渐复杂，竞争压力日趋增大；l各类产品或者服务的技术、功能日趋同质化；l用户可选应用的增加，应用理解的加深，对用户体验越加关注，个性化需求也日趋增加；尼尔森能整其来自全球100 多个国家移动通讯行业的经验，为通讯行业的用户提供卓越服务品牌爱用好用可用有用商业功能品牌情感体验设计用户界面工程用户体验已经成为企业/产品竞争的核心要素持续关注

30、用户及其体验用户群体多样化，个性化特征强用户需求变化快，产品更新迅速产品使用场景、终端载体、获取渠道多样化关注竞争性需求，同类产品层出不穷必须关注真实用户的真实需求，实时搜集用户信息，及时改进产品问题，并持续关注其使用反馈强调用户体验的UCD工作流程在各行业开始应用某银行UCD流程建设过程图（2009-2010）支付宝基于UCD的流程示意图启动阶段执行阶段优化阶段 银行业开始引入UCD（ USERCENTERED DESIGN（以用户为中心的设计方法） ）方法和机制，并纳入其日常管理中 电子商务关注对用户（商户）的监控，并纳入整体管理和运营系统中用户体验的管理和运作被越来越多的公司所重视组织方

31、面职责方面运作方面 华为技术UCD部180多人，华为终端消费者设计中心300多人 腾讯CDC200多人，各产品线加起来500多人 Vodafone分别在伦敦和杜塞尔多夫设立UE部门，人数不详 联想创新设计中心200多人 新浪微博用户体验中心60多人 华为将UCD流程嵌入到IPD流程中，并每年进行TPM评估，纳入管理者考核要求 华为终端提出“ID牵引硬件，UI牵引软件”的用户体验运作原则，直接向公司总裁汇报； 腾讯CDC及用户至上文化广为业界所称道 Vodafone非常强调用户体验，所有合作方必须经过UE达标，否则产品无法走入市场 联想的用户体验工作流程嵌入到整体开发流程中 华为用户体验部门从用户需求、产品规划到产品设计和验证，端到端负责 腾讯所有产品的规划和设计必须经过用户体验部门，CDC承担了产品不断微创新的职责 Vodafone UE部门产品体验质量问题拥有决策权 各公司越来越多的产品开发和运营倚赖于用户体验的能力,并将用户体验嵌入开发流程