品质认知

[译]空状态的设计

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

垂直居中

三行CSS代码让任何元素垂直居中

在transform: translateY的帮助下我们可以使用三行CSS代码让任何,甚至不知道高度的元素垂直居中。 CSS的transform属性常用来旋转和缩放元素,现在我们可以使用它的translateY函数垂直对齐元素。垂直居中通常的做法是使用绝对定位或者设置行高,但是这两种方案的弊端是要么需要你知道元素的高度,要么智能作用与单行文本(译注:inline或者inline-block元素)。 我们的代码如下 .element { position: relative; top: 50%; transform: translateY(-50%); } 以上就是所有代码,它和据对定位的方案类似,但是不需要设定元素的高度,也不需要为其父元素设定position属性,它独立工作,甚至支持IE9! 为了让它用起来更简单,我们可以在包含浏览器前缀之后写入一个混合里面(mixins): @mixin vertical-align { position: relative; top:

《无人区》

无人区

无人区是部好电影。 宁浩疯狂系列之后野心更大的一部作品,即使四年的改改补补之后,仍算是华语片中上乘的作品,至少也算是上乘的西部片,《西风烈》不算,《西风烈》空有招式,内劲全无。 对,还是讲故事的水准,疯狂系列,宁浩就已证明能够讲好故事,拍出能让观众大呼过瘾的故事,只是技巧太重,与人口舌。 《无人区》压住各种华丽的招式,只打一套普通长拳,收敛之下,便也到了新的高度。 不讲技巧,也就不耍花招,拼的自然是内力,相比之前,华语片更多片子招式三流,却又贪多,《扫毒》我想减掉三分之一应该更好。 不讲技巧就是最大的技巧,所谓无招胜有招。一部好电影,

动态文档目录

使用md-toc.js来生成文章目录

使用markdown语法来博,绝逼一大利器,再配合各种静态博客技术,更是如虎添翼,唯一的问题是要想给文章增加目录,就得手工书写HTML代码,这样做绝对是大煞风景,因此一个思路便是在用户浏览文章的时候动态生成,这样一来照常使用md语法写博,二来也能增强文章可读性…… 不多说直接上地址:https://github.com/yijian166/md-toc.js,page:http://yijian166.github.io/md-toc.js/ ————- # [](#md-toc)md-toc.js 动态生成静态HTML页面目录,特别适合由markdown语法生成的页面(例如诸多静态博客文章)。 说明 扫描指定元素(

-webkit-line-clamp

多行省略

对于多行文字经常会有控制行数的需求,特别是字数不可控的的标题,其中的难点是最后行末的省略号,加上省略号也让文本显得更为优雅,易读。 单行省略 .text-overflow { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; max-width: 100%; } 上述代码使用频率较高,浏览器的支持情况也良好。 多行省略 webkit弹性盒模型方案 .line-clampin { overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; } webkit的浏览器支持多行省略号,这种方案的好处很明显比较优雅,代码量少,

智能电视

智能电视UI/交互分析

智能机顶盒现状分析 智能机顶盒的概述 随着智能设备的流行和家庭带宽的提速,智能电视也逐渐流行。智能电视,可以理解为搭载智能操作系统的电视,智能电视的操作系统主要有苹果系统和Android系统,因为apple TV 在国内不可用,以及Android系统本身的开放性,国内的智能电视操纵系统主要以Android为主。而智能电视从硬件上来看,又有一体式的智能电视(例如,apple TV、Google TV、小米电视等),和普通电视+智能机顶盒(譬如,小米盒子、乐视盒子、PPBox等)的组合。 总体来说智能电视无论是那种硬件方式,其硬件配置都较高,智能系统基于Android 4.0并针对电视做了优化,大多都支持在线更新,

Android中px和dp的转换

浅谈Android图片资源文件的尺寸处理

为了应付众多的屏幕,Android将屏幕分为四个等级(也就是四个屏幕密度screenDensity) [![Android屏幕密度screenDensity](https://oeuys8rx2.qnssl.com/wp-content/uploads/2013/08/Android-screenDensity-1024x238.jpg)](https://oeuys8rx2.qnssl.com/wp-content/uploads/2013/08/Android-screenDensity.jpg)Android屏幕密度screenDensity 而相应的在Android项目的工程中会有对应的图片资源文件夹(drawable-ldpi、drawable-mdpi、drawable-hdpi、drawable-xdpi), Android程序在呈现图片时会**优先选择符合屏幕等级文件夹下的资源。** 但是如果资源只在一个文件夹下,

-webkit-user-select

-webkit-user-select:none导致输入框无法输入

最近在webview中写页面的时候发现个别Android机型(Google  Nexus,Android 4.2.2)输入框无法输入(但是键盘可以弹起,所以不是网上所说webView.requestFocus(View.FOCUS_DOWN);的问题),经过试错发现是-webkit-user-select:none;所导致的原因。 后来网上再搜,果然有同样的问题,Phonegap styles -webkit-user-select: none; disabling text field 当然如果你确实需要这个-webkit-user-select这个属性,也可以这样写css代码(来源于上述的stackoverflow上的回答。): *:not(input,textarea)

css

【译】html&CSS教程

之前做过译文预告,立下宏愿要完全翻译完,现实非常骨感,至今才翻译到第六篇,忍不住了先放到这里做个目录。 术语、语法和介绍 元素和语义化 盒模型和定位 排版 背景和渐变 无序列表,有序列表和定义列表 图片、音频和视频 创建表单 使用表格来组织数据 貌似github page的速度十分不佳,还经常性抽风,好吧,择个黄道吉日换个地方,farbox.com或者自己搭建个…… 最后再插一句,个人认为这个教程和网上流行的其他教程都不一样,由浅入深,适时点缀点高级经验,文字、代码、示例混排,同涉及了常用的HTML5和CSS3部分,可以说这个更像一个教程。

交互设计

好的视觉/交互设计的三个要素

英文原文:3 Parts of Good Visual Interface Design 仅从基础层面来看,在我看来好的视觉交互设计有三个部分组成,或者说需要满足三个要素。每个部分的满足程度将直接影响整体作品的质量。如果都满足了,作品就达到了最好的境界;如果只是一两个满足了,作品质量也就马马虎虎;如果没有一个满足,那东西肯定稀烂。这三个部分便是: 清晰的界面元素 元素间的关联 作品各部分的组成效果 清晰的界面元素指的是每个元素都清楚的表达了自己的功能和可交互性(或者 affordances,译注:可以理解为”可供性”,在此推荐ID公社的一篇文章)。这些元素是否容易看到,其中文本是否易于辨别?按钮是否看起来就像按钮,并且用户是否知道它可以点击(

悟空

修罗悟空

我的偶像是一个盖世英雄,手握定海针,脚踏七彩云! 悟空传 出世 ——记住你是一个猴子,因此你不用学做神仙,你的本性比所有神明都高贵。 比试 ——跳过那水帘,你便是王。 伏牛 ——是不是选择任何一个方向,都会游向同一个宿命呢? 菩提授法——我要天下再无我战不胜之物! 归来 ——待至英雄们在铁铸的摇篮中长成, 勇敢的心像从前一样,去造访万能的神祗。 战甲 ——你以为你有很多路可以选择, 但是在你四周有很多看不见的墙,其实你只有一条路可以走。 盖世——等到那一刹那,黑暗的天空突然被一道巨大的闪电划开。 孙悟空一跃而起,将金箍棒直指向苍穹,”来吧”! 被俘——神仙原来是容不得世上有能自主自命的灵物的…   重生

寻找小糖人

《寻找小糖人》,平静的故事中总有一丝半缕能够扣中你的心神。 我想传奇与平淡间最短的距离就是小糖人了,寻找小糖人,甚至可以像等待戈多一样成为一个icon,一句佛陀箴言,于无声中道破万语。 喜欢一件事情,便是一辈子的事情,总是会感激在之前那个混沌的日子里做出了自己最正确的决定,无所谓坚持,在这样的状态中,无论怎样都是甘之若饴。 “thanks for keeping me alive” rodriguez开始自己真正的巡回演出,已是满脸皱纹垂垂老矣,热爱能有多持久,一辈子都在自己的小镇,热爱没给自己其它,只是一生平静。 到此我也便不再恐惧失败,幸福在于唯心,在于追寻,不在乎多少,只在乎我想要微光能够包围内心。 ———— 专辑《Cold Fact》与《

css

堆叠按钮

相信大家业已了解CSS3 icon font的诸多优势,在之前的文章中较为详细的介绍了icon font的制作和应用,但美中不足的是制作出的按钮icon只能为单色,而且受限与icon矢量缩放的特新,在单个字体中的形状也不会太复杂,今天的译文或许可以提供一种新的思路。 英文地址:http://conor.cc/posts/icon-stacks ————–以下为译文————————————— 结合不同的icon font 字形可以创建组合式的超级icon(mega-icon)。 如果你最近才加入设计师和开发者的队伍中并在使用icon font,那么你很可能正处在蜜月期。对于我来说,在我第一次在App中使用这些甜蜜而可伸缩的字形的时候,icon font就像是上帝送来的礼物。向混乱的雪碧图,farewall中的PNG,GIF,JPG图片说再见把,我再也不会为背景图片的位置是-1384px还是-1385px而折磨自己了。 在我尝试将所有的雪碧图和图片从我的代码仓库中移除的时候,

css

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

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