首页

用一篇超全面的好文,带你了解英国设计史的前世今生

资深UI设计者

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

文章目录

  • 水晶宫与拉斯金
  • 现代设计之父诞生
  • 工艺美术运动中的平面设计
  • 总结

水晶宫与拉斯金

谈这个运动之前,我们先来交代一下背景,150年前的欧洲版图大致有法国、奥匈帝国、英国、西班牙、荷兰、波兰等国家,由于后来世界大战打来打去相互瓜分,所以对这些国家目前的领土范围、名称等不需要特别较真。

18世纪初期的英国还处于农业经济时代,经济发展取决于劳动力资源的占有和配置。比方你家有100人在干活,理论上经济效益就比隔壁老王10个人干活要强许多。

然后到了18世界中叶,也就是1765年珍妮纺纱机的发明标志了第一次工业革命在英国开始,由此100年间,英国就像被开光加持,走上发展快车道,一下子跃升为世界大国。

这个时候我们横向看看中国的情况,18世纪的中国正处在清朝统治之下,清朝历史上最著名的康乾盛世就是在18世纪中期(乾隆早期)达到顶峰,当时 GDP 占世界总量的三分之一,也很厉害。我们可以从建筑面貌,生活场景,商店来感受一下当时中国的生活水平与设计面貌。

工业革命在英国发展了100年后,正好来到英国著名的维多利亚女皇时代,维多利亚时代前接乔治时代,后启爱德华时代,被认为是英国工业革命和大英帝国的巅峰。它的时限一般定义为1851年~1901年长达50年,这个时期的英帝国走向世界之巅,领土达到3600万平方公里,给大家一个参考数据,咱们大中国目前的领土面积960万平方公里,仅仅是当时的英国领土的四分之一,而经济占了全球的70%,贸易出口更是比全世界其他国家的总和还多上几倍。

所以,现代设计由此时此地发生萌芽,似乎是合情合理。

这个时期英国的设计风格就是鼎鼎大名的「维多利亚风格」,后世对这个风格进行归纳后认为,它属于一种古典艺术复辟整合的风格,因为你可以从维多利亚设计风格的产物中,看到:哥特样式、文艺复兴样式、都铎样式甚至意大利风格样式。维多利亚时期通过融合当代审美元素及使用了新建筑材料等方式,重新演绎及完善这些风格,因为糅合了众多古典风格,所以在视觉上显得矫揉造作,装饰繁琐,色彩丰富细腻,显得唯美主义。

也正是1851年,英国为了向世界炫耀工业革命成果决定搞点事情,于是联合欧洲各大国,举办历史上有名的伦敦世界博览会,而筹办这个博览会的又是历史上有名的阿尔伯特亲王,下面请注意我介绍他和维多利亚女皇之间的关系。

阿尔伯特是德国萨克森-科堡-哥达公爵恩斯特一世的小儿子。比利时国王利奥波德一世是维多利亚的舅舅和阿尔伯特的叔叔。维多利亚的母亲和利奥波德一世是姐弟,所以阿尔伯特是与他的表姐维多利亚女王结婚,是否有点小烧脑,没关系,你只要知道他们是夫妻,然后属于近亲结婚。

他们一共生育了九个孩子,因为近亲结婚的缘故,四个王子中的三个都是血友病患者,所幸的是五位公主个个健康美丽,但也是血友病基因携带者,关于他们更多的故事请自行搜集,因为咱们今天是来聊伦敦世界博览会的。

阿尔伯特一直对设计方面的事务非常感兴趣,所以很积极筹办这次博览会,但期间碰到一个极大的难题,就是当其它国家往英国运送大型工业设计产品时,比方火车头、蒸汽机,建筑模型等东西时,英国暂时没有如此庞大的场地进行安放,并且当发现这个问题时距离对外宣布开展的日期只剩不到半年,按正常流程压根无法完成这样的场馆,问一众大臣无人敢吭声,阿尔伯特心急如焚,某天他在花园里眉头紧皱思考这个问题时,一位皇室花农的儿子忍不住问亲王怎么回事,亲王跟他简单说了情况,没想到这个花农的儿子居然说:如果亲王相信我,不如让我试试看吧。这位花农儿子就是后来英国著名的建筑师:伯克斯顿。

基于花卉种植的技术,伯克斯顿大胆运用了种植花卉的温室结构原理,使用钢铁与玻璃为原料,快捷实用又经济并且采光一流的方式做了这个场馆,那就是后来一开展立刻震惊全世界,历史上著名的「水晶宫」,这个建筑物也被后世视为现代设计拉开帷幕的标志性产物,也被视为「工艺美术运动」的开始。

水晶宫在1854年曾经从伦敦中心迁址南部,无奈在1936年的一场大火中被付之一炬。英国前首相丘吉尔曾表示它的烧毁是「一个时代的终结」。

这个世界知名的博览会所展览的作品以工业产品为主,并且全部都没有一点现代设计风格的影子。那我们不是在聊现代设计的萌芽吗,对的,这个博览会的最大作用是反面刺激,因为展出的产品大部分非常粗陋,原因很多,其一是谁也没经验做工业产品,好比香港第一届特首,前无古人很难做好;其二是工业发展本来就是初期,工艺水准远远没有成熟。

而在一些人看来最要命的是为工业产品强制添加装饰,比方把哥特式的纹样刻到铸铁的蒸汽机体上,在金属椅子上面画个油漆画,在缝纫机上面加一个丘比特造型等等,完全是不实用并且谈不上美观的设计。

这种情况在意见上形成两面派,比方爱国者立场的人大唱颂歌,甚至要写诗来赞美,比方英国大诗人丁尼生就为这个博览会专门创作了颂诗。

而另一派自然就是批评者,批评的角度是博览会大部分产品都缺乏一种从整体出发的设计构思,形式远远大于功能,能够意识到这种问题的人其实已经具备了新设计思想,但很可悲的是他们又多数是机械否定论者,意思就是反对工业,崇尚手工,显然违背了社会发展规律。

这群反对者当中有一位后来非常著名的人,最后成为「工艺美术运动」的理论指导者,他就是约翰·拉斯金。

在博览会现场,32岁的约翰拉斯金已经是英国成名作家,艺术评论家,同时也是教师及业余地质学家,成名作是1843年写作的《现代画家》,他看到水晶宫的展览后,发出感概:艺术家已经脱离了日常生活,只是沉醉在古希腊及意大利的迷梦当中,如果这些产品只能被少数人理解而脱离大众,艺术没什么作用,真正的艺术必须是为人民创作,不然就是一件无聊的东西。

其实按现代的观点,我们补充一下拉斯金这个说法,他提到的艺术严格来说应该就是当代定义的设计,因为160年前不存在设计的说法,设计跟艺术之间的定义非常模糊。

当时会场中的拉斯金可以说是愤怒的,随后几年,他开始通过著书跟演讲来宣传他的设计美学概念,比方他提出设计的实用性目的,他认为:世界上最伟大的作品都要适用于某一特定场合,从属某种目的。这个观点说出设计的功能性问题,属于初步的现代设计思想。

同时拉斯金极力反对精英主义,强调设计的民主特性,强调设计为大众服务,这一点也是后来德国包豪斯非常重要的思想内核之一,拉斯金认为以往的美术都被贵族的利己主义控制,范围一直局限在上层社会,如今不应该再为取悦公爵太太们,而应该更多的关注农村中的劳动人民,为他们生产一些实实在在的东西。

约翰·拉斯金1819年生于伦敦。是个独生子加富二代,因为父亲是成功的苏格兰雪利酒商人,父母对拉斯金要求严格,把所有的希望和理想都寄托在约翰·拉斯金身上。他的父亲一直鼓励他从事绘画和诗歌创作等文艺工作,而母亲却希望他能做一名牧师。年少的他一般在家庭和基督教堂学习。每年夏天随父母游览名山大川,参观古代建筑和名画,培养了对自然和艺术的爱好。

拉斯金在1836年进入牛津大学基督学院,1840年因病退学。此后两年在意大利养病,同时搜集资料从事著述。其实拉斯金本身也做部分艺术创作,比方绘画,但后期专注于理论研究及普及设计思想。但拉斯金的设计思想非常庞杂,也有一部分对时代消极的内容存在,但我们这里基本不谈及。

现代设计之父诞生

生平不识莫里斯,设计十年也枉然。

就在水晶宫诞生的前几年,1848年世界上也发生一件大事,就是德国的卡尔马克思先生发表了他的重要著作《共产党宣言》,因为工业化发展过程中,造成了很多社会问题,比方贫民窟的出现,因为机器代替了人力,大部分工人下岗了,换到我们身处的时代,隐隐感觉人工智能与大数据的迅速发展是一样的,机器人及信息化工具也将取替大量人力,比方无人汽车,无人机送货,餐馆的二维码下单及收款等,都会让一批劳动力被取代。

当时发展工业革命的欧洲国家,资本主义开始产生及成熟化,于是就产生了两个对立阶级,就是著名的无产阶级与资产阶级,无产阶级的生活条件及工作条件随着工业革命发展,逐步恶化得非常恶劣,这就是当时「工艺美术运动」发展的时代背景。

我们第一部分谈及了「工艺美术运动」的理论指导者约翰拉斯金,他在1953年出版了一本书籍叫《威尼斯的石头》,这本书讲述了中世纪设计精华的思想内容,深刻影响了一位年轻人,这位年轻人后来通过自己的努力,掀起工艺美术运动,成为了现代设计的奠基人,他就是大神威廉莫里斯先生,他同时是世界第一所设计事务所的开设人,所以他也被视为现代设计之父。

不过关于这个说法其实存在争议,因为工艺美术运动被后世认为在思想上是倒退的,因为他们的意识形态是反工业,重塑手工艺的,主张从自然和哥德风格中找寻出路,比方「向自然学习」就是工艺美术运动的重要口号之一,而我们回顾当时的诸多作品,我们也发现大量动植物纹样的设计形式,同时这个运动其实也受东方风格的影响,特别是日本的浮世绘,我们后面会论述这块。

1951年的伦敦世界博览会期间,威廉莫里斯也到过现场观看,那时的他年仅17岁,他对于工业化产出的丑陋产品感到非常震惊与厌恶,根据小道消息记录,他在观看时候曾经放声大哭。虽然这种反应未免有夸张之嫌,但是确实在那次经历之后,莫里斯就立志开始学习设计,希望通过自己的努力来扭转这种设计颓败的局面。

跟约翰拉斯金一样,1934年出生的威廉莫里斯也是一名富二代,有一个富足的家庭跟一位经商的父亲,所以起点高一直不是坏事,特别是起点高的同时还有一位重视教育的父亲,莫里斯的父亲对他学习情况非常关心,一直严格要求莫里斯,所以1851年博览会后莫里斯顺利考入牛津大学建筑系。早期的设计师基本都是搞建筑为主,比方德国包豪斯的几位校长都是建筑师。

在牛津大学毕业后的莫里斯去了一所专门从事哥德风格建筑设计的事务所里工作,这个期间他对哥德风格有了实践上的深刻认识,但是莫里斯的内心其实对绘画及诗歌(莫里斯本身也是一位成熟的诗人,曾出版《地上乐园》等诗集)更为热衷,他感觉自己并没有对建筑的热忱,所以他呆了不够8个月就走了,随后参加了著名的「拉斐尔前派兄弟会」。

拉斐尔前派是1848年由3名年轻的英国画家亨特、罗塞蒂和米莱斯在英国伦敦所发起组织的一个艺术团体,目的是为了改变其时的艺术潮流,反对在米开朗基罗和拉斐尔的时代之后偏向机械论的风格主义画家。总的来说,他们的风格偏向传统写实,主张忠于自然,所以跟拉斯金及莫里斯的理念都接近,莫里斯在此期间创作了一些画作,其中比较有代表性的是《冈尼芙皇后》,画风已经明显有设计的装饰性感觉。

参加拉斐尔前派后的莫里斯不久就马上要步入人生另一个阶段——结婚,而对象是下面这位非常擅长配合摄影师摆pose 的美女简·伯顿,深谙现代头疼脚疼肚子疼三大法则,莫里斯第一次见到她时是这样描述的:美艳动人,身材高挑,皮肤黝黑,有一种野性美,留有自然的鬈发,长着细长的脖子、大大的眼睛和性感的双唇,与当时优雅而传统的美女很不相同,有标准的模特风范。

所以拉斐尔前派的成员之一罗塞蒂就经常以她为绘画模特进行创作,后来两人也因此闹出了不少绯闻,导致莫里斯和简伯顿的关系出现裂缝。

另外关注设计史太浓的朋友知道,我们的内容一直不乏美女身影,比方包豪斯创始人格罗皮乌斯的太太,神一样存在的阿尔马·马勒,关于她的传奇故事可以详见《用一篇超全面的好文,带你了解包豪斯的前世与今生》

莫里斯跟简伯顿的婚姻对整个世界的设计发展来说都是一件大事,因为他们的婚姻促使了莫里斯开始从绘画转向设计方向,同时被视为现代设计开端的代表性建筑「红屋」也诞生,事情的经过是这样的:

莫里斯跟简伯顿确立关系后决定在1859年喜结连理,而成家就要立室,说白了就是需要买房子,于是莫里斯开始在伦敦市区及郊区到处寻找合适的住宅,但是经过多轮的折腾,一直没有找到自己满意的住宅,以及对住宅的用品也十分不满,因为当时存在的建筑跟家居用品都充斥维多利亚风格的繁琐,不然就是极度简陋。

于是莫里斯开始产生自己动手建房子的想法,他邀请了一位叫威伯的朋友帮忙,在郊区肯特郡弄了块地,周围是果园,拥有非常开阔的视野与景色,符合莫里斯喜好接近大自然的性格,也符合新婚夫妇对浪漫的诉求,他们开始在这里做自己想要的房子。这个房子一开始的定位就是非常规的套路,比方结构是非对称的,然后表面没有粉饰,并且充分考虑了居住的功能性,其中最突出的特征就是房子全部使用红砖修建,既是材料,又成为装饰动机,所以史称「红屋」,其中也使用了诸多莫里斯喜欢的哥特元素雕饰细节,比方塔楼、尖拱入口等。我们来看看历史上红屋的样子:

其实红屋最特别的部分在于,除了房子本身的建筑外,里面全部家具、灯具、地毯、装饰品、墙纸、挂画都是莫里斯亲手设计的,就是现代俗称的硬装与软装,莫里斯都一手包办,所以风格非常统一协调,而且别具一格,这种风格也被视为工艺美术运动的代表性风格。

时间已经去到1860年,红屋的落成让周边的人好奇与惊讶,纷纷来参观,慢慢在英国设计界开始引发广泛的兴趣与赞誉,好的设计、讲究功能的设计自然会激发大众的热情与需求,越来越多人询问他能否也帮忙设计一些家具用品,他开始萌生为大家提供设计服务这样的想法,此时的他只是跟朋友经营画室搞创作,属于一个没有固定职业的下岗人员,于是他决定破天荒的成立一间独立设计事务所,这是世界上最早由艺术家经营的设计事务所,也就是现在所有设计公司的前身。

刚开始他是跟两位朋友一起合伙经营,几年后奇货可居,业务蒸蒸日上,他果断将另外两位朋友的股份买下,在1864年更名为「莫里斯设计事务所」。其实西方大部分品牌、公司都会以灵魂人物的名称来命名,比方沃尔玛、惠普、戴尔、保时捷、迪斯尼等等,遍及各行各业,这在我看来属于部落文化,也是罗振宇说的人格体,在设计行业其实也越来越多这种现象,中国这种情况较少,但香港已经有诸多成功的示例,比方陈幼坚设计有限公司,香港李永铨设计有限公司等, 内地深圳有韩家英、王粤飞等,老板的气质就是企业的气质,老板的风格就是作品的风格。

莫里斯的设计事务所为顾客提供各种各样的设计服务,范围包括家具、地毯、毛毯、墙纸、书籍、海报、建筑等,涵盖全面而完整,后期莫里斯越来越善于经营,联合工厂直接生产自己设计的产品,包括陶瓷、玻璃、地毯等,再直接销售给客户,所以这也是一个用设计创造财富的典型例子,值得现代设计师借鉴。

莫里斯的设计风格有别于当时的维多利亚风格,独树一帜,后来史称「工艺美术」运动风格,特征包含了以下几点:

  • 强调手工艺,明确反对机械化生产(这算是违背社会发展规律的倒退观念)。
  • 反对矫揉造作、繁琐、装饰过度的维多利亚风格,及其它古典、传统的复兴风格(这是进步的观念)。
  • 提倡哥德风格,讲究简单、朴实,重视功能(这特点具备现代设计思想)。
  • 推崇自然主义、装饰上借鉴东方艺术,比方日本的华年鱼虫。

工艺美术运动中的平面设计

第二部分聊到威廉莫里斯自从跟简伯顿结婚后,亲力亲为修建一间红屋,引发了设计圈轰动,随后他成立了自己的设计事务所后,引领出「工艺美术」运动风格,从1860年到1880年达到运动高峰,带动欧洲各国的同类设计运动,但因为本次的主题是英国设计,所以我们主要先聊英国情况,关于这场运动欧洲其它各国的状况我们将会在其它分享里讲述。

莫里斯初期主要的设计方向是家具、墙纸、家居用品等,墙纸设计是其最具代表性的作品之一,而且风格上特别容易识别,就是使用大量植物纹样,我们通过下面的图片来大致感受一下,现代的产品假设使用这种特征很容易重现莫里斯风格:

但后来英国出版界发生了一些事情,让莫里斯在平面设计范围也开始有极大拓展,并且发展出强大的影响力,进一步深化工艺美术运动的范畴。

事情的起因是19世纪以来,因为工业革命发展,引入机器操作后书籍开始大批量发行出版,导致书籍设计的粗制滥造情况越发严重,开始让当时一批平面设计家感到很焦虑,情况就跟现在区块链的急速发展,产生大量粗制滥造的app、网站平台的情况雷同,让做UI设计的我们也感觉局促不安。

所谓时势造英雄,总有一些人要被历史选中,比方有一位出版家叫威廉帕克林,在24岁时候开设了自己的书店,专门经营善本(泛指刻印较早、流传较少的精美古籍)和古本图书,后来他跟朋友合伙经营出版社,自行设计与出版书籍,多数与散文及诗集为主,他们对书籍有非常严格跟精细的要求,而且也使用了哥德风格结合简单明快的方式进行设计,符合工艺美术运动的特点,给出版界带来一股清流。

在这种风气影响下,慢慢的又出现另一位人物,就是建筑家出身的阿瑟·玛克穆多,他出生于1851年,就是水晶宫面世同一年,在26岁时候他认识了43岁的莫里斯,受到当时已经成大名的莫里斯的思想影响,决心追随他发展工艺美术设计改革,他专注于平面设计,并且体现在书籍设计上。

1882年他成立了自己的设计公司「世纪行会」,然后在1884年出版了一本《玩具马》刊物,这是最早最系统,利用文字方式宣传工艺美术运动主张的出版物。但非常可惜关于这方面的图片资料在互联网上已经无法找到。

这本刊物是工艺美术运动当中平面设计的最典型作品,刊物当中的封面及插图、排版装饰使用了吸收日本浮世绘元素,从植物纹样当中提炼出抽象图案,并采用一些中世纪的装饰动机,流畅、生动,形成一种特别,能代表工艺美术运动的平面设计风格。

做这个刊物时候玛克穆多曾经多次跟莫里斯探讨版面编排、空间布局比例,文字间距、字体风格、纸张材质等具体的设计问题,这个过程让莫里斯很兴奋,因为莫里斯对工艺美术运动风格可以应用到书籍平面设计当中感到很高兴,于是他又决定搞点事情了。

这个时候时间已经去到1888年,莫里斯的事业已经发展很成功,说白了就是通过设计获得了财务自由,一旦财务自由就可以比较任性的做一些事情,比方将精力从家具、墙纸、工业产品方面转移到平面设计,而且本来他就是一名文学爱好者,所以他一转身就成立了个人出版社,雇佣了一批铸字工人及印刷工人,起名为克姆斯各特出版社。

这个出版社一成立,基于莫里斯本人的影响力马上就生产出一本成功的书籍,就是莫里斯与插图画家克莱因合作,设计出版的英国传说故事《呼啸平原的故事》,第一次出版了200册纸张本跟6本羊皮纸本,这本书设计非常精美,而且完全符合工艺美术运动风格,一上市就吸引了英国读者的强烈兴趣,并且将克姆斯各特出版社的名头一炮打响。

莫里斯这个出版社在英国的「工艺美术」运动当中发展起到非常重要的作用,因为在莫里斯的带领下,出版社是这个运动当中平面设计领域最集中的体现,影响了其它出版公司,甚至影响到欧美各国的印刷出版行业。

克姆斯各特出版社无疑是威廉莫里斯的平面设计大本营,他的大部分书籍都是由这家出版社完成,不过他的设计充满了企图恢复古典,中世纪哥特时期的风格特征,版面编排非常拥挤,很多细节也比较繁琐,并且因为对质量的追求,所以产量低,价格高,有经济能力购买的群体不多,于是慢慢引起一些评论家的指责,可见名人做事情是要受社会监督的,比方英国有一位平面设计家刘易斯·戴依就曾经在1899年的《东方杂志》这个期刊中撰文批评威廉莫里斯。

他认为莫里斯后期的书籍设计完成沉溺在复古主义,完全违背了他一贯主张和倡导的设计社会化、民主化、大众化的立场与原则,让书籍无法成为普及大众的读物,而沦落为少数收藏家的藏品。而此时莫里斯其实已经离世,莫里斯是在1896年因为病患去世的,而克姆斯各特出版社从1891年经营到1898年,期间一共出版53种图书,总印刷量达到18000本,这个数量在英国及欧洲都是可观的,在莫里斯离世两年后,因为缺乏灵魂人物,出版社因为经营不善就关闭了。

后来这位批评莫里斯的设计大师戴依联合了插图画家杰西·金及格里那维,三人合作创造出一种以儿童为受众的读物设计风格,设计当中充满了天真风格、色彩浪漫,无论字体、插图风格跟布局排版都轻松可爱,广受当时的儿童欢迎。

他们的目的是希望书籍设计能够真正为广大读者服务,改变书籍长期被少数人掌控的局面,也力图改变莫里斯那种比较凝重的考古味道。这三人都基于为大众的共同立场,但是各自有自身的风格,他们为众人皆知的一些英国童话故事设计书籍,人物、动物、植物跟风景都栩栩如生,生动活泼,是工艺美术运动后期平面设计范围里一个重大的发展与突破。

他们的设计直接影响了下一代的平面设计师及插画家,比方我们在包豪斯那期分享里聊到的比利时设计师亨利·凡德·威尔德。

莫里斯离世之后余威尚在,很多年轻设计师受他的影响,都成立了一些小型出版公司来探索书籍平面设计,被后世称为「私营出版运动」,其中有一个比较突出的机构叫「手工艺行会」,领导人是杰出建筑师查尔斯·阿什比,同时他也从事首饰跟银器设计,他跟三位朋友一起,仅仅使用50英镑成立了这个行会。

手工艺行会的风格在工艺美术风格基础上再次产生了一些突破,比方把古埃及及古罗马的风格也融合平面设计,特别是字体设计上重视书法效果,他们的设计业务和制作业务都发展得很繁荣,订单接踵而来。

另一个比较突出的「私营印刷运动」组织是多佛出版社,他们有一个很具进步性的设计思想观点,认为平面设计的核心并非单纯的视觉美好,而是准确的形象信息传达,在良好的传达前提下,达成设计美观的目的。他们的代表作是1903年的《圣经》,字体和版面编排都非常方便阅读,插图讲究,达到功能与形式的完美平衡,是工艺美术运动后期越发成熟的代表作品之一。

以约翰拉斯金的指导思想为基础,威廉莫里斯设计为代表所发起的英国「工艺美术」运动,虽然思想跟形式上也有倒退的部分,但仍有诸多具备现代设计的先进思想,比方希望设计普及大众、重视功能等,所以对西方各国的设计发展都有促进与推动作用,并且在历史上被视为现代设计的开端。

总结

整个分享我们大致谈了三部分内容。

现代设计的起源发生于英国,伦敦博览会水晶宫的出现刺激了设计理论先驱约翰拉斯金对设计的思考,并发展出具有进步及前瞻性的现代设计思想。

设计师威廉莫里斯建造红屋这件事,拉开现代设计的序幕,并引发出工艺美术运动,该运动风格特征以莫里斯借鉴东方植物纹样的元素,形式简单明快,讲究功能等特点为代表。

工艺美术运动在平面设计上,特别是在书籍上具体体现,莫里斯同样担当领军人物,并由此对欧洲各国的平面设计产生深刻影响。


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


交互设计-设计模型

用心设计

工欲善其事,必先利其器”;作为设计人员来说,设计方法和设计模型就是辅助我们更好做设计的工具。就像厨师做菜时候的菜谱一样;面对新的菜种,能更快指引我们做出味道不错的菜肴。

体系化的设计方法不仅能更好的指导设计师做设计;另一个方面,经过设计方法包装后的设计,能让设计师更坦然面对来自各方的质疑,更专业的讲述自己的设计依据。在做不同菜肴的时候,我们需要不同的菜谱来指引;而在不同的设计阶段,设计师也需要不同的设计模型/方法,让我们更灵活的做设计分析与输出。

下面从接到项目需求 > 体验迭代优化阶段,笔者将为大家详细讲解以下 5 种设计模型,并配出具体实践的案例,希望对大家有所启发。

模型一:SWOT 模型

1. 概念介绍

SWOT分析法(也称 TOWS 分析法、道斯矩阵)即态势分析法,20世纪80年代初由美国旧金山大学的管理学教授韦里克提出,经常被用于企业战略制定、竞争对手分析等场合。

在现在的战略规划报告里,SWOT分析应该算是一个众所周知的工具。来自于麦肯锡咨询公司的SWOT分析,包括分析企业的优势(Strengths)、劣势(Weaknesses)、机会(Opportunities)和威胁(Threats)。

2. 使用场景

主要用在产品前期的战略规划中;用于项目成员知己知彼,同时也能知道在行业领域自己的产品所处的位置和核心竞争力是什么;对于产品方向的定位和全方位分析有复用价值。

3. 计价值

SWOT分析实际上是将对企业内外部条件各方面内容进行综合和概括,进而分析组织的优劣势、面临的机会和威胁的一种方法。

优劣势分析主要是着眼于企业自身的实力及其与竞争对手的比较,而机会和威胁分析将注意力放在外部环境的变化及对企业的可能影响上 。在分析时,应把所有的内部因素(即优劣势)集中在一起,然后用外部的力量来对这些因素进行评估。

4. 具体实践案例说明

下图是笔者曾为的阿里内部某个数据服务平台分析的案例;侧重介绍了为什么要做这个数据平台;以及做这个平台我们项目组的优劣势和机会点分别是什么。在给老板汇报产品来源&方向时是非常有效的。

最后,SWOT 分析模型其实还可以与商业画布相结合,便于更全面对项目/业务进行快速分析和深入了解;深入懂业务的设计师才能真正在团队中进行发声,提出超越 UI 层的建设性意见。

模型二:Google Design Sprint

1. 概念介绍

Design Sprint, 设计冲刺,顾名思义就是要在短时间内做出好设计;是由 Google 提出的设计方法。

2. 使用场景

设计冲刺这个设计方法主要适用于短时间就需要产出设计方案;例如一些 Workshop 的共建, 产品迭代周期很快的新需求/任务,需要系统化分析与输出设计方案。

3. 设计价值

可以在很短的时间内输出一套系统化的设计策略及方案;

通过与不同背景的参与者进行沟通协作,能获取更多看事物的角度和差异化知识;创造更多可能;

作为一种理想的设计教育工具,让非科班的设计人员完整又快速了解产品&设计。

4.  具体实践案例说明

设计冲刺的主要内容包括 6 个阶段:

理解(Understand):理解要为用户解决的问题

定义(Define):明确产品策略(数据分析,用户调研,设计原则制定等)

发散(Diverge):探索实现方案

决定(Decide):确定设计方案

原型(Prototype):构建产品原型

验证(Validate):验证产品原型

模型三:GUCDR 模型

1.概念介绍

相比前一个设计冲刺模型,GUCDR 模型在设计过程中的实用性更强,能让你快速用起来,帮你系统性梳理信息;在实际工作中,只要能够回答画布中的每个点,即可形成完整的设计推演过程,让设计思路逐渐清晰起来。

G:Goal

U:User

C:Condition

D:Design

R:Realize

2. 使用场景

GUCDR 模型很适合用于前期需求调研和整理阶段;特别是在自己不是很熟悉的领域中,把信息按照模型和画布中的点进行归类汇总;最大限度的让自己的设计思维和信息逻辑得到诠释。

3. 设计价值

3.1  对设计的需求来源及设计目标的聚焦定位,非常有价值,能快入深入了解业务背景;

3.2  对设计阶段的目标拆解,从设计目标 > 设计策略 > 设计方案,层层递进,设计方案输出的逻辑性和针对性很强。

4.  具体实践案例说明

GUCDR 模型在具体的使用过程中,可以和 GUCDR 画布结合起来一起使用。信息下钻的更深入具体,从项目目标到设计落地,每个阶段都有具体的节点支撑,在使用过程中只需要把信息直接输入到对应的位置即可。下图为 GUCDR 画布模板,可直接把业务相关信息输入进来。

模型四:双钻模型

1. 概念介绍

双钻设计模型由英国设计协会提出,该设计模型的核心是:发现正确的问题、发现正确的解决方案。

双钻模型是一个结构化的设计方法,被很多设计师喜爱和使用。

探索/调研——透析问题(发散)

定义/合成——聚焦领域(集中)

发展/构思——潜在问题(发散)

传达/实现——实施方案(集中)

2. 使用场景

一般应用在产品开发过程中的需求定义和交互设计阶段;教我们如何对未知的可能的事物进行探索;一步步到达已知的理应的层面。

3. 操作使用说明

双钻模型的四个阶段也许很精简并且合并到两个主要的阶段。

第一阶段——做对的事(菱形1——探索和定义)

第二阶段——把事情做对(菱形2——开发和履行)

4.  具体实践案例说明

下图是对阿里内部一款移动运维产品的分析,分析其从 0-1 的方向探索和从 1-1.5 的发展历程:

下图是曾经在一个设计讲座中,滴滴 CDX 一位设计师的分享,她把双钻模型利用到设计的研究和输出阶段,个人感觉此模型此刻的使用场景也很贴切;不仅仅是在完整的一个项目中,在单一的某个阶段双钻模型也是理念很好的承载容器。

模型五:卡诺模型

1.概念介绍

kano模型是狩野纪昭教授发明的一种工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。

在卡诺模型中,将产品和服务的质量特性分为五种类型:

1> 魅力属性:用户意想不到的,如果不提供此需求,用户满意度不会降低,但当提供此需求,用户满意度会有很大提升;

2> 期望属性:当提供此需求,用户满意度会提升,当不提供此需求,用户满意度会降低;

3> 必备属性:当优化此需求,用户满意度不会提升,当不提供此需求,用户满意度会大幅降低;

4> 无差异因素:无论提供或不提供此需求,用户满意度都不会有改变,用户根本不在意;

5> 反向属性:用户根本都没有此需求,提供后用户满意度反而会下降。

2. 使用场景

卡诺模型的主要使用场景是对用户需求分类;

另一种是对多个功能点进行优先级排序。

3. 具体使用操作

步骤一:设计问卷调查表,实施有效的问卷调查

KANO 模型的问卷问法,是对每个质量特性都由正向和负向两个问题构成,分别测量用户在面对存在或不存在某项质量特性时的反应。问卷中的问题答案采用五级选项分别是:

我很喜欢:让你感到满意、开心、惊喜。

理应如此:你觉得是应该且必备的功能。

无所谓:你不会特别在意,但还可以接受。

勉强接受:你不喜欢,但可以接受。

我很不喜欢:让你感到不满意。

步骤二:问卷结果整理,进行数据分析

根据问卷结果进行 KANO 模型二维属性归属分析,可得出魅力属性、期望属性、必备属性、无差异属性、反向属性与可疑结果的功能属性归类百分比。除了对属性的归属探讨外,并通过百分比计算出 Better-Worse 系数,表示某功能可以增加满意或者消除很不喜欢的影响程度。

增加后的满意系数 Better/SI=(A+O)/(A+O+M+I)

消除后的不满意系数 Worse/DSI=-1*(O+M)/(A+O+M+I)

根据 better-worse 系数值,将散点图划分为四个象限。

第一象限/期望属性:better 与 worse系数成正比;表示产品提供此功能,用户满意度会提升,不提供此功能,用户满意度会降低,这是质量的竞争性属性,应尽力去满足用户的期望型需求。

第二象限/魅力属性:better系数值高,worse 系数绝对值低的情况。表示不提供此功能,用户满意度不会降低,提供此功能,用户满意度和忠诚度会有很大提升;

第三象限/无差异属性:better系数值低,worse系数绝对值也低的情况。即无论提供或不提供这些功能,用户满意度都不会有改变,这些功能点是用户并不在意的功能。

第四象限/必备属性:better系数值低,worse系数绝对值高的情况。当产品提供此功能,用户满意度不会提升,当不提供此功能,用户满意度会大幅降低;此象限的功能是最基本的功能,这些需求是用户认为产品有义务做到的事情。

步骤三:数据解读,将结果落地实施

KANO 模型是对功能需求的优先级进行探索,具体情况还需要和业务方进行讨论,结合实际情况后制定可行的产品功能开发优先级顺序,以将调研结果落地实施。

4. 具体案例实践说明

题目:根据报警内容,“掌上运维”提供运维操作建议(如磁盘满了智能推荐执行日志清理等)

步骤一:设计问卷问题,发放问卷

步骤二:问卷统计,进行 KANO 模型二维属性归属分析

步骤三:根据问卷统计的用户数据;计算出每个区域的百分比;

具体计算方式是全部区域的人数相加作为分母;每个格子中的数字作为分子,即可得出每个格子的百分比出来。

具体百分比得出后,将下表中标 A、O、M、I、R、Q 的格子中百分比相加,即可得到五种属性对应的百分比。本调查结果可以得到A魅力属性占比为42.1%,O期望属性占比9%,M必备属性占比1.2%,I无差异属性占比38.9%,R反向属性占比1.8%,Q可疑结果占比7%。

步骤四:根据 Better-Worse 计算公式,得出 Better-Worse 系数,明确功能落点象限。

步骤五:多个功能需求结果对比进行优先级排序。

模型六:METUX 幸福模型

1. 概念介绍

为了帮助大家更好地进行“幸福设计”,卡里罗教授分享了他的一个模型——Motivation, Engagement and Thriving in theUser Experience (METUX)。

2. 使用场景

产品成熟稳定期,需对产品&用户体验进行提升时;或需综合对产品体验进行评估分析时;提升用户幸福感,希望产品能对用户行为方式及生活质量有所影响时。

3. 主要使用操作

在考虑用户体验时,从4个层次进行考虑:

▪︎  第一层是“界面”体验:用户与产品交互时的体验如何。

▪︎  第二层是“任务”体验:界面之上是用户完成的任务。如利用智能手环计步,用户在完成任务时体验如何。

▪︎  第三层是“行为”体验:任务之上是用户的行为。如用户购买智能手环的目的是运动,此时行为可能是跑步、骑自行车。因此产品在任务之上应该深入关注用户行为上的体验。

▪︎  第四层是“生活”体验:行为会对生活产生影响。如运动过量可能导致身体受损。

在设计过程中,应该关注“胜任力”、“自主性”和“关系”三个关键因素,这些基本心理诉求是动机、投入感和幸福感的根本。

途家APP V7.0改版——交互设计总结

资深UI设计者


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



途家网是全球民宿预订平台,与传统酒店住宿不同,致力于为用户提供更个性化、更人性化的出行体验。作为电商类产品,改版最终的目的自然是提升转化率、提升GMV,除了这个简单粗暴的商业目标,设计团队同时需要考虑如何改善产品的用户体验。本文主要围绕途家App中的首页、列表页、详情页三个环节,为大家分享改版的思路和最终的设计方案。




核心流程


核心流程指的是用户进入途家App到完成一单预订所经历的过程,主要包含以下几个环节:搜索&浏览、比较、决策、预订、支付。要提升用户体验,就需要设计师在每一个环节中,思考如何更好的帮助用户达成他们的目标,以促使用户进入下一个环节,最终完成预订。




 

首页


进入App首页的用户,大致会分为两类。一类是需求明确的用户,他们有比较清晰的出行日期和目的地,这类用户大多会直接通过搜索来寻找房源,因此首页上需要有明显的搜索框来引导他们说出出行需求,这样他们就会顺利进入核心流程。另一类进入app的用户则没有明确的出行需求,甚至可能是不太了解产品的新用户,直接使用搜索会让他们感到不知所措,他们需要通过先逛一逛来汲取灵感。那么对于这一部分用户,首页就需要给予一些有吸引力的内容,推荐一些好东西给用户,让他们能随意看看,一方面旨在激发用户消费欲进入核心流程,另一方面能够让用户对产品产生好感和信任感。




列表页


列表页是承载房源卡片集合的搜索结果页,用户通常会经过首页的搜索框,在输入了位置和日期后,进入列表页。当然通过城市、位置和日期搜索得到的结果,只能是一个初步的搜索结果,用户还需要通过入住人数、价格、户型等缩小范围,筛选出更符合自己入住需求的房源,以便于逐一比较和进行查看。所以在用户进入列表页后,如何帮助他们得到符合入住需求的精细化搜索结果,是我们首先需要解决的问题。


详情页


房屋详情页是用户进行购买决策的重要环节。用户在详情页停留时间相对较长且有较强烈的购买意愿,因此,在详情页充分展示房屋优势,吸引用户,是对于提升转化率十分重要的。详情页的信息涵盖了多个维度,比如有关于房屋的描述、关于房东的介绍、还有来自房客的评价、入住须知等,如何将大量的信息合理的分组,突出房屋优势,并以合适的顺序清晰地展示给用户,是详情页的设计难点。


结语


每一次改版都需要公司多个业务方及团队的支持,做为设计师会收到来自各方的需求及关于方案的反馈。面对来自四面八方的观点输入,我们要时刻牢记改版目标,并且明白评判方案的好坏并不能简单地用对与错,而是当下面对此人此情此景,取舍是否合理,是否尽力做到了的权衡。同时,作为可能是唯一能够单纯为用户说话的角色,设计师还是要在考虑商业目标之外,多为用户争取一丝闲暇吧。


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

 

大型医疗管理系统设计:eCare EHR Platform

用心设计

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

 

蓝蓝设计

这是一个关于大型医疗管理系统的设计案例,对于这类平台案例的分享我们非常少见,要么没多少设计师能接触得到,要么是禁止分享,所以建议大家有空就看一下,同时感谢设计师 Tusacha 分享管理平台的设计经验,下面大家一看看 eCare EHR Platform 的医疗系统设计。

PS:由于医疗平台针对的用户一半是外国用户,因此用英文版来做页面展示,用中英文做讲解。

医疗管理系统设计

设计师:Tusacha
个人主页:http://i.ui.cn/ucenter/285814.html

产品概述

“全科”

整合看病,防病、病后康复、人文关怀于一体的学科,涵盖了各个器官系统以及各类疾病,解决80%的疾病。

eCare全科诊所管理平台

基于多角色可配置的权限管理平台,融合各科室业务流程医疗形成统一的全科诊所管理系统。以诊疗规范化,管理标准化、决策数据化、营销社交化及办公移动化为产品的运用核心模式。

挑战与机遇,改版大思考

很多初期项目在快速选代开发过程中,大量以功能叠加、业务调整为主,交互及视觉缺乏统一性,整体缺乏美感,对用户使用场景及体验考虑欠佳。因此eCare全科诊所管理平台是站在用户使用场景及体验的角度来做的全新改版(主要是结构层,框架层及表现层),整体设计过程中,要考虑国内外用户的操作习惯,并取之平衡点。这对从未接触过PC端大型平台设计的我来说,就是巨大的挑战与机遇。

结构层与框架层

了解产品:调整信息架构,减化信息层级,简少操作流程,以角色来配置功能界面(分清主次) ,整体布局考虑用户操作习惯及心理感受。

用户操作习惯

关注用户:在设计细节当中考虑用户操作习惯,使用场景(医院/卫生院/其它医疗中心)及心理感受,信息用词统一(减少误解),人性化引导(避免不必要的错误操作) .

表现层

做好设计:规范视觉与交互方式,提高前端与开发效率,突出产品整体特性。

PS: 以下内容由与版式问题,小编无法文字排版,请直接点击图片查看大图,以便更好理解。

请点击图片查看大图:


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

福报从身体上看出来

蓝蓝设计的小编

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


我们现在追求幸福的方式是错误的。包括很多人学佛,就求福求发财,这只是勾牵你进来的方式,其实道的门都没有进来。要进道的门,确实不容易,不是福报大小的问题,而是阴德厚重的问题。


我们对幸福有个错误的觉知,认为吃得越好,住得越高档舒服,饮食住宿千万般求细腻,认为这是幸福生活。这个是凡夫之见。我现在也在反省,学佛,还是修道,很多人都在追求住得更好,更豪华,吃得更细腻,更有营养。认为这就是福报,那真的如此吗?


其实福报和物质没有关系,可是不知道什么时候,大家把福报和钱财等同起来。导致很多人一学佛,发财了,就说自己福报来了。古人讲,真传一句话,假传万卷书。我们现在看到的佛经,很多名相,都是假传万卷书。我们误解了这些名相,所以越修越错。就单单一个福报这个名词。


人对外界的追求是没有止境的。就像你看速度,我们对速度的追求也没有止境,飞机、火车,导致越来越快。就像人的欲望一样,一旦升腾起来,也没有止境。你会想要越多,尤其是世俗福报越大的人,他欲望就越大。因为向外的追求,是一条不归路,所以你看城市里头,谁活得最幸福。告诉各位,没有的。在城市的欲望里头,每个人都活得很痛苦。

 

所以我们对福报的误解,导致追求的错误。人要怎么修行?人应该要念念归于清净时。所以不管是佛教,还是道家的修行,最基本的要做到清净。很多人钱财,权力很大,为什么那么痛苦?因为他没有得到清净。所以道家修行经典有句话:人神欲清而心扰之,人心欲静而欲牵之。如果能懂这句话,也能开悟。


真修道,就要回归到心神的安宁上来,才能得到真正的幸福。我们现在都在鼓动很多的欲望,包括出家,也希望庙宇越盖越大,甚至超负荷,贷款来盖。导致佛教和经济越来越挂钩,这已经慢慢偏离了道的根本了。因为道是要归于心神的清净。


我用口味来比喻。世俗人吃的,要追求越吃越好,口味越来越重。所以人的吃的欲望永远无法满足。为了满足吃和住的欲望,开始了大面积的造恶业,赚非分钱财、杀生。发展人的欲望,是一条不归路。


那佛教怎么办呢?佛教的方法,就是告诉人舌根要清净,吃的很简单,很粗糙,普通五谷都能得健康。当人的舌根清净时,人可以减少非常多的恶业。同时人不需要那么多的精力,就为了满足自己的口欲。

 

再比如身根清净的问题。人一味地享受,吃的脏,只会让身根更污染。身根一污染,人就要花大批的精力和财力去照顾他。身根脏臭的人,身体有臭味,就会花很多时间去打扮身体,洗澡,甚至用很漂亮的衣服。


身根脏了,就导致人体力下降,免疫力下降,花很多财力去吃药,住的要追求高档,甚至产生洁癖,力气不足,再也无法适应普通的交通工具。对交通工具的要求也越来越高,硬座的火车就承受不了,就要软卧,或者飞机,或者购买更高级的车。然后我们就认为,这个是有福报的表现。


按照佛法来讲,这个是人类身根下劣啦。说实话,比起毛泽东时代,这代人脸上的红润少了,力气也少了,精神也不比他们。倒是疾病增多了,而且对环境越来越挑剔了。动不动就要杀菌消毒,医院总是人满为患。为什么?

 


我组织多次去五台山走五个台,走三天一百多公里。我发现那些福报太大,钱财过多的人,走不动。我就开玩笑地说,你看,都被自己的福报害了吧。


你有好车,却没有好腿脚,有好吃的,却没好胃口,有好房,却没有好睡眠。有些人一换个环境,根本就睡不着。这就是身根下劣。城市人的福报,把健步如飞的腿脚换成车,把好胃口换成冰箱,把好睡眠换成床。


这一块,佛教一定要宣传起来。我发现香客对住宿的地方,越来越挑剔,要求越来越高。要有独立卫生间,床铺要很干净,被子要经常换。很奇怪,我们很害怕被传染。为什么你那么容易被传染?因为身根下劣了。


我们都认为最大的疾病来在外面,却不知道,真正的疾病,是来自嘴巴吃的肉,和鱼,以及不干净的东西。这些是直接污染人的身体内部,而外在的环境,只能污染身体外部而已。


如果真要修道,最起码的一条,食清净食。人的身体清净了,欲望就少了,你根本不要求那么多东西。就有很多时间来修行,学佛了。身体清净后,对环境的要求也不会很高,也没有洁癖。


比如睡觉来讲,最好的床铺是硬硬的木板床,人在硬的木板床上,体内的气就不会被堵住。一直睡的太柔软,弹簧床,会影响人的骨骼发育。椅子也要硬的,人做沙发椅,很软的坐久了,气都堵住了。


现在人为什么那么多的气血淤堵,跟睡的太柔软,以及坐的太柔软有关。这一点估计很少人去提。你看老一辈子的床都是木板的,最好的。睡的姿势最好是佛陀的吉祥卧。向右侧身,右手枕头,左手放在左侧腿上。这个姿势叫吉祥卧。这是最好的睡的姿势。其它姿势都不行。

 

要修道,要把欲望降低,慢慢地回归来。这时多念经就显得很重要了。经文有加持力,能让色身清净。要达到人心清净,天地自归宁。这个是很不容易的。


古人讲,安贫乐道。其实是很高的境界。一个人耐得住清贫,因为他心中有道。永嘉证道歌说的,穷释子,口称贫,实则身贫道不贫。身上穿的百衲衣,心里却怀无价珍。我们一直奔波在外头,因为没有道,所以才会追求外在的物质。 


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

 


设计思维中的十大黄金法则——良好原则在为功能设计系​​统奠定坚实基础的过程中的重要性

资深UI设计者

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

首先,在这10条原则之上,我只想说对我来说最有帮助的习惯是不断尝试将简单性放在我的选择中,并且永远不要停止学习并发现最适合我的新想法。

但是现在这里是我设计思维中的十条黄金法则:

1)要谦虚

不要认为自己是个天才。这是第一个要避免的大错误。把你的自我放在一边,让你身边的每个人都参与其中。聆听其他人的意见,与您的意见进行比较,并获得新的和不同的解决方案。

2)相互信任和尊重

花点时间了解您正在与之合作的团队及其行为。请注意,整个团队为表格带来了独特的技能。这是建立良好工作关系并建立信任和尊重的坚实基础的良好开端。这是推动团队取得令人敬畏成果的最重要规则之一。

3)用户先到先得

用同理心思考它是非常重要的。设计过程中的良好用户体验使用户能够充分利用产品,提高客户满意度。重要的是要理解并牢记UX设计始终关注客户的情绪以及如何吸引他们的注意力。因此,抓住执行积极和令人印象深刻的UX设计体验的基本方面是至关重要的。此外,在开始使用UI之前,构建一个包含许多正确策略(如研究,信息架构,分析数据和可视化设计)的良好UX基础架构总是更好。最终目标应始终是帮助人们享受愉快的用户体验。

4)打破挑战

通过许多小任务,可以轻松分析和定义每个问题的关键设计元素。这将有助于提出一种最有效且最可靠的设计解决方案。在您确切知道设计的外观之前,切勿开始设计。考虑到这一过程,最终设计始终非常接近原始想法。

5)心理清晰度和焦点。你知道你要去哪里吗?

有时候喝一杯咖啡然后出去散散步是非常好的。在办公桌后面停留太多并不总是很有效率。将注意力从复杂的环境中转移到其他事物上是一种很好的做法,并试图消除思路中的混乱。这是一个很好的练习时间,以获得一些新鲜空气,让你的头脑清醒。一个混乱的头脑会对你的选择产生负面影响,并会带来糟糕的结果。

6)不断重新考虑设计

重新考虑产品,功能和整个架构,这是产品设计中另一个重要的规则,以便创建一个表演产品。删除已经变得不必要的东西而不是总是添加到它(功能随着时间的推移将创建更糟糕的用户体验)。在不断重新评估的整个过程中,将更容易找出哪些领域需要更多的工作和什么不需要。

7)永远不要害怕丢弃设计思路和重构新的解决方案

灵活的思维将有助于实现重构和重新设计过程。在创建新产品的整个过程中,很容易遇到以前不存在的任务。通过牢记整体功能,重新考虑和重构整个结构(或其中很大一部分)是非常重要的。例如,每次向项目添加新任务时都应该这样做。通过这样做,可以更容易地用一个更好的解决方案一次解决新旧问题。因此,更改可以将想法转化为可以创建更好,更简单的用户体验的解决方案。

8)好的设计是自我解释的

每个设计师都应该记住,不需要解释好的设计。有时,最佳和更直观的用户体验具有简单的设计解决方案。用户应该本能地知道如何与产品进行交互。因此,在推动像素之前,必须牢记这一概念。如果一个设计,即使是美丽的不是自我解释,需要重构,考虑重新开始一切。

9)要有创新精神

通常,第一种解决方案并不总是最好的解决方案。允许工作流中的空间发现并迭代您的设计。开箱即用,让自己远离舒适区。即使在第一眼看到它们也无法发展,创造颠覆性的体验。多个设计草图可以相互迭代或合并,以创建最终解决方案,更好地实现项目的最终目标。

10)少即是多

保持尽可能简单是最难应用的行为模式,但一旦它被钉住,将更容易回头没有任何遗憾。听起来很简单,主要是与你自己的一致性和耐心。


结论

每个设计师都应该拥有自己的一套黄金法则,以形成良好的产品设计基础。这肯定有助于更好地处理决策并找到正确的总体方向。

总而言之,我想与大家分享我前一段时间遇到的一个非常有用的网页,我经常检查它,我觉得它非常好,鼓舞人心。有时读这个页面让我的思绪充满动力。

这里是:

https://principles.design

感谢您阅读本文,我希望它对您们中的某些人有任何帮助和灵感。

祝你有美好的一天!


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

 

可能是最详细的大屏数据可视化设计指南!

资深UI设计者

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


文章目录

  1. 基础概念
  2. 大屏数据可视化设计原则
  3. 大屏可视化设计流程
  4. 大屏设计的注意事项
  5. Q&A
  6. 总结

基础概念

1. 什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。

在当前新技术支持下,数据可视化除了「可视」,还有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。

△ 数据可视化作品《 launchit 》,作者:Shane Mielke

作者写了本书,地图上显示了世界各地读者的分布情况及对应人数。

△ 数据可视化作品《 world-drawn-by-travelers 》,作者:TripHappy

国家之间相互连通的旅游路线,颜色越相近的国家,表明两个国家的人们互动越频繁。

2. 什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

「大面积、炫酷动效、丰富色彩」,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。电商双11时大屏利用此特点打造了热烈、狂欢的节日氛围,原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论和决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

数据分析类:

△ 图片来源:必应,图片作者:帆软软件有限公司

大屏数据可视化设计原则

大屏数据可视化设计原则:设计服务需求、先总览后细节。

1. 设计服务需求

大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢?业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是大屏数据可视化的价值所在。

2. 先总览后细节

大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。

大屏可视化设计流程

规范的流程是好结果的保证。找到一个可参考的流程,然后步步为营,就能避免很多不必要的返工,保证设计质量和项目进度。

1. 根据业务场景抽取关键指标

关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例,这里的关键指标有:企业停车时长、企业违停量、热点违停区域、车辆入栏率等。

确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。

2. 确立指标分析维度

「横看成岭侧成峰」。同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

上图向大家展示了数据分析常用的4个维度,我们在选定指标后,就需要跟项目组其他小伙伴讨论:我们的各个指标主要想给大家展示什么,更进一步的讲,是我们想通过可视化表达什么样的规律和信息。而上图,可以引导我们从「联系、分布、比较、构成」四个维度更有逻辑的思考这个问题。

  • 联系:数据之间的相关性。
  • 分布:指标里的数据主要集中在什么范围、表现出怎样的规律。
  • 比较:数据之间存在何种差异、差异主要体现在哪些方面。
  • 构成:指标里的数据都由哪几部分组成、每部分占比如何。

当然,上图例举的示例图表都比较传统,在大屏数据可视化中常还有另一类地理信息(常以2/3D地图、地球呈现)出现。上图虽未包含这类图形,但它提供给我们的确定数据分析维度的思路和方法是相通的,可借鉴。

3. 选定可视化图表类型

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

选定图表注意事项:易理解、可实现。

易理解

可视化设计要考虑大屏最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。

可实现

我们需要了解现有数据的信息、规模、特征、联系等,然后评估数据是否能够支撑相应的可视化表现。

我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用 Ps / Ai / Ae 这些工具模拟时会发现比较困难;同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计。一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、不死磕不放。

4. 了解物理大屏,确定设计稿尺寸

多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时,就会有多个设计稿,此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率。

一般情况下设计稿的分辨率就是电脑的分辨率,当有多个信号源时,有时会通过显卡自定义电脑屏幕分辨率,从而使电脑显示分辨率不等于其物理分辨率,此时,对应设计稿的分辨率也就变成了设置后的分辨率。此外,当被投电脑分辨率长宽比与大屏物理长宽比不一致时(单信号源),也会对被投电脑屏幕分辨率做自定义调整,这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。

5. 页面布局、划分

尺寸确立后,接下来要对设计稿进行布局和页面的划分。这里的划分,主要根据我们之前定好的业务指标进行,核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

6. 定义设计风格

很多小伙伴也许没接触过大屏设计工作,但大多数人都应该有 APP 或者 Web 风格定义的经验。我们在定义一款 APP 或者 Web 页面设计风格时常用的方法是什么呢?情绪板。

大屏虽酷炫,但实际上也是运行在浏览器里的 Web 页面,所以大屏设计风格定义方法也同样可以用情绪板来做,这种方法也是目前比较科学的风格定义手段。

上图提供了情绪板应用的脑图,具体操作细节不做介绍,不太了解的小伙伴可以自己找找资料。

编者按:一篇好文帮你扫盲,运用情绪板搞定设计→《该怎么运用情绪板,才能让设计作品更有说服力?》

情绪板的一套流程下来,我们定义的风格基本是科学准确的,可以指导我们执行设计。如果是给甲方做大屏,这个流程也可以让我们提出的方案更有说服力。

7. 可视化设计

根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来说大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现,而地理类信息点一般可视化效果酷炫,但是开发相对困难,需要设计师跟开发多沟通。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点,所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求,硬件配置不够的情况下可能出现卡顿甚至崩溃的情况,所以这点也是需要提前沟通评估的。

8. 样图沟通确认

这里的沟通分三个层面:设计师对内沟通、设计师对外沟通、设计师与大屏的「沟通」。

样图沟通环节,最初的样图不需要十分精致,我们可以把它理解为一个「低保真」原型,然后通过不断沟通修改,让它逐步完善精致起来,也就是小步快跑,避免那种一下子走到终点,然后又大修大改的情况。

因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点,所以这一步我们需要用尽可能简单的方法 ,把之前几步的成果在页面上快速体现出来,然后根据样图效果尝试确定五方面内容:

  • 之前确立的布局在放入设计内容后是否依然合适;
  • 确立的图表类型带入数据后是否仍然客观准确;
  • 根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受;
  • 已有的样式、数据内容、动效等在开发实现方面是否存在问题;
  • 大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象。

跟大屏「沟通」是比较重要也是个特殊的环节,这也是我觉得大屏设计跟其它设计不一样的地方,大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现,所以这一步在样图沟通确认环节非常重要,有时候需要开发出 demo,反复测试多次。

9. 页面定稿、开发

事实上页面开发阶段并不是到了这一步才进行,这里说的页面开发仅指前端样式的实现,实际上后台数据准备工作在定义好分析指标后就已经开始进行了,而我们当前的工作是把数据接入到前端,然后用设计的样式呈现出来。

切图与标注

由于大屏实际就是一个 web 页面,所以开发阶段的切图与标注是少不了的。

切图:哪些元素需要切图,怎么切?

一般开发用代码写不出的样式或动效,都需要设计师切图作支持:比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。

标注:Web页面用什么插件做标注这个大家都很熟悉,我就不多说了。需要注意的是,如果大屏页面需要在不同比例的终端展示,那么此时的标注与开发可以使用 rem 作为基本单位来实现,这样实现的大屏页面在后期会有更好的扩展性与适应性。

10. 整体细节调优与测试

这部分是指页面开发完成后,将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。

视觉方面的测试(有点像 APP 的 UI走查):关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。

性能与数据方面的测试:图形图表动画是否流畅、数据加载、刷新有无异常;页面长时间展示是否存在崩溃、卡死等情况;后台控制系统能否正常切换前端页面显示。

大屏设计的注意事项

1. 字体使用

字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

如果页面是云端部署,需要嵌入字体包时,我们可以使用 FontCreator 这类的软件把那些用不到的字符从字体包中删掉,然后重新打包上传,减小字体包大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。(一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字)

2. 颜色搭配

色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色。

使用深色暗色背景:深色暗色背景可减少拼缝带来的不适感。由于背景面积大,使用暗色背景还能够减少屏幕色差对整体表现的影响;同时暗色背景更能聚焦视觉,也方便突出内容,做出一些流光、粒子等酷炫的效果。

渐变色慎重使用:大屏普遍色域有偏差,显示偏色,因而使用渐变色需要根据大屏反馈确定是否调整,纯色最佳。

3. 页面布局

主次分明、条理清晰、注意留白,合理利用大屏上各个小的显示单元,并尽量避免关键数据被拼缝分割。

Q&A

1. 设计稿投到大屏上显示效果不佳怎么办?

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下,我们应该在设计开始前,就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品,然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差,这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现,如果不可以,那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面,样图沟通环节及时测试也很重要。

2. 大屏设计定稿后,切图切几倍图?

由于是将我们电脑屏幕投射到了大屏,大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率,正常切1倍图就可以了。

3. 1920*1080的设计稿,投到9000*4320的屏幕上,文字图片会虚么?

看情况,视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流一下。

大屏逻辑分辨率(设计稿尺寸)、显卡输出分辨率、视频矩阵切换器( DVI )支持分辨率、大屏实际物理分辨率。

一般后两个是没问题的,大屏跟矩阵切换器是由大屏厂商提供,一般刚好配套大屏。容易出问题的是显卡输出分辨率,我们电脑屏幕分辨率并不是最终显卡传递到 DVI 接口的分辨率,传递到 DVI 接口的分辨率是电脑显卡所能输出的最大分辨率(部分电脑可设置或自定义输出分辨率)。输出分辨率等于 DVI 支持分辨率时显示效果最佳。输出分辨率低于 DVI 支持分辨率,DVI 会将信号放大后传递到大屏,放大的过程中就有图像信息丢失,虽然此过程中有各种算法支持去保证图像尽可能清晰,但算法再好,跟真实图形还是有差距的。此外,多信号源投射效果优于单个信号源投射。对于现场直播数据大屏,一般至少有两个信号源,一个投屏,另一个也投屏但是处于备用状态。

离大屏的距离也影响观感,一般离得近,颗粒感明显,距离稍远,会显的较为清晰。

4. 设计稿完成开发后,发现在大屏上页面有被拉伸或者压缩的情况,怎么补救?

一般来讲,开发只需要对设计图做还原即可。但特殊情况下,比如显示器扩展不正确导致页面被拉伸或压缩,这时就需做处理:我们可以先得到被拉伸/压缩的比例,然后对整体视图做压缩/拉伸处理,再由其拉伸/压缩,这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外,了解被投电脑硬件特点,有的电脑可以通过自定义分辨率解决这部分问题。

5. 除自行开发可视化大屏外,还可以通过哪些第三方服务来快速实现?

阿里云 DataV、腾讯云图、百度 Sugar 等。

6. 数据可视化的图表样式可以在哪些地方找到参考?

图表部分的二个库是我们设计师可以打开浏览查看的,这里面所有的图表样式都是基于代码实现的,可以作为我们设计图表的参考,也可以让开发拿代码去用,或者在这些图表的基础上修改。

工具类的需要有一定的代码基础,里面同样有丰富的图表,所以跟开发的沟通也很重要,因为他们可能会了解多一些更新的前沿的图表形式,是我们设计师不知道的,所以彼此多沟通交流实在太重要了。

总结

数据可视化是一门庞大系统的科学,本文所有讨论仅针对大屏数据可视化这一特定领域,管中窥豹,如有遗漏或不足之处欢迎大家讨论交流。

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

 

设计太小气?试试从这五方面入手

用心设计

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

 

改稿绝对算得上是设计师的一项日常操作,这一点我们都深有体会,至于改稿的原因则五花八门,不是客户嫌弃太小气、没创意,就是上级嫌弃太土、太单薄等等。

如何解决设计太小气这个问题,主要是从以下五个方面入手:

  1. 构图要饱满有张力;
  2. 主题要大、要用大场景的图片;
  3. 使用强烈的大小对比和空间对比;
  4. 用仰视的角度;
  5. 采用逆光拍摄效果。

一、构图要饱满有张力

导致设计看起来小气的首要原因就是构图不饱满,也就是我们通常所说的没有张力,那么什么样的构图才是饱满有张力的呢?

1.要充分利用好版面的空间

下图是一则背景板海报设计,我们可以看到所有视觉元素都集中在版面的正中心,左右两边的空间完全没有被利用起来,所以看上去会比较小气。

对于这种情况,我们应该适当把图片元素往两边扩张,把版面的空间充分利用起来,使得图形部分的轮廓尽量与版面轮廓贴近。

调整后的构图变得更饱满、更大气了。

2.视觉主体至少占据版心的两个角

以常见的矩形版面为例,它的版心是一个四边形,有四个角,我们可以把这四个角理解成四个点,而版心就是通过这四个点的连线建立起来的,改变任何一个点的位置,版心的轮廓都会发生变化。

所以这四个点(角)也直接影响了版面的张力,元素覆盖的角越多张力就越大,元素覆盖低于版心两个角时会显得张力不足,因而难以大气起来。例如在下图的海报中,图片部分只覆盖到了左下角一个点,所以版面的张力不足。

为了加强版面的张力,我把图片的火焰部分进行了延伸,并同时覆盖了版心的三个角,所以调整后的效果比调整之前要大气很多。

二、大

既然要做大气的设计,那自然离不开“大”字,怎么个大法呢?一是主体元素要大,二是要用大的场景:

1.主体要大

如果觉得你做的设计太小气,很简单,直接把主体拉大,占据尽量多的版面空间,这是一种很粗暴但是很有效的方式,不过我们在拉大视觉元素的时候要注意,要保证元素本身的识别性和清晰度。

上图的主体比较小,所以显得比较小气。

把主体拉大后,该设计就变得大气了很多。

2.背景要用大景

你应该也发现了,凡是电影大片里肯定都会有很多大场景的镜头,比如城市、山川、大海、宇宙等等,这种镜头就很大气,因为它呈现的是一个非常大的空间。而如果特写一座房子、一张桌子、一朵花之类的小场景,则不会有这种感觉。

所以,如果使用大场景的图片来做设计,会比较容易做出气势。

三、制造强烈的对比

制造强烈的对比也是使设计更大气的有效方法,当然,也不是所有对比都行,效果比较显著的主要是大小对比和空间对比。

1.大小对比

当在版面中同时呈现一大一小两个对比很悬殊的元素,且这两个元素之间有紧密的联系或互动时,就会有很大气的感觉,很多科幻电影的海报设计就喜欢运用这种对比手法,比如《黑豹》和《大圣归来》的海报。

▲黑豹与踩在其脚下的豹头雕塑形成强烈的大小对比,而且二者都是豹,在视觉上有很强的关联。

▲猴子与其面前的巨龙形成非常强烈的大小对比,他们的关联在于二者正处于对峙的状态,霸气背漏有没有?

2.空间对比

如果画面中有强烈的空间对比也会显得很大气,比如说画面中的元素形成非常强的透视关系时,整个版面就会有一种纵深感,仿佛画面中的元素从视线的远端奔向我们的眼睛,这也是为什么发散式的构图会显得比较大气的原因。

四、用仰视的角度

从摄影作品中我们可以发现,采用平拍或者俯拍的角度拍出来的照片很难大气起来,而如果采用仰拍的角度,拍出来的照片则会大气很多,这是因为仰拍会把照片中的主体显得很高大,而我们自己很渺小。例如以下两张摄影作品,同是以埃菲尔铁塔为拍摄对象,但右图比左图要大气很多。

在设计中也是同样的道理,比如广告设计中常常用到立体字,仰视的效果会比俯视的效果更有气势。

▲俯视

▲仰视

五、采用逆光效果

这也是从摄影中发现的一个技巧,在同等条件下,逆光拍摄的效果要比顺光和侧光拍摄的效果更大气,原因是因为逆光拍摄有强烈的明暗对比,而且更能衬托出光的效果。

汽车广告就非常喜欢用逆光的效果,再加上仰视的拍摄角度,看起来会非常大气。不过为了使主角更清晰,我们通常需要给它的逆光面进行补光。

结语

最后总结一下,想做大气的设计,我们可以从以下五个方面入手:1.构图要饱满有张力;2.主题要大、要用大场景的图片;3.使用强烈的大小对比和空间对比;4.用仰视的角度;5.采用逆光拍摄效果。你都领悟了吗?

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

如何构建和验证设计风格?来看高手的实战案例!

资深UI设计者

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

 

文章目录

  1. 品牌定义
  2. 品牌映射(设计风格构建)
  3. 验证方案设计
  4. 空状态设计
  5. 验证实施及结果
  6. 遗留问题及后续关注

品牌定义

此前,除了产品名及代言人的形象露出外,产品层面尚未有过明确且体系化的品牌概念传达,因此无既有的概念或相关信息可遵循或参考,需从头理清。

1. 收集相关数据

如上所述,由于目前所处阶段,本次将以品牌自身单方面输出为主,因此我们访谈了相关业务负责人,探讨了产品当前在服务层面关注的方向以及力争为用户营造的体验。

同时,我们也想了解用户在使用安居客过程中所形成的总体印象并将其作为补充,因此,抓取了应用市场上安居客用户的正面反馈并从中提炼出高频词汇。

△ 用户评价词云图

2. 建立品牌心智地图(Mental Map)

通过绘制品牌心智地图,可将以上零散的信息分类及提炼,以此来组织并简化我们对产品品牌认知的心智结构,最终描绘出一幅由品牌内核所延展出的图景,其组成可以是品牌的各个方面,凝练了关于一个品牌之所以是一个品牌的构成。

△ 品牌心智地图

3. 提炼品牌精髓(Brand Mantra)

进一步的,从品牌心智地图中提炼出构成品牌的核心部分,分别从品牌功能(Brand Functions)、描述性修饰语(Descriptive Modifier)及情感性修饰语(Emotional Modifier)这三个维度去诠释。

品牌功能描述了产品或服务的性质,即品牌能够向用户提供的体验或益处的类型;描述性修饰语将进一步分类及明确品牌所传达出样貌之性质;情感性修饰语则解释了给用户带来的益处是什么。

对安居客而言,作为连接房地产行业中中介与需求端的平台,其本质上是一个信息服务平台;而由其对信息的深度、广度及有效性的努力以及对信息传达效率的追求可看出,其力求提供的是一种专业的信息服务;结合监管机制的建设力争为用户营造一种可靠、安心的体验。

△ 品牌精髓

小结

通过以上步骤,基本能够逐渐抽象出所要表达之物。可简单将上述过程的目的理解为定义视觉风格的方向。

△ 品牌概念抽象过程

品牌映射(设计风格构建)

明确所要表现的对象后,便可开始构建从内容到形式这一转化过程,最终构建出契合品牌的设计风格。

1. 文案风格构建

首先,尝试将品牌概念人格化,以作为后续推导过程中的灯塔,避免偏离航向。基于所提炼出的品牌精髓,演绎出以下设定:

  • 品牌性别:男性
  • 品牌角色:专家
  • 品牌性格:沉着、从容
  • 与用户的关系:安居客之于用户就像是一位专业、贴心的「私人顾问」,在用户遇到问题时沉着冷静地为其指点迷津,在用户产生疑惑时体贴入微地为其答疑解惑。

改版前文案风格分析

现有方案中可窥见以下特征:

△ 改版前文案风格

设计策略

为了贴合所设定的人格化形象,笔者制定了以下策略来调整文案写作风格:

  • 以书面语语体替代口语语体——遣词更丰富、正式。如:挑选房源(去看看房子);楼盘优惠活动供你参与(快去看看哪些房子有活动吧);查看楼盘详情(你还可以看看其他的哦~)。
  • 以平铺直叙的叙事风格替代行销口吻及俏皮语气。如:除了旁观,你也能发表自己的真知灼见(快参与你喜欢的话题发表评论吧!);可查看全部楼盘资讯(先看看其他人的动态~)。
  • 构建统一的句式结构。

此前,空状态经手不同设计师,且团队中尚无可遵从的写作风格指南,原有文案多少显得混杂零乱,而句式结构也是文案风格的构成要素,因此,笔者尝试构建统一的句式结构来满足现已发现的五十多处以及将来仍会不断产生的空状态在表达时的需求。

将重新设计的所有文案按句式结构的异同分类,从中可发现明显的规律,其对应的正是针对不同场景所使用的差异化策略,对于单独出现的句型,在分析其所属场景及所需引导策略后,判断其是必要句型还是可复用其他句型,最终形成了能够覆盖当前所有场景的五种句式结构,可指导未来同类场景的应用。

△ 句式结构构建过程

2. 视觉风格推导

风格构建

构建思路:以品牌精髓中的情感修饰语及描述性修饰语作为核心意象,同时解构对应表现形式的形态要素,其后分别以形态要素为对象将核心意象进行演绎。由于品牌精髓所处抽象层次较高,无法直接指向具体表达方式的选择——再以得到的具体情感意象作为标尺,寻求契合的表达方式。

色:将品牌精髓以颜色能够触发的感受为视角进行演绎,并根据颜色与人类心理感知的映射关系确定基本色相范围。

而对颜色具体的定义可在相同的表达诉求下进一步控制色彩要素来获取,如中性色的视觉表现在于色相上的控制,我们通过在色相上加入蓝来获取「高级感」;而由于安居客本身的品牌色即属绿色,因此我们直接选用;对于蓝色,考虑到实际应用时与绿色的搭配,在色相上融入绿色使两者呈现时能够相互融合。

△ 色的定义

形:在实际建构「形」的表达方式与情绪感受的映射关系时笔者发现,不同于颜色的千变万化,「形」在各维度的表达方式上更多的呈现一种二元对立的局面,这种情况下,不对品牌精髓进行演绎亦可对表达方式作出选择。

△ 形的定义

风格应用

色的应用:由空状态设计中对所有场景的意象设定,可对场景刻画中所需的元素进行如下分类:

  • 光影
  • 背景

针对插画,且处于空状态这种非正常场景,当前浓郁的品牌色不便直接使用,因此从明度层面对其进行处理,以得到适用的颜色。

△ 品牌色的处理

人作为场景构建中的组成部分,并非主体,且需要与物形成对比,因此使用白色。

△ 人的颜色应用

物在场景的构筑中承担了以下角色:

  • 与人的交互形成行为意象的传达;
  • 作为对环境的勾勒,构成对场景的交代或环境意象的传达。

对应到结构,分别为:

  • 作为主体的单一物件;
  • 构成近景与远景的不同物件。

对于前者,以中性色呈现其主体,主色点缀于次一级元素;而后者,远景作为主要场景元素施以中性色,近景混合应用主色。如此,既保证情绪色的露出,也丰富画面的细腻程度。

△ 物的颜色应用

光影

  • 背景光:在表达虚无的场景中,以线性渐变来表达此概念,此时混合应用两个主色来呈现调性。
  • 光照:对于自然光的呈现,另取暖色来表现光影,进一步增加质感。
  • 投影:阴影当使用中性色。

△ 光照的颜色应用

背景:白色或明亮的颜色更让人有安全感,且我们希望图示能融入界面中,因此设定为白色。

形的应用:元素形状、元素方向、主体占比、主体位置。

元素形状:避免锐利的切角,更多的用矩形及圆形这类相对更稳定的形状。

△ 元素形状定义

元素方向:以水平面或不同面构成的稳定体系为主,避免单独应用斜切面。

△ 元素方向定义

主体占比:占据画面中较大比例。

△ 主体占比定义

主体位置:置于画面中心偏下。

△ 主体位置定义

验证方案设计

1. 验证思路推导

我们的设计目标是形成契合品牌的视觉风格,若目标达成,用户应当能被具备明确视觉风格的界面激发相应感受,从而可得到如下测试过程:安排被试浏览相关界面,测量其情感感受。

那如何测量人的情感呢?

在对情感测量方法的搜寻中,笔者发现了心理测量(相对的是生理测量)中常用的语义差异量表(semantic differential scale),其由若干表达情感体验的词汇和量尺组成,由用户根据感受程度选取相应的等级,从而获取到情感信息。

最终,可得到如下验证思路:

△ 验证思路

2. 样本量设定

定性研究方法并非如定量研究方法那般天然具备确定样本量的统计技术,目前也尚无通用的技术,业界较为熟知的 Jakob Nielsen 所提出的「可用性研究只需测试5个用户」的说法,由于其限于可用性研究,「测试5个用户」的说法也只是总结性的论述,实际也需酌情判断,因此,为了确保获取足够的数据,笔者尝试寻求更和通用的解决方案,最终锁定在了市场研究公司 Research by Design 的 Donna Bonde 所提出的指南(Qualitative market research: When enough is enough)。

笔者认为其建设性在于:

  • 从不同研究方法的用途出发,论证了定性研究适用样本量的数量级迥异于定量研究的合理性;
  • 从实际的操作过程来探究样本量与所发现问题数量的关系;
  • 在上述论述范围内,再去尝试解构对样本量构成影响的因素,这使其能够根据具体情况进行相对的样本量估算;
  • 这种思路,使得其脱离了具体的使用场景——所使用的具体定性研究方法,单纯针对「样本量的设定」这一问题本身,这使其具备了相当的通用性。

因此,笔者参照其分析进行了对样本量的设定。先根据实际项目及团队情况,对相关因素进行赋值:

△ 样本量设定

再根据以下公式可得出适用于本项目的样本量:

3. 量表设计

量尺设计

量表类型:由于对评价对象提供了对立的形象,自然需要使用双级量尺,即要求被试从0点开始向两端方向发展的数值中做出评选。

标度数:设定标度数时需平衡两点,足够精细,充分满足被试表达的需求;控制数量,避免选项太过琐碎。

常用的标度数中,七点评分量表相比五点评分量表能够得到更准确的结果,而11点量表所能收集到的数据虽然最接近正态分布,但对被试来说成本也会随之增加,增大疲劳效应,因此,笔者最终选择了七点标度:

△ 量尺标度数

修饰词:对于量尺的数字,需要通过形容词来赋予意义,否则被试很难进行判断;且修饰词需在意义上和相应数值对应,这似乎很难实现,幸而前人已对不同量尺形容词就其表示的程度水平进行过系统的评估,使得笔者能直接绕过这个问题。

笔者按照所用的标度数,选择了对应能产生等现间距的修饰词:

△ 量尺修饰词

测量对象的语义转化

基于输出的文案风格与视觉意象及其对应策略,可分别确定具体的测量对象,再以此设定能够显示其对立形象的形容词:

△ 语义转化过程

量表结构设计

为了避免语义启动造成被试评价时产生偏差,需将有关系的条目随机摆放,并将褒义词和贬义词分布在量表两端而不是互相集中在一边,以起到语义抑制效果,避免被试在作答前不经思考。

另外,在第一轮测试中,笔者发现不止一位被试在对某一条目评价时混淆了其描述对象,除了其个人认知水平外,某些条目在当前语境下所展现出的描述关系依然不够明确,因此笔者按照条目的描述对象对其进行了分类,并说明其描述对象。

△ 量表结构

空状态设计

关于空状态本身,相对于本文所涉及的其他内容,其作为范式更被设计师所熟识,但在设计策略及视觉表现上似乎又并非如想象中简单。

「空状态」之称乃立足于表现层之观察,其承载的实际是若干种场景,反馈「空」只是其中的一种也是最后一种手段,条件允许的情况下,应当首先考虑如何去引导用户。因本项目落地于空状态,上述其他设计策略不在此展开,下文将详述空状态的设计。

1. 表现空状态

空状态内容

空状态由两部分构成——反馈和引导。基于当前情境的反馈能让用户获悉所发生的事;在此基础之上,还需提供引导以帮助用户完成最终的任务。

反馈:反馈通常由图像与文案组成,其风格应契合品牌调性,其内容除了基本的反馈信息外也应更多地考虑如何引导用户。

引导:此处的引导指的就是最终根据实际情境提供的操作,如无可支持的功能,可以文案形式进行表达。

空状态结构类型

针对安居客产品中的场景,除了完整的空状态结构,对于模块化的页面,由于模块本身的高度有限,在数据为空时,只取描述文案作为反馈,并在样式上弱化按钮使其在当前结构下保持原有的视觉权重,以其为另一种空状态结构。

△ 空状态结构

视图结构类型

空状态本身的结构和布局应当一致,但对于平台型产品,伴随着业务复杂性的是页面结构的多样性,这使得空状态呈现于不同容器中,为达到一致的视觉效果在视觉输出环节就需要针对性地定义布局逻辑。

而上述所谓的一致效果即为空状态模块应当居中展示于所有容器中,但由于空状态模块的重心并非在其物理中心上,因此为达到视觉居中的效果,在将其物理居中的基础上还需在垂直方向上作相应调整。

完整视图:视图的高度随设备而变化,因此使用相对定位,布局逻辑即为将空状态模块相对于视图中心垂直上移固定距离。

△ 完整视图的布局逻辑

模块与列表:对于相近的模块,可统一其高度(无法通用的场景还需另外定义高度),此时可使用绝对定位,布局逻辑即为空状态模块相对容器顶部保持固定距离。

△ 模块布的局逻辑

对于列表,由于其高度不固定,在空状态时常规的处理方式是将空状态置于背景之上或 cell 之中,前者不适用于基于白色背景的空状态设计,而后者的形式与其实际层级关系不符,因此我们最终选择了添加 view 来实现效果,如此就需定义高度来满足此种场景中的所有情况,其布局逻辑也就与模块中所应用的相同。

2. 图示的设计策略

图示的设计策略核心在于其内容的表达即意象的设定,常规的以空对象为意象的做法,无更多信息传达,亦无助于信息传达,是一种徒增冗余的可视化;以情绪为意象的做法由于其抽象程度和表意当应用于所有空状态,这种重复容易让用户厌烦且无趣;而近来越来越多见的场景化表现形式,设计者对于意象的设定依旧未脱离于上述范畴,更有甚者,一股脑钻进表现形式中不可自拔,竟无明确意象的设定。

基于上述分析,笔者认为更合适的做法是:内容上表现所引导的行为(如有),形式上以场景的构筑间接表达意象。此作法更丰满地引导了行为,表达方式上也更具感染力。

根据场景笔者设定了三类意象:

  • 平台无内容:虚无
  • 用户无操作:行为
  • 异常情况:环境

对于「虚无」的概念,即以写实的方式在空间层面描绘出来,并让人置身其中,营造出一种孤寂的氛围。

△ 「虚无」的意象表达

对于行为及环境,笔者将抽象的概念具象化,以其为意象。以「用户未曾对相关对象发表评论」为例,对事物进行主观或客观的阐述是一种抽象的概念,难以直接可视化,因此笔者将视角落在了行为的表达或实施形式上,从中选择了「书写」这一动作作为意象,同时在构建场景时,打破人和物的比例关系并夸张处理,形成一种趣味性的观感,进一步触发用户的共情。

△ 「评论」的意象表达

其他场景示例:

△ 其他场景示例

验证实施及结果

定性类验证方法相对于埋点数据这类定量方法附带的优势是可在设计过程中帮助改进设计,因此,整个过程中我们根据测试结果和测试过程中遇到的问题迭代着设计方案以及测试流程本身。

第一轮测试中,被试被触发的情感感知与我们的目标方向相反,且还发现了超出我们预期的视觉可用性问题;文案方面,多组条目用户无法感知(本身为中性对象除外)。

△  第一轮测试轮廓图

具体分析如下:

△ 第一轮测试结果分析

经过对这些结果和反馈的分析后,我们着手调整视觉表现:进一步地分解插画中视觉表达构成的元素,并探究不同的处理手段与受众感受间的关系,以此摸索达成目标风格的设计策略。并在此基础上,调整对应的形容词词对,使其更的表达对应的情感感受。

△ 迭代前后方案对比

其后,我们选择了几个具有代表性的场景进行了应用便进行了第二轮测试,在得到了命中预期范围的测试结果后,再对其他页面进行了统一调整。

△ 第二轮测试轮廓图

在所有方案产出后,针对整体视觉和文案风格进行了第三轮测试,最终的结果基本都达到了预期,测试到此结束。

△  第三轮测试轮廓图

遗留问题及后续关注

1. 明确「品牌精髓」的定义及应用

在撰写此文的过程中,伴随着对品牌精髓产生了更深的理解,笔者对于描述性修饰语及情感性修饰语的定义及提炼方式产生了疑问——如「专业」一词作为描述性修饰语是否会显得宽泛?且由于品牌精髓作为后续加工过程的源头,决定了整个加工过程的顺利和准确,因此,对其的准确理解和应用显得尤为重要。

2. 进一步探索情感转换及其应用

在有形产品设计领域,早在上世纪八十年代初便开始关注人的感性需求及意象与产品设计的形态要素间的关系,并形成了体系化的理论——感性工学,并从日本汽车行业的应用渗透到了日本各个产品设计领域,进而逐渐传播到西方国家及中国等国家。但在「用户体验设计」行业,尚停留在对「情感化设计」一词朗朗上口却又浑然无知的阶段。

而目前业界所「熟知」的 Donad. A. Norman 教授提出的三层次理论——亦是情感化设计领域除感性工学理论外另一个被公认的理论体系,更接近于一种世界观,解决「是什么」的问题,而非方法论;解决「怎么办」的问题。这和 Jesse Jame Garrett 提出的「用户体验要素」在软件产品设计领域知识框架中的定位类似,因此,在实际应用于交互设计与界面设计时还需弥补中间的断层。

借此次空状态改版,笔者在品牌输出的过程中摸索着情绪感受与设计风格的映射关系,形成了初步的构建思路,且在关于感性工程的相关文献中得到了印证,但在风格应用层面,此次只是初作尝试,尚存在很大优化空间。未来,将以此为基础针对界面进行尝试,并在情感转换层面进行更深入的挖掘与探索。

3. 尝试建立视觉情感语义词库

在设计量表的过程中,笔者明显感受到为测量对象设定形容词词对的困难——准确把握测量对象与对应形象间的联想关系,甚至在实际测试过程中基于用户的测试结果和反馈,笔者持续迭代着问卷条目及对应形容词词对的选用。

而以笔者目前对语义差别量表的理解和应用,其作为「测量某一客体对受众的意义」的工具,对于视觉风格的构建将会是重要的设计验证手段。

基于此,有必要寻求并建立一套视觉情感语义词库,以保证量表设计的有效性。

4. 确认情感测试中建立基准线的必要性

在测试过程中,笔者明显觉察到不同被试对相同概念显著的理解差异,大致分为如下两种情形:

  • 认识不一样:如某被试对于文案是否有趣的判断标准为是否直白。
  • 锚定偏差:如某被试认为文案就应该是比较俏皮、小清新的,当他看到的方案没达到其预期时,便会认为其是沉闷的——实际上是中性的。

这直接影响到数据收集的准确性。

笔者当下的反应是应当对被试先建立基准线,从而能够对数据进行加权处理,但鉴于需要针对问卷条目设计对应的问题及素材,笔者选择了更敏捷的做法——把通过访谈所认定的存在明显偏差的结果作为异常值剔除出最后的统计。

因此,如后期将语义差别量表列入针对视觉风格构建的标准验证方法之中,为保证数据的准确性,有必要对是否加设「建立被试对相关概念理解及程度的基准线」这一环节进行研究和确认。

本文以项目为描述对象,因此,并未冗述所涉及到方法的更多细节(诸如其概念、优劣、使用原则、注意事项等),待时机成熟时我们会陆续输出相关方法及工具(如定性研究中样本量的设定、量表中量尺的设计、访谈中的注意事项、语义差别量表的设计和使用等)的使用指南,包括封装好的文档工具,望能抛砖引玉。

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


这些UI和UX趋势,在2019年最值得关注

资深UI设计者

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


当你的产品短时间内无法使用时,如断网、跨平台无法分享等等。用户可能会因而产生挫败感,产生焦虑不爽的负面情绪。如何安抚用户情绪?如何拉近用户和平台的距离?如何改善或提高用户体验呢?本期案例,就分享一些有趣的小彩蛋、微交互,让你灵感爆棚!

往期回顾:

  1. 每月更新!10个记忆深刻的产品设计神细节!(1)》
  2. 《每月更新!10个记忆深刻的产品设计神细节!(2)》

文章目录

  1. 我见过最赞的招聘启事,来自程序员的别样浪漫
  2. 断网环境下,Google浏览器页面的小恐龙可以打游戏哟
  3. 「亲戚计算器」?原来小米还有这么有趣的功能设计
  4. 揉成一团的废纸,会让你联想到「删除」这个动作么?
  5. 支付宝的小无奈
  6. 优优教程网首页里藏着的可爱表情,你发现了几个?
  7. 2233娘真是贴心的小姐姐(*╹▽╹*)
  8. 让人意想不到的团队展示hover效果
  9. 时间走着滴答滴,iPhone的时钟藏着自己的小秘密
  10. 有道词典也卖萌,一句有温度的文案会有怎样的力量?

我见过最赞的招聘启事,来自程序员的别样浪漫

如果不是互联网从业者,大概你永远都不会发现百度主页的代码控制台(console)里藏着那条最浪漫的招聘启事。因为只有拥有开发网页习惯的人,才会在浏览喜欢的网站时按下F12 调出网页代码查看。所以这条百度针对程序员的招聘被写进网站首页代码的console里,可谓是绝对精准的招聘广告投放了。

据说这个彩蛋的设计并非百度的独创而是 Google 先使用过的「小心机」,可是由于无从考证,所以小编并不能确定是哪家公司有才华的程序员小哥哥想出了这个妙计(知道的大神麻烦留言告知哦)。

但不得不承认的是,很多时候我们都对程序员有太多刻板印象的误解。那些看起来「木讷无趣」的程序员们认真起来,真的可能是最浪漫的人呢。

断网环境下,Google浏览器页面的小恐龙可以打游戏哟

Google Chrome 是一款由 Google开发的 Web浏览工具,大气的界面设计、良好的使用体验以及强大的插件扩展功能,使其受到大量用户的喜爱。在完善产品功能的同时,Google 的设计师们也不忘花费一些「小心思」让产品更加有趣味性:在浏览器出现错误或无网的情况下(想试试么?断开Wi-Fi或者拔下网线看看),我们会看到这只可爱的像素小恐龙。

小恐龙出现时是静止的,但只要你按下键盘的左右键,这只小恐龙就会跑起来,而操控上下键它就能躲避路上的障碍物。当出错页面变成可爱的小游戏,原本焦虑不爽的负面情绪好像也就没那么严重了。一旦网络恢复,浏览器会自动刷新到你所要浏览的页面。真的是超贴心的设计了。

「亲戚计算器」?原来小米还有这么有趣的功能设计

小米计算器内置「亲戚计算器」的功能,各种复杂的亲戚关系帮你一键解决。老婆弟弟的妻子应该怎样称呼呢?相信很多人都有过类似的对亲戚关系产生疑问的困扰。

梳理亲戚关系有时候真让人头大,小米手机就很贴心的在系统里自带了「亲戚计算器」。将日常的复杂关系都罗列了出来,真是符合中国特色的计算器设计呢~

揉成一团的废纸,会让你联想到「删除」这个动作么?

「作文纸条」App对于每日信息与文章的推送有着自己独特的设计逻辑,如果推送内容用户当天未读,系统会将推送内容自动移到「废纸篓」里。为了让用户在浏览「废纸篓」内容时,明确感知到被删内容与正常内容的差别,躺在「废纸篓」里的信息视觉上模拟了揉皱纸团的形象。

如同我们在现实生活里,会将写作时不满意的内容从笔记本中撕掉,并揉成纸团丢进垃圾桶的行为一般。将用户熟悉的真实生活里的行为状态,移植到虚拟的交互设计里,会使用户与产品的交互过程更形象生动。

支付宝的小无奈

偶然在支付宝的芝麻信用里发现满700分,就可以免押金租用一些数码产品了。觉得很不错想分享这个信息给朋友,就点了一下转发微信好友,结果发现微信不让分享支付宝的信息。

本来分享受限的挫败感让人心情很不好,但当看到支付宝很无奈的提示文案「微信又不让分享了,整个人都不好了」,不愉快的心情立马被逗乐了。相较之前微信分享失败的一串链接,这样幽默的微文案提示真的可爱多了呢~

优优教程网首页里藏着的可爱表情,你发现了几个?

当初在制作优优网首页的时候,为了不让 hover状态(鼠标悬浮)过于无趣,分别在「灵感频道」「教程排行榜 」「软件排行榜」的 hover状态里设计了不同的3个小表情,而且设计者大有来头,正是人见人爱、花见花开的美丫姐。

她机灵的调整了图标状态后,从后台数据来看,这里的点击确实停驻时间长了一些,相信让用户会心一笑的同时,也拉近了用户和平台的距离感。不妨在你的下一个案例里也试试哟~

2233娘真是贴心的小姐姐(*╹▽╹*)

登录网站或应用在输入密码时,无论周围环境如何,我们总会潜意识里产生一丝不安全感。B站对于这个问题的处理方式显得十分可爱,在用户登录账号输入密码时背景里的2233娘会出现双手捂眼的小动画。整个输入密码的操作其实与其他应用可能并无差别,但因为有了这个蒙眼动作的心理暗示作用,用户会感到自己的隐私受到保护与尊重从而产生安全感。

让人意想不到的团队展示hover效果

drygital设计工作室的网站有着个性又炫酷的视觉与交互效果。团队展示界面的 hover效果,就让人意想不到眼前一亮:当鼠标的光标移到单个成员的半身像时,原本正襟危坐的照片会变成另一张,展示该成员个性或喜好的搞怪照片。

原照片展示了团队成员在工作中严谨专业的一面,而 hover效果呈现的图片则展示了成员们私下生活里幽默有趣、个性鲜明的另一面。这样的设计不仅突出了团队成员的个人特色展示,利于团队的归属感与凝聚力提升,也展现了团队的开放包容与活力创新。

时间走着滴答滴,iPhone的时钟藏着自己的小秘密

大家都知道 iOS系统的时钟桌面图标会始终显示当前时间,但很少有人关注过时钟图标里秒针的走动方式。在常规状态下,时钟图标的秒针会呈现扫秒式地转动;但当桌面图标处于长按状态的晃动效果时,小时钟的秒针会立马变为跳秒式滴答滴答地走动起来。

据说这个隐蔽的小细节设计是想表达向传统时钟的运行模式致敬的意思。机械钟秒变石英钟,你 get到了 iPhone时钟的小秘密了么?

有道词典也卖萌,一句有温度的文案会有怎样的力量?

似信息崩溃,或加载缓慢的问题,在产品实际使用中实在在所难免,一旦出现,用户的好情绪一定会受到影响。在这种时刻,一句生动而有温度的文案就是可以安抚用户情绪、改善使用体验的利器法宝。


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

 

日历

链接

个人资料

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

存档