推荐阅读

[活动]5月19日SocialBeta分享会(上海站)——品牌如何有效利用社会化媒体 活动报名正在进行中,名额有限,请尽早报名。感谢我们此次活动的【金牌赞助商】@时趣互动 ,【银牌赞助商】@Verawom上海 。活动地点:上海联合路演中心,活动报名地址:http://t.cn/zOQ1QT1(报名已经结束,请关注我们下次活动。) --主 ...

Read more

[案例]7个创意型社会媒体营销案例 编译@YvaineSo 导读 社会化媒体营销时代,有人说“内容为王”,也有声音发出“渠道为王”。两者应该如何结合,企业又该何去何从?阅读本文,你会发现LinkedIn、Google+、Twitter、Facebook、YouTube等各式各样的社会化媒体工具都出现在文中所列举的七个案例中,但这些企业推广的成功不是他们发现了这些渠道,而是他们发现了怎么用这些渠道。 #1:...

Read more

[报告]数位影响力(Digital Influence)的本质及其效力 编译@广告神马 数位影响力(Digital Influence)是社交媒体最受人关注的趋势之一,这也是我们最基本的理解,为何包括klout,PeerInex,Kred在内的众多网站投入数以百万计的美元来弄清社交媒体活动如何转换成影响力。影响力研究的市场只是刚刚起步,更多的新机构意图进入,可能也会很快出现的收购和兼并。仅仅在过去的90天里,klout从Kleiner...

Read more

[观点]企业构筑社会化媒体架构的3大误区 作者@小圈梨 "社会化媒体的魅力就是和目标消费者建立一种联系;这种联系是基于品牌核心价值的深邃理解、恰到好处的把握、挖掘,能让这种联系如一座触动心扉的心桥,不是平淡无奇的水泥桥。" 导语 当下,社会化媒体风潮愈演愈烈,不少企业盲目启动社会化媒体架构,效果平平,甚至寿终就寝,原因何在?笔者试谈企业构筑社会化媒体的3大误区及解决之道。 第一,没有战略眼光。 不明白企业为什么搭建社会化媒体架构?其组织目标、营销目的何在?如果没有领会以上要点,就不是登泰山顶,一览众山小;只是站在山涧里,被重重枝条、迷雾包裹,无法分阶段地把握企业社会化媒体战略发展方向,而且也不能与时俱进,明白什么样的社会化媒体最适合企业自身。这样的企业一旦启动社会化媒体项目后,立即陷入“为社会化媒体而社会化媒体”的恶性循环,其结果就是眉毛胡子一把抓,有限的预算没有落至实处;一味地追求华丽的粉丝数,虚假的互动量(比如主动@某意见领袖、媒体,但对方毫无反应)等指标,忽略企业真正意义的全盘社会化。 社会化媒体的魅力就是和目标消费者建立一种联系;这种联系是基于品牌核心价值的深邃理解、恰到好处的把握、挖掘,能让这种联系如一座触动心扉的心桥,不是平淡无奇的水泥桥。 建议解决之道: 企业内部成立“社会化媒体委员会”,包含各相关部门,不仅仅是市场部、公共关系团队等前线“部队”,还有企业的核心技术部门,比如研发部、采购部、售后服务部等。某种程度而言,这些核心部门是输入弹药的部门,他们加入“社会化媒体委员会”后,不仅可以及时地为社会化媒体输入新鲜的内容,有效处理粉丝的抱怨、投诉,还能双向沟通,及时了解“外面的声音”,外界对公司的期许。当然,“社会化媒体委员会”一定要设有专门协调人;还要有各部门的高层参与,根据公司预算,拍板决定将来的发展态势。 第二,内容平淡无奇 正因为很多企业的“跟风心态”,单一地认为做social...

Read more

[Trend]8个2012年值得关注的社会化营销趋势 导读 社会化媒体营销需要整合进企业的总体营销计划中,这已经不是什么秘密。各大网站和书籍关于2012年社会化媒体营销的策略和规划层出不穷,揭开迷雾找出其本质才是借力社会化营销的关键。企业和组织如何顺应2012年社会化媒体营销趋势?如何借助社会化媒体工具的强有力姿态实现营销?本文将为你解读2012年的营销战术,顺应趋势回归本质,做好营销规划。   写在前面的话 虽然是说8个趋势,但是从本质上而言,其实是做好内容,让你的网站更加人性化等等。这些趋势都是回归营销本质的警示,社会化媒体背景下,一个最为显著的特点是消费者或者说顾客的地位越来越受到重视,也迫使企业必须回到营销的本质上来——认识顾客、识别需求、创造价值、通过有效的渠道交付价值以及与消费者进行深度沟通,改善自身。 2011对于社交媒体和社会化营销是多么重要的一年!一切都飞速发展,不是吗?在第一时间,我看到并经历了营销和社交媒体的整个图景的变化,巩固,关注,发展以及同时经历的其他巨大的进步和变化。 正如我曾经所言,社交媒体需要整合进总体的营销计划中。这不是什么魔力药片,也不是什么硬推销,而是一种软销售。这更不会使你一夜暴富。但是社交媒体是一种强有力的营销工具,并且必须在今天的营销战术中运用。 因此,这里有8个营销趋势需要植入你的2012年的营销计划。我认为这些营销趋势是今年你社交媒体商务所必须的,伴随着2011年的尾声,这些趋势将在2012年更为强大。你需要做的是在你的业务中植入这些趋势,以此实现与竞争对手的差异化并获得你所想要的成就。 浪潮1——使你的商业更加人性化 无论是传统商业还是互联网商业,人们都会对具有人性化特质的东西所吸引。可是,在今天有太多营销活动和品牌建设都缺乏个性!因此关键是让你的业务因为你独特的个性而更人性化。当我们越来越多使用互联网来做生意时,这一要求就越来越重要。 因此你如何利用你自身的个性来使你的业务更具人性化呢? 发掘你自身先天的特质并将它们发挥出来。找到你自己的声音,把你自身特有的个性植入进你的品牌,以及每一个细节之中。不要像报流水帐一样表现你的个性,要让它足够凸显而不是趋于平庸。 你的个性是你业务成功的秘密武器。请保持可信,真实,真诚,仔细。 真诚地与每一个成员和每一个人互动。让每一个人和客户感到特别。这是一种消费性的投资,并且他们会真的为你的真诚买单,不管是短期还是长期的。 这一方法能够教会你怎样让你站点或者社交平台的路人变成长期的造访者或者粉丝。 浪潮2——真正认识你的目标顾客 太多的企业并不真正花时间去认识他们目标受众。这就好比是暗中扫射,让你的营销活动没有任何效果。 去认识你的顾客并知道他需要什么。发现他们的问题,改善或解决他们的问题。记住,关键的问题不是你,而是你的客户。这里只关心顾客以及他们需要什么。用强有力的声明来清晰地定义你会怎样和能够做这些。 这里有一个很好的方式来进行陈述:“我们帮助(你的目标受众)来解决(这些问题)或者(通过这种途径为你提供利益)” 尝试用这个方式来套用在你的产品上,看你是不是能把它说清楚。它可以帮助你知道怎样让你的网站和社交平台的造访者来行动:点击链接,注册,登录,结交朋友,成为粉丝。 浪潮3——提供有价值的内容 我知道,这一点被反反复复地提起,但是还是有很多企业没有做到。 假如始终如一的坚持有价值的内容不但可以让更多的顾客关注你,也会在与顾客之间建立起信誉, 你在传递一个信息,我在社会化媒体上的坚持不断地提供有价值,靠谱的内容,久而久之你也将被顾客视作是可靠并值得信赖的商业伙伴。  浪潮4——电子邮件营销 伴随着社交网络的兴盛,很多人认为电子邮件营销已经奄奄一息。事实远非如此。电子邮件营销比以往任何时候都要强大。 这应该是你的业务中最优先考虑的一环,是你业务的生命之源。在每一个触点建立你的档案。没什么能够创造出更多的流量,业务和长期的收入有赖于你的到访者的列表。这些名字是你真正的资产。电子邮箱则仍然是最为可靠的资源。 浪潮5——让你的内容更容易被分享 记住让你所有的内容,让你所有的营销触点,都可以通过工具或插件来轻易的分享。 这能帮助你的内容在网上更宽、更深地传播。比如Facebook,它所倡导的是#无摩擦分享。这意味着一旦你喜欢一个APP(应用),所有的你关于这个APP的行动将自动分享在你Facebook的页面上。不需要点击任何“喜欢”或者“分享”的按钮。例如,如果你安装了华盛顿邮报APP(华盛顿邮报阅读器,现在有400万用户),每一篇你阅读过的点击或阅读过的文章自动的分享在你的Facebook页面上。虽然其中有隐私问题,我认为这种方式会脱颖而出。未来将会有更多能够提供给网站和商业的可以分享的APP,因此请你睁大眼睛。随着你的访问者人数能够通过自己的社交媒体来影响别人的时候,他们就成为了通过社交平台无缝地传播你的内容的传教士。 浪潮6——严肃对待网站的顾客评论 事实是:人们购买他们所知道,喜欢和信任的东西。顾客的良好评论记录可以增加购买者的信息以及影响他们的购买决策。用户评论和消费者创造出来的内容是最好的影响和达成交易的最佳途径。拥有消费者评论的网站使造访者能够购买2倍的产品。这一趋势将在2012年盛行。 有两种方法来关注顾客评论: 1....

Read more

移动网页设计概要、案例和技巧

Posted by wisp | Posted in 社会化产品设计, 移动互联网 | Posted on 26-11-2010

标签:, , ,

8



本文由SocialBeta内容贡献者wisp译自Mobile Web Design: Overview, Examples and Tips,由于专业所限,翻译中难免有一些错误,请广大读者指正,谢谢。

移动界面设计正越来越流行,几乎每个主流网站或者网络服务提供商或者web app都会有手机应用版。因此从业人员迫切需要学习移动网页设计的相关知识。本文不仅会介绍移动网页设计的趋势,还提供一些优秀的设计案例,从中让读者得到一些启发。

什么是移动网页(mobile web)设计?

在开始设计移动网页之前,你应该先对手机网络非常熟悉。你会高兴地发现这里不需要学习 一些新技术,不过由于屏幕小以及操作系统繁多,你需要改变自己的设计风格。

按照Cameron Chapman的调查,目前最流行的操作系统是:

  • Windows Mobile
  • The iPhone platform
  • Palm OS
  • Mobile Linux
  • Symbian OS
  • The BlackBerry platform
  • Android

而手机网络上最受欢迎的浏览器是:

  • Safari for the iPhone
  • Android browser
  • Opera Mobile
  • WebOS browser (on Palm devices)
  • BlackBerry browser
  • Internet Explorer Mobile (on Windows Mobile devices)

移动网页(mobile web)设计简史

下面的图片简单地展示了移动网站设计语言的发展,也许你对有些词汇不了解,下面我们给出了专门的解释:

instantShift - Mobile Web Design

Standard Generalized Markup Language-简称SGML,1986年出版发布的一个信息管理方面的国际标准,主要用于印刷出版行业。该标准定义独立于平台和应用的文本文档的格式、索引和链接信息,为用户提供一种类似于语法的机制,用来定义文档的结构和指示文档结构的标签。其中Markup的含义是指插入到文档中的标记。标记分为两种:一种称为procedardmarkup,用来描述文档显示的样式;另一种称为descriptive markup,用来描述文档中的文字的用途。制定SGML的基本思想是把文档的内容与样式分开。

Handheld Device Markup Language- HDML(手持装置标示语言),通常与WML(无线标示语言)进行对比。是一种能够让手机或PDA可以上网浏览信息的一种语言。Unwired Planet(无线星球)公司设计了这种语言,并将其定位为免费的开源语言。任何具备HTML,CGI以及SQL编程经验的程序员都可以利用HDML语言来编写代码。HDML与WML的一个主要区别在于WML是基于XML的,而HDML不是。另外,HDML不支持脚本,而WML拥有自己的JavaScript脚本语言,称为WMLScript。

Wireless Markup Language- WML(Wireless Markup Language - 无线标记语言)。它是一种从 HTML 继承而来的标记语言,但是 WML 基于 XML,因此它较 HTML 更严格。WML 被用来创建可显示在 WAP 浏览器中的页面。用WML编写的页面被称为 DECKS。DECKS 是作为一套 CARDS 被构造的。这种描述语言同我们常听说的HTML语言同出一家,都属于XML语言这一大家族。WML的语法跟XML一样,WML是XML的子集。HTML语言写出的内容,我们可以在我们的PC机上用IE或是Netscape等浏览器进行阅读,而WML语言写出的文件则是专门用来在手机等的一些无线终端显示屏上显示,供人们阅读的,并且同样也可以向使用者提供人机交互界面,接受使用者输入的查询等信息,然后向使用者返回他所想要获得的最终信息。

Compact HTML –紧缩 HTML ,压缩(形式)的 HTML 。面向移动电话的页面记述语言,是在对 HTML 4.0 的功能压缩后得到的子集。日本 NTT DoCoMo 的i-mode 采用这种语言。

XHTML Mobile Profile –2001年发布,基于XHTML,针对移动电话的语言,被认为是目前最优秀的语言。

移动网页设计的优势与劣势

instantShift - Mobile Web Design

任何事物都有好有坏,移动网页设计也不例外:

优点:

优点就在于移动性。在家里用电脑上网的时间是很长的,不过任何人都可以通过手机来上网,其状态可以是在做公交车、火车或者在一个百货店里,用户可以随时查找在其周围的相关信息、:所以你的移动网页必须保证在“走”的状态。

劣势:

主要体现在2个方面:屏幕小,装载时间长。基于这2点,你需要思考如何在一个小空间设计一个能吸引人注意力的网页,同时还能提供受众需要的信息。

为什么你不能忽视移动网页设计?

instantShift - Mobile Web Design

随着手机的不断增加,移动网页设计正渐趋重要。RipRoad的调查显示:

  • 2.34+亿美国人拥有手机(占美国总人口的85%)
  • 2009年11月至2010年1月期间,4270万美国人中,18%是智能手机的活跃用户

另外,按照Pewinternet的调查,“83%的成年拥有手机或者智能手机,在这些人中,35%的人通过手机上网”。另外Ericsson还发现:“2009年12月份期间,全世界手机数据传输量首次超过语音数据量,虽然这大多归功于社交媒体和视频的使用,但是这一现象将会普遍出现。”

移动网页设计从哪开始?

首先要决定是给一个网站做手机版还是完全设计出一个新的网站,虽然两个都可以做,但是目前流行的是还是给一个主流网站做一个手机版,以作为网站的分支。

然后决定内容的布局以及什么内容。另外由于通过手机浏览网页,用户通常没有很长的等待时间,所以要确保装载时间短,所以简洁设计要起到更好的效果。

屏幕尺寸

一定要记住你不再是在电脑桌面上做设计了,你的页面是要在更小的手机屏幕上显示,另外IPhone的用户可以纵横向翻转屏幕,所以你可以使用百分比和EMS来是你的网站适用于不同尺寸的手机屏幕,另外你也可以使用META properties来限制界面的放大和屏幕尺寸。

网站测试

移动网页的测试主要是测试其在智能手机和非智能手机上网站的外观、导航以及加载是什么情况,有时甚至在不同的手机浏览器,其效果都会有所不同。尽可能在更多的手机设备上进行测试,这样才能保证更多的用户有着很好的体验。

移动网页设计范例

Mobile Awesomeness是一个移动网站设计作品资源库,展示不同行业的移动网页设计。 这是网站地址:http://www.mobileawesomeness.com/

01. Facebook

instantShift - Mobile Web Design

Official Link

02. Nclud

instantShift - Mobile Web Design

Official Link

03. Mail Chimp

instantShift - Mobile Web Design

Official Link

04. Mixx

instantShift - Mobile Web Design

Official Link

05. Mashable

instantShift - Mobile Web Design

Official Link

06. Smashing Magazine

instantShift - Mobile Web Design

Official Link

07. Deviant Art

instantShift - Mobile Web Design

Official Link

08. Cnet

instantShift - Mobile Web Design

Official Link

09. Walmart

instantShift - Mobile Web Design

Official Link

10. Viget Labs

instantShift - Mobile Web Design

Official Link

11. Coosh

instantShift - Mobile Web Design

Official Link

12. Intel

instantShift - Mobile Web Design

Official Link

13. United Airlines

instantShift - Mobile Web Design

Official Link

14. H&M

instantShift - Mobile Web Design

Official Link

15. Tabo Bell

instantShift - Mobile Web Design

Official Link

16. McDonald

instantShift - Mobile Web Design

Official Link

17. Ars Technica

instantShift - Mobile Web Design

Official Link

18. iWeathr

instantShift - Mobile Web Design

Official Link

19. Amazon

instantShift - Mobile Web Design

Official Link

20. eBay

instantShift - Mobile Web Design

Official Link

Conclusion!结论!

大部分设计是简单简洁的,直接切入要点,同时还要有图片和Logo,可以把移动网页设计想象成传统网站的简洁版,所以你不需要抛弃之前的网络设计知识,就是要削减网站规模与装载时间,做到这些,你的设计肯定会得到客户的喜爱。
Further References!

更多参考内容:

本文链接:http://www.instantshift.com/2010/04/09/mobile-web-design-overview-examples-and-tips/
原文链接:http://www.socialbeta.cn/articles/mobile-web-design-overview-examples-and-tips.html/
译者:wisp
欢迎转载,更多社会化媒体相关,请订阅
SocialBeta

About wisp

has written 135 post in this blog.



无觅相关文章插件,快速提升流量