分类 "产品设计" 的存档.

描述

互联网产品开发,产品设计的点滴

谈SNS首页设计

SNS首页设计

关注互联网,分享草根经理人的成长
更多精彩,欢迎访问Rouny的独立博客:www.wangrunyu.com

前面满长一段时间,在琢磨如何做SNS类的产品,这方面算是刚入行的新手,总结了一些想法,正好贴上来,今天先讲一下SNS首页的设计。

再开始之前,可能有朋友会问,什么是SNS?

SNS的全名Social Network Service,也就是社会化网络服务,在国内,我们通常翻译成社区,也就是网上聚集了很多用户,并且相互直接有复杂交互的地方,人人网,开心网,豆瓣,Qzone都算是里面比较典型的产品。

SNS的首页设计要注意哪些内容?


  1. 明确目的


    简单明了的告诉用户你是干什么的网站,比如以维护人际关系为主的社交类网站通常应该怎么做?我们来看看Facebook的首页吧:

    上图就是Facebook的首页,红框中的部分,非常直观明了地告诉了你facebook是干什么的,不会让一个陌生的用户在看到社区的第一眼产生过多迷茫。我们再来看人人的:

    上图是人人的首页,同样从红框中可以看出,人人网对facebook的模仿可谓“无微不至”,一句话“人人是一个真实的社交网络,联络你和你周围的朋友”加一幅图把该网站的意图表述地非常清楚。 阅读更多…

VN:F [1.9.16_1159]

给文章评个分吧

Rating: 4.6/5 (9 votes cast)

解读iPhone平台的一些优秀设计思路

转载自Tencent CDC

本文试图从iPhone的角度结合一些iPhone平台项目的设计经验提炼出iPhone平台的一些优秀设计思路,以供大家在做移动互联网设备 设计时参考。

1、移动互联网设备和传统手机的区别

在传统手机时代,标准的通话键、挂机键、菜单键是手机的标配,用户被教育成了用键盘来操作数据,于是我们就养成了使用键盘的习惯,经典的案例就 是诺基亚主导的时代。

在移动互联网时代,特别是触屏的大规模应用,手机的功能已经发生了转变,对互联网内容的浏览、下载、消费等等成为主要应用场景,触摸屏成为行业 趋势,直接对内容进行操作,在屏幕范围内的点击成为主要的操作。绝大部分操作通过直接和内容交互完成,不要让用户通过中间设备间接进行控 制。

因此,就可以理解为什么苹果会这么激进,只保留了一个home键,而将其他功能性的操作全部做在了屏幕里面。

在底部的几个按键的处理上(返回、菜单、home、搜索),Android的做法似乎介于传统手机和iPhone两者之间,既 保留了传统手机的一些特性,但也在学习iPhone的触屏做法。从苹果遵循极简的设计思路来看,iPhone做得更彻底、更加极致一 些。

2、高度直觉化的界面

苹果采用了隐喻等方式来暗示用户这里的操作,目的就是降低用户的学习门槛,使用户第一眼就知道怎么去用iPhone,典型的案例就是锁屏界面的 解锁操作,以及缩放照片的操作。

iPhone采用了全触屏的操作方式,绝大部分操作都通过直接触摸完成,仅提供一个home键的实际按键,这种做法配合multi-touch 技术,无论是完成一个任务还是体验游戏,操作都最大程度简化了用户的操作路径。

为此,iPhone还提供了各种丰富的手势,基于此,开发者可以创造丰富的操作体验。比如:tweetie 2

3、在需要时给我导航,且告诉我将去向何处

在iPhone平台上,如果应用程序有信息层级关系(比如邮箱>收件箱>邮件),利用title进行导航,导 航栏左侧始终是返回按钮,右侧如果有必要,可以放针对内容的操作控件,中间有标题。

对这里的导航按钮来说,始终只有返回上一级的功能,且明确指明上一级的title是什么。

那么,另外一个问题是 如果这里的信息层级太深怎么办?是否需要给出返回首页等按钮或者更长的面包屑路径, 这里需要考虑的是怎样减少程序的信息层级而不是一味地去将这里的导航复杂化。

iPhone提倡直接对界面元素进行操作,返回上一级也是如此,无需通过其他物理按键来切换页面,你所需要做的事情就是直接在屏幕上点击。


Navigation Bar

4、稳定的界面结构——tab bar,toolbar的位置

iPhone典型应用的界面结构很稳定,导航栏和页签栏的位置不会因为应用不同而发生变化,用户能形成比较一致的体验。

Android平台在规范性方面不如iPhone,比如:

a)  Andorid对标题的处理方式比较奇怪,有的程序有标题栏,有的地方没有,不符合一致性原则;另外,还存在大小两种尺寸的标题栏。

b)  tab bar的位置。有的应用放在顶部,有的放在底部,体验不一致。

另外,对手持设备来说,关注焦点是从上而下的,tab bar的关注点没有内容那么高,其实只是在需要的时候可以方便地进行切换就足够了,放置于顶部对于手持设备来说操作很不便。

5、一次做一件事情,避免一个按键承载太多的功能

Android的菜单键是一个全局按键,使用频率比较高,根据不同的场景功能又各不相同,用户较难形成一致的体验,系统级的菜 单和上下文菜单也容易让用户混淆。

苹果的做法是将菜单里的功能进行分解,重要操作用户可直接操作(如通讯录的添加联系人,iPhone是直接放出来,Android是将其放到菜 单里面),其他操作或集中在设置或通过滑动等交互方式进行扩展。(tweetie 2是将针对当前联系人的更多操作通过滑动的操作展示出来)

6、增强用户体验

iPhone在增强用户体验上有很多点值得学习。比如core animation提供了大量优雅的动画可以直接使用,以实现华丽的动画效果。

为什么用动画?

在整个界面转换的过程中,苹果会添加一些动画元素,作用有三:

a)  缓解用户等待的焦躁情绪,如:经典的程序登录界面动画。
b)  暗示用户当前界面的来源。如:有信息层级关系的左右切换动画。

c)  增强用户体验

用什么动画?

界面常用的几种动画:

a)  有信息层级关系的采用左右切换动画。
b)  针对当前视图内容的操作常用的采用model view的从下往上升起的动画。如:写邮件,action sheet。

拟物化设计

除此之外,还有声音元素、透明设计等其他手段以提升用户的使用体验。

VN:F [1.9.16_1159]

给文章评个分吧

Rating: 4.8/5 (3 votes cast)

苹果与机器人–Iphone与Android 对比分析浅谈

转自Tencent CDC Blog

自从Iphone横空出世,就以简单易用,并功能强大,作为智能手机的代名词,直到Google推出Android 平台,才棋逢对手;自此作为两款经常拿来一起比较的手持移动平台,做了粗略分析比较;

1. 开发平台

目前开发智能手持平台设备的app相对来说已经比较简单。以Android手机Nexus One为例,它的处理器有1GHz,内存则有512MB,跟开发客户端应用的感觉已经很类似。

Iphone平台
对于Iphone平台的开发,首先要熟悉Apple的 MAC OS或者是Unix系统的开发基础,Iphone的开发工具Xcode并不支持Windows平台,因此开发者首先要拥有一台mac电脑;

语言学习方面,熟悉C语言的工程师可以省一点力,因为在Objective-C中,可以直接编写C程序,唯有用户接口的部分,一定得仰赖 Objective-C。

平台
Android采用java开发,因此Android对系统资源的操作程度已接近PC客户端开发。

对于程序兼容性问题来看:
独此一家,因此可以很好控制应用兼容性问题,而Android平台的手机联盟战略,便有各家厂商的不同规格型号的机器,因而Google通过手机厂商统一 硬件的规格手段达到兼容性的平衡。不过,也确实有开发者担心Android的开放平台,未来难保手机厂商不会因为自身的需求而有所调整,仍可能导致兼容性 问题发生。

2. 封闭和开放的审核机制

Iphone平台
封闭和严格的审核一直都是Iphone做为Apple设计理念和保证app质量的评审手段之一;在app应用开发完成,上架App Store上前,Apple也必须审核软件的内容,以避免包含色情与暴力,或者有已知Bug的软件,影响整个市集的质量。

由于iPhone软件的销售与安装,只能透过App Store这个唯一的管道,有志进入IPhone市场的开发者,也不得不买账。

Android 平台
相较于Apple的封闭,Android就显得开放许多,Android Market则是被动审查机制(只有被足够多的用户举报,Google才会对此进行审核),程序上传几个小时后,使用者就可以下载。 事实上开发者不经由Android Market,也有其他途径营销。如:安卓市场。

封闭与开放的作法各有好处,由Apple把关且锁定销售管道的作法,对消费者而言,可以确保质量;而开发者也省得比较各市集之间的优劣。

而Android的开放作法,则有不设限的好处──开发者不用担心Apple因为自身利益的考虑,而驳回软件上架的申请。消费者的选择自由度也高出很多。

3. UI交互上差异

1)硬件差异

在传统手机时代,用户直接用键盘、按键操作数据。Iphone的操作有别于之前传统手机的体验,Iphone大触摸屏概念推出,用户可以直接对内容进行操作排除其他中间设备控制,降低用户使用门槛,对内容操作也有很直接的体验。

Android则保留传统手机的一些特征(返回、搜索、home、menu实体按键),也同样有大触摸屏;两者之间的硬件差异,因此也决定了交互视觉上本质的差异;

Iphone平台
Iphone遵从Apple极简设计风格,用隐喻的视觉方式提示用户进行使用操作,同样也直观表达下一步的操作流程。大部分操作直接和内容交互完成,用户体验统一连贯,典型案例:解锁。

Android平台
Android 有实体按键,承载其余过多的基本操作,将用户停留在最重要的内容上,因为有更多硬件操作,也能有更丰富的表现,典型案例:轨迹球颜色提醒。
缺点:部分操作,屏幕与按键之间来回转换;

2)title和导航指引

手持移动设备的特性决定屏幕的有限,在应用程序的层级关系中如何指引用户完成操作,便尤为重要;

Iphone平台
应用程序有信息层级关系,Iphone利用title区域进行操作指引,title的左边是返回。让用户明确层级之间的关系;
反思,应用程序信息有较深的层级怎么办,在开发过程中,不是一味导航复杂化,而是尽量减少关系层级;

Android平台
Android,页面的回退依靠实体返回按键,因此title区域不必要操作,在视觉上减小了高度,扩大了内容区域。
缺点:没有一个好的导航指引。

3)分散与集合

Iphone平台
为了避免一个按键承载过多功能,Iphone 的做法将菜单里的功能进行分解。
缺点:视觉压力大,界面所承载较多。

Android平台
集合菜单选项,将由实体menu按键承载。同时也支持长按操作,对于承载信息的承载有更多的选择。
缺点:用户门槛高,各个场景不同,所体现的菜单选项也不同,用户溶入性较差,来回切换视觉焦点,没有一致的体验。

4)风格样式

Iphone平台
Iphone有完整的统一,包括Itouch Iphone Ipad,有完整的视觉规范和较为统一的体验。

Android平台
因厂商的不同,有不同的视觉差异,并且各自的视觉规范也不同,例子:HTC  、Sony Ericsson
缺点:硬件环境的不同,同一个应用开发,造成开发成本增大,例如:屏幕参数和精度不同(高精度、中精度、低精度),
常见的分辨率就有:320X480  480X800  480X854

5)长期发展

Google 在提供基于云端、数据驱动的应用方面符合长期发展趋势,而 Apple 的设备绑定则不是。Apple 在云端基础设施方面是追赶者,比如他们正在打造自己的地点位置服务。

Apple 在云端的经验比较有限,特别是在算法取向的应用方面。相对应的是 Google 有如此庞大的数据资产,在算法取向应用方面的经验非常丰富,这让 Apple 在长期竞争中处于不利地位。

Apple 的邮件、日程、地址簿等都为客户端的延续,本质上是电脑同步到手机。而 Google 的对应产品生于网络,总是实时同步。

Apple 的优势:软件和设计专利,这些优势是他们在 80 年代所没有的。此外他们还有自己的杀手级应用,比如 iTunes 仍然是音乐应用的标杆,而且还是 podcast、语音书、电子书的中转站。

语音书和电子书也许会来到 Android Market,但很难想象 Android Market 会成为 iTunes 这样的中转站。

小结:

对于iphone或者是Android都各有优缺点。简单的看来Google是开放的,今后发展有足够的优势;但目前看来Android平台交互上不如Iphone更为直观顺畅,主要也是Apple在于细节上有足够的表现和亲和力。

无论开发基于哪款平台,都应该首要考虑该平台的特性,以及该平台的延续性。也避免在一个平台上放置另一个平台的操作习惯,至少在Android系统的界面上放置返回图标,我觉得那是很多余的。

VN:F [1.9.16_1159]

给文章评个分吧

Rating: 4.0/5 (1 vote cast)

未来生活离不开的移动互联网

2009年是中国的3G元年,随着中国3G牌照的发放,3G终端的普及,“”这个概念也就慢慢进入了人们的视线,那么什么是移动互联网呢,其实我也不是权威,只是从我一个智能手机“深度玩家”的角度,我这么看:

网络连接形式:

一定是无线的,WIFI或者3G,这种网络覆盖形式可以保证用户体验在时间和空间上的随意性,也就是”anytime”"anywhere”

网络连接速率:

一定是高速的,这也就是2G,3G最明显的区别,而非很多百姓人为的”功能不同“。怎么定义这个高速?我觉得让用户获得和家中有线ADSL网络一样的速率体验是一个起码的要求。那么,理论上来讲目前中国用的3种3G制式都是达到的。为什么要高速,因为只有大带宽才能支撑起丰富的互联网应用,比如你用google map导航,如果你是2G用户,同样可以使用这个功能,但是地图的下载填图速度估计还没有你的移动速度快,那么地图也基本就没有用了。

网络资费水平:

一定是合理的,什么叫”合理“,大家理解不一,按我的想法,模糊点描述,社会的大部分阶层,都是用的起得,像现在的家庭宽带一样。如果还是像以往移动大佬动不动长途,漫游的,这样的市场恐难打开。

终端设备:

一定具备便携,多功能,续航时间长,跨平台,设计精美,这是我比较感兴趣的内容,我会在后面的博文中详细阐述。

所以,按我的理解,无线,高速,低价,和强大终端设备这四个因素所共同催生出来的随时,随地以任意方式,享受与桌面电脑相仿的上网享受,这便是移动互联网。

VN:F [1.9.16_1159]

给文章评个分吧

Rating: 4.0/5 (1 vote cast)

没有UGC转发,我们的SNS还存在1.0时代!

转自淘江湖官方博客

研究了SNS研究了那么久,今天才悟出一点小小的奥秘。(用户原创内容)转发机制,看起来就是一个小小的功能,很简单——不就是一个转载或者 分享功能吗?其实不然。我个人感觉,正因为这个机制,我甚至大胆地把SNS分成两个时代(从SNS信息传播角度来看。个人看法,不代表权威):目前的 Twitter、新浪微博都是SNS2.0;而人人网、开心网很可惜仍是SNS1.0,我们淘江湖也属于SNS1.0。Facebook是一个例外,因为 其有多年的基于真实关系网络的用户群体积累;第二是因为其手机端SNS优势;第三是因为其开放平台优势;第四也在不断吸取Twitter成功模式的优势之 处;第五由于开放,事实上目前很大一部分Facebook用户一直用Twitter来更新其Facebook主页。所以其地位很难撼动。

Twitter作为SNS后起之秀,我们不能仅把它看做阉割版的SNS(因为Twitter没太多功能,唯独只有微博功能),一个小小的UGC转发和消息即时提醒的功能改变了它的命运。人人网学艺不精,仅学了一个UGC转发的皮毛,精髓的东西没学到位,如下图:

一、人人网也设计了UGC转发,不过只作信息的一级传播:即消息仅在一级用户关系间传递

1

1.选择转发用户关系转发的消息,只能穿透一层用户关系:

1

2.转发后的效果(仅一级用户关系):

1

3.被转发者,没有任何消息提醒!

二、Twitter和新浪微博设计的转发功能一致(暂以新浪微博为例解说):可消息穿透至N级用户关系

1. 选择转发用户关系转发的消息,信息可穿透至无限级用户关系:

1

2. 被转发者,都会受到消息提醒!

1

也许我们会搞不懂,为什么有一个评论的设计及一个@提及的设计呢?

其实这就是Twitter和新浪微博设计巧妙之处,它们鼓励用户转发信息,随便也做下评论,即转发并评论功能

三、举实例说明

如果看不懂,那举一个例子来看:

例如新浪微博A用户有10000个粉丝,他转发并评论一条被转发20次的消息,那他的消息传播路径则是:

A→1→2→3→4→5→6→7→8→9→10→11→12→13→14→15→16→17→18→19→20

这20个人都会收到A的评论及转发消息,同时A的10000粉丝也可通过A的Feeds信息看到这条信息。而这20人收到A的评论及转发,都有非常 大的可能性,再次对该信息做转发及评论。而A的10000名粉丝也可能会对A的这条信息做转发和评论。这种方式彻底把SNS的人际关系网络信息传播力挖掘 出来。所以在新浪微博上,一条信息一天内可轻易传播至数以千万级的用户(新浪微博很多名人的粉丝数超过百万,以100万来算,如果转发2000次,这些转发者如果平均粉丝数10万,则信息可传送至100万+2000*10万=20010万用户)。其SNS信息爆炸的力量,是相当恐怖的!!

1

例如人人网A用户有10000个粉丝,他转发并评论一条被转发20次的消息,那他的消息传播路径则是:

A→20

只有两层用户关系,所以人人网的转发设计,并没有挖掘到SNS真正的信息传播力!!

而这里的秘密,仅仅是一个“@”符号及被“@”则的消息告之设计!!

1

四、淘江湖目前的设计

我们目前也有设计“分享给朋友”功能,但是信息传递,同人人网一样,仍然是一级用户关系,所以这块应该要做一些改造:

1

五、总结

相信很多玩过新浪微博的同事会有感受:为什么新浪微博那么爽呢:信息交互得爽、信息穿透得爽。原因在于哪里呢?

原因其实就在于一个小小的转发消息设计及对应的消息穿透提醒,这会N倍加速Feeds及相关UGC信息的产生。这就是为什么在新浪上发一条信息,一会就会有N多给回复、N多个转发,很多人都得了微博强迫症,有事没事,要上去看下有没人回复和转发。

这个设计的好处:

  1. 更多的UGC内容产生;
  2. 更好交互体验,让用户获得成就感和满足感;
  3. 更多用户关系链的组建,转发机制,非常利于关键链建立;

现在我自己也知道了,为什么现在大家如此痴迷于新浪微博了,呵呵!!

VN:F [1.9.16_1159]

给文章评个分吧

Rating: 5.0/5 (2 votes cast)
/*51yes*/ /*baidu*/ /*google*/