首页

万物皆可异质同构

seo达人



很多人做的设计过于平庸,主要原因是图形部分太常规,比如单纯以产品图片、人物图片、某个元素或者是一幅普通插画作品作为画面的图形。这类图形缺少变化、缺少视觉冲突,所以很难有眼前一亮的感觉,也很难让人产生兴趣。而有一个简单的技巧,可以轻松解决这一问题,即异质同构。

图片

图片

图片

图片

图片

这个技巧大家肯定不陌生,这样的作品比比皆是,但是对于该技巧的使用还是有很多讲究的,首先,从设计的形式上来看,异质同构主要分为三种形式:

 

1.置换材质

即只保留一个事物原本的造型,而其材质用另一类元素进行置换,比如水材质的面膜、牛奶材质的人、云材质的鞋子等等。

图片

▲用水材质替换面膜原本的材质,以表达面膜的补水功能。

图片

▲把正在打篮球的小男孩做成牛奶材质,以表达该牛奶可以促进儿童健康发育、补钙等诉求。

图片

▲把鞋子做成云的质感,以表达该鞋子轻盈、舒适的卖点。

常见的材质有金、木、水、土、玻璃、皮、塑料、纸等等,如果通过材质就能识别出某些产品或者素材,那么就具备了使用这一技巧的基本条件。

图片

▲把甜菜置换成甜菜汁材质,表达了榨汁机超强的榨汁功能。

图片

▲把腿的材质换成仙人掌,腿毛则变成了仙人掌上的刺,表达了刮毛器超强的刮毛功能。

另外,想要置换材质的效果很好,那么对设计师的执行能力要求比较高,通常是通过合成或者3D渲染来完成。

图片

图片

 

2.组合堆积

即按照事物B的造型,用数量众多的事物A来进行有序的排列组合或者是堆积,比如把塑料瓶堆积成一座小雪山,用葡萄堆出一瓶果汁,用蔬菜组成一个汉堡等等。

图片

▲用塑料瓶堆积出来的雪山装置,用以号召大家不要乱扔垃圾。

图片

▲真实的葡萄被设计成了一瓶果汁的形状,以表达该果汁真材实料、健康之类的的诉求。

图片

▲用纯蔬菜堆出两个汉堡,以表达蔬菜汉堡这一诉求。

在做堆积或者组合时,首先要能保证元素A与B的识别性,另外元素的排列要有序,而不是胡乱堆砌,要注意图形的美感和质感。

图片

▲用树叶、鲜花组合成“肺”的造型,以表达该椰汁可以给你带来由内而外的美好感受。

图片

▲鲜红的心脏细看却是用拳击手套组成,创意概念是:为生命而战。

图片

▲用“提子”组成的饮料瓶子,以表达该果汁原滋原味的诉求。

图片

▲用蘑菇以及手动加工的工具、配料等元素组合成蘑菇的造型,表达了该产品真材实料、纯手工制作、品质绝佳等诉求。

 

3.质感对比

即把某一事物的局部置换成符合原有造型,但质感不同的另一种或另几种事物,以形成鲜明的对比效果,比如上本身是男人、下半身是女人,左边是汽车、右边是滑滑梯,一边是导弹、一边是铅笔等等。

图片

▲把男士维修工人的上半身与女芭蕾舞者的下半身结合起来,以表达捐献器官可以让你拥有两次不同人生的诉求,这是一个器官捐献组织的公益广告,画风奇特的画面很有视觉冲击力。

图片

▲把汽车的前半截置换成滑滑梯,以传达清洁汽车的引擎,可以让你的旅途更愉快。

图片

▲把导弹的前半部分用铅笔的笔尖替代,以表达语言可以消灭战争的诉求。

质感对比的做法有两种形式,一种是对称图形,即左右两个不同材质的元素在造型上是相同或相似的,组合起来又是一个整体。

图片

▲ 左边是在荒漠里的仙人掌材质沙发,右边是在云层之巅的真实沙发,其实只是有没有空调的区别。

图片

▲ 把左右两个不同的饼组合成一个饼,只为告诉消费者,本店推出了两个新品。

图片

▲ 把灯泡图形的左边置换成大脑图形,以表达点亮创意的概念。

另一种是非对称图形,即图片中的几个部分组合在一起刚好是一个完整的图形,它们各自完成图形的某一个部分,造型上并不相同。

图片

▲ 把钓起的鱼浸在水里的部分置换成海洋垃圾,号召大家要爱护海洋,减少对海洋的污染。

图片

▲ 上图看似是一个正在飞奔的运动员,实则是由摔跤、跑步、击剑、足球四张运动图片组成,把多项奥运项目完美地结合起来。

图片

▲ 上半部分为巴西里约的耶稣像,下半部分为美国纽约的自由女神像,二者结合起来也相似一个完整的雕像,中间的分割线被设计成飞机的轮廓形状,巧妙地表达出该航空公司“速度快”的诉求。

 

图片

异质同构虽然是一个挺不错的图形设计技巧,但如果所用的素材、组合的方式、构图太过常规,那么做出来的作品还是会很普通,所以我们要尽量做出一些改变,尝试一些新的素材、新的组合方式、新的风格、新的创意概念,才能真正做出让人眼前一亮的效果。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》万物皆可异质同构

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



万物皆可异质同构

seo达人



很多人做的设计过于平庸,主要原因是图形部分太常规,比如单纯以产品图片、人物图片、某个元素或者是一幅普通插画作品作为画面的图形。这类图形缺少变化、缺少视觉冲突,所以很难有眼前一亮的感觉,也很难让人产生兴趣。而有一个简单的技巧,可以轻松解决这一问题,即异质同构。

图片

图片

图片

图片

图片

这个技巧大家肯定不陌生,这样的作品比比皆是,但是对于该技巧的使用还是有很多讲究的,首先,从设计的形式上来看,异质同构主要分为三种形式:

 

1.置换材质

即只保留一个事物原本的造型,而其材质用另一类元素进行置换,比如水材质的面膜、牛奶材质的人、云材质的鞋子等等。

图片

▲用水材质替换面膜原本的材质,以表达面膜的补水功能。


图片

▲把正在打篮球的小男孩做成牛奶材质,以表达该牛奶可以促进儿童健康发育、补钙等诉求。


图片

▲把鞋子做成云的质感,以表达该鞋子轻盈、舒适的卖点。

常见的材质有金、木、水、土、玻璃、皮、塑料、纸等等,如果通过材质就能识别出某些产品或者素材,那么就具备了使用这一技巧的基本条件。

图片

▲把甜菜置换成甜菜汁材质,表达了榨汁机超强的榨汁功能。

图片

▲把腿的材质换成仙人掌,腿毛则变成了仙人掌上的刺,表达了刮毛器超强的刮毛功能。

另外,想要置换材质的效果很好,那么对设计师的执行能力要求比较高,通常是通过合成或者3D渲染来完成。

图片

图片

 

2.组合堆积

即按照事物B的造型,用数量众多的事物A来进行有序的排列组合或者是堆积,比如把塑料瓶堆积成一座小雪山,用葡萄堆出一瓶果汁,用蔬菜组成一个汉堡等等。

图片

▲用塑料瓶堆积出来的雪山装置,用以号召大家不要乱扔垃圾。


图片

▲真实的葡萄被设计成了一瓶果汁的形状,以表达该果汁真材实料、健康之类的的诉求。


图片

▲用纯蔬菜堆出两个汉堡,以表达蔬菜汉堡这一诉求。

在做堆积或者组合时,首先要能保证元素A与B的识别性,另外元素的排列要有序,而不是胡乱堆砌,要注意图形的美感和质感。

图片

▲用树叶、鲜花组合成“肺”的造型,以表达该椰汁可以给你带来由内而外的美好感受。


图片

▲鲜红的心脏细看却是用拳击手套组成,创意概念是:为生命而战。

图片

▲用“提子”组成的饮料瓶子,以表达该果汁原滋原味的诉求。


图片

▲用蘑菇以及手动加工的工具、配料等元素组合成蘑菇的造型,表达了该产品真材实料、纯手工制作、品质绝佳等诉求。

 

3.质感对比

即把某一事物的局部置换成符合原有造型,但质感不同的另一种或另几种事物,以形成鲜明的对比效果,比如上本身是男人、下半身是女人,左边是汽车、右边是滑滑梯,一边是导弹、一边是铅笔等等。

图片

▲把男士维修工人的上半身与女芭蕾舞者的下半身结合起来,以表达捐献器官可以让你拥有两次不同人生的诉求,这是一个器官捐献组织的公益广告,画风奇特的画面很有视觉冲击力。

图片

▲把汽车的前半截置换成滑滑梯,以传达清洁汽车的引擎,可以让你的旅途更愉快。


图片

▲把导弹的前半部分用铅笔的笔尖替代,以表达语言可以消灭战争的诉求。

质感对比的做法有两种形式,一种是对称图形,即左右两个不同材质的元素在造型上是相同或相似的,组合起来又是一个整体。

图片

▲ 左边是在荒漠里的仙人掌材质沙发,右边是在云层之巅的真实沙发,其实只是有没有空调的区别。


图片

▲ 把左右两个不同的饼组合成一个饼,只为告诉消费者,本店推出了两个新品。


图片

▲ 把灯泡图形的左边置换成大脑图形,以表达点亮创意的概念。

另一种是非对称图形,即图片中的几个部分组合在一起刚好是一个完整的图形,它们各自完成图形的某一个部分,造型上并不相同。

图片

▲ 把钓起的鱼浸在水里的部分置换成海洋垃圾,号召大家要爱护海洋,减少对海洋的污染。

图片

▲ 上图看似是一个正在飞奔的运动员,实则是由摔跤、跑步、击剑、足球四张运动图片组成,把多项奥运项目完美地结合起来。


图片

▲ 上半部分为巴西里约的耶稣像,下半部分为美国纽约的自由女神像,二者结合起来也相似一个完整的雕像,中间的分割线被设计成飞机的轮廓形状,巧妙地表达出该航空公司“速度快”的诉求。

 

图片

异质同构虽然是一个挺不错的图形设计技巧,但如果所用的素材、组合的方式、构图太过常规,那么做出来的作品还是会很普通,所以我们要尽量做出一些改变,尝试一些新的素材、新的组合方式、新的风格、新的创意概念,才能真正做出让人眼前一亮的效果。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网 »万物皆可异质同构

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


复杂网站的导航模式要怎么设计才合理舒适?

ui设计分享达人

具有大量库存商品,或是涉及复杂产品的网站,通常会提供产品类别页面,或者是产品列表页面。 类别页面就像是特定产品类别的主页。他们可能不提供完整的产品列表,但可能会展示一些产品并提供产品子类别的链接。这种页面本质上是用户在进入产品列表页面的过程中经过的一个中间步骤,让用户不用一下子面对海量的分类信息。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Eddie Bauer 在其全局导航中, WOMEN 链接将用户带到了这个传统的类别页面。这些页面通常包含产品照片和营销内容,以及促销子类别(例如SHOP FLANNEL 和 SHOP FLEECE )的链接。

类别页面通常提供以下组合:

  • 类别的描述、解释及其包含的内容
  • 带有描述和代表性图像的子类别菜单
  • 推销该类别中的特色产品

并非所有产品都需要专门的类别页面。 不过这种情况有时候会让用户非常恼火,因为用户需要通过额外的步骤才能查看特定类别的产品。

许多网站完全省略了类别页面,而是将用户直接引导到产品列表页面,在那里他们可以借助过滤筛选的方式来浏览产品。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Bonobos 网站上的 Pants & Jeans 链接不是类别页面,而是将用户直接带到产品的列表页面。这种方法通常效果很好,因为它尽快向客户展示了他们可选的选择。

虽然本文偏向于电商网站中的类别页面的探讨,但实际上这些页面也用于其他类型的网站,特别是新闻资讯和教育类的网站。这些建议也可能适用于这些情况,但最好根据领域对你的设计进行测试,以防你的用户需求与购物型用户的需求不同。

何时使用类别页面

如果您的电商网站所涉及的产品非常复杂,以至于您的许多客户需要经过学习之后才会使用,才能正确地过滤和比较产品,那么类别页面就是一个好主意了 。此外,具有 大类别和大量子类别的网站,有时会提供某种类型的独立类别页面,以帮助用户找到有意义的起点。

不过,你可以决定让特定的产品具有类别页面,而其他的则不具有独立的类别页面。例如,Lululemon 主打的健身服装产品(大多不需要分类页面),同时也销售一种名为 MIRROR 的昂贵的家庭健身产品,后者需要更详细的解释,因此有自己的分类页面。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Lululemon 为其复杂的家庭健身产品 MIRROR 提供了一个单独的类别页面,但并未为其所有产品类别使用类别页面。

阐释复杂产品

类别页面可以对电子产品等复杂产品起到解释作用 。如果用户还不了解产品选项,他们可能还没有准备好单击单个产品。与随机点击不同的产品相比,类别页面为他们提供了一种更有效地了解各种潜在相关产品功能的途径。

例如,智能手表通常会有不同的功能和价格范围,著名智能手表品牌 Fossil 在自己的网站提供了一个类别页面,列出了不同类型的智能手表,并提供「立即购买」、「了解更多」 以及「比较」的选项。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Fossil 的 智能手表分类页面解释了不同型号的智能手表的功能和性能差异

子类别的特征

购物型用户可能不需要通过网站来学习服装或食品等熟悉商品的内容和知识。然而,一个拥有大量产品和内容,并组织成许多子类别的网站,仍然可以从类别页面中受益——尤其当子类别页面可以通过独特的图文清楚地介绍产品的时候。这比一长串标签文本更容易方便用户了解产品,此外它还可以为国外的购物者提供帮助。

REI 销售用于各种户外活动的许多产品,从皮划艇到登山用具。如果点击网站的全局导航中Camp & Hike 链接之后,页面跳转到一个包含所有露营产品的列表面,用户可能会不知所措,而且无趣。相反,REI 让链接指向到一个传统的类别页面,而不是列表,这个页面包括:

  • 子类别 (帐篷, 睡袋 , 远足)
  • 该类别中最受欢迎的品牌(Osprey、YETI)
  • 与类别相关的季节性信息(寒冷天气徒步旅行)
  • 建议(如何选择睡垫、食物储存和处理的技巧)

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

REI 使用传统的类别页面来帮助购物者在庞大的 Camp & Hike 类别中找到适合自己的产品。

不要强迫客户浏览类别页面

如果你的网站确实提供了传统的类别页面,请同样为用户提供了避免进入这些页面的简单方法,并在他们愿意时,也能直接转到产品列表页面。为你的站点的全局导航,提供指向子类别产品的列表页面(比如使用超大导航 Megamenu ),以及指向传统类别页面的链接。

可能还需要确保搜索结果始终指向产品选项,而不是将购物者引导到类别页面。在我们的研究中,Zappos 会将某些搜索结果指向到以品牌为中心的类别页面,而不是链接到该品牌的产品。

在用户测试的时候,一位参与者看到孩子后很生气,因为搜索她最喜欢的品牌 Sam Edelman 时,她进入了一个具有促销感的传统类别页面,而不是指向她要的产品。对她来说,这感觉像是一个不必要的额外步骤。

「当我进入 Sam Edelman 时,我想看到结果。我不希望打开一个品牌的分类页面。」

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

当用户在 Zappos.com 上搜索「sam edelman」时,她很恼火地看到一个没有列出任何单个产品的品牌类别页面。

当用户搜索时,他们希望立即看到结果。

混合:在产品列表页面上提供类别信息 

为了避免传统的类别页面的缺陷,并提供对产品列表的快速访问,许多电商网站现在在主产品列表页面中,结合混用了少量的类别有页面的设计——例如简短的描述性内容,或简短的子类别菜单。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

在女士紧身裤 产品列表页面上,Lululemon 包含了一些传统会在类别页面上显示的元素:营销内容(蓝绿色框标注的区域)和对不同紧身裤样式的解释,以及指向这些子类别的链接(以黄色框标注的区域)。

这种混合呈现方法效果很好,因为对描述或子类别菜单感兴趣的用户可以暂停并阅读它,而不感兴趣的用户可以简单地跳过,直接快速访问实际的产品列表。

说明内容

一些电商网站在 产品 Banner 旁边加入营销的内容和元素,这些元素传达有用的信息而不会减慢用户的速度,就像传统的类别页面一样。

高级珠宝零售商 VRAI 使用混合式设计,在一些产品列表页面中包含类别页面样式元素。它的一个产品列表页面当中,圆形订婚戒指页面中,包含了带有价格的产品列表,以及解释性的内容。顶部的文字描述了此类产品的一般特征。侧面板提供了有关该类别中所有产品共有特征的说明,以及更多详细信息。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

在这个列表页面中,VRAI 包含了促销内容(以蓝绿色框标注)和说明性内容(以黄色框标注)。其中所呈现的图文内容是典型的传统类别页面的特征(没有产品列表)。

子导航

一些零售类的网站不使用类别页面,而是提供指向产品列表页面上的子类别的导航链接。这些链接(这是最初发明类别页面的原因之一)让用户轻松浏览网站的产品库存。

例如,Ann Taylor 的 裤子 列表页面显示了不同款式裤子的类别,并提供指向该子类别的链接。这些内容直接显示在产品列表上方,帮助用户了解可用类别项目,并且直接导航到这些类别。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Ann Taylor 的网站在 裤子 的列表页面的顶部,加入了不同裤子款式和合身度的说明和图片,以便用户了解其中的差异。

文章来源:优设  作者:陈子木
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

ui设计分享达人

老龄化社会已经到来,如何让中老年群体更好地使用互联网产品是当今的热门话题。猫眼演出设计团队负责的一个 B 端项目的使用人群需覆盖到中老年用户,也属于适老化的涵盖范畴。

在前期调研和设计环节中,我们收集了一些相关的文献及案例,并且结合项目实践有所思考和沉淀,在这里与大家分享。

普适的适老化设计理念

世界卫生组织根据现代人生命状况,提出了人生阶段年龄的新划分。45~59 岁为中年人;60~74 岁为年轻老年人;75~89 岁为老年人;90 岁以上为长寿老人。[1]

随着年龄的增长,人们的身体机能、心理状态、认知能力等都会出现衰退的情况。

适老化设计是无障碍设计中的一种。无障碍设计于 1974 年由联合国组织提出,设计中需要充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者(如残疾人、老年人)的使用需求。[2]

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

目前互联网产品中大多数的适老化设计,主要是集中在 C 端。针对不同障碍(视觉、肢体、听觉、认知障碍)[3],目前普适的适老化设计原则有:

1. “强烈“好于“柔和”

针对视觉障碍,常见做法有增大字体大小,使用非衬线体字体,提高颜色对比度等。

相比原版的 App,百度大字版 App 和支付宝长辈模式修改了 UI 界面,每个功能模块都用了明亮的大色块、加大字体的设计。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

2. 善用“辅助”和“替代”

针对听觉障碍,常见的做法有通过视觉辅助,将声音转化成文字、扩大音量、降低语速等。

Google 安卓系统推出了 Live Caption 功能,可自动将手机上播放的内容转换成字幕。Live Transcribe-「Sound Notification 声音通知」功能,可识别特定声音(比如烟雾警报器、婴儿啼哭、敲门声等),并转化成文字及视觉符号推送至手机,方便听障用户辨别生活当中一些重要的声音信号。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

3. “点击”好于“滑动”

针对肢体障碍,减少页面信息的密度,避免使用过小的按钮以及复杂的交互手势。

有研究表明,老年群体在操作时难以瞄准物体,在浏览图片时,由于视力衰退导致无法对焦,他们会不断地用两只手指放大/缩小并反复点击屏幕。[4]

平安银行 App 关怀模式采用卡片拼接的设计方式,将间距放大,保证每个信息有更大的展示空间,同时也放大按钮点击热区,提高操作的准确率。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

4. “具象”好于“抽象”

针对认知障碍,避免使用不易识别的图标,尽可能配有图标或图片,简化信息内容。

有研究表明,文字+图标为主的设计有助于提升老年新手用户对新 ATM 使用的学习效率和记忆。[5]

滴滴 App 关怀模式针对老年人进行功能精简,满足高优先级核心诉求,首页只放「一键打车」,操作简单,大字、无广告。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

B端产品引入适老化设计也值得深思

在很多行业中,中老年人因为拥有丰富的经验在岗位上更具竞争优势,譬如教师、医生、律师、会计等职业,工作年限长、经验足是优势,可以提供更好的服务。他们既会使用 C 端产品,也有使用 B 端产品的场景。

随着时代变迁,2015 年世界卫生组织提出了“健康老龄化”理念[6],倡导改变过去“老了就要退出社会生活”的消极认识。

从“老有所依”到“老有所为”,很多的 B 端场景都覆盖了中老年用户,如何提升中老年用户的办公用户体验是重要课题。

另外我们看下 C 端与 B 端的主要差别:

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

C 端 App 中时常将简单作为适老设计宣传点。追求简单有一部分原因是,C 端用户是在自己的场域操作且几乎无时间压力。而 B 端产品却相反,业务逻辑复杂,用户要长时间使用而且要求效率。B 端面向企业定制化,针对特定人群、情景,使得在适老化设计中要解决的问题更清晰。

适老化设计在POS中的应用

留意生活中的零售行业,如餐厅、商场、药局、便利店的服务人员,往往能看到中老年人的身影。

POS 系统是 B 端场景中使用率最高的产品之一,POS 系统的英文全名为 Point of Sale,中文名为销售时点信息系统。[7]它由硬件与软件组成,根据产业和店面类型的不同,会有功能上的差异。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

最近团队参与了一个改造 POS 系统的项目,使用人群覆盖到了中老年用户,提升他们的办公用户体验是其中一个产品目标。

本次项目主要是 POS 界面的更新,完整的 POS 体验不仅有软件本身,有更大的部分在于实体环境与设备,例如:结账区的控件、店面的摆设、扫描枪,读卡器等,而 POS 界面是连结上述元素的节点。

在对 POS 系统进行改造时,我们是按照以下设计思路进行的:

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

第 1 步:沿用旧系统规则与结构

B 端系统背后往往由成熟的业务场景和复杂的业务逻辑构成。B 端系统往往不是一个从 0-1 全新的系统,而是存在一个被使用了很多年的系统。

在这种情况下,企业服务的每个用户都是趋向于规避风险的。人们可能已经习惯了原有的解决方案(尽管不好用,但是大家都会用了),但新的方案如果不好用,他们的生产力反而会因为不知道如何使用新方案而降低。

这就意味着在做 B 端设计时,现行的方案会产生很大的习惯引力。

当设计师要引入一个新方案时,取消或改变某些功能及操作行为将有难度,不能霸道性更改,取代需要合理性。

设计思路:

  1. 梳理业务逻辑和功能模块:沿用旧系统规则与结构。
  2. 制定框架:定稳定一致、拓展性强的信息框架与导航栏。
  3. 统一专业术语:信息表达(文案)与原有系统尽可能保持一致。
  4. 遵从使用者习惯:原系统中可能存在一些不够美观或不合常理但却实用的快捷入口及交互方式,可以整合优化后进行复用。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

第 2 步:理清主要用户与使用场景

想要了解使用者的真实痛点,需从场景出发。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

第 3 步:用适老化设计原则去解决场景中的问题

POS 使用场景有很多,这里列举 3 个常见的使用情境:

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

可能存在的障碍:无法聚焦信息内容,难做到边看屏幕边与顾客交流。

设计目标:确保信息在复杂的环境中,信息内容清晰可读。

设计思路:

1. 放大信息内容

服务至上,POS 使用者在工作时需保持端庄热情的姿态,不能只专注看 POS 屏幕信息而不顾顾客。

内容大小的确立由设备分辨率、环境灯光、字体、视距等因素决定,在复杂的现场环境中,信息内容要清晰易读。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

2. 色彩对比度符合 WCAG 标准

参照 WCAG 有 AA 和 AAA 的对比度标准,界面中的信息与其背景间的关系对比度至少在 4.5:1 之上,保证信息易读性。

WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)。这是一套由无障碍功能专家编辑的指南,有若干国家在其网络无障碍功能法律要求中明令必须使用这些指南。[8]

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

一些设计插件可以帮助我们检验色彩对比度是否符合 WCAG 标准,给大家推荐 2 款:Sketch 插件 Cluse,Figma 插件 A11y-Color Contast Checker。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

3. 设计有意义的动画

通过动效来表达静态视觉效果无法准确传达的信息,如反馈、引导下一步、状态表达等。好的动效与视觉设计是互补而成系统的。

比如用动画来展示商品被加进购物车的状态,引导下一步操作。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

4. 加大点击热区

提高使用者点击操作的准确率和速度。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

5. 一屏策略

在这次的项目中存在一个场景,除了销售端服务员看到的屏幕,顾客也会有一个客显屏,即服务人员看到的界面,顾客也会看到。

对于页面信息框架以及布局尽量“一屏”展示,确保双方的视线和注意力一致,便于沟通交流。但这时会有挑战:字放大、按钮放大,信息和功能在一屏上怎么放得下?

解决思路:

  • 进行功能筛选,满足场景中高优先级核心诉求,提取核心功能展示。
  • 模块化展示每个信息,根据格式塔的视觉感知理论,做到聚焦用户视角。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

可能存在的障碍:在顾客的“催促”下,使用者也会着急,对事物表现出茫然的情绪,定位当前位置困难。

设计目标:追求信息的有效表达和操作的直觉性与效率。

设计思路:

1. 避免使用不易识别的图标

B 端系统中会有些功能很难用一个图标去表达其含义,此时文字+图标按钮优于纯图标按钮,能帮助 POS 使用者更好地理解语意并做出操作。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

2. 信息的呈现符合用户眼动规律,操作轨迹越短越好

可运用古腾堡图表法 Diagonal Balance,它由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。他发现人们视觉阅读规律,左上角是视觉第一落点区,右下角是视觉最终落点区,右上角和左下角都是一个视觉落盲点,大多数情况容易被忽略。

在进行信息排布时,可根据用户习惯性的眼动规律,将最重要的信息放在左上角,右上角和左下角添加辅助元素,右下角作为整个视觉落点可以展示重要操作。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

可能存在的障碍:百忙之中,应变能力下降,容易发生误操作的情况。

设计目标:预防不当行为,提升容错率,反馈要及时有效且清晰。

设计思路:

1. 通过二次确认避免误操作

在产品设计时,要把各种可能性考虑进去,通过模态对话框让用户二次确认来避免误操作行为。

当有重要操作时需告知用户处理结果,状态反馈信息采用的颜色需要遵守用户对色彩的基本认知,如红色代表警示,黄色代表警告、绿色代表成功等。

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

上述举例的设计原则是启发但不是限制,每个设计提案最后都要经过用户调研,看是否符合使用者的使用习惯,是否真能解决业务与工作中的痛点。

附上总结图:

如何做好B端产品的适老化设计?来看猫眼演出的实战案例!

其实设计到后面会发现,起初为了方便中老年用户使用 POS 运用的设计原则,最终都能给多数人带来很大便利。

这是因为我们每个人在某些时候都会遇到各种临时的无障碍需求。

结语

适老化设计,不仅仅只是为中老年群体做设计,更是一种新的设计思维方式,去挖掘更多普适的场景痛点,来指导我们做方案设计。

市面上很多适老化设计方法为 B 端产品提供了借鉴,但 B 端产品不能为了适老而适老,理清相关工作情境和要解决的问题很重要;不能霸道性更改,取代需要合理性,因为 B 端产品现行的方案会产生很大的习惯引力。

以上是近期对 B 端引入适老化设计的一些思考和沉淀,是开始,也将继续,适老化设计还有很多值得深究和验证的内容。

文章来源:优设  作者:范特西
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


从视觉产品两方面,分析2022年B端设计的发展趋势

ui设计分享达人

前言:

在 2020 年,疫情最为严峻的时候,B 端这一领域得到了前所未有的关注,而那时,身为 B 端用户体验设计师的我,也曾总结过,当时 B 端设计的诸多趋势,比如:

多端需求:即桌面端、平板端、移动端的设计形式

设计中台:拥有更为统一的设计平台,与这两年讨论较多的设计资产相同,都是起到快速协作的作用

随着 2022 年的到来,B 端行业又会迎来哪些新的机会?今天我们就从整个的 B 端入手,回顾一下 2021 年的设计形式,展望一下 2022 年的设计趋势。当然趋势完全是我自己个人主观理解,仅供参考,如有异议,以你为准~

完整的趋势,我们会分为视觉趋势与产品趋势

  1. 视觉趋势:主要围绕设计当中的细节展开,比如图标、色彩、字体、插画等
  2. 产品趋势:主要是了解不同的 B 端产品当中究竟有哪些发展形式,对于设计师又会产生何种影响?

视觉趋势

1. 3D 设计风格

虽然 3D 化的视觉风格早已到来,但是在 B 端市场上,3D 风格在此之前依旧表现的十分克制。随着 C4D、Blender 这些 3D 建模软件的不断普及,再加上互联网上关于 3D 建模教程的增多,你会发现 3D 风格的视觉表现,是一个 B 端视觉设计师的基本要求。

而 3D 风格用在 B 端软件当中,会有两个使用场景:

图标

因为在 B 端产品当中,图标本身就是非常难以去表现,比如“物联网,大数据”,许多抽象词汇很难通过一个具象的事物进行表达,而在企业官网当中,在视觉表现上的要求又十分的高。因此你会发现,在视觉风格上的选择,往往只有 3D 图标 + 插画这一条路。

从视觉产品两方面,分析2022年B端设计的发展趋势

并且 3D 图标的使用场景不会太过于局限,也可以用于产品的工作台、运营营销工具箱等页面,因此 3D 图标的出现,它的应用场景也会相比之前要更加的广阔。

从视觉产品两方面,分析2022年B端设计的发展趋势

可视化大屏

大屏设计也在不断的“内卷”,因为传统的 2D 可视化大屏所搭建出来的大屏已经满足不了企业的野心, 像 DataV 腾讯云图 ,大家都在朝着 3D 风格,炫酷的方向进行延展,因此也就会导致 3D 的视觉风格需求激增,而 3D 建模仿佛就是大势所趋。

从视觉产品两方面,分析2022年B端设计的发展趋势

2. 新拟态

虽然新拟态是在前两年的产物。这个设计风格背后,遭到了很多设计师的质疑与排挤。但是随着这个风格的不断成熟,感觉它在 B 端视觉领域(特指的是官网 ),是非常受欢迎的,因为整体的风格,与官网的设计形式趋同。

同时作为 B 端产品的官网,其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作给出的真实反馈,而使用了新拟态的官网按钮,给你的反馈非常真实。

这里安利一下腾讯云的首页官网,大家就会发现在设计风格上大量的采取了新拟态元素,并且配合 3D 风格的图标,以及毛玻璃材质的设计,让它的设计瞬间加分不少。

从视觉产品两方面,分析2022年B端设计的发展趋势

3. 开源的设计系统

在去年,设计系统迎来了一波发展的高峰期,随着字节、腾讯,三大设计系统(Arco Design、TDesign、Semi Design)的开源,其实是给我们很多 B 端设计初学者,有了更加完整仔细的 B 端入门教程。

从视觉产品两方面,分析2022年B端设计的发展趋势

清晰的讲解了每一个组件的使用方式,以及注意事项,仔细阅读这里面的内容,其实就是 B 端设计的入门学习。而未来,国内的环境,开源的系统也会越来越多,大家可以针对这几大类不同的设计系统进行对比,或许会有一番收获。

产品趋势

4. 超级 app

这里的超级 app 可能和大家潜意识里的支付宝、微信这些软件不太一样

在 B 端行业,随着疫情的不断扩散、再加上两年时间的发展,很多 B 端产品的功能架构都出现了一个现象,产品的功能开始变得非常拥挤。因为 B 端软件的核心价值其实就是靠着一个又一个功能去累积,也就意味着随着 B 端产品的发展,功能模块在不断的累积,导致在设计层面,这样的现象变得更加严峻。

你会发现左侧的导航菜单已经完全没有办法装下这些导航内容,而这一现象也反映在很多产品当中,比如我了解的飞书管理后台、薪人薪事 等等诸多 B 端产品,它们在整个导航内容上,已经增加到一级导航 15+ 、二级导航 40+ ,这无疑会开始对设计师的能力造成巨大考验。

从视觉产品两方面,分析2022年B端设计的发展趋势

面对这一情况,许多导航菜单都将会迎来前所未有的挑战,最近也在深入研究导航菜单过多时的解决办法,发现了一些新的导航菜单设计方法,有机会咱们重新梳理一下导航菜单的内容,将 B 端设计指南文章进行更新。

从视觉产品两方面,分析2022年B端设计的发展趋势

低代码定制化

低代码一直是我关注的一个领域,先给不明白低代码的同学简单科普一下。

低代码,一种快速开发应用的软件,将通用、可重复利用的代码形成组件化的模块,通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码,类似用“乐高积木”的方式来开发。

在国外有很多著名的低代码成功案例。Outsystems(国外非常出名的低代码平台)帮助施耐德电气在 20 个月内推出了 60 款应用程序,开发过程加速了两倍;在 2012 年即将推出 Model S 之际,特斯拉放弃了 SAP 的 ERP 产品(可以思考一下为什么),改用低代码开发平台 Mendix,用 25 个人四个月时间自建 ERP 系统。

去年,低代码平台,也有很多新产品面世,其中就包含:

从视觉产品两方面,分析2022年B端设计的发展趋势

因此你会发现,其实低代码就是在解决一件事,围绕着某一个业务场景,通过平台的持续完善优化。让所有的功能都能围绕这个业务展开,其中包括:权限、时间轴、流程、表单、公式等等,能够解决很多特殊的业务场景。而低代码会涉及到设计思路上的转变,以及低代码编辑器的出现,如何去设计如此复杂的配置流程,如何让用户能够快速上手,如果你能够有比较完整的思路,这些都会成为我们设计的新机会。

行业细分

随着互联网市场的不断发展,用户会越来越关注产品在自己行业的应用,比如 CRM,其实只是一个笼统的称呼,现在 CRM 市场又会分为 SCRM、运营 CRM,等诸多产品。

SaaS 类的平台也出现了负责从虚拟主机和数据库层面入手的 iPaaS 以及从应用和数据层面入手的 aPaaS。

即使是大家经常使用的 钉钉、企微、飞书,它们也在各自的领域有所擅长。

从视觉产品两方面,分析2022年B端设计的发展趋势

因为 B 端产品,在底层逻辑上是不能允许趋同的产品出现,如果你和别人的产品一样,其实是没有办法在目前的市场上立足。因此你会发现,虽然产品形式都会比较相同,但是 B 端市场十分广阔,大家都在去寻找自己产品的差异化。

当然市场是瞬息万变的,这里也只是简单聊聊我自己的看法,希望对你有所帮助。

文章来源:优设  作者:CE青年
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

ui设计分享达人

B 端产品主要是 Web 端产品,空间大、操作多,内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系,从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。

格式塔主要包括 7 个基本原则:

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

今天我们就来总结下,格式塔原理在 B 端产品中是如何应用的?

接近性原则

我们先看 2 张截图,分别是不同分辨率下的界面效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

可以明显的感觉到高分辨率下,菜单列间距离较大,菜单的归属关系很清晰。而低分辨率下,菜单间的距离变小,特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则,距离近的关联亲密,距离远的就各自独立分组。

当我们想要传达给用户层级关系时,就需要善于利用接近性原则。例如表格上方的功能按钮,通常我们将高频、核心操作放置在左侧,低频、辅助功能放置在右侧。通过增大元素间的距离,达到功能分区的目的。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

相似性原则

相似性原则是通过颜色、尺寸、图形等方面的共同属性,实现信息的分组或者高可读性。

例如在可视化图表中,不同范围值的指标采用不同的背景色。通过背景色的差异,将同一范围内的数据形成视觉关联,提高用户对信息的识别效率。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页,都采用了双列设计,左侧主要以高频的业务功能信息为主,右侧是辅助运营信息。两列尺寸宽度有明显差异,用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异,并有效地突出业务信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

闭合性原则

IBM、苹果的 Logo 设计,无论是“用刀砍过”,还是被“偷咬了一口”,用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在 UI 设计中,则会通过对齐方式,形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色,内容区借助标题、卡片对齐形成视觉闭合空间,最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

另外闭合性是需要元素之间相互辅助的,单独的元素无法构建出闭合空间。以下图为例,虽然四个小的卡片做了间距分割,但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

连续性原则

用户更习惯于从左到右的横扫阅读,因此连续性主要体现在横向空间中。

下图中,虽然左侧的标签文字与右侧的内容信息有较为明显的间距,高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体,而是理解为两组信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在某些场景中,如果信息平均分布,不会产生连续性的视觉感知。

例如下图指标监控中,指标都是采用小卡片,间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点,没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时,需要逐个检索,花费的成本更高。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

简单对称原则

通过上述很多图片,我们可以看出页面元素基本都是横平竖直,中规中矩的元素和分割方式。或许有些单调乏味,但是胜在简单,不会带来额外的视觉噪点。

特别是 B 端产品,基本看不到异形的存在,甚至全圆角矩形都很少见到。即使有异形,也只是作为视觉表现元素存在于内容中,而不会作为空间的划分边界。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

主体与背景原则

主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性,凸显弹窗信息。

当我们需要着重表现内容时,同样适用于主体与背景原则。例如登录界面的设计,会通过差异化的背景、阴影等方式,带给用户清晰的视觉层级,适当凸显输入框的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

而 B 端内容区是核心空间,基本都是采用纯白背景,与页面背景形成对比,从而占据信息的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

共同命运原则

共同命运原则听起来有点玄学,指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少,我没有找到合适的案例解释这个原理。

在移动端产品中有些应用案例。比如 iOS 系统中,桌面布局编辑态下抖动的图标,可以与静态不可编辑的内容形成隔离效果,视觉引导性更强。同样今日头条频道编辑时,也采用了抖动效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

总结

虽然 B 端产品没有 C 端色彩丰富,表现力上没那么炫酷。但是两者对信息传达的要求是一样的,要求和谐、有序、层次分明,辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。

格式塔原理不仅限于视觉表现,产品经理或交互设计师在原型设计时,也要重视格式塔原理,辅助设计方案表达,提高团队间的协作效率。

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

文章来源:优设  作者:子牧先生
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



如何制定B端交互设计文档

纯纯

前言


1.平台视觉交互不统一

B端产品是很容易交互设计不一致的,随着多平台陆续融合为一个平台,暴露的问题就越发明显,因此改变现状便迫在眉睫,此时保证交互设计的一致性就是我们重点要考虑的问题。

2.前端开发使用插件、组件混乱

目前有很多较火的组件平台,例如:Ant Design 、Element等。由于公司内部一些原因,前端开发会直接使用组件库,没有规范的约束,随意使用组件也是导致平台体验不佳的一点。

3.同一场景、同一功能操作体验不一致

由于产品上线后,售后组、业务组经常会反映一些关于体验相关问题,有时只是单一模块进行迭代、改版、完善而遗漏了与它相关联的其他模块,便会影响全局感观。


如何解决以上问题?

首先重点模块的设计稿搭建!

此时会有人产生疑问,明明平台现存很多样式问题,功能交互不统一,为什么首要不是先快速建立设计规范文档?

因为在没有设计一定量的设计稿之前,所有规范都是华丽的泡泡!前期在设计阶段会遇到很多具体场景化的问题,根据不同的场景会不停的修改,还有多方评审来达到最优方案。此时的设计稿处在极不稳定的时期,自然而然也没什么规范文档可言,因此现阶段要做的工作是找到重点模块进行设计稿基础搭建。

当然设计师在做设计时一定要有全链路的思考和拆解问题的能力,不能局限于单个需求,钻入牛角尖。毕竟B端产品体量大,功能模块多,系统耦合度高,交互设计文档又是一个全局概念,这最基础也是最重要的第一步是非常考验设计师的。

重点模块功能搭建好设计稿以后,可以先让产品稳定发展一段时间。当团队对产品初期有了一定熟悉程度,此时就很适合创建自己的交互设计规范了。

制定交互设计规范的意义

1.设计师层面

把控视觉统一,减少重复出图,提高效率。在公司有多个设计师协同工作时,可保证体验、设计、交互等等的统一性

2.开发层面

提高设计稿的还原度,根据规范中组件使用情况建立公共组件库,提高复用率,减少返工,极大的提高开发效率。

3.产品经理层面

在画原型图遵循交互设计规范以及排版格式会减少开发在看原型图和设计稿之间产生歧义,当然产品原型图不需要精致,只需按照规定规范中的交互制定即可。

4.测试层面

通用组件通过测试后,以后将不在花时间在测试组件交互上,避免了重复工作。

制定交互设计规范的定义

B端最重要的设计原则就是效率优先,保证效率的前提是组件一致,交互及时反馈,以及合理的使用场景

因此设计交互规范不仅仅只是颜色、文字以及一个个组件的展示,这样的文档对产品、测试毫无意义。规范是由基础容器盒子+组件库+交互状态+正确使用场景组成,在规范中每一项都应标注清楚。

思路:将原子【文字、颜色、控制器等】组合成分子【状态提示、数据展示、数据录入等】最终组合成元素【不同的容器页面、弹窗、抽屉、卡片等】一个一个的元素互相搭配,组成完整的基础平台。


一.整体布局

0.1栅格概念

在设计过程中,设计师需要建立适配的概念,根据具体情况进行适配,以及考虑哪些区块需要动态布局。中台系统的用户的主流分辨率为 1920*1080、1440*900 和 1366*768,一般常用画板1440进行区块动态适配。

栅格宽度:建议栅格系统的网格大小选定8作为栅格系统的原子单位,目前主流设计屏幕分辨率在水平以及垂直方向都可以被8整除,使用8作为最小原子足够适配。

水槽宽度:根据业务可自定义水槽的值。比如8、16、24、32、40等,经过实践经验,正常情况下,水槽宽度为24时,视觉效果最佳。

非常规设计时:不需要死板的坚持传统栅格系统,根据设计场景可自行修订。

顶部导航栏高度计算范围公式:48+8n。

侧边栏宽度计算范围公式:200+8n。



0.2适配规则

界面最大可达显示器最大值,侧边导航为定宽,右侧内容随栅格变化而变化。

二.弹窗、抽屉、卡片等容器盒子

0.1概念设定

为保持视觉、交互一致性,统一容器范围。容器是用来收纳原子、分子的,理论上信息不应该超出容器。

0.2弹窗案例讲解

以有遮罩基本弹窗为例子进行分析,包括视觉+交互。开发可根据弹窗盒子创建基础容器组件,像素级也可帮助测试进行校准。产品及设计可根据使用场景规范自身,在制作原型以及设计稿时正确使用组件。


三.按钮

0.1概念设定

按钮用于开始一个即时操作。通常分为基础按钮(分为主按钮、次按钮)、图标按钮、文字按钮、图标+文字按钮,在不同场景下使用不同的按钮达到最佳交互效果。

0.2图标+文字案例讲解

基础按钮应用广泛,较多人分析这种场景。所以下面主要分享一下图标+文字按钮的基础规范以及使用场景。


四.录入类控件

0.1概念设定

录入类由输入框、选择器、单选框、多选框等多种控件组成,基础交互包括(默认、悬浮、点击、失效四种状态)

不同的控件相互组合成信息页、表单页、问卷页等。

0.2输入框案例讲解

基础输入框包括(标题+输入框)根据不同场景有多种情况,下面仅列出交互场景,具体视觉标注不再展示。


五.反馈提示

0.1概念设定

平台中反馈机制是非常重要的设计,能及时提醒用户当前操作是否成功,或是失败在哪里,因此不同的场景需要特定的反馈提示。

反馈提示包括(警告提示、全局提示、通知提示、气泡确认框提示、以及tips提示)

0.2案例讲解

下面仅列出交互场景,具体视觉标注不再展示。


六.文字、颜色、间距、圆角

0.1概念设定

文字、颜色、间距、圆角相当于元素中的原子,完整的界面正是由这些原子一点一点组合而成,承载着最基础但也是最重要的一部分,因此规范也要更详细。

0.2案例讲解


七.多方位评审

产出文档是否能真正落地需要来自多方评审包括产品、技术、测试等,尽量从多角度、全方位来进行审核。

投入开发前,多方评审,各抒己见达到最优方案。

投入开发后,若要优化修改定稿部分,需再次拉通会议讨论,结合当前实际情况将历史问题一次性解决到位,避免遗漏再次造成不统一。

八.总结

由于篇幅原因,规范只是展开个别案例进行分析。

最终需要落地实现才是最重要的一步,所以我们还有很长的路要走。也要不断进行思考与总结,如何让一致性设计规范更符合设计原则和业务场景~

原文地址:站酷
作者:食文貘

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

后疫情时代,「无障碍设计」通用指南

ui设计分享达人


文章来源:站酷   作者:特里笔记

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

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

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

让我们来聊聊Loading

纯纯

在人机互动过程中,用户与界面的每一次互动都是一次加载过程。加载设计对于使用者来说是非常影响体验的一个方面,后台复杂的数据计算时间、网络状况不好都有可能造成等待时间长而带来焦虑,今天就让我们好好来聊下加载,以及怎么让加载的体验变得更好。



加载的出现 


加载指的是用户在客户端发出一个指令后,直到出现反馈结果时,中间这段时间内计算机完成的一系列执行动作,所以只要你在App中操作请求更多数据那就不可避免有加载。 



加载的重要性


根据一份调查得出,用户能够忍受加载的最长时间在:3到8秒。8秒是一个临界值。但现在的高速互联网真是把我们宠坏了,如果一个页面的加载时间超过4秒,可能会被用户直接退出,除非Ta一定要打开那个页面。

这里有个很重要的数据叫跳出率,在谷歌的一项调查中就已经发现:

1-3 秒的加载时间跳出率提高了 32%。

1-5 秒的加载时间跳出率提高了 90%。

1-6 秒的加载时间跳出率提高了 106%。

 

为了降低用户等待的焦虑,获得更好的用户体验,我们必须让用户知道我们正在努力加载,同时要让加载更有趣来分散用户等待的注意力。



加载的场景


首先我们要先了解以下这些App中最常见的加载场景,也就是那些发出指令后应用需要长时间处理的加载过程。


1、当页刷新

下拉刷新(请求最新数据)+上滑加载(请求更多数据)

▲ins_下拉和上滑


2、从后台切回App

当你在多个App中切换使用时,超过一定时间间隔就需加载数据。

▲系统后台切回


3、启动App

当应用出现异常关闭、应用闪退等情况重新启动app,需要进行数据加载。

▲App启动加载


4、页面间的跳转

页面加载新的数据,涉及原生跳原生或者H5页面。

▲Moo音乐_页面跳转

 

5、定时数据刷新

在特定的时间内页面自动进行数据刷新,例如每天0点更新排行,大部分用在运营或跟时间相关的场景。

▲番茄小说_排行定时更新

 

6、即时消息

通讯类社交的App都采用实时推送机制,不需要用户手动操作也能接收到最新的数据。

▲Quack社交聊天






加载类型的进化 


1、加载器(Spinners)


加载器是最早被使用的方式,适用于快速加载,这也是使用率最高的一种。

▲旋转菊花记载


然而这种加载器有个缺点就是无法告知用户需要等多久,Nielsen Norman早在1993年就提到响应时间和loading动画,“如果计算机无法提供快速响应,则应该以百分比的形式向用户提供持续反馈。”【Myers 1985 论文,“计算机-人机界面百分比进度指标的重要性”】

 

所以加载器和进度条成了黄金组合,适用于长时间(10秒或更长)的加载过程,显示一个操作将花费多长时间以及目前所处的状态,通常有线性进度、百分比、直观数字等。

▲Cream M.


▲Gleb Kuznetsov✈ 


▲有道乐读、哔哩哔哩漫画


在此基础上加载器也开始往趣味/品牌化发展,使用情感化加载动画,可以让等待过程变得轻松、愉悦。Tips:搭建符合目标用户群体的生活场景,能拉近与用户之间的距离。

▲摩拜单车


▲ARCADE STUDIO


吸引用户的眼球,感觉时间会过得更快一点,短暂忘记等待的过程。

▲Markus Magnusson


▲DeeKay



▲RWDS


通过品牌logo或产品相关的图形呈现在界面上,将品牌基因融入整个Loading动画中。

▲ Google


▲Medium


▲有道乐读


▲ 开言 

 


加载器和进度条这一组合有很多变体,可以应用在不同的页面位置:


1.1、白屏加载

当前页面内容需一次性加载完成后才能显示内容,这是页面加载最原始的状态。当页面元素较多时,内容呈现的等待时间会变得很长,一旦时间太久要给予提示。


1.2、Toast加载 

当用户执行某个操作时,为了防止用户继续操作导致数据加载失败,则用Toast的样式来提示正在加载。在画面中间出现提示框,有时会加上黑色透明底盖在画面中间,这种情况一般除了返回上一级的操作可点,其他操作将受到限制。


1.3、进度条加载 

可以是在顶部或底部栏上,告知用户等待的时间长度,让用户有一定的心理预期。


1.4、手动刷新加载 

通过手势操作,快速加载和更新当前页面的内容。


1.5、局部模态加载

在特定位置进行加载,功能指示更明确,避免用户反复操作。


加载器这种方式相对比较简单,但也会阻断用户的其他操作,用户只能等待加载完成才能继续操作。会给人的感觉时间较长,且对于加载出来的页面没有任何预期。

 

那什么时候是需要中断用户操作呢?主要有以下两种情况可以作为判断:

1-当前的操作未成功,则接下来的操作或结果也无法显示,例如:启动App、手机支付、渲染滤镜等;

2-当前的操作本身不能与其他操作同步进行,需停留在当前界面保证操作完成,例如:扫描、迁移资料、实时翻译等。

如果中断时间较短可以使用toast加载提示,时间较长则建议用专门的单页且有可取消的按钮来提示加载过程,以引起用户的重视。


加载器的特点

· 适用性广

· 拓展性强(趣味性及品牌宣传)





2、分布加载(占位符Placeholder)


占位符分布加载就是当界面中图文同时存在时,如果获取完所有信息才显示所耗费的时间是很长的,因此为了缩短用户等待的时间,会选择优先加载快的元素(文字),慢的元素(图片视频等)则用其他的方式占位,最终等待加载全部完成。较为适合feed或瀑布流模式。

 

分步加载的好处是在等待加载的时间里用户可以看到相关的文字内容,不会像空白页加载或Toast加载,只能默默地等待加载的过程。

 

2.1、灰色占位符

将图片用灰色或灰色图(对开发更易用)来代替,中性灰在界面中不会抢风头,在暗黑模式中也适用。

▲灰色色值(例如#EFEFEF)或灰色图片


▲Youtube 


2.2、品牌相关图

在灰色图上加入品牌元素也是不错的方式,例如logo或吉祥物IP,将品牌人格化、情感化,辅助企业向用户传达产品的气质特征,在各类产品中广泛运用。

▲Moo音乐、有道乐读


2.3、彩色色块

通过程序提取面积较大的主色调,并设置几种符合产品调性的默认色,以防取色失败。需保证色彩库的颜色高级耐看,饱和度不要太高,不然很刺眼反倒引起到不好的体验。

▲Behance、Apple Music


undefined


▲Pinterest


▲Google Search


2.4、模糊加载

模糊图像也称为模糊技术,渲染图像的一个低质量版本,然后过渡到高质量版本,初始图像的像素和 kB 都很小。为了去除伪影,图像会被放大和模糊。

▲Behance、Unsplash


分布加载的特点

• 良好的阅读性;

• 准确区分已加载和尚未加载的内容





3、骨架加载(Skeleton Screens)



骨架加载就是先加载UI布局框架,再加载框架中的内容,细节通常按照骨架轮廓(也称为占位UI)、文本、图像的顺序出现。通过这种方式直观地提前让用户知道整个界面的架构,并营造出一种渐进的感觉,使用户感知加载稳定且速度快,提高了产品的体验感。

 

“Skeleton Screens”这个词最早出现在Luke Wroblewski 的文章中,Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持,LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕,通过将被动等待变为主动等待。

 

被动等待是指你只是坐在那里无所事事,看着加载器转了一圈又一圈。积极等待是当你在等待时做一些感觉像是进步的事情。骨架加载通过在每次屏幕更新时为用户提供新信息来鼓励主动等待。

 

通过这种方式,骨架屏幕将焦点从您等待的时间量上移开,并将其放在您面前发生的实际进度证明上,从而使加载过程感觉更快。当它显示已加载的内容和剩余的内容时,它允许用户构建准确的UI界面期望。

▲Medium手机版 


▲Medium网页版



实现骨架屏幕时,请确保占位符 UI 大部分准确表示最终 UI 的外观。否则,就会在期望与现实之间产生差距。

▲夸克 


LinkedIn 最近开始使用 Skeleton Screens 进行加载,骨架屏幕转移了用户的注意力。它使人们专注于进度,而不是等待时间。

▲Linkin 


骨架加载提升了加载界面的速度进度,这种速度反馈表现的更加友好并减少了不确定性,如果加载时间比预期的要长,也可以在骨架之前短暂地显示一个加载器,这应该会为你争取更多时间来完成加载。


通常骨架和分布加载配合进行,称为渐进式加载

• 显示UI骨架布局

• 优先加载文字;

• 加载图像(或主颜色)质量较低的版本;

• 再在后台加载高质量图像;

• 淡入高质量图像,取代之前的低质量图像。

 

 

骨架加载的特点

• 感知更快的加载速度

• 清晰的可视化进度指示





容易被忽略的加载


1、预加载

预加载就是用户浏览当前页面时就预加载下一级所有列表的文字内容,当用户点击进入已加载的页面就感受不到等待,在无网络情况下也能进行正常的阅读,在阅读文字的时候再进行图片或视频的加载(相反地则叫懒加载,进入页面时再加载数据)。但是这种方式会增加客户端和服务器的负载,也会占用一定的网络带宽。


2、智能加载

根据不同的网络状况选择不同的数据加载方案,最常见就是用在音乐/视频/下载更新等占用比较大流量的产品,当判断用户处于3G/4G或网络卡断的情况下,为了既让用户使用流畅也不浪费流量,会自动切换至低速低画质;而处于Wi-Fi条件下,会优先选择高清或高质量进行播放。

▲哔哩哔哩


3、缓存加载

也就是离线加载,通过现有Wifi资源将服务器内容缓存到本地,无网络或是弱网环境下读取缓存加载。可以解决无网或弱网情况下数据获取的问题,会占用本地的存储空间,以及后续的缓存处理需要考虑。





加载出错后的反馈


加载时间过长可能会损害你的网站的整体用户体验。如果加载的速度很慢会导致用户点击多次,这时我们需给用户一个明确的提示“网站正在发生的事情是什么,提供适当的视觉反馈”,加载失败后最重要的是给出解决方案,让用户可再尝试或寻求帮助。请记住,提供反馈是良好的交互设计和积极的用户体验。


undefined

▲哔哩哔哩漫画、闲鱼


▲Dribbble





在过去,设计良好有趣的加载器是我们所能做的最好的事情,而现在,渐进式加载成为值得考虑的替代方案,它加快了等待时间感知,还清晰地呈现了UI布局并建立用户预期。但这并不意味着不继续思考更好的加载方案,期待未来出现更好的交互体验。



总结

一个好的加载应当具备以下特征:

1 让用户知道应用程序正在运行,给出大致的等待时间,简单的进度条或更数字视觉化的方式;

2 告诉用户等待的原因,在处理什么动作表明软件并没有崩溃而是处理请求;

3 有趣的动画内容来吸引注意力,让等待变得可以忍受;

4 加入品牌,让用户在等待的过程中加深品牌印象,形成品牌感知;

5 尽量使用非中断式加载,降低等待的心理感知时长。

原文地址:站酷
作者:_阿丹a_

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



为了设计更好的深色模式

纯纯

iOS作为UI/UE设计的风向标,一直是行业的引领者,不管你愿不愿意承不承认,他的每一次更新变化总能带动UI设计行业的一些大大小小的变革,并且产生更多的追随者,比如当年的iOS7开始的扁平化设计风格,对后续设计风格的影响直到现在已经7年了。



在最近半年,iOS在UI设计风格上最大的变革莫过于DarkMode(深色模式),在DarkMode之前,我们熟悉的UI界面往往都是浅白色界面为主,而从iOS13开始正式使用了DarkMode,界面突然可以变深色了,苹果官方说这样设计可以让眼睛更舒服的长时间阅读,为革命保护视力,而且更加省电增长续航,具体结果我们不得而知,需要科学家们去验证了,但是对于我们设计师来说带来的挑战就是要“黑白无常”了。



其实DarkMode从测试版算起已经差不多推出了有半年的时间了,一些知名的APP产品早已经有了自己的兼容方案,同时iOS原生界面也给了我们很多最佳实践案例,按道理大家对于DarkMode的设计方式方法应该已经掌握了差不多了,但直到这几天微信正式推出了自己的DarkMode兼容方案,才发现对DarkMode的探索还需要设计师们多多努力。谨以此文表达一下自己的观点,不妥之处敬请海涵。


从一个“列表页面”说起:

列表试图(TableView)是iOS中最常见的界面组件,一般常见于设置与栏目列表页面


iOS设置界面的浅色模式和深色模式看起来都非常协调。

下面我们看看微信发现页面,这个页面和iOS设置是很相似的。


如果单独看微信发现页面的浅色模式实际效果还是不错的。

但是直接转换到深色模式下就感觉突然差的很多了,甚至可以说是有点难看,这次微信真的做了一次黑天鹅?

 

到底是什么原因让微信发现页面在深色模式下视觉体验如此之差呢?

我们不妨将两个功能布局都相似的深色进行放在一起进行一下比较


组成色彩分析:

在色彩这块在这两个页面中微信和iOS基本保持一致,四层灰度设计能更好的保持页面整体干净整洁且层次分明,但是被A背景色上,微信的背景色选择了黑色偏绿的颜色,应该是微信设计师还是想体现出产品的标志色原色。

文字的颜色也较iOS略微深一点,但是在整体上影响并不大。


看来在主要色彩上并没有什么问题,那么为什么微信这个界面与iOS界面比起来视觉上要感觉差一些呢?

下面来看一下图标


图标设计分析:


图标上的差别主要在于线宽与外框,微信采用无外框统一线宽的线形图标,iOS采用的是有外框剪影图标。

我们我们把图标进行互换会怎么样呢?



观察到了吗?别看错了!

是的,我把故意位置做了对调,左边是iOS,右边是微信。替换图标后的微信明显加分不少,整个界面都整齐多了,而iOS换了图标后明显变得不够整齐了,潦草很多。


那么结论是微信的无框线性图标在深色模式下兼容有问题?是的的确如此。但是等一下,还有一些细节你注意到吗?换了图标的微信界面和之前的iOS界面比起来明显还是有点不够整齐,为什么呢?

来我们回过头来从细节再看一下iOS界面。


我们按照这个思路把刚才微信替换图标界面再排序一下!

界面视觉体验明显整齐了很多是不是!


疑问:

为什么细线图标和无框图标会在深色背景表现不够好,而在浅色背景下就没问题呢?

是不是所有的UI都会存在这样的问题呢?

我们再来看一些例子:


看来结论是一样的,线性图标在深色背景下的表现都是差强人意,反观带框图标适应性很强,浅色和深色模式下均能良好的适配,我来分析一下原因。


当年伽利略用望远镜往天上看,发现木星比金星大,换成肉眼看后金星则比木星大。他认为是眼睛的某种视觉特性造成了这种现象。

德国物理学家赫尔曼把这种错觉称为辐照错觉,就是说在黑暗背景下,亮度越高的物体看起来面积越大。


再来看一张图片


哪个圆圈看起来更大,显然是黑色背景下的白色圆形,实际上这只是一种错觉,所有圆圈是一样大。


光亮刺激会使得神经元产生非线性放大作用,导致刺激比实物本身看起来更大,白色圆形更亮,所以看起来更大一些。


线性图标是用线条勾画图案达到隐喻效果,一般线粗是2px~6px像素。



设计师在设计时候都是以最终视觉作为参考,而设计稿本身多是浅色背景,所以在浅色背景的映衬下图标视觉会显得稍大,视觉基本是平衡的,假如设计是4px而呈现出的效果其实是6px左右。


是不是觉得哪里有点不对了?按照这个逻辑黑色背景下白色线图标不应该是视觉更大、更明显吗?


我们还需要考虑一个因素,那就是色彩,之前的几个界面案例的线性图标都是彩色的,特别是黑色背景下,不同色彩的图标放在一起,会有明显的忽大忽小的感觉,会让界面感觉非常凌乱。


是不是感觉黄色最大,红色的最小?但是其实是一样的,这还是相同形状的,要是图标形状不同感受会更明显


看一个实际中的例子:

由于都是单色线性图标,在浅色和深色下表现还都不错的,但是单色图标略显界面单调,并不太建议这么设计。


毫无疑问,未来的UI场景需要适配多背景色风格,图标除了具备好看隐喻之外,更需要具备抗干扰性

带框图标是一个不错的解决方法,大胆预测带框图标会将成为未来一段时间图标设计主流!


结论

1:深色模式中灰度色阶在一个界面最多可分为四层。

2:为了适配深色模式,今后有框图标将会成为图标设计风格主流。

3:同样为了适配深色模式,细线图标将会被淘汰,剪影和粗线图标会流行起来。

4:图标除了个体设计上用心,在排列上也会极大影响到页面的整合视觉,光谱排列法是个不错的选择。


原文地址:站酷
作者:残酷de乐章

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档