我眼里的视觉与文字

标签: 用研文案 | 发表时间:2011-05-26 13:31 | 作者:lingluo Tony
出处:http://ued.koubei.com

原来把题目定为“视觉与文字”,但是又觉得这题目似乎有点过大,怕用了专业的标题却写出非专业的文章。而我无意暂时也没有能力去对视觉一些细节做极为专业的考究,只希望通过自己一些学习和了解来加深自己对美的判断吧。其实文字本身就是一种视觉语言,它把现实世界的所有事物,都以字的形式来进行了表现。曾经读过一篇文章,说在传统的版式设计中,设计师们更喜欢做英文的排版,因为从视觉上来看,英文很容易形成线和面的关系,且字母有节奏感,比如aby这三个字母放一起有高矮区别;而中文相对来说,单调、孤立、不流畅。特别有道理,但在此之前,我在看到一个页面只会说好不好看、怪不怪,从来没有想到过这些原因。好的网站设计需要视觉和文字的和谐,下面就是我的一些理解,当然其中也有向设计师讨教后的结论,若有不对,也是学习过程中的不可避免的吧:)

1、一致性

设计在同一产品(甚至同类产品)中应保持一致性,这样可以大大降低用户的理解成本,使用户快速上手,增加用户的使用率。这个一致性包括内容、颜色、形状、操作方式等,比如在不同的页面使用同样的翻页等,既可以降低成本,又能帮助用户形成良好的习惯,到一定的程度,甚至会提升一个品牌的认知。

  • •采用统一样式、大小的button(颜色、文字的内边距等);
  • •文字采用统一的字体、字号、粗细等(根据不同的内容等级来决定);
  • •链接不同状态文字的颜色统一(link\visited\hover\active);
  • •采用统一的标点、间距、边距、行高等。
    (具体可见视觉规范)

但,文字的位置要符合会员的整体阅读习惯和整体视觉效果,不一定是固定放在某个位置的。如下图,同样是“更多”,前者由于排行有3大类,一行已经占满,所以放在模块的右下角;而后者是顺着会员的思路,在右上角给出提示。

2、色彩

用户看到一个网站,首先冲击他眼球的就是界面整体的色彩,然后才是其中的内容、文字等。就好像听一首歌,首先你肯定是被这首歌的旋律所吸引,然后才想要去听清楚它的歌词,进而引起共鸣。营销学中著名的“7秒定律”就有说到:消费者会在7秒内决定其购买意愿,而在这短短7秒内色彩占67%的决定因素。所以用户对页面中色彩的关注度是非常高的,有效的运用色彩来区分信息的级别、分类等,有助于帮助用户对信息和操作产生关联,减少用户的记忆负担。

  • •同一页面中一般采用1种主色调,1-2种辅助色,再加1种小面积的点睛色,即同时出现的颜色一般不超过4种;
  • •主色调的选择由产品性格决定。色彩也是有性格和情绪的,因此会吸引不同性格的人,理解不同的情绪。在设计页面之前,经常听到有PD说我希望这个页面的风格是大气、时尚、活泼的……我想设计师一听到这些词应该马上就会在脑海里蹦出几个跟这些关键字匹配的色彩。已经有许多的视觉设计前辈,根据长期的经验和用户调研总结出了类似下图的表格,根据这些人们已认知的色彩情感,会更容易引起用户的共鸣和信赖感。因此,设计师在考虑色彩时一定要依附于产品,并注意对用户心理和文化的影响。比如口碑目前的主色调采用橙色,所代表的就是热情、活跃和热烈的感觉;

  • •合理搭配颜色,使用对比度明显的颜色,指导用户看到最重要的信息,如在深色的背景中使用浅色的文字;
  • •根据不同的产品使用场景,选择合适的颜色,如管理页面经常使用蓝色。

3、图形图标

我一直认为好的图形表达是优于文字的,有时候大段的文字解释不仅不能给用户带来帮助,还容易影响页面的美观;相对于单纯的文字,图形以及符号化的图标更符合用户的认知习惯。要表达一种信息,往往一张图片或一个标识更能让不同用户理解与接受。适当的使用图形与符号化的图标,会让用户很自然的建立起认知习惯。

但是图形如果没有把内容表示清楚,则会适得其反,给用户造成理解上的困扰。很多情况下,我们好像都很喜欢做一些很炫的icon来表达某些内容,这些的确会起到一定的吸引性,但是最重要的一点是:不让用户思考,要够直观,够明了,不对用户理解内容产生干扰,如果做不到,那还不如不要。所以:

  • •图形图标表意要清晰、明确,要有高度的概括性与指向性,让用户能够快速联想到对应的功能和操作;
  • •同类信息的图形图标,在形式和风格上应尽量保持一致;
  • •图形图标的使用要注意场合,避免滥用,仅在需要突出重要信息,用户可能产生理解偏差的情况下使用;
  • •图形图标要尽量与文本结合使用。

视觉是文案隐形的幕后推手、是文案的媒婆,2者有机的结合才能讲述给会员一个完整的故事。前面是我理解的文案在视觉中的规范,而这些则是我理解的文案与视觉更深层次的关系。他们不是简单的相互解释,而是用各自的语言来创造想象的空间,用清晰、有创意的文案和设计来引导会员的点击,教会他们在网站的习惯。

相关 [视觉 文字] 推荐:

我眼里的视觉与文字

- Tony - Koubei UED
原来把题目定为“视觉与文字”,但是又觉得这题目似乎有点过大,怕用了专业的标题却写出非专业的文章. 而我无意暂时也没有能力去对视觉一些细节做极为专业的考究,只希望通过自己一些学习和了解来加深自己对美的判断吧. 其实文字本身就是一种视觉语言,它把现实世界的所有事物,都以字的形式来进行了表现. 曾经读过一篇文章,说在传统的版式设计中,设计师们更喜欢做英文的排版,因为从视觉上来看,英文很容易形成线和面的关系,且字母有节奏感,比如aby这三个字母放一起有高矮区别;而中文相对来说,单调、孤立、不流畅.

视觉隐藏内容

- iVane - 进步博客
组内做的一个分享,主题是“视觉隐藏内容”,主要关注隐藏的方式、方法及每种方法对可访问性的影响,并着重分析了a & label元素的可访问性,介绍了使用clip来做视觉隐藏. 内容有点散,但主题明确,其他组的几个同事来要PPT,现在传至slideshare,错误之处,请指正.

视觉隐喻碎碎念

- - 互联网的那点事
在我们做界面设计时,如果使用用户熟悉的来自真实世界的物体的图案来作为界面元素,. 用户会比较容易地学会产品的使用,这种手法就是视觉隐喻(metaphoric). 隐喻范围可以从整个界面到工具栏上的一颗小按钮. 整个界面都用隐喻的设计方法,最典型的例子就是游戏,整个现实的场景搬到游戏里面,用户一看就知道,.

“后视觉设计”时代

- - 阿里巴巴(中国站)用户体验设计部博客
一直想透过某种方式,把自己对视觉设计的一些理解和看法梳理一番. 同时目前团队里的视觉设计师,大多有一些共同的苦恼、疑惑和对前景的不明晰. 希望我的这些理解和看法对大家有所启发,能让大家对自己所从事的职业有更深入的思考.  这是我在某设计师群里说的一句话,里面有一个多年从事运营视觉设计的同学,立马跳出来反驳,最后到了只差骂:“你才死了.

文字雲

- Sopp - 網絡暴民 Jacky's Blog
看到這個 HTML5 文字雲:文章詞彙分析機 ,便餵以本站之 Feed,並拍照留念.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

Mobile app视觉传达的魅力

- 青蛙小子  - 所有文章 - UCD大社区
时下移动开放平台众多,苹果、谷歌、微软、诺基亚都有自己的移动开发平台,想让自己的产品在众多的开放平台中留住用户,只靠品牌是不够的,产品用户体验比品牌更重要. 我们可以充分的利用移动设备的特性,运用视觉传达的表现方式,去创造具有优秀的用户体验的app应用软件. 在如今这个智能手机时代,大屏幕高分辨率触摸屏的智能手机在市场上即将呈现普及的趋势.

人眼启发视觉搜索引擎

- feng823 - Solidot
Google上周宣布将支持声音和图片进行搜索,但一家创业公司在图像搜索方面走在了Google前面. 源自伦敦帝国学院研究项目的创业公司Cortexica,开发出视觉搜索工具,通过手机拍摄产品照片,它会自动呈现价格信息. Cortexica已经发布了一个用于比较酒价格的工具WINEfindr. Cortexica的视觉搜索技术是受到了人眼视觉系统的启发,它能识别出一个目标的关键特征,不受方位、大小、光线亮暗的影响.

视觉错觉:盯住红点

- Steven - YesKafei Daily
视觉错觉.令人害羞的影子艺术. 视觉错觉:裁判可以原谅的,因为她在他后面. 国庆佛教文化系列之二十八:智慧之灯,点亮心灵 (@longquanzs). 苏小红 你转过身来好吗_短篇小说_前后左右-冷笑话 未解之谜 野史趣闻 灵异 雷人 糗事 网络热门 大杂烩 (@qhzy8). 申请美国名校被拒绝理由大盘点 (@diylx).

合理的交互,恰当的视觉

- 地安门城管 - 互联网的那点事...
交互设计和视觉设计的重要性,业内已经达成了共识. 最近看了iphone版海豚浏览器的设计方案,正好借机再陈述一下相关的设计原则. 1.交互设计受限于硬交互(硬件本身的基础交互属性),设计要在硬交互的基础上进行扩展. 2.视觉设计最首要的任务是辅助交互设计,进行恰当并谨慎的视觉引导. 3.视觉愉悦性是很重要的一部分,但是视觉不能对交互体验产生阻碍(如不恰当的隐喻、错误的视觉引导等).