首页

职场太内向,怎么破?

seo达人



很多同学工作后一定要明白,企业不是学校,职场也不是学校,公司招你过去是希望你给公司带来价值,对设计师定位一定不是学生,好的企业可能会有很多内部培训,学习的机会,但是一定是靠你去主动学习。这也是职场的潜规则。关于职场、关于工作方法的问题。今天分享一篇和工作无关的内容,更多是关于设计心态的问题,希望给此刻迷茫的你一点方向。

 

1.企业不是学校 

图片

很多同学工作后一定要明白,企业不是学校,职场也不是学校,公司招你过去是希望你给公司带来价值,对设计师定位一定不是学生,好的企业可能会有很多内部培训,学习的机会,但是一定是靠你去主动学习。

这也是职场的潜规则,工作越久越会发现,很难有人会毫无保留的教你,如果我们一直处于学生思维,只会在职场中失去好的机会。职场上的学习,一定是主动的。

图片

学生时候我们学习是被动接受,老师教什么,我们学什么,但是职场不一样,一定要从“被动”改为“主动”,公司会有很多内部培训,学习资料,但是学习一定要记得是自己的事情。

好的公司会有体系化培训,相当多的公司是不愿意付出培养成本的。比如之前在阿里,内部很多设计培训、课程,但是大家都主动去报名学习,没有人逼着你一定要学,大家时间都是一样的。所以从“被动学习”到“主动学习”是新人设计师职场进阶的第一步,现在互联网上学习资源那么多,无论我的星球,还是各种教程,只要你想一定能学到,关键在于你自己意愿是否足够强烈。

a

 2.掌握正确的学习方法 

图片

互联网很难做,也有很大一部分原因是,现在信息爆炸,每天充斥着各种需要我们学习的知识,仿佛不学习就会落伍,C4D、AE、插画等等,如果没有独立思考和判断的能力,我们很容易随波逐流,什么都学,最后越学越迷茫。

图片

上图就是我们大多数学习状态,每周学下AE,学下C4D,然后三天打渔两天晒网,最后会发现,都学的很一般,没有一个学的很精通。

聚焦学习,单点突破

图片

正确的学习方法是什么,是单点击破,横向拉通,我们要聚焦学习,一段时间只学习一个知识点,比如你最近学AE,就花精力把这个技能彻底掌握,再去学下一个,我把这个叫100小时刻意练习,我在星球里,也是带着大家这样去学习知识点。当你学习一件事情持续100小时,每天3小时,坚持3个月,你会比90%人都要学习的好。

图片

别看只是一个小点,但是当我们掌握的点多了,自然而然就形成了线。

 

考虑投入产出比

图片

学习的目的最终是要学以致用,现在大家每天工作本来就很忙,如果毫无目的地学就没有意义了。一定要考虑投入产出比,要根据自己的规划去学。

图片

比如你未来是走体验设计师的方向,那么你就应该学技能树里面相关的内容,比如数据研究、交互知识、产品思维、商业思维这些维度,这些方向是未来帮你迈入新的台阶需要具备的能力。

如果你去学习C4D,或者学品牌设计,哪怕你学会了,也学得很精通,你去面试支付宝设计师,你说你最强的技能是画LOGO,那肯定是不合理的,因为说不定支付宝LOGO几年都不会换一次,你这个技能在团队,根本用不了几次,更别说成为优势。

w

3.性格上一定要有「要性」

图片

阿里有一个词叫「要性」,什么意思呢,简单的说就是对一件事物的渴求程度。作为设计师也是如此,无论我们学习,做项目,还是工作上,都需要有这种精神。

 

要性决定判断

图片

我们今天接到一个项目,判断这个项目好好做一定会有很大的市场反响,比如我做双11这个项目一定会被上亿人关注,那么我判断这个事情价值后,我会很拼,会拼尽全力做好,因为我知道这个事做好后带来的价值,假如我没有那么强渴望这个事情,或许我就当一个普通项目,也不会去判断它的价值,说不定就错过了提升和磨练的机会。

 

判断决定行动

图片

要性能决定我们的判断,假如我判断这个事情一定要做好,做好后可以发到behance,或者放作品集里面。那我的行为也会跟着变成正向。

工作多年后,其实对于加班不加班,其实很好衡量,这个事情加班做好对你晋升、对你成长有没有好处,如果有自发都会去加班,如果这个事情就是一个投入产出比不高的,我可能就会去另外更有价值的事情。要性决定我们的行为。

同样个人学习也是一样,如果你渴望掌握它的欲望足够强烈,那么根本不需要人督促你,你都会自发去学习。这就是信念的力量。

 

行动决定结果

图片

没有好的过程一定没有好的结果,特别在这个商业互联网大背景下做设计,如果没有好的流程和过程,最后很难拿到好的结果。所以作为设计师,必须在职场生涯都具备这种「要性」,渴望成功的心态去做每一件事情。

 

4.当你没优势的时候,唯有勤奋 

图片

每个人都想去大公司,去做优秀的产品,但是光有想是不够的,最重要是去做。能在夏天做的事情就在夏天完成吧,不然到了秋天,它就黄了,到了冬天,它就凉了……

w

想不等于做

图片

光想是没有用的,大公司的设计产出,你目前能做到一样设计质量么,或者差不多水平,如果不可以,凭什么觉得大公司要你,前面我也说了,企业不是学校,不是你想去就能去,何况大公司就那么些职场,说万里挑一毫不夸张,你没有过硬的本事,你没有做过大的项目,凭什么相信你可以做好几亿的用户的设计。

w

充分利用工作外的8小时

图片

所以在我们起跑线比较低的时候,没有学历,没有知名项目,没有大厂背景,唯有勤奋,上班时间8小时,大家都是被项目缠住,重复利用下班和周末时间,不断去提升专业技能,唯有勤奋你才能有弯道超车的机会,我们这一行和其他行业不一样,没有任何捷径,如果有,很多人都去尝试了。

o

学会曲线救国

图片

大公司招人都是有标准的,有些岗位就是有鄙视链的,比如喜欢招知名公司背景,海外的,年轻有潜力,做过知名APP的,如果简历上没有这些很难进去的。但是就因此放弃么,当然不是。

学会曲线救国,我没有知名项目,那我是不是提升我专业项目,争取去一个规模小点公司,积攒知名项目案例,比如每年TOP100的应用榜单,里面其实很多小而美的公司,先去这些公司锻炼好了,再去二线公司,再去一线公司,循序渐进往上走。

不要一根筋的,在毫无背景、毫无资历情况下去碰壁,试想你是大公司人,你是不是也想招一个被市场验证过,有过同样公司背景和项目的设计师。

 

5.设计师推动力是带着方案 

图片

很多时候,我们很想为产品做点什么,也发现很多产品不好用的地方,然后在没有任何准备下,去吐槽产品,吐槽设计,这是一个大的忌讳。因为你不了解当时背景,是排期不够,还是人手不够,导致线下效果。盲目吐槽毫无意义。
正确的做法是,今天你对某个页面不满,或者设计不满,应该带着你觉得满意合理的方案,去和主管向上沟通,有设计依据和推理过程。

q

左手艺术,右手科学

图片

你推动的方案,切忌只是从设计师视角出发,一定要从更全局去出发,所以除了设计上方案要比之前好,你的设计过程一定有理有据,艺术一面是视觉交互维度。
那么科学一面,一定是有数据支撑,比如提案前你充分梳理了现有数据,从数据中发现的问题,都可以作为设计线索。同时可以加入一些设计声音,比如苹果商店评论,或者微博评论,客服或者用研那边建议。通过这些来支撑你的设计提案。

t

让决策者做选择题,而不是判断题

图片

提案也有很多技巧,后续再和大家分享,但是很重要一点就是提案时候,不要给领导太多的方案选择,很多设计师很容易犯的错误就是,提案时会放一堆方案给领导看,让领导做决策,这样最终结果还是继续改下去。

其实提案,领导关注你的设计逻辑和推导过程,如果整个过程比较顺利,结果一定是符合预期,有正确的设计过程结果也不会差到哪里去,一般设计提案重点推导一个方案,让领导说「YES」或「NO」,如果领导说不可以时候,再把其他方案抛出来。

 

6.你的一招鲜就是你的竞争力 

图片

什么是竞争力?人无我有,人有我全,如果你在一个几十人团队,怎么能被领导记住,一定是你具备其他人不具备的技能,或者你这个技能在你们团队是最好的。任何时候,设计师具备一招鲜的能力,都会很吃香,你可以想下你的团队,那些备受领导喜欢的设计师是不是都具备这个特征。

图片

每个人都想成为主角,团队核心,怎么做到,就是某个专业能力上,设计总监或者主管有事情第一个想到就是找你来完成,那么就成功了。

比如插画第一个想到你做,UI第一个想到你来改版,品牌第一个想到你来完成。如果做到这样,平时加薪升职一定少不了你,任何时候一招鲜的设计师都可以在职场上有一席之地。

q

7.打造自己的标签 

图片

职场是个人情社会,有人的地方就有江湖,每个人在其它人心中都有个「标签」,虽然我很讨厌职场贴标签这种潜规则,但是无法避免。所以与其你被人贴上一个标签,不如你自己把标签人设立好。职场人都需要2个标签。

w

第一个:专业标签

图片

专业标签,毋庸置疑也是最难的,大家对你专业上评价怎么样的,哪方面是你特长,在主管心中是很一般,还是说UI上是你优势,数据是你优势,你需要自己给自己定位好,假设你想让别人觉得数据分析是你专业标签。

确定好了后,然后需要项目不断去反复验证这一个标签,在大家心中的印象,无论项目沟通,还是团队分享,都应该去打磨这个标签,打磨好了,优势是很大的,正如我前面所说,大家后续领域想到你,你就是第一人。

o

第二个:性格标签

图片

性格标签很好理解,你在大家心中是个什么性格的人,活泼的,有才华的,有魅力的,吃货还是内向的,职场上人和人之间关系很微妙,虽然不提倡站队,但是这种事情哪里都少不了。

那些性格活泼开朗,比较玩的开的,往往容易受欢迎,所以你要问自己,你希望在大家心中是个什么样性格,是内向的老黄牛,还是吃货一枚,还是美食专家。你需要建立一个性格标签,去和身边的人情感上维系。否则很容易职场上吃亏,和主管没有共同语言,没有尿到一个壶里,那你后面晋升,涨薪股票,或许也没你什么份。

w

第三个:没有无缘无故的爱

图片

和同事之间多去培养一些共同的爱好,在互联网公司做事情,很多事情其实难的不是事情本身,而是人的关系处理上,在大公司的同学应该很能体会。

要不,很多同学一起去抽烟,一起去逛街,一起去喝酒,很多时候先成为了朋友,做事情会更加顺畅,同时这个过程你获得的信息也足够多,信息的不对称往往会让你做事情云里雾里,所以没事,多和研发的兄弟,产品运营的同学,吃吃饭,培养一下革命友情,对你只有帮助,没有坏处。

 w

最后 

图片

这是我所总结出来的一部分职场心得,或许和设计无关,但是在我们工作中却尤其重要,希望今天的分享你会喜欢。

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》职场太内向,怎么破?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



设计要知道-HMI设计必看!车载中控的前世今生

鹤鹤

首先先普及下HMI的概念

HMI:- Human Machine Interface : 人机界面,现在多指车载交互系统体验设计。

既然说到人机界面,我们先来设计的载体是如何演变的。




一、车载中控仪表盘演变过程


1886 年,由卡尔·本茨发明的第一辆汽车。当时根本就没有所谓的仪表盘概念,所以载体还得从1908年T型车(Ford Model T)说起,到2012年划时代的特斯拉Model S,汽车仪表盘目前经历四代。



1、第一代:以按键为主


机械式仪表盘: 第一个时代仪表盘为机械芯仪表,一般包含了车速里程表、转速表、机油压力表、水温表、燃油表、充电表等,之后汽车仪表还需要装稳压器来稳定仪表电源的电压,抑制波动幅度,保证汽车仪表的准确性。初代的汽车仪表盘主要以传统的热式和动磁式,显示的信息极为有限,更多的是车辆物理信息“通信员”的角色。


在机械时期中控台哪有什么屏幕可言,那时候的中控台就是收音机和空调的调节器,而且都是实体按键的,只能满足驾驶的基本需求,没有屏幕,都是照搬飞机中控布局,以实体按键为主,功能简陋单一。堆砌功能按钮仪表,没有交互可言。






2、第二代:电气式仪表盘+小中控屏


第二个时代的电气式仪表盘终于诞生,从真空荧光显示屏(VFD),发展到采用液晶显示屏(LED)及小尺寸薄膜晶体管显示器(TFT),显示屏显示的信息越来越清晰、快捷。目前电气式仪表在市场的保有量最大,且一般采用机械仪表结合数字仪表的方式,例如车速、转速信息采用指针,指示灯信息采用LED等点亮,其它信息则采用TFT屏。



虽然相较于第一代机械机芯仪表增加了不少功能,汽车信息反馈也更全面更及时,但是其发展速度却明显与汽车行业不相匹配,对于更深层次的驾驶需求,电气式仪表仍无法满足。




3、第三代:全数字化仪表


汽车仪表盘领域在不断追求更新,于是划时代的全数字液晶仪表盘孕育而生,也是就我们常说的虚拟仪表盘。全数字汽车仪表盘使用了一整块液晶屏取代了传统的指针和刻度表,所有信息都通过这块屏幕显示出来。


单从外观上来看就能给人以一种比较高大上的感觉,这类仪表盘上往往没有指针等部件,所有信息都通过屏幕传递出来。功能更强大、信息显示更具逻辑性,驾驶者接受信息更快,提升行车安全。也可以根据个人喜好调整相应参数,比如比亚迪的仪表盘就可以改变背景颜色。在高级点的,像宝马的全数字仪表就可以切换N多种模式。


2007年iPhone问世后,大屏、轻薄机身、高清显示屏、可安装应用等功能引领了整个行业的革命。电动汽车行业飞速发展,智能AI和人际互联等人车交互概念也跟着兴起,对于中控台的需求和功能复杂度也跟着越发精细起来,结果就是屏幕越来越大。


2013年上市的特斯拉Model S,座舱里最惊艳的就是那块17寸的大屏。超高的分辨率和流畅的操作,和漂亮的UI设计,最初让很多美国民众疯狂。就像苹果手机颠覆了传统手机业,特斯拉也颠覆了传统汽车行业。


2014年换代的奔驰S级将两块12.3寸屏幕连在一起,合成了一块23寸大屏,比特斯拉的大屏还多出6英寸。




拜腾M-Byte,48寸巨屏,横向贯穿仪表台,再一次颠覆汽车的内饰设计。



比亚迪系列汽车的旋转大屏,玩出新花样,可以旋转控制,就像手机横屏和竖屏的场景。


纵观下来,其实不难看出,虽然汽车的中控屏幕也是往着越来越大的方向发展,但因为空间以及功能需求的不同,相比起手机来说,中控屏幕的变化更具备多样性。




4、第四代:HUD显示屏


从上世纪80年代,抬头显示技术在汽车领域已经开始被使用,直到现在才开始逐渐展露头脚。

HUD抬头显示器(Head Up Display),又叫平视显示系统。它可以把重要的信息,映射在风窗玻璃上的全息半镜上,使驾驶员不必低头,就能看清重要的信息。


战斗机是率先应用HUD抬头显示器的。飞行员在空战中,需要交替观察舱外目标和舱内仪表,易产生瞬间视觉中断,因此会导致反应迟缓、操作失误,并有可能贻误战机,采用HUD抬头显示可克服这一缺点。


第一架使用HUD抬头显示的飞机是美国海军的A-5舰载机。民用航空最早使用HUD抬头显示是法国达索飞机公司的mercure飞机。



在复杂多变的道路上开车,驾驶员双眼离开车辆前方,是个非常危险的事情,尤其是在高速公路上更是明显。于是很多车型,就给车辆配备了一个不需要挪开视线,就能知道车辆基本信息的配置,这就是HUD抬头显示。



HUD作为一款新技术,优势显而易见。当驾驶员需要查看仪表盘或中控台上的信息,视线至少需要转移0.3秒,而HUD投影的信息就在驾驶员平视的正前方,驾驶员可以将更多的注意力放在路面上。将驾驶体验及驾驶员对于路况信息的认知能力进行革新式升级。





二、六大车载系统的特点


现在各家系统百家争鸣,各家车载系统设计有哪些不同?



1. 阿里 斑马智行


简介:


1、阿里车载小程序是一种无需下载安装即可使用的“应用”,旨在为用户打造“随时可用”、“用完即走”的使用体验。


2、AliOS作为互联网汽车操作系统,原生地支持阿里小程序,引入阿里生态服务的同时也面向开发者开放,围绕车场景为用户提供从出行到生活的各类智慧服务。


特点:


1、设计特点:


独立的大卡片式的内容界面模块方便车主在行车过程中单手操作,其配色鲜艳,风格扁平,符合使用场景和国人的使用习惯。


2、功能特点:自带场景智能感知的基因。


得到车主授权后,车载小程序可以围绕行车场景,实现上车前、行车中、下车后自然串联的智能化场景服务。


用户可以在车上通过触控、语音、手势等多模态交互方式,咨询附近的推荐餐厅,小程序会基于用户的喜好作出推荐,还可以预约排号;到达餐厅附近,系统会自动唤醒小程序,为用户找到停车场;下车后,车载小程序会无缝连接到手机小程序端,用户可以在手机上查看餐厅的预约信息等。


△ 斑马智行2.0系统设计


斑马智行,采用智能手机界面和应用商城下载 APP 的使用方式,实现车载和手机的双重控制。


强大的云端特性在语音识别和线上互联方面提供了良好的使用体验,车主可以连接手机蓝牙后,读取其手机通讯录,实现利用车载系统拨打和接听电话的功能。支持 USB 接口,通过 U 盘实现播放音频、视频文件等。在娱乐生活方面,内置虾米音乐,蜻蜓FM,喜马拉雅等,支持在线搜索,在线播放以及在线广播等服务。


同时,斑马智行依靠阿里强大的技术和资源支持,打通停车场,加油站,高速公路支付等,使用户驾车时产生的费用均能通过支付宝支付。




2. 百度 Car Life和Apollo


简介:


1、打造智能车载服务生态,满足用户出行、娱乐、生活等多元化需求,构建人-车-家一体化互联闭环成为时代趋势。


2、智能小程序,是百度提供的一种技术解决方案。开发者基于此开发出来的服务,在各类宿主环境(手机 App、车载系统、IOT 设备等)中,可做到用户无感知安装,即点即用。


特点:


1、设计特点


车载端主界面分别采用蓝、绿、红、灰四个色块对应四个功能模块,「发现」集成音乐、娱乐、听书、电台等特色音视频服务,采用红色在界面中最为突出,其设计风格整体扁平,面性 icon 利于识别与点击。


2、功能特点


智能小程序包括“车后服务”、“资讯”、“休闲游戏”、“视频”、“购物”、“亲子”、“旅游”、“工具”等8个类别,一共80多款。车企可以根据车型定位和自身需求自行定义和组合可供使用的车载小程序。


百度的车载小程序大部分场景下还是只能依靠用户用语音唤醒,但在生态的开放性上,百度车载小程序则做得更为彻底,可以在百度App、百度地图、百度贴吧、百度网盘百度系App上运行。





3. 腾讯 Ai in Car




简介:


1、“腾讯小场景”是专为出行场景打造的车载轻应用生态,部署在云端,不需要下载,即用即走,并支持语音交互。


2、分为3类,出行服务小型车、生活服务小程序和视听服务小程序。


特点:


1、设计特点:


运用的FutureLink3.0系统,FutureLink3.0 基于安卓平台开发,在 12 英寸的中控屏幕上并没有将大量的图标堆砌在首页,反而以地图为背景,将六大功能模块以大板块的形式布局在地图下方,整个界面设计简洁。


2、功能特点:


最大特色:基于位置和场景会被自动唤醒。比如用户经过加油站、停车场、旅游景点的时候,有些购买和支付的服务就会主动弹在车机上,用户再通过语音完成操作。


手机小程序是“人找服务”,那么腾讯车载小程序则进化成“服务找人”。


△ 腾讯在车载场景下的生态布局


Ai in Car,顾名思义,基于 AI 的连接能力和生态,融合腾讯内容生态的优质资源,包括资讯、视频、IP、文学等板块,为车主提供更丰富的内容消费。风行搭载的 FutureLink3.0 车联网系统,就是和腾讯深度合作而诞生的优质案例。



△ FutureLink3.0系统界面


只在设置页中,才会出现二级子菜单列表,而且提供的设置项目也不多,界面层级简单,不累赘,也给司机带来轻松愉悦的操作体验。同时,基于行车安全考虑,在类似天气、股票等查询功能上,比较依赖语音控制。在娱乐生活方面,打通手机和车机账号,用户无需切换账号就可以与车载导航、电台、QQ音乐、微信等功能无缝衔接,支持车主组建聊天组,在行车途中与好友进行实时沟通。


从整体来看 FutureLink3.0 的设计,它更像是一个把需求页面展现在车主面前的「轻应用」,没有传统概念上的主界面、多层交互菜单以及相应的「系统特质」的设计,它更希望把海量资源建立在云端,终端只给车主呈现其所需要的服务即可。




4. 谷歌 Android auto


简介:


Android Auto 系统的工作原理是将手机连接到兼容的汽车,让驾驶员可以使用汽车屏幕和语音操作与手机的应用程序进行交互。它提供了一种导航、收听媒体和消息等的简单方法。


特点:


1、设计特点:


在 UI 框架设计方面,主屏幕以卡片的形式显示通知、活动、导航和消息,右下角有启动语音命令的麦克风图标和底部的活动栏,这些特性属于全局 UI。在它下方,应用程序内容区域显示应用程序启动器或当前使用的主应用程序的内容。



△ Android auto手持设备与车载设计系统


Android auto 将 Android 平台扩展到汽车上,它有两种使用方法:在手机上或在兼容的车载屏幕上。


它有一个简单的界面,标准化的用户交互模型和强大的声音动作,其目的是帮助司机尽量减少分心。需要注意的是,为汽车设计交互式应用程序与手持式设备的设计有根本上的不同,其应用程序的交互界面应该简化,以确保司机的眼睛和手集中在开车上,减少司机分心。


△ Android auto车载系统UI框架


卡片上提供如消息字符串、图标、图形和操作等内容,会根据用户最近的使用情况和优先级来确定卡片的大小。主屏幕会限制卡片的数量,以保持列表的简短和相关。因此,当新的、更相关的内容出现时,应用程序的通知可能会从屏幕上消失。同时,抽屉式的交互方式,提供了简单的操作和导航。每个抽屉项目必须提供一个单一的触摸目标,避免在抽屉里放长的列表,或者在相同内容的视图之间切换。这里官方给出的最佳 UI 做法是简化内容,关注上下文,显示新鲜的、有用的和大多数不滚动的项目,使用单行,对决策至关重要的较长字符串使用两行。




5. 苹果 CarPlay



简介:


CarPlay 车载系统旨在令用户通过汽车制造商之原生车载系统来使用、操控iOS设备并发挥其功能。该产品的首个版本计划于2014年发布,最早出现在一些制造商的汽车展览上。


特点:


1、设计特点:


基于手机映射,所以界面除了横向布局外,icon都和手机端统一。以简洁的布局提供有用的、重点突出的信息,便于从驾驶员座椅上进行扫描。不要用不必要的细节和不必要的装饰来弄乱屏幕。


在整个应用程序中保持整体一致的外观。一般来说,具有相似功能的元素应该看起来相似。


2、功能特点:


作为车内辅助、操作、娱乐的中心,Carplay 可以直接连接到汽车中控的触摸屏上,提供基于 iOS 的相关的服务和应用。Carplay 的整体设计围绕着车内驾驶这一使用场景,而它的设计原则也围绕着这一场景来规划:

  • 成熟。基于最熟悉的 iOS 应用,来设计界面元素,并提供熟悉、直观的体验。

  • 简短。采用尽可能简短的交互,不过度引人瞩目

  • 相关。屏幕显示信息高度相关,提供尽可能少选项,不需要复杂决策

  • 语音。基于Siri,以语音交互为核心,司机无需视线离开前方,手也不用离开方向盘即可完成交互。


全新的电子车钥匙,加上 Apple CarPlay 车载流畅的使用体验,让 iPhone 能在旅途上发挥更多作用。地图、电话、信息、音乐、日历、一言、一触、一旋随你驾驭。






6、华为车机应用



简介:


HMS for Car是华为终端云服务打造的智慧车载云服务解决方案,基于HMS(Huawei Mobile Services),通过AI场景引擎结合华为生态资源,为用户提供精准丰富的出行场景内容和服务,助力汽车从交通工具向具有交互和服务的能力的智能终端进化。


华为快应用是一种基于行业标准开发的新型免安装应用,其标准由主流手机厂商组成的快应用联盟联合制定。开发者开发一次即可将应用分发到所有支持行业标准的手机运行。


HMS Core提供端、云开放能力,帮助开发者实现应用高效开发、快速增长、商业变现,使能开发者创新,为全球用户提供精品内容、服务及体验。

1、全球化分发。已上线超过170+国家和地区。

2、全终端接入。全面支持从小屏幕到大屏幕各种智能终端。

3、全场景支持。快应用直达链接和卡片嵌入全终端场景。


特点:


1、设计特点:


在交互界面上,Carplay和Carlife由于使用的投屏方式,主界面依然是一个个的APP图标,需要点击启动进入后才能使用。笔者认为采用这样移动端过于笨重的交互方式并不适用于车载场景;HUAWEI HiCar的设计理念是"安全便捷、自然舒适、智能贴心", 对车载端的人机交互要素重新布局规划设计,采用桌面卡片的设计方式,以满足复杂驾驶状态下的使用需求。



桌面卡片是应用内容和功能特性的重要载体,用户通过对卡片的快捷操作直达应用的核心功能,提升交互的便捷性。应用可通过接入 HUAWEI HiCar 桌面卡片的方式呈现最核心的功能和服务,并根据自身的需求特性,自行组合卡片元素以满足不同场景下的用户诉求。

  • 背板:背板样式可以为色彩填充或设置背景图。

    背景色支持黑、白、彩色三套。

    应用需提供三套背板以适配卡片主题切换。

  • 品宣区:品宣样式为图标+文字,应用可根据在此区域显示品牌图标和名称。

  • 内容区:展示与应用场景相关的信息,其内容可以是图片、文本或图文样式。

  • 操作区:操作区为文字或图片按键,最多 3 个控件或 1 个控件组。



2、功能特点:


华为智慧助手,可结合用户使用场景,以卡片形式推送提醒、服务和行程,实现智慧化服务找人。例如,送孩子上学时,车机端华为智慧助手将自动推送"有声续播"卡片,用户点击卡片,即可一键续播孩子在华为手机上没听完的有声儿童内容;用户在开车下班回家路上,进入离家500米范围内时,车机系统可自动启动"回家模式",提前打开家中的窗帘、空调等设备,方便用户享受惬意生活。



My Car功能面向车企开放华为手机等智能硬件系统级入口能力,能够实现远程控车、查车、汽车服务/告警关键信息等反向推送能力。远程控车功能,可以满足用户高频控车诉求,例如,远程开关空调、寻车、查看门窗状态等。另外,当车辆胎压不足、门窗未关闭时,用户也能通过手机、车机及时收到提醒。





三、系统的开源地址


1、阿里Alios开放平台

https://miniapp.alios.cn/index#/document


2、百度车载生态开放平台

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html


3、腾讯-车载小场景(私我领取PDF)


4、谷歌驾驶

https://developers.google.com/cars/design/design-foundations


5、苹果apple car play

iOS - CarPlay 车载


6、华为车机三方应用交互设计规范

https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014






蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷    作者:郝小七

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



UI&UE实用方法论 | 「美即好用效应」就是UI存在的价值吗?

鹤鹤

有研究表明,人们会自然地认为外表更漂亮的人拥有更加优秀的品质特质。即我们对一个人的外表印象会影响对他品质的感受和思考,心理学上将这种行为称为「光环效应」


同样有人认为,这样的光环效应作用于人机交互设计领域也一样是奏效的。好看的设计,会让用户认为产品更好用,外观会影响用户对产品可用性的感受,这就是所谓的「美即好用效应」



一、关于该定律的实验


前面我在谈「费茨定律」或是「恐惧留白」的时候,大多数方法论都可以溯源到真实的科学实验或心理学文献记录。


但在查找「美即好用效应」资料的时候,所有内容对初始实验都是一笔带过:


1995年,日立设计中心的研究员 Massaki Kurosu 和 Kaori Kashimura 通过26种不同的 ATM 交互界面对 252 位参与者进行详细的用户体验测试。结果发现,这些因素中很大一部分对真实可用性的影响微乎其微,反而界面美观度对真实可用性的影响出乎预料的大。


表现可用性的决定因素对真实可用性的影响系数大多在 0.000-0.310 之间,而界面美观度这个数据达到了 0.589。



我试着到很多地方去搜索更多关于该实验的记录,却都没有找到相关论文。所以对于这个实验的结果,我只能保持观望态度。(也可能是我检索资料的能力还有待提升...)


首先是我无法确定所有参与者在这个实验中的需求目标是否发生变化,概述中既没有阐明对照组,也没有告知实验对比过程的细节。


其次在「美观度对可用性的影响较大」的实验结论中,科研人员是如何定义「美观度」的标准的?审美是一种主观意识,那么「美观度」应该如何被定义,科研人员究竟是从配色、排版、统一性,还是动态和谐的交互流程定义了实验界面的「美观度」?我们也不得而知。


所以「美即好用效应」在人机交互领域的可用性,究竟是一条科学实验结论,还是属于用户心理研究,抑或只是人传人传出来的自然规律,作为笔者,我本着对我读者负责的前提下,也只能画个问号。


二、「美」在商业产品中的价值层级


在人们追求基本生理需求的时代,「美即好用效应」的作用力必然不会比温饱时代的大。


为什么这么说?从马斯洛需求层次理论模型中就可以看到,对于用户而言,“审美需求”是在保证了一系列缺失性基础需求之后,才会追求的需求层次。



马斯洛需求层次理论映射到用户体验五层理论也是异曲同工,从战略层到表现层,越是重要的层级挂靠的马斯洛需求层次就越基础。拥有巨大商业价值的产品,往往影响其在商业市场中走向的,都是基础需求,而非高层级需求。


这就为什么我前文说道,很多人抽离前提来谈「美」的重要性。用户对「美」的追求是在满足了基础需求的前提之下,如果一个产品的战略、范围层难以落地,空谈「美即好用效应」便是空中楼阁罢了。


表现层在没有可靠的战略前提之下,是毫无商业价值的个人狂欢。


三、UI到底该关注什么


UI是一项纯艺术性创作的职业吗?在我刚接触UI行业的时候,我是这么单纯地认为的,但现在已经不再是了。


我前一阵子看了像素范泡泡老师的直播,其观点我非常赞同,也在社群里和大家进行过了交流。在此我引用两个泡泡老师举到的 iOS UI 的案例,来阐述 UI 探索的「美」,究竟是在探索什么。


  1.iOS为什么激励大部分APP适配暗黑模式?  


大概在去年,网传苹果将强制要求 APP Store 中的应用程序要适配暗黑模式。暗黑模式也掀起了一轮新的视觉设计潮流,暗调的设计语言让产品在视觉上看上去更酷更年轻。


但苹果激励大部分应用程序适配暗黑模式,只是单纯的为了视觉上的好看吗?其实并不是。


是因为后期的苹果硬件设备多采用OLED屏幕技术,比起其他厂商的LCD屏幕技术,有其优点,但也有其缺点。OLED采用低频PWM调光模式,也就是通过低频频闪的方式控制屏幕亮度(一亮一暗、一亮一暗如此反复)。在调低屏幕白光亮度的情况下,频闪很容易造成用户视觉疲劳。这一点极可能成为苹果设备的销售弱点。


于是苹果希望在用户需要调低屏幕亮度的场景中,通过暗黑模式的视觉手法,大量运用黑色,这样OLED屏幕的光源就可以直接关闭,而不需要采用频闪的方式来控制屏幕亮度,从而减轻用户视觉疲劳的现象。



(ps.看不懂的朋友莫急,文末我放了B站up主硬件茶谈的《全网最简洁易懂的OLED与LCD屏幕工作原理与优劣科普》视频,感兴趣的小伙伴可以查看)


苹果主动落地暗黑模式的开发,并且激励在应用市场上架的其他应用也适配暗黑模式,实际上是与其商业目的挂钩的一种行为,只是将解决方案落实到了表现层。


  2.iOS从拟物风格向扁平风格的转换  


iOS7掀起的扁平设计风潮,至今还在影响着UI设计趋势以及用户的审美。但你硬要从个人审美角度去评判曾经的拟物风格与现在的扁平风格究竟哪个更好,只能说仁者见仁。


泡泡老师认为,iOS 拟物风格向扁平风格的转换,也不仅仅是基于视觉「美」的考虑。因为曾经的苹果在全球移动品牌厂商中,拥有更加优质的屏幕硬件,他们的屏幕可以高清显示更多的设计细节,于是仿真的拟物风格在苹果设备上通过其光影、阴影的展示,可以突出苹果的屏幕优势,从而成为其商业卖点。


但后来随着移动设备品牌商的硬件差距不断缩小,高清显示已不再成为苹果独家的亮点,苹果也就不需要再花费更多的设计成本在拟物设计上了。此时的拟物设计成本并不能再持续带来高效的商业回报,从而转向扁平风格,一方面可以提高设计效率、降低设计成本,同时对其周边设计的延展性更高。



从这两个案例中可以看到,UI虽然做的是表现层的工作,但实际上也是在为用户、为商业、为战略而服务。除了视觉的「美」,我们也应该关注产品背后的数据、商业价值,我想这就是UI与纯艺术性创作型设计岗位的区别吧。


四、总结


说了一堆,感觉我好像一个「美即好用效应」的ANTI份子...其实也不全是。我清楚「美即好用」在一些商业案例中的运用,我不否定该定律存在的价值,只是想表达一些看法。


首先我认为不应该在产品还没有扎根市场,拥有产品自身的商业价值之前,过分拘泥于视觉表现层的内容。在腥风血雨的互联网商业市场,迅速小跑迭代,做好用户数据分析,增强产品自身留存实力、激活市场潜在用户,比把目光放在视觉表现上可能更有价值。当产品在一个领域或市场积累了一定忠实度较高的用户之后,「美即好用效应」可能才会发挥其功效。


其次我想对话同行的UI设计师,我一年前在《UI如何提升个人价值?UGD思维了解一下》中已经说到过,UI设计不应只停留在视觉表现层,想提升自我价值,一定要培养超脱表现层的思维能力。


我们不应该一味地信奉「美即好用」。作为UI设计师,我们要通过避免「美但不好用」或「不美但好用」的极端来平衡视觉表现与功能的体验。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷  作者:UCD耍家

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


深度解析蚂蚁Ant Design的设计原则

鹤鹤



『 Ant Design是什么 』


众所周知蚂蚁集团的B端产品是一个庞大的系统,数量多且功能复杂,而且变动频繁,常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件,根据原子设计理论可以得到一些稳定且高复用性的内容。

随着这两年B端产品的逐渐白热化,越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标,蚂蚁集团体经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范,降低冗余的生产成本,让设计者专注于更好的用户体验。



『 Ant Design设计原则是什么 』


针对B端产品反复出现的一些设计体验等问题, Ant Design 给出标准的设计原则,实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面,既减少了不必要的认知成本,又能够提升设计的效率。考虑到需要适应各种定制化的业务场景,设计原则具有一定的灵活性,万变不离其宗,通过了解设计原则的构建逻辑,高效组织信息、帮助建立用户与界面的互动等原则性要求,可以衍生出更具场景特性的设计方案。


① Ant Design设计原则的由来

可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则,并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充,我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明,这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。


② Ant Design设计原则的适用范围

1. 我们先说说『Ant Design 』的适用范围:

稍微了解 Ant Design 的小伙伴都知道,本系统是针对B端后台系统,承载媒介是PC端的浏览器。使用的人员主要包括:用户体验设计师、交互设计师、UI设计师、前端程序员等。

2. 再说说 『 Ant Design 设计原则 』的适用范围:

顾名思义『 设计原则 』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则 』是 Ant Design 系统的一部分,但是前文已经提到,此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华,所以设计师可以把这些原则运用到任何的设计领域,并不要局限于企业后台系统的PC端产品。

为了方便大家理解,讲一个小故事。故事来自于《写给大家看的设计书》,作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后,发现其中有一颗叫约书亚树的树,造型奇特,自己从未见过。于是决定出门转转,然而发现外面到处都是这种树。故事到这里就完了。

可能大家会想,这个故事要讲一个什么道理呢?简单来说就是,当你手中有个锤子,满世界都是钉子。当你了解到下面要讲的十个设计原则后,你会发现它们处处都适用。


③ Ant Design设计原则的内容

十大原则如下:

  • 亲密原则(Proximity)

  • 对齐原则 (Alignment)

  • 对比原则 (Contrast)

  • 重复原则 (Repetition)

  • 直截了当 (Make it Direct)

  • 简化交互 (Keep it Lightweight)

  • 足不出户 (Stay on the Page)

  • 提供邀请 (Provide Invitation)

  • 即时反应 (React Immediately)

  • 巧用过渡 (Use Transition)



『 如何运用Ant Design的设计原则 』


对于一个初级设计师而言,想要了解UI用户体验等知识,学习 Ant Design 的设计原则算是比较快能上道的,因为 Ant Design 是吸取了很多前辈的精华,提炼而成的系统。打个简单的比喻,对于设计师而言 Ant Design 就是设计师学习『 视觉规范 』,掌握『 设计原则 』最好的字典。

接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。

Ant Design 定义了10条设计原则,根据『 席克定律 』选项太多不易记忆,于是我找到了这些设计原则的共通性,将其归为4类,也就是大家只需记住四类设计原则,在工作中适当延展即可。


① 视觉层级清晰

包含 Ant Design 的设计原则有:『 亲密原则 』『 对齐原则 』『 重复原则 』『 对比原则 』。

「视觉层级清晰」的重要性体现在 交互前 用户看到的内容结构是清晰明确的 。一个层级混乱的界面,任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。


1. 亲密

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。


1.1 纵向间距关系

  • 纵向间距:在 Ant Design 中,通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为:8px(小号间距)、16px(中号间距)、24px(大号间距)。


  • 增加元素:通过增加「分割线」来拉开层次。在这三种规格不适用的情况下,可以通过加减「基础间距」的倍数,或者增加元素来拉开信息层次。注:在 Ant Design 中,y = 8 + 8 * n。其中,n >= 0,y 是纵向间距,8 是「基础间距」。


1.2 横向间距关系

  • 组合排布:为了适用不同尺寸的屏幕,在横向采用栅格布局来排布组件,从而保证布局的灵活性。(注:栅格是另外一个模块的内容,这里不赘述。)


  • 复选框内:在一个组件内部,元素的横向间距也应该有所不同。


2. 对齐

正如「格式塔学派」中的连续律(Law of Continuity)所描述的,人类的视觉系统往往倾向于将看到对象的直线继续成为直线,曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

格式塔学派(德语:Gestalttheorie):是心理学重要流派之一,兴起于 20 世纪初的德国,又称为完形心理学;主张人脑的运作原理是整体的,「整体不同于其部件的总和」。——摘自「维基百科」


2.1 文案类对齐

如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点。


  • 推荐使用:标题和正文左对齐,使用了一个视觉起点。

  • 不推荐使用:标题和正文使用了两个视觉起点,不推荐该种对齐方式,除非刻意强调两者区别。


2.2 表单类对齐

  • 冒号对齐:冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。


2.3 数字类对齐

为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。


3. 对比

对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

注:要实现有效的对比,对比就必须强烈,切不可畏畏缩缩。


3.1 主次关系对比

为了让用户能在操作上(类似表单、弹出框等场景)快速做出判断, 来突出其中一项相对更重要或者更高频的操作。

注意:突出的方法,不局限于强化重点项,也可以是弱化其他项。


  • 需要区分主次场景:


  • 不需要区分主次的场景:「通过」和「驳回」都使用次按钮,系统保持中立。在一些需要用户慎重决策的场景中,系统应该保持中立,不能替用户或者诱导用户做出判断。


3.2 总分关系对比

  • 总分关系:通过调整排版、字体、大小等方式来突出层次感,区分总分关系,使得页面更具张力和节奏感。


3.3 状态关系对比

常见类型有「静态对比」、「动态对比」。


  • 静态对比示例:用不同颜色的点,来表明不同状态。


  • 动态对比:鼠标悬停时,该项和其他项呈现出明显不同的视觉效果,响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比,以便用户更好的区分信息。


4.重复

相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。


4.1 重复元素

重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。


  • 线框重复:


  • 设计要素重复:


  • 文案格式重复:


② 交互操作高效

包含 Ant Design 的设计原则有:『 直截了当 』『 足不出户 』『 简化交互 』『 即时反应 』。

「交互操作高效」的重要性体现在 交互时 用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题,却忽略用户能否理解流程如何操作,那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短,而是用户的心理时间是否太长的问题,就像我们打游戏往往会觉得时间过的很快,但是在等待页面加载时却不耐烦。


1. 减少打断

能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。

变化盲视(Change Blindness):指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物,眼球运动、地点的变化,或者是缺乏注意力等。——摘自《维基百科》

心流(Flow):也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》


  • 气泡提示:对于操作的反馈是必要的,下文会提到,但是为了减少打断用户,轻量级的反馈气泡提示即可。


  • 输入覆盖层:鼠标「点击」图标触发;鼠标「点击」悬浮层以外的其他区块后,直接保存输入结果并退出。不用弹窗或跳转的形式编辑,只需要在触发图标附近弹出浮层即可,这样避免用户视动线的混乱,减少打断用户操作的心流。

2.缩短步骤

正如 Alan Cooper 所言:「需要在哪里输出,就要允许在哪里输入」。这就是直接操作的原理。eg:不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。


常规的编辑模式,界面都会跳出一个弹窗或者是一个页面跳转,无形之中用户走了更多的流程路径,如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『 足不出户 』的设计原则。

  • 文字链/图标编辑:

状态一:在可编辑行附近出现文字链/图标;

状态二:鼠标点击「编辑」后,出现「输入框」、「确定」、「取消」表单元素,同时光标定位在「输入框」中。


  • 多字段行内编辑:编辑模式在不破坏整体性的前提下,可扩大空间,以便放下「输入框」等表单元素;其中,在 Table 中进行编辑模式切换时,需要保证每列的不跳动。


  • 拖放图片/文件:在早前很多产品在上传功能上,都是跳出弹窗再选择文件上传,现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。


  • 模糊搜索:系统根据用户所查询的关键词,智能匹配可能的结果。


  • 定时自动更新:新增的列表项「高亮」,持续几秒后恢复正常。不需要用户手动刷新,减少不冗余的操作。


3.避免回忆

人们在思考的时候,是需要依靠大脑神经元之间相互传递信号,而回忆是需要调用更多的的神经元传递信号,简单地说就是非常费脑子。


  • 搜索历史:搜索历史的功能,可以减少用户的回忆,使得整个体验更加轻松愉悦。


4.信息降噪

根据费茨法则(Fitts's Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互,起到信息降噪的作用。

费茨法则 :到达目标的时间是到达目标的距离与目标大小的函数,具体:。其中:1.设备当前位置和目标位置的距离(D);2.目标的大小(W)。距离越长,所用时间越长;目标越大,所用时间越短。


  • 列表嵌入层:将列表为多层级时,隐藏弱层级列表内容,可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容,鼠标悬浮即可展开。


  • 标签页:标签也换可以将信息内容进行分类,让用户更易理解。


  • 渐进式展现:用户在填写表单时,会根据当前录入的数据,展现下一项需要填写的内容,这样的展现方式可以屏蔽掉无关紧要的内容。


  • 悬停即现工具:鼠标悬停时,出现操作项。这样将不重要信息或者操作隐藏起来,不会干扰到用户浏览其他重要内容。


③ 系统反馈即时


包含 Ant Design 的设计原则有:『 简化交互 』『 巧用过渡 』『 即时反应 』。

「系统反馈及时」的重要性体现在 交互之后 立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。


1.实时反馈

虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。

牛顿第三定律 :当两个物体互相作用时,彼此施加于对方的力,其大小相等、方向相反。——摘自《维基百科》


  • 实时预览:根据用户的输入,提供关于密码强度和有效性的实时反馈提示。


  • 文字链热区:当悬浮在 ID 所在的文字链单元格时,鼠标「指针」随即变为「手型」,单击即可跳转。


2.过渡反馈

人脑灰质(Gray Matter)会对动态的事物(eg:移动、形变、色变等)保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。

Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。

Receding:  与当前页无关的信息元素应采用适当方式移除。

Normal: 指那些从转场开始到结束都没有发生变化的信息元素。


  • 表格加载:网络不好或者表格数据过多,都有可能导致加载缓慢,这时有一个小动画可以缓解用户的焦虑感。


  • 富列表加载:用户在打开列表时,页面无法做到一次性加载所有的数据,同时有为了减少翻页的繁琐操作,就有了下拉自动加载的。


  • 页面加载:当用户访问的页面体量过大时,系统会通过给出倒计时或完成百分比,来缓解用户焦虑,并且给用户友好可控的感觉。


  • 滑入与滑出:可以有效构建虚拟空间。  


  • 折叠窗口:在视图切换时,有助于保持上下文,同时也能拓展虚拟空间。


  • 对象增加:在列表/表格中,新增了一个对象。


  • 对象删除:在列表/表格中,删除了一个对象。


  • 对象更改:在列表/表格中,更改了一个对象。

    • 状态一:用户更改了「详情」中的值;

    • 状态二:用户点击「保存」后,详情所在的网格出现「黄底」,表明该对象发生了更改;

    • 状态三:底色持续几秒后,恢复正常。


  • 对象呼出:点击页面中元素,呼出一个新对象。


3.结果反馈

用户常常会疑惑自己的操作是否成功了,哪怕是失败了也是需要系统反馈,这样才能安心进行下一步的操作。


  • 页面反馈结果:


  • 气泡反馈结果:


④ 用户自由可控


包含 Ant Design 的设计原则有:『 提供邀请 』『 足不出户 』『 即时反应 』。

「用户自由可控」的重要性体现在 交互前对下一步操作的预判;交互时 不论操作后的结果多严重都要允许用户自主决策;以及交互后 能否对自己的操作结果反悔。


1.未来预判

很多富交互模式(eg:「拖放」、「行内编辑」、「上下文工具」)都有一个共同问题,就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示,以表明在下一个界面可以做什么。  这样人机交互的过程往往更加自然、顺畅。



  • 点击刷新:对于设计师而言,最常见的例子要属花瓣了,我们时长会沉浸在我们浏览的瀑布流卡片中,如果系统强行刷新当前页面,用户很有可能迷失。邀请用户主动更新,既不会错过新的消息,又不会导致我们的心流被打断。


  • 未完成邀请:用户在当前页面无法完成登录操作,为了减少用户迷茫的焦虑感,系统告知用户点击“更改”链接,可以去向何处。


  • 悬停邀请:鼠标「悬停」时,出现「选择此模板」的按钮。


2.自主决策

虽然系统中缺少不了一些危险操作或者不可逆操作(eg:删除、重置、重装系统等),但是仍然要用户自主决定是否继续,我们能做的就是让用户再三确认。


  • 弹窗提示:虽然弹窗打断用户心流,但是对于重要的操作,这样是最保险的方式。


  • 删除知识库提示:是钉钉中,删除「知识库」这一重要内容,是不可逆的,系统需要用户谨慎操作。


3.准许反悔

如果说「自主决策」中提到的案例都是不可逆的,那「准许反悔」的后果严重性会弱一些,系统对用户的操作没有那么强的阻断性,所以要准许用户反悔的,


  • 删除撤销:用户点击「删除」后,直接操作;出现 Message 告知用户操作成功,并提供用户「撤销」的按钮;用户进行下一个操作或者 1 分钟内不进行任何操作, Message 消失,用户无法再「撤销」。



『 Ant Design的优点与缺点 』


① 优点


1.助初创团队快速产品快速上线

Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功,但是能帮助业务产品『正确的成功』或者『正确的失败』。”

如果团队有一个产品idea,我们需要通过最少的资源开发此产品并投入到市场中,通过听取用户反馈,验证idea是否可行,快速迭代最终做出更完善的产品。但理想是美好的,但现实是骨感的,在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间,前几个版本的产品通常用户体验非常差,这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式,需要磨合,设计和开发进度一延再延,结果错过了风口,市场被竞品抢占,还没上线就倒闭了。

Ant Design提供了一套完整的界面实现方案,即有代码框架能直接拿来提高开发效率,每个界面组件都经过蚂蚁金服多个项目的考验,具备优秀的用户体验。用Ant Design来做0-1,能快速发布用户体验优秀的产品,听取用户反馈,快速迭代。


当然,创业是九死一生,市场和用户口味都充满了不确定性,谁也没有能力保证产品是否成功,但是只要你能高效的产出质量优秀的产品,不断试错,说不定以后就能成功。


2.减少设计和开发的不确定性。

用 Ant Design 就能高效的产出高质量的产品,减少设计和开发的不确定性。

因为我们公司就使用了 Ant Design 的系统,所以时常会与前端小伙伴沟通,以下都是他们在使用过程的感想。

Ant Design 提供的大量功能比较全面且UI风格统一的组件,能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景,驱动了 Ant Design 团队通过对使用情况的观察汇总,整理出来了这么一个组件库。他们的经验积累如此之丰富,足以让这个库支持大部分其他前端开发者的需要。

其设计团队给出的设计规范相当详细且经得起推敲,令许多其他团队获益匪浅。


3.节省设计与开发的人力成本

我见过太多宣称自己在乎用户体验的公司,给用户的产品质量确实比较高,但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班,情绪消极,这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了,因为创新需要员工有充沛的精力和主动性,天天加班谁还有这精神。

用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担,能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福,他们重新恢复活力和激情能做出更有创意和竞争力的产品,给公司带来更大的收益,这是一个三赢的结局。


② 缺点


1.无法根据业务场景定制组件,灵活度不够

一定有小伙伴会有这样的疑问,目前市面上有这么多的第三方设计规范,例如 Ant Design ,Element UI,有必要自己造轮子做一遍吗?

这里要视情况而定,如果公司产品是初创期,而且研发人手不足,那确实没有必要自己造轮子。反之在资源足够的情况下,是有必要设计团队重新做一套属于自己产品的规范组件库的,因为B端自身的业务性决定了市场上没有万能的设计规范,那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范,在此基础上进行修改,效率很低,适配的复杂度和重新开发相差无几。


2.组件细节深入度不够,只能“将就”使用

对于比较普通的设计解决方案是可以的,但是 Ant Design 包含的组件细节仍有不足,毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上,规范定义的越是精细,对于产品组件而言可延展性就越差,限制也会越多。而 Ant Design 只需要解决80%企业,80%的通用问题即可。


3.竞品同质化严重,视觉上无法脱颖而出

当市场大部分产品都在使用 Ant Design 设计系统时,产品的同质化就会很严重。为了避免这种情况发生,我们就有必要从设计语言、设计原则、设计组件三个部分开始,设计自己的规范。那些大厂的成熟的组件库该如何用呢?我认为应该把它当成一个字典,有不会的地方,可以去参考人家的成熟的解决方案。



『 总结 』


这篇文章简单的介绍了一下 Ant Design 是什么、 Ant Design 的设计原则是什么以及 Ant Design 的优缺点。当然也重点总结了一下,设计师如何运用 Ant Design 的设计原则,可以将这些原则分为四类:视觉层级清晰、交互操作高效、系统反馈及时、用户自由可控。希望大家通过这篇文章能够更深一步了解 Ant Design 的设计原则,并将其灵活运用到设计工作中。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:人人都是产品经理    作者:菜菜不甜

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


社区管理之痛,将成为谁的智慧切口?

涛涛

编辑导读:随着城市化进程加快,城市的体量在不断增长,随之而来的社区形态和管理也在日趋复杂。智慧社区能否解决社区管理之痛呢?本文作者对此进行了分析,与你分享。


社区是城市在小区域范围内的一个缩影。因为两者之间的体系结构和发展模式存在一定程度的相似和关联,所以在智慧城市的建设路径上,以智慧社区为切口,做好小区域范围的智慧管理成为当下市场和社会的一个风口,也是治理切口。

在中国,随着城市化进程加快,城市的体量在不断增长,随之而来的社区形态和管理也在日趋复杂。对此,暨南大学教授、华南城市研究会会长胡刚认为,建设智慧社区是作为当下社区建设的重要内容,至少应该包含三方面内容:

一是智慧信息,包括社区信息、住户信息等基本数据的采集;

二是智慧服务,比如在此次疫情下,部分社区实行封闭管理,居民可以在网上买菜,然后有人帮他们送到门口这样的服务就很重要。还包括社区的选举,平时大家都上班,不容易聚集在一起,这时候就需要有这样的网络选举投票服务;

三是虚拟社区,居民可以在虚拟社区聊天、共享资源、处理事务等。

由此可见,智慧社区的建设重点主要有三方面,信息感知、服务延伸以及虚拟社区。在腾讯、华为、旷视、海康威视等服务厂商的解决方案里,都能看到类似的思路和落脚点。但是如果说真正做好这三点内容的社区平台,或许还属微信。

为什么要这么说呢?

在这里需要理清一点,对于智慧社区建设,大部分人认为应该是房地产商、科技公司或者安防厂商的事情,但是实际上并不是,社区群众也在参与其中的建设,以微信为支点的数字化社区正在加速形成。

一、智慧社区的“群众路线”

值得一提的,以微信为支点推动数字化社区的成功构建并不能归功于腾讯,而是社区群众。

这是一个自发的、自上而下的、无意识的社会行为,微信只是一个“被民众借用”的工具或者说平台。

微信作为移动互联网时代国内最大的社交软件和聚合平台,很多服务和模式实际上已经逐步跳脱出了它原本的范畴,通过用户自发形成的社群成为了很多新概念的实践场所。就以智慧社区来说,或许很多厂商还没想明白要如何切入庞大的人群体系,实际上社区群众已经在微信群上做到了胡教授所提及的三大内容:

首先是信息感知。尽管这样面向小区住户的信息采集不全面、不系统,但是通过微信群,大部分社区确实在人员信息收集、人员联络和信息传达方面实现了很多跨越。过去需要挨家挨户上门、打电话通知的内容,在短期内都能实现双向传递和感知。

广西某小区物业人员张春花(化名)告诉“智能相对论”,“从疫情爆发到现在组织打疫苗,微信群都帮了我们很多的忙,解决了大部分的联络组织工作。只要把通知、链接发到群里,艾特大伙,基本都能通知到,实在是没有反馈的再通过电话或上门的形式传达一下就行。包括现在谁没打疫苗、第一针、第二针,只要在群里吆喝一下,都能快速的组织起来……”

其次是智慧服务。实际上,对于张春花所在小区的业主来说,智慧服务是什么,他们还搞不清,但是比起以前,现在通过微信群的方式,很多服务确实方便了许多。陈先生(业主)提到,“当时疫情那会儿,物业就是在微信群上来帮各家各户统计买菜信息、送菜什么的,很方便。现在有什么社区投票、活动举办的事情,我们基本都是在微信上来参与和讨论。”

最后是虚拟社区。这对于微信群来说,基本没有什么异议。本来作为一个社交平台,微信给用户带来的就是一个虚拟社区的概念。现在各家各户有什么事情需要帮忙、或是信息需要分享的话,基本上都会通过业主群来进行发布和传达,平常没事也会聚在一起聊聊天、发发红包活络一下。

张春花表示:“小区的老人们经常在群里讨论跳舞、下棋什么的,要是遇到下雨天,也都会在群里唠唠嗑,念叨念叨,看着他们这样互动,有种回到以前住在村里的感觉……。”微信群对于他们来说,俨然成了另一个线上的社区。

可以说,微信群的存在很好的将社区的人连接了起来,为智慧社区的构建提供了一个基本的雏形。这种基于群众力量自发形成的新社群,是现在很多小区管理推进的常态。

二、社群虽好,槽点满满

很显然,作为一个自下而上的自发行为,社群的形成在一定程度上解决了很多社区管理的问题,但也存在诸多槽点,限制了这种模式的进一步发展。

1. 社群不系统、不全面,缺乏必要的顶层设计。

自发形成的社群本质就是片面的,它无法构成一个系统、全面的体系,很难在智慧社区的建设上发挥统领全局的作用。以具体反馈来看,虽然业主群可以覆盖大部分的住户,但是并不是全部,仍旧存在“漏网之鱼”,而且在信息管理上,社区也将处于一个非常被动的局面,住户可以选择提供信息,也可以选择不提供信息,很难规范住户的信息条例。

这也意味着,未来的智慧社区建设在信息感知上需要化被动为主动,借助更加有效的设备或模式来提高信息感知能力。正是看到了这种进阶的需求,所以科技厂商和硬件厂商此前在做智慧社区的时候,大多会从顶层切入,从全局出发来进行社区改造。

比如旷视科技目前提出的以人脸为ID的AI方案就是这样——用户经过小区门禁刷脸进入小区,系统可以自动识别并做好人员管理,使得进出小区的人员数据都能得到全面感知。基于人员数据的高度识别,智慧社区在人员管理方案,智能停车、智能物业,智能地产、安防、零售等方面都能获取相应的数据支持,从整体上把控社区的管理工作。

2. 社群做好了“人”的连接工作,但是没能做好“物”的数字化升级。

社群的另一个本质是人的聚集,对于业主群来说,它只是做好了人群的沟通、连接工作,但是在整个社区范围内,仅是做好人的工作,还不足以构建一个高效、便捷的智慧社区,仍需要在“物”的基础上实现数字化升级,比如监控、快递、消防、电梯等等场景。

“人”与“物”构成智慧社区建设的两条路径,对比来看,海康威视等硬件厂商更倾向于后者的升级——通过智能硬件,比如监控摄像头、门禁设备、对讲设备等的支撑,海康威视能在多个社区场景里进行数字化升级,来实现社区智慧化的表现。

比如,有了智能摄像头,社区的管理系统可以对小区的可疑人员进行预警、对电梯内进入电瓶车等危险行为予以提示、对高空抛物等违法行为提供24小时监管,等等。物理设备的数字化升级对于智慧社区的搭建尤为关键,可以说等同于社区智慧化的基础,这是微信群无法实现的。

3. 去中心化的社群无法接轨智慧城市建设。

社群是一个去中心化的概念,它由业主自发的创建,也可能会因为各种人为原因崩塌,比如广告过多、管理不善、业主矛盾等等。这种不稳定的模式很难进一步拓展应用,只能作为一个辅助性的管理。

特别是对于智慧社区的构建而言,未来的城市智慧化需要建立在一个又一个的智慧社区之上,因此要考虑到智慧社区与智慧城市的协同发展就必须要有一个稳定的系统予以支持。对此,我们可以看到中国电信在打造智慧社区的过程中,积极推动社区系统接轨电力、水力、燃气、养老等政务服务系统,使得小区人员可以足不出户的享受到购电、购气、通信缴费等服务,也确保了社区数据连接城市系统,实现双向互利。

那么,对于智慧社区的建设而言,社群存在诸多缺陷,很难进一步推动我国数字化建设,需要更多服务厂商从大局出发,做好顶层设计来构建一个全面、高效的智慧社区。

三、智慧社区的未来:人与物的双重数字化

尽管如此,但是对于智慧社区的构建来说,并不是一个极端地行为,它不需要推到一个模式,再树立另一个模式。反之,不同的路径在当前复杂的建设进程上都应该被重视,在融合中发挥更加显著的价值。

简单来说,群众的社群路线和厂商的技术路线不冲突。在当前的现实情况下,社区的管理和人员联络需要微信支持,这是毋容置疑的。前者是“人”的数字化,后者是“物”的数字化,如何把这两方面结合起来发挥双重价值,才是智慧社区的未来所在。

因此,“智能相对论”认为,在智慧社区的构建上,腾讯是具有显著优势的。在滨海泰达智慧社区的建设上,腾讯就展现了这一优势——通过投入老人关爱门磁,依托物联网技术,利用实时感应传输功能打通网格化平台,泰达街道能做到对独居老年人等特殊人群居家情况的动态掌握,一旦出现异常情况,社区网格员便可通过微信接收到实时异常告警,精准服务相关人群。

简单来说,腾讯手握微信,在“人”的数字化上具有明显的优势,其未来只需要做好“物”的数字化,就能进一步推动智慧社区的构建。但这并不意味着腾讯会比其他厂商少做一个层面的事情,相反的,如何继续拓展微信的社群优势需要腾讯做更进一步的构思和验证。社群对于智慧社区建设的想象力还没有触碰到天花板。

在湖北宜昌,企业微信正在实现治理规范化,成为当地网格化管理向互联网拓展的新载体,也成为了社区居民互助、交流、自治的微载体。

具体来看,社区网格员通过企业微信建立统一的社群,网格员形象统一,有官方认证的身份,形成“中心化”管理的雏形。同时,基于企业微信和微信互通的能力,社区普通居民使用微信即可与网格员联系,也可在群中反映噪音、污染、故障等各种问题。而除了在群内沟通,网格员进行跟进调解外,还可以把相应的问题通过企业微信工作台提交工单,转给横向的相关部门,如城管、环保、公安等部门处理。

简单来说,在企业微信的支持,社群有了官方人员的介入逐步形成了一个更加系统和有效的社区管理与治理同步的体系。这对于腾讯而言,就是在“人”的数字化上发挥出了真正的信息优势。

对于其他厂商而言,这并非是不可超越的。中国电信的短信通知同样可行,只是相比微信缺乏了一点社群交互的基础,但在连接人的功能上并不输给微信。因此,对于一众服务厂商来说,若能准确地认识到“人”与“物”的双重数字化需求,也就能快速地把握智慧社区的建设思路,来打造出一个全面智慧化的社区。

四、结语

如今,新小区的搭建、“老旧改”的推行,智慧社区依旧是一个没有边界的蓝海市场,据数据显示,2020年中国智慧社区产业规模达到5000亿,近3-5年仍将以至少40%的比例增长。而市场上,更多的厂商仍在专注于“物”的智慧化和数字化,对于连接人的工作似乎都丢给了微信,但伴随着智慧社区的需求愈发增长,或许其他的厂商也会逐渐把目光转向社群的搭建和经营之上。

 

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:人人都是产品经理   作者:智能相对论

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

设计体系的响应式设计

鹤鹤

本篇文章横向调研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企业级产品设计体系的响应式设计部分,从设计策略、设计模式、实施模式、设计方案四个层面大致归纳了一些信息,旨在对响应式设计有一个笼统的了解。

关于 Adaptive Design 与 Responsive Design先厘清两个概念,关于响应式设计通常会有两个普遍认识,即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 与 Responsive Web Design (RWD) 概念,它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸,而 RWD 是同一套代码做弹性的适应,本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题,本篇所指的「响应式设计」 概念包含了两者,不做明显区分,关于 Adaptive 与 Responsive 设计怎么界定以及具体的规则本篇也不进行展开。


移动优先设计策略

提响应式设计不得不提「移动优先」设计策略,移动优先的概念最早是 Google 在 2010 年世界移动大会上提出来的一种产品策略,基于 Google 对未来趋势中移动设备将会逐渐拥有核心地位的判断。后来「移动优先」更多被提及是作为一种在响应式设计中应用的设计策略,它认为在响应式设计中优先为屏幕限制更大的移动设备设计,再扩展到大屏幕的 PC 端是一种更有效的设计方法。

例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法,Fiori 尤其指出「移动优先」专注核心功能,专注增强而非降级,提前考虑移动端更多的独特特性以及异常情况,能提供更好的体验。Material Design 可能算是移动优先的最佳实践,它本身就诞生于 Android 平台,而后再通过大量响应式规则扩展到桌面及 Web 端,使得 Material 在多端都拥有一致贯穿的良好体验。

(Material Design 的响应式设计)


「移动优先」本质上是基于一种「增强」的设计思想,一个产品如果要同时适应于不同的设备,一直以来有两种策略:优雅降级 vs. 渐进增强,后者认为先从最小和最受限制的低级设备(移动设备)入手,再为更高级的设备(桌面设备)增强信息和交互,这意味着在更多限制下,迫使设计考虑如何减少、汇总,分组信息,有利于聚焦核心信息以及为更多限制考虑。

然而移动设备已不再是「低级设备」,Fiori 尽管强调「专注增强而非降级」,但它同时提出的「提前考虑移动端更多的独特特性」却与渐进增强的设计思想相悖,让「移动优先」沦为了某种形式化的概念而难以执行。

例如下面这个报告界面的场景里,移动端仅展示汇总的报告图表信息,但汇总图表并没有「扩展」到 Tablet 里而是用明细数据替换图表,而在桌面端同时包含了明细数据与图表两部分信息,这看上去并不像是一个「增强」的设计思路,更像是在全量需求下基于设备限制所采用的「降级」策略。

(Fiori 报告界面的 Adaptive Design)


因此「移动优先」并不一定是形式上优先设计移动端,它被广泛接受和应用的是背后的渐进增强的核心思想。我认为在移动设备高度发展的当下,「移动优先」不再适合作为单独概念提出来,而渐进增强的设计思想应该体现在更细分的场景中,例如在布局、信息排版以及交互反馈中,我们应该优先考虑限制更大的移动端;在一些交互方式上,优先考虑限制更大的鼠标操作。甚至在复杂业务场景里,优先满足核心业务流程顺畅也属于渐进增强的策略范畴。


设计模式

这里讲的设计模式是指设计师在具体业务中针对不同的情况可以采用的通用性设计方案,这些设计模式除了单独应用外,有时候也可以多种模式结合应用。Fluent 归纳了 6 种对应不同情况的响应式设计模式,非常全面地涵盖了其它设计体系中的绝大部分方案,分别是:调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建。

Resize – 调整大小

调整大小是最基础的设计模式,是一个容器默认的响应式模式,通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式,即便在无响应式设计的体系里,容器跟随屏幕尺寸而变化也是一个常见的应用方式。

(Resize) 


Reposition – 重新定位

改变 UI 元素的相对位置,以充分利用不同尺寸的空间。重新定位在响应式应用里多见在框架上,或是在组件里对一些特定元素的处理,例如 Material 的全局浮动按钮与浮动的下拉菜单以 Reposition 的形式分别在桌面端与移动端处于不同的位置。


(Reposition)


Reflow – 重新排列

改变 UI 元素的排列方式,这在内容弹性布局里较常见,通常是基于某种排列规则自动向下折行,并结合调整大小与栅格系统应用在响应式布局方面,例如 Carbon 的 Fluid Grid。



(Reflow)

Show / Hide – 显示 / 隐藏

基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素,例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。Material 在组件响应式行为里提到的 Expand 也属于 Show / Hide 的延伸。



(Show / Hide)

Replace – 替换

针对不同尺寸的屏幕采用不同形态的组件,通常应用在对具体的组件做针对性响应式设计中,但需要注意用户面对变化时的认知成本。



(Replace)

Re-architect – 重新构建

折叠或拆分信息架构,这种模式在 Web 端较难实现,通常出现在一些 Native App 的场景。



(Re-architect)

Density – 内容密度

除了上述 6 种模式以外,我把内容密度也归纳为一种设计模式,Fiori、Material Design、 以及 Atlassian 都提出了内容密度的概念。Fiori 基于移动优先在移动端采用默认密度,而针对大屏幕的 Web 端则提供紧凑密度的方案,他们认为移动端手指交互所需的空间要求更高;Material 则是针对很多组件都定制了 Default、Comfortable、Compact 三种密度的视觉表现。通过被动响应式或主动控制内容密度很好的解决了不同尺寸屏幕的信息获取效率问题。

(Material Design 的内容密度示例)


值得一提的是 Atlassian 通过栅格系统的间距来控制密度而非对内容密度本身进行设计,越紧凑的布局栅格间距越小,这看上去很合理,却很容易造成内容密度增加的同时整体信息获取效率反而降低的问题。Material 也有关于栅格空间的定义,但在内容密度的处理上和 Atlassian 恰恰相反,它认为高密度内容适用更宽松的栅格空间,相对是一个更合理的设计。在信息密度的问题上,我们的核心目的其实是提升信息效率而非单纯提高视觉密度,因此解法上需要更完善的考虑。

(Atlassian 与 Material 的栅格密度对比)


实施模式

实施模式是指设计体系为实现具体设计方案而定义的一系列基础规则、解决方案或技术手段,经过整理总结为相对尺寸单位、屏幕断点、弹性布局、栅格系统 4 个方面。

Rem – 相对尺寸单位

几乎所有应用于 Web 的设计体系的技术方案中都采用 rem 相对单位,Material、Fiori、Carbon 和 Lightning 均沿用了浏览器默认的 root 尺寸,即 1rem = 16px,Alta 默认采用是 14px 的规格,并允许基于不同应用选择 12px 或 16px 的规格,默认情况 Alta 采用更小规格的单位会在小屏幕电脑上有更好的表现,这也许和他们的产品特性相关。

相对尺寸单位是非常具有实施价值的,它使产品能在保持信息节奏的情况下根据不同的情况等比例缩放内容,这使得设计能更方便地调整内容密度,或许还可以配合 Media Queries 解决部分跨端的尺寸适配问题,且几乎没有前端成本。

国内的前端业界包括我们自己的前端同学更多将 Rem 运用在移动端,主要为了两个目的:方便计算尺寸、在不同宽度的设备上等比缩放内容,这样的用法是出于前端工程师解决屏幕兼容性的一种技术手段,在使用上本身也存在一定争议,而在响应式设计领域我们还没有发挥出 Rem 应该发挥的作用,甚至很多设计师还并不了解相对尺寸单位的使用方法,广泛应用 Rem 能为我们带来哪些实际价值是接下来需要继续研究的。

Breakpoints – 屏幕断点

屏幕断点是响应式设计的基础依据,它决定了我们要适配到什么样的设备或屏幕规格,并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。一般情况 Breakpoints 都是基于 Phone、Tablet、Desktop 的维度来设计的,包括考虑了移动设备的横评竖屏情况,关于详细的规格设置其实并没有太大参考价值,设计体系都是根据自身定位以及设备覆盖的情况来制订的,例如 Material 的断点在低分辨率范围分得非常细,是因为 Material 主要服务的 Android 平台有着数量繁多的设备分辨率。在满足自己需求的前提下,屏幕端点不需要太多,无论怎样基于数据驱动的屏幕断点设置将会是一个更科学的方法。


(屏幕断点分布) 

Fiori 的断点设计比较有意思,在设计文档中仅有基本的布局规则,没有明确的 Breakpoints 规则,Fiori 对于不同的组件会设计不同的 Breakpoints,例如在 Table 这个组件中定义了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的规格,而在 Form 的组件中,Breakpoints 变成了 0 < 600 < 1024 < 1440 < ∞,从这点上看出 Fiori 认为不同的组件有不同的表达模式,因此应该针对性对组件进行优化。

(Fiori 的 Table 组件适配情况)

(Fiori 的 Form 组件适配情况)


Flex Layout – 弹性布局

Flex 布局是 CSS3 提供的强大布局能力,从更自然更具语义化的角度实现界面元素的自适应。应用于 Web 的设计体系基本上都在组件代码里广泛采用了 Flex 布局,Lightning 还将栅格与 Flex 布局结合定义了自己更完善的布局方法。在响应式设计中,Flex 布局通常结合 Breakpoints 使用,在两个 Breakpoints 之间让界面做更平滑的过度。除此之外其它平台也都有类似的弹性布局能力,例如 Fluent 在 windows 采用 XAML 构建布局系统。

无论是 Flex 还是最近兴起的 Grid 布局都是 CSS3 的基本布局能力,响应式设计要解决布局的问题将会深度依赖这些基础技术手段,本篇不进一步展开。

Grid System – 栅格系统

栅格系统是所有设计体系必备的,我们通常将页面横向分为 N 列,定义每一列的尺寸与间距,这为界面布局提供了一致性和成本便利。传统的栅格系统在响应式方面的应用主要是结合 Breakpoints 与一些 Responsive Token 来实现的,通过给 UI 元素指定不同的栅格数来决定他们分别在不同屏幕下占多少列,同时一些设计体系还提供了可见性相关的 token,来控制界面元素在不同屏幕的显示与隐藏。

Fluent、Fiori、Lightning、Material 以及大多数设计体系都采用了 12 栅格系统,因为 12 的因数够多,能满足足够多的布局细分同时又不至于太复杂,Carbon 的做法更加 geek 一些,他们的「2x grid」采用了 16 栅格系统,布局粒度更细但放弃了 3,6 这样的因数。 Ant Design 为了满足复杂的业务情况,采用了 24 栅格系统,24 栅格提供了更高的灵活性的同时,也大大增加了复杂度,面临栅格系统的响应式设计 24 栅格是否适用还有待商榷。

另外 Material、Carbon 还明确提出了「Fluid Grid – 流体栅格」的概念,核心思想是在较小的屏幕上降低栅格数量,将多余的栅格自动折行弹性布局。


(Carbon 的栅格定义) 

在屏幕尺寸变化时,栅格主要有两种响应模式:Fluid、Fixed


(Fluid)


(Fixed) 


这种将栅格系统与弹性布局相结合的方式基于一些简单的规则设置,在不需要特定响应式的场景中不再需要指定繁琐的 token,且能满足大部分高频且通用的情况,在一定程度上降低了成本。


组件应用

除了通用的响应式规则以外,设计体系在具体组件中的响应式方案还有许多值得挖掘,能为我们的组件设计提供参考价值,本篇不再一一展开,仅提两个典型的应用情况:

框架

(Carbon 的框架设计)


框架算是一个特殊的组件,在不同的设备中界面框架的适用有非常大的差异,几乎提到响应式的所有设计体系都给出了框架响应式方案,例如 Alta 将界面框架分为四块,以 Off-Canvas 和 Reposition 两种方式在不同尺寸的屏幕中显示或隐藏以及通过特定的方式展开或呼出。

通常情况下设计体系的框架组成按形式可以分为:

  • Header – 通常情况下常驻

  • Sidenav – 分为左侧右侧两种情况,一般用于放置导航,在不同设备会有展开,收缩,隐藏三种状态

  • Content – 内容区,通常由 Grid 控制布局

  • Footer – 如有,固定在页面底部

  • Float – 浮动框架,用于临时状态,通知或弹窗等

设计体系通过对框架的定义,以及控制不同部分基于什么样的模式响应屏幕尺寸来实施对框架的响应式设计。


(Material 的响应式框架) 


组件

Fluent 或 Material 在设计文档中更多基于基础的网格,布局,设计模式来阐述通用性的响应式规则,因此他们的响应式设计有非常好的延续性,组件的响应式方案基本上都遵循这些规则。

而 Fiori 以及 Lightning 在通用性响应式设计模式上的定义上没有那么全面,他们侧重于在组件层面对所有组件都考虑了针对性的 Responsive 或 Adaptive 的方案。例如 Fiori 在响应式表格的组件里,在桌面端与移动端分别是 table 和 list 的模式,这个方案并不是通过全局抽象规则得出来的,而是基于对组件的针对性设计,正如他们为不同的组件设计了不同的 Breakpoints,这种针对性也适用于特定的 UI 解决方案。

(Fiori 针对 Table 的响应式设计) 

在一定程度上抽象规则的同时,如果我们能够为每一个组件都考虑到不同场景的响应式,当然就会提供更精细化的体验。在一个完备的设计体系里,在设计每一个组件资产时都以渐进增强的设计策略,考虑到不同的设备及屏幕适配是非常有必要的。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


UI的进化史&基础知识普及

鹤鹤



主要分两个部分介绍,第一个轻松点的主题,回顾下UI的风格变迁,再聊一聊行业情况,然后科普一下app界面设计的提案思路;第二个部分就稍微严谨些,是UI设计师必须掌握的一些基本知识,包括分辨率适配,倍率适配等关键知识点



先来认识下UI是什么,我给大家精简成了三句话,如上图所示


首先第一是媒介,也就是我们直接能看到的各种界面,UI就主要设计界面


第二是行为,也就是我们使用一个产品时,通过怎样的行为来操作,UI还需要思考界面的交互

目前大家比较熟悉的,手持(手机),穿戴(vr,眼镜)等



最后则是用户,也就是我们常做的用户调研,不只是UI,所有的设计行业都需要这个环节


所以,如果有人问到UI是干什么的,那么你就可以告诉他,主要做三件事情:

日常需要做界面设计;进阶一点的会研究交互设计;高级的UI会去更深入研究用户



而我们这次主要就了解界面设计上那点事情,先给大家回顾一下UI设计风格的一个变迁,至今为止UI已经从黑白时代演变到了今天至少经历了至少5代蜕变,主要的风格如我右边列出的种类,而我觉得其实主要分成三个大时代来看就行


其中第一个大时代统称像素时代,也就是最早UI诞生的时候做就是这样的界面,大家熟知的表情包“有内鬼终止交易”就是一个经典的时代缩影


第二个大时代是拟物水晶时代,也就是UI发展最快,行业规模变化最大的一个时代,很多早期一批UI设计师都在这个时代吃到了所谓时代红利,当然不包括我,我已经晚了。这个时代界面的特点特别明显,就是比较写实的质感,投影以及一个大高光的罩子结合起来,给人一种硬玻璃的感觉


最后一个时代则是扁平,新拟物,现实增强等的混合时代(跟抖音内容的生态变迁差不多,从明显的高端视频风格到现在和快手差不多的鱼龙混杂),这个时期其实很多风格会延续下去,尤其是扁平,也就是我们现在办公常看到的界面,会作为一个基础,不断的吸收和混合其他的风格去进行延展


VR中的界面则是稍微前卫一些的,因为会有一个360度的环绕视角以及一个虚拟的现实场景,可自定义的程度很高,目前是刚刚兴起的时期,也是一个新的UI比较建议入手的高门槛业务领域,为什么说高门槛,因为做个界面都要戴着头盔来看效果


比较值得给大家科普一下的则是最近比较趋势的两个风格,一个是新扁平:在扁平界面的基础上,大面积用色,渐变,微质感,少边框,结合3D等一些其他元素来凸显主题



还有一个是新拟物,时代的风格总是偶尔会有轮回,拟物风格也进化成了新的形态:只有部分写实,整体强调3D立体感和光影感觉


还有一个是新拟物,时代的风格总是偶尔会有轮回,拟物风格也进化成了新的形态:只有部分写实,整体强调3D立体感和光影感觉


风格介绍完现在简单给大家讲下这个行业,它的覆盖领域主要分为四个,其中主要的行业人才都集中在移动端和PC端;游戏是一个特殊行业,要单独划为一个领域,它跨越多端风格也多样;其他端则主要包含一些国有传统行业和一些未来的,科技的比较冷门的领域


然后UI这个职业的主要行业特点是怎样呢?作为一个过来人可以见证的主要有以上七个部分,但是一句话总结就是:热度下降,规模稳定,门槛变低,人人切图。说得更残酷一点,现在大家报个班学完都可以投UI设计岗位了,时代的红利已经远去。当然如果觉得我说的不对也没事,可能我站得还不够高~


比较值得一提的则是风格的分布情况,虽然已经经历了5代变迁,但是仍有很多传统和冷门的行业停留在水晶拟物的时代,只有主流和热门的行业保持着最新的风格,而前卫的行业则会去尝试最新的UI和交互


这连续的两张里的图就是一个天南一个地北,但确实同一个时代的产品


那么职业科普和行业情况都有了之后,我们具体UI设计师,做界面大概是什么个流程,让大家了解下UI设计的思路,我称之为“眼睛会了脑子没会系列”,就跟你看到网上那些大佬的教程视频一样的,全程只有鼠标在飞,然后东西它自己就做完了。(开玩笑)

这个设计思路是我UI设计时期总结出来的最快的提案设计思路,接下来讲解每个环节该做什么


首先是快速切入,就是把我们前期收集好的资料参考,比如我这里有个情侣的app需要展现出青春,活力的感觉,那么我从最左边的参考图,提炼出符合自己要求的元素、颜色、特征等,填充到已有的交互框架(在UI设计业务中,交互框架一般由交互设计师或者产品给到),然后形成一个有视觉颜色等大体感觉的初版效果


然后在这个初版的基础上,我们在自己的库或者素材网上找到icon和图片进行填充,整体调整颜、排版等,一个进阶效果图就完成了,同理还有如下两个界面的产生过程,都是初稿


接下来第二个环节独特性,就是在自己进阶效果图的基础上,去强化一些关键的特征,让它的特点更明显更出彩,比如刚才的界面,把素材icon优化成更有主题特色和个人风格的类型,那这里涉及到icon的设计了


icon设计讲究快准狠,不需要太复杂


第三个环节则是高效性,这里开始就是要去优化我们交互体验上的东西了,也就是颜色的分布和使用在UI设计中是以逻辑和效率为主导的,好看不是首要的,比如这个经典的界面,出自淘宝app,它的颜色使用,就非常尊重用户,提高了识别和操作上的效率


然后是加分环节,细节环节,则是自己尝试要融合一些小的心思到你的UI界面中,哪怕是图片的使用,文案上的小趣味,都会让你整个app的调性有提高


        


第二个加分环节则是动效,主要是展示界面操作上的流程和自己的一些特色效果,这些都做完,就可以拿着你的静态界面稿子和动画一起去找老板汇报了


其实整个链路真的很简单,UI设计师每次提案做下来就这些事,只是不同人他的先后顺序不一样




首先我们已经知道UI设计师每天都在搞界面,也知道他们如何搞出一个界面,那具体搞的过程中,又是做哪几件事呢?这里给大家概括成三件事:规范,切图和标注

今天我们只普及规范知识,也就是在画界面之前,建立画板之前都要先搞清楚的事情,UI设计师真的数学逻辑要好


我们先要知道,规范为什么是要先掌握的事情,那是因为在设计界面这件事上,规范已经在手机生产出来的时候就有了,不同于我们说的设计规范是一些视觉上的规范,UI的规范是和尺寸,像素,倍率等知识密切相关的


首先从界面上去分割,UI说的规范主要是讲这几个部分和一个整体的设计尺寸


先讲设计尺寸,我们以苹果手机为案例,第一台手机出厂后,就会存在这样的规格分布,告诉你分辨率是多少,每个部分各占多少高度,有了这些,大大小小的app和系统等界面才有了设计的基础


所以问题来了,那每出一台手机就要有一个新的设计尺寸吗?理论上是的,但是实际上不管手机厂商和UI设计师,都会去找里面的规律来避免麻烦,于是厂商创造了一个规律,也就是这个pt为单位的尺寸,这里就要先解释下这两种单位的关系



说的简单点,就是pt是一个虚拟单位,它永远取最小值,也就是分辨率长宽都取了公约数之后的那个最小值


所以我们再回头看这几个机型,就能发现一个规律,就是如果pt不变,设计尺寸是不需要改变的,因为整体可以进行放大或者缩小来进行适配。比如左侧两台手机,我用640x960为设计尺寸,做来的界面,两台手机都可以用,不会有拉伸之类的变形;右侧之所以高度上pt不同,是因为顶部的之前我们说的状态栏,导航栏之类的高度变了而已,实际中间的区域是没变的


然后再换成我们现在主流的机型看也是这个道理,但出现了一个新词,叫渲染分辨率,自此以后我们要分清楚,设计尺寸永远是渲染分辨率,因为通常渲染分辨率和屏幕分辨率是一致的。这就是为什么官方说plus的屏幕更清楚,就是因为是从分辨率高的界面缩小下来的,px密度更高


在了解了这几点基本概念后,我们就可以去看整个行业的机型规范了,我们现在UI界面是主要以750x1334为设计尺寸的,就是因为这个分辨率所占据的机型是最多的,也就是大部分的pt都是在这个档位


同理安卓市场也一样,只不过安卓的机型更多,所以更复杂,他们对应的一个虚拟单位则是dp


推导过程是一样的,所以我们直接说结论,双端的设计尺寸如图所示,你用720x1280和750x1334都可以,因为这两者都约等于9:16,现在UI设计师的软件比如sketch大多都自带了完整的各个机型的pt/dp,所以已经现在很多UI设计师都不大了解这个知识


刚才我们介绍完的部分,只是适配的一种情况,还有一种情况则是通过切图,又称为倍率图。

作为一个合格的切图仔,切图是最常见的操作,不同的倍率图,不仅仅是大小不同,也被用来适配不同的机型


切图倍率是随着机型一起产生的,所以每个机型在适配的时候,主要的规律就是:pt相同看切图倍率;切图倍率相同看pt;如果两个都不同,则先按pt适配,然后再通过倍率适配。这里重申一下,pt适配的意思就是:只输出一套图,然后整体界面进行一个放大或缩小的方式适配不同机型;而切图倍率适配:则是不需要整体放大或缩小,而是通过输出多套图去给不同机型用


双端其实都有自己机型对应的切图倍率,两者通过各自的虚拟单位pt和dp还能统一转化为px,这样才能进行多机型的适配

前面我们说了,双端的主流设计分辨率基本上是一样的比例,但他们各自有不同的切图倍率,ios端的机型比较统一,所以切图倍率一直都没有太多;而安卓因为各种机型层出不穷,所以用于适配的切图倍率非常多,适配的难度也很大,但目前主流的输出结果如图所示,但当全面屏越来越多的时候,这个结构也会逐渐改变




最后讲一下UI的工具,在工作的环境中碰到使用比较多的就是sketch和新兴的figma,两者都相似,都以pt和dp为单位去建立画板,也有全面的切图倍率供输出使用


也常见有人一定喜欢用PS来设计界面的,也可以用这样的切图插件来一键轻松输出


最后标注也是一个大工程,主要是眼花,难度不大,现在各种主流软件都搭配标注插件,这里不多讲



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷  作者:lionisready

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



让设计更有价值——设计流程指南

涛涛

随着设计团队规模扩大,人数快速增多,但每个人都带着自己以往工作经验和习惯,

一些典型问题也相应显现:上手就干、主观设计、缺少方法、忽视跟进等等。

所以我们撰写了「UI标准设计流程」,希望能为UI设计师提供对于设计支撑思路的共识,让设计更有价值:



从接到需求到上线后跟踪,我们把流程拆分为五个节点:需求分析-交互设计-视觉设计-视觉规范-方案验证。

当然,在设计流程中我们只表达不同流程中的行为目的及标准,相关方法论我们会配套一份「设计师成长指南」,不久之后再与大家分享。


1.需求分析


我们在接到一个设计需求后,要做的第一步是进行分析并确定设计目标。

我们需要:了解背景、用户和竞品,能准确理解产品定位和需求目标,评估需求的合理性和准确性,并提供相应策略;甚至洞见机会点,通过设计对业务产生正向价值。



背景分析


目的:背景分析是为了让我们在刚接触产品的时候,去洞察表面背后的东西。通过背景分析,能帮助我们快速切入产品,并根据已有信息去制定准确并具有说服力的设计策略。

行为:我们需要了解:产品的定位及价值是什么,它的现状如何,是否有既往的数据沉淀或经验总结。



用户分析


目的:对UI设计师而言,用户分析是为了让我们更好地了解产品,并拥有对整个产品的宏观思路。通过用户分析,能为我们的视觉设计提供方向,并为我们做出决策提供实际落点。

行为:我们通常需要了解:用户画像、用户需求、用户行为、用户路径等。



竞品分析


目的:竞品分析能够让我们获得行业内的优秀经验,减少我们的思维盲区,同时还为我们提供了一份可被量化的标准,使我们可以基于竞品去反推现有产品。

行为:UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。



需求评估


目的:在了解以上的通用信息后,我们要对需求进行评估,去决定采用哪种方式、制定什么样的策略。

行为:我们接到的需求,通常可以分为三种:全新产品类、产品改版类、功能新增或优化类。

           对不同类型的需求,我们都可以用5个问题去评估:

           1.是否可被证伪?

           2.目标是否明确?

           3.投产比如何?

           4.是否有更优解法?

           5.是否有可预见风险?

           基于以上问题,我们可以去协同交互、产品做相应调整和策略制定,甚至发现新的机会点并进行推动。



目标对齐


目的:设计为目标服务,所以我们要在设计开始前与需求方对齐目标,这也能为设计价值的佐证提供标准。

行为:设计目标通常有3种,我们可以从中去对需求目标转译:提升数据型、解决问题型、创新项目型。

           针对不同目标我们可以去制定不同的设计策略,并对策略的落地进行数据监测与分析,进行方案校正。



2.交互设计


在产品流程中,交互设计的作用在于,通过信息架构的组织去产出体验流畅的界面原型。

我们需要:充分理解整体流程与交互原型,基于设计原则去发现可优化的部分;同时能平衡产品、设计与开发的效益最大化,并驱动产品的体验提升。




设计原则


目的:设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则,能使我们在设计支撑时,拥有更丰厚的专业度和更敏锐的洞察力。

行为:我们需要去了解市面常见的Guildline如iOS、Material、UWP等,以及一些常用原则如菲兹定律、格式塔理论等等。



流程梳理


目的:流程的再梳理,可以帮助我们在视觉设计前,快速地理解和诊断流程逻辑。

行为:在流程再梳理的过程中,我们需要注意以下4个问题:

           1.功能是否完整?

           2.链路是否流畅?

           3.步骤是否冗余?

           4.是否易于理解?

           基于以上问题,我们可以用自身的专业储备去推动流程的优化。



原型优化


目的:交互原型是需求内容的外在表现,通过原型优化,可以最大程度地避免视觉评审后的设计返工。

行为:在对交互原型优化的过程中,我们要重点注意以下4个问题:

           1.架构是否符合目标

           2.层级是否足够精简

           3.信息是否传达准确

           4.状态是否有所缺失

       在视觉设计时,我们基于以上四点可以去同步优化原型,并根据经验去寻求体验和成本的最佳平衡。



3.视觉设计


视觉设计是产品与用户直接连接的媒介,优质而恰当的视觉设计,可以极大地提升产品吸引力。

我们需要:基于分析确定视觉方向、定义设计语言,输出准确且高质量的视觉页面。




设计情绪板


目的:设计情绪板可以为设计语言的构建提供可视化参考,也有助于我们前期快速与各方达成共识。

行为:我们通常基于分析,去确定设计关键词,并基于关键词去衍生映射物、建立图形情绪板,最终分析和确定设计方向。



设计语言


目的:设计语言是情绪板的具象表达,它将构建起用户对产品的视觉感知。

行为:在明确设计方向后,我们就要基于情绪版去定义设计语言,主要包括主视觉、色彩、字体、图标、图形、动效等。



典型页面


目的:典型页面是设计语言在场景中直观体现,这有助于我们制定设计规范,并为其他页面的设计提供参考。

行为:我们通常需要设计首页、频道页或其他具有示例作用的典型页面,在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等,以此为视觉规范夯实基础。



4.设计系统


在设计典型页面的同时,其背后其实已经对应了一套设计规范和组件,而我们基于此去整理并沉淀出设计系统,能极大地提升统一性和迭代效率。

我们需要:制定完整、清晰的基础规范,沉淀图标库、组件库等,并持续优化和更新,形成可持续沿用的产品设计系统。




基础规范


目的:基础规范是设计语言的沉淀,也是视觉变量的基本粒子。它可以保证页面的基本统一,同时我们可以基于不同业务快速地拓展其他主题。

行为:在我司,一份基础规范的构成包括:色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。



图标库


目的:图标规范可以帮助其他成员快速、准确地进行图标拓展,而沉淀的图标库也可以极大地提升产出效率。

行为:基于具体需要,我们可以设定多套图标风格,规范其栅格、笔画、圆角等,并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀,如空态插画、悬浮入口、徽章、商品等。



组件库


目的:组件库是对常用控件进行设计规范、开发、封装的可被复用的集合,组件分而治之,可被自由组合,能保证设计品质、统一用户体验、提升产研效率。

行为:在我司,一套组件库通常包括:通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外,我们也会对常用模块进行梳理,沉淀业务组件库。



5.落地跟踪


在设计完成之后,我们需要对设计方案进行评审、验收及数据跟踪,以保证设计方案的落地并跟进调整。

我们需要:运用合理策略以保证设计方案的高质量落地,对方案上线后的用户反馈进行有效跟进,运用多种方式验证目标,迭代产品。




设计评审


目的:设计评审通常包含了交互与视觉,其目的在于审查设计方案中的可用性问题。

行为:在我司,视觉评审即终评,我们需要在视觉稿中标注出所有交互逻辑,并对潜在问题有预判,能与各方确认目标、分桶与数据埋点;同时我们要对开发实现有预判,能与研发确认实现细节。



设计验收


目的:设计验收是为了确保需求满足、体验流畅,并且设计细节能高质量落地。

行为:视觉设计师主要验收视觉细节的还原度,并且要在一定程度上对开发的适配、样式解法有预知,减少二次验收。同时需要保证验收有沉淀,利于后续跟进。



数据验证


目的:数据验证除了分析分桶之外,也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。

行为:我们通常基于设计策略,去对数据进行筛选与分析,以此衡量设计对于目标达成的增益度。对于有问题的,能反思并且修改;对于结果好的,能总结并且沉淀。



设计复盘


目的:设计复盘以结果为导向,我们可以通过复盘对设计策略的价值进行总结验证,并去发现、优化流程中的不足之处。

行为:我们需要陈述设计目标和策略,对设计价值进行验证,并能总结过程中的亮点与不足,制定后续计划、沉淀相关经验。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:酷家乐UED

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


复杂系统如何设计 | 论B端产品的体系化构建

鹤鹤



导读


为什么B端产品总是容易“失控”?B端产品设计与C端有何差异?如何在不断复杂的系统中,权衡效率、成本、体验之间的关系? 


本文将带你从B端产品的本质出发,了解产品发展过程中容易出现的问题,并从复杂系统的角度去探讨设计体系的构建方式。



目录


一、「 困局 」容易“失控”的B端产品

A .「 关注重点的差异性 」

B .「 微小差异的不断叠加 」

C .「 产品发展进入恶性循环 」

D .「 进入效率拐点,产品失控 」


二、「 启发 」从复杂科学的角度思考设计

A.「 自然算法 」

B.「 物质的构成原理 」


三、「 探究 」什么是产品设计体系?

A.「 定义 」

B .「 组成部分 」

C .「团队能力要求 」

D .「 构建方向 」


四、「 剖析 」B端产品的生命周期

「 产品生命周期概述 」

A .「 初创期 」解决核心问题,产生价值

B .「 成长期 」能力完善,产品扩张

C .「 成熟期 」效率提升,快速增长

D .「 暮年期 」商业价值降低,发展逐渐停滞


NEXT、「 下期预告 」设计体系的构建法则




前言


随着产业互联网时代的到来,市场对B端产品的重视程度逐渐提升。然而,谈及B端产品,特别是SaaS产品,大多数设计师对此并不是特别感兴趣。一来,SaaS更注重功能层面,似乎本身对设计的要求并不高;二来,SaaS产品的最终实现效果总是不尽人意,就算设计得再好看,实现出来也难以出彩。


确实,若设计师仅仅只是关注视觉层面本身,那么B端产品确实不像C端那么吸引人。但是,若你能以整个产品构建的角度去思考B端产品设计,那么设计师能够在其中发挥的空间是巨大的。


假如把C端产品比作精致的小房子,那B端产品就是一幢巨大的高层建筑。建造小房子,你可以尽情地发挥创意,追逐潮流,大不了推倒重来。而建造大房子,则需要设计师考虑更多的维度,因为这是一个长期而复杂的工程。


建筑的外观不仅需要好看,更需要足够耐看、稳定;为了适应更多人的需求,你不仅要考虑房子的软装,还要考虑户型的合理性、通用性;而为了降低成本,你还需要考虑家具、硬装的标准化、房间的兼容性等等…


“你是否有信心建造一个宏伟的高楼大厦?” 


这是我在B端设计中,反复强调体系化思维的原因之一。想要建造一个大型建筑,没有体系化思维、没有更完善的多职能协作流程,那么这座高楼一定会在建设过程中埋下隐患。而当问题一旦出现,涉及到的沉没成本也将会非常巨大。


当然,对于C端产品来说,体系化也愈发重要了。随着互联网时代的持续发展,一些C端产品的复杂性也堪比B端。我在之前的文章中提到过一个观点:“C端B化,B端C化”。在未来的数字产品设计中,B端产品将会逐渐开始重视产品的外观与体验,因为触达的人群更年轻化、对体验要求更高了。而C端产品也会更注重体系化建设,因为产品体量越来越大,需要寻求效率与成本之间的平衡点。


产品设计体系,本质上是一套更科学的复杂性数字产品的设计方法与工作流程。因此,不管是B端产品还是C端产品,设计体系能够在提升设计品质的同时,让产品更“可控”,提升效能,降低成本。


这套设计方法论,是我在工作中不断实践与完善的一些经验与方法。希望能借此分享一些自己浅薄的经验,也探讨一下数字产品设计未来的形态。




一、「 困局 」容易“失控”的B端产品

-


作为较为复杂的数字产品,B端产品在快速发展的过程中,总是容易出现一些问题。特别是当产品体量到达一定阶段后,问题就会逐渐暴露出来,比如:


1. 产品丑、设计质量低;

2. 组件样式繁多,操作习惯不一致;

3. 新老系统差异大,不同模块体验差异大;

4. 页面结构混乱。


等等…


很多问题大家都能明显地意识到,但往往因为“不影响售卖”、“价值不高”、“新功能优先”等理由被搁置。


随着问题逐渐积累,产品的优化成本也变得越来越高,最终使整个产品已经积重难返。若只是多部分页面/组件进行优化,小修小补,虽然成本低,但成效甚微;若是进行大修大补,那么优化成本将远大于研发新功能的成本。


这种普遍的B端产品现象,被称为“产品失控”,即——团队已经对整个产品的形态失去控制力。


那么,为什么B端产品特别容易出现这种问题呢?



A .「 关注重点的差异性 


首先,产品的本质决定了其关注重点的差异性。


与C端产品不同的是,B端产品往往更看重“能力”(为企业用户解决问题),而产品的销售方式与付费模式,也决定了产品体验并非首要关注的对象。由于B端产品通常针对企业用户,需要更长的研发过程,产品的体量和复杂性也相对较高。因此,除了产品解决问题的“能力”之外,产品还需要关注研发的效率及成本。


因此,在产品的发展初期,企业通常对效率最为关注,其次是成本,最后才是体验(能用就行)。绝大多数B端企业,只有在产品跑通商业逻辑,并具备一定用户与盈利预期之后,才会对产品的体验逐渐重视起来。



B .「 微小差异的不断叠加 


任何微小的差异,在无数次的叠加之后,都会被快速放大。特别是当团队的人员逐渐增多后,放大速度将会呈指数级上升。


为了配合产品的快速发展,产品往往会采用“堆量”的研发模式。增加研发效率,最简单直接的方法便是投入更多的资源。随着产品不断增加模块、功能、页面,团队人员也在不断地扩充。


但是,人类不是机器,并非简单的1+1=2。团队数量的上升虽然会带来效率的短期提升,但同样也会增加团队的管理成本。不同的产品经理、设计师、研发人员,对于产品的认知是不同的。随着团队人员的不断增加,“个体差异性”将会被不断地叠加与放大。


就像“传话筒”的游戏一样,同一个事物,不同的人理解总是不同的,经过多次的“传话”以后,往往与原本的意思已经大相径庭了。


这种情况表现在产品设计中,则会出现:当相同的组件由不同的人做时,总是会在基本样式、实现原理、交互细节等不同的维度出现差异。比如上图中的导航菜单组件,不同的模块在开发时总是会存在差异,最后差异越来越大,形成了五花八门的导航菜单形式。



C .「 产品发展进入恶性循环 


令人遗憾的是,虽然问题很明显。但是在不断的“成本考量”中,产品团队往往优先关注新功能的开发,而忽略底层问题的优化。


随着产品的快速发展,产品的优化/迭代成本将会逐渐大于研发新功能的成本。要么背负巨大的成本进行整体重构;要么降低标准,继续以这种模式不断叠加新功能。


在这种情况下,大部分B端产品往往会选择后者。于是,产品的发展将会进入一个“恶性循环”


  • 产品快速发展,功能不断叠加;

  • 各模块由不同的产品、不同的开发研发,导致各模块之间差异增加;

  • 产品丑、体验不统一,但老系统优化成本过高。综合衡量,优先进行新功能研发;

  • 所有模块标准不统一,产品迭代效率持续降低,维护成本持续增加。



D .「 进入效率拐点,产品失控 


产品的发展犹如一辆快速奔驰的巨型列车,一旦加速便难以停止。


随着问题的反复出现,以及在一次次的“利益权衡”中选择性的忽略,产品的恶性循环不断重复,而问题也逐渐叠加、沉积下来。


当这个问题已经大到我们无法回避时,我们才发现:产品的单位迭代/优化成本,已经远远大于新功能的研发成本。而新功能带来的增量,已经无法抵消现有模块的迭代成本——产品迎来了效率拐点。


就像一个庞大而复杂的机器,虽然依旧可以运行,但整体效率已经很低了,而与之对应的维修成本则非常巨大。小修小补根本无法解决问题,而大修大补则很有可能会带来更大的亏损。


最终,产品逐渐在“失控”中难以自拔,竞争力逐渐降低,但整个团队对此却无能为力,严重影响了企业的发展。


那么,在产品发展中,我们应该如何避免这种情况呢?换而言之,一个高度复杂的数字产品,我们应该如何设计,才能避免其逐步走向混乱? 




二、「 启发 」从复杂科学的角度思考设计

-


如果我们将B端产品看作是一个复杂系统,那么产品“失控”的本质即——在不断复杂化的形态中,缺乏有效的控制机制,最终导致整个系统失去控制。 


但是,在大自然面前,B端产品这种复杂程度显然不值得一提。


像大自然这样的复杂系统,是如何构成的?所有的物体都由原子所构成,为什么简单的一百多种原子,能够构成如此复杂的世界?生命又是如何在无机物的世界中诞生,并逐步进化成如此复杂的个体的?



A.「 自然算法 


道生一、一生二、二生三、三生万物...无论是老子的《道德经》,还是《深奥的简洁》、《万物皆数》、《复杂》这些现代的书籍中都阐述了这样一个观点:


任何看似复杂而又可控的系统,一定存在着精简的“算法”,通过不断的叠加从而形成复杂系统。


就像爱因斯坦说的:“宇宙最不可理解之处,就是它居然是可以被理解。”


在大自然中,有很多的花纹与图案的形状都存在相同的规律。比如上图中的羊齿草分形图案,这种图案在森林当中到处可见,我们看到很多树的形状跟叶子的形状是一致的,这就是一种分形图案。而这种分形的图案本质上是一个公式,通过不断地自我引用进行迭代,这便是分形。


科赫曲线(Koch curve)就是一种分形。其形态似雪花,又称科赫雪花(Koch snowflake)、科赫星(Koch star)、科赫岛(Koch island)或雪花曲线(Snowflake curve)。


它最早出现在瑞典数学家海里格·冯·科赫的论文中。我们将一根直线分成四段,然后向中间挤压形成等边的倒V形状;接着再将每个倒V的边进行相同的操作,不断地重复之后,我们发现:第一步是倒V型、第二步变成了大卫星,第三部变成了枫叶,第四步… 经过无数步以后,最终成了越来越复杂的“雪花”形态。


科赫曲线便是“自然算法”的一种。海岸线虽然很复杂,但是却有一个重要的特性——自相似性。从不同比例尺的地形图上,我们可以看出海岸线的形状大体相同,其曲折、复杂程度也很相似,换句话说,任意一段海岸线就像是整个海岸线按比例缩小的结果。而海岸线的构成原理就是这种科赫曲线,它是通过天然的演化,不断折叠最终形成了这种形状。


可以发现,他们都是由 基础物质 x 简单算法 x 随机变量,经过无数次叠加后,最终形成了一个复杂而多变的整体。



B.「 物质的构成原理 


宇宙中还有其他各种惊人的“巧合”。爱因斯坦的相对论揭示了宏观世界的规律性,普朗克和海森堡的量子力学揭示了微观物质世界的规律。当我们从微观世界到天文学会发现——原子核的构成方式居然与天体的构成非常相似。粒子围绕原子核的运动方式,就好像行星围绕太阳运动一样。


不管是整个宇宙,还是生命体,将其置于复杂科学的研究框架中,那些基本定律最终也会变得极其简单


在宇宙中所知最为复杂的形态,便是如同我们自身的生物。这些复杂体由已知存在于银河系中最普通的物质所构成。但是,通过氨基酸的形态,这些基本原料竟能自然地将自己组合成一个自组织系统。


混沌中隐藏的算法,使宇宙成为极有秩序的地方。而在秩序中隐藏的随机数,又使得宇宙成为极为丰富的世界。


也正是因为算法的精简,一切物质的创造才能具备复制性、延续性、进化性


那么,我们反过来思考——想要使复杂的系统简单可控,是否就需要一套简洁、有效的“算法”?通过“算法”,将基础的“物质”不断地“有序叠加”,形成一个可控的复杂体系。


因此,对于复杂的SaaS系统设计,我开始引入“设计体系”这一概念,希望能够找到未来SaaS产品设计的发展方向。只有设计体系的建立,才能保证产品可控性,才能在不断复杂系统中,保证效率、成本、体验之间的平衡。




三、「 探究 」什么是产品设计体系?

-


产品设计体系,在国内仍旧是较为陌生的词汇。什么是设计体系?


A.「 定义 


一个成熟的数字产品,需要有一个稳定、且持续迭代的形态。创造这个形态的过程,我们称之为广义上的产品设计(这里指产品的整个策划和设计过程,包含策划、交互、视觉及部分前端开发)。而负责控制和维护这个形态的这套系统,便是产品设计体系。


我们接触到的更多是设计系统(Design System),比如平台级的设计体系,Apple、Google、Microsoft等系统级的设计系统,及其设计开发套件、应用生态。公司级的设计系统,如Airbnb设计系统、IBM的Carbon设计系统、蚂蚁金服的Alipay Design等。


但是,在一个企业内部,想要Design System能够系统性地运转,还需要基于这套标准建立的团队协作机制。只有设计标准与团队协作标准完美融合,才能建立真正的设计体系。



B .「 组成部分 


如果将数字产品比作复杂的“生命体”,产品的发展比作竞争中“自我进化”,那么设计体系便是产品的DNA。它既是产品形态的控制源,又是不断自我迭代的进化源,它的作用是:


  • 控制产品外观——感知性模型(视觉风格/规范)

  • 制造基础构件——功能性模型(基础/复合组件)

  • 模块的构建规则——模式语言(产品框架规范)

  • 产品标准定义、生产方式制定——协作模型(高度协同的工作流程)


它不仅能控制产品的“生产结果”,提升产品质量;还能规范产品的“生产过程”,形成一套完整的多职能协作流程,提升产品的生产、迭代和维护效率。 


从宏观来看,设计体系像是一个“规范的复合体”,它是各职能之间规范的有效整合,产品框架、交互规范、视觉规范、前端规则,同时也是基于整合规范所创造的一套创新的工作模式。



C .「团队能力要求 


设计体系的建立,需要整个产品团队拥有一致的目标,并为之通力协作才能完成。这就需要整个团队拥有较高的平均素质与契合度


同时,体系化的建立和推动,也需要团队中有人牵头去推动。设计师作为“产品-开发”的中间环节,是非常有条件成为推动者的角色的。


当然,这就要求设计师拥有更丰富的横向能力。


一方面,设计师需要将自身的能力边界进行拓展,与上下游的职能保持密切的沟通,并解他们的诉求。只有当设计体系满足各方利益时,体系化才有推动的空间。


另一方面,对于产品侧与开发侧人员,设计团队也可以通过培训来提升他们的能力边界。比如针对产品的交互培训、针对开发人员的基础审美培训等。这样才能提升产品的下限与上限,增强产品的综合竞争力。



D .「 构建方向 


设计体系并非超脱于产品之上,而是根植于产品的成长过程中。


想要推动体系化的建立,必须充分了解产品发展的基本规律。产品处于不同的生命周期,所要解决的问题是不同的。在正确的时间做正确的事情,并对未来的形态进行规划,才能逐步让设计体系根植于产品、融合于产品。


因此,在下一章,我们首先来了解一下B端产品的生命周期。




四、「 剖析 」B端产品的生命周期

-


对于设计师来说,首先要更宏观地了解产品所处的生命阶段,才能知道设计需要解决的问题是什么,并以此有针对性制定不同的设计策略,最终帮助产品构建完善设计体系。


本章更多的是对B端产品的发展阶段做一个剖析,而不同阶段具体的实施策略,会在后面讲解。



「 产品生命周期概述  


类似于人的成长历程,一个新的B端产品从诞生到逐步扩大,通常都会经历几个不同的生命阶段。


B端产品研发是一个漫长而系统化的过程。这个过程通常伴随着商业业务发展与商业战略模式的不断调整。


B端产品从立项到下线,产品会处于几个典型的不同状态中,这就是产品的生命周期。通常来看,大多数产品都会经历以下几个生命周期。初创期-成长期-成熟期,直至最终进入暮年期。


而产品的商业价值,也会伴随着产品的发展而变化。在通常情况下,伴随着产品的逐渐成长,其商业价值也会随之增长,并在成熟期进入黄金的商业价值期。而当商业价值出现大幅、持续性的降低时,则基本算是进入了暮年期。


那么,不同的生命周期中,产品将会遇到哪些问题?而为了保证产品的持续发展,产品团队又需要做哪些事情呢?



A .「 初创期 」解决核心问题,产生价值


初创期,即产品已经从构思到研发,并成为了初步的产品。这个时期,产品虽然还不能覆盖完整业务,但已经能够顺利运行


从构思到创意,再到实践落地。B端产品的诞生,通常源于在行业内深耕多年的资深玩家。在不断地实践中,通过创意与实践,找到了一条能够帮助行业解决问题、提升效率的路径。


在这个时期,产品需要解决以下几个问题: 


1)用户是谁?


B端业务的本质,就是“向组织销售服务来获得盈利”。哪些企业最需要你的产品?哪一类用户的问题最需要通过这种方式得到解决的?这些都是需要在早期非常明确的。


站在普罗大众的角度去规划产品固然是好的,但成功的产品都始于一小部分早期用户;B端产品的用户通常来自某一垂直领域,首先让他们喜欢上你的产品,然后慢慢向外拓展至更大的人群当中。


想想看,最初一千名喜欢你产品的种子用户可能是哪些人?


2)产品能够解决什么问题?


我们要为用户解决什么问题?“用户的问题”可能是一个需求、一个困扰或是一个机遇。他们的需求是否真的是痛点?


这个时期,团队需要拜访大量的目标用户,通过交流获取痛点。我们必须验证这个需求的真实性,以及我们的解决方案是否具备一定的可实施性


我们可以通过更具象的UI或流程,初步展示想法,不断优化。最终形成一个可验证的初步产品Demo,并通过Demo进一步与潜在用户进行沟通。


3)这个问题是否普遍?是否具备标准化的可能?


不同企业的需求是有差异的,如何将个性化的需求抽象成共性的解决方案?如何权衡范围与成本之间的关系?我们要将不同企业的需求进行抽象,形成标准化的解决路径。


这个阶段,我们需要为种子用户创建方向聚焦的MVP。MVP必须是名副其实的最小化可行产品,要为种子用户带来端到端的精准体验。如果他们不理解产品功能,不知道如何或为什么使用,或是发现其性能低劣、bug 太多,无法达到“可行”的程度,那么你的假设就难以得到有效验证。


4)是否能够形成完整的商业闭环?


用户是否真的会为这个产品买单?换句话说,产品是否能赚钱并且养活整个团队?


B端产品在初创期,最重要的是快速验证产品与业务的亲密性,能否完成既定的商业战略。产品团队需要通过磨合业务,快速调整业务解决方案和产品架构。


不仅是产品的打磨,整个团队也要形成完整的闭环。工作流程、产品的商业运转机制也要初步跑起来。产品的售前、解决方案、产品研发、实施、客户成功,我们需要真实地完成这一套闭环的操作,并基于此做团队毛利模型的测算。 


解决问题,带来价值,并且能够将价值转化为收益,这才是产品可持续发展的关键。只有跑通完整的商业模式,拥有长期的盈利预期,产品才能顺利进入下一个阶段。



B .「 成长期 」能力完善,产品扩张


成长期,即产品形态初具完善,并具备完整商业闭环之后,处于快速成长的时期。这个时期,产品将进行快速的迭代,覆盖的业务一天比一天完整,能满足的业务需求越来越多,而产品为业务带来的价值越来越大。


与新生期的区别在于,新生期时的迭代方向还未完全明确,迭代更多的是尝试,磨合业务与产品。而在成长期时,产品的迭代方向已经是非常清晰了的


1)更多用户,更多真实需求


产品在真正投入运营之后,所遇到的情况一定与MVP时期有所区别。随着产品的不断售卖,我们将会接触到越来越多的真实用户,以及更多的真实需求。而这些用户与他们的诉求,将会成为产品发展的指引。


2)解决更多问题,业务范围扩张


经过长期的打磨,产品的形态和可用性已经初步成熟了,商业模式也已经初步跑通。随着更多的真实需求,产品将会选择有价值的方向扩张业务范围,从“解决一个问题”逐渐走向“解决一系列问题”


3)功能完善,产品体量快速增加


伴随产品的快速迭代,产品的基础功能会逐渐完善,同时也会基于核心功能去搭建更为丰富的功能矩阵。更多的能力、产品模块、页面,最终逐渐叠加为一个完整的大型产品。


4)组织逐渐完善,人员专业化


随着业务扩张,组织架构逐渐完善。为了提高专业性与效率,团队人员从“多面手”逐渐转化为专业化方向。与之对应的是,团队成员的数量也会在这个时期快速增加。售前、解决方案、产品研发、实施、客户成功,这一套完整的团队模型在各模块中不断地复制。



C .「 成熟期 」效率提升,快速增长


成熟期,即产品的形态已经稳定,并能够创造持续的商业价值。处于成熟期的产品,肯定是已经进行商业化运行的。反之,没有达到预期的商业价值的产品,不能算成熟期。


进入这个阶段时,产品已经实现了产品-市场匹配。但是,我们需要对整个产品、以及团队进行一系列的调和与优化,才能让整个产品的形态与运作方式更加合理,以便将产品推向更广阔的市场


1)产品效率、组织效能提升


经过一系列的快速发展,产品体量通常都会比较大,而团队成员也快速扩张。随着一致性成本、沟通成本增加,势必会造成研发效率、组织效能会下降。因此,如何降低产品的单位研发成本?如何让整个团队的组织效能达到最佳状态?是需要解决的问题。特别是当产品具备一定的客户数量以后,单位研发成本的降低将会极大提升产品整体的利润率


2)产品设计-研发标准化,构建完整链路


通过产品设计-研发标准化、数据架构标准化,打通不同模块的壁垒,提升模块化与灵活性。将单点之间的竞争力相互配合,形成“场域”竞争力


产品的单点也许不能保证都有最佳的竞争力,但如果我们能够提供一系列的、高质量、无缝衔接的配套服务形成闭环,将会形成强大的整体竞争优势。同时,产品设计-研发标准化,能够增加产品售卖的灵活性,通过灵活的组合方式吸引不同的用户,提升销售灵活性与成单率


3)提供高质量的用户体验


产品最终是给人用的,用户体验也会在将来逐渐成为B端产品的核心竞争力。随着竞争的加剧,以及用户群体的逐渐年轻化,用户体验将成为企业在选择产品时的重要考量因素,也是口碑传播的重要途径。


由于在“产品-市场匹配”阶段需要尽快地推出产品,所以在设计开发过程中可能遗留诸多问题,需要进一步打磨优化。产品设计需要与开发具备高度的一致性,视觉交互是否合理,前端代码是否准确合理,操作反馈是否高效等问题,都需要这个阶段来进行调和。


4)教育市场,卖给更多的人


当产品逐渐成熟并具备一定体量之后,单靠销售跑单是远远达不到发展要求。这个阶段,需要市场部人员对市场进行教育,聚焦不同的行业领域,从“点式营销”转变为“面式营销”,并配合销售人员进行产品的售卖。因此,在这个阶段,产品的品牌力、核心能力的传播将至关重要



D .「 暮年期 」商业价值降低,发展逐渐停滞


暮年期,即产品发展停滞甚至倒退,逐渐失去商业价值的产品。


B端产品进入暮年期的原因,主要有两个。一是,伴随着业务的发展,产品已经很难满足业务需求。且翻新产品的投入产出比较低。二是,伴随产品的使用时长,产品将变得臃肿和迟钝,逐渐难以敏捷地满足业务需求。


很多时候,商业环境的快速发展、技术的更新迭代都有可能成为产品进入暮年期的原因。对于暮年期的产品,根据商业战略,产品经理既有可能要延长产品的寿命,也有可能持续保障产品完成顺利换代。当然,更多暮年期的B端产品,由于业务的调整,最终迎来生命的终结。


需要注意的是,很多产品因为在成长期、发展期无法建立有效的产品控制机制,导致产品过早的进入臃肿阶段。也就是前文中所讲的“产品失控”,非常有可能加速产品暮年期的到来。


因此,是否能在前三个阶段建立健康、完善的设计体系,是产品能够获得更长生命力、更多价值的关键。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:Jady_剑杰

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




贝佐斯的“70%法则”,帮你更快做出决策

涛涛

导语:尽管杰夫·贝佐斯身上的黑料可不少,但是实事求是地说,亚马逊在他的手上发扬光大,说明他还是有两把刷子的。起码在如何快速决策这一领域,他提出的“70%法则”还是很管用的。这一法则的意思是当你掌握了70%的信息后就应该立刻做出决定了。考虑到不少人总是在犹豫不决,这一法则其实可以算作是过度思考者的福音了。无论如何,要记住一个错误的决定总比没有决定好,以及从来就没有所谓的最终决定。


尽管发型相同,但我不是杰夫·贝佐斯(Jeff Bezos)的粉丝。这家伙是个混蛋,他对雇员非常严苛,逃税,试图通过金钱干预选举,欺骗他的妻子,还有干了很多其他的坏事。

但这个混蛋很聪明。他的一个个决策使亚马逊(Amazon)从一家在线书店成长为一个富有的(甚至有点可怕的)商业帝国。考虑到商业中最重要的能力就是做出正确的决定,我认为我们应该偷师“暗黑贝佐斯”,从他身上学到点什么。“70%法则”就是其中之一。

一、什么是“70%法则”?

很简单,就是你应该在掌握了70%的信息后就做出决定。

我知道你有很多问题,让我们一个一个来分析。

二、为什么要提出这一法则?

来,为了把问题捋清楚,我们把做出一个好的决策所需要的所有信息称为“必要信息”。

贝佐斯解释说,高质量的决策需要90%的必要信息。明白了吗?获得这高质量的“90%”需要很多时间,而速度在我们这个快节奏的世界至关重要。无论是在工作中还是在家里,如果你不赶快做出决定,你就会错过很多机会。

如果你和我一样犹豫不决的话,在你决定如何使用那些在线优惠券获取最大优惠之前,它们就已经过期了。你还因为忙着选剧而不是看剧,硬生生地把睡前一小时的放松时间给弄没了。不过你也不要担心,就算是商业精英,同样也会有举棋不定的时候。

当Twitter提出40亿美元的收购要约时,Clubhouse的创始人犹豫了。不久之后,Twitter成立了Spaces——和Clubhouse功能差不多。突然之间,Clubhouse不再像以前那么热门了。20世纪90年代至21世纪初,诺基亚(Nokia)一直是移动行业的领导者。当时关注的重点是硬件,但当新的挑战者出现时,关注的重点已经转向了用户体验。诺基亚又足足过了7年才开始认真对待用户体验,只不过为时已晚,苹果公司(Apple)早就主导了这个市场。

以上所有例子都传达了同样的信息:“等待太久才做出决定很是糟糕。”

这就是贝佐斯提出“70%法则”的原因。他说:“在做出大多数决定时,你应该掌握你希望掌握的70%的信息。如果你想要掌握90%的信息,在大多数情况下,你可能会很花太多时间。”

三、犯错总比行动迟缓要好

在商业上,没有所谓的最终决定。你可以随时改变方向、停止行动或返回起点。

“如果你擅长修正方向,那么犯错的代价可能比你想象的要低,”贝索斯说。“然而,慢下来肯定会代价高昂。”这就是发生在诺基亚身上的事情,以及Clubhouse正在遭遇的事情。

所以,亲爱的读者们,当涉及到决策时,请记住,犯错总比行动缓慢要好。

四、过度思考者的灵丹妙药

这是一个那些过度思考者非常熟悉而且特别容易陷入的情况:你掌握的信息越多,你就变得越犹豫不决。这就是所谓的“决策瘫痪症”,但“70%法则”可以帮助你打破这个困境。

当你掌握了70%的信息时,你就和自己签下了一个精神契约,这个契约会让你避免陷入沉思模式。这就像把你的饼干盒搬到地下室,从而让自己搞砸自己的健康的成本变高了,毕竟如果这下你想吃饼干的话,就没那么方便了。

五、最后,你怎么知道你掌握了70%的必要信息?

你当然不可能准确知道自己是不是掌握了70%的必要信息,但你可以尝试着估计一下。

如下三种方法可以帮助你估计自己是否已经掌握了70%的必要信息。

  • 测量时间而不是信息。如果你有十天的时间做决定,那么到了第七天,就不要再考虑你的选择了,顺其自然吧。这一招对文书工作、旅行计划和创造性工作最有效。
  • 使用清单来量化信息。列出一份可以帮助你做出决定的需求清单。当你在列表中划掉70%的时候,就该做出决定了。这一招在购物、求职和合作方面最管用。
  • 向外界寻求帮助。这就像是作弊行为,但很管用。可以问问进度稍微比你靠前的人。“你认为我需要了解多少信息才能做出这个决定?”这一招几乎适用于任何决定,但是难就难在不太容易找到一个可靠的人来帮助你。

在这篇文章的结尾,我想强调一下关于商业决策的两件事:

  • 一个错误的决定总比没有决定好;
  • 根本就没有所谓的最终决定。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



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

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

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

存档