DavidW

思考/实践/进化 电商用户体验

DavidW

[译文]Twitter上值得借鉴的背景范例与实践

Smashing杂志(@smashingmag)在Twitter上已经快一年了。Twitter是个很好的媒介工具,通过它我们与读者们建立起了联系,讨论与设计相关的话题,并且还赠送些不错的奖品。然而,这一年内我们的twitter依然没有属于自己的背景,现在是到了改变的时候了。为了能做个出色的背景,我们想先了解下其他设计师是使用何种方式方法做出漂亮的界面��

twitter上的个人资料页是唯一可以用来展示个人视觉形象与尽可能多的额外信息地方,设计好个人资料页面要比发布单个tweet能传递给读者更多的信息。你可以通过改变背景图片、文字与超链接颜色来自定义个人资料页。这就如同更换皮肤一样简单,仅仅通过更换背景图片可以让设计师设计出非常有个性的页面��

本文主要目的是介��使用不同的方法设计出独特、让人印象深刻的twitter页面。在这之前,解下twitter的个人资料页的结构是很有必要的��

Twitter 的个人资料页

最值得注意的是twitter 个人资料页内容宽度被固定��765像素,区块居页面中间放置。这样的布局很好,这意味着在高分辨率显示器上可以将你的背景图片展示在两边空白的区域上了��

Twitter上值得借鉴的背景范例与实践

Twitter上值得借鉴的背景范例与实践

其他几个需要记住的是:

  • 时间��(timeline)背景一直是白色��
  • 菜单��(menu bar) 背景一直是白色��
  • 页脚��(footer bar) 背景一直是白色��
  • logo一直是twitter的logo
  • 图片可以替换
  • 可以改变文字颜色、超链接颜色、侧边栏背景��
  • 可以改变背景图片与背景颜��
  • 也可以平铺背景图��
  • 背景图片开始位置一直是左上��

如果你仅仅是对设计个漂亮的个人资料页感兴趣,你仅仅需要一张很炫的背景图,并自定义文字、超链接颜色和侧边栏颜色。但如果你希望还可以展示品牌与额外的联系信息,就需要在背景图片上花更多的心思了��

技巧与方法

下面是些个人资料页,理解这些技巧与方法,将他们运用到属于你自己的背景之中去吧。请记住,许多的个人资料页用到不只是一种技巧,你应该根据自己的需求将这些技巧混合的运用起来��

 

将背景与时间��(timeline)/侧边栏合��

这或许是下面列举的方法中最少用到技术的方法,通过将将背景与timeline(时间��)/侧边栏合并,你可以创做出一个看上去非常独特的页面��

@adamplitt

Adamplitt-a �� Twitter上值得借鉴的背景范例与实践

Adamplitt-b �� Twitter上值得借鉴的背景范例与实践

@gaksdesigns

Gaksdesigns-a �� Twitter上值得借鉴的背景范例与实践

Gaksdesigns-b �� Twitter上值得借鉴的背景范例与实践

平铺背景与其他图片的组合

Twitter可以指定背景图片是否平铺。将这两者结合就可以让你的个人资料页显得与众不同了��

@spurrachel

Spurrachel-a �� Twitter上值得借鉴的背景范例与实践

Spurrachel-b �� Twitter上值得借鉴的背景范例与实践

使用头像关联内容

你的图片(它可以是一张头像,logo或照��)是你在twitter上的主要标识;每次你向你的粉丝发tweet时,它都会被展示在每个tweet的下方。比方说,你使用的背景图片的某些地方与你的profile图片有关联,在你的图片里可以包含更多关于你或你的品牌的信息。换句话说,你可以在你的logo与品牌识别之间建立起某种必然的关系来强化二者之间的关联��

@Doubleolee

Doubleolee-a �� Twitter上值得借鉴的背景范例与实践

Doubleolee-b �� Twitter上值得借鉴的背景范例与实践

@mailchimp

Mailchimp-a �� Twitter上值得借鉴的背景范例与实践

Mailchimp-b �� Twitter上值得借鉴的背景范例与实践

通过页面层叠效果展示更多内容

如果你已经建立好了视觉识别,你可以通过页面层叠的效果展示给用户在twitter之后的内容。这种方式给你想设计什么就设计什么的自由度,因为你已经不需要再考虑与twitter页面设计上、色彩上的相互整合了��

@sitepointdotcom

Sitepointdotcom-a �� Twitter上值得借鉴的背景范例与实践

Sitepointdotcom-b �� Twitter上值得借鉴的背景范例与实践

@benek

Benek-a �� Twitter上值得借鉴的背景范例与实践

Benek-b �� Twitter上值得借鉴的背景范例与实践

在个人资料页上增加自定义侧边��

接下来的profle是使用了前面第一种方法的特殊应用:通过增加侧边栏到布局中。你可以增加这样的面板来高亮那些你希望给用户看的内容��

@aaronmillerillz

Aaronmillerillz-a �� Twitter上值得借鉴的背景范例与实践

Aaronmillerillz-b �� Twitter上值得借鉴的背景范例与实践

@robingood

Robingood-a �� Twitter上值得借鉴的背景范例与实践

Robingood-b �� Twitter上值得借鉴的背景范例与实践

@sickbrain

Sickbrain-a �� Twitter上值得借鉴的背景范例与实践

Sickbrain-b �� Twitter上值得借鉴的背景范例与实践

展示你自��

在社会媒体世界里,你自己就是品牌。通过twitter你可以成为社会媒体的发布者,通过非常有个性的方式展现你自己来强化你的网站相关品牌与联系��

@problogger

Problogger-a �� Twitter上值得借鉴的背景范例与实践

Problogger-b �� Twitter上值得借鉴的背景范例与实践

@unmarketing

Unmarketing-a �� Twitter上值得借鉴的背景范例与实践

Unmarketing-b �� Twitter上值得借鉴的背景范例与实践

使用图标与标��

接下来的个人资料页很简洁,然而通过展示与作品相关的图标或标识却能给给人留下深刻的印象��

@lanesa

Lanesa-a �� Twitter上值得借鉴的背景范例与实践

Lanesa-b �� Twitter上值得借鉴的背景范例与实践

@rjacquez

Rjacquez-a �� Twitter上值得借鉴的背景范例与实践

Rjacquez-b �� Twitter上值得借鉴的背景范例与实践

增加标题��

增加标题栏可以让你的个人资料页看上去外观更独特。并且,通过可以通过标题栏将twitter的标识与顶部菜单与你的页面内容分离开��

@thegraphicmac

Thegraphicmac-a �� Twitter上值得借鉴的背景范例与实践

Thegraphicmac-b �� Twitter上值得借鉴的背景范例与实践

@elitistsnob

Elitistsnob-a �� Twitter上值得借鉴的背景范例与实践

Elitistsnob-b �� Twitter上值得借鉴的背景范例与实践

少就是多

Andre Gide (安德烈·纪德,1869-1951是法��20世纪最重要的作家之一。译者注)曾经说过“上帝与艺术家之间的合作就是艺术,设计的越简洁就越好”。这里列举了些用简洁的思路设计出的图形��

@line25blog

Line25blog-a �� Twitter上值得借鉴的背景范例与实践

Line25blog-b �� Twitter上值得借鉴的背景范例与实践

@idesignstudios

Idesignstudios-a �� Twitter上值得借鉴的背景范例与实践

Idesignstudios-b �� Twitter上值得借鉴的背景范例与实践

兼容1024px的宽��

如果你在意个人资料页展示��1024px宽的屏幕,你需要基于左上角设计背景图。下面些范例就很好的解决了在不同分辨率下的问题��

@SohTanaka

SohTanaka-a �� Twitter上值得借鉴的背景范例与实践

SohTanaka-b �� Twitter上值得借鉴的背景范例与实践

这是另一个很好的方法确保你的个人资料页在1024px��1280px下看起来很相似��

@adamplitt

Adamplitt-a �� Twitter上值得借鉴的背景范例与实践

Adamplitt-b �� Twitter上值得借鉴的背景范例与实践

使用字体排版

在twitter背景上使用字体排版会显得与众不同;使用这种方式你可以设计出传递附加信息的又与众不同的个人资料页��

@dickieadams

Dickieadams-a �� Twitter上值得借鉴的背景范例与实践

Dickieadams-b �� Twitter上值得借鉴的背景范例与实践

@iamFinch

Finch2 �� Twitter上值得借鉴的背景范例与实践

Gallery-iamFinch �� Twitter上值得借鉴的背景范例与实践

让显示的内容值得回味

计划性的摆放的元素与位置,你可以在背景上排列出令人回味的感觉,并将案例信息展示给你的读者。你可以创建一种氛围来展示你个人个性与额外的信息��

@sharebrain

Sharebrain-a �� Twitter上值得借鉴的背景范例与实践

Sharebrain-b �� Twitter上值得借鉴的背景范例与实践

@iamkhayyam

Iamkhayyam-a �� Twitter上值得借鉴的背景范例与实践

Iamkhayyam-b �� Twitter上值得借鉴的背景范例与实践

尽管做你想做��

将你的背景图做成有原创的、创意的、独特的来加强你的网上印象。尝试使用漂亮的个人插画,背景图片与字体排版。确保你的背景图有独立的个性,而不是看起来很普通。你的访问者会在首次访问时就感受到这点��

@ramesstudios

Gallery-ramesstudios �� Twitter上值得借鉴的背景范例与实践

@NIK0_BELLIC

Gallery-NIK0 BELLIC �� Twitter上值得借鉴的背景范例与实践

一些好的作��

我们已经讨论了一些关于twitter背景图的表现方式。下面是一些设计的比较好的网站,仅供大家参考��

@MdFilmFestival

Gallery-MdFilmFestival �� Twitter上值得借鉴的背景范例与实践

@fragments77

Gallery-fragments77 �� Twitter上值得借鉴的背景范例与实践

@happytreefriend

Gallery-happytreefriend �� Twitter上值得借鉴的背景范例与实践

@LoungeKat

Gallery-LoungeKat �� Twitter上值得借鉴的背景范例与实践

@ellingson

Gallery-ellingson �� Twitter上值得借鉴的背景范例与实践

@hootsuite

Gallery-hootsuite �� Twitter上值得借鉴的背景范例与实践

@G_Obieta

Gallery-G Obieta �� Twitter上值得借鉴的背景范例与实践

@willbryantplz

Gallery-willbryantplz �� Twitter上值得借鉴的背景范例与实践

@grant_clark

Gallery-grant Clark �� Twitter上值得借鉴的背景范例与实践

@hugeinc

Gallery-hugeinc �� Twitter上值得借鉴的背景范例与实践

@JJunkins

Gallery-JJunkins �� Twitter上值得借鉴的背景范例与实践

@Baldy67

Gallery-Baldy67 �� Twitter上值得借鉴的背景范例与实践

@thelaughbutton

Gallery-thelaughbutton �� Twitter上值得借鉴的背景范例与实践

@bickov

Gallery-bickov �� Twitter上值得借鉴的背景范例与实践

@jayjdk

Gallery-jayjdk �� Twitter上值得借鉴的背景范例与实践

@nathanhoad

Gallery-nathanhoad �� Twitter上值得借鉴的背景范例与实践

@robertomas

Gallery-robertomas �� Twitter上值得借鉴的背景范例与实践

@mayhemstudios

Gallery-mayhemstudios �� Twitter上值得借鉴的背景范例与实践

@ThirstEase

Gallery-ThirstEase �� Twitter上值得借鉴的背景范例与实践

@cameronolivier

Cameronolivier-b �� Twitter上值得借鉴的背景范例与实践

@studio3k

Studio3k-b �� Twitter上值得借鉴的背景范例与实践

@sixreffie

Gallery-sixreffie �� Twitter上值得借鉴的背景范例与实践

@TheTwiddict

Gallery-TheTwiddict �� Twitter上值得借鉴的背景范例与实践

@mountainash

Gallery-mountainash �� Twitter上值得借鉴的背景范例与实践

@Hallisar

Gallery-Hallisar �� Twitter上值得借鉴的背景范例与实践

@mywayhome

Gallery-mywayhome �� Twitter上值得借鉴的背景范例与实践

@TheArtificer

Gallery-TheArtificer �� Twitter上值得借鉴的背景范例与实践

@webdude75

Gallery-webdude75 �� Twitter上值得借鉴的背景范例与实践

@colourofair

Gallery-colourofair �� Twitter上值得借鉴的背景范例与实践

@jodyphillips

Gallery-jodyphillips �� Twitter上值得借鉴的背景范例与实践

@emilychang

Gallery-emilychang �� Twitter上值得借鉴的背景范例与实践

@ijustine

Gallery-ijustine �� Twitter上值得借鉴的背景范例与实践

@boagworld

Gallery-boagworld �� Twitter上值得借鉴的背景范例与实践

@collis

Gallery-collis �� Twitter上值得借鉴的背景范例与实践

@chrisspooner

Gallery-chrisspooner �� Twitter上值得借鉴的背景范例与实践

@webb_art

Gallery-webb Art �� Twitter上值得借鉴的背景范例与实践

@Hicksdesign

Gallery-Hicksdesign �� Twitter上值得借鉴的背景范例与实践

@rww

Gallery-rww �� Twitter上值得借鉴的背景范例与实践

@ThemeForest

Gallery-ThemeForest �� Twitter上值得借鉴的背景范例与实践

@technikwuerze

Gallery-technikwuerze �� Twitter上值得借鉴的背景范例与实践

@Designfeedr

Gallery-Designfeedr �� Twitter上值得借鉴的背景范例与实践

@Malarkey

Gallery-Malarkey �� Twitter上值得借鉴的背景范例与实践

@Trenti

Gallery-Trenti �� Twitter上值得借鉴的背景范例与实践

@zomigi

Gallery-zomigi �� Twitter上值得借鉴的背景范例与实践

@carsonified

Gallery-carsonified �� Twitter上值得借鉴的背景范例与实践

@WiliamAu

Gallery-WiliamAu �� Twitter上值得借鉴的背景范例与实践

@wpbeginner

Gallery-wpbeginner �� Twitter上值得借鉴的背景范例与实践

@brandonacox

Gallery-brandonacox �� Twitter上值得借鉴的背景范例与实践

@inspiredmag

Gallery-inspiredmag �� Twitter上值得借鉴的背景范例与实践

@guardiantech

Gallery-guardiantech �� Twitter上值得借鉴的背景范例与实践

@DesignerDepot

Gallery-DesignerDepot �� Twitter上值得借鉴的背景范例与实践

@carywood

Gallery-carywood �� Twitter上值得借鉴的背景范例与实践

@designia

Gallery-designia �� Twitter上值得借鉴的背景范例与实践

@_finderskeepers

Gallery-finders �� Twitter上值得借鉴的背景范例与实践

英文出处:http://www.smashingmagazine.com/2009/09/18/effective-twitter-backgrounds-examples-and-best-practices/

翻译版:http://davidw.cn/translate/effective-twitter-backgrounds-examples-and-best-practices/

Previous

读过的交互书籍整理

Next

网页设计报价–设计师心中永远的痛

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Powered by WordPress & Theme by Anders Norén