首页

中国老龄文教娱乐行业市场分析

雪涛

伴随国内日益加深的老龄化人口结构,老龄产业也迎来了产业蓬勃发展期。本文通过分析在老龄文教娱乐领域布局的典型创业公司,深入其产品服务、运营体系,剖析商业模式与生态环境,从而明晰该领域行业动向,为资本投资及商业运营提供结构化的思维框架和研究体系。推荐相关行业的伙伴们阅读交流。

在老龄产业的市场结构中,已深耕多年的养老、护理、医疗企业通过重资产、重运营、重技术的模式逐步建立起自身的护城河。老年实体消费领域,对于细分领域的适老化改造、升级以及针对老龄人口研制开发新品类都成为市场可见的切入途径。对于一线流量平台和入口,中老年网民被文字、图片、音频、短视频及视频内容吸引成为其流量版图中逐步深挖和精细运营的对象。被数字化洗礼的老龄人口也在悄然地塑造着为其服务的商业模式。

根据国家卫健委公布的数据,我国老龄人口的平均健康寿命在68岁,我国女性职工退休年龄在50岁,男性职工在60岁。当人们退休之后,尚未到被疾病缠身而对自身生活能力及质量产生明显影响的情形下,对于其自身文化娱乐乃至精神生活的追求,是这部分活力老人生活的重要构成。正是基于这个人口结构及市场需求基础,众多新兴创业公司选择文教娱乐方向试图快速切入老龄产业,提供相应的产品和服务,并逐步探索可持续盈利的商业化方向。

一、老龄文教娱乐赛道的轻商业模式

老龄文教娱乐行业吸引了众多创业公司进入,从线上的老年教育/老年大学、提供相册制作、音乐、(短)视频的线上工具及衍生的网络社区、线下旅游/旅居/旅拍、广场舞等各类老年兴趣的线上化平台,在文教娱乐行业各类创业公司正逐步渗透老年生活场景,企图通过相对较轻的商业模式实现可持续盈利。

而传统或狭义层面理解的养老产业,离不开护理的介入和依托地产资源形成的床位供给,这是养老产业的刚需场景。而护理的介入程度轻类似于家政生活服务,重则可延伸至准医疗级别。床位的供给在社区或机构养老的场景中,均需要政府端资源和自身投入资金支持。

从而与医、护、养结合的各类养老机构选择重资产重运营的商业路径,通过扩大自身规模以求迅速占领市场份额及摊薄固定成本,以期获得稳定收益率水平。保险及地产企业的养老布局就很好的说明了此模式更加青睐的资源类型。

同时老龄实体消费产业,针对老年人衣食住行的生活需求及健康管理的养护需求研发具有针对性和适应性的适老产品,其本身的产品设计与生产需要符合制造业的一般性规律,对于生产供应链的掌控程度直接影响产品本身的成本结构。

并且需要在销售渠道上更有效率的触达老年目标客户,以支撑其特定品类产品具备足够的市场需求空间。本身在消费品制造业有优势的企业通过对老龄化市场的细分布局,或是更加顺理成章的选择。

因而众多创业企业面对此般市场结构,不得不考虑自身的资源禀赋优势来选择适宜的创业方向。而文教娱乐行业因其丰富的业态为创业企业提供了充足的选择空间,互联网基因较强的企业也更加适宜将老年文教娱乐产业在线上再造或与线下融合。

在没有大资金进入的背景下,文教娱乐行业完全可以通过自身提供内容的稀缺性在市场站稳脚跟,与轻资产的商业模式契合程度更高。

二、市场结构与公司布局

在老龄文教娱乐市场,无论提供什么产品及服务,实质上都可以切分为“工具”、“内容”、“社交”这样几个属性纬度去分析,由此不同公司布局构成了基本的市场结构。而内容是连接工具和社交的中心与基础,也是正式产生交易前的蓄水池。这个蓄水池里承载的是用户信任感、品牌影响力、场景塑造及商业变现的出口。

1. 工具

老年人生活的线下现实场景中,更多的是由实际的产品来满足。喜欢钓鱼有垂钓的工具,喜欢音乐有种类繁多的乐器选择,而老年人生活的线上场景中,如何为其线上生活提供适宜的工具就成为撬动老年人市场的一个支点。

从市场中创业公司发展历程来看,通过为老年群体提供线上生活工具的创业公司不出所料的尝到了甜头。照片分享编辑工具的提供者美篇,因发现老年群体在社交平台无法分享超出九张照片的功能限制,针对这一需求开发了一次性多照片分享工具,从而击中老年群体需求,迅速积累了中老年线上客户与流量,在其2.3亿注册用户量中,老年群体占比达45%以上。

在此基础上,从工具应用向以摄影为基础的UGC内容社区演变,实现了工具到内容社区的跃迁,为商业变现提供了更多切实可行的场景。除了美篇,通过工具到内容这一商业运作路径的创业公司屡见不鲜,小年糕基于微信生态的音乐相册制作工具,高峰时实现了近1亿的月活客户,并开始通过课程付费及为B端提供“老年人回忆录”及“家庭纪录片”的内容产品设计摸索商业变现方式。彩视也是通过短视频的制作剪辑工具向基于视频、直播关联的兴趣内容社群发展,进而实现了盈利。

2. 内容

为老年人提供具有价值性和稀缺性的内容本身就是文教娱乐行业的立身之本。如上分析的美篇、小年糕、彩视在发展早期提供的相册、短视频工具背后实质是中老年群体对摄影、视频作品的热爱和分享需求,因而向内容方向(无论是UGC还是PGC)转变也是顺理成章。

从此分析视角出发,可以看到,基于广场舞内容的糖豆,基于舞台走秀内容的花样百姓,基于中老年聚会的晶彩人生,基于戏剧戏曲内容的梨园行,基于声乐内容的人人讲、乐唱族、乐龄圈,都是意图通过为中老年群体提供具有差异化的内容产品来构建自身商业版图的基础。

3. 社交

基于内容的沉淀和发展,社群化和社区化,甚至从线上走向线下都是理所当然的发展方向,主要原因是社交场景是逐步切入老年群体真实生活场景的核心环节和突破口,从而提供更多可能的消费支付场景。基于内容及社交产品积累的信任感也将会助推衍生产品和服务消费的可能性。

从老年群体特性出发,消解生活孤独感的内在诉求都会将各种内容的消费作为参与社交的一种方式。由于这种供给方与需求方的双重契合,各创业公司都将社交场景的构建作为其不可忽视的一部分,但由于各公司不同生命周期的发展侧重点不一样,对于社交场景打造的重视程度也不尽然相同。

根据工具、内容、社交的成分和构成比例不同,各创业公司呈现出了不同的商业发展策略和战略布局。有偏向专业工具而社交属性较弱的,如自乐班,也有社交属性重而工具属性弱,如各类老年大学(美好盛年、快乐50、红松学堂),但无论如何内容的稀缺性是连接工具和社交的中心,也是商业模式得以持续的基础。

三、产品体系设计与运营策略

对于市场现有的创业公司提供的产品体系设计的考察,可一窥其商业运作思路及支撑其体系的运营策略的偏好。

1. 运营平台

在运营平台的选择上,有些公司如美篇、人人讲、彩视、红松学堂都将独立开发的APP作为主要的运营平台,而有些公司如小年糕、乐龄圈、乐唱族、花样百姓、美好盛年都基于微信生态的小程序建立运营生态。这与主要流量的获取入口、用户数量、公司发展阶段、产品的社交属性程度、商业模式、是否获得投资方资金支持都有一定关系。

以美篇和小年糕为例,两家公司提供的产品内容具有很高的相似性。起初都作为图片相册/视频的制作编辑工具,通过用户的分享裂变积累了早期流量,后期均转向UGC内容社区的搭建。

但两家公司的选择却不尽相同,美篇选择以独立开发的APP为运营重心,而小年糕虽也开发了自身的APP,但其运营效果和活跃程度不如在微信端的应用,主要的运营重心放在微信小程序及相关微信生态上。造成这种差异的原因,笔者认为一是由于在流量积累阶段对于微信生态的依赖程度不同;二是由于美篇目前的产品发展方向和运营策略更加侧重于社交平台的打造,这就决定了其必需开发独立的APP才能实现更加丰富多元的功能设计。

而小年糕用户的社群构建相对偏弱,侧重于内容传播分享,所以重播分享的路径越短效益越佳,基于微信生态的流量获取必然导致运营重心偏好于此;三是在商业变现模式上,美篇设计了会员支付体系,而小年糕还没有会员体系正在逐步试探课程付费模式,而支持会员体系的运营发展显然APP可以提供更加稳定感和信赖感的线上商业环境。

再看百姓网旗下的中老年时尚生活方式平台花样百姓,布局了APP和微信小程序端,但在APP端活跃程度和运营效果同样不理想,逻辑上来看,其提供的舞台走秀培训、美妆时尚内容都属于高客单价产品,切入的是老年群体中支付能力和教育程度都相对较高的高端客户群体,并且重线下的旅拍社交场景的运营打都会指向APP端的运营选择。

局限于目前花样百姓只针对高端老年客户人群的切入,其用户体量的壮大相对需要一个较长的市场培育周期,在用户体量达到一定规模后,可关注其在APP端的运营体系建设。

所以通过判断各类创业公司的运营平台的侧重点完全可以梳理其业务爆发的历史起点、内容体系的差异性以及公司未来的战略走向。

2. 内容选择

上文已经分析了内容的稀缺性将会直接影响公司商业意图的实现。关于内容体系打造的差异性可以从如下几个纬度去理解。如果是老年大学定位的公司,将会倾向选择全内容布局的业务模式,毕竟内容布局的越多,可以覆盖和吸引到的不同兴趣群体的老年人数量也就越多。

而从工具端切入的公司,在内容体系的打造上优先与工具相关的内容,在客户量积累到一定程度,并且随着多样性的需求显现之后逐步拓展到其他类型的内容上。而垂直兴趣社群的公司则专注于其垂直类型的内容体系的丰富和完善上。

但这类模式需要保证的是其垂直内容足以支持其业务发展和商业利润,如不能提供足够支撑,则后期迫于经营压力也有较大可能性会去拓展其他内容体系的建设。

3. 业态组合

在同一内容体系下,依据产品的形态可以划分为文字、图片、音频、短视频、视频、直播等不同的业态。该领域的创业公司也会根据自身的资源禀赋及商业布局选择合适的业态组合。

文字非常适合在流量入口端作为吸引老年群体的导流诱饵,但作为主要的内容体系,文字显然对于老年群体的参与负担过重并且互动参与性不强,类似于年轻人使用的知乎豆瓣的文字内容社区在老年群体身上产生的效果就会大打折扣。

图片及短视频业态更加适合于UGC内容社区的建设,一是来源于这代老年群体对于摄影拍摄的热爱,二是图片及短视频非常适合在各类微信群及其他社群的分享,三是智能手机在老年群体的普及率的提升使内容产生的效率更高。视频及直播业态非常适合UGC土壤中孕育KOL及完全的PGC内容输出。

例如,彩视同样与小年糕有着音乐相册及短视频的内容体系,但彩视的产品结构中直播占据了很重要的业务板块,这是与小年糕的重要差异,也是彩视自身独特的市场定位,从而在同质化的内容供给中筛选出对于视频直播感兴趣的老年群体,从而获得增量流量。

4. 工具内容社交结构比例

从这一角度切入分析,可见不同类型的公司的商业战略布局和盈利构想。内容体系的精雕细琢最终指向的是基于免费内容的引流和优质内容的付费。社群体系和社交场景的构建最终指向的是各类支付场景的聚合再造、信任体系沉淀后所获得的用户黏性以及支付意愿提升

在内容体系逐步完善并且内容付费增长达到天花板之后,寻求社交突破的需求就会自然而然产生。如据相关媒体报道,美篇正在实验开发其老年交友社交类产品。

内容和社交环节均可产生付费的场景,但这并不意味着工具只能作为引流的通道。足够专业性的垂直类工具,仍可让老年群体产生付费的意愿。

例如成立于2015年的创业公司自乐班,提供电子音乐创作工具,可提供将用户的电子乐器与app连接,从而拓展音色,包含100余种乐器乐色,打造虚拟乐器,其获得了超过15万的注册用户使用,其中老年群体的用户比例近70%。未来基于专业的深度使用客户,产生工具的收费模式也是可以期待和选择的方向之一。

5. 商业变现路径

现有老年群体的文教娱乐行业的商业变现和盈利模式,主要基于:内容付费、广告、电商、会员制费用、线下活动衍生、直播提成、加盟费等,如下择取一些代表性公司的盈利渠道进行对比分析。

6. 运营策略差异

排除产品差异所产生的运营的差异,不同类型公司对于如何提高线上存量的留存率和活跃度也会产生细微的差异,这是需要深入到具体的产品设计中才能发现的细节。

举例来说,一个是内容的分享路径设计,有的公司在其短视频内容中会嵌入明显的微信端的分享按钮,这无疑会引导用户进行主动的传播分享,提高裂变发生的概率。一个是用户活跃度的运营,基于APP的产品可以主动向目标用户推送Push,而没有APP端的公司可能在触达用户的路径设计上需要考虑更多的方案。而有的公司会在APP中主动为新注册用户设计虚拟的粉丝和赞赏,通过类似方式提高用户的活跃程度,减少流失率。因而更加精细化的运营体系实际也成为各家公司提高运营效率和用户满意度的必然选择。

四、线上与线下的流量与场景

老年流量的获取是兵家必争之地,线上与线下流量又会依据不同的商业设计形成互相转化。线下流量的获取依托各类真实生活场景,如菜市场、老年大学、KTV聚会场所、广场舞等场景,这部分流量可以直接在线下产生支付,但如果创业公司的商业设计希望将在线下获取的分散的流量汇拢至线上,并在线上产生流量池的新的聚合反应,那么从线下流量到线上流量的转化路径上需要更多的精细运营,以减少在增加的转化路径上丢失流量的可能性。

同时,老年流量也可直接在线上生成。根据数据显示,截至2020年12月,我国网民规模达到9.89亿,60岁以上老年网民占10.3%,智能手机的使用在老年群体逐步渗透。在资讯端如微信、今日头条、腾讯新闻,视频端如抖音快手西瓜视频,购物端如拼多多,都积聚了可观数量的中老年流量,成为各类创业公司企图转化为私域流量的基础。与线下流量向线上流量的转化类似,获取的线上流量也会因为试图在线下搭建更多支付的场景而向线下流量转化并落地。

因而中老年的流量入口并不局限于线上或线下,并且在流量的转化路径上将不可避免的产生融合。线下流量往线上流量的转化需要在运营层面提供更多的便利性和吸引性,线上流量往线下流量的转化需要在运营层面提供更多的信任感和场景化。而针对老年流量的运营其最终目标便是要在各个可能的环节和触点产生更多的有效数据反馈和交易支付,数据反馈作为商业分析的中间变量,最终也是为了产生更多的交易支付。

关于老年人的支付能力和支付意愿向来是整个老龄产业的核心关注点,因为整个产业链的利润产生均最终来源于老年群体支付的体量。因而对于流量的运营,最后的落脚点便是要提高老年流量的支付意愿,整个产品体系的设计和运营策略都应时刻关注能否最大限度的调动老年人的支付情绪和意愿。

除上文提到的线上和线下作为流量入口和相互转化的路径。在实际的商业服务中,线上和线下在为老年群体服务的过程中还是存在诸多的场景差别需要不同的解决方案,拿热门的老年大学和广场舞作为案例分析。

1. 老年大学

线下的老年大学实际是一个相对比较成熟的业务形态,在线下老年大学中存在两种运营主体,一个是作为政府公共服务职能提供的老年大学;一个是市场主体参与的可以提供更丰富及优质课程内容的老年大学。线上老年大学,实际也存在着三种基本的业务形态:一是线下老年大学在线上的数字化重构;二是纯粹的线上老年大学;三是线上老年大学伴随结合向线下拓展。

需要注意的是,这三种形态并不是非此即彼的业务选择,而是根据不同公司的生命发展周期和商业路径的选择。

线上老年大学和线下老年大学的首要差别在于场景的深度和关联度,这是线下老年大学较于线上老年大学的优势。而线上老年大学的优势在于低边际成本和覆盖面的广度。因而线下老年大学深耕的是每个用户学员的付费可能性的深度挖掘,线上老年大学的优先选项是低成本的用户普及度。

快乐50是一家深耕于北京市场的以线下老年大学为重心的公司,目前在北京有10余个校区。由于线下的真实场景,受益于接触的频次、接触的深度、对于用户需求挖掘的更加直接的沟通、面对面的信任感,老年群体也会更加易于接受其提供的老年游学服务作为老年大学课程服务的延伸,这正是由于线下场景的深度和实际生活的关联度提供了更加有效率的转化路径。

而线上老年大学在开展同等业务中,就会存在着转化路径延长的问题,首先需要将线上流量引流到线下,而在线下没有稳定场景提供的情形下,如果没法在较短的时间周期内将转化至线下的用户实现付费转化,那么未来转化的成本或将更高,转化率更低。而线上老年大学在向线下转化遇阻的情况下,更加理性的选择就是通过提供更加丰富的课程体系,以更低的边际成本,完成线上付费用户的转化,从而突破地理位置的局限性。

对于有资金支持的创业公司当然可以选择鱼和熊掌兼得,融合线上与线下老年大学。而对于没有足够资本去铺设校区和获取当地退休老人资源的公司来说,选择线上的切入口将会是更加适宜的选择。这本身也是一家公司资源禀赋和基因的问题。线下老年大学试图迅速扩大自身市场份额的方式也会去选择加盟经营的模式,其商业的实质在于通过输出课程管理体系和营销运营体系的方式来转嫁扩张的校区成本。

值得一提的是,老龄教育产业的实质属性还是在于“娱乐+社交”。虽然很多提供老年教育的产品,涵盖了声乐、舞蹈、书法、棋牌、摄影、绘画、运动等诸多门类的教育内容,但老龄教育与K12教育的显著区别在于其没有内在的选拔性和竞争性,因而老龄教育的娱乐和社交属性提供会显得更加重要,寓教于乐才是其产业本质。

2. 广场舞

糖豆发展初期通过线下的广场舞团队领队资源的获取,成为了链接广场舞人群的拥有最大用户量的公司,同时其逐步构建了广场舞教学为基本内容的整合线上与线下的O2O综合平台,其注册用户2亿余,月活达2000万。

糖豆的市场优势地位建立在其线上和线下完全融合的基础之上。这种融合表现在其线下的舞蹈团队在线上完成了同质社交关系的数字化,线下的场景通过其工具属性的链接在线上实现了同等复制,同时线上的社交场景又促使了自身更大范围的链接,从而几乎实现了广场舞人群的高度覆盖。因而在糖豆身上很难看出其他老年教育平台类似的转化路径,如将线上的课程付费用户转化为线下的游学客户,糖豆本身对用户在线上与线下都是可以同时触达的。

正因为积累了如此巨大的优势,糖豆本身发展的天花板已经不在于广场舞人群的渗透了,而在于依托老年舞蹈提供的用户流量和场景能否建立起老年娱乐生活的综合平台。其本身线下具备的巨大优势,将能更加低成本的承接各种场景的创造,而在线上糖豆除了APP运营的精心打磨,在微信小程序也建立起服务矩阵:糖豆视频+糖豆爱生活+糖豆每日一笑+糖豆健康+糖豆优品,意图更加广泛的触达老年用户群体。值得注意的是,“糖豆广场舞”更名为“糖豆”,也可见其未来发展的市场地位和战略路径。

五、商业模式梳理

老龄文教娱乐行业的产业链相对较短。相对于重资产构建的医护养机构,特别是保险系参与的,其中纷乱的资金链能够梳理清楚就实属不易。而各类生产制造消费品的类的养老产品,需要对行业的供应链体系了如指掌,对于一些高端制造的智能养老设备其供应链体系就更加复杂,存在集成商和分级的供应商。

其中老年教育类主要是基于教学内容生产,教学内容生产这背后涉及的更多的是师资资源,核心在于更加有效的组织内容的优质输出。在PGC领域需要有能够在老年群体产生影响力的师资,而在UGC领域需要能够创建出培育KOL的运营土壤,形成良性的各层级互动的内容平台。其产业链可以简单归纳为:内容生产者—内容管理者—老年消费者。

对于旅游游学聚会类,产业链中主要是增加了第三方B端供应商和专业服务机构的介入,这样对于盈利的分配就产生了更多的方式和可能性。

从商业模式的大方向来说,一个是将老年群体流量作为自身商业运营变现的基础;一个是将流量作为对外输出的流量池,嫁接B端成为其流量供应商。

选择何种商业模式的方向,取决于公司为老龄人口流量提供的产品与服务其背后的支付场景能否实现有效的转化,如果可以有效转化,则从自身实现商业运营变现为其优先选择。如果这种支付转化不能有效实现或者转化成本较高,则持续的流量运营成本将会对公司产生较大的财务经营压力,选择成为流量供应商便是一个适宜的选择。公司在准确评价自身市场地位及发展阶段的基础上,将会灵活选择其商业模式方向。

六、行业未来发展变量

行业未来发展方向是一个由政府导向、市场供给方、市场需求方共同参与塑造的结果,即使参考国外成熟的老龄产业体系也并不一定能在本土的商业环境中形成完全确定的答案,但笔者认为有这样几个变量会产生影响:

1. 现有市场解决方案的空隙

市场向老年群体提供的精神文化产品会向多层次更加细分的方向迈进。这是由我国老年群体的复杂的结构基本面决定的,由于区域的差异、收入的差异、受教育程度的差异、不同年龄阶段的需求差异、城乡的差异等,都会造成老年群体需求的多层次性,随着现有市场参与者对用户画像越加精确的勾勒,会逐步将成熟的产品服务及运营体系拓展到尚未被服务到的人群。

无论是向高支付能力人群提供更加定制化的产品服务,还是向下沉市场提供更加普惠的产品服务,无疑都会是现有公司在遇到增长瓶颈后会采取的发展策略。

2. 未来老年群体的兴趣变迁

实际上人们往往会产生一种误区,就是认为进入老年之后都会产生特定的兴趣需求,比如广场舞、摄影,但是其实这可能是特定年代人群的特定兴趣爱好,只是恰好他们进入了老年。

如果认为这是一个确定不变的市场,可能在老年群体发生结构改变的时候发生战略误判。实际上,这是未来老文教娱乐市场的一个较大变量,需要提前对各个年龄阶段特别是5-10年后进入老年阶段人群进行深入的研究分析,这是一个中长期的市场变量。

3. 技术环境的变化

现有诸多建立在智能手机端的商业平台也是依托了移动端技术的成熟,未来应时刻关注科技技术领域的发展,技术的迭代完全可以重新塑造用户的链接方式和商业场景,而链接方式和商业场景的变更将会引发用户流量的重构,现在也会听到老年人线上流量获取的难度越来越大,头部公司沉淀了大部分的流量,新进入公司获取流量的难度和成本也愈发高昂,在某种意义上确实如此,但是如果技术所支撑的商业场景发生实质性改变的情况下,这会是流量发生变迁和重构的一个根本性变量。

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

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

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

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



按钮设计的知识点分析

雪涛

虽然直觉认为按钮是一种很简单的控件,但在梳理按钮相关知识点的过程中,发现小小控件其中包含了很多容易被忽略的细节。

按钮几乎是每一个页面不可或缺的元素,对于按钮的认识基本停留在视觉层面,一个圆角矩形搭配一句文案就能拼凑成一个最基础的按钮。视觉是一个观察的切入点,但仅停留在视觉层面还是不够的,比设计表现更重要的往往是背后支持设计的理由。本文中的所有案例均来自线上产品,观点仅是个人粗浅的理解,有疑问的地方欢迎大家讨论指正。

从6个层面,系统分析按钮设计的知识点

按钮的定义

1. 按钮的来源

数字世界是现实世界的一种映射,许多数字概念,都可以在现实世界中找到原型。按钮就是很生动的一个案例。在视觉表现上贴近现实生活中真实物体的外观,拟合用户心智模型,降低用户的认知和理解成本。

从6个层面,系统分析按钮设计的知识点

2. 按钮的定义

如果从视觉形式上看,按钮的组成很简单,一个矩形容器加上文字或图标即可组合成一个常见的按钮,但是仅仅从视觉层面定义按钮是不严谨的。按钮是一种重要的控件类型,而控件是图形用户界面(GUI)的主要构成模块。想要深入理解按钮,就必须要求我们首先理解什么是控件以及控件的分类。

3. 控件分类和介绍

定义:控件是用户和产品间进行交流的屏幕对象,是图形用户界面(GUI)的主要构成模块。

分类:根据用户目标,可将控件分为 4 大类。

从6个层面,系统分析按钮设计的知识点

从6个层面,系统分析按钮设计的知识点

每一类控件下又有更多具体细分。所有界面中常见的具体控件都可以根据其功能找到所属的类别。

从6个层面,系统分析按钮设计的知识点

4. 按钮的分类

在以上各个细分控件中,我将部分控件归入按钮类别:

命令控件下的:传统按钮、图标按钮、文字按钮

选择控件下的:开关按钮、单选按钮、组合图标按钮、状态切换按钮(开关和复选框样式比较固定,为了方便讨论,姑且不算在按钮范畴之内)

因此如果以按钮为主体,以功能属性为分类条件,可将按钮分为:命令型按钮和选择型按钮

从6个层面,系统分析按钮设计的知识点

命令型按钮与选择型按钮的区别

不论从功能维度、交互维度、视觉维度上看,这两类按钮各自都有不同的特点。

从6个层面,系统分析按钮设计的知识点

从6个层面,系统分析按钮设计的知识点

选择型按钮非瞬时状态有:“选中”和“未选中”两种互斥状态。可以把选择型按钮理解为某种状态的确认和展示。

命令型按钮的非瞬时状态只有一种:正常状态,当用户点击命令型按钮后,命令即可下达。可以把命令型按钮理解为一个动作,点击按钮代表着立即执行这个动作。

从6个层面,系统分析按钮设计的知识点

常见按钮的拆解

介绍完了命令型按钮和选择型按钮在功能、交互、视觉层面的区别点后,我们再来看看实际工作中常见和常用的按钮类型。

1. 传统按钮(有容器兜底的按钮)的来源:

GUI 中“按钮”的概念来源于真实世界中的按钮。真实的按钮具有一个非常显而易见的特点:拥有一个适合点击按压的受力面,这个受力面就是可点击感的来源。试想一下,假设一个按钮只有针尖般大小,且不说你是否能认出这是按钮,即便你知道这是按钮,你会有按下的欲望吗?真实情况下,摆在人们面前的按钮面积越大,想按压的欲望就越强。因此传统按钮的最显著特点就是拥有一个承载内容的“受力面”,也就是承载文字或者图标的“容器”。受限于早期的显像技术,以及与真实世界的对照,这种“容器”通常一般都是矩形,后期渐渐衍生出更加柔和的圆角。

从6个层面,系统分析按钮设计的知识点

风格发展:

在相当长的一段时间里按钮都有三维凸起的特征,进一步巩固了按钮的可点击感。不过进入移动时代后,这种流行趋势发生了改变,按钮的三维印记被不断移除。用户已经建立起了成熟的心智模型,即便按钮在视觉上越来越“平”,也不妨碍点击行为的发生。结合多年的使用经验,用户已经将矩形形状这一特征和按钮牢固地联系了起来。即便现在的按钮大多都是扁平化,用户也能一眼就辨认出按钮属性。

从6个层面,系统分析按钮设计的知识点

2. 传统按钮的拆解:

常见按钮一般是由容器和内容组成。

从6个层面,系统分析按钮设计的知识点

容器层面

  • 容器形状:

移动端比较主流的按钮形状有:矩形、圆角矩形、胶囊形和圆形 4 种。一般,在人们的认知里,圆角越大传递的感觉越圆润亲切。其实形状本身并没有好坏区别,与单纯视觉偏好相比,元素的统一性更加重要。一旦选定了某一种按钮形状,就需要保证所有场景中出现的按钮都尽量看上去整体统一。

从6个层面,系统分析按钮设计的知识点

  • 容器尺寸:

视觉上,按钮越大,越吸引用户注意,决定按钮大小的主要依据是按钮在页面中的优先级。而一个产品涉及到页面众多,如果不同的页面元素之间缺乏统一的调度规则,就会出现按钮尺寸过多,没有规律,细节混乱,效率低下的情况。为了既能适应不同的场景,又能保持产品级的控件统一,一般要给按钮尺寸设定几个档位以适配不同页面需求。排除个别特殊页面,一般把按钮设置为 5 个优先级梯度档位就足以满足设计需求。

我们可以从优先级从高到低的顺序,将按钮分为:特大、大、正常、小、特小 5 个尺寸档位。

下面展示最常使用的三个档位,大、正常、小档位。

从6个层面,系统分析按钮设计的知识点

  • 容器颜色:

按钮的大小、形状、颜色三个维度中,人眼是对颜色信息最为敏感的。在一个页面中,突出一个元素的方式有多种,其中最简洁有效的方式就是用颜色进行突出。颜色包含了色相、饱和度和明度三种属性,改变颜色的不同属性,都会对按钮的表意产生影响。同时,不同的颜色代表着不同的含义,配色时需要加以注意。

从6个层面,系统分析按钮设计的知识点

  • 容器样式:

容器除了基本的尺寸、形状、颜色之外,还有多种样式。

上文介绍的容器是强面性的,此外,容器还有弱面性、线性等样式。

从6个层面,系统分析按钮设计的知识点

  • 容器细节:

虽然现阶段的按钮越来越扁平,但在扁平的趋势下,依旧有发挥设计创意的空间。

颜色渐变、投影、动效都是常用的设计手法。

从6个层面,系统分析按钮设计的知识点

从6个层面,系统分析按钮设计的知识点

内容层面

聊完了“容器”部分,再来看看容器承载的“内容”又有哪些细节点。

从6个层面,系统分析按钮设计的知识点

从6个层面,系统分析按钮设计的知识点

3. 图标按钮的介绍

并非所有按钮都需要容器,尤其当按钮密度较大时,去掉容器只保留内容,可以更好地提高空间利用率,简约视觉。

从6个层面,系统分析按钮设计的知识点

4. 文字按钮的介绍

比图标按钮更轻量的按钮类型是文字按钮,以文字的形式展示,和界面融合度更高,当用户有需要时才会注意到文字按钮的可点击性。

从6个层面,系统分析按钮设计的知识点

5. 传统按钮与图标按钮的组合

这种组合形式相当常见,将多个功能整合在一个区域内,如底部工具栏(ToolBar)或者顶部导航栏(Navigation Bar)。不同按钮承载着不同功能,侧重越明显,越利于用户快速识别并决策。

从6个层面,系统分析按钮设计的知识点

特殊按钮类型

上面介绍的是常见的按钮形式,除了以上按钮,有一些按钮形式专门适用于某些特殊场景。

如悬浮按钮、胶囊按钮等。

从6个层面,系统分析按钮设计的知识点

按钮的优先级

一个页面往往有多个按钮,不同按钮承载不同功能,功能之间有相同或者不同的优先级,因此按钮之间也存在这相同或者不同的视觉优先级。

我们分两类情况来讨论:相同优先级的按钮和不同优先级的按钮组合。

从6个层面,系统分析按钮设计的知识点

从6个层面,系统分析按钮设计的知识点

按钮样式小结

上文罗列了实际工作中常用到的一些按钮样式,最重要的步骤是分清按钮主次,使用不同的样式进行搭配。

优先级强到弱:

强面性按钮、弱面性按钮/线性按钮、图标按钮、文字按钮

从6个层面,系统分析按钮设计的知识点

碎碎念:

本文中出现的部分名词,比如“弱面性”、“容器”等,只是为了便于交流和统一指向,并没有具体权威出处。文中提及的按钮类型均来源于线上产品,样本有限,适用场景相对固定,还有很多样式没有一一遍历。但掌握了如何选择样式的原理,就可以根据日后具体需求做出合理方案。文中出现的数据都是经验型数据,如按钮按下状态是在正常状态下添加 10%纯黑的遮罩,文字字号大小等,这些都是建议型数据,可以根据具体情况灵活调整。

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


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

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

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



时间显示的设计细节

分享达人

背景

“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现,关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的,这是出于怎样的考虑呢?今天我们就来聊一聊,如何在产品设计中把握“时间”显示的诀窍,让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用,可以大致归为以下几类:

A. 事件的关键构成要素

时间作为描述整个事件的重要组成部分,缺失后会对原本所要传达的内容产生严重的影响,进而影响用户的使用预期和结果,比方说用户可能不能以一个较低的价格完成商品购买,或错过了产品发布会的时间。

从3个方面,帮你掌握时间显示的设计细节

B. 行为的时间标记

指用户本人作为行为主体或行为的接收对象,在某一动作发生后为其所打上的时间标记,比方说“我”购买商品下单的时间或收到一封邮件的时间。

从3个方面,帮你掌握时间显示的设计细节

C. 内容的附属信息

用户在使用产品进行内容消费时,时间作为该条内容的附属信息,起到补充说明的作用,比方说一条短视频或新闻的发布时间。

从3个方面,帮你掌握时间显示的设计细节

在上面的案例中,我们会发现“时间”在对应场景里所发挥的作用不同,用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时,要根据具体场景和用户诉求判断“时间”元素的重要性和优先级,通常情况下:时间作为事件的关键构成要素>行为的时间标记>内容的附属信息,之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前,我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度,类似我们高中物理时学过的“时刻”和”时间间隔“的概念。

拿开会举例子:“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点,而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段;但是,我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。

通过上面的例子我们可以发下,同样是描述一件事情,运用不同的时间点、时间段的方式去表达,意思一样但却传递出不一样的情感,并且两者存在如下的“换算”关系:

1)时间段加上定语会变成时间点(但同样是时间点,“下午 6:00”是绝对时间,而“1.5 小时后”是相对时间,刚好对应到我们设计时两种时间戳类型);

2)两个时间点之间则表示时间段。

所以,我们在平时表达或设计时,要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点?还是想描述其所持续的时间过程?之后我们再针对不同语境去选取合适的文案和呈现方式。

从3个方面,帮你掌握时间显示的设计细节

时间的呈现方式离不开:时间戳类型、时间显示格式、时间颗粒度。其中,时间颗粒度指的是描述时间的最小单位,往往颗粒度越细,给用户传达的确定感越强(如转账时间是 12 日 15:15:20),对用户的激励作用越明显(如距抢购结束仅剩 00 时 01 分 23.6 秒)。

1. 绝对时间戳

绝对时间可理解为事物发生时的确切时间,由具体日期(年、月、日)和时间(时、分、秒)组成。使用绝对时间戳的优势是信息传达精准,显得正式,给人确定感和安全感,同时排布规整,便于形成认知习惯;但缺点是内容显示过长不利于阅读,并且占用空间较大。

从3个方面,帮你掌握时间显示的设计细节

在时间显示格式的选择上,为了避免混淆,推荐使用文字格式或“-”分隔符来分隔日期,而“/”分隔符在不同国家有不同的展示顺序习惯,容易造成误解,尽量少用。

从3个方面,帮你掌握时间显示的设计细节

时间颗粒度的选择依情况而定,一般场景总结如下:

从3个方面,帮你掌握时间显示的设计细节

2. 相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时,距当前时间点的时间差值,多用于 push 通知、信息流产品,侧重强调内容的时效性;而“倒计时”也算相对时间的一种,侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是不够精确、正式,并很难衡量两个时间点的临近性。

从3个方面,帮你掌握时间显示的设计细节

在使用相对时间时,要注意格式友好。时间单位可随着时间的推移自动改变;数字不要过多,尽量取整;并且可设置其与绝对时间转换的临界点。

从3个方面,帮你掌握时间显示的设计细节

总结

在设计界面中的“时间”元素时,要遵循场景贴合、便于阅读理解的总体原则;之后根据场景和目标,再选取合适的“时间”呈现方式(包括时间戳类型、时间显示格式、时间颗粒度)。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间,并且要看是为了强调某一关键时间节点,还是侧重表达整个持续过程。此外,选用关联场景的文案或者运用倒计时(相对时间)的形式,可一定程度上促进用户更加集中注意力,提升对信息的关注度,并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感,通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点(段)去查找、回顾相应内容,因此大多数采用绝对时间,时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快,用户活跃度高,并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性,那么通常会使用相对时间。部分信息流产品(比如新闻资讯类、社区类)会在列表页使用相对时间,在详情页使用绝对时间,时间颗粒度也是依情况而定;并且会随着时间推移,在某一时间节点前把相对时间转换为绝对时间。

文章来源:优设   作者:VMIC UED



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

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

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



设计思考和生活

雪涛

APP载入记忆,从哪里退出,就从哪里载入,减轻对特殊群体的打扰


不知道大家有没有这种苦恼,不管啥app,一打开就是弹出各种活动弹窗和广告,卡到想摔手机(以下分析,高端机大佬请忽略)。







分析思考


虽然产品为了促销和增加用户粘性,经常性的开展各种活动,来诱使用户参与,但是,还是有很大一部分用户不会参与,甚至看都不想看一下就点击关闭,下面用部分用户举例说明。


(1)将软件当作纯工具的用户:这部分用户使用你的软件,完完全全是因为你的软件能满足他的纯需求

他不想参与任何活动,你只要给他解决问题就可以了。比如“酷狗”,A用户可能在一个悠闲的下午,心情到位了,一如往常的想听听他之前收藏的歌曲迎合一下自己的小情绪,而他一打开酷狗,开屏页是5S广告,首页又弹出活动广告,如果误点了,说不定还要跳到哪位小姐姐的直播间去(酷狗的流氓引流手段,本人误点了很多次,次奥,人家用户压根就不喜欢看直播,你的后台不清楚?),而这个直播的加载过程非常卡顿和费时间,而你也不想看直播,再使用手势返回操作,结果多划了一次,又退出产品了,需要重新进,这个时候你是不是要裂开了?好心情都变坏了,甚至一边卧槽一边想当场摔了旧鸡换新鸡或者卸载软件!(特别是用了1年以上的安卓鸡)



(2)特殊群体用户:包含非适龄用户(年龄过大或者过小),非同等语言的用户(沟通有代沟,三观不同步)。

例如“全民K歌”,现在推出一个活动,要为祖国庆生pk,那么在推送的时候,是不是要考虑推送的人群,像那种只听唱摇滚嘻哈的,你认为他们会参加?就算他们参加,作品会不会跑题?会不会因为一个作品不符合节日气氛而让不明真相的网友喷的狗血淋头?既然这样,那你推送给他的意义就不再了,说不定适得其反。(有的朋友可能就要开杠了:全员推送,可以最大程度的唤起用户参与,就算不参与,也可以形成告知的效应,但我上面那条说了,部分用户手机卡顿,用户只想简简单单的用你的软件解决需求,你如果不考虑他们这部分人群的使用感受,就要天天挨喷)


问题总结:


遇到以上的问题,用户要么忍让,要么就是换软件,如果因为这些原因流失了用户,非常不值得(可能你会说,天下乌鸦一样黑,换了软件也逃不出这个套路,是的,市场的软件运营起来都是这个套路,搞钱!搞钱!搞好多钱!但是我相信,一款为用户着想的产品,最后不一定能赚大钱,但用户一定会感激产品的细节,为他流畅的解决了生活所需!比如微信干净的的聊天界面)。还有值得注意的一点,这部分用户如果能照顾好,将会成为你最忠实的用户,就拿将软件当纯工具的用户举例吧,ta很懒,你的软件是他的工具,只要你功能还在并且好用,他基本不会去换软件,即使别的软件摆在眼前,他都不会去下载(除非给他钱,相信我,钱到手了,他发现软件不好用或者用不惯,他会麻溜卸载),因为对他来说,用哪个软件,都只是工具而已,他用惯了你的,又觉得你的软件用起来很流畅,所以会一直用,只要留着他,他就可能随时在你软件上面消费。



细节思考,解决问题


上面的问题,其实就是同一个软件,需要以不同的方式去对待不同的用户的问题。


现在互联网各种ai技术均已成熟,且大体量的产品基本都有自己的后台去分析用户的操作习惯和路径,形成用户画像或用户的心智模型数据,我们掌握着这种数据,可以去使用以下方式对待小众的特殊群体。(拒绝杀熟)


(1)精准投送,减轻对特殊用户群的打扰:比如那个在“全面K歌”里面只听唱嘻哈摇滚的用户,通过后台分析,构建属于他的用户画像,然后下次推送“为祖国庆生“的活动时,则可以不必为他强制弹窗推送,留一个icon入口足够了,减少他的操作,给他足够流畅的体验。


(2)载入记忆,从哪里退出就从哪里进入:用户都很懒,特别是设备不好的用户,每次打开应用,载入时很卡顿,甚至在打开的过程中会放弃,那么我们可以基于用户画像,让那些特殊群体上次从哪里退出,就从哪里进入,(这里我解释一下为什么是对特殊群体才这样,因为如果都这样,首页不是没人看了嘛,活动还要不要做?产品还要不要吸金?打工人还要不要发工资?)而特殊群体,,,真的,他不想消费,你把刀架到他脖子上,他都不会消费。




结尾


我们做产品,要服务大众,也要为公司产生收益,但这不是我们放弃特殊用户的理由,微信之所以成功,是因为他真正做到了全民皆可用,聊天界面简洁,纯粹的为人民服务的好工具。甚至每一次小功能的更新都能上热搜,我们的产品比不得微信,但是我们服务用户的态度可以像它看齐。愿在坐的各位都能做出属于自己的“微信“


文章来源:站酷   作者:一剑生死 


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

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

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


响应式设计应该怎样做?

雪涛

响应式设计是一种页面设计布局,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

什么是响应式设计?

响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

简单来说就是:响应式设计是一种页面设计布局,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。


(来自百度百科)


自适应与响应式布局的区别?

实现页面设计布局的响应效果,除了响应式布局,自适应也是常用的一种技术。两者时常被混淆。


我们来概括一下它们之间的区别:



自适应

为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。


响应式

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。不必为不断到来的新设备做专门的版本设计和开发了。



响应式布局的优势?

提高用户体验

通过合理的设计方案配合规范的技术实现,使同一个页面在不同设备,提高屏幕利用率,最大化操作效率,在不同分辨率屏幕上都能有最佳的用户体验。


降低开发成本

响应式的设计只需开发一套代码,同时兼容多种尺寸的设备。不用同时维护好几个版本内容,只需维护一套代码即可。


降低设计成本

设计师需和前端程序员紧密沟通,确定响应几个宽度区间,以及对应的数值区间。根据响应式制定了一套能在多终端适配的设计方案,横向拉通页面以及容器布局的适配规则,一套设计规则能够高效适配多终端。


提高业务迭代效率

业务方在迭代过程中,会考虑多终端不同的使用场景、业务特性,响应式能够基于同一个客户端、后台和运营系统,一次运营多端同步生效,保障业务发展效率最大化。



响应式布局的设计要点?

设计师在做响应式设计时,不仅仅是单纯的缩放页面容器大小就可以了,需要有规律的进行设计,这样能够降低开发人员的开发成本,提高效率。并且需要在设计时,关注设计的界面,是否符合用户的操作体验,交互是否流畅,能不能在各个不同的终端给予用户最佳的使用体验。


响应式与栅格系统搭配使用

响应式设计的前提有两点:页面布局具有规律性;元素宽高可用百分比代替固定数值,而这两点正是栅格系统本身就具有的典型特点,所以利用栅格系统进行响应式的设计高效快捷,搭配使用能够提高设计与开发效率。


Ant Design为例:采用 24 栅格体系。以上下布局的结构为例,对内容区域进行 24 栅格的划分设置,如下图所示。为页面中栅格的 Gutter 设定了定值,即浏览器在一定范围扩大或缩小,栅格的 Column 宽度会随之扩大或缩小,但 Gutter 的宽度值固定不变。



什么是断点?

响应式页面中的容器大小是动态的,我们可以提供给开发在不同的页面宽度区间,对应的布局应该是怎么样的。而这些区间的临界点,就是“断点”。


如何确定断点?

进行响应式设计之前,与产品、前端开发人员共同商讨出自身产品的常用设备类型及尺寸,敲定产品所需要覆盖的设备类型,制定出几个适合自身产品的断点。


以Ant Design 为例:https://ant.design/components/layout-cn/  感兴趣的可以了解一下



为什么页面宽度区间以最小的宽度设计?

设计师在进行设计的时候,考虑极限值,以最小的宽度来进行设计,能够避免内容展示不下的尴尬场景。


响应式布局的响应策略方案?

Ant Design 两种较为典型的适配方案:


一、左右布局

常被用于左右布局的设计方案中,常见的做法是将左边的导航栏固定,对右边的工作区域进行动态缩放。



二、上下布局

常被用于上下布局的设计方案中,做法是对两边留白区域进行最小值的定义,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。



这两种非常简单的适配的思路,一套完美的适配方案需要设计师根据交互、体验、以及判断页面内容的层级等来进行设计。


三、内容增减

内容增减:部分模块在不同的内容会有显示和隐藏的状态,网页端的内容在大屏幕上展示的内容,在小屏幕场景中部分会被隐藏掉。


如下图:大屏幕中banner区域展示的推荐列表,在小屏幕中被隐藏。



四、布局调整

布局调整。主要是模块的排列和顺序发生变化,常见的就是内容的布局发生改变、模块一行的列数发生改变。


如下图:大屏与小屏幕中的banner的排列布局方式不同。



响应式设计如何交付?

设计界面需要符合前端开发人员编程的方法和需求,所以在设计过程中,需要与开发人员紧密沟通,并且输出对应的设计页面,作出标注,并且与开发人员沟通确定响应策略,而不是依靠口头传达。



在一些特殊的情况下,响应式的背景切图会和普通页面的背景切法不一样,尽可能与前端开发人员沟通清楚需要导出的文件。


总结

响应式设计是一种源自技术的概念,需要设计师与开发人员紧密沟通,共同配合完成。


在写本文之前,参考借鉴了很多文章,更加深入了解了响应式设计的设计原理,以上内容,是对于响应式设计学习的一些复盘及心得,希望对大家有所帮助,如有不同意见,欢迎指正!




文章来源:站酷   作者:船长的成长日记

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

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

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


运营设计中的视觉动线

雪涛

我们的作品信息的传递效率高吗?
什么样的设计是清晰有效的?
想要搞清楚这些问题,首先你得了解视觉动线这个概念。


本文3200字,主要分为三个部分,阅读时间约15分钟。



—————   

      动线


动线一词最早是源自建筑与室内设计领域。指的是人在某个空间内的移动轨迹。例如住宅空间的动线设计,我们会经常听到动静分离的概念,讲的就是动线的设计。住宅动线的设计目的是提高居住体验,减少在室内的重复行走轨迹。


例如家务动线的设计,从进门到厨房再到生活阳台,是家务劳动中最经常行走的路线。通过设计动线,减少家务劳动的行走,就能提高家务劳动的效率。在这里动线越短,效率越高。





在商业建筑领域,动线的设计也被频繁的运用。例如店铺的顾客动线设计,通过兴趣区吸引顾客,引导顾客尽量多的浏览店铺的商品,从而提高销售额。商业空间的动线设计讲究的是坪效(每平米的销售额),动线的设计更侧重迂回。




还有比如动物园、游乐场的路线设计,就涉及到游玩顺序的体验,以及缓解拥堵等问题。因此动线设计的目的在于提高效率,在家居和商业空间领域已广泛应用。而在视觉设计领域,也存在动线的概念。



————————

      视觉动线


大家在生活中有没有遇到这样的情况,你要找的东西就在眼前,但是找了好久仍然没有找到。


人眼之所以能看清物体,是因为视网膜中央有个很小的区域叫做中央凹,这个区域集中了大多数的视锥细胞,专门负责视力的高清成像。


但是中央凹的面积极小,高清区域有限。人眼只有在10度视角范围内才最为敏感,30度范围内可以分辨出颜色。这就导致人眼可视范围有限,一次只能产生一个视觉焦点。因此人眼在观察物体时,没办法一下子看到所有信息,需要逐个地移动搜寻,这种视线的移动过程,就构成了视觉动线


例如我们在阅读文章时,一般是从左到右逐行地阅读,这个阅读顺序就构成了视觉动线。如果文字的排版过于跳跃,没有规律,就会造成视觉焦点过多动线混乱的情况,容易出现阅读障碍,大大影响了阅读体验。





在视觉设计中动线的设计尤为重要,例如下图的banner,左图动线混乱主次不清。右图则能清晰地引导观众从左到右阅读信息,降低无效的阅读成本。
因此构建合理有效的视觉动线,将有助于打造良好的阅读体验,能更高效地让用户获取到信息,避免用户的流失。








我们以运营设计为例,来讨论一下常见的动线类型。在运营设计中,banner和活动专题是最为常见的,这类型的设计,画面往往很有感染力,内容丰富。这里介绍的动线,是指某张banner或者活动头部同屏类的动线轨迹。一般我们可以将常见的动线分为这几个类型:直线型、汇聚型、发散型、扇型、以及Z型。


———————

      直线型


直线型动线顾名思义,就是在一条路径上依次展示信息元素。我们以banner为例来看看如何应用。



在分析动线轨迹的时候,我们应该逐一地寻找视觉焦点。这个案例中我们第一眼看到的是左侧的标题,我们称第一眼看到的焦点为视觉入口点;紧接着视线转移到了右侧的龙身上。这就构成了一条清晰的从左到右的视线轨迹。


banner中只在标题和火焰上使用了色彩,其他背景使用较灰的色系,这使得视觉焦点突出,动线清晰。



2.1.1动线角度  

直线型动线在运用的时候,不一定都是从左到右的横向角度。常见的有对角线以及竖线的形式。


例如左图这张banner就是对角线式的动线轨迹。对角线具有倾斜的角度,容易塑造出速度感。因此这样的动线轨迹往往画面更加的有动感。而竖向的动线一般用在窄长比例的画面中,例如手机端的运营活动。右图的活动页面就构成了从上到下,从标题到主体人物的动线浏览轨迹。



2.1.2视觉焦点个数  

直线型动线中,人们的浏览轨迹是根据视觉焦点的位置进行的。在直线上依次排列视觉焦点,但并不是焦点越多越好,一般2-3个视觉焦点较为合理。较多的视觉焦点反而影响阅读效率。 



———————

      汇聚


汇聚型动线是将用户的视线聚焦到中心的一种动线轨迹。一般有多个视觉入口点来引导用户的视线。




例如下面这张banner,我们的视线会先被左右两侧英雄所吸引,延着他们冲刺的方向视线转移到了中间的标题,这就构成了汇聚型的视觉动线。汇聚型动线在元素摆放上一般具有引导性,最终目的是让观众的视线聚焦到中心,以突出中心的标题或者主体信息。



汇聚型动线的视觉入口点一般在2个以上,例如下面这张活动头部,通过两侧的烟雾塑造视觉入口点,引导观众视线汇聚到中心。是一种侧重突出中心内容的动线类型。




———————

      发散


汇聚型动线是由四周向中心聚集的动线轨迹,而发散型动线则相反,它是由中心向四周转移的动线轨迹。视觉入口点在中心,并逐步向四周扩散的动线类型。



例如下面这个暑假活动页面,就是视线由中心往四周转移的发散型动线。我们第一眼会被醒目的标题所吸引,这就是视觉入口点。之后视线逐步地往两侧移动,依次看到人物、书本、台灯以及两侧的云朵。构成了渐进式的视觉浏览轨迹。



而下面这个四周年的活动,最醒目的也是标题,它将观众的视线聚焦到了中心,之后逐步向四周发散。按照放射的方向,依次浏览了人物、按钮、奖励、圆球等信息。


可以看到发散型动线一般运用在有较多信息元素的画面中,浏览顺序层层递进,比较适合对信息元素进行归类阅读。


4.1入口点位置 

发散型动线一般是由中心往四周发散,视觉入口点一般在中心线位置。不过入口点也有位于边缘的情况。例如下面这张banner,作为视觉入口点的人物位于右下角,通过手势逐步引导观众阅读标题和玩具。是一种单边发散的动线类型。



——————

      


扇型动线一般会在中心线上塑造一个视觉入口点,之后保持着至上而下、从左到右的视线轨迹,这种轨迹就好比一把扇子。



例如下面这个手机端活动,我们第一眼会被可爱的小狗头部所吸引,之后视线往下,看到主标题和副标题,并按从左到右的视线轨迹阅读了标题。这就构成了扇型的动线轨迹。


可以看到扇型的动线轨迹保持了从上到下的结构关系,一般用在画面较长的版式中。容易塑造至上而下、内容由少及多的阅读关系。



—————

      Z


Z型动线是最为常见的类型,它遵循了人们从左到右的阅读顺序习惯。并且在长页面中可以一直做反复的延续。




例如下图的活动页面,我们的阅读顺序就是从左到右逐行地扫视关系。先是主标题,再是副标题,最后是木牌上的信息。这构成了循环的Z型动线轨迹。此类动线比较适合应用于文字类信息较多的画面中。







在动线的设计过程中,比较难的是如何去引导信息之间的先后关系。这里介绍几种便捷的技巧,如何更有效的来设计动线。


————————

      阅读顺序


第一种就是根据人们的阅读习惯来设计,也就是从左到右,至上而下的顺序。因为人的眼睛,左右转动所看到的角度和区域,要比上下转动所看到的要广阔的多。从左到右也是人们通用的阅读习惯和标准,横向阅读也更为舒适。在设计中我们只需要按照从左至右自上而下的规律来摆放信息元素,就能保证有良好的阅读体验。



——————————

      元素指向性


第二种是利用元素本身的指向性来进行引导,特别是主体人物的肢体动作、手势等。例如下图中的banner就分别通过人物的眼神和手势进行引导,让观众的视线转移到标题上,构成了很强的关联性。让动线的引导更为自然紧密。




———————————

      引导线的设计


第三种是引导线的设计,我们可以通过设计一些引导性的线条来引导观众的视线。常见的有放射线,或者虚拟的线条。

例如下图1的banner,就是通过左右两侧放射性的线条来增强引导,让观众的视线汇聚到中心,构成了汇聚型的动线。图2除了蜘蛛的视线引导外,标题文字的透视处理也构建出一条无形的引导线,让整个视线的引导更加紧密自然。在元素本身指向性不强的时候,引导线的设计能让视线的引导更加紧密,有规律。



—————————

      层级的设计


第四种是通过层级关系的设计来构建动线,也是经常要用到的方法,构建层级关系的方式有很多,这里只做简单介绍,有机会再跟大家交流。


例如下面这个活动头部,我们的阅读轨迹是从左到右的关系,先看到左边的人物然后是标题,最后是右边的人物,构成了直线型的动线轨迹。如果我们拉开人物之间的空间关系,我们首先会注意到离我们近的物体,依据远近关系,形成了一条视觉引导轨迹。这就是层级对于视线引导的作用。


通过层级的塑造,可以更有效的来制造动线,引导观众的阅读。



[ 小结 ]


综上,只要我们能够理解动线的概念和目的,在排列元素时就能有更清晰的目的性,设计更有方向感。信息的传递是我们构建作品和观众之间交流的桥梁,也是设计中首要考虑的因素。有效的信息传递才能发挥设计最大的价值。以上仅是个人的观感与体会,希望对大家有帮助。

文章来源:站酷   作者:Tony老司机
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



B端设计师·如何从0到1建立3D规范及组件库

雪涛

大家好,新年了,先祝大家新年快乐。这次分享一下自己学习道路上的小总结,仅此而已,以做纪念。希望能和大家多多交流。感谢。瑞思拜~


本次给大家带来一篇关于如何从0到1的建立一个符合自己产品调性的3D组件库,以及如何运用到日常的工作中去,并可以大幅度提升设计师产出的效率,起到降本增效的作用,还可以赋能给你的业务(尽量体现在汇报PPT中),让你在写年中年度总结的时候不会被问到,“你的价值又在哪里呢?”这种不得不回答的问题。虽然自己感觉还是做的不成熟,但是还是想分享给大家,自己也做一个沉淀,继续努力。我想在你看完这篇文章并且可以做出尝试以后,你和你的老板一定会喜欢。



一.首次升级改版

我们现在看到的无论是阿里云,华为云,腾讯云,金山云等等这些优秀的云产品设计当中,都在大量的使用3D建模渲染与2.5D风格互相搭配的运用。京东云官网也分别在4月和10月份各做了一次大的改版升级,很有幸都有参与到当中,那么就先说4月份的品牌站改版,以下的效果,用C4D的默认渲染器完全可以做到。


1.早期2.5D的积累

这次的改版是第一次从2.5D风格转向3D风格的探索性尝试。再此之前,设计师们有着3年多的2.5D风格组件库的大量积累。面向新用户以全新的面貌向用户传递科技引领,助力全球产业数字化升级,推动实体经济高质量发展的使命。

早期同学们积累的2.5D组件库。


第一次升级后的组件库。


第二次升级后的组件库。


2.组件库及规范的建立

在3D规范的产出过程中,我们严格围绕着新的设计策略「通用」和「差异」两个点相互融合,以提炼设计通用的元素,差异以规范为基础。根据不同的场景化的突出特点,3D及留白节奏的合理使用,突出3D的干脆,严谨,从而约束好网站的整体调性,让用户无论是在视觉感官体验上还是使用体验上都十分舒适。所以我们最后得到的四个关键词即为:探索、开放不封闭、共生攻坚和用户信赖。


3.建立组件库的四个维度

为了利用三维与二位的冲突感凸显视觉表现的主体信息,强化是觉得一致性。表达出通透和呼吸的开放组合。因而我们映射到了色彩,质感,字体,构成四个维度上。


/1.色彩:

在色彩上以京东红为底色,黑色代表着科技专业以及智慧未来。在规范出主色调的同时为了保持京东科技品牌调性的一致性规定了品牌的业务色及辅助色,同时也规范了使用颜色建议的搭配以及占比关系,作为设计师使用时的有效参考。


/2.字体:

在字体上,规定京东朗正体为品牌名称级产品名称字体,在楼层中的字体为方正兰亭黑系列,英文字体为思源黑体。字体行高的1.5倍行距,段落间的上下间距为字号的1倍。



/3.构成:

在构成上,用高度概括简单干脆的几何形式展现,既可以突出文字的信息层级,又渲染了整体的气氛进而增强了页面层级更加清晰的效果,强化了严谨的几何形体,让用户感受到秩序化。


/4.质感:

在质感上,三种不同的材质——金属材质、发光材质以及磨砂玻璃材质。


4.渲染及模型参数

在规范好了基础的四个关键点后,进行了渲染的尝试,最后投票确定了一套大家都认可的效果。并且产出了预设工程文件,方便设计师建立白模且通过设计评审后直接导入进行渲染。


5.动画的渲染及精灵图的制作

为了满足页面中部分鼠标移入移出的交互效果,我们渲染了动效以及精灵图的制作。关于精灵图的制作,在之前的文章当中我们有详细的说明和制作方法,这里就不再赘述。

以上就是我们的第一次3D视觉升级,这一次升级做的还是比较系统且完善的。从构建组件的价值开始到设计策略——竞品分析——实现策略——规范要求——模型——颜色——质感——构成——渲染——动画——应用场景和最后的开发上线。



第二次升级改版

那么到了10月份,为了更加贴合业务和升级产品调性。进行了第二次的改版,这一次的改版我使用了新的OC渲染器以及在原有的基础上做了完善和调整。


1.通用底座的新增

幸运的是这一次改版我就顺手了很多,还是老生常谈规定了规范说明、模型、品牌颜色、质感、构成方式等等。新增了对通用底座的规范。更加规范了使用。


2.HDR环境贴图

由于使用了OC渲染器,对环境的设定以及HDR贴图的使用变的十分重要,尝试了很多效果。


3.灯光参数

至于打光,没有做过度的布置。在环境亮度满足的情况下,只用了2盏补光,并且做了参数的说明。


4.组件配色占比

规定了每种颜色的占比参考。


5.组件渲染实例

下面看一些我们渲染出来的实例。以及我们优秀的小伙伴建模并渲染的Banner。

那么以上就是本文的全部内容,希望能对大家的日常工作有一些帮助。很多地方还不成熟,会继续沉淀把更好的东西分享给大家。瑞思拜。

文章来源:站酷   作者:能补拙
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



让数据更美!5个实用的数据图表设计技巧

seo达人


1) 颜色的运用

颜色的巧妙运用能为数据提供更加丰富的内涵。以最常见的红、黄、绿三种颜色为例,分别代表了不好、中性、好的意思。

图片

现在越来越多的产品愿意使用品牌色作为图表的主色调,通过调整品牌色的深浅程度,做成一组同色系的色板供图表使用,其中颜色越深代表数值越大,颜色越浅代表数值越小。

图片

如果觉得红黄绿这些颜色太普通,还可以考虑使用蓝色和橙色这类互补色作为调色板。

蓝橙色的搭配相较于红绿色更具有活力,用蓝色表示正值,橙色表示负值,对用户来说也容易理解。

图片

对于颜色的运用,最重要的是考虑可访问性,不仅是图表本身颜色的对比,还要考虑图表与背景色之间也要具有足够高的对比度。

 

2) 线条和纹理

除了使用不同的颜色,还可以在图表中添加线条或者纹理效果来构建多种多样的图表样式。

图片

选择一个基础色,在基础色的基础上添加点、横线、竖线、斜线、网格等多种填充样式,构成一套颜色统一但内容差异化的柱状图系统。

图片

线条也可以添加不同的纹理效果。由多种不同颜色的实线组成的折线图往往很难让用户快速理解其中的意思,我们可以为折线添加各种样式的虚线,来提高图表的可用性。

 

3) 响应性设计

如果要在手机上展示图表信息,需要考虑手机屏幕的尺寸对于图表的适配性。例如PC屏幕宽度更大,更适合展示多个竖向的柱状图。

图片

同样一组图表如果放到手机端展示,采用横向的条形图会更合适且合理。

手机屏幕宽度小,如果PC端的图表直接照搬过来,在一屏上只能显示几个图表,而且还需要用户左右滑动来查看更多图表。

这样的照搬不仅无法一下展示所有图表,缺少直观性和对比性,还会增加用户操作负担,显然是不可取的。

图片

▲如果觉得在手机上使用横向的条形图成本太高,又想让用户一下看到图表的所有内容,可以考虑使用“屏幕旋转”提示,告知用户把手机横过来看图表效果会更好。

 

4) 标签

标签是图表重要的组成部分,标签的长度、大小都会影响图表整体的效果。

比如有的图表尺寸很小,空间有限,但是标签却很长,如果尽可能在有限的空间中将标签展示清楚,值得我们去思考。

图片

在图表中并非所有内容都要始终可见,图表中的数据图就可以传达大部分的信息。如果觉得图表中展示的标签过多,可以隐藏次要的信息,通过鼠标悬浮或点击来触发这些内容。

图片

悬停状态是隐藏次要数据同时避免图表在视觉上看着太复杂的解决方法。在悬停时透露更多信息是渐进式披露的重要用途,用户可以在需要时进行交互,并且默认情况下不会造成页面混乱。

另外设计图表的时候,要做到提前规划标签导航,确定长标签的展示方式,考虑怎么放置不会让图表显得太臃肿。

 

5) 排版和层级结构

现在有很多仪表盘设计得很简约、很现代,这类仪表盘使用超大字号的加粗字体展示几项最重要的信息,既突出重点,又让整个页面有层次和对比。

图片

类似的排版能够吸引用户的注意力,通过前期研究确定几个用户最关心的内容,然后将这些内容重点展示,起到强调作用。

 

最后

最后设计夹整理了深浅两套数据图表源文件, 文件已打包好, 大家后台回复关键词即可领取。

领取方式:关注公众号,后台回复【数据图表】获取源文件

图片

 

慢慢来比较快,希望对你有帮助!

 

原文地址:CLip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》让数据更美!5个实用的数据图表设计技巧

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

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

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

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



工作经验| B 端产品组件设计细节及经验分享(六)

seo达人


1、树形选框和穿梭框的区别?

有同学问我:树形选框和穿梭框有什么区别?

其实这两种组件方案都可以解决 “处理多种选项” 的问题,两者的不同点如下:

 

树形选框

单一列表的树形选框,其特点为:

1. 通常适用于选项少的场景,不需要频繁上下滚动鼠标查看,选择后的选项结果一目了然。

2. 在页面中占的空间小,也可以放置在下拉菜单中使用。

3. 一般更强调关联性层级性。比如权限与角色之间的关联;角色与角色之间的上下级关系和权限包含关系。

 

穿梭框

双列列表的穿梭框,其特点为:

1. 用直观的方式在两栏中移动元素,完成选择行为。一列为源列表,一列最终被构建的项目列表,用户可以看到两个列表中的项目并进行操作,“数源” 和 “结果” 清晰可见

2. 占用更多空间,可以展示选项的更多信息,也可以包含更多结构,但左右两列的选项结构须保持一致

3. 一般强调权限是用于 “给予” 而不是 “复制” ,比如可以用于描述:一个权限从 A 手中转到 B 手中,B 拥有权限的同时,A 不再具备权限。

 

大家可以对应业务场景,选择更适合的组件。

 

2、按钮的状态设计

有同学对我说,他看到有的平台按钮的状态分为鼠标 “悬停”、“点击” 和 “按下” 三个样式;有的平台的按钮 “点击” 和 “按下” 的状态一致。所以按钮的状态是根据什么来做定义的呢?是不是越全面越好呢?

 

1. 按钮状态的设计理念

其实关于按钮的状态分类,在能够给用户基本操作反馈的前提下,并没有绝对的好坏之分。平台之间出现这些差别的原因是由设计系统的设计理念风格来决定。

举个例子,下图是一个比较夸张的案例:某个组件系统的设计理念是【尽可能模仿真实世界中的交互状态】,图中按钮模仿的就是真实世界中的物理按钮反馈状态,但由于页面上的二维世界不具备三维世界中的“海拔/高度”的概念,所以更多是通过改变或增加颜色、动效、投影等,对按钮进行“高度”的体现。

图片

对于真实世界的按钮,有一些关键的大按钮,在按下去之后会有一种 “咔嗒” 的碰触感,意在告诉用户你已经成功按下了按钮,这对应到二维世界,就是图中按钮的“点击“的效果。

而物理世界的按钮在按完之后虽然会弹回到原位,但很有可能是慢慢恢复到原位,也很有可能是不会回到 100% 的原位,比原位稍微矮一些,所以图中点击后的状态相比于默认状态就缺少了按钮下边缘的厚度感,或者是颜色变得更浅 / 更深,以此来体现差异。

以上所说的组件设计风格,是一种拟真的设计风格。也有一些公司的设计语言,可能是扁平化,追求极简主义,所以会省略这当中的过程,只传达给用户最干脆、直接的反馈。

因此组件的状态效果,在能够给用户明确基本操作反馈的前提下,并不是 “对错” 或 “好坏” 的问题,而是由根据产品定位、功能特性和产品用户的行为偏好等因素来定的设计理念所决定的。

 

2. 组件状态是不是越全面越好?

这个问题最重要的判断标准是:业务 / 产品是否需要。在业务组件库搭建的初期,一定是以业务为主,“从业务中来,到业务中去” 。当你的业务中对于同一个组件有大、中、小的尺寸需求时,你再做规定也并不晚。这样的好处是:

  • 做好的尺寸规定直接运用到业务中,有现成的检验场景
  • 不至于白费功夫,做了一大堆的尺寸分类和说明但无处应用;
  • 尽可能减少设计师在查找和使用组件时的多种选项干扰

另外要注意,如果做了多种尺寸,你需要详细的规范每一种尺寸可以使用的场景和注意事项,避免误用和混用

很多时候并不是内容越全越好。“全” 但不好用,也会带来新的问题。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》工作经验| B 端产品组件设计细节及经验分享(六)

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

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

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

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




画面很空怎么办?最彻底的一次改稿案例

seo达人

图片图片

 

 

最彻底改稿开始了!

 

图片

 

 

 

图片

 

看到这张图时,最吸引眼球的恐怕并不是产品而是鲜艳的色彩。

图片

 

吸取颜色后发现三者色系都非常饱和,影响到了视觉对于主次的着重点。

图片

 

配色上的占比弱化了产品无法被直观的表达,甚至体现不出产品本身的品质。

图片

 

 

 

图片

产品在一张画面中,除了解决信息内容的编排外,还需要帮助这个产品烘托出整体的氛围感,就像如今都需要美化包装的时代中,酒香不怕巷子深恐怕已经很难再去吸引住客户的目光。

图片

 

 

 

图片

我们分别以艺术、商业、极简三种需求方向来对这次的设计进行三次改稿,记得收藏关注起来。

图片

 

 

 

 

图片

偏抽象化的圆形表现出灯在聚焦光源的过程,符合具有艺术造型的灯饰所传达的美学。

图片

 

 

常规的文字编排貌似影响了所要传达的艺术魅力

换!

图片

 

 

用画面四周塑造一个外边框,沿着边框放置文字编排,可最大化的提升内部视觉空间,将着重点锁定在产品上。

图片

嫌背景太简单?那填个色吧,看起来刺眼怎么办?

那就弱化背景的色彩,减少对视觉与产品的影响。

图片

 

[优化输出图像]

 

 

 

 

图片

 

最常用的编排构建原理,可以有序建立出视觉和信息的层级。

图片

 

放大文字占满上下的版面,产品放置在中心点,利用色块分割出主次关系。

图片

图片

作为商业性案例,增加光感是必不可少的,把灯打开以提升画面的质感氛围。

[优化输出图像]

放置文字信息时,想必大多数甲方对金色的执念已经深入骨髓,那就换成金色,以满足客户的同时,也解决了文字主题的醒目。

[优化输出图像]

再来对比下画面氛围对商业性设计的重要性。

[优化输出图像]

 

 

图片

一个纯底,一次简单的图文编排,沿着视线引导下的信息切入产品,点亮了简单却有品质的生活。

 

图片

想到粉丝说老板喜欢有撞色的设计,于是在上方增加一个互补的绿色。

图片

利用冷暖与色彩的强弱关系制造出引导视线的作用。

 

图片

 

 

回到原图,同样也是冷暖的撞色,但产品是在中心,而不是在左右两侧,缺少明显的强弱关系会容易干扰视线引导的方向。

[优化输出图像]

 

最后来自粉丝的反馈!

图片

源图像

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》画面很空怎么办?最彻底的一次改稿案例

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

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

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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档