首页

产品怎样做出刷屏级传播?这5种思路可以试一试

资深UI设计者

从“秋天的第一杯奶茶”到“打工人”,从老乡鸡的土味发布会到哔哩哔哩的《后浪》,刷爆屏幕的传播一浪接一浪,成为我们这个时代永不落幕的风景。产品怎样做出刷屏级传播呢?本文作者总结了五种思路,与你分享。

互联网刷屏现象层出不穷,其关联因素纷繁复杂,其发生和走势看起了很难把控,但通过对很多案例进行复盘,拆解其中机理,还是可以发现很多共同的规律。

鑫爷认为,那些刷屏的传播,大多数逃不了以下五种路径。

01 涟漪式:同频传导,无限裂变

涟漪式传播模型

涟漪式传播,通俗讲就是病毒式传播、社交式传播,信息通过社交媒体上人与人之间的链条,不停地向外无限的传导、裂变,直至达到引爆点。就像水中的涟漪,波纹从起始点扩散,通过水波引起的震动,一步步将能量传递到更大的范围。

涟漪式传播是一种去中心化的传播,消息可以从任何一个人那里发出,经由社交媒介的转发、点赞、互动,形成指数级的裂变,一生二,而生三,三生无限。这是互联网世界最基本、也是最重要的传播途径。

比如说,当年火爆世界的“冰桶挑战”活动,引来名流纷纷@对方并参与,带来了一场全球公益的狂欢;今年老乡鸡的土味战略发布会,只用几百元预算做的视频,竟然在社交媒体上获得10w+的播放量和3.3w+的在看,成为疫情期间最大的广告赢家。

涟漪式传播的发生机制,主要是口碑效应。人们出于人际交流、展现自我形象、获得社会认同的目的,将有意思的东西内容给朋友,从而实现人际间的自传播。

那么,什么样的内容最有口碑价值呢?《疯传》一书认为,满足以下六种因素的内容,最容易引起口碑传播:

  • 社交货币:可以作为茶余饭后谈资的东西,比如说名人八卦、网红打卡地等。
  • 诱因:在特殊情景、场合的刺激因素,比如疫情期间的共享员工用工。
  • 公共性:切中大众关注的敏感话题,比如住房、食品安全、疫情期间经济问题。
  • 情绪:比如愤怒、焦虑、恐惧、励志等情绪,比如幼儿园虐童事件、各种鸡汤等。
  • 实用性:跟受众切身利益有关、对其有用处,比如本地民生政策、健康指南等。
  • 故事姓:一波三折,情节有趣:比如最近一在反转的美国大选。

除了内容以外,涟漪式传播要达到理想效果,还需要传播渠道上进行最优设计,将正式传播(如官方发布)与人际传播(民间爆料)、中心式传播(如明星、KOL)与非中心式传播(素人转发)结合起来,形成立体式的传播链路。

比如说,如果你要在微博引爆一个事件,你可以先由素人小号爆料,再由明星转发,官方回应等,大V观点跟进等,一步步铺陈直至引爆;也可以先由官方发布消息,其他明星、大V转发评论,无数的素人小号配合造势;也可以先发布到电视或纸媒广告,然后微博、微信等社交媒体跟进,做进一步的讨论、延伸。

当然,具体操作上,要需要结合传播内容和整体广告策略来决定。

02 破圈式:夯实地盘,破壁出圈

在过去的电视时代,人们的聚集是集中化的、“广场式”的,全国人民同时看一个电视台;而如今在互联网时代,人们的聚集更多的是分散的、“圈层式”的。尤其是95、00后的Z世代用户,他们更多而基于兴趣、亚文化聚在一起,形成一个一个的圈子,比如当今各种兽圈、饭圈、谷圈等等,不一而足。

Z世代圈子解析

在圈层式的受众结构中,当某种信息在圈子内部的影响力越来越大,就可能突破原有的圈层堡垒,进入主流的大众人群,让更多的人知道,这种传播就可以叫“破圈式传播”。

图:破圈式传播模型

比如说,B站原来的用户群体主要是二次元的人群,具有典型的圈层化特征。这几年来,B站力图将用户拓展到更多的年轻人群,而今年推出的演讲版的《后浪》视频,有效的吸引了很过二次元圈外的年轻人乃至中老年人,无疑是典型的破圈式传播。

同样的,这几年在抖音、快手等流行的汉服风、JK制服、手办等,也有了出圈的态势。

具体而言,传播破圈又分为三种类型:

  • 一是从专业向大众破圈。比如咖啡文化的传播,就是先从专业级的手冲咖啡圈,再破圈进入资深咖啡爱好者圈,最后破圈进入普通喝咖啡人群。
  • 二是从特定阶层向普通阶层破圈。比如说,在古代,像翡翠、红木家具这些品,都是皇室贵胄、高门大户才能拥有的,如今已经破圈进入更多的阶层。还有牛仔裤,最初是美国西部矿工、牛仔人群穿的,后来经过改良,成为大众流行服饰,风靡全世界。
  • 三是由亚文化群向主流人群破圈。比如二次元文化、街头文化、COSPLAY、古风等这些亚文化,都已经融入了中国的大众流行之中,被越来越多人人喜爱。

破圈式营销的发生机制,是“参照群体”效应。人们为了融合到社会中,或是凸显个性,会找到一个参考的人群,并模仿他们的行为。比如说,中产阶层会模仿上层阶级人群,购买更有体味、更能体现社会地位的品;年轻人会模仿那些有个性同龄人的兴趣爱好,以便让自己显得与众不同。

要做好破圈式营销,一定要把握好传播的节奏。在《创新的扩散》一书中,提出了一个很经典的传播模型:新事物需要先让那些喜欢尝新的早期使用者(也就是种子用户),培养和激励这批铁杆人群,让他们影响早期大众人群,最后扩展到晚期大众人群,借以实现破圈。

创新的扩散模型

比如说,当初小米手机起家之前,是通过第一批骨灰级用户,这些用户多为手机论坛的资深用户,小米邀请他们参与MIUI的设计、研发、反馈等,建立了很好的忠诚度和口碑。

借助这些种子用户,小米实现了“冷启动”,同时通过线下论坛交流、“小米同城会”等建立参与感,吸引了更多的“米粉”,进而破壁出圈,扩散到更庞大的发烧友人群。

03 共创式:全民参与,一起狂欢

共创式传播,就是通过“发动人民群众”,号召受众一同参与进来,大家一起玩嗨,一起创造传播内容,传播者和用户共同成就了整个传播,乃至共同拥有产品和品牌。

共创式传播模型

我认为最善于做共创式传播的机构,莫过于新世相。他们发起的“地铁丢书大战”,号召大家在地铁、车站等留下一本书,给其他人阅读,引起了全网的讨论;还有“4小时逃离北上广”事件,号召一线城市想逃离的白领们,即时赶到机场,可以报销机票,一时间引起朋友圈刷屏和讨论。

另外,像网易云将用户的走心评论当做地铁广告素材,“认养一头牛”鼓励消费者认养牛奶并邀请参观牧场,抖音上发起的全民模仿“哪吒头”,中国银联“银行POS机”一元购买留守儿童诗歌作品,都是共创式营销的典范案例。

共创式营销的传播机制,在于提供“参与感”。受众感觉自己能够被尊重、被看见,并且获得参与其中的快乐体验,很容易形成自发的分享,并且容易与传播者形成一种深度的互动关系,从而建立起持久的忠诚度。

要建立广受拥戴的参与感,需要满足以下条件:

  • 一是简单易操作。比如天与空联合安利发起的“头顶食物”公益活动,抖音上的“一键变漫画”视频应用,都是非常简单的,这样才能最大限度地降低参与门槛,让全民一起嗨起来。
  • 二是让人有分享动机。共创式传播,不光要吸引参与,更重要的是要吸引他转发,那些具有身份代入感、能够增进自我形象、感觉自己能够以小行动助益社会的活动,才会更容易引起分享。

比如说人民日报发起的“传照片生成自己的军装照”H5,就很有代入感;还有像奈雪之茶这些高颜值茶饮产品,消费者自愿拍照分享,则是为了凸显自己的品味和形象;参与关爱自闭症儿童的“今天不说话”活动,则是满足了助力社会的自我实现心理。

04 蒲公英式:星火燎原,所向披靡

所谓蒲公英模式,是让传播渠道或者传播事件不断复制,派生出很多次级传播单元,在各个角落落地生根,从而形成全覆盖的浩瀚态势,从而达到“星火燎原”的引爆效果。

(图:蒲公英式传播模型 )

有一些IP式的活动,有共同的主题和形式,然后在不同城市不断进行复制,最终达到落地生根、全面开花的效果。

比如当年优步刚进入中国时,就是靠“一键呼叫”系列事件,在各大城市引爆关注狂潮的。北京的一键呼叫人力车、上海一键呼叫直升机、成都的一键呼叫摇橹船、青岛的一键呼叫游艇,每个城市都复制了活动的基本形式,但又结合本地文化进行了调整,最终汇聚成席卷神州的强大声量。

蒲公英模式的另外一种形式,是传播渠道上,在核心渠道以外配合很多的分子渠道,从而形成多阵列的全覆盖效果。

比如公众号“吃货小分队”,除了“吃货小分队”这公众号,还有多伦多吃货小分队、湾区吃货小分队、洛杉矶吃货小分队、温哥华吃货小分队、波士顿吃货小分队等十三个子公众号,在微信平台颇有影响力,获得了全美120万以上的粉丝青睐。

再比如樊登读书会,他们除了官方APP,还会把官方的视频素材剪辑成小片段,打包给到全国各城市代理商。众多的代理商被允许在抖音、快手等社交媒体开设账号,发布这些资料。于是,网上铺天盖地都是樊登读书会的视频内容,形成无处不在的曝光效果。

蒲公英式传播的发生机制,是矩阵协同作用。众多的传播单元,形成密集的阵列,相互支撑、相互补充、相互呼应,可以起到1+1大于2的放大作用。这跟7-11便利店的密集开店的渠道拓展模式,以及一些品牌“全国万店联合促销”的玩法,有着异曲同工之妙。

05 喇叭式:集中引爆,一举成名

喇叭式传播,就是集中广告资源,借助大媒介、大明星、大投入,让传播信息进行密集曝光,从而快速引爆事件。

喇叭式传播模型

喇叭式传播,是一种中心化的传播模式,在传统的电视、纸媒时代,很多品牌都不惜砸重金竞标央视黄金时间,或者在短期内在各大卫视同时打广告,进行形成全国性的曝光。直到今天,像瓜子二手车、大卫拖把这些品牌,也是通过密集的电梯广告进行轰炸式的宣传,这也算是喇叭式传播。

到了互联网时代,喇叭式的传播其实并没有消失,只是相比过去的单向输出,多了实时的反向互动和分享,这样就有了二次传播的可能。

比如说与明星联名做推广,找李佳琦、薇娅这样的头部KOL种草,或者像完美日记那样,集中火力在小红书投放了大量种草日记,都是属于喇叭式传播,其效果可以即时获得受众反馈。

喇叭式传播的发生机制,是从众心理。当我们在短时间内,看到小红书、抖音、微信、微博乃至整个网络,都在使用某个产品或者讨论某个品牌,就会觉得这个品牌实力很强,他的产品大家都在买,从而跟风拔草。

不过,喇叭式传播也有其局限性,就是需要足够的预算做支持。尽管喇叭式传播的重点是拼媒介、拼覆盖面,但是在具体执行中,也要想办法让传播内容尽可能有些梗、有些料,以便刺激受众二次传播,广告效果会更好一些。

让广告公关化,在广告中融入可讨论的话题,不失为提升喇叭式传播效果的一种可行思路。

比如,早几年世界杯期间刷屏的“法国队夺冠,华帝退全款”事件,还有今年疫情期间网易严选的“劝你别看广告了”路牌广告,以及最近网易严选“退出双11”的操作,都是在传播中融入了公关的要素,掀起了极高的话题讨论度。

06 小结

从传统时代到移动互联网时代,传播环境不断变化,刷屏玩法层出不穷。这种情况下,我们不光要学习借鉴的传播案例,还要把握传播的原理和模式,才能以不变应万变。

5种互联网传播模式总结

以上5种基本模式,各有优缺点以及使用范围,我们需要结合传播的目的和策略,匹配最合适的方案。最后,祝大家天天10万+,刷屏刷到手抽筋。

文章来源:人人都是产品经理   作者:品牌鑫观点

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



设计师必备的12个APP,你有几个?

资深UI设计者

大家平时手机APP中有多少是跟提升和学习有关的?自己碎片化的时间都用来做什么呢?是否在微博、微信、淘宝、抖音之间游走?在这些APP里获得即时的快乐后,又很空虚?

别急,今天我就给大家推荐几款我亲测好用的APP,让大家能轻松的利用碎片化的时间去提升自己。

设计师必备的12个APP,你有几个?

身为设计师,提升审美是非常重要的,可以说,审美是决定一个设计师发展的关键性因素。但是,审美的提升不是一朝一夕能实现的,是一个长期积累的过程,要多去看好的作品,多去分析,多去记忆。接下来给大家推荐几个可以看作品的APP:

设计师必备的12个APP,你有几个?

之前我们经常告诉大家,提升审美的一个快速的方式就是多去看好的摄影照片。国家地理大家都比较熟悉了,是风光、人文、纪实类摄影机构,这里有很多世界顶尖摄影师拍摄的照片,并且可以下载高清图片,欣赏的同时还可以作为自己的灵感库。每天这个app都会推荐5-10张照片,不断刷新你的图库。

设计师必备的12个APP,你有几个?

给大家看看我近期下载的图片

设计师必备的12个APP,你有几个?

△ 《冰山的纹理》photograph by Nancy Leigh 图片来自:国家地理APP

这是南极洲的天堂湾( Paradise Cove),有许多彷佛经过精雕细琢的冰山。这座冰山表面有着令人惊叹的美丽纹理,就像高尔夫球杆挥过草皮留下的痕迹,还有一道道的条纹。它以迷人的姿态,欢迎着我们来到这个有着湛蓝海水、冰河与诡异天色的海湾。2013年摄于南极洲的天堂湾。

设计师必备的12个APP,你有几个?

△ 《雨骤来》photograph by 林晓敏 图片来自:国家地理APP

大雨骤来,巷中食肆排档的食客不慌不忙,以雨景伴晚饭,慢活是一种生活态度。

可能很多同学纳闷,我看摄影图片到底看什么呢?

可以看构图、光影、色彩、色调等等,这些在你设计时都会潜移默化影响你,比如,上面两张图片,最吸引我的是它们的色彩,第一张整体是蓝色调的,我可以用它的颜色作为我画面的配色。第二张图片,色彩的冷暖对比很大,给我一种赛博朋克的感觉,设计非常酷的画面时,就可以用到这样的配色。

tips:

「国家地理」APP,安卓和苹果系统都可以下载,安卓系统是免费的,苹果系统要收1元的费用。

设计师必备的12个APP,你有几个?

看展绝对是可以提升审美的好方法,「iMuseum」是一款可以定位搜索你附近的美术馆画廊的APP,覆盖全球,包含了几乎所有地区的展览消息。

设计师必备的12个APP,你有几个?

设计师必备的12个APP,你有几个?

「VART」这个可以说是「iMuseum」的升级版,它的功能很强大,「iMuseum」有的功能,它也有,除了定位全球查找展览信息和看其他人看展动态之外,还有很多功能,比如:

  • 它可以线上购票,APP上能看到近期开始的和即将结束的展览,看到感兴趣的即可在线购票,拿着电子票据就能去线下看展了。
  • 它可以通过场馆寻找展览,当你定位好后,直接选择场馆模式,就会出现这个城市的所有展馆,非常方便我们查找。
  • 它包含了很多国内外艺术家/作者的生平简介和作品介绍,以及相关的展览信息(简直不要太棒了!)还可以关注艺术家,以便下次接着观看。
  • 它可以全景线上看展,其实对于一二线城市之外的设计师来说,想看展是比较麻烦的事,一个是距离,一个时间,并且在这一年疫情期间,更是难上加难,但是,有了这个APP,就可以线上看展了。

大家千万别错过这里的展览海报设计,有一些还是很值得学习的,看到好的记得保存到手机里,充实自己的灵感库。

设计师必备的12个APP,你有几个?

设计师必备的12个APP,你有几个?

看名字应该就明白这个app的主打内容了——杂志,这里全是日本杂志,这里大多数杂志的编排都是非常好的,提升审美的同时,还能让我们设计的时候有所借鉴。

在线浏览不方便,你也可以下载到手机里,只不过需要交28元的费用,在我看来还是挺划算的。当然,如果你只是看好了某一页,点击下方的保存,就会存到手机相册内。

设计师必备的12个APP,你有几个?

tips:这个app可能你在安卓的商店内搜不到,需要直接用网页搜索「杂志迷」,同样可以下载。

设计师必备的12个APP,你有几个?

「Behance」是一款Adobe旗下用于展示并发现创意作品的在线平台。这个APP很多人都比较熟悉了,是全球非常知名的分享平台,各行各业的设计师或爱好者在上面分享自己的作品,让你能看到除了平面设计外更广阔的领域。

设计师必备的12个APP,你有几个?

「ins」是Facebook公司的一款免费提供在线图片及视频分享的社区应用软件。

这个平台有明星,有素人,也有很多知名的设计师,它像一个大的朋友圈,每个人在平台上分享自己的生活照片或者设计作品,下面分享一些,我在上面关注的账号,这里有插画、海报、时尚、艺术、杂志、海报等等,看这些作品同样可以提升审美。

设计师必备的12个APP,你有几个?

设计师必备的12个APP,你有几个?

设计师绝不能局限于眼前的设计稿,要多去增长见识,多去开阔眼界,当你的知识面拓宽了,就会给你提供源源不断的设计灵感,所以,多去看和设计“无关”的东西,也是对于设计师大有裨益的,比如说历史、电影、时尚、摄影等等。

下面就给大家推荐几个能增长见识的APP

设计师必备的12个APP,你有几个?

这个APP原来的名字叫“全历史”,现在叫「全世界」,一看格局就是变大了,它还有网页端,功能基本是一样的。

这款APP我本人真的是强烈推荐!因为在这里你可以按照时间轴、关系图谱、时间地图查看各国,各个历史时代的历史相关内容。

根据导航你还能看到全画作、全古籍、全人物、全战争等内容。这些内容里面还藏了很多细小的分支,让你从头把历史捋顺了。

网上对于这款APP的评价:这是一个时光机历史地图 + 文学艺术编年史 + 典籍名著中英对照 + 全球博物馆在线阅览。惊喜的是,它还在不断更新它的数据库,所以,你还在等什么?快去下载吧!!

设计师必备的12个APP,你有几个?

「开眼」是一个全球精品短视频平台,汇集了动画、广告、影视、运动、创意、游戏、旅行等领域的优质短视频以及这些领域的创意人群。

和我们平时刷的短视频不一样,开眼APP上的视频都是精挑细选的高清视频,覆盖范围也很广泛,包含了旅行、运动、创意、广告、生活、科普等18个热门分类,界面设计的也不错,每日推送3-5条视频。

开眼,简直就是短视频界的一股清流,可以从这里看到很多优质的视频内容,比如下面这个二维世界的图形实验。

设计师必备的12个APP,你有几个?

「TOPYS」app是由中国成立最早、的创意垂直网站,TOPYS推出的移动端应用,是一个面向创意人、创意领域爱好者开放的创意学习平台。

这里包含了文案、视频、名人访谈、设计项目等等,汲取每日新鲜灵感,了解创意圈热门动态,满足审美体验。

设计师必备的12个APP,你有几个?

除了提升审美和增长见识外,我们还需要提高工作的效率,这就需要用到工具了。当然,网页端也有很多不错的设计利器,以后我再给大家分享,今天分享一些在手机上就能实现的小工具!

设计师必备的12个APP,你有几个?

「PantoneConnect」这款APP,我只在苹果商店里找到了,安卓的没有找到。

这个就是最近频上热搜的潘通公司所开发的APP,主要是帮助设计师简化他们的色彩选择和设计流程,提升工作效率。

它这里有很多色彩库,让你根据不同的印刷需要进行选择,还可以根据你上传的图片进行分析,提取出相应的合理的配色,比如我们在「国家地理」中下载的摄影照片。

它还有很多功能,就等大家自己去挖掘了。

设计师必备的12个APP,你有几个?

如果你无法下载「PantoneConnect」APP,你可以试试下载「色采」,功能一样很强大。

1. 相机实时配色

通过相机,捕捉下眼前的美景和心仪的色彩,将眼前的美景收录为你的专属色卡。

2. 灵感探索配色

从中西经典艺术作品、自然风光、电影动画等提取的600多种原创配色。

3. 照片智能配色

更精准的颜色识别算法,从自己的相片中发现配色灵感。

设计师必备的12个APP,你有几个?

现在吸引大家注意力的事物太多了,而且大多数会给你即时的快乐,让你欲罢不能,不知不觉间,时间就消失了,导致没有办法集中注意力去做事情,这个布谷番茄,就是一个管理时间的效率工具。

番茄时钟可以帮你追踪花在每项事务上的时间。还可以根据实际情况灵活地选择每个番茄时间段的具体长度。

设计师必备的12个APP,你有几个?

布谷番茄将你工作和生活中的待办任务与目标技能关联起来,让你做过的事务都成为累积技能成长的一部分。通过在“做事”和“成长”之间建立清晰的联系,让刻意练习变得简单,让你成为时间管理的高手。

设计师必备的12个APP,你有几个?

这里可以最多添加4个任务,如果想要添加更多的任务,需要充值12元钱,如果你确实在时间管理方面存在很多问题,那这12元钱花的还是很值得的。

今天分享了12款APP给大家

设计师必备的12个APP,你有几个?

互联网的发展,让我们学习更加便利,与此同时五花八门的各种APP吸引着我们的注意力,“杀掉”我们的时间。身为设计师,如果无法保持一个学习力,那就很难有好的发展,工作之余,我们完全可以利用通勤、如厕、睡前、午休等等碎片化的时间翻看这些APP,给自己一个提升的机会。

文章来源:优设   作者:研习设

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



设计交互-用户体验之心得篇

前端达人

1.为什么用户使用对齐标签填写表单的速度更快


想象一下,一个用户已经准备好注册您的站点了。他们会进入你的表格并输入他们的信息。字段标签对齐的方式会影响用户填写表单的速度。


你是想给用户提舒适体验,还是想给他们一个麻烦?

如果您想让他们的体验更快更容易,请使用输入框上面的字段对齐标签.或输入框内的对齐标签模式。


与左对齐和右对齐的标签相比,顶部对齐或内部左对齐标签填写起来更快、更容易。这是因为标签只需要有一半多的视觉固定物。

顶部对齐标签还允许用户以一个可视方向向下移动输入框。左对齐和右对齐的标签需要两个视觉指示才能填写。


顶部对齐标签的唯一缺点是,它们可以使表单变得很长。但是现在用户滚动的频率越来越高,所以这不是问题。

通过减少字段之间的空白,可以减少表单长度。您还可以将表单拆分成多个页面,以使表单更短。


顶部和左/右对齐标签之间的差异很明显。顶部对齐标签更容易在眼睛上,并使表格更容易填写。虽然他们可以使表单更长,

但用户将从完成表单所需的时间和精力的减少中获益更多。


如果顶部对齐的标签能够给用户提供更好的表单体验,那么它是值得采用的。设计师应该更多地考虑他们的字段标签对齐。

它可以区别于用户填写表单还是放弃表单。


2.为什么对话框中的“确认”按钮在右边工作得最好


有很多设计经常会问我一些关于按钮上的问题那我今天也来献丑讲以下我对按钮的一些理解,这段时间针对这些东西研究了很久,在对话框中放置“确认”和“取消”按钮的位置。“确认”按钮是完成任务的主要操作。


“取消”按钮是在没有完成任务的情况下将用户带回原来屏幕的辅助动作。

根据它们的功能,最好的顺序是什么?“确定”按钮应该出现在“取消”按钮之前还是之后?


许多人提到了以下几点平台约定作为答案。虽然这似乎是一个解决问题的方法,但实际上并非如此。它不能回答哪个位置对用户更好,以及为什么。为了一致性而遵循平台惯例的建议是不够好的,给设计师留下了空手而归的机会。


“一致性”是设计师们常用的一个词。不深入考虑用户面临的设计问题也是一个流行的借口。如果一个人不知道为什么会存在,遵循设计惯例有什么好处呢?


如果某个设计约定对用户有害呢?设计师应该为了一致性而盲目地遵循吗?糟糕的设计实践是否应该持续下去,因为设计师们希望通过平台设计的一致性来解决每一个问题?


今天,有一些平台设计约定被广泛使用,因为它们是为用户工作的。但这里的要点是,平台设计的一致性永远不应该让设计师满意,因为这是做某事的唯一理由。理解为什么您应该以一种方式而不是另一种方式来设计您的用户界面的原因是关键。


按钮放置事项


人们可能会说,让你的动作按钮突出给它更多的视觉重量和一个清晰清晰的标签比它的位置更重要。虽然动作按钮的视觉重量和标签是一个重要的设计方面需要考虑,但它不是唯一的方面。


只关注一个设计方面而不是其他方面是一个粗心的设计师的行为。一丝不苟的设计师会思考每个设计方面是如何影响用户的。

对于设计师来说,最难搞清楚的是主动作和次要动作是如何放置的。这就是为什么“确认”/“取消”按钮的争论在设计师中如此流行的原因。


为什么‘确认’按钮在右边工作得最好?


当你通过了平台惯例的争论后,你会质疑哪个位置最有效。您可以通过分析设计如何影响用户来解决这个问题。


减少视觉固定


一些设计师认为,在第二个操作之前将主操作放在左边对用户更好,因为它更接近,因此,点击的时间更少。


这是有意义的,但您不能忽视这样一个事实,即用户在选择要采取的操作之前将查看他们的所有选项。

这意味着大多数用户不会盲目地单击主操作按钮而不查看它旁边的辅助操作按钮。


他们将首先看到左边的主要动作,然后查看右边的次要动作。然后,他们会把眼睛移回主要的动作,点击它。这将在多个方向上总共创建三个视觉固定。


将其与放置在对话框右侧的主操作和放置在左侧的辅助操作进行比较。用户从第二个动作的眼睛开始,然后将眼睛移到主动作上单击按钮。这在一个方向上总共创建了两个视觉固定,给用户一个更快的视觉流。


用户只关注每个按钮一次,并在主动作按钮上结束。将主操作放在左边可能会使用户更容易到达,但是当您从用户的思维过程和视觉固定的角度来看速度时,将主操作放置在对话框的右侧实际上更快。



用户点击或操作按钮的心里状态


当用户单击辅助操作按钮时,他们期望应用程序什么也不做,并将它们带回到原来的屏幕。因此,“取消”按钮的功能类似于“后退”按钮。


当用户单击主操作按钮时,他们期望应用程序执行按钮所述的操作,并将其转到下一个屏幕。因此,“确认”按钮的功能类似于“下一页”按钮。将辅助动作按钮放置在左侧,主动作按钮在右边映射到用户可以期待的‘后退’和‘下一步’按钮功能。


它类似于分页按钮的放置方式。将用户带到下一页的按钮位于右侧,将用户带回其早期页面的按钮位于左侧。这个按钮的放置工作是因为它映射到用户从左到右的阅读和导航方向,其中右是前进的方向,左是后退的方向。


对话框中的“确认”和“取消”按钮应该遵循类似的交互模式,因为它们的功能类似于分页按钮。

不仅如此,在中国用户习惯了左右方向的模式。

将您的主要操作放在右侧,将次要操作放置在左侧,将使您的对话框按钮更容易、更直观地为用户所理解。


为用户提供更有效的视觉流畅度


将您的按钮放置在终端区域可以让用户看到他们最后需要采取的主要操作。这不仅改善了视觉流,也改善了任务流。

用户在扫描时不会跳过主动作按钮。当他们通过时,他们的眼睛就会盯着它,所以他们可以立刻点击它。


按钮放置在中间还是放置在左右两边?


另一个问题是设计师经常想知道他们是应该把按钮放在角落里,还是把它们放在一起。当您将主操作和辅助操作放置在对话框

的角中时,它将很好地映射到左右方向。但是,由于‘取消’和‘确认’按钮不是导航按钮,所以没有必要遵循方向映射。有时它弊大于利。

如果应用程序要执行用户无法撤消的关键操作,那么用户可以看到“取消”按钮和“确定”按钮是很重要的。在这种情况下,“取消”按钮的功能可能像“先前”按钮,但更重要的是,因为它充当安全按钮,以防止任何更改。


在左下角放置“取消”按钮的危险是,由于两个按钮之间的视觉分隔很大,它可能导致用户忽略它。将“取消”按钮和“确定”按钮放在一起,可以使用户更容易在一次凝视中查看和比较这两个动作,从而选择最佳的操作和点击。

我们经常卸载软件的时候一不留神就会点错,或者是我们在装某一个软件的时候全家桶一拥而上。所以在不同场景当中我们所用的按钮形态也是不一致的。


3.下拉菜单加图标和不加图标的区分在哪里!


大的侧边栏菜单甚至会让用户看起来很不双我们应当如何解决这一个问题。

其原因是设计人师在做显示菜单项的时候会出现的问题。

当它们都有相同的视觉处理时,菜单项很难进行识别与区分。

如果不修复这个问题,会导致用户放慢他的浏览速度从而导致用户的流失在大的层面来讲,小的层面来讲阅读不爽导致关闭页面。


菜单栏没有主次之分

当您对菜单项进行全文本或全图标处理时,问题就会出现.当用户扫描他们想要的项目时,他们的注意力分散在菜单周围。这是因为没有层次来吸引他们的注意力。


通过将用户的注意力引导到您的主要项目,使您的菜单可扫描。

要实现这一点,我们可以看下面设计形式来强调重点内容


主项图标


与其在每个菜单项上放置图标,还不如将其放置在主菜单项上。视觉强调首先将用户的注意力引导到这些项目上。

次要项目上缺少图标,这使得它们能够得到其余的关注。


略大一点的图标


如果要使所有图标处,请稍微放大需要突出的图标。

稍微的增大会使视觉效果有很大的不同,同时字形更容易辨认,每一行的线高也会增加。让整个看起来更加有空间感一些。

让用户浏览阅读起来也会更加舒畅一些。

4.在按钮上避免颜色对比度错误


想象一下,当用户在您的界面上遇到一对按钮时,他们犹豫不决。

用户向左看,然后向右看,比较它们。经过一番思考,他们做出了选择。

他们的选择按钮做出决定,而且不确定,因为你的按钮没有层次结构。


不要使用相同的颜色轮廓按钮


甚多的设计师设通常喜欢使用主按钮的轮廓形状作为辅助按钮。按钮样式看起来可能不一样,但还不够。

他们仍然会竞争,因为他们的颜色对比度相等。

为了给主按钮更多的注意,削弱轮廓按钮的对比度。与其使用重颜色,不如使用它的色调。你可以通过降低重颜色的亮度和饱和度来制作。确保对比度足够高,以达到主要的按钮突出性。


不要使用黑色辅助按钮


设计师的另一个趋势是把第二个按钮变成黑色。他们认为,使用中性的颜色,它是不会竞争的。然而,黑色按钮更为突出,因为它有一个更高的对比度。



不要使用黑色,而要使用重颜色的色调,以使辅助按钮比主按钮更弱。要做到这一点,增加亮度和降低饱和水平。



不要在主色调上使用浅色


将彩色按钮与中性灰色配对并不总是意味着彩色按钮会得到更多的关注。如果主按钮的颜色太轻,则中性辅助按钮将更加突出


要避免这一错误,请选择不太明亮的颜色。明亮的颜色可能看起来很有吸引力,但它与白色背景或文字的对比不太好。在主按钮上使用更暗的颜色,这样第二个按钮就不会引起注意。




5.复选框的设计与使用方式哪种更好


在界面上使用复选框之前,您必须先问自己几个问题。复选框是否是在此上下文中使用的正确组件?如果是的话,最有用的显示方式是什么?


许多设计师没有问这些问题,自动使用复选框,没有太多的事先考虑。

因此,它们通过在错误的上下文中使用它们而产生可用性问题。


不仅如此,许多设计人员都很懒惰,期望前端写成默认选框完成这项工作,而不是

自定义复选框设计。但问题是,前端默认的复选框不能完成这项工作,因为它们的

可用性很差。


大多数设计人员在复选框上会犯的几个可用性错误,这些错误会破坏用户体验。



单选与重复的选择


在设计当中我们经常会遇到做选择性的勾选,往往很多设计师会犯的一些错误问题和选择障碍问题。

通过更大的目标来明确与用户进行选择更为明确

我们设计单选框的时候这不是秘密而是让用户做出选择,复选框是很难点击,因为他们的小击中目标。


设计师通常会让标签点击,但如果它不是直观的,那也于事无补。


通过将复选框转换为复选标记,您可以为用户提供更大的命中目标和更清晰的交互提示。



重复物品的重量及数量选择


有时你可能想提供不同数量的商品。使用多个复选框复制它会产生更多的文本来读取,并使界面混乱,且让用户难以进行选择。对于增量输入更改使用数字选择器一次显示该项会为更好些。


undefined


总结以上两点,实际商用应用案例如下所示


6.在设计当中我们该如何控制内容的突出性与阅读性


新闻卡片的设计怎么才能突出信息内容


卡片内容有几种文本类型,提供不同的信息功能。让我们看看基本内容卡的文本类型。

首先是眉毛,它是一个明确的词或短语,用来描述内容的主题。

还有一个标题,它用一个句子中的几个单词告诉用户内容是关于什么的。

在此之后,就会有一个描述内容的正文。

最后,就是时间与操作的按钮

必须通过确定哪些文本类型对用户更重要,从而为您的卡片新闻建立文本层次结构。

此内容新闻卡片的适当文本层次结构为:

1.眉毛-可以是时间,可以是新闻分类

2.标题-最重要的是,因为它描述的内容最快。

3.正文-包含一个描述性段落,但阅读时间最长。

4.描述内容的正文对内内容的简要描述。

您的内容卡应指导用户按此顺序浏览文本类型。要实现这一点,您需要使用浏览控制对文本类型应用适当的视觉强调。


控制用户的浏览顺序


通过适当的视觉强调,可以控制用户浏览的顺序,并指定反映文本层次结构的浏览模式。

当扫描遵循文本层次结构时,用户会浪费更少的眼球运动,并且可以更快地处理信息。


下面的示例说明了浏览控制如何让眼球工作比较。不同的是强调不同的文本类型。

其他文本类型具有相同的强调度,这使得它们争夺用户的注意力。

其他设计形式及浏览方式


在内容颜色的控制上我们可以为三种,重要的突出的需要用户重点进行关注的就用黑色

例如:#333333      #222222   #454545     等等色值

在不需要突出的内容上我们可以用稍微浅一点的色值保证用户能够进行阅读即可,

例如:#999999      #787878   #666666     等等色值更加容易记住

其他辅助的内容表达比内容正文更浅

例如:#bbbbbb      #A8A8A8    等等色值

说到这里我要说一用户体验关于文字的事情如果做出来的设计文字是给自己看的随意设计读没人会说你,有句话说的好:现在

是内容为王的时代,如果在内容上不够吸引或者颜色不够吸引眼球那就是一个很失败的案例。


转自:站酷

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


UI/UE | 产品体验日记

前端达人


设计的思考不仅要注重表象层面,也需要围绕信息传达这一设计的本质功能,以充满自省的精神深化和反思自己的设计意识,即做到“好看、好用”。在设计过程中,要站在公司的利益上,懂用户所想,在每一个关键点都要带给用户意想不到的惊喜,这些往往都是通过细节体现出来的。





01.「微信」添加好友-扫描与被扫指尖切换


产品体验:

使用微信扫一扫添加好友时,如果对方打开二维码的速度较慢(网络不好/手机卡顿/操作不熟),为避免自己久等,可通过左下角的二维码入口将自己的个人二维码提供给对方扫描添加。

设计思考:

微信的扫一扫功能简直强大到不敢相信,除了我们日常要用的支付付款、物品查询、各种信息的获取等,还有一个重大的功能就是添加好友。不知道大家有没有碰到过这种情况,需要添加好友时,自己打开扫一扫,过了很久却发现对方还在功能的路径中徘徊,迟迟没有打开二维码页面,这时我们不得不说一声“你扫我吧”,于是自己从扫描页面返回,一顿骚操作,把自己的个人二维码给对方展示了出来。

微信在扫一扫页面左下角提供的个人二维码入口,便于在加好友出现问题时,随时由被动变为主动,指尖切换扫描与被扫的添加方式,节约用户时间成本以及缓解扫描等待的焦虑感。基于用户添加好友时所处的使用环境,考虑周全且人性化,极大方便用户使用。





02.「高德地图」录入车牌号-降低限行违章概率


产品体验:

在高德地图的导航设置中,录入自己的车牌号并开启避开限行提醒,在导航过程中如果途径限行路段,系统会有语音播报提醒并自动避开限行路段重新规划路线。

设计思考:

自北、上、广、深四个一线城市交通部分别出台汽车限行措施后,其他部分城市也相继出了限外政策,外地车牌如果想要在本城市随时出行,需要(部分城市通过摇号)获得本地车牌号方可。不管我们对交通路线有多熟悉、或者经过其他城市的限行路段,因限行导致的违章真是防不胜防,毕竟每个地方的限行政策都是通过固定渠道对外宣布,不会通知到每一个驾驶员,如果不能第一时间获得限行讯息,悔之晚矣。

使用高德地图导航,在登录后录入车牌号并开启“避开限行”,系统就会自动检测导航路线,如果要经过限行/限外路段时会自动重新规划,通过绕行来避让限行的路段,如果无法避开则提示:已无法为你规避限行路段,请合理安排出行。自动规划路线能够有效避免因限行导致的违章,给我们造成经济损失,尤其是驾照,毕竟一周期才12分。就算无法避开,也可以通过语音提前知道限行路段,并合理安排出行时间。

(PS:虽然很多用户感觉无需登录也可以正常使用,但登录之后可以享受更多特权以及更加优质的服务)





03.「支付宝」你想要的收款二维码样式是这样的


产品体验:

在支付宝的收款二维码页面截图时,系统预判用户有使用二维码收款的需求,通过弹窗提示是否需要保存二维码图片,自动去掉无关信息并统一规范样式。

设计思考:

移动支付自上线开始,微信支付和支付宝支付各自占领着半江山,只要涉及线上交易,绝大多数用户每天必定会选择其中一个使用,虽然两大企业的方向截然不同,但支付系统在用户体验方面都是一如既往的持续提升,以此来增加用户的粘性。

支付宝收款二维码页面触发截图,在截取成功的状态下,同时弹出保存二维码图片提示。跟设备截取的图片相比,单独保存的二维码样式更加简洁,且规范统一,信息内容更加聚焦,便于用户直接传送或打印使用。其实进入收款二维码页面,在下方原本就有保存图片入口,基于用户进入此页面的需求明确,对性子较急且耐性较低的用户来说,这个被弱化的保存入口,可能直接忽略(别不信,我见过有人手上拿着手机还在到处找手机)。截图时出现的弹窗提示,相当于上了一道保险,避免使用截图自行裁剪打印的样式不统一,导致付款用户心中原本就已存在的默认收款二维码样式发生变化,形成认知负担。





04.「抖音」暗示用户-好看就要分享


产品体验:

在抖音短视频页面停留一段时间后,分享图标会自动变成最近常分享的某个用户头像,暗示用户好东西要分享。

设计思考:

抖音作为当前最火的短视频(直播)平台,相信很多用户即使不经常玩,但最起码会玩,虽然有部分低俗、劣质的用户在破坏着平台的规则,但整体看来是利大于弊的,其他的交给人心。下载抖音的用户大部分获取来源应该是来自于他人的分享,一传十十传百,最终传到人手必备,所以平台是相当注重分享功能的用户体验。

抖音的分享功能,其实还有一个小细节,当我们停在某个短视频页面一段时间时,原本的分享图标会变成最近分享的用户的头像。用户对分享功能都有常规的认知,当我们在观看某个视频一段时间后,系统自动评判该用户对此视频感兴趣,基于用户看到感兴趣的东西就喜欢炫耀、分享的心理(比如“孙悟空到此一游”),系统将分享图标变成用户头像,意在提醒观者分享,以达到最大化传播可能的目的,以及为平台拉取新用户。





05.「智行火车票」搜索攻略-确保使用的流畅性


产品体验:

首次打开智行火车票的搜索功能,会自动弹出搜索攻略,以指导用户可搜索的范围及使用规范,后续再次打开搜索即恢复常规用法,如果再次了解,点击搜索攻略即可。

设计思考:

对于搜索功能,可谓是熟悉的不能再熟悉了,千篇一律的输入关键字即可,大不了重新再来。搜索是产品中不可或缺的一部分,无论打开哪个App,都能很快找到,但如果搜索功能做的好了,也是用户转化的关键流量入口,比如搜索方式、呈现样式、搜索引导等,用户体验不容忽视。

智行火车票APP的搜索攻略就是在合适的时间、合适的地点准确的传达给用户。首次进入,即自动弹出搜索攻略教育新用户,明确的告知使用搜索功能可以搜什么?怎么搜?避免用户一打开就直接撸字,而造成使用错误的概率提高以及影响搜索结果的准确性,用户一旦碰壁,很有可能转身就离开。自动弹出的搜索攻略由被动变为主动,可以提前告知用户搜索范围及关键词示例,降低出错的几率,让整个搜索流程更加顺畅,为后续的使用提供便利,减少用户的流失。





06.「虾米音乐」评论-一键表达心情



产品体验:

在虾米音乐听歌时,进入评论功能,除了可文字评论外,还能表达听歌时的心情,随时查看有多少同样心情的人在听这首歌,很有代入感。

设计思考:

文字是我们交流常用的元素,但很多时候因使用的方法不当而造成含义上的变化,比如一段话后面加个感叹号,到底是消极还是敌意?声音也是一样,当我们开着车对行人按喇叭,是表示礼貌还是愤怒?而表情则是不同,它表达的是一种类型,比如一个笑脸,可以理解为满意、开心、高兴等。表情除了可以委婉的表达自己内心的情感之外,也是因为表情的无责任性,你会听到人说,请注意你的言行,但没人会说,请注意你的表情包。

虾米音乐APP在歌曲的评论功能,除了有文字评论之外,还可以表达听歌时的心情,即表情评论。进入评论页面,首先看到的是某某等几人使用的什么样的心情评论,并提示共有多少人参与,引导用户接下来该做什么,让用户快速地进入到产品使用中,给予了明确行为操作的指令,触发并提高了用户的参与度。另外使用表情相比文字评论更容易操作,系统预设好可供用户选择的表情包并附带文字提示,用户无需思考便可一键操作,很大程度上降低了完成的难度。事实表明,同样能达到目的的办法,简单的是最实用、也是。





07.「美团」收货地址-二次提醒降低出错的概率


产品体验:

在美团提交订单页面选择好地址后,页面上滑,详细地址会悬浮在导航栏,便于用户二次确认或修改。


设计思考:

线上购物已经成为了我们的家常便饭,外卖行业解决着我们“吃”的问题更不例外。通常我们在选择好商品后,地址作为重量级的信息都会优先展示在订单页面的顶部,首先基本都会提供一个默认地址,如果不需要进入地址修改即可。纵然如此,依然有部分用户因为急于下单,后续发现地址错误,就需要联系商家修改地址或者取消订单重新下单,浪费时间不说,还会影响心情。

美团APP在提交订单页面,针对地址方面相当于加了一道保险。用户在选择完地址上滑页面后,详细地址悬浮在的标题栏上,点击可直接修改收货地址,虽然不一定每个用户都能看到,但长时间悬浮在页面顶部,时刻都在提醒着用户,只要稍一抬头,即可看到醒目的大字(地址),便于用户潜意识的浏览或眼睛的余光扫描,发现有误及时修改,降低下单时地址出错的概率,考虑周全,给予更好的用户体验。





08.「菜鸟」下拉刷新-趣味化的“空投”


产品体验:

菜鸟APP在页面下拉刷新的过程中,会有一个纸箱从空中落下的动画效果,类似空投,仿佛在说“你的补给已送到,请及时查收”,非常贴合平台的属性及特征。

设计思考:

下拉刷新早就不是什么新鲜的东西了,几乎所有的应用里都会有这个功能,通常都是一个持续的动效在告知用户,页面的数据正在加载,请稍等,市场上很多APP的刷新样式都是大同小异。不过一旦做好刷新样式,就不仅仅是告知用户当前页面状态这么回事了,比如下拉刷新前后两种状态借助过渡动效连接到一起,让用户了解界面到底发生了什么改变,以及在刷新的过程中如何留住用户继续等待,避免用户焦躁的情绪......

菜鸟APP在下拉刷新的过程中就使用了趣味性的动画方式,首先通过空中出现的箱子缓缓落到地面,有趣又贴合产品整体的设计概念,用生动形象的情感化设计反馈平台行为,为人机交互增加了趣味性和互动性,而且还可以缓解用户在等待刷新过程中的焦虑感;其次,这种动效可用帮助用户理解屏幕上发生了什么,也会让用户有所期待。

(看到这个动效,有没有似曾相识的感觉“哇,那边有空投,马上要落地了,赶紧上车冲过去”)





09.「美团」匿名差评-降低商家对用户的骚扰


产品体验:

对美团的订单进行评价时,如果选择差评(1~2分),系统将自动开启匿名开关以便于用于匿名评价,商家是无法查询到匿名用户信息的。

设计思考:

评价在商品页面展示给所有用户,对店铺商品起着至关重要的作用。95%的用户购物之前都会参考评价,好评会增加用户购买信心;而差评可能会让用户放弃购买这个商品,甚至认为这不仅仅是劣质商品,更有劣质店铺的潜在想法。其实有很多商家都有通过刷单来提升店铺的销售量和买家秀的质量,作假都尚且如此,何况是真实用户呢?所以商品一旦有了差评,不仅会影响店铺的整体动态评分和好评率,还会降低店铺排名,很大程度上会影响其他用户判断及产品的转化率,所以商家一看到差评就激动得马上打电话和买家沟通改评价,低头认错,尤其是新店或者新品有差评时,不断的联系(骚扰)会给消费者带来一定的困扰。

美团APP的订单评价如果选择差评,系统将自动开启匿名评价,由被动变为主动,避免用户因情绪化或忘记打开匿名,而遭受到商家电话的骚扰,通过补偿被要求修改或删除差评。当然,如果用户不想匿名,关闭开关即可。匿名评价不仅降低用户的困扰,还能提升商品评论的真实性,以协助平台通过大数据对整体店铺进行排名和评分展示,减少对后来消费者的误导。

(杠精思维“这样岂不是让很多键盘侠来恶意给店铺差评”。其实别忘了一个前提,就是必须要通过下单支付并等待订单完结后才可以进行评价,毕竟大部分用户不会刻意这样做,任何产品不就是满足80%以上的用吗?)





10「钉钉」保护信息隐私的密聊


产品体验:

从钉钉好友对话框的右上角进入设置页面,点击进入密聊,即可对聊天信息上一道锁,保护信息隐私安全。

设计思考:

众所周知,我们在聊天的过程中,信息很容易泄露,有很多窥探用户隐私的程序,比如进入某些网页会提示需要获取用户位置、读取通讯录等都属于隐私。尤其是社交类型的应用,会有相关保护交流信息的安全措施。如消息撤回、阅后即焚、动态浏览权限等都有一定效果。

钉钉推出的密聊功能就是聊天信息的一道安全锁。进入密聊后,消息禁止复制和转发、头像名字打码防截屏、不可被录屏、消息通知不显示内容等,很大强度上保护交流信息的隐私,给用户带来安全保障。

(有人会问,用微信的人更多,为什么没有密聊功能呢?从用户群体和性质来分析,微信主打社交,男女老少通吃,基本上都是嗨聊、打发时间或平时的常规交流等;而钉钉主打的移动办公,主流的用户基本趋向于白领类型的群体,一般属于工作交流,很多聊天都涉及到商业信息,包括一些文件和商业机密,谁都清楚商业机密泄露的严重性)




结语:


设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来,加强自己的记忆,不仅能提升自己的语言组织和总结能力,也为日后输出优秀的作品当铺垫,对自己的能力提升以及未来的职业发展带来便利。



转自:站酷

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



面向客户的设计:理论篇

资深UI设计者

导语:在面向客户的设计系列文章中,主要分为两部分。此文为第一部分,讲述什么是根据客户意愿进行设计的理论;而在第二部分,作者将会深入地介绍在电子商务网站重新设计项目中,使用该方法的一个实际示例。

作为UX设计师,我们喜欢采用“以人为本”的方法,即在解决问题过程的所有步骤中引入人的视角。无论我们是在与客户交谈,还是与用户共同创造解决方案,这种思维方式都允许我们推出满足人类需求和目标的产品和服务。

问题是,两个人在几分钟内就能相互理解信息在数字产品中很难复制。不管人工智能专家怎么说,当今存在的任何商业技术都无法替代与另一个人的对话。

而且,不管我们如何以人为中心,我们仍然在为比特和像素设计,数字产品仍然是数字化的。

然而,作为用户体验设计师,我们的目标是设计这些数字场所,以满足人类的需求、目标和动机。我们经常问自己的问题是,我们能让我们设计的数字世界更人性化吗?

我们得出的答案是,受限于媒体的一些限制,我们需要设计一种体验,在这种体验中,随着数字场所的变化,尽其所能(在没有聊天机器人的情况下)让用户获得近似于一次面对面的对话。

所以问题是:我们能在多大程度上让我们设计的网站、产品和服务与用户进行更多的“真实对话”?

一、定义用户和企业之间的真实对话

在数字/网络在线环境中,用户和企业之间的“真实对话”是什么?

最初,企业按部门或业务线组织网站导航。如:企业有这5个部门,所以这5个部门将在我们的主页顶部。我们的假设是——而且通常仍然是——网站的业务和最终用户在需求上100%一致。

起初,这是因为客户在学习如何使用互联网时期望值很低。没有太多的竞争性的东西吸引他们的注意力,也没有一个公共平台来记录他们的抱怨。

多年来,人们的上网的习惯已经发生了变化。一定程度上,是因为我们工作做的好,客户开始期望企业表现得更“人性化”。

换句话说,客户希望在网站上找到自己所需的任何东西,就像询问店内客服代表一样容易。并且他们希望能够从网站/应用程序上的任何地方满足他们的需求,而不仅仅在菜单或顶部的主导航栏。

在数字资产应该以更“人性化”的方式表现的预期背景下,我们将“有机对话”定义为客户和品牌之间的自然流动,不论他们遇到了什么数字媒体。

我们还认为,通过设计为基于意图的导航(我们称为“为客户意图设计”)我们可以创建出一种“有机对话”。

只有当我们了解,记录和设计客户与数字媒体交互时打算做什么,而不是针对企业仓库中的内容进行设计时,才能实现这一点。

换句话说,我们问一个问题:“当客户访问网站或使用产品或服务时,打他们的目标是完成什么任务?” 然后,我们设计导航以填写答案。

二、导航作为有机对话的起点

在详细介绍如何围绕客户意图设计导航结构之前,让我们先暂停一下,考虑一下导航本身。

导航是数字财产里非常重要但被低估的结构。现在的导航结构通常是顶部导航(即,“首页”顶部或菜单中的那些链接)和一些带有相关内容的页面导航的组合。

但是,无处不在的概念往往会随着时间的推移而过时,导航需要改进的地方还有很多。

如果我们退后一步想想,把导航看作是数字资产和用户之间的有机对话,那么导航将成为促进人类交流的桥梁。在这个角色中,导航在设计中具有新的意义。它成为了数字资产与其用户进行“有机对话”的一种方式。

三、主要思想

考虑到所有这些因素,我们不仅要把导航视为层次结构(即每个部门/业务线),并且要采取进一步的措施。结合全面的层次结构,创建横向的、基于意图的导航结构,以促进品牌与客户之间的“有机对话”。

我们基于目的的导航想法源于普遍的信息架构和 Dan Willis’ Intent Paths 的目的路径图。

此图形表示人们可以用来浏览软件应用程序或网站的路径。六边形代表数字属性(例如网页)上的个位置。位于六边形中间的人可以使用几种路径(即网页上的链接)来到达下一个位置。

在左边,我们看到了一个客户路径的例子,它通常定义在软件项目中。如果你以前从事过软件项目,那么你会认为这是一条基本路径。

基本路径是假设用户有一个单一的任务,一旦他们开始执行某个任务,用户就会完全专注于他或她的任务。在此过程中,用户没有分心、问题或想法。

太多的导航是以这种非常线性的方式构建的,以确保客户被迫走在基本路径。不幸的是,这种方法在现实生活中没有起到作用,而且它肯定不能促进自然的对话。

对于用户或客户来说,将路径选择限制为=再非常线性的、基本路径上,感觉更像是业务告诉他们应该去哪里,而不像业务支持他们去他们想去的地方。

因此,强制的线性导航会降低用户的内在动机(定义为做一些没有任何明显的外部奖励的事情),减少:

  1. 能力,或者是控制和掌握你所处的网络环境及其结果的愿望;
  2. 自主性,或行使自由意志的愿望。

现在,让我们看看右边的六角图形,更真实的路径。

在这个例子中,用户通过快乐路径门,然后决定向右走。很快,他们的环境发生了改变,以支持实现他们的意图。

通过获得权限,用户为系统提供了有关其访问意图的线索。使用更真实的路径,不管他们是否停留在快乐的路径上,导航路径都会变形并根据其动作进行自定义,因此不会有导航“错误”要恢复。

考虑到用户在选择和培育数字接口时所考虑的因素,数字生态系统的想法增加了能力和自主性,从而增加了内在动力。生态系统变形的能力取决于根据满足客户意图建模的声音信息结构。

四、围绕客户意图设计导航

如果我们设计的数字导航结构能够支持“真实之路”,那么我们将创造人与人之间的绿色对话,并使客户能够实现其对数字财产的计划。

反过来,这将增加客户的内在动力,使他们更加快乐和忠诚,并最终使企业盈利。

此外,横向的、基于意图的导航支持:

  • 客户体验:一个人对品牌的感知是决定客户盈利和留住客户的关键因素,它是资产负债表上的无形价值,这是他们的善意。
  • 可查找性:当客户能够根据他们的需要,而不是根据业务项目的路径去找一个站点或产品时,查找信息的方便性得到了提高。
  • 喜悦:“他们怎么知道我在找它?”这种意想不到的魔力,这是大多数企业所缺乏的认知,它是今天能否赢得市场中竞争的关键因素。当你知道某人的意图并设计信息结构来满足这些意图时,创造这种愉悦感比你想象的要容易得多。
  • 客户忠诚度:随着时间的推移,有了足够的重复、有机、愉快的互动,客户忠诚度——也被称为“圣杯”——得到了极大的提升,使得SWOT分析中的T失去了它的重要性。当公司的价值观符合顾客的价值观时,竞争就不再是竞争。

重要的是要记住:导航不仅仅是关于“导航栏”或者“汉堡包菜单”,它也与公司部门、业务线或公司政治无关。坦率地说,这甚至与产品和服务无关。

导航是指服务于客户想要在网站或产品上做的事情,或者称为客户意向。

通过设计你的信息结构来满足客户的意图,你正在设计一个有机流程,您正在帮助客户满足基于他们的想法、他们的需求和他们打算做什么的信息,而不是基于您的业务结构。

你也没有强迫用户去寻找你的层次结构,而是帮助他们根据他们的需要探索。这允许有机对话的出现。



文章来源:人人都是产品经理   作者:喵吉斯蒂

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




2021年中国电商市场的9大趋势预测

资深UI设计者

今年受到新冠疫情的影响,线上电子商务行业飞速发展。直播带货、社区团购等成为新的风口,未来它们还能这么火吗?本文作者从自身工作经验出发,对2021年中国电商市场的趋势进行预测,与你分享。

2020年受新冠疫情影响,线上电子商务行业飞速发展。社区团购,C2M趋势越来越明显,因此预计2021年将是中国电子商务市场充满创新和扩展的一年。各商家将采用新的举措和技术,并希望将业务扩展到低端城市。以下是2021年中国电子商务市场的10大趋势预测。

  1. 直播将成为重要的传播媒介。
  2. 从KOL营销向KOC营销的转变。
  3. 短视频应用程序将继续结合电子商务。
  4. 随着主要电子商务平台启动团购功能,团购将持续增长。
  5. 小程序提供新的购物平台。
  6. 快递运输将更快。
  7. 中国基于数据的消费者到制造商(C2M)模式将推动电子商务的发展。
  8. 垂直电子商务网站将获得吸引力。
  9. 跨境电子商务的格局正在发生变化。

因此:2021年将是中国电子商务市场创新与扩展的一年。

  • 实时流媒体和短视频为零售商和品牌提供了与消费者互动和推广其产品的手段。
  • 新兴购物渠道(包括团购和小程序)将与主导的电子商务平台一起蓬勃发展。
  • 垂直电子商务网站将在2021年实现强劲增长。
  • 零售业中越来越多的技术采用和数据使用将使消费者对制造商(C2M)业务模型的增长以及更快的交付服务成为可能。
  • 跨境电子商务将通过阿里巴巴收购考拉平台进行整合,从而进一步巩固该公司在在线领域的主导地位。

01 直播将成为更加重要的传播媒介

实时流媒体在2020年对消费者的购物行为产生了更大的影响,并将在2021年继续在中国电子商务市场中发挥越来越重要的作用。这种销售媒介类似于电视购物(例如QVC),但在21世纪得到了升级。

直播会话的视频内容实时广播,观众可以通过在线链接在观看视频的同时购买商品。就像QVC上的导购一样,实时流媒体主持人出售各种各样的产品,从服装和化妆品到电子产品和汽车。

购物者被直播吸引的原因有几个:

  • 精选的产品: 直播间主持人会根据粉丝的喜好精心挑选产品,这不仅吸引了观众,而且还提高了转换率。的确,淘宝声称它在2018年的直播中拥有65%的转化率。
  • 种类繁多的产品:通过直播,在美容,时尚和杂货行业中推广各种产品。一些主持人甚至卖电影票和酒店套票。
  • 低廉的价格:淘宝直播主持人经常与品牌合作,向粉丝们分发礼品或产品折扣,直播观众通常对价格更为敏感。
  • 抽奖:抽奖是主持人与观众互动的一种流行方式。例如,著名的中国主要舆论领袖(KOL)李嘉琪(被称为“口红之王”)通常会通过举办比赛来赢得戴森吹风机,iPhone11和小米电视等高价值电子产品,以此来吸引观众参与。
  • 数量有限和限时优惠:直播主持人经常采用快速销售策略,每次销售仅持续很短的时间,可用产品的数量有限。此外,主持人将定期宣布库存余额,以增加观众购买的紧迫感。
  • 克服“选择悖论”:如果向购物者提供了太多选择,他们可能会在购买商品时感到困惑,因此什么也没买。在直播会话期间与消费者互动,以帮助消费者专注于一种产品并更轻松地做出购买决定。

通过这些策略,直播主持人能够吸引大量的购物者。例如,在2019年双十一,李佳琦直播了六个多小时,吸引了3680万观众。

在2019年双十一期间,超过100,000个品牌使用在线直播作为销售方式。在购物狂欢节的第一个小时内,在线直播产生的商品总销量(GMV)超过了去年在线直播的全日总成交量。总体而言,2019年11月11日,GMV达到200亿日元(28.5亿美元),约占阿里巴巴2684亿日元总销售额的7.5%。

02 从KOL营销向KOC营销的转变

关键意见消费者(KOC)是通过视频制作和帖子发布以分享自己产品使用体验感的普通消费者。这种新兴趋势将为品牌商和零售商提供一种新的传播途径,使他们采用有影响力的营销方式,而不是使用KOL。由于包括快手、小红书和抖音在内的一些中国社交应用程序的普及,KOC可以轻松共享其产品评论,从而影响其他购物者的购买决定。

KOC越来越受欢迎的原因之一是:消费者越来越意识到KOL是由品牌赞助来提出产品建议的人,因此他们认为提供的信息不那么可信和真实。另一方面,KOC本身就是日常消费者,他们更能提供公正的产品评论。

KOC越来越受欢迎的部分原因是购物者希望从日常消费者那里寻求建议。例如,新父母在选择母婴产品时会寻求他们的朋友和其他有经验的父母的建议。通过的社交应用,这些购物者现在可以在做出购买决定之前,观看经验丰富的KOC的视频和评论。

实际上,KOC营销是「完美日记」营销计划的关键组成部分之一,该计划已使其成为中国化妆品品牌之一。在公司成立之初,该品牌就开始与KOC进行大规模合作,这使普通消费者觉得该品牌非常受欢迎。

03 短视频应用程序将继续结合电子商务

短视频应用程序已涉足电子商务市场,我们预计这一趋势将在2021年继续。短视频的长度通常为10–20秒,富含了各种各样的内容。据报道,一些用户在短视频应用上日平均花费数小时。借助人工智能技术和算法,鼓励用户根据浏览历史和喜好定制个性化内容,更大提高了用户对短视频的拥护。

短视频行业在中国蓬勃发展,截至2019年,中国的用户数量超过8.2亿。据商业智能提供商QuestMobile称,这一总数同比增长了32%。在中国10个移动互联网用户中,平均有7.2个使用了快手和抖音等短视频应用程序。根据QuestMobile的数据,自2018年以来,用户在这些平台上花费的时间同比增长了8.6%,总计每月超过22个小时。

为了利用这些统计数据和消费者行为模式,短视频应用程序已采取步骤以通过其用户流量获利:

  • 在2019年10月,抖音添加了一项新的功能,称为“营销标签”,该功能为内容分配了标签,以帮助零售商锁定想要搜索产品的消费者。
  • 在2019年11月,TikTok取消了限制,允许所有用户通过平台销售产品。以前,社交应用程序对用户访问电子商务功能的要求为3,000个粉丝。此举可以帮助拥有32亿每日活跃用户的抖音转变为基于短视频的电子商务网站。

04 随着主要电子商务平台启动团购功能,团购将持续增长

到2021年,电商平台将大力发展社区团购,如果消费者大量购买,团购将以大大降低的价格提供产品和服务。这种购物模式对预算有限的购物者特别是二、三线城市的购物者具有吸引力。

  • 自2015年成立以来,拼多多经历了爆炸性的增长。按市值计算,拼多多目前已成为仅次于阿里巴巴,腾讯,美团和京东的第五大互联网公司,截至2020年已超过百度。拼多多的成功在很大程度上应归功于与其团购模式保持一致,消费者与朋友一起购物以确保获得更好的交易。
  • 京东于2018年6月在微信上开始了其团购小程序,并于2019年4月推出了其团购应用程序。苏宁于2018年7月建立了自己的团购应用程序。
  • 阿里巴巴于2010年推出了其快速销售和团购平台聚划算。阿里巴巴的Alipay在2018年3月推出了名为拼购的功能。

这些用户在双十一购物狂欢节中提供了巨大的消费能力:聚划算报告称,有576种产品在前两个小时内收到了超过1000万张订单;京东表示,其40%的新客户来自靖西。而拼多多在11月11日的前16分钟内售出了1000多辆汽车。

对品牌的影响:团购模式将以较低的价格提供给想要扩展到中国低端城市的品牌。这些地区的消费者往往对价格更为敏感,并且可能会寻找便宜货。团购还为零售商提供了清理库存的好机会。

05 小程序提供新的购物平台

小程序可在支付宝,美团和微信等应用程序中运行。他们为品牌提供了一个额外的在线平台来销售其产品,用户无需下载单独的应用程序即可执行类似的功能。

品牌可以使用小程序作为大型电子商务平台的补充,而不是替代。小程序用作辅助销售渠道,可以列出通过快速促销快速销售的需求商品。小程序也可以用作品牌工具——品牌可以创建交互式的视觉程序,以更好地吸引客户并鼓励他们与朋友分享内容。微信小程序现在支持增强现实(AR),它将虚拟图像叠加到物理世界上。这种类型的第一个是阿玛尼的化妆品小程序,该程序允许用户通过用户在手机上使用的自带摄像头来测试不同化妆品的外观,例如各种色调的唇膏。

资料来源:阿玛尼的微信小程序

小程序为希望打入低端市场的品牌提供了优势,购物者可能不愿下载新的应用程序。品牌可以将小程序与团购结合起来,以访问较低线城市的微信用户。

对品牌的影响:由于小程序的容量很轻,因此品牌在此投资进行营销,客户参与和电子商务是一件好事。微信小程序的创造者微信报告说,截至2019年,它已拥有7亿用户,他们每月使用微信小程序42.6次。

06 快递运输将更快

我们预计到2021年,物流提供商将通过升级物流基础设施和增加保税仓库的产能来提供更快的交货速度。这样就可以为更多产品提供当天交货。阿里巴巴的菜鸟计划旨在通过帮助物流公司大规模部署物联网(IoT)解决方案来数字化并加速整个交付过程。菜鸟计划在2020年至2022年之间将1亿台智能设备连接到其IoT技术,包括其仓库,交付机器人和算法支持的管理系统。

菜鸟还将通过最后一公里送货业务“菜鸟邮局”建立10万个中转站,以增加送货选择。菜鸟邮局提供定期送货,智能储物柜和送货上门取件等服务。

通过采用5G技术,物流提供商将能够提供更,更快的交付。京东物流于2019年北京开设了首个由5G供电的智能物流园区,并使用一代的连接性对叉车的位置和路线进行实时监控,并提供异常预警情况。

对品牌的影响:新技术将推动中国交付的进一步加速。品牌和零售商可以利用诸如智能路由之类的工具,该工具使用机器学习算法来优化交付路线,从而提高交付效率。

07 中国基于数据的消费者到制造商(C2M)模式将推动电商的发展。

中国的消费者对制造商(C2M)模式将成为电子商务发展的新动力,帮助企业更好地满足消费者的需求并实现销售增长。

在C2M模式中,工厂变得以消费者为中心。零售商和制造商从客户那里收集数据,并使用大数据创建客户资料,分析消费特征并计划生产。这有助于制造商预测产品需求并减少库存和供应链风险,这也使品牌商和零售商受益。

在2019年的光棍节购物节期间,天猫用户抢购了1.70亿个C2M产品。一家公司报告说,电动牙刷的销量在11月11日达到了25,000。罗曼利用天猫的消费者见识来影响牙刷的设计,例如牙刷头的尺寸和牙刷的颜色等。

C2M模型还与中国对产品个性化需求的增长相吻合,中国由80年代后的消费者(1980-1989年出生的人)和90年代后的消费者(1990-1999年出生的人)主导。C2M模式将允许制造商和零售商根据消费者的需求生产产品。

品牌影响:根据中国研究公司艾瑞咨询的数据,中国的C2M市场在2018年达到175亿日元(25亿美元),预计到2022年将达到420亿日元(60亿美元),复合年增长率为24.4%。据Statista估计,这相当于2018年中国电子商务总销售额的0.4%和2022年中国电子商务总销售额的0.6%。品牌可以使用C2M模型更好地满足消费者需求,并提高整个供应链的效率。

08 垂直电子商务网站将获得吸引力

垂直市场是电子商务平台,在该平台上,商品和服务被出售给特定的客户群,他们可以通过在线社区相互联系。我们预计此类网站将在2021年蓬勃发展。Babytree(专注于母婴产品)和Gegejia(面向女性市场的全球食品进口商)等网站和应用都是成功的垂直市场的例子。

  • 垂直平台自然将志趣相投的消费者捆绑在一起,并形成了围绕特定行业或产品的强大社交社区。例如,对于父母和婴儿市场Babytree,平台上的用户共享婴儿产品的育儿技巧和建议。
  • 垂直平台提供了更好的内容,可以帮助用户做出购买决定。根据麦肯锡(Mckinsey)在2019年的一项调查,中国三分之二的消费者使用他们从垂直网站收集的信息来影响他们的购买决定。

对品牌的影响:随着消费者对其购买选择的了解越来越复杂,我们希望垂直的电商站点能够吸引人们的注意力,不仅提供产品知识,而且还提供志趣相投的客户可以进行交互的社区。品牌可以与这些平台一起有效地将其产品定位到适当的消费者基础。

09 跨境电子商务的格局正在发生变化

我们预计跨境电商的格局将在2020年得到巩固。阿里巴巴于2019年9月收购了中国当时最大的跨境电商平台考拉,并将其整合到天猫。然后,阿里巴巴将占中国跨境电商市场的50%以上:根据研究公司iMedia Research的数据,网易考拉在2019年上半年占据了27.7%的市场份额,而阿里巴巴的天猫全球市场则占据了25.1%的份额。

这项收购将增加阿里巴巴接触需要跨境购买商品的中国购物者的机会。这也将帮助该公司实现天猫的商业模式多样化,该模式主要涉及邀请外国品牌在其网站上开设在线商店——考拉通常直接从外国商人那里大量购买各种商品,然后再转售给中国消费者。首席执行官Daniel Zhang表示,阿里巴巴对考拉的收购将通过阿里巴巴整个生态系统的协同效应,进一步提升该公司为中国消费者提供的进口服务和体验。

10 2021电商市场趋势总结

实时流媒体将在2021年的电子商务中扮演更重要的角色,因为它使品牌和零售商可以实时向消费者推销产品,并为消费者提供限时折扣的优势。

电商的格局将变得更加多样化,短视频平台和小程序将持续开展直播带货,为零售商提供诸如AR之类的技术,以进一步与潜在客户互动。电商大厂将继续投资,以扩大产品范围,例如阿里巴巴收购中国跨境电子商务平台考拉,并利用技术为消费者提供更无缝的购物体验(例如,使用5G连接简化交付流程)。

基于关系的营销方法将在2021年激增:垂直市场为购物社区提供参与机会。团购将以相对较低的成本提供产品,从而成为零售商吸引来自中国二线城市消费者的一种有效方法。


文章来源:人人都是产品经理   作者:阿木木

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


解读2021年9种UI/UX设计趋势

前端达人

还有半个月,我们就要跟2020年说再见了~~ 世界每一天都在按照它的意志变化着,每年也都在影响着设计趋势的走向,今天我们就花点时间来讨论一下,2021年可能会出现的UI/UX的设计趋势。      



undefined



 1. 3D


3D设计将有很大可能继续延续,成为2021年的设计趋势,广泛应用于UI、网站、角色、以及动画设计中。



UI设计



图标设计



角色设计




产品细节展示





2. 玻璃拟态


在说到Glassmorphism(玻璃拟态)之前,我们先来回忆一下另一种拟态:


在2019年底,设计圈突然刮起一阵新拟态风(Neumorphism),最初是乌克兰设计师Alexander Plyuto在Dribbble

发布的一张设计作品,引发大家的激烈讨论和争相模仿。



新拟态(Neumorphism)的出现,为当时已经流行很久的扁平化设计开辟了一种新的表现形式,很多人猜测和议论,此风格会不会接替「扁平化设计」成为新的设计主流。


从美学价值上来说,新拟态(Neumorphism)足够现代、看起来也颇具有时尚感、科技感也很足。


不过随着时间的发展,设计师们渐渐发现,在实际的应用上,新拟物化本身确实不能算是一种系统全面的设计风格,因为在很多具体的设计上,新拟态比较难以保证可用性和易用性,在层次的表达上,也有很多局限。




以IOS14和Mac OS Big Sur操作系统发布为标志,一种新的拟物风格正在悄悄流行。



Glassmorphism


这种把阴影、透明度以及模糊的背景结合到一起的设计思路,使界面呈现出介于玻璃和塑料板之间的质感,被Michal Malewicz称为Glassmorphism(玻璃拟态),对比之前火爆一时的Neumorphism(新拟态),这种新趋势更加垂直。


这种垂直性让用户可以通过它看到底层的元素,用户可以确定界面的层次结构和深度。他们可以识别出哪一层在哪一层之上,就像虚拟玻璃一样。



玻璃拟态的设计有几个特点:


· 透明度(使用背景模糊的磨砂玻璃效果)

· 类似于物体漂浮在太空中的多层方法

· 背景上鲜艳的色彩突出了模糊的透明度

· 半透明物体上的细微浅色边框





这种隔着一层玻璃的质感,呈现出一种独特的「虚实结合」的美感




毛玻璃风格ICON


值得一提的是,玻璃拟态与「 macOS Big Sur 和 iOS 14 」在视觉美学上也保持着高度的一致,尤其是在系统的设计美学逻辑上是统一的。


相比于看起来高级但是炫技多于实用性的「新拟态」,「玻璃拟物化」这种风格在各大操作系统的实行和验证之下,实用性更强,视觉美感上也得到目前的操作系统的验证。


不过作为善变的人类,我们很容易就会对流行的趋势感到厌倦,所以每隔几年就会流行到另一种不同的风格。扁平化的风格已经流行了很长一段时间了,或许现在又会慢慢向色彩更丰富、更立体、更炫丽的风格回归了。




附上那个引领新拟态风格的乌克兰设计师Alexander Plyuto 的作品






3. 真实的照片


插图和3D并不一定适合所有人,有时候真人和真实的物品会对用户产生更大的吸引力,让他们更加感同身受。




网站主页



华硕(ASUS)官网




制作美食



航空公司




4. 多彩的颜色搭配


许多设计都使用了多色搭配,使得自己的设计呈现出神奇、空灵、包罗万象的感觉,而且,鲜艳的色彩更容易区分和让人记住。




图标的多色搭配





时尚移动应用




色彩应用



Ins的图标改版



5. 模糊的彩色背景


使用模糊彩色背景的设计看起来有种特别的温暖和热情。












6. 极简主义


极简主义本身是一种设计理念,应用到UI或者平面设计领域当中的时候,可以理解为:设计中的每一个元素都应该是有用的,它简单,干净,漂亮,且实用。极简主义的设计易于用户理解,参与度也高。




大量的留白






元素规整、有条理和秩序




扁平化的元素




简化配色





可读性较高的字体


极简主义的好用之处在于它凸显关键,为用户呈现最重要的东西,并且让用户关注最重要的事情。






7.几何结构


越来越多的设计呈现整合、规整、有秩序的视觉结构,使用户增加使用和观看的乐趣。



视觉设计的平面几何





空间几何





平面设计



8. 野蛮主义


「野蛮主义」一词,最早出现于1950年,由瑞典建筑师汉斯·阿斯普隆德用以描述乌普萨拉一座名为「Villa Göth」的现代砖房。



顾名思义,野蛮主义的特征十分「简单粗暴」,通常都由不断重复的元素拼接而成,以笔直的线条和锋利的棱角居多。对于大型建筑物而言要么追求奇形怪状,要么追求严格对称,落成的建筑外墙多为毫无修饰的砖块和混凝土,整体看起来异常冰冷和沉重。


而在数字设计中衍生的的「野蛮主义」是一种故意试图显得原始、随意、无装饰的样式。刻意的不设计使这些网站几乎没有美感甚至显得有些简陋。


尽管很少有人将这种设计风格归类为漂亮,但它对于某些内容类型确实具有独特的表达魅力。而且具有鲜明大胆的风格。



 

野蛮主义设计风格短期内应该不会深入到UI设计中去,更多的会在网站,或者杂志的设计运用此种设计思想。





9. 简化UI/UX流程


此处说的简化,不是指视觉效果的简化。设计流程做的太复杂,不论对于用户或者是设计师都是不利的。


优秀的设计师会兼顾美学和实操效果,把流程简化到减无可减,给用户以丝滑流畅的体验效果。






2021年,设计将变得更多元、更新颖,不同风格也会相互碰撞,新技术也被应用在设计中。我们作为设计师,要更好的理解和跟上新趋势的发展,扩大自己知识的范围,例如设计美学和心理学知识等,就可以知道设计趋势如此流行的原因和源头。在此基础上利用好新知识和新工具,为更好的服务大众时刻准备着。

文献:Diana Malewicz (UX Collective)  素材来源dribbble,侵权删 




今天先跟大家分享到这里,谢谢观看~ 

转自:站酷

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


UX设计之动效终极指南

前端达人

这文章拜读过多次,细是真的细,借鉴了很多动画行业的原则。文章比较长,翻译过来,同大家一起学习探讨。

如今,我们很难通过界面动效给人留下深刻的印象或者带来惊喜。它展示了屏幕之间的交互,解释了如何使用该应用程序,或者只是简单地吸引用户的注意。在浏览相关动效的文章时,我发现几乎所有的文章都只描述了某些特定的例子或一般通用型的动效知识,但是我没有见过一篇文章都可以清晰,确切全面地描述所有动效规则。正如此,在本文中,我不会加入任何新的东西,我只想在一个地方列出所有主要的动效原理和规则,这样其他想要开始制作界面动效的设计师就不必查找额外的动效知识。


01动效的持续时间和速度

当元素更改其状态或位置时,动效的持续时间应该适当慢到用户可以注意到,但同时应足够快,以免引起用户等待。

控制好动效的持续时间。既不要太快,也不要慢地让用户打哈欠


众多研究结果表明:界面动效的最佳速度在200到500毫秒之间。这个时间是基于人脑的特有机制而得出的结论。任何短于100毫秒的动效都是瞬时的,根本不会被人脑识别。而动效时间超过1秒将传递一种迟钝感,因此对用户来说会产生无聊厌烦感。

动效持续时间建议


在移动设备上,Material Design Guidelines还建议将动效的持续时间限制为200-300毫秒。至于平板电脑,持续时间应延长30%,大约为400-450毫秒。原因很简单:屏幕尺寸更大,物体在改变位置时需要经过更长的路径。因此,在可穿戴设备上,持续时间应缩短30%,大约为150-200 ms,因为在较小的屏幕上,运动路径更短。

针对不同屏幕尺寸,动效时间也需要做出调整


网页动效的处理方式则有所不同。由于我们习惯于在浏览器中迅速打开网页,因此我们希望也能在不同状态之间快速转换。因此,网页动效的持续时间应比移动设备短约2倍-大概在150-200毫秒之间。否则,用户将不可避免地认为计算机死机或网络连接出现问题。


但是,如果您要在网站上创建装饰性动效或试图吸引用户对某些元素的关注,则无需考虑这些规则。在这些情况下,动效时间可以更长一些。

电脑大屏幕并不等于缓慢的动效!


您需要记住,无论在哪个显示设备,动效的持续时间不仅仅取决于动效元素行进距离,还取决于动效元素的大小。较小的动效元素或具简单小幅度动效应适当缩短持续时间(加快运动速度)。反之,具有较大且复杂元素的动效则需要加长持续时间。


在相同大小的移动物体中,第一个停下的是运动距离最短的物体。(注:作者此处指例1、例2)

小物体与大物体相比移动速度较慢,因为它们(注:此处作者指大物体)会产生较大的形变量/偏移量。

动效的持续时间取决于物体的大小和运动距离


当物体碰撞时,碰撞的能量必须根据物理定律在它们之间平均分配。因此,最好避免使用弹跳效果。仅在有意义的特殊情况下使用它。

避免使用弹跳效果,因为它会分散注意力


物体的运动应该清晰且锐利的,因此不要使用运动模糊(是的,说的就是AE用户,这次不可以)。即使在现代移动设备上也很难实现该效果,并且运动模糊不适用于界面 。

不要在动效中使用运动模糊效果


清单列表(新闻卡片,电子邮件列表等)之间应该有很短的延迟时间。每次出现新元素应持续20到25 ms。界面元素出现的速度较慢可能会惹恼用户。

表单列表的动效应持续20–25毫秒


缓动

缓动使得物体的运动更加自然。这是在《生活的幻觉:迪斯尼动画》书中详尽描述一个重要的动效原则,这本书由两个迪斯尼主动画师-奥利·约翰斯顿和弗兰克·托马斯编写。


为了使动效看起来不显得那么生硬和机械感,动效物体应以一定的加速度或减速度移动,就像物理现实世界中的所有物体一样。

与纯线性动效相比,具有缓动效果的动效看起来更自然


线性动效

不受任何物理力影响的物体将线性移动,即以恒定速度移动。正因为如此,人眼看起来会觉得非常不自然和生硬。


所有动效应用程序都使用动效曲线。我将解释如何阅读它们以及它们的含义。下图曲线显示物体位置(y轴)一段时间(x轴)间隔内如何变化。在下图中,运动都是线性的,因此物体在同一时间行进相同的距离。

直线运动曲线

举个例子,线性动效曲线可以用在物体改变颜色或者透明度的时候。大致来讲,物体不改变位置时,我们可以使用线性动效曲线。

缓入或加速曲线

我们可以在曲线上看到,在开始时物体的位置变化缓慢,而速度则逐渐增加。这意味着物体正在以一定的加速度运动。

加速度曲线


当物体以全速飞出屏幕时,应使用此曲线。这些可以是系统通知,也可以只是界面卡片。但是请记住,仅当物体永远离开屏幕且我们无法调用或唤起它们时,才应使用此类曲线。

将卡扔出屏幕的加速度曲线


动效曲线有助于恰当地表达情绪。在下面的示例中,我们可以看到所有物体的移动持续时间和距离是相同的,但是即使曲线上的微小变化也可以影响动效情绪。


当然,通过更改动效曲线,可以使物体更好的模拟真实物理世界。

持续时间和距离相同,但动效情绪不同

缓出或减速曲线

它与缓入曲线相反,因此物体会快速移动很长的距离,然后缓慢降低速度,直到最终停止。

减速曲线 


当元素移入屏幕时应使用这种类型的动效曲线-它以全速在屏幕上运动,然后逐渐变慢直到完全停止。这也可以应用于从屏幕外部卡片或者物体飞入屏幕的动效。

移入动效的减速曲线

缓进缓出或标准曲线

该曲线使物体在开始时获得速度,然后将其缓慢降低回零。此类曲线是界面动效中最常使用的东小区现。当您不知道使用哪种类型的运动时,请使用标准曲线。

标准曲线


根据Material Design Guidenlines,最好使用非对称曲线使机芯看起来更自然和逼真。我们应当强调曲线的末端即后半段动效,所以减速的时间要比加速时间要长。在这种情况下,用户将更加关注元素的后半段,从而更容易关注元素的新状态。

标准的对称和非对称曲线之间的区别


当物体从屏幕的一侧移动到另一侧时,应当使用缓入缓出功能。在这种情况下,可以避免用户过于关注物体的运动。

卡片横跨屏幕运动的非对称动效曲线


当物体从屏幕消失,用户也可以随时唤起消失的物体回到原先的位置时,这类运动的动效曲线(注:抽屉导航的收起动效)应当使用非对称动效曲线。这类的动效包括抽屉导航动效等。

抽屉导航收起时的非对称动效曲线


这些案例还可以得出一个很多初学者都容易忽略的基本原则,即起始(出现)动效不等于结束(消失)动效曲线。就以抽屉导航为例,抽屉导航是以减速曲线出现以标准曲线消失的。


此外,根据Google Material Design的说法,物体出现的动效时间应更长一些,以引起更多关注。

侧面菜单的出现和消失分别通过减速度和标准曲线实现


Cubic-bezier函数(注:贝塞尔函数)是用来描述运动曲线的。之所以名称叫做Cubic,是因为它是基于四个点。

贝塞尔图形图形上定义了两个坐标点,第一个点坐标是(0,0),第二个点坐标是(1,1)


基于这些我们只需要描述图形上另外两个点,通过函数(x1,y1,x2,y2)的四个参数描述这另外两个点,前两个参数是第一个点的x轴y轴,后两个是第二个点的x轴y轴。


为了便于您定义贝塞尔曲线,建议您使用easings.net和cubic-bezier.com网站。第一个包含最常用曲线参数,您可以将其参数复制到交互原型工具中使用。第二个网站可以实时预览不同参数的运动效果。

各种贝塞尔线以及对应的参数

动效编排

就像芭蕾中的舞蹈编排一样,动效编排大致意思就是在动效中以流式的方向来引导用户的注意力。

动效编排有两种——平等互动和从属互动。

平等互动

平等互动意味着物体都要按照同一特定规则出现。


在这种情况下,所有卡片会像是流水一样,一个方向从上到下引导用户的注意。如果我们不遵循同一特定规则,那么用户的注意力将会分散。同时所有元素立马就会看起来变得糟糕。

应该用一个流式方向引导用户注意力


对于表格视图,情况会更复杂。在表格里,应该按照对角线的方式来引导用户的关注点,所以一个接一个地展示元素是一个糟糕的选择。逐个显示每个元素会使动效时间过长,并且用户的关注路线会过于曲折,这是错误的。

卡片表格视图动效的对角线呈现

从属互动

从属交互意味着我们有一个吸引所有用户注意力的主体,而所有其他元素都从属于它。这种动效使得画面有了秩序感,并让人们更为关注核心内容。


如果不这么做,用户会不知道关注哪一块内容,用户的注意力会被分散。因此,如果有多个要设置动效的元素,则需要明确它们的运动顺序并确定主体,并且尽量减少同一时间运动的元素。

明确动效中的主体,其他对象保持跟随。不然用户会不知道关注哪一块,从而分散注意力。


根据Materal Design,当物体不按照自身比例改变大小时,它们应沿着弧线而不是直线移动。它有助于使运动更自然。

物体非同比形变时,应沿弧线运动


当物体按自身比例形变时,物体应当按照直线路径运动。因为直线运动的实现比较简单,因此通常会忽略物体非自身比例形变时应该采用弧线运动的规则。反观现有的实际应用案例,直线运动确实占大多数。

同比形变时的直线路径


曲线运动可以通过两种方式实现:第一种称为“ 垂直出”——水平开始,垂直结束;第二个(水平出)——垂直开始,水平结束。


物体曲线运动路径必须与界面滚动的主轴线重合(注:这里可以理解为曲线运动结束时的切线,与界面滚动的方向重合)。例如,在下一张图像上,我们可以上下垂直地滚动界面,因此卡片应当以“ 垂直出”的方式展开——首先移动到右侧,然后向下运动。收起的运动方式则相反——即卡首先垂直上升,然后水平移动回到初始位置。

如果物体的运动路径彼此相交,则它们将无法穿过彼此。物体应当加速或者减速给其他物体留下运动空间。或者也可以使用物体推动其他物体。为什么会这样?因为我们大脑总是把这些物体看做是在同一水平面。

在运动过程中,物体不应相互穿过,而应给其他物体预留运动空间


在另一种情况下,运动物体可以飞越其他物体。但是再不能直接穿过物体或交汇穿过。为什么?由于我们认为界面中的元素都是遵循显示物理规律的,因此现实世界中没有任何固体物体能够做到这些。

物体可以飞越其他物体

结论

因此,我们总结所有上述动效规则和原则,界面中的动效应映射的是我们熟知的显示物理世界中道的运动——摩擦,加速度等。模仿物体在现实中的运动行为,我们可以构建一个用户容易理解熟悉的界面动效。


如果动效使用得当,则它既不会太引人注目,也不会不会分散用户的注意。反之,您要么需要弱化动效,要么甚至将其删除。动效不应降低用户操作速度或阻止用户完成任务。


但是请不要忘记,动效不仅仅是一门科学更是一门艺术,因此最好提前对用户进行试验和测试。



转自:站酷

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



实用的组件库详细制作逻辑和注意点

前端达人

   17年开始进行视觉组件库的搭建,也出过一个B/G端设计分析方法的文章总结,里面从大的方面介绍了组件。后来看到很多关于组件库的文章,但是大都是从“分子原则”等很宽泛的方法来讲,很少去细讲实际搭建过程中会遇到的问题,甚至有些方法深究或者实际做下去是有问题。这里会全面的写下sketch搭建组件库(或者说是视觉规范)的逻辑,以及容易混淆思路的点。

      

    为了让大家容易看完,先简短说下制作组件库的目的,再分三点讲搭建方法。


    一 为什么制作组件库

 

    Q1:很多人认为table、tabs等通用组件不需要再搭建,很多大厂已经出来规范,可以复用,为什么还要单独制作自己的

    A1:这些通用组件都是由基础的样式粒子:填充色值、描边大小与色值、圆角大小、文字大小与色值等组成,就拿form表单来讲,不同的描边、行高、圆角、文字样式营造的感觉也完全不同。


    Q2:搭建后能发挥什么作用呢

    A2:统一性:避免多人多风格的现象,保证所有产品都呈现一致的设计语言,新成员加入,也可快速接手工作; 性:改一个组件,可以使用该组件的全部设计图更改;在现有组件库的基础上,也可通过修改,生成不同项目的组件库。

 

    Q3:搭建后如何确保大家都能正确使用?

    A3:需要大家了解自身项目组件库的搭建逻辑,统一讲解远程组件库使用方法,并有专人定期维护更新远程组件库。


    二 组件库具体搭建方法

 

    分三方面说明:(一)、内容架构;(二)、注意点;(三)、远程协作。

 

    (一)内容架构


    内容架构要考虑的是两方面:一个是文档的逻辑,二是组件的逻辑。三哪些制成组件,哪些制作成样式。

 

 

 

    文档的逻辑

 

 

    如上:点击创建组件按钮后,所有的组件都会出现在“图层/组件”界面,默认的排序方式是软件自定的,不好分类和查看,除非每次创建后再进行挪动。第二个“组件》”这个位置是不能直接切换看到组件的,只能在左侧看到所有的组件名称。再加上制作之前,也需要绘制出内容,所以我们需要在图层处建立界面,绘制我们的内容。样式也是如此,只能在“组件》”看到所有的样式名称。

所以我们整理出:“样式”page——所有需要创建样式的内容在此处整理分类绘制;“components组件”page——所有组件在此处分类绘制,再进行创建;“layout 布局”page——说明系统的布局和响应方案;“examples场景模块”典型场景模块,“更新日志”page——标明每次变动,当然sketch是自动导出“组件”page。另外根据系统特性,比如数据统计类界面多的情况,可以增加“data visualization数据分析”page

 

    组件的逻辑

 

    很多组件库向左图一那样,直接把所有组件摆了出来,非常凌乱不便使用。再对比element和antdesign,后者的分类整合地更干净整齐,涵盖的全面,整合后的大类别少,分类相对清晰,可以借鉴,后续有自己系统常用模块需要制作成组件,可以单独增加一个分类模块。当然也可以按着自己的逻辑重新整理。

 

    哪些制成组件,哪些制作成样式


 

    先说样式吧:1 文字(也有些会选择直接做成组件,但我一般会制成样式,感觉更轻量化些);2颜色——背景色、线条色(分割线、描边)、主色调、图标配色、功能色;3 容器(需制作全不同状态的容器,内容卡片、输入框、标签等都会用到);4投影。指的注意的是,这里的样式基本涵盖了所有的基础样式,后续大部分的基础样式都要尽量在在此处引用。

 

    哪些制成组件:本质上讲就是两大类,1是icon;2是其它无法用简单样式的常出现内容(也就是上面按“组件逻辑”整理出来的内容”

    何时需要制成复合组件:1需要通过很多基础样式切换才能改变状态时候。而且通过多个样式切换不同状态,麻烦的地方在于覆盖层的优先级比较高,即使切换成了同类其他组件,也还是被覆盖,必须更新

如下:

 

    我们可以在创建symbol后,在右侧取消内部相应的样式覆盖,然后建立所需的多个状态的平行组件,通过直接切换不同组件来切换状态。

 

    2如果该组件有上一级组件,并且要用到该组件的不同状态,就要把该组件的不同状态改为组件,不然一层一层改很麻烦。

 

    (二)、注意点

 

    制作组件的过程中虽然按着大的架构走,还是很容易混乱或者卡住。以下注意点,可以帮助我们理清关系。这部分其实也是我重点想说明的内容。

    命名


 

 

    1无论是组件还是样式的名称,最后一级相平行的,最好是可以相互切换的状态。这样就可以在右侧属性中直接切换。

    2 组件只能切组件,样式只能切样式。—— 也就是说定好一个基本元素是样式,那么与它平行的切换内容也需要是样式。

    3 如何修改已制好的组件或样式名称


 

    截图1(图层》组件page)和2处,选中进入后,均可找到对应的修改。修改后其他页面已放置好的组件名不被修改,反过来,在图层处其他位置修改,亦不能修改好组件的命名。

    4 sketch里默认的分组是通过命名时的“/”,要修改组件或样式加载时的分组,需在切换到此处,进行拖拽。修改后,组件的名称也会被修改。

 



 

    5 要将一个元素的组件命名到一处去,理清楚如上的关系。如果遇到无法用到的基本元素搭建,需要新的元素,可放到该组的element里(如上图)

 

    样式或组件的修改

 

 

    样式变化后,更新按钮变为可点击,点击此处可以更改样式,重设样式可以还原

    组件编辑覆盖层后在右侧更新,如果想修改组件,通过编辑母版

 

    响应

 

    要考虑好响应方式,每个组件在此处做好设定

 

    (三)、远程协作

 

    远程原因


 

    如上,只要复制过来的新内容中有组件,就会再下面自己建立出组件,很不方便组件管理,团队人多时,容易使组件发生变化,用远程组件能够做到完全统一。

 

    远程方案


    1 蓝湖



 

    无论样式还是组件添加后,还得自己分组重新整理,组件使用方法,在“蓝湖设计规范云”中找到相应的,自己拖过去用,很麻烦。

 

    2 语雀

    可以通过语雀的sketch插件上传或者下载,加载后便是类似远程组件的使用方法。

 

    3 sketch clould
|

 



    单独通过线下传library文件加载使用,比较不容易统一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帐户云能力创建的 Sketch的云端设计库,使用前需要对其进行设置。使用时,打开 Sketch 左上角第一个菜单的 Preference,选择 Libraries 卡片,将本地 iCloud Drive 中的规范文件拖拽进这个区域,然后关闭该窗口。

 

    综上所述,我们常选sketch cloud或者 语雀的kitchen插件来进行远程使用。另外会线下发送整个文件,方便整体复用一些组件和example里的页面。

    

    以上是我目前关于视觉组件库制作的一些经验和个人看法,欢迎留言交流~


转自:站酷

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

深度解析设计系统

ui设计分享达人

你觉得设计系统重要吗?那目前手里的设计系统是在灵活运用?还是落灰、摆设?你对设计系统理解有多深?它在你的设计中有多大的用处?节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范?那怎么避免设计系统带来了统一和便利,但同时失去了变化和新鲜感?


设计系统是今年来热门的话题之一,想要带来良好的用户体验,设计系统就是其中重要的一环,那它和设计规范、设计模式、设计语言、设计原则有什么关系?


设计系统

设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档,在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色,文案,字体等等),所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的,是需要维护与改进的。


设计模式

设计模式是一种经常性,可重复使用的解决方案,可用于解决设计问题,我们经常会说解决整个方案我们要运用什么样的设计模式。


设计语言

设计语言是把设计作为一种“沟通的方式”,用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。


设计原则

设计原则可以理解为设计语言中的语法,是构建设计语言系统的起点,用于传达品牌主张或设计理念,它将指引业务设计执行的方向。


比如Airbnb的设计原则可以简单归纳为几点:

设计规范

设计规范对于设计师来说并不陌生,日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准,针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率,同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。


那是不是只要制作一套设计系统,在团队进行扩散就可以了?那平台的统一性就解决了?


我曾经加入一个设计团队,看到平台风格不统一,当时很自豪很坚定的制定了一套平台设计规范,从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系,还有交互方面。当时一心想着有这个规范宝典在手,平台统一性指日可待,没想到这个规范就成了我自己的规范,仅仅是我在自嗨。

为什么已经建立设计规范了,还是没能解决平台统一的问题?这里延伸出另一个问题,为什么其他设计成员不用?协作不起来?是它不够好?我严格按照标准来,为什么推不起来?


那要追溯到设计体系的目的是什么?它的意义何在?

1-建立统一的设计文化体系

2-保证多团队成员共同参与的项目视觉一致性

3-提升品牌调性

4-节省与研发人员的沟通成本

5-将元素组件化,提升设计师和程序员的工作效率

6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。

7-在用户层方面,对某产品的体验一致性得到落实

8-减少设计出错率

……


整体可以归纳为

1-对内统一,对外区分

2-管理与协作变得方便

3-建立设计文化体系,建立品牌感

4-减少、优化错误出现


对内统一,对外区分

规范定义的基础是围绕某种风格或者设计文化。对内统一,一个品牌的设计风格,是要有别于同类竞品的,比如阿里云、腾讯云,他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分,一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站,各个页面的设计差异明显,像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。


undefined



管理与协作变得方便


for Designer:

多个设计成员协同一个产品,迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队,如果没有统一设计规范,那网站会变成什么样子。


for Developer:

在UI还原中,设计需要经常与前端进行沟通“这里这里这样做,那里那里这样做”,对于每一块的设计,前端都会询问你,这样大大增加了沟通的成本,把时间花在了无效的事情上。

设计规范统一后,减少了无效沟通,可以更专注创新方向,比如:要改变预先设定的一个辅助色,无论是设计还是开发,修改组件的颜色,全局使用到这个组件的地方都会改动,大大节省了设计时间。


建立设计文化体系,突出品牌感

做品牌的时候需要制定一整套VI规范手册,那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式,更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐,看到界面都可以立马识别出这是哪个app。



undefined


你能分出哪个是网易云播放界面,哪个是QQ音乐播放界面吗?


减少、优化错误出现

设计经常碰到设计完后需要修改一个点,然后就要找出设计稿中所有相同的地方进行修改,这样很容易漏,统一规范后只需要修改组件即可。尽可能的避免错误的出现。


设计规范的意义这么强大,对网站及品牌有至关重要的作用,那为什么还会出现没有应用起来的情况呢?

很多设计师会说:“设计不就应该是变化多端的吗?就是要表现创新力呀?制定了设计规范是不是就失去了变化和新鲜感?那设计还有什么意义?开发都可以做设计的事情了。”


这里就要看设计规范理解的深度—设计规范是分层次的平台规范归根结底是为了确保产品的易用性,是为了减少用户的学习成本


对无法拆分的底层基础元素做严格规定

底层基础元素也可以说是全局样式,比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素,给用户一种统一的视觉形象,在跨界面、跨端、跨系统间有熟悉感,从而潜移默化地进行品牌的渗透。



增强界面设计的灵活性和可维护性

对组合自由度较低的基础组件做精简的样式变化限定,对组合自由度较高的复合组件减少过于局限的限定条件,考虑各种拓展的可能性。组件在制定过程中要考虑多种状态,多种可能。



设计规范随着业务的发展或技术的变革终究是会过时的,是需要迭代的。

设计规范是需要迭代的,而不是我只要制作出来就放那了,就像女生买衣服,去年的衣服已经配不上今年的我,嘻嘻

~~希望我每天都有新衣服穿,做梦中~


对设计体系的误解

设计体系最大的重要性毋庸置疑就是规范节省人力,设计师可以更多的时间去发挥创造性。


误解1-设计系统限制了设计师的创造力

很多设计师觉得统一了规范,那我的创造性从哪发挥,界面都长的差不多。在设计中,设计目的是解决商业或用户的问题,并不仅仅是为了有创意而引入新的样式或交互方式。


有了设计体系,统一了整体品牌风格,不用把精力花费在比如调整间距、对齐元素等琐碎的事情上,更多的回去关注更全局的设计策略。


误解2-设计系统只关乎设计,可由设计师独立完成

它仅仅是设计软件上可复用的组件,所以可由设计师独立完成,这种想法是错误的,是需要来自不同角色支持和参与的,这里包括前端、品牌、动态设计、 用户研究等。


误解3-设计系统是一劳永逸的

有时候会想只要完成了规范就大功告成了,其实不然,对待设计规范就像对待产品一样,是需要维护和改进的,包括两个方面:一种是对内部使用的开发以及同事,一种是对用户的,应该定期收集用户以及同事的反馈,确保及时更新迭代。


误解4-设计系统的重要性

1-提高设计开发效率,最显而易见的好处就是,组件库的可复用性。

比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。

2-确保设计一致性,为用户提供连贯一致的用户体验,设计的一致性让用户能缩短的学习使用产品的周期,让他们能够预见他们的操作所带来的改变。

网站统一的视觉规范、交互体验,会让用户产生一种掌控感。

3-设计系统促进了公司内部的合作和交流,一个成功的设计系统是需要跨功能团队参与,设计系统因此促进了公司内部不同职位的合作和交流,这种文化的建立也会帮助公司更有效地推出新的产品或服务。


那我们要如何去执行呢?

已经了解了规范的目的/意义,那该怎么去着手呢?


  • 对于设计规范的意义要同步给设计人员,提高认知,这是一件提率的规范,规范必须落地。

在制定规范前期,不应该是一个人规定这个规范,设计团队的成员应积极参与,前期先把规范的基调定好,人人都参与进来了,规范也就能更好的运营,当时我就是一个人定了规范,只是单纯把规范发给其他设计人员,他们没有参与,自然不会使用规范,对里面的设计元素没有加深理解。


主导人

这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力,这样能把纰漏降到。

undefined


  • 应用规范里的界面、交互规范必须得遵循

大家一般说的设计规范是界面的视觉规范,从UI的定义,User Interface—用户界面,用户与界面之间的交互关系,可以归纳规范其实可以包含两大类,一类是视觉规范,一类是交互规范。


视觉规范可以给用户传达统一的品牌形象,确保视觉一致性。后期的设计元素须复合规范的原则。


交互规范可以减少用户的学习成本,让用户有归属感。交互规范在制定的过程中,需要写好交互规则与条件,不然后期维护会混乱。像盖房子一样,地基都没打稳的话,整个楼都是偏的。


那在使用规范时,一定要遵循规范里的要求进行应用,否则会乱套,不仅起不到统一的品牌风格,反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。



设计规范的节点

节点和公司的进度搭边,看当前的产品是应该先独立风格还是先统一基础规范。


1-固定的设计风格规范,比如:google的“扁平”,微软的“磁贴”,可以全局使用,并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队,定好基调,不会走偏。


2-不断优化的设计规范,根据公司的节奏,有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后,进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。



建立规范


·制作原理—利用粒子构成的原理与三维解构

利用粒子构成的原理与三维解构,一个组件被科学的三维解析后由粒子再构成,理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变,高度灵活


·具体过程

建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。


·元素是工具库的必要部分

并不是每个时刻都能够直接使用完整的组件,元素是我们工具库必不可少的部分,它可以更大的方便你修改组件,再造组件以及特殊的排版,方便拖拉拽。


·组件的命名规范化

规范组件命名,方便查找、方便协作。


协作

一键导出/同步组件到Sketch模板。

标注方面,目前我们团队使用的是蓝湖私有化。



那是不是所有的公司都需要创建设计系统?

一般情况下,公司有不同的产品线,且都需要长期的开发与迭代。

公司中,越来越多的设计师加入,设计风格需要统一。


那建立一套设计体系会面临什么挑战?

设计体系里面包含了设计语言、设计规范,需要与前端、品牌、动态设计、 用户研究等沟通,还是需要迭代优化的,这是非常繁琐耗时的项目,初期会非常的艰难,当设计师开始做组件时,也是非常耗时的工作,需要考虑不同场景下的使用情况以及设计的延展性,都需要投入大量的设计人力。


聊了这么多,大家对设计系统有了一定了解,建立好设计系统可以事半功倍,以此提升效率才能提升UED价值。


思考点:

1-对于设计团队只有一两个人的时候,是否需要建立设计系统?

2-你是否愿意把时间花费在前期建立设计系统,后期更多时间用于创造性地东西?

3-建立设计系统前很枯燥,你会怎么坚持,怎么让设计体系价值更大化?


文章来源:站酷   作者:玛丽的设计笔记

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


日历

链接

个人资料

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

存档