首页

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

用心设计

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

 

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

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

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

一、构图要饱满有张力

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

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

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

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

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

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

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

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

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

二、大

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

1.主体要大

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

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

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

2.背景要用大景

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

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

三、制造强烈的对比

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

1.大小对比

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

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

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

2.空间对比

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

四、用仰视的角度

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

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

▲俯视

▲仰视

五、采用逆光效果

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

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

结语

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

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

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

涛涛

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

 

文章目录

  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年最值得关注

涛涛

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


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

往期回顾:

  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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

2019年UI和UX设计趋势来了!

鹤鹤

在UI行业里面,设计趋势是更新非常快的,它能够更好的指导我们的设计方向,包括一些设计手法,都在不断地发生变化。作为一个UI设计师,需要更多的了解设计趋势。所以今天MICU哥将与大家分享2019年UI和UX设计趋势,希望给大家带来一些帮助。

产品设计师必备的模态体验知识

涛涛

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


很多设计师根据直觉进行产品设计。虽然大部分情况下是没问题的,但是已经证明了的通用标准可以更好的帮助你从逻辑上构建有理有据的UI解决方案,而不是仅仅依赖于你的直觉。


本文我们将探讨UI设计中的模态通用标准,讨论为什么仅有两种类型的原因,并且分析App和网站在将信息体系结构和用户信息流转换为直观的用户界面是如何失败的,本文将使用“Purrrfect”这个产品来讲解。


两种基本屏幕类型:模态屏幕、非模态屏幕


基本每个可视化窗口几乎都属于这两类中的一个。为了理解模态与非模态的区别,我们首先要定义模态屏幕。


什么是“模态屏幕”?

模态屏幕示例模态屏幕示例

模态屏幕有不同的形状和大小:

全屏模态视图(左1)

弹出窗口(左2)

气泡弹窗(左3)

灯箱弹窗(左4)

快讯/通知

...


模态屏幕和非模态屏幕这两种类型看起来似乎很好理解,它们都从属于App的主窗口。但是有一个重要的区别:


模态窗口

创建一个禁用主窗口的模式,模态窗口作为前面的子窗口使其保持可见。用户必须先与模态窗口进行交互才能返回父级应用程序。

 —— 维基百科


大多数模态屏幕,特别是在桌面应用上可以轻松识别,因为它们覆盖主窗口并且可见:主窗口背景遮罩的弹出窗,弹出菜单和弹出框对话框,灯箱弹框,警告等...


但是移动设备上的屏幕空间有限,这也是移动设备上的许多模态屏幕占据整个屏幕的原因。它们不再保持底层主窗口可见,所以很难将它与非模态屏幕区分开来:


Image title

iOS示例:移动设备上的模态屏幕


两者的主要区别在于屏幕的交互方式不同。虽然非模态屏幕允许用户简单地返回到父级屏幕,但是模态屏幕要求用户在返回主窗口之前完成操作(示例中为“保存”)或取消当前操作。


非模态屏幕最明显可视信息便是导航栏(示例中为标签栏)。即使在子级页面,非模态屏幕也允许用户在主导航来回跳转。另外模态屏幕要求用户在再次使用主导航之前必须关闭窗口(示例中为“Save ”或“ Cancel ”)。


为什么要使用模态?

模态屏幕解决了一个简单的问题:用户容易分心,所以有时候必须让用户全神贯注的进行操作。单一的模态屏幕正是要求人集中在单一的任务上,然后再继续其他操作。


“模态通过阻止人们在完成任务或解除消息或视图之前做其他事情来创造焦点” 

—— Apple


什么时候应该使用模态?

模态屏幕的规则我们已经了然于胸,与非模态屏幕相比,它能达到的目的是什么,应该在什么样的情况下使用它呢?


试想一下,我们正在创造一个巧妙而新颖的App:“ Purrrfect ” , 一个小猫数据库,它允许用户上传,查看和评论可爱的猫咪GIF。

Image title

资料来源:https://giphy.com/gifs/tDgXAst2PhIYw


我们App(简化)用户流程如下图所示:用户打开App,进入几个可用选项卡之一(我们的小猫数据库),点击其中一只小猫(进入详细的单一小猫视图),然后点击评论部分(进入评论部分)。

Image title

Purrrfect用户流程


另外用户可以在每个阶段执行补充操作。例如他可以在小猫数据库页面中将另一只小猫添加到数据库中,又或者他可以在小猫详情页中编辑数据。


如何分辨模态与非模态,其实没有那么容易,这些只是我个人的经验总结:对自包含过程使用模态屏幕,对其他所有内容使用非模态屏幕。


“自包含过程”是指每个操作都有明确的起点和终点。此操作有明确的时间范围,将用户从一般用户流中移出,让他专注于操作,然后再将他带回到开始的位置。


“需要特定的用户任务,决策或确认的关键信息”

——Google


对于Purrrfect App来说,这意味着主要用户流不是模态的。但是特殊的限时操作,如添加小猫,编辑小猫和撰写评论都是模态的。

Image title

在用户返回主流程之前,可以取消或保存完成所有模态操作。因此模态屏幕使用取消和保存按钮(或其他类似操作)而不是后退按钮。如果您的后退按钮在非模态屏幕中触发保存操作,您可能需要考虑使用取消和保存按钮切换到模态屏幕。如果在模态屏幕中有两个不同的操作,例如取消和保存,则无意义(因为它们会触发相同的操作)您可能希望切换到非模态视图。在这种情况下,主导航(例如标签栏)也应保持在屏幕上可见。


让我们回到我们改变游戏规则的App,Purrrfect界面如下图所示:

Image title

Purrrfect用户界面


在实际情况中,模态和非模态屏幕之间的区别通常没那么明显。例如图像全屏页面在大多数应用中都是模态的,尽管它不是进程或对话框。在一些特殊情况下,模态屏幕可能会承载页面的焦点。如果我们的App屏幕中间是没有其他操作(如编辑或评论)的情况,我们可能使用模态(全屏视图)。但由于它允许用户更深入地进入信息架构并执行各种附加操作(显示注释,编辑  ......),因此它不再具有明确的终点,因此它是主流程的一部分,所以应该选择非模态视图。


设计师有责任了解清楚App的流程,评估某个操作是否应该单独展示,从而决定来模态是否有意义。如有疑问,请记住Apple的指导方针:


尽量减少模态的使用。通常人们更喜欢以非线性的方式与应用交互。只有在获得某人注意、任务必须完成或放弃,以继续使用应用或保存重要数据时,才考虑创建一个模态来连接上下层级。

——  Apple


虽然不需要严格区分模态和非模态,界面也可以完美展现。但是模态的概念深深植根于Apple,Google,Microsoft等企业的界面生态系统中,且用户已经形成了相应的期望值。


如果Apple时不时的违反自己的规则,那么Apple将不会是Apple。例如,新版App Store在“今日”标签中打开亮点作为模态屏幕,但仍然允许用户在屏幕底部导航到下一步(没有明确的终点)。这样用户就可以在模态屏幕内部更深入地导航到其他流程。从推荐以外的其他内容打开相同的App屏幕会导致屏幕显示为非模态屏幕。这将保留标签栏和后退操作(再次单击当前标签栏图标以转到其主屏幕)。

Image title

不一致的Apple UI


左边的不一致可以通过....来解决

A:...在非模态子屏幕中打开高亮显示,并带有后退按钮并保留标签栏

B:...一旦用户点击模态屏幕内的链接并继续在App的父级别上的非模态子屏幕操作,从而关闭模态屏幕。


如何使用模态?

现在我们对何时使用模态有了一个大致的了解。那么“我们如何进行设计?”这是目前唯一的问题。下面是对模态屏幕检查后得到的列表:


顶部导航栏始终显示关闭按钮(或“取消”/“丢弃”/“最小化”/ ...)。当用户迷路时,可以轻松关闭叠加层并导航回App的顶层。


iOS和Android上的取消按钮通常位于导航栏的左上角。Android更喜欢关闭/“x”图标,而iOS则喜欢“取消”文本,但是图标按钮在ios也很常见,经常使用ios设备的应该都知道。


一般情况下,iOS和Android上的保存按钮都位于导航栏的右上角。但是这种放置规则在大屏幕设备上是不可取的。所以在屏幕底部固定浮动或页面末端的内嵌是我个人推荐的放置位置。

Image title


多步模态

一旦模态对话框由多个步骤或子级页面组成,事情就会变得更加复杂。一般情况下,继续按钮显示在右上角。第二步不会打开新的模态屏幕,而是保留在当前模态屏幕,并在现有模态上覆盖非模态子屏幕。


当在屏幕底部放置主要操作(“保存”,“应用”或“继续”)时,模态第二步的右上区域释放了可选取消按钮的空间。虽然会从左到右跳转,但这种方案仍然比不能在子屏幕上直接关闭更好一些。

Image title


动画

截止目前,iOS和Android在模态的使用方面非常相似。但是动画方面并不是这样的。


iOS:动画在iOS中高度标准化。

非模态屏幕从右侧进入框架。标签栏在屏幕底部保持不变。顶部的导航栏也保持不变,但其内容在自定义转换中淡入淡出。此动画还为用于返回的边缘滑动手势提供了基础。


另一方面模态屏幕从框架的底部滑入并覆盖整个界面(新的顶部导航栏)。他们不使用边缘滑动手势,如果没有保存之类的重要操作,自定义下拉关闭手势可能会好一些。


Android: Android上的动画更加的丰富多样。

Google建议在Material Design指南中使用“有意义的过渡” 。Android本身并不区分动画是否为模态或者非模态。


总结

大部分设计师根据直觉来进行产品设计。有时候直觉的确很重要。但是更重要的是要我们需要了解一些通用标准,以便于在特定的时候选择更好的适应或者改变。


在我看来模态的概念是当今应用设计中最被忽视的UX原则之一。跨平台和Web本地混合应用并不能很好的使用模态的指南和规范。但是模态的基本规则你应该了解,以便在必要的时候适应或者改变它。


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

 

转变被动型设计思维 建立的设计流程

涛涛

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

我是从十几人的小公司逐步跳槽到目前2千多人的中型公司的,朋友们吐槽的PM傻*、设计当牲口、需求临时乱改等等都经历过,即使现在偶尔也有该情况发生。


如果你真的非常想进阶高级UI设计师行列、想突破底层职业生涯的瓶颈,

请逐渐放弃“你看领导傻逼不懂设计,领导看你傻逼瞎JB设计”的态度。

Image title

对待工作的态度绝对是初中级UI设计师和高级UI设计师之间最大的区别

有朋友说因为他们是大牛,自带“牛逼设计”Buff,拿出来的东西别人第一印象就认可,领导没那么多事;自己在公司里就是个打杂UI,谁都能上来捅一刀,没可比性。


从大湿个人经历来看,任何环境的领导和工作本质上都一样,不可能说看人下菜碟:给高级UI设计师的需求就完美清晰、需求明确,到手就能丝滑流畅不便秘的出稿;

给初中级UI的需求就逻辑混乱、模糊不清,到手是一坨屎还是稀的,握都握不住。


————————我是分割线————————


造成UI设计师高低级别之分的原因一个是能力差距,另一个是处事态度。

首先除工作经验之外的能力都是需要初入职场就主动训练的,这和所处工作环境无关,它不会随着工作年限增长而有所提升,只能有意识的训练才行,包括沟通能力、分析能力、控场能力、分享能力等等。


工作初期不训练自身的主导能力,想着等有经验了、是大牛了的时候别人就认可那是不可能的;等到职业中后期你已经发育不起来了,只能沦为被动型美工,你们肯定也见过30多岁还是底层的平庸程序员、设计师。


初期能力确实有限但一定要敢说敢练,想法无论对错一定要表达出来,这是训练沟通和思考能力;最怕的就是做设计师的有话憋着不说,久而久之连敢想的能力都没了。


————————我是分割线————————


能力差距是高低之分的硬性条件,但成为行业精英的人还是只有那20%的人,处事态度就是决定成就的另一软性条件。

当然不要求步入职场没多久的人就有工作十多年的认知和觉悟,借用华强哥的话:“年轻人不气盛那还叫年轻人吗?”


只是希望能及早的开始矫正工作中的负面情绪,妄自菲薄绝对会造成恶性循环。

心里定位上就认为自己不行,别人当然也会觉得你不行,所以说自信也是搞设计的必备心理素质,实话来讲负面情绪在潜意识里确实会影响你的真实水平。


————————我是分割线————————


从进入行业职场开始,就要树立一个良好的行业价值观和从业态度。

很多从事UI设计的朋友,可能是学校相关专业、亦或培训转行、再或者就是为了赚钱,怎么进入这行无所谓,毕竟移动互联网爆发时给了所有人一块蛋糕;


但是进入后可能发现这一行不那么好做,丝毫不比之前从事行业轻松,更别提在学校的状态了,钱难赚事还多;不过既然从事这个行业,就要受得住压力,摆的正态度,有做到行业精英的觉悟和冲劲,因为你不做还有数十万的人要涌入这个行业等着做。


· Part01 设计流程解析 ·


大部分设计师可能受限于公司环境处于一种被动设计环节里,我们来看下标准设计流程中设计所处的位置:

Image title

与设计相关的环节几乎处于流程底部了,这也导致了一个现状:设计师不参与前期工作又或者名义上参与了前期工作,但没有从设计角度提出任何意见,只是被动接受。


虽然很多招聘需求上已经写明了:参与项目前期规划,参与产品需求拟定等等;

但说实话很多人把这个只当作企业招聘的套话模版,其实这是企业真的希望设计师去参与的事,因为这样可以帮助你更好的理解产品诉求,更有效的进行本职工作。


————————我是分割线————————


下图是大湿根据我目前的设计部日常工作总结的设计流程,也是我这里对设计师的基本能力要求;

它其实是一个闭环,不过这里为了容易说明我把它拆开拉直了:

Image title

从上图我们可以看到对UI设计师来说,它分为设计流程和设计职能两个方面;

那这里来看一下为什么使用这种设计流程可以减少“需求难、设计难”的尴尬,同时我们也来看一下作为UI设计师,在不同阶段的具体职能有哪些。


————————我是分割线————————


Image title

前期职能主要集中于产品阶段和交互阶段,目的是参与到产品整体设计中,从需求层和交互层理解产品功能,并以实际用户角度和设计师角度去考虑产品是否合理。

这里只是给各位一个大纲,具体的交互可用性验证都会在后期内容中详细解读。


————————我是分割线————————


Image title

中期职能就是所有设计师的本职工作阶段,大湿这个系列的文章内容多数集中于这个阶段;主要是视觉设计层面的各类设计方法论如何应用于实际工作设计中,这个我们后续也会有很多篇幅去详解,这里不拓展了。


————————我是分割线————————


Image title

后期职能才是实际流程中最重要的环节,因为就算前中期规划再好,他终究只是个未面世的概念阶段;一旦实际开发效果把控不好,产品一旦投入市面给用户第一印象不好,想要挽回就太难了,所以作为设计师,一定要时刻跟进着最后的一环。


————————我是分割线————————


不过这里还有一个默认的设计师职场规则:

不要越权,80%专注于本职工作内容,20%参与建议其他环节内容。

也就是说,作为UI设计师,你可以参与到需求环节或交互环节、对其提出建议和辅助修改内容,但不可以横插一杠子去干涉其他环节的工作决定。


所以如果目前你现在处于被动接受型状态,那可以开始尝试改变现状。

本意不是要求你去改变现有公司的状态和环境,这也不是作为设计师能轻易改变的;

而是说要开始培养对UI设计师自身的一个认知和定位,从而培养主动性。


那也有朋友说了你就会在这瞎JB扯,我们公司没有PM、交互,都是老板直接说要做个什么什么,然后需求、交互、设计都自己一个人做了,你说这有屁用?

这我就觉得奇怪了,这公司都这样了你还坚持干嘛呀,我写这个系列的目的不就是帮有需要的朋友早日进入资源更好的环境吗?


· Part02 设计方法论预热 ·


下图是我们团队工作中实际用到的设计方法论,现在不需要了解具体内容,

因为后续文章就是要向大家阐述这些方法如何结合到实际工作中的:

Image title

朋友们可能有疑问:我不是设计师吗,弄这些方法论干嘛,我又不是PM,会做图就行呗。但其实这是目前市场对高级设计师的要求,不仅要有视觉设计能力,更要有数据分析能力;


从13年互联网爆发、万众皆UI的盛况;到如今18年,热度褪去行业清场;但凡是能留下来的互联网公司都摸清了如今环境下怎么去更贴合用户口味,从市场中分一杯羹;


对设计师的能力要求也由13年的会做图标给8K,到现在七十二般武艺样样会的境地,这其实和冰山原理是一样的,视觉表现层始终只是水上的一小部分,需求分析和用户体验可用性才是水下的重头部分,如今的企业如果真的想站得住脚,只能在这方面进行竞争,市场就这样,想立足的我们也没办法只能跟着前进。


你从之前的专注视觉式工作到如今的数据、场景、用户分析式工作势必会觉得很累,但这是一个必经阶段。


————————我是分割线————————


方法论主要结合着上文的工作流程来看,是不同阶段使用不同的理论指导:

Image title

这些方法论具有模版性高、通用性强的特点,可以复用到任何产品的设计分析中;


不需要对每种理论都理解透彻,我们本职是设计师,对设计常用理论吃透就可以了;

掌握其他相关理论只是为了更好的帮助我们去理解和配合其他环节工作。


像“五导家”是阿里提出的产品设计流程,也是总监来之后时刻向我们经常灌输的,作为产品设计流程的总体指导理论;

5W1H需求分析法能帮助我们更好的挖掘用户实际需求,当然这是PM常用的理论,但作为UI设计师也是我们日常工作中常用到的方法;

KANO 模型是狩野纪昭发明的对用户需求分类和排序的工具,延展出来的有“十字分析法”,在分析页面内容、主次排版时使用非常有效,这是交互和UI常用的理论,上文的设计流程中期职能也体现了对应的应用。


当然我们这里还要清楚的认识一点,大湿从来不认为设计师是理论派:

学习的所有理论知识目的都是为了经我们手设计的产品体验更好、作出的设计稿更加站的住脚。

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


如何让你的设计更有商业价值

涛涛

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

今年互联网行业已步入了寒冬,整个行业大规模的裁员。美团、拉勾、阿里、京东等公司均不同程度的“缩招”与裁员,预计会持续到2020年。时代发展很迅速,社会很残酷,永远不要认为危机离自己很远而安心地一直停留在舒适圈,因为当时代抛弃你的时候,并不会和你打招呼。面对环境的波动,最好的方式就是保持危机感,面对变化接受变化,并不间断的学习。


——“在这个变幻莫测的时代,别只顾着低头拉车,更要抬头看路。”


文章一共分为三个部分,它们之间的关系是循序渐进,逐层深入,又相辅相成。所以大家读的时候,希望能够融会贯通。


第一部分:设计行业的发展趋势


我们正经历着巨大的商业模式变革与互联网转型,在这样的驱动下,设计师所承担扮演的角色也会发生变化。根据设计价值,设计师被划分为更靠近产品的UXD(User Experience)、以及在UXD基础上提升出与业务更密切的UGD(User Growth Design),最后就是更偏纯视觉的VD(Visual design)。那么在新的转型中,设计师应当如何去打造自身的价值呢?

本文主要探讨偏产品与业务方向的UXD与UGD。

Image title


一、设计与产品的关系


以前,设计师在团队里的位置会比较尴尬,因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临,设计的价值变得显性化,作为与用户关系密切的设计师,善用好数据,可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切,是整个行业发展的必然趋势。


举一个设计以小成本提高业务的实例。这是我之前做的两个双11活动运营位的入口图。在改动前banner点击率大概是不到16%,改动后提高到了40%,不消耗任何其他人力、物力成本,就可以用设计让CTR翻倍。


设计目标:提高首页banner与入口图的点击通过率

现有问题:利益不突出、视觉点不够集中、缺少点击动机

改进方案:1、简化文案突出利益点;2、增加商品推荐提高命中率;3、用抢的动态按钮引导用户点击;4、用动态gif吸引用户。

Image title


二、找到自身价值的重要性


前几天帮一个朋友招设计,面完后朋友问我的意见。我说手活可以,执行也没问题。朋友打断我说,除了基本的专业技能外,是否还能为公司带来更进一步的价值。很遗憾,这位设计师因缺少或者没法证明自己有更高一层的价值,未满足职位要求,最终没有拿到offer。尽管我试着为她辩解说插画画的还是很漂亮的。PM回我一句,我们不是招插画,我们有更专业的插画师。

像这样的案例比比皆是,在我看了近百份简历,面了不下十个设计师后,我觉得有必要跟大家分享一下设计师找到自身价值的重要性。而这个价值,不是我们觉得,而是要让企业觉得我们能带来他们需要的价值。


的确,很多招聘帖上会写:会插画、动效可以加分。但我们必须得明白,加分是满足必要条件之后才去考虑的。如果是去年,你也许会因为有这样的差异化优势而拿到一份还不错的offer,但是今年,10份简历中有8份都会插画,其中至少有3份以上画的还挺不错。所以这个优势就会被大大削弱。并且形势变了,公司更看重我们的设计能给产品的发展带来多大的价值。

Image title


第二部分:了解设计师的价值分层


设计师的价值可以分为以下三层:设计协同、设计推动业务增长、设计驱动产品。


第一层:设计协同


一个出色的执行者,能够在拿到需求后又完美地实现落地。简单地说就是手上功夫好。


做好这个阶段需要有优秀的专业能力,良好的沟通能力,并参与到产品的探索与构思中来。

Image title


第二层:推动业务增长


这个阶段的设计师,会比上一个阶段更能体现设计师的设计价值,并对产品产生一定的影响力。能在以用户为中心的基础上,推动业务的增长,所以这个阶段的设计也被称为UGD(User Growth Design)。


需要设计师具备用户洞见力,数据分析能力,从这两个维度出发,去熟悉业务、分析业务,从而推动业务。这个阶段的设计师,也是市场最需要并且很稀缺的。

Image title


第三层:设计驱动产品


这个阶段的设计师,在团队中的价值可以说是非常大了。从被动的需求接收方,转化为从战略层,能主动提出需求的一方。做到这一点的设计师是非常了不起的,也是我们UXD发展的终极方向。

Image title


第三部分:设计师需要具备的哪些思维?


一、从AARRR转化型漏斗,培养增长思维


设计师需要去深入探索产品本身,熟悉业务,熟悉用户。增长黑客里有一个“AARRR”流量转化漏斗型理论,就是根据不同阶段的用户参与行为的深度和类型,将我们的整个目标拆分概括为:acquisition(获取用户)、Activation(激发活跃)、Retention(提高留存)、Revenue(增加收入)、Referral(传播推荐)。在整个漏斗中,被导入的用户在每个环节都会出现部分流失,最后层层深入到达底层的,实现最终转化。

Image title


通过产品生命周期,设计师可以运用自己的设计思维和专业技能,将每一层的漏斗直径做到最大化,减少用户的流失,抵达下一层的用户就会更多,从而提高最终的转化。


二、运用GSA思维模型做设计


什么是GSA?

GSA分别代表的是:目标(G=Goal),策略(S=Strategy),行动(A=Action)

举一个通俗易懂的例子,比如我想减肥,这是我定的目标(G),然后我的策略(S)就是少吃多动,最后具体的做法(A)就是,不吃晚饭、每天运动2小时。

如何在具体项目中体现呢?下图,运用一个具体项目举例:

Image title


GSA的特点是“以终为始”,优势在于可以帮助我们快速聚焦到最能帮助我们达成目标、杠杆率(也就是投入产出比)最高的Action上。


三、培养数据思维,利用数据提升设计的价值


项目与需求上线后,设计师一定要去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较,没有比较就不能进步。


关于数据的用处有很多,举个例子,当两个人对各自的方案争执不休,分别觉得对方不好,但站在各自的逻辑上似乎都能说得通,那怎么办呢?分别做一个A/B测试,数据不会说谎,哪一个方案更有效,一目了然。


那么如何将数据结合到我们的设计中呢?首先在设计前,我们需要先定一个目标,而每一个目标就应有一项对应的数据指标。比如,提高了某一块的CTR(点击通过率),提高CVR(转化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。

Image title


拿到了数据之后,还需要分析数据。不管是有没有达到目标,都要去分析原因,进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验--失败了就找失败的原因,方便以后避开同样的错误;成功了就分析成功的原因,并将成功的策略复制运用到今后的工作中,增加以后的成功率。如此,不管有没有成功,都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。

Image title


小结:


以上就是今天所要分享的全部内容。再带大家回顾一下,一共分为三部分:第一个是了解设计师的发展趋势,第二个是趋势下的设计师价值分层(设计协同、设计推动增长、设计驱动),第三个就是在价值分层的逐步递升中所需要培养的用户洞察力、GSA的策略、数据增长思维等。

最后提示一下大家,阅读的时候多融会贯通。另外,方法不是唯一的,要懂得去掌握方法的方法很重要。

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

 

10个记忆深刻的产品设计神细节!

涛涛

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

在互联网快速发展的进程中,越来越多人将个人财产、隐私、数据,以及心理安全都存放在产品平台上。这么一来,想要产品获得用户芳心,让用户用得放心,不仅要为用户提供安全可靠的保障系统,也要将安全氛围显化传达给用户。那么,可以从哪些方面着手设计产品,提升用户安全感呢?下面一些案例,会从新的角度给你灵感。

上期回顾:《每月更新!10个记忆深刻的产品设计神细节》

1、ZEPETO是如何做到强制用户注册,却不让人反感的?

很多时候我们可能只是心血来潮想尝试一下某款app,并没有注册帐号长期使用的打算。所以每当打开的应用,如果出现强制要求注册,才能开启使用的情况,真的会对产品的体验好感全无,甚至怕麻烦放弃使用。一些产品会提供「游客」身份试用简版「会员」享全部功能的选择给新用户,这无疑是一种体验不错的方案。

但如果受限于功能使用,或者就是要提高产品的用户量,必须引导注册,该如何减少用户的反感情绪呢?

最近爆红的ZEPETO的登录界面就很值得借鉴。用「制作ZEPETO」和「已有ZEPETO」的文案,替代生硬的「登录」与「注册」。相同的功能设计,但因文案传达情绪的不同给人带来不一样的感受。

「制作ZEPETO」几个字不仅直白地说明了产品意图,还悄悄将「注册」转化成了用户制作ZEPETO过程的一部分,无形中降低了用户对强制性注册的心理防备。

2、「抖音」的另类温馨提示,规避责任和风险

为了吸引粉丝,短视频的作者会争相模仿,一些观众用户也会因为有趣去体验尝试,但很多视频里的体验和动作都是存在安全隐患的。为了规避风险,「抖音」里某些视频的下方会提示:「效果未知,请勿轻易尝试」或者「该行为存在危险,请勿轻易模仿」。

如果刷「抖音」时长超过五小时,也会提示看视频时长并提醒用户注意适当休息。这些小提示的出现,都是出于对用户健康安全着想与负责的引导,也是产品团队规避责任与风险的方式。

3、好的用户提示能给用户增加「安全感」

用户在进行语音交互时,想取消当前操作的概率非常大。如果系统按照错误的指令执行,会给用户带来挫败感。「支付宝」的语音交互会根据用户当前的手势进行操作提醒,以减少用户的学习成本。

不存在干扰或打断用户操作行为进行的强制性,又能给予用户对当前操作进行修正的机会。让用户轻松胜任操作,利用「控制错觉」打破用户对不熟悉操作的顾虑与恐惧感。

4、适当的「工具提示」,能增加用户的期待感

对于大多数团队来说,敏捷开发时间短任务重,在有限时间内并不能把所有功能都上线。「微信」团队在订阅号里,添加了未开发功能提示。

当用户长按文章时会出现toast提示,用特定的交互与简要文字说明提示用户「功能正在开发未上线」。

「工具提示」往往出现在新用户引导流程,但微信团队将它用在了未完成开发功能的提示上,让用户对之后上线的功能产生期待感。

5、怎样向用户传达隐性的安全感?

在支付宝的「我的」页面中,「总资产」的后面会显示绿色的「账户安全保障中」的文案。同样的,「财富」页面的「总资产」项后面也会显示「保障中」的微文案。不断出现强调资金安全性的文案,其实是支付宝在通过细节设计提升用户在使用产品期间的安全感。因为当涉及金钱交易时,用户都是极其慎重与不安的。

所以产品不仅要为用户提供安全可靠的保障系统,也要将不可见的安全氛围显性化传达给用户。通过界面细节,比如文案展示出产品的安全性,能借助心理暗示的作用缓解用户内心的不安情绪,增强对产品的信任感。

6、「即刻」让社区不友善言论自动变萌的魔法是什么?

「即刻」app对于用户评论的审核机制十分具有萌点:如果用户在发表评论的内容中,包含不友善或具有人生攻击的词句,系统会自动弹出模态弹窗,提醒用户修改留言。如果用户依旧不愿修改言论并坚持发布,评论内容是可以发布成功的,但言论中包含的不符合平台规定的字眼会被系统强制修改。

比如在发布的评论中包含具有攻击性的词语「智障」,发布成功后会被系统修改为「大笨蛋」。没有强行阻断用户的评论行为对用户造成评论失败的挫败感,又巧妙化解了不友善言论的发布,维护了社区的和谐。将所有负面甚至不文明的言论全都自动过滤强行变萌,设计出这个审核功能的小哥哥或小姐姐一定有着一颗敏感又温柔的心吧~

7、也许你都不知道,自己会有「恐惧症」

「恐惧症」是一种以恐惧症状为主要临床表现的精神类疾病,指对特定的人、物或场景有按耐不住的焦虑、紧张甚至是恐惧的心理。如果在「百度」搜索含有「密集恐惧症」、「深海恐惧症」等类似关键词的图片,会在呈现完整加载结果前出现遮罩遮蔽图片,并用文案提醒用户图片可能引起不适请自行选择是否继续查看。

由于无法确保浏览内容的用户是否具有相关病症,强制性阻断操作给予提醒并将是否继续的选择权交与用户,算是对用户的使用体验很用心的考量了吧。

8、替用户做决定,不一定是坏事

对于上班族而言,每天吃什么简直是个世纪难题。面对海量的店家及不同的组合优惠,常常挑花了眼,还是无从下手。如果你也存在这样的问题,不如来试试「美团外卖」新推出的「满减神器」吧。

针对店家的优惠特点,系统会提前帮你罗列出最佳的优惠选择。不仅会标注出各个套餐近期购买的人数,还会优先推荐「高回头率」的套餐选择。解决了选择困难的痛点,让用户吃得实惠又省心。

9、转账也终于有「后悔药」可以吃了

「支付宝」与「微信」早在几年前就推出了「延时到账」功能,但由于入口隐藏较深使用的人并不多。更重要的是即便中途发现被骗,也无法立马撤销交易,一旦延迟转账超时钱,还是会直接打到对方账户。而这一次新版「支付宝」联合警方优化了反诈骗的流程,对「延时到账」功能的升级可谓是真正解决了转账安全的痛点。

对于选择「延时到账」的用户,如果在到账前发现被骗,虽无法自行撤回款项但只要上传报警的相关凭证,这笔转账就会被临时冻结。一旦警方判定被诈骗的情况属实,用户的转账就能原路返回转出帐号了。更贴心的是,即便用户没有进行「延时转账」操作,当「支付宝」的风控系统识别到转账存在风险(比如对收款方账户的交易历史行为存疑)会自动提醒用户进行「延时转账」。

10、美团外卖上线「加密号码」,让订餐更安心

今天在用「美团外卖」与商家进行联系时,发现了一个「加密号码」的弹窗。当你确认联系商家后,会出现语音提示:「美团外卖保护你的隐私,商家将不会知道你的号码」。这个小细节很赞是因为在保护了用户隐私的同时也通过语音提示在用户心中强化了平台的安全性与贴心。

以前如果用户给商家差评了,很有可能会接到不少商家的骚扰电话,造成不好的产品使用体验。因此团队设计了「加密号码」的功能,加强了用户隐私的保护,让联系商家变得更安心无负担。

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

 

日历

链接

个人资料

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

存档