UICN线上分享实录 | 携程UED吴佳敏

原创文章 分类: 教程 版权:
14716 210 163 35
更新于:2017-10-10
103.9
首页推荐

3月27日晚20:00,携程UED高级视觉经理吴佳敏momo在UI中国核心用户群为大家分享了她对视觉设计的一些经验。


此次线上分享,momo在核心用户群进行直播分享,且由UI中国Q群管理员在各个会员交流群同步转播。感谢momo的分享,听课的同学纷纷表示获益匪浅,同时也非常感谢此次参与转播的几位管理员(SAGM、Satchcin、吉庆、墨羽、蛋蛋等人)的支持。在分享前,我们通过活动话题帖收集了一些问题,momo也抽选了几个比较典型的问题进行解答。


以下为本次分享的文字实录,部分有修改:


一、贯穿整体设计的理念——层级与亲密性


在视觉设计中,设计师经常把一个理念丢掉:层级和亲密性。

事实上,层级和亲密性对于视觉设计来说至关重要。因为使用清晰的视觉层级手法去表现,会给用户带来明确的信息框架,能够通过视觉差异将信息分类。


打个比喻,我们所设计的某一个或一套界面,将它们拟人化后,发现它们互相都是有关系的。


第一种关系:血缘关系

血缘关系是什么?将信息拟人化,就是“爷爷 > 爸爸 > 儿子”这种关系。信息本身的内容是有一致属性,却又有点不同,比如信息提示。

信息提示可以分为:公告-提示-警示-禁止。

血缘关系里发现他们都是提示信息,但是层级不同,所以视觉的展现力度也会不同。

Image title

如上图,将不同的层级信息相应地使用不同的颜色来展现:公告-蓝色、提示-绿色、警示-橙色、禁止-红色。


第二种关系:上下级关系

上下级关系是什么?即“公司 > 部门 > 小组”这种关系。信息本身的内容是包含属性的。比如专题,会有个聚合页如同部门,landingpage如同小组。


第三种关系:邻里关系

邻里关系是什么?就是地理位置很近,但是又没啥关系的信息。比如在pc 平台上的一些首页界面中,第一屏以下的一些内容。如女装,食品,电器等这类频道入口。再深入一些发现,这些入口内部的信息包含着血缘关系和上下级关系。

当这些关系得到梳理了以后,层级关系和亲密性也非常清晰的梳理出来了。

根据格式塔(Gestalt)心理学:当对象离得太近的时候,人们的主观意识会认为它们是相关的。这个心理学可以帮助我们对信息内容的排布进行准确的设计。



如上图所示2个设计稿,或许大家在一些网站上看到过类似的设计展示。这2张设计稿,所表达的就是界面中的层级。看下面的那张图,同学们可能会疑惑,问这个层级和下方图的对比不同,下方图是:背景层-内容层-操作层-状态层。这是因为下方的示例图我运用的是Material Design,而谷歌理念基于的是安卓手机平台,所以它的一些状态和导航层因为硬件的不同而使层级不同。——安卓机上拥有物理返回按键。

Image title

关于层级,再看上方的设计稿(获得外观专利),这是一个运用卡片设计的设计稿,这里有2个理念,一个是box理念或者称为抽屉理念,这个理念在我的书里有解释过,另一个是卡片层级理念。 Box理念是将信息比喻成家里放衣服的五斗橱。五斗橱里每个抽屉对应的是家庭中不同成员的衣物。


当我拉开我自己的抽屉时,我知道里面都是属于我的东西,这就类似于卡片设计。点开每张卡片,卡片中的内容是隶属于这张卡片的。 卡片层级理念:是将卡片设计成2个景深度的卡片。有Z轴的理念。


二、互联网设计中的阅读舒适度-文字篇


互联网设计中的阅读舒适度从文字的角度可以分为5大维度,分别是:字体、字号、行长、间距、背景。这里的背景我们称为无彩色背景、仅以深浅之分。 字体可分为:衬线体和非衬线体。这个就不多说了,接触设计的同学们都清楚了解这两种形式的字体区别。但是这里有一点是在学校或者现在网络上的观点不太一致,或者说因为时代的变化,而产生变化的结论:在曾经印刷出版中,衬线体阅读识别度比非衬线体高的结论,这个结论发生了变化。 在现在分辨率越来越搞清的情况下,我们的字号使用更大了,在这个大趋势的情况下,衬线体的横向笔画就太弱了,导致看似笔画的缺失。所以使用非衬线体更有优势。


这是网上找的的一张图,可以看出我所说的这个方面,一般来说字号和字体是配合起来看的。太小的字号,会让阅读费力度增大。 行长和间距我们也需要结合起来看,太长的行长用户的阅读费力度会高。太小的间距也会使阅读费力度变大。在设计的时候,间距的距离也能说明亲密性关系。越大的间距说明亲密性越薄弱,越小的间距说明段落关系越紧密。 背景——这里的背景指的是浅色和深色,浅色的背景包容性更广,浅色本身就是扩张色。可以将更多的层级的设计展示在浅色背景上。


三、互联网设计中的阅读舒适度-色彩篇


哪条路更敢一个人走?


哪个宝宝更想救助他?


暖色更接近我们还是冷色更接近我们?

色彩是影响用户对界面第一印象的重要因素,色彩的应用对视觉层级的影响也能起到立竿见影的效果,总结起来人眼对色彩的关注度差别主要是以下两点:


(1)先暖色后冷色

色彩的不同色相,对人眼的刺激及产生的反映目前没有找到绝对的先后顺序,但是冷色类和暖色类色彩,是有明显的层次差别的,如下图,人眼一般会优先看到左侧的图片,这和我们人眼对不同波长的反映有一定关系。

从生理学上讲,人眼晶状体的调节,对于距离的变化是非常精密和灵敏的,我们能判断出物体离我们的远近,但是它有一定的限度,对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时,波长长的暖色如红、橙等色,在视网膜上形成内侧映像;波长短的冷色如蓝、紫色等,则在视网膜上形成外侧映像。因此,暖色好象在前进,冷色好象在后退。


(2)先高反差后低反差

除了冷暖色对眼睛的刺激不同,色彩的反差是最容易造成关注度差别的因素,在自然界动物为了生存,运用的保护色就是和反差相关。

Image title

再来看这个设计,头部的暖色拉近功能距离。下部分的冷色推远了距离,使层级拉的更开。就像第一个卡片有层级,其实背景也做了变化,好的设计有很多值得研究的内容。


本次分享大致是以上3个内容,更多的关于视觉效果设计的分享,如果感兴趣,可以看我写的书《视觉链:互联网产品的视觉设计理念与规范》。


四、问答互动


(注:1-4题为活动主题贴中收集,题5为会员群提问)


问题1.在快速迭代下怎样确保整体视觉与交互的一致性?怎样让设计师不仅仅是服务于视觉而参与到产品战略中?


我认为目前最主要的工作是确立理念,这个理念是可视觉可交互的。当理念一致的时候,那么在快速迭代下的整体设计就能确保一致了。理念和规范不同,这个在书里我也写到了一些理念,例如直线和浪线理念,抽屉与卡片理念,点线面理念,每一种理念都会有一种解释,但是又不像规范那样的限制设计师的设计,这即保持了一致性,又保证了设计师的可创意。

建立的理念会改变产品思路。将产品选择方式也进行了改变。比如在一些完成页的最后进行一些推广和推荐,就是设计师可以发挥的地方。它的设计能决定产品的二次粘性。


问题2.作为面试官的面试经验和心得


看到论坛里问到的问题,各位想必也能感受到设计师工作年限会遇到不同的问题。

我曾经在面试中遇到过这类应征者,带着移动硬盘来面试,打开文件夹后密密麻麻的设计文件呈现在我面前,作品质量层次不齐,在听过几个作品阐述后,我不得不打断他,要求在这些文件中挑选自己认为最好的3个作品向我阐述设计理念和思路。而面试官的面试时间是有规划的,从计划的30分钟,被迫延长至一两个小时,阐述的设计思路不明。并不是作品数量越多越好,而是取决于作品质量。而事实上在他们打开文件夹的一瞬间,我对他们的面试印象已经打了折扣,因为这是一类没有面试规划的应征者,更甚至于面试着互联网界面视觉设计师的岗位,却是希望从事互联网运营视觉设计工作的设计师。而有些设计师,根本不知道这里的区别在哪里。那么如何确立自己的互联网产品职业规划呢?


设计师对应聘岗位还是要有了解,不要打无准备的仗。将自己水平最高和稳定的作品归类和提炼,相似的不需要再给面试官看了,一定要说清设计思路。要知道,你是你自己的作品唯一的翻译官。如上所述,这样会给面试官一个非常良好的印象。设计师们还是要多看、多做、多磨、多记。


问题3.现在各种APP,在底部标签栏的地方一般都有四到五个icon,为什么有的APP会选择带icon+文字的叙述,有的会选择只要icon不要文字?

现如今安卓以及Material Design也越来越好,但是大多数软件都会选择采取和IOS差不多的设计理念和规范,是如何来确定这个度的呢?


我们先看icon的作用是什么,有些icon的隐喻非常能表现出来,配合文字后,记忆点非常强,老实说用户看那些标签栏频道的入口时,大多都是记位置的,这就是为什么淘宝,京东等电商网站在做一些节日皮肤的时候,敢把那些icon改成热点文案的一个依据。但是这些icon最好是有文字作为辅助解释的,因为识别icon的费力度还是很高的,这也是为什么有些会只保留文字,有些使用icon还会搭配文字。只保留文字有时候是icon隐喻太特别,或者功能型的app,文字识别效率是最高的。Icon也附有一些装饰性作用。而只用icon我觉得不可取,毕竟如今一个icon代表多种含义的太多了,会发生歧义。


关于material Design,或者IOS平台,这些只是理念,符合你公司或者设计的理念的可取处使用就好,不可取的不用。这个可以和公司战略政策相关,比如和google有推广合作,毕竟这是一个理念,并不是强制性规范。而是使用哪种,需要查看产品对应的用户使用平台的占比,还是遵循28法则。不要让小部分用户的体验去挑战大部分的用户体验。很有可能平台用户更多偏向于iOS理念,然而iOS10之后已经趋向于统一了。


问题4.momo老师能不能谈一下层级区分与视觉引导方面。


今天的分享就是着重于层级区分的,下一次分享我可以多聊一些视觉引导方面的维度,比如拉近三维距离,大小对比区分,引导性元素,时间轴引导的运用等。我的书里也对此进行了非常详细的进行了阐述。


问题5. 安卓的屏幕色差问题如何解决?(此题为会员群内提问)


这个我在给我们公司的国际部门正好也做了一个新的设计,因为我们面向的用户是外国人,所以他们用安卓机还蛮多的,这个时候其实我们需要评估,安卓机它的占比是比IOS的更多(确实就是国外用安卓会比较多一些)。


那么如何解决安卓的屏幕色差问题?我们没有办法去解决屏幕本身的色差。这里就需要:一方面设计师在进行开发还原度的时候,要和开发去看每一个机型,它的颜色,特别是灰度这个颜色怎么样去调节,针对一些常用机型,让开发手动的去调节一下。当然这个解决方法是建立在开发同学的人力资源足够的基础上,可以去这么做。并且如果有条件的话,我建议是对一些主要机型去进行一一的矫正。


第二方面是我们会可以运用一些中性色。因为安卓机,有的偏冷色有的偏暖色,所以在设计的时候尽量用色不要太偏色标,尽量用一些中性色或者极端偏冷色和极端偏暖色的这种色彩。


以上即为本次线上分享全部内容。接下来,你们还想听什么分享?

UI中国管理员-小U妹

我是UI中国管理员,也是大家的小秘书,叫我小U妹~

1003粉丝/311关注

你发现了彩蛋叫兽特攻队-队长UI中国团队成员编辑组
方正字库2017秋冬新品发布会设计大咖集结,为Wacom产品体验会打call

UI中国管理员-小U妹

UI中国管理员-小U妹

我是UI中国管理员,也是大家的小秘书,叫我小U妹~

你发现了彩蛋叫兽特攻队-队长UI中国团队成员编辑组

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN