首页

谈谈 iOS 11 设计中的几个 UI 设计细节

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

今天从 Apple 官网看了 iOS 11 的介绍,发现有不少的更新哦,比如控制中心、Siri、Live Photo 等等,总体来说都有很多不错的体验,不过本文不介绍功能,只说视觉界面。

在 iOS 11 的新 UI 界面中,重大更新的界面主要有 App Store,所以我从应用商店的UI设计也能看出一些大概细节。

图标:从线性改为面形

新版 Store 的图标从线性改为面形,图标也加入了圆角,看起来更加圆滑,同时和 iOS 10中的 iTunes 相关应用风格也统一了。

Icon 颜色比如来的线性浅了一点,这样做看起来就不会过重,所以大家在使用面形的图标设计时,颜色要把握好。

iOS 10 App Store

iOS 11 App Store

iOS 10 iTunes

卡片式设计

在新版的 iOS 11 界面,有不少的地方采用了卡片式/宫格式排列,卡片式的设计非常适合图文排版,并且在手机端有不错的阅读体验。

 Material Design 中也是很重视卡片式设计,所以日后可以多考虑使用卡片式风格。

 

 

 

大投影

当转为卡片式设计后,为了提升层级表现,界面也增加了大块投影,是不是和 Material 风格有点像?

小编细看了下, APP 在 iPad 的封面与手机端的尺寸不一样,一个是横,一个是竖(工作量又增加了……)

iPad 的封面是横的

iPhone 手机端封面(竖)

为了美观,而增加了人力成本,到底值不值?这个封面就像一个网站的文章封面图一样,一篇文章要做2张封面图,这不仅增加人力成本,还增加运维成本。

无处不在的圆角

圆,像曲线一样,有圆滑、活泼、动感、柔和的感觉,更容易让人亲近。亲和力有了,吸引用户就更多了,iOS 的圆角在不同 UI 上使用的圆角大小略有不同,这就是细节,看来 iOS 在圆角的运用已到了出神入化之境。

Material Design 虽然也存在圆角,但要么圆角在太小了,要么就是直角。

而 Windows 的扁平化,就是一块方形。

想做出让人亲近的界面?学会用「圆」也许是很大的秘诀。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

如何理解产品的「核心功能」?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

产品的核心功能及其意义


王子吻醒了白雪公主后,将白雪公主带回了城堡,给了白雪公主应有的一切,白雪公主过得很开心,衣来伸手饭来张口,金银珠宝取之不尽用之不竭。这一切哪里来?王子给的,因为王子爱白雪公主。国王和王后也很爱白雪公主,那是因为他们爱王子。老百姓也很爱白雪公主,因为他们爱戴国王和王后,同时也喜爱王子。白雪公主的这一切财富、幸福、快乐都来自于王子对她的爱。王子为什么爱她,因为她的美貌。是因为白雪公主的美貌,致使王子吻她,白雪公主才醒了,不是因为性格,因为她当时是死的,王子不知道她的性格怎么样,所以白雪公主得到的这一切,都是因为她的美貌。所以白雪公主很在意自己的美貌,因为她的美貌,让她得到了这一切。但是人都是会逐渐老去的,所以白雪公主每天都会去保养自己的容貌,每天都会去照镜子,她担心这个世界上会有一个比她更美的人出现在王子面前,夺走她的一切,她很不安。直到有一天,她对镜子说:镜子啊镜子,谁是世界上最美的女人。


故事结束。


Image title


大家发现了吗,白雪公主成为了童话故事里的那个王后,那个用毒苹果的女人,现在你还会觉得王后坏么?好吧,我们今天要聊的不是这个,而是「白雪公主的美貌」,类比于「产品的核心功能」。


如果白雪公主的容颜衰老了,她就失去这一切了,即使她曾经得到过。就好像微信的核心功能是即时聊天,假设微信哪天不能即时通讯了,那它的价值就不存在了。所以它也害怕,害怕自己被其他产品取代,因为人是贪婪的,一件事物总有对其厌倦的时候,这也是为什么他们现在已经开始说自己要创造一个生态体系。以至于出现了小程序、小游戏、红包、扫码、支付、看一看、搜一搜等等。他们在维系这个产品给人的幻想,他们在持续性的创造这个幻想,来连接人与人之间的那一份羁绊,或者说情感。


类似于白雪公主的美貌得到了一切,而产品的核心功能带来了用户。


我说这个故事的目的是:不管是商业竞争,还是产品设计,其实都是一个道理,就是我们应该围绕产品的这个核心功能去做文章,去拓展商业价值。


也许你平时看到很多文章,都在告诉你要注意产品的核心功能,你知道了核心功能的概念,但是不知道具体意思,其实还是不理解。所以我通过这个故事告诉大家,帮大家理清什么是「核心功能」以及它的意义。


为什么我们要了解并摸清产品的「核心功能」?因为只有在这个基础上,我们才能正确做到拆解需求发现核心功能并对其进行设计,这就是我们所说的需求拆解与功能设计。


判断产品核心功能的价值


产品的核心功能是由产品的定位决定,产品的定位是由产品的市场决定。那么要分析某一个核心功能的价值,须得从产品的市场着手分析。一般而言,产品市场可以归纳为以下三类:a.现有市场、b.细分市场、c.未来市场。


a.现有市场


现有市场,其实就是目前常见且已盈利的模式,这类模式已存在于如今的市场上,并被许多产品借鉴、供奉着。如各类互联网产品,电商、社交、音乐等,都有一定的模式在遵循着。针对现有市场的产品,对竞品的了解似乎已经成为当下产品人的必走路径,竞品在做什么,都做了什么,以及做到了什么程度,再结合自己产品的定位以及核心竞争力来斟酌某一个功能的去留及方向。正所谓知己知彼,百战不殆。


值得一提的是,竞品分析的产出物并不是抄袭,而是更多的挖掘与纠正自己产品在下一步的需求,竞品不可以做的不代表自己产品不可以做,同理,竞品做的好的地方我们也不能轻易跟风,每一个产品之所以能够存活下去,都是因为有自己的核心竞争力。这段话我之前在其他文章里写过,没什么指导意义,就是纠正部分人对于「竞品分析」的错误看法。


成功的,比如网易云音乐的评论功能,早期他们就是通过这个功能从其他平台挖来了不少用户(评论是之一,当然还有歌单,UGC 内容分布渠道)。这些用户在听歌的同时会沉浸在音乐的氛围里,期待找到志同道合的人,宣泄内心感性的情绪。(不得不说现在的人其实都挺矫情的~嘻嘻)


Image title


失败的,比如各类骑行产品,这类产品其实是借鉴了国外的模式,但各位也看到,基于国情及人民文化普及程度的区别,国内市场骑行类产品现在很难发展起来,至少目前我身边已经有很多人想要退款某类单车服务的押金都很难了。


b.细分市场


其实就是将现有市场细分化。从用户群体分析,每一个细分市场都是具有类似需求倾向的消费者构成的群体。比如社交这一个分类,微信出现后,随之出现的各类「交友」软件,如雨后春笋般崛起。其中大部分产品的功能模式都非常单一,着重突出核心点,但碍于市场价值的可供性太低,以至于能真正崛起的产品却寥寥无几。


原因就在于,本来市场就已经细分化,在细分化的市场里做出属于自己的产品特性,需要考虑的因素有以下三类:

  • 差异化,该功能具不具备个性化,能不能在区别于其他产品的同时提升用户体验;
  • 强需求,也就是所谓的刚需;
  • 技术支持,例如产品的技术壁垒;


c.未来市场


这点类似于目前比较火的人工智能,市场盈利期没有到,尚处于摸索阶段,但也许会在未来创造出巨大的价值。这里就不展开讨论了吧,因为在正常领域里,一般人达不到这样的高度,所以讨论意义不大。


实践出真知


其实现在的很多产品都有一个问题,就是初期急忙上线新功能,后期发现效果不好,甚至到了无人去用的地步,但还是会把它挂着,不愿去掉。回头看目前比较成功的产品,哪一款是有这样的功能存在的?所以在工作中,我们要坚持以下三个原则:a.砍掉残缺功能、b.不要提用户去思考、c.帮助用户聚焦;


a.砍掉残缺功能


可能很多产品已经存在上述的那种情况,那么如何来删除那些不必要的功能呢?


首先大家第一个想到的是「删除那些功能,那我之前的工作不是全白做了么?既浪费时间,又浪费精力,成本都收不回来了」。


没错,这么理解也是对的,但也不是全对。因为在迭代的过程中总会有一些自己没办法预知的情况,也许你之前的功能做得不好,但是不代表白做,可能在这个过程中积累了一些经验,知道之后遇到这些类似的情况如何去处理。这个成本算是智商税吧,这算是前期产品没有规划好,导致后期发生这种情况的一个代价。


所以有人会因为这块成本原因,选择不去删除这些功能。说实话,这样不仅会导致产品后期在精力上持续不必要的输出而导致产品烂尾,还会影响用户的体验。所以在砍功能时,应该问问自己「为什么要留着它」,而不是「为什么要去掉它」。(好好想想这句话。)


Image title


b.不要替用户去思考


说到这里,大家可能又会想问「你怎么知道用户想不想要这个功能呢?」


一般来说,我们会通过数据来分析这些功能是否有存在的必要。同时从多角度去切入思考,比如前期的用户模型、需求分析、可用性测试等等,但是千万不要去猜测用户想不想要这个功能。因为人一旦陷入「求全心理」的状态中,设计者就会担心自己漏掉了什么需求,而不是去解决问题。


所以我们要倾听用户的意见,但绝不能盲从。


c.帮助用户聚焦


相信有人会反驳「那难道没有完成一个功能前,我就完全不能去做其他功能了吗?」

不是的,我上面也提到了,只要不影响用户使用产品的核心功能,适当的加一些子功能是没什么的,好比上面「微信」的例子。


产品的主要功能能够满足用户的话,他们就不会太去在意你的改变。所以无论是删除某些子功能或改进某些功能,都不要轻易的打扰用户。


如何做到这点?

  • 确定用户想要达到的目的,并排定优先级;
  • 找到能够完全满足优先级最高用户需求的解决方案;
  • 确定用户在使用产品过程中最常见的干扰源,并将解决这些问题的功能按难易程度排出优先级;


比如;

  • 微信的例子,用户主要目的是社交,「游戏」和「购物」只是当中的消遣功能,之所以放在发现的子功能中,是因为它们对主流用户来说并不重要;
  • 同样的,因为大部分用户的目的是社交,但是不排除少部分人会去使用这些子功能,所以要做到不能打扰主流用户的同时,满足部分用户的需求;
  • 用户在使用产品的主要功能时,我们要看到子功能是否影响用户的使用,然后找出当中最阻碍用户使用产品功能的干扰源,并把它解决。


小结


以上,我通过三个大点阐述了「核心功能」是什么、它的意义以及价值,工作中如何对核心功能做处理。


最后说一点,在接需求的同时,各位是否有想过这个需求背后的目的?如果有,那么是否有再进一步分析这个目的与核心功能的关系?大部分人做到了第一点却忘记了第二点。


各位谨记:产品人/设计师的思维,就是用户看到界面时的样子。

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


别只顾着升级主机了!设计不顺利,可能是显示器的问题

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

很多设计师为在配置装备时,往往只考虑到主机的性能,然而却忽略了显示器,只有工作了一段时间,才知道显示器的重要性。比如有时候显示器的色彩不够准确,辛辛苦苦做的图,还可能被客户投诉。

如果说性能好的主机是设计工作的主心骨,那一个性能好的显示器更是锦上添花~

特别是我们这些Web/UI设计师,不管是设计阶段还是产出成品的效果,都和显示器息息相关的。

那么WEB/UI设计师要从那些方面来选择显示器呢?

小编认为主要从以下四个方面考虑:

1. 分辨率
2. 色彩
3. 健康
4. 性价比

一. 分辨率

现在做天猫电商之类的首页设计,最常用的宽度已经去到 1680 – 1920 像素,而 APP UI 界面也要从 @2X 的尺寸做起,如果还在用低分辨率显示器,会有着各种不爽。

举个例子,设计一个电商首页,默认新建一个1920*1080像素的画板,原图如下:

原图 1920p*1080

下面我们来比较一下同样尺寸、不同分辨率的显示器来展示在PS设计时的效果。可以着重看看网页页面和PS工具栏的大小~

图1: 1366*768PX(通常是普通笔记本的分辨率)

和原图对比,在PS画板的可见区域十分有限,设计元素时,会非常频繁地移动画板,我想你移动画板的次数比设计的操作还要多……所以用这分辨率的显示器就不要用来做设计了,只会受气,直接淘汰。

图1

图2:1680*1080PX(普通显示器)

基本上可以看到网页“安全”区域操作,但不能以100%方式查看全貌,所以这种分辨率也可以淘汰了。

图2

图3: 1920*1080PX(普通宽屏显示器)

嘿,这个比上面2个好一点了,几乎可以看到全貌,但必备要在PS全屏模式下才能看到。所以这种显示器嘛,还能凑合使用吧。

图3

图4: 2560*1440PX(高分屏)

嘿,我想大家也看到了,在这个分辨率下,不需要缩放、不需要全屏PS就能看到作品全貌,极大提升操作效率。所以 2560*1440 像素是目前WEB/UI设计师们的使用分辨率。

图4

大家会发现同样大的界面,分辨率越高,画面越精细,这个从网页页面和PS工具栏的大小就可以明显看出来~

来个对比,只有高分辨率才是正确的设计方式^_^

宽屏还有其它优点的,比如双屏操作,这对于写代码时可非常方便,一边写前端代码,另一边可以预览网页效果。

说到写代码,就不得不说到显示器的旋转功能了。旋转显示设计,比如小编最近在使用的明基BL2420PT显示器就有这个强大功能,可以把屏幕90度旋转,一次可以看几百行代码也不是问题……

有时候要做一些天猫详情页,横屏设计时两侧的空白会浪费空间,并且不方便把控页面的整体情况。但是竖屏操作的话就会很方便了~

二、色彩

几乎每个设计师都会遇到“色差”问题,而小编觉得要彻底地解决色差问题,最最好的方法还是提高设计师的能力啦。

但是磨刀不误砍柴工,无论是新手还是经验丰富的设计师们,一台色彩准确的显示器一定可以帮助设计师们事半功倍。毕竟色彩好的显示器才能显示出作品的效果!

更何况像我们做Web设计或者UI设计,设计成品一般会在其他显示器上显示,所以对显示器色彩的还原度要求还是比较高的~

这是同一张图片在专业显示器和普通显示器上显示的对比图:

这张图片可以明显看出,与专业显示器相比,普通显示器的色差真的很明显。

因为当设计师自己显示器的色彩不精准时,如果客户显示器色彩精准,那就很尴尬了;而如果客户显示器色彩也不精准,那色差就会更大了!!!

色彩方面,设计达人网小编用 Retina 屏的 Macbook 和最近在使用的明基BL2420PT对比了下,肉眼是无法看出偏色问题。一般来看,虽然苹果笔记本并不如艺卓的显示器那么专业,但是色彩显示在业内也算口碑标杆,由此可见在色彩表现方面,明基这款显示器的确不错。

同时,我特地参考了一些考量显示器色彩的重要参数,BL2420PT的色彩的确达到了专业级别:

色域:100%sRGB。参考下图,一般显示器的色域是96%~98%sRGB。假如色域无法达到100%,那这个显示器就不能完全显示所有颜色。

而BL2420PT的色域达到100%,色彩就足够丰富了。

色深:8bits色深,最大色彩达1670万,色彩过渡均匀。

参照下图,色深值越高,图像表现的色彩也越多,由此一来,色彩的过渡会更加均匀,图像就不会出现颜色断层的问题了。

色准: △E<3,色彩更加精准,最大限度降低偏色问题。

△E是一个衡量色准的值,显示器△E值越低,色彩的精准度越高。可以参考下面的图片,△E越高,色差就越明显。

另外,这款显示器还有好多专业的画面模式,例如“M-Book”模式可以一键还原苹果色,因为这款显示器本身采用的是标准的sRGB色彩,苹果电脑的色彩与之相比会稍微偏艳丽,因此”M-Book”模式能让显示器更适合苹果用户~

三、健康

设计师工作时需要长时间坐在屏幕前,颈椎、腰椎有时候会不舒服,长时间盯着显示器看作图,有时候还会加班到深夜,眼睛疲劳酸涩那是经常的事情。

所以选择显示器的时候,最好还要考虑“健康”的问题。毕竟设计真是一个“高危”行业,新闻动不动就报导年轻设计师猝死……所以不仅要给自己买保险,更要选择一个有益健康的显示器给自己续命啊~

颈椎、腰椎保护:建议选择可以大范围旋转升降的显示器。

比如小编的明基BL2420PT显示器可以升这么高

也可以这么矮……

建议最佳调整高度是屏幕中心与眼睛能够平视。

眼睛保护:长时间盯着屏幕,甚至忘记工作环境的光线变化,眼睛疲劳,视力易受损。

建议选择能减少闪屏及有蓝光模式的功能显示器。

小编使用的显示器目前还有一个护眼功能,可以根据当前环境光自动调节屏幕亮度。开启这个功能也是超级简单的,只要和上图那样,按屏幕边框上的触摸按键,开启“眼睛保护”,就可以智能调光了~

但有个缺点就是,每次开机,屏幕都是最亮的,然后再慢慢变暗……

不过瑕不掩瑜,显示器能自动调节亮度,也算是帮了一个大忙~毕竟每次工作都废寝忘食的,天黑都不知道,屏幕太亮好怕眼瞎QAQ

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

整个2018年,Dribbble 反映出来设计趋势是什么?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

每个人都在关注趋势,Dribbble 是设计师的集散地,那么在2018年,Dribbble 反映出来设计趋势是什么?

整个2018年,Dribbble 反映出来设计趋势是什么?

每个人都在关注趋势,Dribbble 是设计师的集散地,也是设计趋势最容易体现的地方。如果你经常关注 Dribbble 上的那些设计作品,你总会注意到许多有意思的共性,在更长的时间尺度上关注这些共性,会发现其中不少会延伸到更大的设计领域和范畴,其中很多会以趋势的形式成为阶段性甚至长期的设计趋势。这些流行的趋势有的关乎技法,有的则是色彩、风格,甚至是某种隐喻。

当然,不论如何,作为设计师,这些趋势的价值是毋庸置疑的,关注它们,以开放的心态面对着,也许它们会在下一个阶段在我们自己的设计作品中开花结果。

1. 非标准比例的人物形象

以人为核心的自定义插画是这两年来,最显著的设计趋势之一。这种插画展现形式能够快速呈现想要呈现的环境、流程,更重要的是创造情感诉求。标准而写实的人物形象在大量的设计诉求之下,显得平庸而不够突出,这也使得走样但是富有张力的非标准人物身材比例显得更加出彩,这也是为什么近年来我们能够如此频繁地看到诸多非标准的人物插画。

整个2018年,Dribbble 反映出来设计趋势是什么?

这幅插画来自 icons8 。巨大的鞋子,不成比例的巨手,水壶纤细的握柄和壶颈,强烈的对比显得颇具张力。

整个2018年,Dribbble 反映出来设计趋势是什么?

Diana Stoyanova 的插画呈现了一个忙碌女性的形象,非标准的身材略显抽象,但是很有力量。

整个2018年,Dribbble 反映出来设计趋势是什么?

Diana Stoyanova 的这幅插画作品用夸张巨大的人物形象来强调你比手机更大,更重要。

整个2018年,Dribbble 反映出来设计趋势是什么?

而 Radio 的这幅插画则使用走样的身材营造出有趣而可爱的形象,让交互更加有意思。

2. 提供辅助信息的界面插画

时至今日,插画在 UI 中已经不再鲜见。自定义的插画早就不是装饰性的设计,它让UI界面更加具有视觉吸引力,和情感表达的能力。更重要的是,它是功能性的,它为界面的功能和信息提供支撑,以「互文」的方式来告知用户界面想要呈现的功能,毕竟图片和插画所呈现的视觉信息比文字更快。

整个2018年,Dribbble 反映出来设计趋势是什么?

这个界面也是 icons8 团队制作的。辅助性的插画让报错信息也显得足够明亮而正能量,让用户不会觉得难受。

整个2018年,Dribbble 反映出来设计趋势是什么?

这组作品同样来自 icons8 ,这次的风格不同,并且是为移动端新用户引导而设计的。引人瞩目的插画将文字描述的优势更加具象化地表现出来。

整个2018年,Dribbble 反映出来设计趋势是什么?

Netguru 的报错页面显得非常纯粹也非常可爱。

整个2018年,Dribbble 反映出来设计趋势是什么?

Hoang Nguyen 所设计的这个插画甚至是交互式的,它的灵感来源于一款经典的滑块游戏,动效模拟了这个效果。

3. 动态的 LOGO 和图形

动画效果是强化视觉的重要手段。在以往,视觉和图形化元素绝大多数都是静态的,但是现在为了更加积极地迎合用户体验,动态的设计已经成为常规,许多动效所带来的效果是静态设计所无法呈现的,在情绪和氛围上的营造也更加强大。

动效不仅能够让产品在视觉上更加吸引人,而且能够向用户呈现出产品的品质感。此外,你还能够在网站、通知、教程和交互流等吧托女个的地方找到动效。这也是为何 Dribbble 的设计作品中,有如此之多的动态的图形化元素。

整个2018年,Dribbble 反映出来设计趋势是什么?

Motion Design School 的这个动态 LOGO 借用了负空间的设计方法,主体则采用了狗的形象,动态呈现下极为可爱生动。

整个2018年,Dribbble 反映出来设计趋势是什么?

Awsmd 则更有意思,将水母的运动方式赋予了花朵,良好总生命体在体态上贯穿一致,有着的视觉表现力。

整个2018年,Dribbble 反映出来设计趋势是什么?

Markus Magnusson 将一组风格一致情节连贯地插画动态地连接到了一起,让LOGO 具备了强大的叙事能力。

整个2018年,Dribbble 反映出来设计趋势是什么?

Yup Nguyen 的动画则不仅时尚,而且非常有趣,让人感到愉悦,而忘记等待的烦恼。

4. 工作流程和工作区主题插画

Dribbble 上的数字插画主题之一,就是对各种工作流程和场景。插画和平面设计师热衷于相对艺术地呈现设计工作的流程,团队的协作,创意的发散过程,沟通的状态,工作空间的呈现。它流行的另一原因,是这种内容的插画在着陆页和博客文章页面中非常适用,且非常流行。

整个2018年,Dribbble 反映出来设计趋势是什么?

Tubik Studio 的这幅插画展现了设计师的工作空间,整个视角似乎是在广角相机下被扭曲了,非常有趣。

整个2018年,Dribbble 反映出来设计趋势是什么?

来自 Walid Beno 的这个插画则呈现的是团队协作的场景,巨大的UI界面显得颇为夸张,不过主题性也是借此才得以体现和强化。

整个2018年,Dribbble 反映出来设计趋势是什么?

Pitch 的这幅插画同样呈现的是团队协作的场景,不过加入的动效非常微妙,将协作的趋势和状态给放大了出来,视觉上更加动感,且足够时尚。

整个2018年,Dribbble 反映出来设计趋势是什么?

Ted Kulakevich 的插画中则描摹的是一个正在工作,喝着咖啡的角色形象,和日常的设计和创意工作者的状态非常接近,令人赏心悦目的色彩则让整个状态令观者非常舒适。

整个2018年,Dribbble 反映出来设计趋势是什么?

如果你的工作状态也是如此的忙碌,那么你应该能够从 icons8 的这幅插画中找到共鸣。插画中被工作内容所包围的状态不就是你嘛?

5. 有趣的吉祥物和奇妙的生物

设计是一个需要想象力的工作。有趣的小怪兽,奇妙的机器人,经典或者原创的卡通人物,只存在于传说和想象中的生物,从来都不会在 Dribbble 上缺席。品牌吉祥物的设计在这种趋势下越来越具有明显的情感表现力,而卡通化的角色形象很大程度上会利用人们对于特定动物或者特定形象的情感关联,人格化、角色化之后的吉祥物,能够让用户产生在和它进行情感交流的错觉。

整个2018年,Dribbble 反映出来设计趋势是什么?

设计师 Mike 的网页设计作品当中,有趣的卡通形象作为视觉主体,让产品和用户更快和页面产生视觉连接。

整个2018年,Dribbble 反映出来设计趋势是什么?

和Mike 的设计目标不同的是,Alexandra Zutto 的插画是借助机器人的形象来呈现未来主义的氛围。

整个2018年,Dribbble 反映出来设计趋势是什么?

Motion Design School 使用可爱的动态插画来强化品牌的展示。

整个2018年,Dribbble 反映出来设计趋势是什么?

这组来自 icons8 的插画所营造的是一个典型的结帐场景。真正特别的地方在于角色的设定,人和机器人之间的交互,营造出科幻的氛围。

整个2018年,Dribbble 反映出来设计趋势是什么?

Ramothion 灵活的运用狐狸这个吉祥物形象,结合UI元素,表达了「演示」的主题。

整个2018年,Dribbble 反映出来设计趋势是什么?

icons8 的这幅插画则利用了噪点来赋予角色以一种带有艺术感的气息。

6、各式各样的运动状态

运动就是生命,对于设计师和插画师而言,最有张力的东西大概都藏在运动将要开始的时候,藏而未发的一瞬间,或者运动过程中,姿态舒展的某一秒。

体育运动中往往能够更快找到这样的状态,不过其他的主题之下,也存在类似的运动状态。这样的运动状态充满了表现力,设计师和插画师们常常会借助色彩、图形、曲线等元素来构建这样的设计作品。

整个2018年,Dribbble 反映出来设计趋势是什么?

Unfold 的插画呈现的是冲过终点的运动员,主题暗示出了成功、成就,明亮的色彩和舒展的姿态在整体上保持了一致,艺术性也不低。

整个2018年,Dribbble 反映出来设计趋势是什么?

同样是呈现的跑步,但是Jack Daly 所表现的是即将开始的运动,蓄势待发的一瞬间的状态。这幅插画是给 InVision 所设计的,主题是设计冲刺,而这幅插画非常贴合这一隐喻。

整个2018年,Dribbble 反映出来设计趋势是什么?

Walid Beno 的插画所呈现的场景非常独特,现实的路径和虚拟的景象连在一起,人物仿佛骑行在现在与未来之间。

整个2018年,Dribbble 反映出来设计趋势是什么?

这幅来自 Tubik 的插画则将运动的场景和手机熔于一个场景当中,整个构图非常动态。

7. 阴影和负空间

平面设计另外一个重要的趋势,就是使用尽可能具有表现力的插画设计,利用阴影和负空间来创造戏剧感和视觉影响力,就像Vogue 的御用设计师 Malika Favre 的插画作品那样。

有限的色彩,引人瞩目的色彩对比,光影之间的互相成就,大胆而有意义的细节。如果你稍微有意识地去看,会发现每天都有设计师在 Dribbble 上发布这样风格的作品。

整个2018年,Dribbble 反映出来设计趋势是什么?

比如 Ksenia Shokorova 的这幅插画就很好地呈现出夏天的炎热和慵懒的夏日气氛,以富有表现力的人物轮廓作为构图的中心,甲板和水面构成鲜明的对比,色彩不多但是令人印象深刻。

整个2018年,Dribbble 反映出来设计趋势是什么?

Joanna Lawniszak 的插画则使用强烈的光影,让一个简单的着名变得具有明显的舞台效果,相当大气。

整个2018年,Dribbble 反映出来设计趋势是什么?

Yoga Perdana 的这个LOGO设计作品利用的是负空间,让文字当中融入了一个非常清晰的猫的形象,并且还呈现出猫在文字之间穿插的效果。

整个2018年,Dribbble 反映出来设计趋势是什么?

这个名为 Mr.Travel 的LOGO设计作品来自设计师 Yuri Kartashov,他将男人的面部和山脉的形象结合到了一起。

整个2018年,Dribbble 反映出来设计趋势是什么?

Dmitry Stolz 的设计项目 Fetch My Meds 中使用了两个可爱的动物角色,微妙的动画和明确的对比使得两个角色显得活泼而有趣。

8. 3D 图形

3D 无疑是现在 Dribbble 上最热门的趋势。大家用3D建模来做各种各样的东西,无论是等轴测的插画还是游戏角色,还是以往大家会用PS来绘制的光影,现在一并使用 3D建模和渲染来实现了。

整个2018年,Dribbble 反映出来设计趋势是什么?

Ueno 这个引人入胜的动画效果就是在 3D 渲染的基础上实现的,有趣的元素构建成的场景让人爱不释手,而这居然是一个招聘广告?有意思。

整个2018年,Dribbble 反映出来设计趋势是什么?

Tubik Studio 的这个首图中的插画形象,同样是使用3D建模来实现的,这样的角色形象很容易让人联想到动漫和游戏,结合风格类似的CTA元素,可以极强地影响用户的注意力。

整个2018年,Dribbble 反映出来设计趋势是什么?

这是设计师 Mohamed Chahin 精心设计的等轴测插画,柔和的色调和模糊的光影让家的氛围得到了强化。

9. 关于 UI 界面的插画

随着精通插画的设计师越来越多,插画开始深入到设计的方方面面,包括在 Web 和 UI 界面当中的字体、图形甚至整个氛围和环境。由于注意力的竞争如此的激烈,以往原本只需要普通图片就能做到的事情,现在需要借助插画来做到。

整个2018年,Dribbble 反映出来设计趋势是什么?

在 Dropbox Design 的这篇创意相关的文章当中,包含有一些这样带有粗野主义风格的插画。也许你并不是那么青睐这种风格的插画,但是即便如此,你也不会绕过这幅插画只单纯浏览文字。

整个2018年,Dribbble 反映出来设计趋势是什么?

这是一幅关于医生和专业交互界面的插画,作者是设计师 Alexander Savic ,插画会将人迅速带入进医疗保健相关的领域。

整个2018年,Dribbble 反映出来设计趋势是什么?

这幅插画来自设计工作室 Fireart Studio,它暗示了约会 APP 背后的真实和潜藏的精彩,让人主动追求属于自己的爱情。

整个2018年,Dribbble 反映出来设计趋势是什么?

Dmitry Stolz 的插画则呈现了移动端APP 上的交互,做决策的关键时刻。

10. 多层次剪切效果插画

最后一个值得一体的趋势,则是类似剪纸一样的多层剪切视觉效果插画。这种设计效果让插画具备了丰富的层次,显得深沉而原创,带有更强的物理工艺质感和难以磨灭的印象。

整个2018年,Dribbble 反映出来设计趋势是什么?

Eddie Lobanovskiy 的插画就是使用的这样的效果,主题关于太空,这种多层剪切效果让太空显得更为深邃。

整个2018年,Dribbble 反映出来设计趋势是什么?

Michael Fugoso 的设计作品,他将这种插画定义为具有深度幻觉的平面数字插画。

如果这种插画风格和卷轴效果结合起来,就更加强大了,

整个2018年,Dribbble 反映出来设计趋势是什么?

Studio VØR的多层次剪切插画在交互中次第呈现,各个部分相互之间影响并关联着。

整个2018年,Dribbble 反映出来设计趋势是什么?

这是 Anano Miminoshvili 所创建的一个网页滚动交互的案例,随着用户不断滚动,不同的层级的元素次第运动,一个接这一个被激活。

结语

毫无疑问,Dribbble 本身正在逐步成熟,越来越多的设计作品中,开始融入更为明显的艺术特征,设计的层次和力量感比以往更强了。作为设计师发布各种小样、练习的Dribbble,本身也作为设计领域的试验田而存在,很多设计趋势在这个平台上酝酿,成熟,并且逐渐走向世界。

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

快速提升设计感的7个版式小妙招

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

看了很多版式技巧仍排不好版?懂得很多套路仍做不好设计?其实也正常,因为大部分技巧都比较笼统,每个人用起来的会有不同的效果,所以葱爷特地总结了7个比较具体的小技巧,算是属于一学就会且很容易出效果的排版小妙招,希望能帮你能解决一些比较具体的问题。

一、文叠文

该技巧操作起来很简单,就是在标题或内文下面,增加相关的英文单词或阿拉伯数字就可以了。不过在处理下面的文字时要注意:1.颜色要比上面的文字淡,以免影响其识别性;2.字体要用粗体,且字号要比上面的文字大;3.要与上面的文字错位排版。之所以这么处理是为了增加版面的层次、对比、以及元素的丰富性。

二、给标题增加小色块

这是增强标题设计感的另一种处理方式,单纯的文字标题难免显得单调,我们可以通过增加辅助元素使它变得更丰富一点,比如在文字的基础上加小色块。

色块的高度最好大于笔画厚度,小于文字的高度,加上去的方式可以是叠加于文字之上,或是置于文字底部,创造出文字的一部分在色块内一部分在色块外的对比效果。还有,色块的颜色最好来源于版面中的其他元素。

三、用斜线或点填充空白

在做设计的时候常常会遇到这两情况,一是版面中会多出一些影响版面平衡的空白,但已经没有合适的内容可以填充,如果硬塞一些装饰文字或者图案,很可能会弄巧成拙;二是有的区域小元素小信息比较多、比较散;怎么办呢?这两种情况都可以通过该方法解决。

1.把斜线或点重复排列成一个矩形,然后把它填充在空白处就可以平衡版面,且不会造成突兀的感觉,如下图案例:

提示:线条不宜太粗,点也不宜太大,而且此方法只适合填补小空白,不适合填补大面积的空白。

2.在比较散的元素下方排一组斜线,可以把各个分散的元素联系起来,使其成为一个整体,如下图:

四、把背景分成两个斜切的色块

背景能很大程度影响版面的设计感,这一点你们应该都有体会,常规的处理方式是把背景作为一整个色块,而如果把背景分割成两个几何色块时,设计感立马就会增加不少。

分割的方式好比用一把刀在背景的黄金分割处,划一条倾斜的直线贯穿版面,使整个背景一分为二,而这两个色块的颜色对比要比较强烈。另外,在横版中用左右分割、竖版中用上下分割效果会比较好。

五、给图片加圆形色块

增加对比关系是加强设计感的最有效技巧,我们也可以用此方式来优化图片,如果版面中的配图是没有背景的产品或人物,那么在这些图片上加一个圆形的色块,创造出虚与实的对比,通常也能得到不错的效果。

提示:

1.色块可以置于图片底部,也可以采用正片叠底压在图片上方;

2.圆形色块的边长至少要超出图片宽或高;

3.图片与色块要错位排列。

六、给每行文字都加一个色块

该手法在画册和海报设计中比较多见,跟直接在一段文字下方加一个大色块不同,而是要根据每行文字不同长度,单独加一个相应长短的色块,所以这些文字每一行的长短最好是不一样的。

这种处理方式可以使整段文字看起来更整体,增加文字视觉冲击力,而且还能使文字与背景区隔开,加强文字的识别性。

提示:

1.段落文字行数太多或太少效果都不会太好,3-10行左右为最佳。

2.各个小色块可以相互连起来,也可以相互隔开,以实际效果为准。

七、用飘带装饰包装上的文字

如果你看过的食品包装够多,你应该能发现,很多包装上的产品名称、广告语、或者卖点等信息,都会摆放在一条飘带上,这么处理的效果通常不错,因为飘带具有礼品、赠送的寓意,用在哪里都不会太唐突,而且飘带的形式简单、有细节、变化丰富,很适合用作装饰元素。

还有一点也很重要,飘带的形式一般都是柔软的曲线,这与版面中其他直线元素可以形成鲜明的对比,加强版面的灵活性。

 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

温暖与生命力!2019年潘通年度流行色「活力珊瑚橙」新鲜出炉!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

2019 年的潘通年度流行色终于发布了。这家专注于色彩研究和标准化的公司,针对过去一年甚至更长时间维度上的文化和色彩趋势进行广泛分析之后,选出了这款 Living Coral —— 「活力珊瑚橙」 作为2019年的潘通年度流行色。

在这个全球都处于动荡而不确定的时间点,潘通希望这样一个充满生命力,象征活力的色彩能够像一针强心剂,给每个人都注入能量。

对于这款珊瑚橙,潘通色彩研究中心副总裁 Laurie Pressman 是这样说的:「就像这种色彩所依附的连绵的珊瑚一样,我们期望这个颜色能够在接下来不断变幻的10年里面给人以向上的浮力和确信的力量。在技术疾速发展和全球动荡的背景之下,我们希望这种色彩能在全球文化上带来扭转,加速转变。」

如果你对于色彩的心理效应和历史有所了解,那么你会发现,活力珊瑚橙并不是一个带来变革和飞跃的色彩。在这个权威主义盛行的时代,它的存在目的更像是在给每个人的一种精神加持,提升确信感。活力珊瑚橙是一种曾经流行于上世纪50年代和60年代的色彩,你可以在当时的汽车、配饰、海报和时尚穿搭当中看到它的影子,在现在看来这就是一种传递复古的感觉的色调,它代表着那个简单、热情而单纯的年代,换句话说,它能够唤起「简单时代」的感觉,没有红蓝白三色(美国国旗的颜色)所营造出来的强烈的政治意味。

潘通色彩研究中心的执行董事 Leatrice Eiseman 在声明当中提到:「当我们透过自然和数字设备来透视我们的生活的时候,色彩是贯穿始终、保持平衡的镜头,而活力珊瑚橙更是这样的一种色彩。大众对于人与人之间的沟通与社交联系的期待越来越高,珊瑚橙这种色彩的人性化的特征可以让人更加振奋。」

在新闻发布会上,潘通官方表示:「在它光彩夺目又难以琢磨的色彩气质之下,仿佛带着海洋的呼吸感,珊瑚橙用仿佛泛着气泡的活力感冲击着我们的视觉和大脑。」

潘通每年所选取的流行色通常都有着一系列比较富有凝聚力的主题,而活力珊瑚橙本身和大自然有着非常紧密的联系,这总让人忍不住想起 2017 年所选取的年度色彩,草木绿。

「这种色彩很令人舒适!」Pressman说道:「越多东西推着我们前进,我们就越是想回归根本。周遭的一切都令人畏惧,所以我们希望有东西能够让我们感到安全、快乐,期待感受到舒适和温暖。」

色彩所带来的情绪影响并不只是停留在理论当中。活力珊瑚橙是一种非常实用的颜色,无论是在现实生活中,还是在虚拟的屏幕以内,都能帮我们弥合鸿沟,缩小差距。

在接受采访的时候,Pressman 提到了活力珊瑚橙的许多特性。在过去的几年当中,珊瑚橙越来越受欢迎。它整体上是处于橙色的色相当中,并没有偏向粉红,它温暖的质感和肤色相得益彰。在室内设计当中,珊瑚橙有着更强的功能性,可以和多种不同的色彩搭配,有着近乎中性色的强大兼容性。在移动端 UI 当中,珊瑚橙呈现出饱满的色感,足以让界面显得充盈而活力十足,在社交媒体上呈现出非常强大的传播性。

即使是在数字界面当中,活力珊瑚橙都隐约传递出和自然界之间的紧密联系。

▲设计师 Julien Blouet

今年9月份,以多彩配色的 iPhone XR系列产品当中,也有采用了近似活力珊瑚橙的配色,这无疑也是这一色彩流行的明证。在此之前,潘通公司已经推出过相似的色彩,不过苹果发布的新机当中包含这一色彩这件事情依然让潘通公司感到惊讶。

在采访过程中,Pressman 还盛赞了 Airbnb 这家公司,因为 Airbnb 早在 2014 年的时候就已经在进行品牌重设计的过程中融入了这一色彩。「可以说是非常有先见之明了」,Pressman 称赞道。

▲设计师 Peter Tarka

最后,附上年度活力珊瑚橙的相关参数:


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

 

15年图标设计经验,总结出1套专业流程和8个注意事项

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们每天都在设计图标,并且保持这样的状态超过15年。身为设计师,想必你已经阅读过很多关于图标设计的文章,但是今天的文章不一样,今天我们的文章不会花费很长时间来单独介绍某一个图标的设计,而是设计任何一套图标应当遵循的基本流程,以及一定要注意的8个关键的注意事项,你可以将这些东西带入到一些现成的案例当中去验证。

这个注意事项清单,也可以被视作为给设计师所编写的图标设计指南,即使设计趋势发生变化,这些规则和经验依然适用。遵循这些规则和技巧,能够确保图标从设计到使用都可以更加无缝和顺畅。

我们并没有重新发明轮子,相反,我们会以这种方式来呈现我们的工作流程细节,希望它也能帮你有效地组织工作。

循序渐进地设计图标

像我们需要系统而大量地设计图标,设计流程是最重要的事情。正如你所看到的,绘制流程在图标绘制之前,就已经开始了。

  1. 了解你要创建的图标的含义。明白不同图标的使用场景,不同的图标分别代表着什么,了解哪些图标需要使用隐喻,哪些图标使用现实世界中真实的形象。
  2. 梳理出图标正确的隐喻,脑暴出可能的符号和形象。记住图标的含义和形象之间的关联,以最佳的形式呈现图标,直指本质。借助词典和单词集来获取图标相关的概念的关键词,同义词和定义。简化和抽象你的想法,你会找到一个抽象概念「翻译」出来的对象。
  3. 不要拘泥于现在当前的任务和状态,尽量进行彻底的调研,尽可能地搜集相关参考资料。可能有人已经为这一主题设计了很不错的图标版本,可以参考已有的设计,获取灵感。
  4. 确定图标的样式。图标应该是扁平的,线性的,Material Design,是用符号还是借助手绘来呈现。有的 UI界面有很清晰的要求,比如 iOS 平台和 Material Design,如果 UI 有非常清晰固定的设计风格,那么图标的设计需要尽量贴近。
  5. 按照选定的方式来呈现设计,看看它最终呈现是否正确。保持整体设计的一致性。
  6. 注意图标要矢量化,连基本的草图都应该是矢量化的。
  7. 在 UI 布局中测试图标的设计。

Icons8 的实战案例

按照上面的流程,能够绘制出不同样式足够优秀的图标合集。下面是我们在这样的流程下所设计出来的图标示例。

▲ Material, Outline: Science and Studies Icons

▲ Carbon Copy: Animals

▲ Nolan Icons: Aging

注意事项清单

如果你像我们一样每天设计图标的话,也会碰到各种各样的问题。其中最重要的是下面的注意事项清单,它们能够确保我们不同的人在不同的时期不同状态下,设计出来的图标能够协调到一个主题、一个系统当中。如果你也要设计图标的话,可以将下面的清单打印出来,贴在自己的桌子旁边作为参考。

1. 像素完美

让图标踩在每个像素点上,确保清晰不模糊。

2. 视觉重量

用斜视的方法来感知图标,看看成套的图标是否都具有相同的大小。斜视、调整、再看、再调整,直至均匀理想。为了保持总体视觉重量的一致性,我们会使用「完美的圆形和正方形」来和所有的新图标进行对比。

3. 几何图形

尽量使用简单坚实的几何形状来绘制所有必要的线条,它们会让你的图标显得更加牢固可靠,具有吸引力和说服力。

4. 清晰简洁

删除所有无法传达图标概念的细节,避免让图标显得沉重而复杂。

5. 足够的空间

确保图标内每个细节和元素都有足够的空间,不会显得过于拥挤或者空旷。

6. 对比度

在黑色和白色的背景上检查图标的全部细节,看看是否其中的每种颜色都是可见的,以及元素之间的对比是否足够。

7. 视觉统一

检查线条的粗细重量,边角的大小,配色方案,细节层次和设计元素在整个合集中是否是不变且一致的。

8. 图层排序

确保图标中图层顺序清晰而规整。这是一种良好的习惯和专业的精神。

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

一款美丽的Admin后台界面HTML模板源码 Light Bootstrap Dashboard

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

今天为大家推荐的素材是一款admin系统后台网站模板: Light Bootstrap Dashboard,这套后台源码界面十分好看,这也是小编为何推荐的原因之一。

后台管理模板

该网站模板使用 Bootstrap 前端框架搭建,对于要兼容响应式手机网页用户推荐使用。此外,小编特喜欢左侧面板设计,可以自由切换颜色,并且能更换背景,颜色与背景的处理非常 nice! 但不足之处就是后台元素不够强大,如果需要更多后台模块,可以购买作者的Pro版。但即使如此,这个免费版个人认为也值了。

下面一起看看这个免费的管理后台模板源码有什么组件、模块:

Admin后台首页

后台首页的元素并不多,但用户可以自行添加进去。

admin 网站模板

自定义侧栏面板背景、颜色

也可以说是简单的皮肤切换,主要有颜色和背景2种自定义皮肤选项。

用户资料页面

Table样式

如果是Pro版本可带有排序功能。

文字、段落排版

图标

地图页面

提示 Tool Tips

总体元素虽然少了一些,但是漂亮的界面却算是弥补这些不足,当然你也可以购买 Pro 版,也不贵。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

产品设计中“+”功能的相关思考

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

日常工作中,有很多看似平凡的小细节,常被大家忽视,却影响着用户的真实体验。比如,前几天跟同事们针对产品设计中“+”功能所运用的场景、展开形式进行讨论,发现这是一个挺有意思的话题。

所以跟大家分享下,我的一些相关思考。

1. “+”的运用场景

我们常见的产品中,采用“+”功能的场景,大致分为两种:a.(上传)内容选项;b.(聚合)快捷功能。

a.(上传)内容选项

根据“+”的直观表意,大致也能猜到它的运用跟“添加”、“上传”某个东西相关。

比如:微博,点击“+”入口后,是选择所要上传的内容类型。(可以晒自己精修X小时后妈都认不出来的自拍、也可以晒逗比的小视频、或者老子就想搞一场直播)。

比如:下厨房左上角的“+”,点击后,是选择上传作品,或者创建菜谱的选项。

再比如:工具类产品:Google drive,dropbox、百度网盘、微云,点击“+”后,同样是选择上传不同文件的入口。

可以看出,这种情况下的“+”功能,多指“添加”、“上传”的含义,所承载的内容,是同一纬度下的不同选项。

b.(聚合)快捷功能。

众所周知,产品为了节省界面空间,同时避免过多功能给用户不必要的干扰,会选择把一些不常用的快捷功能收到二级展示。常见的产品中,他们选择把这些快捷功能塞进“+”里。

那么,你是不是觉得“+”功能跟“…”功能承载的内容是一样的?比如:乐趣首页右上角“…”,同样是对频率较低的功能的集合。

那为什么有的产品不直接用“…”,还是选择用“+”呢?

通过分析发现,“+”虽然也是聚合快捷功能的入口,但承载的功能有一个共性:都是围绕着用户主动打开、发起、新建…等操作进行的,因此用“+”更贴切。

比如:微信里的“+”,包含着:“发起群聊”,“添加朋友”,“扫一扫”,“收付款”,其实都跟“添加”有关。

比如:淘宝也是类似的处理方式。

再比如:爱奇艺的“+”,里面包含的也是跟“添加”,“上传”相关,像上传视频、扫一扫、我要直播….

反过来看“…”,它聚合的功能,大多是相互关联较弱,且没有主动添加、上传等含义的。因此,用一个相对模糊,没有指向性的符号诠释,更为合适。

由上可以看出,在这种情况下,“+”作为聚合快捷功能的入口,包含的是频率较低,且跟主动“新建”、“发起”、“扫描”等相关的功能。

 2. “+”的展开方式 

当用户触发界面中的“+”时,常见的展开方式有3种,分别是:a.气泡弹出框;b.动态栏;c.沉浸模式。

a.气泡弹出框

气泡弹出框,这个控件又常被称为Popover,一般是由一个矩形和三角箭头组成的弹出窗口,通过点击Popover内的按钮或者非Popover的屏幕其他区域可关闭。

比如,以微信为代表的“+”的展开方式,采用的就是Popover。一般用于聚合快捷功能。优点是触发“+”到Popover的距离很近,操作顺手,效率高(更像是导航的延伸)。

b.动作栏

动作栏,这个控件官方称之为Action Sheet,是用户触发“+”后,出现的一种模态弹出框,里面包含一组与当前情景相关的选项,一般用于上传内容选项

在iPhone屏幕上,为了便于单手持握时操作,Action Sheet通常占据屏幕底部区域。

比如:以Google drive、Dropbox为代表的产品,需要选择上传文件类型的选项。

在这个部分,同事们讨论有些争议点,在于:google drive 和 Dropbox或者微博,它们的加号本来就在底部,所以弹窗让用户感觉视线统一。

而有的产品“+”在上面,弹窗从底部出来,担心注意力切换和手指移动的路径比较长,显得割裂。

带着这个问题,我调研了下有类似情况的产品,会不会让人觉得不舒服。

后来发现,不会的。原因在于我们常用的、拥有10亿+用户的微信,发朋友圈时操作就是这样,而我们并没有感觉很割裂,反而已经习惯。

同样,iPhone自带的“提醒事项”App,也是这样处理。

后来看了规范发现,iOS确实意识到在iPad上,如果继续将Action Sheet显示在屏幕底部,如果频繁操作使用会比较累。因此,做了特殊处理。而手机屏幕上以底部为主,同时点击空白区域取消的操作,也是系统用户所熟知的。

总的来说,操作栏适合承载同一纬度下的内容选项,同时,就算“+”在顶部,采用底部动态栏,体验上也是没问题的。

c.沉浸模式

沉浸模式,指的是当触发“+”时,用户在全局蒙层上进行功能操作,同样适用于上传内容选项。

优点是拓展性更强,体现在:1.提升收益;2.品牌认知;3.内容运营。

1.提升收益

比如:微博,采用沉浸模式,下面是上传不同状态类型的入口,上面可以增加广告收入。

再比如:微云,在沉浸模式下,可以植入自己的“会员”广告,从而提升会员转化。

2.品牌认知

比如:有道云笔记,在顶部的空间内,宣传自己的品牌slogn:“记录,成为更好的自己”,是一种品牌情感化的传递。

3.内容运营

像“好好住”,它们在这个页面加入“话题”运营推广。从而给UGC内容模块带节奏。

大多数产品都想营造社区氛围,建立用户关系,从而增加用户粘性,提升产品留存。

但要想拥有浓厚的社区氛围,首先要有内容、才有人愿意看、才有人在里面互动。

现实问题是,有很多用户有想发状态的心,但不知道发啥,从而放弃。因此,我们应该作出相应的引导。

比如,“好好住”在发布环节,增加话题运营“#每天一张生活日常#”入口,就是解决刚才说的“用户不知道发什么”的问题。运营同学想点子、造话题、带节奏,从而提升用户的发布量。

因此可以看出,“沉浸模式”,对于那些有拓展需求(收益、品牌、运营)的产品更适用。

不知道你有没有发现,相比国外,国内采用这种“沉浸模式”的产品偏多。或许在中国这个互联网竞争如此激烈的大环境下,大家不愿意放弃任何一个能够运营或留住用户的机会。 

总结  

总的来说,在常见的产品中“+”功能的运用场景有:(上传)内容选项、(聚合)快捷功能;它的展开方式可分为:气泡弹出框(适合承载快捷功能)、操作栏(适合容纳内容选项)、沉浸模式(容纳内容选项的同时,拓展性更强)。其实,交互形式没有好坏之分,只有哪个更适合自己的内容需求和产品目标,正如Louis Sullivan所说:“形式追随功能”。

小tips:日常工作中有太多类似“+”这种,看似一个不起眼的小功能,被大家忽略。我们习惯性看一下竞品,拍脑袋决定方案。

但是,慢慢你会发现,只有深挖和分析这些所谓的“小细节”,才能知道别人这么做背后的原因、才能举一反三的去运用、才能更好的兼顾统一性和拓展性,而不是停留在浮于表面的模仿。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

一篇文章读懂数字化驾舱智慧出行

鹤鹤

数字化驾舱近来大热,数字化驾舱的组成元素包含哪些以及又有哪些驾舱相关的新技术出现?在这里,MOMOUX带你读懂数字化驾舱。

日历

链接

个人资料

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

存档