产品经理必修课——如何做好原型设计

4 评论 5666 浏览 11 收藏 7 分钟

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

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

注意事项:

  • 尺寸:考虑到小组的组员分别绘制原型图,以及由于疫情在家办公,沟通交流受到限制。应该事先考虑原型图的尺寸,达成统一。包括常用组件尺寸、机模的位置。
  • 字体:页面中重点凸显的内容,如字体元素颜色加重,按钮或某个模块采用深色块填充。这样做的目的是视觉设计师可以很快明确页面元素的重要性层级,而不必一定要仔细阅读页面交互说明。
  • 颜色:原型图模块背景或元素一般采用黑白灰色值,目的是避免给视觉设计师造成用色干扰。
  • 字体:原型图中使用相同的字体,保持所有页面字体呈现一致性。字号要依据具体页面中元素重要性的不同而定,一般来说为便于清楚查看,字号最小12px。
  • 迭代:迭代页面如果少且在现有基础上进行优化,可以放在原页面的下方,并且说明是迭代页面;如果迭代是增加功能或者迭代页面较多,可以新开页面,将所有的迭代页面放在文件夹内,标注是迭代二期或者三期

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

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

  • 用户能做什么操作?比如输入、点击、滑动等。比如点击输入框提示文字消失、点击某按钮该按钮出现颜色变化。
  • 操作后有什么反馈?比如跳转新页面、出现弹框、面板切换、动画效果等。 比如点击“登录”出现弹窗:账号错误,请重新输入。
  • 不同状态下的操作有什么限制?比如登陆和非登陆的状态、会员和非会员的状态、可用和不可用的状态、互斥状态、不同网络条件等。 比如淘宝未登录时仅可浏览商品界面,但当用户进行某些个人行为操作时,如购买,收藏和关注等,此时会引导用户去注册登录账号。
  • 不同状态下的操作反馈有区别吗?具体有什么区别? 比如对同一个按钮,单点与长按的操作反馈会有区别吗?要将区别写的清楚、具体。

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

  • 数据怎么来的?是后台上传,用户行为还是前台写死的数据? 比如积分商城里物品的价格就属于后台上传。
  • 数据的显示有什么限制?比如字符长度、显示尺寸、行数等限制。
  • 数据是否存在为空的情况?如果是,为空怎么显示?比如头像,如果用户没有上传头像,该怎么显示?

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

  • 异常操作:连续多次相同的操作给予的反馈,比如相同时间段内多次点击发送短信验证码,应用会提示隔几分钟之后再来尝试发送。
  • 数据相关:服务器无法获取数据,数据加载时间较长等。
  • 页面提示:尤其是对To c端的产品,经常会有运营活动,有关某活动即将上线、活动失效、服务下线、系统繁忙等提示就必不可少了。

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

  • 进入时就能看见的状态(以原型的方式进行表述,不用附带文字说明)
  • 操作后状态(此部分需要进行描述)

模块分类

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

  • 避免模块小而杂:比如用户昵称、用户头像、个人签名等都可以叫做用户信息模块,当标记模块时,可以作为一个整体,不用单独分开成很多模块,这样可以增强易读性。
  • 标记模块时,要注意和原模块大小相似,不能放大或者缩小,可以直接复制粘贴。
  • 进行模块分解要按照顺序,比如从大至小,先个人信息,再头像信息;或者从左至右,先王国,再首页,再消息。

使用场景:

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

全局说明:

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

举例:

  • 数字规则,全部用阿拉伯数字显示
  • 页面说明:是XX页面,比如是领养页面
  • 用户说明:针对XX用户,比如领养页面就是针对想要免费领养宠物的用户

建议:

  • 若交互原型有了调整(包括交互说明),一定要与团队成员告知!!并提示修改位置(在哪个页面)。就算改了一处小东西,也尽量和同步一下,不然后续对接出现很多问题。
  • 交互说明不是一次能写完的,实在对该产品不断的使用和团队的讨论中一点点增加、修改、迭代更新。考虑的不周全、写的不全面是很正常的,所以我们必须多听听多方视角的声音,并尊重、虚心接受他人的意见,不断修改完善。

 

本文由 @仙女骑驴 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 有几处错别字

    回复
  2. 顶顶顶

    回复
  3. 一楼

    回复
  4. 学到了

    回复