产品原型设计要点

产品原型设计要点的思维导图，整理了原型设计特点、原型设计分类、原型设计步骤、原型设计工具的内容，快来看看吧！

产品原型设计要点

• 什么是产品原型
  • 产品原型是 产品设计方案 的表达，是产品设计界面的展示，是功能与交互的示意，也是与其他人员沟通的依据；是把需求/流程通过图形表达出来的结果；
• 什么是原型设计
  • 原型设计：结合功能需求场景、用户体验、目标客户等因素，对产品的各板块、界面和元素进行合理性排序过程
  • 作用：产品落地的关键点，从虚拟概念到用户接触的节点；产品表达的关键内容，上传下达，会成为研发、UI参考的重要资料
• 原型设计特点
  • 整体感受
    • 页面结构清晰
    • 跳转关系明确
    • 与业务流程一致
    • 完整表达用户需求
  • 独立页面
    • 功能元素明确有序
    • 位置关系清晰
    • 不同状态变化清晰
  • 交互设计
    • 清晰的交互逻辑(页面跳转、左滑右滑)
    • 一致的交互方式
    • 界面统一
• 原型设计分类
  • 低保真
    • 绘制草图；低成本；粗糙；手绘、线框图
  • 中保真
    • 交互逻辑完善；成本稍高；黑白灰线框图；
    • 子主题
  • 高本真
    • 保持与线上产品一致；成本高；投入UI元素；UI+交互的原型图
• 原型设计步骤
  • 构思
    • 明确用户与场景
    • 通过业务流程完善页面流程和目录树
  • 细化
    • 确定页面框架
    • 确定交互细节、串联
    • 定义异常情况备注
  • 评审
    • 组织UI、开发、测试、运营等相关人员开评审会
    • 做好会议讨论结果纪要，同步更新最终版本
  • 投入
    • 开发、设计、测试
• 原型设计工具
  • Axure
    • 优点
      • 经典工具；拖拉组件，交互灵活；画布大；安全性高；
    • 缺点
      • 自带基础元件少；学习成本较高；需汉化；
    • 备注：推荐使用
  • Mockplus
    • 优点
      • 快速出草图；模板丰富；交互高效；多端管理；
    • 缺点
      • 重交互不如Axure；收费；
  • 墨刀
    • 优点
      • 高效实现交互；组件丰富；多人协作(企业付费版)；
    • 缺点
      • 安全性差；拓展少；收费项多；

产品交互设计理论

• 什么是交互设计
  • 交互方式：两个或多个个体之间的内容和结构，使之互相配合，
  • 交互范式：一组可被重复使用、被用户熟知、蕴涵设计经验的界面交互模式
• 交互设计的重要性
• 交互方式
• 常见的交互范式
  • PC
    • 文本框
    • 表单表格
    • 提示框
  • 移动端
    • 抽屉式
      • 特点：隐藏内容，需要时展开 1、抽屉一般从顶部、底部、两侧拉出(侧栏)； 2、抽屉展示一般是具体内容或任务； 3、抽屉在交互体验上更加自然，和原界面融合较好。
      • 适用： 1、常见于浏览器、浏览性产品如阅读、咨询； 2、高级操作、隐藏较深，专家用户的快捷键； 3、动效控制时间在0.2秒左右； 4、抽屉并不是高频操作。
    • 下拉式
      • 特点： 1、通过点击呼出折叠的导航菜单或直接切换菜单选项的导航形式； 2、是早期谷歌平台的设计规范； 3、以内容为主且与界面连贯性较好，展开和收起菜单对当前界面没有影响(节省界面空间)。
      • 适用： 1、非高频、快捷类操作； 2、有诸多类别的信息流产品，菜单选项较少，例如筛选、切换。
    • 列表式
      • 特点： 1、常用布局，简单，视觉上整齐美观，用户接受度高； 2、适合阅读习惯，竖屏阅读，竖排列表可包含较多信息; 3、列表长度可以没有限制，通过上下滑动查看更多内容； 4、常用于目录、分类、内容等；
      • 适用：应用广泛，不受限制；
    • 宫格式
      • 特点： 1、经典设计，展现形式简单，用户接受度广； 2、当元素数量固定不变为8、9、12、16时，可考虑采用九宫格； 3、看似老套，可以参考METER风格(微软菜单栏磁贴)、一行两格等；
      • 适用： 1、偏平台级、内容量较大产品，如支付宝； 2、功能很多，但不能确定哪些重要哪些次要，如360安全卫士； 3、与开发模式有关，一个宫格导航，就是一个团队，如淘宝首页导流; 4、宫格布局可用作导航，适用于对内容进行分类，作为每一个独立的内容入口；
    • Tab式
      • 特点： 1、受屏幕宽度限制可显示数量较少，采用Tab可以减少界面跳转，提高效率； 2、可将并列信息通过横向或竖向Tab来表现； 3、有时可通过左右滑动查看更多内容，需要用户主动探索； 4、当功能之间联系密切，用户需要频繁在各功能间切换时，Tab布局是首选；
      • 适用： 1、功能之间关系密切，需要频繁切换； 2、体量较大产品；
    • 卡片式
      • 特点： 1、样式丰富，承载量大； 2、通常有大图； 3、应用时需要考虑多种因素：图片信息是否重要，例如Airbnb的图片信息很重要，音乐类产品图片渲染效果很重要；运营能力，即一天可以运营10篇还是100篇，是否能保证转化；内容是PGC还是UGC，UGC要有审核机制；卡片大小，图片信息的重要程度，图片质量；一屏展示几张图，图片展示越大，行成转化的可能性越大，用户习惯对于咨询类，一般刷3-5屏，所以要保证这个范围内有不同的信息；
    • 其他式
• 交互范式思考
  • 任何设计的前提，都是本着“目的导向”，以此为原则将信息进行合理有效的呈现
  • 环境和使用场景，决定产品的交互设计
• 产品交互设计黄金原则
  • 7±2原则
    • 定义：人类头脑最好的状态能记忆7±2项 信息块,在记忆了5-9项信息后人类的大脑开始出错。
    • 应用：PC端导航或选项卡尽量不要超过9个，应用的选项卡不会超过5个；
  • 费茨定律
    • 定义：从开始位置移动到最终目标所需时间由两个因素决定：到目标的距离、目标的大小；
    • 应用：可点击的按钮大小要合理，即用户可能想点击的按钮，要大、要明显。
  • 接近法则
    • 定义：将相似、有关联的信息尽量放在一起，不要让用户迷茫，让他潜意识里就知道哪里能找到自己想要的信息；
    • 应用：通过布局把相关的功能设计在一起，页面的内容组织有相关性的做好关联设计。
  • 防错原则
    • 在用户操作具有毁灭性效果的功能时要有提示
  • 奥卡姆剃刀原则
    • 如无必要，勿增实体。只放置必要的东西，减少点击次数，减少操作，快速交易。
  • 特斯勒定律
    • 每个过程都有其固定复杂性，存在一个临界点，超过临界点过程就不能再简化了，只能将固定的复杂性从一个地方移动到另外一个地方。
    • 微信绑定银行卡的过程是很复杂的，把用户的复杂操作转移到平台上来。OCR识别银行卡号
    • 微信绑定银行卡的过程是很复杂的， 把用户的复杂操作转移到平台上来。 OCR识别银行卡号
  • 除非有更好的选择 否则就遵从标准