关于网页标题的视觉设计方法和技巧

写在前面

  标题党是网络上一小撮利用各种颇具创意的标题吸引眼球,以达到各种个人目的网民们的自发性组织。其主要行为简而言之即发帖的标题严重夸张,帖子内容通常与标题完全无关或联系不大。 ——摘录自《标题党白皮书》

  引用以上网友总结,是便于大家对“标题党”形成普适的认知。本文并无心作弄各位,吸引眼球也只是一种尝试。希望抽空读过,品味个中滋味,以对生活、设计的趣味去激发设计的动力。就好像《情感化设计》中所说的:反思水平的设计应当是给人以回味和思考的……

  以下三段式行文,逐步展开:
  A 就事论事,看“标题党” 
  B 看到好的一面,用户需求 
  C 回归,且说标题设计

A、就事论事,看“标题党”

  所谓“标题党”,具有以下特性:
  *标题具有震撼力(或许含有色情、暴力的字眼);
  *标题具有较为明显的误导或能够引发读者联想;
  *内容上形形色色,但空洞乏味,往往无实际价值;
  Like this:

【全裸模特写真】

由“标题党”谈开去……

【沙滩上美女走光图】

由“标题党”谈开去……

 

【半夜偷拍女生宿舍】

由“标题党”谈开去……

  以上为较为典型的“标题党”行径。其内容不高端、价值低,不利于积极、健康的站点氛围建设。而往往起点击量颇高,受到网友所不齿。因而“标题党”特指此类贬义范畴,莞尔一笑的同时透着无奈。这里希望大家带上黄帽子(指短时间内集中关注事物的优势、好处的一种思维方法)来看待它,去伪存真,暂将此种采用标题/正文的方式,称之为“标题模式”。

B、看到好的一面,用户需求

  时下,“标题模式”大行其道于门户网站、论坛、Blog等互联网平台。
  Everything in existence is reasonable.每一种社会现象的产生也都是有原因的。当我们透过现象看本质,看到其可取的一面时,不难发现:纵观标题模式的产生,源于人类的认知特性,而当前社会的信息大爆炸以及互联网这个特殊温床更刺激了它的发展、扩大了它的影响。“眼球文化”孕育了“标题模式”。

  在生活中“标题”是一种姿态。它能使我们在第一时间了解文章的主要内容,甚至也涵盖了目标读者、作者态度,而人们往往只对标题中的那么一两个特殊的字眼感兴趣。哦!是的,只是选择他们最先看到、看上去可能正确的内容,满意即可,便立即操作……于是,点击产生了。再往下想,却发现这一两个关键字眼可能渗透了很多元素。“xxxx深圳xxx;xxxx可用性xxx;xxxx互联网xxx;xxxx校花xxx”也许这些便是吸引你的那些标题!有没有发现什么有趣的?是的,也许可以大胆的假设:“深圳、可用性、互联网、校花”便是对你:一个关注此类标题的用户,最好的注释。谁知道google推出的邮箱服务是否也受了类似思路的影响呢?

  在网站首页,一眼望去你能所见什么呢?只有“标题”。因而用户也只好通过标题去勾勒这个站点,它甚至比Banner上一句引导更为生动有效。或许这些标题,便构筑了门户重要的站点氛围。又或者论坛,每个版面[…大标题1、大标题2(…小标题1、小标题2、小标题3…)…]的不断嵌套,构成了版面结构。因此也可以看到,标题的存在也往往是相对的。

  换言之,对于存在于互联网中海量的信息,用户确实需要这样或那样的“标题”。俗话说“巧妇难为无米之炊”,到底有没有可能让我们暂且抛开信息内容,来看看标题设计呢?

C、回归,且说“标题”设计

  在界面设计过程伊始,通常最重要的往往便是信息架构设计。例如关于如何设计良好的站点导航的文章比比皆是,而本身一个简短、便于记忆的导航词条何尝不是对下属一组页面的“标题”呢?当然,这并不代表我们混淆或忽视它和“Tag标签”或其他什么的界限。但显而易见,“标题模式”的设计至少影响着信息架构领域,广义或狭义。明显、突出的标题是设计的基本要素之一。就像某本书中所说的“…好的站点,应为浏览而设计,不应强迫我去思考…”。如何设计不用思考的标题呢?

  就视觉设计而言,具有最为直观、强大的表现力。时下,你如果采用红色粗体大号作为突出的标题,可能会被说是墨守成规;但在找到更好的方法前,很多网站仍矢志不移的使用它,就单个标题而言。你可以想象如果一个页面(首屏)连续使用了50个红色14号标题的效果,一定可以排布的十分均匀,符合栅格、黄金分割或是别的定律……结果可想而知。视觉疲劳,认知负担?只是想说,标题往往出现在众多标题之间,要知道它们每个又都凝聚了大量的信息,所以希望不要忽视量的累积。
也许你该注意:

  1、给你想突出的标题一个独特的样式、位置;
  2、每组标题的数量也要符合7±2的认知法则;
  3、注意留白,保证用户在标题组中的视觉流得以减速;
  4、采用对比色或是颜色反白(好像windows一样)也是不错的想法;
  还有更多关于标题的视觉设计方法和技巧,欢迎研讨……

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇