以用户为中心,抓住细节才能抓住用户

Android字体vs微软雅黑字体

点击在新窗口中浏览此图片

本文转自小伟的布拉格

用了一段时间 Android 手机之后,不禁对系统中的字体产生了兴趣。因为看起来,Android 中使用的中文字体和 Windows 中使用的“微软雅黑”很像,我一度怀疑 Android 中使用的就是这个字体。今天有时间,就一探究竟吧。

由于 Android 是基于 Linux 的操作系统,因此根据 Linux 上的经验,在手机上使用“ES文件浏览器”浏览到文件系统的 /system/fonts 文件夹,就可以看到系统中安装的字体。为了方便观察,我把它们复制到电脑上了:

点击在新窗口中浏览此图片

wbpluto的手机中一共有9个字体文件:1个为时钟显示准备的Clockopia,4种样式的无衬线(Sans Serif)字体,4种样式的衬线(Serif)字体。关于衬线和无衬线,各位可以上网搜索一下相关的介绍了解。

这9个字体文件中,Droid Sans Fallback 体积明显较大,达到4.2MB,而其他的只有一百多KB。原来,其他字体只包含了西方文字字符,因为西方文字都是拼音文字,只需要少量字符就可以拼成各种单词,而中日韩等东亚文字基于“型”而不是基于“声”,因此字符成千上万,非常多。在计算机系统中,为西方文字准备的字体都非常小,不包含东亚字符,为了解决在使用西方字体时无法显示东亚文字的问题,就采用了目前这种方式:将一种字体与另一种(或多种)字体链接,遇到第一种字体无法显示的字符,自动调用链接的字体来显示。

例如在 Android 系统中,Droid Sans 是默认字体,只包含西方字符,应用程序默认情况下都会调用它;而 Droid Sans Fallback 包含了东亚字符。当需要显示的字符在 Droid Sans 字体中不存在(如汉字),即没有对应编码的字符时,系统会到 Droid Sans Fallback 中去寻找相应编码的字符,如果找到,则使用 Droid Sans Fallback 字体来显示它,如果仍然找不到该编码对应的字符,则系统无法在屏幕上显示出这个字符。

各种操作系统中都有这样的运行机制,例如在英文版的 Windows 7 系统或英文版的应用软件中,界面默认采用的是在开发 Vista 时专门为屏幕显示而全新设计的 Segoe UI 字体,其中并不包含中文字符,但当系统需要显示中文字符时,会自动去调用对应的“微软雅黑”字体来显示(如下图)。当然,这一链接关系是保存在 Windows 注册表中的,我们可以通过修改注册表来改变它。

点击在新窗口中浏览此图片

下面,通过一幅图来对比一下 Droid Sans Fallback 和 微软雅黑这两个长得非常像的字体:
点击在新窗口中浏览此图片

1. 雅黑字体显得更宽。但根据整行汉字来看,雅黑单个字符的宽度并没有更宽,只是减少了边缘的空白,使字间距变小,相邻两个字的笔画几乎要挨在一起了。
2. 雅黑字体笔画分布均匀,如“地”字,四条竖线之间的间隔一致。
3. 雅黑字体布局更合理,如“图”字里面的“冬”看起来重心很稳,而 Droid Sans Fallback 中的“冬”有点要倒的感觉。
4. 由于宽度和笔画布局上的不同,造成雅黑字体看起来更丰满(肥),更紧实。
5. 这两种字体都是非等宽字体,可以看出雅黑的英文字母和数字普遍更宽(中文由于是方块字,宽度没有区别)。
6. 雅黑在可能的情况下笔画更长,例如“号”字下方的勾,这样在小字号时可读性更好。
7. 小字号情况下,雅黑字体仍然显得大一些,并且由于笔画的间距控制得较好,更容易看清楚每个字,相比之下,Droid Sans Fallback 笔画黏在一起的情况稍微严重一些(如“最”字)。
8. 仔细观察一下,小字号时的雅黑字底部并没有完全对齐,而 Droid Sans Fallback 对得很整齐。因此雅黑在小字号时有点大小不一,这也是其广为诟病的一点。

需要说明的是,虽然字体文件中指定了字符的笔画,但字符的渲染效果仍然和系统环境有关系,上图是使用 Photoshop 制作的,和手机上的显示效果不完全相同。尽管如此,由于处在同一个渲染环境下,我们仍然可以对比出两种字体的区别和各自的特点。

目前,网上已经有人在制作使用微软雅黑字体的 Android 手机 ROM。我个人认为,这两种字体已经非常相似,都具备了现代字体的特点,以上列出的差异都是细节上的,对于屏幕阅读来说并不是那么重要。因此使用这两种字体当中的哪一种可以根据爱好选择,你有权更喜欢前者,也有权更喜欢后者,智能手机机玩的就是自由和定制性,只要用起来顺心,得到满足和方便就行。

相关话题:字体设计 源地址:http://www.gaolewen.com/read.php?121

Android和iPhone,统一还是差异化?

Android平台和iPhone平台虽然都是潜力无限的触屏系统,但是iPhone的设计风格已经成型,设计规范也得到了广泛的认可,Android平台却有很多的不确定因素,可以这样设计,也可以那样设计,没有硬性的规范,也没有顽固的用户习惯。并且由于平台具有开放性和延展性,Android系统不像iPhone,只有320*480一种分辨率、一个home键,而是根据硬件厂商的定制,可以有多种分辨率、可以有全键盘、轨迹球、五个硬件键盘或没有硬键键盘。

一、Android和iPhone的异同

1、分辨率

Android手机屏幕大小不一,有480×320, 640×360, 800×480,怎样才能让App自动适应不同的屏幕呢?其实很简单,只需要在res目录下创建不同的layout文件夹,比如layout-640×360,layout-800×480,所有的layout文件在编译之后都会写入R.java里,而系统会根据屏幕的大小自己选择合适的layout进行使用。

iPhone手机则只有480*320的分辨率

2、硬件特征

Android大部分是电容屏,可带全键盘(G1),有轨迹球,有home键、menu键、拨打键、挂断键、search键、返回键(G3等),也可以没有任何按键(乐phone)。也有LG、MTK出的千元出头的电阻屏的Android手机。用户除了跟软件交互之外还要跟手机交互,比如调出菜单、调出搜索都需要接管默认按键的服务。

iPhone是电容屏,只有单一Home键。

3、触控方式

Android和iPhone都习惯向右划屏后退,向左划屏前进的操作。都是多点触控,可用两个手指完成缩放。不同点在于Android有长按之后弹层的操作,iPhone有向下拖拽刷新的操作。

4、提醒方式

Android和iPhone都有弹层提醒、声音、振动、闪光、气泡数字提醒。Android还有通知区域提醒和轨迹球闪光提醒。

5、产品形态

Android的title区一般很窄,标签栏和工具栏可以在下边,也可以在上边,还没有统一的设计规范,所以这是Android平台让人郁闷的地方。

seesmic Android和iPhone要做统一设计还是差异设计?sinaweibo Android和iPhone要做统一设计还是差异设计?

iPhone的title区很宽,因为title会有操作按钮,同时利用title区域进行操作指引,title的左边经常是返回、编辑、设置之类的,右边经常是新增、撰写、搜索之类的。让用户明确层级之间的关系。

工具栏一般在下面,以图标加文字的方式呈现出来。

 Android和iPhone要做统一设计还是差异设计?726473 Android和iPhone要做统一设计还是差异设计?

6、硬件交互

Android和iPhone都可以通过传感器实现一些交互,比如摇晃手机刷新页面。

二、可否把iPhone的交互逻辑沿用到Android上?

1、title区的操作按钮

这个是可以移植的,虽然用户一开始会觉得比较“苹果”,但是逻辑上是没有问题的。不过作为优秀的设计师,在iPhone上都会设计的比较有风格,在Android上更不会模仿一个别的平台的风格。这么做无非是为了统一设计风格或者一种快速覆盖的过渡方案罢了。我们可以看到,Android上已经有一些软件是采用iPhone上的交互逻辑了,比如Android平台上腾讯微博客户端和开心网客户端:

tengxunweibo Android和iPhone要做统一设计还是差异设计?kaixin001 Android和iPhone要做统一设计还是差异设计?

2、标签栏和工具栏

Android原本的设计思路是由于手机下端有物理按键,所以把标签栏放在软件界面的最上端,操作放在menu里,但是由于一些软件的操作实在是使用的比较频繁,所以不得不拿出来放在下边的工具栏里,上边的标题栏和下边的工具栏同时存在比较占空间,于是又通过整合把tab和bar整合到一起放在最下面,也是可行的,如上图的新浪微博客户端。

当然也有极简化的设计,就是标签栏和工具栏都不要,只要一些操作图标和menu支持,如下图的两个Android平台上的twitter客户端。

twigee Android和iPhone要做统一设计还是差异设计?twitter Android和iPhone要做统一设计还是差异设计?

三、Android平台上独有的设计

1、软件界面上是否还需要menu?

按键menu和软件界面上的菜单要保持一致。由于已经提供了menu和back按键,很多产品设计人员都在讨论是否Android系统上的产品,界面上是否不再需要提供菜单、返回了。但是我们假设这样几种情况——

①物理按键坏了,menu和back不能按了,是否软件就不能使用了?

②您使用的是Ophone或乐Phone,是否因为没有menu和back,软件就没有菜单了,还是说再开发一个OPhone、乐Phone版本?

③广大的低端用户群体也许根本不认识menu这个词,不给他提供个界面上的“菜单”,他也许一辈子不回去按硬件“menu”

④触控操作和按键操作感觉是很不一样的,手指在触屏上滑动的时候,忽然要移动到物理按键上按一下按键,会不会有种中断操作的感觉?

所以个人意见,界面上的菜单要和按键menu保持一致,提供两个入口。

2、长按操作

Android有一个iPhone不具备的高级功能,就是长按操作。很多快捷操作是隐藏在长按操作里的。当然,个人意见,这个长安操作也是作为第二、第三入口,而不能是某个功能的唯一入口,比如添加书签、新窗口打开、复制粘贴等操作。

changan Android和iPhone要做统一设计还是差异设计?

四、总结

简单的说,我个人认为iPhone上的交互逻辑是可以部分移植到Android上的,但是如果时间、人力、资源充裕的话,还是要做完全符合Android平台的设计,而且尤其要注意跟物理按键的结合、Android上独特的操作(长按)、Android消息提醒方式(提醒区)等等。反向来说,iPhone的人机交互规范已经成型,Android的交互和设计要想移植到iPhone上,是有一定难度的。

相关话题:移动设备的交互和设计 源地址:http://elya.cc/%e6%89%8b%e6%9c%ba%e4%ba%a7%e5%93%81/607.html

“惊喜”“愉悦”——Maemo 5 的用户界面设计的理念

作为 Nokia 寄以厚望的一个系统,Maemo 承载着 Nokia 在高端手持上的创新理念。无论是从封闭式平台到开放式的平台的跳跃,无论是从一个以厂商为核心的到以社区为中心的重点转移,还是一个用户参与程度更高的更具触控魅力的 UI 界面。

我们找到了一个关于 Maemo UI 设计理念的一个演示(Via @Rabbitrun84),它可以让我们更深入地了解到 Maemo 的界面元素和取向。

 

显然,Maemo 5Symbian 这种着眼于按钮式或是数字键盘式的设计取向已经大不相同。但是它们的核心精髓,仍然一脉相承。Nokia 的核心设计理念是以人为本,强调的是简单,直觉。我们在 Maemo 5 上看到这个传统的创新和发扬。

Nokia 把 Maemo 5
定位为“简洁,愉悦,易于理解,惊喜”,愉悦和惊喜无疑强化了它具有的“精神”特性——不那么中立,更具人性和亲和力。这点和 Symbian
有很大的不同。Symbian 强调的是实用、严肃(中立),在小屏幕界面,适合按钮使用的内敛和直接的界面设计,整体的格调与 Symbian
系统在极大的硬件制约下要实现更大的效能的哲学是一致的,你看不到什么花哨的界面。

而在 Maemo 5
的界面设计中,一方面得益于大屏幕的展示和支持,一方面得益于手机业界对更为简洁的设计的共识和趋向,更强调了界面的空灵和喜悦感。即便在 Maemo
5 N900 的前辈,在 2004 推出的同样支持触控的 7700/7710 身上,我们也很少看到相似的地方。

通过对手指触控的支持及 UI 界面一致性的考虑,也出于对加速设计和开发进程的考虑,Maemo 5 尽可能减少了
UI 界面元素。它更强调了 UNIX 的哲学“专注专美”(Do one thing and do it well
)。界面元素的优化,带来的是更大更适合手指点击的布局,更少的菜单式选项。这种变化带来的是减少了 50% 的界面元素冗余。

另外有一个明显的变化,是对界面流程的安排,或者说是对多任务界面和操作的一种更好的创新。我们可以从 iPhone
和 Palm pre 说起。这两个手机的界面设计,整体上仍是对传统手机界面的一种颠覆。iPhone
的界面设计更多强调取舍,多点触控技术的引入让它的界面简洁,合理而又易于使用,但是它没有更多地对多任务进行考虑。而 Palm Pre
卡片式的任务窗的创新布局,它的重要意义不仅仅在于是单纯的多任务界面切换,还在于充分结合了单手便捷操作。

Maemo 5 走的是另外一个更为朴素的方向。它本质上仍是一部
Tablet,以双手的操作为主,适应于更大的屏幕(800*480 3.5
寸屏的显示)。所以在多任务界面设计上,更强调全局视角和一览界面,把重点放在直接查看,调整内容的显示上,最终,设计师们采用了N行线状布局。

从之前的 N900 视频,我们频繁看到平铺式的多任务窗口 dashboard 状的显示。之前拿到机器的评测者对这种与(iPhone)一键返回及与 Mac OSX 的 Exposé 操作几无二致的安排(http://en.wikipedia.org/wiki/Expos%C3%A9_(Mac_OS_X))也赞不绝口。是 Apple 的设计师潜移默化地在影响着行业内的设计师们吗?

或许,这个“惊喜”和“愉悦”还来自于 Symbian 多年来的“铺垫”,—— Symbian
那种层层菜单式的繁琐操作,我们已经受够了。这方面的还有一个设计恶例就是 Windows mobile ——
都说这个系统就是“无敌菜单和无敌沙漏” —— 这也正是我一直不喜欢它的原因,Windows mobile 没有正常理解到手持和 PC 的区别。

另外,从系统的角度上,Maemo 5 还高度强调整合,各类的服务,通过整合整体融入系统的界面和功能,包括 VOIP,IM,社交分享,媒体文件的处理,包括各类手机基本功能及服务如联系人,网络连接的整合,这也是简洁界面的一个重要环节。

“Do one thing and do it well”。

开源社区帮 Nokia 打造了 Maemo 5,在群智的社区开发氛围中,Nokia
还是非常正确地找到了引导的方向。虽然与 iPhone,Palm Pre 界面相比,Maemo 5
仍略显粗糙,北欧的的实用原则仍然萦绕始终。但是 Maemo 5 走出了它的第一步,它也确实如它的宣扬那样,带给了我们”惊喜“ 。

源地址:http://www.ifanr.com/5001

返回顶部