首页

字体用的好,感觉不会少!

资深UI设计者

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


在设计中,字体的样式往往起到辅助文案传递的作用,所以如何在不同的设计风格中用好字体尤为重要。字体如果用得好,在设计中常常会给读者所需要的感觉,这里我们例举几种常见的感觉:


目录

1.「注」入重量感

2.「空」出高级感

3.「圆」有亲近感

4.「装」出华丽感

5.「质」换画面感

6.「写」出文艺感

Image title

一.「注」入重量感

突出重量感是大多数设计师常用的技巧,在设计中,为了提高文案或者标题的视觉层级,很多设计师往往会从字体的重量感进行思考,给字体注入内容往往能加大字体视觉重量,字体的重量感也就是版面中的“存在感”,“存在感”一旦提高,视觉层级也伴随着提高。


一般我们在突出字体重量感的方法上常常会选择线条较粗的字体、加大描边或者设计成立体字来突出“重量”,甚至可以缩小字体间距,营造紧张的感觉,使文字更具“重量"。另外在颜色上,黑色物品相对于浅色物品在视觉上显得更重,这一点在字体上也同样适用的。

Image title

二.「空」出高级感

字体的高级感一般体现在品等产品的设计上,利用大量的留白,在字体的颜色上尽量选择近乎无彩色如灰色,做到简洁大方、少即是多。而在字体类型的选择上,衬线体往往比非衬线体更具有格调,宋体往往比黑体更加高雅,利用传统字体也能给读者一种信赖感。


看到这里也许有人会说:“从用户体验角度思考应该使用非衬线体,因为其更易读、字形更简洁。”而在《设计师要懂心理学》一书中表明研究发现:常规的衬线体和非衬线体两者在理解难易度、阅读速度和使用倾向并无差异。

Image title

三.「圆」有亲近感

字体所展示出的亲近感主要体现在于字体端角的圆滑上,先从生活常见的例子讲起,在人类的常识里尖锐的物品往往会给人冰冷、危险和难以靠近的感觉,而圆滑的东西往往让人有亲近感,更利于吸引读者接近。这里最形象的例子要数按钮和图标的演变,按钮和图标的设计从直角到圆角的演变,其中不乏也有以上原因。


在突出亲近感时,圆角类型的字体所表达的感觉如果还不够强烈,这里不妨可以选用较粗的线条字体再加上暖色系的颜色,这样亲近感就更加强烈了。

Image title

四.「装」出华丽感

一般文字是用于阅读,而为了博人眼球,设计师也慢慢让文字字体有了装饰,利用线条的不规则粗细来突出文字的“美”,从而体现出华丽感,华丽感较强的字体大多数用于女性品牌的产品,装饰性高的文字,不仅引人注目的效果,还能强调了产品的“贵”。要注意的是修饰性的文字不利于阅读,不适合大量文字,容易视觉疲劳。

Image title

五.「质」换画面感

材质感的字体往往用在游戏的设计上比较多,将武器或游戏场景等有质感的东西贴在字体上,间接展示游戏场景、风格等。因此,运用材质的字体往往更具有画面感,从而影响读者视觉对大脑的影响,产生了身临其境的感觉,于是在脑海中留下对产品认知。


质感的字体往往容易让人感觉到“力量”,这也和第一点注入内容说法一样。

Image title

六.「写」出文艺感

手写的字体,会让读者感觉到手的温暖与肤触的温柔,这里被利用到的应该算淘宝商家的感谢信了,利用牛皮纸加上手写字体,可谓是为了好评诚意满满。


手写的字体还常常与手绘贴图一起出现在手帐本,或可爱优雅、或呆萌粗线条;另外,你或许还能在文艺菜单上看到它,朴实无华却清晰温暖,文艺感十足。

Image title

后言 

没有最好的字体,只有合适的字体,字体的难度并不在于设计和选择上,而是在于你选择或设计的字体给读者的感觉是否符合产品所想表达的亦或是读者所需要的。


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

 

拨动情绪的内容设计

资深UI设计者

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

短视频产品成为年轻用户社交娱乐的主场景,QQ在短视频社交的耕耘过程中,打造了丰富的发表能力,让用户更方便的记录生活精彩瞬间,同时也更方便的与好友互动,今天我们对设计过程进行复盘,将过程难点与设计思路从能力建构、设计切入、设计亮点引入、设计亮点深挖简述供各位参考。

Image title



二 发表能力建构

————————

同质化竞争突围


发表能力构建方面从最轻的发表成本以及最多的发表回馈两个维度做横向的铺陈,建构了除了拍摄以外,轻量主观表达的文字视频,不受时空与题材影响发表动机的影集,勾引起共同参与及话题的游戏,最多社交参与感的问答等发表能力等四种发表方式。打造轻量发表成本的文字视频可以确保发表量足够,以解决发表量与观看量不对等的问题,在小游戏与问答等发表方式,除了可以营造社交场景以外,创新的玩法也能与竞品拉开差异,在众多的短视频产品中具有自身的特色。

Image title


然而单纯的发表能力差异容易被模仿,能够保持自身优势与特色的时间十分短暂,建立起与用户情感上的连接可以有效的加深用户对服务的认可以及归属感,举个例子,前段时间笔者至上海出差数日,意料之外的一份小礼物却促使我成为该酒店的常客,这证明了建立情感连接确实可以成为与同业同质化竞争时不错的突围点。


Image title



三 设计切入角度

————————

建立情感连接,是视频设计“双面性”的一面


参考诺曼的理论,情感化设计分为本能,行为,反思三个层面。在打造视频制作工具的过程中,满足本能的外观愉悦以及确保行为过程的顺畅性属于基本要求,可以参照过去设计工具的手法,保证架构流程界面反馈每一环节的使用效能和低理解成本,而反思的范畴则与内容相关。为制作视频内容而设计,需要将用户的经验,喜好,文化转化成特殊符号,以触及情感连结最重要的反思环节。


Image title


用户与产品接触的过程按时间展开分为初次接触、逐渐了解、熟悉依赖三个阶段,若在每个阶段都能与用户保持情感连接,必能逐步加深用户印象,达到竞争差异化的目的。下文两个案例演示我们如何在引入期和成长期选择合适触点,制定相应设计策略和方案,从而达到此目的。




四 设计亮点引入

————————

唤起情感,拉近与用户的距离


为了让用户更主动的发表相册视频,QQ团队在影集发表模块上规划了智能相册的能力,借助用户回忆塑造超级符号,把用户的亲身经历与产品功能建立联系,提高使用意愿。在影集的引导步骤中,寻找合宜的契机,把零散的照片按特定线索重新组织,经过精心包装以回忆墙的方式重新呈现给用户。

影集功能的重新包装:

Image title



4.1 场景搭建


QQ经授权后访问用户相册,沿时间和位置线索用聚类算法对照片归类,产生与特定场景关联的照片组,再用图像识别技术从照片组中精选特定n张合成视频,为后续情绪升级埋下基础。

Image title



4.2 意境传达


为视频搭配转场音乐是主要增色手段。

转场效果设计要以情绪传达为目的,过渡动画和快慢节奏的灵活搭配打造大片质感,叠加细节让画面生动不僵硬。

Image title


Image title


在配乐标准上,我们基于用户习惯推导,明晰场景+节奏的音乐选择维度。


Image title


转场和音乐的挑选需贴合场景特征。在“聚会”场景中,设计师选用翻转重组的效果传递欢快愉悦氛围,曝光和光晕细节可以模拟真实光影效果。“往年今日”则表现出安静氛围,沉浸的复古滤镜和低调的叠黑效果让情绪表达含蓄收敛,涟漪波动仿若时光倒流。


Image title


4.3 捕捉时机,宣传专属回忆


在信息架构层的设计使用卡片横滑的方式,一方面可以暗喻时光隧道,另一方面考虑到大卡片比其他尺寸的缩略图在陈列和交互行为上更利于突出视频的优势。

Image title


4.4 案例回顾


我们采用情感符号引导发表的策略,得到数据的支撑,影集发表总量和发表转化率均有明显提升。经过市场横向对比,QQ团队在对影集的功能规划和整体设计理念上占据了优势位置。



五 设计亮点深挖

————————

打造情感体验峰值,强化用户印象


在任何体验中,都应该重视体验过程中的情感峰值,如同丹尼尔卡曼说,体验产品时能够被记住的只有峰值与终值的体验,我们在智能相册的环节之中建立起与用户情感上的链结,而链结后的情感峰值,则选择在发表成本最高发表频率的文字视频中深挖,让体验情感的峰值在高频率的场景中发生获取最高的投入回馈。


5.1 过程颇折


文字视频上线后发现用户发表意愿未达预期,症结在于其过程缺少能激发用户主观意愿表达的情绪触发点。我们提出两个优化思路,

1 降低理解成本,体验对齐于常见动态发表界面。

2 支持自定义背景,用带场景暗示的背景烘托情绪氛围。对比实验后发现2既可增加文字视频的意境表达又不干扰基础操作,是为更佳方案。


文字视频的初期方案和优化方向:

Image title



5.2 策略制定


QQ团队基于对用户发表场景统计,确定以传达心情和高频发表时间点为线索,策略制定是考虑到既要与用户表达有耦合但不能具体有所指。

Image title




5.3 意境传达


背景模版设计有以下原则:

1 界限分明,背景效果不要干扰主体信息。

Image title


2 意象与认知相符,有情理之中意料之外的惊喜,引起用户好奇心。

Image title


3 表义避免太具象。抽象表达腾出更大想象空间,让用户创意不受缚于环境。

Image title


以下是全部模版效果展示。

Image title

Image title


5.4 案例回顾


经优化后文字视频的背景从纯视觉角度转变成带动用户情绪刺激发表的触发点,后续团队结合运营策略,在特殊节日或特殊事件前更新模版可以持续刺激拉升文字视频发表量,该策略的运用屡建奇效。




六 总结心得

————————

设计经验


产品体验路径中植入情感因素意义重大。在引入期唤起情感降低用户心理戒备,产生熟悉亲切感。接触期有效调动用户情绪制造情感峰值,加深印象。成熟期创造互动机会,让情感得到延伸寄托进而巩固市场地位。此过程环环相扣层层递进,在用户心理推波助澜。


Image title

好设计是能影响用户非理性,改变情绪最终影响他的行为。设计的高境界在于只影响不明说,用户不需要领会设计意图,但情绪已经被感染了,在情绪的作用下,按照设计者预定的轨迹,自然做出选择。


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

在这些大师身上,我找到了非凡创意诞生的原因

资深UI设计者

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

我们的文化中会将大师们捧上天,凸显他们和常人差别最大的那个部分。大师当然是有属于他们的秘诀的,可是他们的成功同样植根于他们生而为人的烟火气。从一个人的视角来解读大师,在崇敬的同时,我们也应当对自己有信心——他们已经替我们走出了一条,可供参考的道路。

创造力是我们每个人与生俱来的,我们天生就是创造者。人人都可以创造,而且大多数人都以不同方式进行着创造。毫无疑问,创造新事物时,我们是最快乐的。

不幸的是,许多人会找借口不去创造,比如:「我没有足够的创造力或天赋。」这是不对的。在重新审视简·奥斯汀(Jane Austin)、毕加索(Picasso)、爱迪生(Edison)、蒂凡尼(Tiffany)和丘吉尔(Churchill)等著名人物的经历之后,我意识到,创造力和我们常说的天赋,只是勇气和不懈努力的副产物。

每个人都是有创造力的。众生平等,人人皆可创造。个体性和独立性只是用来发掘和完善内心世界的。因此我们每个人都是有创造力的。

正如我在上文中提到的,勇气是与创造力和创新直接相关的。对此 Paul Johnson 赋予了最好的定义:

创意往往反映出巨大的勇气,尤其是当艺术家不向最终的敌人——年龄或衰老,低头的时候。

我开始探索,我想知道创造力是什么。为什么有些人能够通过他们的创造改变历史的进程?是什么引导他们创造?他们的工作背后有什么秘诀吗?为什么有的人名垂青史而另一些则不然?

最终我发现了一个残酷的事实——以创造为事业的人每天都在不知不觉中辛苦工作,而且前途未卜。正如约翰逊所写的,你必须能够战胜时间和任何可能出现的身体缺陷。比如贝多芬不得不和他的听觉缺陷作斗争;爱迪生失败了几千次才发明出最后的灯泡;瓦格纳生活贫困,经常向人要钱;艾米丽·狄金森从不顾及公众的态度,无论是鼓励或批评,始终独自一人写诗。

在我致力于研究不同性格的人的时候,最让我惊讶的是每个创作者总是在前人的基础上创作。没有人凭空创造出好作品,而这打破了我一直以来所持有的刻板印象。

所以让我们深入研读一下创造者们的经历,看看他们是如何工作的,让他们如此特别的秘密,就在其中。

毕加索:绘画第一,咖啡第二

「如果我没有足够的天赋,又有很多竞争对手,那么我将每天创作一幅画,直到让世人知道我是活着的最伟大的画家。」这无疑是毕加索踏上成为历史上最成功的艺术家的道路时,一直秉持的信条之一。

毕加索出生于西班牙的马拉加,仅有的绘画启蒙知识是由他的父亲传授的。至于其他方面,我们可以很容易地说毕加索是自学成才、自我推销,在他所居住城市的街道上接受教育的。从很小的时候起,他就一直密切关注着市场,因此他总能知道什么才是可以卖出去的。

不同于等待灵感的到来,找寻上帝赋予才华的人们,毕加索每天都在创作。他的工作原则是速度胜于准确和努力。他是我们所知道的最不安分、最具实验性的创造者之一。他做的每件事都必须尽快完成,不会对作品精雕细琢。

毕加索做过许多工作。除了绘画,他还做雕塑、面具。无论是在画布上、纸上,石头上,陶瓷上还是在金属上,他都是卓越的艺术大师。对他来说,没有任何物质障碍。他是一个绝对的实验主义者,每十年都会改变他的风格,对于颠覆从前的自己从不畏惧。

他还设计过海报、标志、广告、戏剧服装和服装。毕加索离世前留下了超过3万件作品,这是有来源的(catalogue raisonne – 1932-1978)。毕加索是一个有数量观念、强烈的职业道德和实验精神的人。

温斯顿·丘吉尔:终生写作

也许你不会想到这份名单上会出现这位政坛人物,但我这样做是有充分理由的。他是一位首相,二战后他在历史上赢得了一席之地,但他确实值得被列入名单,因为他也是一位画家和文字大师。

丘吉尔是如何开始写作的?父亲离世后,丘吉尔悲痛万分。他觉得丧失了自我,也失去了内心的平静。因此,他决定写一本完整的传记献给他的父亲。在那之后,他发现了自己对文字的热爱和激情。丘吉尔不知道什么是创造力,他只知道「努力工作」这几个字。

温斯顿日以继夜地工作。感谢上帝,他很好,只有在8小时睡眠不足的情况下才会感到疲倦。——丘吉尔的妻子 Clementine Churchill

很少有人知道丘吉尔一生中写作超过1000万字。这其中包括他的演讲稿、书籍和文章。这种写作量比任何作家写的都多。他从小就有写下所有他感兴趣或参与之事的习惯。

他不仅练就了写作技能,而且还从中赚钱。每次他去不同的国家,或者参与一场战争,他都会写相关的文章卖给报纸或期刊。他写了三本关于二战的书,共有约200万字,是关于那个时期覆盖范围最广、最有价值的资料之一。

语言是唯一不会消亡的东西。——温斯顿·丘吉尔

当他不写作、不娱乐、不与政治斗争时,他就画画。他发现画不仅可以作为爱好,而且可以成为面对困境时的避风港。因为画画的时候你要保持心无旁骛,这样便可以放松你的大脑。

他从不逃避艰苦的工作,相反,他竭尽全力地工作:议会、行政、地缘政治、写作、绘画、建造田园诗般的房屋和花园。丘吉尔自命不凡,他的创造力流淌在他的血液中。他希望自己所见的一切,都能亲自动手实现,这就是他有别于他那个时代的其他人的特质。

克里斯托巴尔·巴伦西亚加:不见天日地工作

在所有创意大师中,克里斯托巴尔·巴伦西亚加是最专注于创造美好事物的创造者。工作渗透了他生活的方方面面,他将自己全部的精力交付于工作。

作为著名品牌巴黎世家的创始人,他是怎么进入时尚圈的?三岁时他参加了一个缝纫班,他对此表现出极大的热情。在接下来的74年里,他的缝纫技术炉火纯青。在他的余生中,他每天都要做一件针线活以保持手的灵活度。他是当时唯一一个在服装设计上独当一面的设计师,他做过缝纫、剪裁、选料等一切与制衣相关的工作。他唯一不会做的事就是画画,需要助理代为完成。

他的工作量巨大,整日都待在工作室里。以至于人们一度认为「克里斯托巴尔·巴伦西亚加」是一个假名,也许并无其人。几乎没有人采访过他或是见过他,也几乎没有他的照片。他从不参加社交活动,除了和一两个老朋友相聚外,他很少出去吃饭。

这一切都使他得以专注于创作能永远流传的作品。他孜孜不倦地工作和创造。这就是为什么现在几乎没有设计师能够创造出像他在上世纪五六十年代那样的创作作品,这些作品正如同其他人所说的——那都是馆藏级的作品。

他工作非常努力。巴黎世家每个系列都有200-250个设计,所有这些都是他自己完成的,因为他几乎不信任任何助手。他甚至拒绝了年轻有为的纪梵希(Hubert de Givenchy)的帮助。

从他三岁到生命的最后几天,他每天都努力工作。在上世纪60年代最艰难的时期,他停止了工作,因为心脏病发作,大师最终离世而去。

蒂芙尼:玻璃之心

路易斯·康福特·蒂芙尼痴迷于用玻璃制作窗户和灯具,并以玻璃进行珠宝创作。他的父亲查尔斯·路易斯·蒂凡尼(Charles Lewis Tiffany)生于1812年,1837年在纽约开了一家商店,销售文具和精美的器皿。他似乎继承了他父亲的品味,把平凡与非凡融合在一起。

蒂芙尼是一位真正的创造者,他勇于尝试,乐于为自己设定不可能完成的任务。尽管他父亲是个商人,他早年还是选择了学习绘画。但从本质上讲,他也是组织者、领导者和商人,也是一个挥霍无度的人和收藏家。如果要给出一个定义,蒂芙尼是一位创造者和推动者,他的远见卓识和组织能力使这一切成为了可能。

在二十世纪初,他雇用了100多名玻璃行业的出色工人,鼓励他们试验自己的想法,并辅以化学方法,对这些想法进行进一步的研究和推动。

他利用他的珠宝工作室实验特殊的金属反应。这些金属与彩色玻璃结合在一起,形成了「宝石花瓶」。他一直在研究他在旅行或参观博物馆时挑选的古代玻璃碎片。他在寻找可以用于复刻它们的化学方法。

蒂凡尼对探索发现和实验有着一种无法言喻的渴望,这让他能够创作出如今每件价值超过100万美元的作品。他经常去不同的国家旅行,研究与玻璃有关的古代文化。他保存了旅途中的许多发现,参观博物馆都会留下详细的笔记。

重要的一点是,蒂芙尼喜欢与他人合作或从其他风格中获得灵感,但他从不抄袭。他写道:

神赐给我们的才干不是要我们模仿别人的才能,而是要我们运用自己的头脑和想象力。即使是在团队中工作,艺术家的个人风格也是通向真正美丽的道路。——Charles Lewis Tiffany

他还创造了一种表面粗糙的昂贵玻璃,之后他为其取名「熔岩」。「熔岩」的灵感来自他在维苏威火山附近发现的碎片。他对古代的研究发现,埋在灰烬中的瓷砖(如庞贝古城)经过了2000年的化学变化,产生了光泽。这个变化过程可以在工厂实现。不久,他卖的瓷砖比花瓶还多。

爱迪生:向艺术家借鉴才能

要成为一个创造者,就必须成为一个艺术家?大错特错。发明家和商人托马斯·阿尔瓦·爱迪生背后有1000多项专利。大多数发明家在现代社会发展中发挥了至关重要的作用。他们的灵感来自于解决他人需求的渴望,以及与艺术家合作。

他的灵感来源于给予人们闻所未闻的东西。例如,他发明第一台录音机的灵感来自伟大的歌手和乐器演奏家的声音。他想给他们更好的创作工具。

他在电力方面的贡献也是如此。他信任与其他创作者和艺术家的合作。他鼓励蒂芙尼将燃气灯换成电灯,这样生意会更好。后来他与蒂芙尼合作,设计了纽约第一家完全使用电灯照明的剧院,帮助许多舞者寻找新的可能性来发展自己的演艺事业。

天才是1%的灵感加上99%的汗水。——爱迪生

他的实验室看起来更像是画室,而不是科学家的工作室。有时他沉迷工作就会睡在地板上的衣服里。他的名言「天才是1%的灵感和99%的汗水」诠释了他的职业道德观。做一个创造者不是一句空话,而是一种生活方式。

我没有创造力,需要灵感?

有句话说,只有业余爱好者才需要别人给灵感,专业的创作者靠的是自己日复一日重复工作。我多么不希望这是真的,但别无他法。或者就像我的一个朋友说的:「如果你不利用各种信息,你就不可能保持灵感。」他所说的信息是指读书,看电影,听音乐,去画廊,和聪明有趣的人交谈,旅行和探索一个新的国家。这可以看作一种「消费」。一旦你「消费」了,你就必须创造并回馈世界。

创造者都是相似的吗?是,也不是。

在阅读了这些创造者的故事后,我们可以看到所有人都有一个共同点——努力工作。所有的创造者都有一个人生座右铭——不断创造。其他的部分只是他们的个性。

做一个创造者不是一个头衔,而是一种生活方式。这不是三天打鱼两天晒网的事,也不仅仅是一个爱好,这是你的生活。当然,他们能够坚持下去,也因为他们内心对于这件事情足够热爱。

我们不需要上帝般的灵感来创造非凡。真正的创造者总是在收集周遭各种各样的信息,无论是在自然中、在不同的国家、在书籍中、在电影中、在音乐中、在食物中,还是在与艺术家或其他像你这样的创造者的合作中。

同样值得注意的是,创作者在创作时通常都是以自我为中心的。他们不允许其他人越俎代庖,因为他们想确保他们的工作朝着自己认同的方向发展。而且,这是因为他们喜欢创造自己的生活,而不是让别人为他们创造生活。当然,在大多数现代环境中,在工作中以自我为中心是不现实的,也是不的。但每个人都有自己的方式。有些人是推动者,有些人是独裁者。

PS:当然还有更多伟大的创造者值得我们去写(无论男女)。这个名单仅代表个人观点。

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

页面跳转方式,如何设计更合理?

资深UI设计者

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

常见的页面跳转方式有直接跳转、左右跳转、上下跳转等,再设计时需要考虑好其中的关联性,给出最符合用户心理预期的过渡方式,从而做出最合适的设计。

页面跳转在APP中属于最常见,也是最基础的一个交互细节点。

我们常见的跳转方式:直接跳转、左右跳转、上下跳转、翻转、联动;其它酷炫的效果我们看过很多,但是现实中能做到的又有几个呢?

先讲一下:视觉顺序

首先我们看一下,我们的视觉顺序「阅读顺序」是:左→右,上→下。因此延伸出目前APP最常见的两种页面跳转方式:左右跳转,上下跳转。

直接跳转

最原始、最简单的跳转方式,web端常见,在APP中出现较少,标签切换常见,这个比较简单,没什么讲的。

常用于快速开发,Android中常用。

实现难度:无;

维护成本:无。

左右跳转

最常见的跳转方式。(ios原生效果)

实现难度:简单 ;

维护成本:低;

运用场景:夫级→子级→子子级,依次类推。

常用场景:

  1. 对应功能的展开:常以导航形式的存在,如美团首页的美食、电影、住店等分流入口。
  2. 对于内容的展开:如聊天列表>聊天窗;文章列表>到文章详情。
  3. 对于活动广告的展开:banner图广告、弹窗广告等,比较常见。

这里有个细节要注意,就是我们的返回键在左上角,也就养成了用户一种习惯,左上角的键,与点击之后的效果,往往就应该是页面从右侧退出的样子,与进入时反向的效果。

这也是为什么大部分APP不会把入口按钮放在左上角的原因。

那么左上角这个位置,除了给返回键当做固有的位置外。还常常用于抽屉式导航,因为抽屉式导航的方向,与返回时的移动方向是一致的。常见抽屉式导航APP如:滴滴打车、摩拜单车等。

上下跳转

相对于左右跳转,上下跳转就比较难理解了。

实现难度:简单 ;

维护成本:低。

这种跳转方式也很常见,但是大部分人不清楚什么时候用,这里我们简单分析下。

运用场景:

1. 对当前页面创建新的条目时;

2. 独立启动的一个子内容。(如小程序:微信/支付宝等)

比如我们在微信聊天页,发起一个聊天的时候:

还有我们新添加群人员时,新建笔记本时,新建地址时等。

我们用微信聊天页面在举例:点击+号离的内容时:图片、拍照、位置、红包、收藏等,都是采用下到上的方式呈现,因为这些创建都是对当前聊天窗口一次性产生内容。(大家可以去感受一下这些细节)

下面我们看下百度的设置>地址管理>添加地址左右>左右>上下

翻转

实现难度:中等;

维护成本:低;

运用场景:完全切换内容,换到一个全新的内容集合里。

常见的有平安好医生中间的按钮,一级大姨妈APP中间的商城。

联动性

实现难度:高 ;

维护成本:高;

运用场景:元素之间从上级到下级关联性强。

如APP store 每日推荐到介绍页。类似的还有Behance APP的作品展示。国内APP很少有这种联动效果,因为一旦页面结构改变,整个效果基本无法复用。

类似于这种强联动,我们会在很多概念设计稿中看到,但是在实际的APP是很少见到的。因为开发成本/维护成本都很高。

搜索页面打开

这里强调一下搜索页面。搜索页面的进入往往有两种形式。一直是icon做入口,另一种是搜索框做入口。

icon做入口:更像是上下级关系,常用左右跳转来实现。比如:抖音。

搜索框做入口:点击就给与获取光标的感知,所已做好做简单的联动过渡效果。比如:微信、云音乐。

其它方式

关于其它方式,基本上只有极个别的APP中可以看到。

其它的方式,要结合实际的情况来考究。一定要注意关联性。比如微信新出的浮动展开效果,因为元素要浮动,为了更加贴合所以有了收缩的效果。

结语

形式上其实就是上下左右内外。考虑好之间的关联性,给出最符合用户心理预期的过渡方式,就可以帮助我们找到最合适的设计。

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

移动端表单设计准则:酒店表单重构实践

资深UI设计者

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

表单作为平台与用户联系最为紧密的一环,也是影响商业交易成功与否的重要分水岭。良好的表单设计可以给用户提供流畅自然的交易体验,保证用户购物情绪的正向增长,而混乱无序的表单则引起用户的负面情绪,影响甚至阻碍用户交易的完成,降低用户的品牌好感度和信赖度。


那么在设计过程中,需要怎样规避风险,提升表单页面的产品体验呢?下面我们将结合实际案例,从七个方面介绍表单设计中的常见注意事项。当然,这些规则都是在表单设计中的一般准则,每条准则都有例外。


undefined

01  |  单列浏览

表单承载的主要功能是向用户清楚地传达信息,保持有秩序的单列表单形式更利于用户浏览动线,它能帮助用户识别并填写内容,而多列的表单形式则会破坏用户填写规律,影响效率。

02  |  竖向排列

在表单中有多个选项以供用户选择时,将每个选项以竖向的排列方式位于每个选项下方时,更利于用户阅读浏览的习惯。

undefined


03  |  操作一致

表单填写过程中我们应当避免在整流程中出现按钮样式、颜色的变化。需要用户确认的操作行为的一致能有效减少用户在行动时的困惑和犹豫,确保用户在表单填写过程中的流畅体验,从而实现最终商业上的交易成就。

undefined




undefined


04  |  标题不可取代

虽然通过使用占位符代替标题的方式扩充了表单的填写空间,减少了视觉噪音,但是这种做法并不利于用户的短期记忆。一旦用户触发输入,占位符消失,用户可能会陷入这里该填写什么的迷茫,必须删除所有输入内容后才能再次显示标题,显然,这是违背人性的。

undefined


05  |  输入域符合预期

输入域的长度与预期输入的内容成正比,确保输入字段长度符合用户心理预期,并能在表单中能完整呈现。

undefined


06  |  不隐藏基础帮助信息

作为一个购物流程中的信息确认和采集环节,需要用户对于购买的产品有明确的认知。因此在设计过程中对于用户填写表单有基础帮助的信息应该做强调或显示设计,避免出现因为隐藏帮助信息导致的客户投诉。

undefined



undefined

07   减少二次确认

基于OTA行业特性,出行表单业务对标电商购买表单业务需要填写的信息更为冗长,层级更为复杂,为了减少用户填写过程中的心理负担,降低填写难度,我们需要对不必要的信息进行删减或合并,为用户信息输入提供便利。

以注册环节为例,在Web设计时往往会有二次确认密码的环节,但在移动端这样的操作会增加用户填写的负担,因此大部分移动端界面上我们不建议对用户的密码信息进行二次确认,转而通过使用明文显示或者优化密码消失交互的方法来改善这一环节的体验。

undefined


08  |  *号的使用

沿用通用符号习惯,在表单设计中若是对业务必填的信息,我们往往采用 * 号的形式来帮助用户区分信息优先级。但当表单中必填信息多于非必填信息时,大量 * 号的应用反而会给用户认知增加负担,使得无法快速识别哪些是必须填写的,哪些是不必须填写的。因此在表单设计中,当必填项多于非必填项时,隐藏 * 号标记,转而通过暗提示标记非必填项的形式来帮助用户识别。

undefined



undefined

09   暗提示的应用

暗提示作为辅助用户填写表单的主要方式,在设计上,需要尽可能地减少视觉噪音,确保文案言简意赅,表现形式不干扰用户。因此,对比度过深或过浅,色彩过于突出的都不适合用于暗提示的视觉表现。

在交互上,暗提示也并不是一直存在的。当光标触发表单项时,暗提示保持显示,指导用户输入。而当用户输入字段后,暗提示内容隐藏,让用户专注于已填内容。

undefined


10  |  设置默认选项

在复杂表单中,对于如证件类型、手机区号、国籍等较为通用的选项,为用户提供默认选择的交互可以有效简化操作步骤,减轻用户填写表单的负担,更快地帮助用户完成表单内容的填写。

undefined


11  |  替代输入

对于表单填写过程中可以固化选择的信息,应让用户进行选择操作以代替手动输入,尽可能地让用户减少输入成本。

如:出游人信息采集时,提供添加常用出游人选项可以帮助减少重复填写的负担;证件类型采集时提供证件类型选项可以减少用户困惑,在已有的选项中快速选择;邮箱采集时自动联想显示Email网址可以辅助用户规范文本格式,快速完成表单填写。

undefined


12  |  键盘匹配

根据表单填写类型的不同,自动匹配键盘类型。如“中文输入”呼出中文键盘,“姓名(英文)”输入呼出锁定大写的英文键盘,“手机号码”输入呼出数字键盘……免去用户切换键盘操作的步骤。

同时根据填写步骤,合理的定义键盘右下角的功能键,帮助用户实现换行/完成的操作,省去用户收起点开键盘的重复动作和表单上下填写项的切换,让填写表单的过程更为顺畅,用户思考不被打断。


13  |  按钮层级

在用户面对多个按钮的场景选择时,我们应当帮助用户预先区分出主要行动和次要行动,通过视觉语言强调主要按钮,弱化次要按钮,引导用户进行选择。


14  |  二次确认

因移动端特性,用户在填写场景较为不稳定如吃饭途中、行驶途中等,当用户花费精力填写了部分表单信息后,为了防止用户误操作而丢失已填信息的场景,需要在此时进行二次操作确认,确认用户操作意图。当然,如果用户没有对表单进行任何编辑,这样的退出操作是不需要二次确认的。

undefined



undefined

15  |  多行文本

在复杂表单中,面对填写内容过长的同类表单,用户会在预览时产生输入压力。运用字号、颜色、间距等视觉手段将相似层级的信息进行逻辑分组,帮助用户更好地区分多行文本的信息层级,便于输入。

undefined


16  |  号码组合规律

对于一些常用的号码字段,可以采用线下通用的数字组合规律帮助用户阅读和记忆,如电话号码的组合规律为 3 4 4 ,银行卡号的组合规律为 4 4 4 4 3。空格在数字呈现处的应用虽然细微,但是在长数字的阅读场景中仍能给用户带来识别便利。

undefined



undefined

17  |  选项露出

在网页端表单设计中,用户在表单填写中需要对选项进行选择时,常用的交互形式是在选择器的下拉列表中进行选项的二次点击。而在移动端设计中,触发选择器后的二次点击会增加用户的填写成本。所以在设计时,当选项少于8时,在表单中直接显示所有可选项,当选项超出过多时则在列表浮层中进行选择。


18  |  减少页面跳转

在表单填写中我们期望用户保持专注,尽量避免产生引导用户离开当前页面的填写交互,这种交互跳转很容易打断用户固有的行为轨迹。因此运用浮层、弹窗等交互来完成辅助信息的采集是我们较为推崇的交互形式。undefined



undefined

19  |  关联标记

当用户提交表单信息后,如已填写的内容有偏差,需要明确的标记有问题的数据及错误原因,帮助用户找到问题并解决问题。杜绝报错信息描述模糊,信息不关联的报错信息引发用户困惑。

undefined


20  |  实时校验

在某些业务场景中,为了帮助用户在提交信息前校正他所填写的内容,避免大面积报错场景的出现。我们可以使用实时校验的方法,在用户输入完成后进行判断及结果反馈,如登陆注册流程的验证码校验就可以运用实时校验的报错方式。

当然需要注意的是,运用实时校验的表单需在用户明确离开此项输入状态时再进行结果反馈,而非在填写过程中进行实时校验,避免出现填写时持续报错的情况。

undefined


21   密码保护

在输入密码的表单中,部分平台会在密码输入时显示暗文字段以此保护用户隐私,而鉴于前述第七条准则,移动端的密码已简化至只输入一次,暗文的显示会让用户无法确认所输密码信息。因此在需要隐私保护的场景下,我们需要完善密码交互的呈现形式,当输入时,输入位短暂显示为明文,保持1秒或者保持到下一位密码输入后再变成暗文,这样的交互改善可以确保用户在输入中明确内容,也满足了其隐私需求。

undefined


22  |  提交反馈

在用户完成整个任务环节时,提供成功或失败的反馈能让用户在枯燥的表单填写后有更强烈的情感反馈。所以在设计时,我们需要提供正向的激励夸赞用户表单填写成功,在表单没有完成时鼓励用户修改内容,重新提交,不可以负面情绪责怪用户。

undefined




今年上半年,本着提升途牛产品调性,为内容传达提效的初衷,由途牛UED组织并发起了一次针对现有关键页面升级的项目,在架构升级全量推进初期,我们优先选取了酒店表单业务作为此次设计重构的首选试验点。

表单作为一个偏理性的产品,直接影响着用户决策到产品转化的数据,在此环节,更需要降低用户成本,维持产品决策热情以实现商业价值上的成功。在酒店表单业务改版过程中,除了应用上述七方面的设计准则帮助提升用户体验,我们也结合了酒店现有问题和产品特性进行了更为精细化的设计重构。




整合信息框架

体制让步

对用户来说,途牛是一个整体的产品,所有表单的基础体验应该是一致的。以往,基于企业平台的发展,酒店细分的国内酒店和国际酒店两个业务相对独立,虽然同样隶属于下单环节,但是业务迭代进程及侧重方向的不同导致表单前台呈现差异较大。

借助途牛整体关键页面升级的项目,在此次酒店业务重构初期,协同两个业务的产品、设计、研发我们共同整合资源,解决历史遗留体验问题,为国内、国际酒店表单业务进行整体体验的统一和提升助力。另一方面,UED也通过酒店业务的试点思路,将基础表单框架进行模块细分,逐步影响并推广至全站表单业务升级。

undefined


框架构建

回顾现有酒店表单业务的问题,主要体现在内容层级模糊,类型样式混乱上。这些随着每一次迭代需求增加而新增的表单项,只是基于业务类型进行了单模块的设计,而对于用户来说,差异化的表单项样式无形中增加了填写时信息获取的成本。

基于人体本身的生理构造,我们在获取文本信息时,并不会逐字阅读,往往采用“扫视”的方式识别段落轮廓从而获取信息,规律性的排列方式也会帮助持续这种“扫视”的节奏,提升信息转化效率。

因此在设计上我们遵循相似信息一致性的原则,简化重复冗余的视觉噪音,将每个单元表单项模型遵循“上类型+下内容”的形式帮助用户快速对所需填写的表单类型建立心理预期。在大量相同的填写区域,统一左侧内容标题对齐方式,并通过字色、字重等形式确保未触发时内容标题为主,暗提示为辅,填写后填写内容为主,内容标题为辅的视觉表达,从而在表单的不同阶段仍旧保证了用户对于主次信息的识别体验。

undefined


品牌信息传达

为了减弱表单填写页冰冷感,在框架信息整合的基础上,我们此次改版也将品牌解构,用色彩的形式融入表单页面设计,将品牌功能化,辅助产品以深化品牌用户心中形成立体感知。

当然品牌功能化的融入也需要有所限制,此次我们主要从氛围、控件、操作、提示这四个方面展开,在不影响表单主要信息呈现的基础上,遵循适度、适量两个原则。

undefined




内容层级排序


用户吸引

回顾整个购买流程,填写订单业务承担着维系用户在产品详情所产生的内容吸引到内容转化的责任,而如何在枯燥的酒店表单中维稳甚至加固用户的内容吸引?为此,我们参照了《Actionable Gamification》关于人性八大核心驱动力中的“拥有感&占有欲”和“失去&避免”这两条来帮助我们。

undefined

结合对用户使用场景的需求分析,我们将信息在用户心中的关注度进行了重新排序,首屏弱化了用户已经在详情页明确的酒店名称,转而对用户需在此环节明确的房型、入住时间、离店时间等内容进行了强化和整合,明确产品归属。同时为了加固用户的内容吸引,我们前置了酒店“超值价”、“可免费取消”等信息来解除用户对于产品价格和沉没成本的疑虑,从而正向地激励用户完成后续的表单填写。

undefined


细分模块

除了对首屏信息的排序重置外,对于需要用户填写的每个单元模块我们也做出了一些调整。

如取消险模块,此前为避免客诉,将所有需要用户确认和查看的信息都进行了高亮提示和行动引导。这些信息虽然是我们需要用户知道的,但并不一定是用户在填写时想要详细了解的,过多的信息干扰反而影响了有用信息识别,也降低了用户填写表单的效率。因此新版表单重构时我们将协议信息整合至末尾统一确认,同时对文字、icon进行视觉减负,统一弱化辅助信息呈现,转而强调用户需要确认的取消险金额和投保人模块。

undefined

从上图国际酒店改版前后的方案进行对比可见,每个细分模块都有着或多或少细节的调整,当然还有没有展现的辅助信息交互浮层框架的统一。这些信息呈现的形态与交互的逻辑也都遵循着前文“保持秩序、描述清晰、化繁为简、帮助用户、信息分组、减少跳转、及时反馈”这七大原则,每一个细节都可以展开来细细剖析,这里就不多加赘述了。




结语

蚍蜉亦可撼树,在产品升级的过程中,用户体验的提升往往需要依靠像表单这样一个个微小的业务作为突破点,从而裂变反哺至全局。此次酒店表单重构项目从产品角度来看,功能上并没有改变,而通过代入用户场景,用户感知,用户行为习惯等方面进行细节的体验升级。后续我们还将进行更加深入地探索与迭代,将体验升级持续扩散至其他业务,为每一位途牛用户带来更便捷、更自然的出行体验。

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

上万字干货!超全面的网页设计规范:文字篇

资深UI设计者

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

文字是界面设计中最基本的构成之一,如何定义网页设计中的文字系统?可大体分为三步:

  1. 系统全面地了解文字的基础知识、显示方式、影响因素及当前网页设计中适合的文字系统;
  2. 梳理出自己团队所有产品文字使用情况;
  3. 综合第1步、第2步总结出适合团队业务的文字系统。

字符屏幕显示原理

1. 字符

字符是指计算机中使用的字母、数字、标点符号等等。

计算机最初发明出来是用来解决数字计算问题的。

后来发现,计算机还可以做更多的事,例如文本处理。其实计算机挺笨的,它读到的所有字符都是由1和0组成的字符串,因为计算机电路只有两种状态,「开」和「闭」,对应「1」和「0」。计算机也只可以直接存储和处理二进制数字。

2. 二进制

「二进制」是数字世界里的基本规则。

下面这些不同格式的文件,在本质上都是一串由1和0组成的代码,要了解这些文件首先要了解二进制。人有十根手指头,但计算机电路只有「开」和「闭」两种状态,所以满十进一位的计数方式更适合人类计算,而满二进一的二进制更适合计算机。计算机只需要1和0这两个数字就可以传递一切信息。

△ MP4

△ MP3

△ JPG

△ TXT

△ AVI

以图像为例,我们用电脑或手机看到的图像都是在某个角落里存储着下面这样的一串数据。开头的16位翻译过来就是 BMP文件开始的标识。

BMP文件标识后面的数字就是图像的各项基本信息。

△ 图像的各项基本信息

△ 颜色深度

最开始的24位,都是1,像素显示为红、绿、蓝三种颜色,相加后显示为白色。

接下来的24位,前8位是1,后面都是0,像素显示为红色。

再后面24位的前16位都是1,最后8位为0,像素显示红、绿两色,相加后显示为黄色。

根据这样的规则整个55×55的格子铺满颜色就得到一张完整的图片。所以一个 BMP图像文件中的1和0就在逐个记录图像中每一个像素点的颜色。

△ 二进制图片生成方式

△ 色光三原色和颜料三原色区别

下面所有文件的显示都和图像显示例子一样,文件中的1和0按照人们事先设计好的规则排列好,只需要找到正确的打开方式按照特定的规则来解读这些数据,我们就可以获得其中的信息。我们怎么才能知道某一个文件的1和0究竟是按什么规则排列的?我们又要用怎样的方式来解读?这就用到了扩展名,在文件的名字后面加几个特定的字符,就可以帮助系统辨别出文件的类型,从而提示电脑去按照某种特定的规则来正确解读其中的信息。

△ MP4格式扩展名

△ MP3格式扩展名

△ JPG格式扩展名

△ TXT格式扩展名

△ AVI格式扩展名

更多其他文件拓展名:

3. 字符编码

为了在计算机上显示字符,必须将字符转换成二进制数字。所以就有了统一、标准字符转换规则,即字符编码。字符编码是给所有的汉字定一个的数字编号,并用1和0来表示这个数字编号。

文字的一个字符对应一个编码(码点),而编码对应字符集里的一个「字」,字符通过字符集与「字」相连。像图中所示Unicode、GB 2312、Shift_JIS 都是字符集,其主要作用是为每一个「字」分配一个编码。

△ 文本编码流程

字符集里的每一个编码对应的是一个「字」而不是「字形」,也就是一个「字」在不同的地区或标准中可能有不同的「字形」,但字符集中只能对其分配一个编码(除非相差过大,比如简化字),要显示其不同的「字形」要通过使用为不同地区或标准设计的字体来实现。

△ 字异形(左简体中文,右日文)

4. 编码发展史

ASCII

ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)出现在上个世纪60年代的美国,ASCII 一共定义了128个字符,包括英文字母 A-Z,a-z,0-9,一些标点符号和控制符号。ASCII 采用的编码模型是简单字符集,在英语系国家里 ASCII 标准很完美。但是世界上有好几千种语言,其他语言系的国家想使用计算机,ASCII 就远远不够了。所以编码进入了混乱的时代。

△ ASCII编码

混乱时代

计算机的一个字节是8位,可以表示256个字符。ASCII 使用了7位,所以人们决定把剩余的1位也利用起来。人们对于 ASCII 已规定好的128个字符没有异议,但是不同语系的人对于其他字符的需求不一样,所以对于剩下的128个字符的扩展千奇百怪。而且在亚洲语言系统中有更多的字符。于是就又产生了各种多字节表示一个字符的方法,每个语系都有自己特定的编码页(code pages),这就使整个局面更加混乱不堪。这时 Unicode 出现了。

Unicode

Unicode 就是给计算机中所有的字符各自分配一个代号。Unicode 可以认为是字符的编号,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,Unicode 字符集和编码方式解决了跨语言、跨平台的交流问题。但在 Unicode 里每一个字符都是用4个字节来编码,原本英文字母仅需1个字节编码,中文需2~3个字节编码即可,这对于存储或传输资源而言是很不划算的。

UTF-8

UTF-8 基于 Unicode 编码的一种节约字节的编码,是一种可变长度字符编码方式。在UTF-8编码中,英文字母是一个字节,中文(非生僻字)是2~3个字节。可以认为, UTF-8 是对 Unicode 的一种压缩算法。UTF-8 等编码方式有效的节约了存储空间和传输带宽,因而受到了极大的推广应用。并且 UTF-8 兼容 ASCII 字符集。

UTF:Unicode Transformation Format

5. 中文编码类型

△ 中文编码类型

文字基础知识

1. 文字

「文字」是信息交流的工具,可读性、易读性至关重要。在网页设计中文字使用需要考虑几个要素:首先考虑字体,其次是字重、字号、行高、字间距、行间距、段间距等。

△ 字体、字重

△ 字间距、字号、行高

△ 行间距、段间距

2. 字体

「字体」是文字的外在形式特征,不同的字体有不同的性格。

字体种类

综合中文、英文都适用的广义分类。

衬线、无衬线

△ 衬线和无衬线差异1

△ 衬线和无衬线差异2

字体 – 中文

字体构成:

△ 笔画

中宫,是指等分成九个小方格最中间的那一格。

△ 中宫

△ 中宫和字体关系

△ 中宫紧凑、中宫松散

间架结构,汉字种类众多,笔划不等,空间排布极为重要。字体的间架结构可分为两类:单体字、合体字。

△ 单体字 间架结构

△ 合体字 间架结构

汉字字形众多,有些字形会产生视觉大小变化,顶格、缩格、出格就是针对不同结构的字体笔画特征进行微调,让他们看起来更加均衡、等大、视觉更完整。

△ 调整前

△ 调整后

字形调整实例:

衬线、无衬线字形演变:

△ 衬线 字形演变

△ 无衬线 字形演变

字体对比:

微软雅黑、方正兰亭黑简体、思源黑体、苹方-简,笔画宽度均匀,横平竖直。同一字号,微软雅黑最粗,小字号时阅读会较为吃力。方正兰亭黑从微软雅黑派衍生出来,可以更好地适应其他应用场合。

黑体、华文黑体、冬青黑体笔画末端宽度不同。

字体 – 英文

「字谷」概念来自西文字母设计,字谷指字母中部分或完全封闭的空间,即字母当中留白部分。

英文的字体结构是由4条平行线组成,有时候是5条,但是一般大写线会忽略。「基线」在西文中是标准,单个字母的所有立脚点都是在这条线上(除了 g、j、p、y)。英文文字结构多种多样,4条平行线的位置也会发生改变。

升部:上缘线和主线之间的内容。

降部:下缘线和基线之间的内容。

字体对比:Helvetica Neue、Arial、DIN

Helvetica Neue:中性,无衬线,现代主义风格字体。字体末端严格保持横平竖直,性格严谨、保守,没有任何的修饰,适合不同分辨率的显示器。该字体是 Helvetica 字体的升级版本,拥有更多的字重,更易于不同场合的应用。字形则相对偏胖,笔画更清晰,而且小字号的情况下可读性也很高。

Arial:Arial 是一套随同多套微软应用软件所分发,无衬线。该字体比例及字重和 Helvetica 极相似,其实是 Monotype Grotesque 系列的衍变。在字体及字距上都做了一些细微的调整和变动,以增加它在电脑屏幕的不同分辨率的可读性。

DIN:字形瘦长,无衬线,适合显示比较长的数字,但是小字号的情况下识别度较低。DIN 字体在德国有着悠久历史,是交通标志、路牌、门牌和车牌的标准字体。虽然曾经是德国纳粹使用的字体,但是经过设计和重新升级。DIN 在杂志、海报以及其他各种设计领域都被广泛地使用。

Helvetica Neue、Arial、DIN 数字对比:

3. 字重

「字重」是同一种字体的不同字形粗细,即字体重量。字重的划分根据不同字体厂商各有不同,不同的字重称呼也可以不一样,常见的划分如下:

在排版中,一种字体会在标题、正文、说明注释等不同内容下使用,单一的字重不能很好适应排版需求,于是衍生出了同一个字体的不同字重。

4. 字号

「字号」是字体的高度,不同平台字号规范不同。

在界面设计中,文字字号决定了信息层次和权重。首先要设定基准字号(最小字号),然后可依据一定规律设定导航、标题等稍大字号。一般网页基准字号有12px、14px、16px等。

字号也受阅读距离影响,眼睛到屏幕距离40~70cm,为较适合的阅读距离。

Ant Design 定义的电脑显示器阅读距离(50 cm)从原先的12上升至14,以保证在多数常用显示器上的用户阅读效率最佳。

5. 行高

「行高」可以理解为一个包裹在字体外面的无形的盒子。字号和行高决定着一套字体系统的动态与秩序之美。

西文:西文基本行高是字号的1.2倍左右,字体有上伸部(ascender)和下延部(descender)可来创造行间空隙。

中文:中文因为字符密实且高度一致,所以一般行高需要更大,根据不同人群的特点(儿童、年轻人、老年人)以及使用环境,可达到1.5~2倍甚至更大。

Ant Design 受到5音阶以及自然律的启发定义了10个不同字号以及与之相对应的行高。

6. 字间距

「字间距」是指一组字母之间相互间隔的距离,受字偶距和字体影响。

字偶距:是指两个字母(或其他字符,比如数字,标点符号等)之间的空白。不同的字母有不同的外形,所以字体使用相等的字间距是不协调的。所以需要调整字偶距来提升可读性。

按字间距可分类为:比例字体(Proportional)和等宽字体(Monospaced)。

比例字体:根据字符外形特点设置不同字距的字体,这种字体外形协调,可读性好。

等宽字体:每个字符设置相同字距的字体,其优点是可以很好的控制排版对齐。

7. 行间距

行间距(line spacing / leading):行与行之间的距离,作为一段文本中的留白,行间距让字与字之间有了可呼吸的空间,行间距对文章的易读性有很大影响。

排版推荐使用行间距1.2~2倍。

如何设定行间距,如何规范行间距

行间距由行高决定,为了确保可读性增加行间距,就需要增加行高。举个例子:字号12,行高设定20,那么行间距=「(行高-字号)÷2」×2,除2又乘2,我就简单的简化成行间距 = 行高 – 字号,那么行间距就是20-12=8,并且可以将这个数值固定下来,重复使用。

注:至于为什么是20,因为最初一个字节用8个二进制位来表示,所以现在的很多网页设计中常用到8。12+8=20,参考 Ant Design,网上有很多设计师总结的行间距计算方法,对于一个数学不好的我来说,参考已有总结和经验得出的数值,固定这个数值重复使用,这样最简单。

8. 段间距

段间距(paragraphs spacing):段落与段落之间的距离,可保持页面节奏,与字体、行高相互关联。为保证文章易读性,正文段间距,可以简单地取一个空行(也就是一个行高),这是比较常规也比较合适的做法。举个例子:字号12,行高设定20,段间距 = 行高 + 行间距。

小结

要设置「有节奏感的文本内容」就要遵循这些规则:段间距大于行高,行高大于行间距,行间距大于字间距。

字体选用基础原则

1. 网页文字显示方式

网页设计内容一般都是通过电脑各种浏览器来承载显示的,浏览器显示字体是直接读取用户操作系统里的字体。

2. 字体选用原则

字体是界面设计中最基本的构成之一,科学的字体系统:始终保证信息具有优秀的易读可读性,提升用户的阅读体验及工作效率。

  • 原则一:字体优先使用各操作系统默认的字体。
  • 原则二:有版权、笔画严谨、清晰可读、经典。

3. 操作系统

下图数据来源:世界互联网市场份额统计网站 Net MarketShare。

△ 操作系统市场占有率 TOP10

各操作系统默认字体:

4. 浏览器

电脑浏览器直接读取用户操作系统里的字体,不同浏览器对文字的渲染方式不同,因此了解市场浏览器使用情况很有必要。

下图数据来源:世界互联网市场份额统计网站 Net MarketShare

5. 字体版权

除了操作系统默认字体,其次需要优先选择使用的就是已购版权字体,如果没有已购买的字体,可考虑一些免费字体,非免费字体使用时需谨慎。

△ 公司常购版权字体

文字规范

1. 字体规范

字体使用三原则

体系化:在同一个系统UI设计中先建立体系化的设计思路,对主、次、辅助、标题、展示等类别的字体做统一的规划,再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性,提高字体应用的性价比,减少不必要的样式浪费。

重复:重复设计中出现的一个或多个内容。任何事情都可以重复。字体、字重字号、颜色、一条线、各种形状(如圆形、正方形或三角形)等。字体使用最好不要超过3种,一般同一个系统UI设计内容的字体数量建议2种即可,中文一种、英文数字一种。且字体样式上也遵循重复原则,避免毫无意义的使用大量字号、颜色、字重、行高等。

韵律:在需要拉开差距的时候可以尝试选择对比大的字体字号,令字号之间产生一种微妙的韵律感。为保证良好的阅读体验,每行保持适当的字符数量。每行上拥有适当的字符数量是文本可读性的关键。如果每行文字太短,视线必须反复折回来,打破读者的节奏。如果一行文字太长,用户的眼睛将很难专注于文本。英文无特殊要求避免使用全大写字符,因为会大大延缓用户扫描和阅读的速度。

现有产品字体统计

字体规范

综合考虑不同操作系统选用最佳字体体验。

代码声明:

  • Font-family:Helvetica Neue, Helvetica, Arial, 「苹方-简」, 「Microsoft YaHei」, 「微软雅黑」, sans-serif。
  • 英文字体:首先查找Helvetica Neue(Mac),然后查找Helvetica(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);
  • 中文字体:选用平台默认中文字体 苹方-简(Mac),微软雅黑(Win)。
2. 字重规范

一般情况下会选用「一粗一细」两种字重。

粗体:在视觉面积上较重,笔画加粗,字腔(笔画间空间)小,突出显示,产生强调作用。常用于标题和标语。

细体:在视觉面积上较轻,笔画轻细,字腔(笔画间空间)大,结构疏朗清透,阅读时不会让读者产生压迫感。常用于正文和说明。

中文、英文推荐使用字重:

3. 字号规范

现有产品字号统计

字号规范

4. 行高规范

参考:Ant Design 受到5音阶以及自然规律启发定义了10个不同字号以及与之相对应的行高。

5. 字间距规范

使用比例字体,根据字符外形特点设置不同字距的字体,这种字体外形协调,可读性好。

6. 行间距规范

颜色规范

1. Ant Design 两大色彩体系

Ant Design 两大色彩体系:系统级、产品级。

系统级色彩体系

系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。

  • 基础色板:12个主色(薄暮/火山/日暮/金盏花/日出/青柠/极光绿/明青/拂晓蓝/极客蓝/酱紫/法式洋红)以及衍生色共120个颜色。
  • 中性色板:黑、白、灰,从白到黑共10个颜色。
  • 数据可视化色板:敬请期待。

产品级色彩体系

产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

  • 品牌色应用:品牌色取自基础色板的蓝色#1890FF,应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景。
  • 中性色:中性色主要应用在文字部分,此外背景、边框、分割线等场景中也非常常见。
  • 功能色:功能色代表着明确的信息及状态,如成功、出错、失败、提醒、链接等。
2. 系统级 中性色

中性色包含了黑、白、灰。在网页设计中被大量使用,合理的选择中性色能够令页面信息具备良好的主次关系,助力阅读体验。中性色板一共包含了从白到黑的10个颜色。

3. 产品级 中性色

Ant Design 的中性色主要应用在文字、背景、边框、分割线等场景中。产品中性色的定义需要考虑深色浅色背景的差异,同时结合 WCAG 2.0标准。中性色在落地的时候是按照「透明度」的方式实现。

VIP大数据用户体验部 的中性色也是主要应用在界面的文字、背景、边框、分割线等场景中。考虑到深浅色背景的差异,中性色根据设计需求在落地的时候可按照色值和透明度两种方式实现,两种方式优先使用色值方式,尽量避免两者混搭使用。

4. 产品级 功能色

功能色代表了明确的信息以及状态,比如成功、警告、失败、提醒、链接等。

功能色的选取需要遵守用户对色彩的基本认知。在一套产品体系下,功能色尽量保持一致,不要有过多的自定义干扰用户的认知体验。

文案

文案内容来源于 Ant Design,一文一字之间可研究琢磨的空间还很大。

分享一个感触很深的例子,里面有一个专业用语「阈yù值」和「阀fá值」,这两个字一开始我看了很久才看出来区别,查资料了解到,其实「阀fá值」在专业行业里是一个错别字,是一个错误的用词,其正确用法是「阈值」是所属行业认可通用词。「阈yù值」又叫临界值,是指一个效应能够产生的值或最高值。

所以精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,在使用和定义文案时要注意以下几点:

  • 从用户角度出发;
  • 表述一致;
  • 重要的信息放在显著位置;
  • 专业、精准、完整;
  • 精简、友好、正面。

在有限的空间内将重要的信息放在最前面,让用户第一眼看到最重要的内容。(或通过高亮、留白等方式突出重要信息)。

结语

因为硬件软件一直在变化,设计规范和内容也要定时更新,规范是为了在繁多复杂业务中寻求一种平衡,帮助各团队更的完成任务,有些内容适合强制规定,有些内容适合规范一个范围,有些内容适合制定一种规律方法……当出现特殊情况时需要重新审视和不断完善灵活使用。

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

 

为人设计,请说人话

资深UI设计者

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

UXRen

打造有价值产品的首要规则是,它应该对某些人有真正的使用价值。也就是说,一个真实的人(或许多个人)会因为你的工作而解决了某些问题或实现了某些需求。

这个道理是显而易见的,但是,如果你去听一听这些产品设计们的日常用语,就会发现,在日常生活中,我们不常这样说。

反而,在语言交流中,设计师经常会“走捷径”。有时会直接使用行业语言或专家术语来提高表达度,但大多数情况都是为了避免废话。

举例来讲:

  • 我们要如何增加用户对这种功能的使用?
  • 为什么这两方面看起来不够统一?
  • 这里的点击率这么低,可能我们太过强调了。
  • 我感觉这里干扰信息太多了,要怎么解决这个问题?
  • 这个设计需要更多“呼吸空间(留白)”。
  • 我们应该将这点设计地更简洁一些。
  • 这一指标需要提升,现在的曲线走向并不理想。

想象一下,当用户听这些话时,他们能相信我们的最终目的是为他们创造价值吗?

当然,我们在使用语言捷径时,其实是在把我们脑海中的各个点连接起来,这种基于对内容的理解,在脑海中将一个概念与另一个概念联系起来的思考方式——就像是火车在有序的系统中飞驰而过,直到停留在人们期待的站台上一样。

但在实际交流中,有可能出现两种完全预料不到的结果:

第一种情况是,当与一个认知和你不太一致的人交流时,你认为重要的事情,对方有可能完不理解为什么这样。

比如说,作为一个设计师,当我说“为什么这些东西不一致”的时候,我自己的逻辑是这样的:

不够一致=> 这些东西虽然看起来很像,但当点击的时候,可能有人会选A,也有人会选B=>这就会使用户困惑,并且影响他们从我们构建的内容中获得最大的价值。

其他精通设计语言的人,一般而言都会跟我一样的思考问题。比如,让东西“简洁”其实是指让它专注于最重要的点,以便人们能一眼就知道如何使用它。让界面“可以呼吸”则是指让人们在阅读或者浏览时能更轻松愉悦。

但如果你并没有建立这些认知连接,你可能会不解:一致性、简洁性和可呼吸空间为什么这么重要呢,这些价值观看起来是不是有点随意?而且这些疑惑有可能是对的,为了一致性而保持一致也许并没有必要。如果这世上没有人会对两个看起来相似但反应不同的事物感到困惑的话(假设开发成本投入不算很大的话),那么这不会是一个问题。

许多工程师和产品经理跟我讲过,关于“一致性”的讨论经常意见很难统一,但当我说“目标是让用户感觉没有困惑”时,争议就不存在了。

使用“语言捷径”的第二个意想不到的后果是,我们有可能会忽视真正的最终目标。你看待问题的方式和角度会更多地从公司出发而不是用户真正面临的问题。

举个例子,我们要如何提高这一功能的使用率?这可能并不是任何一个你的用户会关心的问题,在讨论这一问题的时候,你有可能会开始从公司角度思考解决方案,比如让功能更显眼,不断提醒用户这一功能的存在等。

但其实这些做法只有在强调的功能的确很重要的时候,才会起作用。但如果这一功能的使用率本来就低,那么更有可能说明这一功能对用户而言没那么重要。如果你没有真正以人为中心来思考问题,很难发现这一点。

归根结底,虽然语言只是一个小的方面,但我相信它是非常重要的。多关注一点在工作时使用的谈话方式,如果你是为人设计的,那么请用人们更熟悉的语言。

举例来讲:

  • 我们要如何增加用户对这个功能的使用?=> 是什么让这个功能对人们更有价值?
  • 为什么这两方面不够统一?=> 让我们确保,用户不会因为这两个看起来相似但有不一样功能的东西而感到困惑。
  • 点击率真的很低,可能是因为强调得不够。=> 人们可能会意识不到这个功能的存在,因为这实在太容易被忽略了。
  • 我们发现很多用户流失,我们该怎么办?=> 那些试用过我们产品的用户不会再回购,为什么会这样呢?
  • 这个设计需要更多的呼吸空间。=> 用户阅读浏览信息的体验应该更轻松、愉悦。
  • 我们应该将这点设计地更简洁一些。=> 用户应该能在第一眼就注意到最重要的信息,并知道他们应该做什么。不该用过多的选择给用户压力。
  • 这一指标需要提升,现在的曲线看起来并不理想。=> 我们的产品还没能让用户觉得足够有用,从而进一步回购,所以我们应该提升我们所提供的价值。
  • 蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


百度行业首发《2019.AI人机交互趋势研究报告》

资深UI设计者

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

人工智能已经成为新一轮科技革命和产业变革的核心驱动力,正在对世界经济、社会进步和人类生活产生极其深刻的影响。其中,普罗大众对人工智能感知最为深切的当属人机交互。语音交互、人脸识别等人工智能技术已经化为应用产品走进了我们的生活。近日,百度人工智能交互设计院发布了一份聚焦于未来3年内的AI人机交互趋势研究报告(以下简称“《报告》”)。


该报告是百度人工智能交互设计院基于过去一年多对AI领域前沿技术、产品和设计的深入研究和洞察,结合产业界和学术界的经验探析而来。AI赋能的人机交互革新了大众的生活形态,未来,AI加持的人机交互模式又会呈现出什么样的态势呢?


《报告》从“人机交互介质”、“交互对象”、“AI应用场景”、“人机关系”等方面总结了AI人机交互的八大趋势。


趋势一:语音交互技术进步,更趋向人类自然对话体验


研究公司Ovum预测称,到2021年,地球上的语音助手的数量会和人类一样多,人们会越来越倾向于向语音助手寻求情感上的帮助。在AI人机交互中,语音交互技术在用户终端上的覆盖最为广泛。


以智能音箱为例,有数据显示,2018年全球智能音箱市场同比增长200%。其中,中国智能音箱市场增速达到罕见的5370%。谷歌、亚马逊、苹果等全球巨头企业均加速了用语音交互技术开启大众智能生活的步伐。截止2018年12月31日,搭载百度对话式人工智能操作系统DuerOS的智能设备激活量也已超2亿。


目前,语音交互技术已经加速在智能家居、手机、车载、智能穿戴、机器人等行业的渗透和落地。《报告》指出,未来随着语音技术的不断完善,语音交互的自然度将进一步提升,并愈加趋向人类自然对话的体验。具体表现为:语音交互将从机械的单轮对话进阶到更流畅的多轮对话;合成语音更自然、真实,接近真人水平;语音交互具备听觉选择能力,提升多人对话体验;语音交互将支持多种方言,并针对细分群体进行差异化设计。



趋势二:人脸、手势等通道更多出现在产品中,多通道融合交互成为主流交互形式


媒介学家雷吉斯·德布雷(Régis Debray)曾提出:“技术能实现不同区域里不同文化的人之间的连接”。随着技术的发展,人与人之间的连接早已不成问题。当前,AI技术更是拓展了人与智能体交互的通道。除语音交互外,计算机视觉技术的发展已使得智能体实现了通过识别人脸、指纹、面部表情、肢体动作等人体信息,而更加快捷多元地与人类进行交互。但是不同的交互通道在有其独特优势和场景适用性外,也有一定的局限性。


《报告》认为,未来,人与智能体的交互将融合语音、人脸、手势、生理信号等多种方式,为人类打开更多的交互空间和应用场景。具体表现为:人脸检测及识别聚集更细维度的面部特征,拓展更多的交互空间和场景;空中手势交互将成为新热点;触控、语音、手势、人脸最有可能成为多通道融合的主流通道;生理信号、触觉、嗅觉等也将成为辅助通道融入多通道交互中。



趋势三:智能体开始拥有明确的人设


近期,明星“人设”崩塌已成大家茶余饭后的热门话题。但是你想过,智能体也将拥有明确的“人设”么?《报告》认为,未来,用户可以更加明显地感知到智能体鲜活的“人设”。


所谓智能体的“人设”是指,用户在与智能体的互动过程中,根据感知到的综合特征推断出一种具有一致性的角色形象,一般由性格(如外向、善良等)、关系(如助手、朋友等)和基本属性(如性别、年龄等)构成。《报告》指出,目前,智能体人设的设计和表达主要聚焦在语音(如音色、语调等)和语言层面(如表达方式),并且通常局限在部分场景、部分话术上,缺少一致性和全局感。


《报告》提出,未来,智能体人设将从语音、产品外观、虚拟形象等多维度进行设计,甚至聘用编剧设计具有统一形象特点的话术,利用混合现实(MR)、全息投影等技术将人设具象化,让用户在不同场景下均感受到智能体一致、明显的人设特征。换句话说,未来,智能体的人设会具有很明显的特征,但不会轻易崩塌。


此外,《报告》还认为,打造用户喜爱的人设也将成为企业在市场竞争中形成差异化、吸引更多用户的重要方式。



趋势四:智能体在被动交互外,开始出现主动交互行为


技术的发展虽然革新了我们的生活方式,但是长久以来,人机交互一直延续着人类“输入”,机器“反馈”的循环模式,人类始终是主动的,机器始终是被动的。


《报告》认为,人工智能赋予了机器情境感知和自主认知能力,使我们有机会构建机器主动服务于人的交互模型。智能体出现主动交互行为的具体表现为:主动交互越来越“贴心”;主动交互在“家”和“车”的场景下率先商用落地;主动交互将提升公共场景下人机协同的效率。



趋势五:智能体开始拥有情感判断及反馈智能


2014年在北美上映的动画片《超能陆战队》中的机器人大白,以对主人公关怀备至的暖萌形象收获了大批影迷的喜爱。观影后的每个人都希望自己能够拥有一台如大白一样忠心耿耿又温柔体贴的机器人。令人欣喜的是,具有情感判断和应对能力的智能体正逐渐成为现实。


过去20年,在人机交互中,机器基于表情、文本等方式的的情感识别能力已有很大的提升。目前市面上出现的如情感陪护机器人、智能音箱、智能汽车等已经初步具备一些情感识别能力,可以根据不同的场景、对象,进行适当的情感交互。


《报告》指出,未来,情感计算技术的提升及硬件升级将赋予智能体在“视”“听”等方面更强的情感识别能力;同时智能体对于人类思维理解、情景理解能力也将更加完善,情感交互能力将更智能、更体贴。



趋势六:AI对特定人群的关怀得到快速发展和应用


人机交互的发展为儿童、老人、残障人士等群体更便捷地利用机器获得服务,提供了充分可能。当前市面上已经出现大量针对儿童教育的AI产品。搭载DuerOS的小度智能音箱也针对以儿童为中心的家庭语音互动需求,特别开发了儿童语音识别引擎,并定制儿童语音播报音色及对话逻辑,陪伴儿童一起成长。在养老领域,为老人提供陪聊、提醒等陪护服务的智能产品也被AI企业提上了日程。此外,少数AI产品也开始专注残障、病患等更加细分的人群,如2018年11月,百度推出了AI眼底筛查一体机,帮助患者快速筛查眼底疾病,为基层医疗带去了极大的便利。


《报告》提出,未来,AI对人类的关怀将得到快速发展和应用,覆盖更加细分的人群和更深入的场景。为儿童,AI将从易于交互到提供心智陪伴的服务;为老人,AI将缩小他们与科技的鸿沟,助推他们开启品质生活;为感官残障人士,AI将帮助他们重获对世界的立体感知;为特殊疾病人群,AI将提供预测、诊断和康复服务。



趋势七:智能设备互联互通,多场景衔接


以BAT为首的互联网企业,在2018年纷纷调整组织架构,转向To B。巨头重提产业互联网战略成为当前市场新现象。此现象背后,正是AI、5G、云计算等新兴技术的发展与升级。2018年的政府工作报告,进一步强调了“产业升级的人工智能应用”。“产业化”和“应用化”成为未来几年人工智能的两大发展方向。


《报告》指出,随着AI技术的进一步成熟和落地,及其与大数据、IoT的结合,AI将从单品智能、独立场景到互联智能,场景融合进阶。智能设备将互联互通,场景将进一步融合,实现多场景衔接;VR/AR将促进线上和线下、虚拟和现实的联结,未来,VR会加速拓展到更多的产业和实体,AR中的现实与虚拟将从简单叠加到有机融合,实现用户可以源自自然意识进行人机互动。



趋势八:人机开始走向深度协同,信任构建成为首要突破点


2018年6月,百度研究院发布并开源“神经条件随机场”的AI算法。该算法拥有强大的肿瘤病理切片检测能力,可以大幅提升医生阅读病理切皮的效率和准确率。人机协同即,通过人工智能增强人类智能,让人工智能成为人类智能的自然延伸和扩展。


目前,人机协同已在工业领域初步实现,而随着智能体从工业生产领域向商业服务、社会服务和家居服务领域拓展,人机将走向深度协同。《报告》认为,人机深度协同可以最大化发挥双方优势,实现合作共赢。


而人们对AI的信任,是智能体全面进入人类工作和生活,实现真正人机协同的前提。即,信任构建成为了实现人机深度协同的首要突破点。与此同时,AI伦理道德将更加细化,成为所有从业者需遵守的行业准绳。AI行业的发展在带给大众便利生活之时,避免算法歧视、保护人类隐私、尊重人类价值等也变成了从业者们亟需重视的问题。


最后,《报告》指出,AI时代的人因工程是一个真正的系统工程。而每个人机交互行业的从业者都需要拥有AI思维。最重要的是,中国的人机交互设计和研究者们将首次和发达国家站在同一起跑线上,我们有机会去定义这些体验标准,而不再是追随或遵守。


AI时代大门缓缓开启,属于中国和中国企业引领世界前沿的新时机已到来。

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

觉得看国外作品没用?用实战案例帮你学会正确的审美姿势!

资深UI设计者

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

发好看的国外设计作品,总有人会评论你换成汉字试试。不过确实有很多人存在疑问:看国外的作品真的有用吗?今天这篇超全面的教程,教你一个正确观看优秀作品的姿势,保证能让你换一双看作品的眼睛。

之前听一位同学在公司看国外作品学习的时候,公司的一个老员工发现了,就过来语重心长地和他说,你看这些东西没用的,学不到东西,就是在浪费时间等等,类似这样的话说了一堆。听到这个话题的时候就特别的亲切,因为在开始接触设计的时候,和那位老员工的想法一样。但是随着对设计的理解越来越深,接触的项目多了以后,这种想法慢慢就淡化了。

其实新人对研究国外作品这件事存在误区是很正常的,毕竟应用的文字不一样,内容多数我们也看不懂,把时间花在这上面给人的第一感觉确实有点不合适,哪有直接去看国内的作品来得过瘾。我们暂时抛开作品的数量与质量不谈,来聊聊这个话题。

我们平时在工作中完成的作品,里面基本都会包含文字、图片或图形、色彩这几种基本元素,不管你做的是海报、logo还是画册都离不开它们,比如纯文字类型的海报、公告、条幅。

纯图片形式的灯箱、画册、展板、品大片。

纯图形的UI图标、布展装饰、logo徽章。

包括纯颜色的手机屏保、背景墙之类的设计,这些基本的设计元素,会在设计作品中单独出现。

而更多的设计作品都是这几种元素同时出现的结果,这些海报中,文字、图片、图形、色彩这几种元素都占全了。注意,这些海报用的都是中文,属于国内的海报对吧?也能够在这上面学到一些东西,那我们换几张国外的作品看看,有什么不一样的地方。

日本的、欧洲的等等都是优质的设计作品,我们可以来分析一下这些作品,风格、技法、表现形式暂时可以抛开。

构成他们的元素和国产海报有什么区别?都存在文字、图片、图形包括色彩,唯一的区别就是上面说的,不同的国家,使用的文字会不太一样。那么这种文字上的差异真的会影响到我们对这个作品的研究、欣赏吗?

答案很明显,不会的。了解一些构成知识的同学都知道,构成版面的基本元素就是点、线、面,而文字、图片、图形包括色彩,他们在版面中整体来看,本质上就是点线面的具象表现。那我们在欣赏这些作品的时候,完全可以把文字看成是点线面的存在,这样的话也就没有必要纠结他用的是哪个国家的文字了。

像这张国外的海报,我们把这里存在的视觉元素标注出来,他们本质上就是这些东西。

国内的也一样,如果你看到的是这些东西,还需要纠结这是哪个国家的作品吗?

版面中的所有视觉元素,都可以看成是点线面的存在。

来做一组实验,这张英文海报,我们把这里面的英文,替换成汉字。前后对比一下,海报的整体感觉,基本没有出现什么变化。

再换一组,感觉基本一致。

再来一组,这回我们把英文替换成日文。类似这个版面构成的形式,我们把文字替换成英文、汉字,变化也不会很多,依然很美观。我们研究、学习、欣赏优秀作品的时候,一定不能受到类似「看国外的设计没用」这类思维的束缚,不然的话你会错过很多的。

不光从构成的角度看这个问题是这样,其实从设计发展的角度来看,也能得出同样的结论。因为现代设计教育的起源来自德国的包豪斯,后来包豪斯的理念传到了美国,又通过美国传遍了整个世界。包括我们现在学习的平面设计体系,都是一脉相承的。从这个起源的角度来看,也不存在国内、国外那么大的差别。都是一个门派的,只要做的好,那看谁的都一样。说了这么多,应该能看出来,我们是鼓励大家去多看优秀作品的。那么坚持做这件事,又能得到什么呢?下面就来说一下,为什么要养成欣赏优秀作品的习惯?

欣赏优秀作品的习惯

先来看看这个习惯能给我们带来的好处有哪些。

1. 提升审美

长时间欣赏优秀的作品,会对我们个人的审美能力有质的提升,帮助我们开阔眼界。眼高手低虽然是个贬义词,不过这对于正在成长的我们来说是好事,最起码能让自己对自己的能力有一个比较清晰的认知,知道自己做的不够好,这样会有动力不断的鞭策自己学习新的东西,把专业做到更好。

2. 培养兴趣

如果我们对这个行业没兴趣的话,就算你再有设计天赋,也很难做好的。坚持看优秀的作品给我们提供持续的刺激,说不定哪幅作品就非常合你的胃口,勾起你的兴趣,让你花时间去研究。

3. 利用碎片化的时间学习

平时都很忙很累,再懒一点,就没什么完整的时间学习。这个时候如果能把碎片化的时间利用上,我们坐地铁、坐公交、午休、睡觉前,包括上厕所的时候都是可以通过欣赏这些优秀的作品提升自己的,这也是一个提升学习效率的习惯。

4. 为设计提供灵感和参照

这也是最重要的一点,不知道你有没有一接到项目,大脑就一片空白的感觉,是因为你干活干的太少的原因吗?不一定,有不少人每天不停的干活还这样。其实出现这种状况的主要原因就是看东西看的太少。很多好的形式我们见都没有见过,怎么可能有印象,没印象就更不可能把他们应用到我们平时的工作中了。

所以说,我们想有好的想法、无尽的灵感,必须通过看优秀作品这个成本低、见效快的方式来提升了,并且通过我们持续不断的积累,得到的东西会越来越多,这是一种可以不断提升自己的方式。

当然了,欣赏优秀作品也是有方法的,走马观花的看一大堆,最后能得到的可能只有审美的提升。就是感觉自己周围的人做的东西都是垃圾,轮到自己做,发现自己也很垃圾。那为了避免这个悲剧发生在你的身上,下面分享一些欣赏优秀作品的正确方法。

如何欣赏作品

我们欣赏作品的场景主要有两种,第一种是有目的、有针对性的去看;第二种是没有针对性的看。这两种场景要看的东西差不多,细节上会有一些差异,我们先来了解一下有针对性的。一般来说,有目的有针对性指的是我们接到了具体的项目,但是这个项目以前没有接触过,需要了解一下别人都是怎么做的,然后带着问题去寻找答案。

先从项目要求入手,就是看看你做的内容是关于什么的,比如你要做日本寿司海报,就去搜集这方面的作品。有些同学在搜索的时候很实在,要做关于寿司的海报就专门去找日本寿司的作品,这种方式的缺陷特别明显,如果你要做的这个项目品类能找到的优秀作品很多还好,不过多数情况下,优秀作品是不那么好找的。这个时候把思路打开,选择的余地就会大很多。

比如把日本寿司海报这个关键词缩减成日本料理海报,优秀作品的数量会成倍的增加。

或者你要做的是海报,那我们搜索的时候除了海报,还可以找日式的包装、画册。

网站、插画等等作品,都会给我们带来很多的思路。

数量的问题,这也是我们推荐看国外优秀作品的一个原因,光去找中文的作品,在一个小品类里,很难找到足够多的优秀作品,一般的东西又没有什么学习的价值,这时候加入国外的东西会让我们的选择余地更大、思路更广。我们在搜集作品的同时,连带关于项目的一些图片、文字材料都可以一起搜索,这样能帮助我们更深的理解这个项目,学到更多的知识。

其实学习这个行为不是非得上学、看书才能学,我们设计师在接触各种项目的时候,通过与客户沟通和查阅项目相关资料的过程也是在学习,而且我觉得这种学习方式比我们单纯的去上学读书更深刻、实用。学到的东西也是在工作中甚至生活中用得上。

在找到这些优秀作品以后,就可以尝试去寻找这些作品共同的规律。

比如文字,如果文字属于同一种题材的设计,就算是不同国家的作品,我们也会在里面找到一些共同的特征。比如这些关于食品的字体,都会表现出属于食物的那份圆润的特征,这就是一种规律。这些规律性的东西总结出来,就可以尝试应用到自己的作品中。这个是学习大的规律,在这个大规律的基础上,再去关注这里面的一些小的细节。想做好东西,稍小的细节也很重要。

再比如文字组的形式。文字的主要作用是传递信息,那么如何、美观的把文字表现出来就要靠文字组了。一款作品做的是否优秀,通过观察文字组的处理是否细致,很容易看出来。信息的层级关系需要文字组来表现,主标题、副标题、段落文字、时间、装饰性的文字等等,这些文字可不是随便扔到版面中就行了,它们都是通过设计师的处理,以文字组合的形式分布在版面的各个位置。

这里面每一个文字组合都是一个小的个体,比如很常见的日期的处理方式就有很多,像这张海报里日期文字组合的处理方式。

我们看到了觉得这个形式不错,就可以记下来。那这些处理方式我们见过了,遇到合适的项目,换一个字体,或者调整一下数字,就能应用到自己的项目中了,这些组合形式,你没看见、没有印象,自己拍脑袋是很难想出来的。

包括这种产品或图形的表现排列形式,在做画册、杂志、头图、详情页、海报、展板的时候经常会碰到。

自己排不好的话,就可以借鉴这些作品的形式和规律,再上手就轻松多了。如果你想做的是logo设计,也可以去观察优秀作品的细节,比如字体与图形的比例、文字与图形的间距是多少、文字与文字的间距如何控制,包括别人的创意点在哪,这些东西都是可以在别人的作品中学到的。

△ 《高手的平面课堂!解锁LOGO设计新技巧》

就像异形同构这篇文章,你看到了这类作品,就能回忆起这款 logo 使用的是异形同构中的边线同构这个方式设计的,这种方式有哪些特点?如何能设计出类似的作品?教程里都讲过了,这样又把之前学到东西巩固了一遍。

△ 《平面设计中,如何通过“抄袭”优秀的作品成为高手?》

包括你看过的作品,他们的网格是怎么划分的。使用的是什么样的字体、构图如何都可以作为我们思考学习的方向,关于这几点的详细内容,在之前的文章里很细致的讲过,没看过的同学可以去看看。

如果是没有针对性的看作品,和上面的思考路径是一致的,只不过是利用碎片化的时间来学习而已,更灵活一些,可以快速浏览,也可以观察细节。如果你有收藏整理这些材料的习惯会更好,拿出来就能用,收集整理的越多、越细致,以后工作起来越轻松。

案例演示

所谓的创意就是我们把不同的元素重新发散、打散、重组呈现的过程。能够保证有想法、思路的前提就是见识,要见过很多好东西,有了很深的印象以后才能凭借这些印象,学到的东西设计成新的、属于你自己的作品。下面给大家演示一遍,我们看多了优秀作品以后,再去做设计的时候会发生什么变化。

比如我们要用这些材料来设计一款网页头图。

看到这些材料,可能会想到以前在哪见过,类似这种左右放置的图配文形式。

产品价格的处理方式见过这样的。

文字的形式全部使用黑体和无衬线字体,很多作品都是这样处理的,放在一起很和谐。

还见过所有的文字组,都以左对齐的形式进行排列的作品。

只要有印象,我们在设计的过程中就会下意识的往这些方向上靠,设计出的作品也会接近前面的那些规则。

在这些规则影响的基础上,如果我们还见过衬线体搭配无衬线体的作品,图叠字的形式,也能做出接近的风格作品。

同样内容,不同的表现形式。你看过的优秀作品越多,选择的空间就越大。

我们再来看这个案例,一张艺术展的海报。

整体的骨架是这样的,这种骨架布局的方式来自于左边这个案例,类似的形式有很多。

主体文字组合的结构是因为见过类似的组合方式,在文字量近似的情况下,我们的文字组合也可以设计成类似的形式。

如果说我们设计的这个文字组合之间,距离稍远,也有很多的作品会使用线的分割来解决这个问题。

包括其他文字组合的布局方式,也是参照这种轴线式的排列方法。文字使用的是宋体搭配西文衬线体的方式,中文的宋体和西文的衬线体具有类似的笔画特征,基础文字的统一性能够得到保障。

将和主题相关的照片填充到划分好的网格中,这里面使用的照片是同一张照片的不同局部,这种对照片重复的处理方式也很常见,在给版面增加变化的同时,也会制造出一定的故事性,引发受众的联想。

一张海报从无到有的创作过程。

想设计出不错的作品,没有大量的积累,对优秀的作品没有印象是肯定行不通的。

总结

怎么样,是不是觉得多看看优秀的作品还是有用的?不管是国外的、国内的都一样能学到很多。类似我是做电商的,看印刷品的设计没用;我是做包装的,看版式的作品没用;我专门做商业项目的,看艺术类的项目没用;我们公司是做金融产品的,那看其他行业的东西都没用。遇到这种言论,我们可以冷静的思考一下,是真的没用,还是这个人,他不会用。

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

用这3个方法选配图,让你的设计好看又能打!

资深UI设计者

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

图片相较于纯文字具备更强的视觉性,所以选择合适的好图片就至关重要,下面为大家介绍三种思路。

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


日历

链接

个人资料

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

存档