移动端UI界面设计

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

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