用Photoshop设计制作安卓手机解锁界面的分析与实践

黄艺婷,李 曼

(1.山西机电职业技术学院，山西 长治 046011; 2.商丘职业技术学院，河南 商丘 476000)



用Photoshop设计制作安卓手机解锁界面的分析与实践

黄艺婷1,李 曼2

(1.山西机电职业技术学院，山西 长治 046011; 2.商丘职业技术学院，河南 商丘 476000)

以设计安卓手机解锁界面图例为例，分析其设计流程、界面构成和界面色彩搭配，并通过Photoshop软件多种工具的应用介绍手机解锁界面设计制作的方法和步骤. 通过实践，提高对安卓手机解锁界面设计所需基本知识和Photoshop软件的应用能力.

安卓手机解锁界面；Photoshop软件；设计；制作

图1 安卓手机解锁界面

随着移动互联网的发展，智能手机和平板电脑中汇集了大量的重要信息和个人隐私信息，这些信息一旦被泄露，将会给用户带来严重的后果. 所以，用户在使用这些设备前，必须将一个滑块或者类似滑动的物体移动到某一位置，解锁后才能进入主界面进行操作. 解锁界面的设计可起到防止用户误操作和提高用户体验的作用. 本文以图1所示设计制作完成的安卓手机解锁界面为例，研究应用相关知识和Photoshop软件设计制作解锁界面的方法和步骤. 通过实践，使学生掌握解锁界面制作的技巧和方法步骤，提高对相关知识和Photoshop软件的应用能力.

1 设计流程

图2 设计流程

安卓手机的解锁界面设计流程如图2所示. 确定解锁方式，因手机解锁有拖动解锁、密码解锁、计算解锁以及声控解锁等多种方式，不同的解锁方式不仅可以赋予手机界面不同的视觉灵性，而且在安全性与便捷性之间也诠释了各自不同的特点. 解锁方式的确定，对解锁界面的设计起着至关重要的作用，也是解锁界面设计中最能展现设计师创意的亮点. 其中，拖动解锁以其视觉感、便捷性和趣味性等特点，成为用户最喜爱和常用的解锁方式，所以本文确定解锁方式为拖动解锁. 确定解锁内容，解锁后不仅可以直接进入主界面或者快速解锁到相机和信息功能，还可以不用解锁听音乐或者查看天气信息等，本文确定解锁内容为解锁后直接进入主界面. 确定界面风格，目前较流行的界面风格有写实风格、卡通风格和简约风格等，本文确定界面风格为常见的简约风格.

2 界面构成

2.1 壁纸

手机壁纸有照片式、场景式、海报式和插画式等多种设计类型，其中照片式是最为常见和常用的类型. 如图1所示，壁纸采用了模糊的照片式背景. 根据当今流行的UI设计趋势，通常利用Photoshop软件中的模糊滤镜工具将各种类型的照片设置成模糊效果，这样设计可以规避复杂的设计和降低设计成本，符合时下流行的扁平风和现代风，不仅能使界面主要内容更加醒目，也能使用户阅读时感到轻松和增强对手机的亲切感.

2.2 状态栏和内容区

状态栏由信号强度符号、时间符号和电池电量符号3个部分组成. 内容区由时间日期和解锁方式两个部分组成. 解锁方式采用的是拖动解锁，即用一个扁平化类似锁形的白色造型沿着3个慢慢呈渐隐效果的箭头的指示方向进行解锁. 这种锁形解锁方式在设计时也可以有其他的表现方式和更好的创意，既可以通过各式各样的视觉表现手法增强用户体验，还可以加入各种游戏玩法增强用户解锁时的趣味性.

3 界面色彩搭配

色彩是设计中最具表现力和感染力的因素，根据美国流行色彩研究中心的调查表明，人们在选择商品时存在“7秒钟定律”，在这短暂的7秒内，色彩的作用占67%，同样在界面设计中色彩也起了关键性的作用. 假如在搭配过程中找不出更合适的颜色搭配，选用蓝色是相对安全的，在搭配时通常与黄色、红色、白色和黑色等进行搭配[1]26-30. 界面色彩运用了蓝白色搭配. 蓝色是大自然最常见的色彩，是男性和女性都喜爱的色彩，有“可靠、可信、清爽、专业”等寓意，在强调科技、效率的商品设计中大多选用蓝色，而白色有“纯洁、朴素”等寓意. 界面背景则选取了一张以蓝色为主的照片，将照片应用了模糊滤镜特效后，天空和地面的浅蓝色与周围的深蓝色搭配使整个界面呈现出朦胧感、空间感和透明感. 状态栏中的相关符号，内容区的时间日期和锁形图标采用的白色与蓝色形成了较强烈的色彩对比，整个界面显得清新、素雅、极具品质感.

4 安卓手机解锁界面的设计制作

4.1 Photoshop软件简介

安卓手机解锁界面，使用Photoshop CS6软件进行制作，这款软件由Adobe公司研制开发，是该公司旗下最为出名的图像处理软件之一；是集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出为一体的图形图像处理软件；是一款最先进和最流行的应用方案，具有强大的拍照和突破性功能，可选择、写实绘画和修饰智能，能创建惊人的高动态范围图像[2]45-56. 设计者在设计过程中可自由尝试各种创意并传达创作理念，将自己的灵感与创意完美地融合.

4.2 安卓手机解锁界面制作的方法步骤

4.2.1 壁纸的制作

根据安卓尺寸规范，壁纸在设计时采用安卓常见标准基础设计尺寸1 280 px*720 px，然后在画布中导入照片素材并调整其大小和位置，用高斯模糊滤镜对该素材进行半径值为25 px的模糊设置，即可完成模糊式背景的制作.

4.2.2 状态栏的制作

根据1 280*720 px的布局规范，状态栏在设计时采用的尺寸为720 px*50 px，其背景色与壁纸色彩相近，位置位于屏幕最顶部. 当设计状态栏中的信号强度符号、时间符号和电池电量符号时，应将状态栏比例放大至600%以便于对这些较小符号进行更精准的设计，设计时注意信号强度符号和电池电量符号与界面边界相距20 px. 其中，信号强度符号由5个从小到大排列的矩形组成，设计时可用Photoshop软件的形状工具组中的矩形工具进行绘制，绘制时每个矩形的高度要设置成偶数像素，以便于后期程序员进行布局，同时注意每个矩形的宽度和间距相等且底部对齐，该符号在状态栏中的位置上下居中对齐. 由于安卓是基于Linux平台的开源手机操作系统，对字体没有严格要求，既可以使用安卓系统的标准字体Robot字体，也可以使用微软雅黑字体进行设计，但是整个版面要以字体统一为设计基调，具有一种符合整个作品风格的设计倾向，形成总体的情调和感情特征，不能多种文字或每种文字自成风格，各行其是[3]34-38. 时间符号的字体应用了微软雅黑字体. 电池电量符号利用矩形工具进行绘制，绘制时电池边框形状和正极形状的宽度和高度均为偶数，内部电量形状与外部边框形状上下左右间距为1 px.

4.2.3 内容区的制作

内容区中的时间要与状态栏中的时间一一对应，字体应用微软雅黑字体，位置在整个界面中左右居中对齐，日期和时间分别分布在两行且宽度一样. 锁形状在设计时可用Photoshop软件的形状工具组中的圆角矩形工具、椭圆工具和路径选择工具相配合进行绘制：首先，绘制锁形形状的圆角外形，利用圆角矩形工具绘制(半径值为30 px)，其次，绘制中间的葫芦形锁芯，利用椭圆工具和路径选择工具绘制，再次，利用椭圆工具和矩形工具绘制锁形造型上的半圆形状. 锁形状下面的3个箭头在设计时可用自定义形状工具进行绘制并设置不同的透明度以形成渐隐效果.

5 结语

通过以上阐述把界面设计的相关知识与Photoshop软件的多种功能紧密结合起来进行安卓手机解锁界面的设计制作，突显了流行的设计趋势，突出了解锁界面的主要功能，整个界面的设计简洁大方、色彩清爽，构思新颖且有创意，达到了传递讯息和保护信息的作用.

通过实践，使学生掌握了设计制作安卓手机解锁界面的技巧和方法步骤，不但提高了对相关知识和Photoshop软件的应用能力，而且提高了应用Photoshop软件表达和实现设计意愿和解锁界面制作的实践能力.

[1] 王红卫.APP智能手机UI创意美化设计[M].北京:机械工业出版社,2016.

[2] Art Eyes设计工作室.Photoshop玩转APP设计 [M].北京:人民邮电出版社,2015.

[3] Art Eyes设计工作室.Photoshop玩转移动UI设计 [M].北京:人民邮电出版社,2015.

[责任编辑 冰 竹]

Analysis and Practice of Android Mobile Unlock Interface Design with Photoshop

HUANG Yiting1, LI Man2

(1.ShanxiInstituteofMechanicalandElectricalEngineering,Changzhi046011,China2.ShangqiuPolytecnic,Shangqiu476000,China)

Taking the design of Android mobile phone to unlock the interface legend as an example, this article analyzes the design process, interface structure and interface color collocation, and introduces the methods and steps of making the unlock interface design of mobile phone through the application of Photoshop software tools.Through practice, the basic knowledge of Android mobile phone unlock interface design and the application ability of Photoshop software have been improved.

Android mobile unlock interface；Photoshop software; design; manufacture

2017-04-12

黄艺婷(1982- )，女，山西长治人，山西机电职业技术学院讲师，硕士，主要从事计算机理论研究； 李 曼(1982- )，女，河南商丘人，商丘职业技术学院讲师，硕士，主要从事计算机软件技术研究。

TP317.4

A

1671-8127(2017)03-0098-03