设计中的同理心

在设计知识体系中,同理心的这个词随处可见。从用户的角度来说同理心是以人为本,贴合人性,满足用户的需求与偏好的思考方式。说简单点儿,同理心就是站在当事人的角度和位置上,客观地理解当事人的内心感受,且把这种理解传达给当事人的一种沟通交流方式。心理学上有个说法挺好的,如果你想获得对方好感,不妨请她帮个小忙。 在实际工作中,我们总是说要从需求本身出发,那么本身的需求有哪些呢?So,我们先来讲一讲马斯洛需求层次理论 生理需求:也称级别最低、最具优势的需求,如:食物、水、空气、性欲、健康。 安全需求:同样属于低级别的需求,其中包括对人身安全、生活稳定以及免遭痛苦、威胁或疾病等。 社交需求:属于较高层次的需求,如:对友谊、爱情以及隶属关系的需求。 尊重需求:属于较高层次的需求,如:成就、名声、地位和晋升机会等。尊重需求既包括对成就或自我价值的个人感觉,也包括他人对自己的认可与尊重。 自我实现需求:最高层次的需求,包括针对于真善美至高人生境界获得的需求,因此前面四项需求都能满足,最高层次的需求方能相继产生,是一种衍生性需求,如:自我实现,发挥潜能等。 同理心的特点 同理心的基础是观察,我们的目标是寻找客户的需求以创造产品,客户甚至不知道他们的愿望,或在某些情况下解决客户有困难的预想,由于锁定在一个旧的思维定势,所以不熟悉新技术所提供的可能性。同理心设计依赖于使用者,而不是传统的市场调研观察,它依赖于消费者查询的意图,以避免可能出现的偏差的调查和问题。 同理心在生活和工作中的应用 [自带伞套的雨伞] 有没有觉得伞套是个既麻烦又不可或缺的东西?你还有几把伞能找到它的原配伞套?这款雨伞就是为了解决这个问题,它分为两个部分,一个部分用来控制合拢的雨伞,另一部分拿来装伞套。 [可以被立着的雨伞] 关于雨伞还有一个烦恼就是很难被靠在墙边(晾衣杆同),于是 Nendo 将它的伞把设计成一个开口状的半三角形,这样就可以很容易被立在墙边了,也可以挂在桌角。 [站立的筷子] 筷子放在桌面上不卫生,当把夹菜的一端削得更细,这样就不会碰到桌面了。 [萌萌的猫头鹰] 在Readme的登陆页面上,当你输入密码时,上面萌萌的猫头鹰会遮住自己的眼睛,在输入密码的过程中给用户传递了安全感。让这个阻挡用户直接体验产品的“墙”变得更有关怀感,用“卖萌”的形象来减少用户在登录时的负面情绪。 [出入境印章] 日本机场原来是用一个圆圈和一个方块表示出入的区别,形式简单并且好用,但设计师佐藤雅彦却用一个更“温暖”的方式来重新设计了出入境的印章:入境章是一架向左的飞机,出境章则是个向右的飞机。 [可口可乐瓶的妙用] 可口可乐越南推多功能瓶盖套组,帮助可乐瓶再利用,有爱又环保。 这么好看的设计,让我忍不住要思考一下人生了。 怎么培养同理心? 在人人参与的分享经济时代,同理心也是需要讲套路的。光凭着想像产生的,容易产生假相。很多时候只有发生了我们才知道用户真正“需要”的是什么,所以我们要模拟、仿真、预设一个情境。 一名互联网从业人员说“我觉得最好的方式就是,想办法让自己变成用户。”用户是由各色各样具有不同特质的人构成,他们不但具有形形色色的标签,而且他们也是处于不停得变化状态中的。 最后,再分享一个与之相关的小彩蛋。 猎奇心理与隐藏法的设计理念:越是想要展示的东西就越要有意隐藏,利用每个人的好奇心,通过隐藏事物的某些部分来唤起人们的兴趣,让他们被自己的设计所吸引,如果这个过程打动人心,他们就有可能不由自主的想要体验我们的空间和产品,才有可能引来更多的关注。

致那些我爱的拼贴设计

Part1 发展轨迹 说到起源,拼贴最早是立体主义艺术家提出来的观点并被正式确认。经由立体主义、达达主义、超现实主义等流派的不断尝试和演变下,拼贴手法以全新的姿态出现在现代设计作品中。 在艺术形态千变万化的今天,人们的视觉感受也越来越丰富。拼贴设计,以它断裂、重组、融合等独特的风格表现,逐渐被接受并运用,从而拓宽了其表现的空间。   Part2 拼贴手法 下面从一些拼贴作品的设计特征、拓展运用等几个方面对拼贴的艺术形式进行了解,并发掘其中审美价值。 关键词:剪贴画、点线面、重复、波普 众多时尚杂志以拼贴的剪贴画形式,以及结合点线面,色块,重复,平衡,波普等元素的运用,为他们一贯的平庸加入了另类的活力。 关键词:复古、混合风格 这组塞尔维亚插画师Becha的作品,利用拼贴画与时尚摄影组合而成的画面呈现出浓厚的混合风格。创意天马行空,用色大胆鲜艳而复古。 关键词:断裂、重构、超现实   包含多种元素的断裂、重构的拼接手法。极具抽象艺术的表达方式超脱现实却合乎基调。   Part3 实际运用 BB了以上,接下来带来一些拼贴手法与平面设计结合的具体运用实例方法,希望能给大家提供借鉴和启发。 需求背景: 需求背景是为京致衣橱应用商店做介绍图,整体需与衣橱618大促风格相符,并体现大促热闹氛围。 想一想: 根据活动主题和想要用到的表现形式,可衍生以下关键词: 步骤解析: 那如何在以上元素信息繁多的情况下做到主体清晰和整体感呢?我们从空间、变化、形式感3个方面分步说: 第一步:空间 1.版面划分 首先,需要将版面内容划分成几个区域,之后可以按照排整布局和关键词去寻找模特及产品等。再对元素进行角度、位置、大小的调整。 通过对外边缘加了白色边框,并在留白处加了点缀性元素进行画面的平衡,会有在平面中衍生空间的感觉。 2.版式布局 在手机端的专题界面排布中,用户所面对的空间可视范围较小,因此要创造出直观的用户体验。文字与元素采用垂直水平构图,能把信息层级罗列得更为规整和明确。以版面中心点开始向外扩张,让用户的视觉关注点聚焦到中间从上往下浏览,从而提高用户体验及讯息传递效率。 第二步:变化 文字区域通过字体、对齐、大小变化、颜色区分的方式让视觉层级更加清晰。 第三步:设计元素及运用手法 以下几张参考是与拼贴与大促活动的范例,我们从中分析其元素构成及设计手法: 1.元素提取 基于服饰风尚潮流和拼贴独特风格表现的共通性和主题性,可从以上相似风格参考中提取以下主要元素: 2.设计手法 由以上例子中归总出三个可复用的处理方式: a.渐变撞色。 b.几何形运用。 c.元素自由形排版。 3.颜色选择 饱和度高的颜色更容易受到关注,因此大促主题类的用色会更偏向饱和度高的暖色。 4.综合得出以下几点 a.素材搜寻及组合 在保持主体突出和版式稳定性的情况下,以所提取元素关键词找到匹配主题风格的素材: 加入不同材质但符合主题的元素,使画面更具主题效果和趣味性,能够很大程度提升页面的丰富度。并对其以组合分离、断裂、重构的拼接手法合理排布去烘托主题,让画面更具张力。最后以小几何形作为辅助,让人物组合层次更加生动。 b.色彩运用 考虑到本次主题活动的特性,画面具体色调选定如下: 背景色利用渐变撞色来激发情感和感官元素,突显大促的火热氛围。而大渐变的形式会给整体营造一些远近层次的空间感。 c.细节优化 细节部分利用光影、撞色渐变、几何元素修饰,让人物组合层次更加生动,从而丰富画面的主题性。 最终效果 Part4 […]

“范”栅格(HTML5 UI栅格研究)

前言 “这里大点,那里小点,再挤一挤……” “老板,臣妾做不到啊” “为啥?”   如何专业地答复? 设计并非随心所欲拍脑门定下来的。字体大小、图标风格以及色彩运用,在产品初期就已经过设计推导,随着产品迭代一步步完善,成为现有的设计规范 。这些元素决定了产品的识别性与统一性,不能随意更改。 将隐藏于设计中的栅格提出来研究,会更优说服力 如果将字体图形看作点,那么栅格就是它们之间看不见的线。 依据一定的规律、合理设置基准线是广泛应于设计中的手法,它能帮助我们更有效的进行设计。 在栅格系统中,页面布局更具有秩序性、连续性,能较好地提升整体用户体验。 栅格系统 常见栅格系统有三种:直接分割,等距分割,数学分割。 分割常用比例:1:0.618,1:1,1: √2,1:√3,1:2……   栅格应用 等距分割常应用于WEB页面中 常用的分割方法有12列、24列、36列、60列等。将它们应用在640的H5页面(以下范例皆以640为基准)会发现,列宽度越小,页面分割越灵活,利用率也越高。 手持设备屏幕尺寸小于PC屏幕,想要有更灵活发挥空间,就必须采用列宽较小的栅格。 根据8PX原理,可以将列宽定为8PX,槽宽也为8PX。我们会发现38栏的栅格会导致页面在栅格内只能进行1、2、19、38等分,但是在手机页面中3、4、5、6等分是常见的分割形式。想要在此栅格下进行等分,只有两种处理手法,1如下图,2突破栅格。 微信购物首页应用栅格系统 直接分割应用于H5中 除了文中提到的几种等距分割,大家还可以去尝试不同的分割形式。 针对微信购物的栅格,我采用了10PX宽度的直接分割。直接分割因为去掉了列与槽的概念,所以在分割单元格时会更灵活。换个角度,你可以将它看做是一根根参考线,我们要做的只是将页面元素尽可能的去对齐它们。 不拘泥于栅格 在实际设计过程中,栅格的使用会出现限制条件,这时我们需要对设计进行相应的调整。我们应当明白,栅格只是为设计师提供便捷的辅助工具,而不是限制设计师的工具。 应用栅格系统页面前后对比 微信购物一直采用10PX做为基础单位,但是加入栅格后,还是会发现有很多对齐上的瑕疵。利用栅格来完成对齐,而不是主观的随意移动,这样在设计的过程中就能减少很多不必要的步骤,从而输出稳定的设计作品。 总结 在设计过程中我们需保持三份感性七分理性的心态去思考,感性让我们灵感迸发,理性使我们回归现实,太多的感性会不严谨,太多的理性则显得呆板无力。本文以微信购物为例,介绍了一种栅格化的方式。栅格方式多种多样,深入的去研究它们,你总能从中获得新的知识。

我与h5的9个月羁绊

来到JDC已经9个月时间,在这9个月时间,做了十几个H5。现在回顾一下这9个月间,我与H5剪不断嚼不烂的一段情。   唧唧跳这个游戏是我平生第一次做H5,一上来就做游戏心里很没底。初学乍练,刚开始做什么都不懂,连屏幕尺寸都不知道,内心是十分崩溃的。在同学们的帮助下,捋清了基本的制作规范和要领,磕磕绊绊的做了这个小游戏,现在回头看这个项目,还是非常稚嫩羞涩的。并没有特别抓人的思想,只是靠着贱鸟玩儿游戏领券,在九个月前,这种形式可能还算新颖,现在来说这种移植Flash的小游戏已经不再稀奇,做起来还费劲。。。从运营或者客户角度,他们可能还是喜欢互动多的H5,觉得互动多,比只靠文案的复杂。但是还有句话叫出力不讨好呢。。一句耐人寻味的文案,给人们带来的回响,比十个flash移植的小游戏强百倍。从始至终,我们都应该客观的现在观众的角度来做运营,你不是一个从业者,你是一个看这个H5的观众,你肯不肯转发这个H5。   做vv的接盘侠,在她完成霸气效果图之后,制作了七宗最的H5。由于动画极其复杂,几度跟开发gg打的难解难分,我俩不断磨合,最后靠着坚忍不拔的毅力,携手走到了最后。由于动画太多,这个H5一度成为检验手机性能的唯一标准…低端机是根本打不开的…后来制作H5的时候也会吸取教训,除非画面足够(哔——),才可以做任性的巨型H5。   拍拍双十二会场H5 这次就只是本色出演,发挥了无贱不欢的基本宗旨,是非常轻松的一个项目。文案都是设计小伙伴们一起讨论的结果,搭配了贱色双绝的画面,还是很受大家欢迎的。    时光荏苒岁月如歌,我已经做了三个H5了,第四个H5勇敢的挑战了一下自己,三人脑爆会结束后马上投入工作,历时不到两周完成设计+开发。文案部分是从“啪”这个字开始想的,啪跟拍字形差不多嘛。整个核心思想就是底层人民通过拍拍翻身做主人,非常有态度的一次尝试。   我都怀疑自己要精分了,做完“啪啪啪”那么重口味的项目后,又做了花心思这么柔情的H5…花心思的核心思想是:敏感的女生,总是会被粗枝大叶的男朋友以各种姿势忽略,从这个角度,直捣女性用户内心,唤起共鸣,因而转发。多么感人而又毫无破绽的逻辑!就此,跟直男总监pk了一中午,才最终确定基调(原本是批判男生,后来改为男生其实也不容易(嫌弃脸))。后来我也觉得直男总监的观点是对的,最后一定要歌颂男生才行,因为,他们买单嘛~ 这个H5引起了不小的反响,妹子们看来不负众望的都经历过这些催人泪下的瞬间。很多人都问我们为什么会想到如此奇异的角度,我才不告诉艺术来源于生活高于生活呢(偷偷拭去眼角的泪水)   跨年时分,做了撸羊毛的红包活动,其实也没啥好说的,就是换个姿势发红包,第一次也是唯一一次、估计也是最后一次使用平板手绘,人生总是需要尝试嘛…这次视觉我觉得不温不火,但是撸羊毛的动作,开发gg还是费了一番心血。做小游戏好心塞…   过年前夕了,大家都纷纷回家了,也没什么运营需求了,就在这个时候,公司的内部h5制作平台Hipage,需要做一个宣传。完全没有要求,完全freestyle,时间又很充裕…世界上怎么会有这么让人舒心的需求呢~于是花了一周时间,独自创意+设计,十分惬意的做完这个需求。   我东的一个招聘宣传,思路是首先告诉那些即将毕业的大学生,暑假干什么都然并卵,只有来我东才是正确的选择,就是这么霸气。   一看这题目就知道是我自己脑洞的产物,全程视觉只有两天时间,忙碌的不要不要的,我会告诉你开发只有半天吗,开发gg做完都要跟我绝交了呢…整个H5是用小时候玩的模型的感觉,戳下一块块零件,全程戳戳戳…   京东微店的宣传H5,把京东微店打造成专治微商不健康行为的药房,用老中医的角度来说这件事。   需求方说:我们要做一个母亲节的h5,你们脑爆一下 大家坐在小黑屋里托腮,都没说话,但是我从他们的眼神里看得出,他们在不断地自我肯定与自我否定中… 说道母亲节这种节日,无非是歌颂母爱伟大,妈妈一把屎一把尿把我们喂大不容易… 这样的温情路线鸡汤我们已经喝了好多。。。 后来大家纷纷开始思考,妈妈对我们最深刻的印象,后来就想到了小时候挨揍的各种画面,感觉十分接地气,大家也纷纷表示有共鸣,就这样开始了…   对方想用不经意的方式,把一个618降价商品的表格传达给世人。我们最终确定用严刑拷打的形式,让被抓住的拍拍员工很不情愿的说出这个商品降价表。用户在逼供时,也有强烈的参与感。 最后,制作H5的过程中,最难、最重要的就是脑爆,脑爆通常就是站在体验者角度,对自己的方案进行树立和批判。面对没劲的梗,我们要大胆说出:好low啊/真没劲/老梗了好吗;切忌沾沾自喜,自说自话:虽然见过十次了,但是貌似用户还是很喜欢。。这并不是客观的站在用户角度做运营哦~

不留愚地

美剧 lie to me 中说过:微表情存在于所有说话的人中,无论你是郊区的主妇,还是连环杀人魔说谎的真相在你的微表情中都是一样的。 所以拿起放大镜寻觅一直存在的真相。 后面的内容部分以游戏形式增强科普文章的趣味性。 通过制作人物表情的局部GIF图片,放大,定格,再现生活中常见的微表情。   暗恋 有多少人选择在愚人节这天表白?我想不在少数吧;被拒绝后当开玩笑给自己留条后路;可你的真心别人都懂的,平日里也拿出一样的勇气好么?! 牙膏夹心饼 从第一次听说愚人节开始就一直百试不爽的梗,骗了一代又一代善良的我们。 想静静 虽然是骗你的,但听到这句话的姑娘们真的要反思下自己了,嗯,仅此。 吃回头草 和表白一样,吃回头草的人在愚人节这天也开始活跃起来;嗯,让不让他吃?祝安好~   善意的谎言 其实吧,这种善意的谎言,还是不要揭穿比较好;你说呢?   拍拍大红包 我们做这个东西当然不是为了慈善公益啦,所以最后一帧的利益点也是要衔接得悄无声息;所以我们就很不生硬的加了这场景。 其实说了这么多看了这么多静态图片,也是体验不到这个H5项目精髓的(精髓在动画嘛),赶紧扫描下方的二维码体验吧……

© 2017 JDC. All Rights Reserved.