黃藝婷,李 曼

(1.山西機電職業(yè)技術(shù)學(xué)院，山西 長治 046011; 2.商丘職業(yè)技術(shù)學(xué)院，河南 商丘 476000)

?

用Photoshop設(shè)計制作安卓手機解鎖界面的分析與實踐

黃藝婷1,李 曼2

(1.山西機電職業(yè)技術(shù)學(xué)院，山西 長治 046011; 2.商丘職業(yè)技術(shù)學(xué)院，河南 商丘 476000)

以設(shè)計安卓手機解鎖界面圖例為例，分析其設(shè)計流程、界面構(gòu)成和界面色彩搭配，并通過Photoshop軟件多種工具的應(yīng)用介紹手機解鎖界面設(shè)計制作的方法和步驟. 通過實踐，提高對安卓手機解鎖界面設(shè)計所需基本知識和Photoshop軟件的應(yīng)用能力.

安卓手機解鎖界面；Photoshop軟件；設(shè)計；制作

圖1 安卓手機解鎖界面

隨著移動互聯(lián)網(wǎng)的發(fā)展，智能手機和平板電腦中匯集了大量的重要信息和個人隱私信息，這些信息一旦被泄露，將會給用戶帶來嚴(yán)重的后果. 所以，用戶在使用這些設(shè)備前，必須將一個滑塊或者類似滑動的物體移動到某一位置，解鎖后才能進入主界面進行操作. 解鎖界面的設(shè)計可起到防止用戶誤操作和提高用戶體驗的作用. 本文以圖1所示設(shè)計制作完成的安卓手機解鎖界面為例，研究應(yīng)用相關(guān)知識和Photoshop軟件設(shè)計制作解鎖界面的方法和步驟. 通過實踐，使學(xué)生掌握解鎖界面制作的技巧和方法步驟，提高對相關(guān)知識和Photoshop軟件的應(yīng)用能力.

1 設(shè)計流程

圖2 設(shè)計流程

安卓手機的解鎖界面設(shè)計流程如圖2所示. 確定解鎖方式，因手機解鎖有拖動解鎖、密碼解鎖、計算解鎖以及聲控解鎖等多種方式，不同的解鎖方式不僅可以賦予手機界面不同的視覺靈性，而且在安全性與便捷性之間也詮釋了各自不同的特點. 解鎖方式的確定，對解鎖界面的設(shè)計起著至關(guān)重要的作用，也是解鎖界面設(shè)計中最能展現(xiàn)設(shè)計師創(chuàng)意的亮點. 其中，拖動解鎖以其視覺感、便捷性和趣味性等特點，成為用戶最喜愛和常用的解鎖方式，所以本文確定解鎖方式為拖動解鎖. 確定解鎖內(nèi)容，解鎖后不僅可以直接進入主界面或者快速解鎖到相機和信息功能，還可以不用解鎖聽音樂或者查看天氣信息等，本文確定解鎖內(nèi)容為解鎖后直接進入主界面. 確定界面風(fēng)格，目前較流行的界面風(fēng)格有寫實風(fēng)格、卡通風(fēng)格和簡約風(fēng)格等，本文確定界面風(fēng)格為常見的簡約風(fēng)格.

2 界面構(gòu)成

2.1 壁紙

手機壁紙有照片式、場景式、海報式和插畫式等多種設(shè)計類型，其中照片式是最為常見和常用的類型. 如圖1所示，壁紙采用了模糊的照片式背景. 根據(jù)當(dāng)今流行的UI設(shè)計趨勢，通常利用Photoshop軟件中的模糊濾鏡工具將各種類型的照片設(shè)置成模糊效果，這樣設(shè)計可以規(guī)避復(fù)雜的設(shè)計和降低設(shè)計成本，符合時下流行的扁平風(fēng)和現(xiàn)代風(fēng)，不僅能使界面主要內(nèi)容更加醒目，也能使用戶閱讀時感到輕松和增強對手機的親切感.

2.2 狀態(tài)欄和內(nèi)容區(qū)

狀態(tài)欄由信號強度符號、時間符號和電池電量符號3個部分組成. 內(nèi)容區(qū)由時間日期和解鎖方式兩個部分組成. 解鎖方式采用的是拖動解鎖，即用一個扁平化類似鎖形的白色造型沿著3個慢慢呈漸隱效果的箭頭的指示方向進行解鎖. 這種鎖形解鎖方式在設(shè)計時也可以有其他的表現(xiàn)方式和更好的創(chuàng)意，既可以通過各式各樣的視覺表現(xiàn)手法增強用戶體驗，還可以加入各種游戲玩法增強用戶解鎖時的趣味性.

3 界面色彩搭配

色彩是設(shè)計中最具表現(xiàn)力和感染力的因素，根據(jù)美國流行色彩研究中心的調(diào)查表明，人們在選擇商品時存在“7秒鐘定律”，在這短暫的7秒內(nèi)，色彩的作用占67%，同樣在界面設(shè)計中色彩也起了關(guān)鍵性的作用. 假如在搭配過程中找不出更合適的顏色搭配，選用藍色是相對安全的，在搭配時通常與黃色、紅色、白色和黑色等進行搭配[1]26-30. 界面色彩運用了藍白色搭配. 藍色是大自然最常見的色彩，是男性和女性都喜愛的色彩，有“可靠、可信、清爽、專業(yè)”等寓意，在強調(diào)科技、效率的商品設(shè)計中大多選用藍色，而白色有“純潔、樸素”等寓意. 界面背景則選取了一張以藍色為主的照片，將照片應(yīng)用了模糊濾鏡特效后，天空和地面的淺藍色與周圍的深藍色搭配使整個界面呈現(xiàn)出朦朧感、空間感和透明感. 狀態(tài)欄中的相關(guān)符號，內(nèi)容區(qū)的時間日期和鎖形圖標(biāo)采用的白色與藍色形成了較強烈的色彩對比，整個界面顯得清新、素雅、極具品質(zhì)感.

4 安卓手機解鎖界面的設(shè)計制作

4.1 Photoshop軟件簡介

安卓手機解鎖界面，使用Photoshop CS6軟件進行制作，這款軟件由Adobe公司研制開發(fā)，是該公司旗下最為出名的圖像處理軟件之一；是集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意、圖像輸入與輸出為一體的圖形圖像處理軟件；是一款最先進和最流行的應(yīng)用方案，具有強大的拍照和突破性功能，可選擇、寫實繪畫和修飾智能，能創(chuàng)建驚人的高動態(tài)范圍圖像[2]45-56. 設(shè)計者在設(shè)計過程中可自由嘗試各種創(chuàng)意并傳達創(chuàng)作理念，將自己的靈感與創(chuàng)意完美地融合.

4.2 安卓手機解鎖界面制作的方法步驟

4.2.1 壁紙的制作

根據(jù)安卓尺寸規(guī)范，壁紙在設(shè)計時采用安卓常見標(biāo)準(zhǔn)基礎(chǔ)設(shè)計尺寸1 280 px*720 px，然后在畫布中導(dǎo)入照片素材并調(diào)整其大小和位置，用高斯模糊濾鏡對該素材進行半徑值為25 px的模糊設(shè)置，即可完成模糊式背景的制作.

4.2.2 狀態(tài)欄的制作

根據(jù)1 280*720 px的布局規(guī)范，狀態(tài)欄在設(shè)計時采用的尺寸為720 px*50 px，其背景色與壁紙色彩相近，位置位于屏幕最頂部. 當(dāng)設(shè)計狀態(tài)欄中的信號強度符號、時間符號和電池電量符號時，應(yīng)將狀態(tài)欄比例放大至600%以便于對這些較小符號進行更精準(zhǔn)的設(shè)計，設(shè)計時注意信號強度符號和電池電量符號與界面邊界相距20 px. 其中，信號強度符號由5個從小到大排列的矩形組成，設(shè)計時可用Photoshop軟件的形狀工具組中的矩形工具進行繪制，繪制時每個矩形的高度要設(shè)置成偶數(shù)像素，以便于后期程序員進行布局，同時注意每個矩形的寬度和間距相等且底部對齊，該符號在狀態(tài)欄中的位置上下居中對齊. 由于安卓是基于Linux平臺的開源手機操作系統(tǒng)，對字體沒有嚴(yán)格要求，既可以使用安卓系統(tǒng)的標(biāo)準(zhǔn)字體Robot字體，也可以使用微軟雅黑字體進行設(shè)計，但是整個版面要以字體統(tǒng)一為設(shè)計基調(diào)，具有一種符合整個作品風(fēng)格的設(shè)計傾向，形成總體的情調(diào)和感情特征，不能多種文字或每種文字自成風(fēng)格，各行其是[3]34-38. 時間符號的字體應(yīng)用了微軟雅黑字體. 電池電量符號利用矩形工具進行繪制，繪制時電池邊框形狀和正極形狀的寬度和高度均為偶數(shù)，內(nèi)部電量形狀與外部邊框形狀上下左右間距為1 px.

4.2.3 內(nèi)容區(qū)的制作

內(nèi)容區(qū)中的時間要與狀態(tài)欄中的時間一一對應(yīng)，字體應(yīng)用微軟雅黑字體，位置在整個界面中左右居中對齊，日期和時間分別分布在兩行且寬度一樣. 鎖形狀在設(shè)計時可用Photoshop軟件的形狀工具組中的圓角矩形工具、橢圓工具和路徑選擇工具相配合進行繪制：首先，繪制鎖形形狀的圓角外形，利用圓角矩形工具繪制(半徑值為30 px)，其次，繪制中間的葫蘆形鎖芯，利用橢圓工具和路徑選擇工具繪制，再次，利用橢圓工具和矩形工具繪制鎖形造型上的半圓形狀. 鎖形狀下面的3個箭頭在設(shè)計時可用自定義形狀工具進行繪制并設(shè)置不同的透明度以形成漸隱效果.

5 結(jié)語

通過以上闡述把界面設(shè)計的相關(guān)知識與Photoshop軟件的多種功能緊密結(jié)合起來進行安卓手機解鎖界面的設(shè)計制作，突顯了流行的設(shè)計趨勢，突出了解鎖界面的主要功能，整個界面的設(shè)計簡潔大方、色彩清爽，構(gòu)思新穎且有創(chuàng)意，達到了傳遞訊息和保護信息的作用.

通過實踐，使學(xué)生掌握了設(shè)計制作安卓手機解鎖界面的技巧和方法步驟，不但提高了對相關(guān)知識和Photoshop軟件的應(yīng)用能力，而且提高了應(yīng)用Photoshop軟件表達和實現(xiàn)設(shè)計意愿和解鎖界面制作的實踐能力.

[1] 王紅衛(wèi).APP智能手機UI創(chuàng)意美化設(shè)計[M].北京:機械工業(yè)出版社,2016.

[2] Art Eyes設(shè)計工作室.Photoshop玩轉(zhuǎn)APP設(shè)計 [M].北京:人民郵電出版社,2015.

[3] Art Eyes設(shè)計工作室.Photoshop玩轉(zhuǎn)移動UI設(shè)計 [M].北京:人民郵電出版社,2015.

[責(zé)任編輯 冰 竹]

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- )，女，山西長治人，山西機電職業(yè)技術(shù)學(xué)院講師，碩士，主要從事計算機理論研究； 李 曼(1982- )，女，河南商丘人，商丘職業(yè)技術(shù)學(xué)院講師，碩士，主要從事計算機軟件技術(shù)研究。

TP317.4

A

1671-8127(2017)03-0098-03