设计思维

为什么你的设计看起来很乱?用这3个方法搞定!

雪涛

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

为什么你的设计看起来很乱?在此之前我们先了解一个概念,我们怎样看这个世界?

我们通过眼睛看世界,眼(又称眼睛,目)是一个可以感知光线的器官。那么结论来了,我们看到这个世界,其实本质就是看到了光。举个例子,晴空万里时我们可以看到很远很远的距离,反之在漆黑的屋子里,我们什么都看不见。

我们再来了解第二个问题,眼睛是怎样成像的?眼睛通过调节晶状体的弯曲程度(屈光)来改变晶状体焦距获得倒立的、缩小的实像。简单来说,成像原理就是晶状体来改变焦距,简单一点解释决定成像的重要因素是焦距。

你的设计看起来很乱,往往在这几个方面出了问题:

  • 明暗关系紊乱;
  • 视觉焦点不明确,画面没有重点;
  • 颜色杂乱,毫无章法。

明暗

明暗是指画中物体受光、背光和反光部分的明暗度变化以及对这种变化的表现方法。明暗分亮面,灰面,暗面,以及明暗交界线,反光五大调子。单个物体明暗关系,暗部(反光,投影)>灰面>亮面。整体关系,靠近光源暗部>远离光源……画画核心画的是光,遵循光照的自然规律即可。

去色检查画面明暗关系

从上至下三张图依次是去色之后的黑白图;运用色相和饱和度给画面赋予一个颜色的单色图;原图。

从下图可以粗略得出结论,明暗(光源色)+固有色=色彩。调色之前先处理明暗,画面颜色处理起来就非常简单了。

最近火爆的国产硬核科幻片海报,即使去掉颜色,黑白关系依旧明确清楚。好的设计即使没有任何颜色,依旧是一副好的素描画。我所理解的明暗关系与色彩的关系相当于人体与衣服妆容的关系,对于一个美女是否漂亮,衣服妆容的搭配是你能达到漂亮的上限,然而你的脸型,身高,气质,皮肤才是你能达到的惊为天人的基础。

视觉焦点

视觉焦点究其概念,是让我们的视线多停留几秒的视觉元素,我们在画面中第一眼就能看到的元素,画面中的「主角」。

对画面的视觉漏斗进行分类:

  • 视觉焦点:想看不见都很难,表现突出;
  • 重要元素:不经意就能看见;
  • 辅助元素:仔细看看也能看见(类似买理财产品的最右下角的小标注,「投资有风险,理财需谨慎」)

高斯模糊法看视觉焦点

眯着眼睛看形,睁着眼睛看细节。把画面模糊调到一定程度,然后看画面,如果画面仍然能看清楚「主角」,那么画面的视觉中心就是可以的。下图画面即使模糊了,我们依然能看清「男主角」沈腾以及飞驰人生四个大字,虽然原图背景复杂以及其他装饰物很多,依然不影响画面的整体协调感,元素多且杂而不乱。

这上面的两个例子看出,即使画面模糊了,还是能清晰看到画面表达的主题。那么模糊度多少合适呢,一般调整到上面所说的视觉漏斗中重要元素看起来刚好模糊到看不清就可以了。

色彩

色彩是附着在物品上由于光的照射产品漫反射的颜色,可以粗略按色彩元素分为光源色,固有色和漫反射产生的环境色。按照长期的实践经验来看,通常比较和谐的配色方式是除了产品的固有色之外,尽量把光源色和环境色统一在三种颜色(黑白灰不算颜色)之内,颜色比例尽量类光源色的主色调占据画面百分之八十的面积,其他环境色作为补充。

色彩插件检查配色

谷歌插件 palette.site 能分析出画面颜色的状态以及画面中几种主要的颜色,借助这个插件能很轻松检查画面是否超过了3种颜色(黑白灰不算颜色),如果超过三种颜色,那么页面就需要做减法,或者将颜色统一在一个色系里,用明度以及饱和度区分。

插件的使用方法:可以直接使用浏览器下载,然后也可以在浏览器中选择一张图片,右键「在新标签中打开图片」,然后再「点击右上角的插件按钮」分析颜色状态。

从上面的两个案例中可以看出,两个 banner 的颜色分析基本都在三种颜色以内,特别是下面的看起来比较复杂的颜色,总共分析的颜色也就红黄蓝,其中蓝色还是点缀色的存在。

今天的内容就说到这里了,我们回顾一下重点内容,解决画面看起来很乱可以有以下方法:

  • 去色检查画面明暗关系
  • 高斯模糊法看视觉焦点
  • 色彩插件检查配色

设计虽没有近路,但可以少走弯路。

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

 

为什么在UI设计中,蓝色会成为最常用的色彩?

用心设计

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

 

不管你是不是UI设计师,细心的你是否观察到你所使用的APP中,绝大多数都采用了蓝色。举个例子,有多少APP软件的LOGO使用了蓝色,大家最熟悉的支付宝、知乎、百度、Facebook、Twitter、Safari均是如此。
为什么这些交互界面会不约而同的使用蓝色?唐人设计总结了以下几个原因:
一、蓝色是被大多数人能接受的颜色
有研究表明,蓝色是绝大多数的人都喜欢的蓝色,蓝色是被全球范围内公认的最安全的设计用色。
二、蓝色是UI设计师的通用色彩
从UI设计师的角度上来看,蓝色是一种泛用的色彩。就我们所认知的常用色彩当中,红色、黄色、绿色都带有强烈的情感情绪。红色代表喜庆,同时也表示警醒;黄色代表活泼,同时也昭示危险的信号;绿色常常关乎安全、健康,而相较于以上三种色彩,蓝色所带给人的情绪就比较模糊或者说是广泛了。
三、蓝色通常代表“创新”和“科技”
还记得唐人设计之前写过的文章《你发现了没?NBA的Logo微调了!》一文中提到了,NBA的LOGO调整之一包括LOGO颜色加深了,也就是在原来的蓝色背景色基础上更加加深了蓝色色调,这样调整的好处在于:更深的蓝色,让NBA联盟看起来更公司化。所以说,当一个公司或者一个APP设计采用蓝色LOGO的时候,常常会让人联想到技术和创新。
四、蓝色让产品看起来更加值得信赖
更准确的来说,蓝色会让用户更倾向于觉得“这就是我要的产品”,当这种感觉和品牌本身的运作和特质结合在一起的时候,就能够形成让人信任的品牌性格了。戴尔、IBM、英特尔和PayPal都是利用技术来营造品牌信任感。蓝色代表冷静、平衡和智慧,许多金融服务类的企业也喜欢用这种颜色。
五、蓝色对于色盲足够友好
考虑到用户群体中不乏有色盲,而占比最大的红绿色色盲群体都能清晰地分辨出蓝色。蓝色是Facebook的主要色调,因为它的创始人扎克伯格就是个色盲,如他所说:“于我而言蓝色是我最容易辨认的色彩,所有的蓝色我都能掌控”
总结:蓝色虽然是最安全的设计色,但不要随便将蓝色泛用在你的设计中,最重要的一点还是选择最适合自己品牌的色彩!

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

我从Google、Airbnb、TED等7家公司设计师那里学到了什么?

雪涛

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

作者: John Saito | 翻译: 正_青_春 审校: 凌艺蜻

我从设计中学到的一件事是你无法取悦所有人。你可以尝试,但你最终会得到一个大打折扣的设计,而且无法让任何人满意。

当你试图让所有人满意时,你会失去你的重点,你会开发一些人们不需要的功能,你所写的用户也根本不会去读。

好的设计就是完全围绕一个清晰的目标。这一点非常重要!

过去的一个月里,我一直在和在设计中有明确清晰目标的设计师交流,他们来自Google,Airbnb,Slack, Dropbox等等, 我想窥视他们的内心,看看是什么驱动他们做出决定以及是什么在指引他们的设计,以下是我学到的一些内容。

UXRen

1、从问题开始,而不是答案

 你是否注册了新产品,然后第二天就忘记密码?这已经无数次地发生在我身上。如果我向你求助,你会建议我做什么?

 有些人可能会建议我直接写下密码,轻松,问题解决了。但是安全专家不会推荐写下密码,因为那并不安全。

好的设计师不会直接跳到解决方案,他们会花时间去理解问题。

 那么,好的设计师会怎么做?好的设计师不会直接跳到解决方案。他们会花时间去了解问题。他们提出问题并找出原因、背景和限制:你一般怎么记录你的密码?你总是随身携带手机吗?你有多少密码?

你越了解问题,你越能找到解决问题的切入点。深入理解给你自信,深入理解就是把你的初步想法转化为实际深入的观点。

我询问了Google 智能助理的产品设计师Adriana Olmos关于她解决问题的方法。当她的利益相关者提出需求时,他们经常根据解决方案而不是问题来定位他们的想法。“我试图去了解他们解决问题的理论基础是什么”她说,从那时起,我与他们一起去了解用户最底层的需求,并了解背后的原因,然后来做优化迭代。了解了原因,如何去做就顺理成章了。

了解了问题的来龙去脉,你就可以找到解决问题的方法了。</div>
            <div class= 评论(0) 浏览(1977)

三招教你营造超强画面冲击力!——以新春运营活动为例

雪涛

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

这画面根本没有冲击力!,下次试试这三招地表最强反击!

身为设计师,你是否遇到过以下情况:


你花费了大量时间来构思与设计,却得到需求方一句“这画面根本没有冲击力!”遇到这种情况我们常会把问题抛向运营同学,但定神反思一下:为什么我们会被带偏?画面如何才能具备强烈的视觉冲击力以说服他人?


什么样的画面,会让你觉得很有冲击力?想必影响因素众多,而今天我们就跟大家聊聊故事性、可读性、空间感这三个维度。




故事性


故事性主要从情绪、氛围和趣味性三个方面来表现。


  • 情绪


先从情绪开始聊,你的画面是想表现出积极上进、欢乐还是愤怒?


画面整体的情绪需要依靠主体情绪都深入刻画,情绪能带动用户的视觉感受,帮助用户更好的从图案中获取与主题相关联的信息,从而引起读者的共鸣,最终达到推广的目的。


 

  • 氛围


其次,就是氛围的把控。除了画面主体的刻画,氛围的把控至关重要。


氛围把控的好坏,直接影响到画面的统一性,这也是为什么很多同学一碰到复杂构图就逃避的原因。只要我们把握住一点,“一切的氛围只为突出主体!” 掌握这一点,相信很多同学都驾驭复杂的构图!

  • 趣味性


与前两者不同,画面的趣味性并非一种技能项,而源于你内心有多有趣!


职业化的人大多都是有职业病的,设计师的职业病应该是对视觉的敏锐度!我做广告那几年,路过地铁站或者公交站台,经常会被好的海报所吸引,也常会驻足研究海报设计者背后的思考。他是如何进行版式编排,如何对画面进行构图,如何做创意推导……如果是我,好的地方我要怎么学,坏的地方我会怎么做!

 

之所举我过去生活的这一例子,其实是想说:每个设计师身上的DNA不一样,感兴趣的事情也各自不同,所做的设计也不一样,这些都取决于你是一个怎样有趣的灵魂!


趣味性在你的画面里,大部分来源于你生活中的积累!设计源于生活,趣味源于有趣的灵魂!




但是,在商业项目中仅仅有故事性还远远不够!商业设计创作中,需要更深挖项目背景,要知道项目所面对的人群、品牌调性、推广目的、投放时间及媒介等。


以这次我们接到的新年运营活动为例,需求面向企业内部,需求方想要体现在春节来临之际对公司内部员工的关怀,目的为增强员工归属感,传达新春关怀。



我们通过对信息的梳理,脑暴得到上图的内容,推导出所需元素,接着绘制草图。

 


Tips:足够完善的草图=节约时间


这里提一个项目实施中的小Tips:我们在很多项目实践中总结出并反复验证过:草图越详细,后续就越能快速地完成项目,甚至能腾出更多的思考时间! 绘制中一旦静下心来,你就可以好好享受源源不断的灵感。只要软件不生疏,绘制起来其实是很快!切记勿要边做边想,这样只会徒劳!

 


我们通过对情绪、氛围、趣味性三个维度进行结合,画面以小哥做舞龙状态,周围围绕着祥云、锦鲤、红包、以及顺丰的元素,整个画面氛围营造一种新年的喜庆!让画面自己讲故事!

 


可读性

 

  • 构图与板式


为保证画面信息的可读性,可运用版心理论、三分线构图法、黄金分割比例等规则来验证自己在构图上的严谨性,这些规则可有效的规避主体不够突出、重心不稳等常见的版式问题。



01. 版心理论


以常见的矩形版面来说,其版心为四边形,具有四个角。我们可以把角理解成点,而版心就是通过四个点连线建立起来的。改变任何一个点的位置,版心的轮廓都会发生变化。


所以,四个点也直接影响了画面的张力,角越多张力越大,元素覆盖两个点会显得张力不足,四个点又会显得过于饱满。因此我们推荐三个点,最后一个点做弱化处理,整体就会显得透气!



02. 三分线构图


三分线构图被广泛运用,摄影、设计、绘画等艺术创作。指把画面横分三分,每一分中心都可放置主体,这种构图会使得主体和装饰元素更显得紧凑有力。它也是最基础的构图技巧,相信大家经常运用,就不赘述。



03. 黄金分割比例


黄金分割比例是现今公认的美学定律,蕴含丰富的审美价值,是视觉上最舒服的比例,与三分线构图法异曲同工。



  • 节奏


画面节奏可以使画面错位布局,营造空间,增强画面的节奏感。


如下图所示,“S型“构图是非常常见的一种构图方式,形式灵活多变,往往S型构图有着明显的层次关系,元素在空间上可以分为前、中、后景;其次,S型构图可以有效的引导读者的阅读顺序,达到视觉引导阅读的作用,从主体作为出发点,保证画面的阅读井井有条。


 


空间感
  

最后就是画面的空间感,但相信设计师在漫长的艺考生涯中,早已学会如何去运用虚实、肌理、色彩去区分主体与装饰元素之间的关系,还没掌握的小伙伴赶紧去温习你的旧课本吧!

 



 结语
 

Anyway, 以上就是有关新春运营活动的设计总结,从案例中我们习得如何通过故事性、可读性和空间感三维来增强画面的冲击力。这一方法也可以应用在项目设计完毕后,通过以上三点内容去验证设计的合理性和有效性。最后来复习下:


  • 故事性 - 你的画面能自己讲故事、表达情绪,当然趣味性也必不可少;


  • 可读性 - 在保证图文条理清晰、信息层级表达准确的前提下­­­­,对版式、构图以及画面节奏的把控十分必要;


  • 空间感 - 增加画面的色彩层次、肌理、光影的表现,这样能更好地表现画面层级间的空间感。


每个设计师都是独立、富有创意又有趣的个体,希望这一分享可以为大家打开一些新的思路!


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

 

ICON设计法则—菱形法则

雪涛

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

从不同维度对Icon设计进行解析,整理一整套Icon设计的法则

网络上有很多关于Icon设计的文章,一些文章从部分维度切入讲述Icon的设计理念,但大部分缺乏整体性。


所以我尝试把自己的思考方式结合其他人的设计理念整理了一个完整的Icon设计法则,通过简单易懂的描述语言,并且结合设计案例呈现出来,希望能够对大家有所帮助。文章使用的案例只代表个人观点,并不代表相关产品。


本文重点讲述Icon设计思维,关于Icon的具体定义以及具体的制作过程就不再赘述,网络上有很多相关文章都有讲述。


从不同维度对Icon设计进行解析,整理一整套Icon的设计法则。每一个产品中都有不同类型的Icon,产品通过Icon可以快速的向用户传递语意,通过独特的设计语言让用户形成对于产品的认知心智。Icon的重要性就不言而喻了。


ICON的设计法则-菱形设计法则,主要包括语意、层级、设计形式、风格、一致性、范围。而其他的设计思考也是这个设计法则的变体,中心思想没有发生变化。通过对以上设计思考点的聚合,来设计能够传递Icon语意,并且能够清晰展现产品结构和信息层级的Icon系统,通过差异化的设计形式展现产品设计的独特风格,让具有一致性的设计语言传递信息,和用户形成共鸣。

Image title



层级

第一层级Icon

第二级别Icon

第三层级Icon

第一层级的Icon一般指首页的井字入口Icon,让用户快速获取入口信息,完成对产品流量的分流,让用户快速完成自己的任务。这种类型的Icon是级别最高的,无论是面积、形式感、视觉冲击力都应该是最突出的,这种高层级的Icon可以简单通过一下三种方法表现,1、拟物化的设计方式增加视觉重心和吸引力。2、通过细节的增加呈现Icon设计的复杂形式感。3、采用冲击力强的色彩对比,抓住用户的关注点。除此之外具体的思考过程,后文也会详细讲述。


下图分别是“自如” “每日优鲜” “大众点评”的首页入口Icon,分别采用了拟物化设计,细节添加,色彩对比的设计方法。

Image title


第二级Icon归纳为导航类型的Icon,引导用户操作产品,完成用户的任务,同时传递品牌特色。这种Icon类似真实街道中的指向标。第二层级的Icon不需要做的视觉重点非常重,能够让用户认知到,并且了解Icon传递的信息,在操作行为上产生预期就可以。通常的设计样式是线型Icon或者是面型Icon。


下图分别是“自如” “每日优鲜” “大众点评”的二级Icon系统

Image title


第三类Icon是语意型Icon,主要是向用户传递信息,烘托信息氛围,并且引导用户浏览信息。这种类型的Icon视觉相对较轻,且不可点击,具体的设计思考在后续的内容展开。


下图分别是“自如” “每日优鲜” “大众点评”的三级Icon系统

Image title


以上三级的划分并不是说Icon只有这几种类型,这样划分是从功能和视觉上进行区分便于设计同学理解,当然在具体的设计过程中也可以对Icon进行更细化的区分,最主要根据具体的需求去定义Icon的层级,然后再采用对应层级的设计语言。


语意    

1)、Icon背后的语意(Icon的特性归纳)

2)、Icon的可识别性(Icon的特点表现)

Icon的重要意义是抓住用户能够通过图像式的语言快速获取产品信息。所以在Icon的设计之前,需要思考Icon背后传递的文字语意,理解语意,构建对于语意的多维拆解(比如沙发是由靠背、两个扶手、四条腿构成,重心要稳,和床有哪些区别等等)。同时还需要思考Icon图形化之后的可识别性,基于对用户认知的了解,归纳Icon设计中需要具体表达的几个关键特点,迎合用户的认知心里。帮助用户快速的获取Icon想要传递的信息,如果不能快速的获取,反而增加了用户获取信息的成本,那就本末倒置,削弱了用户的使用体验。


例:下图是“大众点评”二级Icon设计的语意表现思考方法

Image title



设计形式

1)、外形

2)、表达方式

3)、色彩组合

4)、Icon特色

外形是Icon 的基本形态,不同的形态传递不同的视觉感受,构建不同的心智。同时Icon的外形决定了内部元素的设计。


Icon的表达方式主要两种,分别是线型Icon,面型Icon。线型Icon形式抽象、简洁,便于用户识别,用户认知成本较低,缺点是Icon容易极简,造成了似是而非,可识别性降低。面性Icon相对线型Icon视觉重心更突出,便于用户聚焦,设计表现形式会更丰富,缺点是可能会过于复杂,造成信息层级混乱,增加了用户的认知成本。


色彩组合,就是Icon中的色彩语言,在设计Icon的过程中通常包括单色系的Icon和色彩组合系列的Icon。通过不同颜色的组合传递产品的品牌形象和产品特质,在设计Icon的过程中,尤其是导航Icon的过程中不建议使用超过两种颜色的Icon,这样容易使用户视觉疲劳。


Icon特色是Icon在设计过程中的细节,这些细节是体现Icon自身精致的部分,同时也会影响用户对于产品和品牌的认知联系。影响产品的感性认知触达用户内心。


例:下图以“大众点评”中的“拍视频”icon做举例说明

Image title



风格

1)、品牌理念

2)、产品特色

3)、视觉特色

品牌理念是是指产品背后的定义和想要传递的价值。通过简介的符号、文字传递给用户的认知、理解、印象、感受。通过塑造品牌理念的塑造,和用户在感性层面形成共鸣。融入品牌基因的Icon系统具有更好的辨识性和认同感。这需要设计师和业务团队一起沟通产品,深入理解业务,总结出关键词语表达品牌,最终和业务团队达成统一共识。


产品特色指产品在同行业中的定位差异,核型竞争力。通过简洁的视觉语言进行表现。通常的产品特色体现在业务范围、用户群体,使用场景,产品功能等。在这四个维度中总结归纳成可落地的具体的表达关键词,进一步具象化。


视觉特色指在竞品分析中,总结得到在视觉层面其他产品中可以借鉴的感性共性和自己产品定位差异性的结合。通过可借鉴的共性传递行业的特点,而差异化的视觉表现可突出自己产品的特色和竞争力。


例:继续以“拍视频”Icon为例子进一步解释说明

Image title



一致性

一致性的综合表现在圆角、透明度、线条粗细 、间距、颜色、层级、渐变、特色细节


Icon的一致性有利于降低用户的认知成本,便于品牌传递,而Icon的非一致性会增加用户的跳出感,降低用户对于产品专业度的认可。通常情况下可以通过以上8个维度进行分析和提炼。前七个维度大家比较好理解。重点解释一下第八个维度“特色细节”,特色细节是设计师通过对于产品和业务的理解主观加入的一些关键性视觉表现的点,增加产品一致性的基因,可能是断线,尖角,原点等等标志性元素。


例:下图通过对“大众点评”Icon做拆解进一步从六个维度说明Icon系统的一致性(并不是说每一个icon的设计必须包含八个维度)

Image title



范围

视觉范围和热区范围


随着Sketch的普及,更多的设计师开始采用一倍的设计画布输出设计方案,但在设计的过程中需要注意视觉面积和物理面积,两个Icon的物理尺寸大小是一样的,视觉感性的面积偶尔会变化。所以需要在设计完Icon之后,对Icon进行排列,进行视觉对比,发现视觉的不一致性。


热区范围是代码定义的用户可操作的交互面积,视觉是感知不到的。热区范围的确定有利于开发工程师和设计师达成视觉方案的一致。避免后期由于大家对于方案设计、开发理解的不同,增加后续沟通的成本。通常情况下会出现的问题就是

1、界面开发的还原度低

2、热区范围过小,用户无法点击

3、Icon的热区范围不一致

Image title



总结

在设计的过程中,Icon的样式可以借鉴,但要根据自己的产品做形式上的调整,具体可以通过上述谈到的几个维度作为切入点调整Icon。同时在设计的过程中避免无穷的细化,因为有些细节用户根本不会观察到,这样做只能是设计师的自嗨。设计师容易漏掉的是热区范围的确定,尽管Ios平台和Android平台都有对于Icon范围的定义,但针对产品的icon热区范围调整还是要有设计师自己的想法。这样才能增加Icon设计的思考价值,也更符合产品自身的特色。

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

让我们目瞪口呆的十大黑科技!创新改变生活!

用心设计

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

 

科技不仅改变生活,而且正在改变着我们的生活习惯!不管哪行哪业,不去了解的科技,就面临着被淘汰的危险!电商作为离互联网最近的行业,或许能从这些高科技里找到一些方向和启发!


 

NO.10 踩不湿的鞋子
Vessi鞋,号称世界上第一个100%防水针织鞋
它看起来跟普通的鞋子无异,
但是它具有超强的防水性能,
100%防水能力
并且360°无死角
小水坑我们不放在眼里
甚至可以
直!接!踩!
Vessi鞋的秘密在于它的针织面料专利,
这个称为 Flash Knit 的面料一共有 3 层,
分为不同的功能面料,
这使得它比简单的防水涂层强得多。
第一层也是最外面一层是弹力编织层,由聚酯纤维和尼龙混纺而成,起到防水、拒水、防风的效果;
第二层是纳米过滤层,能进一步起到防水、吸湿作用,最里面一层是透气内层,帮助脚部排汗。
NO.9 材料界的“变形金刚”
下面这些彩色的小卡片—— Formcard
是由英国设计师PeterMarigold
所研发的一种神奇的修补塑料卡,
它可谓是材料中的百变星君,
想变啥就变啥
将原本硬邦邦的卡片放到热水中,
就会变软,
然后就可以捏成各种形状啦!
比如~
手机支架
高级一点的车载支架也是可以滴~
修补雨伞,哪里坏了补哪里
so easy~
虽然看起来软,
但是硬度堪比尼龙。
它的材料是一种
基于生物塑料而
完全无毒的淀粉材料
表面着色的颜料也是安全的。
值得一提的是——
这种修补塑料可以重复使用无数次,
只需要用热水泡一下,就能重新使用。
NO.8 一种“分裂”的材料
杜邦™ Tyvek® 特卫强®
有这样一种材料
防水的同时还透气
是一种会呼吸的材料
硬的跟纸一样
软的像布一样
明明脆弱的跟纸一样,
2个200斤的胖子都未必能把它撕破!
还能用于各种酷炫的手工艺品
既可以当作女生喜欢的包包
还可以变身为时尚的服饰!
杜邦™ Tyvek® 特卫强®
特别的材料特性让它成为设计师们的宠儿
各种创意设计、产品层出不穷
NO.7能修复的黑科技抹布
XG防水珠划痕修复布
这一款黑科技“魔术布”
只需3s即可快速修复车划痕
这块“魔术布”采用
聚酯纤维以及“氧化铈”成分打造。
氧化铈具有特有的切削力,
再加上聚酯纤维布具有摩擦力,
车漆表面的划痕可以快速被修复。
不仅如此,
修复的同时“魔术布”
中含有的乳化蜡成分,
可迅速附着保护漆面,
相当于再给车车做一个美容~
一块“魔术布”可使用15次左右
无论新车、旧车、深色车、亮光漆均可适用
绿色制剂成分还可以保护你的双手
NO.6 擅长堵的材料
FLEX TAPE 防水胶
水流不停
这胶带一拍就堵住了
网上称之为世界最强防水胶——
FLEX TAPE
家里水桶破了个大洞?
一拍,搞定!
家里水管爆了?
一拍,搞定!
NO.5 传说中最变态的黑科技涂料
LINE-X 涂料
据说任何东西涂上他
都刀枪不入坚不可摧,比如
西瓜涂上之后能抵抗锤子的猛击
鸡蛋涂上之后能弹起来了
汽车用钥匙刮都没任何损伤了
在活水表面涂上一层涂料
你都可以在水面
走起魔鬼的步伐
FLEX TAPE 材料
已经应用在各个领域,
尤其是军事、汽车领域
比如美国五角大楼
海军陆战队的悍马
NO.4 具有“生命力”的水泥
生物混凝土Bio-concerte
它依托于芽孢杆菌的神奇生命力
这种细菌产生的孢子
能在没有食物和氧气的情况下
存活200年之久
它将作为细菌营养来源的乳酸钙
混合搅拌成混凝土
若混凝土开裂
雨水渗透进去
休眠中的细菌通过代谢
把钙和碳酸离子结合
形成石灰石,逐渐弥合裂缝
建筑物的使用寿命
有望大大延长
实在是太神奇啦!
NO.3 能屈能伸,时软时硬的材料
P4U
国外有一种材料叫 D3O
在常规状态下是柔软的
却能防住突然的受力撞击
非常安全
鸡蛋摔不碎,防撞防震能力一流
目前已经有上百种产品用到了D3O这种材料
从手机壳到护膝再到芭蕾舞鞋
再也不怕手机碎屏了
中国市场对D3O也有强烈的需求
但 是
前期中国企业从国外采购时遇到不少阻力
难道国内就不能开发出类似的材料吗?
我们就不能做出“国产版的D3O吗”??
可以的!
它就是前面提到的
P4U
NO.2 能吃的塑料袋
这款塑料袋非常环保
由红薯、玉米、马铃薯与植物油
等12种可食用原料做成
100%有机食品
就连印刷字的油墨都是可以吃的
不仅如此
它的韧性和耐用性
不输普通塑料袋
扛得住重物,挨得过焚烧
更重要的是
它具有生物可降解性
在野外它180天就可自然降解
埋进土里45天,扔进水中1天
沸水中15秒就可以完全溶解
一个塑料袋虽小,却足以改变世界啊
NO.1 点沙成土,造福人类
可以让沙漠变成土壤的黏合剂
重庆交通大学力学教授
易志坚带领研究团队
经过7年的反复试验
研发出一种
可以让沙漠变成土壤的黏合剂
这是一种从植物中提取的
植物纤维黏合剂
它能赋予沙粒一种约束
使得沙粒像土壤一样能从任何方向结合
具有自修复和自调节的特性
将沙子与黏合剂混合后
把水倒进沙坑里再也不会轻易流失了
这项伟大的发明可以让沙漠变良田
中国科研团队已经在内蒙古阿拉善盟的
25亩沙漠里进行了实地实验,并取得成功
未来,我们将会看到
越来越多的沙漠逐渐变成绿洲
沙漠不再是寸草不生
反而可以种植瓜果蔬菜
造福人类的发明,大赞!

 

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

设计语言 – 按钮 (button)

用心设计

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

 

一个简单的按钮需要经历无数次推敲,才能整合为设计语言。今天主讲设计语言中的基础部分,组件部分的其中一个部分-按钮。设计语言从结构上分为:基础部分、规则规范部分和业务部分,后面我也会把其它部分补全。

基础部分的画布大小是250000×56000,共47个组件部分;规格规范部分就很庞大了(工业设计、交互设计、平面设计、设计心理学等);业务部分是按系列来分的,有主次之分,目前只分了两个系列(N和S),N系列对应基础组块,S系列对应嵌套定制组块。我把一个系列的主系列称为主版,把子系列称为子版。N系列的一个子版大概有50个页面,每个页面又包含三种样式,每个系列中大概有20个子系列。工程量很大,大致算了一下,要做完两个大系列(N和S)需要做:50(页面)x3(样式)x20(系列数)x2(大系列类别)=6000(页面)。

以上简单描述的这些工作,目前都是我一个人在做,这东西成型以后,做一套网站(从前期到上线),最快只需要15分钟。而我做它的目的也很简单,就是希望帮助企业竖立品牌形象,并用专业知识解决他们所面临的问题,质量高价格低。我的信仰是帮助企业或个人实现社会价值,赋予企业或个人一定的能力,让他们为这个社会做一定的贡献,履行一定的社会责任。先利他再利己,集体利益和集体主义优先。从成本评估到定价,我是不赚钱,但只要我能活着,就一定履行我的社会责任。

说的有点多了,言归正传,这章其实不难,但有些基础知识需要细心讲解,对于有些设计师而言废话较多,但对于新手而言却有可学之处,多多体谅一下吧。

目录

1.网格基数的设置

2.按钮的基础规范

3.按钮的字符限制

4.按钮的交互状态

1.网格基数的设置

这里的网格不是平面设计中的网格系统,是包含在绘图工具中的网格功能,虽然它俩在本质上是相同的,但现在先不要给它俩做过多的区分。用绘图工具绘制网格能帮助我们约束模块,使模块的比例存在一定的关系。例如我就拿尺寸大小为137×31的按钮A,和尺寸大小为128×32的按钮B举例,尺寸大小为137×31的按钮A是不规范的,宽137和高31是不存在比例关系的。而尺寸大小为128×32的按钮B就是规范的,宽128和高32不仅是倍数关系(128/32=4倍),而且两个数都可以整除我们在全局中设的基数4(32/4=8,128/4=32,这里的4为基数)。




当我们理解了按钮的比例关系后,我们就要在绘图工具中(AI、Ps、Sketch、Affinity Designer)找到我们的网格功能,设一个数为基准,定其为基数,然后按照这个基数来进行按钮的绘制,按钮就相对是比较规范的。因为设置完一个基数后,只要你在网格上画按钮,都是存在一定的比例关系的。那如何用绘图工具设置网格基数呢,在Ps绘图工具中找到:【编辑】-【首选项】-【参考线、网格和切片】- 弹出首选项对话框 -【网格 – 网格线间隔 / 子网格】- 网格线间隔设为【4】- 子网格设为【1】;




在Affinity Designer矢量工具中找到:【视图】-【网格和轴管理器】- 弹出网格和吸附轴对话框 -【基本】- 间距设为【4】- 分割设为【1】。这里为什么要把网格基数设置为【4】呢。这是谷歌Material Design绘制小组件的规范,而模块之间定义的基数则为【8】,这里的度量单位是DP,平时绘制网页的话单位用px像素就可以。




2.按钮的基础规范

当我们会运用绘图工具中的网格功能,设置基数来绘制按钮,用熟练了就会相当讲究,每一个细小的间距都应该符合倍数关系,不仅物理位置上能得到统一,视觉上也能满足一定的美感,例如下图所示。




当我们理解了如何用网格功能绘制一个按钮后,接下来就可以理解按钮的边角的曲率设置了。那我把按钮的边角分为三种样式:直角、曲率圆角和圆角。直角就是边角呈90度的角,曲率圆角和圆角的差别在于,曲率圆角的角弧度没有那么大,而圆角的角弧度就是一半个圆。我将按钮的曲率按照不同的样式分布展示了出来,如下图所示。




理解了按钮边角的三种样式,要怎么设置他们呢。直角设置无曲率/90度直角。圆角就设置为50%的曲率,刚好就是半个圆。而曲率圆角就稍微有点麻烦,因为曲率圆角是要根据按钮的大小做相对的变化的。按钮的尺寸变大曲率就应该也随之变大,按钮尺寸越大差异越明显。另外曲率弧度的值也应该有一定的倍数关系或基数关系,例如:4/8/16, 4/6/8,4/8/12,都是可取的。




理解了如何设置网格基数,如何设置圆角的曲率,就要讲到按钮的常用尺寸了,要注意的是这个常用尺寸是基于Web端的,道理是相同的,就看设计师如何在移动端上进行设置了。常用的按钮尺寸有:24px、32px、40px、48px,超出48px的按钮都属于特殊按钮,需要进行单独设置的。




这里的尺寸不是死的,设计师可以根据自己的理解进行尺寸的设置。而采用这几个尺寸(24px、32px、40px、48px)的目的是更好的统一并规范按钮,因为24px、32px、40px、48px都是4的倍数,数与数之间也都是±8的关系,另外在绘制按钮时尺寸也可以平分,留出按钮上下均等的距离,另外这几个数值从Web端的体验上来看,比例也是相对更合适的,所以采用这几个数较为规范一些。




3.按钮的字符限制

一个按钮包含和“无图标”和“有图标”两种形式,无图标比较好处理,直接把相应文本放在按钮中水平、垂直居中就可以了,然后再算清文本与边框之间的距离就可以了。




那设计有图标的按钮时,就要考虑把图标的内边距算出来,并与图标到按钮外边距的距离算出来。




当我们掌握的以上几种绘制按钮的方法,就可以绘制出一整套符合规范的按钮组件。




英文也一样,英文与中文的差别在于细微的尺寸差异。英文字体结构要比中文字体结构看上去更小一些,英文的字符长度也要比中文长很多。但问题不大,只要把控好文本/图标和按钮边角的距离,按照基数递增,就不会有什么问题。




4.按钮的交互状态

一个按钮的交互状态有四种,分布是:无状态、hover(触碰)、点击后、禁止。采用的配色可以递增(由浅到深),也可以递减(由深到浅)。按钮交互状态的配色深浅也是根据整体页面有关的。如果整体的调性偏深,配色可以递减(由深到浅),如果整体的调性偏浅,配色可以递增(由浅到深)。




而颜色按钮的交互状态是根据配色的色阶决定的,同理配色递增(由浅到深),配色递减(由深到浅)。




另外附上一张彩色按钮状态效果图,配色为明亮柔和。





这些按钮的绘制看似简单的不得了,其实都是些高精度的工作,差一个像素点都不可以,当然更需要具备一定的毅力与耐心。我觉得做设计应该追求,重视体验和功能,让形式追随内容,而不是内容追随形式,就这样吧。

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

设计思维工作坊—头脑风暴法

用心设计

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

在我们的设计工作当中最不可缺乏的就是创意了,那这种创意是从何而来呢?当我们拿到一个项目时最熟悉不过的流程的就是小组讨论,那小组讨论中占据大部分的就是“头脑风暴”了,我们先来系统介绍一下头脑风暴。 

【一】什么是头脑风暴法?

头脑风暴法(Brain storming), 该方法主要由价值工程工作小组人员在正常融洽和不受任何限制的气氛中以会议形式进行讨论、座谈,打破常规,积极思考,畅所欲言,充分发表看法。它最早是精神病理学上的用语,指精神病患者的精神错乱状态而言的,如今转而为无限制的自由联想和讨论,其目的在于产生新观念或激发创新设想。 

 

【二】头脑风暴法的组织形式

1)设主持人一名,主持人只主持会议

2)设置记录员1-2名,要求认真将与会者每一设想不论好坏都完整记录下来

3)小组人数一般为6-10人

4)最好由不同专业或不同岗位者组成

5)时间一般为20-60分钟;(发散/收敛/整理3回合)

主持人和主持的注意事项:

1)提前了解会议主题及可能的引言内容

2)控制好自己主持人的气场

3)控制好时间

4)照顾好每一位成员;让每个人都能发言

5)引导会议流畅展开

6)保持团队积极参与气氛

7)适度延伸发展发言者的想法

8)随机应变   

【三】头脑风暴法遵循的主要原则

       (1)自由奔放思考

         

       2)不批判

         

       3)以量求质

         

       (4)搭便车,想法无专利

        

焦点时刻: 

      蓝蓝设计组织部分小组成员以“如何成为一家很牛的UI设计公司?”为主题进行了一次头脑风暴活动。我们将过程做了一下梳理。 

   (1)主持人引言之后,与会者每个人进行了积极地思考并将想法写在便利贴上

        

   (2)每人根据自己的想法畅所欲言,并延伸其他人的想法。

   (3)将便利贴适度的分类整理。

        

   (4)最后我们整理出来了结果(wow!/有了更好/基础的     

     

             



总结: 

脑力激荡并不是为了提出主意让他人去评估和选择。通常在最后阶段,本组成员会自己评估这些主意并从中挑选出解决问题的方法贯彻整个解决方案的每一步都必须对小组成员透明,并有责任分配给每一人以便他们在其中担任重要的角色。在项目还未明朗时,必须有一个共同的决策过程来推进协作努力的成果并对任务进行重新分配。在重要转折点上,需要有评判标准来决定小组讨论是否朝着最终的答案行进。在整个过程中需要不断的鼓励,以便让参与者保持他们的热情。

 通过这个过程,员工的亲身参与,对“很棒的UI设计公司”的定义,再落实行动,向着WOW的方面努力!

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

信息的阻力设计

雪涛

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

什么是阻力?


用户使用App时需要穿越层层页面,在穿越这些页面时需要消耗时间和精力,称之为阻力。


首先探讨一下品类方面的阻力。


Image title


如图,这是几个电商App界面,一眼望过去并不知道哪个页面是哪家电商,其实这个并不重要。如果你到一个平台购物,往往不是因为线上产品用户体验不一样,而是因为卖的商品不一样,或者商品的价格亦或配送速度不一样。所以这里它们长的一样我觉得没有太大问题,甚至我认为他们之间雷同是一件好事,用户省去了切换的成本,尤其是新平台跟老平台长得像都是没什么问题的,这样用户切换新平台阻力就小了很多。


但是当我们需要定义一个新品类时,这个思路就会不一样。



定义新品类


举个例子,国际化品牌Airbnb,在2014年的改版中做了很大的调整,这次改版后发现,要找房子下单,搜索浏览和操作效率并不是很高,但是他们还是做了这种低效高颜值的选择。


Image title


对大多数人来说,私人房屋短租给其他人的这种服务是个新产品,是高端还是低端用户其实没有概念。所以在2014年Airbnb重新推广的时候,他的设计理念是各位房客先别管这个产品是什么样的模式,先说这个事情是不是看起来很酷。是不是酷这件事对于一个新产品是重要的,如果我用过一个酷的产品,分享给朋友。对方往往也会因为我分享的产品酷而觉得我这个人很酷。有些实用性还不错但是品牌调性没那么高的产品,用户使用完后会觉得“把这个产品分享给别人,并不会给我加分”而止步分享。鉴于此,我认为Airbnb高颜值虽然一定程度上牺牲了效率,但是拔高了品牌调性,也就提高了产品的推荐值,是一个正确的选择。


那么当我们需要重新定义一个已有品类时,我们的思路是什么呢?



重新定义品类


Image title



这是我们2016年发版的首页设计,自如和跟之前的租房平台不太一样,所以我们的首页设计要重新定义一个品类。以前,尤其是我们80后对于租房会有什么样的感受都是有一些认知的,比如说黑中介…其实大家都有一些印象,被坑过的80后不在少数。自如出现的时候可能就需要重新整理大家对于这个品类的认知。所以我们在设计首页的时候,先用一个高颜值大图展现一下房子是什么样子(因为我们的房子确实颜值很高品质不错),搜索按纽也不是很大。所传达的思路是我们希望用户在找房子之前对我们的平台有些认知,或者说对租房这个品类,打破固有的刻板印象,有重新的认知。我把这种重新定义已有品类的设计方法定义为“我们不一样”。



在今年,自如的影响力大了很多,在这个背景下我们进行了新一轮的改版。虽然从用户的角度讲可能进APP第一件事是要找房子,但是从企业的角度,企业有很多想要传达给用户的信息,这个页面也是让用户知晓其他业务的入口(自如给大多数人的印象是一个租房平台,但是我们也有像保洁,搬家这类的服务)这些入口也许用户当时不会点击,可是当他需要用保洁,或者搬家的时候就会想到好像自如有这么一个业务,之后他会去自如的首页找。所以多条业务线的并列呈现,也有类似广告曝光的作用。


Image title


我用这张图来代替我们的原型图,我们要展现多条用户线的时候很依赖于这个界面上的多个按纽,当时就想能不能顺着这个思路在尽可能的情况下做的好看一点。我们之所以觉得这个界面给你的感觉没那么好,是因为这个界面信息量太大了,还有色彩的冲撞过猛了。 


我觉得色彩的间隙太小了,应该加大,所以加了一些白框,让这些颜色之间离的更远,颜色间的冲撞也就比较小。


Image title


然后再看这个颜色本身,我们是不是可以选一些相对共性的颜色,比如把标准的红绿蓝改成红,暖绿,和偏绿的蓝(暖蓝),然后把选中的颜色找他的扩展色,用扩展色画出一些按纽。


Image title


这就是我们后来首页的样子。



低频应用的阻力设计


作为一个低频使用的App,跟高频使用的App阻力设计思路最重要的不同点是什么呢?我从学习成本这点来切入。



学习成本


微信的聊天记录删除功能,有一点学习成本。


Image title


用户在使用中偶尔向左滑发现了可以删除聊天记录,通过偶尔的触发,用户学会了这样删除聊天记录。通过后期每天不断地使用强化了对这个功能点的记忆。


但是我们的低频App似乎没有这个机会,由于使用次数比较少,有些功能隐藏起来的话用户大概率永远都不会去用。设计时不但要把点赞的按纽放出来,而且点赞的时候还要告诉用户,点赞后飘在右上角。


Image title


告诉用户收藏之后,收藏列表可以点击右上角这个按钮查看。我们不但要把所有的功能摆出来,而且还要告诉用户这个功能下一步怎么走。因为他如果这次没学会,以后可能也不会用这个App了,这点跟高频的产品不一样。



点击数据


我们设计首页的时候对于点击数据会有一个预期和目标,但是往往数据反馈会跟设计初衷多少有些不相符。大家可以猜一下哪是点击率最高的…在这里我只能告诉大家一个大概的排名。我们当初希望是租房的点击高一些,因为用户点击后可以了解我们有多少个租房产品,所以我们把它在视觉上设计的重了一些。但是其实搜索是排在他前面的,用户对于大面积的区域像banner这类东西是有免疫力的,所以不管做的多花哨其实用户会习惯性的忽略掉,也就是视觉中心和实际的交互中心不见得一样。合租在租房的前面,整租都可以在前面,看来用户还是比较仔细的看了我们的界面,而且可以断定大家对于合租是什么东西了解的很清晰。


Image title


可以看到,“租房”这个按纽我们刚开始设计的时候,感觉应该是高的,因为这个是总集,我们在后期的访问中发现用户认为这个是表示分类,所以设计的虽然明显,但是用户仍然认为这个不可点。



减少阻力


减少阻力,需要跟用户的预期相符。


租房按纽怎么做交互才能让用户感到顺畅?租房的按纽包括右边的四种,其实是个1.5级(介于一级页面和二级页面之间)的界面,所以点击左侧的租房,用户会进入“租房”页面。而右边的这四个Button应该还在,只是这四个按纽变成放大精细版。包括租房Button的底图,也是放大放在页面最上面,这跟用户的预期才比较一致。


Image title


从首页到列表,到详情再到下单及更深层的页面,页面的ICON和精细程度和用力程度都不一样,层级越深视觉冲击越轻。


Image title


如图,最右侧预约那一列,假设设计师有足够精力和时间,是否可以把最右侧的页面做的视觉更丰富,甚至跟首页一样?然而我们现在的规范里面仍然不允许做的更花哨,原因是我们认为在前半段的时候,用户需要一些阻力来提升注意力,从首页先认知这个租房APP跟他平时认知的不一样,接下来有一些信息的输入比如图片,再往后,如果一旦点约看或者是点签约,这时他的决策做好了,产品要做的事就是一步步往以最快的速度,完成这个事情,不要让他有任何的犹豫,不要让他分心,任何的分心都有一定的概率让这个流程中止甚至是终止。


Image title


如图,我把整个流程的信息阻力画了一个曲线,首页阻力是最大的,越往后越小,实质性的信息越多。决策前需要让用户提升注意力,所以信息量要大,表达要丰富。一旦决策后,信息的传达以最简洁的排他形式存在,让用户路径尽可能的缩短也让信息阻力尽可能的变小。


以上就是是我对信息阻力设计的整理,希望大家能够有所收获。

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

你的设计,用户真的看得懂吗?

雪涛

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

设计师经常犯的一个错误就是上帝视角,高估了用户的理解能力。一顿操作猛如虎,结果用户可能根本没看懂你的设计。

前段时间个人所得税app 上线,用户可以在线办理个税专项扣除申报。我自己也尝试使用了一波,在申请房贷利息抵扣的时候发现了一个问题。

在房贷信息模块里需要我输入证书编号,但是我根本不知道到底要哪个证书编号。输入提示非常的简洁,就三个字「请输入」,到底要输入什么?这样的表单在很多产品中都可以看到,让用户输入生日,但没有告知日期的格式。日期格式真的太多了,用户到底选择哪种?

设计师经常犯的一个错误就是上帝视角,高估了用户的理解能力。一顿操作猛如虎,结果用户可能根本没看懂你的设计。

更快:交互层

有的时候用户并不是看不懂你的设计,而是没时间看你的设计。如果我们做了一个抽奖活动,用户看了一眼主界面没有弄明白是怎么玩的,那么这个抽奖大概率是失败的。你或许会不服,我明明把活动规则已经写在下方了,可是用户根本不会看。因为他们真的很「懒」。

所以让「用户看懂你的设计」,首先我们应该做到「让用户更快的看懂」。我们需要提升信息的传递效率。

1. 信息可视化

俗话说「字不如表,表不如图」。用户对于具象元素(表格、插画、icon和图像等)的感知能力更强,具象元素也更能传递情绪。例如:道路两旁的路标多数是以图形为主体的。这是因为在车子高速行驶的过程中,司机没有足够的时间阅读标示上的文字。

场均122.4分,30.6个助攻,45.0个篮板……这些数据对于我们来说只是冷冰冰的数字,我们很难理解其背后的含义。雷达图对球队数据进行了可视化处理,提升了信息的可读性。因为相较于纯文本,大脑处理图形的速度要快得多。

以谷歌日历为例,如果我要做瑜伽,那么就会在日程详情页配一个瑜伽垫的插画;如果我要跑步,那么就会配一幅跑鞋插画。用户甚至不用看文字,通过插画上所描绘的场景就可以知道自己接下来的行程。用户可以更快地看懂。

2. 合适的组件

选择合适的组件可以降低用户的学习和操作成本。以上面的生日为例,与其通过输入提示告诉用户日期格式,还不如直接给用户提供一个日期组件。

多数的选择场景中我们都会使用底部动作栏来承载选项,如选择优惠券/银行卡。参考了一些产品,发现他们都在底部加上了关闭/确定按钮。我们不妨来思考:动作栏界面底部需不需要提供关闭/确定按钮?

决定一个元素的去留,我们需要明白它的作用是否可以被替代。底部的按钮是供用户点击关闭底部动作栏的,光看「关闭动作栏」这个动作,底部按钮并不具备不可替代性。因为点击上方的空白区域或者把关闭按钮放在右上角都可以关闭动作栏。

这样一看,底部的按钮是可以删除的。那为什么其他的产品都保留了呢?因为我们忽视了组件的信息属性,我们没有考虑如果没有它是否会对用户了解系统当前的状态造成影响。

没有底部的按钮,用户无法确定底部动作栏是否正常加载。用户不知道我是只有一张银行卡还是只加载出来一张银行卡。

更准:文案层

前段时间去体检,发现排队显示屏中有的人前面有咖啡图标,有的人没有。好奇的我特地找护士问了一下,发现咖啡意味着接下来的体检项目不需要空腹,你可以去吃早饭了。图标的确很简洁,可是有多少人看到这个咖啡图标会立刻意识到自己可以吃早饭了呢?

过度追求信息传递的效率,而忽视了精度,从一个极端走向另一个极端——简洁易懂的文案是保障信息准确性的重要措施。

前段时间针对报错文案做了一个梳理,发现了一些文案中的共性问题。

1. 没有提供解决方案

一个合格的报错文案应该由:报错场景、报错原因和解决方案共同构成。首先告知用户具体遇到了什么样的报错场景并且解释原因,最后提供解决方案。多数文案都只做到第一步,只描述了报错场景,这并不能满足用户的需要。

  • 如果照片上传失败,用户需要知道是因为格式不对还是图片太大了。
  • 如果因为系统升级,导致服务暂停,用户需要知道什么时候可以再次提供服务。
  • 如果把报错场景看成是一个坑,那么报错文案应该告诉用户你掉进了一个什么样的坑,为什么掉进来以及怎么样才能爬出去。

2. 拥抱数字

多数的文案都不爱提供数字,用户能获取的信息也比较模糊。我们尽量给用户提供准确的数字,包括时间、金额、次数等,让用户对当前的状态有一个准确的认识。

输入手势密码错误是有次数限制的,可是你并没有告诉用户今天还剩几次机会。

我们经常会遇到资料审核的场景,最常见的方法就是告诉用户「资料审核中」,非常的省事。但是用户会疑惑到底要审核多久,给用户提供一个大致的审核时间,让用户有目的的去等待。

备胎:在线客服

如果前面两个方法都不能解决用户的疑问,那么我们只好给用户提供在线客服了。

1. 入口的必要性和统一性

客服的入口一般在首页或者用户的个人信息页,除此之外我们需要在用户有客服诉求的场景中给用户提供客服入口。如果不提供入口,用户遇到问题就要返回到首页或者我的页会很繁琐。如果用户在一个表单页中录入信息,突然对某一项内容不确定,返回到首页找客服咨询。这样可能会导致用户之前填写的信息丢失,用户需要重新输入一遍。

以下图为例,这是一个借款的表单页,用户在这里录入借款信息。我们会给用户推荐一款借款人安全险的保险产品,提示文案是「保费60元,贷款利息可节约55.33元」。

但是用户反馈不知道这个60元的保费是一次性扣除还是每月都会收取,并且这个利息节省是什么意思。因为对收费标准不确定,用户的购买意愿也会受到影响。这里的文案表述不清楚,我们可以给用户提供一个客服的入口。

因为在线客服是一个共有的模块,不同的业务线都可能会调用。那么在入口的设计上,我们需要注意一致性。当然我们也不能过于死板的追求一致性,因为不同场景用户对于客服的诉求是不一样的。就以支付宝为例,生活缴费和蚂蚁借呗两者在线客服的入口是不一样的。

因为相对来说,用户对借钱的场景更加敏感,有更多的疑问去确认。这笔贷款的利率怎么算的?还款方式是怎么样的?会不会影响我的个人征信?所以在借呗页中,用户对于客服的诉求更高,所以在布局上会放在更加显眼的位置。

2. 对话式交互

用户进入客服系统不意味着立马可以跟客服小姐姐聊天。咨询问题一般会经历以下几个步骤:

  • 提供猜你想问的问题;
  • 客服机器人;
  • 真人客服。

以支付宝为例,首先会根据你的来源给你推荐你可能想问的问题。例如:你从充值中心进入客服,首先会给你推荐充值缴费相关的问题。

如果提供的问题列表里没有用户想问的,用户就需要手动去查找问题。这时客服机器人登场,根据你输入的关键词,给你提供相应的解决方案。如果客服机器人不能解决你的问题,那么可以召唤真人客服来帮你解答。

京东金融与支付宝的客服流程大同小异,其中的一个区别在于它额外提供搜索框来查找问题,而支付宝是通过对话式交互来查找问题。

对话式交互也是近年来比较热门的一个话题。对话式交互主要的优点在于学习成本低,我们现有的交互体系都是建立在人工智能不够智能的基础上。如果足够的智能,未来的产品界面可能就是两个对话框,你只要打出或者说出你的需求就可以了。

年初一下午我要看韩寒的新电影,帮我预定一张票。系统根据你的行程和之前的观影记录,猜测出你当天观影的影院和时间顺便根据你的喜好选好座位,生成了一个订单或者同时生成好几个订单供你选择,你确认一下就可以。

当然这只是一种设想,目前的技术还无法实现,系统无法真正分析出用户的真实意图并且做出反馈。例如,在现实人与人的对话中,同样的一句话,不同的语境下有着不同的意思。

把这个场景带入客服中,我们输入「修改」可以发现有这么多相关的问题。如果我从白条页面中进入客服,我输入「修改」,那么应该优先从白条相关的问题中筛选出与「修改」相关的问题。而目前来说,不管从哪个模块进入客服,输入「修改」给你推荐的问题都是一样的,没有考虑语境。在这种不够智能的情况下,对搜索结果的展示上传统的搜索框模式更加合适。

总结

以上是我简单的分析和总结,如果你有不同的看法和建议欢迎留言。


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

 

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档