Evan's learning notes

IDEA9103 Design Programming

Assessment 1 Guidelines — April 2, 2017

Assessment 1 Guidelines

Research Report and Design Proposal 调查报告和设计方案

这个assessment的目的是了解开发背景。应用用户调查背景调查技巧,根据现有市场相似方案,为真实的用户需求而设计解决方案打下基础。你需要定义参与进来的所有相关利益者,或者开发一个新的解决办法并定义改进,最终目标是完成一个web/app应用界面。

Task 任务

Background research,了解设计任务的背景上下文与issues,包括设计先例。背景调查包括从:文献,在线资源,出版物,趋势分析trends analysis,网络民族志online ethnography和其他形式的引用和启发。还包括竞品分析,用table列出他们的市场成功的关键属性,评估竞品性能。

Design Proposal,基于调查,开发一个设计方案。包括一系列ideas(3个以上),通过分镜storyboard,用户场景user scenarios评估你的ideas,并且解释为什么会选择最终方案

Design report,设计报告(10页,不包括cover,引用,附录),内容包括:

  • 用自己的话简要叙述design brief
  • 背景调查总结
  • 通过趋势调查或者竞品分析得到的key findings和insights
  • 通过online ethnography得到的key findings和insights
  • 总结所有的needsissues
  • 概括ideas
  • 评估ideas描述最终solution
  • 使用APA格式引用

评分标准

独创性:相关性,质量。

过程:背景调查的深度与质量。分析,理想化,idea呈现的方法。

文档:结构化,质量,精确引用等。

Advertisements
Design Brief —

Design Brief

Background

Elon Musk计划使用Interplanetary Transport System(ITS) 星际运输系统运载100人于2018年飞往火星。根据Musk所说,我们将会在50到100年内建立第一个火星殖民地。根据地球与火星的位置,这趟星际旅行大概在80天左右。一旦殖民地建立完成,探索火星的旅游业也将很快跟进。目标受众将会涉及到每一个想要在火星上享受假期的人。我们的问题是,他们如何预订去往火星的行程?

The Design Problem

作为 MarsX 公司的interface designer,你将要设计一个在线预订界面。

分类包括:

  • 为殖民者提供的one-way航班
  • 为观光者提供的return航班
  • 为度假者提供的holiday packages旅游套装。

预订界面必须适用于:

  • 电脑手机浏览器或者app

假设50年后还会使用:

  • 键盘 鼠标 多点触控

预订界面至少包含以下功能:

  • 搜索特定日期可以飞往火星的航班
  • 显示搜索到的flight connections
  • 预订航班。
  • 添加停留在火星上的Accommodation

小组2-3人,每个人负责一个用户界面。ios android app website等等。(assignment2)

你也可以考虑以下问题:

  • 设想整个行程过程;不是每个城市都有航天中心,人们需要同时购买一个到达最近拥有航天中心的城市的connecting flight
  • 去往火星的旅程80天,人们需要预定的不仅仅是一日三餐。把整个飞行过程想象成旅游项目之一,如何让人们选择这些体验作为飞行预订过程的一部分。
  • 可能那时候已经存在许多提供相似服务的竞争对手,如何让你的界面与众不同?例如,添加一些其他的体验服务作为holiday package的一部分。
  • 设想一些在火星上的体验项目,不仅仅hotel,例如在火星上漫游,选择航天服的样式与类型。
  • 除了SpaceX还会有其他的航空公司,如何把这些信息呈现到你的用户界面中去,参考Expedia或者Webjet。

你可以自由编造细节,例如航班价格,但尽量实际一些。然而这些也可以作为background research。写在reference里!

设计vr界面也是可以的。

The Process

整个项目大致包括以下步骤:

  • (assignment1)
  • 提供一个分析透彻的关于调查相似的界面解决办法,例如长距离飞行和提供假日套装的预订网站
  • 使用ethnography调查当前解决方案中存在的关注点不好的地方和优点
  • (assignment 2 3 4)
  • 制作线框图,描述任务和用户流。
  • 创建细节。
  • 制作可交互原型,趋近于最终成品,以供用户测试。
Chapter 6 – Translate, Rotate, Scale 转换原点 旋转 缩放 — March 31, 2017
Design Thinking wk2 User Research — March 27, 2017

Design Thinking wk2 User Research

HCIxD Process

Empathise 共感

Define 定义

Ideate 组织灵感

Prototype 制作原型

Test 测试

 

Empathise 共感

与你要设计的目标人群进行带入感 去理解目标人群。

“当这三方面(人们做什么,说什么,制造什么)都同时被探索后,我们就能理解并且经历设计对象的所在领域。”

构建共感。

 

Overview

理解用户

Ethnography 人种论(类似于社群调查吧)

Observation 观察

Contextual inquiry 查询情景

Interviews 采访

Questionnaires 问卷

Focus groups 关注群体

Interpreting data 分析数据

 

Ethnography 人种论

Principles 原则

了解他们日常的活动

专注于活动与人之间的关系(交互),而不是某一个特定的个体。

描述活动?

成员观点

专注于人们做什么

Methodology 方法

方法有很多种,包括非正式的采访,观察,self-reporting 自我报告,食品分析,人工分析?

Example 1 赞比亚人们的手机使用

看视频前。

根据自己的使用经验,写下一些假设,关于,使用活动,时间,原因,什么类型的手机,使用时的问题。

考虑你的经历和赞比亚人民有什么不同?是否有文化区别,态度或者行为区别。社会经济政策条件有什么差异。

看过视频后。

看完后,你的假设中有哪些需要改写。写下确定的假设,写下,哪些问题对你的假设有挑战?

这是一种很实用的练习在设计或者调查项目开始的时候。

 

Observation 观察

Types 类型

暗中观察 +1s

跟随主体

Undercover agent: interact covertly

参与观察,被观察的一部分。

例如使用摄像头记录等等。

 

Contextual inquiry 查询情景

Why

上下文

在真实环境中观察用户

揭露人们工作中的细节与潜在动机。

了解工作流workflow。

获得设计灵感。

inform the design of a system?

When

使用时间

原则

上下文:观察工作地点

参与:用户是专家,设计师是学徒;用户和设计师合作。

理解,解释环节:所有的相关利益者都要参与到解释数据环节。

关注点:在特定的项目上,理解我们要寻找什么?(全是废话)

 

Interviews 采访

Type

结构化的

半结构化的

非结构化的

开放性或非开放性问题。

Preparation 准备

关注点

准备问题

试用测试问题

问题问的好,收到的回答与数据才会更好。

参与

哪些是用户?

补偿他们的采访时间,比如给一些奖励。

材料

记录设备,视频音频。

电池。

纸笔。

数码相机。等等

Scripts and tips 脚本与提示

在采访之前 设计者应该:

介绍自己

解释项目

提到隐私问题

以封闭问题开始

或者使用一些热身性的问题

调查

保持视线交流

录音

开闭问题

封闭问题:固定的回答区间,是否,对错,选项等等。例如,结婚了吗,姓名,喜欢冷饮还是热饮等等。

开放性问题:获得更多的反馈,用who what where when why 和how。例如,在社交媒体中让你困惑的事情有哪些?

避免诱导性问题

例如,你是否觉得政府应该改变他们对医疗的态度?

避免在一个问句中同时提问多个问题

你是否认为这个训练很好,你有效的学习技能了吗?

小心social assumptions 社会假设(大概就是道德绑架)

例如,你给福利组织捐过款吗?

上下文

例如问题是:“你昨晚喝了多少酒?”

然而这样问是不礼貌的,请说出你提问的原因,比如调查生活习惯和心脏病的关系。

Dos 和 Donts

+ 重复提问 重组语句

+ 问些固定的问题

+ 告诉我最后一次你。。。

+ 提到问题目的

– 引导性问题

– 推测性问题 “你将会怎么做”

– 模糊问题 让用户不理解

– 在没给上下文的情况下问用户多么喜欢某件事

 

Questionnaires 问卷

Pros and Cons 优缺点

适合大量用户群体

产生统计方面的重要性

但通常很难提出正确的问题

Tips

专注于调查问题

避免不必要的问题

简短并给出提示性答案

开闭问题

Rating scales 打分

1到10

Semantic differential scale

Likert scales

examples

避免不明确的答案 比如 often rarely frequently

适当给出other选项让用户自己填

 

Focus group 关注群体

Format 格式

小组采访

6-9个用户在一个房间

记录

保持采访不会被打扰

优点

应用于设计的早期阶段(收集目标用户)。

收集用户语言和想法的视野。

短时间内收集大量数据。

缺点

很多人同时讨论。

羞于参与回答问题。

很难理论化的讨论。

结果可能是无法证实的答案。

 

Interpreting the data 分析数据

Overview of 分析过程

理解数据(分析单一案例)-> 浓缩并组织data -> 解析data(找到并解释模式patterns和联系)-> 有效性验证 -> 交流

分析的方法

应用分析模型

根据材料分析

直接分析

应用分析模型

根据预先建立的模型,分类,或题目结构化材料。

例如:

根据材料分析

???

直接分析

直接对数据产生灵感。

 

Cultural probes 文化调查

Open ended 开放式

传记(姓名年龄穿着balabala 有点像调查户口的)

作为专家参与

对话和交流

 

Interpretation and Story-telling 分析 讲故事

 

Affinity Diagram 亲和图 (有点像家谱)

聚类相似个体

使用不同颜色的贴纸代表不同level的data

使采访data有意义

黄色:从采访数据中产生的单一观察,问题,需求。

蓝色:聚类相似场景,通过用户的话来说。

粉色:把蓝色的再聚类,关键性问题,分析数据。

用用户的话来说。例如,Alice通过邮件每两周给他的父母寄送自己儿子的照片。Jack通过邮件给在墨西哥的祖父母发送儿子的照片。聚类:通过邮件发送。

Chapter 5 – Response 对输入设备的响应 — March 26, 2017

Chapter 5 – Response 对输入设备的响应

Intro

想要程序对输入设备做出响应,那么这个程序必须持续运行,在processing中,这个函数叫 draw()。

 

Once and Forever

draw()函数循环自上至下运行,直到程序被停止,每次的运行被称为一帧 frame。默认每秒60帧。

Example 5-1 draw()

屏幕快照 2017-03-26 19.56.41

例子: println(frameCount);

名称:frameCount

解释:frameCount是系统自带变量,显示运行到现在一共输出了多少帧。在setup()中初始为0。

屏幕快照 2017-03-26 19.57.40

例子: println(frameRate);

名称:frameRate

解释:frameRate也是系统自带变量,与frameCount不同,frameRate显示当前帧数,虽然默认是60帧,但其实并不稳定,有一点点误差,也跟计算机配置有关。初始值为10fps。

Example 5-2 setup()

setup()函数只运行一次,通常,该函数被用作初始化变量。第一行通常是size()函数,然后是fill(),和stroke(),或者加载图片和设定字体。size默认值为100*100。

Example 5-3 Global Variable 全局变量

全局变量通常声明在代码头部,在import后。

 

Follow

我们可以追踪鼠标的位置,并用这些数据来移动屏幕上的图形元素。

Example 5-4 跟随鼠标

屏幕快照 2017-03-26 20.16.15.png

例子: ellipse(mouseX, mouseY, 9, 9);

名称:mouseX, mouseY

解释:两个系统变量,分别为鼠标当前位置的x,y轴坐标值,单位为像素。注意图中是一堆小点而不是线。

Example 5-5 跟随鼠标的小点

屏幕快照 2017-03-26 20.17.54屏幕快照 2017-03-26 20.19.37.png

与上一个例子不同,这次只有一个小点跟随鼠标,而不是一堆堆的小点,因为这里使用了background()函数。

background()函数在调用时会清空当前画布。

Example 5-6 连续绘制

屏幕快照 2017-03-26 20.28.14

屏幕快照 2017-03-26 20.28.28

mouseX mouseY 存储了当前帧鼠标位置

pmouseX pmouseY 则存储了上一帧鼠标的位置

这些系统变量可以用line()函数画出连续平滑的曲线。

Example 5-7 用 dist() 函数计算鼠标速度 设定线的粗细

屏幕快照 2017-03-26 20.34.58.png

屏幕快照 2017-03-26 20.38.27

dist() 函数计算两点间距离

strokeWeight() 函数设定线粗

Example 5-8  Easing 缓和技术

在上一个例子中,鼠标的位置被直接用来绘制图形,这样动态的绘制非常灵敏,但线条又有些生硬,有时我们想要更松散一点,让绘制跟鼠标产生一些延迟,有一种更流体的感觉。这种技术叫做easing。

屏幕快照 2017-03-26 20.54.41.png

屏幕快照 2017-03-26 20.56.55.png

屏幕快照 2017-03-26 20.55.44.png

控制台中实时的输出了目标位置和实际绘制位置。

Example 5-9 用easing技术绘制更流畅的线条

屏幕快照 2017-03-26 21.02.22.png

屏幕快照 2017-03-26 21.06.13.png

从图中可以看出,我们确实得到了更平滑的曲线,因为绘制产生了计算延迟,而不是用鼠标位置实时绘制。

根据以上的例子 我自己又改进了两个版本

版本1 静态随机颜色绘制曲线

屏幕快照 2017-03-26 21.19.14

版本2 动态随机颜色绘制曲线 自动的哦

屏幕快照 2017-03-26 21.24.57.png

这还有个gif预览效果 画质被压缩的好差啊。。。

randomColorLineD.gif

 

Click 点击鼠标

变量名:mousePressed

变量类型:boolean

值:true/false

 

变量名:mouseButton

值:LEFT CENTER RIGHT

 

Location 使用鼠标位置的几个案例

Example 5-14 The Bounds of a Circle 判断鼠标是否在圆内

 

Example 5-15 The Bounds of a Rectangle 判断鼠标是否在圆内

 

Type 按下键盘

keyPressed

key

 

Map() 映射

把一个值从一个范围映射到另一个范围

Design Programming wk3 — March 23, 2017

Design Programming wk3

generative arts examples

NASA用来自动化生成航天用天线antenna

用交响乐symphony模拟自然雨林 编曲实时反馈环境变化

实时映射人类噪声生态系统ecosystem

分布式系统自动生成艺术作品

Google照片处理 AI 深度神经网络 deep dream 提供了前端api可以使用

大数据可视化data path

assignment examples

案例一

41行代码 并不太复杂 静态 每次编译生成的结果都不一样 模拟闪电?随机生成 线条颜色角度自动变化 都是从左上角顶点发散 虽然随机生成但变化并不太明显

案例二

28行代码 请好好写注释 因为实在太短啦 在屏幕底端生成一排颜色形状不同的三角形 全屏function(在size函数里)

案例三

100行 稍微复杂一些 自定义function objects 给更高分数?每次点击生成不同的eye pattern 颜色结构 (允许使用鼠标和键盘控制生成不同的结果 但是并不会给额外的分数)(也许可以应用到自动化随机生成大量3d人物模型?)

注释很重要但不要写太多

Processing cont

chapter 5 response

var scope (global var & local var)

Design Thinking wk3 — March 21, 2017