标签归档:用户体验

网站导航设计模式指南(转载UCD二区)

《写个大家的设计书》《结网》《网站导航设计》这写好书都慢慢融入到了前端开发的阅读范围了,很高兴国内的工程师都开始意识到体验在前端工作中的重要性,相对来说,不是每个公司都会有所谓的“用研”团队,不过接下来的这篇关于导航设计的文章,是对书上知识的一个很好的总结,并且不乏新颖的理念。原文地址:http://ucdchina.com/snap/9203

正文如下:

在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式,可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式,我们将讨论它的一般特征,它的缺点,以及什么时候使用它最好。

顶部水平栏导航

顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单,且最通常地放在网站所有页面的网站头的直接上方或直接下方。

继续阅读

Jquery 画廊插件

Jquery 能够快速方便的被开发人员使用,我发现众多设计师MM也喜欢用JQUERY来完成一些平常看起来非常难完成的特效。无论在质感和质量上JQUERY的插件都能扣上“专业”这个大帽子,看网上有一些画廊插件的介绍,收录过来,方便使用。

1.?slideJS

Preview

2.?Sidewways Jquery Fullscreen Image Gallery

Preview

3.?CarouFredSel

Preview

4.?Orbit: A Slick jQuery Image Slider Plugin

Preview

5.?Shine Time

Preview

6.?Supersized

Preview

7.?Yox View

Preview

8.?Nivo Slider

Preview

9.?jQuery Image Scale Carousel

Preview

10.?Full Page Image Gallery

Preview

11.?A jQuery Flickr Feed Plugin

Preview

12.?Thumbnails Navigation Gallery with jQuery

Preview

13.?Interactive Photo Desk with jQuery and CSS3

Preview

14.?Beautiful Photo Stack Gallery with jQuery and CSS3

Preview

15.?Animated Portfolio Gallery with jQuery

Preview

16.?Polaroid Photobar Gallery with jQuery

Preview

17.?Micro Image Gallery: A jQuery Plugin

Preview

18.?Sponsor Flip Wall With jQuery & CSS

Preview

19.?Presentation Cycle: Cycle with a progressbar

Preview

20.?Merging Image Boxes with jQuery

Preview

21.?Create Beautiful jQuery slider tutorial

Preview

22.?Jquery Popeye 2.0

Preview

23.?Fancy Hover Effect

Preview

24.?Slide Thumbs

Preview

25.?jQuery Plugin – Feature List

Preview

26.?Creating a polaroid photo viewer with CSS3 and jQuery

Preview

27.?GalleryView: A jQuery Content Gallery Plugin

Preview

28.?Profolio

Preview

29.?Create an Image Rotator with Description (CSS/jQuery)

Preview

30.?Galleriffic

Preview

31.?Loopedslider

Preview

32.?Sliding Image Gallery

Preview


关于UI的设计

人类社会逐步向非物质社会迈进,互联网信息产业已经走入我们的生活。在这样一个非物质社会中,网站与软件这些非物质产品再也不象过去那样紧紧靠技术就能处于不败之地。工业设计开始关注非物质产品。但是在国内依然普遍存在这样一个称呼“美工”。“工”的意思就是没有思想紧紧靠体力工作的人。这是一个很愚昧的做法,愚昧在于称呼职员美工的企业没有意识到界面与交互设计能给他们带来的巨大经济效益,另一方面愚昧在于被称为美工的人不知道自己应该做什么,以为自己的工作就是每天给界面与网站勾边描图。

本文主要讲述一套比较科学的设计流程来讲述UI界面设计属于工业设计的范畴,是一个科学的设计过程,理性的商业运作模式。而不是单纯的美术描边。

UI的本意是user interface也就是用户与界面的关系。他包括交互设计,用户研究,与界面设计三个部分。本文主要讲述用户研究与界面设计的过程。

一个通用消费类软件界面的设计大体可分为五个步骤:
1需求阶段
2分析设计阶段
3调研验证阶段
4方案改进阶段
5用户验证反馈阶段

需求阶段

软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。

除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。如何判定最合适于用户呢,后面我会介绍用户调研。

分析设计阶段

通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。首先我们应该制作一个体现用户定位的词语坐标。例如我们为25岁左右的白领男性制作家居娱乐软件。对于这类用户我们分析得到的词汇有:品质,精美,高档,高雅,男性,时尚,cool,,个性,亲和,放松等。分析这些词汇的时候我们会发现有些词是绝对必须体现的,例如:品质,精美,高档,时尚。但有些词是相互矛盾的,必须放弃一些,例如:亲和,放松与cool,个性与等。所以我们画出一个坐标,上面是我们必须用的品质,精美,高档,时尚。左边是贴近用户心理的词汇:亲和,放松,人性化。右边是体现用户外在形象的词汇:cool,个性,工业化。然后我们开始搜集相呼应的图片,放在坐标的不同点上。这样根据不同作标点的风格,我们设计出数套不同风格的界面。

调研验证阶段

几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观的反馈。

测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。


例如:
数据收集方式:厅堂测试/模拟家居/办公室。
测试时间:X年X月X日X日。
测试区域:北京、广州、天津。
测试对象。某消费软件界定市场用户。主要特征为:
对电脑的硬件配置以及相关的性能指标比较了解,电脑应用水平较高;
电脑使用经历一年以上;
家庭购买电脑时品牌和机型的主要决策者
年龄:X-X岁;
年龄在X岁以上的被访者文化程度为大专及以上;
个人月收入X以上或家庭月收入X元及以上;
样品
五套软件界面
样本量:X个,实际完成X个。


调研阶段需要从以下几个问题出发:
用户对各套方案的第一印象
用户对各套方案的综合印象
用户对各套方案的单独评价
选出最喜欢的
选出其次喜欢的
对各方案的色彩,文字,图形等分别打分。
结论出来以后请所有用户说出最受欢迎方案的优缺点。
所有这些都需要用图形表达出来,直观科学。

方案改进阶段

经过用户调研,我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢,还有什么遗憾等,这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上(这里指不能换皮肤的应用软件或游戏的界面)将方案做到细致精美。

用户验证阶段

改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的设计师应该在产品上市以后去站柜台。零距离接触最终用户,看看用户真正使用时的感想。为以后的升级版本积累经验资料。

经过上面设计过程的描述,大家可以清楚的发现,界面UI设计是一个非常科学的推导公式,他有设计师对艺术的理解感悟,但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界面设计不存在美工。