原型绘制提效技巧分享

2023-11-01

不管是前台PM还是后台PM,在工作中或多或少都要进行原型设计。原型可以说是产品、开发、测试之间进行交流沟通最重要的文档之一,那么怎么把原型画得又快又好呢?

从设计流程上看,原型设计节点包括但不限于梳理需求大纲、规划页面结构、完善信息结构、绘制原型及进行说明标注。前面三个节点个人有个人的方法,今天主要想和大家分享一下后两个——绘制原型及说明标注的提效小技巧,希望对你有帮助。

一、制作全局说明

通俗地说,全局说明就是那些你懒得写第二次的东西。比如说网络异常/加载失败/没有数据,这些这是任意页面都可能会碰出现的情况,如果分开写,每个页面都要写一次,改的话得同时改很多地方,费事费力而且不利于需求的统一管理。所有,把这些通用性的东西写在一个地方,既可以简洁原型文档,降低开发、测试、设计等人员的阅读成本,又可以少写点字,何乐不为呢(๑•̀ㅂ•́) ✧

全局说明可以是适用于全文档的,也可以是适用于某个迭代的。像是一些和迭代相关度高的名词解释。写在全文档性的说明里就有些冗余,写在迭代内全局说明中就刚刚好(个人见解)。

根据通用性,可以将全局说明分成两种:通用说明和业务说明。通用说明是在大多数产品/页面内都可以通用的,比如页面状态、加载状态、通用手势、弹窗遮罩等;而业务说明则不同,这类说明和业务高度相关,相同内容在不同业务间有较大差异,比如时间展示规则、昵称长度等。下面给大家举几个栗子:

通用说明

移动端全局说明具体可见浪子写的文章,很详细(查看)

业务说明
  • 最近一条消息时间展示规则

图中是微信的展示规则。手动试出来的,不对的地方欢迎指正

  • 最近一条消息展示规则

图中微信的展示规则。手动试出来的,不对的地方欢迎指正

  • 产品上架/下架/浏览时间展示规则

第一版设计的规则里跨年时间也是带「时时:分分」的,后来因为产品列表地皮实在放不下,就把后面的具体时间砍掉了(都跨年了,具体时间没那么重要了叭)。所以具体的展示规则是和实际系统密切相关的。

二、建立字段说明表

可以把用到的数据用表格的形式罗列出来,清晰且一目了然。

三、取用元件库进行原型绘制

在绘制原型时,有一些控件会被经常用到。如果每次用到都重新制作,不仅无法保证交互效果的统一性,而且会占用很多工作时间。为了咱岌岌可危的发际线,我向大家使用Axure元件库功能。

什么,你说Axure自带的元件库丑?

网上有不少大公司的设计的元件库,找个你喜欢的导入就行。比如蚂蚁金服、饿了么、有赞等。

什么,你说懒得找?

那我这给大家推荐几个。

Vant 移动端组件库

非常全面的一个组件库,自带交互。除了通用组件,还有带有电商业务组件,用来绘制移动端原型很方便。

设计网站:Zan Design (查看)

资源下载:Zan Design 移动端元件库

Ant Design 移动端组件库

支付宝风格的组件库,组件没有Vant那么多,但是通用性强。

设计网站:Ant Design (查看)

资源下载:Ant Design 移动端元件库

Ant Design 后台组件库

这个不用多说了吧,后台产品必备。UI 样式可配置,拓展性强,大多数产品风格都能轻松适应。

设计网站:Ant Design (查看)

资源下载:Ant Design 移动端元件库

大厂设计的组件库当然不错,但是用起来也会碰到一些问题。比如和自己的设计风格不一致呀,有无用的组件呀,部分组件需要微调等等。所以建议每个PM都自己积累元件并长期更新。不用一次完成,平时工作中碰到新的就维护进去,这样不会占用很多时间,而且可以保证原型整体的视觉统一。

我司后台部分用的是蚂蚁金服组件库,基本不用修改,所以没有制作元件库。APP端因为有些特殊组件,通用组件库里没有就积累了一些,基本是Ant Design 和Vant 的混合版,这里就不献丑了.....((/- -)/

四、建立交互需求说明库

如果系统用的是某个开源的UI项目的话,组件的交互基本都是确定好了的,交互说明文档可以少些甚至不用写。如果没有用开源项目,所有的轮子都是百度或者自己造的话,那交互说明文档就必不可少了。碰到一些常见、使用频率高的组件,可以建立一个“交互说明库”,用到的时候贴一个链接或者copy一下,可以减少开发的理解成本。

PM或多或少会碰到被开发围攻的情况,大部分情形可能都是因为需求描述不准确导致的。如果有一个规则模板参考,是不是就可以减少遗漏的情况呢?

需求说明基本分为三个部分:需求说明、交互说明、交互预览。

  • 需求说明一般包含:前置事件、后置事件、初始化、加载/分页、排序、正常和异常结果等,具体看组件类型;

  • 交互说明一般包含:不同组件的说明会有较大差异,如果想描述得很详细,可以参考开源项目的API文档;

  • 交互预览一般包含:输入状态/选中状态/聚焦状态、禁止状态、加载状态等等。

五、进行交互自查

输出完后先对照交互自查表把每个细节梳理一遍,让原型更加更加全面和缜密。

自查表是之前存的,忘记是哪篇文章了。如果你知道的话欢迎补充~

需求类型

检查模块

自查问题

自查结果

(示例)

辅助理解举例

前端需求

(用户能得见的需求)

前置判断

(进入界面时的判断)

是否考虑不同账号的区别

银行App上【我的】页面:已注册账号与游客账号展示差异

是否考虑不同权限的区别

流程审批的界面,审核者权限有审核与查看按钮;但提交者,只有查看按钮

是否考虑同账号不同时间进入的区别

同一个用户晚上登录自动开启夜间模式,如读书类App

是否考虑同账号不同状态的区别

同一个用户也会有前后状态的差异。如优惠券列表,领券前后;活动页面,达标前后

展示内容

展示逻辑

是否考虑内容为空显示什么?

用户的购物车为空的时候,该如何展示

是否考虑横竖屏问题

微信公众号横屏和竖屏查看情况下的兼容

是有有考虑单位/计量单位/位置的统一

积分商品的价格,是统一用:99元+100积分,还是:¥99+100积分;积分价在前还是在后

是否考虑文字过多的换行或者....

商品列表页,商品名称过长的展示处理方案

是否考虑特殊符号、敏感信息的处理

部分场景,用户手机号展示需要脱敏,如加上***

排序逻辑

是否考虑内容排序的逻辑:时间/热度/相关度

优惠券列表,以用户获取时间还是附近可用的优惠券

是否考虑内容展示方式:翻页/瀑布流

电商商品的为你推荐区,一般使用瀑布流的方式

刷新逻辑

是否考虑刷新方式:是自动刷新还是手动刷新

支付宝首页的信息览,用户可手动下拉刷新

是否考虑刷新数量:一次刷新多少/多久,如何刷更多

交易记录页面,上滑动刷新最多拉取数据库8条信息,最久能够拉取到近3个月的数据

是否考虑刷新异常:当刷不出新内容时提示什么

刷不出内容,页面提示已经到底啦~已经是最新数据啦~等

缓存逻辑

是否考虑页面的缓存数据,存储地方

表单类录入产品,出现返回上一页面操作时,当前页面信息也需要保存

是否考虑缓存触发场景,清理数据逻辑

当下操作场景信息对用户很重要,或对平台校验、分析有用时,需要缓存

用户操作

跳转操作

是否考虑返回:如物理、home键、侧边栏返回

不同的返回按键需要考虑到与用户预期一致

录入操作

是否考虑录入的进度提示

表单填写信息较多时,会给用户展示进度条

是否考虑录入时候的控件变化

输入框,录入时候边框高亮展示

是否考虑录入的结果反馈

录入信息不正确,toast/页面引导用户正确录入

查询操作

是否考虑查询中的状态提示:loading、进度

输入准考证,查询成绩单过程的进度条展示

是否考虑查询结果的展示:查询中/成功/失败

百度搜索查不到相关信息场景下的猜你想查

异常场景

操作异常

是否考虑用户连续操作异常的情况

连续5次输错手势密码要求验证用户身份

是否考虑用户高频操作的禁用逻辑

连续用户连续点击优惠券领取按钮提示:你已经领取过啦/优惠券置灰不可点

网络异常

是否考虑没网场景下的页面提示

支付宝无网络状态下的提示:当前网络不可用,请检查你的网络设置

是否考虑弱网场景下的页面展示

网络太慢,建议用户切换网络

是否考虑网络差,重新加载的按钮

当页面加载不出来,给用户提供重新加载按钮

版本异常

是否考虑新旧版本兼容/强制更新/显示版本更新提示

功能需要最新版本才能体验到,需要引导用户更新版本

接口异常

是否考虑接口异常:查不到数据的情况

服务器挂掉了,功能不可用情况下的页面提示

其他

数据埋点

是否考虑页面埋点,增加操作行为上报

页面的PV/UV,按钮的PV数据上报,方便数据分析

新手引导

是否考虑新手引导,方便新用户了解新功能

人人都是产品经理App上的新功能引导:朕知道了

后端需求

数据处理

新增字段

是否考虑新增字段后,新老数据如何兼容

商品表增加了积分价字段后,在查询时要对老数据进行特殊对兼容处理

系统迁移

是否考虑升级服务器后,老数据如何迁移:全量/增量

系统升级后,用户历史的积分交易数据也需要同步迁移过去,

数据更新

是否考虑数据的更新机制:更新频率/更新方式/更新量

对方系统推数、还是主动拉取,多久更新一次,更新是增量还是全量

系统解耦合

是否考虑单个接口已经包含足够的业务功能

会员查询,应该尽可能将会员相关的信息通过一个接口查询出来

性能保障

是否考虑系统的性能:支持多大的并发量

秒杀功能,订单系统支持多大并发量

权限考虑

是否考虑权限的拆分:查询、编辑、审核等

积分管理后台,业务配置和财务对账区分用户角色

异常场景

是否考虑业务流程异常情况的处理

订单取消后,用户支付已取消订单成功会怎样

数据需求

数据埋点类

必要性

是否以真实的业务分析需求提交埋点位置

不以实际分析需求出发的数据埋点都是不负责任的

完整性

是否包含用户、页面、行为、区域、内容,来源等信息

数据埋点都会把用户的设备信息、操作行为、操作时间、页面、具体位置详尽记录

可追溯

是否埋点之后可以追溯用户的上一级页面来源

无法追溯来源就分析漏斗,难以看出转化效果

数据报表类

数据时效

是否考虑不同表之间数据获取差异而设定跑批时间

过早的跑批时间,会导致有数据依赖的表无法获得数据

数据安全

是否有考虑敏感信息应该脱敏处理

姓名、手机号、身份证号一般会进行加密,如哈希加密

数据获取

是否考虑所需数据字段已经从业务库下传至数据仓库

数据未下传无法满足数据报表需求,因此首先要确认

好了,以上就是个人平时画原型积累的一些技巧和感悟,完全是出于个人习惯和主观经验得来的,可能不太对,如果你有补充或者不一样的看法,欢迎一起探讨~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

原型绘制提效技巧分享 的相关文章

  • pinia和vuex的区别?

    以前我们使用Vue2的时候 Vuex可以说是必备的 它作为一个状态管理工具 给我们带来了极大的方便 Vue3推出后 虽然相对于Vue2很多东西都变了 但是核心的东西还是没有变的 比如说状态管理 路由等等 再Vue3中 尤大神推荐我们使用pi
  • 互联网产品上线流程,及面试题分类

    一 基础情况 问题1 自我介绍 3mins 与自我介绍 1min 问题2 为什么你要来这个行业 问题3 为什么你要来这个岗位 问题4 为什么你能胜任这份工作 问题5 为什么你要离职 问题6 过往经历STAR故事描述 问题7 你的职业规划是什
  • 解决ubuntu远程ssh连接不了问题

    安装openssh server sudo apt get install openssh server 在 etc ssh目录下 vim sshd config 发现该文件只可读 在终端输入命令 sudo passwd 然后输入当前用户的
  • 电脑提示vcruntime140_1.dll丢失怎么安装?

    许多用户在使用电脑的时候 在安装运行某些程序的时候 电脑突然提示由于找不到vcruntime140 1 dll 无法继续执行代码 遇到这种情况我们应该怎么解决呢 下面小编就带着大家一起看看吧 首先是打开电脑浏览器后在顶部输入 dll修复程序
  • 微信支付的收款功能被限制了怎么办,收款受限制怎么解除?

    使用小程序做电商 商城的微信支付的收款功能会遇到被限制的情况 直接影响用户下单后的付款操作 其实也不单单是小程序 商城APP中也会冒出类似的提示 遇到这种事情不要慌 根据具体的异常提示给出不同的解决方案 微信支付被限制的错误提示 我们列举两
  • 使用python对银行信息管理系统的简单实现

    一 首先是用户属性的类 class account object 储存用户信息的类 def init self id1 name tel money self id id1 账户 self name name 姓名 self tel tel
  • 更改element button 按钮颜色

    在全局的index scss里面改 显示时按钮样式 el button inblack 需要更改的按钮类型 background 060606 important border color 060606 important color ff
  • 【INS-30014】无法检查指定的位置是否位于CFS上的解决办法

    安装oracle数据库过程中 出现 INS 30014 无法检查指定的位置是否位于CFS上的解决办法如下 安装过程中 选择 仅安装数据库软件 在安装成功后 使用DBCA工具创建以及配置数据库即可
  • docker创建CentOS云主机(docker实践)

    基于Ubuntu操作系统 从零开始构建一套docker虚拟化平台 docker的产物为 容器 docker构建容器 Nginx WEB docker启动虚拟机 创建CentOS云主机 同样是容器 对之前内容的总结熟悉 要求 CentOS 7
  • java动态加载jar包,并运行其中的类和方法

    flink 相关 https www toutiao com article 6883793897495986691 动态加载jar包 在实际开发中经常会需要用到 尤其涉及平台和业务的关系的时候 业务逻辑部分可以独立出去交给业务方管理 业务
  • 下面是两种解决Redis击穿问题的方法,并给出相应的Java代码实现。

    Redis击穿问题指的是当一个key在缓存中过期时 恰好有大量并发请求访问该key 导致请求直接打到数据库 引起数据库压力过大 甚至宕机 方法一 使用互斥锁 在访问缓存之前 首先获取一个互斥锁 防止多个请求同时访问数据库 只有一个请求可以访
  • 【计算机基础

    定点数的表示 定点数 小数点的位置固定 例 996 007 常规计数 浮点数 小数点的位置不固定 例 9 96007 10 2 科学计数法 二进制的定点数 浮点数也类似 无符号数 整个机器字长的全部二进制位均为数值位 没有符号位 相当于数的
  • 【NLP】第 6 章 :微调预训练模型

    到目前为止 我们已经了解了如何使用包含预训练模型的huggingface API 来创建简单的应用程序 如果您可以从头开始并仅使用您自己的数据来训练您自己的模型 那不是很棒吗 如果您没有大量空闲时间或计算资源可供使用 那么使用迁移学习 是最
  • Git clone 时 出现SSL certificate problem error

    出现这个问题的原因是本地默认开启了SSL认证 但是在本地找不到SSL证书 解决办法就是关掉 SLL认证 git clone 时加上参数 no ssl check 完整的命令应该是 git clone no ssl check https g
  • 【CV with Pytorch】第 7 章 :图像异常检测

    机器学习的研究使我们进入了研究各种模式和行为的过程 它使我们能够构建可以研究封闭环境的模型 预测能力通常遵循模型训练过程 这是我们在训练模型时需要经常问的一个重要问题 还有另一个问题需要回答 多少数据足以帮助模型理解分布 以便我们有一个好的
  • Unity动画控制器animator.CrossFade

    需要特别注意 1 CrossFade虽然可以不用任何逻辑来链接而直接跳转 但是CrossFade只能覆盖其他动画 当当前动画播放完毕而没有跳出这个动画时再次调用CrossFade将会失败 造成动画依旧停在原位 参数animator Cros
  • 通过微信小程序实现登录功能

    后端服务器可以在CSDN上开通 价格优惠 CSDN开发云 https img home csdnimg cn images 20220518054835 png https dev csdn net activity utm source
  • 0227:zotero文献管理/小绿鲸英文/CSDN做笔记

    搜索 下载 白嫖 翻译 文章 如何精准找到和方向相关的文献 谷歌学术 国内无法正常进入 两个镜像网站 https xueshu dailyheadlines cc https scholar lanfanshu cn 搜索技巧 关键词套双引
  • 深度学习模型参数量/计算量(附计算代码)

    参考 https mp weixin qq com s biz MzI4MDYzNzg4Mw mid 2247546551 idx 2 sn f198b6365e11f0a18832ff1203302632 chksm ebb70e63dc
  • 硬件产品经理:硬件产品敏捷开发

    目录 简介 敏捷 CSDN学院 作者简介 简介 之所以敏捷产品开发流程会越来越普遍 主要得益于这个方法可以让企业使用更少的资源去开发出令客户满意的新产品 敏捷开发强调的最重要的一点就是 快 也就是要求通过快速迭代来获取频繁的客户反馈 这就特

随机推荐

  • java泛型代码编写

    java泛型代码编写 泛型的由来 我们先看下面这段代码 List list new ArrayList list add 24 向集合中添加一个 Integer 类型的数据 list add Tom 向集合中添加一个 String 类型的数
  • 美团笔试-小美的元素删除

    小美的元素删除 小美有一个数组 她希望删除k个元素 使得剩余的元素两两之间互为倍数关系 你能告诉小美有多少种删除方案吗 由于答案过大 请对10 9 7模 输入描述 第一行输入两个整数n k 1 lt k lt n lt 10 3 表示数组长
  • Qt - 鼠标事件

    欢迎转载 请注明出处 https blog csdn net qq 39453936 spm 1010 2135 3001 5343 原文链接 https blog csdn net qq 39453936 article details
  • 电脑主板线路连接图解_台式机电源线接法图解(电脑主板接线图解高清

    对于组装一台电脑 主板上的跳线是最让小白装机用户头疼的事情 但其实具体跳线插法 在机箱连接的跳线接口上以及主板跳线插座上都有详细标注 我们只需要在主板上找到对应插座 插上去就好了 那么机箱上的跳线接在主板那些位置 下面精装之家分享一下台式电
  • springBoot框架简介入门教程(快速学习版)

    文章目录 回顾spring 优点 缺点 SpringBoot概述 SpringBoot特点 SpringBoot 的核心功能 SpringBoot自动配置 SpringBoot开发环境构建 SpringBoot配置文件 SpringBoot
  • 【P2P租车】宝驾租车:学大创始人李如彬再创业

    转自 http www cyzone cn a 20140708 260116 html 月底 上线仅一周的私家车共享平台宝驾租车获得500万美元天使投资 这是李如彬第二次创业 李如彬自己有20多辆车 平时大多闲置 这让他看到了机会 宝驾租
  • mysql 添加用户

    mysql 添加用户 1 旧版本的mysql添加新用户 INSERT INTO mysql user host user password select priv insert priv update priv VALUES localho
  • 分布式事务6种解决方案(超详细)

    文章目录 分布式事务六种解决方案 前言 ACID 分布式事务 2PC 二阶段提交 同步阻塞协议 准备阶段 提交阶段 协调者故障分析 协调者是一个单点 存在单点故障问题 3PC 三阶段提交 准备阶段 预提交阶段 提交阶段 参与者超时机制 总结
  • 极海MCU---keil5手动添加Pack

    下载pack文件 进入极海半导体官网 技术支持 点进去下拉 找到软件支持 找到对应的芯片 我使用的是APM32F1XX 软件支持中包括pack和SDK SDK中有库文件和一些例程 开发时会用到 都下载下来 keil5中安装pack 打开ke
  • IDEA无法创建目录

    在WEB INF目录下添加新目录 右键找不到new directory选项 可能是因为设置junit test目录导致 在项目上右键 选择 Make Directory as 之后再选择 unmarke开头的那个选项 下图中是选择过后的 已
  • luckysheet的使用——10.页面缩放报错问题

    在使用luckysheet的项目 切换到其他页面后 对该页面进行缩放的操作时 会触发luckysheet的resize操作 此时因为当前页面并非是luckysheet的调用页面 页面就会报错无法使用 需要对源码进行修改 阻止该方法的调用 1
  • NAT 技术详解

    一 什么是NAT 为什么要使用NAT NAT是将私有地址转换为合法IP地址的技术 通俗的讲就是将内网与内网通信时怎么将内网私有IP地址转换为可在网络中传播的合法IP地址 NAT的出现完美地解决了lP地址不足的问题 而且还能够有效地避免来自网
  • android如果将recyclerView嵌套进NestedScrollView中,可能导致加载更多一直执行

    今天在使用BaseQuickAdapter对RecyclerView进行绑定的时候 支持加载更多 却发现一直自动进行加载更多 最后发现问题是因为在NestedScrollView中的缘故 还不知为什么
  • Gradio学习笔记--Gradio基本用法和简单案例

    目录 1 配置Gradio 2 Hello World案例 2 1 基本使用 2 2 进阶使用 3 图像案例 3 常用类 Interface 和 Blocks 1 配置Gradio 使用 pip 安装 Gradio pip install
  • Feedsky 上 csdn blog 订阅数排名 (zz)

    1114356 programmer editor http blog csdn net programmer editorhttp feeds feedsky com csdn net programmer editor 23897 po
  • Ubuntu子系统下ssh安装、开启等

    查看win系统盘符 ls 加粗部分为代码 yt PC 20200902BXWS cd mnt yt PC 20200902BXWS mnt ls 因为电脑上有四个盘 外加一个虚拟环境wsl 在这里插入代码片 查看linux 目录 才是根目录
  • 出现了一个意外,不能完成你在设置中所要求的更改

    今天叫了师傅来装宽带 在配置IP地址的时候出现了这样的情况 本来我里面是有以前设置的IP地址和DNS服务器地址 现在要更改成自动获取 结果总是弹出这样的错误信息来 有点烦 师傅忙活了半天 也没能搞定 正巧到了饭点 他叫我先自己弄弄 他先回去
  • 嘉立创投板笔记-Altum Designer机械层对板子形状的影响

    本次采用最简单的zip下单 操作部分记录如下 板子边框层用嘉立创建议的机械层1 mechanical 1 虽然 3D图仅供参考 具体以实物为准 但是嘉立创自家的3D解析想必也能反映出一定的形状识别逻辑的 注意 本笔记仅供参考 具体说法以嘉立
  • facenet代码注释

    facenet识别中的embedding代码块 import tensorflow as tf import numpy as np import sys import os import copy sys path append alig
  • 原型绘制提效技巧分享

    不管是前台PM还是后台PM 在工作中或多或少都要进行原型设计 原型可以说是产品 开发 测试之间进行交流沟通最重要的文档之一 那么怎么把原型画得又快又好呢 从设计流程上看 原型设计节点包括但不限于梳理需求大纲 规划页面结构 完善信息结构 绘制