《ui设计创意表达与实践肖文婷)配套课件教学课件3-3 7类app的界面设计案例》由会员分享，可在线阅读，更多相关《ui设计创意表达与实践肖文婷)配套课件教学课件3-3 7类app的界面设计案例（58页珍藏版）》请在金锄头文库上搜索。
1、,7类APP的界面设计案例,授课教师：肖文婷,【成功APP的设计思路与注意事项】 1、品牌形象塑造要集合运营内容。主要包括LOGO、VI 、企业色、元素。 2、APP用色。主要包括主体色、辅助色、点睛色、背景色。 3、开发平台。Iphone、Ipad、Android、PC、IOS、Web等。 4、发行渠道。主要包括互联网下载、推送、绑定下载等。 5、功能定义。主要包括基础功能、核心功能、竞争功能、高端功能、隐藏功能、成组模块化按优先级组织及删掉功能。 6、用户业务流程细分。用户在出错的时候，是否可以撤销；初级用户如何完成任务，是否建立新手导引和相关提示、界面是否可学习；中级用户是否符合目标用户
2、习惯、反馈是否符合用户心理预期界面的布局、是否更方便用户快速完成任务；高级用户是否开辟更快捷服务，或设计高级功能页面体验，按优先级形成视觉焦点，形成良好的引导操作流程。 7、用户使用APP的时间和地点。主要包括亮度、嘈杂度、晃动、是否单手操作手机、是否支持手势、是否启动前后摄像头及其他硬件辅助、使用场地室内还是室外等。 8、其他小贴士。为后期运营预留广告位、默认设置项设计合理，提供换肤功能等。,【金融相关APP设计实例】 类似的金融相关应用主要有：货币汇率、股票走势、还款业务、网络支付、手机钱包、移动理财、保健基金等。,新建文档并设置背景图,绘制圆角矩形,设置登录框背景,绘制【用户名】、【密码
3、】登录框,绘制【登录】按钮,数字金融登录平台完成图,数字金融登录平台APP界面设计,金融相关APP设计的绘画注意事项： 导航页上有明显的银行或金融机构的LOGO名称； 导航明确，常用功能放在最容易操作的位置上，业务广告位置合理； 股票K线等图要有专门的行业知识，设计前需要了解公司业务流程； 汇率前面的国旗，以及中国张红色、跌绿色。国外相反，绿涨红跌； 操作、查询、显示都要合理，避免误操作，适当增加提醒。 总体上，金融相关APP的设计主体用色素净一些。数据图表和操作按钮可以用色彩鲜艳的颜色标明，这样可以减少视觉干扰，更利于用户聚焦APP内容本身，做出判断决策，这类APP使用者以中年男性居多。,其
4、他金融相关界面设计,【网购电商相关APP设计实例】 类似应用主要有：电子购物、团购、优惠券订购、返利、商圈、订餐、电子券、短信优惠等。主要的用户模式有：逛逛、搜索、收藏、购买、反馈。 网络电商可以分为服饰、鞋包配饰、护肤美容、美食、家具生活、焦点家装、运动户外等，物流信息、订单详情、查询订单、搜索商品、晒单、产品评价等部分。 1、项目设计要求 该款APP以春夏女装为主打产品界面，要求包括欢迎界面、登录界面、信息展示查看界面、商品查看界面、搜索界面。界面要求简约、大方、时尚，注意屏幕元素布局平衡，功能区域划分合理，界面色彩要求保持高度一致，能够在Android和IOS系统中使用。 2、APP界面
5、布局规划 通过对项目设计要求中的界面进行整理，通过功能实现对布局进行规划，通过方框堆积的方式来对界面中的功能分区。,女装电商APP界面布局规划,3、页面制作步骤详解 根据“界面布局规划”中的界面功能分布和构造来对页面进行细化，本案例中具体绘制【登录界面】与【信息展示界面】。,绘制上下标题栏,绘制【信息展示界面】,【登录界面】、【信息展示界面】展示效果,网购电商相关APP设计绘画注意事项： APP分类和活动专题是重要的部分，商品搜索与展示同样重要； 卖家后台、用户后台设计要保证效率且一目了然； 购买、支付流程是否清晰，决定商品从广告到购买的转化率； 对于优惠卷，需要收集很多店家的LOGO和做很多
6、小的Banner； 购物和折扣类的APP女性用户较多，这类APP一般会用橙色、粉红或者其他暖色作为APP主色，而为了突显图片，背景一般会使用干净的白色； Banner设计在这类APP里占很大比例，且需要经常更新； APP上的价格、优惠、折扣等数字一定要清晰，特别是NEW和POP标签设计； 商品的布局要轻松舒服，过于松散会让用户不停翻页，或者过于拥挤，会显得商品摆放杂乱； 商品的图片一定要处理得很漂亮，在拍摄阶段就要使用产品级的摄影棚和设备； 购物车操作按钮一定设置清晰方便，避免误操作，进行破坏操作及支付时候的二次确认。,网购电商相关界面设计,【摄影美图相关APP设计实例】 类似应用主要有：美颜
7、相机、特效相机、录像日记、360全景相机、头像生成器、大头贴等。 功能提要：裁剪、构图、特效、拼图、大头贴、美化、摄影、摄像。 色彩特效：LOMO、做旧、黑白、电影胶质、卡通、油画等。 1、项目设计要求 这款相机APP具备编辑与处理图片的功能，要求界面具有很强的识别性和视觉观赏性，为了体现相机的专业性能，颜色上以灰黑色为主打色。设计的界面主要包括登录界面、拍照界面、滤镜界面、编辑界面。 2、APP界面布局规划 根据项目设计要求中实现功能对布局进行规划，通过上、中、下区域方式来对界面中的功能进行分区。,PHOTO相机APP APP界面布局规划,3、页面制作步骤详解 根据“界面布局规划”中的界面功
8、能分布和构造来对页面进行视觉设计，整体APP界面色调为深灰色，界面布局清晰、功能操作简洁易懂。,新建背景层并设置遮罩,绘制【登录界面】中按钮与文字,【登录界面】完成图,【拍照界面】区域布局,【拍照界面】完成图,【滤镜界面】、【编辑界面】完成图,摄影美图相关APP设计绘画注意事项： 一般相机界面以黑色为底色的居多，但也有其他颜色及仿真实相机质感和镜头的相机应用配色存在； 如果是后期编辑类的应用，在特效上会有很多样例； 大头贴型应用又有很多内置模板，附加小物件，拼照片构图模板； 对于取景，拍摄按钮如何布局可以让用户拿着更加防抖还是需要重点考虑的； 后期照片和视频编辑，操作的功能流程是否符合用户使用
9、习惯，功能图标造型是否被用户识别都需要考虑； 类似花瓣和Pinterest这类图集分享网站，还要考虑图片展示和分类、点评分享等功能，瀑布流是此类APP常用布局。,其他摄影美图类APP界面设计,【阅读新闻相关APP设计实例】 类似应用主要有：各类新闻、电子书城、阅读器、办公软件、教育类等。 功能提要：信息架构中的栏目分配，首页一般是要文头条、分类导航和分类头条；频道、期刊、每日要闻、国际新闻、国内新闻、财经、娱乐、时尚、科技、体育等；内容讲究及时性，一般这类APP会在互联网下使用，内容加载的容量和网速要相匹配，有占位图加载等待提示、及时推送、Wifi开启状态更新、省流量等。互动点评，对新闻点赞、
10、差评、发表看法、分享新闻。小说类型、文字音频视频加载、自动更新、后台更新、阅读环境、字体大小、关灯开灯、评论书签、推荐小说、自动翻页、逐行滚动、有声朗读、点词翻译、文字间距和大小等。 1、项目设计要求 主要界面包括分类菜单、新闻列表、新闻详情等页面，界面中需展示大量的文字与图片，界面采用大版面的分割，使用统一的字体和图标来完成创作。,2、APP界面布局规划 由于新闻类APP中的文字与图片量较多，通过对项目设计要求对界面进行规划，本案例在界面中需以大版面分割方式进行功能分区。,新闻APP APP界面布局规划,3、页面制作步骤详解 根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，在
11、该案例中没有绚丽的颜色，而采用单一的色块，并用透明遮罩体现现代感。,新建文档并绘制顶部标题栏,绘制分类菜单,【菜单界面】完成图,绘制新闻【列表界面】与【详情界面】,新闻APP界面视觉设计,【阅读新闻相关APP设计实例】 阅读新闻相关APP设计的绘画注意事项： 不要设计过度强烈的质感表现，影响文本可读性。提供多种字体颜色和壁纸，让用户有舒适的用户体验； 内容分栏要清晰，考虑标题的字数在超出时如何省略，考虑缩略图和书封面图正确裁切； 搜索的时候要支持模糊搜索，建立数据库时要带关键字； 一般新闻都会有当天的天气、日期、温度等信息； 当全屏看书时，要有进度条，使用户了解读书的进度，电量多少，当前时间有
12、新闻会在桌面和信号栏进行前台推送服务，需做小插件和点击查看详情。,其他阅读新闻相关APP界面设计,【社交地图相关APP设计实例】 类似应用主要有：社交平台、朋友圈、校友录、联系人圈、爱好者圈、即时通信、视频聊天、地图导航等。 1、项目设计要求 该款APP界面需要包含信息浏览页面、交友聊天页面、个人信息页面、搜索动态页面等。设计要求符合iOS系统运行，具有时尚前沿的特点。使用白底简化的界面元素，设计要求界面简单、大方，功能分区明确且易于操作。 2、APP界面布局规划 由于本案例的界面是为iOS系统而设计的，因此界面整体色调为白色，控件与文字都为灰色。由于受社交媒介的内容局限，在设计方案中会利用方
13、块分割的方式对布局安排。,社交APP界面布局规划,3、页面制作步骤详解 根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，整体APP界面色调为白色底，设计元素呈现出简约的风格。注意：在APP界面设计中符号、字体等细节把握能影响整个界面的精致感。,社交APP界面设计,社交地图相关APP绘画注意事项： 这类APP常用配色：蓝色、红色、橙色、黑色； 视觉风格：清爽简洁、注重信息展示和交互； 信息布局合理，关键信息可以点开查看； LBS定位，附近查找好友，发照片带地理位置； 对关注的人送虚拟礼物，发帖内的萌表情设计； 一般现在社交类的APP和网站都会和社交小游戏及商品推广绑定，因此在设计
14、的时候，怎么把广告和小游戏入口融合进去是需要认真思考的。,其他地图社交相关APP界面设计,【音乐播放相关APP设计实例】 类似应用主要有：视频播放、背歌词、手机卡拉OK、DJ打碟机、FM电台广播等。 1、项目设计要求 要求界面中的元素以简洁的线条为主，具有很强的识别性和设计感，设计的界面包含音乐主界面、发现音乐界面、音乐播放界面。界面之间的风格要保持高度一致，同时体验运动休闲APP的特点。 2、APP界面布局规划 由于本案例的界面定位是针对运动休闲人士，整体风格要个性突出。为了让设计充满独特的韵味，使用紫色的渐变底色作为主要的设计构思，所有按钮与文字均以白色显示。深紫色渐变底图、大图片展示、白
15、色细文字等元素搭配，让整个音乐播放器的时尚感十足，满足运动与休闲认识对视觉时尚的追求。,音乐APP界面布局规划,3、页面制作步骤详解 根据“界面布局规划”中的界面功能分布和构造来对页面进行视觉设计，整体APP界面色调为深紫色渐变，设计元素简约时尚。,绘制背景色与导航栏,绘制中间菜单栏,【音乐主界面】绘制完成,绘制播放音乐海报,绘制播放按钮与进度条,绘制【发现音乐界面】,音乐播放相关APP绘画注意事项： 一般来说，播放器页面是APP设计中造型和用色最活泼的界面，有高保真质感的黑胶唱碟机，金属唱针拟物界面，也有一些扁平风的界面，用色也很缤纷； 类似豆瓣FM等小文青喜欢的音乐电台类，可以用午后阳光感
16、觉的小清新风格； 因为播放器是一种常用的APP，所以很多公司会为其开辟一个皮肤库功能； 锁屏时有锁屏页的关联小界面，桌面小插件设计的整体性也要考虑。 其他音乐播放相关APP界面设计的创意如图3-92所示。,其他音乐播放类APP界面设计,【工具相关APP设计案例】 类似应用主要有：各类浏览器、导航服务、生活服务、旅游票务、健康监控、医疗顾问、幼儿监控等。 注意：这类工具类APP在视觉设计上主要强调界面的版式设计，重点在文字、符号图形与图标的综合运用，突出界面的数据感与科学性。,网络下载PP界面设计,其他服务相关APP界面设计,工具相关APP绘画注意事项： 浏览器颜色很丰富，以蓝色、灰色、橙色、红色等作为默认界面的主色； 浏览器作为常用的上网入口，它的易于操作性是最重要的，解析网页功能，各种操作按钮要精致小巧，但操作区域不能太拥挤。历史和回退，缩放网页功能，手势要用得好； 对于生活服务类，导航要做得比较丰富，分类中基本都是前面带图的列表，底部有一些发布信息的时间、联系方式等信息，这类APP很多内容都是用户补充的； 医疗健康类的APP遵循干净清爽风格，以蓝白或浅绿色调为主。,【APP
