UI设计师与UX设计的区别在哪里?
2016年4月20日
UI还原测试及标注思路心得
2016年5月12日

《从零开始做交互》读书笔记

无意中看到了这本书,就看了一下,因为只能在百度阅读上看,所以用简书做笔记可能比笔记本好。第一次在简书记笔记,感觉也是蛮好的。书讲的内容比较简单,比较好的一点是作者有配上自己的案例,能让人更好的理解一些比较生疏的含义,对于那些对交互概念还是很模糊的读者来说挺不错的。

第一章 交互设计基础知识:

UI:User Interface 用户界面

用户界面其实是一个比较广泛的概念,指人和机器互动过程中的界面,以车为例子,方向盘、仪表盘、换档器等都属于用户界面。主要是负责产品或是网站的图形图标色彩搭配,总之是负责网站看起来是一个什么风格什么气质。

UE or UX: User Experience 用户体验

用户体验指用户在使用产品过程中的个人主观感受。关注用户使用前、使用过程中、使用后的整体感受,包括行为、情感、成就等各个方面。用户体验是整体感受,所以不仅仅来自于用户界面,那只是其中的一部分。

IxD:Interaction design 交互设计

交互指任何机器互动的过程,交互设计通过了解人的心理、目标和期望,使用有效的交互方式来让整个过程可用、易用。

UID: User Interface Design 用户界面设计

用户界面设计(UID)不仅仅是做“漂亮的界面”,所以不可避免的会涉及到交互设计。所以广义来说,界面设计包含交互设计。但是现在很少提这个概念了

UED: User Experience Design 用户体验设计

用户体验是个人主观感受,但是共性的体验是可以经由良好的设计提升的。用户体验设计旨在提升用户使用产品的体验。

互联网企业中,一般将视觉界面设计,交互设计和前端设计都归为用户体验设计。

交互设计师的职责:

1. 工作之一是分析,但分析不是设计,主要是关于用户知识领域,更像建筑师。

2. 需要懂得什么对于程序设计人员是重要的,但是不需要知道怎样编程,只需要将代码要实现的功能形象化。

3. 应当负责程序做什么和怎样表达,设计项目的第一部分是针对问题域详细研究项目。

4. 在项目中的地位很重要,所以不能犯错误.

交互设计师需要具备的能力:

现在大多公司找交互设计师是希望把自己公司的产品业务逻辑转换为可操作的、可设计界面、可实现的研发的情况。

你大概遇到各种要求的公司我这里统一说一下你作为交互设计师所具备的条件:

1、具备阅读、理解、整理、修订产品需求文档说明书的能力

2、具备思维导图、流程图、用例图、交互逻辑图、业务逻辑图、功能架构图的编写与解说的能力

3、具备交互功能原型的线框图原型、高保真原型的制作与演示能力

4、具备编写完善的交互设计说明书(DRD)能力

5、具备交互设计项目方案演讲、解说、组织交互设计项目方案评审能力

6、具备用户行为研究分析、与用户交流并收集FEEDBACK整理出关键点的能力

7、交互设计方案迭代设计能力

8、用户体验设计能力(宽泛的说法)

9、动效设计能力与UI、研发进行沟通解释清楚设计思路的能力

10、配合UI、PM、研发、BOSS等一干人等的八面玲珑的沟通技巧

11、用户心理知识也需要懂点

12、顶层架构设计能力(这个是配合BOSS说想法的)

交互设计师的知识体系:

1

交互设计师的知识体系

 

需求分析能力:

1、能看懂、看明白需求分析师提供的文档

2、自己可以在没有明确需求的情况下梳理出一个明确的需求并补充到需求文档里去。

3、需求是不断变化的、可以持续迭代的,但是交互设计师在工作中要尽量以最少的次数确认需求,使需求“拍板”,不然变来变去的,无法进行研发和设计。这个是最考验交互设计师的需求能力的地方。

学习需求分析的方法:

1、建立用户模型

2、学习别人的需求规格说明书文档模板,现在需求说明书的模板已经网上一搜一大把了。

3、很多需求用户自己不能清楚表达他需要什么,作为交互设计师或需求整理人员要能够善于沟通和察言观色还有需要知道你项目相关知识和专业背景(可以选择在接项目时进行补充学习)

流程逻辑设计:

1、流程图的概念:流程图是指在一个项目中的业务流转步骤展示为图形化。

2、流程图的作用:方便设计者与决策者发现流程弊端从而进行优化

3、流程图如何制作:Visio

产品功能设计:

基于业务逻辑进行是功能模块设计,这一块需要注意不能说你在做产品功能设计时候照搬或太超前的设计方案。

设计产品功能的时候一般是使用Excel梳理出所有功能模块分为站点地图,例如下面的结构:

2

低保真原型设计:

1、线框图,大家通常称呼低保真原型为线框图。

3

高保真原型设计:

在低保真上基础把之前的线框加上了颜色和图片使其看起来更接近真实下项目。

4

文档能力(DRD文档)、各种流程图:

1、逻辑条理清晰(针对Boss等领导层看框架)

2、页面跳转关系展示合理(针对需求、产品看细节)

3、交互动作与功能说明到位(针对研发看功能与特效,其实是加多少班的判断依据)

4、UI留白空间合理(UI是否还有发挥空间)

第二章 交互设计师工作场景:

5

交互设计场景:

1、建立信息模型

2、建立用户模型

3、设计业务流程交互流程框架

4、设计页面流程原型

5、设计交互动作事件交互

6、形成交互设计文档

7、编写交互设计文档备忘录(针对不同人群的阅读提示)这里废话几句,你写的文档要提交给3个部门分别是boss、ui、研发,他们各自看你的文档出发点依次分为:boss—流程、框架;ui —界面可发挥空间;研发—要加多少班。

8、设计出来文档定稿了之后就可以组织交互设计评审了

第三章 如何进行顶层设计

顶层设计:

顶层设计是运用系统论的方法,从全局的角度,对某项任务或者某个项目的各方面、各层次、各要素统筹规划,以集中有效资源,高效快捷地实现目标。

顶层设计是一个架构设计方向,所以不用关心实现细节,而是想好未来,当下的产品架构、产品链条、产品后台支撑体系等等,一句话理解:自顶部往下的设计方式。

交互设计包含顶层设计是指架构交互设计包含顶层设计部分,而顶层设计中包含的交互设计指的是业务逻辑层面上的交互。

第四章 流程和功能设计

流程图概念:一般认为流程图是流程设计的图形化展示,有说法认为是流程(flow)+图 (chart)的概念,流程图是用来展示项目组件的输入项与特定输出项的一系列作业。

一个测试项目的流程的设计示例:

1、先确认几件事:

(一)APP的平台(安卓还是IOS还是WP)

(二)确认项目采用系统版本

(三)确认项目核心需求

本案例核心需求:

1、多用户协作办公平台APP端的即时通讯

2、打卡签到功能

3、我的任务管理:增、删、改、查

4、查看任务详情

5、更新任务进度

6、任务帖子内的评论与回复(@功能)

7、登陆与管理员注册验证

8、通知提醒服务

(四)进行需求的分析

6功能设计表格模板

(五)进行设计功能模块

根据上面的核心需求提示我们找出几个重要的模块作为主要模块

设计出核心模块如下:

1.即时通讯模块

2.任务管理模块

3.登陆注册模块

4.通知消息模块

7功能设计表格模板-模块设计

(六)根据模块顺藤摸瓜设计功能点

在一级模块下进行细分功能点设计

1、即时通讯模块

通讯录功能

消息聊天

发送图片

表情聊天

传送文档支持DOC.PPT.XLS.ZIP

2.任务管理模块

发布新任务

发布任务进度状态

查看任务详情

3.登陆注册模块

企业邮箱登陆功能

注册功能

4.通知消息模块

阅读消息通知

编辑消息通知状态


完成基本设计的功能表

(七)设计业务流程

流程图绘画的工具:

产品经理或技术经理(需要画一些技术性的逻辑流程图):Visio、Mindjet MindManager

用户体验和产品设计/交互设计师(需要画一些界面流程图,设计可交互的流程):Axure 、Visio、 MockPlus 、Balsamiq

跨职能流程图示例

 

10部门流程图示例
10业务流程图示例

 

11

逻辑流程图示例

 

12

页面流程图示例

注:设计流程图和线框图的时候要切记我们是为了辅助产品开发的不要在流程和原型阶段花费太多的时间和精力,如果你能一个图解释清楚就不要加注释,怎么快捷高效怎么来。千万不要本末倒置,本来是快速设计印证需求,结果搞得很复杂需求最后不断变化,你设计迭代很多版本,耽误了大量的时间压缩了研发和UI的工作时间。

技巧一 充分理解需求

功能设计的目的: 满足需求、需要,形成产品形态,完善用户体验。

1、从吃透需求这点出发进行设计的时候应该是这样的:客户是否希望使用手机号作为账户名,为后期营销和收集真实可验证的用户身份。

2、客户是否希望在社交媒体做粉丝运营推广营销,那么引入第三方社交媒体进行登陆是个解决方案。

3、安全性以及找回密码

4、机制通用性,是否进行单点登录设计全站和多线服务统一一个账号

技巧二 提取核心功能

核心功能是别的产品没有或者比不上的,是这个产品的生命力保证与品牌策划推广的卖点。
需要在你设计之初就要想好什么是你产品的特色呢?怎么体系出产品特色功能?

技巧三 逻辑清晰

逻辑清晰的设计是基于上一小节的流程设计而言的,在做设计的时候要严格遵守已经确认的逻辑流程。

第五章 原型设计及常用工具教程

原型的概念:交互设计领域讲的原型(Prototype)是指:产品的形态根据需求进行具体化的展示DEMO,我们称这DEMO为原型(Prototype),是今后开发,迭代的第一代原型(Prototype),原型(Prototype)是使用具体的原型设计(Prototype Design)软件进行设计的,所以它具有快速设计的能力又称快速原型设计(Rapid prototype design)。

原型设计的概念:针对产品需求而作的具体形态展示的作业过程。一般理解为框架、结构、页面地图的设计展示。

线框图:用线条勾勒出一个产品的界面,用来展示创意和验证需求。一般情况下不使用彩色设计,是为了不影响后面阶段的界面设计效果。原型设计阶段主要针对页面逻辑、架构/结构设计。

低保真原型:低保真原型是指采用线框图的方式制作一个可以演示的产品DEMO,不是具体指哪一个功能和页面而是整个产品的完整原型。

高保真原型:高保真原型是指在低保真原型的基础之上加入了界面美术设计,使其看起来和真实产品相似度、还原度达到最贴近的产品完整原型。

第七章 测试评估交互原型

原型评估(英语:Prototype evaluation),它描述一种用来确认架构、逻辑、使用场景的交互设计方案的正确性、完整性、安全性和质量的过程。是一种实际输出与预期输出间的审核或者比较过程。

测试评估交互原型常见的测试方法有:

1、建立用户模型

用户模型概念:(英文:Persona)是由设计师进行虚构出的一个用户用来代表一个用户群。

一个用户模型可以比任何一个真实的个体都更有代表性,因为设计师把年龄层的人群属性进行提炼,形成一个代表典型用户。

用户模型的资料有消费习惯、产品使用习惯、生活习惯、性别、年纪、收入、地域、情感、上网方式、搜索历史、名片关键词等等。

根据你的项目情况设计3~6个用户模型就足够代表所有的用户群体。

2、进行可用性测试分析

可用性测试:通过让特定的人群完成你设计的测试用例任务,发现并记录出现的可用性问题,从设计层面解决这些问题。

3、组织焦点小组

4、找专家把把关

设计出测试用例

测试用例就是一个文档,描述输入、动作、或者时间和一个期望的结果,其目的是确定应用程序的某个特性是否正常的工作。

根据设计功能的情况设计出每一个流程的操作用例的测试用例。

(1)确认人数或用户模型,一般情况下都是选择6-8人,项目大一些的就8-12人或模型。

(2)确定用户场景,需要明确你产品设计中的每一个功能的使用场景

(3)明确任务,要给具体的人分配具体的任务,根据任务收集测试结果。汇总问题与讨论解决方案。收集可用性、用户体验性、逻辑性等问题,分门别类的形成文档,然后根据不同问题和不同层面的人讨论解决方案

总结

1、从测试评估的过程中总结出一些经验

2、把自己当作一个普通的具体的用户

3、尽可能的模拟真实场景来评估,更具有参考意义

4、按照流程设计与逻辑设计方案进行走查一边自己的设计方案,查找问题

5、做多次的竞品分析,要有针对性,例如支付宝和微信

第八章 大招!怎么出一份各方都满意的交互设计说明书

交互设计说明书是用来梳理交互事件、页面流程逻辑、跳转等交互动作的文字+图标的描述方式,分别提供给UI设计团队,研发设计团队,测试团队,有些还需要提供给BOSS。

制作一份专业的交互设计说明文档:

关键点:逻辑结构、页面跳转、交互状态的文字说明,统一交互体验动作,确保页面组件的一致性。

文档结构:

(1)文档封皮与版本信息:版本信息一般包括版本信息、日期信息、参与人信息、变更内容简要、备注信息。

(2)目录页

(3)Log修订记录页:用来描述某次更新的信息简介与页码导航等。

13交互设计说明文档的更新记录页

 

(4)交互行为逻辑图+文字说明:把应用更新这个功能拿出来当一页将它的架构,交互,流程、逻辑、交互事件、文字解释说明都齐全了。

14某一个应用商店的更新应用交互逻辑+文字说明图例

(5)页面展开图+逻辑+文字

15

 

(6)其他单独的交互动作详细解释介绍,补充书写不在流程里的单独的或独立的交互。

总结:

1、给程序看就用一章独立的章节写明白交互逻辑、页面流转

2、给视觉也用一章独立的章节写明白所有的页面展开,公用页面交互等

3、给测试就加好注释与说明

4、交互需要按照功能逻辑一个个排着写更容易理解

5、交互事件的状态需要用截图形式展示出来,不能大量文字描述,因为很多人不看小字就看图。

 

文/叶伊惠(简书作者)
原文链接:http://www.jianshu.com/p/57c4fce2fa4d
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

发表评论

电子邮件地址不会被公开。 必填项已用*标注