第三章3.1 移动端界面设计要素（1）（课件）-高二《移动端UI设计》同步精品课件（电工版2022）

移动端UI设计 1 初识移动端界面设计 2 色彩在移动的界面中的应用 3 移动端界面设计要素 7 综合案例 6 界面的设计与制作 5 移动端界面图标与组件设计 目 录 4 移动端界面版式设计 3 移动界面设计要素 3 移动界面设计要素 3.1移动端界面构成要素 由于移动端尺寸的限制和信息的综合性，如果直接把所有内容放在一个页面显示，会导致信息传达的失误或交互操作的错误。由此，对于整体的软件页面，需要进行构成内容的规划与布局。智能手机已经占领了我们生活中的每项活动，不同的App可以提供不同的功能与服务。下面以智能手机App为例，分析相关的构成要素及其作用。 3.1.1.启动图标 什么是启动图标？以智能手机为例，如果我们想打开手机上的微信，想打开手机上的爱奇艺，或者是想打开手机中任何一个程序，所需要单击的那个图标就是启动图标，也叫手机主题图标。启动图标就是软件程序的标识，形成用户对软件程序的第一印象。通常用户是通过分辨启动图标的形状颜色，来寻找所需要的软件。在如图3-1中我们可以看到，iOS系统启动图标的风格设计统一，整体非常协调。不同于iOS，Android为开源均系统，多家公司共同使用，所以在图标的风格设计上缺乏一致性，相同的功能在不同的手机端会出现不同的图标（图3-2）。 3 移动界面设计要素 3 移动界面设计要素 3.1.2.启动页 启动页是用户启动App后看到的第一个画面，是为了增加品牌或者用户友好度而增加的页面。它们通常是进行品牌宣传、产品名称、Logo或产品标语等的展示。同时，为了确保用户在短时间内的信息接受，设计人员通常会采用简约的形式，并将元素集中在屏幕中间，表现方式可以是静态也可以是动态。（图3-3至图3-5） 3 移动界面设计要素 3.1.3.引导页 引导页通常是一组界面，是为了让用户了解产品动态或者引导用户完成某种操作而设置的页面。引导页的结构和内容对于每个App而言都是高度个性化的。部分App的引导页喜欢使用自定义插画，采用形象、生动、立体的设计吸引用户注意力，同时也便于用户理解其功能和特点。而理财类或社交类App，则会在引导页中进行账号创建、偏好设置、兴趣添加等一系列操作（图3-6、图3-7）。 3 移动界面设计要素 3.1.4.登录注册页 登录注册是现在智能手机App的基本页面，是为了给用户独有的个人中心，包括数据的定制，或数据的保存。它作为一项基础功能，一般是用户初次使用或者退出登录，又或是版本更新和登录过期时才会用到。 目前常见登录注册方式主要有三种，包括手机号登录注册、邮箱登录、第三方登录。 1．手机号登录 随着移动互联网的到来，人们上网的主要设备已经从PC端转移到智能手机。加上手机号码的实名制，全球通业务的普及，使得手机号码也具有了唯一标示性。用手机号码作为登录ID，并用短信验证码的形式来登录注册的方式，逐渐取代了邮箱登录方式（图3-8）。 2．邮箱登录 邮箱登录最初源于PC端，在PC时代的互联网产品多使用邮箱作为唯一ID。随着手机智能化的发展，邮箱登陆正逐渐被手机登录所取代。 3 移动界面设计要素 3．第三方登录 第三方登录是指用户不需要进行信息注册，直接选择第三方账号就能完成登录的方式。这样有助于简化用户注册登录的流程，提高App的用户转化率。国内常见的第三方账号有微博、微信、QQ等，国外常见的第三方账号有Facebook、Twitter、Google等（图3-9）。 3 移动界面设计要素 3.1.5.缺省页 缺省页通常是页面的信息内容为空或信息响应异常时加载的页面。通常缺省页是为了提示用户在异常状态的操作，同时也是安抚用户情绪的重要手段。缺省页的内容设计，通常采用简洁、直观、易懂的方式表达当前的异常状态，同时提供用户解决当前问题的方案（图3-10）。 3 移动界面设计要素 3.1.6.首页 首页是任何一款App都需要的重要组成部分。首页是大多数用户与App交互的主要界面。首页的内容及设计取决于App的类型、功能和定位。但是不同类型的App之间也会有一些相同的组件，如搜索栏、标签栏、导航栏、功能图标等，总的来说，都是以归纳整理信息内容，为用户提供多种查找信息的导航模块为主。因此，首页的布局设计应突出信息分组层级和导航模块的差异化。（图3-11至图3-13） 3 移动界面设计要素 3.1