2013年11月10日

更优雅的微信第三方设计——大粤网产品设计

最近比较忙,整理作品的速度明显放缓了许多。今天总结些前段时间做的微信第三方网站。要清楚,它是网站不是单独的一个网页。需要考虑更多是整体性的问题。

在拿到项目时,首先需要冷静下来。而不是急着去动手,大部分同学肯定都理解了解其缘由。这边要说的更多是前期先看看相似对手的情况。因为视觉设计相对于产品功能,是最容易拉开差异感的部分。或许一套不同的视觉策略就能让产品迅速脱离大部分同类作品走出来。

 

大部分的普遍

大部分的微信第三方,和似乎都不太注重展示部分。即视觉部分,隐隐有些暴发户的感觉。而且现在做这块的公司似乎已经有当年做团购的景象。多,十分多,最后迷失在一片片营销的海洋里。

做为设计师,先跳出来观察下。其实我们会惊讶的发现,这些站的普遍性都是为你做个微信mini站,就是所谓的新时代营销。最核心的功能基本也是一致,如下:

  • 智能导航(调用地理位置地图接口)
  • 在线支付
  • 全景看图(自由图片组合)
  • 抽奖营销活动

随便打开搜索“微信 营销 专家”,一堆类似微信第三方网站。现在很多的创业者也在做类似的项目,总之,就是很多很多公司做着类似的尝试。当然,国内任何的领域基本都是同时存在上百个同类的项目,能真正运营下去到最后也只有3-4家而已。

自己随便打开其中一个站点,发现其推广的核心点,也是如上述说的一样,功能部分的几乎所有的微信第三方都做着差不多的事情。如果你随便打开这个网页,你觉得你会主动去联系他们么?在很多相似产品存在的情况下。

除了外面的第三方,腾讯内部也有两个很出色的第三方平台,“风铃和微生活”。从界面上可以看出两者还是有差异,解决的方向也是分属不同的类别。

  • 风铃诉求展示和营销(偏向于资讯号)
  • 微生活诉求则是移动端的店家会员解决方案(偏向于服务号)

在这样的大环境下,怎么能够突围?大致了解后会发现,这些腾讯服务都是基于大客户的解决方案。原因是大部区,长尾中的尾部是难以触及的部分。就是所谓的中小商铺。他们的诉求除了展示,更多是希望能告诉用户他们有这项服务。这点比单纯建立微信服务更重要。

 

小部分的独特

当然上述的分析,在设计阶段反而没有想得这么深入。都是动笔写这篇东西时想到,联想到最近研究生课程中谈到的“设计管理策略”,还是一个相当有趣的部分,也属于视觉设计的一部分。以前并没有多重视,现在开始多以文章的形式将这部分思考记录和总结起来。

当看了国外几个APP站点,会发现其思路和我们有很大的差异。或许是国人更喜欢看到尽可能详细的信息,更有可能是客户喜欢你的东西尽可能丰富。有可能只是惯性思维。至少,大部分人现在看上面和下面的网页,估计大部分同学还是会选择偏向于下面的案例。

类似的站点

PAPER http://www.fiftythree.com/paper

ANY.DO http://www.any.do/

那么,换种模式,是不是应该让其产品介绍变得更优雅简洁。

当然,这或许已经和目标用户群体产生偏离。一般越优美的东西,服务人群的基数也越小。在展示设计这块,确实国外很多公司,尤其是小型公司做的很精到。或许不想错过每个进入网站的用户。就要每个页面都保持些亮点。

  • 全屏的图像/视频使用
  • 最简单的文字说明
  • 展示不同的产品/操作过程

 

我们能做什么?

和产品团队沟通后,觉得我们应该做的更偏向于优雅的方向。要达到这一个目的,其实他们的需求是“高大上”,设计师觉得满眼都是泪。翻译成我们的语言,就是优雅大气,要到达这个目标,参考图却是国内些较山寨的微信第三方。

这时候,设计师应该给出自己的参考建议。如果别人给什么,自己就做什么。就显得十分被动。未来团队,主要是需求方就变得十分强势,且结果不一定好。因为你给不出任何专业的建议,那么,产品团队不以视觉出发的参考就成了一大问题。最后,问题都卡在设计师这边。所谓做不出该有的感觉。

 

第1步:指出设计师觉得较好的风格,并共同讨论

可能会出现下面这种半成品,不需要多少细节性的东西。只是根据上面自己提出的参考方案得出的视觉稿。

当然,需求方的需求仅仅是做个首页,有图片轮换、导航和页脚,即产品介绍图片就可以。其余像我们的优势和 真实案例都是设计师根据自己的体验和相关页的参考后提出的新亮点。

确实这是种好办法,能多为需求方多想点,他们才觉得你专业。未来沟通起来的成本就小了许多。

 

第2步:确定大致风格后,细化主要部件

其实这部分是最麻烦的部分。就像老师说,大家都觉得做动画很帅。其实真正创意部分就前面就那一小点,更多的是如工匠般的打磨余下繁琐的机械工序。不能偷懒。就是一点点磨

确定完一道工序,再进入下一个环节。这个很重要,不然很多辛辛苦苦做的东西就容易有全盘否定的可能。

随后,就完成余下部分的设定工作。基本采用的还是拟物的手段,核心功能按钮固定位置。背景采用相关的配图。

 

第3步:统一成扁平化的风格

为什么要扁平化。因为团队讨论中发现,那个罗马柱和强效广告都显得很奇怪。确实,实物的造型在光感,质感和形状方面,如果不进行统一的实景拍摄,整体有可能显得乱。硬要结合在一起的时候,也需要相当多的时间统一细节。

那么,转换思路。主要也是大部分内页的视觉偏向于扁平,此时,转换成扁平也算是统一的步骤之一。

扁平不意味着简单处理,越简单的东西,不能以准确的方式呈现。就显得很粗糙,让每个扁平的图形都能以主题关联才是最难的东西。

 

产品介绍

为什么是扁平的风格,也是从这页开始。差异化是思考的重点,当大部分页面虽然也是扁平化,不过更多是以单色的形式出现,彩色很多用在移动设备中。而在网页中,彩色的部分很多还是采用拟物化的手段。

所以,核心的功能扁平+彩色。

 

关于我们

关于我们,刚开始PM构思时并不是这样,ux第一版设想也不是这样。或许这个不是最终的视觉呈现,貌似有同学说,圆圆的像TT.....我在考虑下。

 

微运网站

网址http://wy.city.qq.com/

相关资料

让网站更生动!那些在网页中完美运用视频元素的案例

学会为团队加分,而不是等着团队的光芒将你照亮

 

我的微博:http://t.sina.com.cn/drizzlep

我的豆瓣:http://www.douban.com/people/drizzlep/

2013年4月27日

信息扁平化!微信商家页

  信息设计是门很重要的课题,尤其在移动端,每个元素承载的信息都应该仔细斟酌。方寸之间虽小,每一步的设计都需要小心翼翼。为数不多的界面实践,刚好针对之前看到的无线端文章做了比对和总结,看似细小的交互部件,实际操作却能发现很多不一样的东西。文章文章,看了不进行实践看样子还是不够的。

快速模块的扁平化组件:

现在移动端的设计都渐渐趋向于扁平化的趋势。主要考虑是拟物化的界面制作周期较长,且当界面尺寸变化时,较难兼顾不同设备的显示效果。设计这个页面时考虑的也是这点,保证每个元素都能通过CSS书写。

  • 头部区域:

    需要组织的是标志,名称,联系方式和地图。由于是类似产品展示页,最重要的信息应该是品牌标志和名称,视觉上处理会放大这块区域。为什么会用圆形处理?

    1)移动设备基本支持CSS3写法

    2)圆形形状与手指相近,更容易点击。具体有操作的组件应该是保持在44px以上,当然这个不绝对。《触摸控件设计:44 pixels法则不再适用》像这篇文章已经对为什么是这个范围以及未来可能出现的新趋势做了详细的描述。

  • 列表区域:

    需要协调的是产品图片,名称,摘要。由于自己以往比较少接触移动端的设计,主要是对交互模型不是特别熟悉。看的东西很多,实际操作的却不多,别说将其整合成实际的产品。最简单的交互,是触摸和触摸两个状态。这个效果和电脑端不太相同,由于移动端已经不具备悬停状态。悬停的效果也只能产生一下点击的效果。手和鼠标的操作还是有很多的差异。具体可以看看《对于手势的一些思考》

多色彩的适配:

由于是商家页,注定商标肯定是多样化。不同的颜色绝对会导致单一的配色体系不匹配。这时候,设计时考虑的全面一点。一般让皮肤保持在5种色差较大的颜色。4种彩色和1种灰色,后者主要用于万用模板,灰色和大部分的颜色都能较合适的搭配。这点主要参考了小米V5的设计理念,它是根据头像适配不同的颜色模板,这点做点很人性化,同时也兼顾了整体美感。

界面生成演示图:

初看这个题目,看似很简单。大部分同学肯定会立马找到某个手机和平板将我们做的界面放进去。这个流程看上去并没有什么问题,一直以后都是这么处理。当然也可以利用三维工具建模,再贴图的方式实现相同的效果。这里说的并不是这个核心,下面是自己实现的应用效果。经过调整会发现整体的效果并不是特别理想,主要是图片由于拉伸,或者与目标设备的尺寸有偏差,容易产生变形。

   容易产生的问题

  • 界面尺寸与效果图的设备不一致。由于移动设备的尺寸多样,很难保证我们做的界面适配多个设备。如果强制将界面放到设备,只会让设计元素有拉伸失真的现象出现。

Placeit by Breezi 效果图自动生成

这个是个将设计师工作简化的工具,大部分我们需要演示效果图的话,都需要像上面那般捣腾PS。每次都需要经过设计师之手,像PM和交互每次动不动就找设计师处理。有没有更好的办法呢?当然有,我们可以通过这个网站将自己的网站截图搬到iPhone,iPad,iPad mini,Lumia,Galaxy这些设备屏幕上,并配上手持效果,真实度要比纯粹用PS合成要高。很简单对吧?

  • 上传图片:通过导入界面,生成真实效果图
  • 输入网址:直接输入网址,也能展示出在这些移动设备上页面的效果。
  • 地址:http://placeit.breezi.com/productshots/

 

【延伸阅读】

Ps Play——移动端预览Photoshop设计零阻力

通过WiFi,实时在终端设备上预览电脑上Photoshop的当前的设计窗口。

 

 

我的微博:http://t.sina.com.cn/drizzlep

我的豆瓣:http://www.douban.com/people/drizzlep/

___
© 2009-2020 imiten.com 版权所有

ICP证:粤ICP备15075518号


 

___
站酷 ZCOOL    
花瓣HUABAN    
 

 


知乎ZHIHU         
豆瓣DOUBAN    
  

___
时间在哪里,成就在哪里