交互设计课程知识总结

介绍

交互设计(英文Interaction Design,缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析,关注以人为本的用户需求

起源 

交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。 [2]

交互设计在于定义人造物的行为方式(the "interaction",即人工制品在特定场景下的反应方式)相关的界面。交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了,它由IDEO的一位创始人比尔·摩格理吉(Bill Moggridge)在1984年一次设计会议上提出,这个概念在10年后才开始流行。他一开始给它命名为“软面(Soft Face)”,由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃(Cabbage Patch doll)”,他后来把它更名为“Interaction Design”,即交互设计。

最早的交互式技术设计项目是Visible Language Workshop,由MIT的Muriel Cooper于1975年发起,以及由Martin Elton于1979年在纽约大学创立并后来由Red Burns领导的交互式电信项目。

第一个正式命名为“交互设计”的学术课程于1994年卡内基梅隆大学成立。

设计原则

原则 

可视性:功能可视性越好,越方便用户发现和了解使用方法

交互设计

反馈:反馈与活动相关的信息,以便用户能够继续下一步操作

限制:在特定时刻显示用户操作,以防误操作

映射:准确表达控制及其效果之间的关系

一致性:保证同一系统的同一功能的表现及操作一致

启发性:充分准确的操作提示

交互设计准则

交互设计

1.伦理的(能体谅人,有帮助)不伤害、改善人的状况

2.有意图的,能帮助用户实现他们的目标和渴望

3.注重实效,帮助委托的组织实现它们的目标

4.优雅的:最简单的完整方案、拥有内部的一致性、合适的容纳和情感

 设计流程

1、分析阶段

需求分析、用户场景模拟、竞品分析(聆听用户心声)。

需求分析:对于一个产品来说,必然有对用户需求的分析内容,更多的是从MRDPRD获得,或者从产品需求评审会议上得到需求分析的内容,当然可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点的话,那么用户需求就是本次设计的出发点。

用户场景模拟:好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要,了解产品的现有交互以及用户使用产品习惯等,但是设计人员在分析的时候一定要站在用户角度思考:如果我是用户,这里我会需要什么。

竞品分析(聆听用户心声):竞争产品能够上市并且被UI设计者知道,必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性,看到别人的设计会有触类旁通的好处。当市场上存在竞品时,去听听用户的评论,哪怕是骂声都好,别沉迷于自己的设计中,让真正的用户说话。

输入物:MRD、PRD、市场调查报告、竞品分析文档(或其一或全部)

输出物:设计初稿(或许只是几个简单的界面)

2、设计阶段

设计方法采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所等模拟,模拟用户在多种情况下产品使用的模拟。面向事件驱动则是对产品响应与触发事件的设计,一个提示框,一个提交按钮……这类都是对事件驱动的设计。面向对象,产品面向的用户不同对于产品的设计要求不同,不同年龄层的用户对于产品的要求不同,产品的用户定位将对UI设计师影响因素

输入物:交互文档(高保真原型)

输出物:设计终稿(所有的设计稿)

3、配合

UI设计师交出产品设计图时,更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图操作,对于不同的开发人员的要求,切图方式也有不同,UI设计师需配合相关的开发人员进行最适合的切图配合。

输入物:设计终稿

输出物:设计修改稿(设计稿切片)

4、验证

产品出来后,UI设计师需对产品的效果进行验证,与当初设计产品时的想法是否一致,是否可用,用户是否接受,以及与需求是否一致。都需要UI设计师验证,UI设计师是将产品需求用图片展现给用户最直接的经手人,对于产品的理解会更加深刻。

输入物:产品

输出物:产品(面向用户最终版本)

产品UI设计中夹杂着许多设计原则要求,统一公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。UI设计师应该分析公司产品的特点,制定符合产品生命周期的UI设计流程。每个产品的生命周期中,UI设计师应该严格按照流程,完成每个环节的职责,确保流程准确有效的得到执行,从而提高产品的可用性,提升产品质量

用语规范 

界面设计用语规范有两个基本要求——说清楚和不啰嗦,还有一个进阶要求——传递情感但不卖萌。

1)说清楚

1.1 谨慎使用「确定」、「下一步」等万金油文案。

互联网产品里随处可见的「确定」按钮是产品经理最偷懒的表现之一,这些按钮的名字完全可以根据不同的场景进行扩展的。我写完一篇文章,那个提交的按钮如果是「发布」或者「预览」会不会更清楚些?我修改了我的个人资料,那个确定按钮如果是「更新资料」会不会更清晰一点?—— kent.zhu《「不啰嗦」和「说清楚」》

1.2 不要使用不易理解的术语。

以下图为例。这是一个拍摄银行卡,通过OCR技术识别卡号的功能。OCR即光学字符识别技术。

但是,用户很可能并不知道什么是「OCR识别中」。「正在识别」就显得通俗易懂许多。

4c5d580b8038a84a0d304f8a359a.jpg

2)不罗嗦

2.1 先说结论,再作解释

    

在短信通知上,尽量把突出的信息放在前面。比如一个短信验证码的内容,要保证验证码在系统消息栏直接展示出来,用户的操作场景是点击了「获取验证码」按钮之后,在那个界面等待输入呢,抬眼看到系统消息栏有内容了,记下来验证码,直接就在输入框输入了,这样的效率才是最高的。

—— kent.zhu《「不啰嗦」和「说清楚」》

7bf7580b8243a84a0e282be4244e.jpg

3)传递情感但不卖萌

我们来看看在断网的情况下QQ和微信的提示文案

bedb580b8260a84a0e282b8f9dd5.jpg

4)其他用语规范

4.1 日期和时间的格式

如无特殊说明,请遵循如下格式:

fae4580b8d2ea84a0d304fa384e4.jpg

以上用语规范部分文章具体介绍了App的交互与设计规范,著作权归站酷作者我不是鱼干所有

设计样式

栅格

Phone栅格都是流体栅格,简单说,就是不定义具体尺寸,而是屏幕占比。

说到屏幕占比,我们需要设定基准屏幕,在规范内,我们以 1080x1920 像素分辨率作为设计删格设计的基准 。

b10a580b8376a84a0d304fece82c.jpg

12Grid是兼容多分辨率机型的智能手机应用界面栅格布局系统, 使用该套栅格系统,设计师无需再计算尺寸,按照栅格自由布局即可,可快速布局成四列图标、三列图标、两列缩略图等基本常规的布局、以及更加自由的布局,兼容750×1334的iPhone设备和720×1280等主流的Android设备。

379f580b83aba84a0d304f82f783.jpg

PS中网格的设置

d892580b83caa84a0e282bfe7e95.jpg

示例:

在 1080×1920 与 750×1334 像素分辨率屏幕下的按钮尺寸、布局样式

字体

1a4c580b849da84a0d304fb089d3.jpg

 

设计规范

 

当产品规模大了之后就需要多个产品设计师协作完成整个产品,由于不同产品设计师之间的设计理念、设计方法、设计习惯的不同,协作完成的产品往往会导致产品一致性差,质量参差不齐。

这个时候会需要一份交互设计规范来规范和指导产品设计,从而保证产品设计的一致性,提升整体产品质量

页面规范

页面信息规范主要指页面的静态信息应该遵循的规则,包括:

1.标题规范

用于规定整个产品中所有不同层级不同功能的页面应该使用的标题的规则。

2.新窗口链接规范

用于规定页面链接是采用新窗口打开还是本窗口打开的规则。

3.图片规范

用于规定图片信息是否带有alt title值,这些值又取自那里。

信息规范

交互提示规范主要用于规定在交互过程中交互的方式及其信息提示,包括:

1.预先信息提示

所有交互进行前需要提供充分给用户的预先应该知道的提示信息。

a.表单提交类

表单提交的步骤,每个表单项的要求需要给出提示信息。(如密码要多少多少位。搜索框鼓励输入什么内容。)

b.谨慎类操作

一个操作对用户来说需要慎重操作的。如扣除金币等。需要预先提示。(如:扣除金币的操作需要预先提示扣除金币数目,以及当前金币是否足够等等。)

c.差异化规则

当一个功能的规则与用户习惯的规则具有一定的差异或比较复杂时,需要给出提示。或者给出帮助链接。

2、操作信息提示

所有交互进行中需要提供操作相关的提示。

a.操作确认提示

一个操作涉及数据删除,等需要谨慎操作的操作需要给出删除确认提示框。

b.操作错误提示

当用户的操作不符合操作的规则,需要给出操作提示。(如评论字数为0或超过限制字数,搜索框未输入内容时提交)

3、结果信息提示

交互进行后给出结果反馈是应该给出适当的提示。

a.查询类结果

任何信息列表、查询结果,当对应信息无结果的时候需要给出有无结果状态提示。

b.保存类结果

一个表单是用户提交保存数据的。如设置个人资料。提交保存后需要给出提示。成功绿色、失败红色、普通灰色。

c.附加类结果

一个表单是对其他数据进行附加的,如评论等。提交成功后应直接跳转到操作产生的结果展示部分。(如提交评论后应该直接展示给用户他提交的评论)

控件规范

当有一些功能会被多个模块复用的时候(如标准评论框、标准好友选择器等),需要把这些功能提炼出来设计成通用控件被多个模块共用。

有了页面信息规范、交互信息规范、通用控件规范就能保证页面信息的一致、交互方式及提示的一致、通用功能模块一致。从而保证产品的一致性,并提高产品质量。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值