61阅读

交互设计-打造良好的交互设计效果发觉篇

发布时间:2017-07-30 所属栏目:交互设计沉思录

一 : 打造良好的交互设计效果发觉篇

 打造良好的交互设计效果发觉篇

交互设计,表现出来的呈现方式可谓是多种多样,

不过你只要掌握好了以下三点的使用技巧,同样可能轻松打造出良好的交互设计效果。

1.响应

对即将产生交互内容的区域提供给操作者一种响应机制。

参考实例:http://glyde.com

 打造良好的交互设计效果发觉篇

不同的内容有很多响应的处理方法,

比如:链接加个下划线,图片链接变换下外边框颜色,

鼠标划过某区域,变化下背景色,同时出现一些隐性的操作按钮,如删除操作等。

注意:忌讳因为某区块产生响应,而让其它区块边界产生生硬的错位。

 打造良好的交互设计效果发觉篇

补充:提示音也是一种响应。

比如:用iPhone发送邮件,发送成功后会听到“嗖…”的一声。

另一个参考实例:

 打造良好的交互设计效果发觉篇

2.过渡过程或转场效果

对即将产生的交互变化,提供一个过渡过程或转场的效果。

过渡过程,如:延时移动、淡入淡出等。

转场效果,如:滑动、门开关、缩放、翻转等。

参考实例:http://glyde.com

 打造良好的交互设计效果发觉篇

点击某个封面,延时移动给操作者带来一个很好的引导阅读过程。

注意:要频繁处理的操作,过渡过程耽误时间的同时,还可能造成误点击。

过渡效果有时候还可以减少不必要的态度变更提醒:

比如,删除邮件后不需要显示邮件已删除。

而是点击删除后,该条内容闪烁一下(响应),然后逐渐消失,

因为你已经真实的看到了删除的过程,所以不必再显示邮件已删除的状态变更提醒。

3.移位

在不弹层、弹窗情况下的内容移位。合理的运用页面内容的展开、收起。

操作者在即将产生交互的地方,就近通过这种方式就完成了轻便的操作。

参考实例:http://gizmodo.com/

http://www.61k.comdemo 下边的展开与收起

 打造良好的交互设计效果发觉篇

点击下边地址中的视频播放,同样可以看到视频右侧文字内容的移位效果。

我们总结出来结论,所有交互过程不外乎包括以下三个要素:

1. 响应:可以引起触发的区域提供响应变化

2. 过程效果:让人的视线一直保持连贯

3. 移位:不必要弹出新页面时,通过伸展原区域的大小完成小的功能交互,以达到用最小的视觉变化完成交互任务的目的。

注意:过渡过程和移位在Web开发实现上,可能大量应用到Js库,非必要时可以尽量减少使用。

二 : 交互设计专业InteractionDesign

今天来个学生咨询交互设计专业Interaction Design专业,把珍藏的资源拿出来给大家分享~

交互设计专业InteractionDesign
Schools offering interaction design

Undergraduate

•Aarhus University, Denmark – BA (Information Studies + DigitalDesign)

•Academy of Art University – BFA (Web Design & NewMedia)

•California College of the Arts – BFA (Interaction Design)

•Designskolen Kolding – BA (Interaction Design)

•Faber-Ludens Institute (Interaction Design)

•Linnaeus University

•Malmö University

•Maryville University, St. Louis – BFA (Interactive Design)

•Savannah College of Art and Design – BA (Interactive Design andGame Development)

•Simon Fraser University, BSc, BA (Interactive Arts& Technology)

•Stockholm University – BSc (Interaction Design)

•Syracuse University

•The University of Queensland – BFA (Interaction Design)

•Tsinghua University – BA (Information Design)

•Université du Québec à Montréal

•University of Dundee – BSc (Digital Interaction Design)

•University of Southern Denmark – BE (Interaction Design)

Graduate

•Aarhus University, Denmark – MA (Information Studies + DigitalDesign)

•Arizona State University – MSD (Interaction Design) ([1])

•Art Center College of Design – MFA (Graduate Media DesignProgram)

•Academy of Art University – MFA (Web Design & NewMedia)

•Austin Center for Design

•California College of the Arts – MFA (Design)

•Carnegie Mellon University – MDes (Interaction Design)

•Chalmers University of Technology – MSc. (Interaction Design)

•Copenhagen Institute of Interaction Design

•Delft University of Technology – MSc. (Design for Interaction)

•Designskolen Kolding – MA (Interaction Design)

•Domus Academy – MA (Interaction Design)

•Eindhoven University of Technology – MSc. (Human-TechnologyInteraction)

•Georgia Institute of Technology – MID (Interaction track)

•Haute Ecole d'Art et Design — Genève – MA (Media Design)

•Indiana University (Bloomington) – MS (Human Computer InteractionDesign)

•Industrial Design Centre, IIT Bombay, India – MDes

•Kent State University – MS (Information Architecture and KnowledgeManagement – User Experience Design) ([2])

•Korea Advanced Institute of Science and Technology

•L'École de design Nantes Atlantique – Master (TangibleInterface)

•National Institute of Design, Gandhinagar, India – PG diploma inNew Media Design

•National Institute of Design, Bangalore, India – PG diploma inDesign for Digital Experience & PG diploma inInformation and Interface Design

•New York University: Tisch School of the Arts – MPS InteractiveTelecommunications Programme

•Parsons The New School for Design – MFA (Design and Technology)

•Royal College of Art – MA (Design Interactions)

•School of Visual Arts – MFA (Interaction Design)

•Simon Fraser University, MA, MSc, PHD (Interactive Arts& Technology)

•Stan Ackermans Institute – PDEng (User-System Interaction)

•The Hong Kong Polytechnic University – MDes (InteractionDesign)

•Umeå Institute of Design

•University Iuav of Venice

•University of Applied Sciences and Arts of Southern Switzerland –MAS (Interaction Design)

•University of Baltimore, School of Information Arts andTechnology

•University of California, Berkeley School of Information

•University of Kansas

•University of Southern Denmark – MSc (IT Product Design)

•University of Washington

•The University of Queensland – MIDes

•University of the Arts Bremen – MA (Digital Media)

•Universidad Iberoamericana – Lic. (Diseño Interactivo)

•Norwegian School of Information Technology

三 : 扎实干货丨交互设计基础

扎实干货丨交互设计基础

以用户为中心,提高产品的易用性及用户满意度!”做为交互设计的目标,如何应用到实际工作中?如何评价产品是否以用户为中心?避免因为项目时间紧、任务重、人员不足等因素,而牺牲用户利益,降低产品体验,进而降低产品竞争力。以下交互设计原则就像茫茫大海中的灯塔,指引着我们前进的方向…

文不如表,表不如图。

文字传递信息相对不够直观,特别是逻辑、流程表达,表格相对条理性清晰一些,但仍不如图片表达清晰,例如流程图、趋势图、柱状图、天气预报、路况图等。

例一:天气预报

扎实干货丨交互设计基础

例二:实时路况

扎实干货丨交互设计基础

扎实干货丨交互设计基础

关注用户目标,而非任务。

让用户成功,产品才会成功,也是产品设计的目标,但完成目标的途径很多,抓住用户的目标,进行产品设计,经常事半功倍。

例一:家用温/湿度计

用户的任务是想知道房间内的温度及温度,而目的想了解房间内的温度及湿度是否合适,所以给用户提供准确的温度、湿度值,并不是用户真正想要的,所以需要显示舒服温度及湿度对应的区间值,对用户更有帮助。

扎实干货丨交互设计基础

例二:搜索“天气预报”

用户希望看天气情况,搜索“天气预报”,用户的任务包括:输入搜索关键字,在搜索结果中点击文字链接;关注用户的目标,就应该直接显示天气情况,给予用户超越预期的结果。

扎实干货丨交互设计基础

减少用户的记忆负担,尽量让用户识别,而不是回忆

人类与电脑相比,人类擅长的是识别及思考,电脑擅长的是记忆,因此,尽量减少用户的记忆负担,让电脑做它擅长的事情。

例一:交互优化“设置界面”

原始界面的设置项很多,且以文字为主,增加了用户的理解及操作负担;优化后增加了对应的图标,提高可识别性,减少用户的记忆负担,另外使用滑动条代替手工输入,减轻操作负担;最后删除了“设置儿童锁”的设置项,降低了用户的设置负担,符合“满意用户需求的前提下,界面的信息及功能越少越好!”的原则。

原始设置界面:(待优化)

扎实干货丨交互设计基础

优化后设置界面:

扎实干货丨交互设计基础

操作前可预知;操作中有反馈;操作后可撤消

操作前可预知:人类对未知事物会产生恐惧感、焦虑感,如果你在执行一项操作之前,如果不能够准备判断出后果,便会感到恐惧,不会轻易操作,如果操作之后的后果与预期不一致,便会产生挫败感,进而中断任务流,打破沉浸状态,进而影响效率,甚至用户离开该界面,不再继续操作,因此,软件界面满足用户的心智模型,将会更大程度的满足用户的操作预期。

操作中有反馈:反馈意味着操作的有效性,尽量所见即所得的方式,直观显示操作效果。

例二:改变文字的字符、大小、样式、进度条等。

扎实干货丨交互设计基础

操作后可撤销:“撤销”可以给用户一定的安全感,允许用户犯错误,满足用户的尝试心理,不必担心误操作的发生,降低用户的心理负担。

例三:回收站、“取消”按钮、Ctrl+Z。

扎实干货丨交互设计基础

充分利用隐喻设计、拟物设计。

根据用户对已知事物的认知,抓住软件功能与现实事物的共性特点,进行拟物化设计,降低用户的学习成本,提高产品的易用性、趣味性:

例一:回收站:结合用户对日常垃圾箱的认识,设计文件回收站

扎实干货丨交互设计基础

例二:图书软件:浏览图书界面布局采用书柜的视觉设计,趣味性更高。

扎实干货丨交互设计基础

做对容易,做错难

是人就会犯错误,从设计的角度考虑避免错误的发生,将是产品设计的原则之一,常见的处理方式有:禁用状态、隐藏处理、默认值等。“禁用、隐藏”不仅可以避免错误操作,而且也会降低信息干扰。

例一:确认按钮的点击几率远远大于取消按钮,所以放大醒目显示该按钮,将尽量避免用户的误操作。

扎实干货丨交互设计基础

例二:如果该手机不支持SIM热插拔,则采用该限制性条件设计,将有效避免误操作。

扎实干货丨交互设计基础

例三:选择某条信息,对应的操作按钮:修改、删除、禁用、启用、排序等按钮变为可用状态。

扎实干货丨交互设计基础

操作方式一目了然,不需要说明书

利用日常生活中养成的习惯,从外观上给用户操作暗示,降低用户的学习成本。

例如:微波炉门使用门把手的设计,其操作方式更加一目了然。

扎实干货丨交互设计基础

让产品适应用户,而非用户适应产品;

尊重用户,让我们的产品具有情感,更懂用户,降低用户的思考与行为!

例如:

1.检查更新:有最新版本时,直接显示出来,避免手动检测是否有最新版本;

2.意见反馈:打开意见反馈界面,默认光标在意见输入框,且显示常用中英文键盘;

3.联系方式:软件判断输入的联系方式是邮箱、QQ,还是手机号,避免用户去选择;

扎实干货丨交互设计基础

产品符合用户心智模型,避免实现模型

心智模型是用户根据习惯思维,对事物的理解;实现模型是产品的实际工作原理及表现形式。产品符合用户的预期,用户则认为该产品易用。

例如:企业OA论坛及考勤需要两个不同的登录窗口,且为不同的登录帐号,该设计从技术实现的角度考虑是合理的,但从用户的角度考虑,增加了用户的操作成本及记忆负担。

扎实干货丨交互设计基础

综上所述,易用的产品是相似的,难用的产品各有各的难用!以上为交互设计基本原则,且远不止这几条,将在以后的工作中,陆续总结分享更多的交互原则…

四 : 交互设计的那些事

iPhone、Galaxy S3 以及 Lumia 920是市场上如今最引人注目的三款智能手机,正好对应iOS、Android及Windows Phone三大平台,尽管三大操作系统在市场份额、出货量以及用户认可方面都有着不小的差异。但更能我们兴趣,更有讨论价值的其实是这三大平台在设计方面的差异,这不仅最终决定着用户的体验,也决定了开发者的参与热情。

来自微信公众帐号“互联网er的早读课”的这篇文章从包括变局、导航逻辑、设计风格等六大方面的差异对三大平台的交互设计进行了较为深入的分析和讨论,极具参考价值。

一,布局形式的差异

1)iOS 经典的“tab bar”

在 iOS 应用内如果要切换不同的模块,或者页面内要切换不同的栏目,往往都会用到“tab bar”这一形式的控件。这个经典设计从 iOS 早期沿用至今,大部分 iOS 应用都是这样设计的。当然,iOS 本身是很包容的,最近也很流行抽屉式导航。但是 tab bar 一直是最受欢迎也最好被用户认知的方式:

2)Android 提供了 2 种视图控制方式

在 Android 4.0 规范出来之后,Android 提出了 2 种视图控制方式,一种是直接在导航栏的标题下加入一个触控按钮,点击后会弹出切换栏目的菜单(图中 2 标注的位置)

比如日历应用点击后可以切换不同的视图,另外一种是直接在导航栏的下面加入了一个视图控制栏(下右图中 2 标注位置),和 iOS 的 tab bar 很像,不过是仅放在了上面,而且提倡支持手势滑动切换:

3) Windows Phone 的创新

Windows Phone 与上面两个平台就差距很大了,因为 Windows Phone 独特的 Metro UI 提倡回归传统的阅读体验,像浏览报纸和杂志一样浏览手机上的内容,更关注与内容而不是修饰,所以 Windows Phone 整体都给人一种像在看杂志的感觉。Windows Phone 的视图控制通过一种叫做“全景视图”的方式展开(下图)。

实际上,4 个视图的内容是在一个页面上的,而且是一个页面同时加载的。用户的手机默认只显示第一屏的内容,通过滑动把后面的内容拉出来。

这种视图方式很创新,而且方便阅读,不得不说浏览的体验好了很多。但是需要注意的是:

因为其实这3个栏目是同一页面视图,所以不要将内容放的过多,否则加载会很慢影响效率;

对交互设计过程中的排版和视觉提出了很高的要求;

另外,Windows Phone 还提供了一种叫做枢轴的方式,枢轴和 iOS 的 tab bar 相差不是很大,只不过完全是通过滑动来切换栏目的:

(枢轴布局)

二,导航逻辑的差异

大家都知道 iOS 是没有实体返回按键的,所有返回都是通过导航栏的 back 按钮来完成。

在  iOS的导航逻辑中,我们可以明显的看出来,整个程序是一页一页的切换,就像一个幻灯片。而返回按钮也就是切换到上一页。所以,iOS 的返回控制的是页面。

但是 Android 和 Windows Phone 就不是这样了,Android 和 Windows Phone 是有物理返回按钮的,点击物理返回按钮,控制的不光是一个页面,而且包括了上一步的操作,比如说:

所以 Android 和 Windows Phone 的返回逻辑是按照时间流来判断的,而不仅仅是页面,返回按钮控制的是动作。

需要特意提一下的是:Windows Phone 的返回逻辑不单限于应用内,还影响到应用之间。也就是说你当前正在桌面,再点击一次 back,就会进入你上一次打开的应用。

另外在 Android 4.0 开始,提出了一个向上的概念,就是导航栏标题前面的一个小箭头,点击这个箭头,是回到该页面的上一个层级:

三,应用之间联系的差异

众所周知,iOS 是一个封闭的系统,而 Android 是一个开放的系统。

我们可以比喻 iOS 每一个应用都是一个小房间,每个应用都在自己的房间里做自己的事情,互相之间不进行任何来往。而 Android 则是一个大大的办公区,每个应用虽然也有自己的工位,但是可以互相串门或者借用东西,而 Windows Phone 则遵循着和 iOS 差不多的方式。到了 iOS 6 的时候可以支持应用直接互相跳转了,但那也仅限于你跳出去了,就不再回来了,也就是说到了那个房间你就是那个房间的人了,与之前的房间没有关联了。

这种差异会让 Android 上的应用设计有了更多的可能,身为设计师的你可以根据这一特性设计很多不错的功能,比如系统美化或者系统优化,杀毒,拦截电话等功能,而 iOS 和 Windows Phone 就不能。但是这也让 Android 系统面临了很严峻的安全问题,所以Android上各种优化和杀毒软件很流行。

四,多任务的差异

多任务的差异用一句话来形容就是:iOS 和 Windows Phone 都是假的多任务,而 Android 是真的多任务。

五,分辨率的差异

亲,你知道Android现在有多少种分辨率吗?

(TECH2IPO 注:此数据图显示的是 2011 年 Android 手机状况,现在,相关问题已经有所缓解和减轻。)

适配一直是 Android 很头痛的问题,身为前端往往要为不同的分辨率调效果而保证界面不会变形和模糊。而分辨率问题不仅仅影响视觉这一块,对交互设计也有很大的影响。因为这些手机往往屏幕比例也是不同的,你需要考虑不同的长宽比下,你的界面布局应该是怎样的。所以在设计 Android 的时候,你不能要求把界面布局写死,应该尽量保证每个控件都是浮动的,而且自己能评估出各种古怪的布局下的效果。

iOS 和 Windows Phone 就会好很多。iOS 分辨率分为 320×480,640×960,640×1136,Windows Phone 分辨率分为 480×800,800×1280,800×1136。虽然看起来也蛮多的,但是界面的比例基本上没有什么变化。所以对于交互上的布局影响并不是很大,视觉设计师也可以通过脚本缩小裁图简单的解决问题。

六,设计风格的差异

设计风格是这 3 个客户端自己独特的个性,设计风格不单影响的是视觉设计的层面,对交互设计也非常的重要。尤其是在考虑动效,拟物化交互的时候需要重视。iOS 的设计风格偏向拟物化风格,这个拟物化不光是视觉上做出很多拟物的小按钮小控件的,为了配合视觉,你往往在交互上也可以加一些生动有趣的内容。

比如说像最新的 Path,进入商店时遮阳板会有一个收起的效果,小卡片也会根据重力感应而摇摆。如果交互上就能体现出平台的设计风格的话,无疑会非常讨好用户,增加产品细节上的亮点。

Android 平台就简单一些了,在整体的布局和交互形式和 iOS 差不多的情况下,尽量的简洁,呈现一种科幻的风格即可以了。Android 平台尽量少用拟物化的动效,因为 Android 系统对于动画效果的渲染比较差,如果太复杂的话可能会让界面非常的卡。

Windows Phone 平台则有着很大的不同,Metro UI 的理念要求设计者更多的考虑如何展现内容,使用平滑的过渡动画。而且还对设计者的排版和平面设计提出了一些考验。所以建议交互设计的人好好读读WindowsPhone界面设计准则,并且平时就积累一些Windows Phone界面的视觉界面感觉,不然视觉设计师很可能会埋怨你哦!

五 : 交互设计初体验

9月初,我来到新浪微博UDC部门交互设计岗位实习。在接近四个月的学习时间里,我对交互设计行业有了深一步的了解,认识到了交互设计师的一些具体职责。鉴于之前接受的知识大多来自书本或网络上的文章,在校期间参与项目的机会并不多,因此,我对此次实习做了一些总结:一方面,希望鞭策自己,在以后的工作中有所进步;另一方面,也希望能帮助刚步入交互设计行业的同学更快的适应工作,更好地学习交互设计。

个人认为,对于刚步入交互设计行业的设计师而言,在工作和学习过程中行之有效的方法可分为以下四个部分:

第一部分:了解自己的产品

一个项目的细节,包括它是如何开始,如何结束,中间有哪些阶段,以及在整个过程中,交互设计工作应该处于什么样的位置,应该发挥什么样的作用,都应该从了解产品入手。如何了解自己的产品呢?可以从以下几个方面来做到:

1.多身份,多角色使用产品

譬如微吧,以新手的身份试玩微吧,得到的引导提示是最基础的,也是最为全面的;以账号注册时间为3-6个月的用户身份使用产品,得到的引导和文案提示就与新手有所区别,涉及到操作权限的提示层的区别更为明显,吧主与专家身份的操作提示与普通用户得到的引导与提示在内容和形式上都有差异,运用多种角色使用同一种产品,有助于我们快速了解产品。

2.梳理产品逻辑,理解产品架构,宏观的认识产品内部逻辑及产品与产品之间的联系

成熟的产品内容很多,层级丰富,新用户容易在使用时,孤立地理解单一页面的结构和组件的细节,缺乏对产品整体、深入地思考。完整地梳理产品的结构,有利于我们整体地理解和掌握产品,为提出优化方案做准备。

微博帮助中心产品结构梳理

在接触微博帮助产品时,我对帮助中心产品的站内结构和产品逻辑进行了梳理,对服务向导的页面层级的重要性提出了疑问——“服务向导产品的结构比较简单,内容较少,可以考虑降低该产品层级性”,也许观点并不一定准确,举这个例子也只是说明通过梳理产品的结构,新手是可以做到较快速地掌握产品逻辑,宏观地理解看似复杂的产品。

3.归纳总结体验不足之处

互联网产品的特点之一便是迭代迅速,每一期的产品上线都或多或少因为决策、时间等原因存在着体验上的不足。经过之前两个步骤,我们对产品本身已比较了解,在参与页面的问题走查时,也能避免认识上的不足带来的一些疑问,准确地找到产品体验不足之处。此外,对线上的产品进行问题走查还需遵循相应的交互设计原则:一致性、简洁性、流畅性、及时反馈等。以“体验一致性”交互原则为例:产品良好的一致性能够降低用户学习成本,培养用户良好的使用习惯。一方面,表现为产品内部的体验一致,系统内的组件形式与其他组件形式部分保持一致,建立产品与用户之间的信任;另一方面,表现为产品与产品之间体验一致,把一致的体验延伸到多个独立系统中,遵循共同的设计标准,避免用户出现不适或陌生。

通过上述3点,我们能比较顺利地理解产品定位及框架逻辑,找到可优化的点,进而完成对产品的体验。经过适当地归纳和总结,我们还可以整理出一份完整的体验报告,为产品的二次迭代做准备。

第二部分:多参与需求的沟通

与提需求的产品经理不同,交互设计师关注的是产品的易用性、流畅度和操作感受。从需求文档上来看,产品方更像是从宏观的角度去提出产品设计的理念;而交互设计师,则是从更多的细节出发,去提升产品的用户体验。两种不同的出发点决定了只有产品经理和交互设计师较好配合,友善沟通,才能够准确地将产品策略转化为产品原型,从而为后面的工作提供准确的参考。因此,需求沟通是交互设计师必备的一项技能,作为新人在沟通需求时应注意以下几点:

1.积极参与项目(与自己相关)需求沟通与讨论。对实习生而言,工作中的沟通应从理解需求开始,确保与产品经理对需求的理解一致,以避免原型图、视觉方案反复修改,增加工作量。

2.对需求必须有自己的判断。除了能做到对需求有自己专业的理解外,还能够帮助产品经理理清思路,确定不同的角色、场景,并准确地梳理信息架构和任务流程。譬如在产品策略或营销方案上的需求与用户体验相冲突时,设计师有责任提出更好的设计方案。

3.每一次的沟通必须有效并可行。需求沟通与方案沟通时,出现的意见分歧务必及时解决,这要求双方都了解需求的真正目的,抓住沟通的问题本质——需求与用户体验,最终给出相应的解决方案。

第三部分:给出“完整”的设计方案

之所以提出“完整”,未提出“优秀”,是因为优秀交互设计方案的产出是一个漫长的过程,它需要我们不断地积累设计理论,不断地接触优秀的设计案例,不断地参与实际项目并一次次完成基本的需求。作为刚入行的实习生,给出完整的方案设计,是提出优秀的设计方案的基础,培养良好的习惯,有事半功倍的效果。

1.设计以解决需求为出发点

作为交互设计新手,接到需求并制作方案后,为自己的方案添加了若干功能,尤其是想到竞争对手还未做时激动不已,却忽略了需求的本质,设计出的方案不仅没解决需求,还给需求本身带来了不必要的繁琐操作,犹如你在卖微波炉给别人时,别人想买的其实只是个热馒头。而且,经常会出现一种现象——你所认为的好功能,放在产品里面,也许会带来很糟的用户体验。

2.养成正确书写交互文档说明规范的好习惯

一份完整的交互文档应包括:文档的命名、文档的内容、文档的讲解与交付。其中文档的内容主要包括:更新记录、网站地图、关键任务流程、线框图及说明文案、交互规范五个部分。交互文档的准确书写,强化了我们对设计的思考能力,既方便了需求方快速理解原型并参与讨论,也方便了他人查看项目进度和最终的输出结果。

交互文档说明规范

3.注重细节,主要指交互层面的细节和线框图绘制层面的细节

举个例子,在交互层面,当鼠标放在文字上的多种hover状态,各种状态是否匹配了应有的场景;某个地方的提示是用背景遮罩式弹层,还是气泡型提醒层;按钮的文案是应该用取消,还是用结束;鼠标悬浮出现的效果反馈,是否应单击后出现等等,这些都是需要斟酌的交互细节。在线框图层面,行间距是多大,字号是否统一,一、二级链接色是否被清晰地区分,模块之间的间距是否合理,边框颜色的深浅、边框的粗细是否一致等等,都是体现设计师逻辑思维严谨的地方。不难看出,养成注重细节的良好习惯,是交互技能提升的基础!

按钮hover状态

4.保持统一的使用体验

我们在对需求进行方案设计时,需注重线上产品体验的一致性,如最初了解自己的产品一般,同一品牌子产品在体验差异化上必须得到有效的控制,避免出现异类的情况发生。当然,需求也不仅仅是优化现有产品,如新增功能、调整产品的设计策略等,再结合需求进行创新的同时,我们还需注重设计过程中的组件样式与已有产品体验的一致性,如:提示层、按钮形式、右侧模块样式等应尽量保持一致。

当然,随着设计方案能力的提升,我们可以通过自己思考,用最合适、最高效的方式制作出合理、完整,甚至是优秀的设计方案。

第四部分:跟进产品需求的一些环节

一名合格的交互设计师,需要配合产品经理跟进产品需求的一些环节:在需求的输入阶段,设计师可与用户研究人员配合,了解用户的特征和使用行为;在需求的确认阶段,设计师可以主动提出问题、对需求进行合理的重塑;在需求的设计阶段,设计方案会经过不同职能设计师修改或完善,交互设计师需要跟进方案传达和设计,保持与视觉、前端、结构工程师进行技术上的沟通,确保方案可行的同时,还需确保方案在使用体验上达到最优,使方案被真实的还原;此外,产品上线后,设计师还需要参与线上产品的测试,准备好下一次的迭代……

结语

实习的时间并不长,想想自己在实习过程中走过的一些弯路,总结了这些内容,希望能借此更好地约束、引导自己做设计,也期待今后能做出完整、优秀的方案,解决更多实际性的问题。

本文标题:交互设计-打造良好的交互设计效果发觉篇
本文地址: http://www.61k.com/1055811.html

61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1