中文的lorem ipsum

Lorem ipsum是拉丁文,在当代英文看来似乎没有意义,正好可以用来观察页面中文字的排布是否合理。

在做中文产品的设计时,假文的使用,如果希望看起来整洁一点(而不是“卬埒氝婇柟灝痻溾圪朼胗忷刱祅杋稗乇岮翞楻”),那么可以使用文言文助词:

  • 斯言
  • 斯言者也
  • 斯言者也乎哉

中文文言文中的助词原本是没有意义的,就像《千字文》里说的那样:“谓语助者,焉哉乎也”。

在放置到搜索栏(search bar)中作为假文时,简短的文言文助词就正好合适。

Mobile Paper Mockup

I made this paper mockup in shape of iPhone 6S this morning.

wechatimg8

It’s made of fluting paper. I got some from a parcel box.

wechatimg7

I can sketch prototypes on blank paper, and cross the prototype through below the pink frame on my mockup, and then ask users questions in agile usability testing.

wechatimg5

Blank paper could slide vertically and also horizontally.

wechatimg6

我用硬纸壳做了一个纸上原型的底板,可以用剪裁好尺寸的白纸画上原型,然后穿过粉红色边框与底板之间的空隙。这样的纸上原型,可以用来进行敏捷可用性测试。

Framer:双指缩放(pinch)和拖拽(drag)动效

Framer是一个设计师可以帮助前端工程师减轻压力的工具,因为它不仅展示动效,而且生成JS代码,可以由工程师直接拿过去用,而不用担心“设计师想象出来的动效是不现实的”。

这是Framer生成的代码目录截图:

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-12-29-09-11-53

慢慢在学会用Framer了,今天尝试了写这段代码,并在手机上查看了镜像效果(mirror),非常不错。Framer是充满活力的原型工具。


bg = new BackgroundLayer
	backgroundColor: "#28affa"

layerA = new Layer
	backgroundColor: "#ffffff"
	borderRadius: 10
	x: Align.center
	y: Align.center
	width: 300
	height: 300

layerA.pinchable.enabled = true
layerA.draggable.enabled = true

layerA.onPinchEnd ->
	layerA.animate
		scale: 1
		rotation: 0
		options: 
			curve: "spring(300,20,0)"

layerA.onDragEnd ->
	layerA.animate
		x: Align.center
		y: Align.center
		scale: 1
		rotation: 0
		options: 
			curve: "spring(300,20,0)"

Minimum Viable Product (MVP)

大概是在 UX Strategy 这本书第一次看到MVP的概念,今天读 Value Proposition 一书,突然明白 MVP 和原型的联系。

在 Value Proposition 中,MVP 的定义是:

价值主张的原型或实物展示,用于测试一个或多个假设的真伪。目标是尽可能快速、廉价、高效地进行测试。MVP 主要用来挖掘潜在客户和合作伙伴的兴趣。

MVP是lean start-up movement倡导的一种概念,旨在在完全生产出整个产品以前,通过MVP能有效地测试市场对产品的兴趣,而不是建立一个完整的产品,并测试调整我们的价值主张。

MVP的实例包括数据表(data sheet)、样本(brochure)、storyboard、登录页面(landing page)、产品包装盒(product box)、视频、原型(learning prototype)、Wizard of Oz。

所以 prototype 的作用,也就是MVP定义所描述的作用。