第7章-APP界面設(shè)計(jì)

7.1商城APP界面設(shè)計(jì)7.2

技能訓(xùn)練——瀏覽器APP界面設(shè)計(jì)7.3

本章小結(jié)7.4

課后習(xí)題——美食主題APP界面設(shè)計(jì)

目錄/Contents第章7APP界面設(shè)計(jì)APP設(shè)計(jì)主要是針對(duì)主流的移動(dòng)智能系統(tǒng)的應(yīng)用程序界面設(shè)計(jì)。優(yōu)秀的APP設(shè)計(jì)，不管是從界面中的圖標(biāo)、按鈕、標(biāo)題制作，還是游戲、信息、畫面的設(shè)計(jì)都是需要慎重考慮的。一套完整的APP設(shè)計(jì)流程需要從產(chǎn)品的實(shí)際需要出發(fā)，同時(shí)也要圍繞用戶體驗(yàn)考慮，這樣才能確保設(shè)計(jì)出的APP實(shí)用效果良好。本章主要以商城APP和瀏覽器APP設(shè)計(jì)為例，向讀者講解APP設(shè)置的思路與創(chuàng)建流程，幫助讀者完成出色的APP界面設(shè)計(jì)。課堂學(xué)習(xí)目標(biāo)●了解APP界面設(shè)計(jì)思路●商場(chǎng)APP界面設(shè)計(jì)●瀏覽器APP界面設(shè)計(jì)●美食主題APP界面設(shè)計(jì)商城APP界面設(shè)計(jì)瀏覽器APP界面設(shè)計(jì)4APP是指運(yùn)行在智能手機(jī)、平板電腦等移動(dòng)終端設(shè)備上的第三方應(yīng)用程序。隨著數(shù)碼時(shí)代的到來，APP界面設(shè)計(jì)也成為設(shè)計(jì)的又一主要門類。一套優(yōu)秀的APP設(shè)計(jì)流程需要從產(chǎn)品的實(shí)際需要出發(fā)，了解APP針對(duì)的目標(biāo)用戶群，緊密圍繞用戶體驗(yàn)，使得設(shè)計(jì)出的APP界面更加美觀、實(shí)用。7.1.1設(shè)計(jì)思路本實(shí)例制作的是商城APP界面。隨著網(wǎng)絡(luò)營銷的發(fā)展，網(wǎng)上購物也逐漸成為了一種流行趨勢(shì)，此設(shè)計(jì)作品主要針對(duì)的是都市年輕女性，因此界面上選擇了女性經(jīng)常購買的包包、鞋子等作為表現(xiàn)對(duì)象，結(jié)合Photoshop和CorelDRAW軟件，繪制APP界面中的構(gòu)架，并利用非常醒目的商品廣告吸引購買者。1．創(chuàng)作關(guān)鍵字：高圖版率圖版率是指版面相對(duì)于文字、圖片所占據(jù)的面積比，一般分為高圖版率和低圖版率兩種。人們?cè)谛畔⒌拈喿x上，大多會(huì)選擇醒目、圖版率高、有興趣的信息，因此圖版率在版面編排中占有很重要的地位，會(huì)直接影響到版面閱讀的視覺效果。本實(shí)例的設(shè)計(jì)采用了高圖版的表現(xiàn)方式，在每個(gè)頁面中均放置3張商品圖片，如圖7-1和圖7-2所示，并且這3張圖片占據(jù)了較大的篇幅。在APP界面中，安排了多張較大的圖片填滿手機(jī)頁面，使得使用者一眼就知道此界面要售賣的商品的特點(diǎn)，這樣更能吸引使用者的視線，增強(qiáng)其購買欲。圖7-1圖7-22．創(chuàng)作思維流程圖7-3圖7-4圖7-53．設(shè)計(jì)效果【實(shí)例學(xué)習(xí)目標(biāo)】結(jié)合Photoshop和CorelDRAW軟件完成商城APP界面設(shè)計(jì)，最終效果如圖7-6所示?！綪hotoshop功能應(yīng)用】用“色彩范圍”命令選擇圖像，運(yùn)用圖層蒙版拼合圖像，創(chuàng)建“黑白”調(diào)整圖層獲得黑白效果?！綜orelDRAW功能應(yīng)用】用“文字”工具輸入文字，用“貝塞爾”工具繪制自定義圖形，用“復(fù)雜星形”工具繪制星形圖案?！景咐夭摹侩S書光盤\素材\07\01~09.jpg?！景咐次募侩S書光盤\源文件\07\商城APP界面設(shè)計(jì).cdr。圖7-67.1.2創(chuàng)作步驟◎Photoshop應(yīng)用1．調(diào)整背景圖像并模糊圖像圖7-7圖7-8圖7-9圖7-10圖7-11圖7-12圖7-13圖7-14圖7-15圖7-16圖7-17圖7-18圖7-19圖7-20圖7-21圖7-22圖7-23圖7-24圖7-25圖7-26圖7-27圖7-28圖7-29圖7-302．制作皮包廣告背景圖片圖7-31圖7-32圖7-33圖7-34圖7-35圖7-36圖7-37圖7-38圖7-39圖7-40圖7-41圖7-42圖7-43圖7-44圖7-45圖7-46圖7-47圖7-48圖7-49圖7-50圖7-51圖7-523．摳出皮包合成新的圖像圖7-53圖7-54圖7-55圖7-56圖7-57圖7-58圖7-59圖7-60圖7-61圖7-62圖7-63圖7-64圖7-65圖7-66圖7-674．摳出鞋子制作廣告圖片圖7-68圖7-69圖7-70圖7-71圖7-72圖7-73圖7-74圖7-75圖7-76圖7-77圖7-78圖7-79圖7-80圖7-81圖7-82圖7-83圖7-84圖7-85圖7-86圖7-87圖7-88圖7-89圖7-90圖7-91◎CorelDRAW應(yīng)用5．導(dǎo)入圖像并繪制手機(jī)輪廓圖圖7-92圖7-93圖7-94圖7-95圖7-96圖7-97圖7-98圖7-99圖7-100圖7-101圖7-102圖7-103圖7-104圖7-105圖7-106圖7-107圖7-108圖7-109圖7-110圖7-111圖7-112圖7-113圖7-114圖7-115圖7-116圖7-117圖7-1186．制作APP界面一圖7-119圖7-120圖7-121圖7-122圖7-123圖7-124圖7-125圖7-126

圖7-127圖7-128圖7-129圖7-130圖7-131圖7-132

圖7-133圖7-134

圖7-135圖7-136圖7-137圖7-138圖7-139圖7-140圖7-141

圖7-142

圖7-143

圖7-1447．制作APP界面二圖7-145圖7-146圖7-147圖7-148

圖7-149圖7-150圖7-151圖7-152圖7-153圖7-154圖7-155圖7-156圖7-157圖7-158圖7-159

圖7-160

圖7-161圖7-162圖7-163圖7-164圖7-165圖7-166圖7-167圖7-168圖7-169圖7-170圖7-171圖7-172隨著智能手機(jī)進(jìn)入人們的生活，各種APP應(yīng)用程序出現(xiàn)在了人們的眼前。APP根據(jù)其功能的不同，分為門戶APP、商城APP、互動(dòng)版APP、教育類APP、娛樂類APP等。相對(duì)于其他平面設(shè)計(jì)不同的是，APP界面設(shè)計(jì)不僅講究美觀，更多時(shí)候還要追求實(shí)用性和可操作性。下面介紹一款瀏覽器APP界面的設(shè)計(jì)方法，效果如圖7-173所示。圖7-1731．設(shè)計(jì)效果【技能訓(xùn)練素材】隨書光盤\技能訓(xùn)練\素材\07\01~03.jpg。【技能訓(xùn)練源文件】隨書光盤\技能訓(xùn)練\源文件\07\瀏覽器APP界面設(shè)計(jì).psd。2．制作流程圖7-174圖7-175圖7-176圖7-177圖7-178圖7-179圖7-180圖7-181圖7-182圖7-183圖7-184圖7-185圖7-186圖7-187圖7-188圖7-