⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹ » Interfaces http://www.isonge.cn Freelance. Graphic design, illustration, print and web. Sat, 09 Jul 2011 22:42:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Vimeo的一些设计草图 http://www.isonge.cn/2009/08/vimeo%e7%9a%84%e4%b8%80%e4%ba%9b%e8%ae%be%e8%ae%a1%e8%8d%89%e5%9b%be/ http://www.isonge.cn/2009/08/vimeo%e7%9a%84%e4%b8%80%e4%ba%9b%e8%ae%be%e8%ae%a1%e8%8d%89%e5%9b%be/#comments Wed, 19 Aug 2009 11:11:38 +0000 911 http://www.isonge.cn/?p=560 Vimeo是非常讨人喜爱的高清视频分享网站，拥有许多令人惊奇的视频，质量都很不错。虽然国内的速度差一些，但是为了能看到这些有趣的视频，还是值得等待的。

在Vimeo的介绍中，看到了开发者的一些信息，于是找到了其中的一位开发者的Soxiam（需要治愈G.F.W）的有关设计的一些手稿，与大家分享。

vimeo newsletter page ideas

更多的图片请到他的Flickr上自行观赏

]]> http://www.isonge.cn/2009/08/vimeo%e7%9a%84%e4%b8%80%e4%ba%9b%e8%ae%be%e8%ae%a1%e8%8d%89%e5%9b%be/feed/ 0 16个关键，网页设计和可用性最佳实践的汇编和工具 http://www.isonge.cn/2009/06/16%e4%b8%aa%e5%85%b3%e9%94%ae%ef%bc%8c%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%92%8c%e5%8f%af%e7%94%a8%e6%80%a7%e6%9c%80%e4%bd%b3%e5%ae%9e%e8%b7%b5%e7%9a%84%e6%b1%87%e7%bc%96%e5%92%8c%e5%b7%a5%e5%85%b7/ http://www.isonge.cn/2009/06/16%e4%b8%aa%e5%85%b3%e9%94%ae%ef%bc%8c%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%92%8c%e5%8f%af%e7%94%a8%e6%80%a7%e6%9c%80%e4%bd%b3%e5%ae%9e%e8%b7%b5%e7%9a%84%e6%b1%87%e7%bc%96%e5%92%8c%e5%b7%a5%e5%85%b7/#comments Thu, 11 Jun 2009 13:48:12 +0000 911 http://www.isonge.cn/?p=324 via:http://www.tripwiremagazine.com/tutorials/tutorials/16-crucial-webdesign-and-usability-best-practice-compilations-and-tools.html

此篇文章中，我编制了一份我认为是目前最好的有关于网站设计与可用性注意事项的指导名单。现在内容为王的说法很普遍，在某种程度上也是很正确的。但是另一方面良好的内容用十分糟糕或者甚至无法使用的方式传递给用户,可能导致用户消耗殆尽。随着互联网竞争越来越大，情况变得糟糕的时候，无障碍和可用性变得越来越值得关注。假如用户仅感觉到被邀请，舒适等等，他们会很快会离开，到下一个幸运的渴望收到点击的网站或者blog。可用性是很难的，它需要开发者与设计领域的专家。网页开发人员最后将他们结合起来并从其他方面的建议中获得经验是至关重要的.以下是相关的信息，提示，技巧和需要的工具，让我们开始吧！

10个建立可用性更强的网站的技巧  (@webdesignerdepot.com)

无论是你的个人作品集，blog,营销网站，或者游戏收集站，我们都希望吸引游客到我们的网站，并确保给他们一个愉快的体验。

可用性衡量用户体验的水平，其特点在于所给任务的完成难易度。无论是新的知识还是让用户学习新的互动方式，我认为Jakob Nielson的解释可能是最好的，他说：

可用性是用户界面使用度难易的质量评估。在设计过程中引入“可用性”的概念可以改善易用性。”

此篇文章中我希望能够为大家带来某种形式的可用性清单，内容涵盖适用于任何Web项目的表单设计，简单的导航提示。

1. 创建实用的导航

让用户清楚自己处于网站的什么位置，或者他们正在浏览什么分类，可以为任何网站带来巨大的可用性提升。实用的导航是其中一个可用性概念，在这一点上几乎是共通的。人们都在按照自己的方式创建导航…. 阅读

slideshow

社会化媒体与网络社交网站用户界面的9个关键特点 (@smashingmagazine.com)

本文涵盖了社会媒体与网络社交网站用户界面的9个关键特点。它讨论了顶级网站实例的重要的特点，技术和设计背后的想法，并解释了为什么他们是重要的。

These easy and general usability strategies can be applied almost anywhere and to almost any type of user interface.这些简单的和一般的可用性策略几乎可以应用到任何地方，任何类型的用户界面上。

1. 界面关键是简洁

在讨论用户界面的具体问题前，我们必须指出社会化媒体与网络社交网站的用户界面的共同特点是简洁这个事实。社会化媒体网站在配色方案和图形上是相当简单的。颜色搭配通常有几个颜色与轻微的单色变化，北京通产时白色的，更新(例如状态更新)常常使用浅色进行高亮强调（通常是绿色或者黄色，警告通常使用突出的红色背景色）…. 相关阅读

slideshow

30个必须知道的可用性问题 (@smashingmagazine.com)

此篇文章我们奉献出30个经常会被遗忘，忽略或者误解的重要的可用性问题，术语，规则和原理。可读性与易辨认性间的不同是什么？80/20 或者 Pareto原则究竟是什么意思？扫雷和满意度是什么意思？什么是逐步加强和降级？OK，是时候深入讨论了。

可用性: 规则与原理
7±2原则

人类大脑的信息处理能力有一定的限制，涉及到复杂的信息块划分。根据George A. Miller研究，人类短期记忆只可以同时保留5-9件事情。这一事实经常被当作限制导航菜单选项数量为7的限制依据。但是关于The Myth of “Seven, Plus or Minus 2? 的激烈争论在继续，因此，7±2原则如何，是否可以或者是不是应当适用于网络不是很清楚。Miller的研究… 相关阅读

slideshow

10个你需要知道的可用性噩梦(@smashingmagazine.com)

本文让我们来看看那些需要避免的功能设计与网站可用性的噩梦。文章的最后我们也会找出8个应该知道的可用性的检查点。

1. 隐藏的登录链接

Backpack, 37signal的一个最有用的组织和管理项目工具，正确说明了工具能用在什么上，怎么使用，他们都有什么特点，然而，一旦申请，需要几分钟的时间才能找出开始使用的工具 相关阅读

slideshow

9个网页设计中常见的可用性错误(@smashingmagazine.com)

截止到目前，所有的好设计师和开发者认识到可用性对他们工作的重要性。可用性很好的网站提供了很棒的用户体验，并让用户非常愉快。使用智能的设计策略使访客感到愉快和满足，而不是阻挠与激怒他们。这里有9个一般网站需要面对的可用性问题，和一些被推荐的解决方案。

1. 极小的可点击区域

超链接被设计的可点击，以便他们的可用，确保他们容易点击。这里是可点击的链接过小的例子，点击他们很有难度哦，这些留言的链接是 Hacker Ne网站上的, 社会化新闻媒体. (可点击区用红色高亮)… 相关阅读

slideshow

10个提升用户界面设计的实用技术(@smashingmagazine.com)

多半而言网页设计是指用户界面设计。起草漂亮实用的界面牵扯到有很多技术。这里是我所搜集的10个有帮助的实用技术。虽然他们并没有与特定的主题相联系，但是这些搜集都是我在自己的项目中使用的技术。不要再费周折了，让我们爱是吧

1. 块状链接区

链接（或者锚点）默认情况下是内嵌元素，这意味着他们的点击区域只有文字的高度和宽度。点击进入链接的目的地的可点击区，可以增加更多的实用性。我们可以通过增加padding做到这一点，也可以将链接转化为块级元素。下面是inline和padded链接，高亮了可点击区突出其差异… 相关阅读

slideshow

10个有效的网页设计原理(@smashingmagazine.com)

决定网站成败的是可用性与功效，而不是视觉设计。使用鼠标点击网页的只是访问者，所以他们决定一切，以用户为中心的设计已经成为了成功的和有导向性的网页设计的标准做法。毕竟用户如果不能使用其功能，它就失去了存在的意义。

我们不打算讨论已经在很多文章中涉及到的实施细节（例如搜索框应该放在何处），取而代之的是我们关注主要的原则，启发与方法。有效的网页设计方法，运用得当可以引导更加缜密的设计策略和简化信息感知过程… 相关阅读

slideshow

很棒的网页设计原理: The Polish (@psd.tutsplus.com)

这是非常棒的网页设计教程与最佳的资源

不同于Photoshop效果，你不能够真的学到一套很容易重复使用的网页设计步骤。假如你看看 最好的网页设计，他们在技术上的仿造并不困难。你可以为他们截图，导入Photoshop，复制设计分层。然而，这样的把戏永远赶不上原设计。

出于这样的原因，在这些网页设计的教程中，我打算尝试一些不同的技术来表现我独自完成网站设计过程中的不同方面Read on

slideshow

useit.com: Jakob Nielsen的网站

slideshow

ui-patterns

slideshow

slideshow

Design Pattern Library (@developer.yaho0.com)

更多的可用性与网页设计典范…

slideshow

usability.gov

slideshow

88 checks, The ultimate webdesign usability checklist

    技术的

  1. 你使用 W3C Markup Validation Service审查(X)HTML 么?
  2. 你使用 W3C CSS Validation Service审查CSS么?
  3. 你在IE, FF, Opera 和 Safari下测试你的网站么?

    4. 图像的

  4. 你为所有重要的图片添加 ALT 和 TITLE 属性么 ?
  5. 你会为所有需要描述的图片添加LONGDESC属性么?
  6. 你会写有效的 ALT 文本吗?
  7. …

12个标准屏幕样式

01. 主要的/细节

slideshow

做好网页设计的9个必不可少的原则

网页设计是困惑复杂的，因为涉及到的设计需要美观实用，传递信息和建立品牌，技术上的声音与视觉效果到达到一致。

1. 视觉优先 (引导用户的视线)

slideshow

可用性工具

userfly

简单免费，非常强大的可用性测试工具，非常值得关注！

slideshow

Loop11

Loop11 是基于网络的用书体验工具可以进行远程管理，可用性测试。

Loop11 提供获得详细的观察与了解用户的行为的能力.能够通过用户在网站上完成一系列任务与问题这样的交互环境而获得第一手观察资料。所有互动实时获得，处理并提供实时的报告。Loop11 不是调查或者网络分析工具，而是用户体验工具……帮助你了解用户行为。

slideshow

]]> http://www.isonge.cn/2009/06/16%e4%b8%aa%e5%85%b3%e9%94%ae%ef%bc%8c%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%92%8c%e5%8f%af%e7%94%a8%e6%80%a7%e6%9c%80%e4%bd%b3%e5%ae%9e%e8%b7%b5%e7%9a%84%e6%b1%87%e7%bc%96%e5%92%8c%e5%b7%a5%e5%85%b7/feed/ 0 8种布局解决方案，改善您的设计 http://www.isonge.cn/2009/05/8%e7%a7%8d%e5%b8%83%e5%b1%80%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88%ef%bc%8c%e6%94%b9%e5%96%84%e6%82%a8%e7%9a%84%e8%ae%be%e8%ae%a1/ http://www.isonge.cn/2009/05/8%e7%a7%8d%e5%b8%83%e5%b1%80%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88%ef%bc%8c%e6%94%b9%e5%96%84%e6%82%a8%e7%9a%84%e8%ae%be%e8%ae%a1/#comments Thu, 21 May 2009 07:59:33 +0000 911 http://www.isonge.cn/?p=173 VIA:http://www.smashingmagazine.com/2009/05/19/8-layout-solutions-to-improve-your-designs/

在任何良好的设计中，组织内容可能是最重要和最有影响力的一个方面。将信息组织到内置布局中是网站的基础，是网站塑型前应该关切的事情。网站假如离开了良好的布局，将丧失正确的引导和内容的关联性。

在这篇文章中，我们将讨论8种非常有用的布局解决方案和技术，希望读者能在其中获得帮助并创造出简洁经过组织的内容布局。这8种技术包含sliders, tabs, progressive layouts, structured grids, modal windows, rollover elements, accordions and mega drop-down-menus.

你也许会对下面的近期文章感兴趣：

1. Sliders and Carousels

Screenshot

Screenshot

Screenshot

Slider Scripts

您可以移植这些技术使用以下免费提供的脚本，技术和教程：

2. Tabbed Navigation Elements

Screenshot

Screenshot

Screenshot

Tab Scripts

您可以移植这些技术使用以下免费提供的脚本，技术和教程：

3. Modal Windows

Screenshot

Screenshot

Screenshot

Modal Scripts

您可以移植这些技术使用以下免费提供的脚本，技术和教程：

4. Rollover Elements

Screenshot

Screenshot

Screenshot

Screenshot

Tooltip/Hover Element Scripts

您可以移植这些技术使用以下免费提供的脚本，技术和教程：

5. Progressive Layouts

Screenshot

Screenshot

ScrollTo Script

  • ScrollTo – This is a JQuery plugin that can be used for vertical progressive layouts, like the one shown above.

6. Grids

Screenshot

Screenshot

Grid Generators, Templates, and Tools

7. Accordions

Screenshot

Screenshot

Screenshot

Accordion Scripts

您可以移植这些技术使用以下免费提供的脚本，技术和教程：

8. Mega-Drop-Down-Menus

Screenshot

Screenshot

Screenshot

Screenshot

Menu Scripts

]]> http://www.isonge.cn/2009/05/8%e7%a7%8d%e5%b8%83%e5%b1%80%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88%ef%bc%8c%e6%94%b9%e5%96%84%e6%82%a8%e7%9a%84%e8%ae%be%e8%ae%a1/feed/ 1