教学课件3-3 7类APP的界面设计案例

7类APP的界面设计案例授课教师：肖文婷【成功APP的设计思路与注意事项】1、品牌形象塑造要集合运营内容。主要包括LOGO、VI、企业色、元素。

2、APP用色。主要包括主体色、辅助色、点睛色、背景色。

3、开发平台。Iphone、Ipad、Android、PC、IOS、Web等。

4、发行渠道。主要包括互联网下载、推送、绑定下载等。

5、功能定义。主要包括基础功能、核心功能、竞争功能、高端功能、隐藏功能、成组模块化按优先级组织及删掉功能。

6、用户业务流程细分。用户在出错的时候，是否可以撤销；初级用户如何完成任务，是否建立新手导引和相关提示、界面是否可学习；中级用户是否符合目标用户习惯、反馈是否符合用户心理预期界面的布局、是否更方便用户快速完成任务；高级用户是否开辟更快捷服务，或设计高级功能页面体验，按优先级形成视觉焦点，形成良好的引导操作流程。

7、用户使用APP的时间和地点。主要包括亮度、嘈杂度、晃动、是否单手操作手机、是否支持手势、是否启动前后摄像头及其他硬件辅助、使用场地室内还是室外等。

8、其他小贴士。为后期运营预留广告位、默认设置项设计合理，提供换肤功能等。【金融相关APP设计实例】类似的金融相关应用主要有：货币汇率、股票走势、还款业务、网络支付、手机钱包、移动理财、保健基金等。新建文档并设置背景图绘制圆角矩形设置登录框背景绘制【用户名】、【密码】登录框绘制【登录】按钮数字金融登录平台完成图数字金融登录平台APP界面设计金融相关APP设计的绘画注意事项： 导航页上有明显的银行或金融机构的LOGO名称；导航明确，常用功能放在最容易操作的位置上，业务广告位置合理；股票K线等图要有专门的行业知识，设计前需要了解公司业务流程；汇率前面的国旗，以及中国张红色、跌绿色。国外相反，绿涨红跌；操作、查询、显示都要合理，避免误操作，适当增加提醒。总体上，金融相关APP的设计主体用色素净一些。数据图表和操作按钮可以用色彩鲜艳的颜色标明，这样可以减少视觉干扰，更利于用户聚焦APP内容本身，做出判断决策，这类APP使用者以中年男性居多。其他金融相关界面设计【网购电商相关APP设计实例】类似应用主要有：电子购物、团购、优惠券订购、返利、商圈、订餐、电子券、短信优惠等。主要的用户模式有：逛逛、搜索、收藏、购买、反馈。网络电商可以分为服饰、鞋包配饰、护肤美容、美食、家具生活、焦点家装、运动户外等，物流信息、订单详情、查询订单、搜索商品、晒单、产品评价等部分。1、项目设计要求该款APP以春夏女装为主打产品界面，要求包括欢迎界面、登录界面、信息展示查看界面、商品查看界面、搜索界面。界面要求简约、大方、时尚，注意屏幕元素布局平衡，功能区域划分合理，界面色彩要求保持高度一致，能够在Android和IOS系统中使用。2、APP界面布局规划

通过对项目设计要求中的界面进行整理，通过功能实现对布局进行规划，通过方框堆积的方式来对界面中的功能分区。女装电商APP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行细化，本案例中具体绘制【登录界面】与【信息展示界面】。绘制上下标题栏绘制【信息展示界面】【登录界面】、【信息展示界面】展示效果网购电商相关APP设计绘画注意事项：APP分类和活动专题是重要的部分，商品搜索与展示同样重要；卖家后台、用户后台设计要保证效率且一目了然；购买、支付流程是否清晰，决定商品从广告到购买的转化率；对于优惠卷，需要收集很多店家的LOGO和做很多小的Banner；购物和折扣类的APP女性用户较多，这类APP一般会用橙色、粉红或者其他暖色作为APP主色，而为了突显图片，背景一般会使用干净的白色；Banner设计在这类APP里占很大比例，且需要经常更新；APP上的价格、优惠、折扣等数字一定要清晰，特别是NEW和POP标签设计；商品的布局要轻松舒服，过于松散会让用户不停翻页，或者过于拥挤，会显得商品摆放杂乱；商品的图片一定要处理得很漂亮，在拍摄阶段就要使用产品级的摄影棚和设备；购物车操作按钮一定设置清晰方便，避免误操作，进行破坏操作及支付时候的二次确认。网购电商相关界面设计【摄影美图相关APP设计实例】类似应用主要有：美颜相机、特效相机、录像日记、360全景相机、头像生成器、大头贴等。功能提要：裁剪、构图、特效、拼图、大头贴、美化、摄影、摄像。色彩特效：LOMO、做旧、黑白、电影胶质、卡通、油画等。1、项目设计要求这款相机APP具备编辑与处理图片的功能，要求界面具有很强的识别性和视觉观赏性，为了体现相机的专业性能，颜色上以灰黑色为主打色。设计的界面主要包括登录界面、拍照界面、滤镜界面、编辑界面。2、APP界面布局规划根据项目设计要求中实现功能对布局进行规划，通过上、中、下区域方式来对界面中的功能进行分区。PHOTO相机APPAPP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，整体APP界面色调为深灰色，界面布局清晰、功能操作简洁易懂。新建背景层并设置遮罩绘制【登录界面】中按钮与文字

【登录界面】完成图

【拍照界面】区域布局

【拍照界面】完成图

【滤镜界面】、【编辑界面】完成图

摄影美图相关APP设计绘画注意事项：一般相机界面以黑色为底色的居多，但也有其他颜色及仿真实相机质感和镜头的相机应用配色存在；如果是后期编辑类的应用，在特效上会有很多样例；大头贴型应用又有很多内置模板，附加小物件，拼照片构图模板；对于取景，拍摄按钮如何布局可以让用户拿着更加防抖还是需要重点考虑的；后期照片和视频编辑，操作的功能流程是否符合用户使用习惯，功能图标造型是否被用户识别都需要考虑；类似花瓣和Pinterest这类图集分享网站，还要考虑图片展示和分类、点评分享等功能，瀑布流是此类APP常用布局。其他摄影美图类APP界面设计【阅读新闻相关APP设计实例】类似应用主要有：各类新闻、电子书城、阅读器、办公软件、教育类等。功能提要：信息架构中的栏目分配，首页一般是要文头条、分类导航和分类头条；频道、期刊、每日要闻、国际新闻、国内新闻、财经、娱乐、时尚、科技、体育等；内容讲究及时性，一般这类APP会在互联网下使用，内容加载的容量和网速要相匹配，有占位图加载等待提示、及时推送、Wifi开启状态更新、省流量等。互动点评，对新闻点赞、差评、发表看法、分享新闻。小说类型、文字音频视频加载、自动更新、后台更新、阅读环境、字体大小、关灯开灯、评论书签、推荐小说、自动翻页、逐行滚动、有声朗读、点词翻译、文字间距和大小等。1、项目设计要求主要界面包括分类菜单、新闻列表、新闻详情等页面，界面中需展示大量的文字与图片，界面采用大版面的分割，使用统一的字体和图标来完成创作。2、APP界面布局规划由于新闻类APP中的文字与图片量较多，通过对项目设计要求对界面进行规划，本案例在界面中需以大版面分割方式进行功能分区。

新闻APPAPP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，在该案例中没有绚丽的颜色，而采用单一的色块，并用透明遮罩体现现代感。

新建文档并绘制顶部标题栏绘制分类菜单【菜单界面】完成图绘制新闻【列表界面】与【详情界面】新闻APP界面视觉设计【阅读新闻相关APP设计实例】阅读新闻相关APP设计的绘画注意事项：不要设计过度强烈的质感表现，影响文本可读性。提供多种字体颜色和壁纸，让用户有舒适的用户体验；内容分栏要清晰，考虑标题的字数在超出时如何省略，考虑缩略图和书封面图正确裁切；搜索的时候要支持模糊搜索，建立数据库时要带关键字；一般新闻都会有当天的天气、日期、温度等信息；当全屏看书时，要有进度条，使用户了解读书的进度，电量多少，当前时间有新闻会在桌面和信号栏进行前台推送服务，需做小插件和点击查看详情。其他阅读新闻相关APP界面设计【社交地图相关APP设计实例】类似应用主要有：社交平台、朋友圈、校友录、联系人圈、爱好者圈、即时通信、视频聊天、地图导航等。1、项目设计要求该款APP界面需要包含信息浏览页面、交友聊天页面、个人信息页面、搜索动态页面等。设计要求符合iOS系统运行，具有时尚前沿的特点。使用白底简化的界面元素，设计要求界面简单、大方，功能分区明确且易于操作。2、APP界面布局规划由于本案例的界面是为iOS系统而设计的，因此界面整体色调为白色，控件与文字都为灰色。由于受社交媒介的内容局限，在设计方案中会利用方块分割的方式对布局安排。社交APP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，整体APP界面色调为白色底，设计元素呈现出简约的风格。注意：在APP界面设计中符号、字体等细节把握能影响整个界面的精致感。社交APP界面设计社交地图相关APP绘画注意事项：这类APP常用配色：蓝色、红色、橙色、黑色；视觉风格：清爽简洁、注重信息展示和交互；信息布局合理，关键信息可以点开查看；LBS定位，附近查找好友，发照片带地理位置；对关注的人送虚拟礼物，发帖内的萌表情设计；一般现在社交类的APP和网站都会和社交小游戏及商品推广绑定，因此在设计的时候，怎么把广告和小游戏入口融合进去是需要认真思考的。其他地图社交相关APP界面设计【音乐播放相关APP设计实例】类似应用主要有：视频播放、背歌词、手机卡拉OK、DJ打碟机、FM电台广播等。

1、项目设计要求要求界面中的元素以简洁的线条为主，具有很强的识别性和设计感，设计的界面包含音乐主界面、发现音乐界面、音乐播放界面。界面之间的风格要保持高度一致，同时体验运动休闲APP的特点。2、APP界面布局规划由于本案例的界面定位是针对运动休闲人士，整体风格要个性突出。为了让设计充满独特的韵味，使用紫色的渐变底色作为主要的设计构思，所有按钮与文字均以白色显示。深紫色渐变底图、大图片展示、白色细文字等元素搭配，让整个音乐播放器的时尚感十足，满足运动与休闲认识对视觉时尚的追求。音乐APP界面布局规划3、页面制作步骤详解根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，整体APP界面色调为深紫色渐变，设计元素简约时尚。绘制背景色与导航栏绘制中间菜单栏【音乐主界面】绘制完成绘制播放音乐海报绘制播放按钮与进度条绘制【发现音乐界面】音乐播放相关APP绘画注意事项：一般来说，播放器页面是APP设计中造型和用色最活泼的界面，有高保真质感的黑胶唱碟机，金属唱针拟物界面，也有一些扁平风的界面，用色也很缤纷；类似豆瓣FM等小文青喜欢的音乐电台类，可以用午后阳光感觉的小清新风格；因为播放器是一种常用的APP，所以很多公司会为其开辟一个皮肤库功能；锁屏时有锁屏页的关联小界面，桌面小插件设计的整体性也要考虑。其他音乐播放相关APP界面设计的创意如图3-92所示。其他音乐播放类APP界面设计【工具相关APP设计案例】类似应用主要有：各类浏览器、导航服务、生活服务、旅游票务、健康监控、医疗顾问、幼儿监控等。注意：这类工具类APP在视觉设计上主要强调界面的版式设计，重点在文字、符号图形与图标的综合运用，突出界面的数据感与科学性。网络下载PP界面设计其他服务相关APP界面设计