给第一次接触产品设计的写的

设计概念

设计原则

你可以参考以下的原则在每次评估一个网站时,建立excel,包含两个表格
表格1:

启发式评估
评估人员姓名
设备/浏览器/OS
网站URL
日期
容易修复度 (ER)
E0.修复需要最大的努力
E1.修复需要相当大的努力
E2.修复需要一些努力
E3.修复很容易,但只需付出很小的努力
E4.修复是琐碎且易于实现的
1.系统状态的可见性
该网站通过建设性、适当和及时的反馈向用户告知正在发生的事情。
问题ER
2…
问题ER

表格2:

启发式评估
评估人员姓名
设备/浏览器/OS
网站URL
日期
严重性等级(SR)
0.未发现违规行为
1.仅外观问题
2.小的可用性问题
3.主要可用性问题
4.可用性灾难
1.系统状态的可见性
该网站通过建设性、适当和及时的反馈向用户告知正在发生的事情。
清单YES NO NA SR
清单项1
清单项2

1.系统状态的可见性
该网站通过建设性、适当和及时的反馈向用户告知正在发生的事情。
清单YES NO NA SR
清单项1
清单项2

清晰的分块

重点信息放在开始
在这里插入图片描述

系统状态可见性

如果用户已经完成或正在完成网站上的活动,最好尽快提供反馈,以便他们了解自己在系统中的位置。
所有互动都必须有开头、中间和结尾。一旦任务完成,也许可以给用户一些安心的感觉,为他们提供信息反馈和明确的下一步选择(如果适用)。不要让用户猜测!

  • 每个界面都以标题开头吗/描述页面内容的页眉?
  • 所选图标/元素是否高亮显示从未选择的其他图标/元素?
  • 何时有视觉反馈是否选择或移动了对象?
  • 是图标的当前状态元素清楚地指示?
  • 是否通知用户系统通过反馈延迟(超过400ms)?

系统与现实世界的匹配

用户可能会根据以往使用类似系统的经验,对系统的运行方式做出假设。你可以使用他们熟悉的语言,帮助他们克服最初的不适应。

  • 图标是否具体而熟悉?
  • 产品是否使用计算机行话和技术性语言?
  • 菜单选择是否合乎逻辑地归类到有意义的类别中?

允许轻松撤销操作

犯错后发现有 "撤消 "选项,会让人松一口气。如果用户知道有一种简单的方法可以撤销任何错误,他们就不会那么焦虑,也更愿意探索各种选项。这一规则适用于系统中的任何操作、步骤序列或数据输入。范围可以从一个按钮到一整套操作。

用户控制和自由

必须给予用户控制权和自由度,让他们感觉自己在控制着系统,而不是相反。作为设计者,要尽量避免意外、干扰和任何用户没有要求的事情。用户应该是行动的发起者。

  • 多级菜单情况下,是否有方法返回到上一个菜单?
  • 用户能取消正在进行的操作吗?
  • 提示是否意味着用户有控制权?
  • 用户是否被提示确认会导致严重破坏性后果的操作?

一致性和标准

一致性是关键。无论是布局、按钮的大小、颜色代码,还是编写页面时使用的语气。如果你在一个页面上以特定格式显示信息,那么它在所有页面上都应该是一样的。

  • 表单字段是否区分大小写(如果适用)?
  • 所有图标是否都有标签?
  • UI是否避免在屏幕上大量使用全大写字母?
  • 在产品的所有屏幕中是否始终遵循了行业标准?
  • 即点击、悬停、选中的样式应该只有一套

防止出错

精心的设计能从一开始就防止问题的发生,这比良好的错误信息更好。Interface 的设计应尽可能消除错误。如果出错,系统应让用户简单理解并解决问题。一个好办法是显示清晰的错误提示和解决问题的描述性提示。这些都是处理系统错误的简单方法。

  • 提示是否简洁明了?
  • 错误消息是否提示问题的原因?
  • 如果有输入错误,产品是否会突出显示错误/表单字段?
  • 提示是否以建设性的方式陈述,没有对用户进行公开或暗示的批评?

识别而非 Recall

让用户识别用户界面中的信息,而不是期望他们记住或回忆起这些信息。简而言之,就是不要让用户付出不必要的努力!让导航尽可能清晰、详细和直接。为他们提供提示,在需要完成一些时间敏感的任务时提醒他们,并在屏幕或流程发生变化时通知他们。

使用的灵活性和效率

简而言之,系统的设计必须让有经验和无经验的用户都能使用。Thinking 在设计系统时,新用户可以在不知道任何快捷方式的情况下找到执行任务的方法。但是,在设计系统时,也要让有经验的用户能够使用快捷方式快速高效地完成操作。

美观简约的设计

设计不需要过度设计,好的设计具备以下特征:
简洁
不夸大功能即欺骗用户

帮助用户识别、诊断和恢复错误

一条好的错误信息应该礼貌、易懂、Precision、有建设性、清晰可见,并尽可能缩短解决问题以及教育用户的时间。

帮助和文档

尽管您的系统最好可以在没有文档的情况下使用。重要的是,任何此类信息都应该:易于查找、专注于用户的任务、包含用户应该采取的实际步骤,并且篇幅不宜过长。

减少短期记忆负荷

作为用户,我们的注意力可能是有限的,因此任何能让用户工作得更轻松的事情都是双赢的。你的用户可能更喜欢识别信息而不是 Recall 信息。尽量保持 Interface 简洁一致,并遵守模式、标准和惯例。这可能有助于提高识别度和易用性。根据用户的目标,您可以添加各种功能来帮助他们。例如,在电子商务环境中,可以显示最近浏览或购买的商品列表。

考虑让你的用户只需点击几下就能访问网站的所有区域。要做到这一点,你应该在菜单中创建一个良好的层次结构,并让事情一目了然。考虑为高级用户和新手用户提供功能,如键盘快捷键或宏功能。

UX

什么是UX
UX即用户体验,比如当用户想要订餐时,用小程序感觉很不顺手,就需要重新设计UX。

UX设计的5个步骤

现在我们就来介绍这些步骤。请记住,这是一个迭代过程,也就是说,在每一步之后,你都可以回到上一步来改进你的设计。按照以下流程并不会损坏你的创造力,相反在流程下工作会使得你具有更多时间产生创造力

感同身受

第一步是与你试图解决的问题产生共鸣。这能让我们更深入地了解用户,并开发出不仅能满足用户需求,还能通过消除不必要的不适或困扰来显著改善用户生活的解决方案。例如,用户可能会想"这要花很长时间才能弄明白"。

调研频次需要多高?
你永远不知道用户会创建什么样方式使用产品,因此你需要每周大约与5个用户对话,搞清楚为什么他们放弃使用了你的产品,直到持续几周,访问用户没有什么信息量那就可以停止

如何有效记录用户调查?
使用客户旅程图记录用户的问题,很有效。
设计方法:客户旅程地图通常以事件的时间轴为基础。例如,从客户访问网站的那一刻开始。然后,记录他们在实现目标过程中的进展,包括查看他们想要的产品或菜肴、定制、注册网站,甚至取消订单。这些只是您在使用网站时可能要执行的部分操作,但可能还有很多其他操作。最好的客户旅程地图是详细而细化的虽然旅程地图的种类各不相同,但它们通常都具备以下五个要素。

  1. 角色
    进行旅程的 Persona 或 User 就是行动者。旅程地图是关于行动者–他们的观点。行动者通常与 "角色 "相一致,他们在旅程地图上的行动是由数据驱动的。在下面的例子中,Tilly 就是行动者
    为了创建一个强有力的、清晰的叙事,你应该在每张地图上提供一个观点:Instance 中的 “小柠檬”。例如,Tilly 是一名演员,她在使用网站时的旅程。你可以为每个演员创建一张单独的地图。
  2. 情景和期望
    场景描述了 Journey Map 所涉及的情况,并与参与者的目标或需求以及具体期望相关联。例如,Tilly 正在网上订餐。她的期望包括能够轻松找到做出决定和完成订单所需的所有信息。
  3. 旅程阶段
    旅程阶段是旅程的各个高级阶段。它们组织了旅程 Map 中的其他信息:行动、想法和情感。不同的场景会有不同的阶段。
  4. 行动、态度和情感
    这些是行为者在整个旅程中的行为、想法和情感,映射在每个旅程阶段中。用户的行动是他们的实际行为和步骤。这一部分并不是要详细列出每个不同交互的步骤。相反,它是对参与者在该阶段行动的叙述。在不同阶段,用户的思维方式与他们的想法、问题、动机和所需信息相对应。理想情况下,这些都是客户的直接引述。
  5. 机会
    机会与所有权和衡量标准等其他背景一起,是对如何改善用户体验的见解的映射。洞察和机会有助于团队从地图中提取知识,即应该如何处理这些信息?在哪里可以找到最佳机会?

你可以使用很多工具和模板完成,比如
Miro:Miro 是一款在线协作白板工具,非常适合团队一起创建和编辑客户旅程图。它提供了丰富的模板库和强大的设计工具,使得制作旅程图变得简单和直观。
Lucidchart:Lucidchart 是一款流程图和图形设计软件,提供了客户旅程图模板和易于使用的设计界面,可以帮助你快速地构建和自定义旅程图。
Microsoft Visio:作为专业的图表制作工具,Visio 提供了强大的图形和图表功能,适合那些需要详尽绘制复杂旅程图的用户。
Canvanizer:Canvanizer 提供了多种创新和商业模型画布,包括客户旅程图。它简单易用,适合快速草图和初步概念验证。
一个基础的客户旅程图为以下样子
在这里插入图片描述

举个例子,开发小程序同理:
在餐饮店中应用客户旅程图的一些示例包括:
预订体验:顾客如何找到餐厅,预订过程是否简便。
到店体验:顾客进入餐厅的第一印象,接待的效率。
点餐过程:菜单是否清晰易懂,服务员是否友好有效。
就餐体验:食物的质量、氛围、等餐时间等。
结账和离店:结账过程的便捷性,顾客的整体满意度。

定义

现在,您必须决定如何处理这些共鸣。在定义阶段,你将分析和综合观察结果,以确定核心问题。在这一阶段,要制定一个问题陈述,例如:“作为用户,我想了解产品,以便迅速做出明智的决定”。

构思

现在,你已经有了一些同理心,对问题的背景有了很好的理解,问题陈述也起草得很好,你已经准备好开始思考解决问题的方法了。在构思阶段,你可以发挥自己的创造力,有数以百计的技巧可供使用。

设计

阶段1 草稿
阶段2 Wireframe
阶段3 原型设计

我知道有很多教程教我们如何使用原型设计工具,但我是mockplus从 开始的,该教程告诉你如何使用原型软件。https://help.mockplus.cn/p/360#1 初学者至少掌握静项控件,以及动态如画板与交互等

测试

根据前几步收集到的信息创建原型后,就可以对其进行测试了。测试通常需要将原型交到真实用户手中。你可以看到他们完成一系列任务或试图实现某个特定目标。你要观察他们的行为,并试着理解和同情他们的选择,然后继续设计循环。

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

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

相关文章

攻防演练-防守单位常见防守策略

为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 01 防守单位常见防守策略 01 防守单位常见防守策略 为普及网络安全知识,提高网络安全防范意识,和网络安全工作技能。我们将向大家介绍网络安全攻防演练中防守单位的一些关键策…

怎么通过微信小程序实现远程控制8路控制器/断路器

怎么通过微信小程序实现远程控制8路控制器/断路器呢? 本文描述了使用微信小程序调用HTTP接口,实现控制8路控制器/断路器,支持8路输出,均可独立控制,可接入各种电器。 可选用产品:可根据实际场景需求&#…

想搭建AI知识库的企业看这篇就够了

企业要想在激烈的竞争中脱颖而出,有一套高效、智能的知识管理系统是非常重要的。搭建AI知识库能够帮助企业整合、分类、检索和应用知识,因此成为众多企业的第一选择。对于想要搭建AI知识库的企业来说,应该注意哪些方面呢?本文将从…

大模型管理工具:SWIFT

目录 一、SWIFT 介绍 二、SWIFT 安装 2.0 配置环境(可选) 2.1 使用pip进行安装 2.2 源代码安装 2.3 启动 WEB-UI 三、部署模型 3.0 deploy命令参数 3.1 原始模型 3.2 微调后模型 一、SWIFT 介绍 SWIFT(Scalable lightWeight Infrastructure for Fine-Tuni…

Vue 局部布局 Layout 内部布局 [el-row]、[el-col]

之前的布局容器是一个整体的框架,layout里面的布局其实就是el-row和el-col的组合。 基础布局 使用单一分栏创建基础的栅格布局。 通过 ​row ​和 ​col ​组件,并通过 ​col ​组件的 ​span ​属性我们就可以自由地组合布局。 这种最简单,…

房屋出租管理系统需求分析及功能介绍

房屋租赁管理系统适用于写字楼、办公楼、厂区、园区、商城、公寓等商办商业不动产的租赁管理及租赁营销;提供资产管理,合同管理,租赁管理, 物业管理,门禁管理等一体化的运营管理平台,提高项目方管理运营效率…

纯血鸿蒙APP实战开发——一镜到底“页面转场”动画

介绍 本方案做的是页面点击卡片跳转到详情预览的转场动画效果 效果图预览 使用说明 点击首页卡片跳转到详情页,再点击进入路由页面按钮,进入新的路由页面 实现思路 首页使用了一种视觉上看起来像是组件的转场动画,这种转场动画通常是通过…

Linux---windows 机器和远端的 Linux 机器如何通过 XShell 传输文件

一、关于rzsz 这个工具用于 windows 机器和远端的 Linux 机器通过 Xshell 传输文件. 二、下载rzsz软件 用root输入命令: sudo yum install -y lrzsz下载完成: 三、如何传输 有图形化界面 1、从Windows机器传输给远端Linux机器 ① 直接拖拽 直接将…

栈和队列的基础知识,C语言实现及经典OJ题

基础知识 一.栈 1.栈的概念 定义:堆栈又名栈(stack),它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶,相对地,把另一端称为栈底。 压栈:向一个栈插入新…

2024年3月 青少年等级考试机器人理论真题二级

202403 青少年等级考试机器人理论真题二级 第 1 题 一个机器小车,用左右两个电机分别控制左右车轮,左侧电机转速是100rpm,右侧电机转速是50rpm,则此机器小车?( ) A:原地右转 B&am…

聚类分析 | 基于GA遗传算法优化kmeans聚类(Matlab)

聚类分析 | 基于GA遗传算法优化kmeans聚类(Matlab) 目录 聚类分析 | 基于GA遗传算法优化kmeans聚类(Matlab)效果一览基本介绍程序设计参考资料 效果一览 基本介绍 GA-kmeans聚类算法,通过GA遗传算法优化kmeans聚类&…

【C++】set 和 map 学习及使用

🔥博客主页: 小羊失眠啦. 🎥系列专栏:《C语言》 《数据结构》 《C》 《Linux》 ❤️感谢大家点赞👍收藏⭐评论✍️ 文章目录 前言一、预备知识1.1 关联式容器1.2 键值对1.3 树型结构的关联式容器 二、set2.1 什么是 se…