首页

如何理解设计中的统一和打破?

资深UI设计者

在日常的设计工作中,我们也许会遇到这样的情况:作品缺少变化导致枯燥乏味;而变化太多又会显得杂乱、没有章法;这就对应了设计中统一和打破的关系,那么为什么统一和打破这两种看似矛盾的关系,却总是能同时出现在我们的设计作品中?如何更好的理解二者之间的关系并运用到日常的工作中去?希望本期内容能对大家有所帮助。





在设计中统一并不是所有元素1:1的一模一样,它可以体现在:板式、配色、元素属性、处理手法等等,那么为什么要统一?统一的目的是什么?下面我们具体来说:


统一:让作品更整体

作品不够整体,会给人一种信息散乱、没有视觉焦点的感受;而将视觉元素进行“统一”,就能很好的解决这一现象,这无关乎技法的熟练与否,在我们的日常生活中就随处可见:比如:我们的书本排版,会有统一的页眉、页脚、段落留白、文字间距等等,其目的就有让文本内容在视觉感受上更像一个整体;下面我们看个设计中的案例:



如图所示,上侧案例给人的感觉比较杂乱,不够整体,原因在于:元素与元素之间的关联性不强,且视觉形态及色彩属性各不相同,导致整体各元素之间的呼应不够明显,所以会给人一种不够整体甚至杂乱的感觉。而下侧案例通过在形态、色彩、属性等方面的统一化处理,加强了每个单独视觉元素之间的呼应,使得画面更整体!



统一:让作品更整洁

不管是在设计工作还是日常生活中,干净整洁的东西都是更易于大众接受的,在设计工作中,做好统一是最重要的一环,在此前提下,才能做好另一环“打破”!所以当设计作品出现乱的现象时,我们需要对其视觉元素进行规整及相应的处理,比如:

通过左右对比我们发现,很明显右侧给人的感觉杂乱无章,而左侧干净整洁、有条理,原因在于:


①、元素与元素之间并不是相互孤立的,而是在视觉上存在着一定的呼应关系,相互关联,这样画面整体性也会更强。

②、视觉上将原本各不相同的形态以及色彩重新进行了统一处理,目的是通过减少视觉元素形态及色彩变化而进一步提升画面的整洁。

③、视觉元素在物理关系以及属性上也做到了统一,即统一元素与元素之间的间隔、形态、颜色等等。


下面我们再看组案例:


上图中,相比而言案例二比案例一给人的感觉更整洁、干净、也更像一个整体,原因在于:案例二中配图的属性做到了视觉上的统一,具体体现在:①、图片的颜色属性:统一蓝色色相属性;②、图片的内容属性:统一高端、仰视角度建筑属性;③、图片的留白属性:每一幅配图在视觉上都会有一些留白性质的属性,给人的感觉很舒服。


所以:出于让整体更整洁的统一,大多是在做减法或者合并的过程,目的是减少一些造成视觉整体杂乱的因素,比如:色彩杂乱、图形杂乱、文字形式杂乱、视角角度杂乱、以及过多无关联的视觉元素等等,统一的过程也是整合视觉元素的过程。


注意:设计中的统一并不是绝对的,而是相对的,如果所有的视觉元素、属性都严格按照统一化去处理,那么就会滋生另一个问题:整体视觉太过平滑、缺少变化甚至会给人一种单调、枯燥的感受。那么在强调统一的同时,“打破”就是为了解决这难题的。





在日常设计工作中,打破是建立在统一基础之上的操作,那么既然已经做好了统一,为什么还要打破呢?打破能为作品带来什么?下面我们具体分析:



打破:提升作品视觉层次感

当作品过于统一时,很容易会给人一种单调、乏味、缺少层次变化的视觉感受,而在统一的基础上做一定的打破操作,就能起到很好的解决这一现象的作用,那么什么是打破?举几个简单的例子:


如上图所示,图①就属于过于统一的表现形式,很明显整体平淡、乏味,缺少视觉变化;而其他都是在统一的基础上做了一些“打破”的处理,只不过各自切入点不同,下面我们逐一分析:


图②:切入点是打破了一成不变的排列形式。

图③:切入点是打破了一成不变的配色形式。

图④:切入点是打破了完全统一的配色形式以及形态。

图⑤:切入点是打破了统一的元素属性值。

图⑥:切入点是打破了统一的元素属性。


以上这些虽然切入点都各不相同,但是目的都是通过打破过于统一的视觉现象,增加整体视觉变化程度,从而提升整体视觉层次感,也打破了呆板、乏味,增添了一些视觉上的跳跃性。



下面我们再看个设计中的例子:

如图所示,上侧案例属于很好的贯彻整体统一的理念,而下侧案例则是打破了固有的统一、却也保留了大部分统一的属性,通过两者对比我们发现,其实单只看这一组案例:两种表现形式都是可取的,只不过相比而言下侧案例给人的视觉感受变化更多、层次感更强,所以相比而言给人留下的视觉印象更深刻。


上面说两种表现形式都可取的前提是:单单只看这组案例,但是很显然这组案例只是页面的局部,如果整体页面都如上侧案例那样严格的按照统一进行,那么页面整体就会过于平淡、缺少视觉层次感、甚至主次不分明。



打破:划分视觉主次

在现实生活中,具有差异化的人或实物会很容易引起周围人的注意,甚至印象深刻、难以忘怀。在设计中亦是如此!其具体表现形式参考上图①-⑥,因为打破过于统一就是在营造具有差异化的视觉元素,从而会很容易在视觉上形成先后、主次之分,所以就起到了一定的划分视觉主次的作用。


注意:打破也不可盲目的进行,过于统一会单调、乏味、重复感强;而过于追求差异化也会出现杂乱、没有章法的视觉现象。所以一定要结合实际情况灵活运用。一幅作品中大多情况下:打破的次数要少于统一,即作品整体绝大不多保留整体统一的属性,通过局部打破处理提升整体出彩度,这样容易给人一种干净、整洁且不失视觉变化、层次感的感受!


不妨找一些优秀的网页分析一下,是否很多优秀的设计作品都符合这一规律?





综上所述,统一是为了让作品有视觉条理性、更整体,而打破则是增加视觉层次变化,让作品更出彩!统一和打破看似是两个矛盾的名词,实则在设计中是相辅相成的作用!不管是统一还是打破,两者的切入点都是相似的,一般体现在:形态、属性、色彩、大小、位置关系、留白等等。但是无论如何统一都是打破的前提,如果作品整体性都不够,再一味的追求打破关系,只会让作品越做越乱。所以一定要先做好统一,其次才是进行打破、改变。当然文中提到的只是一部分,希望大家能活学活用、举一反三!

文章来源:站酷

智能电视UI设计基本原则

资深UI设计者

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

之前一直在做移动端的 UI 设计,在进入小米后,开始接触电视端的 UI 设计,目前在负责小米电视商城。经过一个电视端项目后,自己做了一些关于电视 UI 的总结以及设计方法原则。

电视 UI 算得上是一个偏冷门的界面设计,因为它的交互比较特殊,同时有一些限制,比如交互限制,焦点原则等等。以下就自己的项目经验为电视 UI 设计原则做一个总结。

智能电视的特性

对于现在家庭智能电视而言,技术在不断的进步,但是其饱和度和对比度有的还是很强,还会遇到大红碰到大紫的色块对比。但是信息变得简约了,都是以 tab 导航为主,下面是几个卡片信息瀑布流显示。语音提示很重要,会随着焦点的移动发出提示声响,提示用户电视焦点的移动状态。

小米电视商城全新改版,在接到需求后,一定要模拟用户来体验一下购物流程还有用电视购物的环境,环境应该是固定的,那就是在家里。电视和手机购物体验是不一样的,电视是要用遥控器来控制,所以每一步的操作流程都很珍贵,如果界面跳转太多,会给用户一种烦躁的感觉,所以尽量同一层级的信息要在同一界面填写完毕,避免二次跳转。

第二点说的就是焦点问题,焦点不能层次不齐,跳动太大会引起视觉不适。以小米电视商城详情为例,焦点尽量在同一水平线上,同行的焦点移动,视觉感受上会舒服很多。

设计尺寸

智能电视的分辨率和大家平常在 app 看电影的时候差不多,如上图所示,目前 1080p 最常见,2k 和 4k 基本都是资源类节目。设计尺寸以小米电视为例,通常做 1920*1080 的视觉稿就可以了,开发会适配比 1920*1080 小的电视屏幕,这样下来,如果小分辨率的电视没问题了,大的分辨率也就没问题了。

我们知道在设计 app 的时候,都有左右间距的控制,移动端一般常见的控制在 28px 或者 32px,电视端因为是大屏设计,所以预留的空间也要大一些,基本左右留出 120px,上面留出 90px 就可以了。一般我设计的时候左右是固定的 120px,上面可以随设计内容来自定义,90px 或者 100px,都是可以的,只要视觉舒服即可。

焦点在电视端 UI 设计里显得尤为重要,因为它就是你的视觉焦点,焦点会随着遥控器上下左右确认而改变。焦点的设计不能是扁平的,因为那样不能够提醒用户焦点状态的位置,焦点的设计应该是放大的、夸张的、可以带边框,也可以使用投影外发光的方式来设计,确保能够给用户足够的清晰位置。

焦点放大我这里建议放大 1.1 倍或者 1.2 倍就可以了,再大就显得过于大了。

交互设计

如上图所示,我在设计焦点的时候,就用了放大+外边框的形式,这样焦点移动起来可以让用户足够看到位置所在。电视端的交互也是很简单的,基本属于十字交互,即自上而下,从左到右的交互方式。红色剪头属于禁区,所有的电视交互,没有斜 45 度的交互,这样是错误的。

大家可以看到,在 app 里,常见的弹窗和浮窗可以压盖在可点击功能上,比如美团的红包,爱奇艺的一键关注,即使是这样,也不会影响功能的正常使用。但是电视端的设计,如果两个可点击功能压盖在一起,焦点是无法获取的,因为它没法判断你想要选的那个功能,所以在电视上,一定要将两个功能分开来布局最为合适。

露出屏外的内容,和移动端设计是一样的。如果有多个卡片内容,我们需要将露出屏外的那张卡片做一些边界化处理,控制好间距,也就是说我们要将一个完整的卡片漏出来一些,让用户知道,后面还有内容;反之,用户可能不知道后面还有内容,就不会按遥控器右键查看了。

电视端 UI 设计忌讳控件隐藏,比如上图,如果有很多文字的时候,左边的设计是错误的,因为隐藏了 button 按钮。改为右边的设计是比较好的,我们可以选择焦点选中文字给一个弹窗状态或者其它,将 button 功能位露出来,如果一个界面可选功能位较少,我们设计的时候尽量在第一屏展示。如果实在不行,可以选择吸底吸边来设计。

视觉设计

颜色的选择运用是重中之重,因为这个会直接影响到用户的视觉体验。因为用户环境大多数是晚上的时候回去看电视,分开灯和关灯的情况,开灯的情况其实还好。如果关灯,颜色太刺眼的话,饱和度较高的颜色会直接影响到眼睛,这个危害是很大的,而且不一样颜色的色块,会增加用户的视觉负担,这样就得不偿失了。所以我们要避免大面积的使用单一纯色或者渐变色。

电视 UI 设计中,白色谨慎使用。因为白色过多实在是太刺眼了,我们可以选中较为灰一些的接近白色的颜色来代替。

背景的运用这里也建议使用深色的背景,原因和上述讲的一样,还有一个就是深色背景可以更好地衬托出界面的主要内容。反之如果用浅色的背景,有的卡片如果需求方要求设计成浅色,那么这样浅色的背景+浅色的卡片叠在一起,主要内容就特别难区分了。

我们在设计电视端 UI 的时候,要真实的先去体验一下特殊的场景,电视端每个 tab 是一个频道,每个频道的设计风格也是不同的,比如少儿频道,购物频道和电影电视剧频道,设计风格肯定不同,体验模拟流程可以让我们更快地了解电视特性。

字体的选择默认思源黑体,因为这个字体是开源字体,可以免费使用,没有版权之分,以上列入的字体是小米电视商城改版的字号,具体的字体和间距可以根据自己的设计需求变化。

关于字体的选择,当然你也可以选用其它字体,或者一些特殊字体,好看的字体,但是这样的话,字体包应该会很大,会影响一些加载速度。

字体颜色的选择尽量用白色或者亮色,深色背景上选用白色是最好的,这样更易于阅读。

字体的粗细大小,这里标题建议加粗选择,其余选择常规字体就好,避免太粗或者太细的字体。

更好的智能家居体验

电视的设计只是其中的一部分,未来我们的电视可能比现在的体验更加好,比如会出现实景商城,单一的图片形式已经不能满足我们对购物的需求,一些视频类,动效类的体验会更加合适。想让电视拥有好的体验并不是一件简单的事情,想必大家已经从诸多「电视盒子」上体验到了这一点。我们曾经熟悉的电视已经发生改变,而我们适应的手机、平板和电脑和新的电视还有着巨大的差别,我们需要忘掉之前熟悉的模式,未来五年、十年、甚至更久。电视、电灯、冰箱洗衣机等智能家具的体验,正是我们设计师需要在未来几年所做的事情,这很重要。

小米电视商城全新改版是我接触的第一个电视端 UI 设计项目,第一期的优化还有很多不足,根据项目经验总结了上面的规范。以上的基本设计规范掌握后,那么做电视 UI 基本问题不大,大的错误肯定不会有了,但是每个公司的设计规范肯定也有所差别。电视端的设计是个偏冷门的 UI 设计,多掌握一些另类项目经验也是设计师必备的技能。

文章来源:优设网

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

拆解「开关」背后的设计细节

ui设计分享达人






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


小小开关中的大学问



一.生活中的反面案例


故事要从我搬到新出租屋开始讲起。半年前搬到新的出租屋后,房间里配置的洗衣机也比之前的大了一倍,而且操作区上分布着的密密麻麻的文字和按钮让洗衣机看起来更高级了,然而这种对它的好感并没有持续多久。在我第一次使用它时,我将衣物放进洗衣机后,选择好时间和洗涤方式,按下了启动按钮(如下图右侧白色按钮)。



按下后洗衣机发出了“滴”的一声,在我的认知里它应该是开始工作了,但是10秒过后没有任何抽水声和洗衣服的声音。我疑惑地想:“是不是刚才并没有成功启动?”,于是再次按下了启动按钮,又是“滴”的一声,但是这次我等了 1 分钟没有任何反应。之后的十分钟里,我与这台匪夷所思的机器“交涉”多次才理解了它的运行方式。这台洗衣机启动后需要等待大概十几秒才开始运行,但是在我按下启动按钮后我得不到任何反馈或者提示来告诉我洗衣机已经开始工作了,所以疑惑的我又按下了一次启动按钮,然而令人崩溃的是这台洗衣机的启动和暂停按钮是一体的,我第二次按下实际是进行了暂停操作,从而导致我第二次的困惑。


如果你是这台洗衣机的设计师,你会怎么解决上述的问题呢?


可能你的心中已经有了答案,在回答之前我们先试着探究问题的本质。


人们不管是使用日常物品还是与机器进行交互,都会面对两个阶段的问题。一个是「执行」,一个是「评估」。执行时用户需要理解如何操作,操作后可能会有什么结果。评估时用户需要知道具体发生了什么。作为设计师我们要通过合理的手段帮助用户解决这些问题,保证交互的可用性和流畅性。


通常我们会使用「意符」在用户执行前告知用户如何理解、如何操作、操作后会有什么结果。在评估前通过「反馈」告知用户结果是什么。


对于意符的定义,在《设计心理学 1-日常的设计》一书中,作者唐纳德·诺曼做出了这样的解释:


人们需要某种方式了解他们将要使用的产品或服务,某些标识表明的用途,会发生什么,有什么样的替代方案。人们寻找蛛丝马迹,寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号非常重要。设计师需要提供这些线索。人们所需要的和设计师必须提供的,就是意符。除此之外,优良的设计要求对产品的目的、结构和设备的操作与使用者进行良好的交代。那就是意符的作用。


简而言之,意符就是在用户使用前,机器为了让用户更好地理解和使用它而做出的提示。而反馈就更好理解了,机器在我们操作后做出的反应就是反馈,没有反应同样也是一种反馈。


下图展示了机器与用户如何进行交互。一个合理的设计可以让用户快速顺畅地进行 1234 四个步骤进而完成任务,而糟糕的设计会让用户不断重复这个流程。之所以会出现糟糕的设计,就是因为在步骤 1 和 3 没有进行合理的意符提示和反馈提示让用户摸不着头脑,进而导致用户根据自己的猜测和过往经验来进行操作,最后得到非预期的结果。



回到文章开始时的洗衣机开关问题,因为开始和暂停按钮是一体的,在没有任何意符和反馈的情况下我按下这个按钮时我并不知道我启动的是开始操作还是暂停操作。


我们可以就这个问题列出以下解决方案:

    1.增加文字提示,如启动时在显示屏上显示“已启动”,暂停时显示“已暂停”;

    2.增加语音提示,启动开关后使用语音告知用户“已启动”或“已暂停”。


当然解决方案有很多,每个人都可以根据场景想出不同的解决方案。


与现实机器的开关类似,在 UI 设计中我们如果进行开关设计也需要遵循相应的设计原则。


一个合理的开关设计主体包含的意符分别有两种:

    1.表示当前状态;

    2.表示操作后的状态。

主体之外我们还可以添加辅助提示更加清晰地传达意符和反馈。


接下来将介绍一些常见的开关类型和辅助提示类型,最后总结出体验优质的开关设计方法。



二.开关类型


1.icon


在 UI 设计中最常见的开关可能就是 icon 了,即由单一的 icon 通过颜色或图形的变化来表示开或关的状态。因为交互设计从古到今并没有统一的严格标准,所以到底是将开关 icon 的样式设计为「当前状态样式」还是设计为「按下之后的状态样式」并没有一个约定俗成的规则。然而,对比而言如今各类 App 设计中常见的且体验比较好的方案还是将开关样式设计为当前状态样式。如下图iPhone自带相机的实况照片开关icon就是显示当前状态。



然而,并不是说将开关样式设计为当前状态样式做法普遍且体验更好就可以这样做了,有些开关的设计因为使用广泛,已经在用户的心智中扎根,我们如果强行改变反而适得其反导致体验变差。最典型的就是视频和音乐的播放暂停开关,他们表示的就是操作后的状态而不是当前状态,如下图。



因此,大部分应用的开关类 icon 都是混用当前状态和操作后状态的,如下图哔哩哔哩的视频播放界面,播放暂停开关 icon 表示的是操作后状态,弹幕开关表示的是当前状态,而视频锁开关 icon 又变成了表示操作后状态了。



是否统一倒不是关键,关键是我们是否能够让用户理解相应的意符和反馈,目标是让用户在操作开关前能够知道当前状态是什么,操作开关后当前状态是什么。


举一个反例,下图中的美颜相机的夜拍模式开关就没有直观表现出当前是开还是关,这种有歧义的设计可能让新手用户手足无措,可能本来未开启的功能让用户误以为已开启,导致拍出来的照片不符合用户预期。


由此我们可以看出,单一的 icon 开关如果没有其他的辅助提示会造成意符和反馈的缺失,进而形成较大的歧义性,用户会在疑惑中按照自己固有的心理模型和过往经验进行判断,体验因此降低。



2.主体与开关分离(分离式)


上一部分举了美颜相机的反例,其意符和反馈不明产生的歧义问题导致了用户的困惑,但使用「主体与开关分离」(后文一致简称为“分离式”)的开关设计可以解决这个问题,它在意符和反馈层面都给予了用户提示,可视性很强,完全解决了开关状态无法被用户感知的问题。分离式开关指的是,主体不再充当开关,只当做开关的名称或icon,另外制作一个开关传达意符和反馈,解决了当前状态与操作后状态混淆的问题,其通常的样式如下图。



如下图,Faceu激萌不同于美颜相机设计方式就是将主体与开关分离,很清晰地传达了当前开关状态。



大部分App的设置页面使用的开关都是主体与开关分离的方式,如下图。



显而易见,分离式开关直观展示了当前状态,在消除歧义方面优于 icon 开关,但同时缺点也很明显,它占用了过多页面空间并美感欠佳。




3.名称变化


名称变化指的是开关依赖于其名称的变化告知用户开关的当前状态和操作,常见的类型如下:



部分 App 会将开关的名称变化的方式统一,但也有部分 App 会将这两类进行混用,即一个是表示当前状态,一个是表示操作。


下图为部分 App 的名称开关,我们可以将上图的开关名称类型的序号对号入座。



表示操作的按钮文字具有一定引导性,用户容易感知和触发,反之,表示状态的按钮文字由于不具有引导性,如果用户没有对这类按钮形成使用习惯甚至难以意识到它是可点击的,因此我们可以利用其特性进行逆向应用引导用户的行为。比如在直播App中,我们希望引导用户关注主播,又试图避免用户关注后又取关主播。我们就可以将“关注”制作为表示操作,文案写为“关注主播”(属于1.开启...)。将“取消关注”制作为表示当前状态,文案写为“已关注”(属于7.已开启...)。前后的颜色进行区分,“关注主播”的按钮制作得对比度强,吸引力大,“已关注”做得弱一些,让用户误以为不可点击,如下图的斗鱼直播。



然而,名称变化的开关由于语言的模糊性,仍然造成了部分歧义。我们可以发现很多App的名称变化开关设计中,都会在操作后加入其它提示来消除歧义(如:toast 提示),有些App则并未加入,因此在后文中会着重介绍辅助提示的优点和使用方法。



小结


icon、分离式、名称变化,如果按照消除歧义的优劣排列的话,大概是 分离式>名称变化>icon。


那这样的话是不是应该把开关都换成分离式呢?当然不是,分离式虽然在意符和反馈的层面很充分地消除了歧义,但是其也有明显的缺点,分离出的开关会占用部分空间,可能会影响美观,因此我们需要根据需求和页面结构选择最适合的开关类型。


那名称变化和 icon 类的开关如何消除歧义呢,我们可以通过添加下面介绍的辅助提示来解决。



三.辅助提示


1.环境暗示


环境暗示指的是用户在操作开关前,开关以外的区域给予用户的提示,这些提示本身存在于交互流程中并不是我们刻意加入的,用户根据这些提示可以判断当前状态以及按下开关后的状态。


例如在观看视频时,当用户去按下视频播放按钮前,用户会通过当前图像静止与无声音这个环境暗示明白当前状态是可能是视频未播放,所以应该按下播放按钮让视频播放。


再比如得到 App 的夜间模式,用户可以通过当前界面的样式判断当前是否已经开启了夜间模式,如下图。



看下图,如果没有环境暗示,你能分清得到的夜间模式的开关哪个当前状态是夜间哪个当前状态是日间吗?



因此,环境暗示的优势是我们不需要进行另外设计其他的意符和反馈告知用户当前状态,环境给予的暗示已经足够直观。



2.模态/非模态提示


当用户按下开关后模态和非模态提示可以在反馈层面告知用户,让用户知道自己是触发了开启还是关闭。


常见的模态提示控件是「警告框(Alerts)」,非模态提示控件是「提示框(Toast)」,前者提示强度大,使用在一些危险、重要的反馈中,后者则使用在一些轻量的提示中。


介绍 icon 开关的部分我们提到了美颜相机的夜拍模式的 icon 开关状态难以区分,但美图秀秀在这里使用了顶部的非模态提示在反馈层面告知用户当前状态,很好地解决了这个问题,如下图。



拉勾网的设置中,隐藏简历为危险操作,用户极有可能由于开关名称的歧义或由于疏忽触发开关导致简历被隐藏从而错过工作机会,因此此处设计了一个形式为警告框的模态提示来告知用户当前状态以及潜在风险。




3.辅助文案


辅助文案指的是在主体(主体可能是开关名称、icon 或二者皆有之)之外另外放置一些文案信息来充当意符和反馈。下图案例就是高德地图的下车提示的开关,开关的主体是名称,但是下面的一行辅助文案很清晰地传达了当前的开关是什么状态。




4.其他辅助提示


并不是所有提示都需要让用户看见,我们可以给予用户其他感官的信号告知用户当前开关的状态。


在现实生活中,我们会通过钥匙在锁中扭动发出的声音判断锁是否被打开,通过触摸感受摩托车是否继续震动判断其是否已经熄火。


同样,在 UI 设计中,我们也仍然可以使用听觉和触觉来消除开关的歧义。一个比较优秀的案例是高德地图,当用户打开下车提示之后,会出现语音提示“已开启下车提醒”,它充分考虑到身处户外的用户可能并不能很方便地获取屏幕上的视觉信息,因此使用语音的形式提示用户。



小结


辅助提示很好地补充了开关在消除歧义上的不足,但我们需要合理使用否则就会产生不必要的视觉噪声。如下图,试想音乐的暂停播放开关如果加入的 toast 提示会怎么样呢?由于我们已经可以通过“手机是否发出声音”这个环境暗示获知当前的开关状态,如果再加入 toast 提示必然会出现不必要的视觉噪声。




4.总结


介绍完开关类型和辅助提示后,我们如何将其应用到我们的产品中,设计出无歧义或低歧义的开关呢?


如果我们选择的开关类型已经足够的消除歧义,如分离式,我们就不太需要额外地增加辅助提示了。但是如果使用容易造成歧义的开关,我们可以按照(开关类型+辅助提示 1 +辅助提示 2 +......)的公式进行设计,即一种辅助提示不足够消除歧义,可以使用多种一起。


举个上文的例子,高德地图的下车提醒开关的设计就是「名称变化开关+辅助文案+语音提示」 的组合。


然而,任何设计都不是完美的,很多地方都需要我们做出妥协,虽然我们可以选择合适的开关类型和辅助提示解决歧义问题,但随之而来就可能出现其他问题。如分离式开关消除歧义效果很好,但是占用空间且不美观,模态和非模态提示给予用户的反馈比较强,但是可能打扰到用户。


综合上文提到的三款相机软件作为案例,如下图,我们可以发现在消除歧义的过程中避免不了对用户造成的干扰或页面美观度的降低。我们很难去评判Faceu激萌、美颜相机和美图秀秀哪个设计得更好,它们只是在易用性和美观性之间找到了它们所认为的平衡点。具体如何设计,还是要具体问题具体分析。



那么我们应该如何进行取舍呢,在这里我们要考虑另外的因素。我们可以从以下角度分析,使用频率、用户人群、潜在风险等。


使用频率:使用频率越高,用户对操作的熟悉度越高,歧义对用户造成的理解与记忆成本就降低了,设计可以偏向低干扰和美观度,反之使用频率越低,歧义对用户造成的理解与记忆成本升高,设计就应该偏向于易理解。


用户人群:不同的用户人群的风格偏好、认知能力是不一样的。例如,我们要设计一款目标用户为年轻人的相机产品,设计风格简约,此时我们比较偏向的设计方案可能就类似美颜相机。反之,如果我们的目标用户是中老年人,就要偏向于易用而牺牲美观度,方案转而偏向美图秀秀或 Faceu 激萌。


潜在风险:开关的切换如果会导致潜在风险,设计就应该偏向于易理解,且需要使用模态提示告知用户风险。例如用户如果关闭了推送通知开关,会导致接收不到实时重要的信息通知,此时不仅要使用易识别的开关类型,还需要添加模态提示告知用户风险。


我们可以将这些考虑角度放到雷达图,如下图所示,最终形成的面积越大我们越应该将按钮制作得易理解、易使用,反之我们可以偏向于将开关制作得更美观牺牲一些易用性。考虑到一些特殊产品的特殊用户属性,我们可以在下图中增加其他考虑角度,其并不是一成不变的。



以上是本次对开关设计的思考,看似小小的一个开关,包含的学问却不胜枚举。作为一个互联网产品设计从业者,一定要善于感受生活,用设计师细腻的内心去打量、洞察身边的一切事物,发现美与不足,思考改进方法,并在这个过程中逐渐提升自我的价值。

转自:站酷-Ballen贝林 


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


让用户多走一步,让产品前进一大步

ui设计分享达人

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



在产品交互设计中,

有些交互逻辑会“故意”让选择用户多走一步,


而短短的一小步,却会迸发出更多的价值!

(在不影响用户体验情况下)


而这次,我在体验这些产品当中,获取的一些思考分享给大家。

我们就来聊聊有哪些是多让我们做一步而让产品更加升华的一些APP吧!



文中涉及到的理论包括:


尼尔森十大可用性原则

第五原则-防错原则(Error prevention)

第六原则-易取原则(Recognition rather than recall)

第七原则-灵活原则(Flexibility and efficiency of use)

我们常能听到以上的十大原则之中的著名设计理论,

但可能还是不太清晰是什么意思


而这篇文章将会实际分析

涉及到的原则知识我将会在案例中分析讲解~



--------------------------------------我是分割线------------------------------------


以下是实例分析:



1-1 . 灵活原则(Flexibility and efficiency of use)

「中级用户的数量远高于初级和高级用户数。为大多数用户设计,

不要低估,也不可轻视,保持灵活。」



实例A网易云歌曲收藏功能和淘宝收藏功能对比

(收藏后选择歌单方便一步)




在网易云的歌曲收藏功能里,点击收藏需要再次选择你想放入的歌单才能收藏成功。相比于淘宝的点击收藏立马收藏成功,这样的做法明显是网易云多了一步,而个人观点分析这样做的是因为(网易云重度用户):


1.功能性来说:

歌单是早期网易云诞生的重要和特色功能


2.行为路径来说:

减少用户后期创建新歌单过程中 还要去重新收集歌曲,从而更容易定位快速创建自己的个人歌单

(歌单做分类 同时网易云歌单作为分享也占很大一部分)


总结来说:网易云是一个主打评论和歌单的音乐社区软件,先选择歌单多一步步骤,让用户后面听自己的歌单更为清晰的知道分类,也同时活跃于创建歌单的乐趣当中,让用户停留的时间越长,产品也就得到了一部份价值,从而增加了用户的粘性。这样就是“多一步”的特别之处。


实例B:爱彼迎的注册信息多步界面操作

(表单信息更便利一步)



爱彼迎在用户注册信息的时候,会把收集的资料分多次进行输入。

这样的设计解决了用户面对长篇表单填写的心理压力,同时告知余下的页面数,让用户心理存在预期考虑。


将复杂的表单分成若干步,并引导用户如何操作,并提示余下操作的步骤。一个这样的举动,不光是分段优化了表单的填写步骤的一小步,同时让新用户更轻松注册,提升了用户的注册转化率的一大步。


实例C:小红书淘宝等大部分app的隐藏退出功能
(隐藏退出更深一步)


目前近几年大部分应用的退出账号功能是做的比较隐藏(点击设置icon-最下方才能退出)
相比于早些年app在个人中心里最下方直接会出现退出登录
近年来隐藏二级或三级页面下的做法是在太普遍
而大概分析了如下App的的做法

(小红书)


小红书个人中心界面设置除去顶部个人信息展示

另外就是侧重笔记功能-收藏功能-赞过功能

因为这三个功能方便了用户能快速找到自己的收藏从而阅读或者自己发布,而设置功能仅用一个icon去代表,而整体布局就摒弃了传统的功能设置列表那样,更突出了产品功能侧重点,也迎合了产品的业务发展。


(淘宝)


淘宝的个人中心页面就十分大体量了 里面涵盖了诸多产品功能 一个很完备的生态系统 ,隐藏在二级的功能设置顺应了产品的向上的全面发展轨迹,设置功能(退出等)就属于一个超低频率的触发事件了。节约了界面的展示成本。

而存在较为直接展示退出账号的App吗?


答案肯定是有的~


(qq安全中心-Appstore)


此类应用首先功能比较单一,
就先拿qq安全中心来说,它是属于一个账户保护监管的应用,而为什么不把设置隐藏在更深的页面呢?
如图所示就大概看的出来,产品功能较为单一,再去添加一个设置功能二级入口就显得冗余了,且对于用户拥有多个账户 退出切换功能就比较重要了。


 Appstore也是如此 垂直于App的应用商店,在个人设置上功能较少,也是较为直观的放在底部。


存在的一些个人认为可调整的app

(印象笔记)



印象笔记的退出登录其实比较迷了 在个人中心界面放的犹为突出,而底部的现在同步功能我觉得在同类笔记中是较为重要。而这样本末倒置了,就是一个大的谜了。




--------------------------------------我是分割线------------------------------------




1.2 . 防错原则(Error prevention)

「比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前,就要防止用户容易混淆或者错误的选择」


实例A:银行类(信用卡)app的重复验证功能

(增加双重验证一步)


拿招商银行推出的掌上生活App来说,在用户每次重新打开的同时都需要重新验证身份(各类平台存在 Face ID 手势密码 登录密码等),而你在付款或者交易的过程中,需要再次密码验证, 这样每次都多一步交互动作,其实都是为了更加安全的保障用户的个人财产,同时也突出了产品的安全性和可靠性。


那为啥QQ 微信每次不这样呢?(常用设备环境下)

微信qq虽然也有锁定功能,但考虑用户使用打开频率较高,所以只在支付层面上保护验证密码。
 

实例B:微信的侧滑删除功能对比淘宝侧滑删除宝贝功能

(增加确认删除一步)



微信聊天列表的滑动删除在一次点击后会继续显示“确认删除”按钮,其实也是二次保障让用户有一个心理预期,效果其实和大部分APP弹窗显示删除一样。


而淘宝收藏列表的商品侧滑删除点击就立马删除,由于没有提示“确认字样”,对于很少用该功能的用户来说,会带来一种不符合预期的想法。


当然淘宝和微信区分做法认为考虑的是 :

淘宝:让用户能够快速删除该商品,不需要造成不必要的二次确认,浪费时间。

微信:删除的是聊天记录,是不可逆的操作,聊天记录对用户价值比较大,而淘宝的商品是可以继续收藏回来,就比重来看的话,两个删除操作其实大有不同。



实例C:优酷等视频类App 4G网络下播放提示

(增加提示一步)



在大部分视频App中,当在无WIFI环境下的4g网络连接下,播放视频过程中会显示当前视频为流量播放单中,是否继续使用流量播放下去,这样一个小提示,避免了用户因为WiFi断开导致产生大量流量费用。



--------------------------------------我是分割线------------------------------------




1.3 .易取原则(Recognition rather than recall)

「尽量减少用户对操作目标的记忆负荷,动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。这也说了交互的一部分,比如填完表单,下一步应该生成表单,而不是下一步就是完成。」


实例A:淘宝人生账单

(增加表单全部展示一步)



在最近新出的淘宝人生账单中,会展示出自己消费的数据,

并在分享之前再次确认信息的完整度。这里为什么要需要最后展示一步呢?


而 同等逻辑下网易云音乐2018年度报告,

没在最后展示所有分析数据,我们是否质疑没做到很优秀呢?


(网易云音乐2018年度报告)


其实不然,首先网易云音乐的报告长度很长,放在最后面会导致长图分享,没有单页面展示效果好,也照顾到了大量数据长图表单分享的复杂性。


1.并且我们目前大部分年轻人分享某个页面的时候, 惯用的操作是立马截图,

而网易云音乐做到了每个页面都放置了当前的二维码 从而做到识别二维码快速分享,

也能让用户快速打开自己的年度报告。


2.心理层面深度分析下:部分数据的内容,其实用户不太想分享,如果网易云做了最后的长图分享,其实会让部分用户不愿意分享自己的某些不想让别人知道的私密歌曲或其他。造成多余的用户操作(裁切或者隐藏)给部分用户带来不便。



淘宝人生账单案例

展示完表单数据,下一步生成对应表单,让用户有意识性的能再次确认内容,从而分享转发,而不是盲目的完成,造成用户的上一页查看产生困扰。


网易云音乐

的做法,由于数据的复杂性和多样性,聪明的以现在的用户操作行为和心理研究等,每页嵌入二维码,做到了更发散思维的方法拓展。



更多一步实例:Youtobe视频开头广告

(增加5秒跳过广告一步)


youtobe的广告是业内运营的比较好的例子,他的好在于,在一段30秒的广告当中,让用户可以选择5秒后跳过此广告,但为什么要让用户不看完广告就可以跳过呢?这不就让广告没有价值了?


其实不然,youtobe也分析了用户的等待广告行为,在投放youtobe的30秒广告当中,5秒的广告,会让用户会更有耐心看完,因为时间短,用户愿意等待,而不是用户去上个洗手间,去冰箱拿个汽水之类的行为,用户会更加专注于5秒的广告当中,而广告投放商们,他们会更加把5秒的视频内容做的更加突出重点,短短5秒就呈现出该广告的优势所在,从而用户会激发点击欲望,从而达到商业价值。这里的产品增加跳过广告一步,其实蕴含的价值,推广远比完整30秒的广告更加优秀。



--------------------------------------我是分割线------------------------------------



总结:


以上的诸多“多一步”,其实是产品思维的多一步分析。

促使我们在设计界面和产品功能架构上,

更加了解各类App设计布局的深层次逻辑思考。


设计优化的不光是视觉,更是产品思维的层层剖析。
在参考的过程中,不要盲目的抄袭模仿布局架构,边做边思考。

从而形成自己对产品的理解。

转自:站酷-tronyoung


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

如何设计更好的表单

ui设计分享达人



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


介绍表单设计里经常会犯的错误~

无论是注册流程,还是信息输入的界面,表单都是产品设计里最重要的组件之一。本文重点介绍了表单设计里常见的注意事项。不过这些只是通用的规则,实际应用中总有例外~



少于6个选项的情况,建议全部显示

把选项内容放在下拉框里,不仅隐藏了选项内容,而且需要两次点击。如果大于5个选项,建议用输入选择器,如果超过25个选项,建议加上搜索功能~



输入框长度可以暗示内容长度

输入内容的长度决定了输入框的长度。这种做法适合应用在一些固定长度信息的情况,比如银行卡号、电话号码、邮政编码等。



标签顶部对齐

相比左对齐,标签顶部对齐的表单用户完成率更高。移动设备屏幕大小有限,顶部对齐的效果也更好(标签文案长度不可控)。然而在大量数据输入时,还是可以考虑左对齐标签,因为浏览更,还能节省高度。



不要把占位符当做标签

用户在输入的时候就会看不到标签内容是什么了。详见Nielsen Norman团队的总结。

*也可以参考Google的做法,默认把占位符当作标签,输入时标签移动到输入框上方



将复选框/单选框上下排列

上下排列方便浏览阅读,横向排列选项内容会被选框控件隔开。



指出错误在哪

告诉用户具体哪里出错了,以及错误的原因。



等用户填完了再进行验证

不要在用户正在输入的时候就去验证,除非这能帮到他。例如在创建一个有字数限制的密码~



不要隐藏帮助信息

尽量默认显示帮助信息。如果信息太复杂,考虑在输入时放在输入框的旁边。



不要用*星号表示必填项,标出选填字段

用户不一定知道星号代表什么含义。还不如明确的标出哪些是选填字段。



标签和输入框成组

标签和对应的输入框形成一组,他们之间的间距要比组与组之间的间距小,这样用户不会困惑标签是属于上面还是下面。



按钮的文案描述具体意图

比如按钮上的文字建议写“注册”,而不是“提交”。



主次按钮有层次区分


关系近的内容成组

太长的表单让用户感到不知所措。有逻辑地分组能让用户更快地理解表单。

转自:站酷-大秘密mimi

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

提高JS性能的12个技巧

seo达人

在我们开发的过程中,应该始终考虑性能。而本文列举了有效提高系统性能的12个方法,如果朋友们有更多的技巧请在吴小迪的博客下方评论,谢谢。



性能是创建网页或应用程序时最重要的一个方面。没有人想要应用程序崩溃或者网页无法加载,或者用户的等待时间很长。根据Kissmetrics,47%的访问者希望网站在不到2秒的时间内加载,如果加载过程需要3秒以上,则在40%的访问者会离开网站。



考虑到以上这些数字,你在创建Web应用程序时应始终考虑性能。为了帮助你开始,以下提供了有效提高应用程序性能的12种方法:



一:在浏览器中缓存

要这样做有俩种选择。第一种是使用JavaScript Cache API,我们可以安装service worker来使用它。第二种是使用HTTP协议缓存。



访问某个对象通常要用脚本。通过把重复访问的对象存储在用户定义的变量中,以及在后续对该对象的引用中使用变量,可以立即实现性能的提升。



二:定义执行的上下文

为了有效地衡量你在程序中加入的任何改进,你必须创建一组定义良好的环境,以便测试代码性能。



对所有JavaScript引擎的所有版本进行性能测试和优化实际上是不可行的。但是,在单一的环境中进行测试并非一个好习惯,因为你可能会得到片面的结果。因此,建立多个定义良好的环境并测试代码是否有效非常重要。



三:删除未使用的JavaScript

此步骤不仅会缩短传输时间,还会缩短浏览器分析和编译代码所需的时间。为此,你必须考虑以下几点:



如果你检测到一个用户未使用的功能,最好删除所有与之相关的JavaScript代码,这样网站的加载速度会更快,用户也有更好的体验。

还有可能,你错误地加入了一个并不需要的库,或者你有依赖项,这些依赖项提供的功能在所有浏览器中原本就有,那么你无需再增加多余的代码。

四:避免使用太多内存

你应该始终给内存加一条限制,那就是只有绝对必须的内容才能使用内存,因为你无法知道运行应用程序的设备到底需要多少内存。只要你的代码要求浏览器保留新的内存,浏览器的垃圾收集器就会被执行,并停止JavaScript的运行。如果经常发生这种情况,页面将变慢。



五:推迟不必要的JS加载

用户希望页面快速加载,但并非所有函数都需要在页面的初始加载时就可用。如果用户必须执行某个操作才能执行某个函数(例如,通过单击某个元素或更改选项卡),那么你可以将该函数的加载推迟到初始页面加载之后。



通过这种方式,你可以避免加载和编译那些会延迟页面初始显示的 JavaScript 代码。页面完全加载后,我们可以再开始加载这些功能,以便它们在用户开始交互时立即可用。在 RAIL 模型中,Google 建议将此延迟加载以 50 毫秒为单位进行,这样就不会影响用户与页面的交互。



六:避免内存泄漏

如果内存正在泄漏,则加载的页面将保留越来越多的内存,并最终占用设备的所有可用内存并严重影响性能。你可能见过此类故障(并且可能对此类故障感到懊恼),例如在带有轮播或图像滑动条的页面上。



在 Chrome 开发者工具中,你可以通过在“性能”标签中记录时间线来分析你的网站是否存在内存泄漏。通常,内存泄漏的原因是,你从页面中删除了 DOM,但有一些变量还在引用这些 DOM,因此,垃圾收集器无法消除它们。



七:适当的使用Web worker

当你执行耗时很长的代码时,请使用 Web worker。根据 Mozilla 开发人员网络 (MDN) 文档:“Web Worker 可以在与 Web 应用程序的主执行线程分开的后台线程中运行脚本操作。这样做的好处是你可以在一个单独的线程中执行耗时又费力的的处理,同时让主(通常为 UI)线程运行而不被阻塞或减慢。”



Web worker 允许代码执行处理器密集型计算,而不阻塞用户界面线程。Web Worker 允许你生成新线程并将工作委托给这些线程以获得的性能。这样,通常会阻碍其他任务且需要长时间运行的任务将被传递给 worker,从而让主线程可以在无阻碍的情况下运行。



八:适当将DOM元素保存在局部变量中

访问 DOM 会很慢。如果要多次读取某元素的内容,最好将其保存在局部变量中。但记住重要的是,如果稍后你会删除 DOM 的值,则应将变量设置为“null”,不然会导致内存泄漏。



九:优先访问局部变量

JavaScript 首先搜索以查看变量是否存在于本地,然后才在更高级别的作用域内逐步搜索到全局变量为止。将变量保存在本地作用域内能让 JavaScript 更快地访问它们。



局部变量是基于最具体的作用域的,并且可能会穿过多个级别的作用域,因此查找这一动作可能导致出现通用的查询。在一个它前面没有变量声明的局部变量中定义函数作用域时,需要在每个变量之前加上 let 或 const,以便定义当前作用域,防止查找并加速代码执行。



十:避免使用全局变量

因为脚本引擎在从函数或其他作用域内引用全局变量时需要逐一查看作用域,所以当本地作用域丢失时,该变量将被销毁。如果全局作用域中的变量无法在脚本的生命周期内持续存在,则性能将得到改善。



十一:实施一些优化方案

始终使用计算复杂度的算法和最佳的数据结构来解决任务。



重写算法以获得相同的结果和更少的计算。



避免递归调用。



给重复的函数加入变量、计算和调用。



分解和简化数学公式。



使用搜索数组:用它们来获取基于另一个的值,而不是使用 switch/case 语句。



使条件总是更有可能为真,以更好地利用处理器的推测执行。



如果可以,请使用位级运算符替换某些操作,因为这些运算符的处理周期较短。



十二:使用工具检测问题

Lighthouse 是一个很好的网页性能工具,它可以帮助你审核性能、可访问性、最佳实践和 SEO。谷歌 PageSpeed 旨在帮助开发人员了解网站的性能优化和潜在可改进的方面。这些组件旨在识别网站是否符合 Google Web 性能最佳实践,以及将调整过程自动化。



在 Chrome 中,你还可以使用主菜单中的“更多工具”选项来查看每个选项卡使用的内存和 CPU。对于更高级的分析,你可以使用 Firefox 或 Chrome 中的开发人员工具“性能”视图来分析不同的指标,例如:





devtools 的性能分析允许你在加载页面时模拟 CPU 消耗、网络和其他指标,以便识别和修复问题。





为了更深入地了解,建议你使用 JavaScript Navigation Timing API,它允许你详细测量代码的每个部分从编程本身中获取的内容。



对于基于 Node.js 构建的应用程序,NodeSource Platform 也是一种非常好、影响低的方式,它可以在非常精细的级别上探索应用程序性能。



全面的 Node.js 指标可帮助你识别内存泄漏源或其他性能问题,并更快地解决这些问题。



最后的说明在代码的可读性和优化之间保持平衡很重要。代码由计算机解释,但我们需要确保代码将来可以由我们自己或其他人维护,因此它们需要易于理解。



请记住:应始终考虑性能,但不应将性能凌驾于错误检测和功能添加之上。

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

快速了解“私域流量”

资深UI设计者

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

为什么“私域流量”如此火爆,互联网人必看!

最近一个全新的名词频繁出现在我们的视野里,它和去年的“增长黑客”一样,在互联网圈子里被炒的火热,它伴随着微商和社交电商而出现,它已经悄悄改变着整个互联网营销格局,它就是“私域流量”。


恰好上周我在团队内部也分享了关于“私域流量”的话题,这期间还纠结要不要整理到公众号里。然鹅,乐于分享的精神将我腐蚀~,今天就不聊设计、不聊产品,来谈一谈我眼中的“私域流量”,拓展一丢丢互联网的思维边界。




一、什么是私域流量?



要读懂私域流量,首先要了解流量池的概念,流量池是流量的蓄积的容器,主要是为了防止有效流量流走而设置的数据库,比如:淘宝、百度、微博等。只要有足够的预算,可以持续不断的获客(获取新用户的渠道),被称为流量池。


而私域流量指的是品牌或个人自主拥有的、无需付费的、可反复利用的、能随时触达用户的流量。它并不是一个新生事物,只是与我们曾经接触的流量相比,更加便于商户或个人使用的流量。


比如:之前社交媒体还没普及的时候,私域流量就是客户的联系方式(手机号、邮箱、住址等),想要联系他们时,可以打电话、发短信、发邮件、甚至往他们家寄样品体验。当时这些客户信息甚至都是公司的商业机密。


随着时代的进步,如今的私域流量是一个完全属于“你”自己的私人地盘,大到年入上亿的商家,小到个人经营者。这些流量存在于公众号、微信好友、微博、社群、朋友圈、头条号、抖音等社交媒体里,它是一切你可以随时掌控的私人流量池(既私域流量),这个流量池里聚集的是你的粉丝、客户和潜在客户。


而产品则是承载用户流量的工具,即使用户分布在不同的产品里,但只要是在个人账号的,就是你的私域流量。顾名思义,私域流量就是属于自己的流量,相对公域流量而言,主要指个人或品牌自主拥有的自由流量,它需要通过沉淀和积累来获取的更精准、转化率更高的垂直领域流量。





二、公域流量与私域流量



任何一家互联网公司,都离不开一个核心问题——流量。得流量者得天下,有了流量才能进行下一步转化,“流量”既代表大众的关注点。


对互联网公司来说,流量就是市场,流量就是用户,流量就是商机。我们讲的私域流量就是这部分流量属于商家或个人的“私有资产”。既然有私有,那必然有公有。与私域流量对应的是公域流量,比如淘宝、京东这些大的流量平台,所有的流量都要花钱买,而且越来越贵,这里的“花钱买”指的是广告推广、排名推广等。有了曝光率,用户的关注点(浏览行为)自然就来了。


这两类流量有什么本质上的区别呢?


公域流量和私域流量并不是绝对概念,而是相对概念。比如一家商场开在步行街上,商场里的流量相对于步行街就是私域流量,因为店铺基于步行街内。而步行街的流量相对于商场就是公域流量,因为其他店铺也可以享用。再比如,从淘宝里打开一个网店,网店里的流量相对于淘宝就是私域流量,而淘宝的流量相对于网店又成了公域流量。同样,公众号的流量相对于微信就是私域流量,微信的流量相对于公众号就是公域流量。


所以说,公域流量就像大海,刚开始鱼多,捕鱼的人少,即便我们捕鱼的技术一般,也能有所收获。随着捕鱼的人越来越多,捕到鱼的成本越来越高,鱼的质量却越来越低,于是很多人就开始自建鱼塘养鱼,这样捕鱼的成本低了,也更容易捕到鱼了,还能租出去让别人钓鱼,自建鱼塘就是私域流量。伴随着流量红利的减缓,公域流量逐渐饱和,商家很难再以较低的成本来获客了,为什么是较低的成本?请往下看案例。


公域流量:

公域流量也叫平台流量,它不属于单一个体,而是被集体所共有的流量。来看看我们常见的的平台流量五大板块:


电商平台(淘宝,京东,网易考拉等);

内容聚合型平台(腾讯新闻、网易新闻、今日头条等);

社区平台(百度贴吧、微博、知乎、简书等);

视频内容型平台(腾讯视频、爱奇艺、抖音等);

搜索平台(百度搜索、谷歌搜索、360搜索等)。


对于平台中的个体来讲,他们只能以付费或活动等方式,在满足平台规则的原则下获取流量,留存率较差,因为个人没有支配权,只能跟随平台的发展规律顺势而为,且流量始终属于平台,个体稍有过分的营销嫌疑就会被封号。很显然,他们都依靠于平台获取流量,并且不能完全掌控自己的流量分发。


这种形式所带来的弊端便是每次流量的使用需支付高昂的费用。当然,优点仅为流量获取方式相对简单,花钱购买,付费即可,平台会根据你付费的级别来定制推送计划。但这种推广方式,相当于大海捞针,比如我们在百度上做推广,想利用百度的流量来曝光我们的UI设计网课,但是每天使用百度的用户来自于各个阶层、各个岗位,需求五花八门,可能100个访问用户中,只有1个是具备目标用户条件的,所以平台流量不能精准的曝光到目标用户所在的群体。


私域流量:

接下来,我们对比一下私域流量,它属于单一个体的流量。比如某个公号的关注用户都是UI设计师,那这个公号的私域流量就是推广UI设计网课的首选目标,因为大家都有这个需求、都来自这个领域,只不过需求的渴望程度不一样而已。在100个阅读用户中,可能有10个会仔细了解。所以这种推广方式的精准度要比平台流量更高,关键是推广费用极低。弊端是曝光率、影响面积、用户热度是临时性的,但在短时间之内是有明显的用户增长,这就是所谓的“极速获客”、“热点获客”。


所以我们常见的私域流量都存在于个人号中,他们可以完全掌控自己的流量分发。比如在微信中,好友也是我们的私域流量,我们可以选择不同的好友分组推送消息,所以私域流量最大的特点是直接触达用户。


同时,私域流量可以反复利用,更适用于复购属性强的产品,利于增加复购率,比如我们生活中一些小超市的营销手段就是利用私域流量增加顾客的粘性和复购率的:在超市购买商品支付时,收银员要求你添加他们店长的微信号,添加成功可以送多少积分,打多少折扣,这就是获客的第一步,然后店长会把这些顾客拉入到一个微信社群里,每天定时推送一些打折商品、优惠新品等,有些用心运营的还在社群里做“抢红包”的活动,抢到最多的前三名当日到店购买商品送500积分等。


我们可以看出,比起公域流量,私域流量更注重引导和运营。如果用一句话概括私域流量和公域流量的区别,就是:私域流量的用户属于个体,公域流量的用户属于平台。

Image title




三、私域流量的特点与价值



1、更可控

假设某平台有一百万用户,然而这一百万用户跟我们没有任何关系,我们只有把里面的用户导入到自己的平台,才算自己的用户,后续对这些用户的针对性服务才有可能发生。


就拿“抖瘾”来说,用户喜欢的短视频很多,当对其中一个视频感兴趣时,可以选择关注号主,关注后可以第一时间享受到号主提供的视频服务,而对号主来说,关注者就是从平台引入的私域流量。当关注号主的用户越来越多时,这个号主就成了所谓的网红,并在特定领域有一定的影响力,因为后面有一大群“私域流量”在支持他,基于此,一些其他的业务和广告就随之而来,这伴随的也就是收入。号主也可以选择性服务,将关注用户人群细分,从而合作不同的品牌。



2、更省钱

产品在平台流量获得曝光需要支付高昂的费用,比如:关键词竞价、关键词推广等,如果你想通过平台获得不花钱的曝光...还是别想了,不可能的,人家的流量也是花钱砸出来的。


私域流量几乎是免费的,一旦把用户从平台流量引入到私域流量,比如:微信社群,那真是我的地盘我做主,怎么玩都是我的权利,当然也不能太放肆而丧失了所谓的本质,如果用户体验不好,分分钟会被别的“私域流量”引导走,毕竟选择也是用户的权利。再就是前面举的UI设计师网课和超市的例子,直接跟“熟客”建立联系,省下了渠道推广费不说,熟客们还愿意为你安利更多用户,这相当于帮你免费做了宣传推广,无形中产生了裂变。所以产品在私域曝光的成本要比平台曝光低得多,甚至几百块就可以搞定一个精准推广,而这个精准推广还会产生二次流量。



3、更丰富的营销玩法

私域的运营能让商家与消费者建立更亲密的连接,那商家就可以基于产品做延展,不管是二次营销还是多元化营销,只要你输出的内容不让用户失望、讨厌,就有助于销售。


我们身边最常见的就是分享文章到朋友圈进交流群、参与文章中的红包抽奖、评论区积攒送书、公众号文章互推等活动。这无形中就是为商家的私域流量进行了裂变和促活。


当然这些只是很小一部分的玩法,也不违背互利的原则:我分享你的文章进了我想进的交流群、我帮你的文章带来一次阅读,但我可能获得抽奖红包、我发动身边朋友帮我积攒,对你的产品进行了裂变式曝光,但我得到了想要的书籍...


写到这里让我想起之前在网上看到的段子“我把你当朋友,你却把我当你的私域流量”。然而,不管是现实还是网络,不可能有人在商业环境里无私的付出,虽然说的很透,但我们还是需要正确认识现实,毕竟这是个资源互换、资源共享的互联网时代。

Image title



4、更高的客户稳定性

私域流量可以有效防止用户流失,尤其是你经常交互的用户。通过运营私域流量,与用户建立起情感互动(交互),你推荐的产品他们也不会条件反射般地当作广告去屏蔽掉,同时你的诚恳推荐也会让用户稳定性越来越好,不容易流失。

现在很多商户都会主动以个人号去添加一些顾客,通过私人关系为他们提供订座、专属折扣和所谓的VIP服务,平时有事没事唠唠嗑、相互点个赞、时不时来一句赞美的评论啥的。所以,商户在用户面前曝光多了,也能起到唤醒用户记忆的作用,久而久之复购率也就提升了。



5、更利于塑造品牌和个人IP

好品牌反映了好口碑,在某种程度上会帮助用户消除掉选择困难症,比如我们买鞋子,品牌这么多,我肯定首选我心目中排在第一的,这个“第一”就是用户对商户精神层面的认知和信任,品牌塑造的过程就是用户忠诚度建立的过程。


私域流量的交互,可以拉近品牌和用户之间的距离,通过产品提供的服务把同类人群聚集在一起,这些人累计起来的影响力不可小瞧。不管商户大小,掌握私域思维,都能有效的促进与用户的沟通,增加用户粘性和忠诚度。


在运营私域流量时,最常见的错误是沿用以前的思维。比如很多公司让客服团队搞大量微信个人号做朋友圈运营,但其实没有任何一个微信用户希望自己的朋友圈里多了一个广告客服。私域流量转化的核心是信任,是基于人与人之间的信任。这里有一个非常重要的环节,就是个人IP化打造,打造一个行业KOL或专家的身份,比如你在某个领域有丰富的行业经验,通过某些途径将你的经验分享给有需要的人,这就从中产生了浓厚的信任,因为在用户眼里,你就是行业的专家(你说啥都对~),完成这步之后,私域流量才可能提高转化。说白了就是你(商户)能为用户提供什么样的服务,这些服务被多少人所认可。




四、身边常见的导流方式



1、靠利益诱导

比如关注公众号领红包、下载APP送现金、注册领优惠券等。在流量池获得曝光后,用户看到进入私域流量有好处时,一般都会形成转化。虽然数据在短时间内很美丽,但留存率和活跃度不敢保证,这需要产品内的引导和体验来支撑。



2、解决内容诉求

做优质的内容输出,解决用户的内容诉求,靠内容本身打动用户形成转化。比如你正在看这篇文章,你觉得有点收货,就产生了关注我公众号的想法,并做出了关注的行为,这个“行为”就是一次转化。所以做内容私域的本质在于产出有价值、有思考、有帮助的干货。当别人发现你产出的东西,对自己有帮助时,会主动前来,这是长久的打法。




五、写在最后



私域流量的拉新和运营,就是与人打交道、与一群人打交道,和做产品一样,满足他们的核心需求,以及一些增值需求。现在关于私域流量运营还没有太多成熟的玩法,商家多半还在摸索和尝试中。我们也不要只盯着微信平台,用户在哪里流量就在哪里,私域流量池就在哪里,就像有些朋友从公众号转战到“抖瘾”一样。


掏心窝子:当然我个人并没有太在乎私域流量给自己带来的利益,因为我始终把在UI中国写文章当做一种学习成长的方式而已,通过输出一些复盘和有挑战的知识点,帮助自己突破思维边界,同时还能结交各位同行,简直两全其美。



❤️希望对你有所帮助~




是的,我们距离目标又近了一步,标红的你都看了吗?

Image title

文章来源:ui中国

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

「表单设计」知识点

资深UI设计者

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

表单是产品设计中的重要组成部分,如果说弹框的主要作用是完成信息反馈,那么表单的主要作用就是完成信息录入。任何一个表单都可以被拆解成三个最基本要素:标签(标题)、输入框和按钮。

标签是用来告诉用户这个列表项是什么;输入框是供用户完成信息录入的;按钮是供用户完成信息录入后点击进入下一个流程的。

标签

根据标签所处的位置,可以将其分为左标签、顶部标签和行内标签。

1. 左标签

左标签在目前来说是最常见的一种标签样式,但是这并不意味着我们可以无所顾虑地使用它。以手机端为例,手机端的屏幕尺寸(宽度)有限,左标签会占据屏幕较大的空间,此时右边的输入框就可能无法展示完整的信息。

例如,如果用户输入的地址过长,就会造成信息的展示不完全,这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认,如果连完整的内容都无法获知或者获知的难度较大,则用户根本不会进行下一步操作,这就造成了操作流程的中断。所以,我们在使用左标签的时候,一定要考虑对多行文本的展示。

2. 顶部标签

顶部标签是指位于输入框上方的标签,这样输入框就可以独占整个页面,信息可以得到更完全的展示。

与左标签相比,顶部标签可以给输入框的内容腾出足够的空间。在界面设计中,更多的空间还意味着具有更高的信息层级。同一个表单中会有很多的输入项,有些输入项的优先级很高,我们可以考虑使用顶部标签的样式来进行凸显。

但是这种布局方式也有缺点:会占据更多的纵向空间,之前一屏就可以展示的内容,现在用户需要滑动页面才可以看完。

3. 行内标签

行内标签又可以被看成是输入提示,其样式看起来很适合手机端的表单设计,因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后,就看不到这些标签了。如果操作提示字数很多,例如密码规范,那么用户记忆会很吃力。我们可以在调起的键盘顶部加上提示,减少用户的记忆成本。

但是,如果表单项目过多,则用户在填写的时候很容易串行,可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是,用户因为无法看到标签,这类错误是无法被检查出来的。为了解决这个问题,我们可以在行内标签前加一个图标来标识这个列表项,图标所占据的空间不会太大,而且会提高页面的美观性。

当表单项目过多时,我们要对其进行整合分组来提升内容的可读性。如下图所示,这里将 15 个字段分成 3 组。同样的内容,但给用户的印象却大不相同。

输入框

输入框的作用是供用户完成信息录入,这里我们的设计思路是如何提升信息的录入效率。我见过很多设计师偷懒,把所有的输入框都做成文本框样式,用户必须调起键盘一个字一个字地输入,这种体验是非常不友好的。如果我们想让用户录入个人信息,其中的生日和城市就应该使用日期和城市组件,而不是让用户手动输入。

即使非要让用户手动输入,我们同样可以根据不同的场景给用户提供更友好的体验。如果要输入的是数字,那么应该给用户调起数字键盘;如果要输入文本,那么应该给用户调起全键盘,避免用户手动切换键盘。

即使用户输入符号,我们也要考虑如何减少用户的操作步骤。例如,我们发现当光标位于周星星三个字右边的时候,点击「“」键,会出现左右双引号;当光标位于周星星三个字中间的时候,点击「“」键,只会出现左双引号。这是因为光标在文本右边,用户只要输入「“」,那么就必然需要「”」来结尾,这里直接提供左右双引号更合适。如果光标是文本中间,无法确定「”」需要在哪里出现,所以只展示「“」。

容错性设计

在理想状态下,用户填写完表单信息,然后点击「提交」按钮,系统显示提交成功。但是,现实情况却是用户在填写过程中经常会发生错误,那么如何将容错性原则融入表单设计中呢?

首先我们需要给予用户足够的操作提示,日期录入就是最典型的例子。不同的地区对于日期录入的格式也不一样,「02/12/2019」到底是2019年2月12日还是2019年12月2日?如果我们不提示用户,用户就不知道应该怎么输入。

为了避免用户犯错和提升用户的信息录入效率,我们可以提供自动完成录入功能,当用户在文本框里输入时,系统可以猜测可能的答案,显示可选列表,避免了用户手动输入造成的错误。

如果你确定对用户足够了解,在用户进行信息录入时,可以提供合理的默认值。因为对用户来说,填写信息永远都不是一件有趣的事情,设置合理的默认值可以节省用户的操作时间。

能让系统完成的任务,就尽量不要让用户来操作。用户会犯错,而系统不会。表单容错性设计的另一个方向就是梳理表单中的鸡肋项目。

现在很多的购票类 APP 都提供送票上门的功能,这就需要用户填写收货地址。以交通出行类 APP 飞猪、途牛和去哪儿为例,其中,上图中左侧的两张图,飞猪和途牛都需要用户填写邮政编码,而在去哪儿中则是选填的。其实根据用户填写的地址,我们已经可以获取到邮政编码,邮政编码完全可以自动回显,不需要用户手动输入。

而在小米有品 APP 中就可以根据用户填写的地址回显邮政编码,这看起来很方便。这只是看起来很方便,我们可以继续思考一下:如果系统完全可以根据用户填写的地址获取到邮政编码,那么邮政编码这一项完全可以不在界面中露出。其实很多产品在用户填写收货地址的时候已经不需要用户填写邮政编码了。

对于容错性原则,我们还要考虑如何给用户展示合理的报错提示。目前来说,我们经常看到的一个报错提示样式是对话框。在我看来,对话框并不是一个好的选择。因为用户如果要进行修改,就必须要关闭对话框,那么用户就看不到错误信息了。如果错误原因和解决方案的字数较多,那么用户就需要花一定的时间记住这些信息,然后再来修改,这会增加用户的记忆负担。如何才能设计好表单的报错提示呢?表单中的报错提示可以分为两种:单行表单报错提示和多行表单报错提示。

单行表单中意味着在当前界面中表单只有一行输入框,其一般用于手机号、银行卡号、身份证号和金额的录入。对于此类场景,建议使用输入框底部的文字报错提示样式,并且要对录入的信息进行实时校验,不要等到用户进入下一个界面才告知用户在上一个界面中手机号输错了。

给多行表单进行报错提示时,除告知传统的错误原因和解决方案外,还应该告知用户错误的位置。因为在一个界面中,有很多的输入项,用户在短时间内无法把报错提示和错误项联系起来,因此,为了提升用户对于错误场景的感知效率,对错误项进行标记是非常有必要的。具体的实现方式有改变文字颜色、输入框背景色和设置提示文案抖动。

以上图为例,这里通过改变文字颜色或输入框背景色来标记错误位置,用 Toast 告知用户错误原因和解决方法。我们也可以不改变配色,让该输入框左右抖动也能起到快速标识的作用。

按钮

表单中的提交类按钮按照位置可以分为以下三种。

其中位置 A 是最常见的布局样式,这样的布局符合用户的视觉习惯和操作流程:用户由上而下完成表单信息的填写,最后点击「提交」按钮进入下一个页面。但是这种布局有一个问题:如果表单项目过多,则用户必须滑动页面才能完成提交操作。

位置 B 跟位置 A 很相似,唯一的区别在于位置 B 是固定在页面底部的。那么位置 B 跟位置 A 的适用场景有什么不同呢?位置 B 意味着用户在不用滑到页面底部的情况下就可以点击「提交」按钮,那么在什么样的场景下用户不用滑到页面底部就可以提交呢?

其实在很多表单中,不是所有的信息都需要用户手动录入的。以前面提到的邮政编码为例,只要用户输入了地址,系统就能获取邮政编码,相关信息是可以直接回显的,用户没有看到此类信息的必要性。所以,对于一些重要性不是很高、不强制用户看完的表单项目,很适合使用这类底部悬浮按钮。最常见的就是各种协议页。

位置 C 出现的原因在于,对于前两种方案,当调起键盘时就会遮住「提交」按钮,用户必须先关闭键盘才可以点击「提交」按钮,多了一步操作。而位置 C 可以完美解决键盘遮挡的问题,但是其不符合用户的视觉习惯和操作流程。而且手机大屏化是一个不可逆的趋势,用户在单手握持手机的情况下很难直接点击到界面右上角的「提交」按钮,增加了操作难度。

其实位置 C 完全可以被忽视,因为现在很多产品已经支持在调起键盘时滑动页面,所以位置 C 最大的优势已经不复存在。这里还介绍位置 C 的原因是希望读者知道交互规则是会随着技术的发展而不断改变的,可能在这本书里提到的一些技法过一段时间就会落伍了。要成为一名优秀的设计师,必须具备持续学习的能力。

文章来源:优设

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

跟全球 Top 4 的时尚杂志,一起学平面设计基础知识!

资深UI设计者

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

在日本文化中,「属性标签」是一个重要的组成元素。一个人是「御宅族」还是「视觉系」,抑或是「食草男」,细分标签总会添加上去。虽然这样的标签会给人一种「固化」的感觉,但是有时候也会让人对一个事物有更清晰明确的认知。

日本的杂志同样如此。一本杂志应该针对什么样的群体,带有什么样的特征,传达什么样的情绪,都会有非常清晰的「属性标签」。

20世纪80年代是日本时尚杂志百花齐放的年代,众多现有知名日本杂志诞生,例如《ViVi》、《CanCam》、《JJ》、《mina》、《sweet》、《SPRING》等等。不同的杂志风格不同,面向的群体也不同,上面所带的标签也不同。

比如时尚杂志《PopEye》是针对「City Boy」的男性,「美式复古」和「学院派风格」是这本杂志最典型的标签。

而女性向时尚杂志《mina》的标签则是「清新少女」、「独立」、「青文字系」。「青文字系」是一个非常日本的标签,简单来说,带有「青文字系」标签的杂志在精神内核上强调女性要潇洒独立,不应该对男性谄媚,带有同样标签的杂志还有《sweet》、《steady》、《mini》、《SPRING》、《InRed》。与之相反的标签则是「赤文字系」,带有这一标签的杂志特别强调女子力,会教读者如何穿搭、如何做才能讨男生欢心,带有这一类标签的杂志有《JJ》、《ViVi》、《Ray》、《CanCam》。当然,近年来还出现了「黑文字系」,其实指的是喜欢穿一身黑的姑娘……

不过言归正传,今天我们要聊的主要是《mina》这本杂志。《mina》其实在新世纪之初进入过中国大陆,当时中文名称为《米娜》,巴拉排行榜曾将其列为全球十大时尚杂志之一,是日本少女清新风格的杂志。

《mina》能获得这样的赞誉,和它本身极高的内容素质是分不开的。包括尾身沙纪在内的许多著名的摄影师,会给《mina》拍摄图片,而模特更是有村架纯、竹内凉真这样的一线明星。

清新秀丽的妆容,凸显少女气质的整体设计,真实而细腻的场景,《mina》借助精心打磨的视觉排版,将女性最真实可爱、贴合年纪的美丽以及元气满满的少女感,都呈现出来了。

如果你是一名热爱视觉和排版设计的设计师或者爱好者,《mina》简直就是为你量身定制的排版素材库。稍加拆解,你会发现这个杂志中到处都是可供学习的排版知识。

版心:创造不同的视觉感知

《mina》杂志因为其少女特性,多样活泼的使用不同的区域放置元素,同一本杂志会给你带来不同的视觉效果。下面左图四周无间距的设置,会使你的视线更加开阔,无论看向版面的哪一部分,都可以传递信息给你,吸引你打开这本杂志。右图的框线设置,限制了阅读的区域,让你的视线聚焦在框线内,阅读精心为你准备的内容。

下面左图三张图片和两段文字的排列,使整个版面显的更加充实和生活化,而右图单张图片和零星的文字使得整个版面显的更加高级,这不仅仅是图片和颜色选择的影响,更多的还有元素的排列给你带来的视觉感受。

分组:使版面信息清晰且富有条理

为了让读者更加易于阅读,在该版面上停留更长的时间,分组的设计在杂志中较为常见。图文元素整齐的搭配,是不是给你一种画面美观,信息可信赖的感觉呢?这样的设计也更加的吸引读者进行阅读。

反复和对齐:使版面富有韵律感而不失规整

同一排版样式的反复使用,会给你舒适的阅读体验,整个版面会更加的有节奏感,不会让你觉得某一元素特别跳脱。同样,为了美观和便于阅读,无论是图片还是文字,都遵循着一定的对齐原则,常见的有左对齐、上对齐和居中对齐。

对比:通过视觉差异突出重点

活跃于广告界的白承坤先生说,无论使用怎样的图片,目的都是为了让眼睛停留两秒钟。同理,各类元素或色彩之间的对比是杂志常用的让你停留「两秒钟」的方式。由于视觉心理的作用,相对来说,大的元素、鲜艳的元素会更加的吸引人眼球,引人注意。

出血位:打破规整,活泼版面

对于少女杂志而言,如何体现少女心和元气满满的感觉是一个需要解决的难题,而出血的设置为这个难题提供了一把钥匙,让整个画面活泼生动起来,右图奶茶开放式对话框的加入,有一种奶茶说「快来喝我!」的活泼感,使得整个版面顿时可爱起来。

留白和透气:创造呼吸与韵律感

《mina》很少在版面的四角放置满满当当的元素,是因为适当的留白可以让人在众多的元素冲击中舒缓下来,给你清新舒适的观感。让你在开阔的视野中,使杂志想展现出来的重点,成为你的焦点。这样好用的突出重点的方式,快快学起来吧。

抠图和四方版:控制元素与环境的关系

抠出来的人物没有其固有的背景,会让你聚焦于少女的动作和轮廓,隔着屏幕都能感受到少女满满的活力。而四方版更加强调人与环境的关系,让你得以获得更多的信息。两种方式如何恰当的使用,就看你想用来传递什么样的信息啦!

传递信息是最重要的,其余的套路就快去打开《mina》找寻吧!

文章来源:优设

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

提升语义分割性能的几种方法

seo达人

本文主要记录几种提升基于深度学习的图像语义分割精度的方法,以防忘记!

                                        By zhengzibing2011, 2017年10月21日-星期六

1

1.图像语义分割面临的挑战

(1).特征分辨率减小:主要是由神经网络中的重复最大池化和降采样(stride跨越)操作造成的,而采用此种操作的原因是 

A.降维,以免参数过多难以优化; 

B.基于DL的语义分割是从用于分类任务的CNN转化而来,而在分类任务中,分类器要求对输入的空间变换具有不变性,池化恰能满足这样的要求。



(2).不同scale下的目标存在的状况:主要是目标在multi-scale图像中的状态造成的,因为在同一种尺度下,不同目标的特征往往响应并不相同。如需要在较大的尺度下才能较好地提取图像中比较小的目标,而较大的目标为了获取全局性信息也必须在较小的尺度下才能实现。



(3). CNN的空间不变性造成定位精度的下降:对于分割任务而言,由于pooling操作引起的分类器对输入的空间变换具有不变性丢失空间信息,内在的限制了分割的空间精度。



2.潜在的解决方法

FCN作为将CNN应用于semantic segmentation的forerunner,贡献巨大。但不可回避,其提出的方法具有一些不足。为保证却终的feature map不至于过小,FCN的conv1引入pad=100,引入了较大的噪声; 

32倍upsample(deconvolution)非常粗糙,而且deconvolution的filter不可学习; skip architecture虽能有效提高精度,但需要3次训练即FCN-32s->FCN-16s->FCN-8s。除skip architecture外。随着研究的深入,针对以上挑战,有以下几种方法解决:



(1). Encoder-Decoder结构

采用此种思想的代表为DeconvNet,SegNet,其基本思想是采用一种对称结构将由于pooling操作而减小的feature map通过逐步的upsample逐渐恢复到原图像大小,同时在upsample阶段,融合了subsample中pooling index,具体细节可参见原文。 





(2). Atrous convolution

feature map的减小是由于pooling造成的,为确保一定精度的feature map,能否不使用或减少使用pooling呢?理论上是可行的,但如果这样做会使得需要优化的参数过多,重要的是难以基于以前的model进行fine-tuning,atrous convolution解决了这个问题。 

在DeepLab中令pool4,pool5的stride=1,再加上1 padding,这样经过pooling后feature map大小不变,但后层的感受野发生了变化,为使感受野不变,后面的卷积层使用atrous convolution,其作用是在不增加参数的前提下,增加感受野。因此,解决了feature map空间分辨率下降的问题。







(3). ASPP

针对不同scale下的目标存在的状况问题,可通过两种方法解决: 

A.标准的多尺度处理方法,用共享相同参数的并行CNN的分支,从不同尺度的Input image中提取score map,然后进行双线性差值,最终对它们进行融合,在不同尺度上获得每个位置的最大响应。训练和测试时均这样处理,比较繁琐的是需要计算输入图像的每个尺度在各layer上的特征响应。 





B.基于任意尺度上的区域都可以用在这个单一尺度上重采样卷积特征进行有效地分类的思想,使用多个不同采样率上的多个并行多空卷积,每个采样率上提取的特征再用单独的分支处理,融合生成最后的结果。











(4). FC-CRF

CRF几乎可以用于所有的分割任务中图像精度的提高。CNN可用于对图像中的目标进行分类并预测出目标的大致位置,但并不能真正描绘他们的边界。因此,将DCNN的识别能力和全连接CRF优化定位精度耦合在一起,能成功的处理定位挑战问题,生成了的语义分割结果。全连接CRF理论较为复杂,在此不作阐述。类似的概率图模型(PGM)还有MRF,G-CRF(高斯-条件随机场)。







3.总结

目前,暂且先记录以上4种提高分割精度的方法。后续若有新的方法,予以追加!

————————————————

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

日历

链接

个人资料

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

存档