桃子@chenny的博客

知言养气

2009-6-5 16:50:38 阅读58 评论0 52009/06 June5

虾米，http://www.xiami.com/

ST, http://www.songtaste.com/

http://www.vattoz.com/

http://www.last.fm/

作者 | 2009-6-5 16:50:38 | 阅读(58) |评论(0) | 阅读全文>>

交互设计和交互设计

2009-6-5 16:11:30 阅读80 评论0 52009/06 June5

实际上，“交互设计”可以分成两个部分：用户使用流程的交互设计、界面呈现的交互设计（我往往叫他单页面交互）。

所谓“用户使用流程”，源于“业务逻辑”，又不同于业务逻辑。因为业务逻辑一般都更偏向于技术模型，对于实际的用户使用来说会过于繁复，易用性很差。这份工作，一般由产品设计师(负责功能设计、信息架构、‘交互设计’)来完成。

所谓“界面呈现的交互设计（单页面交互）”，实际上是“UI设计”所做的工作。对于“界面呈现的交互设计”来说，“使用流程图”的每个具体页面的“页面内交互”都只是“建议”，有权更改每个页面的“交互方式”。

简单来说，“用户使用流程的交互设计”是站在产品和体验两个角度，更合理的进行产品设计。即保证完整的业务逻辑和产品利益，又用最小的交互成本让用户完成任务；“界面呈现的交互设计”更多是站在易用性的角度优化“人机交互过程”，让交互成本再小，易用性更强。

“交互设计”不只是“单页面交互”，更不只是“流程改进”。好的视觉设计师/UI设计师应该担负起“界面呈现的交互设计”的任务，不能只做视觉；偏产品的“用户使用流程的交互设计师”，并非“必须具备视觉设计能力”。

引自：白鸦http://uicom.net/blog/?p=794

作者 | 2009-6-5 16:11:30 | 阅读(80) |评论(0) | 阅读全文>>

网页设计图标使用指南

2009-6-5 15:49:17 阅读86 评论0 52009/06 June5

很多人说设计是力求细节的，在网页设计里表达出的细节就是图标。图标在一个设计里带来了额外的注解并且使设计里的对象和元素引起用户的注意。

以下介绍的是一个用图标描述的最优方法。当使用图标时，图标的描述包含了一系列的隐喻。这也是在网站导航广泛使用图标和一系列图标组的原因。

隐喻：

图标是文字的隐喻，也让人很好地知道隐喻，对于可用性来说，在网站之间有效地进行交流是至关重要的，图标应该是代替文字，最能充分传送信息。用户需要快速地知道图标所表达信息。

使用大家认知的元素和简单的隐喻---用户应该会快速地知道图标所表达信息。作图标时，用一些共同的元素是很重要的，就好像一个屋子（表达“家”）。以下是一些例子：

气泡-评论

信封-E-mail和联系

箭头和硬盘-下载

问号-帮助和常见解答问题

文件夹-文件

号角-论坛

两个环绕的箭头-更新

显示器-视频

放大镜-搜索

字母表-按字母排列

锁-安全

星号-重要标记

鼠标-表示链接

还有很多很多。。。

图标附加标签---如果图标还不能明确地表达意思，加上一个小小的标签是非常不错的选择。对于用户来说，文字很清楚表达它的意思，所以可以提高图标的可用性。一般来说，尽量只用几个字来做图标的标签，还有文字用一行。用可以易明的文字和简洁的颜色。

作者 | 2009-6-5 15:49:17 | 阅读(86) |评论(0) | 阅读全文>>