产品经理必修课

编辑导读:原型设计是产品经理的一门必修课,是需要稳打稳扎的基础工作。那么,如何才能做好原型设计?本文将从三个方面展开分析,与你分享。

原型界面:原型界面是APP不同界面展示出来的图文效果,重点是功能和逻辑结构的梳理与呈现。

注意事项:

  • 尺寸:考虑到小组的组员分别绘制原型图,以及由于疫情在家办公,沟通交流受到限制。应该事先考虑原型图的尺寸,达成统一。包括常用组件尺寸、机模的位置。

  • 字体:页面中重点凸显的内容,如字体元素颜色加重,按钮或某个模块采用深色块填充。这样做的目的是视觉设计师可以很快明确页面元素的重要性层级,而不必一定要仔细阅读页面交互说明。

  • 颜色:原型图模块背景或元素一般采用黑白灰色值,目的是避免给视觉设计师造成用色干扰。

  • 字体:原型图中使用相同的字体,保持所有页面字体呈现一致性。字号要依据具体页面中元素重要性的不同而定,一般来说为便于清楚查看,字号最小12px。

  • 迭代:迭代页面如果少且在现有基础上进行优化,可以放在原页面的下方,并且说明是迭代页面;如果迭代是增加功能或者迭代页面较多,可以新开页面,将所有的迭代页面放在文件夹内,标注是迭代二期或者三期

交互说明,简单来说就是:原型图边上的注释,对原型图的解释说明

一、蓝色区域——操作说明

  • 用户能做什么操作?比如输入、点击、滑动等。比如点击输入框提示文字消失、点击某按钮该按钮出现颜色变化。

  • 操作后有什么反馈?比如跳转新页面、出现弹框、面板切换、动画效果等。 比如点击“登录”出现弹窗:账号错误,请重新输入。

  • 不同状态下的操作有什么限制?比如登陆和非登陆的状态、会员和非会员的状态、可用和不可用的状态、互斥状态、不同网络条件等。 比如淘宝未登录时仅可浏览商品界面,但当用户进行某些个人行为操作时,如购买,收藏和关注等,此时会引导用户去注册登录账号。

  • 不同状态下的操作反馈有区别吗?具体有什么区别? 比如对同一个按钮,单点与长按的操作反馈会有区别吗?要将区别写的清楚、具体。

二、蓝色区域——数据说明

  • 数据怎么来的?是后台上传,用户行为还是前台写死的数据? 比如积分商城里物品的价格就属于后台上传。

  • 数据的显示有什么限制?比如字符长度、显示尺寸、行数等限制。

  • 数据是否存在为空的情况?如果是,为空怎么显示?比如头像,如果用户没有上传头像,该怎么显示?

三、红色区域——错误说明

  • 异常操作:连续多次相同的操作给予的反馈,比如相同时间段内多次点击发送短信验证码,应用会提示隔几分钟之后再来尝试发送。

  • 数据相关:服务器无法获取数据,数据加载时间较长等。

  • 页面提示:尤其是对To c端的产品,经常会有运营活动,有关某活动即将上线、活动失效、服务下线、系统繁忙等提示就必不可少了。

一个基本点,所有的页面都可以分为两种状态

  • 进入时就能看见的状态(以原型的方式进行表述,不用附带文字说明)

  • 操作后状态(此部分需要进行描述)

模块分类

模块是将原型界面进行分解,说明操作后的变化,可以用数字标记,也可以将模块单独拿出来进行说明。

  • 避免模块小而杂:比如用户昵称、用户头像、个人签名等都可以叫做用户信息模块,当标记模块时,可以作为一个整体,不用单独分开成很多模块,这样可以增强易读性。

  • 标记模块时,要注意和原模块大小相似,不能放大或者缩小,可以直接复制粘贴。

  • 进行模块分解要按照顺序,比如从大至小,先个人信息,再头像信息;或者从左至右,先王国,再首页,再消息。

使用场景:

使用场景是为了更好的说明用户进入这个页面干什么,是指用户在此页面能够进行哪些操作,比如积分商城页面,用户可以添加商品到购物车,查看商品信息、查看商品分类等。

全局说明:

全局说明是对整个页面的信息状态或对于整个页面的概括

举例:

  • 数字规则,全部用阿拉伯数字显示

  • 页面说明:是XX页面,比如是领养页面

  • 用户说明:针对XX用户,比如领养页面就是针对想要免费领养宠物的用户

建议:

  • 若交互原型有了调整(包括交互说明),一定要与团队成员告知!!并提示修改位置(在哪个页面)。就算改了一处小东西,也尽量和同步一下,不然后续对接出现很多问题。

  • 交互说明不是一次能写完的,实在对该产品不断的使用和团队的讨论中一点点增加、修改、迭代更新。考虑的不周全、写的不全面是很正常的,所以我们必须多听听多方视角的声音,并尊重、虚心接受他人的意见,不断修改完善。

本文由 @仙女骑驴 原创发布于人人都是产品经理。

题图来自 Unsplash,基于CC0协议

(0)

相关推荐

  • 原型设计(结对第一次)作业

    原型设计(结对第一次)作业

  • 万字干货!一篇文章搞懂交互设计工作流程

    来源:语雀   作者:张宇铭 蔡丹雷 交互设计工作流程 交互设计师的工作,不仅仅是输出设计方案,还需要参与前期的需求讨论.后期开发.测试验收等等产品设计与实现的多个环节.拿到一个新的项目需求后,从设计 ...

  • 产品|003期-IVD产品经理的竞品分析必修课(1)

    话说什么时候需要写一篇竞品分析呢? 向临床客户介绍自己的产品? 跟经销商谈合作的时候? 我刚开始接触竞品分析,是刚成为产品专员没多久,然后就有销售人员找过来,有没有跟XX产品的对比说明啊,我正在见主任 ...

  • Fogg行为设计模型在产品设计中的应用 | 人人都是产品经理

    从Fogg行为设计模型中,我们能拆解出动机.能力.触发要素等关键要点,并在该行为设计模型影响下得到一些产品设计的思考与启发. "设计是人为的,为人的行为",设计的内含已经起从初简单 ...

  • 产品经理的势、道、法、术、器

    "势.道.法.术.器"是极具中国特色的词汇,最早见于先秦,法家的集大成者韩飞有云:"君无术则蔽于上,臣无法则乱于下","抱法处势则治,背法去势则乱&q ...

  • 产品经理必备的13款效率工具 | 产品壹佰

    工欲善其事,必先利其器.互联网公司的产品经理在日常工作中离不开一些专业工具软件的支持.现在就结合产品经理的具体工作内容,给大家分享一些比较实用的工具软件,它们涵盖思维导图制作.产品文档写作与协作.产品 ...

  • 吐血整理,最全的产品经理常用工具清单! | 人人都是产品经理

    百度统计:[免费,在线使用]一款免费的网站流量.互联网趋势统计分析工具,提供的功能包括流量分析.来源分析.网站分析等多种统计分析服务.你可以通过它快速查看某个关键词在百度的搜索规模有多大,一段时间内的 ...

  • 产品经理面试习题大汇总 | 产品壹佰

    前言:凡事"预则立,不预则费".即使你有丰富的产品经验,在面试那种紧张的环境下要面试好也不是一件易事,因为在那种环境下,你要对面试官提出的问题快速反映,快速组织语言,而你又没有经常 ...

  • 42个产品经理日常工作中常见的英文缩写

    本文将在产品经理工作中常见的42个英文缩写进行了归类:产品文档相关团队相关数据相关广告相关行业.平台相关功能相关开发相关产品文档相关:BRD:Business Requirements Documen ...

  • 产品经理要具备什么能力?职业瓶颈期该如何自救?

    在过去十年中,产品经理一度被成为互联网行业最容易上升的通道,同时也是非技术出身的学生进入互联网行业的最佳突破口. 但是,随着互联网与传统行业的转型发展,企业对于人才的需求逐渐提升,越来越多的人产生了迷 ...

  • 产品经理的焦虑

    一面是移动互联网商业环境的基本成熟,特别是互联网产品形态.开发.设计越来越标准和规范:一面又是AI.区块链.IOT.VR等新技术在不断更迭出新.一个是看得到的现在,一个是看不清的未来,接下来会衍生出什 ...