空状态

[译]为什么空状态设计理应花费更多时间

旧事重提,之前就译过一篇,空状态的设计,一年半之后发现对这方面还是欠缺,故有此篇^_^ 原文:WHY EMPTY STATES DESERVE MORE DESIGN TIME 在很多设计中,空状态,或者说无数据状态的设计都是在事后才考虑的事情。这件最后的设计,毕竟,它在用户体验中,是短暂的或者只是很小的一部分。 不要被空状态这个名字愚弄。空状态有着驱动用户参与,取悦用户,并且在一些危险情况譬如用户下载App清空了内容,或者运行到错误状况时挽救用户的极大潜能。 这些空状态一般被称为,初次使用,用户清除和错误。但是让我们从用户角度来看待这些情况: 第一印象 成功状态 失败状态 这些用户体验的转折点就会导致两种截然不同的结果:

设计

[译]视觉调整-设计师 vs. 逻辑

译自:Optical Adjustment 在我早期的设计当中,我靠Photoshop或CSS来告诉我正确与否。如果两个形状在Photoshop标示对齐了,那么它们就是对齐的;如果两个不同的形状是同样的尺寸,那么事实就是如此;如果两个颜色有着相同的十六进制值,那它们看起来就是相同的颜色。 这似乎是合乎逻辑的,但这确是个错误的工作方式。 软件的计算方式是理性的,但是软件却没有考虑人对形状,颜色,尺寸的感知——也就是说软件无法理解物体在上下文中的视觉语言,或者人是如何对物体进行感知的。 人类的非理性思维可以看到并理解电脑无法理解的上下文,因此我们需要决定物体关系在视觉上是否正确。理解这些微妙的不同并知道如何去调整,可以让一个好的设计师更优秀——很少有人注意到它们被调整了,但是如果不调整大多数人又会注意到。 来让我们看看这几个例子。 对齐+视觉权重 仅靠宽,高,以及坐标X,y值,电脑没法精确的指导物体的视觉重量。

$q

[译]用漫画来解说AngularJs中的Promises

早上,父亲对儿子说:“儿子,去给我预报下天气!” 每一个晴天,父亲都会让他儿子带上他强劲的望远镜,爬山房子附近最高的山顶去查看地平线来预报下午的天气。儿子对他的父亲承诺他会去并且获取到天气预报,在他离开之前他对他的父亲做出了承诺。 在那个时候,父亲会判断明天是否是个好天气,他要准备明日的钓鱼。如果天气不好,他就不会去钓鱼,同时,如果他的儿子没能得到天气预报,他同样会呆在家里。 30分钟之后,他儿子回来了。不同的事情周而复始的发生着: 结果A) 得到了天气预报!晴天:-) 儿子成功的拿到了天气预报,蓝蓝的天空是个晴天!,承诺履行了(儿子遵守了他的诺言),父亲决定周日去钓鱼。 结果B) 得到了天气预报!乌云密布,有雨:

AngularJS

[译]探索Angular 1.3 的单次绑定(one -time bindings)

译文:英文原文 激动人心的时刻到了,Angular 1.3终于发布了,附带了大量的新功能、bug修复、改进当然也有不足。因为这些新的东西,我们想通过一系列的博文详解主要的功能和改进来让新的版本更快的让大家适应。这是“探索Angular 1.3”系列的第一篇,包含了有史以来最重要的功能:单次绑定(one-time binding)。 等等!Angular的数据绑定不是自动和Ui保持同步么?是的,确实是的,这确实很棒。然而,为了实现数据绑定,Angular需要时刻监听相关的值,这就导致了性能问题,而单次绑定就是为此而生。在我们探究单次绑定之前,来让我们先了解了解Angular中数据绑定(databing)

SVG

[译]SVG动画简介

你可以把这篇文章看做通往精通SVG动画之路的第一步,里面的链接资源也是很好的学习资料。所以赶紧收藏本文然后开始你的精通SVG之旅吧。 SVG元素是一种特殊的DOM元素,语法模仿了标准的HTML元素。SVG元素有着独有的标签,属性和行为,能够让它很容易的定义各种形状——能够直接在DOM中创造图像,因此能够被JavaScript和CSS操作。 作为初学者,你们可以看看这些SVG才能实线的效果: Typographic Demo Isotyope Demo Shape Demo Handwriting Demo 在此有三个使用SVG创建图像而不是用图片(PNG, JPET, etc)的好处: 首先SVG可以被压缩的很好。 其次,SVG可以在无损的情况下缩放到任何尺寸,在桌面和移动设备屏幕上看起来都很锐利。 最后,你可以在运行的时候(使用JavaScript,CSS)

品质认知

[译]空状态的设计

译注:有时候设计师乃至所有参与开发的人员,在和APP胶着之后往往陷入了一种假想的繁忙之中,却忘记了初始的空状态,空状态至关重要,空状态决定了用户的第一印象…… 原文来自realmacsoftware.com,著名的效率类应用clear便出自该团队。 ————–以下是译文—————- 拿到新的APP,我最喜欢的事便是查看第一次运行时的体验并为之截图。在浏览完所有的初始欢迎界面后,我开始研究空的状态——通常是指,APP内没有内容和数据时候的试图。本质上来讲,用户的第一印象来自于,空白状态(blank state),空的状态(empty state)。这点很重要,也很有趣,因为空状态的设计甚至可以作为一个指标,一个APP细节完成程度的指标。你将会看到,空视图远非只是空白那么简单(empty views

css

译文预告——html,css新手教程

译前碎语——自从之前的css3笔记的系列之后,博客的更新频率便慢了许多,人也浮躁了很多,恰好看到这个教程,共有10篇,一口气读下来感觉很是不错,和网上相思教程的最大不同便是这个先导涉及了html5的部分知识,同时也顺带了很多作者的实践心得,很是值得通读,可谓是老少皆宜:) 译文共有10章,如果时间上不容许也可以读读本博之前的文章html和css简介。 ————-3.29————- 原本计划还是写在这个博客,结果发现有诸多不便,于是便放在了github page上面,绑了域名learn.hicc.me. 抽空简单设计了下样式,还未应用上去,等到译文完成,再做打算把。 [![gitbub pages 样式](https://oeuys8rx2.qnssl.