好的产品经理都是这样绘制原型图的...

本片文章(原型上篇)重点内容:

  • 清晰的视觉层次

  • 视觉流结构

  • 功能预见性

  • 信息的焦点即为视觉的焦点

  • 足够简单

  • 考虑到边界条件

首先,我们要明确原型图是画给谁看的,通常是以下几类人:开发、部门领导、UI设计师和测试,一个完善的产品流程离不开着几个角色。

开发通常最关心的是有多少功能,功能的复杂度怎么样,边界条件是什么,异常情况怎么处理等。设计师通常关心元素之间的关系,排版和布局。而跟主管汇报,由于主管的事情是很多的,他们通常最关心功能整体的流程、原型的易读性,以及价值体现。而测试则关心产品需求用户(后面会详细介绍),辅助他们写测试用例,以及是否穷尽考虑到各个场景。

那么,怎么样的原型图才算是专业的原型图呢?小编总结了工作以来画原型图的经验,总结出了以下经验。

一、清晰的视觉层次

突出重要元素,弱化次要元素

页面是由元素组成的,这些元素包括线、颜色、按钮等,要做到层次清晰,就要把重要的元素进行强化,次要的元素进行弱化,比如可以通过颜色的饱和度来突出重要元素,通过面积突出重要元素等,引导用户聚集视觉焦点到重要的元素上。如下图,通过对比颜色和区域面积的大小,来突出重要元素。

格式塔原理

将相关的元素组织在一起,让用户知道这些元素在任务、数据和工具上是相关的,通常用位置表示。相关的元素位置上相近,不相关元素用空间隔开。如下图,第一个图为反面例子,信息距离上下一致,用户无法区分中间的信息是属于上方还是下方。第二张图是airbnb的截图,红色线框部分明显与下方隔开一定距离,在视觉上体现为跟上方相关。

二、视觉流结构

什么是视觉流?

视觉流是指视觉焦点形成的轨迹,由于眼球生理结构限制,人眼在某时刻只能产生一个焦点。人的这一视觉特性使得人的视线运动通常表现为点到点的跳跃式扫描(saccade),而不是平滑移动。人在阅读时,一行通常包含4~7个跳动――定位(jump-fixation)的动作,注视持续时间为200~600ms。 因此用户在对界面持续关注后会留下一系列的视觉焦点,这些视觉焦点的轨迹称为视觉流(visual line)。

平稳的视觉流结构能帮助用户快速理解逻辑路径,减少用户的认知成本。平稳的视觉流有两个原则:

  • 一、视觉焦点不宜过多;

  • 二、视觉焦点的路径逻辑尽量简单。

如下图,同为软件教程详情页,左侧的视觉焦点过多,视觉流向路径复杂,而右侧的视觉流向路径简单,容易理解。

三、功能预见性

看到一个功能,就知道该功能如何使用,称为功能预见性。

如,lofter底部导航栏在改版前,只用图标表现功能,没法清晰知道每个图标的含义。改版后,用“图标+文字”,直接解释每个图标的含义,减少认知负荷。

如下图,为途虎养车某个门店的评价截图,该门店提供三个服务,分别是轮胎、保养、美容和安装,红色方框内为各个服务的得分。当第一次进入这个页面,默认“轮胎”评价高亮红色,其他为灰色,潜意识里不知道点击是可以切换查看对应评论列表的,即切换查看功能感太弱。

四、视觉的焦点为信息的焦点

每个页面都有一个核心功能,这个核心功能不应该被其他功能所覆盖,特别是当功能越来越多、越来越复杂时。那我们怎么判断页面上哪个功能是信息的焦点呢?如果针对竞品调研,页面上颜色饱和度最高,或者功能占据区域最大的即为页面的核心功能,即信息焦点。当设计自家产品功能,要从主流用户的主流场景,或者功能的商业价值、使用频率等维度进行分析,一个页面的信息焦点不宜过多,过多会影响视觉流的稳定。

如下图,图1为《风起长林》中的剧集截图,图2为点击后的效果,图3刻意把进度条拖动方块变小。我们先来分析进度条的使用场景:查看进度、快进、拖动进度条,当把进度条变小,如图3,进度条不再成为信息的焦点,视觉效果被弱化,用户在查看进度、快进时要自己看才能看到当前进度,拖动滑块时要小心翼翼才能点中。

再看一个生活中真实的例子,有一天点了外卖,配送员说已送达,于是去公司的前台找(前台有很多外卖),找了三遍没有找到,第四遍终于在仅剩2份没有人拿的外卖中找到了。

如下图,我们先来做个场景分析,去找外卖,一般人大多数情况时寻找自己的名字/电话,可是这份外卖单子把骑手的姓名和电话号码打印得很大,客户(我)的名字没有打印,只留了一个小小的号码,造成了很难找到,然而我又不会刻意去记住骑手名称和电话。

五、把简单留给用户

复杂度守恒定律(Law of conservation of complexity)由Larry Tesler 于1984年提出,也称泰斯勒定律(Tesler’s Law)。根据复杂度守恒定律,每个应用程序都具有其内在的、无法简化的复杂度。

无论在产品开发环节还是在用户与产品的交互环节,这一固有的复杂度都无法依照我们的意愿去除,只能设法调整、平衡。在交互设计中,体现为把复杂留给系统,尽量把简单的界面呈现给用户。

如,我们在百度上搜索图片,输入关键词-点击搜索-出现图片,整个过程是一个非常简单的过程,即白盒部分是非常简单的。黑盒部分,在用户输入关键词后,系统进行需求识别,识别出来大量图片,然后将些图片继续排序,检索出用户最可能希望看到的图片,然后才会显示出来,用户看到的结果系统往往需要进行大量的计算。

比如,你在家里点外卖和在公司点外卖,无需每次都定位和选择收货地址,系统会自动检测你当前的地理位置,从而给出合适的收货地址。但是快递的收货就不一样,有可能在家里下单,收货地址选为公司,或者在公司下单,收货地址选为家里,这个时候就不能根据用户当前的地理位置进行自动选择出收货地址。

其他的还体现为默认给出分类、选项、填空内容等,由输入变为选择。显性显示用户最关心的信息,比如在美团上点了外卖,很多人很关心外卖的送达时间,会好几次进入订单详情查看,美团干脆直接把送达情况展示出来,无需进入详情页查看。

根据《简约至上》,可以大大简化页面上的功能。

1.删除

  • 关注核心功能:增加价值始于改进核心体验

  • 砍掉残缺功能:不完美的功能不如不要

  • 删除掉可能对用户带来负担的细节,如干扰的文字、可有可无的选项

  • 排定功能优先级:产品的价值不是由功能的多寡来决定的,而是看能否满足用户的最高优先级目标

  • 删除干扰项

  • 选择聪明的默认值,减少用户选择

  • 避免视觉混乱,让用户保持专注

2.组织

  • 分类

  • 利用网格,呈现页面布局

  • 利用大小、位置、分层、色标等进行实际组织

  • 关注用户的期望路径,而不是逻辑

3.隐藏

  • 隐藏不常用但不能少的功能

  • 渐进展示:展示核心功能,隐藏扩展功能

  • 阶段展示:随着用户深入界面而展示相应的功能

  • 适时出现,不打扰用户,隐藏的目的不是为了藏,而是更好的展示

  • 让功能方便找到,不能藏得找不到

4.转移

  • 把复杂性转移给擅长的一方,如用户、后台系统、其他设备

  • 创造开放式体验,降低用户受到的约束


六、考虑到边界条件

产品经理或者交互设计师,在做功能时,很容易遗漏一些边界条件,出现遗漏的原因,主要是在设计功能时至考虑到了主流场景,只做了主流场景下我设计,异常场景或者边界条件很难考虑到,这里教大家一个小技巧,写产品需求用例。在构建产品架构雏形时,用例往往能起到帮助确定功能界限的作用。

用例包括以下内容:

  • 用例名称  – 此产品/功能的名称

  • 用例编号 – 此产品用例的编号

  • 角色- 操作/执行该功能的角色

  • 简要说明 – 最简化的内容对该需求功能的描述

  • 前置条件- 执行该功能的前提条件

  • 后置条件 – 该功能执行完毕后的结果条件

  • 主事件流- 该功能角色所执行的主要正常过程

  • 异常和分支事件流 – 该功能角色所执行的次要异常过程

如在一个图片素材下载网站下载图片的用例:

如果不写产品用例,很多人可能只考虑进入详情页-点击下载按钮-下载成功这个流程,很容易遗漏用户未登录状态下的提示,无权限下载该图片的提示,甚至是图片下架后无法下载图片的提示。

后面我们将会分享原型图的标注,画开发看得懂的原型图、页面跳转关系图等,喜欢的小伙伴可持续关注我们的公众号:产品刘

最后,分享个移动互联网数据安全报告,可以加微信:yw5201a1 领取。

此外我们的官方网站也上线了,每日分享高质量的文章、原型素材和行业报告,小伙伴可自行前往索取,支持搜索,需要的小伙伴可点击底部的阅读原文直接查看,或者复制网址www.dadaghp.com 打开。

更多干货可关注微信公众号:产品刘

想学习更多关于产品、职场、心理、认知等干货,可长按右边二维码,关注我们。

··················END··················

RECOMMEND

推荐阅读

手把手教你编写接口需求文档

手把手教你做产品经理1.0

数据埋点:前端页面PV/UV的触发和交互

面试官重点考察求职者这5项能力

点击“阅读原文”

查看更多干货

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/51612.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

好的产品经理都是这样绘制原型图的(下)...

前几天分享了上篇:好的产品经理都是这样绘制原型图的... 今天来分享下篇,本篇(原型篇-下)主要内容: 原型图标注,画开发看得懂的图同一个页面展示所有的交互状态页面跳转关系图(不要做孤立的设计…

【通览一百个大模型】LaMDA(Google)

【通览一百个大模型】LaMDA(Google) 作者:王嘉宁,本文章内容为原创,仓库链接:https://github.com/wjn1996/LLMs-NLP-Algo 订阅专栏【大模型&NLP&算法】可获得博主多年积累的全部NLP、大模型和算法干…

生成式AI加入低代码,或将再次颠覆开发行业

研究表明,生成式AI模型的发展将会进一步降低使用低代码和无代码开发工具的门槛,并可能诞生一类全新的智能开发技术。 在帮助用户构建自己的软件应用程序方面,低代码和无代码平台已经发挥了至关重要的作用,这些用户很少具备或根本…

聊一下大学几年如何渡过

(点击即可收听) 随着高考志愿填报的结束,等待自己的就是录取,出分与录取是每个高考生最激动的时刻 如果被某个大学和专业录取了,那接下来就是好好去上大学了的 作为一个经过大学洗礼的自己,在这里有一些话想对即将步入大学的同学说…

这里有一份诚意满满的计算机专业推荐书单

随着高考陆续放榜,盼来成绩的考生与家长们又迎来另一个纠结的难题——志愿填报。确认自己的专业方向,不仅要综合自身兴趣与特长考虑,还需与未来的就业挂钩。 根据《2023高考志愿报告》,当前计算机科学与技术专业热度仍然排名第一位…

IntelliJ IDEA 中插件的安装过程

这里简单介绍一下 IntelliJ IDEA 中插件的安装过程 有两种方式: (1)在线安装 (2)本地安装/离线安装

VS2022 + QT中文乱码问题

解决方法:下载插件 第一步:扩展→管理扩展 第二步:搜索并下载Format on Save for VS2022 可以在已安装栏看是否安装成功,重启VS2022就可以了。 感谢阅读,如有不足之处,欢迎来指正。谢谢!

如何解决表单提交的中文乱码问题 (控制台乱码输出)

在使用Tomcat跑项目的时候 会遇到类似下图乱码控制台输出问题 非常不方便 如果不解决 会影响我们后面代码报错 找问题 介绍一下几种乱码问题 一、JSP文件修改乱码 <% page language"java" contentType"text/html; charsetUTF-8"pageEncoding"UT…

页面乱码问题解决(汇总)

页面乱码问题解决 目录 1.前端页面代码解决乱码问题 2. 后端端页面代码解决乱码问题 3. idea编译文件乱码问题 1.前端页面代码解决乱码问题 &#xff08;a&#xff09;页面是jsp&#xff0c;对于这个&#xff0c;需要在jsp头部加上 page的编码设置 <% page contentTyp…

各种中文乱码解决大全

各种乱码&#xff1a;处理方式 配置tomcat以及IDEA的配置文件时&#xff08;注意要重新启动&#xff09; 希望以下几种解决方法对大家有所帮助&#xff01;&#xff01;&#xff01;1.启动Tomcat控制台中文乱码&#xff1a; 解决方法&#xff1a; -Dfile.encodingUTF-8 2.I…

构建个人版ChatGPT Prompt

目录 前言 一、基本原则 二、进阶技巧 1.增加结果示例 2.角色扮演 3.对于复杂问题&#xff0c;分步进行 4.使用分隔符 5.要求ChatGPT进行自我检查 6.使用英文 三、推荐免费插件 总结 前言 一、基本原则 当我们尝试写一个更好的 Prompt 时&#xff0c;我们可以参考 E…

ChatGPT在媒体与娱乐领域的沉浸式场景:虚拟主持人和创意助手的新应用探索

第一章&#xff1a;引言 在当今数字化时代&#xff0c;人工智能技术在媒体与娱乐领域的应用日益广泛。ChatGPT作为一种先进的自然语言处理模型&#xff0c;具备强大的对话生成能力和创造力&#xff0c;为媒体与娱乐产业带来了新的创意和可能性。本文将探讨ChatGPT在媒体与娱乐…

我用一早上时间做了个股价预测,居然这么准?

最近因为做项目的需要&#xff0c;要做一些数据预测&#xff0c;因此就去学习了一下相关的知识。主要就是采用LSTM来做时间序列的预测。 IBM股价预测 数据集选择的是IBM2006-2018年的股价数据&#xff0c;我这里算的是每日的最高股价。其中&#xff0c;2006-2016年的数据是训…

量化分析预测股市?试试这个 Python 库

本文将展示如何使用 Python 的第三方库 Stocker 来进行股票分析和预测。 安装第三方库 安装所需的库后&#xff0c;我们要做的第一件事就是将 Stocker 类导入到我们的 Python 代码中。我们可以通过在脚本目录中启动的 Jupyter Notebook 执行此操作。 !pip install quandl !pip …

解锁更高效的AIGC工具:现代大语言模型工具推荐

AI技术的普及已经在近年来不断增长。这种技术已经改变了我们与电脑的互动方式&#xff0c;让我们能够更高效、更自然地完成任务。本文将展示10个基于ChatGPT和GPT-3 AI模型构建的最强大的资源&#xff0c;使您更容易充分利用它们的潜力。因此&#xff0c;如果您想利用AI技术改进…

浅议抖音短视频平台的利与弊

近些年&#xff0c;各类短视频在中华文化国际传播中发挥了独特作用&#xff0c;比如说李子柒、丁真等网络达人为代表的视听内容在国际话语体系中努力塑造可信、可亲、可敬的中国人形象&#xff0c;并以此带动了“中国元素”的时尚潮流&#xff0c;引发海外民众对东方文化的关切…

网络案例分析之999皮炎平出鹤顶红色号的口红

今天说点不是纯技术的事儿&#xff0c;不过也是互联网相关的。 就是上周末被刷屏的999皮炎平出了口红了&#xff0c;而且出的三款口红还相当霸气&#xff0c;分别是“鹤顶红”、“夕阳红”和“够坦橙”。 且不说这是一次非常大的跨界&#xff0c;就这三款的名字就十分有嘘头&…

【揭秘】过敏性炎症的元凶竟然是“它”

在人体免疫系统中&#xff0c;原始T细胞经刺激后&#xff0c;可分化为不同路径的辅助型T细胞(T helper&#xff0c;Th)&#xff0c;其中Th2介导的2型炎症已经被科学家证明主要参与粘膜表面的屏障免疫&#xff0c;与特应性皮炎等2型炎症性疾病息息相关&#xff0c;而IL-4是其中发…

儿童过敏性疾病的表观遗传年龄

在过去的几十年里&#xff0c;被诊断患有哮喘和过敏症的儿童人数大幅上升&#xff0c;究竟是什么原因推动了这一增长&#xff0c;目前尚无定论。环境和生活方式的迅速变化可能是罪魁祸首&#xff0c;但这两种疾病的病因仍有许多有待了解的地方。为了加深我们的理解&#xff0c;…

文献(5): 单细胞转录组揭示人类纤维化皮肤病中成纤维细胞的异质性

一句话评价&#xff1a;小样本量单细胞转录组在冷门疾病领域应用前景尚可&#xff0c;常规套路也能发NC 1. Title 标题可以看出本研究的主要内容&#xff1a;①构建成纤维细胞的图谱/揭示成纤维细胞的异质性&#xff1b;②找到一群&#xff08;相对于正常样本&#xff09;在纤维…