【giszz笔记】产品设计标准流程【8】

news2024/11/15 16:02:49

(续上回)

真的没想到写了8个章节,想参考之前文章的,我把链接给到这里。 

【giszz笔记】产品设计标准流程【7】-CSDN博客

【giszz笔记】产品设计标准流程【6】-CSDN博客

【giszz笔记】产品设计标准流程【5】-CSDN博客

【giszz笔记】产品设计标准流程【4】-CSDN博客

【giszz笔记】产品设计标准流程【3】-CSDN博客

【giszz笔记】产品设计标准流程【2】-CSDN博客

【giszz笔记】产品设计标准流程【1】-CSDN博客

八、交互设计

 1.交互设计的调研

做设计之前,都要调研,不管是对内,还是对外。

交互实际是一个心理学,设计师不但要有理论基础,更需要具备优秀的同理心,能够共情,细腻的体会到不同用户的更舒服和认可的交互方式。

此时要注意的事,如果你有一个强大的金主爸爸,那么请你多去摸摸TA的喜好,或者他所代表的用户群体的操作习惯,不要自以为是,要调研,去共情,不是去给客户上课。如果客户喜欢“一键”达成某个操作,就给他设计成“一键”,或者起码,你要说成这样(开玩笑),。

2.什么是交互设计

交互设计( lnteraction Design ),交互设计是多个对象间的相互影响,如果人操作一台计算机,计算机可以根据人的操作做出提示或反馈,那么这台计算机就是可交互的,人和计算机的交流过程就是交互。这种交互、可交互的概念也适用于人与服务性组织。

交互设计不是单纯的做UI,事实上交互设计、界面设计和视觉传达在系统中都不是独立存在的。交互设计要考虑系统的信息架构和交互流程,是界面设计的基础,而界面设计又需要交互设计和视觉传达的支撑,也是交互设计的最终表现形式,是用户的接入点。视觉传达也是交互设计的实现途径之一,它包括图标、界面等的表现形式,以及用户接触到APP的所有可见方式。

在本系列文章中,交互设计、用户体验设计,是进行区分的。用户体验实际上包括了交互设计,简单的理解,视觉如果是静态的,交互如果是动态的,那么体验就是动静结合的统一感受。客户身心是否舒服,产品的服务目标达到的程度。ISO 9241-210的标准,将用户体验定义为“人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应"。可见一斑。

3.有哪些交互需要考虑

不管是哪种交互,都要以用户为中心。也就是以用户为中心的设计UCD(User Centerd Design),以用户体验为设计决策的中心,强调用户优先的设计模式。

以用户为中心,有一个误区需要指出来,就是产品经理经常认为自己就是用户的代言人。不顾自己和用户的年龄、人生体验的差异。所以新手设计的东西,大部分都是以自己的喜好去带入,不光是代入,甚至还有情绪,这是一定要克服的。千人千面,大家别看长的大同小异,实际内心还是千奇百怪的。

交互的可能情形有如下几种——

  • 人机界面UI(User Interface):人机界面是使用户和系统之间,以人类可以接受的形式进行交互的信息交互媒介。分为硬件和软件两部分。与人类进行信息交互的机器界面,也是人机交互的一部分。其实,我们每天敲打的键盘,字母布局,就是一个典型的交互设计案例,也是一个反人类的失败案例,现在字母的布局,是非常不合理且不符合单词字母出现频率的“大数据”分析结果的。有人做过分析,这些字母的位置,任何一种调换,都会提高打字效率。9宫格打字法,也是一个人机界面UI,而且非常经典和有趣。
  • 用户图形界面GUI(Graphical User Interface):用户图形界面指图形方式显示的,在视觉上更易接受的计算机操作用户界面,它改进了早期计算机的命令行界面,用户可以更好地从视觉上接受信息。大家可能不了解当时“视窗95”这个词,出现以后对计算机界的振动。实际上图形界面很早就有了,只是作为辅助,从来没有如视窗windows系统这样的坚决。
  • 命令行界面CLI(Command-line Interface):命令行界面是指可在用户提示符下键入可执行指令的界面,它通常不支持鼠标,用户他通过键盘输入指令,计算机接收到指令之后,它予以执行。命令行真是挺反人类的,很多参数设计的很奇葩,程序猿们还必须要接受,并且曾经大家以谁能记住更多的命令不查HELP为光荣。现在AI大行其道,以后CLI将大概率变成自然语言沟通模式。
  • GUI和CLI是操作电脑系统的两种方式,GUI更直观,但占用计算机资源较多,CLI不太直观,但有些情况下操作更加迅速,例如操作软件时使用的快捷键,就可以说是一种CLI,在软件设计中,常常二者同时存在。
  • 网页用户界面WUI(Web User Interface):网页用户界面指网页风格的用户界面,它可以理解为网页风格用户界面设计。(计算机界有时将无知用户的无知行为造成的故障,把它称作为WUI,我们叫Witless User lgnorance.)这个是大部分产品经理都熟悉的,网页的交互依靠的是各种组件。
  • 手持设备用户界面HUI(Handset User Interface):针对移动终端的界面交互设计——手持设备用户界面交互设计,逐渐发展成为完整的交互设计分支。
  • 多通道用户界面MUI(Multimodal User Interface):多通道用户界面是能够适应目前和未来的计算机系统要求,它可以满足时变媒体,三维操作、非精确及隐含的人机交互。可以综合采用视线、语音、手势等多种交互方式,整合这些渠道捕捉用户的真实意图。
  • 自然用户界面NUI(Natural User Interface):“自然"是相对图形用户界面GUl而言,GUI它是要求用户必须先学习软件开发者,它预先设置好的一些操作。但NUI可以使用户以最自然的语音等方式进行系统的操控,使用NUI的设备不需要键盘或鼠标。
4.深入理解交互设计的必要性

交互设计作为设计的分支,要遵从设计伦理。交互设计实现技术对人的可用、易用,带来愉悦,更强调理解人,理解人如何体验事物。不止局限于人和产品、界面,比如当你去博物馆时,人与展品、标识的互动也可以说是交互。

从上图可以看到,在技术发展的早期,人们是无暇顾及更多人的体验的,因为重点要考虑的是制造的难度和成本。存储用的是磁带,打孔,省点资源更实惠,用户也都是专业人士,要求学习和掌握晦涩的使用方法,那时谁敢矫情。随着商业的发展,技术的进步,开始关注用户的心智,更多的设计和交互理论诞生,用户体验也自然越来越好。

一切都是在发展,矛盾无处不在,比如文章开头提到的“一键”,这个著名的交互需求,实际是——用户对产品简单易用的美好追求,和流程复杂度以及设计能力的矛盾。这也是用户的心理,是现阶段产品设计的主要矛盾。所以市场人员和产品经理,多学会说这个词,汇报时往往能抓住用户的眼球。

交互设计带来用户的愉悦,甚至反向促进技术的进步。

著名的“摇一摇”,就是硬件、软件、交互、商业模式融合的成功案例。

5.定义你的设计系统

设计系统,简单理解包括设计原则、设计语言、组件和模式。(后面有空,专门来写交互设计,先不展开。)

不管你是否意识到,每个人,每个组织,都有自己的设计系统。比如登录页面,你一闭眼是不是就想到原型图了。也许不如雅虎那么完备,早在2006年,雅虎就提出了完整的设计系统。定义了自己的组件,交互方式,设计原则。设计和技术实现能力,进行了完整的匹配。迅速提升设计人员的工作效率,成为标准化、工业化的输出产品设计文档的样板。

我的建议是每个人都该有自己交互设计的三板斧,一个公司更应该有自己的交互设计标准和知识库。这提现你们公司的文化,理念,对于保持产品的调性,有重要的作用。

这里个人比较推崇原子化设计方式。

原子 Atoms:为页面构成的基本元素。例如文字、颜色、图标等。

分子 Molecules:由原子构成的简单 UI 组件。例如,一个标签,搜索框,图标共同打造了一个搜索框组件。

组织 Organisms:由原子及分子组成的相对复杂的 UI 组织,例如商品列表、内容卡片等 。

模版 Templates:将 UI 内容进行布局,形成基础的页面结构,也可以称之为原型。

页面 Pages:将实际内容(图片、文字等)进行填充,从而形成高保真页面。

按照这个逻辑来构思,进一步对组件的合作、交互的动作框架进行分析,就是一套标准的交互设计成果了。

此外,比较建议的是,基于二八原则来说,大部分人遇到的都是设计表单的场景,应该对表单的交互有一套自己的专门的模式。

九、用户体验优化

用户体验是用户在使用一个产品或系统过程中的全部感受,包括情感、信仰、喜好认知印象、生理和心理反应、行为和成就等各个方面,是一个侧重用户感受的概括型词语。

进行到这里,我们已经获得了一套基本完备的产品设计文档了,并且,恭喜你,我们还通过内部和外部的评审,再苛刻的用户,我们也能搞定,不是吗。

此时,最好能从头到尾,再过一遍整个设计过程,对产品的细节,再进行一些推敲,一是防微杜渐,看看有没有隐藏的坑,漏掉的信息,二是回过头来,优化一些整体的用户体验。

也许你很无奈,项目的工期不允许你这么做,或者你已经精疲力尽,时间有,但是能量没有了。那好吧,在迭代中,去优化吧,不用担心。

十、前端编码

交给美工和前端同学吧!他们会切图,生成简单的页面,前端同学搭建合理的框架,再加上一些他们所能达到的更友好的控件,注意不要让他们由于能力不足,而随意修改你的设计。

十一、开发!

其实在第十步,前端开发时,或者更早,后端的同学们就在设计接口了。接口也要有评审的过程,往往和数据库同步设计和评审。评审时,建议要求产品也听,一回生,二回熟,产品逐渐也能理解接口的含义,特别是发现表单数据项有错、交互流程中丢失状态或者信息的情况。后端同学的逻辑写起来,往往还是挺快的,定义好里程碑,写好测试用例,准备迎接激动人心的上线过程了。

后续的技术开发标准流程,有机会再梳理和探讨。

本话题暂时完结,感谢您的观看。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Keil工程打开发现目标芯片无法选择解决方案

买了一个开发板,配套有一些底层驱动的例程,打开后发现目标芯片无法选择,对应的下载Flash FLM文件也无法选择。从提示框中可以知道所提供的例程是Keil4的例程,我电脑上安装的Keil版本是Keil版本,估计是这个原因导致工程…

Rust开发——数据对象的内存布局

枚举与Sized 数据 一般数据类型的布局是其大小(size)、对齐方式(align)及其字段的相对偏移量。 1. 枚举(Enum)的布局: 枚举类型在内存中的布局通常是由编译器来确定的。不同的编译器可能有不…

大模型增量预训练参数说明

在增量预训练过程中通常需要设置三类或四类参数,模型参数,数据参数,训练参数,额外参数。 下面分别针对这四种参数进行说明。 欢迎关注公众号 模型参数 model_type模型类型,例如bloom,llama,baichuan,qwen等。 model_name_or_path模型名称或者路径。 tokenizer_name_or…

2023年最新PyCharm环境搭建教程(含Python下载安装)

文章目录 写在前面PythonPython简介Python生态圈Python下载安装 PyCharmPyCharm简介PyCharm下载安装PyCharm环境搭建 写在后面 写在前面 最近博主收到了好多小伙伴的吐槽称不会下载安装python,博主听到后非常的扎心,经过博主几天的熬夜加班,…

解决Emmy Lua插件在IDEA或 Reder 没有代码提示的问题(设置文件关联 增加对.lua.txt文件的支持)

目录 Reder版本2019.x Reder版本2021.1.5x Reder版本2019.x 解决Emmy Lua插件在IDEA或 Reder 没有代码提示的问题(设置文件关联 增加对.lua.txt文件的支持) Reder版本2021.1.5x 解决Emmy Lua插件在IDEA或 Reder 没有代码提示的问题(设置文件关联 增加对.lua.txt文件的支持)…

什么是LLC电路?

LLC电路是由2个电感和1个电容构成的谐振电路,故称之为LLC; LLC电路主要由三个元件组成:两个电感分别为变压器一次侧漏感(Lr)和励磁电感(Lm),电容为变压器一次侧谐振电容(Cr)。这些元件构成了一个谐振回路,其中输入电感…

【Spring进阶系列丨第四篇】学习Spring中的Bean管理(基于xml配置)

前言 在之前的学习中我们知道,容器是一个空间的概念,一般理解为可盛放物体的地方。在Spring容器通常理解为BeanFactory或者ApplicationContext。我们知道spring的IOC容器能够帮我们创建对象,对象交给spring管理之后我们就不用手动去new对象。…

为销售赋能:利用 Splashtop 增强远程培训技术

远程销售团队这一概念在当今快节奏的商业环境中日益普遍。各公司正在计划在不同地点灵活开展销售业务,希望利用技术优势缩小地域差距。但是,这种向远程销售的转型面临着重大挑战,尤其在培训和发展领域。培训远程销售团队需要采用创新方法&…

微型计算机原理MOOC题

一、8254 1.掉坑了,AL传到端口不意味着一定传到的是低位,要看控制字D5和D4,10是只写高位,所以是0A00.。。 2. 3. 4.待解决:

免费使用!Figma汉化网页版替代工具震撼登场

Figma作为一种常用的在线设计工具,大多数UI设计师都非常了解这个软件,很多人在设计过程中经常使用Figma。Figma作为一种外国设计软件,没有本地版本,在一些设计中需要在插件的帮助下完成工作。虽然Figma确实比其他软件有很大的优势…

【Vue】核心特性(响应式)

响应式&#xff1a; 数据变化&#xff0c;视图自动更新 接下来使用一个例子来体现一下什么是响应式 案例一&#xff1a; 访问数据&#xff0c;视图自动更新 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…

2023亚太杯数学建模竞赛C题详细代码解析建模

C题&#xff1a;The Development Trend of New Energy Electric Vehicles in China中国谈新能源电动汽车的发展趋势 第一问部分&#xff1a; import numpy as np import pandas as pd import matplotlib.pyplot as plt from sklearn.cluster import KMeans from sklearn.prep…

如何用Python爬取全国高校数据?

前言 Python是一门强大的编程语言&#xff0c;它可以用于爬取互联网上的各种数据。在这篇文章中&#xff0c;我们将学习如何使用Python爬取全国高校数据&#xff0c;并使用代理IP进行爬取。 本文主要分为以下几个部分&#xff1a; 数据来源及需求安装依赖包及导入模块爬取全…

VOC数据集和COCO数据集直接的相互转换

VOC数据集格式 get_list.py import os import random import shutil# 设置随机种子 random.seed(1000)# 判断Annotations和JpegImages是否对应 train_precent=0.8 label_path= "../../Annotations" print(os.path.abspath(label_path)) save="../Main" pr…

CCFCSP试题编号:201803-2试题名称:碰撞的小球

一、题目描述 二、思路 1.首先妾身分析这个题目&#xff0c;想要解题&#xff0c;得得解决2个问题。 1&#xff09;判断小球到达端点或碰撞然后改变方向&#xff1b; 2&#xff09;每时刻都要改变位置 两个问题都比较好解决&#xff0c;1&#xff09;只要简单判断坐标&…

【每日一题】2216.美化数组的最少删除数-2023.11.21

题目&#xff1a; 2216. 美化数组的最少删除数 给你一个下标从 0 开始的整数数组 nums &#xff0c;如果满足下述条件&#xff0c;则认为数组 nums 是一个 美丽数组 &#xff1a; nums.length 为偶数对所有满足 i % 2 0 的下标 i &#xff0c;nums[i] ! nums[i 1] 均成立 …

黑马点评-10实现用户点赞和点赞排行榜功能

用户点赞功能 如果用户只要点赞一次就对数据库中blog表中的liked字段的值加1就会导致一个用户无限点赞 PutMapping("/like/{id}") public Result likeBlog(PathVariable("id") Long id) {// 修改点赞数量,update tb_blog set liked liked 1 where id …

【前端】必学知识ES6 1小时学会

1.ES6概述 2.let和const的认识 3.let、const、var的区别 4.模板字符串 5.函数默认参数 6.箭头函数【重点】 ​编辑7.对象初始化简写以及案例分析 【重点】 8.对象解构 8.对象传播操作符 9.对象传播操作符案例分析 ​编辑 10.数组Map 11.数组Reduce 12.NodeJS小结 …

C++设计模式之工厂模式(下)——抽象工厂模式

抽象工厂模式 介绍示例示例使用运行结果抽象工厂模式的优缺点优点缺点 总结 介绍 抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一种封装一组相关或相互依赖对象的方式&#xff0c;而无需指定它们具体的类。它允许客户端使用抽象接口来创建一系列相关的对象&#xff…

稻谷飘香金融助力——建行江门市分行助力乡村振兴

7月的台山&#xff0c;稻谷飘香。在大耕户李胜业的农田里&#xff0c;金灿灿的稻谷翻起层层稻浪&#xff0c;收割机在稻浪里来回穿梭&#xff0c;割稻、脱粒、装车等工序一气呵成。空气中弥漫着丰收的喜悦。 夏粮迎丰收的背后&#xff0c;是中国建设银行江门市分行&#xff08…