移动端UI设计 电子课件.pptx

移动端UI设计电子教案 1初识移动端界面设计2色彩在移动的界面中的应用3移动端界面板式设计的原则6综合案例5不同的界面风格4移动端界面设计的基础目 录 1初识移动端界面设计 本章将对移动端界面设计进行初步的阐述：包括移动端界面设计的特点、三大主流平台的设计原则、移动端界面的尺寸标准、移动端界面色彩搭配原则、移动界面设计草图设计流程与各项准备工作，使读者较清晰的了解移动界面的设计与制作。 1.1.1 手机移动端界面设计 手机交互界面的设计要遵循易用性、易理解性、高效、人性化、情感化的设计原则，简单归纳以下几点。1.视觉效果很重要 11.1 移动端界面设计的特点 随着科技的发展，移动设备已经成为用户体验移动网络的重要媒介。?作为软件的界面是软件与用户交互的最直接的层面，因此界面设计的视觉呈现效果决定用户对软件的第一印象。好的界面设计能够引导用户自己完成相应的操作，起到良好的向导的作用。而现代移动设备的便携性与轻便性，决定移动界面也必须应具有自己的特点。初识移动端界面设计1.1移动端界面设计的特点 任何一个设计都需要考虑视觉效果，人们大都喜欢美得东西，愿意在静静中享受这种美的感觉，因此，视觉化元素就要体现出美的东西，因此许多移动端都会添加动画功能，或者一种情感交互功能，目的是给人们在视觉上体现出不同画面感和兴趣感，提高关注度。 2.以简洁为主 通常手机网站在用户下载和浏览时要比PC端网站的速度慢，页面东西太复杂，会耗掉用户等待网站加载的耐心，尤其是导航栏要简短清晰，能够快速地指引用户浏览网站的深层信息。对于网站内容来说，简洁突出重点即可。图1-1 简洁明了的操作界面3.避免使用弹出窗口 无论是出于方便用户联系网站客服还是做些小广告的目的，都要尽可能避免弹出窗口的应用，添加这些窗口，必然会影响用户体验，阻碍用户浏览网站的视线，进而占用用户流量，引起反感而放弃对网站的继续访问。1初识移动端界面设计 4.手机网站图片要适配设置 从手机端浏览网站毕竟不如PC端灵活自如，虽然网站设计技术可以解决网站适应屏幕的问题，网站图片也不例外，但为了用户能将页面使用图片的地方看得更加清晰，可采用整站缩放的模式（图1-2），而不是用户点击单张图片的缩放模式，当然，手机网站使用的图片应该力求精准。5.网站操作简单化 对于新页面的打开方式，最好采用当前页面显示的方式来设计，以免新窗口造成网站资源占用的负担，设置让用户快速找到页面出口进行跳转，避免不断地进行返回操作。6.设置交互式的互动行为 用户在移动客户端都喜欢进行留言，分享功能。现在比较流行的微信公众号，往往一篇帖子都会造成几千人的持续浏览、点赞或者分享内容，粉丝喜欢中这种参与行为，因为这种圈子拉动粉丝在持续发酵中，用户慢慢都会舍不得离开。1初识移动端界面设计 7.登录界面的人性化 不管么样的软件，在登录界面都要有自己的特色。让用户等待是一个糟糕的行为。因此在用户等待过程中，出现一些特殊的界面，让用户在看界面中慢慢忘记等待时间。这样用户并不会出现反感，反而因为这种界面愿意等待一会。1.1.2PDA及车载移动设备界面的设计特点 1、PDA（Personal Digital Assistant），又称为掌上电脑，可以帮助我们完成在移动中工作、学习、娱乐等。PDA具有内容优先，为触摸而设计，流畅性，多通道设计，易学性，为中断而设计以及智能有爱的界面设计特点。 ①内容优先：界面布局应以内容为核心，提供符合用户期望的内容。 ②为触摸而设计：界面的交互系统以自然手势为基础建构，符合人体工学并保持一致性； ③转换输入方式：使用各种手机的设备特性和设计手段，减少在应用内的文字输入； ④多通道设计：发挥设备的多通道特性、协同的多通道界面和交互，让用户更有真实感和沉浸感； ⑤易学性：保持界面架构简单、明了，导航设计清晰易理解，操作简单可见，通过界面元素的表意和界面提供的线索就能让用户清楚地知道其操作方式； 1初识移动端界面设计 ⑥为中断而设计：考虑应用的使用情境，确保在各个产出中断的情境下，让用户恢复之前的操作，保持用户的劳动付出； ⑦智能有爱：给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。 ?2、如果说传统的车载界面体验非常糟糕，我想没人会否认。在科技如此发达的现代，我们的车载系统仍与90年代所差不远。界面大多简陋，且有很多用不到的功能，需要的却又很难找到。 但也有一些车载设备功能分区明显，具有合理的菜单设置以及简约的设计风格，如图1-3所示。1.1.