交互设计之基础篇

什么是交互设计?

·历史

交互设计作为一门关注用户体验的新学科产生于上世纪八十年代,它是由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,里面有详细的设计交互规范。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容