首页

用户体验设计法则应该怎么用?来看看这些应用原理!

seo达人


1、菲茨定

图片

选中目标所需时间与移动距离长短和目标面积大小有关。(与距离负相关,与面积正相关)

 

现实中的应

图片

在商场中寻找洗手间取决于标志的大小及步行的距离。为了满足这两个标准,标志设计得更大、更容易接近。

 

设计应用

图片

▲ 左侧页面的CTA按钮很小,没有突出显示,与表单的其他元素基本上没有区分;右侧页面CTA按钮尺寸很大,能让用户清晰识别。

 

2、希克定律

图片

决策所需要花费的时间随着选择的数量和复杂性增加而增加。

 

现实中的应

图片

与餐厅相比,快餐店的菜单选项有限。因此顾客点餐速度更快,门店提供的服务也更快。

 

设计应用

图片

▲ 在Whatsapp上转发消息时,会在“最近聊天”列表上方看到“经常联系”的3个好友。这对用户来说是一种简单的交互,帮助用户节省操作时间。

 

3、共域定律

图片

被一个显而易见的边框包围起来的多个元素,被视为一个群组。(从属于格式塔理论)

 

现实中的应用

图片

在服装店中,衣服按照类型被分到不同的架子上来展示,即使对这家服装店一无所知,顾客也会将一个货架内的商品关联成相似的东西。

 

设计应用

图片

▲ 过滤器被封闭在产品页面之外的单独区域中,因此可以清楚地识别左右两部分的差异。

 

4、雅各布定律

图片

用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的使用方式。

 

现实中的应用

图片

假设家中的阳台是一扇推拉门,我们可能希望酒店的阳台门也以同样的方式操作。因此如果酒店有一个滑动门,我们可能会下意识地先去推门。

 

设计应用

图片

▲ 以上是国外知名的电商网站导航栏设计,这几个网站导航栏中显示的信息及其结构都非常相似:左侧是品牌标志,中间为搜索栏,右侧为其他选项(购物车/个人账户)。

 

5、系列位置效应

图片

用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。

 

现实中的应用

图片

我们通常更容易记住某个电话号码的前4位或后3位,这条法则也是银行卡号被分成4组数字的原因。

 

设计应用

图片

▲ 在亚马逊主页上,网站的第一部分总是显示最重要的内容:导航包含logo、搜索和其他重要功能;轮播图通过图形设计吸引用户的目光,引导新的交易或优惠。

 

6、冯·雷斯托夫效应

图片

又称隔离效应。当存在多个相似物体时,与众不同的物体最容易被记住。

 

现实中的应用

图片

在商场购物时,相较于普通装饰的门店,我们更有可能记住或将注意力转移到具有霓虹灯效果的门店上。

 

设计应用

图片

▲ App上有新消息时,会在图标上用红点显示,这样的提示更清晰和突出,从而吸引用户的注意力,引导用户点击并查看消息。

 

7、审美可用性效应

图片

用户通常认为漂亮的设计更易用。

 

现实中的应用

图片

当参观汽车展厅时,我们通常会对汽车精美的展示感到惊叹,并立即对这个品牌产生积极的印象。

 

设计应用

图片

▲ 在爱彼迎上,我们住在陌生人的房子里,因此建立双方的信任是必要的。当访问像爱彼迎这样干净简洁的网站时,我们会下意识地信任这个产品,也确保了用户对品牌的信任。

 

8、峰终定律

图片

人们评论体验优劣,大多基于峰值和结束时的感受,而不是所有环节的平均值。

 

现实中的应用

图片

在足球比赛中,整场的观看体验将根据比赛结束(谁获胜)和比赛高潮(谁进球最多/比赛中最激动人心的时刻)来判断。

 

设计应用

图片

▲ 在夜晚非常饥饿的时候,我们使用订餐App选择食物时,却被告知付款失败。这时候App界面设计的再好看也无关紧要,订餐失败就是从这次体验中收获的结果。

 

参考:uxplanet.org/laws-of-ux-outside-the-screens-d44298c85d94

 

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

作者:Clippp

转载请注明:学UI网》用户体验设计法则应该怎么用?来看看这些应用原理!

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

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

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

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

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



2022年,B端设计的趋势有哪些?

seo达人

视觉趋势

1. 3D设计风格

虽然 3D化 的视觉风格早已到来,但是在B端市场上,3D风格在此之前依旧表现的十分克制。

随着 C4D、Blender 这些 3D 建模软件的不断普及,再加上互联网上关于 3D 建模教程的增多,你会发现 3D 风格的视觉表现,是一个 B端视觉设计师 的基本要求。

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

 

图标

因为在B端产品当中,图标本身就是非常难以去表现,比如“物联网,大数据”。

许多的抽象词汇,很难通过一个具象的事物进行表达,而在企业官网当中,在视觉表现上的要求又十分的高。因此你会发现,在视觉风格上的选择,往往只有 3D 图标 + 插画 这一条路。

图片

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

图片

 

可视化大屏

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

图片

 

2.新拟态

虽然新拟态是在前两年的产物。这个设计风格背后,遭到了很多设计师的质疑与排挤。

但是随着这个风格的不断成熟,感觉它在B端视觉领域(特指的是 官网 ),是非常受到欢迎的,因为整体的风格,与官网的设计形式趋同。

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

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

图片

 

3.开源的设计系统

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

比如 Arco Design 的组件用法 https://arco.design/docs/spec/link

图片

就清晰的讲清楚了每一个组件的使用方式,以及注意事项,仔细阅读这里面的内容,其实就是B端设计的入门学习。

而未来,国内的环境,开源的系统也会越来越多,大家可以针对这几大类不同的设计系统,进行对比,或许会有一番收获。

 

产品趋势

超级app

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

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

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

图片

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

图片

 

低代码定制化

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

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

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

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

图片

因此你会发现,其实低代码就是在解决一件事,围绕着某一个业务场景,通过平台的持续完善优化。

让所有的功能都能围绕这个业务展开,其中包括:权限、时间轴、流程、表单、公式等等,能够解决很多特殊的业务场景。

而低代码会涉及到设计思路上的转变,以及低代码编辑器的出现,如何去设计如此复杂的配置流程,如何能够让用户能够快速上手,如果你能够有比较完整的思路,这些都会成为我们设计的新机会。

 

行业细分

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

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

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

图片

因为B端产品,在底层逻辑上是不能允许趋同的产品出现,如果你和别人的产品一样,其实是没有办法在目前的市场上立足。

因此你会发现,虽然产品形式都会比较相同,但是B端市场十分广阔,大家都在去寻找自己产品的差异化。

当然市场是瞬息万变的,这里也只是简单聊聊我自己的看法,希望对你有所帮助。最近拖更确实比较厉害,准备之后几天给大家抽些书,可以多留意留意公众号的文章。

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》2022年,B端设计的趋势有哪些?

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

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

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

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

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



如何做出高级感的单字母LOGO?

seo达人


 

图片

 

朋友们晚上好,我又来了!又到了夜深人静的时刻,都饿了吗,哈哈哈~给大家看这个图片的初衷并不是想激起大家的食欲,相信大家都知道上面这个图形就是饿了么的品牌标志。一个小写字母e,通过倾斜变化和切割,形成了一个吞噬食物的图形感,可以说灰常的简约精致。嗯?到底想干啥,不着急,我们再看几张图。 
图片 
 
Timi~啊,多么亲切可爱的声音,我已经好久没有听到了,十分怀念,但是这不重要,我们看一下腾讯游戏的 logo,以灵感火花为设计创意出发点,用一个个放射几何图形组合成了字母 T,让这个 logo 拥有了无限可能。
图片 
 
这个标志大家一定不陌生,WPS 的软件大家每天都在用,可以看到它通过线段的不断穿插形成了一个造型优美的字母 W,既是一本打开的书和笔又是一个象征职场的衣领。
图片 
你怀念 18 年的那个夏天吗,有纸短情长,有体面,有带你去浪漫的土耳其,还有起风了……是的,抖音这几年的火爆为我们带来了无数经典的回忆和感动……扯远了,设计师没有感情,我们看一下抖音的 logo,故障风的表现形式营造了抖动的立体感字母 D,同时也是结合了音符的造型,兼具了平面图形简洁和立体图形的美感。 
 
 
图片 
 
啊,这不是我们吃饭的家伙么……Adobe 的 logo 大家再熟悉不过了,我们看一下它的结构,将一个极简的字母 A 融入到了一个正方形里面,弥补了 A 的上部空缺,整体更加大气稳重。 
 
 
图片
特斯拉近几年也是颇受年轻人的喜爱,我身边的很多朋友都入手了,推背感恐怖如斯!看一下它的 logo,由字母 T 变形而来,造型尖锐,且融入了方向盘等创意元素,与特斯拉主营的电动汽车产品相吻合。 
 
 
图片
确认过眼神,是我死去的青春。如今再看到这个 logo,满脑子只有它的设计创意,没错,通过正负形的方式将 Z 字母融入到了星星里面。看着这个负形 Z,有没有想起你曾经的年少无知和情窦初开?在哭了,在哭了……
行了,青春也回忆了,生活也复盘了,咱们也就不藏着掖着了,今天我们探讨的主题就是让广大同学们头疼难受的单字母 logo!当然了,主要是安利一些它常见的表现手法。 
 
 
单字母 logo 在表现的过程中还是比较困难的,因为他不像多个字母可以有多种的组合变化,想想看,两个人生一个孩子还是比较容易的,通过两者的友好交融或者其他的各种各样的姿势都可以完成,但是你一个人想要生一个孩子,那还是十分困难的。所以,如何把一个简简单单的字母做出差异化、符号化,同时兼顾识别性,是很多朋友十分困扰的问题。那到底如何做好单字母的 logo?
我们回过头来再看一下前面的几张图,其实已经给到了一些答案。  
 
 
图片
当然肯定还有其他很多种办法,这里列举的六种是我认为最常用最出效果,也最适合初学者上手的方法。当然,这些方法都是可以互相结合使用的。
 
需要注意的是,识别性永远是字母标志的首位的条件,我们在设计图形的时候要首先抓好字母的特征,保证它的识别性,然后再进行设计手法的选择。
 
行了,方法给到胃了,注意事项也明确了,下面就可以开吃了……我们用这几个方法分别品尝一下,看看究竟味道如何!
  
 

图片

所谓几何图形的应用,就是字面的意思,利用几何图形的规则性和延展性不断地进行重复排列和大小对比,这种方式做出来的图形往往更具精致感和图形感,我们多看一些案例就可以摸索到其中的规律。 
 
 
图片 
 
OK,其实方法有很多,首先第一个案例我们用一个比较快捷的方法,就是网格绘制大法!先绘制出统一角度的网格,然后用【形状生成工具】或【实时上色工具】在里面进行绘制,这个方法的好处就是它会帮你统一好角度,角度统一了也就自带了规则性,我们用这个方法做一下 E 字母。
图片 
 
是不是很方便快捷,又很容易出效果呢,这个角度不一定非得是 60 度,可以根据你的喜好来定,需要注意的是绘制好后不要容易满足,最好再进行二次创作,这样才不容易撞车,做出更多有趣的创意,总之,多尝试一定没错。 
 
图片
 
 
接下来我们再玩点儿好玩的,尝试用一些不规则的图形来拼接排列成新的字母图形,话不多说,看一下下面的案例。
图片 
 
 
是不是打开了新世界的大门,这特么竟然是五角星变来的?其实五角星也好,六角形也好,都是借助了他们特有的角度和边来进行组合,最终我们的目的还是要达到字母的识别性,大家可以用这个方法自己尝试摸索一下。
图片
小结:我们在进行几何图形排列的时候切记,不一定非得是用矩形、圆形这些正正方方的图形,像三角形、椭圆形、梯形等各种图形都可以大胆的进行尝试摸索,最后呈现的结果一定不要太复杂,用最简单的方式来诠释。
 
 
 
 

图片

 

 

线条是个好东西啊!它们交叉在一起会产生千千万万的变化!无论是什么类型的 logo 这个方法都很受用,我们来看一下单字母的线条穿插都有哪些特点。
图片 
 
可以看到大部分的案例也都是基于比较规则的几何图形来做出的,都是比较简洁干净的呈现,可见想要做出高级感,就不能过于复杂!我们在设计的时候首先注意提取字母的识别性,其他的事情,插就完事!来吧,我们先做一个 X 找找感觉。 
 
图片 
大家注意到虽然我在过程中有用到内部的双线结构,但是也只是提取了需要的部分,最后并没有保留过多的内部线条,这样会干净耐看很多。
图片
ok,非常耐斯,我们再玩稍微难一点的,上面的 X 是先画出字母的结构然后进行设计,下面我们试一下先堆积几何图形,然后再用线穿插出字母的结构。 
 
图片 
 
怎么样,是不是相当的神奇!这特么也可以?没有什么不可以,只要你试的够多……这个方法虽然不容易做,但是却能挖掘出线的更多可能性。
图片
小结:无论是先从字母的结构出发,还是从图形出发来挖掘结构,都建立在规则的图形和字母识别性之上。 
  
 
 
图片 
 
为什么是立体效果平面化处理呢?因为单纯的立体 logo 会偏单调一些,且多数需要添加渐变来呈现,但是很多同学又玩不好,就容易变得很 low,所以这个方法就是在平面图形的基础上,做出立体效果的感觉。
图片 
 
看完这些案例,是不是能 get 到一些了呢?不多说了,我们案例走起,这里也是介绍两种思路。首先第一个思路就是先画出立体图形的平面结构图,然后通过删减线段和提取结构面的形式来得到字母的识别性,ok,我们先用 H 试一下。 
 
图片 
 
可以看到当我们画出立体圆柱的时候,中间部分似乎就已经形成了一个 H 的造型,这个时候我们再进行创作的时候,自然就简单很多,所以根据字母的特点选择合适的立体造型,也是十分的关键。
图片 
 
好的,第一个思路就是这样,下面我们看一下第二个思路!先画出平面的图形,然后在内部寻找立体的可能性!啥意思呢,我们来看一下案例。
图片 
 
明白了吧,先画出字母的平面图形,在它的结构内部或者负空间部分进行立体的造型创意,这里是为你打开了一扇创意之门!当然你也可以尝试其他的造型。
图片
小结:我们可以先画出立体图形,然后去提取字母的识别,也可以先画出字母的平面图形,再去创造立体图形,都可以,但是尽量做得简约一些,巧妙一些,扬立体之长,避立体之短! 
 
 

图片

Buff 这个词真不是白用的,假如你是一个菜狗,有了 Buff 你就可以在野区各路横着走。同样的,无论你做的东西是什么狗屎,加入了外框后,会掩盖很多味道,也会增添很多味道……当然了,狗屎也分三六九等,你不能做的太辣眼了,不然啥 Buff 也拯救不了你…… 
 
图片  
 
 
这里我们接着介绍两种利用外框 Buff 来设计的思路。首先第一个就是先画好字母的造型,然后加入外框并与之进行呼应连接,我们来看一下设计过程。
图片 
 
 
这个方法也是各类 logo 设计中都比较常用的,如果你的图形不够稳定,又或者比较单一,可以试试加入一个外框,需要注意的是我们最好让图形与外框能有所呼应,这样往往才会更加的舒适耐看。
图片 
 
 
ok,接着介绍第二个方法,就是先画出外框,然后在里面进行图形的绘制!我们看一下下面案例。
图片
这个方法的优势就在于我们先给到了外框,相当于这个字母是含着金钥匙诞生的,天生自带稳定性,这谁受得了!当然这个方法也最好要与外框进行呼应一下,比如该拉圆角的部分和适当突破出来的部分,所以这个方法告诉我们,就算你是个富二代,自己不努力,也只能是个有钱的废物!(嗯?好像大家都挺愿意做个有钱的废物的…)
图片
小结:做 logo 就和品人生一样,如果你出身普通,那就通过自己的努力给自己的人生套上 Buff!如果你生来优秀,也请猥琐发育,好好利用自己的资源。成功没有好办法,努力是唯一的捷径!
 
 
 
 

图片

什么叫结构的变形替换呢,通俗一些讲,就是把羊头换成狗头,把猪尾巴换成龙尾巴…这么讲好像有些暴力,其实就是利用字母的正形部分,结合行业属性进行创意结合。
图片 
 
这个方法非常好用,但也容易用得过度,很多同学在做的时候容易做的复杂,比如结合一条龙,你把龙须龙爪龙鳞统统都画出来了,那不扯淡么,我们只需要提取结合的物体的基本造型即可,龙就是龙头,鲸鱼就是尾巴。
我们在设计之前最好先把一个大体的思路和想法画出草图,然后再进行上机操作。第一个案例我们做一个 Z 字母结合凤凰的创意,看一下设计过程。 
 
图片 
 
这个构成方式主要就是拼你的结构!想要做的精致一些,线条必须流畅,注意看头部与 Z 字母结合的部分,都要处理的非常丝滑~当然如果你觉得造型还是有点死板,也可以加入渐变,让整体更生动灵活。
图片
那有的同学可能会讲,我草图画不好,或者说字母画的非常的丑,结合啥也不好看,那咋办呢,这里再给大家讲一个比较快捷的思路,就是用字库的结构进行二次创作!
尤其是一些手写字库,它往往具有更多变灵活的结构,相信大家的电脑里一定装了很多乱七八糟千奇百怪的字库,平时不用,这个时候就可以用起来了!
图片 
 
怎么样,有的时候并不一定只能融入一个元素,在不影响识别性的前提下,利用每一处的结构,都能产生不同的感觉,当然了,你不能瞎结合,都需要和行业相关才行!
图片
小结:我们在进行创意结合的时候,首先要进行大量的思维扩散,毕竟创意不是凭空出来的,然后要简化创意元素,和字母的整体调性搭配起来,才能做出更整体精致的图形!
 
 
 
 

图片

正负形就不用过多介绍了吧,是最出效果也是最好玩的一个创意表达方式,因为基本上每个字母都有属于自己的负空间,而这些负空间,就是你达到创意高 c 的入口…… 
 
图片 
 
 
其实找到负形并创意结合并不难,难得是如何做的高级,所以又回到了我们前面的一些方法,几何化、规则化,都是不错的选择,ok,我们用 Q 字母来尝试结合一下小鱼的造型。
图片 
 
这个方法就是在几何图形的基础上进行字母的结构识别和创意设计,但也是比较难的,因为有时候不一定你就能搞出来你想要的那个创意,这个时候就不要强行进入了,适当放弃,柳暗花明又一村,换个创意,又是一条好汉。
图片 
 
那还有一种方法就是先画出字母的结构,然后利用负形部分就行结合,我们试一下 F。
图片 
 
这个方法就相对简单一些,但也尽量将字母做得秩序规整,整体才不会太乱。另外上面这两种方法最后都加入了一个眼睛,也就是点睛之笔,这样会更生动传神,毕竟画鱼点睛和画鸟点睛都是历史上著名的经典桥段。
图片 
 
小结:每个字母合适的负空间都基本上是固定的,做的多了就找到规律了!
 
看完这么多案例,有没有勾起你的创作欲望,觉得我又行了呢?其实单字母 logo 的应用范围还是很广泛的,市面上很多品牌尤其大型企业往往都喜欢这类的设计形式,因为它会让受众群体很容易的对品牌名称进行联想,形成品牌符号的记忆性。
比如麦当劳的 M、李宁的 L、饿了么的 e,甚至是超人的 S,当你脑子里现有它们的名字时,再看到图形就会不自觉地对它们进行连接,形成品牌记忆。
好了,出了这么多个案例,我累了,你也累了,希望下次再遇到单字母困境的时候,可以想起今晚我们一起度过的种种片刻,最后国际惯例,合个影,我们结束。 
图片 
 

 
作者:告白天
 
转载请注明:学UI网》如何做出高级感的单字母LOGO?


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

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

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

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

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



Behance首页推荐的作品集为什么这么高级?我们能从中学到什么?

seo达人


图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

一次作品展示,想要视觉效果更高级,需要通过各种细节综合打磨。那么在今天推荐的这份作品中,我认为打磨比较好的细节以及我们可以从学习的主要有以下几点:

  1. 高级投影
  2. 投影的延展运用
  3. 留白艺术
  4. 合适的展示角度
  5. 强设计感配图

在我近期帮星友看的作品集中,发现很多人的作品本来还不错的,结果被糟糕的展示给减分了,很是可惜。我给不少人提的建议之一是先提升自己的审美,但他们遇到的问题是不知道看啥,判断不了哪些才是好的作品,以及怎么用到自己作品中去。这些问题不知你是否也有遇到?如果有同样的困扰,今天的文章一定要看完了,因为全是干货。

所以我在星球中利用审美打卡,每天帮大家搜集一些比较好的展示方式作为参考,同时提升审美,一举两得。这组Behance高级作品就是在打卡中给大家做的分享。接下来,我将逐个分析这几个细节部分,方便用到咱们自己的作品集中。

 

1、高级投影  

投影的本质就是给画面打造空间感,并突出界面内容,对于这一点我后面也会做一些延展,可能会有一些观点你没听过的。在看作品集的过程中我有发现很多人不注意投影的运用,但它其实是非常重要的作品加分手段。

 

1)投影要干净轻盈

投影在取色的时候,可以选择与背景颜色相近的颜色,然后略微加深一些,不要用纯黑色来做投影,会显脏。投影的颜色永远都需要结合环境的颜色,就想象成界面中有一个太阳光打过来,会反射周围的环境色,所以带有环境色的投影会显得更自然。

比如下面这个界面展示就是把背景色和投影颜色调整为品牌橙色的色相,只是把饱和度降低到了很浅的程度,看起来就很舒服。

图片

再比如我之前做的一个banner,右边的卡片堆叠的效果,叠起来的投影层就是用到了蓝色的投影,看起来就会显得非常干净。

图片

图片

另外,要注意投影的距离不要太小显得不自然,颜色太深会显脏。

图片

 

2)投影要针对特定的颜色进行微调

使用不同的投影透明度取决于产生投影物体的颜色。对于较暗的物体,投影需要做得更强,而对于较亮的物体,投影应该是更浅一些。

如果不注意这一点的话,假设两个投影都具有相同的不透明度,那么较亮物体的投影会在较暗物体的投影旁边看起来更暗。

比如下面的按钮投影透明度,投影透明度都是50%透明度时,白色按钮看起来会比蓝色的更深,可能要降低到30%左右才显得比较一致。

图片

3)投影要符合现实规律

高级投影应该要结合现实规律,做到近实远虚。

图片

上面这张图的投影就是有些问题的,更远的投影反而显得更深,其实应该要改的更浅一些才好。

做到这一点有2个小技巧:

  • 1)如果在PS中设置投影的话,可以通过调整PS的投影等高线。

图片

如果是在sketch和figma中做投影的话,也可以叠加多层投影来做,大家可以尝试下。

  • 2)在做展示的时候,弥散的范围建议在6倍左右会比较舒服,当然这个也更要根据你选的投影颜色和透明度综合来调整。

图片

 

2、投影延展  

前面提到,投影在做展示的时候,其作用就是打造空间感,围绕这一点我们也可以做些延展。

 

1)增加简单图形

在作品下面增加简单图形,既不干扰作品,又能通过穿插增加空间感。

图片

 

2)增加插画元素

用一些品牌插画,元素,甚至图标给作品增加穿插,增加空间感。

图片

 

3)增加3D元素

给作品增加简单3D元素,比如球、三角之类的元素。

图片

来自Behance,审美打卡

 

图片

我曾经做的界面包装

 

4)改变材质

把界面做成毛玻璃效果,再做穿插,进一步增强空间感

图片

图片

来自behance,星球审美打卡

 

5)深色界面

有人问,如果界面本身就是深色的怎么办?其实也是基于空间感的原理,给画面增加一些元素,与背景拉开关系就好。比如下面这样

图片

来自behance,星球审美打卡

 

图片

来自dribbble,星球审美打卡

 

图片

来自dribbble,星球审美打卡

 

3、大量留白  

想要提升作品的逼格,使用大量的留白是非常好的技巧。但在给星友沟通作品集的时候,得到一个奇怪的说法,说是要把作品限定在多少页以内才更好。

我觉得这有的本末倒置了,作品要多放精华内容没错,但不是以页数来体现的,展示的时候还是以提升逼格为主,不要影响作品本身的视觉效果。每一页PPT,重点展示一件作品就足够了,物以稀为贵,像一些大牌奢侈品就特别喜欢大留白。

图片

Apple手机官网截图

 

图片

香奈儿官网截图

 

举一个反例,下面是某位星友的作品,其实这样的网页展示,一个页面单独整理在一页是最好的。当然前提是每一页的设计差别较大,如果太类似的话,放一页就够了。如果网页比较长的话,可以按分屏来展示。

图片

星友作品截图

 

就像开头的作品那样调整下,逼格立马就能上来。

图片

 

4、展示角度  

作品在做展示的时候,不论是自己设计还是用样机,有一个标准就是一定不能让人看不清细节,不能做了角度变化之后丢失细节。

像开头的作品展示,都是用了一些相对没那么夸张的角度,这样做的一个好处是能看到细节,即使是想带一些角度,增强设计感的话,也一定要以能看到细节为标准。比如像下面这样就可以了。

图片

我也给大家举一些反例,比如像下面这位同学的展示角度就比较奇怪,其实像这种内容较多的界面,摆正就可以了,不然细节全都看不清。

图片

星友作品截图

 

5、高质量配图  

一个作品中的配图其实非常关键,甚至配图能直接把你糟糕的设计拯救过来。但遗憾的时候,很多人在展示的过程中不大重视自己的配图,我在跟星友交流过程中会发现大家对于配图存在一个误区,就是觉得配图一定要是真实的,有些人甚至觉得作品里呈现的一定是要去线上截图。

我想说,如果这样做会把你坑得很惨。原因有以下2点:

  1. 线上的图存在非常多不可控因素,所带来的视觉效果不一定代表你真实的视觉设计能力
  2. 审美是设计师的核心能力,如果你放一堆审美不在线的图,那别人有理由怀疑你的审美是有问题的。

既然配图这种重要,那怎么做好配图这个事呢?有几个小技巧:

 

1)符合调性

配图要符合产品的调性,像开头的作品中,黑白干净是它的关键调性,那么选的图也是这个范的。

图片

 

2)真实可信

尽量让配图看起来真实,别偷懒用重复的图,包括图中用到的数据也尽量真实。像下面这位星友的作品展示就有内容重复的问题,稍微花点时间就可以优化好了。

图片

星友作品截图

 

3)加强设计感

在放界面展示图的时候,界面中放的图尽量多一些设计感,体现你的审美。

图片

关于高质量配图我之前也有专门写文章《如何选到设计感强的配图,我总结了这7个实用方法》,文章中也分享了很多我自己收藏的高质量配图,大家有需要的也可以去阅读下载。

 

总结  

最后总结下,今天主要是从作品展示的角度,给大家介绍了如何利用好投影、投影原理延展、留白、角度、配图等方面给自己的作品展示加分。

这些技巧操作起来很简单,但又非常有效,具备很强的实用性。彩云希望大家把这些常用技巧真正用到自己的作品集中去,提升逼格,找到自己理想的工作!

 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》Behance首页推荐的作品集为什么这么高级?我们能从中学到什么?

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

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

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

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

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



12种超级好用的-免费渐变神器

seo达人

01  Cool Backgrounds

网站链接:https://coolbackgrounds.io/

网站介绍:Cool Background 是由5个开源生成器整理组成的彩色渐变图像集合在一起的工具集,内置5种不同的背景风格,每一种风格还提供了简单的参数配置。非常的炫酷美观。

低模三角形

粒子

CSS渐变

阶梯渐变

图片

使用方式:左侧选择不规则形状、图形、渐变背景、图片等,右侧可以选择不同的色彩组合,选择适合自己的色彩风格后,点击下载即可。

 

 

02 180种渐变背景

网站链接:https://www.fengtupic.com/colortool

网站介绍:内含180种渐变配色方案,特别好看美观,适合各种场景模式下的背景使用。

使用方式:选择适合自己场景的渐变色,可拷贝css格式,也可下载png格式。

 

 

03 Pigment

网站链接:https://pigment.shapefactory.co/

网站介绍:可通过改变饱和度、色温和色系改变配色方案,还可通过查看场景效果观察此配色方案呈现效果。

网站截图

饱和度  亮度 颜色

选中和更多

使用方式:左侧可以选择不同的饱和度和亮度,选择其他色调,右侧放大可查看场景配色效果。

 

 

04 ColorSpace

网站链接:https://mycolor.space/

网站介绍:Color Space 是一款非常实用的渐变生成器,我们只需要选择一个颜色,就可以快速生成20-30种不同风格的配色方案。同时还提供了梯度和三色渐变选项,可以快速生成配色并查看 CSS 代码。

网站截图

输入颜色代码或选择颜色

生成方案

更多与修改

CSS代码模式

三色渐变

使用方式:上面输入色值,自动出来渐变方案,还可左右滑动选择适合自己的搭配方案

 

 

05 Adobe Color

网站链接:https://color.adobe.com/zh/create/color-wheel

网站介绍:可自由选择色环上不同的颜色值,依照类比、单色、三原色、补色等不同搭配模式进行搭配,下面展示一系列色值。同时可将看到的好的图片色纸上传上来,自动配比色值,同时,还能查看背景色与文字的对比度检测,非常适合网站多色搭配。

色轮

辅助工具

使用方式:滑动多tab滑块,选择色环颜色做不同类型搭配;利用协助工具查看文字与背景的对比检测。

 

 

06 BrandColors

网站链接:https://brandcolors.net/

网站介绍:这个网站是基于最大的官方品牌颜色做整理,包含了众多品牌颜色官网的配色方案,可作为网站或者品牌配色的借鉴。

颜色方案

选中后复制下载

使用方式:选择好相关品牌的色彩调性,可查看色值,可复制色值,也可以下载相关色值,超级方便。

 

 

07 Color Leap

网站链接:https://colorleap.app/home

网站介绍:一键生成复古风图片色调分离,可以选择年代搜索过去180种配色方案。

年份选择

年份列表

代表图片和查看颜色

查看颜色和查看图片

使用方式:选择年代,选择图片风格的配色方案,查看颜色,复制相关色调即可。

 

 

08 ColorBox

网站链接:https://www.colorbox.io/

网站介绍:ColorBox 是选择一个颜色,会生成一个颜色系列的颜色工具。可以帮助我们轻松地创建非常炫酷的色彩集,配色页面还有大量的个性化选项,满足我们的任何需求。

网站截图

饱和

使用方式:左侧可以添加不同的颜色分类值,右侧调整搭配的颜色系列和同色系和补色系不同选择,曲线直观展示出色调和饱和度的变化幅度。

 

 

09 Eggradients

网站链接:https://www.eggradients.com/

网站介绍:Eggradients 是一款收录了最新设计趋势渐变色彩的配色网站,以鸡蛋的形式展现,支持一键复制。

预选颜色

渐变调色板

使用方式:选择适合自己设计场景的配色方案,复制即可。

 

 

10 CoolHue 2.0

网站链接:https://webkul.github.io/coolhue/sketch-plugin/

网站介绍:CoolHue 2.0是一款免费的 Sketch 渐变配色插件和收集工具。

使用方式:在sketch下载插件,直接点击插件,选择相关配色。

 

 

11 Free Mesh Gradient Collection

网站链接:https://www.ls.graphics/meshgradients

网站介绍:包含100多个免费的渐变色合集,支持 Sketch、PNG、AI、JPG、EPS 等多种格式下载。

网站截图

翻译截图

渐变截图

使用方式:可选择ai、eps、jpg、png格式,选择好看的渐变色下载即可。

 

 

12 Grabient

网站链接:https://www.grabient.com/

网站介绍:Grabient 一个非常漂亮且实用的渐变网站,支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。

网站截图

调整角度

调整颜色

渐变比例

使用方式:选择适合自己风格的配色方案,点开调整渐变梯度,下载即可。

 

最后感谢大家的欣赏和学UI网干货小组和学UI网解答团的辛苦整理;

后续仍然会给大家持续带来 #学UI网干货分享(其中包括在线配色网站、在线工具、插件等)

谢谢大家的持续关注!~

 

转载请注明:学UI网》12种超级好用的-免费渐变神器

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

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

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

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

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



交互设计:如何做到品质?

seo达人

01 怎样算是品质?

首先,探讨这个问题,意义何在?

笔者认为,有两点意义。

首先,作为用户,我们可以用到好用的产品;其次,作为从业者,我们可以找到学习的榜样。

明确了意义,我们再回到问题本身:怎样算是品质?如何判断?

个人认为,和周到一样,是否拥有高品质,也是用户的主观感受说了算。

在涉及体验细节的小需求上,避免所有的不周到,就是周到。

这是关于周到与否的判断,相对比较容易。但是关于品质与否的判断,笔者没有找到这么简单的判断逻辑。所以我们尝试换一种方法。

豆瓣的高分电影,比如《千与千寻》、《美丽人生》和《肖申克的救赎》,它们肯定存在不同之处,但同时也有一些共同特点(主人公都面临极大困境,但都心怀希望和目标,通过各种努力走出了困境)。

高分电影如此,高品质的交互设计,也是如此。

这一大段,就尝试去探索这些共同的特点,以便去发现、或者去验证,那些在交互设计方面拥有高品质的产品。

1 看着简单

之前在《以不变应万变:浅析信息架构》这篇中提过,只有简单,才能让用户马上找到掌控感、进而感觉良好。

高品质的交互设计,一定是要让用户感觉良好的,所以看起来一定是简单的。

 

2 用着顺

个人观点,互联网产品有两类较为特殊的初级用户,一类是零经验的三岁小孩,一类是智能手机之前没怎么接触过互联网的老人。

一般情况下,大家习惯把用户分成三类:初级用户、中级用户和高级用户。其中初级用户的使用经验最少。

高品质的交互设计,会让初级用户很容易上手。稍加练习之后,初级用户也会像中高级用户一样,用起来很顺。

iPhone 的交互设计是很优秀的,所以三岁小孩也能很快上手操作。

小孩的心智比较纯粹,没有受到社会大染缸的污染。用手机时他们会根据自己有限的生活经验去积极尝试操作。

老人和小孩则有点相反,部分老人可能思维比较固化,好奇心、积极性等方面都不如小孩,所以老人在用手机时可能会有点畏手畏脚。

微信作为一款交互设计十分优秀的产品,如今拥有智能手机的老人基本都在用。有的可能是自己学会的,有的可能是子女教会的。整体而言,笔者观察周围的老人,用微信用的还比较顺畅。

 

02 交互设计:如何做到品质?

个人觉得,交互设计的高品质,是感性、理性和实践的完美融合。

曾经有人问巴菲特的合伙人查理·芒格,如果只能用一个词儿来形容你的成功,会是什么?芒格回答说,是“理性”。

老子曾经说过:“人生于世,有情有智。有情,故人伦谐和而相温相暖;有智,故明理通达而理事不乱。情者,智之附也;智者,情之主也。以情统智,则人昏庸而事颠倒;以智统情,则人聪慧而事合度”。

简·奥斯汀的小说《理智与情感》,虽然写的是小镇的恋爱与琐事,但背后折射出来的洞见——“要有真情感,更要用理智控制情感”,与老子的观点也是不谋而合。

做人做事,需要理性和感性。做交互设计,也是如此。

芒格、老子和简·奥斯汀,在强调做事业和做人方面,都是理性在先、感性在后。

做交互设计,就是在做用户体验,核心是用户的主观感受。所以笔者认为,此时是感性在先、理性在后。

交互设计里的感性,有两层意思。

第一层是微观层面,主要是性格上的敏锐度,比如我们平常听到的性格敏感、心思细腻等;第二层是宏观层面,也就是品位

量变引起质变。微观上积累的多,才会带来品位的提升。

交互设计里的理性,其标志是做出正确的决策

那怎样判断决策是否正确?

个人观点,有两块“试金石”可担此重任。

第一块“试金石”是来自最优竞品的检验,第二块“试金石”是自我检验。

最优竞品是一块很好的“试金石”。如果能和最优竞品一决高下或者“三足鼎立”,说明品质很不错;如果和最优竞品差距太大,则说明没有达到高品质。

然而现状则是,市面上的最优竞品,也就是交互设计方面达到高品质的产品,为数不多。这就意味着很多领域的产品是不存在最优竞品的,此其一。

其二,与其被动的等待最优竞品的检验,不如主动成为最优竞品。要做到这一点,则需要第二块“试金石”,也即优秀的自我检验能力。这个优秀的自我检验能力,其实也基本等同于做出高品质交互设计的能力。

实践就是一个反复试错、反复打磨、反复验证感性和理性的过程。

1 培养语感

大家都学过英语,所以应该也都听说过“语感”这个词儿。

英语语感好的人,会有这个优势:较少依赖语法,同时较少犯语法错误。

就像游泳一样,熟练了以后,身体已经对动作形成很深记忆,完成动作就几乎不依赖大脑思考,同时也不会犯错。

在语文里,“语感”被提起的次数就少了很多。大家每天都在用中文,甚至每天都在听说读写。对中文都很熟练,好像大家的语感都差不多。

但实际上,和英语一样,语文方面的语感,也存在一定差距。看看百度百科对“语感”的解释就知道了。

语感,是比较直接、迅速地感悟语言文字的能力,是语文水平的重要组成部分。它是对语言文字分析、理解、体会、吸收全过程的高度浓缩。语感是一种经验色彩很浓的能力,其中牵涉到学习经验、生活经验、心理经验、情感经验,包含着理解能力、判断能力、联想能力等诸多因素。

这个解释包含了四个经验、三个能力。每个经验、每个能力的获得都需要一定量的练习。不同的人,底子不同,练习的量存在不同,所以语文方面的语感必然存在不同。

像语感里提到的心理经验、情感经验,在不同的语言里是相通的,且和交互设计里的主观感受存在相通之处。所以,在笔者看来,一定程度上,作为母语的语文,其语感是英语语感的基础,也是交互设计语感的基础。

啥是交互设计的语感?

和语文的语感类似,交互设计的语感,就是比较直接、迅速地感知交互设计优劣的能力,是交互设计水平的重要组成部分。

这个语感,和乔布斯口中“科技和人文的十字路口”中的“人文”,以及媒体和从业人员口中的“人文素养”,也有相通和相似之处。

苹果的设备之所以在交互设计方面拥有高品质,和乔布斯早年深受嬉皮士文化、民谣和摇滚歌手 Bob Dylan、禅文化、日式美学、字体设计等人文艺术方面的熏陶密切相关。

上世纪 90 年代,张小龙在开发 Foxmail 时,想必作为程序员的他并没有太多交互设计方面的经验,彼时这方面的理论和著作也少,张小龙更多是凭感觉在做。但是 Foxmail 就做到了交互设计方面的高品质并且产品广受欢迎,想必张小龙的语感也是极佳。而据网络资料显示,张小龙本人喜欢阅读、电影和 Michael Jackson 的音乐,也有比较深厚的人文素养。

所以,在笔者看来,交互设计语感的内核,或者广义的交互设计语感,就是语文的语感,或者更进一步,是人文和艺术的语感。

狭义的交互设计语感,则是直接、迅速感知交互设计优劣的能力。

冰冻三尺,非一日之寒。一个广义语感,一个狭义语感,加起来基本等同于先天基因和人生经验之和。

听起来有点定型的感觉。那这俩语感,还能培养吗?当然可以。咋培养?

个人观点,广义的语感和狭义的语感需要同时培养。广义的语感是内核。正所谓水涨船高,这个内核越好,狭义的语感也会越好。

 

先说广义的语感,即人文和艺术方面的素养。个人认为,主要受性格和练习影响。性格则主要受遗传基因和童年经历影响。

天生内向的人,通常内心会更加细腻。这种细腻,对于日后建立丰富的精神世界和情感世界,是一种优势。

所谓祸兮,福之所依。有些人的优势,则是建立在童年不愉快的经历上。

 

比如美剧《千谎百计》里测谎公司的莉亚,童年时期暴力的父亲经常殴打她,使她学会了迅速判断别人的心情。莉亚没有受过任何专业训练,但是童年不幸的遭遇使她在识别微表情方面异常敏锐,最终被莱特曼博士力邀加入了团队。

性格有优势的话,自然是加分项。没有优势的话,也可以通过后天的练习来弥补。

这个后天的练习,在笔者看来,非常重要的一点,是来自书影音的熏陶。

简单说说书影音。

首先,一定要看一些文学性强的作品,感受“思无邪”之美。因为这些是人类内心深处共同的精神家园。个人的理解,文学性强,是指满含人间烟火味、但无半点名利心的作品,比如《诗经》、《草房子》、《城南旧事》等。

其次,一定要看一些思想性强的作品,感受大道的至简之美。因为这些对于理性、对于探索事物的本质非常有益。具体的作品,可以参考《道德经》、《巴菲特致股东的信》等。

最后,影视剧要多看,书更要多读。原因如下。

 

影视作品在刺激我们视觉和听觉的同时,留给我们思考和想象的空间,通常都没有文字留给我们的多,此其一;

其二,影视作品里的语言基本以对话为主,而小说等书籍中除了对话,还有很多关于环境、人物、心理、情感以及哲理等的描写。

基于这两点,虽然有些人可能天生就是视觉动物,但阅读始终是无法替代的,在培养语感方面也发挥着更为重要和基础的作用。

整体而言,如果目标是高品质的交互设计,在书影音的选择上面,笔者就建议大家去选一些经典的作品。具体而言,豆瓣评分和豆瓣 Top 250 榜单会是不错的参考。

再说下狭义的语感,即对交互设计的感知能力。

这个完全是后天训练出来的。如果这方面的语感不够好,则进步空间很大。主要方式就是多用交互设计方面高品质的产品。

举个例子,可能我们很多人用的第一台电脑都是 Windows 系统,后来一部分人改用了 Mac。Mac 用久了,就再也用不惯 Windows。这就是语感提高的典型例子。

我们常用的一些产品,比如微信、iOS、快手等,在交互设计方面都拥有很高的品质。

这些日常使用的产品,客观上也在潜移默化的提升我们的语感。最终的结果,也会对整个行业的交互设计提出更高的要求。

这里笔者再向大家推荐一个涉及网页端和后台管理、编辑的产品,交互设计方面很优秀,那就是博客搭建平台 SquareSpace。笔者自己的工作室网站 SnowDesign.Me 就是基于这个平台搭建的。

 

2 理性思考

交互设计要做到高品质,就要求从信息架构到交互设计,大大小小的无数细节,其决策几乎全部是正确的。这是一个很高的要求,背后必须要有理性思考的支撑。

现实情况是,很多团队做不到这一点。

然而,交互设计,从构思、到设计、到优化、到讨论、到修改,每一个环节我们都有理性思考,那又为什么做不到高品质?

在笔者看来,这些理性思考还存在进步空间。只有优秀的理性思考,才能设计出优秀的交互设计。

个人观点,优秀的理性思考,通常是一种独立思考,主要有 3 个维度,分别是:逻辑、全面、权重。

以微信为例,如果换个团队,有可能会把朋友圈作为一级 tab 单独拿出来。因为大家使用朋友圈的频率很高,这样少点一下会更方便。这在逻辑上完全没问题。

但微信团队的考虑,个人推测,至少有这 3 点:

1. 微信坚持只有 4 个 tab;

2. 朋友圈是个插件功能,可拆卸,作为一级 tab 不合适;

3. 少点一下,更方便。

这里面权重最高的是第 1 条,权重最低的是第 3 条。综合来看,微信是不会把朋友圈单独作为一级 tab 的。

 

这个例子很有意思,笔者觉着它在一定程度上反映了我们很多人存在的不足。

我们很多从业者,在进行理性思考的时候,逻辑方面基本没问题。但是在全面和权重这两点上,可能会做的不到位。这就导致我们无法做出正确的决策。这样的细节一多,必然导致我们无法做出高品质的交互设计。

所以,要想在理性思考方面达到优秀,就需要同时做到这三点:逻辑准确、考虑全面、权重正确。这还只是一个细节的决策,所有细节的决策,都要如此。加起来会是一个庞大的工程。

 

这里再顺便强调一下“全面”。

这个全面,一定要去抓、并抓到事物的本质和核心。

所谓大道至简,本质一般都不复杂。一个可供参考的数字是,本质通常只有 1-2 个点,影响本质的因素通常有 4 个左右的点。再具体的,可以参考一篇旧文:《找到本质需求:聊聊内容分类》

 

还有一个影响因素,就是社会压力。

很多时候,我们不愿去独立思考,而是直接参考别人的设计。一来省事儿,二来也容易找到归属感和安全感。而独立思考,可能会把我们带入到一种蓦然回首“空无一人”的“孤独”状态。

但是朴素的辩证法告诉过我们,凡事都有两面。选择了白天,就会失去黑夜。所以,关于社会压力的问题,本质上可能是一个选择题,同时也包含了每个人对孤独、安全感等话题的理解和接纳程度,此处就不深入讨论了。

 

3 反复实践

先说理性思考这块儿。

因为互联网产品总是会更新,所以不管是新人还是老人,只要目标是高品质的交互设计,总会碰到很多未知的或超越经验范畴的问题。

面对新问题,很少有人能在第一版的初步想法上就做出正确的决策,也就是做到逻辑、全面和权重的完美无误。人类大脑中的想法,通常都是先有后优。选定一个方案通常都需要有多个方案的比较和权衡,优化选中的方案也包含了无数细节的调优。

Foxmail、QQ 邮箱和微信的交互设计都很优秀,为张小龙提供了大量成功经验。即便如此,微信上新功能的时候,张小龙也还要通过反复试用不同的版本来找到那个正确的版本,更别说我们这些没有多少成功经验的普通大众了。

不管是选定方案的大决策,还是细节调优的小决策,要想变成正确的决策,都需要大量的实践。这个实践既包含理性思考的支撑,也包含了感性语感的检验。

 

因为语感就类似品位,也会影响到交互设计的品质。

如前所述,交互设计的语感,既包含人文艺术这个广义的语感,也包含感知交互设计这个狭义的语感。

培养广义的语感,需要经年累月的实践,少则一二十年,多则一生的时间。如果想要一直保持那个状态,就需要一直实践。重点在于优秀文化的熏陶以及自己的吸收,还有自己不断的观察与思考。

 

培养狭义的语感,也需要大量的实践。重点就是日常多用交互设计优秀的产品。

类似游泳需要让身体而非大脑记住动作,我们需要让控制感性而非理性的那部分大脑,记住并习惯于用过的所有优秀产品。

如果广义语感和狭义语感都很棒,当体验到品质不高的交互设计时,很有可能,马上就会产生不太舒服的感觉;而当体验到高品质的交互设计时,极有可能,也会很快产生诸如开心、满足之类的积极情绪。

 

结语

交互设计,如果看着简单、用着顺,则基本为高品质。

一边培养人文艺术方面的广义语感,一边培养感知交互设计方面的狭义语感;

理性思考要在逻辑、全面和权重这三方面都做到尽善尽美,全面这块一定要抓到事物的本质和核心;

第一版方案做不到高品质是正常和普遍的,做出错误的决策也是难免的,最重要的是在培养语感和理性思考方面反复实践,直到打磨出高品质的交互设计为止。

以上三点,可以帮助我们做出高品质的交互设计。

最后,借乔布斯的一句话来结束本文。

你要熟悉人类在各领域的优秀成果,尝试将之融入你在做的事情里。

 

原文地址:SnowDesignStudio(公众号)

作者:Leeo

转载请注明:学UI网》交互设计:如何做到品质?

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

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

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

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

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



UI设计、交互设计、UI交互设计的联系和区别是什么?

seo达人


三者关系图:

Image title

从上图来看,似乎UI交互设计还真是UI设计和交互设计的结合。不过具体区别如何,还是让我们来看看三者的对比吧!

 

1. UI交互设计vs UI设计vs交互设计对比之概念

Image title

 

UI设计

UI设计或称界面设计(英文UserInterface Design, 缩写为UID),它是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计主要分为实体UI和虚拟UI两种,互联网行业常见的UI设计是虚拟UI,UI即User Interface(用户界面)的简称。

 

交互设计

交互设计(英文Interaction Design, 缩写IXD),它主要指的是两个或多个个体之间交流和互动方式的设计,以达成某种设计产品的目的。交互设计的目标一般从“可用性”和”用户体验“两个层面出发,以帮助解决用户需求。

 

UI交互设计

其实小编从多方查找资料发现,UI交互设计这个术语是非常模糊的。在小编不断对比整理下,终于得出了它的基本概念。从广义上来说,UI设计是可以包含交互设计的,在这样的情况下。简单来说,把交互设计的理念体现在UI界面上,就是UI交互设计。

从设计重心方面来看,UI设计的重心是色彩和视觉,以界面美观设计为主,主要考虑产品看起来怎么样。而交互设计则是以用户为中心进行人机互动部分的设计,主要考虑产品用起来怎么样。而UI交互设计则需要兼顾UI与交互两个方面进行设计,将交互的理念体现在UI界面上。

 

2. UI交互设计vs UI设计vs交互设计对比之工作人群

Image title

UI设计相关人群:

UI设计师,界面设计师,网页设计师。

 

交互设计相关人群:

UX设计师,交互设计师,UE设计师,产品经理,网页设计师,产品经理。

 

UI交互设计相关人群:

UI设计师,界面设计师,交互设计师,网页设计师,UX设计师,产品经理。

从相关的工作人群来看,不同的设计工作类型,涉及的人群也尽不相同。UI设计的相关人群主要是工作中包涵该部分的人,除了专业的UI设计师,界面设计师,网页设计师等也是它的工作人群。而交互设计涉及的人群更广,交互设计师、UX设计师自然不在话下。另外,需要表达设计想法的产品经理运营人员也是其中一员。最后,UI交互设计所涉及的范围比两者稍广,包含了UI设计人群和大部分交互设计人群。

 

3. UI交互设计vs UI设计vs交互设计对比之例子

UI设计案例:

Image title

如上图所示,UI设计主要在于通过对用户界面的色彩,布局,文字排版等方面进行设计,以保证整体界面的美观。

 

UI交互设计案例:

Image title

小编这边选取了一个简单的UI交互作为案例,这个交互的效果是通过点击UI界面中按钮出现不同的图片。这种将交互体现在UI界面上的设计,就是UI交互设计。UI交互设计包含了各式各样的交互效果,如下列刷新、进度条、图片轮播等,小编就不再一一例举了。

 

交互设计案例:

Image title

而这种以人机互动为目的,注重用户体验的设计则称为交互设计。

从以上的案例不难看出,UI设计主要以界面美观为主,以静态的方式呈现居多(也有以动图动画形进行呈现)。交互方式是静态的。UI交互设计是在UI的基础上进行交互设计,以偏动态的形式存在。交互设计则以用户体验为主,以动态的形式存在。

 

4. UI交互设计vs UI设计vs交互设计对比之工具

UI设计工具:

PS(Photoshop):适用于界面设计,图标设计,手绘等。

AI (Illustration):适合创建徽标、图标、草图、排版和其他矢量图。

Sketch:适合图标、界面设计,支持多文件分层,切片等插件。

Image title

交互设计工具

Axure:老牌原型设计工具,适用于制作中高保真交互原型。

Mockplus:适合创建快速交互原型,简单高效,同时支持团队协作。

摹客:适合一键切图,生成智能标注,生成图层代码,交互演示,设计协作。

Image title

 

UI交互设计工具:

PS,AI,Sketch,Mockplus、摹客原型设计工具。

Image title

从使用的工具来看,UI设计主要以图形、图标、界面设计工具为主;交互设计主要以原型设计,交互设计工具为主;而UI交互设计则囊括了前两者使用的所有工具。

看完本文后,小编相信大家对UI交互设计,UI设计,交互设计三者的关系已经有所了解了。简单来说:UI是为了好看,交互设计是为了好用,UI交互设计就是好看又好用。如果想从事UI交互设计相关的工作,小编建议不妨在了解它们的基本定义后,开始学习一些技能知识,着手开始练习设计。这样可以帮助大家在UI交互设计的路上快速成长!

 

原文地址:慕客

作者:慕客产品协作设计

 转载请注明:学UI网》UI设计、交互设计、UI交互设计的联系和区别是什么?

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

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

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

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

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




数据可视化图表设计指南:圆环图

seo达人



3种圆环图样式 

标准圆环图

图片

图表中间空心的部分用来展示数据的总数,用圆环的弧长和颜色表示不同数据的占比,图表旁边有图例用来解释说明。

 

布尔圆环图

图片

布尔圆环图就像是给圆环图做了布尔运算,只表示正负两个值

比如想重点突出完成率,就使用绿色圆环来表示68%的完成率,圆环其他部分为灰色,同理想重点突出反弹率,就使用红色圆环来表示83%的反弹率,圆环其他部分为灰色。

圆环中心部分用来显示相关数值的百分比和标签。此外布尔圆环图不需要额外添加图例。

 

标签圆环图

图片

直接在对应的圆环上加入标签比使用图例更容易理解。在屏幕空间允许的情况下,可以直接在圆环上添加「名称+所占比例+数量」的标签形式。

 

圆环图交互状态分析 

悬停状态

图片

在标准圆环图中,鼠标悬停在圆环图上时,跳出分段名称+百分比+数量值的弹窗。在标签圆环图中,悬停的圆环部分突出显示,其余部分淡出处理。

 

点选状态

图片

图表段可以是交互式的,点击对应的分段时,右侧的图例也会同步高亮显示。

 

焦点状态

图片

焦点状态和上面提到的悬停状态类似,唯一的区别在于,焦点状态选中分段后有一个放大+描边的圆环效果,突出展示数据。

 

空状态

图片

当没有可用的数据时,应该在图表上表明这一点,并给出提示引导用户去点击。

 

错误状态

图片

获取数据时偶尔会出现发生错误的情况。发生这种情况时,向用户提供有用的、可操作的解释,说明发生错误的原因并告诉用户可以采取哪些措施来解决问题。

 

圆环图使用指南 

使用分类颜色

图片

保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据,同色系颜色常用在直方图中。

 

最多使用五个分段

图片

当圆环图包含多个数据分段时,图标会变得难以理解,为保证图标的清晰,尽可能将分段控制在 2-3 段,不要超过5段。如果数据过多,可以考虑使用柱状图、条形图等其他形式的图表。

 

保证数据准确

图片

圆环图的所有分段加起来的数值应该始终为 100%,没有有多段数据占比过小,可以一起汇总到“其他”分段中。

 

按顺序排列数据

图片

圆环图的份分段应从12点位置开始按最大值排序,然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。

 

不要将时间分段

图片

时间是一个顺序变量,不能用作圆环图中的类别。例如每个季度的时间是相同的,但是每个季度访客却不一样,使用圆环图会给用户造成一定的困扰。如果以时间作为基本单位,可以使用直方图、条形图等图表。

 


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

作者:Clippp

转载请注明:学UI网》数据可视化图表设计指南:圆环图

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

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

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

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

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



echarts折线图背景渐变以及常用配置项

前端达人


  1. let myChart = this.$echarts.init(document.getElementById('plant-charts'));
  2. // 绘制图表
  3. myChart.setOption({
  4. tooltip: {
  5. formatter: '{c}' //设置单位
  6. },
  7. //图例样式
  8. legend: {
  9. data: ['宽带情况', '数据量'],
  10. textStyle: {//图例文字的样式
  11. color: '#fff',
  12. fontSize: 12,
  13. padding: [0, 20, 0, 0]
  14. }
  15. },
  16. grid: { //设置图标距离父级div的间距
  17. top: "10",
  18. left: "0",
  19. right: "15",
  20. bottom: "10",
  21. containLabel: true
  22. },
  23. xAxis: {
  24. type: 'category',
  25. boundaryGap: false,
  26. data: ['2015','2016','2017','2018','2019','2020','2021'],
  27. axisLabel: {
  28. interval: '0', //类目轴(category)中用数值表示显示间隔,0为显示所有,1为隔一个显示一个,以此类推
  29. textStyle: { //文字样式
  30. color: '#62799C',
  31. fontSize: '12'
  32. },
  33. },
  34. axisTick: { //y轴刻度线不显示
  35. show: false
  36. },
  37. },
  38. yAxis: {
  39. type: 'value',
  40. //show: false,
  41. axisLabel: {
  42. textStyle: { //文字样式
  43. color: '#62799C',
  44. fontSize: '12'
  45. },
  46. },
  47. // 控制网格线
  48. splitLine: {
  49. // 改变轴线颜色
  50. lineStyle: {
  51. color: '#2a2a2d'
  52. }
  53. },
  54. axisTick: { //y轴刻度线
  55. show: false
  56. },
  57. },
  58. series: [{
  59. data: [5000,6000,7000,4400,3200,4500,6800],
  60. type: 'line',
  61. itemStyle: {
  62. normal: {
  63. color: 'rgba(62,139,222,1)'//线颜色
  64. }
  65. },
  66. areaStyle: {
  67. normal: {
  68. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折线图颜色渐变
  69. offset: 0,
  70. color: 'rgba(62,139,222,0.6)'
  71. }, {
  72. offset: 1,
  73. color: 'rgba(62,139,222,0.01)'
  74. }])
  75. }
  76. },
  77. }]
  78. });

echarts图例(legend)显示设置位置,样式,内容(百分比,水平,竖直显示,icon样式)

前端达人

   

 

//图例
    legend: {undefined
        icon: "circle",
        //icon形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none,
        itemWidth: 10,  // 设置icon宽度
        itemHeight: 10, // 设置icon高度
        itemGap: 40, // 设置间距
        // top: '5%',//竖直位置
        // left: 'center',//水平位置
        x: 50,//水平位置
        y: 200,//竖直位置
        orient: "vertical",//设置显示顺序,默认水平(水平,竖直)
         textStyle: {undefined
            color: "#000"
         },//文本样式
         // 使用回调函数(设置文本显示内容,例如 加百分号)
          formatter: function(name) {undefined
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0, l = data.length; i < l; i++) {undefined
              total += data[i].value;
              if (data[i].name == name) {undefined
                tarValue = data[i].value;
              }
            }
            var p = ((tarValue / total) * 100).toFixed(2);
            return name + " " + " " + p + "%";
          },
    },


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档