首页

平面中的构图技巧

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

平面中的9种构图,但有的同学还不是太明白,所以小编今天细说里面其中一种构图:视觉引导线,加深大家的理解。

视觉引导线构图

什么是视觉引导线?(视觉动线)

视觉动线会将观众视觉引导到特定的方向,先创造一个视觉中心点,之后会提供一条让观众可隐约跟随的视觉路径,划分视觉阶级明显让观众知道元素之间的相对重要性。引导线是运用元素本身的原始形象或直接画出实体线条,借用这些引导线观众的视线可以被指向画面的其它元素哦。

上图中使用了视觉动线 + 留白,留白可以让海报中的「手」更加抢眼,使观众第一眼就会看那只手。接着就是视觉引导线了,引导线不一定是实体线条,它可以是元素本身的原始形状、人物视线以及元素组合等等,借用这些引导线让观众的视线可以被指向画面中的其它元素。

说到这里,我想大家也知道上图的引导线是什么了吧?引导线是手与线的组合,观众的第一视线是手,然后会顺着手拉的线方向延伸,最后停留到右下角的小字里。这几行小字就是作者要表达的主要信息。

但为什么不直接居中非要弄个引导线?虽然可以用这些中规中矩的构图,但往往会显得无趣,也不一定能吸引用户去看了。

下面小编用一些案例来让大家更好理解。

案例:

上面的海报设计是很好的例子,首先利用视觉中心点让观众集中到大字区域,然后顺着线条查看下方的内容,先是 bla 的内容,接着就是 zer,所以这图主要信息应该是 RYDER BLAZER(但小编不知道是啥……)

上图中,人物的视线也可以算是一种引导作用。

总之好的视觉引导线可以让作品富有故事性和艺术性,还能提升作品视觉上的观赏度。所以我们创造时应该重视构图。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

原来日本设计还能这么萌!53岁老顽童的“脑洞之作”风靡日本!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

说起日本设计,你脑子里冒出的第一个印象是不是「性冷淡」

MUJI、优衣库、nendo工作室,清一色的简单灰白挂,看了就让人想到「断舍离」。

但是,并非所有的日本设计,都是这个调调的,也有可能是下面这样的。

平淡无奇的红绿灯,摇身一变竟然变成了枫叶的形状?

绿、黄、红三色正好对应不同季节下枫叶的颜色,有了它就算一路碰到红灯,情绪也不会暴躁咯。

那些乘电梯永远不看脚下的小孩,银杏落叶铺成的电梯,足够吸引你的目光了吧?这玩意儿可比「注意脚下」的标语好使多了。

以上这些脑洞大开的设计全都来自于日本GOES公司创始人前田贤刚,他是个53岁的老顽童,低调到日站君只能找到他的这么一张小照片。

虽然公司总共就5个人,但却和资生堂、奥林巴斯、加拿大观光局等大客户都合作过。

看了他们的作品之后,或许会颠覆你对日本设计的认知。原来日本人认真卖起萌来,也是一把好手呐!

居家好物篇

看到这个日站君忍不住哼出声「童年的纸飞机终于飞回我手里~」

但是千万别真飞出去,因为它的真实身份其实是一个盐罐。

「灵魂撒盐」都弱爆了,「纸飞机撒盐」了解一下,做饭的时候还能顺便追忆下童年。

欸,这堆雪是干嘛的?

答案揭晓,其实这是一个门挡。

或者用来做书立也可以。永远不化的积雪,简直圆了南方孩子一个「看雪梦」,以后再也不用花5块钱,雇北方人在雪上写名字了。

虽然摸清了前田贤刚「不按套路出牌」的秉性,但日站君看到下面这个还是迷茫了,曲别针被掰弯了?

而它的实际用途竟然是固定海报的钉子!一眼扫过去,毫无违和感。不知道的可能还想求链接,哪家的回形针这么刚连墙都能戳穿。

回形针都能钉海报了,所以这肯定不是普通办公用的燕尾夹。

没错,从底部的杆子就能看出些端倪,人家就是个吧台椅。

事情变得没那么简单了,看GOES家的作品,仿佛演变成了一个「猜猜我是谁」的游戏。偶尔加班来一瓶啤酒,还挺有情调的。

哈哈你又猜错了,它只是提醒你工作的便利贴。

有情调的来了,磁带卷笔刀。

高科技仪器卷笔刀,连削铅笔都能变成一件有仪式感的事。

吃货篇

一块吐司,看上去松软香甜,让人忍不住想咬上一口。

不过别真咬,因为它是个如假包换的手机壳。这样的手机壳千万别给我,我每天都会饿醒的。

藏了块「蛋糕」的茶杯,有了它喝水都是甜甜的。

一箱来自远方的包裹,中间透出的红苹果又大又圆,任哪个快递小哥看了,都会轻拿轻放吧。

嘿嘿又被骗啦,人家只是一卷胶带,就是长得逼真了点。

夏日炎炎,来把「五花肉扇子」扇扇风。友情提醒,别在午饭前夕使用,不然可能会惨遭同事群殴!

再穿双「牛排拖鞋」,总觉得脚底板好像油油的。

冰淇淋挂钩,牢固性有待检验,总担心天一热就化了……

还有新鲜出炉的「蔬菜瓜果戒指」,青椒、草莓、胡萝卜、玉米,应有尽有,敢戴出去的,日站君敬你是条汉子。

萌宠篇

之前的巧克力总算知道是被谁偷吃的了,巧克力上的猫脚印透露了一切。

想和你家阿喵玩躲猫猫吗?纸袋子就是个不错的藏身处噢,露出的一截小尾巴,能萌死个人。

往袋子里一瞅,果然在这儿躲着呢。

喵星人款「暗中观察」插座,你家主子盯着呢,看你还敢忘拔插头!

路障也贴上阿喵的照片,醒目值立马翻了个倍。

这只萌萌的小兔子表盘,总觉得少了点什么。

如果你穿的是小白鞋,调整好角度抬眼看,少的两兔子耳朵终于补齐了。

难以想象,这些居然全出自一个大叔之手,所以说,千万别小看大叔,他可能比20多岁的你更有少女心。

宅男篇

一个画着美女的扇子,就能够成为宅男爱用品了吗?

那是你没get它的正确使用方式,只要角度找的好,就能营造出下图的场景,简直是单身男性的福音哇。

谁说露肩装是女性的专属?

男生照样可以拥有。穿上它,保准你是整条街最靓的仔。

精神病人思维广,中二少年欢乐多,漫画式镜子专为每一位中二魂爆棚的你而设。

每天起床一照镜子,谁还不是故事的主人公。

一般的伞都不够符合中二少年的气质,得撑这一把才行。

别人在明你在暗,再也不怕和陌生人进行迷之眼神对视了。

要是嫌那把不够炫酷,八星八箭全钻石豪华版足够闪瞎你的眼了吧?

下面是新时代年轻人必备的手机三件套,自带打光板的手机,绝对的合影利器!

手机也得好好防晒,「脸基尼」也给用上。

手指不够长的少年,只需一根「手指加长器」,单手按到手机屏的各个角落,从此不再是梦。

这突破银河系的脑洞,日站君不禁想为它们双击666。

GOES公司的理念是要做「引人注意而独特的idea」,看了他们的作品应该没有人会觉得他们没做到吧。

人们总会忽视眼前的风景,前田把生活中的小物件摘出来,再融入自己的脑洞。

于是当大家再看到它们时会眼前一亮,然后会心一笑,感受到创意的美好,这就是设计的意义吧。

当性冷淡、极简风大行其道,他们却致力于把普通平凡的事物玩出新花样,告别无聊的日常。果然有趣的灵魂才是万里挑一!

以上小物均为良心介绍,如有种草概不负责,别问日站君要链接,因为日站君也没有。2019年都到了,我们也稍微来点改变呗,或许比起性冷淡,不如卖萌来的赞。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

2019广告营销案例抢先看

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

2018年已过,转眼又到了2019,但营销圈中战火从未消停过……

2018年各大品牌营销玩出了新花样,优秀的营销案例层出不穷,揽获了众人的芳心。

面对2019新的一年到来,各大品牌当然也不会放过一个大好的借势营销黄金机会,都争先恐后搭上了这趟“借势营销”的顺风车,为打响2019年第一炮,自然是无可厚非的。

然而,迎来2019新年,各品牌纷纷借势“耍花招”,精彩不输往年,各种多元化新玩法碰撞在一起产生了巨大的火花,再次燃烧整个营销界。因此,在这个竞争激烈的营销战场上,频繁出现了众多品牌活跃的身影,各种刷屏级的案例也相继诞生。

下面为大家盘点的刷屏案例,看看这些品牌都是如何借助“新年”这个热点事件的势能,迅速抢占超级流量,赚足众人的眼球?

特仑苏

主题文案:更好的2019,做更好的自己!

点评:往年的特仑苏代言人只有陈道明、靳东,而今年又有两位新代言人加入特仑苏——张钧甯和邓伦。特仑苏邀请了这四大代言人共同拍摄了2019广告,又以一个全新的面孔面向用户。

广告中花式植入产品,将产品巧妙融入到画面情境中,以达到潜移默化的宣传效果,顺理成章地符合了产品植入讲究“随风潜入夜,润物细无声”的最高境界。

四大代言人共同拍摄广告,无疑是突破了传统的广告模式,强大阵容助阵,可大大体现出明星在营销中的号召力与影响力,明星背后带着庞大的粉丝群体,推动这次广告更广泛地覆盖目标受众。加大了此次广告营销的宣传力度,从中也表达了特仑苏坚持“从更好的开始”的品牌主张。其次,对于用户而言,特仑苏这波新年广告带给大家更多的是惊喜与新年的美好祝愿:更好的2019,努力做更好的自己。

京东白条

主题文案:“一点当典行”网红店横空出世

点评:就在2018年尾声已敲响时,京东白条又出来“搞事情”了,竟然在京城“四大凶宅之首”—— 朝内81号开了快闪店,使得拥有百年历史的“京城第一鬼宅”, 摇身一变,成为了一家网红店,吸引众多时尚潮人前来打卡,深夜排队的壮观场面实在令人惊叹。

京东白条精准洞察年轻人现实痛点和情感需求,以及抓住了他们的猎奇心理,将无数传说的冒险胜地——朝内81号,首次改造成京东白条“一点当典行”,为大众提供了全新的刺激潮玩体验。让年轻人通过【当与换】的仪式感,把负能量、情绪、杂念统统“分期”丢掉,切身感受“一点改变,好过一成不变”,告别社畜、废青的过去,获得新生,在2019开始更好的人生。

京东白条“一点当典行”网红店的问世,可谓打破传统印象中的金融理财玩法和当铺玩法,从一点事务局到一点当典行,京东金融始终在突破体系和行业的限定,持续打造坐拥“潮人”人设的品牌。同时也彰显出一个拥有年轻人的潮玩精神、有温度的品牌,更有效建立了品牌与用户深度沟通的情感纽带。不得不说,这一反常态玩起时尚新潮,简直是颠覆了人们对京东白条的印象,京东白条这波营销实在是妙!

据悉,2019年将会有5期系列活动陆续落地全国,既佛系又丧的年轻人,不可错过!

OLAY

主题文案:下一站,无惧年龄

点评:新的一年里,BBDO广州携手OLAY,带来无惧年龄的《下一站》,OLAY这支反逼婚广告,戳中了多少人的心窝?相信,给了你不少启发。

广告中讲述的是一个发生在“年龄列车”上的故事,女主手握一张名为“年龄”的车票,正在寻找着自己的位置,突然惊奇发现这里的车厢都是按照年龄划分的。通过这极为扎心的故事情节激发更多“大龄剩女”的思考,但也引发了更多女性产生坚定的想法,不应该因为年龄而仓促步入婚姻的殿堂。

其实,这一广告刷屏朋友圈,那是因为这广告基于对女性的心理洞察,找准众多女性的痛点,让人产生强烈的代入感,更能给予女性启发,正确面对自己的每一个年龄阶段。由始至终,OLAY给人传达了一种“不畏年龄,勇敢做最真实的自己”的精神,无形中体现了OLAY对用户的最切实的关怀,使得其品牌深得人心。

迪士尼

主题文案:“梦想成真”

点评:迎来新的一年,这支由迪士尼推出的暖心广告正式上线后,获得众多网友的一致好评,都称这已被故事中的“小白鸭”所吸引。

广告片讲述了一只小白鸭费尽千辛万苦,终于和偶像唐老鸭见面的故事。以呆萌的“小白鸭”形象,然后制造感人的故事,直击用户的内心深处的情感,从而引起用户的共鸣,加强了用户对品牌的认同感。

这次广告贴合了现实生活,从用户的情感出发,唤醒人们的梦想,不忘初心,勇往直前,因此,迪士尼给人传递的不只是对美好生活的向往,更多的是对梦想的追求与执着。还有向用户表达了:尽管我们都长大了,迪士尼还在守护我们最童真的梦想。所以,迪士尼通过这一波触动人心的情感营销,为品牌与用户之间架起了一座真正的情感桥梁。

荣耀手机

手机性能测试

(扫描二维码观看视频)

点评:说到手机的耐摔性,很多人都会想到诺基亚,但诺基亚在现如今的手机市场普及性明显不如其他品牌。而在今年,荣耀手机开始耍出了新招——推出一创意广告,铁证荣耀手机才是“坚强者”。

这是一支荣耀测试手机性能的宣传片,让手机历经各种考验,包括油烟考验、零下40度的超低温测试、高达55度的超高温测试、残酷的刮擦实验等,最后用结果彰显:荣耀手机的性能强大。

所以,荣耀手机通过展示这优质的手机性能来加强用户对其产品的认知,刷新用户的荣耀手机原有的印象。从用户的角度考虑,用实验证明,体现产品的最大价值,从而满足用户对手机产品的各种需求,也引导用户对荣耀手机产生正面的认识。最后也突显了“生活中1%的可能,也要100%的做到”的品牌理念,然而,既有可看性,又“用实力说话”的产品广告,自然会把人征服得心服口服。

网易云音乐

主题文案:“遇见你真好”年度听歌报告

点评:2018年的网易云音乐的年度报告,居然在2019年的第四天才迟到出现,网易云音乐的“遇见你真好”年度听歌报告,又双叒叕刷屏了……

众所周知,网易云音乐于2013年4月23日正式发布,也是国内首个以“歌单”作为核心架构的音乐APP,每次网易云音乐的营销与“走心”产生了密不可分的关系,大众千呼万唤始出来的网易云音乐年度总结报告终于出来了,虽然QQ音乐、酷狗音乐也在年前亮出了年度音乐总结,但偏偏是网易云音乐的年度听歌报告刷屏了。

这次的年度总结,满足了用户对音乐的需求,也满足了一些有情怀的用户,而且其歌单给予用户满满的成就感,轻易地完成了一次阶段总结。吸引更多用户参与其中,纷纷晒出自己的年度歌单报告,使得这次网易云的年度听歌报告,引发了广泛的传播。

屈臣氏

主题文案:“做自己,美有道理”

(扫描二维码观看视频)

点评:就在2019年到来的钟声一响起,大家便纷纷立了新的flag,而屈臣氏上线的H5,彰显着“做自己,美有道理”的品牌主张,刚好迎合了各大女性在新的年“追求更完美的自己”的美好愿望。

视频中的“四位小姐姐”show出了“不跟随、不妥协、不伪装”的模样,还有人的语言配合动感的画面,折射出现实生活中年轻女生渴望表达自我,追求个性与态度。呼唤大家在新的一年,立起了2019新flag。同样也展现了屈臣氏就是一个有态度的品牌。

只想说,在这2019新年之际,屈臣氏推出了这一波满满正能量的广告,能俘获用户的芳心也是毋庸置疑的了。

纵观以上品牌营销案例,可谓各有千秋,但共同点旨在使得品牌深入人心。

然而,众多品牌营销过程中需要从用户角度出发,都说,一个成功的营销,是因为“走心”,在传达品牌产品信息的同时,也能使得受众与品牌成功产生情感的共鸣,让用户更深刻地记住其品牌。

当然,我们也更期待2019,品牌主们能推出更多刷屏级的好案例。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

关于产品的需求分析方法,这篇全帮你总结好了!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

随着互联网产品的不断向前发展,「产品设计导向」一类的概念已经不仅限于大公司中,在往日越来越注重「短期效率」的小公司也都纷纷开始注重产品设计方面的建设。

所谓的「产品设计导向」指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点,明确产品核心价值;在产品上线之后,通过数据分析和功能反馈,发掘更多的需求,去规划下一步的「功能增删改」,将产品的设计方向引导到更正确的位置,提升用户留存率,延伸挖掘出产品更多的可能。

另一方面,从现在的设计环境而言,对所有的设计师既是机遇,又是挑战。大量的 UI专用工具(Sketch、Principle、Flinto、Origami等)的出现,大大提升了产品前期 UI设计师的工作效率,所以现在「全链路思维」已经从刚出现时的「概念化思维」变成了「主流化趋势」。所以现在很多的 UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析(功能设计、用户画像等)内容。

但是很多设计师的分析环节明显就是为了证明「有」而去「做」,缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品,典型用户画像里主流用户是:「男、七十岁、目标是给自己的儿子购买婚房」。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的,只是从形式上走个过场罢了。

本篇主要讲述产品设计中的一些分析方法,范围从「个人练习式设计」到「团队合作式运作」,适合初级产品经理、交互设计师,在工作中职能范围与产品规划有关的 UI设计师,想要学习产品设计的新人阅读。

产品运作流程概览

我遇到的比较普遍的问题是:很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽相同。所以说要从浅到深的学习产品功能设计,就必须先理清当前工作的常规流程,例如常见的产品运作流程。

上面是一个相对规范的产品开发流程,实际上你在看到上述流程图后,对照自己公司的情况,会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本,现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分,才能更好地提升沟通效率。

个人思考方法(一):空·雨·伞

上面讲到了设计师的「全链路思维」现在已经成为了一种主流的观点,将来前期的铁三角「产品经理、交互设计师、UI设计师」很有可能结合变成是「交互视觉二合一」甚至是「产品交互视觉三合一」的状态。所以现在很多的设计师开始尝试自己去 DIY 一个需求或者做ReDesign 这样的设计,希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候,大部分人会发现自己突然变得没有思路,从产品方向点确定到产品视觉产出之间出现了断层。

其实做过设计练习的人都知道,由于一些现实场景的不同,一些人在做设计练习的过程中会受到很多条件的局限,尤其是在孤立无援的情况下,你面对自己的练习作品往往会无从下手。当然,不同的场景下有不同的分析方法。

在团队协作的时候,分析方法要全面、严谨、反复推敲。

在个人练习的时候,分析方法要、直接、简化不必要的流程,以培养自己的分析能力为主。在这种场景下,空·雨·伞就是一个非常好的思考提升方法。

简单概述「空雨伞」思考方式:观察(事实) → 思考(内在) → 产出(解决方案)。

运用在设计上就是:发现痛点 → 思考原因 → 提出解决方案。「空·雨·伞」因为简单、成本低、易上手,可以作为设计入门培养思考能力的一种方法,但是在使用空·雨·伞的分析方法时需要结合一定的具体调研(或者轻量级的用户研究)相配合,不然又会变成一味的「拍脑门儿」式的主观臆测,对于分析能力提升没有丝毫帮助。

个人思考方法(二):逻辑树

逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是「逻辑树」。逻辑树是将问题的所有子问题分层罗列,从最高层开始,并逐步向下扩展。

简单来形容一下逻辑树:把一个已知问题当成树干,然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点,就给这个问题(也就是树干)加一个「树枝」,并标明这个「树枝」代表什么问题。一个大的「树枝」上还可以有小的「树枝」,如此类推,找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路,不进行重复和无关的思考。

如果你要运用逻辑树方法去分析产品,主要的一点在于学会细化拆解目标。

举个例子:在2017年我创建了自己的个人号,但在发布了一部分的文章之后,我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析,去发现自己提升的空间。

如上图,就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分,拆分出三级逻辑树是比较容易的,甚至你可以沿着已经列出来的大纲继续深入细化,再拆分出更细更深层的各种提升点。

逻辑树分析法在个人作品中的主要作用是发散思维;在实际工作中的作用则是针对特定问题进行分析,理清思路。总而言之,是让你在分析的过程中更加有条理,避免重复思考。但是逻辑树分析也有一个缺陷,就是在逻辑树分析的过程中,根据现象分裂出子层级的步骤十分依赖你的认知能力,就如同做设计一样,当你感觉界面的视觉出现问题的时候,需要利用你学出来的知识去进行视觉优化,如果你对设计理论知识掌握程度并不是很强,那就不能采用逻辑树分析法解决问题。

总而言之,逻辑树分析法适用于对问题研究十分深入的情况下,如果你对当前的环境认知并不充足,那么就很容易走入歪路,跑偏主题。

实际项目:用户调研访谈

在一些实际项目中,用户调研是需求来源的主要渠道。提起用户调研,很多人会觉得这不属于 UI设计师应该做的事情。其实行业逐渐规范的现在,用户调研、分析需求的能力也成为了衡量 UI设计师能力的一个标准。现在的互联网产品种类繁多,从早期只做主流行业,到现在基本所有的冷门行业都有涉及。作为设计者,大多数设计师已经开始在设计的过程中心有余而力不足。

造成这种现象的主要原因是随着行业的细分以及范围的扩大,我们距离用户的真实场景偏离太远,导致我们在设计中很容易理所当然地赋予给用户大量无用的东西,偏离了用户所需要的主要轨道。因此对于很多的设计师来说,学会了解用户以及分析需求成为了十分重要的事情。

下面是我整理的在用户调研过程中的几点认知。

1. 保证调研的目标的准确性

我们需要明确,我们希望通过调研达到怎样的目的?例如:提升部分页面转化率,收集用户对于产品不满意的地方,通过用户使用产品发现用户潜在的痛点。

2. 有目标的选择用户

一般来讲互联网公司都有收集客户反馈的部门,他们掌握着所有客户的反馈意见。我们在选择调研用户的时候,最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标。

3. 适当的准备调研内容

当我们确定了调研目标和调研用户之后,就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好(开始调研之后根据实际情况进行改动)。

一般市场调研细分的维度通常有四种,分别是:地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例:我们在调研中可能要把调研对象分为客户(老板)和用户(业务员)去进行不同情况的信息跟踪,而且根据产品的属性不同,需要提前预设好调研内容的侧重。

4. 调研过程中

在调研过程中,我们可以适当结合上文讲述到的「空雨伞」方式去进行调研观察,收集用户需求。

在调研过程中,除了思考之外更多需要注意的是对用户洞察的记录与剖析,在记录用户行为的过程中,需要遵循「不干扰」、「不引导」、「记录客观」等原则,这样才可以保持用户行为记录的准确性。

5. 获取反馈整理结果

在调研结束后,我们应该产出一份完整的调查报告,按照本次调研预设目标进行整理,规划出合适的大纲,把调研收获转化为明确的产出,产出形式最好以报告(PPT、PDF),而不是口述或者微信消息,这两者之间差别很大。

需求归类:KANO模型

虽然说现在很多的公司都开始建立了用户体验类的部门,但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后,往往很少会出现我们幻想中的「逆袭」、「口碑急剧上升」,有时还会因为受到一部分用户观点的带偏导致产品口碑下降,用户表示不满;又或者会出现需求级规划混乱,重要功能反而后上线这种尴尬的情况。

所以这驱使着团队中负担「用户体验」职能的角色对用户需求进行正确的分类和排序。

这个时候就可以运用到卡诺模型(KANO模型)。

KANO模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系,狩野教授将产品服务的质量特性分为五类。

1. 基本型需求

用户对企业提供的产品或服务因素的基本要求。是用户认为产品「必须有」的属性或功能。当其特性不充足(不满足顾客需求)时,用户很不满意;当其特性充足(满足用户需求)时,用户也可能不会因而表现出满意。对于基本型需求,即使超过了用户的期望,但用户充其量达到满意,不会对此表现出更多的好感。

例如对于网盘类产品来说,用户的基本需求是能快速地上传和下载。如果下载速度达不到用户的期望,则用户满意度将一落千丈。对于顾客而言,这些需求是必须满足的,理所当然的。对于这类需求,企业的做法应该是注意不要在这方面失分,需要企业不断地调查和了解顾客需求,并通过合适的方法在产品中体现这些要求。

2. 期望型需求

提供该功能,用户满意度提高,如果不提供该功能,用户会感觉到不满。当然在这里要补充一句,这里的需求并不都是我们整理出的主观需求,也有可能是用户在使用的过程中产生的客观类需求,例如遇到不会的体验,需求得到响应时我们给的反馈。

例如对于一些 O2O类的产品,虽然做的都比较成熟,但是由于体量庞大的原因,偶尔也会受到糟糕的体验,用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程(旅程预计时间偏差)、美团(酒店体验差)、饿了么(用餐体验差)等。在用户遇到这种糟糕体验之后,期望能通过投诉建议获得官方的反馈,那么官方把这种问题解决的越圆满,用户的满意度也会随之提高。

3. 兴奋型需求

兴奋型需求又称魅力型需求,指的是不会被用户过分期望的需求。对于兴奋型需求,随着满足用户期望程度的增加,用户满意度也会急剧上升,但一旦得到满足,即使表现并不完善,用户表现出的满意状况也是非常高的。反之,即使在期望不满足时,用户也不会因而表现出明显的不满意。

4. 无差异型需求

不论提供与否,对用户体验无影响。是质量中既不好也不坏的方面,它们不会导致顾客满意或不满意。

5. 反向型需求

用户没有这个需求,提供后用户满意度反而会下降。

按照 KANO模型分析可以对收集到的产品需求进行分类,筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。

最后

对于设计师来讲,不管是个人设计练习还是团队项目,都应该掌握一定的产品需求收集和分析的方法。如果你真的下定决心要向交互设计、用户体验方向发展,那就更需要下定一些功夫去学习相关的知识,学会形成自己的思考方法。一开始可能会很痛苦很累,但是如果一味的试图走捷径,最后只会得不偿失。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


轻量级的时尚主题

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

目前从官方介绍来看,UI组件还相当齐全,可用它来快速搭建漂亮、时尚的网页和UI设计作品,下面一起来看看介绍。

bootstrap 4 主题:shards

关于 Shards 这个主题虽然免费,但并不代表它只有「表面」,制作者还为性能性能考虑,压缩版仅12KB大小,实在太好了,以这样的大小,制作出来的网页直接能秒开。

它并不是直接使用 Bootstrap 的设计样式,所有的组件都是重新设计,以便得到统一的风格!

着陆页演示

这是非常不错的UI KIT素材 ,它还包含了10个额外的自定义组件,可以让使用者快事制作着陆页。

演示地址:https://designrevision.com/demo/shards/extra/app-promo.html

演示地址:https://designrevision.com/demo/shards/extra/agency-landing.html

UI 组件演示

Shards 含有丰富的 UI 组件,网页端常用的元素几乎包含了,大方便用户自由定制。

颜色:

字体

图标支持900+ Material icons 和 Font awesome 两大图标库!

表单上的细节,也不容忽视:

还有日期组件的设计:

卡片

按钮

导航菜单

我想这些漂亮的元素,已经足够你设计一般的网页,即使不够,也完全可以自己利用 Sketch 源文件或 HTML 模板再创作。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

交互设计、人机交互、用户体验设计三者有何异同

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本文将从历史沿革、现有状况、未来发展三个方面,对交互设计,人机交互,用户体验设计进行详细分析。

关键词:交互设计,人机交互,用户体验设计。

在学习和生活中,我们经常会遇到三个名词:“交互设计”,“人机交互”,“用户体验设计”。这三个名词是否是同一个意思呢?如果不是,他们的异同点又是什么呢?本文尝试从历史沿革,现有状况,未来发展三个方面,对这交互设计,人机交互,用户体验设计进行分析。

一、历史沿革

1.1 交互设计起源

交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。

浅析交互设计,人机交互,用户体验设计三者的异同

 图1.1 比尔.摩格理吉

交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。

交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了,它由IDEO的一位创始人比尔·摩格理吉(Bill Moggridge)在1984年一次设计会议上提出,他一开始给它命名为“软面(Soft Face)”,由于这个名字容易让人想起和当时的玩具“椰菜娃娃(Cabbage Patchdoll)”,他后来把它更名为“Interaction Design”,即交互设计。

1.2 人机交互起源

1959年美国学者B.Shackel从人在操纵计算机时如何才能减轻疲劳出发,提出了被认为是人机界面的第一篇文献的关于计算机控制台设计的人机工程学的论文。

1960年,Liklider JCR首次提出人机紧密共栖(Human-Computer Close Symbiosis)的概念,被视为人机界面学的启蒙观点。

1969年在英国剑桥大学召开了第一次人机系统国际大会,同年第一份专业杂志国际人机研究(IJMMS)创刊。可以说,1969年是人机界面学发展史的里程碑。

浅析交互设计,人机交互,用户体验设计三者的异同

 图1.2 人机工程学

在1970年成立了两个HCI研究中心:一个是英国的Loughbocough大学的HUSAT研究中心,另一个是美国Xerox公司的Palo Alto研究中心。

1970年到1973年出版了四本与计算机相关的人机工程学专著,为人机交互界面的发展指明了方向。

20世纪80年代初期,学术界相继出版了六本专著,对的人机交互研究成果进行了总结。

人机交互学科逐渐形成了自己的理论体系和实践范畴的架构。

理论体系方面,从人机工程学独立出来,更加强调认知心理学以及行为学和社会学的某些人文科学的理论指导;实践范畴方面,从人机界面(人机接口)拓延开来,强调计算机对于人的反馈交互作用。人机界面一词被人机交互所取代。HCI中的I,也由Interface(界面/接口)变成了Interaction(交互)。

1.3 用户体验设计

浅析交互设计,人机交互,用户体验设计三者的异同

图1.3 唐纳德.诺曼

用户体验这个词最早被广泛认知是在上世纪90年代中期,由用户体验设计师唐纳德·诺曼(Donald Norman)所提出和推广。身为电气工程师和认知科学家的Don

Norman加盟苹果公司之后,帮助这家传奇企业对他们以人为核心的产品线进行研究和设计。而他的职位则被命名为“用户体验架构师”(User Experience Architect),这也是首个用户体验职位。

1.4 历史沿革分析结论

由上述资料不难看出:交互设计这个名词起源于计算机领域,软件专家在进行设计时发现人和计算机的交互产生许多问题,于是交互设计这一名词应运而生。人机交互则是由人机工程学发展而来,是以人与机器的关系为切入点开始进行研究的。和交互设计与人机交互这两个名词不同,用户体验是以心理学和认知科学为基础提出的,从心理学和认知科学的角度对人和外界环境的关系进行探讨。

二、现状

2.1 定义整理

在这里,首先整理出权威的交互设计,人机交互,用户体验的定义。

交互设计:英文叫做Interaction Design。

交互设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是使用产品。

交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。因此,人的因素应作为设计的核心被体现出来[1]。

人机交互:人机交互(Human-Computer Interaction, 简写HCI):是指人与计算机之间使用某种对话语言,以一定的交互方式,为完成确定任务的人与计算机之间的信息交换过程。有很多著名公司和学术机构正在研究人机交互。在计算机发展历史上,人们很少注意计算机的易用性。现在,很多计算机用户抱怨计算机制造商在如何使其产品“用户友好”这方面没有投入足够的精力[2]。

用户体验:英文叫做User Experience,缩写为UE, 或者UX。

它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享受,是否还想再来/使用。他们能够忍受的问题,疑惑和BUG的程度[3]。

2.2 分析和结论

由交互设计,用户体验,人机交互三者的定义可以得出:在现阶段,交互设计,用户体验,人机交互都有研究人和外界环境关系的含义。但相对而言,交互设计研究的是人和产品互动的机制。人机交互研究的是人和计算机的对话过程。用户体验研究的是研究用户访问产品时的体验。从研究对象广度上说:用户体验》人机交互》交互设计。这三者既有相似之处,也有不同之处可以得出分析图如下:

浅析交互设计,人机交互,用户体验设计三者的异同

图2.1 交互设计,用户体验,人机交互三者之间的关系

2.3 数据分析

浅析交互设计,人机交互,用户体验设计三者的异同

图2.2 交互设计,人机交互,用户体验在媒体中出现频率(数据来源:百度指数)

由图2.2可知,从2011年到2018年九月,在交互设计,人机交互,用户体验三个词中,媒体报道最多的词汇是用户体验,其次为人机交互,最后为交互设计。作为一个互联网名词,用户体验传播最广,人们对于它也更为了解。而人机交互和交互设计则在一定程度上属于专业名词,还尚不为人们所熟知。

三、未来发展

3.1 数据分析

人工智能是近年来新出现的名词,这里结合人工智能对交互设计,人机交互,用户体验的发展趋势进行分析。

浅析交互设计,人机交互,用户体验设计三者的异同

图3.1 人工智能与三个词的匹配程度(数据来源:百度指数)

要结合人工智能对交互设计,人机交互,用户体验发展趋势进行分析,就要看,三个词汇中哪个词与人工智能的相关度最高,当用户搜索“人工智能”的同时搜索“用户体验”,就说明“人工智能”和“用户体验”存在相关性。在这里收集了用户搜索“人工智能”和“交互设计”;搜索“人工智能”和“人机交互”;搜索“人工智能”和“用户体验”的数据,用以研究人工智能和这三者的相关性。

由图3.1可知,人工智能与交互设计的相关性最强(用户搜索人工智能的同时搜索交互设计的数量最多),其次为用户体验,最后为人机交互。

下边从时间维度分析人工智能与三个词汇的相关性变化

浅析交互设计,人机交互,用户体验设计三者的异同

图3.2 人工智能和三个词的搜索指数变化(数据来源:百度指数)

由图3.2可知,随着时间的推移,人工智能与用户体验,人机交互,交互设计的相关性越来越明显(当人工智能搜索量增加时,用户体验,人机交互,交互设计的搜索量也增加)。

3.2 结论

随着时间的推移,人工智能与用户体验,人机交互,交互设计的相关性逐渐增强。其中,人工智能与交互设计的相关性最强。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

用迪士尼动画原则,提升UI动效体验

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则,是由Ollie Johnston和Frank Thomas在他们的书《The Illusion of Life》中提出来的观点(译者注:这本书在豆瓣的评分有9.3分,值得一看)。这些原则最初是用来为动画片这种传统的形式设计的,然而,这些原则也同样适用于UI设计。所以,我想在这里做一个有趣的尝试,看能否将这些动画原则联系起来。

用迪士尼动画原则,提升UI动效体验

一、挤压和拉伸

在动画中,挤压和拉伸代表了物体的重力,质量,重量和灵活性。举例来说,当一个弹球在它撞击地面时会发生形态变化,就是挤压和拉伸。

在界面中,挤压和拉伸很容易就联想到按钮。当一个按钮被按下时,就可以理解为受到了挤压,通过控制按钮的挤压和拉伸,我们可以很轻易的做好一个按钮的交互动画。除了按钮之外,这种原则也可以应用于UI中的任何交互元素上。

按钮在交互时的挤压和拉伸

挤压和拉伸被应用于侧边栏

二、预期动作

让观众能预先知道接下来将会发生什么,它是先于下一步会发生的动作。举例来说,迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳、正在跑步的人要停止跑步前会逐渐变慢步伐等等。

在界面中,悬停状态就是很好的例子。当我们把鼠标悬停在元素上时,元素会提供反馈,表明它是可以点击的,并且在点击时,又会有一些别的反馈。

悬停的交互通常会暗示这个按钮是可以点的

在有水平滚动界面里,通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子,因为它是在告知用户下一步的一些信息。

三、时间节奏

在传统动画中,时间会决定关键帧的绘制方式。帧数越多,动画就越流畅,同时也更慢,时间能够给动画赋予情绪和性格。

时间的节奏感是任何动画的基础,速度在元素编排中起着非常重要的作用。速度太慢,用户会不耐烦,速度太快,用户又会错过一些内容。一般来说,大多数UI动画在200-600ms之间,其中悬停和反馈交互时长大约为300ms,精细的转场动画大约在500ms。也可以去参考谷歌的动画规范(https://material.io/design/motion/speed.html#duration),里面非常详细的解释了每种动画类型的持续时间。

一些设计系统,如Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把运动的节奏感视为一个很重要的方面,并为每种类型的过渡都制定了严格的规范。

右边的过渡动画显得太过于漫长,繁琐。

四、渐快与渐慢

在现实世界中,大多数物体都遵循着缓动运动规律。也就是说,物体的运动并不会瞬间开始或瞬间结束,就像一个物体自由落体,也是一开始很慢后面才变会变快。

左侧的卡片是没有缓动的,右侧的是带有缓动的,看起来会自然很多。

给UI中的元素加上缓动会让它看起来更加自然,缓动和节奏感都是可以有效的提升动画的品质。

五、呈现方式

舞台中的表演需要合适的编排才会精彩。也就是说,对象在场景中如何摆放,每个动画又如何出现,关乎演出的质量。通过这种编排,能够将注意力引向最重要的角色。

在界面中,呈现方式能够决定元素的位置,以及在交互时,它应该如何编排才能将用户的注意力引向预期的元素。

比如现在有一个基于兴趣的音乐APP,对这个应用来说,最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此,有必要将类似的操作与其他元素分开编排,有目的的引导用户。

六、弧形轨迹

一个从高处抛出的小球,运动轨迹会做抛物线轨迹运动,弧线能使物体的运动更加自然。

在界面中,沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时,多尝试使用弧线轨迹。

通过对比,能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。

七、附属动作

在动画中,次要动作能够起到烘托主要动作,比如动画中的角色在走路时,头部的晃动就是次要动作,却能够让角色行走显得更加自然。

在界面中,次要操作能够起到强化关键动作,当元素需要向用户提供反馈时,这个方法非常管用。所有的微交互都是基于这个附属动作原理。

按钮边上的粒子效果强化了主按钮的点击效果

八、夸张和吸引力

场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。

在界面中,重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的FAB按钮就是一个很好的例子,FAB按钮在不动的时候也比较能引起注意,因为它通常会带有比较鲜明的颜色,并且是独立悬浮在界面元素之上的。当它被点击时,FAB的动画被放大,把整个界面都占满,使得它完全占据用户的注意力。

FAB 夸张的交互形式

对于支付这么重要功能的按钮,通过夸张的动效引起用户的注意

九、跟随动作和重叠动作

想象一只兔子从高处跳下来,当兔子开始起跳时,它的耳朵动作会与身体动作发生错位。然后当它着陆时,它的身体停下来了,但是耳朵还在动。前者称之为跟随动作,后者被称为重叠动作。其原理说的就是:没有任何一种物体会突然停止,物体的运动是一个部分接着另一个部分的。

在界面中,可以使元素在停止之前超过它们原本的位置,使得元素运动更加自然。(译者注:大白话就是我们常说的回弹效果。)

界面有一定的回弹,会显得更加自然。

当界面滚动时,文字会跟随图片的运动,图片与文字以不同的速度运动会更加自然。(译者注:像是被拖着走的那种感觉)

总结

界面中的每一次交互都必须在适当的场景中精心设计,让整个体验更具沉静感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。

这些原则正在以不同的形式应用于当今的数字产品中,值得敬畏的是,30年前设计的一套规则到今天仍然适用。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

为什么这些画面更耐看?

涛涛

在同样的设计框架中,要如何快准狠找到最终传达的信息?有时候选对图片让你的设计事半功倍。


导语


为什么视觉效果很重要,因为我们的大脑处理视觉信息的速度比其他信息快6万倍。在同样的设计框架中,要如何快准狠找到最终传达的信息?有时候选对图片让你的设计事半功倍。


阿思海姆《艺术与视知觉》曾经提到“视觉形象永远不是对于感性材料的机械复制,而是对现实的一种创造性的把握,它创造的形象是含有丰富的想象性、创造性、敏锐性的美的形象。”


这段话是不是太抽象了?简单总结来说意思是:美是有规律。


这本出版于1962年的经典书籍,书里说到提升美感的十个点,分别是平衡、形状、形式、发展、空间、光线、色彩、运动、张力、表现。


不要小看区区这10个词语,里面暗藏着与美感相关的知识点。


以大图和小图为例,给人的心理感受是完全不一样。大图更多给人以冲击力的感觉。小图则是平静陈述内容。选有感觉图片,建议根据这些选项再进行选择。

 




一、 说服力画面养成法


那么,图片如何正确传达信息呢?这不得不提,艺术与视知觉的平衡。我们在观察一个建筑物的时候,以巴黎圣母院来说为例:当你第一眼看上去的时候很神圣,华丽的外表,中轴对称的形式,让人们对宗教产生了一种无言的崇敬。


同样的结构,将图片给换成下图时,给人完全没有崇敬的感觉。


 

同样的结构为什么会有这么大的差异?和图片给人的隐藏信息有很大的关系。


小测试:上图你能得到的信息时什么?

  ● 怪异?

  ● 螺丝钉?

  ● 不合常理?


特异是能打破现有框架的元素,譬如一个人身挂着狗头,绝对能快速吸引你的目光。因为和常识有所偏差,所以能特别吸引目光。


返回平衡的话题,好设计都需要分析其平衡之处。就像杜尚的这幅作品《坐在黄色扶手椅上的塞尚夫人》,利用黄金分割的辅助线,以中轴对称的形式体现平衡。同时,倾斜的躺椅和身体有形成另一种平衡。


 

这种结构配合妇女的造型,形成一种端庄既视感。如果你有时间,再分析以前的绘画,都能或多或少满足找出画面给人好感的原因。


那么,有什么特征才会有这样的感觉呢?




二、 有感觉图片的具有这些特征


1、善用眼睛,影响他人


眼神选图的关键。我们都知道眼睛是人心灵的窗口,人类身上最迷人的部分,眼睛肯定算其中之一。


很多小说里都会提到通过对方的一个眼神,就能确定那个人在想干什么。听上去有点神奇,不过确实眼神有这样的魔力。



如上图所呈现的状态一样。我们看到左边的三个人的视觉焦点一致向右,我们的注意力也不自觉的往右边的区域移动。


怎么样的眼睛是具有引导作用呢?


可以参考以下这张图,一般来说,当人脸的朝向了正面的时候,他的眼睛的引导力并不算很强。因为这时候他的眼神是盯着你看,并不会在画面其它区域留下痕迹,所以引导的作用并不强。


这就是为什么画人像的时候,基本不会画完全正脸的头像,是一样的道理。因为正脸的人像会显得很严肃,并不生动。

 



根据这样的眼神理论,我们排版的时候就显得很容易,只需要将重点的内容往眼神指向的方向放置即可。



关键字:明确眼神方向



具体请看下图,我把标题文字放在眼神聚焦的地方,就会显得特别醒目。配合粗体大标题,画面内容主旨十分明确。



相反我们将文字内容移到左侧的时候,这种吸引力会弱化。看上去似乎还不错,但总感觉有点不对路的地方。就是因为眼睛的朝向是在画面之外,而文字是在画面内部,他们两者产生了引导线冲突导致的。



同样在视觉语言中。左侧跟右侧的眼睛相互交汇到中间时就会产生一种对峙感。特别适合表现一种竞争和比赛的视觉效果。



如果你喜欢,可以利用大小对比的效果,将同一张图片进行重复排列,就像下图所展示的效果一样,能产生很特别的版式。


 




三、 动作产生逻辑思考力


选图时,除了眼神能产生很强的吸引力之外,人物自身的动作也有类似的效果,比如人体动作或者手指指向的行为。


仔细观察会发现,我们用的鼠标指针就有类似的明确指向性。你会很清楚,它指向的顶端就是可以操作的区域。



在图库里面搜索到关键字:『手指 指向』,能找到很多不错的指向性图片。尤其是比较亲和的人物造型,或者快速聚焦某项内容时配合手指具有很明确的指引效果。


一本日本畅销的文案书里提到过一个观点,什么是优秀的文案?就是看完之后,能让人产生行动,这就是好的文案。



关键字:有身体动作



举个例子:

  ● 迷人的姑娘,便宜的产品(状态描述)

  ● 作为普通文员,她为什么拥有令人羡慕的小资生活?(动作描述)


好的图片也具备了这样的特点,搭配手部动作,图片具有很强的诱导性。



人物的手部动作,可以清楚告诉用户什么样的内容是重点。就如同下图所示的一样。左侧的图片明显要比右侧的图片更有吸引力。


以往可能你并不清楚,为什么有这样的不一样的感受。经过上述分析的案例,应该就理解其中的原因了。



同样的指向性动作是可以连续搭配使用。图片展示的效果如下图,通过一个向左动作跟一个向下动作,形成了完整的指向型视觉引导方案。


这个方案既有明确的引导性,也有人物间的大小对比,整体看上去会显得比较完整和耐看。



我们分析一下,如果将颜色去掉,效果是不是不一样的?得到的是这样的结果。


可以明显的感觉到, 图一的指向性要比图二好很多。



试图通过视觉点的分布,看看问题出在哪里?


图二视觉点会有两个,第一个是往下的视觉点,一个是往右的视觉点。整体感受就会比较凌乱。


相反,图一比较明确,只有一个按顺序移动的视觉点,即先向左再向下,最终触达核心文字。








四、 具象,遵循潮流的方向


当你找到图片之后,不清楚要做成什么风格的时候,趋势可以帮到你。


趋势是从哪里来呢?



关键字:具有明确眼神方向



一般可以从各大时装周得到,另外还有很多大型的设计网站,每年都会发布下一年的趋势报告,那里也有大量的参考性案例。我们试图挑选其中一个风格趋势,配合我们找图的技巧,看看能得到什么不一样的结果。


  ● 大胆的用色(Bold Color) 




大胆的用色风格有一个很大的特点,颜色使用特别大胆跟前卫,可以配合一定的矢量图形搭配使用。需要采用多于3种的色彩,以及高饱和度色调。


那么这个风格的特点,就可以整理成以下关键字:

  ● ins 

  ● 时尚

  ● 粉色




挑选其中一张图片作为主题,再利用初始用到的参照物分解原理,将其拆分成这三块内容,即点缀,主题跟色调。


为什么会选择这张嘴唇的图片呢?


首先前卫风格使用的元素都会比较另类,于是图片素材就需要满足另类的特点。而另类广义来说是超出原来的正常理解范围。


譬如:像嘴唇、鼻子、鞋子这类本不该出现的物体,取代了原本头部的位置,结构成为了另一种猎奇的物体。



仔细分析大胆前卫的风格。首先发现这些风格的图片都会经过处理,不会直观表现原来的样子。意味着直接将找到的图片拉进这种设计是不合适的。


利用曲线跟色彩饱和度两个参数进行特别的调整,形成下图。当然如果你愿意,也可以变成其他任何高饱和度的色彩,形成的感觉也是差不多的。



 

特别注意要利用对撞色的原理,配粗字体,参考波普风格元素,在关键字里添加上『波普』这个词语会得到更多惊喜。



最终形成的海报,如图所示。






五、 图片传达实验室——迅速提高图片魅力


看了那么多有魅力的特征图片,肯定要动手实践,怎么将这部分的知识融入到选图之中。


我将这部分内容称为图片传达实验室理论,是以一个界面为例,结合我们选图和处理图片的技巧,形成一批有说服力的界面。


 

目录会分为发现问题,列举课题,评价方案和实施策略。文字会以这四部分为主要核心,简述整体提高图片魅力的方法。

 


在聊这个问题之前,我们不妨来看一下这张图片,每日新闻的一张漫画。好像没有什么问题,就是一个有关特朗普跟普京的故事。



但是我们试着换另一种角度去看。每个角度都能呈现不一样的内容。虽然它们都是引用了同一张图片,但是表达的意思却是完全不一样,另外所表现出来的视觉语言也是相当不同。



这意味着一张图片是可以被多次利用,而且只要你用的图片尺寸够大,局部是可以用作很多用途,你能创作的可能性就会多元化。




1、发现问题


我们以关键字『静谧』开始,对这个技巧进行讨论。通过搜索,在图库里面找到了这么一张图片。初看下来没有什么特别大的问题,颜色,图形和构图都还可以。


 

试着将它植入到音乐界面里,得到了以下效果。用直接将图片以默认方式嵌套到这个矩形里,能清楚的发现图片下半部分显得空荡荡。效果并不是很好,而且图片的上半部分,文字和背景粘在在一起,造成的阅读影响。


 


2、解决的课题


我们该怎么解决上述问题呢?很简单,只要将图片进行反翻转可以了,最终形成以下所示的效果。


拿到图片,特别是这种类似背景的图片,翻转是很有用的技巧,它可以实现从不同的角度适用图片。


  ● 文字:在图片里显得清晰。

  ● 重点:变得更有视觉焦点。





3、列举替代方案


当我们找到了这么一个角度之后,可以分析颜色,进而列举出更多可选的方案。


也可以通过软件,将图片颜色进行抽离和分解的工作,快速形成一组可供我们参考的颜色。


如图所示,就能快速实现配色方案的目的。

 



能列举不同结果的方式还有很多,除了配色分类之外,我们还可以用以下3种方式。这里的每种方式与之前的素材整理法相似,都是一种快速扩展素材的模式。



① 以图搜图:


这是一种快速得到图片的方式,不用怎么动脑,只要你觉得这张图片还可以,就能找到跟它相似的一堆图片。


 


② 颜色关键字搜索:


对目标图片颜色的分析,列举出颜色趋势,并将这些名称放到专业的图库里进行搜索。

 



③ 高级自定义搜索:


可以只用普通引擎进行针对站点检索,进行指向性搜索。你只要知道目标就可以针对搜索。


 





六、 实施方案策略




1. 权威高质量相关性图片


这部分主要是结合之前聊到的三个图片特征,进行组合搭配。如果只有背景的画,图片的魅力是不太够,这时候我们需要引用人物的造型。


人物和静谧这个主题相关,我们找到了有静音动作的图片,具体如下图所示。


我们直接将这张图片抠出来,放到我们之前整理的背景里的话,明显是显得有点格格不入了。因为两种画面的风格不太一致,这就需要进行统一的调整。



调整会利用到photoshop 里面的曲线工具,色阶工具以及曝光工具。分别针对亮色系跟暗色系做了两套版本进行对比。做出来的结果,亮色系对整体的界面更有帮助。


 



2. 能引起行为的动作按钮


还记得前面的章节提到,一个令人引起动作的手势,是很重要的行为吗?


我们可以通过眼神和手部动作,进行视觉焦点的锁定,类似下图所示的结果,并且结合图片合成的技巧进行一致性的输出。


对于眼神望向右边而言,『80%和购买按钮』显得就非常明显。

 




3. 减少视觉噪音


完成上面那一步还是不够,我们试图减少一点视觉噪音。什么是噪音呢?就是对整体画面没有帮助,却能吸引观众目光的元素。往往这些东西都会出现在背景里。


我们都知道,如果背景越复杂的话,前景的重点性会减弱。这一步可以对背景进行简易化的处理。最终形成的样子,如下图所示。






4. 款式一致


除了上述能为图片加分的选项以外,还有一点,就是当多图片使用时,一定要注意款式的一致。





七、 延伸思考:技术思考


已经简述很多关于图片处理的技巧,另外还有一个很重要的概念,我也将此放在这里进行延伸思考。吉萨金字塔和达芬奇传世画作《蒙娜丽莎》有什么关系?它们都是基于黄金分割设计!


黄金分割是一个数学比例。我们在大自然中很容易找到这样的比例,当它用于设计时,能创造出有生命力的、纯天然的视觉作品,愉悦我们的眼睛。



无论是设计或是摄影构图,合理使用黄金比例可以让你的作品更美观,因为这套系统已经是被历史验证过,超越感觉的一般性方法。


但黄金比例不只上图所示的样子,还有许许多多的形式。一般我们使用时,将主要元素放在交界线的位置就可以了。



但是我们适用设计软件里并没有这一选项,自己动手做的话明显也不是很合适。这时候,我们就要使用到万能的插件。


在介绍插件前不妨看一下,我们利用黄金比例去分解世界名画,可以得到这样的结果。就是主要的元素都能放在线段交界的部分。这就是为什么有些版式,看上去很有美感的原因所在。



那我尝试用这种ps插件,将生成的黄金比例图,放到了我们所需图片里。插件有个地方,它可以根据的图片尺寸。自动适配一个黄金比例图给你。


  ● 插件一:Divine Proportions Toolkit


  ● 插件二:GoldenCurve黄金分割线GoldenCurve - PHOTOSHOP中的黄金分割线





总结:


具有说服力的画面是什么样子呢?或者换一种说法,什么是耐看的画面?应该就是能让人产生行动的效果,注意『行动』这两个字很重要。


什么样的情况会产生行动呢?我们可以利用眼神,动作以及趋势塑造有动作感的画面。一般,有感觉的设计也会紧紧遵循这样的原则,另外我们对这套理论进行实践,得出快速提升图片魅力的方式,即发现问题,列举课题,评价方案和实施策略。

可读性在网页设计中的重要性

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

当我们打开一个网站,我们会看网站界面是否美观,交互是否符合人性化,布局是否合理等等,这些因素对网站起到一定的影响作用,但最根本影响一个网站的是整个网站的可读性。
良好的设计应该都是可读的设计,如果信息都无法正常而清晰的传达,那么设计就失去了意义。设计的可读性和排版设计息息相关,与此同时,对比度的控制也是其中的核心。想要提升内容的可读性,让内容以更加顺畅、更符合逻辑的形式呈现在用户面前,可以通过以下几种方式来提高网页的可读性。

1.文字的可读性

要让文字提高可读性,可以通过调整字体样式、外边距、内边距、颜色和对比度等参数来提高文字的可读性。

  • 字体样式:字体的样式会影响可读性。


  • 行长度:每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽,阅读性差。同理,每行文字太短也不行,会给读者的眼睛带来压力,造成混乱。

  • 外边距和内边距:和行距一样,元素周边和之间的空隙也影响着用户阅读文字本身。

  • 颜色与对比度:文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字,就难以阅读了。设计师选择浅色字深色背景,或是深色字浅色背景,都是有原因的。对比使得字符容易阅读。

目前文章内容流行的字体是14PX(像素),这样不容易造成视觉疲劳。可以统一去设置全局的字体大小,包括行距。

除此,文字链接最好用颜色或是其他样式跟正文区分开来,这样读者可以清楚的知道哪里可以点击。例如:可以给a标签写个下划线代码text-decoration: underline;。

2.段落的可读性

段落的可读性一样可以用过文字和图片来提高。文字方面跟上面提到的,可以通过字体样式、外边距、内边距、颜色和对比度等参数来调整之外,还可以通过段落行距来调整字段间距。

  • 行距:每行文字间的间距也同样重要。看看这篇文章,如果每行文字都与上下两行粘在一起,你就无法理解这些句子。

可以从上图看出,文字段落之间不留白可读性不高。右边的标题和段落之间、行与行之间和段落与段落之间都留了一定的距离,所以整体会显得更为整洁和可读性高,这些在网站当中用Margin、Padding和Line-height可以来调整留白的大小。切记,行距大小不是越大越好,一定要适当。


在通篇文字的文章当中也可以考虑适当的穿插一两张图片进去,配图可以提高文章的可读性。

3.区块的可读性

区块间也要有一定的间距才能提高区块的可读性。

区块留白这个有点类似上面的文字段落留白,在网页当中,每个区块与区块之间也要适当的留白,而这个留白主要还是体现在Margin和Padding上。如果取消两个区块的Margin和Padding,那两个区块的内容会聚集在一起,这样不利于观者去区分区块之间的关系,也不利于阅读。所以一般我们在给网站做界面的时候,都会设置一定的间距,就像蝉知系统中默认的间距是7px,当然,这个间距的大小都是可以调整的,看你怎么去设计这个页面和页面的整体风格是否和谐而定。

可以看到上图左侧区块之间的间距为0,整体区块和区块之间看不出间隙,给人拥堵的感觉。但是右侧留有一定的间隙,所以看起来比较舒畅,可读性也相对高很多。

4.图片的可读性

为什么说图片也具有可读性,要知道一张好的幻灯片设计可以起到一定的作用,大部分的网站第一眼看的就是幻灯片,所以图片的设计也不能忽视。
图片的设计可以通过对比来设计,比如色彩对比、字体对比等。切记勿用复杂的背景来当幻灯片,这样标题在画面上就不够突出。

上面的例子,显而易见,当图片背景比较复杂的时候,文字的阅读性就差一点。第一张图的背景比较简洁大方,加上不用设计的字体,自然而然的主题就凸显出来了。

5.导航的可读性

说到导航,这个其实是整个网站架构当中最重要的,所以我也把这点放到最后来讲。网站一定要有清晰的导航,方便读者浏览和了解整个网站的架构。所以在设计导航的时候一定要考虑到浏览者的习惯。

  • 导航要简单明了,避免奇怪的布局。

上面这个导航不是说做得不好看,而是找交互的设计用起来让用户会有点不舒服,导航下拉时,除头部内容整个页面整体下移,这也可能就是设计师特意做的效果,但是很明显,效果不是特别出彩。

  • 导航点击状态下的样式和普通样式需要有明显区别。

上面的这个导航,点击状态下和正常显示的样式效果区别不大,所以识别性不够高。

  • 导航的层级关系设计简单点,最好不要超过三级。

现在很多导航设计都将二级导航和三级导航放在一起,这样受众在浏览的时候也可以更清晰网站的架构。


优秀的网站,通常在用户体验上非常用心,而网站良好的客户体验除了优秀的界面设计、合理简洁的框架布局,还有一点至关重要——网页的可读性。


蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

谷歌设计师:看起来很高大上的设计思维到底是什么?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

提到设计思维,我们大部分时间会把它理解成「用设计师的思维去设计」,但其实它并非一种思维,而是一种方法论。Interaction Design Foundation 把「设计思维」(DesignThinking)定义为一种可反复使用的模式,并要遵循「以人为本」的核心去了解用户,挑战老旧的思想和重新定义问题所在,并通过五个程序:共情(Empathise)、确定(Define)、形成概念(Ideate)、原型(Prototype)、测试(Test)来找出适当的解决方案。

△ 设计思维的五个步骤(图片来源:99U)

无论是创造一个新产品,或者是给现有的产品添加新功能,革新教育,改善一个企业的运营。设计思维(Design Thinking),这个存在了差不多半个世纪的方法论已经渗透到了各行各业。

前不久,Khoi Vinh(平面设计大神,前纽约时报的设计总监)在他的博客Subtraction.com 上面发表了一篇很有趣的文章《In defense of Design Thinking,Which is terrible》(为设计思维辩护)。这篇文章是他和 Natasha Jen「Pentagram(五角)合伙人之一,她在去年在99U上发表的演说《DesignThinking is Bullshit》(设计思维就是纯扯淡)引发了一波对设计思维的讨论,在第三届Phil Patton讲座上的交流记录总结,再加上他自己的一些感触而成。那时,我深度接触设计思维这个方法论也有段时间了。这篇文章以及 Natasha 的演讲引发了我对这套方法论的思考。就这个话题,我跟国内外的设计师朋友,产品项目经理进行了一些交流,加上本人的工作经历,跟大家谈谈我对这个方法论以及设计本身的看法。

△ 图片来源:https://www.subtraction.com

先总结一下两位大神的观点。Natasha 认为,设计不是一个线性的过程,它不能被简简单单流程化,并且可以运用在任何一个行业去解决任何问题。她还认为设计思维这个词盛行的现象是令人担忧的,设计思维里的五个环节中也完全缺乏了批判这个板块。而批判、总结,再加以改进设计方案是直接影响一个作品/产品成功与否的重要因素。所以,如果这种缺乏批判的设计(方法论)被越来越多的人接受并且加以使用,这有可能会导致设计的「下坡路」,而且会误导大众对设计本身的理解。所以在她看来,设计思维是纯扯淡的,除非她能看到一些真实存在的证据,证明设计思维的优点。Khoi 从非常客观的角度跟大家探究了设计思维,比如它让许多不同领域的人都能参与到设计,解决问题的过程当中(设计的一大功能就是解决问题 problem solving)。Khoi 从 Natasha 演讲里感觉到了她对设计民主化的一种恐惧,他认为 Natasha 觉得只有设计师才能设计,而且只有设计师应该设计。让非设计专业的人来设计会直接导致差设计的产生。Khoi 认为这种领土性质想法是有问题的。当更多人了解并且投入于设计当中后,并不会导致设计的整体质量下滑。如果能有更多非设计专业的人来解读设计并尝试设计,这其实对设计本身是非常好的。就像科技,当它被更多人学习,应用并加以改进之后,才会有更多的突破和革新,设计也应该如此。但是他也同意,设计思维是一把双刃剑,也有不足之处。比如它不可避免的方言性,和它促进设计民主化的效应力其实并不高。

对于他们两个所说的观点,我觉得都对。但是更准确的说,他们两者所提到的设计并不能相比,因为设计思维(方法论)与设计其实是两个非常不一样的东西,从名词上来说已经能嗅出它们的不同。

文章目录

  • Natasha Jen – 批判在哪里?
  • 为什么设计思维是纯扯淡?
  • 谷歌的设计冲刺
  • Khoi Vinh – 设计(思维)的方言性
  • 「当你都不会这门语言」的时候…
  • 「那就更别提去理解这门语言了」
  • 总结

Natasha Jen – 批判在哪里?

Natasha 所说的设计是设计师们通过自己的独特风格以及对当前的设计潮流的敏锐感觉来创造出满足客户/大众审美的作品。这里的设计,狭隘地来讲,可以定义为一种主观的行为。那么这个行为可以通过很多不同的方式实行。Natasha 本身作为一个非常成功的设计师,她对视觉的敏感是不用说的,在 Pentagram 这种设计巨头里,她也是创造设计潮流的那批人。「虽然我们公司涉及到的项目种类非常广,包括企业形象设计,展览设计,出版物,动态图形等等。我还是会用平面设计师来定义自己。」她的开场白「设计思维现在是个流行语。这就是问题所在,当今社会尤其是设计师圈子里,并没有很多对设计思维的批判。我认为像我这样非常在乎自己发布的作品质量的设计师们,真的应该好好思考一下设计思维的含义,以及它会给设计领域乃至社会带来的影响。」之后,Natasha 讲解了设计思维的五个环节以及通过在谷歌图片搜索「设计思维」得到的答案,也就是五个排列整齐的六角形以及密密麻麻的3M便利贴,风趣的总结了社会对设计思维的理解,并简单介绍了设计思维的由来。

△ 图片来源:https://99u.adobe.com/videos/55967/natasha-jen-design-thinking-is-bullshit#

什么是批判?如果你就读过设计学院,你肯定知道在设计过程中的每一个步骤,每一次讨论中,批判都是非常重要的。你提出一个创意,并展示出支持你创意的证据,然后在场的各位就开始各种建设性质的喷你。这才能真正促使你的提高啊,对吧?与此同时你也能开始真正掂量和反省,到底什么是好的?但是批判在设计思维里面完全不存在。──Natasha Jen

我完全同意她所说的,但是 Natasha 的设计并不是设计思维,设计也确实不是一个线性的流程。当然啦,打草稿,被喷,修改,再被喷,再修改,最终结束,大体有一个套路。这个设计也不完全能被模式化,并用于任何行业去解决任何问题。咱们再来看看设计思维的五个环节,里面真的没有批判么?其实也是有的,而且每一步都有批判,只是它存在的形式跟 Natasha 所讲的批判不一样。怎么讲?我马上跟你们慢慢道来。在那之前我们来看看设计思维到底扯淡在哪里。

为什么设计思维是纯扯淡?

设计思维为什么扯淡?同学们先要明白,设计思维并非是一种思维,它是一个方法论。那么这个方法论本身是没有正面也没有负面的。其实就看企业和团队如何使用这个方法论了。挪威设计师 Lillian Ayla Ersoy 发表的《为什么设计思维在走下坡路,我们应该做些什么?》一文中探究了这一话题。她提到了她近几年周游世界参加各种设计研讨会所看到的新发布的产品已经变得千篇一律。她提出,设计思维不应该是一种生产线。它其实应该促进新创意和解决问题的方案,如今的设计思维已经变成了一个差不多产品的生产线。平面设计,动效设计,情感设计等都在慢慢失去它们的价值,但是决定产品成功与否的重要因素也都是它们。这其实跟 Natasha 提到的观点非常相似,她认为对于很多企业来讲设计(思维)只是一个需要被打勾勾的盒子,并没有注重这个方法论能够带来的潜在价值。当一个团队发现一个可行的解决方案,却又只是发现了冰山一角的时候,就赶紧实现产品然后发布,并没有经过多轮的改进探究来让方案变得更加成熟。设计师们有时候也要为多个权益人展示进度和解释设计而头疼。权益人太多也会不必要的拖延设计的进度,让设计师们花费不必要的精力和时间。

设计师和创意人士所处的环境也是决定他们个人提升的重要因素,如果一个本身很有天赋的设计师把大部分的精力都花在给其他人解释TA的设计决定,而没有在自我深造上面的话,那么过几年TA的设计水平不会提高反而会下降。──Lillian Ayla Ersoy《为什么设计思维在走下坡路,我们应该做什么?》

创意环境,工作氛围很重要,我觉得不管是管理阶级或是我们这些手艺人都应该积极地为对方打造一种可持续发展的创意环境,这样才能推进创意的发展以及对我们本身实力的提高。

「刚刚发现到冰山一角之后,赶紧投入生产然后发布,然后赶紧失败,看看大众的反应。」和「没有真正的结束,只有没完没了的发布!」

我不知道国内的具体情况是什么,我也知道这肯定是极个别情况,但是上面这两句话让我想到一位在国内一家科技公司的朋友分享他工作经历的时候提到的,团队里设计了一个新功能之后赶紧实现,然后发布,用真实用户做实验,看看反应怎么样,行就接着来,然后根据用户回馈来改进方案,不行的话直接把这个功能取消,再想下一个功能。这种实验型的做法OK么,必须OK。结合团队所处的整体环境,包括市场,文化,以及用户对新科技/新产品的认知度/接受度的不同,设计、开发、发布的步骤有不同的套路和节奏是正常的。而且,通过测试所得来的回馈是对产品最好的批判。我觉得这种方法有一定的优势,这也有可能是国内的发展能如此迅速的因素之一吧。但是什么都是有利有弊的。那就是在这个节奏如此之快的过程中,我们作为设计师是否在逐渐丧失批判性思考的能力,设计不再是利用我们设计师本身的思维,以人为本的核心以及对视觉的敏感去解决用户的问题,而变成了一个纯粹的实验,然后通过用户测试/调查,再改变参数,再测试,如此反复最终产出一个理想的产品/功能。在这个过程中设计本身的价值有没有得到提升?长久来说,设计师对自己本身的看法会不会改变,甚至会不会丧失了对「设计」的信念,并因为这种机械化的创意模式而变得萎靡不振?如果真的这样下去估计设计师早晚也可以被自动化取代。

好的设计不是赶出来,也不完全是实验出来,好的设计需要足够时间,加上队员们积极的思考,突破,设想,测试所造出来的产物。

拿撰写动效规范来举个例子,前前后后参加不同的设计冲刺,收集证据,并反复提炼语言就花了差不多一年的时间。当然了,撰写动效规范与视觉设计不是一个东西,但是为了取得高质量的结果,两者步骤上面还是有相似之处的。我也是非常有幸能有我现在的工作环境,上司对我信任,队友们互相给予支持。我的经理为了方便我收集材料,让我尽可能多参加设计冲刺,了解其他的产品在干什么,未来的目标是什么,需要解决的问题是什么。我在撰写规范的同时,也会参与到决定这些产品的未来方向是什么的过程中,更重要的是在这个过程中更加了解动效设计到底是什么,动效规范应该怎样改进,怎么样设计动效以及它在现行科技领域的一个定位和走向。那么下面让我通过谷歌里的设计思维实践来证明,批判在设计思维里其实无处不在。

谷歌的设计冲刺

△ 图片来源:https://www.charitydigitalnews.co.uk

在谷歌里我们会定期做 Design Sprint(设计冲刺,时长通常为三天,利用这三天来集中精力解决UI/UX问题,并且总结出可执行的下一步。)它可以是为了解决一个产品的某一个功能的用户流程(User Journey)定一个大方向,也可以是为了让不同产品之间更好的相互合作而研制一套相同的设计框架。格式其实就跟设计思维一样。第一步,Empathize(共情)。在每一个 Design Sprint 的开始,我们都得要明白这次活动的目的,现在所面临的问题是什么。通常会有来自不同队伍的关于主题的演讲(LightningTalk,闪电说),其实批判从这里已经开始了。在听演讲内容的同时我们得把值得探究,改进的地方记录在便利贴上面(叫做How might we,我们能怎么样去……),这里批判的思考就已经开始了。而且由于组员们的专业不同,思维方式不同,在同一个关键点上面,设计师,工程师,项目经理,调研员所考虑的事情都是不一样的。在共情环节结束之后,我们会把这些便利贴贴在墙上,开始第二步,Define(确定)。把捕捉到的观点综合处理,归类,把大家达成共识认为重要的内容按照种类排好,再把不重要或不相关的内容除去。我们得批判的思考才能更好的分辨便利贴们之间的潜在关系,以及哪些保留,哪些需要被除。咱们再看下一环节,也就是 Ideate(形成概念),这里也是我认为是批判最多的一个环节。我们先会做一个叫做 Crazy Eight(就叫它疯狂8分钟吧)的小活动,针对需要解决的问题,每个组员在8分钟内想出8个点子,然后相互分享。接着全员投票,把最有可能成为解决方案的点子选出来加以点评并且定制出冲刺接下来的计划。之后,我们会安排固定的时间来分享我们的设计进度,在分享与展示的过程中,组员们就得给出建设性的批判。我作为动效设计师,需要思考在设计出来的界面之间符合活动主题范围内的潜在交互实践范例,找出界面与交互设计方面的漏洞,以动画的形式展现给大家并加以讲解。经过至少三轮的分享与改进,冲刺的最后一天的末尾,我们才会给利益相关人展示我们得出的结论。这就是我们的设计冲刺格式。我注意到的是,设计冲刺不是为了解决问题,而是在短时间内得出一个具象的结论/共识,以便之后的设计与开发。

那原型(Prototype)和测试(Testing)呢?是的,不是所有的设计冲刺都会涉及到原型与测试。工程师们在冲刺当中除了与我们设计师一起发散的思考之外,他们还会提出方案在实现方面的可能与局限。现在有很多工具可以非常迅速的制作出原型,原型也确实在展示设计漏洞方面有很大的用处,但是它也有局限性,比如在展示一些特定交互实例的时候,无法展现动效过程中具体发生了什么。比如说允许用户在过渡中途转向或返回,这种我没有在原型工具里看到,不知道大家有没有遇到过有这种功能的原型工具。再说如果能利用有限的时间尽可能多设计,为什么不呢?再说测试,其再经过几轮冲刺后,我发现,测试最好别在冲刺的时候做。一次冲刺只有三天,好钢用在刀刃上。文章上面提到过,测试也是一个很好的批判。通过测试原型所收集来的回馈,加上我们的分析并找出解决问题的机会所在,才能更好的改进产品/功能。当然不排除是因为谷歌的财大气粗,所以可以给原型和测试环节足够的时间和资源,让他们撒欢儿地玩耍。

所以这样看,其实在冲刺的过程中,批判是无处不在的。

关于 Natasha 有关设计思维属于纯扯淡就谈到这儿,下面看看 Khoi 的设计思维是把双刃剑的论断。

Khoi Vinh – 设计(思维)的方言性

设计思维使得来自不同领域的人一起合作解决问题。它促进了设计的民主化,让更多的人来了解设计。设计思维有很多正面的元素,但是当然也有它不好的地方。──Khoi Vinh 《Indefense of Design Thinking,Which is terrible》

△ Khoi Vinh 图片来源:https://www.designweek.co.uk

Khoi 的观点使我产生了许多共鸣。他在文中所提到的设计民主化,以及用工程领域的开源对科技的提升乃至对社会的影响,这个话题太大了,我就不聊了。但是从毕业到工作,我的经历可以好比从 Natasha 的设计思维是纯扯淡到设计思维是一把双刃剑的过程。我个人认为,因为设计思维本身作为方法论,它其实是中性的。所以与其说设计思维的方言性,应该是设计或者任何一种专业的方言性。

我们先来看看这两句话:

When you lack language,you also lack the capacity to understand.

当你都不会这门语言,那就更别提去理解这门语言了。──Khoi Vinh

还有:

抵押支持债券,次级抵押贷款,国际货币基金贷款划分的「部分」。听起来让人有点摸不着头脑对吧?这些词儿是不是让你觉得很无聊,甚至让你怀疑你的智商?呵呵,它们作用不过如此。华尔街那帮人特别喜欢用这种模棱两可的词语来让你觉得只有他们才能胜任他们的工作。也有可能,就是想把自己与其他人分割开来。── 电影《大空头》

电影《大空头》(The Big Short),里面的瑞恩·高斯林用上面这句话把 Khoi 所说的解释得淋漓尽致。Khoi 所说的也让我感触特别深刻。我认为他提到的这个是设计思维,也是设计双刃剑里最「锋利」的一面。先拿在用户体验这个专业的方言性举个例子。在谷歌刚入职的时候,我其实对这个岗位并不看好,干了个把月之后甚至开始跟朋友抱怨说谷歌里创意已死,只有古板的设计,办公室政治还有盲目的服从。因为那个时候我对动效设计这个专业的理解也只是停留在 UI动画制作上,对用户体验这整个专业那是七窍通六窍。那你们会问我是怎么进去的,当时他们雇佣我当合同工也只是让我制作动画素材。那时候,我并不知道,动效设计可以增加应用的连贯性(Continuity)和可用性 (Usability),促生心智模型(Mental Model),阐述界面中组件的空间关系(Spatial Relationship),主次关系(Hierarchy),以及暗示可执行交互动作(affordances)等等。

「当你都不会这门语言」的时候…

第一次参加设计冲刺,也是因为刚入职,所以并没有能真正参与到冲刺的过程当中,当时能做的就是帮设计师们制作动画素材,然后他们再研究设计中的漏洞。吊儿郎当的参加到冲刺第二天,开始第一轮的分享设计进程,一个来自瑞典的小哥开始讲解他们小组所做出的设计方案。我当时站在那里,真的一句都听不懂,所有词儿都知道是什么意思,但是放到一块儿我就不明白了。我以为是因为我的语言不达标,于是就问了站在旁边的一个美国本土小哥,他也是一个跟我有相似背景的动画师:「嘿,他在说什么?我听不懂啊。」意外的是,他竟然回答道:「我也不知道啊。」就是在那个点上,我被设计思维和用户体验狠狠的划了一刀。

单从用户体验来讲,得先学到多少的专有名词才能在这个专业里面轻松游走?直到现在,还是有很多专业术语会让我摸不着头脑。曾经读过一篇国内关于 Material Design 的文章,在评论区里看到这样一条评论:英文应该成为 UI设计师补习的第一个技能哎!之前在准备演讲的时候,我在翻译上面花了不少功夫。因为同一种组件用英文说是一个名词儿,但是用中文估计就不是直译那么简单了。举个例子,MaterialDesign 里面的旅游应用 Crane 使用了一个叫做「Back Drop」的组件。我当时给翻译成了「背幕」,之后觉得还是不妥所以干脆就不提这个组件了。后来跟礼包哥聊天的时候才发现这东西叫做「抽屉」。这里不是想说谁的名词儿才是官方的,只是觉得很有趣。

专业有方言性,不同团队其实也有。为了能更好的跟队友合作,不同团队都会不自觉的去创造一门「自己人」的语言。这也不纯粹限于语种的不同,举一个例子。我之前收到谷歌另外一个团队的动效问题,问我一个 Logo 动画在应用 Warm Start(暖开始)和 Cold Start(冷开始)之间的使用区别,当时我就迷茫了。就问道什么叫做暖开始和冷开始。后来解释说,暖开始就是你的应用已经是打开的状态下从别的应用回到该应用,而冷开始是从应用本身的关闭状态被打开。而我们队里,会直接说「When you open the app when it is closed/When you return to the app.(当你打开/回到这个应用的时候。)」 我其实就是觉得,你用来跟我解释「冷暖开始」的时间,都可以跟我说多少遍「当你打开/回到该应用」这句话呢?非得发明一些队外的人不明白的词句,还得再花更多的时间去解释,何必呢?

能说会道必须是一种能力,用天花乱坠的词语解释设计也并非易事。你也会发现,设计水平相当的时候,往往是那些听起来越「聪明」的人,越会说的人升迁越快。但是少一点逼格,多一点真诚,也绝非坏事啊。最近跟礼包哥交流,我问他关于对设计思维的看法,他提到了产品思维并解释道:「寻找用户痛点,刺激用户痒点,满足用户爽点。」就算你不是用户体验专业的,是否也能大概明白什么是产品思维?

我们都想让别人觉得我们很聪明,并用酷炫的语言还有别人不懂的专有名词讲解设计。这样众人会觉得设计是一种神秘的学科,不是什么人都可以做的。就像 Khoi 说的:「尤其是对于在广告机构,艺术工作室的自由设计师来讲,把设计的奥妙保护起来是正常的,毕竟设计师们有明确的利益动机嘛。」要是谁都懂我们的专业,都会干我们干的东西,那我们赚什么钱,吃什么去?不同专业的方言性绝对不可避免,你们也看到了,就连同公司内部队与队之间交流都存在困难。当然,我也不会说你必须得用大白话去解释你的专业。不过你可以试试看,跟你不是搞设计的朋友,聊聊设计,或者跟你爸妈解释一下你是干什么的,看看他们能不能明白。设计思维在设计民主化方面有一定的作用,但是它的效果真正有多少呢?国内外设计圈子还是相对来说比较小,大众对设计的认知度还是比较低,很大一部分原因是因为这种不可避免的「方言性」。当然还有好大一波儿认为「设计根本就是特别简单的东西,不值钱!」的人。

「那就更别提去理解这门语言了」

就好像你想要做出好的电脑动画,你得先要驾驭好电脑软件,不能让其变成你的绊脚石,然后才能更好地展示你的故事,构图,动画节奏等等。想要能够更好的跟队友们研讨工作,你得先懂得使用用户体验的语言。我因为从一开始对用户体验专业的知识缺失,不得不去读关于这方面的书籍与相关读物。现在已经养成了习惯,每天至少会拿出两个小时的时间在阅读上。但是讽刺的是,当我对这个方言掌握到一定程度,并能够跟同事交流甚至提出影响设计方案的建议的时候,我发现不但再没有觉得谷歌里创意已死,只有古板的设计,反而也能明白这个专业有意思的地方,并发现能够发挥创意的地方其实有很多。现在再看我之前的抱怨确实有点可笑。这也告诉我有时候如果不了解一个事物,还是少评论两句。

总结

设计思维会随着科技的发展不断进化。此文没有想定义设计思维是好是坏,只是呼吁大家用辩证的态度去对待设计思维,以及其他甚至还没出生的方法论。我们应该根据项目、团队的情况去选择不同的方法论,而且要更加注重设计的过程,学习怎样为不同的用户,交互情景做出适当的设计,并积极的思考。

设计思维只是一个起点,应该用它来激发新的创意和解决问题的方法,而不是一个加快产品生产速度的秘籍模式。

专业的方言性不可避免,在与其他队交流的时候,可以主动的解释一下「自己人」的语言,平时尽可能用易懂的词句解释设计思路。

一个团队,一个企业里每一员都有为对方打造一种可持续发展的创意环境的责任。

不知道大家对设计思维怎么看?设计再怎么说还是为解决问题而生,用什么方式去解决问题也只是设计的第一步。在2019年里,希望大家能用探究与批判的态度去看待设计和自己的工作。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档