Experience10  Creative, Develop, UX, Wireframe, Productivity

HTML5 Boilerplate 开发模板

什么是HTML5 Boilerplate?

HTML 5 Boilerplate 是一个由业界众多大拿发起的一个开源开发模板,来帮助大家快速使用HTML5技术开发网站,同时兼容老式浏览。HTML5 Boilerplate并不是一套框架,他仅仅是一套模板。大家可以把他当作自己的新项目模板,在此基础上建立自己的项目。

如何什么HTML5 Boilerplate?

HTML5 Boilerplate志在建立一套简单的模板帮助大家快速的进行开发,一般来说下载了这套模板后,便可以在其上进行修改,但以下一些内容会有助于帮助你理解如何更规范的使用这套模板:

  • HTML
    • index.html中已经内置了Google Analytics的分析代码,你只需要替换其中的analytics ID为你自己注册的网站ID即可
  • CSS
    • 建议你的所有网站CSS放在style.css之中,并置于标有’Primary Styles’的注释之后
  • JS
    • plugins.js
      • 此文件的目的用于提高Javascript脚本文件的加载速度。相对于原来使用链接将多个文件加载到HTML文件中而言,建议将其它的所有Javascript的插件的minified代码粘贴到这个文件之中。可参见这里的FAQ
    • script.js
      • 同上面的js一样,所有的你自己的网站脚本应该放置在这个文件之中,当然这并不是适合大型项目开发的解决方案,作为小型项目和原型而言 ,可以把你的脚本写在这个文件之中
  • 服务器端配置
    • 模板中已经准备好了一些用于服务器端配置的配置文件,如.htaccess, web.config, nginx.conf & mime.types, lighttpd.conf等文件,你只需要在上面做相庆的定制即可
  • 其它
    • 你可能需要将模板目录下的各个favicon文件换成自己的图片
    • 还有针对iOS的apple-touch-icon.png图标
    • 默认提供了一个404.html
    • 如果有一些页面你不想被搜索引擎找到,就将其添加到robots.txt之中
    • 另一篇有用的文章, Getting Started Using HTML5 BOilerplate

November 11th, 2011 at 11:05 am by . 0 Comments
filed under HTML5

WP7新书已经上市

和微软的MVP们合著的一本WP7的书已经上市了,在里面负责了二个章节,还有封面设计。欢迎大家捧场。

Windows Phone 7应用开发指南

http://product.china-pub.com/198693

October 18th, 2011 at 1:33 pm by . 0 Comments
filed under UX & Design, WP7

20个用于WP7原型与设计的工具

列举了20个用于原型与设计的模板和软件插件,其中还包含了年初我们团队制作的一个omnigraffle的Stencil,不得不支持一下

http://microsoftfeed.com/2011/20-free-prototyping-mockup-and-wireframing-resources-for-windows-phone-7/

 

September 23rd, 2011 at 5:43 pm by . 0 Comments
filed under UX & Design, WP7

如何成为网页设计专家

你是否想与客户侃侃而谈让他们认真的对待你的观点,因为看上去你就是个专家?如果你的答案是肯定的,那么恭喜你,有许多人与你一样。如果希望有一天能真正做到,那么你需要退后一步再想想,成为专家对你来说为什么如此重要?

为什么我们都希望看上去像个专家

我们都希望成为专家是因为我们希望我们的观点能够被其它人认真对待。被人尊敬,让自己更有价值,也为了满足自己的自负,当然,最主要的是我们希望自己能成为最棒的,同时有自己独特的有力的行事方式。

无论如何,就像我们接下来要讲的,成为专家绝不仅仅是让别人听从我们。如果我们仅能做到这点并不能真正意义上达到我们的期待和被其它人所认可。

让人尊敬并不是我们成为专家的唯一期望。有些人认为也许专成主家会让我们有更多的工作机会,以及更多的话语权。但不幸的是,有很多情况下,许多专家并没有比人懂得更多,甚至在他们熟悉的领域,并没有获得更多薪水。成为一个小众的专家对职业上的提升并不大。

尽管如此,被视为专家的能够帮助我们与客户工作,并让我们有创造更高质量工作的潜力。那么,如何让我们成为专家呢?

如何让我们成为专家?

在 《异族》(Outliers)一书中,作者Malcolm Gladwell建议成为一个专家(高手)在通常情况下需要花费近10000小时的练习与实践。对于大多数全职工作的网页设计师来说,这相当于整整4年不休假的8小时并有成效的工作。

我觉得10000小时的值得怀疑之处,我能看见将这种理论到一些类似于乐器训练,或是体育运动中也许会有效,但我不确定将这种理论应用于其它如网页设计。如10000小时的Photoshop使用经验不会让你成为网页设计专家,及充其量仅仅让你成为一个Photoshop高手。

当然,Gladwell的说法在某些程度上是有一定道理的。成为专家,你必须需要时间与经验。

Facts in How To Become A Web Design Expert

很多人宣称自己是专家,但只有仅少数的人真正投入了数千小时的努力。图片来源 Brett Jordan.

时间和经验

无需怀疑的是专业技能必须通过花费时间并持之以衡的练习来达到。绝不是一夜灵感闪现,没有任何捷径去达到高水平的技能。随着经验的不断丰富,学得越多,越会发现自己更加需要学习。

当然,你可以说网页设计领域的变化非常之快,四年前的知识在现在几乎毫无用处。但是我不觉得这是个问题。在我的经验之中,尽管技术在变化,但使用技术的人不变。在开发一个网站的时候永远是在与用户或是用户体验中的细节在打交道。同时,数年的经验能提高你解决问题的能力。尽管挑战是全新的,你所解决问题的方式将会越来越熟练。你积累的理论知识以及工作流程使得你更出色。因此,数年前学到的知识在今天仍然用得上。

偏执般激情

我并不是说经验就是一切。例如,我不觉得你应该花上数年的时间给某人朝九晚五打工就能获得足够的经验。相反,永远寻找值得学习的内容,在你的企业中富有创造性的工作,最重要的是需要有激情来对待你所注的事物。

以我自己来说,我的事业从IBM开始,数年后我觉得并没有在技能上有多大提高。许多在我身边的人并不能充满激情的工作。没有激情,就没有学习新东西的渴望和推动力。

我相信对网页设计拥有偏执般的激情是成为专家所必需的。

另外,我IBM的同事们从不愿承担风险。而勇于尝试以及偶尔的错误都会是成为一个专家所必须经历和学到的

犯错误的重要性

成为一个真正的专家不能回避一个事实:你必须愿意去犯错误,而且犯非常多的错误。

不幸的是,我们并不是生活在一个表扬失败的社会文化之中。我们需要成功人士。但成功并不光是灵感闪现,而是努力和汉水。Winston Churchill说过:

事业上的成功和成为一个专家不光是需要你经历过一两次失败,而是不停的经历。

失败是我们成过专家的一个重要环节,Charles Willson说过:

不经历失败,我们不能学会做事情的最佳方式。从他人的失败中也可以学到很多,但没有什么比得上我们自己亲身经历过的失败。

我们需要战胜我们对失败的恐惧。当项目中出错时,人们总是会本能的有二种反应。有些人不停的纠结其中,否则问题的存在,不愿意接受投入但不产出的结果,这时候重要的是学会什么时候放手。另外一些人则尽可能的逃离这些问题假装其从来没有发生过。但这样意味着你永远不会从你的错误中学到东西。我们需要在最后花上一些时间去审视我们项目中的错误,并从中学到东西。这个过程很难,特别是当你与已经不郁快的客户打交道的时候。

而从没有经历过失败的人,他们可能胆心不愿去尝试,担心他人的批评,或在一开始根本就对成功没有任何渴望。

怎样确定你已经是一个专家

有时候并不是人人都认同你是一个专家。光有足够的知识是不够的,我们还需要有人认同我们所获得的知识。

这可能是你会经常经历的问题。你已经完成了你的10000小时的学习,也从错误中学到了。尽管如此,你的客户或老板并没有认同你所累积的知识与经验。

如何说服他们你已经是一个专家了,应该认真考虑你的建议呢?

展现一些谦虚

第一步要做的是不要过份表现我就是专家的态度。真正的专家往往是最后一个称自己为专家的人。事实上,专家往往会积极承认他们的知识的有限从而带动其它人更好的接受他们的观点。

人们往往会怀疑自称专家的人。让你自己的知识替你说话比起主动引起别人的注意更有效。直接说自己是专家显得并不明智,你可以用多种不同的方式来暗示这一点。其中很重要的一种方法是使用情景。

用情景展示你的优点

当你把一些现代艺术绘画从画廊中拿下,放在小学时,很有可能被误认为是小孩的涂鸦。因为环境影响了事物接受时的辨标准。想象一下有时候经理们会非常认真的听从某些外聘顾问的观点,而忽略自己员工的观点,尽管二人说的都是同样的事情。因为付了顾问更多钱,所以他们的观点冒似更加有价值。

你也许没有办法提高你的劳务价格;尽管如此,你可以改变你的表达方式,让人们提高对你的价值认同。

就像画廊中的作品一样,你的专业技能在某些合适的场合下会被认同。例如,相对于在会议室里发言,或是只在自己工位上表达观点来说,在会议室里可能会更加有份量一些。同样,如果你的专业知识来自某些书本,这会比你在会议室里夸夸其谈更加有价值得多。

Paul-boag-fowd in How To Become A Web Design Expert
作为一个专家我经常犯错误,因为我站在舞台上. 照片来源 Marc Thiele.

并不是人人都有机会出书或是在会议上发言。如果这样的话,也可以自己出书,或是做一些播客、博客或是参与一些开源项目。像专家一样展示自己比你想的要简单一些。

如果获得会议演讲或是写书的邀请的话,意味着你的技能已经被某些人认同。会议组织者和出版商就好像是质量保证,如果他们认同你,那么人们会在开始就认定你所要讲的事情。

当然,情景并非一切。更重要的是你所表达的观点和如何去表达你的观点。

风格和主旨

写书、演讲、博客或播放比起简单的交谈来说更有效果。因为这些比起交谈来说,表达结构和方式更加缜密严谨。

表达自己的重要性。当有些事情对你来说非常明确时,其它人可能不这么看,特别是一些重复出现的问题。当客户让你把他们的Logo变大一些或是多些留白时,你必须要精心对待这些小事。你会很容易不耐烦或是无所谓因为这样的事情总是在发生。但是细心的考虑你的应对方式和对策会使得你更具说服力。除了主旨,你辨论和交流的风格同样重要。专家应该充满信心,交谈时富于表达和权威性。听众并不会因为你的意见不同而不爽,只要表达得当,他们会转换他们的观点。如果你想被认同为一个专家,了解你自己、放松并充满信心的表达。

不幸的时候,有时候问题还是发生,因为另一方早就准备好了自己的观点。

过多偏见

在你现有的老板和客户前开始充当专家的角色可能是个挑战。特别是你以前的曾是初级员工,他们对你的态度不会一夜改变。幸运的是,你可以做一些有效的工作来帮助你转换角色。

第一,为你的观点提供有效的证据。当你老板担心你的提议上不了台面的时候,给他看看有效的证据,如下面这个滚动条行为报告。

Unfolding-the-fold in How To Become A Web Design Expert

引用一个研究结果能够增加你的内容的可信度。

其次,引用一个已有的专家将有效支持你的观点,例如有人曾写过有关滚动条这个案例的相关报告

这些技巧不光能支持你的观点。同时他们能够充分的表现你有广泛的阅读与研究。同时,你在做这些的同时也加了自己的可信度,像专家一样思考问题。你离专家已经一步之遥。

当然,没有办法能快速的消除偏见。这对于总是与相同的人工作的人来说非常困难。但通过一段时间,有效的展示自己的专业知识和使用这些技巧,他们最终能改变他们对你的看法。

能力越大责任越大

本文的关注的是有关如何成为专家,在结束前,我想说说当你真正成为专家后意味着什么。

当你从客户,同事及老板那里获得尊敬后,还会怎样?成为专家不光光是一段自我之旅。更多的是有关为他人服务。当你成为专家后,你能更好的为你的客户服务,为你的公司提供更多价值,促进你的行业发展。如果只是想获得大家的爱戴与尊敬,那么你永远不会真正达成你的目标。人们会意识到你可能只是在满足自己的虚荣心从而忽略你。

也就是说,必须认真对待我们的工作。如果不认真对待,好网站可能变差。我确定你肯定有过与人分享过有关网站越做越烂因为别人没有听取你的观点。但是多讲讲你的一些有关说服老板和客户,认真的对待你的观点的故事,可能更有益处。

封面图片版权: Aural Asia

原贴出处:

http://www.smashingmagazine.com/2011/08/25/how-to-become-a-web-design-expert/

翻译:

http://experience10.com/

 

August 31st, 2011 at 3:17 pm by . 0 Comments
filed under UX & Design

留意你的”短线”与“破折号”:文字排版的规则

从文字排版上便可以很容易区分设计师是否是一个新手或是老岛。一个经验丰富的设计师能在看设计的时候察觉创作者是否懂得如何排版。排版设计绝对不是设计师内部的谈资,而是几千年以来从语言书写中得来的一种累积,排版使得信息的沟通更高效和优雅。

而在互联网上进行排版设计时我们需要考虑到一些全新的挑战和限制。下文中的一些规则将会帮助你更清晰的使用文字排版。

设置文本内容

优秀的排版设计用于保证信息的传达,而有关信息传达的基于在于文本主体的内容-简明的文字块。以下是几个常用的方式寿命你让你的文字块变得更清晰明了。

段落前缩进还是空行?

在一段文字的结束和另一段开始前,你可以使用首行缩进,或是插入一个新行。但是不能同时使用这二种方式。

Paragraphs in Mind Your En And Em Dashes: Typographic Etiquette

首行缩进
首行缩进的时候应该缩进1em(em是指一个当前字体的大小,如果文字大小是12px,那么1em=12px,这是一种相对单位)。文章或篇章首段不允许缩进,在一个新篇章(Section)开始时,是不允许首行缩进的,因为这段文字将会是这一页或这一篇章的第一段。

段间空行

二段之间的一个 1em的空行(如同在输入时按Return键二次)用于表明段落关系其实是多多有余,0.8 em的距离将会更加合适

Ragged-right in Mind Your En And Em Dashes: Typographic Etiquette将文字设置成左对齐使得文字更利地阅读。因为浏览器所提供的排版控制比较有限,等距调整文字会让文字块之间有太多的间隙。

左对齐 (右侧不齐)
当文件左对齐时,每一行都会很自然的换行,同时造成右侧产生不对齐的效果。这样能够更好的进行阅读因为眼睛根据每一行的长度不一而区别一行的结束。另外一些研究也表明读者更喜欢左对齐的阅读方式。在左对齐的情况下,不应该再使用断字处理,如果再断字就违背了右侧不齐的初衷。

避免等距文字调整
等距调整让每一行的横向长度一致。而正是因为每一行的长度相同,使得字母的间距以及单词之间的间距变得奇怪。这使得文本丧失了整齐的肌理感。

高级的桌面排版程序(如Adobe InDesign)有一些非常成熟排版系统来做等距调整,使得在做等距调整时,不会产生过大的间隙。它使用了一组处理程序用来综合计划字母间距,词间距,断字和字符缩放(非常细微的调整某些字母的宽度)来保证调整后的文字依然有很强的肌理感。

由于CSS中没有断字处理。除了一些Javascript库(JavaScript libraries that handle hyphenation)进行断字处理,以及CSS 3的text-justify属性之外,浏览器并没有非常好的系统来保证文字在等距调整后的渲染显示。这使得在网络上的文字等距造成很多大的间隙,并不利于阅读。

当使用最佳的行阅读长度为(50-80字符,或8-15个单词)的情况下,如果使用等距调整的话,几乎总能产生过多的间隙问题。在网络上应避免使用等距调整。

每句中断后一个空格,而非二个

很少有人讨论在句末后应该放置一个或是二个空格的问题。

从维多利亚时期这个传统一直保留至今。之所有有这个传统是从打字机发明之时。因为早期的打字员使用Monospaced字体(即二个字母间的距离永远是一样的),因此打字员使用2个空格用来增大句与句之间差别。而现在计算机和字体已经做到了按比例的字母间距(即字母间的距离由字型决定,并非完全一致),这样的一个传统看来已经过时,使得文本间有太多的间距感。

One-space in Mind Your En And Em Dashes: Typographic Etiquette

一个空格足够区分二个句子,同时还能保证文本块的连续性。

如果大家还怀疑这个结论的话,考虑如下的情况:一个新句子的开头,已经由一个句号,一个空格以及一个大写字母明示。再加入一个空格使得在阅读时在二句之间挖了一个大洞一样,中断了读者的阅读。

打字员也许希望继续使用二个空格,但排版设计者应该不再使用。

合理使用横线(破折号)

大多数字体都拥有二种不同的横线破折号:en横线(–, –,相当于小写的“n”的宽度) 以及一个em横线(—, —,宽度相当于小写的“m”)。不要与hyphen连字符(-)混淆。

Dashes in Mind Your En And Em Dashes: Typographic Etiquette

连字符

连字符与破折号由于形式上类似,使得在使用的时候经常混淆。某些字体如同Adobe Garamond Pro特意让连字符保留着传统的样式。这种连字符看上去像是不轻易的手写体;有时候你还会发现使用连字符代替减号;不管怎样,在大部分字体是都保留着较长的字符样式用于表示连字符。

尽管连字符看上去很像破折号或减号,但他还是一个符点符号而非数字符号。他应该使用于字母断行连接时。在网络上并不需要有过多的担忧,因为在浏览器中并有标准的连字控制功能。因此连字符常常用于特殊的组合(如“fine-tuned”),或是电话号码之间以及其它一些少有的场合(更多细节可见Wikipedia)。

短破折(En)与长破折(Em)

在 The Elements of Typographic Style一书(这是一本非官方的现代排版设计宝典)中。Robert Bringhurst推荐使用en左右加上二个空格。这在视觉上将不会像em一样引来很大的中断感。而在《芝加哥样式手册》(The Chicago Manual of Style)中则推荐使用em破折。为什么要与芝加哥样式手册相违背呢?理由是样式手册中考虑的更多的是关于标点符号的用法,而不是文字排版。短破折左右向空格的效果与不加空格的长破折的效果一致,但是从排版的角度上说是一种轻微的中断。当我在写书时我与我的编辑有关于这个问题的很大的争议。

另一种用法是使用二个连字符来表示破折号,这一做法同样来源于打字员时代由于打字时的为了视觉上对文本进行有效的区分。而现今的丰富的字处理技术使得我们无需再这样处理。

同样,短破折(en)用于指示一个数字范围(如”7-10天”),当这样使用时不需要左右加空格。

使用聪明引号(Smart Quotes)

当你在键盘上键入 “号时,你所输入的并非真正意义上的引号(除非你在字处理程序之中进行了自动格式化)。真正的引号我们称之为“Smart quotes 聪明引号,”左右引号必须形成一个开始和结束的意义。如果使用单引号,则是‘’。像WordPress一类的程序有时候会自动转换你的引号到smart quotes或使用其它插件来处理。

Smart-quotes in Mind Your En And Em Dashes: Typographic Etiquette

Smart Quotes 现实中的情况

CNN使用的是笨引号(dumb quotes),看上去沉闷不亲和,而The New York Times使用的是smart quotes,看上去整洁成熟:

Smart-quotes-cnn-nyt in Mind Your En And Em Dashes: Typographic Etiquette

Smart quotes是如此的生动以至于可以用作装饰使用,例如Jason Santa Maria博客中的这种用法。

Smart-quotes-santamaria in Mind Your En And Em Dashes: Typographic Etiquette

度量单位撇号

同样,作为度量单位时使用的撇号,也应该使用smart quotes的形式如下:

Prime in Mind Your En And Em Dashes: Typographic Etiquette

很多桌面出版程序有时候会自动(错误的)插入一些不合适的符号使用,这些都可以在程序的设定中修改,但是最好的办法就是从原始的文本编辑器中键入最合适的符号,再copy/paste过来。

合理的数学符号

有时候因为匆忙的缘故,我们常常使用错误的数字符号。例如上面我们提过连字符不是减号(−, −)。另外x并不是乘号(*)(×, ×)

Math-symbols in Mind Your En And Em Dashes: Typographic Etiquette

正确的分数表示不光是加分数符号,还会使得字符更加易于识别,使用普通的斜线(1/3)并不如分数符(½)看上去更酷。

当然有时符号并不能够完全满足你的要求,如有时候98¢与106° F描述时,你也许会更倾向于使用“cents”和“degrees”。

表述更多时总是使用省略符

有时当显示更多内容时,大多数情况我们使用三个句号来表示(…),但很多字体其实已经有了专门的字符(…, …),这些字符的设计更漂亮,没有过多空格。尽管芝加哥样式手册中推荐你在使用三个句号时还在其中加上空格(. . .),但是任何一个排版设计人员都知道这看上去使得文本中断得太多。某些排版设计师倾向于使用小一些的空格间距(. . .)。总之尽量不要在句号间使用完整的大空格。

音标符号并不过时

Diacritics in Mind Your En And Em Dashes: Typographic Etiquette

在拉丁语系的排版中还会用到音标符号,Mac OS X下,按往Option同时按e,然的再按任意一个字母,你将获得该字符的升调符号(é)。如果使用Option同时按u, i 和或~你将获得其它音标符号。

字母连写

在早期铅字印刷时代,由于每个字符是一个元素。因此很难让二个字符靠得很近,例如“fi”,由于f的顶部向右伸展过远,同时i顶部的小点使得这二个字母无法继续靠近。但现在大多数字体(尤其是经典字体如Adobe Garamond)拥有连字功能能够将字母的型状进行连接。一些现代字体如Helvetica也拥有连写功能但是效果非常的细微。

下面你可以看到有关字体中的连字效果。在Adobe Garamond中这种效果要比Helvetica中更为明显。Ligatures in Mind Your En And Em Dashes: Typographic Etiquette除了“fi”的情况外,还有一些类似的情况会发生在“fl,” “ff,” “ffi” 和 “ffl.”之中。以下你可以看到Apple在这方面的设计使得“ffl”在“iPod shuffle”中显得非常漂亮。

Shuffle-ligature in Mind Your En And Em Dashes: Typographic Etiquette

使用连字技术

当然,每次需要连字的时候输入特定的连字字符是不切实际的。如果你这么做了也有可能在某些字体条件下使得连字无法正常显示。幸运的是,像Ligature.js这样的jQuery插件能够自动的帮你判断需要连字的地方并进行处理。

但需要注意的是:即使连字字符可用,你也有可能造成用户搜索时的困扰。当前,IE浏览器以及一些基于WebKit的浏览器如Chrome,Safari支持连字字符的搜索功能。而Firefox则不支持。

CSS3的文字连字属性font-variant-ligatures

CSS中所支持的连字属性不会影响HTML中的代码,浏览器将会完全支持搜索功能,但这需要所有的浏览器都开始支持CSS3才能开始使用这一属性。

所以,考虑到这些因素,在内容上使用连字并不是一个最好的选择,而标题或头条显示中也许可以部分应用,也能够让用户感受到更明显一些。

合理使用

显然,继续学习与应用这样一些文字排版的技巧看上去非常乏味。幸运的是,大部分网络上的内容管理系统都有一些插件可以帮助我们,另外一些新的CSS3的属性也能帮助我们提高我们排版上的工作效果。

但是综合所有的情况去考虑设计和制作,性价比问题是首要的。你必须考虑哪些细节你需要实现而不会造成后续的麻烦。哪些是文字排版中最最重要的,然后你再在你的项目中做明智的决定去应用这些。

其它资源

你也许会对下面的一些资源有兴趣:

How to Type
学习如何在电脑上键入这些字符。The Elements of Typographic Style, Robert Bringhurst
Amazon上的一本非官方现代排版设计师的宝典。这本书中拥有许多你可以想象的有用的排版建议。The Elements of Typographic Style Applied to the Web
有关Robert Bringhurst’s 经典图书的针对网络版本。本文根据David的新书Design for Hackers: Reverse-Engineering Beauty中的一个章节写成,本书将在2011年9月发布。

原贴出处:

http://www.smashingmagazine.com/2011/08/15/mind-your-en-and-em-dashes-typographic-etiquette/

翻译:

http://experience10.com/

 

August 18th, 2011 at 6:47 pm by . 0 Comments
filed under UX & Design

Kulercream@marketplace

Kulercream是我们创意团队自行开发的一个小型Windows Phone 7 应用,也是我前阵在写教程的一些内容。这是一个基于Adobe Kuler的API来帮助用户搜索有用的配色组合。这只是一个小小的尝试,功能也非常简单,但帮助整个团队积累了不少有关Windows Phone 7 设计方面的经验。有兴趣的,有WP7的可以下载试试

August 11th, 2011 at 11:08 am by . 0 Comments
filed under WP7

WP7上的Image使用技巧

部分翻译摘录自swick的blog

如果经常开发App,WP7上的Image显示造成的内存增大问题一定会遇到,以下是一些使用技巧帮助减少这类情况的发生:

JPG vs. PNG

如果不是必须要使用透明图片,JPG是最好的选择,WP7的JPG编码速度要大大快于PNG

Resource vs. Content

将图片(或其它种类资源)用何种类型进行XAP编译绑定的时候。Resource和Content有很大的不同,Resource会绑定到Dll之中,在显示图像时很快,但加载整个XAP包时很慢。而Content会使得加载XAP应用时很快,但加载图像时稍慢一些。根据情况选用,使用方法:

Content: <Image Source=”/ImagesAsContent/smiley1.png”/>
Resource: <Image Source=”..\ImagesAsResource\smiley3.png”/>

Async vs. Sync 异步或同步加载图片

BitmapImage.UriSource = uriSource; // 从URI中读取,异步加载

BitmapImage.SetSource(stream);     // 从流中读取,同步加载

图片缓存

如果内存没有被回收,可以考虑主动释放:

BitmapImage bitmapImage = image.Source as BitmapImage;

bitmapImage.UriSource = null;

image.Source = null;

自定义编码

如果所需图片尺寸不需要很大,可以将来源进行重编码,使用PictureDecoder API可完成这个操作如下:

image.Source = PictureDecoder.DecodeJpeg(jpgStream, 192, 256);

May 3rd, 2011 at 11:17 am by . 0 Comments
filed under WP7

WP7 性能提示

一组笔记:

  • 永远在真实设备上测试性能
  • 不要使用WebClient来做网络数据访问
  • 尽量使用静止的背景替代Panorama的滑动背景
  • List中尽量使用Visualize stackpanel替代StackPanel
  • 尽量使用简单结构的用户控件,如果需要成组元素,考虑一下一个元素是否可以替代
  • 不要在XAML中使用太多Converter
  • 图片可以设定宽高,而不要让系统动态的计算
  • 不要在刚开始就加载Bing Map
  • 图片可以设为”Content”以加快程序启动速度
  • 如果页面不常用,可以放在另一个Assembly之中

April 29th, 2011 at 4:00 pm by . 0 Comments
filed under WP7

从iPhone Tab Bar学到的…

在过去的几年中,iPhone成功的使得Tab Bar标签栏导航方式在移动设备上流行起来。Apple将tab bar和其它许多的设计原则整合到了他们的人机交互指南(HIG)中——但有些疑问他们从来没有回答。在过去的几年中我一直从事交互与图形设计,在这篇文章中我将分享一些我的想法有关什么是该做的,什么是不该做的。

第一课:魔法数字是5

这对从事iPhone设计的人来说不是新鲜事。自从iPhone的屏幕宽度为320点(dots)开始(1点=2象素),Apple设计了标准的tab bar不能超过5个tab,每个tab包含其图标与可读的文字。

5个之后会如何呢?当然,我们可以采用使用”More”标签的方式放进标准的tab bar。但是我还是推荐尽可能的去避免”More”标签。为什么呢?

  • 首先,你自然会损失掉一个tab
  • 你将记录”More”标签下功能的这个重担交给了用户。如果你的”More”下面的内容达到5个时,问题更加突出,这些加重了用户的认知负荷能力(cognitive load)
  • 一些测试表明用户根本不知道”More”功能的用途,而且根本不会影响用户(来源:Tapworthy – Designing Great iPhone Apps by Josh Clark

当然,当你在各种视图下工作、数据排序以及分类时(例如iPod),使用”More”标签的方式来替代让用户自定义标签会更合理一些。因为自定义标签的这种行为在某些情况下只适用于高级用户。

第二课:询问用户的意见

这种方式在你的设计过程中会非常有帮助,但标签的分类和级别应该更接近于你目标用户群的想法。当我们做这种研究测试时,记得事实1中提到的内容,不断思考所有的内容是否能分类到五个标签之中。如果不行,请问自己是不是非得用tab bar作为导航方式呢?

第三课:花多的时间在图标和文字上

一些用于图标设计及文案设计的点子:

  • 确定图标和文案能真实的标签这些标签下所要进行的行为。最让人闹火的事情莫过于明明知道程序中有一个功能,但却不知道在哪个tab下面
  • 避免一些语义上无关的设计,例如一个笔刷的图标但下面却写着“报表”。可参见 picture word interference
  • 如果你要创建另一个“我的收藏”的标签,不用试着重新设计星形图标或改变文字“我的收藏”(Favorites)。虽然重新识别一个事物的成本低于回忆事物,但是我们应该帮助用户减少认知负荷(Jacob Nielsens Ten Usability Heuristics)
  • 避免出现重复的文字。例如,想象你需要创建“我的图书”“我的杂志”“我的CD”这样的情况。根据Stroop effect(斯特鲁普效应)的解释用户会主动忽略掉这些文字。
  • 让图标设计得有含义及易于识别这样用户能立即知道该点哪个tab,避免让用户考虑例如“到底是扳手呢?还是在齿轮表示设置呢?”
  • 如果你在设计图标的时候遇到一些问题,不妨进这一层下面的内容去看看下面的布局以及内容是否能激发你的灵感。

重申,实地测试和探索非常重要。问问用户他们的理解方式!“你们认为这个脸部图标表示什么?”“你们觉得应该在什么样tab下可以找到Finder”“你觉得图标是脸,而文字写着Finder,这样说得通吗?”

Figure 1 — 左: NUUS 24 使用了相似的图标, 中: Spotify 使用了房子图标和 “What’s new”的文字, Right: Vimeo 重复使用文字 “My Videos” 和 “My Stuff”

第四课:避免自动改变tab

这是在我从事的很多项目中经常争论的问题。我的想法是,如果不是用户主动直接的在Tab上发生交互行为,永远不要改变Tab!我知道你们有可能在一些情况上发现这是唯一能解决一些奇怪的信息架构问题的方式,但是请还是主动去避免!为什么呢?

  • 你在尝试打断用户所期望的控制行为。举例当用户点击一个表视图(Table View)的时候,他们永远期待二种结果:a)新视图从右向左滑进,b)新视图从下向上滑进。他们同样不希望在Tab Bar上发生他们预想不到的变化
  • 你在扰乱用户早已习惯的iPhone“返回”交互习惯。如果他们没有注意到Tab已经改变,他们有可能以为到了下一级,试图找“返回”按钮

第五课:不要在Tab上做限制

如果你没有提供更好的方式让用户访问某些内容,不用让Tab设计具备限制性(如只针对注册用户)。让用户点击后才发现这些内容不可用时,这会让他们非常苦恼。

Figure 2 – Hemnet 应用中当你点击某个Tab时,提示你必须登录

第六课:小心使用自定义Tab

当越来越多的iPhone应用使用Tab Bar来展示信息架构的时候,设计师已经开始觉得无趣。设计师自己都知道,当设计师自己觉得无趣时,坏情况可能发生。一种方式就是为了避免设计上的无趣,开始自定义Tab Bar。

现在,我也是常常自定义Tab,因为能有个性,好记忆,而且有更好的品牌体验。但是有一些重要的事情必须牢记于心。

  • 需花时候,而且有时候要花大量的时间。从开发人员角度来说,自定义Tab Bar 意味着完全重写代码。
  • Apple设计Tab Bar和Tool Bar的颜色色调时是有一定理由的;它能很好的区别外观和导航的级别。将这种思想带到你的色彩设计之中。
  • 有时候开发者和设计师总是忘了当点击一个Tab时,顶部的导航条显示了当前位置,同时如果有电话打入,系统的状态栏会变成双倍高度。别忘了设计这些情况。
  • 有些应用使用一些自定的设计模式来应对具有共享视图的Tab Bar(如Twitter for iPhone)。如果你也考虑这种方式,那注意你有可能让你的用户产生疑惑。

Figure 3 — 在Twitter for iPhone中,这种多层Tab很容易让人困惑。当点了第一屏中的”651 favorites”后,进入了”favorites”视图,如中图所示,再点Back按钮,在第三屏中还是处于同一等级下的Tab,这时图标变成了”More”

总结

tab bar是你导航应用的主要方式。不要低估了设计一个完美的tab bar体验所要花的时间。这些总结中并没有绝对的规则,但希望能让你开启思路。

原文出处significantpixels.com翻译 Experience10.com

April 27th, 2011 at 4:01 pm by . 1 Comment
filed under UX & Design

5种跨越UX设计障碍的方式

1: Stop Thinking So Much不要思考太多
2: Take a Step Back往回退一步
4: Do Some Research做一些研究
3: Separate Entirely将复杂问题分解一下
5: Ask For Help寻求帮助

原贴地址

April 27th, 2011 at 10:44 am by . 0 Comments
filed under UX & Design