移动界面设计II-山东大学课程中心.PPT

– 用户用手机搜索天气或者双色球时，用户目标是快速获取天气和双色球的最新信息，如果直接在结果页面展示相关信息，用户只需完成前两个任务就可达到目标，从而提升交互效率。– 搜索肯德基，在搜索结果页面显示拨打电话功能，用户点击后直接拨打电话，省去了记录手机号和拨号的任务。 移动界面网页设计 适配竖屏横向尺度，禁止出现横向滚屏 常规QVGA机型竖屏状态下，14号字体，单行仅显示13.5个字。资讯频道的新闻短标题要控制在13字以内才能在一行以内完整显示。标题折行会造成在相同空间承载信息量减少；频繁的眼动容易引起视疲劳；在视觉上带来无序松散的感受。?? 移动界面网页设计 焦点跳转的频度 对非触屏手机，在不影响功能交互的前提下，应尽量减少按键做功。不同的浏览器，通过五向键操纵焦点的跳转方式是有差异的。 UCWeb浏览器焦点跳转示意： 移动界面网页设计 焦点跳转的频度 QQ浏览器焦点跳转示意： 移动界面网页设计 给予操作及时响应和恰当反馈 强提示 移动界面网页设计 弱提示 移动界面网页设计 返回顶部 １．对网站内容有干扰（视觉干扰/tab键无法跨越/页面朗读器/打印机无判断）； ２．返回顶部（“Back to Top”）措辞具有误导性，用户对“顶部”的认知是不固定的； ３．浏览器或键盘（home/page up）内建功能完全可以实现返回的功能。 触屏网页常用界面元素设计 触屏网页常用界面元素设计 触屏网页常用界面元素设计 “Next” A：时效类翻页控件  新闻类产品、微博类产品，SNS应用的好友新鲜事等产品，用户通常是关注最新产生的信息，较旧的信息则随着时间推移慢慢下沉；这就需要简单的翻页操作，同时又能够方便快速的刷新页面，获取最新信息。 B：阅读类翻页控件 所展示的信息具有很强“连续性”“流”等属性，典型的例子是网络小说、电子书等长篇幅的阅读类信息。 此时的翻页控件，不仅仅要提供简单的前后翻页功能，同时也告诉用户当前的阅读位置（如“23/344页”等），提供快速翻页和定位的功能（如页面跳转功能和缩略浏览等），同时能够标记最后一次阅读的位置。 这是Android操作系统下的一个电子书的翻页控件，通过选择百分比来粗略定位整本书的阅读位置，再在小范围内准确翻选书的页码，基本上符合我们平时阅读纸质书籍的一些行为习惯（拿过一本书，我记得那段精彩的片段是在书读到一多半的时候，好像是第五章？应该就是在这几页，80页？不是，在后面；……哦找到了，在81页） C: 浏览/查找类翻页控件 信息多以列表形式展示，各块信息之间相对独立。它们的排列和呈现方式或按时间先后、或按首字母顺序、或随机排列。例如论坛类产品的帖子列表、博客文章列表、图片库、媒体库等。 ipad上一个应用的翻页控件，点击控件可以在展示当前页的同时，浏览其他页面的内容概要，而不必逐页翻看。 手机端翻页控件的展现形式 手机端翻页控件的展现形式 1.上一页，下一页的跳转2.首页、尾页的跳转3.页码链接4.当前位置指示（如：3/56页 等）5.页面跳转控件（直接输入页码然后跳转）6.“显示更多…”之类的链接文字7.章节之间的跳转（小说类产品）…… 第8章 移动界面设计实例 山东大学计算机学院 移动界面设计举例 语音交互 移动界面设计举例 放大输入框 问题：鉴于移动设备的屏幕过小，用户很难看清并及时纠正输入过程中的错误 解决：当用户选中表单的输入框后，系统将表单的输入框放大至整个屏幕，方便用户看清输入的内容 移动界面设计举例 放大输入框时请注意将各输入框的标签顶对齐，标签应尽量简短。例：Google的注册表单采用了标签左对齐，放大输入框后，我们只看到输入框，标签被隐藏。 移动界面设计举例 隐藏密码 很多表单涉及到输入密码，为防止其他人偷窥，表单设计通常自动把输入的密码变为*号。这个设计表面上确保了安全，却带来可用性问题：输入密码时如果你的视线不小心移开了一下，就得重新输入。 Iphone的设计：当你输入密码时，并不立即变为*号，而是停留1、2秒之后，让你可以看到输入的内容。 移动界面设计举例 弹出菜单控件 下拉框设计 Web上的解决方案是：当你浏览下拉框里的列表项时，光标一直跟随，光标离开时，下拉框关闭。即使有经验的互联网用户，也常常会丢失目标，重新来一次。对移动设备的交互来说，这更是个挑战，我们需要寻找新的方式。 看看Iphone的设计：用户点击菜单后，屏幕下方出现列表，你可以通过触摸操作中的拖拽、轻弹、推，控制滚动列表的速度，找到目标，为方便点击，目标也被设计地很大。 移动界面设计举例 复合菜单 弹出菜单控件同样可以应用到复合菜单。比如选择年、月、日时，可以把3个下拉菜单合并在一个区域完成。 移动界面设计举例 Google的Android系统也使用了复合菜单