首页

Widget-网络革命新思维

鹤鹤

从6月分的全球开发者大会至今,大部分苹果用户都更新至iOS 14正式版系统。Widget成为新版本系统中讨论度最高的部分,知乎、小红书、公众号各个平台都能会看到关于桌面小组件的讨论以及各种关于小组件排版设计攻略。本文带你了解Widget的「前世今生」,除了很Android外,Widget这次为什么会成为这次iOS 14更新的重中之重,各大应用抢先适配iOS 14,抢占流量的新入口。

小部件最初来源于苹果电脑工程师Rose的一个插件工具—Konfabulator,用来更换桌面运行工具的皮肤和外观。2003年的Konfabulator是运行在苹果操作系统之上的,而其中的主运行文件叫做Widget。就像现在很多的新型产品一样,当年的Konfabulator一经发布,在美国引起众多人的关注,两位开发者也最终决定将这款工具命名为Widget。

一直到2004年11月Widget1.8版本正式对外发布,此时的Widget不再局限于某一平台,而是一款跨平台的产品。Windows和Mac用户可以根据自己的喜好开发或使用Widget工具,这只是这款工具的开始。

时间来到2008,当时的苹果已经推出了iOS 2。而Google联合多家厂商开发了安卓系统,当时Android的最大特色就是开放,开发者可以根据自己的喜好随意的修改底层文件,我们当时印象中多变的Android桌面使用的就是Widget程序。我们熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的随意设计导致后来的Android设计语言碎片化严重、交互感受相互割裂。一直持续到Google将物理设计体验带入屏幕的设计语言Material Design,利用具象化的设计语言规范各家的开发,遵守统一的设计语言和交互感受,由于篇幅限制就不详细展开去说。

Widget的定位其实相当于应用程序的扩展程序,使用的关键点在于用户可以在不打开应用、无需加载等待的情况下,在屏幕上快速获取信息甚至进行简单的操作。

Widget按应用可分为三种:Desktop Widget、WEB Widget以及Mobile Widget,目前讨论最多的iOS14更新的Widget其实是运行在移动设备上的Desktop Widget,又称为Mobile Widget

注:Widget在刚进入中国的时候,没有通用的译名,由当时的中搜命名为“微件”。直到这次iOS 14才使用“小组件“的命名。

苹果多次强调Widget不是进入应用的另一种快捷方式,Widget是一种的信息展现方式,用来快速提供展示某些用户关心的应用程序数据。

Widget按照用户使用场景的不同,可以分为:信息小组件、集合小组件、控件小组件及混合小组件。而iOS 一直将主屏幕的控制放置于控制中心中进行交互,因此小组件类型的主要是信息小组件及集合小组件。

信息小组件

在人们的日常生活中有一类应用,无需进行操作,但应用需要经常性的更新信息。比如:天气、时钟等等。信息小部件将应用的关键性信息展示在小部件上,同时跟踪相关信息的变化。根据小部件的大小选择性的展示信息的密度。

集合小组件

同一类型的众多元素展示在小部件内,常见的比如:新闻报道、系列图片或电子邮件等等。这类小部件有两个特点:1.信息集合;2.点击集合元素中的某一个元素可快速进入详情页进行浏览。集合小部件可进行垂直滚动,但在iPhone端由于交互限制,并不能进行此项操作。例如:微博、知乎。

控件小组件

控件小组件子除了显示常用的功能状态外,用户可直接在主屏幕进行简单的触发操作,不需要打开相关应用,类似相关应用的外部遥控器。例如:音乐类小部件,用户可以在当前小部件上进行简单的暂停、切换曲目等操作。而iOS系统传统的“控制中心”包括大部分的手机操作部分,因此iOS 14的小组件还是以展示信息为主。

混合小组件

实际上更多的小部件是同时具备以上两个到三个特性的混合小部件。比如:音乐类小部件,不仅可以进行简单的交互,同时也展示了当前播放音乐的基本数据。

苹果作为全球化的顶级手机制作商,一直追求通用的设计语言。设计规范包括:完整性、一致性、直接操作、反馈、隐喻,用户控制等几个设计原则。苹果有别于其他手机系统的封闭式系统,作为一个习惯于为用户做决定的父系公司,虽然这次Widget的跟新被看做是苹果对于之前控制的减少,但在iOS 14关于Widget的官方设计指南中,也有明确的关于Widget尺寸的限制、卡片式的圆角半径的限制、展示内容形式限制、设计交互的限制。

iOS桌面小组件的内容虽然可以通过开发定制,但在手机桌面仍然保留规范的视觉规则。

三种尺寸

Android小部件之前虽然也有限制minHeight和minWidth的大小属性,但却可以通过左右上下拉伸大小,调整小部件信息展示内容的多少,因此大小其实是不受控制的。

在iOS 14这次更新的小部件,同一应用限制只提供3种尺寸2x2、2x4、4x4

小组件的核心功能是让用户无需进入app便可获得信息,即少量但即时、有用且高度相关的信息。因此针对不同作用的应用需要先进行展示信息的梳理整合,明确小部件的核心目标。


  • 2x2小尺寸的小部件类似动态图标,仅显示当前当地的天气,并可以打开应用。

  • 2x4中等尺寸以及4x4大尺寸的小部件,则可以在2x2的基础上额外展示更丰富的信息,并且可以与用户进行交互。


同时为了确保所有小部件的圆角看起来都是一样的,要求所有小部件采用SwiftUI容器应用正确的角半径。相关开发文档ContainerRelativeShape

位置吸附

Android手机桌面的widget可以随意的放置在任何位置。而iOS的小部件和之前的所有图标一样,仍然要紧贴其他应用吸附在屏幕的顶端,不能居住只能靠边放置。

智能堆栈

当在同一区域希望有多个小组件进行展示时,可以使用智能堆栈功能。根据不同的使用场景,通过上下滑动进行切换。Siri会根据时间的变化,显示不同的小组件内容。

苹果从iOS7开始借鉴了微软以及谷歌的设计语言,减少视觉装饰、抛弃了拟物化的设计风格,尽量以内容为核心,在这次的iOS小部件也对内容展示进行了限制。

  • 聚焦内容目标点。小部件的关键点在让用户易于浏览,所以需要前期进行设计目标的梳理,仅展示少量的信息,专注于程序的某一部分内容。

  • 显示内容与大小的关联性。创建不同尺寸的小部件时,不应该只是简单的扩大小部件的大小,而应该是在大尺寸时考虑展示更多内容,更详细的可视化效果,围绕基本信息的基础上修改表现形式,进行优化和调整。

  • 提供真正有用的信息。小部件的意义在可以在主屏幕立即为用户提供有意思的内容,而不是像桌面图标一样成为另一种快捷打开方式。

  • 保持展示内容的更新。小组件的展示数据需要不断的更新,否则无法吸引用户的注意。

  • 寻找应用的特殊性。例如日历小组件,可以针对特定的时间和事件进行独特的视觉处理。

  • 合理的设置选项。长按小组件会出现“编辑小组件”的选项,可以对组件的展示内容做分层或重要程度展示。例如:天气、时间切换城市的定位。网易云音乐“定制我的云音乐小组件”切换“每日音乐推荐、我喜欢的音乐、私人FM、歌单推荐、私人雷达”的顺序。

  • 避免在小组件中加入过多的交互元素。避免过多的目标,以至于用户无法点击所需的目标。根据内容小尺寸,设置一个点击元素便可,中大尺寸的小组件,可设置多个点击元素。如中等尺寸的微博,可以通过点击任意一条热点,查看热点内容。

  • 仅支持点击,不具备垂直滑动。在Android的集合类小部件除了基础的点击交互外,支持部件内信息的垂直滑动,但在iOS系统中的小部件不具备垂直滑动的操作方式,应该是苹果考虑到小部件在左划的homescreen,可以无限堆叠小部件,容易引起交互操作的冲突。唯一的交互方式就是点击打开应用。

可以看到iOS 14的widget没有其他交互方式,只能通过点击唤醒应用或某条资讯的详情页。苹果在保证一贯简单明了的用户体验外,不建议应用商设计过于复杂的样式来呈现内容,尽可能的减少用户电池、网络方面的消耗。

weight设计系统内容常见布局形式,可以作为设计小组件时的参考。

由于苹果本身自带的话题属性,在2020年6月22日第一次线上开发者大会—WWDC20发布的widget,到iOS14正式版上线期间,国内外热度一直高居不下,首先各家应用厂商、个人设计开发师都推出自己对widget适配的产品;小红书、知乎、微博等公众流量平台的个大私欲流量博主基于产品的适配推出各种风格主屏幕的应用攻略,widget迅速成为巨大的流量入口。

从6月分的开发者大会到正式版上线,苹果在自家的应用App store的Today专题、iOS 14精选App对widget进行了针对性的推荐,当搜索“小组件”等关键词时还会出现“超实用的小组件”专题推荐。

基于苹果用户的巨大市场,App能够获得苹果的推荐意味着大量有效曝光以及话题热度,此时很大一部分应用,根据产品特点,抢先适配小组件功能,获得苹果推荐,抢占一波流量。

从9月份开始,color Widgets、倒数日、Widgetsmith、我的天气等多款以时钟、计时、日历、天气功能的小组件应用多次轮番登上App Store应用免费榜第一。(数据来自七麦数据)

并且直到现在依然维持相对稳定排名的高度,及高下载量。

这些数据一方面不仅因为用户在知乎、小红书、抖音对于如于如何使用小组件的功能、如何更定制化的设计布局自己桌面的讨论,还在于各大社交平台应势对于小组件话题的推送,使苹果的小组件获的了更多的关注度,与用户关注度。

而有些设计师看到这其中的巨大流量赚的盆满钵满。9月20日设计师@Traf在自己的社交媒体账号发布了自己设计的iOS 14主屏幕,立刻获得大量用户的喜欢。Traf转手将自己的这套图标以28美元的价格出售,开始就获得了3626人的支持(有兴趣的小伙伴可以点击https://icons.tr.af/ 购买),六天就赚了10 万美元,有人要去画图标了吗?

苹果对widget的特性定义为:简单明了(Glanceable)、恰当展示(Relevant)、个性化定制(Personalized)。阿里和京东于9月中旬基于对iOS新特性widget的理解与限制,分别对自家产品手淘和京东进行了适配设计。

京东根据iOS 14 widget提炼出的关键词:简洁、高效、内容化。整合自己出自己品牌的设计三大原则:个性、信息、情景。在设计原则的基础上,结合京东的业务指标和用户场景,制定出了京东widget的四个方向:物流(工具)、直播(互动)、店铺(私域)、秒杀(营销)。

  • 物流——提升获取信息的效率。及时查看物流通知,跟踪物流进度,提升用户获取信息的效率

  • 店铺——建立用户与产品间的连接。利用widget的展示功能,在桌面推出店铺的新品,方便用户随时随地关注不同店铺的新品。

  • 秒杀——聚焦首页获取核心信息。为用户实时提供秒杀商品,红包,配合京东的签到形式,承载京东营销矩阵的业务背景。

  • 直播——用户互动。推荐热门、感兴趣的直播,预告明星直播,增加用户与用户、用户与主播间的互动。

手淘根据数据得出:用户虽然平均每天进入屏幕的次数超过90次,但停留的总时长不过几分钟。结合一闪而过的快速切换应用的主屏幕里,设计交互复杂的应用界面并不能契合用户的需求。得出设计要素:一目了然、高相关性、个性化

  • 所见即所得的物流——将查看物流信息之前需要“打开手淘、点击我的、进入订单、查看物流”4步操作,简化至前台widget透出,用户轻松掌握包裹的一举一动。

  • 强大的订单管理——基于手淘人群60%的目标在订单模式,快速启动功能。以及对一些必要widget做了深色模式的颜色适配。

  • 便捷的互动权益提醒——针对淘宝人生、淘金币、芭芭农场等互动专区,可在widget组件上时效了解自己互动权益的完成状态。

  • 千人千面内容定制——基于商品、社区、直播、店铺等手淘的广泛产品,通过多元的方法将前台的展示权利交给用户。例如:关注的店铺,关注的直播内容,爱豆的时装秀。

京东立足于自身的业务指标和用户场景制定京东widget的四个方向,手淘根据数据导向一目了然的用户需求。但由于京东与手淘都是购物应用,结合widget信息展示的特点,最终的聚焦点都是在于信息的获取效率及提醒。使用户在不打开应用的前提下,满足不同的场景需求。但淘宝常年的游戏营销,淘宝人生、淘金币、芭芭农场的互动场景使他的业务场景化比京东更游戏化,在视觉方面也更丰富。

推荐阅读:

京东APP iOS14适配解锁

来了来了,iOS14 和淘宝新功能一起来了!!

下面推荐几款我自己觉得非常不错的小组件。

开发者David Smith发布的一款用户可以自己创建定制天气、日期、天文等widget的应用。该应用采用了直观的图形界面话,精确调整每个widget包括字体、颜色、背景色等的显示信息和样式。支持大、中、小三个尺寸,与iOS 14的Widget 大小是完整匹配。

与其他小组件不同的是,Widgetsmith可以根据时间自动变换小组件,在编辑小组件时选择“Add a Timed Widget”,然后在表盘上划分时间,并添加对应的小组件。放置在桌面的小组件就会随着时间变化成相对的画面。

这款应用与其他天气类应用不同的地方在于,它提供了9种的widget样式,17个主题,满足用户各种风格的需求。除了常规的天气预报外,还有实时天气,空气质量、世界天气、生活指数可供选择这款应用与其他天气类应用不同的地方在于,它提供了9种的widget样式,17个主题,满足用户各种风格的需求。除了常规的天气预报外,还有实时天气,空气质量、世界天气、生活指数可供选择。


我的天气同一家开发团队的另一款小组件倒数日,是一款可以直接在屏幕上看到不同主题倒数天数的小组件,能根据自己心情更换背景。此外还可以设置日历小组件和时钟小组件。

西窗炷采用白底黑字简约的界面风格,每天推送一首诗词,点击便可阅读全文。也可以通过编辑小组件选择自己想看朝代、体裁和显示字体。


没有买过豆瓣日历的举手,买完心心念念觉得自己会每天看一部电影,em……然而并没有。豆瓣的小部件除了两种电影日历的样式外,实时热门书影音排行的界面也能让用户不用打开应用,便可获得及时的影音信息,点击进入详情页面。

当然也有网友做出了史上最强小组件,以及其他有趣的组件

目前每个手机用户主屏幕上都会有越来越多的app,我们的衣食住行娱乐都需要各种app的协助完成,但随着app的增长,用户会将各种app按照种类、类型进行划分,靠线索记忆或肌肉记忆,熟悉app的位置,但随着时间的推移,我们可能又会有各种新的应用需要下载使用。重复分类、查找、点击进入的行为,其实是很浪费时间的步骤。

首先我将之前的主屏幕全部隐藏,只留一个主屏幕页面。数据显示日常对手机的操作交互中,有50%左右的通过左手/右手单手握持操作,而我本人习惯左手单手握持操作。操作热区如下图中所示的从左到右从下到上。

其中顶部区域及右边区域放置,豆瓣、西窗烛、我的天气等展示类小组件;Todoist、Thing3、倒数日等任务管理类小组件;知乎、微博、头条等咨询类小组件则可以放置于画面中间,不妨碍点击某条信息。也可以使用智能堆放功能,将多种小组件放置同一区域,通过上下滑动进行切换。最后放置自己平时使用频繁的应用图标即可,使用频率也是按从左向右的顺序。大小方面

苹果的app资源库会默认经常使用应用可以直接点击进入,在使用其他app不常用的app时,可以通过上方的查找区域进行搜索。

目前已经使用1个月左右,之前也试过各种好看的小部件,最后还是以效率为出发点,将大部分的app放置在app资源库中。

在我们的认知中,手机桌面更像是一个应用程序的目录。我们不会过多的在主屏幕停留,需要借助启动图标点击进入应用进行操作,用户打开某个桌面应用,在应用内进行操作;另一方面在当前app应用越来越多的现在,高频应用与低频应用混合,常常在使用时,陷入查找应用中,降低了信息获取的效率。小部件的使用,使得用户虽然还是不能在主屏幕界面进行数据处理,但小部件作为应用程序的扩展程序,用户却可以在不打开应用、无需加载等待的情况下,在主屏幕上快速获取信息甚至进行简单的操作,不得不说是在改变用户长久以来的使用习惯。

无论是Google从碎片的Android系统转向物理设计体验的Material Design设计语言来规范各家的开发。还是最早提出“One productfamily,One platform,One store”希望将手指与手机触摸交互与鼠标指针交互的打通,保证多设备的一致性,但最后却被自己各种花样作死的微软磁铁设计。各家都在尝试统一设计语言,以及交互感受。而这次iOS 14的,我们已经看到了苹果在iOS、iPadOS、macOS、watchOS乃至于tvOS上的联动与融合,而小部件就是最重要的一步。

文章来源:站酷  作者:9号自习室

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



9招,提升设计中的空间感!

鹤鹤

空间感是指艺术形象通过一定手法引起的类似现实空间的审美感受。包括作品直接表现的空间和作品具体形象之外的使人想象到的空间。这种空间感,一定程度上决定着版面的视觉效果与美感。巧妙的利用空间,可以集中观众的注意力,丰富的层次感使作品更具观赏性,同时又可以让作品主次分明,更有效的传达信息。

通过对设计作品的参考分析,设计师深海总结了营造空间感的方法,大致分为以下九个类别,希望这篇文章能对大家有所帮助。



一、遮前掩后

“遮前掩后”的意思是:通过画面设计元素之间的遮挡,交代空间关系,从而产生一定的空间感。这种形式可能空间感较弱,但易于表达,可以使文字和图片更好的结合。


设计时为了保证信息的传达,普遍会选择将文字信息完整的展示出来。其实像上面两个案例一样,适当使用遮挡关系,反而能让文字与图像结合的更好。

人的大脑有“惯性阅读”的能力,这使得即使文字被遮挡,也不会影响太多识别性。


利用蒙版,然后局部破出,这也是营造空间感常用的手法。本质上,这也属于使用遮挡关系的一种方式,这种效果空间感更强,让观众有一种打破次元壁的感觉。

使用这种样式时需要注意:用作蒙版的图形或文字,必须简洁,并且识别性足够高,否则会影响信息的传达。



二、以小见大

“以小见大”指的是:利用近大远小、近疏远密的基本透视原理,来营造空间感的一种方式。

在平面设计中,面积大的元素使我们感觉更近,面积小的感觉更远,即使是单一的设计元素,只要遵循基本的透视原理,也能塑造出空间感。


从这两个案例可以看出,元素的面积大小变化越大,空间的纵深感就越强;通过控制元素之间的位置关系,可以使空间看起来平整或者曲折,表现力非常丰富。



三、山重水复

“山重水复”是“以小见大”的进阶版,同样是利用近大远小的物理规律,塑造空间感。不同的是,通过元素的无限重复,会让空间感更强,对排版的把控能力也要求更高一些。


重复的元素会让画面有很强的冲击力,强烈的空间感让观众仿佛在无限的跌落。使用这种版式一定要注意近疏远密的空间关系,否则会降低画面的可信度。



四、横峰侧岭

“横峰侧岭”是指:通过变形,改变元素的透视,在整个版面中塑造多个平面,以此来增强作品的空间感。


将同一平面的元素对齐,创造出虚拟的边界线,借助这些参考线来塑造不同方向的平面。如果觉得空间感不够强烈,可以借助辅助线加强透视。使用这种形式的重点在于,要注意阅读顺序和空间平面之间的关系,不要为了画面,一味地堆砌空间,信息的传达永远都是最重要的。


最近非常流行的立体效果,因为空间感强,很容易出效果,深受设计师们喜爱。其实这种类型也是通过透视和多个平面来塑造空间感,制作时大多需要3D软件进行辅助,才能实现如此真实的透视效果。



五、冰厚三尺

“冰厚三尺”指的是通过给元素添加厚度,增强元素的立体感,从而提升空间感。这是一种非常简单粗暴的方式,立体化后的元素,可以展现更多的角度,使排版方式更加多变,画面也更加灵动。


最常见的2.5D风格,去除了透视感,依靠立体元素来营造空间感,可以使整个版面更加稳定和谐。有些设计师还会引入矛盾空间,让设计作品看起来更有趣味性,吸引用户目光。



六、潜踪隐迹

“潜踪隐迹”的意思是:通过改变透明度,模拟雾中的物体,距离越远的元素可见度越低,从而营造出空间感。


在中国传统国画中,就会通过控制水墨的浓淡,来展现画面的空间感。因此这种方法很适合中国风的设计,让整个作品富有神秘、幽寂的气质。



七、雾里看花

“雾里看花”和“潜踪隐迹”很相似,通过虚实的变化,模拟现实世界中的景深效果,从而塑造空间感。这种方法是最常见的,也是最出效果的,在塑造空间感的同时,还可以强调主体信息。


在对版面元素进行模糊处理的时候,要考虑元素与焦点的位置关系:距离焦点越远,模糊程度越高,普遍情况下,会将最主要的视觉元素作为焦点,保证信息的准确传达。



八、浮光掠影

有光的地方就存在影子,投影本就是空间感的一种直接反应,“浮光掠影”就是利用光影的变化,在平面中营造视觉上的空间感。


光影的变化非常丰富,因此,光影的表现方式也是五花八门。殊途同归的是,所有的光影都是为空间感服务的,所以大多数情况下,都要遵循现实世界中的规律,确定一个光源,保证整个画面的光影统一。



九、镜花水月

随着软件功能越来越强大,重现现实世界越来越容易。“镜花水月”指的就是:参考现实世界的折射、反射等自然现象,在平面空间塑造空间感。这种方式看起来质感很强,效果也非常酷炫。


需要注意的是:在设计之前一定要考虑好效果与内容的关系,一味的堆加效果,除了炫技毫无价值。

文章来源:站酷  作者:设计师深海

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


浅聊B端产品设计

涛涛

带各位了解下B端和C端的区别,重点介绍下设计规范体系搭建的框架和思路



初识C端和B端产品


C端 Consumer,表示为消费者、个人用户或终端用户,

直接面向普通用户提供服务来帮助他们实现个人需求,

常见就是大家手机中常用的应用。


B端 Business,表示为商业和企业,

是为帮助企业集团等实现商业目的而设计的软件、工具或者平台,

常见的两种类型:

  1. 支撑前台产品(千牛、商家后台、微信公众平台、微信开发平台、微博开放平台等)

  2. 资源管理产品(Sass、ERP、CRM、OA、WMS、TMS、呼叫中心客服系统、FMS财务管理系统等)


C端产品主要偏向消费互联网,更感性,怎么用的舒服怎么来,用户体验极佳;

B端产品主要偏向产业互联网,更理性,能解决实际问题,降本增效;


B端产品为什么要做设计规范


因为B端产品属性不同于C端,竞品参考少之又少,能找到也可能因为付费或者权限的原因,无法从“上帝”视角查看全局,也只能看到冰山一角,而且每个企业单位都有一套自己的产品体系,竞品差异化还是有的,但是有一点是不变的,就是设计底层的规范和原则,变得只是产品流呈现,就像乐高。


B端产品往往拥有复杂的业务逻辑且页面量级巨大,快速迭代也会引发频繁的变动以及并行概率的增加,需要设计师内部协同,或与开发能够快速的产出方案保证上线。这样的工作模式引发的副作用如:“体验一致性差”、“设计效率低”、“还原度不可控”的问题也逐渐显现,变成一个急待解决的问题。


设计规范就是为了节约成本,提升效率,保证质量。


这里不由得要提另一个概念——原子化组件思维,一个完整的页面是由无数个元素构成的,页面元素可以进行层层拆解。“组”是页面元素的搭建方式,“件”由不同的最小单位解耦元素组成。


这里着重说一下一定在前期做好设计规范的规划和宣导落地,自己在项目设计执行阶段因为时间紧张且经验不足,一边画页面一边搭建规范,设计稿前后优化内容差异较大,导致有大量之前实现的页面问题较多,后期要投入很多的时间和人力去修改,这个问题还是蛮典型的,希望各位可以意识到设计规范的重要性。


怎样搭建设计规范?


我们没必要自己从0开始搭建,一套完整的规范体系,需要经过上百甚至上百张页面的积累打磨才能完成,时间也不允许我们这样做,但我们可以站在巨人的肩膀上去实现,现在很多大厂都有自己一套完整的设计规范体系,以下也是自己经常参考的规范:


蚂蚁设计:https://ant.design/index-cn

蚂蚁数据可视化:https://antv.vision/zh

饿了么:https://element.eleme.cn/#/zh-CN

iview:https://www.iviewui.com/

贝壳:http://design.ke.com/page/home


自己为公司建立的设计规范体系也是基于AntD,根据公司产品属性做了一些调整和优化,才逐渐形成了适合自己产品的规范体系,下来带各位梳理下设计规范需要做什么?


先放一张通用架构图,总体了解下有什么

接下来带各位过一下这五大板块内容,重点展示会配图解释,没配图的可在文末下载AntD设计规范作为参考,

设计过程中及时要和产品研发进行沟通评审,防止大面积复用带来的改稿,痛苦面具···


一、全局样式


1. 常规颜色

  • 主题色、功能色(错误/警告/成功);

  • 状态色(A/B/C等级);

  • 文字色(主要/次要/辅助/禁用/占位符/白色);

  • 线条色(基础/分割器);

  • 背景色(基础/禁用/表头);


2. 图表颜色(较常规颜色饱和度偏低,视觉体验较好)

  • 顺序色板(8种顺序颜色,饼图/环图适用);

  • 同色相色板(8种顺序颜色,饼图/环图适用);

  • 分组柱状图/堆叠图色板(5种颜色);

  • 语义色板(成功/警告/严重);

  • 文字色(轴标签/轴单位,继承文字常规颜色);

  • 线条色(XY轴实线/网格虚线);


3. 字体

  • 字体家族(字体识别顺序);

  • 字号(3~5种,保持克制);

  • 字重(Regular/Medium/Semibold);

  • 行高(一般为@1.5,较大字体行高需特殊处理);


4. 阴影

  • 默认(上下左右方向);

  • 悬浮(较默认偏深);

  • 模态框;


5. 图标(建议上传iconfont自己的项目库,方便前端调用)

  • 通用图标(线性/填充);

  • 行业图标(业务需要);

6. 布局(特别注意栅格自适应问题)

  • 间距(8点网格法是最为合适的产品间距制定方法);

  • 框架(导航/头部/页头/标签栏/树状容器/内容区域);

  • 栅格与标注(筛选/表单/详情/表格单元/弹窗);

顺手


二、组件库


1. 按钮

  • 常规按钮(填充/线框/虚线按钮);

  • 图标按钮;

  • 文字按钮;


2. 导航

下拉菜单、标签页、步骤条、分页器、锚点链接、面包屑;


3. 数据录入

输入框、选择器、单选框、多选框、开关、日期选择器、时间选择器、滑动输入条、上传;


4. 数据展示

头像、徽标、标签、文字提示、气泡卡片、内容、表格、滚动条、统计数值、时间轴、折叠面板、分隔器;


5. 反馈

对话框、全局提示、警告提示、进度条、结果、气泡确认框、加载中;


三、数据规则

空数据、电话号码、数值、金额、日期、时间、相对时间、脱敏、标准词汇库;


四、数据可视化

数据可视化这个板块其实并没有想象的那么简单,画个圆画个长方形什么的,你要重点了解的是以下几点:


1. 选择正确的图表类型(时间类、比较类、分步类、流程类、占比类);

2. 组件使用规范和说明(标题与注释、轴、图例、标签、提示信息);

3. 图表布局自适应(面对海量数据量与有限屏幕空间的冲突);

4. 交互(数据获取、信息加工、知识流转);


这里不多做赘述,基础介绍可以看看之前发布的文章,深层级的介绍可移步https://antv.vision/zh


五、模板页面提炼

规范体系搭建完成后,我们就可以用组件去搭建各类型场景的标准模板页面了,就像搭积木一样,过程还是很有成就感的。


登录页、引导页、工作台、查询列表、表单、详情、弹窗、左树右表、设置页、异常页、空状态;


每一类模板页面都有自己的使用场景、基本构成、注意要点等,举个例子,

1.【工作台】为用户提供处理和查看信息的捷径,为产品适当宣传产品的新动向等运营内容。

2.【查询列表】四大构成:数据过滤—数据统计—数据列表—批量操作;;

3.【表单页】明确当前页面任务,快速定位修改目标,简化填写流程,确保用户准确、轻松、快速地完成任务;


最终的这些模板页面还是要根据自己公司的产品属性来做一些调整,随着经手的同类型页面越多,最后的模板页面越标准。私密原因,这里展示些AntD的标准页面参考下:https://preview.pro.ant.design/


规范宣导落地


上述就是规范体系的主要构成了,规范搭建也只是设计部门的产出物,宣导和落地才是重中之重,

我们要对产品和研发拉会进行一次完整规范的内容宣导,

让产品同学明晰现在的产品框架和样式,原型图绘制样式和交互接近视觉稿;

让研发同学知晓我们是基于什么前端框架设计,源生组件有哪些地方修改过,还原过程中注意些什么;


给出我们规范的产出物,一份完整的PDF查看手册,一份上传设计稿可查看标注的链接地址和一个规范迭代文档,方便相关人员查看和对接迭代。


这中间过程不比规范搭建所花费的时间和精力少,做好持久战的决心,公司产品体验升级是否能成功就靠这一战了···加油。


总结


以上就是本次分享的全部内容了,总结的方向比较多,但都不太细致,也是先给各位一个整体框架和思路来应对相关的设计,更多的内容可以多去参考大厂,你会发现很多有意思的东西,从0到1或者从0.5到1,自己去探索去实践,成就感满满,这个过程就是进步的味道,相信你会爱上。



文章来源:站酷   作者:MiFan菌

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




微信的私域流量生意

涛涛

这几年私域流量这个词很火热,很多企业都开始做私域流量,特别是在微信场景下进行的社群运营;一个优质的社群运营能让社群一直处于活跃状态,并且可以提高转化率;本文作者分享了关于微信的私域流量生意,我们一起来了解一下。


一、从做好一个微信群说起

最近这两年,随着在线教育和社区团购行业的兴起,私域流量这个词越来越被大家所熟知。不过我很讨厌私域流量这种说法,仿佛不把人当人看,而仅仅是一种流量数据指标而已。

那么什么是私域流量呢?用一句话来说,私域流量就是一个能与顾客拉近距离,离用户最近、最方便触达的方式而已。

在这之中,人情味是核心,比拼的是执行力,是一个慢工出细活的事情。

做好一个私域的内核是用户和内容的运营。

我今天来说说私域中的一个类目,社群运营

整个体系涉及到了打磨产品、如何做好增长、如何做好用户的活跃、和内容的产出以及如何服务好用户的多元化需求。

我相信在座的各位,在私域中与用户打交道的时候或多或少的沟通问题。

解决沟通问题有一个核心思路:你说出去的每一句话,做出来的事儿,都要真诚。

我们今天拆解的两个案例,一个是目前互联网最大的创投类科技媒体同时也是纳斯达克的上市公司;另一个则是目前国内规模最大的针对于企业高管的知识付费课程。

还有一系列的私域案例,有我深度参与的,有我日常打辅助的,也有也有我们进行代运营工作的(但是由于客户的隐私问题,有的案例我不方便透露具体的名称)。

我敢保证,今天的两个案例在座的人80%的人都或多或少使用过他们的产品,或者听过他们的名字。

二、社群产品的冷启动

为什么我把冷启动放在第一位?

因为一个冷启动好与坏直接关乎于后期的分销变现的效果。

先说一下XX创新大学。

目前市面上很多头部知识付费的公司,他们开始做上市辅导的IPO工作了,不要天真的以为这些公司都是靠单打独斗起来了,其实他们在很多的城市都有地方站的布局。

看似很牛逼,但是你知道他们在早起布局的过程中,也栽了不少的坑。

知识付费的地方站本质是一个代理生意,由于这是一个代理的生意,执行人员很容易按照原先设定话术和引流的一些行为ctrl+v 进行运营工作,但很快就发现了问题。

一是因为地方的认知与一线城市的差距很大。

不知道大家在过年回家的时候,跟身边的朋友或者当地的企业家前辈聊天的时候,能发现的明显的代沟。

我认识的很多当地传统企业的老板他们对于互联网和新媒营销的认识差距还是很大的。

其次,是因为当地年龄代沟的问题。

我们发现当地企业领导和公司高管都是将近四五十岁的人,线上时间较短,更不要提成交转化了。

基于这两个问题,我们开展了一系列攻艰克难的尝试。

首先,我们通过了很多人脉在线下对接到了很多地方优秀的创业者,在接触的过程中发现,大家在疫情时期对于传统行业如何转型有着迫切的需求,而且他们泡在线下的时间远比线上的时间多。

针对于这一点,我们打算从线下的交流分享会进行切入,将交流会的服务搭配着虚拟会员一起售卖,不仅提升了客单价还可以发展很多线下的分销渠道。

那我们是如何做线下的冷启动呢?

因为对我们而言,线下流量的多少,直接关系到我们的成交,以及品牌势能,包括后期分销渠道的搭建。

因为我们针对的更多的是企业家,也就是B端的用户,他不像C端的流量可以进行投放去算ROI。一个好的冷启动是非常关键的。

当时我们想了很多花里胡哨的操作,最终让我们醍醐灌顶的是王兴说过的一句话。

王兴最喜欢讲的一句话,结硬寨,打呆仗,你知道这句话谁说得吗,是曾国藩。

曾国藩曾给清廷上奏,原文是这样写的:

“臣不善骑马,未能身临前敌,亲自督阵。又行军过于迟钝,十余年来,但知结硬寨、打呆仗,从未用一奇谋、施一方略制敌于意计之外。”

说白了,这里讲的就是步步为营,稳扎稳打,不出奇兵,战胜对方。

我们经常说一句老话,就是:听了这么多道理却依然过不好这一生。

我问一下大家,大家有多少人坚持100天来履行自己的健身计划呢?所以说,大家抓执行的能力的度待提升的,因为大部分人是不一定具备躬身入局的能力。

就拿我们老家,河北省的地方运营中心来说。我们也算是把细节做到了极致。

我们前期,通过人脉关系让所有人都免费参加,来增强线下的初期势能。

针对地方已购买产品却长期沉默的用户我们人工电话一个个电话或者线下一对一的去进行召回的。在这里说一点,一个声音好听的妹子,确实可以让用户多听你BB一分钟。

那个时候一天在线下能见30多个人,嗓子都干了,确实累,不过,只要有效,莽就完事了。

用尽一切的能力去找到联运方,那个时候我们很荣幸的找到一个很有名的读书的地方代理,但是大家要记住,在联运的前期,一定要把双方的权益写清楚,否则后期会遇到很多麻烦的事情。

动用你所有邀请到的人,让他们去发发朋友圈,因为他们企业家的朋友圈还是比较精准的。

那个时候我们通过大半个月的时间基本把当地的创业者跑了一遍,初次召集了2000多号的人。

试想一下当地上千号的大小老板在同一时间的发朋友圈帮你宣传,是一种什么样的影响力。

利用个人IP好好的去做内容,保持个人的内容输出。

通过这种方式我们在前期基本上能在当地进行小规模的刷屏。

后期我们又不断提升线上的影响力。我们在抖音、快手和视频号的平台选择中,最终选择了全力做视频号;我们利用手中已有的企业家资源,进行微信视频号的连麦直播,通过社交关系,很快的就覆盖了市内的大部分企业家,不仅增强了品牌的影响力,也慢慢的增强了他们对于线上的使用习惯。

到此为止我们才慢慢的开始利用品牌的影响力开始裂变分销。

我相信很多人都在意社群的转化,在意分销体系的搭建;只不过一口吃成一个胖子,这是不现实的。

在分销转化之前还有很重要的一步,就是活跃。

三、社群的活跃与用户粘性

这个案例是一个行业媒体的社群。

在上文中我们列举了冷启动做起来的种种方法,在启动后相信很多人都遇到了一个问题,社群是有生命周期的,我们拿这个行业媒体的社群给大家拆解一下生命周期活跃的这个事儿。

作为行业媒体来说,大家更看重其自身所带的内容,所以在社群的活跃方面,用户的忠诚度一定是以内容的价值来衡量的。

那么针对于一家互联网创投媒体来说什么是有价值的内容呢?

1. 要看目标用户定位

创投媒体的受众大部分是以互联网、广告营销、金融为主的人,还有一部分的创业者和对商业科技感兴趣的学生;所以在话题的选择上也是围绕这些去做文章,尽量的找一些大家感兴趣的话题引起讨论。

2. 需要营造一个有发散性的话题和一个良好的讨论气氛

如何做一个社群交流的话题呢?

按照我的总结就是:信任感+信息差。

所谓的信任感,来源于用户对于品牌信任,以及群友对于群主的信任。绝大多数人不具头部品牌的影响力,那么就更要专注于你与群友之间的信任建立。

信息差是什么?俗话说:三日不见当刮目相看。

为什么人和人拉开距离的速度会非常的快?这背后的原因就是是彼此的认知和信息差不一样。

国与国之前有信息差,行业之间有信息差。那么信息差呢?

我来举个例子!

我问大家两个问题:

  • 大家都知道美国比我们的科学技术发达,互联网的普及程度更早,那么为什么移动支付却在中国得到了大量的普及呢?
  • 国内的蚂蚁花呗和京东白条这么普及的情况下,为什么上门推销信用卡却这么被人抵触呢?

这些看似是讨论移动支付或互联网金融的商业问题,但这个简单的问题底下是我们通过词云埋藏了十多个话题点供大家讨论。

每一个词云点里至少有大于三种的讨论方向,大家想想海王为什么和姑娘总有的聊。

那么当这种内容进行发散输出的时候,这就是大家所期待的有价值的内容。

作为一个好的群聊话题,它是有节奏性的,从抛出话题,再到讨论话题,再到最后话题的总结,它是一个有始有终的过程;所以说,作为群主,想好这个话题的讨论点,把控好每一个环节,不要让这个环节里面出现过于激烈的争论。

如果有的话,你需要动用自己的情商去好好的缓解;千万不要评判这个人说的是对的还是错的,其实世界上所有东西在我看来没有对和错,只有说合适和不合适。

3. 定期做主题分享

分享的形式有两种:一种是邀请嘉宾,另一个是主题讨论。

我们会利用客户平台资源去邀请一下嘉宾。或者邀请群友进行分享。

有的群友可能没有那么系统性的输出,那么就可以进行一个主题会,比如我曾经就邀请了关于电商平台的运营人员、MCN以及品牌方从各个角度来讲解关于品牌营销的主题演讲。

4. 利用小KOL去影响更多的人

那在群里,什么样的人符合KOL的标准呢?

当一个合格的 KOL,其实并不容易,既要上知天文又要下知地理,又要能文善武,既要保持调性,还要平易近人,不能让群友太过仰视,离群友距离太过遥远;更不能让群友们俯视,变成单独服务向的“客服小妹”。

那我们筛选的漏斗模型是什么呢?

  • 乐于分享的人留下
  • 思维缜密对行业有独特认知的人留下
  • 有独特的分析角度和正确价值观的人留下

大家一定要好好服务好这些人,无论是做一笔生意也好,还是交朋友也罢,这些挖掘到的kol都是你在数字世界开疆拓土的战略盟友。

他们独树一帜的思想一定是能够在未来引起别人的关注。

在分享的过程中,一定要对分享者多多鼓励,毕竟谁不喜欢被表扬呢,无论这个分享是怎样的,能分享就是好的;一定要让分享,成为群内的良性循环。

不过再怎么活跃,各位一定也会遇到死群的问题;很多做微信生态的人都非常的拧巴,总觉得解散社群是一件非常抹不开面子的事情。

对于一些死群,我会利用解散社群重组的方式重新活跃。

每一次换血都意味着生命体细胞的再造。

这句话话怎么理解呢?

其实社群生命周期的本质跟细胞的组成是一样的,按照生物学的角度来说:人体细胞是有寿命的,每天都在更新,衰老死掉的细胞会被新的代替。

但是,人的大脑细胞是永久不变的,就算过了7年的周期,你的脑子依然还是同一个。

那么针对于社群来说,群主就是这个生命体的大脑,群员就是细胞,你的信息与内容就是流动的血液。

不要害怕社群的生命周期,作为一个生命体来说,摄取更多的氨基酸和维生素,寻找新的细胞来源,才是大脑应该考虑的事情。

当社群到了无话不谈的时候,就会出现新的交流需求。

群中有的人聊生活,有的人聊工作,有的人聊行业。

大家从陌生到熟悉是需要时间去建立的,每一个愿意在群里聊天的人都有他存在的意义,每一位发言的群友都值得被认真对待。

四、做社群的一些最朴素的方法论

1. 学会复制

对于绝大多数人来说,刚开始进入一个行业,最佳的方式不是创新,而是复制头部玩家成熟的模式,以保证自己能够在行业理解、团队结构、 技术运营等能力上迅速度过冷启动期;所以每一个互联网人,都应该有分析项目、拆解项目、复制项目的能力。

我们需要对于行业头部的打法保持敏感,同时想把办法跨行业的知识进行融合。

2. 人情味

群主本身即群员,我们既是社群的运营者,同时也是别人社群的群友。

当你脱离出kpi的数据视角,用人本主义的视角和同理心去理解社群,你会发现更大的世界。

3. 求知欲

求知欲就是对一切事物保持好奇。

我特别喜欢的一句话就是:好奇心是我对这个世界永不停歇的热情。

4. 对小工具的利用

在人类的进化史中,人类之所以为人,是因为人会使用火。在数字世界中生存进化,我们也需要利用好一切可以辅助运营的工具,方便我们进行事半功倍的管理。

5. 最后一点题外话

我时常问自己一个问题:一个知识社群的终局是什么?社群模式的天花板又在哪里?

先直接说一个结论,从长期来看,社群必然走向沉默。以社群为主的商业模式也注定会有天花板。

社群经济更多的是以服务成年人,以活跃的角度来说,没有一个人有时间在群里面天天扯闲。而且随着社群的发展,会逐渐导致流量的不精准,群里面也会逐渐“水”化,这是其一。

其二是因为,随着社群规模的扩大,就必须要做标准化的流程。

大家知道标准化是什么吗?

标准化意味着工业化,工业化的过程中就很难让底下的执行人兼顾到互动和情感。

但是,互动与情感其实是在数字社会中是尤为可贵的,这也是主办方伴我们召集在线下的原因,我们在线下的每一个点头,每一次眉头紧锁,都是很好的情感交流,这其实是在一个工业化的社群中很难做到的。

但这不意味社群的生意不赚钱,一个高效率的社群一定要讲究标准化,只有足够稳定的SOP才能做起来规模;所以社群组织的机体再生能和情感传递力才是我们应该多思考的思路。

解题不一定在当下,当大家好在嘲讽拼多多的拼一刀的时候,黄峥已经在思考生命科学和粮食安全的事情。

我粗浅地认为,这个事情,是从他22岁和段老师一起会面巴菲特的时候,就已经注定。

做一个砍一刀的电商并不性感,利用科学为社会提供价值才是性感;做一个数据导向的社群不性感,让社群有生命力有再生能力,才是真正的性感。



文章来源:人人都是产品经理   作者:纸皮小火车

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

CDEC中国数字智能生态大会的品牌视觉形象

seo达人

很荣幸受合作伙伴邀请,代表公司参加了CDEC中国数字智能生态大会。作为蓝蓝UI设计公司的一员,小编对本次大会的平面设计设计风格感受颇深、甚是欣赏。看了几家大公司的行业报告,欣赏了他们的软件功能之余,也膜拜了一下他们的平面设计风格,可以说各有千秋,都特别有隶属于自己的高端风格定位。下面是我在网站上搜索到的设计师重新定义的CDEC品牌视觉形象,希望你们也可以像我一样感受到艺术的力量给你带来的净化心灵的美好感受。我们蓝蓝UI设计公司承接各大软件大佬的软件大屏UIUE等设计和开发,欢迎联系我们,感受一下我们专业的技术与服务,一起合作共赢成长。
 

CDEC中国数字智能生态大会的前身为中国软件渠道大会,至今已经走到第十四届。覆盖20座城市,汇聚10000+优秀厂商、5000+渠道商,覆盖行业人群500000+,100+媒体深度报道,100+业界KOL参与演讲,促成合作数千家,大会发布权威研究报告《企业服务生态发展状况研究报告》十多本,打通企业数字化转型服务最后一公里。

2021年我们重新定义了CDEC的品牌视觉形象,以适应中国数字智能生态大会的全新定位。

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
文章来源:站酷   作者:许静工作室 

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

内容创作生态是什么?

涛涛

编辑导读:内容生态产品,连接着两方,一方是内容创作者,一方是消费内容的用户。如何建立运行机制,让平台健康自由成长是每个平台建设方头疼的问题。本文作者对此发表了自己的看法,与你分享。


写这篇文章是源于我之前的工作,之前的工作是做内容生态方向的产品。那时候我们天天把“生态”这个词挂嘴边,虽然每天都有工作做,也很忙,但是却很少静下心来想想内容生态是什么,去描绘它的样子。

最近看了一本书《简读中国史》,书中讲到当年英国、法国、西班牙这三个强国,其实刚开始英国并不是最强大的,英国的崛起有几个重要因素,其中非常重要的一点就是国会制度,不像我国古代似的,皇帝一人说了算。英国的国会制度,让国家有了很高的信任度,虽然没钱,但是有了借钱能力,这样使其在扩张的时候有了很大的财力支持,最终成了欧洲最强的国家。

在做内容生态产品这件事上,给我的一个启发是作为平台建设方,很重要的一点也是建立机制,建立一套运行规则,让平台自由健康生长。

01 建立内容生态

一个内容平台,连接着两方,一方是内容创作者,一方是消费内容的用户。当然这两个角色也很有可能是同一个人。

首先要做的基础工作就是建立账号体系,这是任何一个平台最基础的工作,创作者要有身份。

既然是内容产品,自然就要有内容来源的通道,提供创作工具,让用户提供内容。例如抖音的剪映,快手的快影,包括荔枝和喜马拉雅都推出了自家的创作工具。所有的内容产品都在搭建自己的创作平台,从战略上来讲,这是必做的一环,主要负责内容的引入。谁也不愿说在内容的源头不占据主动作用。

创作工具也可以单独作为一个工具存在,把功能和体验做好一点,在这个环节,需要做的就是工具的多样性和易用性,多是一些体验层面的东西。而给自家平台导内容就是一件自然而然的事情了。

基础工作中,还有很重要的一点就是给创作者反馈。当创作者把内容放到你这里,产生了什么效果应该告诉他们。不仅平台自己关心内容的效果,创作者也很关心,而且越详细越好,便于他们对自己的内容进行分析。之前我接触过有的产品不太重视这一环节,其实你真正了解就会发现,很多创作者他们都很专业,他们非常关心自己作品的数据,也会根据数据去调整自己的创作方向。

现在内容平台之间竞争激烈,无论是上游的创作工具,还是内容的反馈和数据分析这些创作者服务,都已经成最基本功能了。

有了身份,有了内容来源的入口,我们就要为内容源源不断的流入做准备了。

因为流入的内容肯定有好有坏,所以我们要对内容进行分级。关于内容评级的方式,主要有两种:一种是内容自身的数据,如播放量,分享数等,根据这些数据来判定一个内容的等级;第二是通过一些技术手段对内容进行提炼,判断其内容质量,也会根据里面的主要内容做推荐。这两种方式都是比较机械化的,而内容是有温度,有情感的,判定内容的优劣还有一些不确定因素。所以我们也要增加人为因素,提供一些方式让运营人员人工筛选,发现新来的好内容,好作者。

内容分级后,间接的我们对创作者也相应的分出等级了。对于好的创作者,平台通常都会主动建立联系,维持好关系。而对于普通的生产者,可能就采取放任不管的态度。合规的基础之上,随意玩,但是不给你曝光机会。说白了,即使内容不好,也不至于溅起大的浪花。

时间长了,平台心中会逐步会有一杆秤,对内容的优劣有个判别。建立一套标准,至于说谁能胜出,关键的还是看内容自己,作者自己。至于说平台是否要强制干预,自己完全有主动权。

内容优劣,创作者等级,奖励的程度,这三者关联性很大,呈正比例关系。

在给予创作者的奖励方面,最主要的做法有两个,一个是流量的扶持,一个是金钱的奖励。

什么等级的内容该推到什么位置,展示多长时间,需要定义一个标准。毕竟推荐位是有限的,平台对于推荐位的权重心里也要有杆秤。现在很多家平台,在用户端的流量渠道都不只一个,这就涉及到更复杂的内容分发问题,把什么样的内容分发给哪个渠道,哪个用户,这也需要制定规则。

流量是最基本的,但只是靠着流量已经难以俘获作者的心了,特别是在一个竞争激烈的内容领域。对于大牌的创作者,很多平台都推出了物质奖励。内容达到什么程度,给予多少物质回报,平台也需要制定一个奖励制度。

说到物质奖励,如果只是平台自掏腰包的话,不可持续发展。最健康的生态的就是建立一个利用内容赚钱的机制,比如广告,内容吸引了流量,然后平台在内容中植入广告,赚了钱大家一起分。这样一来给创作者的钱,并不是平台掏的,来自于广告商。也是一个非常传统,使用非常广泛的商业模式。

这还不够,单纯靠着广告的话,估计大多数创作者的收益都不如预期,所以现在很多平台也把电商加入其中,给作者提供了直播带货的工具。

说到底,创作者的钱都是自己赚的,平台开发了功能,提供了土壤,也能从中享受分成。这个思路总的来说就一点,给创作者提供更多自身可创造收益的工具,包括打赏、虚拟礼物等。设计更多酷炫的虚拟礼物,用户通过视觉上的愉悦来给自己喜欢的创作者送礼物。

除此之外,有的平台还会做一套成长体系,一切都来源于的内容,一切的判断标准也都依赖于内容。不同的内容数据,累计不同的积分,不同的积分代表不同的等级,不同的等级又代表着权益不同。而权益跟奖励又是挂钩的,建立这样一个关系链条,只有这样用户才会有动力去升级。其实这个工作主要也是对创作者进行分层,平台的运营者毕竟不可能服务好每个创作者。通过这种方式,一来对创作者进行筛选,第二也是彼此建立信任的一个过程。我们都会关注内容风险,有了信任之后才放心把更多功能开放给创作者。

有了内容源,有了分发规则,有了判定标准,有了奖励,这样一个内容产品基础的循环就算有了。

为了更好的服务创作者,平台还要扮演一个导师的作用,给创作者做指导,撰写攻略分享给创作者。主要分三方面:一是产品功能的使用;二是如何把内容写好;三是传授一些运营知识。定期搞一些活动,激励用户生产内容的积极性,平台要与用户共同成长。

再往深了说,平台要继续提高竞争门槛。帮着用户保护他们的内容不被侵犯,如果被侵犯了能够及时的告诉他们。更激进的方式是跟他们签约,建立一个法律上的合作关系和约束力,这样对于创作者以后继续给你内容提供了法律上的保障。

上面所说的这些,到今天为止仍然是所有内容平台都会做的,任何一个新的内容诞生还是沿着这条路线发展。做了这么多年内容产品,我一直希望搭建一个可持续、健康的内容生态。平台作为规则的制定者,少一些人为干预。

02 平台的价值

平台还要做的很重要的一件事,就是建立内容与用户之间的通道。归纳总结内容到达用户的路径有3个:一个是官方的推荐;一个是个性化推荐;还有一个是用户与内容的订阅关系,与作者的关注关系。

理想情况下,如果把内容生态搭建好了,等着自由循环就可以。但对于创作者而言,最看重的就是粉丝,有了粉丝,即使没有平台的流量支持,内容也会有数据。而任何一个内容产品,如果没有粉丝关注这个关系,那创作者的角色都会比较被动,没有安全感。

从现实的角度讲,创作者的创作动力本身是基于兴趣和个人的能力,但是时间长了,大家的驱动力也会参杂一些利息因素。而单纯靠着平台基于内容给予的奖励或者是说平台插入广告的分成,并不能让创作者满意,或者说这个量级还是太少了。如果内容是广告的话,平台肯定是不会给予推荐的,所以最后只能通过这个关注关系来传播。虽然作为平台不希望有广告,但想要创作者有持续创作的动力,需要给予创作者一定的空间。

上面说的是产品功能,可功能谁都会做,关键还是看谁做出来的有效。有的平台,创作者尽管有十几万粉丝,但是发布的内容却没有人看,主要原因还是用户的活跃度不行。平台需要从用户这一端想办法提高其活跃度,要不然创作者的热情就会减退,搭建的这个机制也没法很好的运行起来。

可提高活跃度又谈何容易,说到更深层次的原因,跟平台本身内容的类型和媒介有很大关系。有的内容虽然有价值,但是用户的接收门槛比较高,用户主动去接触内容的动力自然不足,这种情况下想去提高用户活跃度势必会非常困难。

对于创作者而言,不同平台的价值也是不一样的。有的平台创作内容的成本很高,但是效果却很差,但有的平台创作成本比较低,却能收到不错的效果。差异之大,跟平台自身的定位和覆盖的用户群有关,前者决定了内容的衡量标准,后者决定了内容的用户接受程度。

很无奈,用时下流行的一个词来说,这就是赛道不同造成的优劣势吧。

03 媒介的影响

现在的内容平台也有媒介之分,像B站和抖音是以视频为主,喜马拉雅主要是音频,今日头条是所有媒介都有的综合平台。

媒介的一个很重要的影响就是,不同的媒介覆盖的用户群体不一样,视频>音频>图文。今天我们看以视频为主的,不管是爱奇艺、腾讯视频还是抖音,日活都是上亿规模,而在音频领域,即使喜马拉雅这样的行业领头羊,日活数据也比视频平台低了好几倍。两者完全不是一个量级,单纯做图文产品的日活就更小了。

一个音频产品怎么去超过一个视频产品的用户呢?其实我觉得没必要,各自安好,但是有的单一媒介产品有这样的梦想,做内容的,本来赚钱就难,用户量少的话,吃饭更困难。

从内容源头上来说,不同媒介的内容可能都来自于一个创作者,创作者可以把同样的内容写成文章,录制成音频,也可以制作成视频,放到不同的平台上传播。内容的本质没变,只是媒介形式变了而已。

然后这个问题就变成了平台对于创作者的吸引力,哪种媒介平台对于创作者更有吸引力?虽然说创作者可以把内容制作成不同的媒介,但这是有成本的,看创作者的动力。再探究,到头来还是得看内容生态的规模,用户量,内容数据,服务,收益的方式和数量,关注这几个方面。

这几年,我平时也有写一些文章,放到一些垂直类的内容平台。感叹一点,一些垂直领域的内容平台,本身用户量很少,内容又无法直接收费,平台的营收又比较困难,所以在吸引创作者方面非常尴尬。给予的东西吸引力非常弱,如果在同行业还有竞争对手,且不说能不能发展成功,速度一定是非常慢的。


文章来源:人人都是产品经理   作者:云瑞

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


情绪版设计-助你打开设计创意

鹤鹤

1.情绪版的概念

首先我们要明确什么是情绪版?我的理解是:情绪版既不是初稿也不是最终的风格方向,而是设计师在了解了相关的产品背景后,基于自己对于产品的理解给出的一个较为初始的设计建议,并且希望可以通过这个初始的建议与产品侧达成一些相关的设计共识。

 

2.情绪版的大概流程

情绪版的设计流程大概分为前中后三个阶段,前期:分析-收集,中期:筛选-组合,后期:打磨-呈现。

 

前期:分析-收集

主要是分析产品相关背景或需求本身的方向,结合产品背景及需求本身再进一步分析大概的设计方向并收集相关素材内容。

 

中期:筛选-组合

当我们收集完成后需要对现有素材进行二次筛选并组合,基于现有素材组合大概的设计方案结构。

 

后期:打磨-呈现

基础方案组合完成后需要进行二次打磨,细化方案的内容表现,检查整体的一致性及完整度,最后呈现给产品方。

 

3.为什么要做情绪版

可能很多设计师会疑惑为什么要做情绪版,直接设计初稿不就好了吗?如果有这个疑问,可能还没实际了解到情绪版到作用。但我们可以试着从我们在设计过程中遇到的痛点来了解情绪版的作用或者意义。

在设计的过程中你是否会存在下面几个问题:

前期思考不够——设计产出方案少;

设计不惧探索性——设计来源没有考究;

初稿多次修改没能达成共识——设计表达不出对方想要的;

设计中期出现不一致——设计没有贯彻始终。

 

4.情绪版的作用

从这几个问题中,我们可以得到一个比较统一的结论就是:前期设计呈现内容不够,导致沟通不足而产生方向不统一。因此基于这个关键点,我们再来看情绪版的作用

 

(1)辅助构建世界观

在前期,世界观、背景方面的内容大多是以文字的方式呈现,因此设计师可以通过情绪版的方式,来输出对应的世界观设计表现,这样可以更加直观的表现出对应的视觉语言。

 

(2)具象设计想法

在初期与产品侧沟通时,单纯靠语言表达的方式很难让对方达到一种脑补的状态。因此借助情绪版的方式更加直观的呈现设计想法,通过具象的图形或者图形,大大降低双方的沟通成本。

 

(3)明确设计方向

基于第二点的沟通,我们可以明确的了解到产品侧的一些喜好。为后续设计初稿时起到一个清晰的方向作用。

 

(4)提高前期设计的效率

从零到一设计一套完整的方案往往需要耗费较长的时间,借助情绪版设计的方式来快速响应一些想法及创意,这样可以大大提高前期的输出效率。

 

5.情绪版的基本原则

从多次的尝试中,我总结梳理了几个基本原则,了解这些原则可以让我们在做的时候更加严谨,输出更加准确的设计方案。

 

(1)多方向性

情绪版的设计与我们日常设计一样,需要给出不同的方向建议,单一的方案往往难以抉择。多方案输出除了提升抉择空间之外,还可以增加方案碰撞的情况,往往可能是方案A的某部分内容叠加方案B的某部分内容才能产生最初的方向。

 

(2)尝试性

此阶段的所有输出皆属于尝试与探索,因此不必过于考究设计细节,重点在于表达出需要相关的设计概念及思考想法,把更多的时间留作设计思考及方案尝试。

 

(3)效率性

情绪版的输出重点在于前期沟通而达到一个比较好的共识,因此在保证质量的情况下,避免花费过多的时间而影响输出的效率性。尽量做到快与准。在过往中项目组,基本上是以半天(4个小时左右)为一个单位来完成一套方案。

 

(4)试探性

情绪版是一种非常有效试探产品侧想要往那种方向去推动的方式,因为我们在实际的设计过程中,产品侧可能也对整体的设计大调并不少特别有明确的脑补,因此设计师可以借助情绪版的设计来挖掘产品侧想要往哪个方向进行发力。

 

6.情绪版设计的方法

这里总结情绪版的设计方法大概有这几种:1.借助图像/插图、2.结合实际场景引申、3.借鉴摘取同类型设计、4.绘制草稿。

 

(1)借鉴图像/插图

在我们设计一些专题活动或者绘制插图相关的一些设计时,可以考虑使用这种方法来输出你的情绪版设计,可以通过借鉴一些设计网站或插图网站上的现有素材来拼接,并表达自己在这方法的一些设计意图及想法。

 

(2)结合实际场景引申

从更概念化的角度出发,通过引用一些实际场景、物品、图像,来拓展相关的图形、质感、色彩方面的设计,并且输出相关的设计雏形。例如我们在设计LOGO或者图形类的一些设计,使用这种方法就可以帮助我们突破一些现有的认知壁垒。

 

(3)借鉴摘取同类型设计

在设计之初,我们通常会有一个大概的思考雏形,但如果直接开始设计往往效率上并不高。因此可以借助一些设计网站上的设计,通过摘取组合的方式呈现自己的初步想法。我通常会在UI新版或者改版的时候使用这种方式,但只能表达大概的想法且不能代表最终的初稿设计。

 

(4)绘制草稿

当我们想要表达一些沟通或者框架的设计时,我们可以使用草稿绘制的方式来表现,这个方式简单快捷,可以很有效率的对齐大部分的设计共识。

 

7.情绪版设计的注意事项

基于原则及方法,我们可以来简单了解下情绪版设计中需要注意的一些事项,通过这些内容让你在实际操作过程中少踩一些坑。

 

(1)控制方案的数量

设计方案控制在2-3个左右即可,前期大多是属于试探性方案呈现及找方向,太多则容易导致选择困难。

 

(2)避免篇幅过长

篇幅过长往往容易降低别人阅读的耐心,对于情绪版的输出也是如此。结合过往的经验,建议以16:9的画面为一页来呈现一个方案。

 

(3)区分重点次要

在一页内呈现的方案避免过于平均,可以适当突出某些想要重点表达的内容,例如在这个方案中想要重点突出图标、颜色等,那么这里需要突出这部分在画面中的比例,适当缩小其他模块的尺寸。

 

(4)结合世界观

在输出情绪版设计方案时还可以适当考虑结合产品的世界观,通过一些具象化的图形或者插图来表现相关的内容。例如我们之前在游戏中心改版的尝试中,就发散了几个相关的世界观,因此我们在输出方案时,则只需要把对应的世界观作为方案,通过情绪版的方式表现出来即可。

 

(5)保持整体风格一致性

一致性是表现一个设计师是否具有系统化、全局观的思考思维,因此我们在表现情绪版时也需要关注这方面的内容,避免整体的调性不匹配。

 

(6)完整性表达

在呈现方案时,尽量多维度的进行对比,呈现一个完整性、系统性的设计。例如我们在设计UI相关的内容,从图标、颜色、字体等等一系列的内容需要细致的阐述清楚,让人更加能够了解你的意图。

 

8.UI情绪版模版分享

由于我日常以设计UI为主,因此可以给大家重点分享我在UI情绪版设计的经验。希望可以帮助到大家快速上手。

当你在做UI设计情绪版时,需要明确了解UI设计中的结构,更系统性的去思考整体的内容。我们在UI设计中往往需要包含以下这些内容:图形系统(图标+辅助图形)、颜色系统、字体字形系统、质感形态、界面形态、插图风格、动效系统、影像系统,等等这些部分的内容。

 

UI情绪版模版

 

过往实际案例分享

案例一:整体风格比较偏个性一些,页面尝试用深色的背景设计

优点:整体风格比较酷,配色比较未来感符合年轻的人的审美,深色的背景让内容更加聚焦。

缺点:深色的设计接受度是否可以,是否适合平台类APP设计

 

案例二:整体风格3D化的设计,包括页面的一些体验上都可以增加视察的效果来设计

优点:整体设计风格比较新颖,符合现在的设计趋势,整体感觉也比较年轻多彩

缺点:3D的制作成本相对较大。

 

案例三:整体风格比较清爽,白色融入渐变的设计也会显得比较年轻

优点:整体页面清爽,可以满足任何内容的透出,渐变色的图标和按钮的设计补充了细节

缺点:整体氛围感、娱乐感较弱。

 

9.最后总结

很多时候我们会觉得情绪版设计可有可无,或者因为时间的关系不允许我们经过这一步。但,如我一开始提到的点,情绪版可以在前期帮助我们去打通很多思考的壁垒,辅助设计师在前期直观的与产品侧进行方向上的探讨,从而找到大方向上的共识。


文章来源:学UI网   作者:妙妙

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


你的屏幕「太黑了」!深色模式到底怎么用?

鹤鹤

深色模式并不万能 


从移动屏幕到大型电视,深色的UI界面随处可见。深色模式可以表达力量、奢华、精致和优雅,但这种设计模式也会带来很多挑战,应用不当难免会被用户吐槽。所以开始设计前,大家最好深色熟虑下,是否真的需要做深色。


物理学家说,黑色并不是一种真正的颜色,它没有光。艾萨克·牛顿爵士在通过棱镜照耀阳光的实验中,甚至没有将黑色包含在颜色光谱中。


在色彩心理学中,大多数色彩代表不同的人、不同的事物。西方文化里,黑色常与死亡、神秘和邪恶联系在一起;绿色与生长、自然相关;蓝色可以使人平静,因为它让人联想到天空和水,所以,颜色是饱含情感的。其他影响还来自文化,例如紫色仍与奢侈品联系在一起,在许多古代文化中,紫色是昂贵稀有的,只有贵族才能负担得起。


深色界面的数字产品,是未来发展的一大趋势。人们常说,这种模式可以减轻眼睛疲劳,但并没有相关证据表明是真的。在某些情况下,它还代表着节省电池寿命,也是一种美学意义上的选择。



深色模式应用限制

并非所有界面都适合深色主题。设计师应考虑品牌契合度、文化适应性和颜色心理学,在选择搭配时考虑情感影响,虽然这些因素不容易平衡。针对千禧一代的金融类应用程序,可能会用深色模式营造炫酷的效果,但对于以大众作为目标人群的银行网站就不太合适了。当用户想要查看自己的余额与支付账单时,太黑暗、太时髦都会显得华丽不实用。


B2B SaaS应用程序的深色模式很难设计,标准的Web UI组件(例如数据表、窗口小部件、表单和下拉菜单)在深色界面中看起来可能很奇怪。由于许多配色方案不适用于深色界面,对于某些品牌和产品来说,深色模式并不是最优选择。


从未接触过深色模式的设计师,如果想要搭建一个深色界面,不妨参照以下条件,先来判断下是否需要,什么情况下建议使用深色模式?

-当设计版面相对稀疏,极简型的内容比较少时;

-适用于连贯呈现的内容,例如夜间娱乐应用程序;

-想要创造醒目的戏剧性外观时。


以下这些情况下不建议使用深色模式:

-出现大量文本时(在深色背景上阅读相对困难);

-当设计需要多种颜色时。


深色模式下的桌面应用信息中心 by Ramotion 


在深色模式中形成对比

深色模式并不非要设计成黑色的,你可以将它理解为是一种「低光」模式。设计的核心点之一,就是表达出足够的对比度,这样视觉元素就会被分离开,且文本也会变得清晰易读。大多数设计师认为多用黑色,是获得强烈对比度的最佳选择。我的建议是,最好不要将纯黑色(#000000)用于背景或者尽量少用,把它留给其他UI元素,比如较小的图形或边框性质类的图形。


Google的Material Design深色模式,推荐使用深灰色(#121212)作为界面主色,目的是为了表达出更有深度的空间感。在定义配色方案时,往深灰中添加一些微妙的深蓝色,可以让数字产品的界面拥有更好的深色调性。


Brittany Chiang网站将深灰色与蓝色融合,形成了令人愉悦的深色模式


使用灰色的优点在于,它给了设计师更多发挥的空间,去表达更广泛的颜色。灰色调同深蓝色有同样功能,帮助画面更有深度,也更轻松地看到元素阴影。


需要特别注意深色模式中的文本对比,网页内容可访问性指南(WCAG)要求——「文本的视觉呈现对比度,至少应为4.5:1」,大型文本的对比度至少在3:1。设计师需要确保文字内容在黑暗模式下能够清晰可辨认。


另外,测试其他UI元素(例如卡片、按钮、字段和各种显示器上的图标)之间的对比也是一个好办法。如果UI元素之间没有突出的对比,那么设计就需要调整下了,枯燥无味的设计对于用户来说也是一种折磨。


左侧的深色模式中,文本和背景之间的对比明显不足


重点注意一:配色

颜色在深色模式中非常突出,最好使用浅色、饱和度低的配色方案,避免过于刺激视觉。颜色与文本一起使用时,需要参照WCAG的AA标准,至少4.5:1。Google建议颜色数量不必太多,使界面都处于深色中。


Jabra Sound +应用程序只给深色模式配色选择了2-3种颜色


适宜的配色方案能营造出非常好的对比效果。Colorable在线工具,只要输入色号就能看到文本和背景色组合在一起是否合适;Google的Material Design网站上也有一个调色板生成器,设计师可以使用它创建调色板,应用到UI上。


文字和基本元素(例如按钮和图标)在深色背景上显示时应符合易读性标准。如上面的Jabra Sound +应用程序所示,文本和图标可以使用白色以外的颜色进行搭配。


“使用强烈对比色来提高可读性。人们对于颜色的感知会受到许多因素影响,包括字号、字重、颜色亮度、屏幕分辨率和照明条件。” ——Apple人机界面指南


深色模式并不需要大量颜色来堆砌


重点注意二:利用负空间,少即是多

成功的深色模式设计,需要巧妙利用负空间。如果设计不当,会使数字产品显得笨拙与沉重。为了平衡这一点,设计师可以利用极简主义中的负空间,让深色界面更轻巧,也能让用户更容易识别信息内容。


UI元素周围的大量负空间使界面被重新定义,而且元素也不会出现密集与混乱感。如果没有呼吸空间,用户在阅读界面时,可能很快的略过,因为大脑没有快速的识别出重要内容。


充斥着太多元素和文本的界面,是导致深色模式体验差的祸根。设计师需要仔细考虑深色模式中的视觉层次结构,从而提升用户体验。


极简主义的深色模式界面 by Denys Tyrynskyi


重点注意三:版式

深色模式中的每一段文字都需要仔细检查,更需要关注2个方面——可读性和对比性。首先,界面中的文本必须足够大,以确保清晰易读(深色背景上的小文字,阅读起来体验很差);其次,文本和背景之间必须有明显的对比。设计师可以通过增加对比度,为较小的文本调整字体大小、字符间距和行高,去优化可读性问题。


W3C AAA建议常规尺寸的文本(如果不是粗体,则小于18pt)的对比度至少应为7:1。这也适用于其他UI元素——图标、文本图像和文本标签(按钮标签),设计师有责任确保所有人都能正确应用界面。


深色模式中应用优秀字体很有必要,像Google字体和字体库,以及Adobe Typekit都能提供便捷的设计支持。


AirPods Pro页面使用超大字体和强烈的对比,以达到最好的效果


重点注意四:空间深度感

深色模式不应该是平淡的,在正常明亮模式下,元素的高光或是阴影都会让界面产生深度感。而深色界面更具挑战性,建议设计师可以使用类似3-4多个层面,以及相应的配色方案来传达深度感。


为什么要有深度?深度感是与物理世界的一种呼应。我们的视觉有深度感知的能力,因为人们是生活在3D世界中的。表面的照明方式不同,以表示不同的海拔高度。位置越高,越接近隐式光源,表面就越亮。一个非常亮的表面,更容易区分组件之间的高度,还有助于查看阴影,使每个表面的边缘线更明显。


表面越亮,越接近隐藏光源 by Material Design


设置每个级别的表面颜色需要小心,建议不要超过4或5个级别,最好在设计系统中将元素的文本颜色指定为纯黑色(#000000),以在浅灰色背景上实现良好的对比度。


深色模式设计启发

基于上述原则,以下是一些优秀的深色模式示例:


The Atom Finance website


Atom Finance利用深色模式打造了精致外观,并将其强调色限制为3种。复杂的金融网站采用了极简设计,而且很好地使用了阴影来表现不同组件的深度感。


电子商务网站 by Daniel Klopper


电子商务网站 by Darion Mitchell


IBM仪表板 by Ruben Fernandez


尽管处理SaaS的深色模式遇到了挑战,但IBM的数据可视化仪表板仍是典范。强调色的数量最少,并且该网站使用细微的阴影显示不同元素的深度。


Wego,Spotify和Apple的深色模式APP(Android和iOS)


使用深色模式固然好,但需要依据实际产品属性来判断,不应出于时髦、流行甚至是与众不同或模仿他人等因素确定。设计者应有充分的选择依据,并考虑其内容、使用环境以及显示设备是否适合来最终敲定。


深色模式适用于一些数字产品,而非所有产品,界面简洁非常关键。对于复杂且数据繁重的B2B平台,以及文本繁多的页面,深色模式都是不适合的。对于从情感和美学角度去探索深色模式的设计师来说,他们开辟了一个新的领域。

文章来源:站酷   作者:UX辞典

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


微信产品设计 80 个为什么(2):设计和理念

鹤鹤

这 80 个问答将分为 7 篇,每天更新一篇:

  • 《诞生和发展》
  • 《设计和理念》
  • 《聊天》
  • 《摇一摇、附近的人和漂流瓶》
  • 《朋友圈、视频动态和状态》
  • 《小程序和微信支付》
  • 《公众号、看一看和视频号》

资料主要来源于:

  • 张小龙公开演讲和媒体采访报道。
  • 陆树燊(前支付宝资深产品经理,微信创始团队成员)的微信公众号:行者慎思。
  • Genie(微信产品经理)的产品分享。
  • KantZhou(拼多多用户端产品总监,前微信产品经理)的产品分享。
  • 啃饼(微信研发工程师)的微信公众号:啃饼随想。

设计和理念

问: 微信的页面设计很少改,那微信的设计师们每天在做什么呢?很闲吗?

陆树燊答: 张小龙评审微信的功能有一个习惯:不看原型图,不看设计稿,也不看 Demo,要体验前后台代码开发好后的产品。这就意味着:如果一个功能在给到用户之前有过 N 个方案,则微信设计师已经设计了 N 个方案,前后端开发人员已经开发过 N 个版本的代码。给张小龙体验,然后 100 个需求能砍掉 70 个。其中 30 个再优化 N 次,才真正发布给用户使用。

问: 对做微信的设计师有什么特别的要求吗?

张小龙答: 在广研(微信事业群前身)里面我们禁止使用竞争对手的产品,特别是 UI 设计师。因为大家知道,一旦你用了竞争对手的产品,你一定会受它的影响。你会觉得“哦,那样做是最好的”,你会摆脱不了它的影子。之前我们也经常发生这样的情况,UI 设计师一旦用了竞争对手的产品以后,设计里面就会不自觉地带有对方的影子。所以后来我们干脆规定不允许使用竞争对手的产品。这个问题对我们公司来说其实蛮严重的,有很多时候可能我们觉得只是借鉴一下,但是一旦借鉴就会受到影响。所以最直接的方法就是禁止使用。希望大家所在的团队也可以尝试使用这个方法。这个方法不会让大家损失任何东西。

但我们要了解竞争对手怎么办?我们可以让产品经理去体验竞品,让产品经理总结哪些体验是挺好的,UI 设计师知道这些体验是很好的,但是 UI 设计师要自己想办法去实现好的体验,而不是被对手所牵制和影响。

问: 对于微信来说,最关注的体验是什么?

张小龙答: 操作的响应速度永远是第一体验。我们在做邮箱时思考:对于一个好产品来说,可能需要满足几个要求,比如“切入要准”“功能设计得要好”。但我们把速度这项单独列出来,就是“速度一定要快”,这个速度是指系统响应的速度。

我们回顾 QQ 邮箱能做起来,有两点是最重要的:第一是简单;第二是速度快。简单和速度快,合起来是「简捷」,简单快捷。「简单和“快捷”是用户体验里面 最重要的两个关键词。

在微信 4.0 的时候,点击进入一个会话群的响应速度是挺慢的,我们做了很多的改进来保证进入速度得到提高。而在微信的朋友圈里,时间线的流畅度也非常重要,我们的开发在这里做了很多次的重构才保证了流畅的体验感,保证我们速度能超越所有有时间线的产品。虽然为了提升这里的速度,开发的代价很大,但是这样的代价是值得的。

问: 微信 UI 设计最看重哪方面?

张小龙答:UI 里面最重要的是条理清晰。有时我们会误认为 UI 就是怎么把用户界面表现得更绚丽一些,但是所有的视觉表现都不如条理清晰重要。

举个例子。微信的语音输入条经过了很多进化,现在用的是最下面的式样。

微信产品设计 80 个为什么(2):设计和理念

最下面的式样具有美感,字体也很清晰,「加好友」按钮在右边也很顺手。这都是经过了很多变迁的。前两个设计,在语音和文字切换的时候,还需要通过菜单来完成。后来一个 UI 设计师朋友提出意见,觉得这个地方使用不方便,每次切换都要用菜单多点一下。但是语音文字的切换是最常用的,应该放在左边固定。我觉得他说得很有道理,我们就在下一个版本里面修改了。

所以 UI 做得绚丽并不是最重要的。微信里面用的东西都很朴实,你不会看到花花绿绿的东西,能用系统控件的就用系统控件,而且尽可能保持一致的式样,包括一种字体、一种控件、一种背景,所有的东西最好只使用一种,不要增加两种或者更多种。

我们也一直鼓励每个界面只有一个主题。学习过摄影的同事都知道,一张照片里面只有一个主题。所以我们不会做两分式的设计,并且每个界面都会突出这个主题,把别的主题都虚化掉,或者把它放到一边去。每个对话框都有一个明显的默认按钮。比如每个对话框右上角都有一个完成按钮,并且是蓝色的。我们还用了文字来规定必须这样做。因为我们要让用户进到一个对话框后立即可以找到哪里可以完成,所以按钮一定要很显眼。

这是一个反面例子:

微信产品设计 80 个为什么(2):设计和理念

这个界面右上角有一个按钮,底下有两个按钮,会让人觉得很迷惑。很多用户跟我们说,以前他是压缩发图,但是现在有两个按钮,他就会点原图发送了。然后就忘记去点完成了,造成了一定的迷惑。这是一个不好的例子,是我们需要优化的地方。

问: 为什么微信的主题色是绿色?

张小龙答: 最初版的微信主色调是蓝色,后来换成了绿色。其实我们现在有点后悔用绿色,因为在很多安卓手机上,绿色的偏色很严重,看起来就是黄绿黄绿的。

刚开始是蓝色的,因为第一个版本是比较匆忙的,当时用的是系统的颜色。后来我们有一个版本就觉得应该调整一下颜色,就换成了绿色了。然而,这个时候微信的产品形态已经基本定型了,用户数也非常庞大,这时再去调整品牌颜色是不太可能了。其实我们现在很纠结,但现在改起来就对形象有影响了。

问: 为什么拼多多喜欢挖微信的产品经理?

答: 微信产品经理通过微信观察到了全中国网民的使用习惯,拼多多挖走微信的产品经理,因此才能设计出更符合在微信环境内传播的接地气方案。

问: 为什么微信只有 4 个 Tab?能把朋友圈做成第 5 个 Tab 吗?

张小龙答: 源起 Tony (腾讯前 CTO 张志东),他经常向微信团队提一些需求要加东西,我说没地方放了,他就说没关系,你们只有 4 个 Tab,还可以加一个。我说不能这样。过几天 Tony 又有一个需求,我说没地方放了,他又说,可以加一个 Tab。我想这样的需求反复几次,最后会没完没了。然后我就跟 Tony 定一个君子协议,两年之内,微信只有 4 个 Tab,不允许再有第五个,因为 4 个最简单了,一旦变成 5 个就变复杂了,不好了,对整个产品会有破坏性的打击,然后 Tony 也认同了,最终变成一个协议就确定下来了。这样就很好啊,我们在做朋友圈的时候,也没有把它放成第五个 Tab。然后 Tony 说这个朋友圈的入口是不是太深了。我们说,已定过协议了,所以不能放出来,我们自己不能破坏这个协议。当然“朋友圈”能不能放在第五个 Tab 上,还有别的原因。它总是有好处有坏处的,至少我们现在能保证两年之内只有 4 个 Tab,但一切也不是绝对的。如果有一个非常大的诱惑,说不定还是会加第五个 Tab 的。

问: 微信里是怎么引导用户设置头像的?

张小龙答: 在我们最早的微信版本里面,用户自己说的话是不带自己头像的,后面才把自己的头像展现出来,当用户看到自己的头像没有设置的时候,很快就会去设置头像了。可见这样的设计比经由别的环节去引导用户设置头像要自然很多。因为这是用户自发的,而不是被“引导”的。

问: 为什么微信里很少出现新手引导 Tips?

张小龙答: 我们在讨论其他产品的设计的时候,常常会想,怎么才能不打扰到用户,特别是我们想把新功能体现给用户的时候。现在很常见的是用 Tips 去提示新功能,看似体贴,实则让人烦躁,用户会觉得为什么要把这些提示强加到我当前的操作里面,感觉被打扰了。

需要文字解释的功能不是好体验。做 UI 的同事尽量不需要通过文字的解释就把这个功能做好,最好也不要用 Tips 这样的东西。刚才微博的同事还跟我聊到,做微博的时候,有新功能了需要通过弹 Tips 来告诉用户。我问为什么要这样做呢,他说怕用户不知道。但其实用户不知道就不知道吧,又不会损失什么。为什么所有东西都要用户知道呢?所以产品里面最好能立一个规定,能不用就最好不要用。但是微信也还没做到完全不用。因为微信还有一些地方没处理到位,所以偶尔也会用到 Tips。但是自己要知道一点:每一次都是因为做得不好才用 Tips。

问: 为什么 QQ 的头像是圆的?微信的头像是方的?

QQ 设计师答:

  • 相比方形,人的头像更接近圆形。圆形 QQ 头像能更突出头像弱化背景,也更鼓励用户使用真实自拍作为 QQ 头像。
  • QQ 作为平台会接入游戏和第三方应用内容,圆形 QQ 头像在这些方形、异形图标环境中提高辨识度,降低用户的认知门槛。
  • QQ 希望给用户传递乐在沟通,展现年轻个性的态度,圆形 QQ 头像更具灵动和活力,与之无缝衔接的头像挂件也为用户带来更个性化的搭配和丰富的自我展示。

微信设计师答: 因为照片本来是方的,方头像更符合用户习惯。

问: 微信的启动画面是一个小人站在地球还是月球?为什么是站在月球上看地球而不是在火星上看地球?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 其实第一个版本是在地球上看月球,但是后来就变成在月球上看地球,有了突破性的变化。但是这个变化并不重要。有些人甚至做了一些调研:用户看到这个画面到底有什么感觉?然后把调研结果分享给我,发现用户各种感觉都有,很不一样。然后问他,我们到底是怎么想的。我回答:能让用户有不同的感觉就对了。如果思路太统一就变成乌合之众和愚昧了。所以这样是最好的。

但是如果我们把微信的 LOGO 放在那里闪啊闪的,那就没意思了,没有任何想象的空间了。这个画面也让我们看到人类的孤独感(这个小人都离开地球了,感到孤独了)。而孤独是永恒的主题。

问: 为什么微信没有“系统管理员”这种官方账号?

张小龙答: 大概在两三年(这里指 2009 年)以前,我突发奇想,为什么我们给 QQ 邮箱用户的通知信都是“系统管理员”作为发信方,为什么不是我们自己的美女产品经理作为发信方,这不是显得更加人性化一些吗?从那个时候开始,我们就再也不用“系统管理员”这个账号来给用户发信了。用户收到的每一封来自“系统管理员”的邮件,都被替换为一个真实的产品经理。如图中案例所示,会看到真实的产品经理的落款,有她的头像和名字。

微信产品设计 80 个为什么(2):设计和理念

问: 为什么微信 3.0 版本的启动页面上放出了迈克尔·杰克逊的图,写了一句话:“你说我是错的,那你最好证明你是对的。“?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 之前的微信版本被批评得挺多的,特别是被业界的评论家批评。所以我想了这个办法回应一下。刚好在那段时间里,我在上班下班的路上,MJ 的音乐听得很多。也觉得他的音乐跟我们的产品有某种关联性,因此觉得非常需要去感谢一下 MJ。直到有一天这种感觉越来越强烈,就做了这个设计。为了能做出这个效果,我还特地请同事们到他的车里去听 MJ 的音乐,觉得这样效果会好一点,让他们能找到做这个页面的感觉。通过这个设计我们向外界所有的评论家表达:如果你说我是错的,最好证明你是对的。

问: 为什么微信 4.2 的启动画面写着「是时候放下手机,和朋友面对面了」?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 拿一个停留时长衡量一个 App,这个跟我对互联网的初心的认知是背离的。每个人一天只有 24 个小时。互联网人的使命不应该是让所有人除了吃喝拉撒,把时间都花在看手机上面。一个用户每天的时间是有限的,这是次要的。最主要的是,技术的使命应该是帮助人类提高效率。比如作为一个好的沟通工具,一定要高效。

用户其实并不会按照你的内容多少来决定它的时间分配,但我觉得这是很合理的。 如果我们非要停留时间更长的话,我们当然有很多办法来做到这一点。但是这只会让用户觉得不爽,因为他的社交效率降低了。如果非要把他半个小时能完成的事情延续到一个小时的话,只能代表效率降低。微信永远都不会把用户停留时长作为一个目标。

问: 微信 7.0 UI 改版那么多用户不满,为什么不改回去?

张小龙答: 其实任何一个大的改版都会带来用户的不满,因为人习惯于自己熟悉的界面,觉得是最好的。我们没办法让 10 亿人来投票决定什么是好的,也投不出来。那怎么才能通过改变寻求设计的优化,让它变得更好呢?这个决策必须遵循好的设计原则

就像微信 7.0 版本的时候我们内部使用了很长时间,我自己一直在两个版本不停的切换,当我用了一段时间,我不愿意切换到旧的版本去。也许用户一下子不能接受,但是我相信他们适应以后也会接受。重要的是我们必须要用我们的产品不停的适应时代,而不是因为害怕用户的抱怨就不去改变它。

尤其是 UI 上,我们永远不可能让所有的人满意。但是,我们比如让产品越来越美,符合甚至引导当前用户的审美,而不是落伍于时代。

问: 微信 7.0 版本启动页是一朵花,包括你写的看见之类的话,灵感是来自王阳明吗?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 跟王阳明的书有一定关系。当时写的是,「因你看见,所以存在」。王阳明的书里是说,一朵花长在山里的石头缝,你不看它,它就不在,你看它,它就在那里。在 7.0 版本,我们想表达的是说,看见的力量。如果按照王阳明的心学,心的力量是很大的。同理到社交上,如果你看不见这个朋友,这个朋友十年没见了,他其实不是你的朋友了。当你看见他,他才是你的朋友。王阳明的书还可以跟量子力学结合。我们微信 7.0 那句话,「因你看见,所以存在」,完全符合量子力学的角度。因为一个粒子,当你观察它的时候,它才存在。你不观察它,它就是一道波。

微信产品设计 80 个为什么(2):设计和理念

问: 微信 8.0 的启动页是怎么设计的?

微信产品设计 80 个为什么(2):设计和理念

张小龙答: 做产品其实是个很枯燥,很理性的过程,无法把个人情绪和情感带入。唯一有机会带入的地方就是启动页,你可以有一些情绪的发泄。微信 8.0 的启动页,有个故事我跟同事们说过,有次我在开一个很正经的会,中间我开小差了,拿了当时的一张纸,在上面写了现在开屏页的这几句话。我觉得可以代表这次更新的每一个功能,刚好连起来了,而且我也觉得特别简洁,没有任何修饰和形容词。我自己觉得挺好的。我看见你,代表了通过视频号看到另一个身份的你。笑脸,代表了你的状态。烟花,是代表新的表情。一首歌代表了新的音乐播放。你看见了你,其实代表直播,通过你的眼来看到你眼前的世界。

问: 为什么张小龙说「好的产品应该是用完即走」?

张小龙答: 我发现大家对于这个词有特别多的一些误解。大家都会说,因为大家都离不开微信,所以才会说“用完即走”,去年对这点可能没有解释得特别清楚,我其实只说了上半句话,用完即走,但其实还有下半句话,走了还会回来。

用完即走的本质是任何一个工具都是帮助用户完成一个任务,越高的效率越好。 当我们完成一个任务以后,我们当然希望用户能做别的事情,而不是一定耗在一个工具里。

比如说用微信,我们当然希望微信能给用户带来更多的帮助,但并不意味着我们希望用户一直低效率地在微信里处理事情,如果他一天信息的处理要用两个小时,那我们应该帮助用户尽可能在两个小时之内处理完,而不是说一定要把两个小时的任务变成三个小时,让他在微信里花费更多的时间,我认为如果那样就不是一个用完即走的概念。

所以用完即走和用户再回来,其实并不矛盾,相反只有当一个用户在一个工具里用得很愉悦,用得很高效,他才会下一次回过头来使用这个工具。我们现在说的小程序也是这样的,小程序应该是帮助用户尽可能在短的时间里面完成一个任务,并且离开这个小程序,这样的话他才会有很好的体验,下一次他会继续回来用这样一个小程序。

问: 微信一直倡导用完即走,但 8.0 版本怎么给人感觉用完不走了?比如视频号加了更多推荐内容,似乎增加了用户的停留时长

张小龙答: 推荐的东西,如果把它定义为是娱乐时段的话,那么它是在这里娱乐消费的。目标是消耗时间的。在这一个板块,并不是说非要他立即就走。用完即走并不是说用户必须使用的时间越短越好。就像一个 120 分钟的剧,不是说为了让你用完即走,我用技术让你 60 分钟看完,这样就不合理了。

问: 微信的「悠闲」表情怎么戒烟了?

微信产品设计 80 个为什么(2):设计和理念

答: 很早之前,QQ 和新浪微博就撤除了吸烟表情。据悉这是北京控烟协会活动的结果,控烟协会认为这些软件在日常生活中使用频率非常高,每一次发送都会产生潜移默化的影响,有诱导青少年吸烟的倾向。

问: 为什么微信对用户称呼统一都是“你”而不是“您”?

张小龙答: 我们并不需要用一个很尊敬的态度称呼用户,而是应该当朋友一样称呼,所以应该是一种很平等的关系,这个写进我们的产品条约里面去了。

问: 微信是工具还是平台?

张小龙答: 在我们对公司的一次培训里面,有个同事问我微信的战略是什么?我当时只说了一句话,我说微信只是一个工具,我们应当想如何做好这个工具。在同事们的心目中,微信并不仅仅是一个工具,大家认为微信是一个平台。但我认为微信是一个工具,这是一个非常宏大的目标,我并不认为一个工具是一个很低层面的东西,事实上人类从原始人进化智能人类的过程,就是因为人会制造工具,我们所用的绝大部分的产品本质上来说都是工具,但是工具有好坏之分,能够做一个非常好的工具其实难度是非常大的,但是如果说我们要做一个平台,我会不知道我们要做什么?一个好的工具应该有一个很强的属性,就是提高效率,用完即走。

问: 为什么微信的设计很克制?

张小龙答: 克制这个词从来没有在我的脑袋里面出现过,如果说做一些事情我们要求自己很克制的话,那是一种什么样行为?那是一种自我压制的行为,但是我并不认为我们在做这样的决定时我们要自我压制,或者说自己切割掉我们很多想要做的事情,那不是一个很好的状态。

相反的,我们在做很多很多决定的时候,反而要去判断什么样的东西是最合理的,合理性才是这里面要考虑的一个最重要的因素,我们会舍弃掉很多很多本来想要做,后来发现做不好的东西,这种舍弃并不是因为说我们很克制,所以我们少做一点,而是说我们发现有很多事情做不好,或者说有很多决定它一开头是错的,或者说很多的想法,最后验证可能是行不通的,那我们如果硬要去做这些事情是不合理的,我们会把它舍弃掉,而不是说我们要克制。

问: 为什么微信 8.0 浮窗从悬浮改成了左上角?

张小龙答: 我其实一直很不喜欢浮窗。因为它就像狗皮膏药。这也是 PC 时代大部分网页浏览的体验都不好的一个原因。

为了解决一篇文章要很久才看完,而中途要不断处理微信消息的需要,我们有了浮窗功能。但它并不完美。很多时候,一篇文章,一个长视频,是要分很多次才看完的,如果每次都要先拖到浮窗,也是很繁琐的。

现在,微信提供了一个尚未看完的内容的列表,方便可以随时找回这些内容继续看完。尤其是对于长视频,更加需要随时可以切走,然后又能快速找到。直播也一样需要。

问: 为什么微信安卓版不采用 Android Design 设计风格?

Kantzou 答: 我每次在「知乎」上吐槽 Android Design 的时候,总是会有人在下面说,“哎呦,原来「微信」的安卓版做那么 Low 是嫌 Android Design 做的不好啊。”这种评论,我都不会回复。

我讲一下为什么差呢,举个例子:我给我爸买了个安卓手机,给他用。「微信」在那个时候,Tab 栏是在顶部的,然后我告诉他,“哎,左右滑动是可以切换的。”

微信产品设计 80 个为什么(2):设计和理念

我观察他用,我会发现:4.7 寸屏,他往上按的时候,他不会去滑的,因为他看到那里有个字,他就会去按,因为他没有学习到那个程度。Android Design 的问题在于太超前,我这么说,那些喜欢 Android Design 的人心里会不会更舒服一点?

为什么乔布斯那么牛 B?是因为他知道,触摸屏出来以后,人的自然反应就是「press」,而不是「滑」。「滑」在现今这个阶段还不够自然。Android Design 在这个问题上解决的不好,因为绝大多数的大众不像我们,我们是已经充分学习了的。我相信很多大众,比方说不是我们这个专业的学生,你去让他们用一下 Android Design,我相信大多数人都是点,很费劲的点,Android Design 为什么会做成这样?他觉得啊:大屏一定要做的让人方便,所以操作是滑动,这样不用让他点击,就不会让他觉得那么累。所以我为什么觉得谷歌是一个除了个别 App 设计的不错,其他 App 设计的都很烂的公司。谷歌设计的真的不好,我说的设计的不好,不是皮毛上面,所以你不要跟我纠结这些细节,我说的是他的逻辑不对,谷歌是一个太工程师思维的公司。

Android Design 有个「应用抽屉」,我跟我爸说,“我给你装微信了”。

微信产品设计 80 个为什么(2):设计和理念

他问,“在哪里啊?”我说,“点那个地方。”“哦”他说,“知道了。”下次又问,“微信在哪里啊?”我跟他说,“点那个地方。”三次还是不知道,为什么?因为 Android Design 在给他二维的导航,因为你要在桌面上面滑动,如果桌面上面滑动没有,你还要给他一个「应用抽屉」,在一个新的地方左右滑动,简直 Unbelievable,但是对于安卓的技术思维的人来讲,这个很合情合理啊。

问: 微信「设置」里为什么会有个「插件」?

张小龙答: 给用户选择权。为了保持微信的简单,在微信里面,除了核心功能,大部分的功能都做成插件的形式。这个方向很早就定下来了。这让我们就算加了很多东西,也没有把微信变得复杂。

陆树燊答: 微信团队的基因里原来就有实验室文化的,这个要从微信的历史说起。

微信团队在做微信之前做的是 QQ 邮箱。QQ 邮箱里面有一个功能叫“邮箱体验室”,用户在这里开通一些新奇的功能。QQ 邮箱正是靠一次次的实验,尝试各种功能,才从一个烂到没人用的鸡肋邮箱,慢慢变成雄踞行业第一位置的七星级邮箱。

微信产品设计 80 个为什么(2):设计和理念

而微信从创始之初,就一直在继承 QQ 邮箱的「遗产」,从邮箱的 QQ 对话功能到微信的「QQ 离线消息」,从邮箱「漂流瓶」到微信「漂流瓶」,从「附件收藏」到「微信收藏」,从邮箱的「阅读空间」和「邮件订阅」到微信的公众号……

同样的,微信也继承邮箱的体验室,有了「第一个实验室」,那时的名字叫「插件」。所谓插件,就是把功能选择的权限给到用户,用户觉得喜欢和需要,就「安装」插件,觉得不需要,就「卸载」插件。而开发团队届可以通过看用户安装和卸载的情况来决定插件的去留。

于是,有的插件试着试着就变成不可插拔的功能了,比如朋友圈,现在已经不能卸载了;有的插件试着试着就不见了,比如微博阅读。

后来,大概在 13 年,微信 5.0 发布前后,微信插件改叫「功能」,深埋在微信的设置选项里面。因为随着微信用户量的增长,用户习惯的改变,早期的那些插件功能已经被证明不需要了,但又有个别老用户在用,不好删除,就把它们的入口深埋起来。比如语音记事本、QQ 离线助手、QQ 邮箱提醒、群发助手。

这个修改,某种程度上意味着,微信的第一个实验室时代结束了。这一轮实验,基本伴随着微信团队在移动互联网的探索和成长。实验之后,微信也奠定了它的行业地位,所谓的「移动互联网船票」。

问: 微信为什么重视产品设计而很少提到运营?

张小龙答: 对于一个产品,我们更应该偏向产品本身还是运营?这是一个老生常谈的问题。这里也没有绝对的衡量标准,只是看各家的特长和偏好了。而且对于不同的产品,也会有不同的偏重点。

而我的观点是做一劳永逸的事情是最好的。很多开发的同事知道,在开发上我们到底是要做「类型」还是做一个一个「实例」?如果我们不是把各种订阅内容抽象为一个订阅平台的话,可能就会做了很多很多的「实例」出来,产品变得非常复杂。比如微信的「漂流瓶」和邮箱的「漂流瓶」到底有什么不同?除了微信的「漂流瓶」可以发语音,在产品结构上的不同在哪里呢?邮箱里面的「漂流瓶」有不同种类,比如「同城瓶」「交友瓶」,它更偏运营一些;而微信里面的「漂流瓶」就只有一种。因此我们发现,在邮箱里面这样做,我们会因为用户的需求类型增加,需要不断地增加内容才能满足用户,可以想象这么运营下去,会把大家都累死。所以我们更加倾向直接做到最本质的东西,至于它能满足用户什么需求,那是用户自己的行为。我们做一个「类型」,而用户自己来产生「实例」就可以了,也就是说,我们用「类型」的思路,把所有「实例」都做了。

我们按此方法做完很多特性以后,发现已经没有改进的空间了,也不需要去改进了,一改进可能就不对了。因为一改进就可能变成去把它「具体化」,一旦开始「具体化」以后,就需要不断地「具体化」,就没有可以想象的空间了。

文章来源:优设   作者:龙爪槐守望者

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

体验设计遇到品牌升级

涛涛

编辑导语:用户的体验感对于一个产品来说,是至关重要的。一个好的产品能够充分照顾到用户的感受,从而拥有大批的忠实用户,而品牌升级则是体现产品定位和发展策略的不二之选。当体验设计遇到品牌升级,设计师该如何做?本文作者对此展开分析讨论,一起来看看~

01 用户体验设计的现状

1. 同质化的现象

过去,我们在用户体验中一直强调以用户为中心,追求给用户带来更好的体验,不断强调一致性、易用性、可用性等等。但如今,我们放眼手机里的app的用户体验,在过去十几年的积累下,用户的使用习惯、用户的认知都得到了很大的提升,产品的基础体验也基本都做到了使用流畅、一致性的现状。

但这却带来一个问题:同质化严重。

比如,当我们打开电商类的app,发现某东越来越像某宝,xx越来越像xx。可能我们抹去了logo之后就不知道这究竟是哪家app了。

甚至,我还发现有的公司在设计时是从B抄个设计样式,再从A抄个设计样式,最后在从T上抄个样式,最后设计结果成了大家看到的现象:设计越来越趋同。

2. 品牌升级的现象及价值

大厂的动向

最近这两年,我们频频看到大厂的一些设计动作:品牌升级、设计语言升级。

很多外行人站在一个旁观者角色对升级的设计嗤之以鼻:“这升级了什么?怎么跟没做一样?”“花了几百万就做了个这,真不值”…………

实际上,其中的背后不是简单的设计样式更换,而是战略定位的调整。

比如支付宝去年突然换了logo的颜色,而这背后的战略调整是支付宝升级成生活开放平台的战略。

比如淘宝去年也换了字体logo的设计,而这背后的战略是新淘宝要更好的链接内容、用户、商业。

3. 品牌升级并不是仅仅换个logo

所以,看到这里,我们首先明确了品牌升级、设计语言升级不仅仅是设计样式变化,不是设计师随随便便设计画了个图形,随随便便吸了个颜色,而是基于品牌定位与品牌战略调整的背景,是通过多维度调研,积累了很多有价值的信息,经过科学的分析推导明确了设计方向,最终才形成可落地的品牌升级设计方案。

那么,问题来了!既然品牌升级了,在用户体验设计中如何体现新升级的品牌感呢,如何能体现品牌的定位和战略呢?

02 体验设计中如何体现品牌感

当我们在收到品牌设计方案后,就开始面临到体验设计升级如何体现品牌感了,这个时候不是仓促的先定义新升级的颜色等样式问题,而是需要先充分理解战略背后的意义,理解用户、理解目标、理解新商业方向……,再聚焦收拢在关键点上,从而针对体验设计中的设计体系定义好设计原则,在最终落地到设计元素上,比如颜色、控件、交互等。

设计过程:品牌战略理解-收拢关键点-定义设计规则-落地设计元素

1. 理解战略

战略理解实质上就是公司未来业务调整,方向调整,目标调整,我们的设计一定是基于这个方向的。

比如2016年我在公司一次红蓝战略定位后进行了2.0生态电商改版,这个红蓝战略从字面意思理解很抽象,但实质是内容化、视频化的业务方向,我根据这样的战略定位设计了创新的2.0的生态电商设计方案获得了认可。

2. 收拢-发散-聚焦

理解完战略方向后,一般会进行一些发散性的收集。比如滴滴在早期几年前的一次品牌升级分享案例里,那时候升级前品牌语是“滴滴一下美好出行”,后来在专车、顺风车业务发展后,各业务定位模糊,需要针对业务重新定位梳理,经过发散了很多关键词,最后针对不同业务线聚焦在舒适、活力、正式三个关键词,形成新的滴滴设计语言。

资料来源:滴滴李大声《c12d调分享》

3. 设计规则

设计原则也就是我们设计中的一份指南,是建立在前面的分析推导后,他所传达的是设计价值观。指导我们在设计中什么该做什么不该做。

说到这里,这就让我想起来经常看到很多设计团队定义自己的设计原则是:清晰、高效、简洁。这么一看没毛病,的确设计是要保持信息的清晰传达、有效的展示、简洁一些。但这些定义太过宽泛,毫无意义,根本无法指导实际的设计。

设计规则应符合什么规则呢?

首先,设计规则要贴近业务,真实而有效。

比如做外卖的要突出快、服务、准时的定位。做出行的要突出安全的定位。做金融的要突出收益增长等等,我们不能就笼统的把所有的不同行业业务规则都定义成清晰、高效、简洁,这并不能形成差异。

以平台要升级为“安全”为例,我们需要知道什么才是“安全”的设计规则,除了绿色、蓝色,还有什么行为才会产生产生信任安全感。比如规范、统一、征信公信力、理性的设计。

这样我们就可以针对升级“安全”的设计体系规范起来,把信息以用理性化的设计来呈现表达。

设计规则要有态度

实际上,每个设计都是有意义的,每个规则的背后都是不平凡的工作。举个动效的例子,有的设计师会认为动效看起来很酷,那就加的越多越好,结果适得其反,用户可能因为动效太多太酷不知道该干什么了。

谷歌在他的设计体系里提到“每个动效都是有意义的”,可见谷歌对动效的态度表达了自己独特的设计规则的魅力。

蚂蚁金服在自己设计体系里提到的独特四点设计价值观:自然、确定、生长、意义

  • 自然:感知自然、行为自然
  • 确定:设计确定,保持克制、探索设计规律,用户确定,体验一致
  • 意义:明确目标,挑战过程
  • 生长:价值连接、人际共生

这每一点都不是简单的“清晰高效”这么简单,具有深远的设计指导意义。以“自然”为例,用户对图形、色彩、图标等视觉感受的信息,遵从自然规律,降低用户认知成本。举例:明明红色是总所周知的警戒颜色,我们用绿色来做警戒色,这就违背了自然规律。

说到这里,我们大概就能清楚明白设计原则的意义了,当面对市面各种设计潮流:抽屉设计风、大字体设计风、新拟物设计风来临时,我们就可以从设计原则来理性判断如何取其精华,去其糟粕,为我们的业务和品牌传播来使用,而不是盲目的追赶潮流

4. 设计元素强化品牌记忆点

最后,从设计规则推导出来后,到具体的设计元素:颜色、图标、配图、文字设计等,我们还需要结合品牌找到具有记忆性的点,形成dna记忆符号,这个记忆符号给用户在视觉、触觉等感官上加深印象。

说到最具有品牌记忆点的无疑是耐克、阿迪、可口可乐这些图形深入人心,还有蒂芙尼蓝等等。

比如最近要上市的知乎,核心定位是社区价值,他的logo以及app的开屏都体现了社区交流的属性。

比如最具阿里云更新的品牌升级,利用光标这个符号贯穿整个设计体系,形成独特的超级符号,可以说是一个很经典的案例。

资料来源:阿里公众号

当然,提炼出具有记忆点的品牌dna的超级符号是需要经过长期推演和长期传播形成的品牌记忆点。

最后,总的来说,当体验设计遇到品牌升级,不是简单的画个图形,吸个颜色,每个设计背后都有遵循的依据,都有背后的科学分析推导。所以,我们不要再盲目拿清晰、高效、简洁来作为设计语言的理念了,需要探索真正有独特观点,贴近业务,贴近战略规划的设计价值理念,来指导未来长远的设计发展。


文章来源:人人都是产品经理   作者:Hellen咏舍

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





日历

链接

个人资料

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

存档