黃藝婷,李 曼

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

?

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

黃藝婷1,李 曼2

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

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

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

圖1 安卓手機(jī)解鎖界面

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

1 設(shè)計(jì)流程

圖2 設(shè)計(jì)流程

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

2 界面構(gòu)成

2.1 壁紙

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

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

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

3 界面色彩搭配

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

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

4.1 Photoshop軟件簡介

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

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

4.2.1 壁紙的制作

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

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

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

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

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

5 結(jié)語

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

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

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

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

[3] Art Eyes設(shè)計(jì)工作室.Photoshop玩轉(zhuǎn)移動(dòng)UI設(shè)計(jì) [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- )，女，山西長治人，山西機(jī)電職業(yè)技術(shù)學(xué)院講師，碩士，主要從事計(jì)算機(jī)理論研究； 李 曼(1982- )，女，河南商丘人，商丘職業(yè)技術(shù)學(xué)院講師，碩士，主要從事計(jì)算機(jī)軟件技術(shù)研究。

TP317.4

A

1671-8127(2017)03-0098-03