首页

2022追波设计流行趋势

博博


追波年度最佳作品

追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ✪,作者来自越南西贡,最佳作品截止目前355K浏览量,2933个赞


为什么看似平平无奇的作品却能获得追波年度最佳作品呢?既不是C端也不是纯B端的作品,更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮,你可以理解它就是一个平面作品,一个字体加几何形体构建的作品,为了丰富画面的层次,让画面更加的活泼采用了多彩加几何色块,让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出,这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。


MetroUI是Windows8的界面设计语言,在2010年至2013年间曾经风靡一时,那也是移动互联网的发展元年,现在国家推行实体经济、数字化带动To B 、To G 的发展元年,通过几何色块(MetroUI)实现B端产品与C端设计风格的传承与衔接,你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风,毛玻璃的多彩高斯模糊渐变风,年度作品当之无愧。


最后来看下按钮的设计,正常的按钮要么文字加色块,要么左图标加右文字,它设计成左文本加右图标,更加注重信息的可读性和易读性,也体现B端设计重功能和交互体验,视觉点到为止的设计理念。


下面我们来欣赏年度最佳作品里面的流行趋势吧。


易读性(停顿感)

字体三原则:可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章,肯定设计文章的内容可读性更好。易识性是用在字体设计上,不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关,因为我们都需要编排文本。当我们小时候写作文时,不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感,更加适合用户阅读。


通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容,丰富文本内涵。比如情侣间表达爱意时会输入文本,“我爱你”、“我Love你”、“我ai你”、“我❤️你”,哪个更加会有情感共鸣呢?不言而喻,相信你心中已经有答案了。



曲线

在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一,第一个设计目的就是突显文字,其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中,签字的文本都是手写体的感觉,手写体对比电脑的机械字体会带有一种人文气息,也会让两者之间产生一种对比、矛盾


除了突显文本外,曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试,通过真实用户眼睛浏览界面显示对应的热点图。



多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的,多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程,多彩渐变多为冷暖对比来制造画面的冲突,需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。


多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新,给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上,为了更好的传达信息需要去设计与内容相匹配的视觉风格。




B端界面设计


侧边栏Sidebar

B端设计的火爆带动了B端相关模块设计,更多的人也愿意尝试B端相关模块设计,侧边栏作为产品架构中重要的导航系统,好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果,也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计,而是一套实用美观可落地的设计。



仪表盘设计

仪表盘设计是一个很好的隐喻,想象一下开摩托车或汽车主驾驶前面的屏幕,汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态,大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据,团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同,自定义的仪表盘也各有差异。重要的是突显数据和业务状态,需要分层级系统性去思考和设计。



流程设计

复杂的事情简单化,简单的事情标准化,标准的事情流程化,流程的事情自动化。流程设计是每一个企业核心功能和业务,可自定义的管理流程系统搭建也是B端产品设计的难点,需要对业务高度抽象,让每一个业务人员可自定义的流程才是好的流程设计。



B端C化

B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐,国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外,由于业务的发展,B端产品也开始移动化、智能化,国内主流还是通过小程序、H5来现实B端产品C端化



轻代码化

轻代码化是一种低代码赋能无代码的方式,弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时,又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统,轻松实现多元业务场景的数字化管理


轻代码化将功能进行打包,升级成全局可以用的配置,技术人员配置好后,业务人员在应用编辑时直接选择使用模版,绑定对应的变量即可使用。




界面设计技巧


人文气息

为什么人加色块的组合方式能流行起来?还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外,还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起,这种人文气息和价值观已经就不言而喻了。


当然企业也需要进行营销,抓人眼球。几千年来的遗传证明了,人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。


这种风格更适合大公司,国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合,而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。



毛玻璃效果

毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素,界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”,完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权,具体安装购买方法可以上“某宝”就可以轻松搞定,真香。




轻拟物

轻拟物这几年一直流行,在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物,其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光(环境光)五个部分的处理。写实三维的图标等设计更适用于简洁的画面中,扁平等设计更适用于复杂一点的界面中,比如B端产品界面中的功能图标。轻拟物可使用的范围更广,效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。




简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则,在B端产品界面中更加需要简洁设计,我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加,产品界面的编排如何取舍,如何保证界面的简洁是设计师需要深度思考的问题?如何与上级沟通?该功能是否可做可不做?是否需要埋点用数据说话?如果只是一味竞品有我们就需要有,功能不断累加只会让界面越来越重。



几何图形

几何图形和几何插画有异曲同工之妙,几何图形多为产品界面和宣传内容的抽象,产品界面的几何图形多为占位符形式,加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中,几何图形、几何色彩不失为最好的突破口,相信今年追波B端产品的视觉设计一定会更上一个台阶。



几何图形另一个场景化的地方就是品牌,作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程,品牌设计的技巧基本还是以几何图形为主,至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。



暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大,如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳,提高在夜间使用的可读性


在设计暗黑主题时,不能为了突显视觉上的逼格,而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则,即正文和背景之间的对比度应至少为15.8:1。按照此标准设计,可读性都还不错。这里介绍一个插件“Stark”(Figma、Sketch、XD、Chrome插件)用来测试界面的对比度。



模块化(组件化)

为什么叫模块化,而不叫组件化,组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面,但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提,是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一,它能提高设计师的系统化思维、逻辑思维和抽象思维能力


产品模块化设计就是将产品分成几个部分,也就是几个模块,每一部分都是具有独立功能,具有一致的连接接口和一致的输入、输出接口的单元,相同种类的模块在产品族中可以重用和互换,相关模块的排列组合就可以形成最终的产品。通过模块的组合配置,就可以创建不同需求的产品,满足客户的定制需求 。




插画

插画作为设计的一大品类,不同的插画师都有自己擅长的风格,本质是都有自己的个性,但是在产品设计中更多是需要共情、共性来讲故事,表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合,插画不会过时,而是需要结合当下和产品找到最匹配的设计风格。



几何插画

几何插画算是插画简化的一种表现形式,人和物的形态不再写实,而是抽象成几何图形拼凑的感觉,同时保留人物形态的神韵。加上几何色块与人物交互形态的表现,传达出简洁、科技的现代感。难点还是在人物形态的表现上,平时多练习练习速写还是很有必要的。



线面插画

线面插画最近一两年非常流行,准确的说是非常适合。首先线面插画主要是由线条和块面组合而成,用块面表现人物形态时某些结构会表现不出来,这时候用线条简单勾勒后,结构就会清晰明了。其次当线面插画运用在界面上时,可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时,还能保持界面的干净整洁。




动效


微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计,微交互和动效设计是绕不开的,UI界面设计通过微交互反馈告知用户当前正在发生的事情,所处的状态。细微的动效更能调动用户情绪,取悦用户。C端产品微交互和动效已经很成熟了,一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品,还需要给前端工程师灌输微交互和动效的设计价值,共同打造产品体验细节。



Mg动画

Mg动画需要很好的节奏感、韵律,每一个场景动画都需要其中的元素进行连接变化,让转场动画更加自然,MG人物动画通过点线面的动效变化让画面更加有趣、自然,通过粒子效果让特定场景无限循环会让人更加印象深刻。




三维


三维图标

MacOS Big Sur系统图标的更新带动了三维图标的流行,三维图标的应该场景还是需要有较大留白空间的界面,因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上?设计师应该保持开放多元的视角。设计本身也在不断的演化融合,存在即合理。合适最重要,它们都会有适合自己的场景和设计价值。



轻三维

为什么轻三维在界面设计中占有一席之位?一个是设计师不断追求差异化的产物。另一个是更好的表现内容,并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素,比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等,这些都是用户日常使用系统软件常见的元素,通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角,结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加,特别是当下流行的毛玻璃效果,玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光,局部的渐变色或环境光更佳出彩



P4D(PS+C4D)

P4D是PS加C4D的设计表现技法,也是视觉设计的最后一个环节,通过PS对C4D的渲染图片进行调色,利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵,还可以利用PS强大的合成功能,将渲染图片与图片素材进行合成,来表现画面的视觉度,当然三维软件比较难实现的水、粒子、烟花等效果,也可以通过PS的后期合成来实现,这也是P4D的强大之处。



卡通IP

卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟,卡通IP也从传统的纯PS手绘技法,转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS(静态)/AE(动态)调色


卡通IP火的本质更适合做营销,相比于品牌或Slogan,卡通IP具有亲和力和画面感。随着各种手办行业大热,受互联网大厂影响下,卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人,也可以通过绘制好二维,一套三维可以选择外包完成。


对于UI设计师来说学习是有成本的,暂时并不是必备技能,如果喜欢完全可以学习,从设计差异化的角度来看三维视觉确实有一定的竞争力



三维动画

C4D三维场景动画通过构建实物和场景模拟生活中的现实场景,会让用户体验真实感,三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感,未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势

作者:水手哥。    来源:站酷

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

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

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

分析2022年大厂新孵化的App,一起发现它们设计的独特之处

资深UI设计者

以下是碳水Sir在App Store发现的几款“宝贝”,之所以称为“宝贝”是因为产品中可学到的东西太多了,每个产品视觉UI以及动效都有其独特风格(当然网上也有别人总结过的产品,我这里就不拿出来重复说了)我仅针对未总结的大厂产品,进行设计细节拆解,看看优秀的产品设计到底好在哪里,请君细细品味。





(淘宝 - 屋颜 - 一站式潮流家居平台)
(字节 - 抖音盒子 - 潮流时尚电商平台)
(腾讯 - doX多克斯 - 生活碎片视频社交)
(淘宝 - 吃货笔记 - 记录美食好生活)
(得物旗下 - 95分 - 奢潮二手平台)
(腾讯 - PODO漫画 - 独特交互体验漫画阅读平台)
(荔枝 - 皮玩 - 语音社交平台)
(陌陌 - 咔咔 - 实拍互动交友平台)

排名不分先后,从以上几款产品logo中不难看出,图形设计都偏向于具像化,传递出正向的情绪,颜色方面使用荧光黄、青绿、渐变粉等凸显年轻、大胆,富有朝气。


1.屋颜


第一眼看到这个名就有被惊艳。首先屋颜是屋檐的斜译,檐变成颜,中华文字博大精深,读起来也不违和,同时也直观呈现出产品定位属性。logo采用字体设计手法,“屋”字经过设计手法使线条呈现出立体空间感,也间接体现出产品是和房屋软装相关,同时为屋内添置“颜色”(软装)相关的产品。一个logo两层含义,通过字体设计以及谐音表现,巧妙的融入其中。

·




直观来看,页面大量留白,图片质量高级且风格统一,均采用素底作为产品首图,很好的提升产品整体调性。
图形方面均采用直角元素,配图、banner、按钮、icon无一例外;细线风格设计使产品极具品质感,有种无印良品的现代极简主义风潮。也叫MUJI风。
瓷片区的配图采用线性+2.5D风格,使画面富有空间层次,能撑住页面头部重要位置,且再次突出产品极简主义风格。当然还有空状态、无网络环境下的配图等等都很统一。




动效方面最值得关注的是下拉刷新,使用吊灯作为下拉效果,当向下滑动时电线被拉扯长,但断不了,给人以安全可靠的产品透传,也算是通过创意设计助力产品体验的手段之一。释放刷新时,轮播不同的家居icon图标,再次强化定位产品属性,且刷新时不至于乏味。
加载状态采用+号线条旋转表现,同时在结尾变成一个方形,这么极简的设计之前其他产品从未出现过,同时它也符合屋颜的产品调性(新家软装要做加法,仅个人理解)也算是一个设计亮点。




最新颖的是产品特有的【3D实景逛店】功能,进一步强化家具与室内的强相关性,为什么这么说,单从买家具上,线上买前只能靠照片来间接联想买后填入家中的情况,并不能按照自己习惯多角度查看家具。又或者因为忙,没时间去线下家具馆,或者怕白去一趟,通过【3D实景逛店】快速解决这部分用户需求。同时,也给线下家具馆增加了更多曝光度的可能性。




至此,屋颜的设计细节讲解就结束了,希望产品体验越做越好。


2.抖音盒子


抖音旗下的电商平台,整体风格清爽直观,绿色与紫色搭配也是一种时尚风。相比其他电商产品,抖音盒子没有金刚区图标设计以及营销类的占位图,相反金刚区仅展示奢侈品实物图,产品图大小做了统一,视觉呈现很高级,同时下列瀑布流商品中首图没有活动促销等信息干扰,只展示商品图,突出其时尚潮牌好物的特性,同时也与当前清爽、高级的设计风格相一致。




几处设计细节值得参考,首先是底部Tab栏点击动效,承载抖音logo的故障风效果,黑色+紫色故障效果一来告知与抖音具有相关联性,是旗下电商产品;二来黑色Tab图标能很好的压住“紫绿主色调”的跳跃感,不至于太过俏皮脱离电商属性。
并且图标的整体性与统一性都做得很好,“小红点”的设计采用品牌色“小紫点”呈现(小小的颜色改变),更加强化了产品风格与调性的统一,(小红点并不是只能用红色)这点值得学习。




最后想告诉大家,产品在每个阶段设计形式都会发生改变,比如1.0.1-1.0.2可能是轻微调整,1.0.0-2.0.0就是大的视觉升级。可能因为产品发展或用户变化,使得产品设计风格发生改变, 但要知道每个上线版本一定是当前方案的最优解。就如你看到的“抖音盒子”现在是1.9.0版本号,或许在不久的将来就会全新升级。这就不得而知了。


3.doX多克斯


是一款短视频社交平台,与其他社交产品不同,doX主打短视频内容社交,用户通过拍摄上传有趣的短视频内容,来认识志同道合的朋友。虽然与抖音同为短视频平台,但抖音更侧重视频分发,而doX侧重于通过视频与用户建立联系,一个视频下可以跟拍多条,有点像qq以前的漂流瓶,只是换种呈现方式。这种陌生人视频交友有一丝“探探”的味道。




设计上面单看logo以为会沿用手绘线稿类似的风格。整体使用下来,仅在我的页面顶部背景中用到,其余均采用断线像素风icon设计,绿+白的设计风格,可能也是为了营造出一种陌生人交友的科幻感觉吧。
发起拍摄页,背景会有噪点动效,也是营造一种拍摄前无镜头的感觉,引导用户随手记录。




最后产品的切入方向很新颖,但是否能在短视频风口分出一杯羹就不知道了,但目前来说整体设计风格框架已搭建起来,剩下的就是不断填补及完善设计,使其更加统一,希望doX越来越好。


4.吃货笔记


第一次接触“吃货笔记”就被页面整体设计风格吸引。粗线图标+拟物图标形式空前新潮,给人眼前一亮的感觉。它类似于“大众点评”,是个宝藏探店美食分享的平台。通过线上探店选择报名-自行到店-发表动态-上传票据-提取饭票,来获得优惠消费的同时提高平台UGC内容的产出。可惜的是目前仅支持【广州】店铺(可能是先做小范围本土化尝试然后再逐渐扩大地域),外地用户只能看看界面并不能真实使用,这点很遗憾。
动态布局也很有创意,第一张大图,其他小图呈现,五宫格的样式使布局统一,且更好突出第一张图的主视觉层级。




如今本地餐饮服务平台已经做得很好了,“吃货笔记”在尝试从优化福利流程、视觉表现、设计手法等多维度探索新的操作形式,这种身先士卒的精神值得尊敬,单说设计表现的细致,就以超过了大部分产品。当然,每一款好的产品离不开设计,更离不开产品功能是否真实满足用户需求,让用户使用轻松、解决需求后是否带来爽点。




图标用色很鲜明,均采用3D质感表现形式,能看出设计上面下了很多功夫。底部Tab栏选中图标也采用3D质感表现,与金刚区和空状态图标形成呼应,增强产品风格记忆点。产品目前的评论和下载量都不像没推过一样,可能产品分享度不高导致很多一部分人不知道,所以增加徽章模块评价打卡获得奖励,并以此成就来满足用户心里预期,从而增加使用黏性和传播分享。




最后这款产品设计表现都特别出众,通过空状态文案等内容也能看出产品的个性特征。例如:“虾米都没有,快看看其他的”,还有很多小的设计细节,这里就不一一说了,大伙儿自行下载体验一下吧。


5.95分


95分是得物旗下的分离出来的全新App,主打潮流闲置交易平台,而得物定位是新一代潮流网购电商,两者还是有所区别。但从UI设计角度,还是能看到得物的影子,潮流前线,并且整体风格时尚统一,很多细节值得在这里展开说说。




整个设计清爽直观、没有多余装饰元素,这就要求图标必须做到极致,才能撑住整个页面。我罗列了一下可能出现的图标,轻质感毛玻璃效果,结合统一的渐变元素使得每个图标都精致耐看,值得研究。线性图标也是一样,整体配套,这套图标应该下了不少功夫。




在二手平台存量竞争的时代,能有一款产品尝试新的设计风格,并且把近几年火起来的毛玻璃风格相融合,这种走在设计前线的作风与95分产品潮流前线的调性一致,单说设计尝试这种做法就已经超越了大多数产品了。


6.PODO漫画


毫不夸张,这款产品打开了我对交互表现与实现的新认知。我看了一下最早发布是去年9月27日,到目前为止短短8个月时间,就能让PODO这款产品的交互设计做到如此优秀,背后依靠腾讯,也有游戏元素的影子,这就不足为奇了。




使用下来基本没有太多图标元素,更多是把屏幕空间分给了动漫封面,一行三个动漫排列,背景与主体人物分开,滑动时二者在空间层进行错位,营造一种错层的空间感,使原本扁平的图像瞬间立体了许多很是新奇。




点开动漫详情,图文信息依次从上到下展开,引导用户视觉享受,并且头图中的动漫人物也做了动效设计,全览下来很是细致。除此之外,还有三个明显的交互细节,分别是:设置页展开交互、阅读页底部导航交互以及目录页的交互样式,都以新的表现形式呈现出来,作为设计师的我们现在不能再说:“设计已经玩不出新的花样”这样的说法了。




太多的交互动效就不一一列举了,赶紧收入囊中吧!


7.皮玩


通过了解得知“皮玩”是荔枝App旗下控股产品,同样也在入局陌生人社交领域。但值得注意的是该产品上线1个月,内部框架及UI界面已相对完整,卡片、插图、动效、图标、以及一些趣味设计都已上线,应该是一个成熟团队孵化的项目,上线前的测试应该没少下功夫,才能在产品初期做的如此完善。logo采用渐变黄底+吐舌头表情相结合,搞怪趣味要用嘴说话这样的印象。定位:更好玩的语音社交算说得过去 。




初次体验,第一感受就是采用贴纸风的设计元素,icon与元素都具有较强的设计感,饱和度较低的配色加上白色描边,就如产品说的“玩一下、皮一下”相呼应,产品的整体颜色采用渐变黄和渐变绿,配色很大胆,同时体现出该产品用户所代表的具有兴趣多元化、喜欢尝鲜这样一个群体。同时产品也是想通过这种设计吸引用户使用。




产品中处处都能看到微动效,使静态的画面变得活泼许多,这种做法也是为了给用户营造一种活跃的氛围,增加平台活跃度。


8.咔咔


咔咔是陌陌孵化的一款社交产品,最近发现一些大厂旗下产品都在独立运营,目的也是为了和主产品脱离关系,防止激烈竞争导致产品停止运营。年前很火的“啫喱”想必就是吃亏在这方面。回归正题,首页是以视频为主图片为辅的瀑布流形式呈现,停到某一位置则直接循环播放该视频,排版方式极具新颖,当体验下来眼球左右移动总是会打断我信息的获取,有点强制引导用户看大图视频内容的感受。点开则可以与对方进行互动点赞评论。




看看模块,采用类似“探探”卡片交互左滑不喜欢右滑喜欢来让用户进行操作,但与“探探”不同的是此互动是开放的,用户选择满意的动态内容添加到卡片后,陌生人可看到展示内容,并且她被多少人喜欢都会展示出来,相当于是个人名片,有种抖音+探探的味道。并不具有一对一的个人隐私性,这是与探探最直接的区别。




看看模块中,“打招呼”是与对方建立私聊的唯一方式,如果该用户已关注但未打招呼,把卡片划走,那再也不能与对方建立私聊,除非对方通过“看看”模块与你打招呼。这个产品细节很容易因为用户不理解或者手滑就无法与上个用户进行“打招呼”私信,且私信功能仅在触发“打招呼”后才能交流,入口少、且不易理解,不知道是产品经理的有意为之还是被遗漏掉的地方。




消息页的添加入口,用折叠手法展示,降低频繁跳页的割裂感,同时缩起时也不会占用消息列表。
消息列表是通过“打招呼”保存下的私密消息,聊天形式极具特色,黑色背景加上红紫渐变列表有种夜店嗨皮的即视感观,这里就不过多评价,大家领悟吧。




设计中还值得关注一点,就是个人主页中的个性标签,我罗列出22个,当用户发表三个同类动态即可点亮一个标签,此标签也会代替文字描述承载动态内容的作用,用户选择已点亮 的icon即展示对应标签内容了,相当于动态中的标签分类,但前提发表动态时选择对应你标签,不然发表后的动态不能二次修改。这种通过标签点亮的功能也是为了让用户UGC内容更加多元化,同时也想通过标签来吸引用户多多发动态的。创意点是好的,但是否能达到好的效果,还是要拭目以待。




相比其他产品,咔咔是我一直关注的产品,同时也是特别喜欢的产品之一,所以我分享给你们。


9.结语


设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。
认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。

本期产品细节分析结束,点击原文链接查看更多,我们下期再见!

作者:碳水Sir;公众号:草蓉三石



作者:碳水sir

链接:https://www.zcool.com.cn/article/ZMTQwMzM4OA==.html

来源:站酷

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


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


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


                         

浅析:设计趋势之开源设计

ui设计分享达人

什么是开源设计(Open Source Design)

在讲开源设计前,我们或许可以先讲讲开源一词是指什么。

开源全称开放源代码,开源软件最大的特点是开放,也就是任何人都可以得到软件的源代码,加以修改学习,甚至重新发放,当然是在版权限制范围之内。虽然开源一词最初是为软件开发而创造的,但现如今开源所涉及的领域也极其广阔,并不只是包括软件领域,如医药领域的药物开发开源、文化领域的书籍到期开源等等所以开源设计已包含了更广泛的含义,它包括了由任何人或者团队自由共享、协作的设计方案、项目、产品。

我们来看几个大型开源的设计了解一下~

开源设计资源举例

Ant Design

阿里的开源系统后台组件库

https://ant.design

ECharts

百度推出的开源图表

https://echarts.apache.org/

Unsplash 

全球知名图片开源平台 

https://unsplash.com

所以我们不难发现开源设计都有以下特点: 

免费(大部分是):开源设计的一个关键要素是它们通常(但不总是!)免费。这是一个重要因素,因为闭源设计通常需要花费不菲的价格或者冒着侵犯版权的风险去使用。 

思想碰撞:更多的设计师或者创意爱好者共同为一个创意提出自己的见解和再设计。


设计开源领域广阔:设计开源领域也几乎涵盖了所有的设计和创意领域如平面设计、三维设计、用户体验设计、环境设计、建筑设计、服装设计、插画、动画设计等等 

但是许多人可能会有一个疑问,开源设计和以往的素材网站或者源文件售卖网站有什么区别呢? 

在我看来,开源网站与传统售卖设计资源的网站最大的区别是开放与共建,以figma的社区为例,作者发布作品后,任何人都可以对其作品进行redesign甚至remix,这极大的提高了设计师的兴趣,每个人都希望自己的作品能被他人看到,也希望自己的创意能与他人的创意进行更好的结合,这是一个多么美好的场景。而传统网站只是冷冰冰的展示文件售卖资源,缺少了设计中的灵魂。 

那说了这么多,开源设计到底有哪些优势呢?

开源设计的优势 

提升设计效率:设计师不应花费时间去解决别人已经解决的问题,比如当我设计一个新项目时,无需从零开始设计系统组件,可以直接使用Ant Design、Ant Mobile Design等现有组件库。


增加学习机会:通过开源社区,设计人员可以从其他人所做的项目中学习,并与专业人员交流经验。 

提高设计质量:设计师自己看本人作品时,往往是身在其中不知如何下手,而将作品发布到更广泛的社区有助于设计师获得有价值的反馈以改进他们的作品。 

提升品牌价值:对设计开源后,公司品牌能在某些领域内获得传播,提升品牌价值。并且在招募人才时也能成为有吸引力的一项条件。 

提升个人价值:一个设计师想要提升个人价值和影响力,可以用开源作品来在行业内获得一定口碑,甚至直接将用户流量转化为订单,或许是更简单且容易的事情。 

从这些优势中不难发现,在开源生态中,我们的作品不再是一座孤岛,通过互联网,我们的作品可以和任何人进行链接并且产生共鸣,提升品牌和个人的价值,所以每个人都值得感受开源的美好。 

但开源的同时不可避免的会带来许多新的问题和挑战,让我们一起来看一下。

开源设计带来了哪些挑战 

知识产权问题:在开源社区中,设计师可能不清楚其创作的知识产权。因此,他们可能会不自知地侵犯其他设计师的知识产权。 

设计门槛问题:设计开源意味着设计师的门槛变低,任何人都可以随意使用开源的设计项目,导致设计师不再愿意花心血创作。 

设计师竞争力下降:开源设计意味着普通的设计内容已不需要单独的设计师来完成,顶尖设计师的机会会更多,而普通设计师的竞争力会明显下降。 

随着这些挑战的来临,如何更好的面对设计领域的开源是值得深思的问题,既要保护设计师的自身利益,也要让设计行业在开放、共享的环境下拥抱变革,所以在未来的道路上,我们每个人都可以尝试用自身的方法去探索未来,让每个人都能成为时代浪潮中的一朵浪花。


作者:芝麻侃设计
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者:芝麻侃设计     来源:站酷

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

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

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

3600字拆解微信键盘丨地主家的小儿子真是又帅又有才

资深UI设计者

微信键盘发布啦!拥有12亿用户的移动端巨无霸微信发布微信键盘了!就在本周一,预热近两年的微信键盘终于发布,这款微信之父张小龙口中的——不搜集任何隐私的输入法工具,总算揭开了他的神秘面纱。廖尔摩斯第一时间全面体验了微信键盘,通过三天的使用,我也成了微信键盘的脑残粉,这篇接近3600字的拆解,将会告诉你,这个地主家的小儿子,为什么又帅有才!


一、产品拆解


作为一款工具类产品,需要更注重产品的用户使用体验,所以此次产品拆解主要基于尼尔森十大可用性原则和常见的设计基础理论,比如格式塔原则、费茨定律等。我将会分为基础功能、个性化功能和个人隐私三个部分进行拆解。


1. 基础功能
1.1 键盘管理
键盘是输入法最基础的功能,根据每个用户不同的操作习惯,微信键盘为用户提供六种类型的键盘,分别是九宫格、全键盘、笔画键盘、手写键盘、五笔键盘和双拼键盘。在五笔键盘和双拼键盘中,还为用户提供了多种偏好设置,比如86五笔方案、98五笔方案等。


设计思考
相比行业头部老大哥搜狗输入法,微信键盘的类型相对还比较单薄,比如像搜狗输入法还支持生僻字键盘、拍照转文字等特色功能,不过作为一个V1.0.0版本,这也遵循了如今产品设计的主流设计模式,小步快跑,快速迭代。
1.2 键盘输入框
「输入框」是用户实际操作和使用的功能,这是最基础、最重要的功能。微信键盘的输入框界面风格非常简洁,和IOS默认键盘风格相近,目前仅有一款默认皮肤。


1.2.1 长按技巧
长按「拼音键」,可选择更多相关字符,比如数字、大小写等。其中长按「JKL」拼音键,可切换至「单手模式」;长按「中英文」键,可切换至「手写模式」,非常方便。


1.2.2 智能删除复原
这个小技巧使用起来特别方便,在我们删除一段文字的时候,经常会出现误删的情况,微信键盘设计了一个非常巧妙的功能,按住「删除键」左拉可以删除文字,往右则可以把删除的文字复原,提高了产品体验的容错性。


1.2.3 上滑输入数字符号
这个功能需要在系统设置开启,在键盘输入的时候,只需要上滑「拼音键」,就能直接把拼音键对应的数字拖到输入框,节省切换数字键盘的操作步骤。


1.2.4 特殊符号
「特殊符号」不仅包含了常见的10种类型,横排26键的设计更能让用户直观地找到自己需要的字符,使用起来体验非常友好。相比搜狗输入法超过20种的符号类型,微信键盘简洁的设计为用户提供了更高效的选择,带来了更友好的体验。


设计思考
少即是多。相比搜狗输入法的大而全,在特殊符号这个细节的设计,微信键盘让我爱不释手。首先应用了7±2效应,在用户的短期记忆里,降低记忆负荷。其次也应用了席克定律,减少用户的选择,降低消耗的时间成本,从而提升用户体验。
1.3 偏好设置
1.3.1 语音转文字
从识别语言观看,微信键盘支持普通话、粤语、英语、四川话和上海话,笔者亲自体验一番,发现识别准确率还挺高的(贵阳话,和四川话接近,超过80%准确率)。


1.3.2 声音和触感
「声音和触感」指的是用户使用键盘按键的声音和触感。这里有一个非常贴心的设计,当用户手机静音的时候,打开声音开关按钮会提醒用户当前处于静音模式,无法听到按键声音。这就是尼尔森十大原则的防错原则,在用户出现操作错误之前,通过设计提示提前避免,你可以想象如果没有这样的提示语,如果你的手机不小心静音了,你就会懊恼为啥键盘没有声音,这个软件是不是出问题了(笔者亲身经历)。


1.3.3 显示设置
微信键盘支持用户可设置键盘候选字的大小,这里也有一个非常贴心的设计,当用户调整字体大小以后,如果想要恢复默认大小,只需要把滑动组件拖动到已经标记的默认起点就可以了,这应用了尼尔森十大原则的易取原则,用户无需记住默认大小设置,如果想恢复,拖动标记的起点即可。


1.3.4 模糊拼音及其他
「模糊拼音」主要针对拼音基础欠缺的用户,提供模糊的拼音设置,从而提高输入效率。其次微信键盘还提供「首字母自动大小写」、「双击空格输入句号」和「智能添加空格」等偏好设置,用户可根据自己的操作习惯进行设置,获取更便捷的体验。


2. 个性化功能
个性化功能主要指微信键盘最特色的「拼写Plus」功能,这也是微信键盘发布以后给用户最大的惊喜。
2.1 智能推荐
「智能推荐」是微信结合自己强大的生态设计的一个功能,在用户输入文字的时候,系统会自动判断文字的类型,比如输入一本书的名字,系统就会提示是否需要向好友发送这本书籍。从内容类型看,包含了音乐、视频、读书、小程序、视频号和公众号。这个功能在用户的聊天场景中,实在太方便了,比如作者过去要给好友分享自己的公众号,还需要去公众号搜索、转发,如今只需要输入「设计大侦探」的名字,就可以向好友直接发送,减少了数步操作路径,极大提升了沟通效率。


2.2 表情推荐
表情是微信聊天场景中必不可少的一个元素,甚至有很多用户特别喜欢收藏表情,它可以用于各种聊天场景,活跃聊天的氛围。微信键盘的表情推荐,通过用户输入的词语,可以自动识别可能需要发送的表情,无需用户收藏,就可以为用户自动生成。这个功能非常赞,特别像笔者这样从不收藏表情的用户,当突然需要输入一个表情活跃一下气氛的时候,我只需要输入一个「大家好」,微信键盘就能为我提供数十种表情,满足我的需求。


2.3 智能拼写
「智能拼写」是指当用户输入某个词语时候,系统为用户精准匹配候选词,提高输入效率。笔者尝试了输入「梅西」,几乎可以根据智能匹配输入一段完整的文字。而微信生态更为恐怖的是,它会自动结合当前的话题标签,用户可直接跳转至话题的视频号动态,一键查看更多信息,让用户彻彻底底对微信生态的服务上瘾。


2.4 拼写检查
「拼写检查」是指系统会根据用户在输入文字的时候及时发现错别字,一键精准改错。这个功能设计得非常贴心,能让用户及时看到书写错误,降低因错别字带来的烦恼。


2.5 常用语
过去在微信聊天的时候,为了提高输入效率,我会把很多反复发送的文字复制到备忘录或微信收藏,这能提升我一定的沟通效率。但相比微信键盘的常用语功能,我以后就会直接放弃之前的两个形式了。这个功能实在太方便了,比如每一次粉丝添加我的时候,我都会需要介绍一下我们公众号的内容,现在我只需要输入前3个字,这段话就可以直接出来了,极大提升我的沟通效率。


2.6 单手模式
「单手模式」是指用户可根据自己的惯用手或场景设置输入模式,前面我有提到过,长按「JKL」拼音键,可切换至单手模式。


2.7 手写找字
「手写找字」是一个支持同时手写多字的输入模式,这个功能对于我们父辈一代的用户特别适用,他们多数人还未习惯用拼音拼写,更喜欢用手写的形式去输入,而支持写多字的模式可以极大提升拼写效率。


2.8 小结
什么是以场景为中心的设计,微信键盘的设计团队告诉我们,这就是以场景为中心的设计。过去设计者总是在思考如何去定义人们使用的系统和应用程序,而“以场景为中心”的概念,则强调要以人的需求为中心,系统和应用程序要去帮助人们满足他们的需求。看看微信键盘设计团队结合如此多真实场景的设计,可见设计师真的需要具备场景思维,才能设计出让用户尖叫的体验。
3. 个人隐私
3.1 清空个人词典
微信键盘提供了「清空个人词典」的功能,这有点不可思议。不过微信键盘的创立之初,微信之父张小龙就说过,微信将上线属于自己的专属输入法,其目的并不是为了抢夺输入法市场,而是为了更好的保护用户的隐私。不过该功能大家要谨慎使用,一旦清空,你所累积的个人词汇就会清空,将会影响你的输入体验。


3.2 帮助反馈
针对微信键盘使用的技巧和常见问题,微信键盘也设计了帮助反馈文档,为用户解决使用过程中的困惑。很多产品设计师或许觉得这样的模块可有可无,但这其实这就是尼尔森十大原则的人性化帮助原则,通过帮助文档为用户解决软件使用困惑。


3.3 隐私与权限
“我们非常重视你的隐私安全。我们谨遵最小、必要原则,仅依《微信键盘隐私政策》获取你使用微信键盘的功能所需的你的信息,不会额外获得你的其他信息”。这是隐私与权限页面的一句话,足以见得微信键盘的定位如上文所言,只做一款单纯的输入法软件,不侵犯用户的隐私。


二、设计总结


作为一个才上线发布V1.0.0版本的输入法产品,微信键盘真的给了我太大的惊喜。
从产品的易用性来看,无论是交互,还是界面,都严格遵循了尼尔森十大原则的标准。这个产品设计中最基础的设计理论模型,事实上,太多的工具类产品都没有遵循它的设计原则,我们常常说一款工具难用、不好用、设计不好,就是这些操作细节没有考虑进去。而微信键盘,在我目前的使用操作过程中,暂时没有,易用性非常高。
从产品的创新性来看,微信键盘不仅满足了一个键盘输入工具的基础功能,而且结合了自身强大的生态环境设计了「拼写Plus」这样非常创新的功能。它帮助我实实在在地提升沟通效率,比如一键推送我的公众号、和粉丝沟通的常用语等等,甚至破天荒的可以直接在聊天输入框分享我喜欢的歌曲、书籍、电影、视频号等,换做以前真的不敢想象原来这些功能可以通过一个输入法软件实现。
我已经彻底成为微信键盘的脑残粉了,即便某狗的输入法显示我已累计输入超过4百万字,但微信键盘给我使用的尖叫感,真的让我不可思议,就像那汹涌的潮水,一波又一波袭来,让我尖叫!


作者:设计大侦探作者:设计大侦探
 来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。                           

垂类品牌年轻化重塑—有驾品牌升级

资深UI设计者

有驾是百度旗下汽车信息与服务平台,累计用户超5.3亿,为用户提供真实可靠的看选买车服务,为车企和经销商提供一站式营销方案。


什么是“有驾”

【有驾】是百度旗下的汽车信息与服务平台,累计用户超5.3亿,致力于为用户提供真实、可靠的看选买车服务,以及为车企和经销商提供从品牌到效果的一站式互联网营销解决方案。

现状分析

有驾品牌在孵化初期,重点是在用户词建立品牌感知。所以我们提取“有驾“的字形做为品牌符号,减少歧义,强化用户的感知。

但是随着品牌持续运营进入新的阶段,我们发现现有的设计无法满足后续的运营诉求了,主要体现在:

品牌logo:不能体现汽车的行业属性,缺乏成体系的品牌符号和VI体系,色彩上也不够符合时下潮流的年轻配色体系。

品牌活动:品牌关联度弱,活动维度单一。



项目概述

因此,我们重新梳理有驾的品牌定位与调性,借助本次品牌升级,打造有驾差异化风格,形成独有的视觉印记。

因为用户对于旧的logo已有一定的认知。所以此次改版的目标在保持固有用户认知,在原有基础上进行品牌标识的探索及应用,以强化品牌感知,提升品牌的竞争力,整合业务资源做心智触达。





前期分析

前期我们对汽车垂类的竞品进行了一轮调研,并且结合有驾的用户群里,寻找有驾品牌的差异点。

有驾用户群体年轻化为主,普遍具有高学历,集中在新一线二线城市。

通过以上在用户、行业及行业趋势等多唯独的信息搜集后,我们确定了有驾品牌设计的四个核心关键词:年轻、科技、未来、专业。



建立体系

在明确设计方向后,我们梳理了线上线下的所有品牌触点,结合前期的调研结论,汇总出了有驾设计系统的完整框架,以确保品牌设计的完整性和灵活适用性。




设计落地

基于前期分析洞察结论,我们在继承圆形和车形的基础上,对品牌符号与icon进行了大量的方案探索。从图形、质感等方面切入,简化图形形态,尝试不同的形态呈现的视觉感受和气质。最终确定了全新品牌logo方案。




相对于升级前,新版的logo加入汽车元素,解决升级前logo的行业属性不明确的问题,让产品app的行业属性更加直观。同时增加品牌符号做为底纹,辅以有驾的圆形符号成为品牌核心的一部分。强化有驾的品牌基因。





符号提炼

确定品牌logo后,为了确保品牌能够更好的拓展应用,进行了品牌符号的提炼。并为了延续之前的品牌调性。所以辅助图形延续了之前的圆环造型,造型偏向轮胎;在不破坏原有型的基础上,加入一些折角的质感的变化,使图形变化更加丰富,更有识别度。





设计语言

为了更好的触达到各业务场景,所以我们对视觉风格进行了探索和拓展。分别以浅色与深色作为主要探索方向,以适配不同的落地场景。结合有驾的年轻化,科技感的设计目标,探索出以下三种质感呈现:






符号拓展

在提取的形状基础上进行变形,增加折叠细节。在大事件活动,海报等场景使用,增加品牌关联度。




设计字体

结合全新的品牌定位,我们也优化了有驾的品牌字体,从细节出透出有驾的品牌感知。




品牌手册

新的品牌需要一套更全面的品牌系统来满足不同场景下的业务拓展需求。

目前我们也对现有的品牌手册进行拓展和完善,同步到业务方,以便更好的保证各业务场景触点下品牌的认知和统一,达到提质增效的目的。



品牌落地

除了对品牌对角度的塑造和升级,我们更积极的把品牌渗透到活动、栏目包装、大事件运营、品牌海报等各维度场景中,让有驾品牌形象更加立体多元。









结语

目前有驾品牌升级已经取得阶段性成果,沉淀出更加完善的品牌资产,不仅提升设计效率保证全链路的品牌曝光,也为业务规模化打下基础。之后我们也将不断完善和扩充品牌资产,将设计成果不断落地到业务中,细化业务目标并与设计目标紧密结合,多维度助力业务的高速发展。





作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

                           

对智能座舱HMI设计的展望

博博

前言:

1886年,由卡尔·本茨发明的第一辆汽车距今已经有130多年了,汽车座舱的发展已经来到了一个新的阶段,现阶段我们称其为智能座舱。它不仅有着先进的数字化仪表中控大屏,还有流媒体后视镜、抬头显示、智能空调、智能氛围灯等功能,看得见的看不见的地方无不凸显着科技进步带来的变化。

作为HMI设计师,在这个领域也工作了许久,对于智能座舱、HMI的设计有了些见解和思考,本文试图通过总结实车座舱、工作经验、设计来展望未来的HMI设计趋势,以及尝试分析作为HMI设计师我们应该如何在设计这一领域去赶上智能汽车发展的风口。希望这些想法能让刚入行或者想入行的设计师同学们对于HMI设计有一个帮助。

目录:

一、时代变革下的智能座舱——“第三空间”

二、科技发展带来的设计需求改变

三、用户体验带来更高的设计要求

四、情感需求引领新的设计方向

五、总结

一、时代变革下的智能座舱——“第三空间”

随着自动驾驶等技术的进步,智能座舱最后将围绕座舱电子、座舱内饰全面升级到移动的“第三空间”,将信息、娱乐、互联等功能进行全面融合,为消费者提供更便捷的体验。汽车将不再是代步工具,用户在车内即可实现娱乐和办公,汽车有望进化成为家庭、办公场所之外的“第三空间”。



尽管也有人认为汽车只是个代步工具,但更智能化更数字化的智能座舱就是大势所趋,各家车企八仙过海各显神通,不停进行车辆的智能化升级,提升智能座舱的体验,软件定义汽车,这是行业的共识,许多互联网公司也加入了这场战争。

在这样的背景下,作为设计师的角度,看着智能座舱的智能化在不断提升,我们对于HMI设计有了些思考。我们认为会有这几个方面带来HMI设计需求或要求的的变化:



二、科技发展带来设计需求的转变

硬件技术的革新带来体验形式的改变,而完善的设计升华用户对于新科技的体验。在“未来”还没有到来的时候,发挥设计的主观能动性能,能让现在成为更好的现在。好的视觉体验不应只是数字化的体验,硬件能够给予视觉更加完整,更加丰富的体验感受。智能座舱科技能力不断提高对设计有了不一样的需求。作为设计师,关注科技和车机硬件技术的进步能够拓宽我们的视野,延展设计的画卷。

·用户从驾驶者到决策者到转变

传统的HMI由中控系统,屏幕,⽅向盘控制等模块组成,受限于应⽤场景⼤多只满⾜于⾏驶功能,强调的只有⼈和⻋的关系,但随着⽆⼈驾驶解放了⼈的双⼿,⼈和⻋的关系将被重新思考定义。

1、通过设计提升自动驾驶的体验,增强用户的使用信心:

自动驾驶模式下,通过摄像头特、毫⽶波雷达、超声波雷达等扫描记录下当前⻋辆所处的环境信息,将路况信息和道路周围环境车辆等信息进行可视化呈现在屏幕上。在这个过程中,除了硬件的可靠性能否扫描出周围环境车辆物体之外,可视化的视觉设计也会影响到用户的信心。

交互层面,需要有更多自动驾驶可视化图像的交互思考和创新,例如当开启自动驾驶的车辆在一个复杂的十字路口等待红绿灯是,周围复杂的情况会让用户恐慌,特斯拉的fsd就会在停下等红绿灯时,抬高视角,这种方式可以通过屏幕的可视化信息观察到更多路况车辆信息,从而让用户对机器产生信任感。

视觉层面上,一般来说识别度比较重要,能更直观的展示模型可视化信息就好,但是可视化信息的表现形式可以作为视觉设计的重点,可以是线性模型,也可以是白模等等,要去契合车机的主题、颜色、概念,又要达到可视化的要求。



2、不同的主题模式以及新的视觉风格:

作为决策者的汽车用户当然需要更多的主题颜色或主题风格选择,他们不再简单要求能用就行,不仅仅是更好用的交互,对视觉设计当然也有了新的要求。

一般来说,现在的车机系统最少都要有一套黑白模式,分别匹配白天黑夜的的驾驶场景;有的更是需要在越野、城市、长途情况下有不同的视觉主题界面;或者是运动和沉浸驾驶有不同的界面风格,这些根据需求都是需要去考虑的,如何匹配视觉设计。最常见的黑白模式来说,在设计其中一套的过程中,就要去考虑如何适配成另一套,比如白色模式下的卡片投影,在黑色模式下如何显示,如果不显示投影如何去区分卡片。



设计的视觉风格的趋势不是一成不变的,我们认为他的发展是螺旋式上升的,手机的UI最开始的拟物风格满满的向着扁平化发展,但扁平化后大家又开始追求拟物,后面就诞生了轻拟物风格和2.5d等风格,现在又流行简约3d风格。以前由于车载芯片性能等问题,随着车载芯片、屏幕性能的不断发展,未来的HMI设计风格绝对不会一尘不变,他同样也会追求不同的设计风格,轻拟物、简约3d图标甚至3d界面的交互都会不断产生甚至已经产生,也要求设计师去了解和掌握更多的设计风格。



·数字化、智能化的变革

电动汽车行业飞速发展,智能AI和人际互联等人车交互概念也跟着兴起,对于中控台的需求和功能复杂度也跟着越发精细起来,全液晶显示和HUD已经成了基本操作,炫酷、科技感爆棚的HMI设计成为标配。

1、越来的大的车载屏幕:

燃油车时代评价一辆车不可避免的会讨论汽车三大件:发动机、底盘和变速箱。但是智能座舱时代,不少人戏称新的三大件是:彩电、冰箱和沙发。虽然是戏称,但是我们也可以看出来大屏幕车机等提升座舱体验的设备越来越成为用户购买汽车的一个指标。当然也有人不这么认为,但是市场是很诚实的,大屏幕的车机就是更受欢迎,笔者曾问过一个刚毕业几年准备买自己人生中第一辆车的朋友,你买车会在意车的中控屏大小吗?他的回答是:当然会,大就是好。



可以看出,作为HMI设计师,面对的情况就是越来越大的屏幕尺寸和分辨率以及越来越多屏幕数量。这也给了设计师更多的发挥空间。交互上可以有更多的交互形式,同时也有了更高的视觉要求,需要有场景、有主题、有氛围等等等。作为座舱内最显眼的屏幕,也不简单是呈现功能那么简单,它也成为汽车内饰的一部分,除了车内的氛围灯,屏幕内也需要呈现更多的设计美感。



2、虚拟现实技术的发展:

虽然前文提到了驾驶员不再是单单驾驶者,但是首先驾驶这一需求是不会消失的,其次且随着自动驾驶的发展,用户也希望能通过虚拟现实技术看到更多的信息来帮助自己完成抉择决策。未来虚拟现实增强技术将在安全驾驶方面扮演着更为重要的角色。虚拟现实增强技术对于用户而言,具有很大的直观性,通过结合现实路况信息,实时出现一些虚拟箭头来直观地引导我们前进,从而避免在驾驶中出现开过路口和分散驾驶员注意力的情况。

其实目前大面积应用的hud也算是虚拟现实技术的一种,AR-hud早已经成为了现在智能汽车的标配,未来几年,我认为会有越来越的的用户摆脱低头看仪表的习惯,hud可以帮助驾驶者更便捷更安全的获取驾驶、车辆、车道等信息。



我们都知道hud这一技术最早是作用于军用战斗机的,随着技术的进步虚拟现实技术会不断下放到民用汽车上,所以作为设计师对这方面的技术也需要有更多的了解,如何运用在汽车上,设计出更加符合汽车操作和行驶逻辑的虚拟现实技术的视觉信息。

另一个方面就是虚拟成像,科幻电影中的虚拟成像来进行互动和对话或许也会成为未来的HMI设计趋势,但这可能要很久以后才能实现了,或许同元宇宙一样久-_- !!!

三、用户体验带来更高的设计要求

以用户更能理解、更能接受的方式展现全新的智能化座舱,提升操作的舒适性和高效:用更简单的方式传达更直观的信息。这是我们在用户体验基础上做设计需要做到的。

用户对于智能座舱的操作不熟悉,产生不信任感,我们需要以设计为连接点,和用户沟通。科技满足人的基本需求,艺术升华体验。在科技飞速进步的当下,科技研发固然关键,以眼睛为窗户让用户体验到科技的进步同样不可缺少,帮助用户用视觉感受未来、提高体验是作为设计价值的最高追求。

·沉浸式的体验感

当车辆从工具变为一个能够让人沉浸和享受的空间,在原有的交通属性之外增强智能座舱的空间的娱乐属性。当在车内等待或者不想下车在车内躺一会,小憩、k歌、电影等可能都是会干的事,露营、闲聊等也可以是智能汽车提供的环境。所以我们需要将有限的画面变成无限的遐想空间。

1、契合功能的氛围设计:

不要好奇为什么有人为什么会在车上睡觉,会在车上看电影,但是这个需求是一定存在的,作为“第三空间”,这是智能座舱应该要胜任的能力。

设计师需要做的就是打造契合这些场景下的氛围感,通过氛围灯音效可以打造出一个适合观影、聊天的氛围,前文提到屏幕也是车辆内饰的一部分,也需要通过视觉画面、动效去一起营造这个可以沉浸的氛围。



2、视觉设计的画面感:

当科技满足了基本需求后,我们需要更出色视觉设计来升华用户的视觉体验。屏幕作为一幅画框呈现我们想要的画面,我们认为HMI的界面设计会更多的趋向于整体的画面感以及场景化,通过打造一个屏幕内的场景空间,在服务和交互体验上突破创新,给用户体验智能座舱的沉浸式体验空间。

目前已经有不少汽车的都已经用场景化的UI来上到自己的中控仪表上。场景主题的HMI已经不只是单单的概念无法落地,虚幻引擎技术的加入也能让更多的三维场景能够落地到实车上。



传送门

·信息内容需化繁为简

智能座舱的一个很大的特点就是几乎将所有车内功能按键、报警都搬进了屏幕内,那么几乎所有的信息都要通过屏幕获取,所有的功能都需要通过屏幕点击操作完成,但是当所有的内容信息功能都堆积在一起时,任谁看着都会产生信息焦虑。

通过设计去凸显重要消息和重要功能是解决问题的重要方法。许多汽车中控屏都将空调和座椅的快捷操作加入到了屏幕的底部dock栏,因为空调是使用频率十分高的功能。交互层面的设计需要做到简化常用功能的使用层级步骤,视觉设计需要做到让重要功能显眼易操作。



传送门

·一触即动的反馈

我相信所有人都会认为如果车机使用起来如果不流畅,体验会很糟糕,特别是如果极其卡顿,会不愿意使用,这也是许多人驾驶车辆的时候宁愿放着更大的中控屏不用,而去用手机导航的一个重要原因。受制于车载芯片的性能和屏幕的质量,过去确实这种卡顿是没有办法解决的。但是这些随着芯片性能和技术能力的提升,或许芯片已经不是造成车辆卡顿的罪魁祸首。

如果车机上的动效做的不够流畅舒适,也会产生“卡顿”感,同样是对用户体验的破坏。所以一定要做好动效反馈,掌握好动效节奏,让用户感受到一触即动舒适感,是可以大大提高用户体验的。关于具体的动效设计受篇幅影响就不展开了,我认为这一块车机与手机和pad上的动效体验一致,苹果靠着极其出色丝滑流畅的动效设计让人使用起来体验感十分舒适。界面中的元素彼此关联,而非独立存在。好的动效设计是在界面中某一个元素发生变化时,与之相关联的元素也会产生逻辑上合理的变化。动效不是独立存在的,而是彼此关联着的。界面是由元素所组成的整体,所以当界面中的某一些元素发生变化时,周围的环境也会受到影响。

动效设计像交互设计、视觉设计一样已经成为用户体验的一个重要组成部分。一款具备舒适动效标准的车机系统能给车主带来更好的客户体验。当然,做好同开发的对接也很重要哦!!!



四、情感需求引领新的设计方向

当科技水平很高且生活中处处是科技的产品,人类就会越加渴望高情感的环境。科技本身并不是冰冷的,它带有温度、灵感、和情感;科技也不是孤立、静止的,它在不断地寻求自身的发展并拓展与人类的关系。我们需要通过设计让科技与用户完成情感上的交流,让其更具有艺术感和亲和力,让车机从“孤岛”成为乌托邦。

·是助手更是伙伴

语音助手通过智能对话与即时问答的智能交互,实现帮忙用户解决问题,而智能语音助手在智能座舱中的地位越来越受到重视。在功能的基础上,如果智能语言助手能够跟有温度有情感,用户也能够更信任系统,拥有更好的使用体验。

如何让语言成为助手和伙伴呢,我们认为如果只是冰冷的vui光效反馈,是做不到温度和感情的,可能我们需要一个语言形象。当用户唤起语言是,会有一个具体的形象出现在屏幕上或屏幕外,让用户产生与系统对话的感觉,产生愿意与其对话的意愿,建立情感触点;另一方面,也可以打造一个提高汽车品牌产品力点IP形象。



所以语音形象的设计,我们认为也是HMI设计师需要考虑和思考的,需要设计出契合品牌的IP形象,来成为用户的专属语音助手和伙伴。他or她需要有丰富的表情、丰富的肢体动作,甚至有情绪来与用户进行互动反馈,从而达到提升用户体验的目的。

如何设计出一个有温度有情感的语音助手大家可以翻翻之前发的文章车载智能助手设计:智能座舱的合作伙伴》,希望能对大家有所帮助!!!

·无微不至的细节设计

博大而深沉的情怀让人赞赏,但微小而细腻的情感让人感动。总有人能够被某个看似平凡的细节深深打动,这便是细节设计的价值,我们精准的去定位用户群体,探索用户的情感需求,当然希望能够做出打能够做出打动人心的细节设计。除了下面几个点当然还有更多的细节设计,就需要在设计过程中去慢慢体会和发现了了。

1、多模态交互方式:

人机的交互方式早就已经不再是单单的触屏操控,理想L9的后排屏幕,通过手势或者语音都可以进行操作,将手放在屏幕前半米外的位置挪动,屏幕就会有光标跟着手移动,握拳就是点击确认,尽管这种交互方式目前来看还有瑕疵,但是作为设计师看到的应该是在车上,会有更多更自然的多模态交互方式出现,可不仅仅只是手势,通过文字、语音、视觉、动作、环境等多种方式进行人机交互,充分模拟人与人之间的交互方式,这不只是个噱头,而是实打实的体验设计。语音不就是一个典型的多模态交互的方式吗。我们相信会有更多更自然交互方式,让人既自然更加自然,做到“无感”的舒适。



2、情感化设计:

前文说到语言助手的设计需要情感,但情感化设计是不仅仅体现在语音上,其实情感化设计是共通的,这是一种设计思维,这种思维可以体现在很多设计方面,比如,我们在视觉设计上也可以去传递感情。而我们认为,未来的HMI设计在很多地方都需要去考虑到用户群体的情感共鸣。下面这个例子,重型卡车的仪表设计,钢铁元素是赖以生存的车,“门”是向往的家。依托大卡车司机在慢慢长路上对家的思念和向往,用“门”的元素去撬动这种情绪,以情感作为窗口,去引起卡车司机的共鸣。



传送门

五、总结

HMI设计当然不仅仅只有这些,还有很多,我们试图总结一些关于HMI设计师需要去思考去了解的东西。新能源汽车的快速发展,同时也带着智能座舱有了更高的需求,随着这些因素,智能座舱对设计的要求无疑会越来越高。作为HMI设计师也需要对技术带来的革新变化有敏锐的观察能力并思考;同时也要有充足的知识体系和思考发掘能力去完成提高用户体验的设计;同时也要有代入式的情感去进行情感化的设计.... 等等等等。这当然也不是一朝一夕的事情,也需要我们设计从业者伴随着快速发展的汽车这个行业一同去进步。共勉!!!


作者:EPUX      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

HMI灵感-仪表盘(深色风格)

博博

1备份@1x.png2@1x.png



作者:博博
      来源:大作



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

HMI灵感-中控(浅色风格)

博博

1@1x.png2@1x.png

3@1x.png4@1x.png



作者:博博
      来源:大作



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

HMI灵感-仪表盘(科技风格)

博博


1@1x.png2@1x.png3@1x.png

作者:博博      来源:大作



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

「无畏·无界」比亚迪智能座舱UI创意设计大赛

博博


「无畏·无界」比亚迪智能座舱UI创意设计大赛
收藏
「无畏·无界」比亚迪智能座舱UI创意设计大赛
收藏
「无畏·无界」比亚迪智能座舱UI创意设计大赛
收藏
「无畏·无界」比亚迪智能座舱UI创意设计大赛
收藏
「无畏·无界」比亚迪智能座舱UI创意设计大赛
收藏
「无畏·无界」比亚迪智能座舱UI创意设计大赛



作者:YoueSir      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

日历

链接

个人资料

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

存档