03-蘑菇街项目-电商类Android手机App设计-1.pptx

蘑菇街项目-电商类Android手机App设计-1课程回顾niOS系统启动图标设计规范回顾n乐动云课程App启动图标设计n侧边栏导航和TAB导航n乐动云课程App侧边栏界面设计n切图、标注规范及设计技巧2/54本章任务n复习Android系统界面设计规范n了解蘑菇街项目需求n制作蘑菇街手机App关注页面n掌握点9切图的制作方法 蘑菇街关注界面3/54目录nAndroid系统界面设计规范回顾n蘑菇街项目需求n蘑菇街项目设计规划n制作蘑菇街手机App关注页面n点9切图制作方法4/54Android系统界面设计规范回顾nAndroid系统界面尺寸和分辨率5/54Android系统界面设计规范回顾n在实际工作中l推荐使用XHdpi或XXHdpi的尺寸进行设计l即画布新建为7201280px 或 10801920pxl或者根据测试机尺寸进行设计l分辨率为72ppi6/54Android系统界面设计规范回顾n常用术语ldp(dip)pdevice independent pixelp基于屏幕物理分辨率一个抽象的单位，用于说明与密度无关的尺寸和位置p在进行Android系统的App开发时，都是以dp（也可写为dip，屏幕密度）为单位的p设计师要熟知px与dp之间的换算，为之后的切图和标注工作做好准备p在720*1280px，1dp=2pxp在1080*1920px，1dp=3px7/54Android系统界面设计规范回顾n常用术语lsppScale-independent Pixelp与缩放无关的抽象像素，用于设置文字的大小p当文字尺寸是“正常”时，1sp=1dp在720*1280px，1sp=2px在1080*1920px，1sp=3px8/54Android系统界面设计规范回顾nAndroid系统中的栏l状态栏l导航栏/操作栏l标签栏l物理键或虚拟键9/54Android系统界面设计规范回顾nAndroid系统中的栏nAndroid控件高度都支持自定义，所以没有严格的尺寸数值设备屏幕大小 px状态栏高度 px导航栏高度 px标签栏高度 pxXHdpi720 x1280509696XXHpid1080 x19207514414410/54Android系统界面设计规范回顾nAndroid系统的按钮与可点击区域11/54Android系统界面设计规范回顾nAndroid系统的按钮与可点击区域lAndroid系统的按钮与可点击区域在尺寸上并没有严格的规定，可以由设计师自行设计与制作l考虑用户手指接触屏幕的最小可点击区域l按钮与可点击区域的不得小于48dpl而每个UI元素之间的空白间隔建议是8dp12/54Android系统界面设计规范回顾nAndroid系统的按钮与可点击区域l为考虑适配，所有按钮和可点击区域的尺寸，必须是4的倍数！l一般把48dp作为可触摸的ui元素的标准p换算到XHdpi中，48dp=96pxp换算到XXHdpi中，48dp=144px13/54Android系统界面设计规范回顾nAndroid系统字体与字号l默认英文字体：Robotol默认中文字体：Droid sans fallback 是谷歌自己的字体，与微软雅黑很像l在设计上可以使用微软雅黑、方正兰亭等笔画无衬线末端和转折为直角笔画无粗细或粗细变化很小14/54Android系统界面设计规范回顾nAndroid系统字体与字号l一般而言，以720 x1280px的界面中lsp：安卓的字体单位lpx：像素用途sppx极小的、注释性文字1224小文本、辅助性文字1428正常文本16、18、2032、36、40标题文字、大文本224415/54Android系统界面设计规范回顾n常见的Android系统的手机控件l文本输入输出控件l按钮l滑块l选择控件l对话框lToastl活动指示器l进度条16/54目录nAndroid系统界面设计规范回顾n蘑菇街项目需求n蘑菇街项目设计规划n制作蘑菇街手机App关注页面n点9切图制作方法17/54蘑菇街项目需求n蘑菇街企业介绍l专注于时尚女性消费者的电子商务网站，为爱美的姑娘们提供衣服、鞋子、箱包、配饰和美妆等等领域适合年轻女性的商品，蘑菇街APP也成为时尚女性购买和互相分享的必备APPl“分享购物经验，享受购物乐趣，为后面的童鞋指明方向”l“因为蘑菇街，让我在这个城市不再寂寞”l“在蘑菇街里终于找到了可以和自己志趣相投的朋友了”l“在蘑菇街可以享受无限的乐趣向你展示女性的爱物，使你成为一个真正的购物控！”18/54蘑菇街项目需求n项目名称l蘑菇街-电商类手机App设计n项目需求l为蘑菇街定制Android系统专用的手机App19/54蘑菇街项目需求n项目设计要求l符合目标人群的产品使用习惯和偏好l手机端碎片化时间l符合手机用户的常用使用场景：移动着的l视觉设计上要符合项目的需求l视觉设计上要符合目标人群的偏好20/54蘑菇街项目需求n项目设计要求l提供Android系统版本App，并发布上线l严格遵守Android系统手机端设计规范l尽量兼顾iOS系统的手机端设计规范l元素使用矢量工具或矢量软件制作，便于后期印刷宣传l需要绘制启动页面和引导页面l需要进行点9切图21/54蘑菇街项目需求n项目设计要求l整合网页端蘑菇街特色及提炼主要功能l专注女性时尚、女性消费的电子商务网站l提供更多更美的宝贝l注重分享，分享的力量来自于同类人群的赞同l现有网页端功能过多22/54蘑菇街项目需求n用户分析l以年轻、时尚的女性为主要受众群体p年轻：开朗活泼、热情、追求新潮、乐于接受新兴事物p时尚：追求个性的同时也爱紧跟时代潮流、爱买东西，更新换代的速度也很快23/54蘑菇街项目需求n用户分析l以年轻、时尚的女性为主要受众群体p女性：消费能力强、复购率高、用户习惯沉淀快p爱冲动：消费狂人，不买就会死星人p爱贪小便宜、爱赚钱：促销广告满天飞p爱美爱漂亮：爱皮肤爱化妆p拍照即使没有PS也得用美图秀秀p爱臭美爱炫耀（爱分享）p偏好hello kitty的粉红色：各种的粉红色东西24/54目录nAndroid系统界面设计规范回顾n蘑菇街项目需求n蘑菇街项目设计规划n制作蘑菇街手机App关注页面n点9切图制作方法25/54蘑菇街项目设计规划n整合核心功能l从用户需求决定主要功能，由主要功能确立结构布局l为什么不能将Web的功能和布局直接搬到手机端呢？p使用场景和时间不一样移动着的手机碎片化的时间p使用终端不一样屏幕尺寸小使用手指而非鼠标：最小点击区域44*44工具栏/标签栏最多能放置5个标签（官方指定数据）26/54蘑菇街项目设计规划n整合核心功能l购买宝贝、注重分享、注重自我展示27/54蘑菇街项目设计规划n从功能引出布局结构l确立主要功能-决定显示信息的优先级次序l把重要的元素和核心功能放在页面前端和重心位置l将其它次要功能放在发现更多按钮里面l简化、删除或合并其他次要信息l增强用户体验与交互，让用户更关心页面内的主要内容28/54蘑菇街项目设计规划n项目设计规划：确立结构布局l扁平化布局p尽可能让用户以最少的步骤找到自己的任务：买东西&爱炫耀p在各个页面不断重复这个主题p在各个页面不断强调这个主题29/54蘑菇街项目设计规划n整体布局规划l将用户常用的页面放置在屏幕下面的标签栏l重要的功能（购物车）一直固定在屏幕右上角的快捷功能键位置l将其他功能和页面放在更多按钮（侧边栏）里面30/54蘑菇街项目设计规划n确立设计风格视觉表达l从目标用户的喜好开始l与蘑菇街Web端界面版产品保持一致31/54蘑菇街项目设计规划n确立设计风格视觉表达l视觉表达从蘑菇街Web端界面出发p保持界面风格统一p颜色：主体颜色保持与网页相同p体现时尚元素p彰显年轻个性32/54蘑菇街项目设计规划n确立设计风格视觉表达l字体p使用默认字体、强调规范下的美学l图标：极简主义线条图标p简单、秀气、时尚p文件体积较小，有利于用户下载安装33/54目录nAndroid系统界面设计规范回顾n蘑菇街项目需求n蘑菇街项目设计规划n制作蘑菇街手机App关注页面n点9切图制作方法34/54演示案例演示案例：蘑菇街手机App关注页面n需求描述l根据蘑菇街网页视觉风格要求，制作App关注页面l设计尺寸：1080*1920pxl分辨率：72ppil默认中文字体：微软雅黑n实现思路35/54蘑菇街手机App关注页面n上机重点l使用更适合设计尺寸的网格系统p如果新建xxhdpi作为画布尺寸，1dp=3px，则应该建立8dp（24px）的网格系统进行参考，最小点击区域48dp（144px）36/54蘑菇街手机App关注页面n上机重点l占位图片的选择p要清楚p要漂亮p符合用户及甲方心理预期p符合产品需求定位p不低俗不莽撞37/54蘑菇街手机App关注页面n上机重点l文字的颜色的变换l搜索框里面的是浅浅的灰色：提示信息l分类使用的是更深一度的灰色l用户的名称是最关键的信息选用最深的黑色来表示38/54蘑菇街手机App关注页面n选择不同的灰度lccccccl999999l666666l333333l00000039/54目录nAndroid系统界面设计规范回顾n蘑菇街项目需求n蘑菇街项目设计规划n制作蘑菇街手机App关注页面n点9切图的制作方法40/54点9切图的制作方法n什么是点9切图l.9：是Andriod平台的应用软件开发里的一种特殊的图片形式l文件扩展名为*.9.png41/54点9切图的制作方法n为什么要使用点9切图l更优化的图片格式l顺畅解决横纹问题42/54点9切图的制作方法n为什么要使用点9切图l采用一套界面切图去适配不同的分辨率l大幅减少安装包的大小l程序不需要专门做处理就可以实现其拉伸、减少了代码量和开发工作量43/54点9切图的制作方法n什么情况下需要.9切图l并不是所有切图都需要进行.9切图l当切图拉伸，其效果发生明显变形时，需要进行.9切图p像对话气泡、按钮等图片进行拉伸时，会发生明显变形p只需要对图片的某些部分进行拉伸，某些部分不需要进行拉伸变形44/54点9切图的制作方法n什么情况下需要.9切图l并不是所有切图都需要进行.9切图l当切图拉伸，其效果发生明显变形时，需要进行.9切图p像对话气泡、按钮等图片进行拉伸时，会发生明显变形p只需要对图片的某些部分进行拉伸，某些部分不需要进行拉伸变形45/54点9切图的制作方法n点9切图的制作方法46/54演示案例演示案例：对“去逛逛”按钮进行点9切图n需求描述l对红色“去逛逛”按钮进行点9切图l使用photoshop操作n实现思路l新建文件，放置 按钮的最小可拉伸区域l长宽各放大2像素l使用黑色铅笔绘制可拉伸区域、文字显示区域l另存为.9.png47/54点9切图的制作方法n点九切图工具：draw9patch l.9切图 小软件l可以直接预览拉伸后的图片效果48/54点9切图的制作方法n点九切图工具：draw9patch l安装方法l界面及使用方法49/54演示案例演示案例：对粉红对话框进行点9切图n需求描述l对粉红对话框进行点9切图l使用draw9patch操作n实现思路l新建文件，放置 按钮的最小可拉伸区域l另存为pngl使用draw9patch打开pngl绘制可拉伸区域、文字显示区域l另存为.9.png50/54课堂练习课堂练习：对绿色气泡框进行点9切图n需求描述l对绿色气泡框进行点9切图l使用draw9patch操作n实现思路l新建文件，放置 按钮的最小可拉伸区域l另存为pngl使用draw9patch打开pngl绘制可拉伸区域、文字显示区域l另存为.9.png51/54本章总结n什么是点9切图？n为什么要进行点9切图呢？nWeb端产品与手机端App产品有什么区别？n从Web端产品向手机端App产品进行平移的时候如何进行功能删选？52/54本章作业本章作业n完成蘑菇街关注页的绘制n补充完成蘑菇街其他界面的绘制n规划一个儿童类产品购物类Appl参考网站当当母婴频道 http:/ http:/ http:/