如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
一周前,为了听《梦想的声音》,我在APP Store 下载了QQ音乐,无意中发现「音乐」类APP里排行第9的 MOO音乐,它的预览图让我联想到这些关键词:「小众、独特、欧美、Spotify、Apple Music」。笔者之所以从品牌设计的角度分析这个鹅厂家族新成员,是因为一款新产品的品牌设计在产品从0-1过程中扮演非常重要的角色,它关系到用户对新产品的认知与心智。
体验完 MOO音乐,我发现:移动产品品牌设计不仅要充分考虑视觉表现层,还要综合考虑战略、理念、内容、交互等多个方面。
同时,品牌设计是一种「求同存异」,「同」是保持对战略、内容、用户习惯的继承性,而「异」是相比竞品作出的差异化设计。本文就从继承性和差异化,这两个维度为你分享 MOO音乐的品牌设计。希望这种分析方法能够为你的品牌设计提供帮助。
从启动图标和界面很容易看出,MOO音乐的品牌主色是黄色,背景色及辅助色基本是以黑白灰为主。
MOO音乐之所以采用这种配色方案,不仅是为了突出产品氛围,让人眼前一亮,还有可能是对腾讯新形象IP品牌的一种继承和延续。
怪奇鹅IPENGOO,腾讯集团新一代形象IP品牌,代表着一种自我突破,不断创新的精神状态。
我们希望能像魔术师一样,以经典企鹅形象上提炼出的极简鹅脸元素,为大家创造出充满趣味、创新、时尚和脑洞的产品风格和内容,能唤醒每个用户自动发出好感电波是一件很棒的事情!——怪企鹅IPENGOO官微
每位音乐家都不是一颗孤独的星球,他们保持独立又彼此相连,在他们的探索下,音乐潮流才不断推陈出新又一脉相承。
保持探索,对先锋与经典抱以同样的敬意,所以我们创造了MOO:音乐即自由
MOO Music,Life is MOOO beautiful。——APP Store MOO音乐介绍
IPENGOO(怪企鹅)的理念是:
可见,「连接、传递、突破、创新」这些新形象IP理念在 MOO音乐的启动图标、品牌理念、交互手法、推荐歌单上都有所体现。
因此,MOO音乐很可能是腾讯新形象IP品牌影响力里的一种尝试。
此外,MOO音乐的品牌色也很有可能是对腾讯旗下年轻娱乐产品品牌色的一种继承。
Sympathize(体察和同理心),可以帮助我们去理解事物表面背后的本质,得到和理解设计的微妙细节,这些本质自然的元素不只是逻辑上的,更是可以被感受的。——深泽直人
说到音乐本质、自然的元素(不是曲风),我们会联想到黑胶、唱片、专辑、音波、调音台、乐器、Live、乐谱、Launchpad等。这些音乐元素能拉近 APP 与用户之间的距离,营造沉浸式的听歌体验,从而提升产品的同理心。
比如专辑封面的轻拟物化设计,播放时音波的、背景图片和短视频等等。
当我们在为一款新产品设计交互时,需要充分考虑目标、场景、用户这些基本因素。我们通常会考虑并兼顾多数目标用户的使用行为和习惯,为新产品设计交互方式。
所以当用户看到熟悉的元素时,会很自然地知道如何去使用,降低了新产品的学习成本,这就是我们所熟悉的「Don’t make me think」。
MOO音乐的首页PLAY页,采用的是音乐+短视频(有时候是图片)的方式,当很多用户看到这种熟悉的界面形式时,已经本能的去上下翻页、单击播放/暂停,左右滑动调整进度更是再熟悉不过。
另外,MOO音乐的歌单在产品初期功能里占据了很大篇幅,因为最契合用户听歌行为场景的是歌单。
说完 MOO音乐在品牌设计方面保持的继承性,下面来说说它不同于竞品的差异化设计,主要表现在品牌理念、视觉氛围、交互手法。
从 APP 的这4张欢迎页就可以看出 MOO音乐的品牌理念和调性了:经典、创新、前卫、独立。
从目前的版本来看,MOO音乐还是一款满足小众口味、专注听歌的音乐APP,但 APP 通过4张有代表性的欢迎页,将 APP的「小众」设计得「出众」,很好地表达了产品的品牌理念。
说到产品品牌的差异化,不得不说视觉层面的设计,毕竟视觉表现层是用户体验5要素里最具体的。
MOO音乐提供两套视觉风格,默认是品牌黄色+BLACK,另一套则是品牌黄色+WHITE,笔者觉得默认的 BLACK 更有特色和沉浸感。
字体风格方面,标题类文字(PLAY、DISCOVER、FEATURELIST、ALBUM、VIDEO、VIDEOLIST)都是大写的非衬线英文字体,欧美范十足。
调整进度的交互
主流音乐APP,是通过一个进度条和一个圆点来调整播放进度,而 MOO音乐将播放页面下方声波区域作为调整进度的热区,通过明暗的对比来表现播放进度。
虽然这种交互方式在腾讯自家短视频微视APP 中也存在,但 MOO音乐还是作了细节上的处理。
切歌的交互
通常情况下,在音乐APP 播放页面的其他页面,都有一个控件让你随时可以切歌,甚至是收藏,查看播放列表。
MOO音乐将切歌控件设计成了黑胶+滑块,切歌时只需向右滑动,而且 iOS系统还会伴随震动反馈。这个微交互设计得蛮有意思,这让我联想到胶卷相机拍完一张,然后拨动卷片扳手的机械反馈感。
目前 MOO音乐在 APP Strore 里才第2个版本,细节上的体验不可能一步到位。
笔者借此机会向开发者提一点个人的建议,仅供参考。
希望当前播放的歌曲与背景短视频或图片有一定的关系,比如系统可以根据歌曲的曲风、类别等标签,自动推荐匹配相关短视频和图片,让歌曲与背景环境更协调。当然,也可以让用户自己设置推荐或随机。
在 PLAY页面切下一首歌时,希望显示歌曲正在加载的状态,底部的音波区域好像可以作一些文章。
(iOS)歌曲评论页里的评论输入框常驻在页面底部,但视频评论页的评论输入框没有常驻,而且滑到底部时,不太容易滑到顶部,可能是小BUG。
(Android)轻触切歌控件里的暂停按钮后,黑胶旋转的角度被重置了。希望能与 iOS版一样,暂停后黑胶旋转的角度不被重置。
APP 默认的会员价格是18元/月,若勾选了到期自动续费,则价格是15元/月。
虽然这2个价格都不便宜,但相对来说,自动续费的价格更有吸引力,但这个相对有吸引力的价格却需要用户主动勾选「自动续费」才能看到。笔者建议将这2种价格都显示出来,通过单选按钮的形式去交互。这样,用户很容易就会发现自动续费的价格优势,毕竟与18元相比,15元就不怎么贵了。
MOO音乐于11月初发布在 APP Store,网络上比较多的评价是「抄抖音、抄乐趣、抄Spotify、鹅厂又抄了……」。
但作为设计师,笔者希望我们将关注点放在设计层面,去客观的评价一款APP,不要因为别人的评价而忽略了一些有品质的设计。
当我们仔细体验交互和视觉的细节后,会发现鹅厂的设计是有很多地方值得我们学习的。
最后,面对主流音乐APP、短视频APP、Spotify、Apple Musici、乐趣……MOO音乐既做到了对腾讯新形象IP、音乐元素、用户习惯的继承性,又做出了一些不同于竞品的差异化设计。这套「组合拳」已经打出了这款音乐APP 的品牌形象,希望这些内容对你有启发。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
这是一个以故事形式来展现网站:Oat the Goat,动画很有感觉,虽然小编目前的水平还做不出这类网站,但看看也可以增加点灵感、阅历,原来网站还能这样做的,一个网站,一个温暖的故事,来一起欣赏电影般的酷站,Enjoy!
网站名称:Oat the Goat
网站地址:http://oatthegoat.co.nz/
(请在PC端欣赏,浏览该网站时记得打开声音哦~)
故事是从一只羊咩咩的历险开始,他翻山越岭,途中遇到一些困难和遇到困难的小伙伴们,接着一起去克服,然后越来越多的小伙伴们一起去冒险,经过重重险阻,最终…… (还在让大家自己欣赏才有 Feel 的)
所有的画面非常的漂亮,就像在看电影一样,同时网站还带有一至交互体验,让用户去选择。
截图:羊咩咩遇到第一个有困难的小伙难了哦,我们继续看看……
截图:要选择你要怎么做了
故事结局如何?请自行观赏,同时您可以在下方评论处说出你的想法:)
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
按钮在UI设计中是一种常用的UI控件,在界面中作为主要的行动点,引导用户进行相应的操作,它在用户和产品的交互中承担着重要的作用。
按钮设计看似简单,但是如果想要更好的交互体验,引导用户进行相应的操作,提升产品的转化率这仍是我们需要研究的问题。下面小编将从按钮功能类型和设计要点两个方面进行分析。
一、按钮功能类型
按钮的功能类型往往决定了一个按钮的设计方式,是需要强调还是需要弱化;文案是需要强引导,还是直接阐述功能;按钮上是放图标还是不放图标等。按钮根据功能的不同,可以分为不同的类型,主要有行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮这六大类型。
1.行为召唤按钮
行为召唤(CTA)按钮其目的是诱使用户采取某些操作, 从而提高产品的转行率。简单来说就是通过设计诱导或激励用户点击按钮,例如立即购买、订阅关注、利益诱导、文字诱导等。
1)诱导购买
当行为召唤的目的是诱导购买时,按钮的设计不管从颜色、形状、样式都需要突出。让按钮看上去可点击,让用户进来第一眼就能知道该按钮的用途。如下图所示:
以美团外卖为例,该按钮的颜色采用黑黄对比、形状采用具有亲和力的圆角,在样式上加入投影同时加入送餐员的元素,配上小红点,能够清晰的给用户传递出可点击部分有去结算、送餐员。另外加入价格诱导,让你可直观看到优惠了多少钱,促使你进一步操作。
以淘宝详情为例,该按钮是一个组合按钮,由加入购物车和马上抢以及店铺、客服、收藏等组成,作为行为召唤按钮我们可以明确的看到,不管从颜色、形状、样式都能够让我们快速注意到。
2)订阅关注
当行为召唤的目的是订阅关注时,其重要程度相比诱导购买低很多,但是在设计时我们仍然需要考虑一个问题,这个问题可直接决定该按钮大小、样式等,这个问题就是需要根据产品目的判断是诱导用户订阅关注重要还是让用户阅读内容重要。如下图所示:
当内容重要时,按钮的设计需要弱化处理,以优酷视频的发现页和星球页为例,这两个页面很明显是以内容为主的界面,在设计时直接弱化了按钮形式,让按钮和整个界面相融合,但是按钮设计的原则是让其看上去像按钮,因此当按钮只是文字时可以加图标进行引导比如优酷视频发现页,也可以加入弱底纹进行引导还能让界面看上去整洁,比如优酷视频星球页面。
当订阅关注重要时,按钮的设计需要强化处理,以橘子娱乐和土豆视频为例,橘子娱乐采用粗描边渐变按钮,同时加入图标进行引导,具有较强的视觉引导作用,很容易唤起用户的关注。土豆视频采用黄色填充加图标引导,在视觉上和产品内容形成强烈对比,明显的以关注为主的界面。
3)利益诱导
当行为召唤的目的是利益诱导时,该按钮设计根据重要程度较高,因此在设计时可以考虑颜色、形状、加入图标、诱导文字等设计方法。如下图所示:
以大众点评为例,其领奖按钮明显比赚积分的层级高,因此为了突出领奖按钮采用了色块设计的样式,同时赚积分按钮采用描边设计进行弱化处理。
以腾讯doki为例,其打榜页面冲榜的重要层级较高,因此在设计时不仅采用了色块、加入动效图标、同时还加入了诱导文字,让按钮更明显同时诱导用户点击,其他去浏览按钮则采用描边样式弱化处理。
4)文字诱导
文字诱导简单来说就是通过文字,诱导用户进行下一步操作,多用于空页面、活动页面中,因此在设计时采用简单的色块填充即可,如果该页面为活动页面也可增加渐变或投影样式,让按钮更有空间感,进而突出按钮。如下图所示:
以得到为例,当你还没有学习计划时,它会对你进行提示“开始制定学习计划”,同时其按钮采用重要程度较高的色块+投影的方式,诱导用户点击。
以大众点评为例,当你还没有攻略时,它会对你进行提示“我也要创建攻略”,同时其按钮采用渐变填充的方式,诱导用户点击。
2.悬浮按钮
悬按钮浮是 Android 应用中最常见的一个控件。不过随着Android和iOS规范的不断融合,在iOS中也经常会看到各种各样的悬浮按钮。在设计上悬浮按钮应该采用显眼的颜色,以抓住用户的注意力。同时它应该是积极正向的交互,比如创建、分享、探索等,同时并不是所有页面都需要加悬浮按钮。如下图所示:
以UC浏览器为例,悬浮按钮在订阅页面的右下角出现,将按钮和界面结合很容易看出创建内容的意思,同时点击按钮还可呼出图文、视频等操作图标。
3.标签按钮
标签按钮往往呈多个出现,多使用在二级导航或条件筛选下面;以及表单页面作为切换条件选中。因此在设计样式上有选中状态和默认状态,同时其重要程度较低,在设计时不能喧宾夺主,需要弱化处理。如下图所示:
以支付宝为例,它主要用在投保的表单页面,其主要目的就是一个切换条件,重要程度远不及我要投保按钮,因此在设计时默认用的描边处理;选中采用淡淡的色块。
以转转为例,它主要用在导航下方,其主要目的也是切换条件,用户主要操作是看下方筛选出的内容,因此在设计时也进行弱化处理。
4.表格按钮
表格按钮也就是由一个白色网格加文字组成的按钮,从视觉上看和页面融为一体,特别不突出。因此多用在个人中心中不太重要信息或者不想让用户操作的退出登录界面中。如下图所示:
以爱奇艺为例,在我的界面中,关于我们和退出登录都是用的表格按钮,由于关于我们是不太重要信息,退出登录又是不想让用户操作的内容,因此采用表格按钮最为合适。
5.命令按钮
命令按钮也就是该按钮具有明确的指令,多出现在弹框中,通常会有一个文字或2个文字出现的情况。其要求是文字语义要明确,尽量不要用确定、好的、要等词汇,同时根据用户右手操作习惯居多,因此将重要的按钮放在右侧。如下图所示:
以京东金融为例,左图是京东金融退出的二次确认页面,右图是我调整文字之后的页面。我们说到文字需要表意明确,因此将确定换成退出后表意更加直白,降低用户理解度。
6.开关按钮
开关按钮也是我们很常见的一个组件。表示两种相互对立的状态间的切换,多用于表示功能的开启和关闭。当按钮开启后可能还会带来其他的相应操作。开关按钮最常见的就是手机设置中,但是也有很多APP将其用到界面中使用。如下图所示:
以美团外卖和小猪短租为例,它们在提交订单页面时都采用了开关按钮,同时在小猪短租中,当按钮打开底部会将“您可再入住完成10天内补全信息”进行展开显示,提示用户去填写。这种点击展开的操作还可增加更多的功能相关内容。
二、按钮设计要点
1.根据产品为按钮选择适合的形状
在按钮设计时,需要根据整个界面风格设计合适的按钮,按钮样式主要有直角、小圆角、全圆角三种样式。
直角的含义:严谨、力量、高端。适用于金融类、奢品类产品中,让产品给人严谨安全、高端的感觉。例如寺库。
半圆角的含义:活泼、年轻、安全。适用于儿童类、年轻化、娱乐类、购物类的产品中,提升亲和力,拉近用户的距离。例如土豆。
小圆角的含义:稳定、中性。适用于用户跨度较大的常规类产品中,例如微信。
以寺库、微信、土豆为例,寺库是品类电商,因此在设计时需要提现高端,因此在按钮设计时采用直角设计。而微信的用户群体上到七八十岁,下到几岁其年龄范围广,因此采用稳重的小圆角较为稳妥。土豆短视频其用户群体较为年轻活泼,因此采用全圆角较为适合。
2.使用合适的状态
在部分界面设计中需要考虑按钮的不同状态的设计,从而提高用户操作流畅度。移动端完整的系统按钮可以分为正常状态、按压状态、禁用状态。
其中,正常状态和加载状态展示的是APP的主色;按压状态在正常态的基础上叠加不透明度15%的黑色#000;禁用状态是设置灰色或者将正常态设置不透明度45%,该状态适用于提交界面中使用,比如登陆注册、转账等。如下图所示:
以京东金融为例,当未输入转账金额时,按钮禁用为灰色,当输入金额时按钮为正常状态。不过随着互联网的发展,宽带速度不断的提高,按压状态慢慢被抛弃,他存在的意义不像以前网络不发达的时候,点击还需要时间反应。
3.提供恰当的反馈
当用户点击按钮时,他们希望界面可以给些恰当的反馈。如果没有任何反馈,用户会以为系统没有收到他们的操作,然后就会重复点击。这种行为常常导致多个不必要的操作。如下图所示:
以土豆短视频为例,当点击关注时为了避免用户点击没有反应的情况,可在按钮上添加加载状态,当关注成功后图标状态改为禁用状态,同时文字变为已关注。
总结
按钮设计看似简单,但是如果想要更好的交互体验,引导用户进行相应的操作,提升产品的转化率这仍是我们需要研究的问题。本篇主要将从按钮功能类型和设计要点两个方面进行归纳总结。
按钮功能类型:主要有行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮这六大类型。在使用我们需要根据对应的功能和重要程度选择适合的设计。
按钮设计要点:主要有根据产品为按钮选择适合的形状;使用适合的状态;提供恰当的反馈这三大注意要点。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
什么是信息架构?怎么理解用户体验五要素?本文用大量的案例和插图帮你轻松掌握这个基础知识。今天想要跟大家聊一聊关于 UX 和 IA 的话题。其实在写今天这次分享的题目的时候我修改了很多次,为什么会修改很多次?这要从我在 medium 看的一篇文章说起,这篇文章的标题是《6 Tips How to Apply Information Architecture in UX Design》,翻译过来的意思是在用户体验设计中如何建立信息架构的6点建议。
当时读完文章,虽然觉得文章里讲的一些散碎的概念迷迷糊糊可以理解,但这些概念就像盖房子的砖块一样,我完全不知道这些砖块该怎样才能盖成一栋大楼,或者我就站在楼下而因为自己视野有限完全不知道这栋大楼到底长什么样子,所以因为这个原因我一直苦恼于该如何去清晰的表达想要分享的内容,思来想去决定这次分享不能仅仅是我对某篇文章的翻译,想要弄清楚这篇文章到底在讲什么,先要弄明白文章里的知识,当我们了解清楚了这些信息之后再来理解这篇文章就会轻松容易得多,下面就将我总结出来的内容分享给大家。
UX 即 user experience,译为用户体验。
IA 即 information architecture,译为信息架构。
他们的关系可以简单理解为良好的信息架构是用户体验的基础。
我们平时听到了太多关于用户体验的东西,大家都以为用户体验就跟交互设计差不多。我之前确实也是这么理解的,但是最近发现我的这个想法是有些过于片面了。
我们可以把用户体验的工作分解成五个组成要素,分别为战略层、范围层、结构层、框架层、表现层。
它们都是自下而上起作用的,每一个层面都是根据它下面的那个层面来决定的,所以表现层由框架层来决定,框架层则建立在结构层的基础上,结构层的设计基于范围层,范围层是根据战略层来制定的。每一个层面的决定都会影响到它之上层面的可用选项,信息架构只是用户体验结构层的一部分而已。
IA 即 information architecture,解释出来就是合理的组织信息的展现形式。
主要任务是为信息与用户认知之间搭建一座畅通的桥梁,是信息直观表达的载体,通俗点说就是信息架构不仅仅是设计信息的组织结构,还需要研究信息的表达和传递。
这么说也许还有些抽象,举个简单易懂的例子:
我们来看这个商场的平面解析图,通过这个图我们可以很清楚的了解商场的结构,从而快速定位自己的位置还能顺利找到自己想要购买的产品。信息架构对于一款产品来说就相当于商场的平面解析图,就像现在我们看到的这幅图一样,商场的每一层都有相对应的分类区块来指导消费者。试想如果一个商场没有对商品进行有序的分类,那么我们在逛商场的时候就很难顺利挑选出自己所需要的商品,面对各种无序且数量繁多的商品我们一定会崩溃,这样的情况对于男士来说绝对是场灾难,但对于女性来说也许会是一个充满未知探索的挑选过程吧。
但不管怎么说在这里设计师需要做的就是规划好这些楼层信息层级,主要做的工作就是:分类、层级梳理等。简单的说就是规划好每一层有什么商品,同一层商品怎么分布等等信息。
所以在互联网产品设计中:设计师梳理信息架构,其实和刚才说的梳理商场楼层架构的概念是差不多的。
一个好的信息架构一定是会满足两个维度的需求,即用户需求和产品目标。
从用户的角度出发它可以让用户在一定的信息规划下更容易找到自己想要的「东西」。
从产品目标角度来看它能通过「信息架构设计」去教育、说服、通知用户。
所以用最简单的两个字来说其实信息架构就是在做分类。
再回到刚才那个例子想一想,把商场里的商品分类其实对于我们产品而言就是在给我们产品中的信息分类,以方便用户能更好的使用我们的产品,而不会想要把产品卸载,从而使产品达到易用好用想用的目的。就跟我们逛商场一样,当我们能够根据指示顺利买到自己所需的商品的时候我们就不会因为找不到我们想买的商品而失望的离开商场。
那么问题来了,我们该如何进行信息架构分类呢?也就是信息架构的分类方法是什么呢?
这里给大家介绍2种方法,从「产品目标」出发我们可以采用「从上到下」的分类方法;从「内容和功能需求分析」出发就可以用「从下到上」的方法进行分类。下面来跟大家分享一下这两种方法的具体做法。
刚才说了从上到下是以产品目标即战略层出发的分类方法,所以最开始就是先从最广泛的、可能满足决策目标的内容与功能开始进行分类,然后再按逻辑细分出次级分类,这样的「主要分类」和「次级分类」就构成了「一个个空槽」,将想要的内容和功能按顺序一一填入即可。
我们以微信为例:首先根据产品目标将「主要分类」即一级架构分为「最近会话(微信)」、「通讯录」、「发现」和「我」;然后再进行「次级分类」分类,比如「发现」下再分「朋友圈」、「扫一扫」、「摇一摇」等等;最后将相应的功能(如朋友圈feeds、发朋友圈、朋友圈消息等)填入到相应的「朋友圈」分类中。
这样就像是先有了大概的框架我们再根据这些框架往上面加东西的感觉是一样的。
接下来我们再来说一说从下到上的方法:
刚才说了从下到上是由范围层驱动从产品的功能和内容层面出发的,所以我们就要先把已有的所有内容,放在层级分类中,然后再将他们分别归属到较高一级的类别。这种分类方法其实就是在做「归类」。
其实从下到上的信息架构方法也包括了主要分类和次级分类,但它是根据对内容和功能需求的分析而来的。先从已有的资料开始,我们把这些资料统统放到级别的分类中,然后再将它们分别归属到较高一级的类别,从而逐渐构建出能反应我们的产品目标和用户需求的结构。
具体工作中我们可以将所有的功能点用一张张卡片写下来,然后让目标用户参与到信息分类中,并反馈相关分类标准作为我们产品设计师去梳理信息架构的参考。实践过程中,更需要设计师或者产品经理本身有一定的信息筛选、梳理、分类的能力,进一步通过用户测试去检验分类的信息传达有效性。
其实就好像我们日常生活中收纳衣服,我们会根据不同标准去收纳,比如我们可以根据季节分类,也可以根据颜色分类,或者是根据款式分类,每个人都会有不同的分类习惯,所以这里归结到工作中才会让目标用户参与到信息分类中,毕竟我们的产品是服务于用户,所以还原用户使用习惯和使用心理也是我们同样要注意到的,这样可以给我们提供一些有效的分类信息帮助我们更好的做出清楚的信息架构。
当然这两种方法都有一定的局限,从上到下的架构方法有时可能导致内容的重要细节被忽略,而从下到上的方法则可能导致架构过于的反应了现有的内容,因此不能灵活地容纳未来内容的变动或增加,所以在实际运用中是需要我们将这两种方式结合起来灵活运用。
这两种方法虽然有不同的视角但其实最终目的都是让我们的产品易用好用最终达到想用的目的,所以让这两种方法对接、交汇、融合之后得出的结果才应该是我们理想中的产品信息架构。
刚才提到用户体验的5个层级是自下而上对其上面一层起作用的,信息架构位于用户体验要素第3层结构层,刚才说了结构层的设计基于范围层之上,所以这里遇到的影响因素我们还要返回到范围层面去寻找,范围层又包含两个维度,功能和内容,在从范围层到结构层这个过程中我们会遇到很多影响因素,所以把这些影响因素总结起来我们还是要从用户层面(内容)和产品层面(功能)两个维度来理解。
从用户的角度出发,理解能力、操作习惯、目标内容使用频率等等这些都会成为影响因素。
从产品角度来看,产品的核心价值、主线功能、特色功能等才是影响信息梳理的因素。
这两个层面当然也不是完全割裂的,在做信息架构的时候可以先从一个层面出发得出一个结论之后再用另外一个层面去验证得到的答案,然后再不断优化在验证过程中遇到的问题。
不同人会有不同的分类结果,因为根据不同情况我们所需要关注的侧重点会有不同,我们根据不同的影响因素会得出不同的答案。每个人都会得出不一样的分类结果,没有哪个结果是完全正确或者说是完全相同的,就像数学中的排列组合一样,内容越多我们得到的结果就会越丰富,但是这些结果当然不是全都合理的,所以就需要设计师根据自己的经验结合产品层和用户层的需求找到合理的解决方案。我们都知道在产品设计中想要设计出来一款完美不需要迭代优化的产品几乎是不可能的,所以我们能做的只能是结合各方面的影响因素和自己的经验理解一直优化产品让它接近于完美的状态。
现在我们来思考一个问题:为什么微信朋友圈这么高密度使用的功能要放到二级菜单呢?
微信的创始人张小龙是这样解释的:
保持主干清晰,枝干适度。产品的主要功能架构是产品的骨骼,它应该尽量保持简单、明了,不可以轻易变更,让用户无所适从。次要功能丰富主干,不可以喧宾夺主,尽量隐藏起来,而不要放在一级页面。
举这个简单的小例子供大家了解信息架构这个概念,体会一下如何用一个更全面更发展的眼光去看待产品结构这个抽象的问题。
要在 UX 中建立良好的 IA 我们需要特别注意的5个关键点:
所以我们绕了一大圈来看,在 UX 中建立良好的 IA 的5个关键点其实最后还是回归到了用户体验的5个要素。再回到刚开始分享提到的那句话,从上到下表现层是由框架层来决定,框架层建立在结构层基础之上,结构层基于范围层,范围层根据战略层制定。这里每一个层面都是根据它下面的那个层面来决定的,相当于把用户体验要素每一层需要做的事情从另一个维度又解释了一遍。
当然这里要注意一点,这些层级都不是完全割裂的,如果你要求每个层面的工作在下一个层面可以开始之前完成,那样一定会导致你和你的用户都不满意的结果,而相反的,应该规划好你的项目,让任何一个层面中的工作都不能在其下层面的工作完成之前结束。这里最重要的一条是,在我们知道基本形状之前,不能为房屋加上房顶。 不管我们是在这5个层级的哪一层,我们不能忘记的就是要把这些连成一个整体去理解,他们一定是相辅相成互相影响的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
苏格兰有了第一座设计博物馆,你永远不知道建筑和室内设计的边与限在哪里,它只有用不完的灵感之泉,和看不尽的精彩设计。建筑位于苏格兰东北海岸线上的悬崖,地理位置不平凡,它如何能平凡呢?
博物馆外的材质是预制混凝土,它沿着起伏的混凝土墙延伸,像千万年前的高山被慢慢风化,形成一种自然形状,曾踏上高山环云游九天,曾在无数飘渺的岁月里看世间。当太阳经过的时候,奇妙的光影效果产生,它是建筑与自然的联系。再看看室内的设计,大厅和楼梯的地板使用爱尔兰蓝石灰岩,数百万年前的海洋动植物化石藏在其中,寓意室外那片水。白色混凝土则是像濒临灭绝的淡水珍珠蚌致敬,混凝土里有不少贝壳,二楼和画廊内的地板材质选用产自欧洲的橡木,餐厅和野餐屋的地板和墙面材质是用的竹子,自然的声音在这里每天奏响。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
好看的锁骨千篇一律,
有趣的肚腩duang来duang去。
11月22日,
那一天,是西方的感恩节,
那一天,也是中国的小雪。
歪果仁感恩上帝的厚德与恩赐,
…
我只想感谢我身上的秋膘…
它,比秋裤更便利;
它,比暖宝更亲腻;
它,比集体供暖更懂你;
它,比炭盆烧炕来的更容易。
感谢久坐,感谢外卖,感谢秋膘,
让尽情放浪在暖冬的我,肥而不腻。
创意周报 – 2018年11月第3周
一周热销图片TOP5
NO.5 图片ID:678491803(点击查看图片)
感恩节将近。
这张垂直视角的感恩节餐桌照片中,
果蔬与肉类食物颜色搭配鲜艳,
木质桌面纹路不抢眼。
很适合作为网页大图、banner、
移动端开屏背景和海报背景等用途使用。
NO.4 图片ID:735764617(点击查看图片)
在国内绝大多数人更熟识双十一,
但“黑色星期五”才是世界范围内的购物狂欢节。
在国内的权重虽然不及双十一,
但是黑五的影响力依旧不可小觑。
NO.3 图片ID:1076345054(点击查看图片)
这张智能场景矢量图在8月时曾经上榜一次。
可爱、生动的形象和冷静、严谨的冷色调是让这张图片
从众多固有风格的科技主题画面中脱颖而出的重要原因。
NO.2 图片ID:1071512777(点击查看图片)
这张3D霓虹场景利用简单的几何结构搭建亮部背景,
前景空间的留白倒影也为画面增加了立体感和质感。
是一张通用型很强的背景图。
NO.1 图片ID:1092261245(点击查看图片)
经典的红、金配色,剪纸风格设计。
中国传统的窗框轮廓,左右对称的排版。
可见该作者对于传统题材的理解和用心。
一周热销题材TOP5
NO.5 健身(点击查看该题材)
进入秋冬之后,健身题材屡次上榜。
除了有氧运动的内容以外,力量训练内容增加明显。
不论男女对身体线条的追求越来越以欧美为目标。
NO.4 城市(点击查看该题材)
从后台数据来看城市题材摄影画面在上周的热销,
主要是互联网公司的采购为主。
在互联网企业不断发展的过程中,
以城市为核心、为载体的成长方式需要更多的城市影像
来传递各类品牌理念、产品诉求等信息。
NO.3 圣诞(点击查看该题材)
圣诞题材毫无悬念入榜,
小编目测未来几周内圣诞题材会一直榜上有名。
圣诞装饰主题的照片在上周比较抢眼。
NO.2 科技(点击查看该题材)
本次热销的科技题材中,以太空科技画面为主。
太空技术不但是各国国力竞争的重点项目,
也承载了人类不断探索和追求超越的梦想。
NO.1 金融(点击查看该题材)
双十一之后,人们结束了购物狂欢。
把视线集中在了各种销售行为背后的商业逻辑上。
中产阶级也更关心各种商业顶层的内容。
金融题材内容作为严肃话题一直处在讨论热点。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
大家平时在画素描的时候经常会遇到颜色深不下去、颜色对比不强烈等问题。画面的颜色总是显得很灰,体现不出立体的效果。不管多使劲颜色就是重不下去,有时把纸都涂破了,依然没有效果。这到底是为什么了?究竟如何才能把颜色重下去了?接下来我们就一探究竟吧~
什么样的画面是偏灰、偏脏的画面呢?
画面中这种暗部不暗,亮部不亮,颜色处于一个区别不大的状态,画面就会显得灰;而亮面上色的时候笔触太粗,灰面颜色磨得太多,整个亮部区域颜色就会显得很脏。
这些问题之所以出现,是因为大家没有将画面的“黑、白、灰”表达清楚。
要在白纸上画出立体的图形,需要我们加强明暗之间的颜色对比;通过强烈的光影营造立体的视觉效果。而快速表现出大的黑白灰关系是我们塑造的关键:
首先,我们找到所画物体自身颜色最深的地方。用软一点的铅笔(8B、12B)排上调子,依次过渡灰面,留出并轻轻刻画亮部,加上投影和背景。让画面先有一个基本的黑白灰,确定出最黑的地方,灰面的位置以及高光的分布。
然后,在这个基础上我们找到物体的明暗交接线。
先从明暗交界线开始加深颜色并往暗部边缘逐渐的过渡,运笔排线的力度越来越轻,让暗部形成一个有深浅颜色变化的面。靠近明暗交界线的地方颜色就重一点,靠近投影的地方颜色就浅一点,然后通过压深投影的颜色,衬托暗部的反光,让这个暗部颜色更加透气。
再回到明暗交界线,往亮部方向用4B、2B将颜色逐渐过渡,画出灰面来,但物体的灰面不宜画得过多,一多画面就腻了;灰面塑造的标准就是颜色一定要比暗部浅,灰面颜色如果加深那暗部的颜色也要同时加深,始终要保持这两个面的颜色区别。
接下来,就是对比一下整个暗部区域和背景颜色的深浅程度。如果暗部的颜色比背景深就将暗部边缘的颜色压重一点点,如果背景的颜色更深,那么就像画投影一样,沿着物体的暗部边缘叠色,加深背景的颜色;不管哪一种情况都要将暗部和背景的颜色区分开。
最后,我们有稍微硬一点的铅笔(如2H、HB)排线将亮部表现一下,主要是将高光收拢,除了不锈钢和玻璃其他物体都是越靠近高光用的铅笔越硬(HB、2H、4H),亮部刻画时排线一定要细腻,可以刻意排几组特别精准的线条加强物体的质感,这样高光和亮部会显得更白,从而就会衬得暗部的颜色更黑更深。
完成的物体黑白灰的塑造之后,最后看一看整个物体各边线与背景颜色的深浅对比,还是通过加强区部的颜色对比,完善画面整体的明暗对比。
总而言之,暗部的黑并不是独立存在,是因为周边的颜色都比它浅,于是乎,它就深了下去,如果与周围的颜色区分不开,那即使将纸张揉破颜色依旧难深下去。所以,暗部叠色就是一边画一边比较,不停的调整,才能始终确保暗部能重下去。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
文化时光机 1868-1988,以复古文化为概念,与大家分享一些系列的老式设计、品牌
编辑丨姚泽斌
校对丨BranD编辑部
不知道从什么时候开始,有了“复古风”这一说法,到处可以发现复古的衣服、家具、产品、建筑,很多旧的风格已经重新流行起来了。
BranD No.40期:文化时光机 1868-1988,以复古文化为概念,与大家分享一些系列的老式设计、品牌,为此我们提了三个问题来讲述这一期:
为什么要选用相机作为封面?
选用了一款复古相机作为BranD No.40期的封面,主要是因为我们觉得相机是极具代表性的一款能够记录时光的媒介,这一期的主题:文化时光机 1868-1988,因为一款复古相机本身具备着悠长的历史之余,它还承载着历史的变迁、人文的变化以及文明的发展。
为了继续从封面上扩散复古理念,利用照相机来提高整个封面的互动性和趣味性,设计师以“拍立得”为设计灵感,在已经设计好的封面基础上,做出了一些大胆的尝试。
最终成型的BranD No.40期的封面是这样的,远看只是一款复古的拍立得相机,但是当你接触到封面时,你会发现在相机底部是可以随意抽取出一张老照片来。
ps:每一本只赠送一张复古老相片。
这一期用什么内容记录旧时光?
或许是因为流行本身就是一个循环的过程,一些复古的潮流,很容易在沉寂了多年以后,又会开始流行起来,又或许人们本身就是很迷恋过去的美好。
有时候真的会扪心自问,为了迎合市场而进行的“伪”复古是否值得我们去推崇,这个问题我们先不必去讨论。
与其强行模仿复古的设计风格,不如跟随本期BranD新刊:文化时光机 1868-1988,去认识一下那些记录旧时光的美好物品。来看一下那时候的设计,到底值不值得让我们去把它再次流行起来。本期一共分为六大专题来记录那份美好的旧时光,那些经典的设计、古老的品牌,让您停留在每一个瞬间:
①
奇迹 ▪ 漫威
“复仇者联盟”这个英雄系列第一次出现是在1963年的漫威漫画《复仇者联盟》当中,于1961年正式定名为Marvel。
这一部分将记录着那些描绘英雄的艺术家,他们用色彩和线条构建了故事的灵魂。试着翻开来自数十年前的漫画,感受角色最原始的模样、最自然的色彩,这或许也是现代人除了看电影以外最美妙的生活方式之一。
②
永不褪色的复古美
可以毫不夸张地说,复古是种永不过时的格调,每一个年代的人们都有追溯往昔的情怀,复古设计也因为能勾起人们的这种情怀而受到青睐。因此,现代设计师喜欢在设计中融入复古的元素。
插画、纸牌、海报、票据、传单、菜单、食品或产品包装、玩具、室内外设计,各种媒介都可以成为复古元素的载体,延续甚至更生复古风格永不褪色的魅力。
③
重塑品牌传统
台湾本土有很多知名传统品牌,这些人们耳熟能详的品牌承载了传统的物产与丰富的文化记忆。美可特品牌企划设计(美可特)为不少传统品牌重塑了适应社会发展的品牌形象。
在书中美可特与读者分享的包装设计案例以不落俗套的现代设计手法,彰显出台湾在地新、旧品牌的文化内涵,燃起了人们对台湾设计的期待与信心。
④
永恒的文化
这里涉及到了一个菜谱文化,将会给大家展示一些历史悠久,珍贵又罕见的菜谱,早期的菜谱专供厨师使用,专业性较强,但随着人们对饮食的要求越来越高,而其中一些实用与美观兼具的书籍排版更是吸引了设计师和菜谱收藏家的注意。
⑤
邂逅旧时光
文具,作为旧时光的代表物品之一。几乎是从识字开始就一直伴随着我们,蜡笔、橡皮擦、订书机等,直观且鲜明地反映出时代的经济与文化。由于二战的爆发,《文具界》也发生了新变化,风格由鲜明变得内敛,颜色方面也变得相当独特。旧文具背后所蕴含的意义或许可以小到显示用户的习惯,也可能大到反映出当时的时代背景。
⑥
上海复古插画
2018年1月份中国上海徐汇艺术馆与上海风景工作室再度携手策展 “百年上海图画”, 期待通过这次展览能带给观者对城市视觉文化的回忆、思考及美育的体验,并由此引来对城市社会史、生活史的多方位的关注和研究。
展览一共展出100件与20世纪上海有关的印刷实物:书报、杂志、样本等,及30张海报。同时展出70件绘有插图的日常生活用品实物,作品在时代功能映照之下的美感交织呈现了20世纪上海插画艺术的图像简史。
字体有没有复古这一说法?
从过去到现在BranD杂志谈论最多的应该是字体设计了,随着字体设计意识的提升,热爱字体设计的人越来越多,讨论的话题越来越有深度,越来越有趣味。
平野甲贺老先生的作品是极具有历史的代表性,每当看到老先生的字体作品的时候,明明就是一副静态的作品,却在那一刻感受到了它的温度。在我看来,字体是没有复古与不复古这一说法的,但是为什么我们却想要把平野老先生的作品放在这一期复古主题里面呢?
因为我们觉得一种字体的出现正好是代表着一个年代、一段历史的诞生。恰好复古是一个大概念的说法,每个人追求的复古潮流都是一段历史、一个年代的文化缩影。而平野甲贺的字体家族正好符合这样的“复古特性。”
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com