移动界面设计

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,移动界面设计,移动界面的设计,移动界面的设计是人机交互技术研究的一个重要方向。,移动应用的界面设计符合人机交互设计的一般规律，可以利用人机交互界面的一般设计方法；,由于移动设备的便携性、位置不固定性和计算能力有限性以及无线网络的低带宽高延迟等诸多的限制，移动界面设计又具有自己的特点。,移动设备,（复习）,目前主要的移动终端设备种类包括手机、掌上电脑,PDA,、笔记本电脑以及各种特殊用途的移动设备如车载电脑。基于可移动性的考虑，目前移动互联设备以智能手机与掌上电脑为主,。,移动界面设计应注意的问题,可用性,了解目标平台,移动设备的复杂性使得了解目标应用平台的相关细节显得尤为重要。,重要的软硬件厂商往往会提供详细的规范文档，从中可以获得必要的目标平台信息。,根据目标平台信息，开发个性化的版本，通过充分利用每种设备的优势特性提高移动应用的可用性。,易于检索,避免嵌套过深的多级菜单，缩减不必要的功能。,以满足用户的目标需要为准，尽量减少用户进行信息访问时所要采取的步骤。,同时尽可能创建多种信息访问途径。,采用一致的界面风格,不必要的差异常常会让用户感到不习惯，从而降低可用性。,一致的界面风格对用户来说很直观。,应当检查每个布局和每个显示来保证其一致性。,各种移动应用开发平台都提供某种形式的应用界面的风格指南，仔细研究这些指南对于移动应用的界面设计非常重要。,避免不必要的文本输入,尽量使用户避免不必要的文本信息的输入，而采用选择列表或模糊查询，即输入一部分查询关键词就可以获得检索目标或包含目标的列表可供用户选择，这样可以降低对于用户进行关键字文字输入的麻烦。,根据用户的要求使服务个性化,允许应用保留用户信息以便能够记录用户的个性化信息。,下一次用户启动应用时可以得到个性化的服务。,最大限度地避免用户出错,预测用户可能出现的错误，提供相应的机制尽可能避免。,例如：如果用户要输入日期，可以采用格式化输入的方法，检查用户输入是否全部是数字，而且代表日期、月份以及年份的数字的取值范围是否在合法的范围内。,文本信息应当本地化,要根据应用所使用的地域特点，使应用本地化。,用词得当与否也可以决定某种应用可用性的好坏。词义表达清楚是关键，要避免使用含混不清的用语。,移动界面设计原则,设计原则,1.,简易性,界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。,2.,用户语言,界面中要使用能反应用户本身的语言，而不是,设计,者的语言。,3.,记忆负担最小化,人脑不是电脑，在设计界面时必须要考虑人类大脑,处理信息,的限度。人类的短期记忆极不稳定、有限，,24,小时内存在,25%,的遗忘率。所以对用户来说，浏览信息要比记忆更容易。,4.,一致性,是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与内容相一致。,5.,清楚,在视觉效果上便于理解和使用。,6.,用户的熟悉程度,用户可通过已掌握的知识来使用界面，但不应超出一般常识。,7.,从用户的,观点,考虑,想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。,通过比较两个不同世界,(,真实与虚拟,),的事物，完成更好的设计。如：书籍对比竹简。,8.,排列,一个有序的界面能让用户轻松的使用。,9.,安全性,用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。,10.,灵活性,简单来说就是要让用户方便的使用。即互动多重性，不局限于单一的工具,(,包括鼠标、键盘或手柄,),。,11.,人性化,高效率和用户满意度是人性化的体现。用户可依据自己的习惯定制界面，并能保存设置。,界面基本要素,1.,手机界面层级：待机界面,主菜单,二级菜单,三级菜单 界面除了包括图标和文字外，比较重要的还有呼叫，发送信息等以及计算器，日历界面等,2.,明确意义的图标，风格鲜明的版面设计是手机界面设计的重要工作，目前较为流行的是欧洲简单风格，以及韩国的时尚绚丽的风格。,3.,在更新颖的交互操作和与手机设计的整体结合上，韩系手机作的比较好，而在可用性和体验难度上，欧系手机则比较优秀。,移动界面设计要素,移动界面也包含很多种类的设计要素，主要界面设计元素有：,菜单,按钮,多选列表,文字显示,数据输入,图标与图像,报警提示,移动多媒体,移动界面设计要素,菜单,主要目的用于提供项目选择。,设计移动界面可用性好的菜单应遵守的规则 。,供选择的项目应根据需要进行逻辑分类，如果没有逻辑顺序，可以按优先级分类，将被选择频率最高的项目放在列表的最顶端。,每一屏中不宜设计过多的选项，如果一个菜单上的选择项目太多，应该建立一个“更多”链接，将菜单扩展到多个屏幕。,菜单上的每一选项一般应当简明扼要。,菜单画面,移动界面设计要素,按钮,一般移动界面中的按钮不经常使用图标。,在按钮属性的设置上根据所显示的应用类型和信息类型，使用风格和标注一致的标签。,汉字标签则一般需要注意字数的控制 。,常见的通用按钮,OK,（,确定）：可用于菜单项的选择或表示对某一操作的认可，如确认删除。,Done,（,完成）：可用于结束当前操作，并返回到上一层任务。,Back,（,返回）：使用户回到前一个操作屏幕。,移动界面设计要素,移动界面设计要素,多选列表,在移动应用中使用多选列表，可以最大限度地减少文本输入。,移动界面设计要素,文字显示,文字显示控件主要用于显示较多数量的文字信息。,移动界面设计要素,文字显示的一般可用性建议：,每一屏幕显示内容不宜过多，如果信息较多，应定义一个链接。,一般情况下文字信息应当使用换行方式进行显示。,移动界面设计要素,图标与图像,图像、图标可以增强显示信息的效果。,移动界面设计要素,报警提示,警报提示，可以将用户所关心的最新信息通知给用户，或向用户提供有关当前状况的信息。,一般使用文字信息，可能加入一定的图标。,常用的提示类型有：,确认提示,信息提示,警告提示,出错提示,持久性提示,等待提示,如何做移动界面设计,用户心态,用户在面对移动应用时，心态有三大特征：,第一是微任务，,我不会拿手机写一篇论，不会从头到尾看一部电影，使用是随时随地的；,第二是查看周遭，也就是我所处的环境。,我可能会打开手机，看有什么好的馆子，有什么好的电影，打折团购等等；,第三个是无聊，,很多移动用户更多情况是无聊的，打开手机，从左到右的翻，翻到最后再把手机关掉。,针对这三种特征的心态，我们怎么样去面对？,第一，应用最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸；,第二个要满足用户的情景需求；,第三个要帮助用户去消磨时间。,如何做移动界面设计,屏幕布局,一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。,另外还有一个原则，最小的触摸单位，一般是,44,个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。,大家熟悉的，比如,iOS,的桌面，最主要的操作是在最下面，常用的四个钮，上面的内容可以来回滑动去选择。微信的操作也是在下面，重要的信息,我们的聊天内容放在上方。,如何做移动界面设计,一、简单,用户是要微任务的，心态是有点无聊的，我们要让界面变得简单。但设计更简单的体验，往往意味着要追求更极端的目标。因为你要充分理解用户的需求，理解用户现在想要什么，理解他现在的心态是什么，理解他的大情绪是什么。,如何做移动界面设计,1,、隐藏或者干掉,不太重要，但是必要的东西，可以把它隐藏起来；无关紧要的东西，能干掉的就干掉，不要把什么东西都塞给用户。,比如,Path,，它把五个常用的按钮，集成到“,+”,里。点击加号以后，有拍照，音乐等功能。而界面上，打开这个应用，最直观的就是最主要的信息，没有其他的干扰。比如之前有多少人看过我的图片，它把这个信息直接集成在图片右上角，没有占据太多地方，点击之后，可以发表情、评论、直接删除等，做到了隐藏，是个非常干净、漂亮的页面。,2,、分区,以酒店管家为例，酒店图片，酒店提供的服务设施，价格，这个是最主要的内容，放在首要位置；点评放在了其次；然后是交通状况，周边的设施等，有一个明确的分区。,用户一旦知道了这种分区方式，他下次再点开这个应用，想看哪个，他的眼睛会直接落在那儿。,3,、帮用户决策,用户其实希望看到的是开发者直接给他们一个东西，非常简单，不用去记，不用去选择。那么怎样帮用户做决策呢？,以酒店产品为例，当用户需要订酒店时，很多应用都是需要用户输入条件，比如城市、日期、价格区间、房型等，之后得到酒店列表。快捷酒店管家中，用户打开应用，看到就是酒店页面，没有任何选择。这并不是简单粗暴，而是对用户研究之后提供的功能。,快捷酒店管家的核心用户，是本地化的，要在本地找一个快捷酒店，住一晚上。比如说在通州住，公司在石景山，这两个地方有,60,公里，晚上加班加到,12,点，是打车回通州，还是说直接就在当地找一个快捷酒店，住一晚上，第二天洗个澡再慢慢悠悠上班。我们要做的，先给用户定位，然后提供附近的快捷酒店。,二、爽快感和新奇感,刚才提到，用户很多时候是无聊的，我们的应用要能够让他感觉操作起来很舒服，让他经常使用，以干掉竞争对手；另外要让用户对应用产生好感，才有可能对应用评分，在微博分享。,1,、视觉反馈,用户在操作应用的时候，要给他提供时时的视觉上的反馈。,快捷酒店管家中，选择了某个酒店某个房间后，可能会去选择日期。如果是订之后的日期，就有一个拖动的操作。从开始日期往后面拖，拖动的同时，会出现一个比较大的日期显示。为什么呢？,这并不是一个标准控件。之所以这么做，是因为这里的动作是拖动，不是点，拖的时候用户并不知道现在拖的是哪，所以需要一个提示。这个是视觉反馈，这种操作在一般的日历里头是看不到的。拖动本身是一种更好的交互方式，而明确的设置也让用户感到更舒服，很有意思。,2,、隐喻,比如,iOS6,里面的,Passbook,，它的界面上就明显的用了隐喻。它本身算是一张数字化的贵宾卡或者说消费卡，界面做的也非常像一个消费券，这个界面非常精美，光泽、整个颜色的搭配等等都非常像真实的，而且就用了条形码。,大家对苹果的界面都感觉比,Windows,要好，就是因为苹果做的图标，界面都非常精美非常逼真，这也是苹果能够快速超越,Windows,的一个非常重要的地方。,3,、操作方式的创新,比方说，我现在在这个位置，想知道某一些位置有什么好吃的，一种方式是定位了以后，直接就把附近所有东西显示出来。,还有一种方式，我的手在上面滑动，它会记录下轨迹，我只滑动这么一个区域，那就只会现显示这个区域内的商户。这种方式特别直观，而且用户想怎么样就怎么样，想画一个五角星就画一个五角星，想画一条线也可以，它只给你想要的地方的那些内容，这就是一种创新。,三、在设计中浸入情感,什么样的设计师，什么样的团队才算优秀？我们要对设计对应用浸入感情。它会给产品带来一些好玩、也可能让用户觉得有意思的地方。,比如定机票应用中，有头等舱和经济舱。经济舱是一个普通的人，而头等舱是一个戴着帽子，系着领结，胸前别着手帕的这么一个人，很酷的老板角色，体现出了头等舱和经济舱之间的区别。要做头等舱的人，一般都愿意自己看到自己这么一个形象。,再比如微信,4.0,，刚打开的时候有一张图片，非常文艺非常在都市的感觉的一张图片，配文字“如你所见，微信，是一个生活方式”。其实它在干嘛呢？它是在提示用户，新增了自己相册功能。它虽然是给用户介绍新功能，但是它把整个情绪融在里面。,设计研究的流程为：,产品特性,用户心理,市场背景,图形设计策略,设计检验,实际设计投放,设计注意事项,尺寸问题：,128160,176220,240320,象素尺寸是目前较常见的手机屏幕尺寸，在设计时可以根据实际产品要求进行设计，更大的屏幕可以有更多的交互表现和视觉元素的支持，较为自由。,色彩问题：由于手机本身的限制，在色彩的还原程度上没有,pc,如此完善，因此在选用色彩时要根据使用的屏幕进行调节。,可实现性问题：受到硬件运算速度和内存的影响，以及不可预计的后台程序开发难度，过于复杂的效果将很难进行实现，与程序工程师和,ui,工程师，硬件工程师的,沟通,显得尤为重要。,建议工具：常用的,PHOTOSHOP,AI,和一些,3D,软件是制作的常用工具，在最终输入时会需要一些模拟程序以及平台程序的支持，不过在设计阶段可以暂不考虑尺寸：建议选择,240X320,大小的屏幕尺寸进行设计，自由度和发挥空间会大一点,作业一：,理论类,：（作业本）,一、谈谈你喜欢的手机图标并画出草图结合，同时结合自己的喜好手绘一个图标（可以自己名字的体现，也可以自拟一个题目）并写上设计说明,二、请针对自己的手机界面 进行一下介绍，品牌、系统、界面的优 缺点，你作为应用者对你手机界面的设计及操作有哪些合理行建议,实践类,：（,A4,打印 彩色）,一、水晶,MSN,图标，进行创意,（颜色变化、手中、身旁、加背景、）,二、请针对自己的手机界面 进行一下介绍，品牌、系统、界面的优 缺点，你作为应用者对你手机界面的设计及操作有哪些合理行建议,