美文网首页PM
交互设计之基础篇

交互设计之基础篇

作者: 呼交互设计黑山 | 来源:发表于2018-03-13 22:00 被阅读318次

    什么是交互设计?

    ·历史

    交互设计作为一门关注用户体验的新学科产生于上世纪八十年代,它是由IDEO的一位创始人比尔·莫格里奇在1984年的一次会计会议上提出,他u 一开始给它命名为“软面(SoftFace)”,由于名字容易让人想起当时流行的玩具“椰菜娃娃(CabbagePatchdoll)”,后来他把名字改为“InteractionDensign”-----交互设计。

    ·定义

    交互设计,又称互动设计,(英文Interaction Design, 缩写IxD或者IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,移动设备,人造环境,服务,软件,多媒体设备以及系统的组织结构。交互设计在于定义人造物的行为方式相关的界面。

    它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。

    从用户角度说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,他致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对他们进行增强和扩充。

    ·现状

    从第一台用来容纳静态副本以外信息的屏幕被设计出来的那天开始,交互设计就开始了。从按钮,链接到表单的一切都是交互设计的一部分。在过去的几十年里,有许多相关的书已经出版了,这些书解释了交互设计的方方面面,并探索了交互设计与体验设计间交叉和重叠的多种方式.

    交互设计的发展帮助和促进了人和他们所在的环境之间的相互作用。不像用户体验设计那样占据所有面向用户的系统,交互设计师只关心用户和屏幕之间的特定相互作用。当然,在实际中从来不会如此清楚地划分开来。

    交互设计师要做什么

    ·交互设计师产出交互原型

    要知道交互设计师要做什么,就必须现知道设计师的在用户体验五层要素中的角色,用户体验五层要素包括战略层(strategy),范围层(scope),结构层(structure),框架层(skeleton),表现层(surface),这里涉及三个岗位,战略层和范围层对应产品经理(pm),需要输出产品需求稿,结构层和框架层对应交互设计师(ux),需要输出信息流程图,页面布局原型,统一称作交互原型;表现层对应视觉设计师(UI),需要输出最终视觉界面。

    ·交互设计师具体工作方法

    一个移动产品的上线,无外乎要经过“产品需求-交互原型-研发-测试-上线”流程,交互设计是其中重要的一环,很多公司把这一任务都交给了产品经理,或者是ui设计师,这一环节实际是需要专业的交互设计师来完成的,好的交互设计稿的输出能够大大的提升开发效率和产品的用户体验。

    第一步产品需求

    首先是产品经理(pm)通过对公司战略、运营目标的分析,用户需求的调研,整理出产品所需的功能,内容信息,形成需求文档,

    第二步交互原型

    交互设计师按产品需求进行层级划分,定位出一级菜单是什么,二级菜单是什么,每个子菜单下的功能是什么,以及用户完成某项任务正常的流程,也包括异常流程。形成完整信息架构和交互流程图文档。

    接下来根据信息架构和交互流程,绘制原型图,包括低保真原型和交互动效,输出给UI设计师和程序开发人员,为什么要输出给程序呢?因为这样做可以让程序员不必等到UI出了视觉稿才开始着手工作,程序开发工作可以和UI设计师工作同步进行,程序拿到交互原型可以了解产品的整体框架和交互流程,进而根据原型搭建初步程序框架。

    另一边输出给UI设计师,如果交互原型做的够标准就可以很大程度上提高ui设计师的效率,这个标准一是要全面,所有状态都要考虑到;二是专注细节,小到每一个图标大小,间距;三是遵循移动平台的交互规范,和用户的行为习惯。

    第三步研发

    这个阶段包括UI设计和程序开发,程序根据交互原型开始搭建程序框架,另一边UI设计师根据交互原型,遵循多种设计和视觉规范设计出精美的界面,并配合程序切图,同时整理出设计规范文档,一并给到开发,然后程序再进行细致的代码编写。

    第四步测试

    程序开发好后,测试工程师对测试版本功能和交互流程进行测试,交互设计师对测试版本的交互实现进行测试,UI设计师对界面与设计稿对比,把测试结果反馈给程序,程序根据反馈信息进行代码编写修复问题。

    第五步上线

    上线阶段需要UI设计师正对不同应用市场提供相对应尺寸的审核图,上架人员到各个应用市场提交审核上架。

    交互设计要用到哪些工具

    ·sketch

    产出:低保真原型,高保真原型

    ·mind note(xmind,mindmanager)

    产出:思维导图

    ·omnigraffle(Visio)

    产出:线框流程图

    ·principle

    产出:产出可交互原型

    移动平台的设计规范

    现移动平台所用的系统大致有ios,Android,wp。iOS系统是苹果的,内核是Unix,只在苹果的设备上运行;android系统是目前市场份额占有最大的,它是由谷歌开发,然后开源的系统,基于免费开源,所以很多公司会开发自己的操作系统,比如锤子的Smartisan OS,小米的miui,魅族的flyme。安卓手机市场的鱼龙混杂导致没有哪个是统一的规范,只能说最好可以参考谷歌官方发布的规范。

    在这里就讲讲iOS的设计规范

    ·iOS

    以前一般会在sketch里面建375*667的画板进行原型和UI界面设计,具体原理网上很多文章都解释的比较清楚,现在自从iPhone x出来以后,基本都是按375*812的尺寸画板做设计了,这里我着重解释下:iPhone X的分辨率为2436*1125,相比较iPhone 7plus发生了变化,但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面,新版的iPhone X与过去我们熟知的''iPhone 4.7''、''iPhone 5.5'' 放大模式宽度相同。通俗的说,iPhone X可看做是''iPhone 4.7'' 的加长版

    但需要注意的是,页面内容不能超出安全区域

    (Safe Area)

    ios规范文档

    ios的交互规范文档可以打开网址www.developer.apple.com/design,里面有详细的设计交互规范。

    写到这里,这篇文章就基本写完了,下一篇文章将和大家一起探讨交互设计师需要输出的信息架构、流程图两部份,具体会讲到设计信息架构和流程图需要从哪几个方面思考,包括哪些内容,具体软件设计演示,以及设计需要注意的事项。

    相关文章

      网友评论

      本文标题:交互设计之基础篇

      本文链接:https://www.haomeiwen.com/subject/tyuzfftx.html