小谈品牌识别与多终端产品的统一及差异性

标签: 交互设计 品牌 差异性 终端产品 统一性 | 发表时间:2012-04-17 12:37 | 作者:CDCer
出处:http://cdc.tencent.com

  开篇~ 小谈品牌识别与多终端产品的统一及差异性,抛砖,求玉~
  最近在多个平台试用了好些apps,从华丽丽的Mac到质朴的Windows,从灵动的iOS到多样的Android,各有各无法取代的特性。纠结且令人抓狂不已的思考是: 设计一个产品的多终端时,应该如何统一?

多终端统一性,从视觉说起
  对于多终端的产品而言,好的UI设计,不仅需要给与用户最基本的视觉舒适感,更应让界面在不同的平台,承担品牌形象识别的作用。

  我们先看个例子,MIT media lab的视觉识别,被誉为flexibility和innovation的识别系统。

详情请点击查看 http://www.thegreeneyl.com/node/294&i=9

  麻省理工学院媒体实验室一直以来给我们的独特感,在logo的设计上同样也体现了出来。logo由三个不同的形状和色块组成,每个logo代表一个人的贡献,由此产生的形状代表了一个对于今天而言,什么是媒体和技术的不断重新定义。

  在MIT media lab里,每个教职工和学生都有一个属于自己的logo. 个人专属的logo,有了这三个犹如DNA基因的基本元素,无论怎样拼接排放,视觉上都归属于同一个系列。既协调统一,又不失个体的差异性。

  品牌识别应用在名片上时是品牌logo+品牌字体+个人信息,在文件上是品牌logo+品牌字体+文件标准样式+小色块装饰,在室内使用则是logo颜色+logo的空间延伸感。整个品牌识别系统的应用,是保持核心内容一致,各司其职,而又互相补充的关系。

  好啦,关于MIT media lab品牌识别系统的内容已简单描述完毕,那么,这个品牌识别跟多终端app,又有什么关系呢?继续继续往下看吧。

 

多终端app的品牌延续

  小至名片,大至建筑,在不同的媒介上使用品牌识别元素,一是保证让用户产生明确的视觉延续和统一的识别效应;二是在相应媒介上使用时,要符合该媒介的特性,并根据特性定设计内容。

  那~~app的界面元素,在不同的终端上,是不是也应该有着与品牌识别相同的效应呢?app的交互方式,在不同的终端上,是不是需要根据终端特性定交互呢?很明显,答案是肯定的。

  请看以下案例。

 

Facebook
  Facebook在iPhone和Android平台上的界面设计。有着相同的品牌元素,且符合各自平台的用户操作体验。详细看图中标红的部分。其中展示了在两个平台上,用户是如何返回主界面,如何刷新,如何发起信息的富操作任务的。显然,Facebook在设计不同平台上的app时,并没有简单粗暴的把iPhone上的体验照搬到Android上,而是进行了平台针对性设计。

详情请点击查看 http://johnnyholland.org/2010/09/android-iphone-app-design-is-it-twice-the-work/

 

 

Spotify
  继续看看另一个案例,Spotify,一款免费的在线音乐播放软件,看看spotify在多终端上是如何设计的。

  从上面Spotify多移动终端的缩略图中可以看出,spotify有着属于自己的app品牌元素。

        iPhone            Android        Symbian(触摸屏)  Symbian(非触摸屏)    Windows Phone 7

详情点击查看 http://www.spotify.com/

  从上面Spotify在四大移动终端的图中可以看出,spotify在设计中尊重原生系统的交互、运用系统本身的设计语言、满足用户的使用习惯。对iOS, Android和Symbian的触摸屏手机,保持上方为title,中间为列表形式,下方放内容模块tab的结构;对Symbian的非触摸屏手机,由于用户主要是通过上下左右和确定等物理键来操作app的,整个内容模块是设计成列表模式而非tab结构,以适应用户的操作;在Windows Phone这种具有独特的Metro设计风格和操作习惯的平台,spotify选择融入WP7的设计语言,满足用户体验的做法。

  这点,跟品牌识别的协调统一且不失个体的差异的特性相同。

  在保持统一的同时,我们需要最大限度地融入设备的原生用户体验,让用户感受到我们的app是为他们的设备而设计的,而不是简单的去适应设备的屏幕或粗暴的统一各平台,让用户来适应我们的app。

  在此,举个反例。

  Mac系统下app主窗口关闭后,默认后台挂起,点击dock中的icon可重新打开该app的主窗口,点击dock中icon右键菜单里的退出或menu bar上的退出项可退出程序。但某某咪咕音乐for mac版本,虽然试图往Mac系统的操作习惯上靠拢,如把关闭和最小化等按钮放在了窗口的左上侧,但把Windows下点击关闭按钮,询问用户需要最小化还是退出程序的提示放到Mac下,显然与Mac的体验不相符,让用户不知所措,破坏了用户习以为常的认知和操作,使app变得不伦不类。

 

内容需要适应使用场景

  讲完界面UI和系统原生态操作的体验问题,我们再讨论下,如何在不同终端定义内容结构。

  我们先看下,一天中,用户是怎么使用各种设备的。

详情点击查看 http://uxmag.com/articles/framework-for-designing-for-multiple-devices

  简单描述上图,早晨,用户从起床开始就通过智能手机或电脑快速浏览信息;在去公司和回家的路途中,会使用到智能手机和平板电脑,其使用取决于出行的方式和方便程度;在工作中主要使用电脑,偶尔会使用手机;下班到家后,处于相对放松的状态,会同时使用台式电脑、平板电脑和智能手机。简而言之,用户的一天中,会接触到多种终端设备,包括电脑和移动设备。

  了解用户使用设备的场景很重要,这有助于我们设计除符合用户使用场景的内容。对于设计师而言,我们要根据用户的使用场景和设备,在适当的时候给出恰当的内容。

  我们看个案例。

 

Evernote
  Evernote是一个用于记录笔记的产品,在移动设备上,适用于iOS, Android, Blackberry, Windows Phone 7和WebOS via AppCatalog;在电脑上,适用于Mac OS X, Windows, Safari, Chrome和Firefox。

详情点击查看 https://www.evernote.com/

  我们来看看,在不同的平台上,Evernote的内容结构有什么不同。

  Evernote在PC和Tablet上,属于精细化编辑和内容型消费的app. 在智能手机上时,对app内容进行了优化,一是抓住用户在移动场景下使用evernote的核心功能--创建新笔记和查看旧笔记;二是根据智能手机的特点和移动设备上文字输入不便等情况,增加了拍照、音频输入和标记地理位置的功能;三是根据屏幕尺寸优化信息展示的层级结构,保持evernote一贯以来的简单易用,如下图,展示方式从大界面的并排结构到小界面层级递进。

 

多终端app承担纽带及互补关系

  回到MIT media lab的品牌识别,我们可以看出,在不同的媒介上,品牌识别的核心不变,但具体展示的方式和内容会有所不同,是各司其职,互相补充的关系。

  同样,一个产品,在不同的终端,核心功能不变,但展示方式和架构会有差异。我们需要了解每种设备的优势和弱势。如,使用性能和便携性等。不是所有的功能都会适用于所有的设备。台式电脑用户和移动设备用户对同一个产品的期望会有不同。

  举个例子,思考一个关于正在上映电影的影院网站。在台式电脑中使用,用户会期待一种身临其境的感觉,包括可以看到预告片和影片相关的细节描述等。在移动端,用户更关注的是影片列表,离自己最近的影院地址和放映时间等。

  从用户对多终端产品交叠使用的情况看,我们可以认为,同一个产品的多终端app之间,应该是互相补充和完善的关系。

 

集众家之智慧,小结多终端设计方法

  1. 如果有可能,从移动端开始设计,因为在移动的场景下有诸多屏幕和功能的约束。这意味着,移动设备上的功能是最核心的。  

  2. 确保在每种独立的设备上(包括智能手机,平板电脑和台式电脑)都能支持到用户的目标。用户的首要和次要的目标取决于使用每一种设备的场景,因此用户的使用目标需要根据每种不同的设备来定义。在这里,提供一份nielsen所做的关于多终端产品使用情况的调研数据 http://blog.nielsen.com/nielsenwire/?p=27702

  3. 在一篇讲解跨平台设计的文章中描述了一种交互设计方法。简而言之,就是,一、先根据原生态系统的交互,设计简单的线框图;二、用缩放到适应每种屏幕大小的视觉元素,以及所对应平台本身的常用基本元素控件等去设计精细的线框界面。这样有助于在设计的早期,创建跨平台的统一。而不是设计完交互后,坐等着视觉设计师去定界面元素和风格。

  4. 创建和归档设计风格规范以及模版,以便在出现设计不统一时,给出设计样式的详细说明。

  5. 以上设计方法来自于平时的收集和累积,把方法运用到实战项目中,是个艰巨而漫长的过程,D3多媒体的设计师们努力进行中。

 

文章小结:

  1. 多终端产品,犹如品牌识别,需要协调统一又不失差异;

  2. 多终端apps之间的关系是各司其职,互相补充。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5491)

相关 [品牌 终端 产品] 推荐:

小谈品牌识别与多终端产品的统一及差异性

- - 腾讯CDC
  开篇~ 小谈品牌识别与多终端产品的统一及差异性,抛砖,求玉~.   最近在多个平台试用了好些apps,从华丽丽的Mac到质朴的Windows,从灵动的iOS到多样的Android,各有各无法取代的特性. 纠结且令人抓狂不已的思考是: 设计一个产品的多终端时,应该如何统一.   对于多终端的产品而言,好的UI设计,不仅需要给与用户最基本的视觉舒适感,更应让界面在不同的平台,承担品牌形象识别的作用.

浅谈多终端产品视觉一致性

- - 人人都是产品经理
随着智能终端的多样化和快速普及,越来越多的产品都面临着多终端的挑战. 那么视觉设计师应该如何去把控好多终端产品的设计. 如何让多终端 的产品做到具备一致的品牌识别性. 首先对于“一致”一词,本人诠才末学,只能说是在自己目前的层次上去解释这词,请不吝赐 教,相信探讨完后会让我更上一个层次. 在我看来,它与对比是形成了互斥的矛盾关系,但两者同时也是相辅相成的.

有道笔记Android版上线 拓展移动终端产品布局

- 小熊TONY - cnBeta.COM
网易旗下有道搜索今日推出了有道笔记Android版,满足广大Android用户手机端使用有道笔记的需求,进一步拓展了有道笔记在手机端的产品布局,帮助更广泛的用户实现高效的个人知识管理. 有道笔记Android版拥有和桌面版、网页版一致的编辑、管理、搜索体验,提供和有道笔记iPhone版一样强大的手机图像纠偏、富文本笔记编辑等独创的特色化功能.

小米、华为、联想等多家国产品牌手机被经销商预装间谍应用的研究

- - FreeBuf.COM | 关注黑客与极客
根据德国安全厂商GDATA放出的2015年Q2移动恶意病毒报告 [1]中指出:市场上至少有26款的Android手机在卖给消费者时藏有恶意程式,受害的不乏知名品牌,包括小米3(Xiaomi MI3)、华为的Huawei G510、联想的Lenovo S860、Android P8、ConCorde SmartPhone6500、中国的阿尔卑斯(Alps)等,这些手机品牌主要销售地区在亚洲和欧洲.

产品

- - 人月神话的BLOG
最近一直在思考产品规划和产品设计研发的事情,原来谈的比较多的都是关于咨询和实施方面的内容,而对于软件和信息化行业来说,真正可持续的盈利模式仍然是有核心竞争力的产品,能够在垂直细分领域具备有定价权解决实际业务核心问题的产品. 有时候我们在考虑类似ERP类综合管理软件产品化的困难,但是实际在某个垂直细分领域,进行核心产品开发并实现产品化是完全可行的思路.

品牌的形状

- Yaping - Rologo 标志共和国
品牌的识别度可以来源于不同的表现形式. 可以是听觉,比如诺基亚经典的铃声. 也可以是视觉:从最直观的商标,以及更深入产品内部的各种设计元素. 尤其是在移动时代,每天你点击最多的是那些 App 图标. 这让形状与品牌的联系更是深入人心. Clayton Miller 有心的将各家的图标形状整理出来,做了个排排坐:.

2011 品牌 MVP :Google

- wind - 谷奥——探寻谷歌的奥秘
BrandFinance® 公布了他们的年度报告,并将年度最有价值品牌奖颁给了 Google. 微软从去年的第五名升到了第二名,而去年冠军 Walmart 则落到了第三. Apple 则从第二十名火箭般窜升至第八. BrandFinance® 称:. 正因为这个世界越来越依赖互联网,所以才会将 Google 推向第一名的位置.

HTC品牌故事

- alcon - AnimeTaste
HTC我们都很熟悉咯,这里发现了一个关于他们的动画,讲述了他们的成长之路,在此我们不去评判这个品牌的好坏,单纯来一起欣赏下这个动画宣传片吧. 每周故事汇 | weekly stories 36. 每周故事汇 | weekly stories 40. 每周故事汇 | weekly stories 1.

TermKit: 下一代富终端

- openboy - Wow! Ubuntu
TermKit 是由 Steven Wittens 为 MacOS X 编写的一个很有趣的项目,可以称之为下一代的富媒体终端. 它可以在终端中用图形化元素来显示命令结果,比如图标等等. 现在有人对此项目进行了 fork ,把它移植到了 Ubuntu 平台上,但没有原生程序,只能运行在 Chromium/Chrome 中,有兴趣的话你可以尝试一下.