Latest Entries »

关于Web设计精确点滴

这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且我一直认为这些问题比较严重,正因为这些都是基本问题,很容易解决的,但把这种忽略养成一种习惯性的“经验”那就“杯具”了,然而这些细节问题也不同程度的代表了你的工作态度。

1)调整后的毛边
当对一个位图的大小进行调整后,正常情况下会留下1px的毛边(如果你注意的话),边界会变得模糊,如果继续调整模糊度会加大,这个问题太不起眼了,以至于你无法用肉眼来理绘,我们先用商品图片举例子:
210GI559-1.jpg
查看完整文章 »

10个最“优秀”的代码注释

下面是stackoverflow网站上网友针对你看到过的最好的代码注释是什么样的?这个问题给出的回答的前10条:

  1. // 亲爱的维护者:
    // 如果你尝试了对这段程序进行‘优化’,
    // 并认识到这种企图是大错特错,请增加
    // 下面这个计数器的个数,用来对后来人进行警告:
    // 浪费在这里的总时间 = 39h
  2. /** * 致终于来到这里的勇敢的人:
        你是被上帝选中的人,英勇的、不辞劳苦的、不眠不修的来修改
    我们这最棘手的代码的编程骑士。你,我们的救世主,人中之龙,
    我要对你说:永远不要放弃,永远不要对自己失望,永远不要逃走,辜负了自己。
    永远不要哭啼,永远不要说再见。永远不要说谎来伤害自己。 */
  3. Exception up = new Exception("Something is really wrong."); throw up; 
  4. // 一些修改1 - 2002/6/7 增加临时的跟踪登录界面
    // 一些修改2 - 2007/5/22 我临时的犯傻
  5. #define TRUE FALSE //逗一逗调试程序的傻瓜们
  6. if (/*you*/ $_GET['action']) { //celebrate(恭喜)
  7. // 如果这段代码好用,那它是Paul DiLascia写的。
    //如果不好用,我不知道是谁写的。
  8. //写这段代码的时候,只有上帝和我知道它是干嘛的
    //现在,只有上帝知道
  9. // 晕了,以后再修改
  10. // 神奇。勿动。

你有没有更绝的?

交互设计,产品设计和用户体验设计经常被混淆,而实际上完全不是一个概念甚至不是一个纬度的概念;

一直认为交互设计与互动设计很接近,互动设计这个词更多用在flash设计中,维基百科中的交互设计的定义也证实这个想法:

交互设计,又称互动设计, (英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互 设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。

而由于互联网产品特性:包括迁移成本低,门槛低,用户群大,模式多,互联网的产品形态等显得交互设计尤为重要,在某些产品中甚至可以成为“核心竞争 力”之一,所以目前大部分互联网公司会有“交互设计师”这个岗位。但靠交互设计来成就一个产品实际很难,这个感觉在08年的时候做“按电话计费的广告联 盟”尤为突出。 查看完整文章 »


在网站或软件的策划和设计过程中,我们经常听到这样的讨论:“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热 的话题,也是方兴未艾的Web2.0大浪下设计师们的最爱(看看那些在全世界遍地开花的SNS网站,无论是视觉元素还是交互流程均能轻则轻)。本文主要从 实践和总结的角度出发,提出了让设计变得更轻的6个技巧。

何为轻设计:

在开始之前先需要明确下何为轻设计。这里并不想给轻设计下一个专业的定义,只是归纳了大家对轻设计所应具有的特性的理解。
1. 具有灵敏的可交互元素:页面上的链接、文本框、按钮等可交互元素能灵敏地响应操作并即时反馈。
2. 轻便的流程和提示,不打断用户的当前任务:一项任务尽量用少而清晰的步骤去完成,提示和临时任务尽量不中断用户主任务,不要让用户做不必要的确认和操作。
3. 不干扰用户的注意力:用户是来使用产品和服务的,而不是来欣赏精美的设计,如果使用过程中会因为设计元素分散注意力那么可能是设计太重了。试着少用些无用的装饰和细节。 查看完整文章 »

手机系统消息通知设计的整理和分析

notification-banner当 应用程序不处于前台运行中时,消息通知能将某些信息及时告知用户。比如收到新消息、收到新邮件、程序下载已完成或者待办事项即将开始等。目前各移动平台上 对消息通知的设计均有所差别,各有利弊。这里整理了iOS、Android、Palm Web OS、Windows Phone和未揭开面纱的Meego这五个系统对消息通知的处理方式,并分析了它们各自的优缺点。希望能对研发过程中的设计选择有所帮助。另外这里主要分 析的是通知的提示形式,不涉及Local和Push两种通知逻辑。

iOS Notification
iOS的消息通知有两种形式,Badge Notification和Alert Notification。

  • Badge Notification是指出现在应用程序图标右上角的红色圆形数字提醒,用于提醒一些无需即时处理的消息,比如程序更新数、未读邮件数等。Badge Notification只有在Home Screen的对应屏上才能看到,因此不适合用于提醒一些重要性高或需要及时处理的通知。而且Badge Notification的形状颜色大小等都是默认且无法改变的。
  • Alert Notification则非常直接地以对话窗口的形式出现在屏幕上,用于重要或需要及时处理的通知。不过Alert Notification常常粗暴地打断正在进行中的任务,强迫用户马上做出选择,且无法汇总查看所有通知,当有多条通知时,无法选择性处理,只能按提供 提供的顺序一个个处理。
  • ios-notification

    查看完整文章 »

    手机客户端UI设计之手机平台之争

    1. 当前手机平台的争锋

    为了占领移动互联网的制高点,当前的几大IT巨头都以手机平台为基础展开争夺。占领移动平台就是占领了用户的移动桌面,也就为自身的移动服务争取到了最佳位置。

    微软公司推出windows phone 7, 曝光了windows 8;苹果公司也开了iOS 5的发布会;谷歌的Android 3.0的发布,Android 2.4 的若隐若现等等;大家都在努力提升平台体验。另外,惠普的Web OS、黑莓公司也都在研制和发布新平台,也引起了业内人士的极大关注。

    从当前市场占有率和未来的发展趋势看,客户端适配上,主要还是考虑iOS ,Windows,Android三个系统为主,其他的系统在国内还难占据主流,这里不解释。Android手机的增长最快;iOS手机在国内的占有量也 增长很快,利好消息也不断,电信、移动都在谈;Windows主要看与Nokia的未来合作,前景不小。

    因此,在本文中,简单的介绍一下这三个主流平台的交互特性,以帮助刚从事客户端交互设计的同行们更快地了解它们的基本特性,为能开发出更好体验的客户端提供便利。

    2. 各个平台的特点及优势

    1)平台的硬件特性

    a)   平台的按键

    手机按键是系统自带的,平台也会把按键的功能带入到系统的客户端应用中,他也天然地与用户操作相融合。

    查看完整文章 »

    宾得镜头知识 (转载)

    关于宾得镜头的一切

    买了k20d后就开始折腾镜头,下面的信息都是网上搜集汇总而来,备份的同时供参考。因为都是很久以前搜集的帖子,所以作者也不能一一补全,暂且不提吧。友情提醒:镜头这个东西,不同人观点不一样,仅供参考。

    常见名词缩写

    A:A系列手动对焦镜头。
    AF/MF:手动/自动对焦全程切换。
    AL:Aspherical非球面镜片。
    CF Micro:continue focus micro全程微距。
    DA:DA镜头是宾得专为APS-C画幅的数码单反相机设计的数码专用镜头,用绿圈标识,无法用在全画幅机型上。
    ED:Extra-low Dispersion超低色散镜片。
    F:宾得早期的AF镜头卡口。
    FA:也是宾得的AF镜头卡口,比F卡口多了两个电子触点。
    IF:Inter Focus内对焦。
    Limited:限量版镜头,也是宾得高性能、高档次的镜头。
    M:M系列手动对焦镜头。
    M.O.D:Minimum Object Distance 最近对焦距离。
    PowerZoom:电动变焦。
    SMC:Super Mluti Coating超级多层镀膜,宾得特有的镜头镀膜技术,抗炫光能力比较强。
    Soft Focus:柔焦镜头。
    *:*镜是宾得的高档专业镜头,就像佳能的L头一样,俗称星镜。
    实 例说明:FA* 80-200 F2.8 ED镜头表示焦距为80-200mm、最大光圈恒定F2.8、使用了ED超低色散镜片的宾得专业星镜;而FA31mm F1.8 AL Limited镜头表示焦距为31mm定焦、光圈F1.8、使用了非球面镜片的Limited限量版镜头。

    另外版本
    查看完整文章 »

    CSS 忍者:安全的 CSS hacks 秘籍

    你如何搞定 IE 这只难以驯服的怪兽?使用 CSS Hacks 或者条件注释么?恐怕没有什么解决方案是完美的。每个设计师或者前端码农都会有自己打败 IE 行之有效的方法。所有这些技术都各有利弊,让我们一起来看看。
    通过条件判断引入样式表

    使我们能很容易在 IE 浏览器中通过条件注释语句加载指定样式表,而其他非 IE 内核浏览器则自动忽略这段蹩脚的 HTML 注释。下面是一个例子:



    这段代码会导致 IE8、IE7、IE6 各自加载对应的样式文件。这事实上是非常牛逼的,条件注释给按浏览器加载各自不同的样式表提供了可能,但同时需要维护多个样式文件。
    CSS hacks

    这事实上是个龌龊的做法,能解决问题又不符合规范,看着也很头大。大部分人看着它只能束手无策而又逼不得已。之前的《CSS Hacks for IE,IE 也可以很完美》已经谈过 IE 的 CSS hacks 了。现在可以来简单回顾一下常用的几个方法:

    _selector{property:value;} //IE6
    *selector{property:value;} //IE6 & IE7
    selector{property:value\9;} //IE6 & IE7 & IE8

    这个一般人都知道,就不多说了。但面临的一个现实问题是,\9 这个 hack 不只是针对 IE8 以及更老版本奏效,IE9 最终的发行版依旧会受到这个 hack 的影响。而 IE9 本身在 CSS 上的各种缺陷又是被修复的。如果将来 IE10、IE11 来了,那又怎么办?显然 \9 并不是一个严谨的安全的方案。

    另外,采用不同的 X-UA-Compatible 模式也会影响不同版本的 IE 渲染差异。建议设置默认渲染模式如下:

    //标准 IE 模式

    那咋整呢?咋整咋整咋整?没事,下面还有更绝的。
    通过条件判断插入指定类

    既然可以用条件判断,那么直接为不同 IE 版本输出单独用于设定样式的钩子类好了。直接上代码:

    // 非 IE 浏览器的情况,不添加任何作用类


    如果要是 IE9、IE10 再想出现什么神奇的行为艺术的话,继续添加指定作用类就行咯。并且你的样式表也会变得异常干净、整洁、美观:

    .selector { color: black; }
    .ie8 .selector { color: green; } /* IE8 */
    .ie7 .selector { color: blue; } /* IE7 */
    .ie6 .selector { color: red; } /* IE6 */

    当然,标准模式的 X-UA-Compatible 声明还是必须的,以防页面被强制按照低版本的 IE 来渲染。

    关于条件注释的参考资料:http://msdn.microsoft.com/en-us/library/ms537512.aspx

    iPhone应用设计趋势

    在过去的两年里,你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传,使得世界各地的设计者们都利用这个新的移动工具来一展身 手。结果虽搞出了成千上万的iPhone应用,但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着(是的,这些都是好用且 有创意的界面)。

    在 过去的两年里,你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传,使得世界各地的设计者们都利用这个新的移动工具来一展身手。 结果虽搞出了成千上万的iPhone应用,但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着(是的,这些都是好用且有创 意的界面)。本文探究了如何让设计师利用图形元素和屏幕交互,制作出易识别又易操控的iPhone应用。目的在于揭示iPhone应用设计的普遍趋势和设 计方法——请注意,这些未必是设计和可用性中的最佳观点。1. 镜像iPhone原生界面元素“告诉他们你要告诉他们的,去告诉他们,然后告诉他们你告诉 过他们。”(译者:作者在表达她当时的感受吧)在你的应用中创建一套新的OS可能很有趣,但在移动设备上处理时,人们只想简明扼要。简明扼要的意思是,设 计师得遵循OS的流程,创建一个无说明的应用,给最终用户去操作。镜像出用户熟悉的布局和界面元素可以节省时间和精力。所以这看起来是设计iPhone应 用时的一个便利途径啊。Facebook(iTunes Link)

    查看完整文章 »

    语义化你的HTML标签

    作为一个前端开发人员,你要是没有听说过css,那你肯定是一个“out-man”。随着css的深入人心,结构与表现与行为的逐渐分离,HTML语义化成了炙手可热的卖点。

    查看完整文章 »

    骄傲D用 WordPress | 备个毛案