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

(续上回)

真的没想到写了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.mzph.cn/news/157156.shtml

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

相关文章

ES7-ES13有何新特性?

目录 ES7 ES8 ES9 ES10 ES11 ES12 ES13 hello,大家好呀!之前发布的两篇关于ES6新特性的文章学习完了吗?今天来给大家介绍ES6之后,截止到2022年的ES13每个时期新增的一些新特性!快来一起学习吧! ES7 …

基于单片机公交安全预警系统仿真设计

**单片机设计介绍, 基于单片机公交安全预警系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的公交安全预警系统可以被设计成能够实时监测公交车辆的行驶状态,并在发生异常情况时进行…

图Graph的存储、图的广度优先搜索和深度优先搜索(待更新)

目录 一、图的两种存储方式 1.邻接矩阵 2.邻接表 生活中处处有图Graph的影子,例如交通图,地图,电路图等,形象的表示点与点之间的联系。 首先简单介绍一下图的概念和类型: 图的的定义:图是由一组顶点和一…

Qt 基于海康相机的视频绘图

需求 在视频窗口上进行绘图,包括圆,矩形,扇形等 效果: 思路: 自己取图然后转成QImage ,再向QWidget 进行渲染,根据以往的经验,无法达到很高的帧率。因此决定使用相机SDK自带的渲染…

机器视觉系统选型-环形光源分类及应用场景

环形光源主要分为? 1.环形光源(高角度) 照射光线与水平方向成高角度夹角 外观缺陷检测字符识别PCB基板检测二维码读取- 2.环形光源(低角度) 照射光线与水平方向成低角度夹角各种边缘提取字符识别玻璃断面的损伤检测金属表面刻印、损伤 3.环形光源(高亮) 高亮度远…

谈谈你对mvc和mvvm的理解

MVC和MVVM是软件开发中两种常见的架构模式,各自有不同的优缺点。 MVC(Model-View-Controller)是一种经典的架构模式,将应用程序分为三个部分:模型(Model)、视图(View)和…

从暗黑3D火炬之光技能系统说到-Laya非入门教学一~资源管理

我不知道那些喷Laya没有浏览器,嘲笑别人编辑器做不好,是什么水平? 首先目前国内除了WPS和飞书,就没有第三家公司能把编辑器做好。 要是一般的游戏开发者,如我,有一点点引擎代码(某项目&#x…

opencv-图像对比度增强

对比度增强,即将图片的灰度范围拉宽,如图片灰度分布范围在[50,150]之间,将其范围拉升到[0,256]之间。这里介绍下 线性变换,直方图正规化,伽马变换,全局直方图均衡化,限制对比度自适应直方图均衡…

django+drf+vue 简单系统搭建 (4) 用户权限

权限控制是web中的重要组成部分。与以往的博客系统不同,本次工具页面仅支持注册用户。 每个注册用户都能访问到工具页面,并且提交自己的task来选择具体的工具来处理自己提交的文件。每个注册用户都只能访问到自己提交的task,而管理员则可以查…

SAP 调取http的x-www-form-urlencoded形式的接口

一、了解下x-www-form-urlencoded形式对于SAP来说有啥区别 简单来说, 1.raw格式就是标准的json格式:{“Name”:“John Smith”,“Age”: 23} 2.x-www格式是要转化一下的:NameJohnSmith&Age23 字段与字段相互连接要用 & 符…

pycharm 控制台中文乱码处理

今天使用pycharm,发现控制台输出又中文乱码了,看网上很多资料说把编码改为UTF-8,设置为并未生效,特此在此记录下本地设置。 1. 修改文件编码:Setting -> Editor ->File Encodings,修改配置如下: 2. …

车载数据中心方案

下面这张图是小鹏汽车嵌入式系统高级专家 唐黾 在同ARM一起的一个演讲稿中发布的,是一张未来车载数据中心单芯片方案构想图。主要针对的是智驾域和座舱域融合方案,下面对如上图的内外部组件及接口一一描述。 DMS: Driver Monitoring System,监…

02-微服务的拆分规则和基于RestTemplate的远程调用

微服务的拆分与远程调用 创建父工程 任何分布式架构都离不开服务的拆分, 微服务也是一样 , 微服务的拆分遵守三个原则 微服务需要根据业务模块拆分,不同微服务不要重复开发相同业务每个微服务都有自己独立的数据库, 不要直接访问其他微服务的数据库微服务可以将自己的业务暴…

【网络安全】-网络安全的分类详解

文章目录 介绍1. 网络层安全(Network Layer Security)理论实操使用VPN保护隐私 2. 应用层安全(Application Layer Security)理论实操使用密码管理器 3. 端点安全(Endpoint Security)理论实操定期更新防病毒…

武汉凯迪正大—盐雾试验机

产品概述 武汉凯迪正大KDYD-YW盐雾试验箱乃针对各种材质表面处理,包含涂料、电镀、有机及无机皮膜,阳极处理,防锈油等防腐处理后测试其耐腐蚀性,从而确立产品的质量。 产品特点 1、结构紧凑,体积小、携带方便&#…

艺术作品3D虚拟云展厅能让客户远程身临其境地欣赏美

艺术品由于货物昂贵、易碎且保存难度大,因此在艺术品售卖中极易受时空限制,艺术品三维云展平台在线制作是基于web端将艺术品的图文、模型及视频等资料进行上传搭配,构建一个线上艺术品3D虚拟展厅,为艺术家和观众提供了全新的展示和…

Chrome和chromedriver版本不匹配导致的UI自动化测试无法运行的问题

今天,遇到一个小问题,本来跑的好好UI自动化测试脚本突然不好使了,期初怀疑是页面元素有调整导致脚本出现异常无法正常执行,经排查后发现近期页面没有任何调整。 这下头大了,啥也没改,怎么好好的脚本不能跑…

Vue3鼠标拖拽生成区域块并选中元素

Vue3鼠标拖拽生成区域块并选中元素&#xff0c;选中的元素则背景高亮(或者其它逻辑)。 <script setup> import { ref } from vue// 区域ref const regionRef ref(null)// 内容ref const itemRefs ref(null)// 是否开启绘画区域 const enable ref(false)// 鼠标开始位置…

LVS+keepalived——高可用集群

lvskeepalived&#xff1a;高可用集群 keepalived为lvs应运而生的高可用服务。lvs的调度器无法做高可用&#xff0c;于是keepalived这个软件。实现的是调度器的高可用。但是&#xff1a;keepalived不是专门为lvs集群服务的&#xff0c;也可以做其他代理服务器的高可用。 lvs的…

基于SSM的进销存管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…