樱花课程产品原型设计

产品原型设计能够设计产品原型能够实现常见的交互设计常见原型类型原型设计规范原型设计实践常见交互类型交互设计实践常见原型类型01原型的定义及分类用线条、图形描绘出的产品框架，也称线框图，是需求和功能的具体化表象；原型的定义及分类原型的分类草图原型低保真原型高保真原型

原型的定义及分类草图原型原型的定义及分类低保真原型原型的定义及分类高保真原型原型的定义及分类-

不同类型的原型特点手绘图稿，修改方便，规划的早期使用草图原型低保真原型高保真原型010203简单交互，无设计图，无需配色，黑白灰即可，产品经理做产品规划及评审的阶段使用复杂交互，有设计图，需要有图片设计功底，做公开演示时候常用产品的分类移动端产品PC端产品包括APP端、小程序、H5等；包括PC客户端和Web网页端等；区别：不同的交互思想、不同的设计规范；注意：移动端产品中，APP端、小程序、H5等，在原型制作层面或者产品设计层面类似，我们课程以APP为例进行讲解；PC端产品中，客户端和web网页端的也是比较类似，我们以web网页端为例进行讲解；低保真原型设计两种类型的原型移动端原型；PC端原型；讲解方式两种类型原型的设计规范；典型原型页面的设计；相关注意事项；原型设计规范02原型设计规范页面规范信息规范控件规范前面我们提到了，移动端原型，我们以APP端为例进行讲解，APP端会继续分为iOS端和安卓端；页面规范-移动端多数企业中，都要求制作的是iOS端的原型注意事项页面尺寸及区域说明移动端的页面尺寸及区域：原型尺寸：375*667px；如果页面较长，可以忽略667的要求；顶部的状态栏高度：20px；状态栏下方的导航栏高度：44px；二级导航栏，高度40px；底部标签栏高度：49px，文字10号字，图标25*25px；页面中一级按钮的高度：44px；原型制作从（0,0）的位置开始；移动端页面布局及细节规范页面细节处理及布局要求：不要使用图标或者icon（会对UI的工作产生干扰）；不要使用图片元件（提升视觉体验）；使用合理的字号、颜色等，将内容进行权重的区分；注意对齐（左对齐、右对齐、居中对齐）；注意安全距离（不会产生误解）；使用真实内容填充原型（提升用户体验）；注意中划线使用；页面溢出时的处理方式；原型中的字号不建议过小，最小8号字（实际产品中的字号，由UI决定）；页面规范-PC端PC客户端产品设计Web网页端产品设计多数企业中，产品经理要面对的是Web端的产品设计，所以我们以Web端为主进行讲解，PC端产品设计规范跟Web端几乎相同；注意事项页面规范-web端版心分辨率比例版心主流15寸1920*10801336*7681600*90016:9960-120024寸1920*120016:10960-1200CRT（显像管）17寸1024*7684:376017寸、19寸普屏1280*10245:4960目前，市场上的主流电脑分辨率是1920*1080，版心为960-1200px（默认安全区1200px即可）；Web端页面尺寸：建议宽度1200px，高度不限。页面规范-常用字体字号字号12PX字号14PX字号16PX字号18PX字号20PX字号36PX制作原型时，不需要额外修改其字体，使用默认字体即可；最终产品的字体使用，需要由UI决定；12px是网页设计的最小字号，适用于突出性的日期，版权等注释性内容；14px则适用于非突出性的普通正文内容；16px或18px适用于突出性的标题内容；网站的字体大小没有硬性规定，根据实际情况可以酌情考虑，但是要使用偶数字号；页面规范-间距和透明度字体间距舒适范围字体间距舒适范围，除了特殊的需求之外，都可以使用默认数值的间距：行间距，字号大小的1.5-2倍；段间距，字号大小的2-2.5倍；比如：当选用14px字号时，行间距：21-28px；段间距：28px-35px；透明度：100%87%54%26%12%透明度：87%为正文标题；54%为二级标题；26%禁用状态和提示文字；12%分割线；字重也需要注意页面规范-web端其他注意事项web端页面其他细节：原型建议从（0,0）位置开始制作，保持统一；列表类页面，尽量避免出现横向滚动条；表单类页面，要做好信息分类；页面中的控件样式，需要保持统一；信息规范内容的默认值和极值；空内容的显示方式（比如空购物车）；内容的最大宽度（换行）；部分内容的显示要求（比如时间、金钱）；控件认知及控件规则编辑菜单（内容页面出现）分段控件/范围栏如果在导航栏中，就是分段控件如果在导航栏下方，就是范围栏按钮（带底色）聊天气泡（限制长度）徽标/角标（左）浮出层（右）排列按钮（左）开关按钮（右）不能折行；不能显示不尽；不能图文混排；默认状态，不能字号大小不统一；输入框（线型输入框）滑块控件认知及控件规则系统与常用icon集容器视图控制器支持自定义的字母键盘不要使用图标，也不要尝试去制作图标；控件认知及控件规则带展开入口表格视图日期选择器（最多4列，奇数排）时间选择器操作列表一个控件下产生了多个功能或操作；操作列表不要超过7项，尽量使用文字；模态视图导航栏单列选择器带输入框的警告框警告框数字键盘控件规范控件使用的注意事项：控件是否符合用户认知；控件样式是否具有一致性；控件交互行为是否具有一致性；控件的不可用状态如何呈现；原型设计实践03移动端原型设计-典型页面产品设计的建议：多体验产品，了解不同的产品设计方式；尝试去分析不同设计方式的优缺点；针对特定的需求，选择最合适的产品设计方案；移动端原型设计-典型页面登录/注册页面：该页面属于二级页面，没有底部导航；二级页面需要有返回或者退出按钮；注意添加页面标题；注意页面中不同级别内容的权重区分（一级按钮、文字按钮等）；建议对照着实际页面进行制作；移动端原型设计-典型页面APP首页：弱化页面中的线条效果；注意内容之间的安全距离；使用中继器快速实现页面布局；页面过长时，忽略667的高度限制，必须将所有的内容都进行呈现；底部标签栏在最下方；Tips：如果同一个内容，既可以使用占位符，又可以使用矩形，建议使用矩形；注意元件的边框是否保留；注意不同级别文字的字号区分和颜色；移动端原型设计-典型页面详情页：先梳理出有哪些信息模块，做好信息分类；注意页面的布局和细节处理；注意模块之间的先后顺序；使用真实内容进行填充；PC端产品设计-前台网站首页：注意首屏的内容设置；注意导航的跳转方式（当前窗口打开，还是新窗口打开）；降低线条感、注意页面布局；PC端产品设计-后台列表页：先制作母版；不要出现横向的滚动条；列表中的字段和查询区的字段，要跟需求方进行确认；如果有不同类型的数据状态和操作，都要列举出来；PC端产品设计-后台表单页：注意做好信息分类；不同信息的先后顺序及字段内容，要跟需求方进行确认；从(0,0)的位置开始画原型；常见的错误示例页面线条感太重；缺乏必要的内容；移动端建议使用黑白灰的配色；页面整体布局需要协调；注意使用合适的字号；列表中，建议填充示例数据；常见交互类型04常见交互类型页面交互元件交互系统交互手势交互页面交互新窗口打开；当前窗口打开；窗口大小自动调整（缩放、横屏竖屏）；打开方式及窗口调整自动刷新/更新（考虑如何触发）；点击跳转（需要提示）；页面载入元件交互按钮：鼠标移入、点击的效果；吐司：如何触发、吐司样式；文字：文字链接、错误提示；元件交互系统交互警告框（注意按钮摆放）；Push消息；指纹/面容识别提示；系统反馈内容类型：数字键盘、字母键盘、自定义键盘；触发哪类键盘；键盘类型及调用音视频是否自动播放；如果自动播放，有什么条件；自动播放音视频弱网、断网的提示；网络切换的提示和交互；网络环境变化系统反馈键盘调用自动播放网络变化手势交互页面顶部下拉，加载更多内容（比如微博），或者呼出新页面（比如微信）；下拉01浏览器、阅读类APP，或者某些类型手机的系统性交互（在页面边缘左右滑动）；左右滑动02页面底部上划，加载更多内容（比如微博）；上划03内容型页面（比如公众号文章），长按呼出编辑菜单；长按04交互设计实践05移动端的常见交互案例-呼出键盘案例：呼出键盘点击输入框，从底部呼出键盘，开始编辑内容；输入内容后，在右侧出现“×”；点击“×”，可以清空输入的内容；点击页面空白处，可以隐藏键盘；呼出键盘-注意事项动态面板需要有一个空白状态，且置顶；“×”一开始是隐藏的，需要设置出现的条件；移动端的常见交互案例-获取验证码案例：获取验证码点击获取验证码，按钮禁用，文字变为数字，同时进入倒计时；倒计时结束，按钮启用，同时文字变为“获取验证码”；获取验证码-注意事项需要有一个空白的动态面板，且状态数量≥2；利用动态面板状态改变时涉及到的时间，实现倒计时的效果；移动端的常见交互案例-省市三级联动案例：省市三级联动页面刚加载出来，三个下拉框都显示的是请选择；如果没有选择省份，城市和区县都无法选择；如果没有选择城市，区县无法选择；当选择对应的省份时，城市下拉框变为对应省份的城市，当选择城市时，区县下拉框变为对应的区县；移动端的常见交互案例-吐司效果案例：吐司效果页面下拉时出现吐司；吐司可以自动切换状态、自动消失；移动端的常见交互案例-导航栏吸附、下拉上划弹回案例：导航栏吸附、下拉上划弹回页面滚动时，导航栏吸附在顶部；在页面顶部下拉，页面会弹回；在页面底部上划，页面会弹回；移动端的常见交互案例-步进器效果案例：步进器效果点击+号，也可以让商品数量的文字+1；点击–号，可以让文字-1；最多减到1，此时减号按钮禁用；移动端的常见交互案例-抽奖效果案例：抽奖效果页面转盘，指针开始旋转，至少旋转三圈；旋转三圈后，随机指到页面中的某个模块；PC端的常见交互案例-首页内容切换案例：内容切换使用动态面板和热区实现内容的切换；如果是导航，注意窗口打开方式；PC端的常见交互案例-轮播图效果案例：轮播图效果页面打开时，自动开始轮播；轮播图切换时，下方的页码控