無標題文檔

Tab 标签,上面还是下面?

整理来自: http://www.androiduipatterns.com/2011/07/tabs-top-or-bottom.html

Android 的确成功了,但这其实这并不能说明它是成功的。例如,比较头痛的问题就是 Android 界面设计上的分裂(似乎 Android 4.0 已经有了设计规范),举个例子说明就好比标签控件(Tab)。

开始这个问题之前,我首先要表明自己的态度:我是中立者。客观意义上说我是开发设计人员,我们都想设计出让用户更容易试用的 App,就那么简单。

https://files.gracecode.com/2012_03_30/1333075710.png

回到问题本身,Tab 页标签放在上面还是放在下面其实这个问题已经争论了很久,那么我们总结下各自的观点:

放在下面

标签页在下面

  1. iPhone 应用以及其他很多应用都是这样干的,所以这样至少不会犯错
  2. 在大屏幕上(想想 Galaxy Note 吧),如果标签页放在了顶部,那么可能比较难以点击
  3. 标签页放在底部可以空出更多的内容区域

放在顶部

标签页在顶部

  1. Android 手机的物理按键(以及 4.0 的屏幕键盘)都在底部,如果标签页放在下面,将会很容易误点
  2. 这个设计源于 Web 站点顶部导航等用户已经接受的方式,同时这与 平板(Tablets)应用相对应
  3. Android 应用一直推荐试用的 Action Bar 就在顶部,因此标签页在顶部能更容易让用户操作
    4、Android 应用底部有很多弹出,例如 屏幕键盘、菜单等,如果标签页放在底部,将会被遮住

其实看得出上述的观点,原文的作者是推荐标签页放在顶部的。果然,原文的作者就针对支持 Tab 放在下面的吐了个槽:

I still find myself leaning towards top tabs. I use Sony Ericsson Arc with fairly large screen and personally I don't have any problems reaching the top of the screen for navigation (I'm aware of uselessness of anecdotal evidence and it's just my opinion).

那么这标签页到底是放在顶部还是底部呢?我个人不想在这里说服什么,您也别指望在这里能够得到结论。

有人开玩笑的说 Android 应用就像是全真七子,七个人联合起来都打不过个 iOS 应用。这个问题的部分原因就是设计师不加思索的直接将设计于 iOS 的应用 Copy 到了 Android 上面。

想想 Android 用户按下菜单键后就不能点击标签页时候的表情吧,如果你是设计师,这会儿我真担心您的人身安全 :)

-- EOF --

960 时代的终结

按照惯例,年底的 淘宝 的确是到了「需要改版的时候」。这次新版的淘宝首页上线,乍看并没有多少夺人眼球的地方,但仔细揣摩其中的细节,还是发现了不少的改变。

https://files.gracecode.com/2011_01_10/1294635311.png

其中有一点就是感觉页面留白过多,仔细看了下发现是页宽从 原来的 960px 拉伸至 1000px。

https://files.gracecode.com/2011_01_10/1294635263.png

不要小看这个增加了的 40px 页宽,这对于设计师们而言可能是做了个「异常艰难的决定」。

混沌时期

还记得用 Win98 拨号上网的时代吗?那时候分辨率也小得可怜,800x600 的标配分辨率甚至都不及当前的某个高端智能手机。

不知道什么时候开始,网页的页宽有了个经典宽度 600px -- 当然,那时候谁都不会在意它。

960 时代

后来,这个故事变得简单而且老套:随着硬件的发展,分辨率也不断的提升。从 1024x768 到 1280x800 再到 1440x900 甚至更高( 这里有个统计 )。

https://files.gracecode.com/2011_01_10/1294635802.png

网页的页宽数字也在不断的增加,比较经典的几个数字为从 600px、740px 直到 960px 。然而这时候标准线出现了,那就是 960 页宽。

以淘宝为例,我印象中 960px 页宽从 2006 年沿用至今(2011)已经整整五年。这相比二十一世纪的前五年的页宽改变趋势而言,这实在是让人感到有些变化不大过于拘泥。

当然,设计师们采用 960 这个数字当作页宽的布局方案也有其道理:

  1. 其能兼容大部分的屏幕分辨率。800x600 已死,剩下分辨率最小的也有 1024x768。那么,为了更可能多的展现内容,页面的宽度自然会在 800-1024 像素之间,960 设置数值差不多是个中间值,不多不少刚刚好。
  2. 960px 方便栅格化布局 -- 其实从数学的角度上说,这个观点有点站不住脚。不过 960 页宽的栅格是最早出现的, 同时也是最广泛使用的 (附, 淘宝的栅格系统 )。

打破僵局

既然 960 页宽已经足够好,沿用传统的页宽也并不会犯错,那么回过头来我们再看这次淘宝首页为何要改变成规。

根据我的个人观点,可以总结部分:

  1. 960 页宽已经显得「过时」,1024x768 像素会像当年的 800x600 一样,迟早会被更大数字的分辨率所淹没。
  2. 需求的驱动,需要在页面中加入更多的内容。想想页宽增加 40px 乘以页长,整个页面将会多出多少设计和内容填充空间。
  3. 1000px 这个整数更容易计算和安排栅格 -- 不过从数学上这个说法也很难站住脚。不过整数 1000 的整除数比 960 多多了,也更容易安排。

单单 40 像素的改变,对于「粗心大意」的用户而言似乎无关痛痒(当然,也可以理解为淘宝其实不想让用户过多得在意他们的改变)。

个人觉得 1140 页宽 也是可以考虑的数字。那么,还有会不会有更大的页宽数字出现?我想应该会控制在 1200px 以内, 否则将会给用户阅读带来困扰

未来

我们来预测下未来的经典页宽将会是什么数字?说实话我也不知道,这一答案完全在设计师脑子里。有点可以预料到的是,移动上网设备的兴起会有促进两个大的趋势:

  1. 向下兼容针对小屏幕的弹性页宽( 详见 )。
  2. 页面布局将会针对不同的设备而定制,因此 800px 以下的页宽将会「复活」。

-- Split --

这次广泛采用 HTML5 标签、加大页宽等等的改变,看得出淘宝一直在做着细节方面的尝试和调整。然而从不谐调的留白、布局的不协调看得出来,淘宝对于新的页宽经验稍显不足。

但愿 1000px 这个页宽将又会是个经典的数字。毕竟,不客气的说,「山寨」淘宝首页的站点实在是太多太多了。

PS,淘宝还给我们留了个小彩蛋,新版在首页搜索框中输入「about:staff」会有惊喜(相应代码在 1970 行开始) :^D

-- EOF --

Designed by Apple in California

此篇为译文,原文在: http://37signals.com/svn/posts/2710-designed-by-apple-in-california 或许可以从设计师角度部分诠释 Apple 此做法的用意。

-- Split --

https://files.gracecode.com/2011_01_05/1294218751.jpg

我曾经在 很多场合中提起 :「‘Designed by Apple in California’ 这段字,我是见过的所有包装上最为夺目的字符」。我的其中位读者 迈克尔 问我:

我同意您的看法,我第一眼看见这段字就让我难忘。
…
不过我很好奇,为什么您会相信「这些夺目的字符注
定会出现在不起眼的包装上」。

这句简单的标签出现在 Apple 的产品及其包装上至少已有十年的历史。(其实,我无法明确准确的时间说明 Apple 是从什么时候开始,但我记得在 2000 年的时候,苹果就在其 iPod 的包装上打上这行字了。)

这说明这句短语的历史是多么的悠久,同时对于 Apple 而言是多么的重要。

背景

「Designed by Apple in California」 这段字是多么的显眼。

当你拿到 Apple 产品的时候,打开包装的皮瓣或者内页那一刻,这段字通常会独立一行印在简洁的包装上 -- 它太显眼了,你几乎不可能错过它。

然后,你缓缓的翻开包装,继续拿出你梦寐以求的设备 -- 这个过程是多么的自然,同时这个体验让你近乎难忘。

情感

Apple 的使命之一是唤起了人们对艺术的感受。Apple 的每件产品,就好比匠人精心制作的作品,被精心包装后安全地送到家门一样。这件产品似乎顷刻间就被赋予了情感,就犹如它是被你所爱的人制造出来一样。

匠人们都会在自己得意的作品上签名。克莱默大师会将他 自己的名字篆刻在每把他经手的刀上 ;佛蒙特设计的家具,在其 每个产品不起眼的位置都留下自己的印记爱德华建议 每个设计师将他们设计的产品署名 -- 这表明你是精心的造就了该产品,并赋予它最好的品质。

或许,我们能了解 Apple 这行字的用意即为如此。

此外,它标注的不是「Made by Apple in California」,而是被设计(Designed)的。我很难想到还有其公司会将设计(Design)放在如此高的地位。它的每件产品似乎注定是被设计出来而非制造。同时,这也是该公司使命的最好表述。

此时无声胜有声

平面设计领域中有句这样的话:

如果你想让它显眼,那么就把它放大吧!如果你想将其变
得更突出,那么加边框!仍然不够?那么就把他标红。

放大、加边框、标红,这些技巧明显是那些懒惰的设计师常用的伎俩。我们之所以认为这很愚蠢,原因之一就是它过于明显的表达了自己的意图。

话到此,我们或许能 Apple 熟谙这种微妙。Apple 通过突出传达这句话(绝对不会存在任何无视它的机会),来突出产品。这段文字小而优雅,就想是与产品本身浑然天成。我们感觉不到任何的意外和惊讶。

在我们阅读它以后,Apple 不需要任何过多的言语,去复述传达自身产品的品味和价值。因为,此刻用户已经了解。

-- Split --

后记,文章发表后, 发现已经有哥们翻译了这篇文章了 ,两个版本的译文对比着理解吧。

下面说说我的看法。不容否认,苹果的成功让人们更多的关注这个公司的任何地方,有些甚至有些很不经意的细节都会被无形的放大以及被咀嚼,其中就包括上文「Designed by Apple in California」这段小字。

我们应该能理解,苹果的成功从另方面讲是许多个数不清的这样的细节组就而成。任何物品经过精雕细琢那么它的价值往往会多于它的本身,包括产品、设计、还是编码,其实都是这样的道理。

还是有个问题和期待就是,什么时候我们的「Made in China」变成「Designed in China」?

-- EOF --

我理想中的阿里旺旺

阿里旺旺 是我每天必须使用的工具,同时也是抱怨最多的工具。IM 自然是以即时沟通为主,但其有些交互流程让人非常的不爽,在这里抱怨下。

积怨

当有消息来时,为何闪动的图标和旺旺分开显示?本来我机子的状态栏的 Icon 就多,这样的设计又会让我不得不重新寻找系统托盘 Icon 的顺序了。

https://files.gracecode.com/2009_11_05/859257fc55f2.jpg

添加好友为何要按住 Ctrl 键并点击鼠标?还有该死的分组选择功能,不仅让我重复确定两次,最后还弹出个对话框选择确定关闭还是和他聊天,多此一举。

那么小的发送按钮让我聊天的时候选择表情以后,鼠标每次都需要「微操作」下( 同抱怨 )。

聊天窗口 Ctrl+V 似乎不支持图片,我每次都需要点击右键,非常让人恼火。

界面太「炫」了,又有渐变又有背景。其实我不在意你长得有多漂亮,想要更漂亮何不提供个换肤功能?

https://files.gracecode.com/2009_11_05/676037fc55f2.jpg

在使用过程中,5.7 版的指定发送功能挪到了菜单的深处,取而代之的是个「搜索」功能。但是这搜索又分联系人搜索以及网站搜索,那么我到底要使用哪个呢?其实,我最原始的目的仅仅是指定对方的旺旺用户名并和他聊天。

阿里旺旺上广告应该可以说是国内 IM 之最了。这点我可以理解,但是何不考虑下 Google 的做法,显示用户感兴趣的广告呢?

https://files.gracecode.com/2009_11_05/031617fc55f3.jpg

过多的系统资源占用,上图很能说明问题,这点需要苦练内功了。

主界面

那么,我理想中的旺旺会是什么样子呢?首先我希望他会很简单,不仅仅是界面,更是交互流程方面。

https://files.gracecode.com/2009_11_05/055737fc5ee0.jpg

聊天窗口

https://files.gracecode.com/2009_11_05/651837fc5de8.jpg

几款黑体的测试和介绍

黑体是视觉设计师常用的一款字体,特别是针对广告的 Banner 等。根据 维基百科 的相关介绍,有关 黑体的定义 可以认为

黑體与白体相反,没有衬线装饰,筆劃粗壯有力,撇捺等笔画不尖,使人易於閱讀。
黑体是在现代印刷术传入東方後依据西文无衬线体所创造的。所以黑体这个词的范
畴和无衬线字体是类似的。而宋体就可以被称作衬线字体。

「黑体」在日文中被称为ゴシック体(Goshikku-tai,英文:Gothic,直译即「哥特
体」)。

相对于「 白体 」,也有相应的解释

与黑体相反,白体是笔画较细的一种字体。宋体(亦称明朝体)、仿宋体、楷体、
魏书等都是白体。

所以,综上所述。使用黑体的原因之一就是加重信息并容易阅读。这就不难理解为什么 Mac OS X 和 Vista ,都改用黑体作为系统的默认字体。

国内简体中文的黑体,除了众人皆知的 微软雅黑(据说造价非常昂贵),还有其他的一些,在这里简单的列下

下面是各款黑体的不同样式,根据不同的抗锯齿程度,显示的效果可能会不一致

https://files.gracecode.com/2008_07_17/1216270805.gif

各款黑体字体文件的大小,从另个侧面能说明这款字体包含了多少的中文字符。

https://files.gracecode.com/2008_07_17/1216270845.png

那么,到底选择哪款黑体合适呢?就个人观点而言,本人偏向于选择 文泉驿 正黑。

原因有两点:其一,就是其自由的版权。其他的黑体有不定的版权限制,要么就是单独作为软件(字体也是软件)销售、要么就是其自身产品的一部分;其二,就是更新的频率,由于有开源社区的支持,处在不断的更新中(并且如果你愿意,也可以加入改进改字体的队伍中)。

于己不利,勿施于人。设计师如果能在不影响设计的前提下,使用无争议的软件(即便是款「小小的字体」),何乐而不为呢?

另,期前已经有「理想主义者」,在几年前就号召大家使用自由字体了( 详细 )。

我的照片

嗨!我叫「明城」,八零后、技术男、伪苹果粉、微软无脑黑、宁波佬,现居杭州。

除了我的博客,同时也欢迎您访问我的 GitHubTwitterInstagram 主页。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 其实无所谓叫什么名字,因为我曾经为这个名字伤透了脑筋。最后想到的这个名字都没啥特别的,说到 底是因为我实在给它不了个非常酷的名字。

如果您想联系我,可以发我邮件 echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d

文章

项目

微信公众号