第7章-APP界面设计

7.1商城APP界面设计7.2

技能训练——浏览器APP界面设计7.3

本章小结7.4

课后习题——美食主题APP界面设计

目录/Contents第章7APP界面设计APP设计主要是针对主流的移动智能系统的应用程序界面设计。优秀的APP设计，不管是从界面中的图标、按钮、标题制作，还是游戏、信息、画面的设计都是需要慎重考虑的。一套完整的APP设计流程需要从产品的实际需要出发，同时也要围绕用户体验考虑，这样才能确保设计出的APP实用效果良好。本章主要以商城APP和浏览器APP设计为例，向读者讲解APP设置的思路与创建流程，帮助读者完成出色的APP界面设计。课堂学习目标●了解APP界面设计思路●商场APP界面设计●浏览器APP界面设计●美食主题APP界面设计商城APP界面设计浏览器APP界面设计4APP是指运行在智能手机、平板电脑等移动终端设备上的第三方应用程序。随着数码时代的到来，APP界面设计也成为设计的又一主要门类。一套优秀的APP设计流程需要从产品的实际需要出发，了解APP针对的目标用户群，紧密围绕用户体验，使得设计出的APP界面更加美观、实用。7.1.1设计思路本实例制作的是商城APP界面。随着网络营销的发展，网上购物也逐渐成为了一种流行趋势，此设计作品主要针对的是都市年轻女性，因此界面上选择了女性经常购买的包包、鞋子等作为表现对象，结合Photoshop和CorelDRAW软件，绘制APP界面中的构架，并利用非常醒目的商品广告吸引购买者。1．创作关键字：高图版率图版率是指版面相对于文字、图片所占据的面积比，一般分为高图版率和低图版率两种。人们在信息的阅读上，大多会选择醒目、图版率高、有兴趣的信息，因此图版率在版面编排中占有很重要的地位，会直接影响到版面阅读的视觉效果。本实例的设计采用了高图版的表现方式，在每个页面中均放置3张商品图片，如图7-1和图7-2所示，并且这3张图片占据了较大的篇幅。在APP界面中，安排了多张较大的图片填满手机页面，使得使用者一眼就知道此界面要售卖的商品的特点，这样更能吸引使用者的视线，增强其购买欲。图7-1图7-22．创作思维流程图7-3图7-4图7-53．设计效果【实例学习目标】结合Photoshop和CorelDRAW软件完成商城APP界面设计，最终效果如图7-6所示。【Photoshop功能应用】用“色彩范围”命令选择图像，运用图层蒙版拼合图像，创建“黑白”调整图层获得黑白效果。【CorelDRAW功能应用】用“文字”工具输入文字，用“贝塞尔”工具绘制自定义图形，用“复杂星形”工具绘制星形图案。【案例素材】随书光盘\素材\07\01~09.jpg。【案例源文件】随书光盘\源文件\07\商城APP界面设计.cdr。图7-67.1.2创作步骤◎Photoshop应用1．调整背景图像并模糊图像图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应用程序出现在了人们的眼前。APP根据其功能的不同，分为门户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-