(续上回)
真的没想到写了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:将实际内容(图片、文字等)进行填充,从而形成高保真页面。
按照这个逻辑来构思,进一步对组件的合作、交互的动作框架进行分析,就是一套标准的交互设计成果了。
此外,比较建议的是,基于二八原则来说,大部分人遇到的都是设计表单的场景,应该对表单的交互有一套自己的专门的模式。
九、用户体验优化
用户体验是用户在使用一个产品或系统过程中的全部感受,包括情感、信仰、喜好认知印象、生理和心理反应、行为和成就等各个方面,是一个侧重用户感受的概括型词语。
进行到这里,我们已经获得了一套基本完备的产品设计文档了,并且,恭喜你,我们还通过内部和外部的评审,再苛刻的用户,我们也能搞定,不是吗。
此时,最好能从头到尾,再过一遍整个设计过程,对产品的细节,再进行一些推敲,一是防微杜渐,看看有没有隐藏的坑,漏掉的信息,二是回过头来,优化一些整体的用户体验。
也许你很无奈,项目的工期不允许你这么做,或者你已经精疲力尽,时间有,但是能量没有了。那好吧,在迭代中,去优化吧,不用担心。
十、前端编码
交给美工和前端同学吧!他们会切图,生成简单的页面,前端同学搭建合理的框架,再加上一些他们所能达到的更友好的控件,注意不要让他们由于能力不足,而随意修改你的设计。
十一、开发!
其实在第十步,前端开发时,或者更早,后端的同学们就在设计接口了。接口也要有评审的过程,往往和数据库同步设计和评审。评审时,建议要求产品也听,一回生,二回熟,产品逐渐也能理解接口的含义,特别是发现表单数据项有错、交互流程中丢失状态或者信息的情况。后端同学的逻辑写起来,往往还是挺快的,定义好里程碑,写好测试用例,准备迎接激动人心的上线过程了。
后续的技术开发标准流程,有机会再梳理和探讨。
本话题暂时完结,感谢您的观看。