第7章-APP界面設計

7.1商城APP界面設計7.2

技能訓練——瀏覽器APP界面設計7.3

本章小結(jié)7.4

課后習題——美食主題APP界面設計

目錄/Contents第章7APP界面設計APP設計主要是針對主流的移動智能系統(tǒng)的應用程序界面設計。優(yōu)秀的APP設計，不管是從界面中的圖標、按鈕、標題制作，還是游戲、信息、畫面的設計都是需要慎重考慮的。一套完整的APP設計流程需要從產(chǎn)品的實際需要出發(fā)，同時也要圍繞用戶體驗考慮，這樣才能確保設計出的APP實用效果良好。本章主要以商城APP和瀏覽器APP設計為例，向讀者講解APP設置的思路與創(chuàng)建流程，幫助讀者完成出色的APP界面設計。課堂學習目標●了解APP界面設計思路●商場APP界面設計●瀏覽器APP界面設計●美食主題APP界面設計商城APP界面設計瀏覽器APP界面設計4APP是指運行在智能手機、平板電腦等移動終端設備上的第三方應用程序。隨著數(shù)碼時代的到來，APP界面設計也成為設計的又一主要門類。一套優(yōu)秀的APP設計流程需要從產(chǎn)品的實際需要出發(fā)，了解APP針對的目標用戶群，緊密圍繞用戶體驗，使得設計出的APP界面更加美觀、實用。7.1.1設計思路本實例制作的是商城APP界面。隨著網(wǎng)絡營銷的發(fā)展，網(wǎng)上購物也逐漸成為了一種流行趨勢，此設計作品主要針對的是都市年輕女性，因此界面上選擇了女性經(jīng)常購買的包包、鞋子等作為表現(xiàn)對象，結(jié)合Photoshop和CorelDRAW軟件，繪制APP界面中的構(gòu)架，并利用非常醒目的商品廣告吸引購買者。1．創(chuàng)作關(guān)鍵字：高圖版率圖版率是指版面相對于文字、圖片所占據(jù)的面積比，一般分為高圖版率和低圖版率兩種。人們在信息的閱讀上，大多會選擇醒目、圖版率高、有興趣的信息，因此圖版率在版面編排中占有很重要的地位，會直接影響到版面閱讀的視覺效果。本實例的設計采用了高圖版的表現(xiàn)方式，在每個頁面中均放置3張商品圖片，如圖7-1和圖7-2所示，并且這3張圖片占據(jù)了較大的篇幅。在APP界面中，安排了多張較大的圖片填滿手機頁面，使得使用者一眼就知道此界面要售賣的商品的特點，這樣更能吸引使用者的視線，增強其購買欲。圖7-1圖7-22．創(chuàng)作思維流程圖7-3圖7-4圖7-53．設計效果【實例學習目標】結(jié)合Photoshop和CorelDRAW軟件完成商城APP界面設計，最終效果如圖7-6所示?！綪hotoshop功能應用】用“色彩范圍”命令選擇圖像，運用圖層蒙版拼合圖像，創(chuàng)建“黑白”調(diào)整圖層獲得黑白效果?！綜orelDRAW功能應用】用“文字”工具輸入文字，用“貝塞爾”工具繪制自定義圖形，用“復雜星形”工具繪制星形圖案。【案例素材】隨書光盤\素材\07\01~09.jpg?！景咐次募侩S書光盤\源文件\07\商城APP界面設計.cdr。圖7-67.1.2創(chuàng)作步驟◎Photoshop應用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應用5．導入圖像并繪制手機輪廓圖圖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隨著智能手機進入人們的生活，各種APP應用程序出現(xiàn)在了人們的眼前。APP根據(jù)其功能的不同，分為門戶APP、商城APP、互動版APP、教育類APP、娛樂類APP等。相對于其他平面設計不同的是，APP界面設計不僅講究美觀，更多時候還要追求實用性和可操作性。下面介紹一款瀏覽器APP界面的設計方法，效果如圖7-173所示。圖7-1731．設計效果【技能訓練素材】隨書光盤\技能訓練\素材\07\01~03.jpg。【技能訓練源文件】隨書光盤\技能訓練\源文件\07\瀏覽器APP界面設計.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-