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

2016-02-19 16:35 2 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的关于网页标题的视觉设计方法和技巧,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

  写在前面

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

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

  以下三段式行文,逐步展开:

  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一样)也是不错的想法;

  还有更多关于标题的视觉设计方法和技巧,欢迎研讨

  Like this:

  图片看不清楚?请点击这里查看原图(大图)。

  而从交互设计角度看,吸引眼球的标题也有很多方法,功力最先表现在Wording上。就像上文说的,用户可能只对标题的一两个关键字眼感兴趣。当然,也还是不能保证给出的标题是你想要的,看看这些:

  其实并不能武断的说这个比那个标题好,关于wording每人都有自己的语言习惯和想法;就像上文所说,不同的标题表明了作者不同的态度和站点的氛围、适合的场景,适合不同的读者:

  标题1 采用了完整、缜密的陈述语言,有点学究气和故弄玄虚,如果我要写论文,它再合适不过了。从认知角度讲,越严谨,越专业;

  标题2 明显增加了语气和引导,也许作为一篇设计指引,对初学者还是蛮有吸引力的,或者难免引起专家的不屑,谁又敢说完美呢?有时候点击量是随着口水一起上升的;

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  标题3 ,请注意我的语气,不卑不亢甚至低姿态往往能降低读者的门槛,回答如何给我好标题,大家都有这个自信和发言权,因而谁会错过这个机会呢?

  标题4,如果我真的用 ??????作标题,恐怕不论放在哪儿,这篇文章的点击量都可能会接近站点的流量人们总是充满了好奇心。再发挥一下你的想象力,假如站点除了导航和搜索,其他链接全部都是??????也许乐趣就这样产生了前提是去掉无效的广告。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  如果总结普适的规律,让你的标题更加易于理解,以下供参考:

  1)状语基本无效

  2)修饰词慎用但很有效

  3)名词最直观

  4)动词可有可无,通顺即可

  5)若环境允许,尽量用友好的语气

  6)要引发联想,让读者想探其究竟

  7) 尽可能的精简,这是最高宗旨

  如果为了让你的某个标题能脱颖而出,打破这些规则吧!让它尽可能的与众不同(语气、长短、颜色、位置都不是问题)

  Like this:

  当然,如果认为wording优化是交互设计师对标题设计仅能做的,那就错了。退一步看,谁说标题一定是一句话呢?换个导航方式、增加页签或是补充个标签云图,这些也都是改善爆炸的标题信息的好方法。

  总而言之,经过缜密设计的标题模式是为了增加点击量的同时提高用户操作的效率,是标题设计的灵魂驱动力,更是商业设计的潜规则之一。最后请别忘了,更重要的可能还是信息内容本身才能满足用户的价值,就像上文中采用更加规整的段落格式或补充些数据会更好:-)

来源:https://www.tulaoshi.com/n/20160219/1612488.html

延伸阅读
标签: PS PS基础 PS抠图
下面我们就网页设计这个领域做一些专门介绍,这些内容按照原计划应该包含在本书中,由于篇幅所限不得不取消。不过没关系,我们会继续制作相应的教程继续供大家学习。Photoshop和Illustrator都可以制作网页设计稿,但我个人觉得Photoshop在这方面更出色一些,主要是因为图层样式较为丰富,可以很容易地制作出各种流行的效果。因此我都是用它...
大家看好了,海报上的文字是UX神话,是原作者并不支持的观点。 匈牙利的用户体验设计师ZoltánGócza列出了关于UX和网页设计32个神话,和破除迷信的论证观点。一个意大利的传播和广告机构That’s Com 非常喜欢这32个观点,于是请来自由平面设计师Alessandro Giammaria,把他们设计成了一组很赞的海报。 这32张海报,每张都...
来源:站酷 作者:小武QQ1061399286 设计类网页最重要是创意,画面要有一定的新意和视觉冲击力。因此在选择素材的时候多选一些艺术感较强的图片,然后发挥想象去渲染,做出自己满意的效果。 最终效果 1、新建一个895×307px的图层,分辨率为300,背景颜色为白色,颜色模式为RGB。 2、打开人物素材,拖到刚刚新建的图层上面。 ...
布局是内容组织的必然结果,往往是自己逐渐成型的。一旦周全考虑了页面的所有需求,并且确定每一块的内容,你的工作就变成了看着所想要的布局自己展现在你眼前。 在开始安排页面内容时,我会秉承这一最基本的设计方法。简单来说,我把所有的栏目区域都扔到显示器上,然后移来移去不断的调整让他们彼此协调。 1、 引导用户的视线 人们在浏览...
标签: Web开发
1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height' and 'Width' tags for your images. So while page loading certain place is left for the images and visitor can go through the content while images are load...

经验教程

67

收藏

22
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部