Seven's Pad

Just another Product Blog site

Posts Tagged ‘设计

Web设计精确点滴

leave a comment »

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

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

webdesign

也许单张小图还不够显注,下面对比一个列表图和大图,当然了除非你故意想要这种效果。

webdesign

webdesign

webdesign

webdesign

放大2倍后对比

webdesign

放大2倍后对比

webdesign

另外不要试者调整带有边框的图片,最好是自己绘制,这个面两张对比图不用放大就能全面看到问题:

webdesign

2)关于边框和背景
有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的背景色填充区块,不然内容会很空洞,图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调,严重的会造成毛边效果,下面用几个例子来说一下:

文字边框背景:

webdesign

因为区块加了边框后背景与边框之外的背景颜色相同,所以感觉空洞,所以最好是区块加上背景,而且背景色与边框最好是同一个基色。

webdesign

webdesign

白色背景下,背景不要比边框太深,再努力的调整区块内容的颜色能与背景融合也于事无补,边框成了毛边。

webdesign

在深色背景下,才使用加亮边框。

webdesign

关于图片边框,图片本身就有背景,而且色彩是多样的,在给图片加边框时也最好是与图片背景同一个基色的背景,而且最好是取与图片最边上的色彩的深基色,如果是边上有多种颜色,取最多的那颜色,例:

webdesign

如果边框是用CSS定义的,而且是图列,比喻说是产品列表,而列表中的产品类别和背景色都不一致,就会出现边框与背景同色或不协调的情况,例如:

webdesign

上图中间一排图片边框的色彩就不协调了,如果在图片是不确定的情况下,加边框时最好是给图片与边框之间加上边框距。

webdesign

在看看在深色背景下的效果,深色背景下可以有两种方案,一是去掉外框,以白色间距边框,二是加亮外框,留出与背景相同颜色的间距。如下图:

webdesign

3)关于边距与对齐
设计师寻找灵感时,偶尔会随意、自由的拖拉摆放区块、填色、绘制等,直到满意才会停下,在这个过程中会出现有与“经验”挂钩的细小漏洞,例如:

webdesign

下图表面看上去没问题,细看之下有点小别扭,放大后就可以看清楚了,导航文字偏高,搜索框与导航没有对齐,搜索框中Button图标距离也有问题。

webdesign

webdesign

调整之后如下图:

webdesign

在看下面的例子:

webdesign

上图中区块上下间距与左右间距不匀称,和前几的列子一样,文字与区块上下垂直间距不协调,下图是修正后的结果。

webdesign

在来看一组给图片加框的效果:

webdesign

在来看图列间距:
下面这个列图看似没问题,其实有两个细节问题(其中一个应该算是用户体验的问题)。首先第一列与第二列的间距要比第二列与第三列的距离要小2px,对于这个问题,有人会说这个间距用CSS定义就统一了,不会存在差异!注意了,我们讨论的是视觉设计,不能把这个问题丢给前端,否则你后面丢过去的更多(相信我),其次纵间距太小排的过于紧密。

webdesign

webdesign

调整过后如下图:

webdesign

4)关于阴影与质感:
在设计点缀版面时需要有深度和3D质感的时候,可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同,太强、太硬的质感只会让页面显得粗糙,web页面是个很细致的活,还是那句话,这里只说细节,先看图:

webdesign

阴影要小一点、颜色要浅一点,另外这里面其实还有一个问题,和前面讲的边框一样,如果图片是的投影颜色与图片颜色(或背景颜色)相同,效果会很尴尬,所以要边框一样给图片加一个间隔距离:

webdesign

理论上讲,将一个没有质感的元素进行投影或加阴影是不现实的!前面讲的一些阴影效果,元素本身没有任何质感。看下面的例子:

webdesign

上图Button和价格区块的投影没有质量,修改后如下图:

webdesign

其实阴影和质感是随网站整体风格相关联的,某种情况下还不如不加上去。

webdesign

关于深色背景下的质感,阴影和投影是不现实的,所以只能用发光或光线质感来实现。

webdesign

就说到这里了,没时间往下说了,我要整理东走了,上面都只是你可能不注意的小小细节问题,你注意到的我也不会说了。

Written by sevenpad

09/03/2010 at 10:37 上午

发表在 产品相关

Tagged with

浅啖图表参数化设计

leave a comment »

信息图表设计(Infographic Design),是信息设计(Information Design)学科的一个分支,它兴起于20世纪末信息技术介入到多样化的平面设计的过程中,是一种新型的视觉设计。
Infographic是一个可读可视化的复合体系,由图像、文字和数字结合而成使信息更高效地得以交流。它帮助人们更好地通过特定文本内容的视觉元素系统,显著、鲜明、简单、直接、连贯和全面地转化字里行间的可视化元素,并建立关联,使信息得到再一次呈现。关于信息图表相信大家已有接触,就不赘述了,在此要阐明两点:

首先,根据道格·纽瑟姆2004年定义,从表现形式的角度,“信息图表”作为视觉工具应包括:图表(charts),图解(diagrams),图形(graphs),表格(tables),地图(maps),名单(list)六类。


图(1) 列表式的图表说明马里奥遇到不同对象后发生的相应变化,实际上是简单的线性结构

其次,信息图表的分类方法有很多,从图形、文字、数据系统组织模式的角度,信息图表设计可以分为:

1 时序性图表

以时间信息为基础,描述空间或事件在空间中的先后流动变化,以时间轴图为代表。


图(2) 《汽车乐土》巧妙地利用大富翁棋盘解释了汽车的发展史.这个案例还说明时间轴并不一定是直线,有可能只是一条符合人们习惯或视线流的路径。

2 空间关系性图表

将空间位置的距离、高度、面积、区域按照一定比例高度抽象化的空间组织模式图。常见的有地图,导视图以及器物结构图等。


图(3) 物化图,德国golden section邮轮结构。将真实物体分层剖析,以抽象形式来解释空间关系。

3 推导性图表

描述整体事件的因果关系及逻辑变化情况图,常见流程图。


图(4) 用权威严谨的流程图表明饮水处理系统的安全可靠性

4 系统组织性图表

组织图是描述信息参数间整体与部分或上级与下级的从属关系图。


图(5) 图表广告设计,为对比出女性穿衣打扮搭配繁琐而设计的图表,简单而有效的表示类属关系的方法用在这却别具揶揄的意味。

5 关联性图表

描述在某一种特定关系下信息参数之间的联系图。


图(6) 《杀死比尔人物剧情介绍》叙事性图表。这类图表通常比较重视单一事件的平面描述而非时间进程,事件发生的过程往往被拆解成若干部分投影于同一个静止的画面分别介绍,着重细节的描绘。

通常的Infographic设计流程如下:

1 确立类型:空间类、时间类、定量类或三者综合。
2 构成形式:合理运用图量、图状或时间轴等视觉元素表达一个连贯的信息整体。
3 选择手法:使用与主体相吻合的表现方式,平面静态、视频动态、网络交互。

一个表意清晰明确的图表往往离不开参数之间的比较,抛开花样繁多的表现形式和视觉效果,我们进入信息图表设计的基础——参数设计。

参数可以被理解为在一定范围内变化的数,任何现象中的某一种变量数,目前国内对于图表中的参数设计没有一个确定的解释。参照Revit Building的思想,我将它暂时解释为采用经过设定的单位、视图和注释符号,使每一个构件都通过一个变更传播引擎互相联系。每一视图下所发生的变更都能参数化的、双向的关联到其他视图,便于图像、数值间的检索和比较。

  参数对于设计者来说是一个切片工具,通过它将复杂事物抽丝剥茧,按照一定秩序分割排列于同一平面,藕断丝连;对于读者来说它是一条游览路径,决定着人们的观察角度和节奏,带来移步易景,柳暗花明的精神体验。参数的设定要根据图表内容和目的来决定,常用的参数有时间、距离,观察对象的物理特征(体积、温度等)和抽象的因素(影响、规模)包括心理因素等等。参数的安排要分主次,一般来说,主参数是符合人们认知和阅读习惯的元素(比如时间,距离),它们具有较强的连续性和稳定性,贯穿图表始终;副参数提供一种观察角度或展现某种规律,它们可以穿插于图表,但要注意不能过于琐碎。有的参数本身就是信息核心内容,可以达到提纲挈领之效;有的参数是为了帮助理解晦涩无序的信息或者枯燥的数据调味,起到顺藤摸瓜的作用。


图(7) 日本设计师佐藤雅彦在《F通过》一书中的参数设计示意

有人认为信息图表的参数化设计是一套以逻辑关系与几何关系为基础对信息参数进行分析、解构、重组,形成适合于信息参数合理构建与自我增殖的信息组织模式,那么其中的一个关键就是数据组织模式。

  数据组织模式是一种描述信息之间数学关系的参数化方法。按照数据组织模式形成的信息图表通常用于企业年度报表、产业发展报告、政府财政信息总结等涉及描述大容量数据关系的统计学报告,也是其他形式图表变化的基础。

  数据组织模式一般呈现两种数学关系,可以通过正负、数值这些可以量化的视觉元素体现:

1 差额关系图

(1)点状图

  强调“在某处有某物”,对其数量的大小以及相互间关系并不追究,只是简单的“是否”关系。


图(8) 美国各州同性婚姻的法律状况表,不同数据基本独立,但又被同一主题所连结。

(2)线形图

一般通过曲线或折线的变化表现某种变化,强调总体趋势。


图(9) 《取名网站》通过某一名字在不同时间的重名率趋势,体现了不同时期人们的喜好变化,给人们提供参考,同时反映出一种有趣的文化现象。

(3)栅栏图

通过栅栏的长短变化体现量与量之间的对比关系,在体现变化的同时兼顾相对完整性和秩序性。


图(10) 该信息图表反映了美国对于战后伊拉克、阿富汗的重建投入情况。可以通过栅栏的长短和数量多少来获得相应信息。

以上三种通常会在一个或明或暗的二维坐标轴的正负方向中应用,比如时间和数量维度。

(4)面积图

通过面积的大小体现数值的变化。


图(11) 《花费最高的城市》瑞士银行的一项调查依据物价、收入、相对购买力等因素,从房租、餐费等多个方面进行考察,得出全球最贵或者最便宜的一些城市。将这些因素以粘土形态视觉化,通过简单的面积/体积大小对比形象地体现出数值关系。

(5)极坐标图

与二维坐标类似,关键的两个参数是点到坐标原点的半径长度和偏移角度。


图(12) 描述自行车的生产、进出口关系,利用地球的经纬线构成极坐标轴,意义准确而深刻。

2 比率关系图

根据图形之间的比例关系表示数值的相对大小。


图(13) 饼状图是最常见的比率图,也有将饼状图加以不同厚度成为柱状图分割从而进行更加丰富的表现,而且横截面不局限于圆形。

参数除了借助数字和图形的视觉化表现,还可以从色彩中找到途径。通过对色彩中色相,明度,冷暖因素的设定,可以进行种类、正负关系以及程度的划分。这种方法多用于不适宜量化以及带有感情色彩或心理因素的图表中。


图(14) 《犯罪大全》用条纹的色相变化来区别罪名,巧妙地与囚服相结合。


图(15) 《NBA200-10赛季主客场比赛日程表》用色彩明度变化区分比赛场次,同时不同色相代表主客场。


图(16) 《男女性身体受接触反应兴奋度图示》 用冷暖色调来区分对于刺激的兴奋度。

  以上举出的都是设计手段较单一的例子,实际设计中更注重的是各个方法间珠联璧合的巧妙搭配综合运用。通过对事件核心信息的把握来合理选择参数,并根据图表的目的、内容及风格来确定参数的视觉化元素,将这些有机结合就向功能与审美相统一的图表设计迈出了一步~


图(17) 《某位女士三个月的手工织物过程图》,这张看似简单的图表以手工物品数量,单个物品的制作时间、总耗时、制作顺序和商品销售流向作为参数,以栅栏条、色彩、线条和地图的应用将它们视觉化并通过巧妙布局达到时间与空间的相互融合。

另外我最近一直在思考一个问题:信息图表在国外的应用很普及,在中国读者中的接受度仍不高,更难以收到经济效益。究其原因,有的人认为国人的素质不够,有的认为现在图表设计的水平没有跟上。我们换一个角度考虑,是否由于图表本身不适于东方人的阅读习惯呢?自古以来我们的先人就创造出象形文字,图画和文字被高度整合,直至活字印刷术的出现,由于工艺流程和技艺的不同,使视觉图形与文字分离。当今重又进入读图时代,人们照搬西方,急于将图片和文字杂交。殊不知中国的象形文字使我们在信息的获取上已如读图识字般便捷,现有的图表形式是否值得考量呢?

目前静态图表设计的网站很多,给大家推荐几个最近在关注的动态图表网站,还没有系统整理,希望能够跟大家共同学习~

交互类网站:

http://labs.digg.com/
收录了很多交互性动态图表的网站

http://elections.nytimes.com/2008/results/president/explorer.html
纽约时报NYTime.com制作的这张动态图表—2008美国票选结果统计图表获得了2008年Malofiej 17国际信息图表设计大赛的Miguel Urabayen Award.

视频类网站:

http://www.lanja.de/
Melih Bilgil的主页,上面有他的一系列动态图表视频,简洁标准的图表风格

http://v.youku.com/v_show/id_XMTQ1MDc1ODk2.html
《Slagsmlsklubben [Sponsored by destiny]》(图表版小红帽),当童话变得富有科技感~

http://v.youku.com/v_show/id_XMTYzOTE3NDcy.html
《奇怪的日本》,视角独特而搞笑

声明:本文所用图表均来自图研所,flicker等网站,有兴趣的童鞋可以去继续了解。另外图表的解释大多是自己翻译的,若有不当之处敬请包涵~

谢谢您的时间 n_n

本文出自Tencent CDC Blog

Written by sevenpad

09/03/2010 at 10:31 上午

发表在 产品相关

Tagged with ,

让人震惊的10个非技术人员无法理解的软件概念

leave a comment »

如果你是在开发消费级软件(Consumer Software),那你必须清楚,在对计算机的理解上,你跟你的大多数客户处在完全不同的等级。当你开始对你的软件进行技术支持的时候,你可能会对这种差距的巨大感到非常震惊。这并非说明你的用户都是傻瓜,只是因为他们没有像你一样在电脑上花了无数时间。下面我总结了一些通过回答我的排座软件成千上万个技术问题得到的经验:

1. 拷贝和粘贴
从我收到的大量技术支持邮件中可以很清楚的看出用户经常重新输入我用邮件发给他们的序列号,其似乎原因是他们并不知道如何(或者说他们能够)拷贝和粘贴文本。千真万确!你可以通过在软件手册中在关于序列号的地方说明如何拷贝和粘贴来缓解这种问题(这样不仅快捷,而且可以避免一些易混淆的字符,比如“0”和“o”)。
2. 网页和本地应用程序的差异
许多使用web应用的用户并不理解他们需要下载并且安装桌面软件的新版本才能使用一些新的功能。你可以通过自动更新的程序来避免这一问题,不过一点你出错了那结果会相当悲剧。
3. 数据存储
许多用户不理解他们的数据是如何存储的,也不知道存在哪里,甚至不知道数据居然是和应用程序分离的。他们无法理解一些数据是存在他们的本地硬盘中,而另外一些居然是存在“云”中的。他们不能理解文件、数据库和注册表的差别。那么当他们在一台新机器上安装桌面应用程序的时候,他们可能会对对无法访问在以前那台机器上创建的文档感到惊奇。因此在你的FAQ中加上关于如何从一台机器迁移到另外一台的说明还是有价值的。
4. 你用到的术语
使用你的用户不能理解的术语常常会让用户非常恼火。比如说,非技术人员完全无法理解什么是“对话框(dialog)”,跟别说“模态对话框(modal dialog)“了。你可以称之为”窗口(window)“。
5. 右键
有些用户没有发现(或许没有想过去尝试)点击鼠标右键。因此你不要把任何功能仅仅放在邮件菜单中或者其他不容易被发现的地方。
6. 并行(Concurrency)
一些应用程序能够处理并行访问(比如客户端-服务器应用程序和web应用程序),而另外一些则不能(比如大多数桌面应用程序)。但是许多用户以为所有的软件在被多个用户同时使用的时候都是安全的。如果你的软件不能实现这一点,可能你需要在你的宣传册上说明这一点从而避免用户产生错误的预期。
7. 什么样的修改可以恢复
技术人员可以非常开心地使用一些软件并观察发生哪些事情。他们通常不会担心“尝试”一些东西,因为他们能够通过“撤销(undo)”、版本控制或者备份来恢复大部分呢的修改,通常他们也能判断一个操作是否不可恢复。非技术人员不会如此自信,因此不会用同样的方式来尝试一些事情。实际上有些人看上去可能会觉得一个错误的移动操作可能导致电脑炸的火光四射。因此通常尽量只做他们理解的传统操作(比如在Windows上他们用Microsoft Office和Outlook),对于复杂的任务需要提供详细的教程。
8. 什么时候需要备份
每隔几天我就会从某人那里收到邮件说由于一个大的硬件故障他所有的数据都丢失了,而且没有在独立的设备上进行备份。有时候这是因为他们甚至没有意识到数据是存储在他们自己的计算机上。你可以在你的文档或者软件中提醒他们需要备份,不过这样没什么区别。历史证明这是绝大多数人不得不学习的教训(包括技术人员)。提醒备份并不会伤害任何人,而且如果你在事情发生之后指出这一点的话还有助于化解用户的愤怒。
9. 他们应该读文档
人们使用你的软件是因为他们有事情要做。不管你是否喜欢,你心爱的软件只是到达终点的手段而已。虽然有些用户可能会读文档,但是大多数人都认为这是在浪费他们宝贵的时间。实际上,从我收到的客户邮件来中可以看到一个不容置疑的事实:有的用户甚至没有看一句解释问题的错误消息提示。这表明你需要写一份清晰和精确的文档,但是你同时需要带着一个假设来开发你的软件:大多数用户不会去读它。这就是为什么我们需要可用性测试(Usability Testing)。
10. 键盘和椅子之间的问题
译注:键盘和椅子之间?你可能会问,这是翻译的啥啊?请看这里延伸阅读:PAEBK,Problem exists between keyboard and chair
缺乏技能的用户常常并没有认识到他们有多么地缺乏技能。这样他们可能会因为他们自己所犯的错误来指责你的软件。在这种问题上只能尽可能地礼貌。如果显而易见客户并没有足够的技能来使用软件,那么你应当礼貌地建议“显然他们的需求并非理想的”,同时向他们提供无条件退款。然而如果你个人提出了相同的问题,那么你需要修改你的产品来更贴切你的用户(改变用户来适应你的软件当然是好的,但是不幸的是对于大多数人来说并不可行)。
英文原文:http://successfulsoftware.net/2010/08/24/10-things-non-technical-users-dont-understand-about-your-software/
中文翻译:http://blog.csdn.net/aladdina/archive/2010/08/28/5846821.aspx

Written by sevenpad

08/31/2010 at 9:50 上午

发表在 产品相关

Tagged with ,

电子商务网站设计常见的8个问题

leave a comment »

目前自建平台的B2C电子商务商家越来越多,但是我发现不少商家都对自己如何建设自己的网站心里都没没谱。一般都是在参照淘宝、当当、卓越或者VANCL,他们怎么做,我们就借鉴过来。但是那些电子商务网站都有自身的定位,他们这样的设计到底适合不适合我们?洪成浩今天就这个问题简单叙述一下个人观点,仅供参考。

从中国目前的电子商务发展来看,诞生了一批以广告推广为导向的电子商务网站,如凡客诚品(VANCL)、好特好商城等。也有一部分老牌的或者新兴的综合实力较强的电子商务平台如亚马逊、一号店等等。细心的用户可以发现,这两类电子商务平台在布局和结构上是有所差别的。那么我们就简单的将国内的电子商务网站分成导购型平台和搜索型平台。下面我就简单的叙述一下这两类平台建设的布局要点。

1:导航如何设置?

相信很对人都对电子商务网站要不要左侧导航而由犹豫。从我的观察来看,要不要左侧导航主要看你网站的品类。如果是类似于亚马逊、一号店这样的综合平台,那么,左侧导航是需要的,这样可以便于用户查询。

如果是品类比较少的品牌电子商务网站,左侧导航不要也罢。目前国际上也流行不要左侧导航,只保留顶部导航的做法。比如Vancl的网站和英国的ASOS,都取消了左侧导航。其目的主要有两个:一是站内品类比较少,左侧导航没有那么多内容。二是为了空出位置增加首页的展示空间,提升关键产品的销售几率。三是引导用户关注主推产品,减少选择空间。

2:重站内搜索还是重展示?

这一点同样是要根据网站自身的经营特色和中国国情来进行参考。

重站内搜索的典型电子商务网站就是亚马逊。它将搜索框做的很大,放在网站首页的最核心位置。相关搜索做的也很完善。之所以这样的原因是:国外的电子商务发展很成熟,用户来带了网站的购买意向很明确。而且国外用户对搜索引擎的使用频率也很高,这也一定程度上左右了电子商务网站建设的布局。

不过在国内,除了几个老牌的电子商务品牌对站内搜索比较重视意外。不少品牌电子商务网站降低了站内搜索权重。比如凡客诚品和masamaso,我上文提到的ASOS也是如此。一方面是因为中国用户已经习惯了菜市场和超市里的叫卖,需要销售引导和做出购买决策,因此需要增加站内广告陈列来引导用户的选择;另一方面也是因为品牌电子商务网站的站内搜索的使用率比较低,所以弱化其作用。

3:B2C电子商务网站是要长首页还是要短首页?

至于长首页还是短首页目前没有一个明确的范例,也没有一个统一的尺度。总体上来看跟自己网站的品类多少和网站结构设计有关。

一般来说搜索导向的电子商务平台可以采用稍微短一点的首页,搜索已经足够用了。然后首页保留3屏左右的区域做促销推荐,来加强高利润产品的销售。比如亚马逊就是最明显的例子。但是也有不少综合平台的首页在3屏以上甚至4屏,3C类电子商务平台多是如此,比如京东和新蛋。有可能是品类相对集中,比较好分类展示。

也有部分网站突破了长首页分类的模式,比如ASOS和onlineshoes,国外的网站采用的多一些。至于什么原因我还没有想明白。有可能是因为使用大图片来凸显主销品的品牌。用更多的文字链分类在来取代了原来的图片导航。这个取决于网站的运营特色和消费习惯,至于国内是否实用,需要实践来检验。

4:用户几步完成购物才算合理?

用户的购物流程越简单,越少越好。中国有句古话:“夜长梦多”,购物流程多了会引起用户流失。目前比较流行的是:“回首-列表页-详情页-购物车-注册页面-订单提交页-订单成功页”的七步购物,比较符合用户习惯,不能再长了。

但是众多B2C商家都在不断的研究如何缩短用户购物流程。比如亚马逊美国,在10月份推出了新功能“Amazon PayPhrase”,买家可以把姓名/地址/付款资料通用一个句子与密码存储起来。结账时,你只需要输入你自设的这个句子与密码即可,在线购物的网民将省去一系列繁琐的填写程序。好特好实现了在专题页内快速订购,不进购物车。这些都算一种新的尝试,效果还不错。

5:如何鼓励用户提交真是注册信息?

相信大家都知道用户终身价值是任何一个电子商务网站都追求目标。而与用户保持紧密联系的最好方式之一就是用户的真实有效电子邮件。尽管我们在设计网站和购物流程的时候,都费劲心思的去设计用户注册的步骤,但我们拿到的还是很多的无效电子邮件地址。我在做我们自己数据营销的时候,发现邮件的反馈率也是很低的,更不要说从外部购买的数据库了。

提升利用户注册信息有效性的有效方式之一就是在用户提交注册注册信息之后,再提供一些小礼品给用户,鼓励其激活 。比如说,提醒用户”请到您的注册邮箱领取我们提供的奖品“,给用户一些小礼物,再诱导其激活手机和留下真实的是收货地址,这样的信息的有效性就会提升很多。

6:如何设计在线客服支持促进用户购买?

相信大家在进行网上之时,都会产品对产品、价格、品质等的咨询问题,这个时候就需要在线客服的支持,就像我们在商城购物需要导购员一样。目前在线客服做的最好是淘宝。因为他有无数的C店主,相当于有无数的在线客服。这一点在B2C上是不现实的。B2C上在线客服一般有如下的模式:

一登陆网站就弹出个大对话框:“亲好,请问您需要什么服务?”。这种程序自带的对话系统要坚决取缔!至少洪成浩进入去买东西就不希望一进门就被问要买什么。
站头或者右侧放置在线QQ或者在线MSN:这种方式比较人性化,但是如果销售规模大了,也无法支撑,适合规模较小的电子商务网站。
免费400电话:导购型B2C电子商务平台的首选。某些品类的B2C平台电话订单甚至占了总订单数的40%以上。可见有一群巧舌如簧的客服人员是很重要的。但是缺点是成本太高,不适合小商户使用。
在线支持文档:美国人最喜欢使用的方式。比如亚马逊和Google,他们会把说明文档做的很详细,让你有问题自己看,没事不要打我电话。优点是成本低,可扩展性好。缺点是对用户的智商要求比较高。
问答专区:普遍适用。真实的用户评论是提升销售额的利器。
7:高效的详情页如何设计?

从我这一年多的实践经验来看,优质的专题页是提升订单转化率的关键因素之一。从卖点总结、到图片搭配、再到购物流程设计,能极大的促进订单转化率的提升。所以,理想的产品详情页应该就是个简化版的产品专题。

一个实用的产品专题页应该包括:产品卖点提炼、详细的产品描述、产品图片的多角度展示、详细参数、产品包装及配件、送货流程、售后服务承诺以及点评专区等。目前来看,新蛋的产品详情页做的比较完善,大家可以借鉴一下。

8:提升客单价及销售转化的常用方法。

用户既然来到了我们的网站,让他们买东西,买更多的东西是我们为之不懈努力的目标。一般来说,以下几种:

搭售:3C最常用的做法。比如相机,裸机本身就没什么利润,只能靠电池啊、内存卡啊、相机支架之类的赚钱。
延保:现在大型的B2C电子商务网站,特别是家电3C类的,都在尝试推出延保服务。国内也有专门做这个的公司。实践实践不长,应该有可行性。这个就跟卖保险的差不多,算平均数了。
相关产品推荐:依靠数据挖掘的相关产品推荐是提升关联销售的有效手段。这一点亚马逊做的是最好的。当然,国内的大部分电子商务网站不具备这个实力,只好靠手动推荐了。最后路子了,如果用户别的啥都不买,还是不能放弃。
电子商务平台建设常见的问题基本叙述完毕了。如果想打造一个高效的电子商务平台,需要电子商务的经营者们根据对用户购物行为的深刻理解和对数据深度挖掘,并且根据互联网的发展来不断的提升和改进。这样才能不断的保持竞争力,实现企业和用户价值最大化。

来源:草根网(www.20ju.com) – 互联网界的读者文摘

Written by sevenpad

08/27/2010 at 10:48 上午

发表在 产品相关

Tagged with ,

常见UI设计模式

leave a comment »

交互设计师在设计线框图原型时,熟知常见的web设计模式很有帮助,做到“心中有数”才能创造出符合需求,用户易学易用的界面来。所谓“没有必要重复发明轮子”,模式往往容易解决常见问题,正确的模式能帮用户熟悉界面、提高效率。

常见的UI设计模式如下图:

下面分别进行具体分析,遇到不同需求的时候就可以选择合适UI设计模式。

01.主体/细节(Master/Detail)模式

主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下,引导他们在类目下高效地切换,这无疑是一种理想的方式。如果主体信息对于用户来说更重要,最好选择横向布局。或是主体部分不仅条目多而且包含信息也多,那也该选择这种横向布局。

举例来说:

Windows窗口属于纵向排布

Mac mail的横向排布

0.2分栏浏览(Column Browse)

分栏浏览也分为横向和纵向两种。用户可以通过它,选择不同的类别点进并逐步引导用户找到需要的信息。

举例:

Outlook采用逐级分栏的界面,用户可以选择进入“收件箱”——>“某封收件”——>“具体邮件内容”

0.3搜索/结果(Search/Result)

搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。

Gmail采用简单搜索

而对于google学术的用户,高级搜索限定更复杂的搜索条件会提炼出用户更期望得到的信息。

0.4过滤数据组(Filter Dataset)

分为横向和纵向。开始定义一些已知信息,之后通过限定条件对搜索后的结果进行再过滤。

51job用户在使用简单搜索输入所需职位后,纵向布局的左边面板提供诸如“发布时间、薪金”等条件,进一步优化信息

以京东为例,多数电子商务网站在用户初步模糊搜索后,提供进一步优化的过滤条件。上图中,京东采用的是横向排列方式

0.5表单(Forms)

表单类型众多,也是最能体现用户体验是否良好的地方。其中包含很多内容,推荐专门介绍表单的书:《Web Form Design: Filling in the Blanks》。

注册信息一般使用表单

0.6调色盘/画布(Palette/Canvas)

调色盘/画布虽然不算最常见模式,但它对于创造图形类文档有着不可替代的优势:比如设计线性或非线性图;流程图;页面布局;制定物理大小的设计/图表或控制布局。

对于设计师来说调色盘/画布这种模式并不陌生,常用软件,例如:Axure、ps都是采用这种方式。

0.7仪表盘(Dashboard)

一个设计完善的仪表盘应提供:一目了然的关键信息,实时数据,易读的图形和操作,清晰的入口和浏览。理论上讲,在一个屏幕下展示复杂的数据本身就很难。

之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘

0.8电子表格(Spreadsheet)

方便用户快速浏览,编辑大板块信息的理想模式。电子表格需要提供下列功能:标准的表格(诸如分类,隐藏/显示 栏目,重列栏目,分组(如果可以)),全局撤销/重做,增加/插入/删除排,键盘导航,导入和导出。

淘宝购物车选择使用电子表格,可以让用户对已选商品进行快速编辑(增加/减少数量,删除等)

0.9向导(Wizard)

对于复杂的或是不常见的流程,向导/快速启动屏幕模式可以有效地导航。

京东上使用wizard快速引导不熟悉流程的顾客完成付款

0.10.Q&A(Question&Answer)

Q&A模式是指用户通过选取相符条件,从而自主找到适合自己的解决方案。Q&A不同于搜索模式,它通常需要了解用户基础上,通过提问来帮助用户弄清他们缺乏经验的在哪里(比如健康保险,抵押,计划,购买)有哪些可供的选择或建议。

上海移动资费导购系统可以让用户通过回答几个问题,可以建议用户选择哪种话费套餐

0.11.平行面板(Parallel Panels)

平行面板屏幕模式可以收起(一次只显示一个),也可以展开(同时显示全部)。这种模式适合组织大量类似或相互影响的信息,让用户在同一页面更高效的获得信息。最佳应用在:需要申请者需要填写各种没有顺序的类别目录。

国外的火车票在不同情况,票价会随之浮动。The Train.com使用堆叠面板,让用户在同一页面下对不同项目进行编辑,又不会觉得混乱

0.12.交互模型(Interactive Model)

交互模型屏幕模式应用在很多交互要素需要与关键项目(比如日历、地图、图标、画布等)进行交互的时候。是一种用户体验更贴近用户心智模型的模式。在日历、地图、线状图、预设可能场景分析(包括计算器),所见即所得编辑器(包括图片处理)时应用效果非常好。

Google的calendar在日历上可以直接编辑提示内容

附加:13.空白状态(Bonus. Blank State)

空白状态指在任何数据输入或进入系统前,应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括:视频,快速教程,帮助提示,安装后的截图。

Wufoo是一个在线表单设计网站,初始后会引导用户建立表单

14.其他模式

还有两种广泛使用但在企业软件很少使用的模式。

– 门户:如果你是市场调研专家,商业需求分析师或是用户反馈调研员,设计门户可以参考“仪表盘”的设计规范和案例。

– Tabs:其实Tab是一种部件,不是一种模式。它为同情境下的数据提供多选一的操作。如果数据结构导致你的设计tab显得过多。有两个小建议:第一,重新考虑信息架构。通过使用卡片分类法(card sorting)或请教一名专业的信息架构师;第二,可以参考“平行面板”的规范和案例。

转载请注明出处:http://www.zhangyq.com谢谢。
参考文献:《Designing interfaces》and 《Designing web interfaces》

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

Written by sevenpad

08/26/2010 at 6:07 下午

发表在 产品相关

Tagged with ,

20 Free Web UI Element Kits and Stencils

leave a comment »

No doubt every web designer has spent many endless hours mocking up web pages, and as such every designer should have a good set of re-usable and uniform Web UI elements that they can rely upon to save them precious time and spare headaches when they are in the initial stages of a web project.

In this article we have 20 completely free Web UI kits and stencils that are perfect for the initial mockup or wireframe stage of a web design project. Most of the kits are editable and the kits are in either .psd, .ai or .png format, but you will also find some Omnigraffle stencils and some kits in .svg format. So, whatever your preferred format you are bound to find the perfect kit for you.

Modern Web UI Set (.psd)

Modern Web UI Set (.psd)This free Web UI Set has everything included in the PSD file in well organized in folders, and fully editable using vector layers in Photoshop, from the button shapes, to the gradients, and text. Having every element editable means you can recreate anything you need that is not included in the file, just by using existing items as your base.
Modern Web UI Set (.psd) →

Massive Web UI & Button Set (.psd)

Massive Web UI & Button Set (.psd)This free UI set contains all of the following elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the psd file).
Massive Web UI & Button Set (.psd) →

Web UI Element Pack (.psd)

Web UI Element Pack (.psd)This User Interface Element Pack in PSD format, contains 19 elements including Loading Bar, Button in normal and clicked state, Button toggle, close, next, previous and paging icon and slider.
Web UI Element Pack (.psd) →

Web UI Wireframe Kit (.psd)

Web UI Wireframe Kit (.psd)This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable.
Web UI Wireframe Kit (.psd) →

Browser Form Elements (.psd)

Browser Form Elements (.psd)Browser Form Elements (.psd) →

Web Page Elements (for Omnigraffle)

Web Page Elements (for Omnigraffle)With the open-source “Bitstream Vera” font set, free icons from FamFamFam and this Omnigraffle web ui set, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders, etc.
Web Page Elements (for Omnigraffle) →

Wireframe Kit (Google Drawings)

Wireframe Kit (Google Drawings)Google Drawings is still in its early and simple form and didn’t have any notable UI kits, until now. These kits have been specifically designed for Google Drawings, and you have a choice of four templates, that include: The main blank template, product detail page, landing page and item list view.
Wireframe Kit (Google Drawings) →

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.
The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats.
Sketching & Wireframing Kit →

Wireframe Symbols (.ai)

Wireframe Symbols (.ai)This download contains the symbol library and a full Adobe Illustrator file with all of the elements spread out on the art board. To install this library just drag and drop the file named “Wireframe Symbols.ai” into your Adobe Illustrator Symbols directory. Once you are in Illustrator go to your Symbols Palette and load the library.
Wireframe Symbols (.ai) →

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)The popular Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics: Ad Units, Calendars, Carousels, Charts and Tables, UI Controls, Form Elements, Grids, Menus and Buttons, Mobile, Navigation and Pagination, OS Elements, Placeholder Text, Screen Resolutions, Tabs and Windows and Containers.
Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle) →

Ext JS v3.0 Stencil (for Omnigraffle)

Ext JS v3.0 Stencil (for Omnigraffle)This is the updated version of the Omnigraffle ExtJS stencil Ext JS. This update contains many improvements and additions, namely that the developers have recreated most Ext JS elements as Graffletopia shapes or groups. This is especially helpful for resizing titles, tables cells, and so on.
Ext JS v3.0 Stencil (for Omnigraffle) →

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)This huge kit, from Liquidicity, contains 165 icons and are available in these five colors: Red, green, blue, black and white.
165 Vector Icons in 5 Colours (.ai, .jpg and .svg) →

Flex 3 Stencil (for Omnigraffle)

Flex 3 Stencil (for Omnigraffle)This Omnigraffle stencil contains all of the Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.
Flex 3 Stencil (for Omnigraffle) →

Twitter Widget Stencil (for Omnigraffle)

Twitter Widget Stencil  (for Omnigraffle)This stencil includes a selection of useful Twitter badges and widgets.
Twitter Widget Stencil (for Omnigraffle) →

Web Designer Toolkit (.psd)

Web Designer Toolkit (.psd)Web Designer Toolkit (.psd) →

Facebook GUI (.psd)

Facebook GUI (.psd)Facebook GUI (.psd) →

Facebook Applications (Omnigraffle)

Facebook Applications (Omnigraffle)
This is a pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.Facebook Applications (Omnigraffle) →

Web Elements Kit (.psd)

Web Elements Kit (.psd)
This huge set of various web elements with 17 easy to modify modules, with each module comes with four different color options.Web Elements Kit (.psd) →

Flex Darkskin UI (.psd)

Flex Darkskin UI (.psd)This beautiful and polished free Flex UI skin is available for free from psdthemes.com, but you do need to signup first.
Flex Darkskin UI (.psd) →

WEB UI Treasure Chest

WEB UI Treasure ChestWEB UI Treasure Chest →

转载:http://speckyboy.com/2010/07/21/20-free-web-ui-element-kits-and-stencils/

Written by sevenpad

07/25/2010 at 11:15 下午

发表在 产品相关

Tagged with ,

世界Web设计最新潮流

leave a comment »

19年前,世界上第一个网页诞生,它没有设计可言,由文本和url组成,样式只有最基本的<h1> <p>。 而如今,Web设计已经成长为独立而庞大的设计门类,一个网页的创造需要多个工种、多种技术的参与,其流程的复杂性和挑战性已经超过任何传统设计类别。

这19年间,网站拥有者越来越清楚自己的目标,而设计师们也越来越理性和专注,人们在不停寻求商业诉求、用户、审美和技术上的平衡点。每一年过去,都有无数过时的风格、特征元素以及实现技术被抛于身后。

设计风潮体现着一个时期内人们对特定的风格、趣味、审美、技术乃至理念等各种模型或特征的追随。新技术的发展、媒介载体的占有量的变化、新网站类型的诞生、全球的设计思潮的影响、行业领军者的转变、明星设计师个体的亮点,这些因素都在推动潮流的变化。你可以回想一下那些曾经风靡一时的模式:复古的像素样式;Google的朴素之风;韩式清新插画风;Flashsite的兴起带来的不规则布局和动画的滥用;Apple引发的对质感的追求;用户和情境意识的觉醒;对细节的关注——圆角和阴影的广泛运用;Web2.0设计风潮中典型的配色和特征元素;空间与层次感的魔术……

09年流行的半透明风格

09年流行的半透明风格

空间和层次感的魔术

空间和层次感的魔术

潮流的涌现,是社会一致化与个体差异化的碰撞,每一次碰撞都推动着这个行业的进步。

让我们来看看这些发生中的变化:

简洁,精简,极简

极简主义(Minimalism )在这一年大热。原因有4点:

1. 手持便携设备的占有量逐步上升,人们的访问方式发生了改变,小尺寸屏幕所需的精简之道反过来影响了整体的设计趋势。

2. Apple公司简洁、专注、充满诱惑力的设计哲学重领潮流,效仿者众多。

3. 来自全球设计思潮的影响:极简、禅意、人文、空间感的“日式风格”这两年在出版界、时装设计、包装设计、工业设计界都颇受追捧。

4. 网站的专业性和针对性在进一步加强,人们选择一个网站一次把一件事做好、做到极致,而非盲目扩张。这也使“精简”拥有更大的实现空间。

03jezthompson.co.uk

极简主义体现设计师对意图、受众、情境的强大控制力。不是简单的做减法就可以了,如果不能很好地把握取舍的宗旨与理由,一个为了极简效果而精简的页面可能看起来庸俗不堪,是为“做作”的留白 。

操刀这一风格需要对作品有充分的自信和理解力,更重视细节和布局,把握恰当的对比、强调。

来自版式和留白的均衡美感

来自版式和留白的均衡美感

极简主义风格非常适用于以图片为表现主体的网站

极简主义风格非常适用于以图片为表现主体的网站

极简主义的风潮中,还涌现了许多单页网站。所有内容都放在一个页面上呈现,通过分屏来巧妙地布置格局,不再有跳转和复杂的站点结构,一目了然。

更有人情味与趣味的设计

运营上的专注使得设计师们可以在设计中投入更多的感情,更有针对性地取悦受众。从保守、冷漠、功利的陈旧风貌中,涌现出更多富有生命力和趣味的产品。

Twitter取得了巨大成功,可爱的小鸟形象深入人心。以动物为主题的logo和网站吉祥物也随之风行起来。

Twitter取得了巨大成功,可爱的小鸟形象深入人心。以动物为主题的logo和网站吉祥物也随之风行起来。

这一变化出现的原因:

1. 是具有针对性的中小型服务和应用类网站大批涌现。

2. 是来自示范者的力量。

3. 是多元化的必然趋向。

4. 是在功能性、规范性和用户体验之外,设计师开始寻找那些从未出现过的、能更深层次打动用户的东西——“一种在感情上赢得人们喜爱的东西”。

亲和、活泼、富有感染力、配色清新、使用自然元素作为装饰物。

亲和、活泼、富有感染力、配色清新、使用自然元素作为装饰物。

曾经很不常见的高饱和度的配色,这种充满动感和生命力的高调设计让人充满惊喜。

曾经很不常见的高饱和度的配色,这种充满动感和生命力的高调设计让人充满惊喜。

精致有趣的细节

www.sourcebits.com

对传统设计的借鉴

Web设计这个年轻的分支在自我生长的同时,也在不停向传统设计汲取营养。在布局与版式方面,设计师们一直在探寻更好的表现手法,所以尝试从传统的设计媒介中寻求灵感。杂志版式布局( Magazine-style Layouts)的从2009年就开始大热,不光大型新闻网纷纷求变,杂志版式布局的Wordpress Themes 也炙手可热。 这一变化对传统设计不仅仅是形式上的追随,更重要的是尝试去借鉴与融合的态度。

Times和Financial Times都是国外老牌媒体,他们的网站布局结合传统纸媒版式有许多新潮的亮点,比如竖式的流体布局、图文混排、头条强调,由标题字号变化带来的层级差别。

Times和Financial Times都是国外老牌媒体,他们的网站布局结合传统纸媒版式有许多新潮的亮点,比如竖式的流体布局、图文混排、头条强调,由标题字号变化带来的层级差别。

而国内的此类网站绝大多数采用的还是非常传统的横向区块布局,信息密度高,版式缺乏节奏和韵律。

未标题-3

由比较可见,国外的大容量信息网站的趋势是降低首页的信息密度,把内容分摊到二级频道;版式上更具引导性、更适于阅读,浏览方式像读报一样更流畅随意。由于广告盈利价值的差别,国内这类网站还是使用信息密度极高的索引模式,所以看起来更像说一份导流量的“黄页”而非可随心阅读的媒体。在信息呈现密度与模式无法改变的情况下,照搬国外的版式布局是非常危险的。

除了在样式上的借鉴,传统版式设计上的许多经典的实现手法也移植了过来,最著名的就是黄金比例和栅格系统(Grid System)。栅格系统的历史有300多年,运用严谨的几何网格来指导和规范元件的分布排列。将传统栅格移植为适合网页设计的系统,不光是创造了一种工具,也产生了一种普遍的审美规范与倾向。无论你是选择遵循规范还是打破规范,都是对它的推动。

960px宽的网页栅格系统

17www_designinfluences_com_fluid960gs

960px宽的网页栅格系统

个体风格带来的变化

谁才代表着趋势?有人认为设计师们所追捧的变化代表了潮流,有人认为Top100的大站才是大势所趋。狡猾一点说,两个说法都不确切,网站运营的Top100并不代表设计上的Top100,出于多种原因,很可能它们是最保守的阵营。但你无法忽略它们对用户/客户的审美及视觉习惯造成的影响。而设计师们虽然愿意挑战和尝试变化,但在面对个人化设计和商业设计时,他们的取舍却往往不尽相同。

巨头和个体们在设计风格一直在互相影响和渗透。所以你永远不应该轻视那些看起来“个人化”和“小众”的创新设计。观察它们的最好舞台就是设计师的blog和profile站。

下面这几点都是从现在小众网站上流行,慢慢被许多普通大众网站设计所趋向的特征。

更大header区,更醒目的logo和标识,字号更大的标题。

内容放得再多再好,但用户记不住“你是谁?”也是白费。更大header区强化了用户对品牌和风格的记忆,让你有更多的发挥余地去表现。

内容放得再多再好,但用户记不住“你是谁?”也是白费。更大header区强化了用户对品牌和风格的记忆,让你有更多的发挥余地去表现。

在背景中使用恰当地纹理。

十几年前,在美化手法贫乏的年代,人们也喜欢在背景中使用纹理,但大多只取得了浮华嘈杂的效果。现在的设计师们学会了理性而低调的使用纹理来制造风格、提升品质和烘托气氛。

两个电商网站:左图是户外服装,使用了粗砺的水泥纹理。右图是婴幼儿用品,使用了清洁柔和的圆点纹理。

两个电商网站:左图是户外服装,使用了粗砺的水泥纹理。右图是婴幼儿用品,使用了清洁柔和的圆点纹理。

把Footer区利用起来

24Snap12

更注重品质,更能抓住用户眼睛的设计

这点变化在和消费挂钩的网站上非常明显。设计师们注重对设计心理学和视觉传达的技巧的运用,使用强调和对比的策略来引导用户的视觉焦点。更醒目的标题、高质量的图片,使用Slideshow来创造更多展现空间,这些手法都在强调那些希望得到用户关注的地方。

Apple网站的专业、直接、有效的界面设计,不光打动了消费者的心,也吸引了众多开发者的效仿,大量App应用网站都以使用Apple风格为荣。

iPhone 4 发布时的Apple.com 首页:一切无关的都被省略了,表现主体被无限强调,它牢牢抓住人们的目光,传达出最直接的诱惑:

Apple.comapple.com/iphone

  • 消费类网站的趋势:使用更醒目的标题,更大尺寸的高质量产品图片,让用户形成感官上的认识,而不仅仅是信息的罗列。
  • gateway.commikeinghamdesign.com

    高质量的商业摄影越来越多地出现在网站配图中。精心处理过的抠底图片配合简洁的整体设计,是电子商务网站近几年的趋势。

    nest-living.comstore.apple.com

  • Slideshow的使用风头正劲。用于在有限的空间内展示更多的信息(通常是为了放下更多大图片), 增加页面的动感和观赏的流畅性。

    在页面里运用可视化图表也是一个潮流,一些表单操作也被加工为可交互的图表。将信息或数据可视化,助读者更深入直观地理解其含义。

    更有效但低调的交互。

    交互在Web设计中是如此重要,为了让用户与界面更好地沟通,许多设计师过度地重视了交互,特别是只关注细节而失败于全局。大量交互行为被过度设计,变成了用户的负担。如果信息能够被更好的匹配或呈现,许多交互是可以避免的。未来,设计师们力求通过优化信息架构和使用流程去减少交互,更成熟地运用情境菜单(上下文菜单),将操作反馈处理得更为隐形和自然。

    交互的设计会向着直接有效、更低调、提升使用乐趣的方向发展。

    coda.co.za 这个网站的交互反馈,非常简洁优雅,效果自然。

    当鼠标移到某张CD上的时候,它信息会通过隐藏右边的CD显示出来。这种反馈比悬浮框更自然。

    与物理世界操作经验吻合的交互体验

    越来越多的Web操作允许快捷键的参与。允许快捷键可以提升高级用户操作效率,增加使用乐趣,同时也是为了更好的向无障碍访问的方面进步,照顾视力不好或无法鼠标的用户。

    原文链接: http://blog.xiqiao.info/2010/07/19/719

    结语:去哪里捕捉和观察趋势。

    相较于国外的这一波波风潮,国内的设计师的行动并不多,许多原因使他们面对这些变化,或保守或滞后。同时,许多生硬的抄袭和模仿也正在伤害国内的设计行业,从Templates (许多是过时且侵权的) 开工、抄捷径的“拿来主义”不光在腐蚀一个设计师的创造力,也在折损着整个行业从业者的价值。

    我希望年轻的设计师尽可能多得去关注国外的专业Blog和作品画廊站(Gallery),低头干活的同时,抬头看路。这样才能在团队中提供自己的专业判断,而不只是一个被动的“美工”。

    专业Blog:

    • www.smashingmagazine.com 可以说是如今全球内容质量最高的Web设计专业Blog。订阅量接近20万。设计师们一定不可以错过。
    • sixrevisions.com 为首的多名技术专家共同撰写的blog,提供大量对Web设计师和开发人员有用的技巧、教程和资源。还有很多前瞻性的分析文章。
    • abduzeedo.com 更新量很大,如果你设计卡壳了,这是寻找灵感的好地方.

    作品共享和灵感采集站:

    • deviantart.com 全球最大的设计师展示和分享创作的平台。其网站本身交互设计也非常有特色。
    • ffffound.com 图片类的delicious服务,一个你永远不可能拿到注册码的社区,但是其中活跃着大量全球一流的设计师和创作。

    Web设计画廊(Gallery)

    designshack.co.uk (可按配色、布局和类型进行筛选)

    reeoo.com (可按配色进行筛选)

    siteinspire.net (可按样式、主题、网站类型进行筛选和排序)

    coolhomepages.com (可按类型进行筛选和排序)

    不写代码——Programmers(16)

  • (本文来自《程序员》杂志10年07期,更多精彩内容敬请关注07期杂志)

    《程序员》7月刊精彩内容预告:http://www.programmer.com.cn/3484/

    Written by sevenpad

    07/21/2010 at 4:45 下午

    发表在 产品相关

    Tagged with , ,