用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