2013年5月30日星期四

滑动的维度[转]


前言

       在iOS交互模型的最底层,有一个“空间”的概念(具体可见ios空间模型),而空间最基本的属性就是三个维度。滑动依存于屏幕这个二维环境,也可以从维度这个角度去思考。最常见的滑动例如ios里删除短信息的操作,这里的滑动是最基础的,可以理解成一维的、被赋予了唯一功能的操作。但如果认为滑动就是这么简单,那可能忽略了滑动可以为设计带来的千变万化。1 
       当滑动被赋予功能,并与界面(信息或控件)结合时,具有很强的可塑性,并可有效提升操作的易用性、高效性、有效性。根据滑动的维度,可以分成一维滑动、二维滑动;同时结合滑动控制界面的方式,也可以分为连续和离散。通过一些实例具体说明。

一维滑动    

       Mailbox在邮件列表对邮件进行操作时,使用了一维离散型的滑动:     
       1 向右滑动邮件列表中的一个邮件条目,根据滑动距离的长短先后出现已读,删除操作,release后执行。  
       2 向左滑动邮件列表中的一个邮件条目,根据滑动距离的长短先后出现归为待办事项、分类归档操作,release后执行。
     2   (图片来自ifanr)        
       百度浏览器页面缩放的功能,采用了一维连续型滑动:      
       1 默认在界面底部的工具栏显示最常用操作,      
       2 在工具栏滑动时,工具栏变为页面缩放的控件;      
       3 通过滑动距离长短控制页面缩放大小(越右越大),同时上方页面以页面左上为缩放中心,实时反馈页面缩放效果;      
       4 release结束缩放操作,得到缩放后的页面。    3 

二维滑动      

       当滑动被赋予的功能增加,或需要更复杂控制时,一维不能解决,可以升维成二维滑动。      
       ios默认视频播放器的视频进退控制,采用了二维滑动:      
       操作:按下滑块后沿竖直方向滑动,根据滑动距离切换速度,再横向滑动进退,release后视频进度生效。      
       效果:下图绿线为手实际滑动距离,紫线为视频进退幅度。不同速度下水平滑动同样距离,视频进退的幅度不同,高速进退幅度最大,慢速最小。 
4        
       如果把视频播放器的滑动操作抽象,可形成其通过二维滑动变速控制视频进度的二维空间模型,如下:竖直方向的滑动,通过离散的方式选择进退速度。水平方向的滑动,通过连续的方式控制视频进退的幅度。         
5      
       类似的还有猛犸浏览器的页面变速滚动功能:       
       操作:在页面中纵向滑动时,页面以默认滑动速度滚动;如果先从屏幕右边缘横向滑动,便可选择不同滚动速度(越左速度越快),再纵向滑动以滚动页面。
       效果:手向下滑动同样距离,速度快的页面滚动幅度大(下图绿线表示手实际滑动距离,紫线表示页面滚动幅度)
   6
       滚动功能的二维空间模型如下:   
       7          
       以上两个二维滑动的例子都是通过在一个维度改变速度去影响另一个维度对幅度的控制。Snapseed的二维滑动操作更加简单易用,在界面任意位置竖直滑动固定距离切换功能,水平滑动控制具体功能的参数大小。 如果把snapseed的滑动操作抽象,可形成其通过二维滑动实现功能切换和参数调节的二维空间模型:            
89
       由此引申一下,当两个维度都可以自由滑动时,滑动可变为拖动。这时为拖动赋予功能,去判断这个功能的标准除了上文提到的滑动距离,还可以是手或被拖动物体到达或离开的区域。例如Launcher中,按下apps后进入二级界面,手滑动到对应区域release激活操作。
10

总结

       滑动手势诠释了“模糊的精确”的设计思想,有效提升操作可用性:
       1 易于学习并形成习惯用法。
       2 在移动环境下使用,适合单手操作,高效易控。
       3 通过直接操作的对象或需要时出现,代替工具栏、菜单等常用控件,节省界面空间,为信息让路。
       4 易成为产品的杀手级功能和传播点。
       当滑动被赋予功能,并与界面(信息或控件)结合时,可以有较强的可塑性,可从以下方面为切入点,结合产品功能进行思考:
       1 赋予简单功能的滑动可以是一维的;需要增加功能类别或者强度时,可以升维,形成二维滑动或者拖动。
       2 为滑动赋予功能时,去判断这个功能类别或强度的标准可以是滑动的直线距离。为拖动赋予功能时,标准可以是手或被拖动物体到达或离开的区域。
       3 借用人机交互学当中的对控制器的定义,滑动可以通过连续或者离散的两种方式去控制界面。
       最后,在设计滑动时还要考虑:
       1 滑动不是目的而是手段,先功能后交互。
       2 按照交互设计从大到小的指导思想,为维度赋予功能前,先梳理功能架构和优先级,把最常用功能置前或者设置为默认生效。  如:maibox中最易触发的向右滑动的第一级,被赋予了最常用的已读功能。    
   11          
       视频播放器中,在播放进度条的区域滑动时默认为高速进退。需要精确控制时通过竖直滑动变速。 
     12               
       百度浏览器中,默认显示最常用的工具栏,滑动时才显示页面缩放控件。        
     13 
       3 在分析具体的动态交互效果时,可以参照Design interactions中对鼠标拖动操作的分析表格(如下图),创建滑动的表格帮助理清思路(X轴可为滑动的状态细分,y轴可为滑动过程中涉及的界面元素和控件)。   
       14 图片来自Designing web interface
       4 有些复杂滑动操作有一定学习成本,可作为快捷方式,同时还需要具备通过常规点击也可实现的操作方式。

2013年5月28日星期二

关于QQ在线状态的消失:QQ要考虑的事情还有很多

刚才看到这个惊悚的标题,着实吓了一跳,但是仔细想想,何尝不是呢!随着微信的如日中天,手机QQ确实没有那么好过。

而因为同一个主子,不可能进行打压,做出这样的更改, 除了被迫无奈,还有什么呢?



不过从产品的角度来讲,这样的改变是否合适,是否有经过充分的调查和深思熟虑呢?要不然就又是一场闹剧而已。
先来看看评论:



但从评论来看,并没有得到什么支持,几乎都是一边倒的骂声,而对于这个显现,QQ产品总监方魁的解释是:大部分用户都是跟风的差评和谩骂,QQ留存率和活跃率依旧较高。
我觉得跟风虽然是一个通病,但是并非毫无道理可言,如果真的是OK的改变,也不至于分数那么低。



既然人家说“离线、隐身等功能将给沟通带来不变”,那么我就从实际的角度说说离线,隐身功能存在的必然性:
  1. 当你已经在QQ上花了很多时间,想要休息一下的时候,会选择隐身,离线等方式。 
  2. 当你想不被打扰,但是又不想下QQ的时候,或者像浏览浏览别人的空间的时候,你会选择隐身,离线等方式。 
  3. 工作QQ的情况,暂时离开,吃饭也好,什么也好,你会选择离开,隐身等方式。 
而改掉这样的状态之后,你只有一种方式来选择休息,那就是:关掉QQ。
问题一:那么,方魁兄引以为傲的留存率还会不会引以为傲呢?
而所谓的为了永久在线,其实自从有了手机开始,QQ就已经是永久在线了,更不用说微信可以接收QQ离线消息。
上面有个评论很有意思,这样一改,只会增加“在不在”这句话出现率,不过我认为,还会加一句“你是用什么上的?”

如此看来,不仅是留存率,活跃率也会下降。
如果真的决定取消离线之类的,还有几个问题有待考虑:

  1. 传输文件,如果没有在线不在线,移动不移动的状态提示,用户根本就没有办法确认是否要发送大文件(特别是大文件)。 
  2. QQ的工作性质,部分公司使用的是QQ当做交流工具,一旦取消在线不在线的显示,那么如何联系?至少不可能在手机上和你巴拉巴拉的谈工作吧? 
  3. 伸手党,我只想看消息,不想说话,也不想被说话。一旦取消,我就没有不能成为伸手党了。 

放在QQ面前的应该只有两条路,要么和微信分开,走PC路线,弱化移动;要么和微信合并。
但是看方魁的想法,是要选择第三条路,向微信靠拢,这样只会让两个产品越来越相似,但却又所有不同,这只会形成非常尴尬的场面。

2013年5月7日星期二

扁平化设计与色彩趋势【转】

Making it Work: Flat Design and Color Trends
Designmodo版权所有
作者:Carrie Cousins
译者:UCD翻译小组波希米亚
原文地址: http://designmodo.com/flat-design-colors/
这篇文章将展示很多很酷的范例,甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话,你打算怎么做?给点提示,色彩是扁平化趋势中最重要的一部分。

扁平化设计进修

wistia
roybarber
squidee
solo
扁平化设计你可以通俗的理解为:使用简单特效,或者无特效来创建的设计方案,它不包含三维属性。诸如投影、斜面、浮雕、渐变等特效都不要在设计中使用。
扁平化设计给人的感觉通常都很简洁,即使它可以做的很复杂。简单、直接、友好的特性也使得它广受移动界面和时尚网站设计的青睐。
想了解更多扁平化设计趋势,可以看之前的这篇文章

定义调色板

说到色彩,扁平化设计中会用到很多,但设计师们通常会选择大胆的和鲜亮的来使用。怎样使用色彩让设计各有不同?设计师们打开调色板,多数时会选鲜亮的,饱和度高的来用,偶尔也会使用灰色或黑色。而包括彩虹调色板在内的很多传统配色规则都被抛出窗外。
其实归根结底就是色调与饱和度的匹配。虽然在色调上,设计师可以有很多选择,但一般开始会选互为镜像的色深。它要么是一个主色或辅色的组合,要么是色盘的另一部分,包含了更多的黑白色混合。
一提扁平化设计的色彩方案,人们就会想到高饱和、鲜亮、复古或单色块之类的。并不是说这是唯一的选择,只是发展趋势让它们变的流行。

鲜亮的色彩

Flat-UI-Colors
weather-app
weather-widget
鲜亮的色彩为扁平化设计创造出一种与众不同的感觉。因为它在亮背景和暗背景下都能获得很好的对比度,以吸引用户的注意。这正是它成为扁平化设计色彩趋势的原因。

从哪里开始?

FlatUIColors.com 网站上有很多扁平化设计的流行色调,是项目起步的好选择。无论是明亮的蓝色、绿色,还是黄色、橙色,你都能从中找到流行色的缩影。这个网站最重要的一点就是,你可以免费选择和下载色值到本地。(就个人而言,我对灰色调情有独钟。)
Designmodo 已将亮色设计大纲进一步地整合到了最近发布的 Flat UI Free 套件中,包括扁平化设计,流行的图标以及调色板(对配色新手来说,这简直太赞了),而且界面更易用。
在设计中使用严格的原色的情况并不常见,比如纯红、纯蓝、纯黄,一般都混色使用。如果你想自己做配色方案,请注意简洁。记得选择类似的色调和饱和度,当然,也可以采纳我们的建议。
brights
亮色:可以尝试把这些色彩组合,或混合在一起使用。它们在白色或黑色背景上都有很好表现。
比较流行的有:蓝色,绿色和紫色。

复古色

inviosse
my-drinks
geckoboard
pattern-sun
复古色 也是扁平化设计中一种流行的方案。
这些建立在鲜亮颜色基础上的不饱和色彩,加之白色内容的反差,看起来更柔和。是不是有种老校区的感觉。复古色的配色方案往往包含大量的橙色和黄色,偶尔也有红和蓝。
复古色很常见的是用在主色和辅色上,因为它们给人感觉很舒缓。
retro
复古色:这类色彩适合作为主色元素出现,配以图案或柔和的色彩,效果最佳。
比较流行的有:橙色,桃色,梅子色和深蓝色。

单一色

cathryn-anne
foundation1
blue-mono
单一色 方案正在被日益普及。它依赖于黑色和白色的单一颜色来创造新的色调。
大多单一色彩方案都是一个基本色搭配另外2-3种其他色调。最流行的色调就是蓝色,但也有设计师采用黑色(或灰色)作为基色,用红色代表按钮或动作。另一种做法是利用颜色差异。比如蓝色,你可以添加绿色调进去,来创建一个蓝绿色的方案。
同时,单一色方案在移动和App设计中也极为流行。
mono
单一色:与其他色调方案一样,通过调节对比度,可以在父颜色基础上得到很多不同的色调。比如原始颜色对比度是100%,你可以看看调成50%,20%和8%后分别是什么样子。
比较流行的有:蓝色,灰色和绿色。

结论

其实真正使扁平化设计火起来的原因是:这个概念很新,且有趣。你可以在项目中体会这一点。
一个与项目相匹配的色彩方案,能够引导用户更好地使用网站,这是件很酷的事情。现在,超越传统配色的束缚,去创造一个更舒适的扁平化色彩方案吧。
来吧,下载 Flat UI Free 或使用现有的配色方案,开始你的项目吧。