Smashing杂志(@smashingmag)在Twitter上已经快一年了。Twitter是个很好的媒介工具,通过它我们与读者们建立起了联系,讨论与设计相关的话题,并且还赠送些不错的奖品。然而,这一年内我们的twitter依然没有属于自己的背景,现在是到了改变的时候了。为了能做个出色的背景,我们想先了解下其他设计师是使用何种方式方法做出漂亮的界面。
twitter上的个人资料页是唯一可以用来展示个人视觉形象与尽可能多的额外信息地方,设计好个人资料页面要比发布单个tweet能传递给读者更多的信息。你可以通过改变背景图片、文字与超链接颜色来自定义个人资料页。这就如同更换皮肤一样简单,仅仅通过更换背景图片可以让设计师设计出非常有个性的页面。
本文主要目的是介绍使用不同的方法设计出独特、让人印象深刻的twitter页面。在这之前,解下twitter的个人资料页的结构是很有必要的。
Twitter 的个人资料页
最值得注意的是twitter 个人资料页内容宽度被固定为765像素,区块居页面中间放置。这样的布局很好,这意味着在高分辨率显示器上可以将你的背景图片展示在两边空白的区域上了。


其他几个需要记住的是:
- 时间表(timeline)背景一直是白色的
- 菜单条(menu bar) 背景一直是白色的
- 页脚栏(footer bar) 背景一直是白色的
- logo一直是twitter的logo
- 图片可以替换
- 可以改变文字颜色、超链接颜色、侧边栏背景色
- 可以改变背景图片与背景颜色
- 也可以平铺背景图片
- 背景图片开始位置一直是左上角
如果你仅仅是对设计个漂亮的个人资料页感兴趣,你仅仅需要一张很炫的背景图,并自定义文字、超链接颜色和侧边栏颜色。但如果你希望还可以展示品牌与额外的联系信息,就需要在背景图片上花更多的心思了。
技巧与方法
下面是些个人资料页,理解这些技巧与方法,将他们运用到属于你自己的背景之中去吧。请记住,许多的个人资料页用到不只是一种技巧,你应该根据自己的需求将这些技巧混合的运用起来。
将背景与时间表(timeline)/侧边栏合并
这或许是下面列举的方法中最少用到技术的方法,通过将将背景与timeline(时间表)/侧边栏合并,你可以创做出一个看上去非常独特的页面。
平铺背景与其他图片的组合
Twitter可以指定背景图片是否平铺。将这两者结合就可以让你的个人资料页显得与众不同了。
使用头像关联内容
你的图片(它可以是一张头像,logo或照片)是你在twitter上的主要标识;每次你向你的粉丝发tweet时,它都会被展示在每个tweet的下方。比方说,你使用的背景图片的某些地方与你的profile图片有关联,在你的图片里可以包含更多关于你或你的品牌的信息。换句话说,你可以在你的logo与品牌识别之间建立起某种必然的关系来强化二者之间的关联。
通过页面层叠效果展示更多内容
如果你已经建立好了视觉识别,你可以通过页面层叠的效果展示给用户在twitter之后的内容。这种方式给你想设计什么就设计什么的自由度,因为你已经不需要再考虑与twitter页面设计上、色彩上的相互整合了。
在个人资料页上增加自定义侧边栏
接下来的profle是使用了前面第一种方法的特殊应用:通过增加侧边栏到布局中。你可以增加这样的面板来高亮那些你希望给用户看的内容。
展示你自己
在社会媒体世界里,你自己就是品牌。通过twitter你可以成为社会媒体的发布者,通过非常有个性的方式展现你自己来强化你的网站相关品牌与联系。
使用图标与标识
接下来的个人资料页很简洁,然而通过展示与作品相关的图标或标识却能给给人留下深刻的印象。
增加标题栏
增加标题栏可以让你的个人资料页看上去外观更独特。并且,通过可以通过标题栏将twitter的标识与顶部菜单与你的页面内容分离开。
少就是多
Andre Gide (安德烈·纪德,1869-1951是法国20世纪最重要的作家之一。译者注)曾经说过“上帝与艺术家之间的合作就是艺术,设计的越简洁就越好”。这里列举了些用简洁的思路设计出的图形。
兼容1024px的宽度
如果你在意个人资料页展示在1024px宽的屏幕,你需要基于左上角设计背景图。下面些范例就很好的解决了在不同分辨率下的问题。
这是另一个很好的方法确保你的个人资料页在1024px与1280px下看起来很相似。
使用字体排版
在twitter背景上使用字体排版会显得与众不同;使用这种方式你可以设计出传递附加信息的又与众不同的个人资料页。
让显示的内容值得回味
计划性的摆放的元素与位置,你可以在背景上排列出令人回味的感觉,并将案例信息展示给你的读者。你可以创建一种氛围来展示你个人个性与额外的信息。
尽管做你想做的
将你的背景图做成有原创的、创意的、独特的来加强你的网上印象。尝试使用漂亮的个人插画,背景图片与字体排版。确保你的背景图有独立的个性,而不是看起来很普通。你的访问者会在首次访问时就感受到这点。
一些好的作品
我们已经讨论了一些关于twitter背景图的表现方式。下面是一些设计的比较好的网站,仅供大家参考。
翻译版:http://davidw.me/translate/effective-twitter-backgrounds-examples-and-best-practices/
<< 返回前篇





































































































[...] 修改好微博背景后,就顺便翻译《Twitter上值得借鉴的背景范例与实践》一文,里面有些设计手段值得借鉴。正所谓他山之石,可以攻玉。以便于大家更好的个性化你自己的微博。 [...]
好文,收藏至20ju.com
[...] 翻译版:http://davidw.me/translate/effective-twitter-backgrounds-examples-and-best-practices/ [...]