Archive for the ‘ Web Design ’ Category

开展全面的网站评估[转载]

作者:一叶千鸟

有时会被问到“看看XXX网站如何?”之类的问题。
谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功能满足都成问题,其他就没必要谈了。
举例分步说明,注意先后顺序。
第一,没有足够应用经验,不可能了解网站的功能和结构,如何做出判断?
初步印象:
是否有眼前一亮的感觉?任何元素都可能抓住用户,先入为主。
能否尽快搞清楚,网站提供何种服务,并且能尽快明白,有无注册的必要?
信息可视化:
好页面似一杯鸡尾酒,具有层次感,远近都能看出效果,而不是一坨浆糊。
呈现是否平衡?不相干的元素之间,也可能建立联系,很多不协调的根源,就在这里。
尝试在纯UI的角度深度感知,整体氛围是否和已了解的概念搭配?比如够不够热闹、有没有品位。
通过模块能否分辨出网站?不看Logo还认识网站么?检查内容+界面的相关性。
导航系统:
多深入几级页面,是否清晰自己的位置?
多纵横逛几个来回,是否已经迷路?

 
第二,假设对产品有了初步了解,确定自己需要此服务,如何细化尝试?

功能结构:
主体逻辑是否清晰?思路是否顺手等习惯问题。
能满足自己多少需求?只是衡量产品的成熟情况,但不是好坏关键。
有多少创新?让自己意外了,统统记下来。
设计细节:
交互设计,挑主要业务流程进行测试,主要看逻辑是否混乱。
视觉设计,不仅仅是图形,字符效果同样需要推敲,也属于深入信息可视化的范畴。
信息设计,内容有没有生命力?情感化等同于催化剂。
客户端技术:
交互流畅程度,大量的Ajax技术应用会影响效率。
搜索引擎的优化工作,可以借助Alexa和Google两大工具。
代码质量,看几个代表性页面就可以。

 
第三,在竞争对手的角度,如何提炼总结?

产品跟踪:
更新节奏,改版中可能会暴露发展方向和一些好创意。
解决方案,重要的不是完美,而是统一,体系才能形成壁垒。
数据挖掘:
找准用户群,并在运营的角度进行细分、锁定各自特征值,提供可修正的参考依据。
关注用户忠诚度,不满意就意味着寻求改变。
用户活跃程度和活跃倾向,也是值得参考的重要数据。
我经常参与测试产品,不管是自己的、别人的、感兴趣的、不感兴趣的、见过的、没见过的,大致都可以使用同样的方法体系。把事情做彻底,目地就是搞清楚设计意图。
三个部分阐述,其实也暗合用户理解的本能、行为、反思三层结构。通常,人做事的能力和态度具有相关性,从前边的工作成果,基本上就能评估出后续工作的斤两。

与网页设计相关的线上演讲报告

1、教你如何有效组织跨浏览器的样式表

2、网页设计师可以从平面设计中学到什么

3、web设计最佳实践

4、平面设计——被遗忘的web标准(非常漂亮的一个slideshow)

5、web界面设计

6、栅格系统、CSS和web标准

7、2009网页设计趋势

网页设计中的栅格系统(grid systems)笔记

学习链接:

http://www.om19.cn/2009/03/31/vertical-rhythm-and-the-incremental-leading/

http://ued.taobao.com/blog/2009/06/29/vertical-rhythm-and-the-incremental-leading-2/

 我的感觉,简单来说就是使网页的视觉外观在垂直方向上更整齐更有韵律。说来惭愧,以往本人的做法是到了要拆页面的时候再通过初略计算来达到页面各元素整齐划一的效果。按说,这样也没什么不好,至少可以达到一定的目的,但最大的缺点是效率低下,样式表混乱,甚至是重复定义。假如能在拆页之前先规划好,统一写入reset.css,想必会好很多。

在网页里,垂直韵律应由三个因素控制:

字体大小(font-size)

行距(line-height) 参照《字体、排版简明入门》 中行距这一节
 
间距(margin,padding)

认真考量这三个因素的值,才能实现垂直韵律。

设行距为 dl px ,设垂直方向上的间距和为 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假设基础行距为k px,则
n*k = dl + ∑ds (n为自然数) 即行距和间距之和应当是基础行距的倍数 ②
由方程①、② 得出:

行距和全部垂直间距之和为基础行距的倍数

http://ued.taobao.com/blog/2008/09/17/grid_systems/  网页的栅格系统设计

grid systems_001

当A=40,n等于不同数值时W变化的数值表格 :

grid systems_002

只要保证一个横向维度的各个区块的n值相加等于24,则即可保证页面的宽度一定是950px。然而,950px的宽度也恰好就是当n=24的时候,W的宽度值。由此我们得出以下的应用模式:

grid systems_003

http://ued.taobao.com/blog/2008/10/22/grid_system_research_1/   网页栅格系统研究(1):960的秘密

http://ued.taobao.com/blog/2008/10/22/grid_system_research_2/   网页栅格系统研究(2):蛋糕的切法

http://www.yeeyan.com/articles/view/snlchina/3570    30个最顶尖的基于栅格系统的博客网站设计

http://ued.taobao.com/blog/2008/10/28/grid_system_research_3/    网页栅格系统研究(3):粒度问题

http://lifesinger.org/blog/2008/11/grid-system-4/    网页栅格系统研究(4):技术实现

http://lifesinger.org/lab/2008/grid_design_tool.html  栅格化工具

 另一些声音:

http://www.twinsenliang.net/skill/20081109.html    网格(UED所谓栅格化)方案生成器

网页设计中的鼠标滑过效果:最佳实践与范例(译文)

原文地址:http://www.spoonfeddesign.com/hover-effects-in-web-design-best-practices-and-examples

本文译者为little_fleur。译文只供网页设计爱好者分享学习,转载请注明原出处和译者,谢谢。本人翻译水平很一般,翻译只为学习之用,有不足之处,欢迎留言交流。

Hover Effects in Web Design: Best Practices and Examples

设计存在于细节之中。无论从事哪个领域的设计,你总会听到这句话,因为这是真理。无论是多么微不足道的细节对于整体设计效果都会有直接的影响。这个结论在网页设计中同样奏效。从两个界面元素之间间隙的大小到网站头部的尺寸都将直接影响整个网站。还有一个重要的细节就是鼠标经过的效果。可用性是导航条的关键。鼠标经过的效果不仅起到装饰网页的作用更重要的是能够提高网站的可用性。为什么?因为一个好的鼠标经过效果将告诉用户他们正在关注的链接焦点。

在本文中,我将总结出实现鼠标经过效果最好的案例和技术,用30个实例来展示出鼠标经过效果的妙处。

用渐变色实现鼠标经过的效果 Gradient Hovers

看看下图的导航例子就能明白Gradient Hovers的意思。未获得焦点和未被选中的标准按钮,自下而上被一种从深色到浅色的渐变色填充。当获得焦点时,渐变色反转,从浅色到深色填充。这个效果使获得焦点的按钮区别于标准按钮,同时又给整个设计增加了深度。将两个按钮放在一起,你可以很容易分辨出它们的差异。这就是设计者最需要实现的:鼠标经过的效果必须易于辨认。

clearspring

渐变色按钮,获得焦点时转为实色 Gradient Button, Solid Color on Focus

另一种值得注意的通用导航,采用渐变色的普通按钮,当鼠标经过获得焦点时,由实色填充的按钮区别开。

miro

采用两种渐变,一深一浅 Two Different Gradients, One Sharper than the Other

还有一种效果主要是采用同一方向的两种渐变色来实现。普通按钮的渐变色采用浅色,当鼠标经过时则替换为深色的渐变。这种效果的运用可以在apple.com看到。

apple

模糊效果 Blur Effect

当面对更大的界面元素或图片链接时,获得焦点时采用模糊效果是不错的方法。这种效果很牛,尤其是其中的细节更能提高网站的易用性。看看下面这些网站是如何用模糊效果来展示获得焦点的图片的。值得注意到是,这些模糊效果都是轻微的以确保图片内容可见。

在下面的例子中,鼠标滑过的效果是用于各个文件缩略图。留意一下缩略图上的标签。模糊效果有助于用户将视觉焦点从图像转移到白色的文字上。这个一个非常好的可用性特点,视觉效果也相当不错。

45royale

而在Best Web Gallery(一个非常不错的网页设计showcase站点——译者注)这个网站,鼠标经过时图片的模糊效果有助于用户将视线集中到大的预览图。

bwg

 颜色对比是关键 Contrast is Key

对于一个好的鼠标经过效果来说,最重要的一点是颜色的区分,尤其是反差对比。当鼠标停留在一段链接文字上时,文字的颜色应该跟普通文本的颜色强烈区分开。为什么?呵呵,当然是因为颜色对比强烈的链接有更好的可用性并且对于用户来说更方便。

以下是文本颜色反差的好例子。橙色文本跟周围的白色文本很好的区分开来,同时又与网站的主色调遥相呼应。Staying within thecolor palette of the entire design is something to keep in mind.(意思明白就是说不出来。大致就是设计作品时最好不要脱离整个设计的主色调。——译者

ninelion

讨论完文本的颜色对比,再看看按钮的背景颜色。看下面的这个站点,Bartelme Design,就将按钮背景颜色的对比处理得很好。正常的按钮使用淡蓝色的背景。当鼠标经过时,则采用深蓝色。它们都是蓝色的,有足够的一致性,同时又具备足够的对比度使用户区分它们。

bartelme

有颜色(彩色),无颜色(黑白) Color Off, Color On

另一个很棒的技巧是当一个页面元素处于正常状态时黑白显示,鼠标经过时则变为彩色。还有一种技巧则是为鼠标经过时的导航条加上径向渐变(radial gradient)的发光效果。

第一种技巧Pixelmator网站为我们提供了很好的范例。在右侧的按钮栏中,图标被用于辅助按钮。当按钮没有获得焦点时,图标是黑白的,而当鼠标经过按钮的时候,图标则变成彩色的。

pixelmator

至于第二种技巧,标准按钮为实色填充而鼠标经过时的按钮会有一个渐变色的发光效果或者高光效果,看看下面的例子:

首先,让我们再次看看Best Web Gallery网站。在这个设计中,按钮使用了和网站头部相同的颜色。而当鼠标经过时,这种填充色周围添加了一圈由明亮的色彩渐变而成的高光。RSS图标在正常情况下是暗淡的,但是当按钮获得焦点时就变成了橙色的。

bwg2

书摘

subtraction-development

 

加法:憑空猜測需求,還要有求必應,最後功能冗餘。減法:先做用戶研究,確定真正需求,然後對症下藥。

 

 

其極簡的網頁設計風格漸漸流行,但模仿者似乎只得其形不得其神,忽略了設計背後的成功因素。Google始終專注核心功能,那頁面設計只是恰如其分地表現了 Google「重在搜索」的公司理念。沒有功能面的複雜,就不能突顯使用面上的簡單。沒有 Google精準的搜尋結果,那不過是一張簡陋的頁面。這種「設計追隨功能」的思維,才是那頁面為人稱道的原因。

 

沒有設計師對字型﹑排版等細部的掌握,是不可能造出這種大氣而細膩的清新風格。減少介面元素並不能達到真正的「簡單」,如何設計出在使用上更符合直覺的介面,才是「簡單」背後的真諦。

 

最簡單的設計,往往是從複雜的體系中整理出來,重新思考,方有所成。簡單無關多與少,可能有些事物永遠也不可能簡單,如果強制它「簡單」則有些目光短淺,因為它可能對使用者並不是最合適的。在交互設計中,好的介面並不需要簡單,影響著用戶體驗還有大量其他因素,設計師們,盡你最大的努力去改善用戶體驗吧。

在纯粹审美与真实需求之间,是一道鸿沟。

说一千道一万,最后还是得做企业网站。看来要想继续在这行混,我就无法回避这东西。鉴于我目前的对于企业建站的厌恶和偏见,我决定还是少说为妙。就比如我以前对自己所在的10000***多少带着一些不屑,但是离开之后回想起来,发现他们并不是不注重用户需求,只是光有需求是不够的,作为一个运营者,必须在真实需求与盈利之间找到一种可发展的良性循环。所以有些事情,需要静静观察,过一段时间再下结论。

无法接触真实的用户和真实的需求,这是我作为一个美工的悲哀,也是企业建站模式的悲哀——永远停留在想象中。我无法得知用户怎么思考,无法得知真实行业中真实的业务逻辑,无法做出真正的好的作品好的应用来满足真实的需求,因为泛滥成灾的企业网站永远只是一个摆设,无论是外表粗糙也好,精致也罢,都无法改变它的本质——白菜价的企业网站必然有其之所以白菜价的理由。

无论多么优秀的技术如果无法为真实的需求服务做出真正有价值的技术应用,再优秀也是枉然。

process

一个完整的流程

 

wangwang

给广大网页设计界新人和水平长期停滞不前人员的一点建议

如果你是新人和水平一般的设计师请往下看。

  一、现在国内从事网页设计的人员越来越多,有不少新人会担心自己没有工作经验,和成功的作品案例,难以进入这一行业。确实,随着这几年设计师的资源积累,企业对新人的要求也会越来越高,工作经验当然是考虑的一个重要因素,但如果应聘者平时有不错的练习作品、草稿、想法等等,也会引起一些企业的关注和兴趣,他们会认为你在短期内有很大的提高和突破空间,从而选择你!

  二、可能国内众多普通的网络公司里面的网页设计人,会发现从事该行业时间不短,但水平不见拔高,和国内众多高手相比,差距甚远,又找不到什么好的提高办法,想进优质的设计公司又不容易。

  如果你是以上两种人的一种,如果你想在这个行业有所成绩,想成为高手,给你一个建议,不妨从临摹优秀的网站界面作品开始(这里所说的,都是限于平时练习学习,并非运用于商业作品当中,Photoshop没学好的新人还是先去学好这个软件)!

  你可以选择你认为不错的网页界面作品,进行模仿,相信在你模仿的过程当中,会发现很多平时自己不注意的问题,风格的变化,色彩的运用,按钮、字体的等等。对于那些长期受那种大众化风格困扰的设计人员来说,更是一种突破!建议大家临摹时多选择一些欧美风格的作品,因为他们在页面细节的处理上非常多,非常值得大家学习!

  联盟近期正在不断收录一些国外优秀网页设计师的界面作品,可以做为学习参考(http://68design.net/Appreciate/Interface/list-1.html

  希望有参与练习的设计师可以将你的练习稿发到社区来,进行交流,你可以建立一个自己的练习作品专贴,相信这也是对你的水平提高的一个见证,也可以让联盟、广大设计师、和企业关注到你!(发贴时尽量将原作品地址也贴出来)

  春天到了,该动手了!

归纳法推导配色方案网页

年关将近,公司一切计划进入搁置状态。继续年前漫无目的的学习。今年过年街上显得比往年热闹,所谓的“年味”,大约就是这空气中不时弥漫出来的香火味道和冷风中人群散发出的温暖气息。
在腾讯的用户体验blog看到一个旧文,大致是用归纳法通过符合某种氛围的图片来确立网页或者说产品的配色方案,这个是自己一直以来非常有兴趣的一个命题。毕竟配色对于一个网页或软件产品来说,是视觉上非常重要的一个环节,可以说直接影响了用户对该产品的第一感觉,有没有归属感?与自己期望寻求的是否符合?而设计者通过自己对颜色的直感来搭配,结果往往好坏参半,有时是颜色配对了,氛围错了;有时是氛围对了,配色却还有所欠缺。所以引入图片作为参考这种做法对我来说尤其有说服力。一般来说表现某种特定场景的优秀摄影图片,配色往往非常和谐,更重要的是它真实再现了某个场景中经常出现的色彩元素,而反过来,这些经典的色彩元素很轻易地就能够使人们在头脑中映射出某种氛围或场景。就这点来说,引入摄影图片来辅助网页配色确实是妙不可言。
转载这个文章,原文出处
《是牛粪还是佛祖?浅谈图片投射方法的应用》
  一次,佛印也东坡先生一起聊阐,东坡先生突然说:“我在打坐的时候,用我的天眼看到大师是一团牛粪。”佛印不以为意,只是淡淡地说:“老衲打坐时看到居士则是我佛如来。”东坡先生由此洋洋得意,事后却听苏小妹说:“哥哥,你难道不知道一切外在事物都是内心的投射?你内心是一团牛粪,故看别人是一团牛粪;大师内心是佛祖,故看你也是佛祖。”
  一个有趣的故事,引出了下面将讨论的“投射”概念 ——一种洞悉人心的方法
  一 什么是投射
  在心理学领域,投射是一种间接的询问调查形式,研究者利用一些无序的、模糊的刺激引导人们去回答问题,探测人们不自知的人格特性、被隐瞒的态度等。著名投射测试有罗夏克墨迹测试(RIT)、绘树测试、主题统觉测试(TAT)等,主要用于测试人格,但需要专业的研究人员来操作。在广告、品牌等市场研究中投射方法也被广泛使用,而且相对简单和实用。调研人员采用第三人提问、联想、填空、看图造句等技术,收集用户对广告、产品的态度、认知、消费的潜在动机等。下面具体介绍图片投射的应用方法。

01
罗夏克墨迹测试图

  二 什么是图片投射

  图片投射技术是指采用一系列图片作为投射工具,分析用户对这些图片的反应和理解,帮助获得人们内心想法。

  在市场研究中运用图片投射技术,主要有以下几个方面优点:(1)形式较新鲜活泼,敏感度较低,便于营造有趣轻松的氛围,使被访者处于放松状态,更容易表达出内心想法;(2)图像是感性的、直觉的加工,不同于言语理性的、逻辑的加工。图片投射将被访者从理性思维中拉开,更深入地挖掘其情感及喜好;(3)对于一些受教育程度不高或习惯图像思维的被访者,图片可以突破言语表达障碍,辅助思维并传递他们的想法。

  市场调研中,图片投射常常用于探测用户对于品牌的认知、对产品的潜在需求和偏好等。例如一个汽车品牌经过一系列包装上市了,厂商希望了解该品牌的概念是否能很好的传达给消费者。调研者给出代表高贵、经济、廉价、结实、轻便、可爱等一些列图片,让消费者从中选取他们认为与该品牌汽车类似的图片并解释他们选择的原因。使用这种方法就可以得到用户对某汽车品牌从形象到功能的认知和情感信息。

  图片投射不仅可对已包装好的品牌进行测试,也可在最初时进行指导品牌的设计。设计中心在产品视觉风格和logo设计时常使用图片投射的方法,例如在Hummer视觉设计前通过图片投射收集目标用户对于TM的产品认知和深层需求进行风格定位,在QQ秀商城视觉风格设计时通过图片投射收集目标用户对于“时尚”感的理解以及视觉偏好等。

02_b
TM2008视觉风格推导

05
QQ秀视觉风格推导——主色

03_b
QQ秀视觉风格推导——质感

  三 操作过程的注意事项

  1 选择图片

  投射测试的目的通过图片刺激来帮助用户挖掘和表达内心的想法,作为关键的刺激物,图片的质量直接影响测试的结果。图片的选择需要紧紧围绕测试目的。以QQ秀的视觉风格为例,调研目的有两个,一个是收集用户对“时尚”感的理解,一个是将时尚分解到不同的视觉元素上。因此准备了两个图库,一个是有实物场景的图库,包含生活态度、衣着装扮、家居装扮三类图片来投射时尚概念的理解;一个是抽象的图库,包含不同色彩丰富程度、冷乱色、不同质感的图片来投射用户在视觉元素上的偏好。另外被选图片的内涵要尽量单一,不可因为其他干扰因素转移用户的注意。

04_b
具象图库投射“时尚”概念理解

06
抽象图库投射视觉元素上的偏好

  2测试形式

  一般采用焦点小组的方式来进行图片投射的测试,一是因为这种方式能够节省调研时间,快速得到多个样本的结果。另一方面小组的互动形式可以激发用户的思路,有利于在深度和广度上的挖掘。

  3结果分析

  图片投射测试是一种定性分析。在分析时,除了关注被选图片之外需要关注用户对选择原因的解释。图片在选取时无法完全排除其他干扰因素,用户可能因为干扰元素选择了图片,那么我们不可以将其作为结论。另外,如果选择的原因是完全来自个别用户自身的经历,因为没有代表性,我们也不可以将其归纳到结果中。

  在归纳总结时,我们常常关注集中趋势,例如在“时尚”感的解释中,一组用户中大多数都选择了代表“动感活力”的图片,那么我们可以认为该类用户对于时尚的理解为“动感活力”。