首页

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

seo达人


今天彩云跟大家分享的是 Dribbble 上,我一直珍藏的 UI 设计大佬们。优秀的太多,这里仅放 10 位我觉得最值得看的,可谓是精选中的精选,所以我建议你一定要收藏学习。

Paul Flavius Nechita

网站链接:https://dribbble.com/NpaulFlavius

首先,终于可以有机会推荐这位大佬了,他在 Drbbble 上是发起 100 天打卡练习的第一人,在当时带起了一股风潮,人人都开始做打卡练习。这位大佬每天更新一张高质量 UI 界面设计,内容多变,脑洞很大。更厉害的是虽然已经是 5 年前的作品,但依然不过时,品质超高,非常值得借鉴和临摹练习。(作者后面也公开了所有打卡作品源文件,只是现在链接已经失效了。幸运的是,彩云当年收藏到了百度云盘,想要的话,可以在文章结尾处获得)

彩云也是在当时参与到了 100 天的打卡活动才进步飞快,然后跳槽到了 360 设计团队的,这个练习活动也成为了人生中的转折点。这种打卡练习对于技法提升非常有帮助,而且逼自己规律性的大量产出,也能不断给作品集添砖加瓦。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

UI8

网站链接:https://dribbble.com/UI8

这个团队从世界上 30 多万优秀设计师和工作室发布的作品中精挑细选,放出了大量符合现代流行趋势的设计风格作品。每一张图都极其优秀,封面包装也非常值得学习,不管是项目还是作品集都能很好的用上。彩云一直有关注他们,还购买过会员,值得推荐。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Cuberto

网站链接:https://dribbble.com/cuberto

这是一家成立已经有 11 年的设计工作室,他们出品的作品不止是 UI,还包括网页,插画,图标,动效等作品,每一个作品在配色和展示上也都非常精品,偏实际项目,推荐给大家。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Paperpillar

网站链接:https://dribbble.com/paperpillar

2016 年成立的一个 UI 设计工作室,他们擅长界面,插画,图标,品牌和前端开发。其中在 UI 这块的作品以真实项目居多,符合流行趋势,值得借鉴和参考。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Ionut Zamfir

网站链接:https://dribbble.com/ionuss

加入 Dribbble 已经超过 10 年的自由设计师,他的作品我很早就有在关注,这些年也还在保持更新,作品以真实项目展示为主,推荐收藏。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Cosmin Capitanu

网站链接:https://dribbble.com/Radium

这位大佬也是一位加入 Dribbble 超过 10 年的设计师,其作品主要以概念作品为主,最佩服他对作品的包装设计和脑洞。作品量虽然不多,但每一张图都是精品中的精品,大部分都是动效完整的设计方案,非常值得学习。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Fireart Studio

网站链接:https://dribbble.com/Fireart-d

一家专注在设计和软件开发的公司,擅长插画、UI,其中 UI 部分也是以实际项目为主,具有很好的参考价值。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

uixNinja

网站链接:https://dribbble.com/uixninja

因为他的头像是一个忍者,所以我叫他忍者哥,他的 UI 作品视觉效果爆炸。一个很普通的界面,经过他的排版包装之后,总能显得很不一样,擅长界面视觉包装,想要把自己的 UI 作品包装出视觉。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Netguru

网站链接:https://dribbble.com/netguru

这个团队的 UI 作品以 B 端界面为主,界面简洁实用,想找 B 端界面参考的设计师朋友,可以多看看他们的作品了,相信会有不少启发。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Aurélien Salomon

网站链接:https://dribbble.com/aureliensalomon

这位大佬是开发背景,但不妨碍他把设计做到极致优秀,他的作品以极简概念为主,具备记忆点。他作品中有很多是对苹果,谷歌等大厂界面进行的重设计,改的也非常不错,挑战大厂的界面其实并不容易,相信大家能从他的作品中找到不少面试解题思路。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

总结

文章中列出来的这些是我从关注列表中精心筛选出来的比较有代表性的 UI 设计大神,在我的工作学习过程中,他们给了我很多的灵感。当然,这份推荐名单只是我自己的个人喜好,无关粉丝数量,排名也不分先后。

这篇分享,一定是值得收藏的,不论是找灵感,还是临摹学习,不用到处找,这 10 位大佬的作品就足够你研究了。最后,对于 UI 设计本身,最重要的还是要保持思考,多看多做才是进步阶梯。

文章来源:优设网 作者:彩云译设计

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

 

版式设计没思维?这样做让你事半功倍!

周周


再过几天就又双叒叕到「双十一」了,身边的许多朋友已经开始忙着囤优惠券,找链接了,而做为「设计“狮”」的我却还在连夜赶着各大品牌和公司的「宣传海报」,整天埋在做图—改图—再做图的循环中,不知道各位设计大大们最近的生活是不是也跟我一样呢。

版式设计没思维?这样做让你事半功倍!

好了,在开始今天的干货分享之前,我想先请大家一起来看几张海报:

版式设计没思维?这样做让你事半功倍!

看完之后,大家有没发现这几张海报有什么特点呢?

没错,他们的共同之处就在于,虽有通篇的文字,但画面依旧充满着空间结构感、层次感,而辅助图形的运用更是起到了点睛之笔的作用,给人眼前一亮的感觉。想必有的小伙伴肯定在思考,这是为什么呢?

版式设计,对,就是「版式设计」。

相信大家都曾有过,熬了一整晚,好不容易设计出几个画面的元素,结果看着一大堆的文字和图片,心中顿时思绪万千,脑海中却一片茫然,折腾来折腾去,还是不知道该如何排版才好的经历。

版式设计没思维?这样做让你事半功倍!

在当今这个高速发展的时代,无论是纸质媒体还是新媒体,信息的传播都离不开版式设计,一副好的版式设计作品,可以在有限的页面内,以最快速、最直接、最有效的方式传递出核心的内容和信息,并让读者和受众留下深刻而良好的印象。

所以,今天我就给大家分享一些版式设计知识,希望可以带给你些许灵感,帮助你早日做出爆款的设计作品~

曾在一本版式设计书上看到其对板式设计是这样定义的:“版式设计既版面编排,就是把特定的视觉信息要素,根据主题表达的要求在特定的版面上进行的一种编辑和安排。”

即排版并不是指简单的「东拼西凑」,而是需要经过合理化的对照排列整合,以此传递出高效的信息和特性差异的画面。

对比与突出

对比又称为「对照」,即把具有明显差异和矛盾的视觉元素配置在一起,碰撞出特性差异的现象,从而使主题更加的突出,视觉效果更加跳跃。具体又分为大小对比、粗细对比、虚实对比、主次对比等。通过利用不同方向、大小、粗细的字体重新排列整合,以突显出画面的主次信息,正如下面的几张海报。

版式设计没思维?这样做让你事半功倍!

△ 图一:大小对比

版式设计没思维?这样做让你事半功倍!

△ 图二:虚实对比

版式设计没思维?这样做让你事半功倍!

△ 图三:主次对比

字体的协调与统一

文字作为「语言符号」,无论在何种视觉媒体中都直接影响版式的视觉效果,在提高作品诉求力的同时也赋予了版面审美的价值观。在选用字体时,我们应当依据设计风格来决定,不同风格的作品,选择不同的字体形式。而协调则是指画面内在的东西,元素、字体配合得适度和恰当。即说明他们内在相似的东西或状态,以达到画面相统一的风格。

版式设计没思维?这样做让你事半功倍!

△ 图四:风格统一

版式设计没思维?这样做让你事半功倍!

△ 图五:颜色统一

版式设计没思维?这样做让你事半功倍!

△ 图六:元素统一

构成与比例分配

版式设计有很多种的构成方式和方法,一切美的东西皆有规律,三分法、白银比例、黄金比例就是其中的代表。

三分法(1:2)即「井字构图法」,是日常生活中最常见的一种构图手法,通过将视觉重心或者最吸引人的东西靠近四条线的相交处,使「画面和谐」的同时,也达到了「突显主体」的目的。

版式设计没思维?这样做让你事半功倍!

△ 图七:三分法

白银比例(1:1.414),也是在排版设计中最为常见的比例,给人一种「安稳恬静」,「惬意」的感觉。

版式设计没思维?这样做让你事半功倍!

△ 图八:白银比例

相对于其他比例而言,黄金比例(1:1.618)则显得更加突出,正如它的名字,常常给人一种「恰到好处」、「自然」的感觉、无论是在LOGO设计中、还是排版设计、抑或是摄影中,灵活的运用黄金比例,都能够带来不错的效果。

版式设计没思维?这样做让你事半功倍!

△ 图九:黄金比例

怎么样,看完之后,有没有找到一些灵感呢


文章来源:优设网    作者:艺海拾贝Design


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




既能用于排版还能用在图标的两个小技巧,快来收下!

seo达人

有时候觉得做的图标有点奇怪,但又不知道哪里奇怪,今天就来分析两个原理,看看有谁中招了!

亲密性

排版有四大原则,其中有很重要的一项就是亲密性,举个简单的例子,下图灰色是背景卡片,白色是信息内容:

既能用于排版还能用在图标的两个小技巧,快来收下!

按照亲密性原则,信息内容应该是一个整体,他们之间的关系更加亲密,所以它们之间的内间距(蓝色),应该是小于它们与卡片的外间距(红色):

既能用于排版还能用在图标的两个小技巧,快来收下!

如果,我们把间距颠倒,效果就会变成这样:

既能用于排版还能用在图标的两个小技巧,快来收下!

是不是有点奇怪!

其实在做图标的时候,有时也会用到这个知识点,比如之前看到一位星友做的删除图标,效果如下:

既能用于排版还能用在图标的两个小技巧,快来收下!

中间的两条竖线应该是内部内容,它们的内间距就应该小于外间距:

既能用于排版还能用在图标的两个小技巧,快来收下!

当然,这个间距相同也是 ok 的,咱们就别把内间距大于外间距,然后大的太离谱就好。

如果这个案例不够明显,咱们再整一个更明显的,我们在做“笔记本“、“目录“图标的时候,有时候会做成一个矩形,然后里面加几条线:

既能用于排版还能用在图标的两个小技巧,快来收下!

这几条线的内间距是不是应该小于它们与矩形的外间距,比如这样:

既能用于排版还能用在图标的两个小技巧,快来收下!

如果间距反过来,就会成这样:

既能用于排版还能用在图标的两个小技巧,快来收下!

这回很明显了吧!内部东西太散,导致整体不够精致。

其实仔细观察,这个图标例子和刚才那个排版的例子完全是一回事:

既能用于排版还能用在图标的两个小技巧,快来收下!

一个原理,那就是——亲密性!

很重要,大家一定要多多理解实践!

密集节奏

密集节奏是我们很容易犯的错,比如下面这个图标的原作看起来密集节奏就比较和谐:

既能用于排版还能用在图标的两个小技巧,快来收下!

但是当星友临摹后,效果如下:

既能用于排版还能用在图标的两个小技巧,快来收下!

我们抛开饱满度不谈,就在密集度这一块,这个地方离的太近:

既能用于排版还能用在图标的两个小技巧,快来收下!

导致那里过于密集,两条线快合二为一了。

再比如,下面这图标,我们先看临摹效果:

既能用于排版还能用在图标的两个小技巧,快来收下!

是不是这两个地方都太密集了:

既能用于排版还能用在图标的两个小技巧,快来收下!

也是线条快合二为一了,我们再看看原作:

既能用于排版还能用在图标的两个小技巧,快来收下!

人家这节奏感就好很多。

再举个例子,这组图标:

既能用于排版还能用在图标的两个小技巧,快来收下!

整体临摹优化的还不错,但是就是有一个比较突兀,就是它:

既能用于排版还能用在图标的两个小技巧,快来收下!

我不说,大家应该也都能看出来了,灯泡下面那里太密集了,其他地方都舒服,只有那里有点难受。

这就是大家经常犯的一个密集节奏的问题,大家多多注意。

好了,今天就这么多,大家可以好好消化下,尽量避坑!

文章来源:优设网  编辑:土拨鼠   

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

 

 

 

声音设计的魅力是你想象不到的

ui设计分享达人

声音记忆是一种非常普遍存在的现象。声音是基于人类本能的记忆方式,虽然并不代表它是最强的一种记忆形态,但它是最直接、原始的,因为它包含了结构化的图像、符码等特征,所以声音发出时本身就隐藏着巨大的想象力,既有直观又有想象,而且往往是被动接收的。尤其是当我们听到一段熟悉的音乐或是文字、音效,自然而然地就会想到某些事情。我一直认为音乐是记忆的载体,当然声音本身更是如此。


Ototo是一个可以让你使用任何导电物体来演奏音乐的电子套件。主控板上有对应一个八度内的所有黑白键的孔位,通过鳄鱼夹把任何的导电物件(水、水果、植物、金属餐具等等)与这些孔位相连,就能把这些导电物体变成按键。它的核心在于PCB合成器,实际上它是一块袖珍电路板,12个黑点和数个白点组成“琴键”,再加上一个外置的扬声器,只要与可导电的物体相连,摩擦就能发出声音。即便你是不懂乐理知识的人,即便没有专业的设备,也能拿起手边的日常小物创作一段美妙音乐。它还可以外接四种传感器的连接方式来改变声音模式。

Bareconductive的板子我之前在另外一篇文章中介绍过了《聊一聊音乐套件Bare Conductive Touch Board》,它比OTOTO的优势在于它有两种基础连接方式,鳄鱼夹和导电墨水。相对于鳄鱼夹,导电墨水体积更小,更方便。

下面再给大家介绍几个音乐装置项目:

  • + Looks Like Music +

Looks Like Music是Yuri Suzuki在2013年为卢森堡的Mudam艺术博物馆的暑期公共项目创作的互动式音乐装置。Yuri Suzuki设计了一系列几何造型的小型机器,它们可以沿着用马克笔画出的黑色线路前进,参与者可以在黑色线路边上涂色,这些小型机器会在经过这些颜色时把它们“翻译”成为声音。通过试验不同的涂色以及颜色之间的间距,参与者就可以创作出基本的曲调。

下面这个装置是个公共音乐装置,6个高度连小朋友也能够到的声音装置站立在博物馆外的广场上,它们能吞咽、扭曲声音和回声,组成一个音速游乐场。在任意一个喇叭面前,你都可以发出声音,说一句话,唱一句词,声音会通过弯弯曲曲的管道流淌,至于这条声音将从哪一端的喇叭里流出,就要靠你自己去探索了。

  • Synth Play

推动不同充气体的不同位置,随机产生的音乐就会响起。几个朋友共同配合,在推一推的解压氛围中便能创作出一支专属于你们的曲子。这样的创作方式将诞生出无数种组合,每一点微小的变化,都会带来微妙的听觉享受。有点呆萌的白色方块用来设定节拍,两个白色的充气体是创作音乐的主力,黑色充气体则用来控制和调节音效。

  • Face the Music

在名为 ‘ 面对音乐 ‘(Face the Music)的互动性平台上,你可以通过面部识别系统演奏电子音乐:抬抬眉毛敲敲鼓,张大嘴巴调音调,晃晃脑袋调整音长。还有歌剧、科幻小说、蓝调和电子舞曲等四种风格供你自由选择。

声音设计是很大的一个领域,现在还很少有学生专门做一个音乐装置放在作品集中,同学们如果感兴趣,想尝试的话,可以构思构思,为自己的作品集多增加一些色彩。


文章作者:程雅秋
英国皇家艺术学院产品设计硕士
擅长产品服务系统设计、用户体验设计和硬件Arduino交互

文章来源:站酷  作者:马克笔设计留学

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


聊天机器人的用户体验

ui设计分享达人

今天的聊天机器人远非“智能”,它们引导用户通过简单的线性流程,我们的用户研究表明,每当用户偏离这些流程时,它们都会遇到困难。

聊天机器人是智能助手的可怜“亲戚”。


定义:聊天机器人是一种特定于基于文本的对话界面,支持用户完成有限的任务。


在其他地方,我们讨论了智能助手的6个特性:语音输入、自然语言处理、语音输出、智能解释、代理和前面所有特性的集成。聊天机器人只需要具备这两种属性:自然语言处理和智能解释。换句话说,聊天机器人应该能够以自然语言接收查询,并正确地理解和解释它们(然后执行它们)。


在当今世界,至少有三个不同的因素推动着聊天机器人的发展和普及。首先,人们希望通过用机器人取代人工代理人来降低客户服务成本。其次,像微信这样的基于对话的系统的成功,提出了聊天机器人作为企业和服务的交互渠道的想法,旨在补充现有的渠道,如移动网络和移动应用程序。最后,Alexa和Google Home等语音智能助手的流行,促使许多企业在较小规模上效仿它们。


这些因素映射到今天可用的两种不同类型的聊天机器人:

在企业与客户之间的聊天交互中,客服机器人会接管部分人工负载。这类机器人的例子包括UPS的Ask UPS和阿拉斯加航空的Ask Jenn。


交互机器人的目的是提供与业务交互的额外通道,而不是用于客户服务。例如,Domino的批萨机器人允许用户订购批萨;来自Progressive公司的Flo可以提供一份汽车保险报价。这种交互机器人可以在各种平台上使用,其中最著名的是Facebook Messenger。(其他平台包括Twitter和Slack。)然而,它们也可以存在于应用程序(美国银行的Erica)中,或者通过短信(Capital One的Eno)提供服务。

UPS.com网站使用聊天机器人来回答客服问题。

Kiehl ‘s Messenger聊天机器人:用户可以通过在“发送消息”文本框中输入文本或选择屏幕上显示的选项之一(发送位置或邮政编码;文本输入框下面的主菜单选项)。


虽然客服机器人通常是纯文本的,但交互机器人将文本与可视化UI元素结合起来作为交互方法。


研究


为了了解聊天机器人的可用性,我们招募了8名美国参与者,让他们在移动设备(5名参与者)和桌面设备(3名参与者)上执行一组与聊天相关的任务。其中一些任务涉及为客户服务而与人或机器人聊天,另一些任务则针对Facebook Messenger或基于短信的聊天机器人。


对机器人的态度


一般来说,人们对机器人的态度从中立到略微积极。互动机器人是一个相当模糊的渠道:在我们的美国研究中,大多数参与者之前从未与此类机器人互动,他们也不知道它的存在。相比之下,微信公众号页面通常是这些机器人的复杂版本,我们的中国参与者对它们很熟悉。我们的一些参与者惊喜地发现了这个互动渠道,其他人则认为与其他传统渠道如网络或移动应用相比,它并没有带来足够的价值。


人们普遍认为客服机器人不如人类代表有帮助,但我们的参与者也认为它们有一些优势。最重要的优势是速度:与人类聊天通常需要很长的等待时间(要么在队列中,要么在对话开始之前,要么在人类为客户的问题寻找解决方案时),而机器人可以是即时的。另一方面,人们觉得与真人接触表明公司关心客户:“真人真的很好。他们卖给你一件昂贵的物品,所以他们必须在代理人身上花更多的钱。”另一个人说:“如果你有一个人(负责客户服务),那意味着你足够关心;如果你有一个机器人,那么·你应该有一个真正好的机器人。”


交互机器人通常很容易被识别为机器人,但客户服务机器人很难识别。有些企业并不总是提前向客户透露他们正在与机器人进行交互。我们认为这是一个错误。我们的研究参与者很高兴看到企业使用机器人是透明的,因为他们可以调整自己的期望和语言。例如,当用户意识到他们是在和机器人说话时,他们往往会更直接,使用基于关键字的语言,并避免礼貌标记。这种类型的语言通常比通常在正常对话中使用的复杂、间接的语言更成功。


用于交互聊天机器人UI


交互样式
文本和链接/按钮都可以用于向交互聊天机器人输入信息。它们的目的略有不同:

  • 预先确定的链接和按钮避免了用户输入。这些通常显示在一个轮播列表中,可以包括图像。人们喜欢有这些选项,甚至希望它们成为常用输入。

  • 文本允许用户在选择他们想问的问题类型方面有一定的灵活性,并允许他们偏离聊天机器人(通常过于严格)的脚本。


这两种输入机制都很重要,应该同时存在。


当机器人不允许用户选择选项,而是要求用户输入时,用户会抱怨。例如,一个参与者被Booking.com的机器人惹恼了,因为它不允许他选择日期,他必须输入日期。在输入“感恩节”之后,他说:“应该有一些明显的东西来预先填充它。选项应该预先填充——手动输入很乏味。我应该可以点击按钮才对。”

人们更喜欢选择一个选项(左边是Domino的聊天机器人),而不是输入冗长的文本(右边是Booking.com)。考虑为最常见的输入创建按钮。


一些机器人完全取消了输入文本的选项,迫使用户选择屏幕上显示的选项之一。这种类型的设计使机器人类似于一个网站,并限制了用户可以在系统内探索的路径。

Car Dealer聊天机器人不允许用户在选择库存选项后输入自由文本。


当链接和按钮被清晰地标记时,它们的效果最好,人们希望能够点击交互机器人显示的几乎所有非文本元素。例如,当eero Messenger机器人展示一组图片来说明eero的行为时,我们的大多数研究参与者都会点击这些图片,希望获得更多信息。

Eero for Messenger(左):为了告诉我更多信息,该机器人显示了一个轮播,上面有几张图片和一组可能的延续(文本在圆形框中)。用户希望能够点击轮播项,但这些并不是链接。Kielh’s for Messenger (右):轮播上的大图片是不可点击的,但是下面的链接是可点击的。


除了常规的按钮和链接,一些交互聊天机器人还有一个菜单元素,当被选中时,它会显示一组可能的任务。菜单有时显示在输入文本框下面,有时显示为旁边的一个小汉堡包图标。

金州勇士队在输入框下面有一个主菜单链接。选择此链接将显示一组可用的任务。当用户开始在输入框中输入时,菜单图标就显示在它旁边。主菜单链接和汉堡包图标做了同样的事情。


其他链接有时显示在消息框下面。这些链接是相当容易发现的:我们的几个用户与它们交互;然而,靠近输入框的图标不太可能被使用。

CNN bot:信息区下面的链接显示了聊天机器人的一些主要任务(头条新闻、主题、设置)。


线性流


交互聊天机器人似乎最像Alexa的技能:它们被设计用来指导用户完成少量任务。机器人支持的任务最好被概念化为具有有限数量分支的线性流,这些分支依赖于可接受的用户答案。机器人提出一个问题,其答案将推动机器人前进到流的右边分支。

一个线性流程的例子,机器人可能通过它来完成一个任务


当用户遵循流程并提供符合系统期望的“合法”答案,而没有跳跃步骤或使用未知的单词时,用户会感到成功和顺利。例如,一些参与者能够成功地与Domino ‘s Pizza、Wingstop、Progressive等公司的聊天机器人进行交互。然而,一旦用户偏离了规定的脚本,问题就出现了。


例如,当Domino ‘s Pizza机器人询问她的位置是公寓还是房子时,一名参与者输入townhome,机器人回答“我很抱歉。我好像听不懂。”另一位寻找巴宝莉腰带的用户在消息框中输入了“腰带”,但是收到了订单取消的信息。当她把它转换成“女式腰带”时,她被告知要从一个链接列表中选择,没有一个链接与她要找的匹配。

巴宝莉的聊天机器人很难理解用户想要完成的任务,并在机器人的指令表中列出了若干任务。


机器人也很难从问题或意外输入中恢复,有时会迫使用户从树的顶部重新开始,并做更多不必要的工作来获得答案。例如,我们的一个用户想知道起亚是否有四轮驱动的电动车型。为了找到匹配的任务,她不得不遍历整个决策树,回答诸如汽车需要容纳的人数和MPG等问题。当她对车辆类型偏好回答“不”而不是选择一个显示选项时,机器人就会停止并强迫她重新开始。


然而,有些机器人更加灵活,能够理解偏离脚本的请求。例如,一个参与者知道Domino ‘s Pizza正在进行促销活动,他可以让机器人将其加到自己的购物车中。在订餐流程的晚期,他还能够改变其中一个比萨饼的外壳。

Domino ‘s Pizza聊天机器人能够对不属于预订披萨的主要线性流的请求做出满意的响应。左图:用户可以在订购前将订单加到他的购物车中。右图:用户更改了正在订购的两个比萨饼中的一个的外壳。


一些机器人很难做出假设并建立查询的上下文。例如,我们的一名参与者试图与Capital one的基于文本消息的机器人Eno进行交互。他碰巧有两张来自Capital One的信用卡,每次他问一个问题,机器人就会强迫他澄清查询涉及的是哪个账户,而不会将上下文从一个交互传递到下一个交互。


当启动新任务时,机器人通常也不能利用之前输入的信息。例如,我们的一名参与者首先决定叫披萨外卖;她输入了自己的地址,但她被告知Domino ‘s不送货上门。她又开始一遍,这次的目标是去商店取货而不是送货。机器人第二次问她的地址,显然完全忘记了她已经输入了地址。

Capital One的机器人Eno要求用户在回答完每个问题后澄清他询问的是哪个账户。左:Eno只识别用户查询中的关键字“transaction”(尽管拼错了),无法回答用户的特定问题;相反,它给出了其指令库中一个匹配任务的答案。右:Eno重复了之前问的问题。


文章来源:站酷  作者:马克笔设计留学

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



vue中处理后台返回的 html 特殊标签(‘\< p style=“xxx“ \>‘)或(\<p>)的三种情况

前端达人

在平时获取后台数据渲染页面的时候可能会出现后台返回的数据是带有 html 特殊标签的
需求是附带的样式也不要, 意思就是直接删掉那些内容
但是在网上找挺久都没有找到现成的方法 最后是自己找了两个方法拼接出来的 所以在这里总结一下 方便以后直接 cv

// 返回数据:  ret : { list: { "introduct": '&lt;p style="color: lightcoral;"&gt;就&nbsp;当文字就是内容吧。&lt;/p&gt;', } } // 或者 ret : { list: { "introduct": '<span style="color: skyblue">就当文字就是内容吧。&nbsp;</p>', } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

返回数据带有html特殊字符(’&nbsp;/&le;p&gt;’) -> 转成 html标签(<p>)

// 返回数据带有html特殊字符的话直接用 v-html 在页面上显示的是 html标签 <body> <div id="app"> <div class="fd"> {{message}} // 如果需要数据中的样式的可以直接 v-html 指令渲染这个字段就能渲染出来了 <div class="box" v-html="'v-html: ' + message"></div> <button class="btn" @click="click1">dianwo</button> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: '&lt;p style="color: lightcoral;"&gt;就&nbsp;当文字就是内容吧。&lt;/p&gt;' }, methods: { click1() { this.message = this.escapeHtml(this.message) }, // 处理方法 escapeHtml(str) { var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' }; return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) { return arrEntities[t]; }); }, } }) </script> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

在这里插入图片描述

上面这个方法来自:https://blog.csdn.net/weixin_49186680/article/details/108746341

返回数据带有 html标签(<span>) -> 把 html标签 去掉

// 如果不想要后台返回在数据终的样式的话可以这样处理 <body> <div id="app"> <div class="fd"> {{message}} <div class="box" v-html="'v-html: ' + message"></div> <button class="btn" @click="click1">dianwo</button> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: '<span style="color: skyblue">就当文字就是内容吧。&nbsp;</span>' }, methods: { click1() { this.message = this.delHtmlTag(this.message) }, // 处理方法 delHtmlTag(str) { return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, "") } } }) </script> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

在这里插入图片描述

上面的方法来自:https://blog.csdn.net/weixin_44565191/article/details/109716908

返回数据带有html特殊字符(’&nbsp;/&le;p&gt;’) -> 去掉特殊字符

// 如果返回的带有 html特殊字符 都不要 结合上面两个方法 改吧改吧 就能瞒住要求了 <body> <div id="app"> <div class="fd"> {{message}} <div class="box" v-html="'v-html: ' + message"></div> <button class="btn" @click="click1">dianwo</button> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: '<span style="color: skyblue">就当文字就是&nbsp;内&nbsp;容吧</span>' }, methods: { click1() { this.message = this.escapeHtml(this.message) }, // 终极 处理方法 escapeHtml(str) { var arrEntities = { 'lt': '<', 'gt': '>', 'amp': '&', 'quot': '"' }; let htmlTag = str.replace(/&(lt|gt|amp|quot);/ig, function(all, t) { return arrEntities[t]; }); // console.log(htmlTag); return htmlTag.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, "") }, } }) </script> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

在这里插入图片描述

感谢一下引用的这些大佬的内容
还有附上 样式 要想亲自试试效果的我把样式放这里

.fd { margin: 100px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { margin: 30px 0; display: flex; align-items: center; } .btn { width: 100px; }





    

转自:csdn 作者小王几pl


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


VueRouter的实现原理——封装简易功能的VueRouter

前端达人

Hash模式和History模式的区别

不管哪种模式,前端路由都是客户端路由的实现方式,也就是当路径发生变化时,不会向服务器发送请求,是利用js监视路径的变化。然后根据不同的地址渲染不同的内容,如果需要服务器内容,会发送Ajax请求来获取。

表现形式的区别

  • hash 模式
    https://music.163.com/#/discover/toplist 地址中会存在 # 号
  • history 模式
    https://music.163.com/discover/toplist 地址中没有# 类似于普通的地址,但是需要服务端配置支持

原理的区别

  • hash 模式是基于锚点, 以及onhashchange 事件
  • history 模式是基于 HTML5 中的 History API
    • history.pushState() IE10 以后才支持
    • history.replaceState() \

History 模式的使用

  • History 需要服务器的支持
  • 单页应用中,如果刷新页面,会向服务器发起请求,而服务器不存在这样的地址就会返回找不到该页面从而出现404
  • 在服务端应该除了静态资源外都返回单页应用的 index.html

node 环境下支持 history

在 node 环境下,启用对history模式的支持可以通过 connect-history-api-fallback 这个中间件来完成

// 导入处理 history 模式的模块 const history = require('connect-history-api-fallback') // 导入 express const express = require('express') const app = express() // 注册处理 history 模式的中间件 app.use(history()) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Nginx 下支持 history

  • 从官网下载 nginx 的压缩包
  • 把压缩包解压到 c 盘根目录,c:\nginx-1.18.0 文件夹
  • 修改 conf\nginx.conf 文件

运行nginx服务器基本指令

启动
start nginx
重启
nginx -s reload
停止
nginx -s stop

  • 修改 conf\nginx.conf 文件
location / { root  html; index  index.html index.htm; #新添加内容
     #尝试读取$uri(当前请求的路径),如果读取不到读取$uri/这个文件夹下的首页
     #如果都获取不到返回根目录中的 index.html
     try_files $uri $uri/ /index.html; } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

VueRouter 两种模式的实现原理

Hash 模式

  • URL 中 # 后面的内容作为路径地址
  • 监听 hashchange 事件
  • 根据当前路由地址找到对应组件重新渲染

History 模式

  • 通过 history.pushState() 方法改变地址栏
  • 监听 popstate 事件
  • 根据当前路由地址找到对应组件重新渲染

实现思路

在这里插入图片描述
从上图,可以大致了解一下 VueRouter 这个类中的结构:
上半部分是属性,下半部分是方法,其中+ 是实例方法,- 是静态方法。
install 是用来实现Vue.use 插件机制的方法。

VueRouter-install 方法实现

要实现install方法,首先先分析一下该方法要做的事情:

  1. 判断当前插件是否已经被安装
  2. 把Vue构造函数记录到全局变量
  3. 把创建Vue实例时候传入的router对象注入到所有的Vue实例上
 let _Vue; export default class VueRouter { static install(Vue) { // 1. 判断当前插件是否已经被安装 if(VueRouter.install.installed) return VueRouter.install.installed = true // 2. 把Vue构造函数记录到全局变量 _Vue = Vue // 3. 把创建Vue实例时候传入的router对象注入到所有的Vue实例上 // 利用混入让所有的vue实例加载router _Vue.mixin({ beforeCreate(){ // this.$options.name用来获取vue实例 data以外的属性 // new Vue( { router } ) if(this.$options.router) { _Vue.prototype.$router = this.$options.router } } }) } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

添加 VueRouter 的constructor

VueRouter 的构造函数要初始化三个属性,分别是: options、data、routeMap。

  • options 是路由的构造配置对象
  • data 应该是一个响应式的对象,其中有一个属性 current 用来记录当前我们的路由地址,这里我们该如何才能创建一个响应式的对象呢?可以使用Vue的observable方法
  • routeMap 中记录了 options里的rules,rules解析出来 会以键值对的形式存在 routeMap中 ,key 就是路由地址,value 就是路由组件
constructor(options){ this.options = options this.data = _Vue.observable({ current:'/' }) this.routeMap = {} } 
  • 1
  • 2
  • 3
  • 4
  • 5

createRouterMap

接下来我们来实现VueRouter类中 createRouterMap 这个方法,它的作用就是把 options 中rules 路由规则解析出来以键值对的形式存储在routeMap上。

 createRouterMap() { this.options.rules.forEach(route => this.routeMap[route.path] = route.component) } 
  • 1
  • 2
  • 3

initComponents

下一步,来创建initComponents 方法,这个方法里我们要创建两个组件。分别是:RouterLink 和 RouterView

创建RouterLink 组件

let _Vue; export default class VueRouter { static install(Vue) { // 1. 判断当前插件是否已经被安装 if (VueRouter.install.installed) return VueRouter.install.installed = true // 2. 把Vue构造函数记录到全局变量 _Vue = Vue // 3. 把创建Vue实例时候传入的router对象注入到所有的Vue实例上 // 利用混入让所有的vue实例加载router _Vue.mixin({ beforeCreate() { // this.$options.name用来获取vue实例 data以外的属性 // new Vue( { router } ) if (this.$options.router) { _Vue.prototype.$router = this.$options.router this.$options.router.init() } } }) } constructor(options) { this.options = options this.routeMap = {} this.data = _Vue.observable({ current: '/' }) } createRouterMap() { this.options.routes.forEach(route => this.routeMap[route.path] = route.component) } initComponents(Vue) { // 创建RouterLink组件 Vue.component('router-link', { props: { 'to': { type: String } }, template: `<a :href="to"><slot></slot></a>` }) } init() { this.createRouterMap() this.initComponents(_Vue) } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

用自己的VueRouter 替换掉官方的运行后,发现报错
在这里插入图片描述
报错的意思是,运行时版本的Vue 不支持 tempalte 模板,需要打包的时候提前编译。
如果要让我们的template被支持可以使用完整版的Vue,完整包包含运行时和编译器,体积比运行时版本大10k左右,程序运行的时候把模板转换成render函数
@vue/cli 自动安装的就是 运行时版本

报错的解决

第一种方案——引入完整版Vue,可以在vue.config.js中 加入配置

module.exports = { runtimeCompiler: true } 
  • 1
  • 2
  • 3

第二种方案——使用render函数替换掉tempalte

 render(h) { return h('a', { attrs: { href: this.to } }, [this.$slots.default]) } // template: `<a :href="to"><slot></slot></a>` 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

创建RouterView组件

 // 记录一下this let self = this Vue.component('router-view',{ render(h){ // routeMap以key value形式记录了path和component // data.current 记录了当前页面的path return h(self.routeMap[self.data.current]) } }) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在routerlink中添加点击事件,修改地址

为了能够让链接成功完成跳转展示组件,我们需要对routerlink中的a标签添加点击事件

并且要在点击的时候,把最新的path更新到router实例的current上.

我们借助于history的pushState方法 该方法会修改浏览器地址栏中的地址,但不会向服务器发起请求,并且还可以将新地址记录在历史中

 Vue.component('router-link', { props: { 'to': { type: String } }, render(h) { return h('a', { attrs: { href: this.to }, on: { click: this.clickHandle } }, [this.$slots.default]) }, methods: { clickHandle(e) { history.pushState({}, "", this.to) // 把点击的链接地址 更新到 current 上 this.$router.data.current = this.to
                    e.preventDefault() } } // template: `<a :href="to"><slot></slot></a>` }) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

initEvent

现在功能基本上已经差不多了,但是还存在一个小问题,就是当我们点击浏览器的前进或者后退按钮的时候,组件不能实现切换展示,主要思路就是通过添加popstate监听地址变化,下面我们来完善该功能

 initEvent(){ // window.addEventListener("popstate",()=>{ this.data.current = window.location.pathname }) } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

完整代码

let _Vue; export default class VueRouter { static install(Vue) { // 1. 判断当前插件是否已经被安装 if (VueRouter.install.installed) return VueRouter.install.installed = true // 2. 把Vue构造函数记录到全局变量 _Vue = Vue // 3. 把创建Vue实例时候传入的router对象注入到所有的Vue实例上 // 利用混入让所有的vue实例加载router _Vue.mixin({ beforeCreate() { // this.$options.name用来获取vue实例 data以外的属性 // new Vue( { router } ) if (this.$options.router) { _Vue.prototype.$router = this.$options.router
                    console.log(this.$options.router.init); this.$options.router.init() } } }) } constructor(options) { this.options = options this.routeMap = {} this.data = _Vue.observable({ current: '/' }) } createRouterMap() { this.options.routes.forEach(route => this.routeMap[route.path] = route.component) } initComponents(Vue) { // 创建RouterLink组件 Vue.component('router-link', { props: { 'to': { type: String } }, render(h) { return h('a', { attrs: { href: this.to }, on: { click: this.clickHandle } }, [this.$slots.default]) }, methods: { clickHandle(e) { history.pushState({}, "", this.to) // 把点击的链接地址 更新到 current 上 this.$router.data.current = this.to 

e.preventDefault() } } // template: `<a :href="to"><slot></slot></a>` }) let self = this Vue.component('router-view', { render(h) { // routeMap以key value形式记录了path和component // data.current 记录了当前页面的path return h(self.routeMap[self.data.current]) } }) } init() { this.createRouterMap() this.initComponents(_Vue) this.initEvent() } initEvent() { // window.addEventListener("popstate", () => { this.data.current = window.location.pathname }) } }

转自:csdn 作者:Holyforsaken_FHC


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

第四届“生肖有礼”2022壬寅(虎)年生肖创意作品征集

lanlanwork




1111111111.jpeg

“生肖有礼”2022壬寅(虎)年生肖创意作品征集,创始于2018年,已成功举办三届(2019届、2020届、2021届),征集活动坚持以“生肖”为主题,创意设计生肖作品,并通过展览、出版等多种形式,传承和发展中国传统生肖文化! 
2022年是传统生肖虎年,我们习惯称自己为龙的传人,却忽略了我们也是“虎”的传人,虎的形象在中国几千年来的历史发展过程中占居颇为显著的地位,常与龙并称,在许多方面起着重大的作用。在《周易·乾卦文》中就有:“云从龙,风从虎”的说法。因为龙飞于天,虎行于地,所以虎与龙结合一起成为雄伟强盛的象征和权威的典型形态,是人崇拜并畏惧的对象,有时也充当逐妖、怯邪、镇宅的角色,构成了充满生机和活力的民族风俗文化特质!
 

一、主办单位:

大运河翰林民俗博物馆
 

二、承办单位:

北京生肖有礼文化艺术中心
北京大运河翰林文化开发中心
 

三、协办单位:

CDS中国设计师沙龙
中国邮政广告有限责任公司
北京国宝金贵黄金有限公司
 

四、支持机构:

上海市群众艺术馆
南昌八一起义纪念馆
中国邮政“复兴之路”主题邮局
北京印钞有限公司刘大东工作室
北京绿水源兴文化发展有限公司
北京中外邮联文化发展有限公司
贵州上行品牌设计有限公司
木头猫插画设计工作室
 

五、艺术顾问:

王亚民

全国政协委员、故宫博物院原常务副院长、故宫出版社原社长

谷建华

北京市政协第十届、第十一届、第十二届委员

大运河翰林民俗博物馆馆长

六、评审团:

终审评委:
阎炳武、曲振荣、李晨、史渊、王红卫、肖勇、刘大东
阎炳武
原中国邮政集团公司邮票印制局邮票图稿编辑部主任
中国金币总公司贵金属纪念币图稿评审委员会委员
曲振荣
原中国印钞造币博物馆馆长
中国印钞造币高级工艺美术师
人民币设计专家
李晨
鲁迅美术学院教授
鲁迅美术学院视觉传达设计学院院长、硕士生导师
史渊
中国邮政集团公司邮票印制局编辑设计部主任
中国著名邮票设计家 
王红卫
清华大学美术学院视觉传达系博士生导师
中国包装联合会设计委员会副秘书长
中国美术家协会会员
肖勇
中央美术学院设计学院教授
澳门科技大学特聘教授、楚天学者
刘大东
北京市工艺美术大师
中国手工钢凹版雕刻传承人
北京印钞有限公司高级工艺美术师
初评评审:
蒋云涛、顾鹏、仇寅、朱志伟、李吉锋、武世宁、付业波
蒋云涛

中国包装联合会设计委员会(CDC)全国委员

中国设计师沙龙(CDS)执行主席

北京印刷学院设计艺术学院设计中心主任

北京择东设计顾问公司设计总监

气韵中国系列邀请展主策展人

雾霾公益活动发起人之一

三X3 设计论坛活动发起人

我爱吾城创作计划发起人

赏未时光创作发起人

曾获:
中国之星最佳设计“金手指”奖,品牌设计铜奖,空间设计入选奖,第三届中国品牌设计金奖,第二届华人平面设计大赛优秀奖,中国品牌设计优秀奖,第五届“方正”字体设计大赛优异奖,平面设计在中国GDC07 优异奖,Tamga 2010 标志设计竞赛入选奖,香港国际海报三年展入选奖,澳门设计双年展入选奖,中华文创力量优秀产品大奖,GDC17三项优异奖
顾鹏

中国著名设计师

毕业于西安美术学院设计系北京顾鹏设计公司创办人兼创作总监中国设计师沙龙联合发起人、第一届执行主席、现任学术委员中国包装设计委员会全国委员《中国设计年鉴》编委首都企业形象研究会理事国际平面社团设计协会会员韩国又松设计学院、上海INTERMARK国际设计学院、郑州轻工业学院易斯顿国际美术学院等多所设计学院客座教授中北大学艺术学院校外艺术硕士生导师

20年的从业经验、屡获业界殊荣、有超过300项成功案例,多年公益设计交流经验、《气韵中国》《雾霾公益海报展》《意匠集》《尖荷行动》等全国活动的联合策展人等。

 

仇寅

方正字库设计总监

中国文字字体设计与研究中心专家委员中国设计师沙龙(CDS)会员深圳市平面设计师协会(SGDA)会员

“方正悠黑系列字体” 、“方正悠宋系列字体” 、“方正大魏体”原创设计师

曾获:

1985中国钢笔书法大赛特等奖

1988首届国际硬笔书法大赛一等奖

2015中国设计“红星奖”

 

出版:《仇寅钢笔字》、《仇寅书外国名诗》、《古帖新临多体钢笔字帖》、《雷锋日记选钢笔字帖》、《著名外国诗歌钢笔字帖》等字帖多部

 

朱志伟

著名字体设计人

汉仪字库艺术总监

北京服装学院设计学院客座教授

1971年至1991年在北京外文印刷厂从事印刷活字雕刻工作,1991进入北大方正从事字体设计和字库生产管理工作,任方正字库设计总监,方正集团高级技术专家。1996年开始涉足字体设计,有多项字体设计作品成功开发为字库产品在社会上广泛使用。从2004年开始热心于字体与视觉关系的研究与设计,将保护读者视力健康,建立字体与视觉的良好关系作为字体设计的核心理念,在这一理念下设计的《博雅宋》、《雅宋》、《风雅宋》、《韵动黑》等字库产品得到广大用户和读者的喜爱,被很多主流报纸和杂志广泛采用的,2015年加盟汉仪后设计开发《玄宋》。

 

李吉锋

中国设计师沙龙CDS 秘书长

古田路9号网站合伙人

华狮品牌全案机构创办人

2017年度中国当代杰出广告人

武世宁

中国设计师沙龙(CDS)理事

中国工艺美术协会会员

中国邮政特约设计师

“生肖有礼”创始人

主要作品:

2019联合国生肖猪年邮票、《2019中国北京世界园艺博览会》纪念邮票、《河北雄安新区设立纪念》邮票、《福寿圆满》贺年专用邮票、《宁夏回族自治区成立六十周年》邮票《祥瑞平安》贺年专用邮票、《西南大学建校110周年》邮资片、《团圆》、《一帆风顺》个性化邮票

 

付业波

CDS中国设计师沙龙媒体理事

北京“阅微堂”设计总监

“生肖有礼”联合创始人

多年从事文化创意产品、邮票钱币衍生品等研发设计,其作品曾获多项奖励;

宣传推广国内外各项设计大奖赛、设计展览等活动,倡导设计行业的良性竞争。

 

七、大赛主题:

大赛主题一:生肖虎创意作品设计
围绕“虎”主题进行创意设计。将和“虎”相关的海报、平面图案、插画、剪纸、包装、产品、服饰等设计作品进行递交(艺术表现形式和手法不限、一人可多幅)。
大赛主题二:生肖虎“钱币衍生品”设计
以生肖“虎”为主题,结合中国“传统钱币造型”进行再设计,创造出符合当代文化特色及审美的设计作品。可以是海报、平面图案、插画、剪纸、包装、产品、服饰等(艺术表现形式和手法不限、一人可多幅)。
 

八、作品要求及规范:

提交的作品须具备系统性和完整性,内容应包括但不仅限于以下内容:
① 设计图,作品文件格式:PDF,尺寸:420mm*285mm(横竖版均可),分辨率:350dpi,颜色模式:CMYK。作品文件名称:作者姓名。(例:王小亮.PDF)
② 创意文案(包括标题、主题设计说明等,创意文案以word文档呈现,不用排版在设计图稿上面)。作品文件名称:作者姓名。(例:王小亮.word)
 

九、报名方式:

1) 投稿邮箱:sxyl2019@163.com(本届征集唯一投稿邮箱)
2) 邮件名称:作者姓名-生肖有礼创作稿(例:王小亮-生肖有礼创作稿)
邮件正文:作者姓名+联系电话+常用地址(例:王小亮13999999999常用地址)
3) 请将授权书和作品图稿一并投稿到征集邮箱
注:授权书为亲笔签名版扫描拍照的高清图片(经过终评入选的优秀作品,后期需寄送亲笔签名授权书原件到组委会)
收件地址:北京市朝阳区左家庄中街豪成大厦1707室生肖有礼组委会收。
电话:13910076658
提取码: nkcn
 
咨询方式:
生肖有礼官方微信公众号:生肖有礼(ID:sxyl-365)
组委会联系电话:13910076658
活动官方微信群进群者请添加组委会联系人微信进群,方便活动期间重要通知,以及相关问题咨询。
联系人微信号:shengxiaoyouli365(申请添加微信请注明“生肖有礼”,否则不予进群。)

2222222222.jpeg

十、大赛日程:

1) 截稿时间:2021年06月30日
2) 初评时间:2021年07月10日~15日
组委会将在评审完成后一周内于“生肖有礼”微信公众号上公布入选作者名单。
3) 终评时间:2021年07月24日~25日
组委会将在评审完成一周内于“生肖有礼”微信公众号上公布100幅优秀奖作者名单,同时公布金/银/铜获奖者名单。
4) 获奖作品展(时间待定)
 

十一、赛事说明:

1) 金奖:3件,奖金5000元,并获奖杯、证书和纪念品
2) 银奖:5件,奖金2000元,并获奖杯、证书和纪念品
3) 铜奖:10件,奖金1000元,并获奖杯、证书和纪念品
4) 优秀奖100件,获证书和纪念品(其中含3件金奖/5件银奖/10件铜奖)
5) 入选365件,获证书和纪念品(其中含3件金奖/5件银奖/10件铜奖/100件优秀奖)
6) 优秀组织奖:5件,获奖杯、证书和纪念品
 

十二、作品知识产权与保护:

1. 依照国际惯例,作者需在授权书中签名同意北京生肖有礼文化艺术中心(以下简称组委会)在各种宣传展览活动中有权免费使用入选作品,并承诺组委会拥有与入选作品相关的影像权、展示权及获奖作品制作版权。
2. 对于最终获奖参赛作品,组委会拥有对该设计作品的宣传、推广及自获奖公布日起三年期的商业开发权;组委会同时拥有转授权的权利。
3. 参赛者必须保证其参赛作品是本人的原创,如发现有侵权、抄袭行为,参赛者负全部责任。对于有侵权、抄袭行为的参赛者,组委会有权在比赛任一阶段取消其参赛资格,其所获之奖项有权予以收回。
4. 本次征集活动所有参赛者均视为已阅读并认同章程。未尽事宜,组委会有权跟进修改。
5. 组委会对本次征集活动保留最终的解释权。
(本次活动不收取任何费用)
 

十三、媒体支持(以下排名不分前后)

央广网、中国网、古田路9号、中国设计之窗、包图网、标志在线、设计搜索、摄图网、设计青年、设计长沙、爱创意、包联网、汉文字美学中心、千库网、赏未时光之旅、陆俊毅_设计现场、椒盐与刘立伟设计、设计赛、秀设计、矮凳网、AD518.com网站、和艺社、首席视觉官、GPD国际包装设计、《包装&设计》、《全球包装与设计》、纯粹设计、设计竞赛、Gray design、大艺时代、大学生艺术在线、联盟起艺……
 

十四、机构支持(以下排名不分前后)

深圳市平面设计协会、方正字库、仓耳字库、江西省美术家协会设计艺术委员会、平面为墙-西安设计师联盟、上海设计师俱乐部、南京平面设计师联盟、武汉九一创作协会、绝对贵州创意设计联盟、尖荷、字魔营、传统手工艺传播平台-谷雨、多思集、字绘中国、成都设计沙龙、佛山设计师俱乐部、安徽美术教育协会、大连平面设计师协会、黑龙江关外设计联盟、广东省商业美术设计行业协会、广州平面设计师联盟、桂林闲云漫旅文创科技有限公司、海平面(浙江)设计师联盟、杭州设计师沙龙、河北设计师沙龙、徽平面设计联盟、吉林省平面设计协会、沈阳奉天设计师沙龙、山西省平面设计协会、内蒙古设计师沙龙、山东品牌创意联合会 、新之航传媒集团有限公司、山西平面设计师俱乐部、苏州平面设计师协会、郑州市平面艺术设计协会、太仓平面设计联盟、新乡设计师协会、中国女设计师沙龙、亚洲中韩设计协会、台湾海报设计协会、北京华狮品牌顾问、北京择东设计顾问、北京顾鹏设计、伙伴传祺创意设计、郑州青桐品牌设计
 

十五、院校支持(以下排名不分前后)

清华大学美术学院、首都师范大学、北京印刷学院、北京服装学院、山东工艺美术学院、青岛大学美术学院、北京鲸艺设计学院、国立台湾芸術大学、华南师范大学、广州美术学院、上海美术学院、景德镇陶瓷大学、郑州轻工业学院艺术设计学院、郑州轻工业学院易斯顿美术学院、西南民族大学艺术学院、广西艺术学院设计学院、大连艺术学院艺术设计学院、燕山大学艺术与设计学院、大连医科大学艺术学院、河南理工大学建筑与艺术设计学院、重庆科技学院、石家庄学院、安徽大学、河南工业大学设计艺术学院、长江职业学院、广州航海学院、西安工程大学、河北传媒学院艺术设计学院、中原工学院艺术设计学院、中原文化艺术学院、台州学院艺术学院、天津商业大学艺术学院、武汉工商学院艺术与设计学院、山西传媒学院、河南工程学院艺术设计学院、河南省工艺美术学校、河南轻工职业学院、上海工程技术大学、湖南工业大学、兰州职业技术学院数字传媒系、河南牧业经济学院、河南师范大学新联学院、869(大连)设计学校、庐山艺术特训营、衡水学院、郑州科技学院艺术学院、华北水利水电大学、周口师范学院、许昌学院设计艺术学院、沈阳工学院、常州纺织服装职业技术学院创意学院、鲸艺设计学院、西安邮电大学数字艺术学院、江苏大学艺术学院、上海工程技术大学中韩多媒体设计学院、湖北科技职业学院传媒艺术学院、武汉传媒学院、广西师范大学设计学院、九江学院艺术学院、汉口学院艺术学院、湖南女子学院、广州城建职业学院艺术与设计学院……


文章来源:设计竞赛网

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



干货!简化和改进网站UI设计的7个技巧

lanlanwork




你对自己的网站当下的UI设计效果满意吗?如果不知道如何改进的话,那么这篇文章或许对你有很大的帮助。

据统计,成年人平均每天在手机上花费3到4个小时。尽管大家不懂如何创建APP或网站,但却能明显感知一个产品设计的好坏。这可以很明显的映在产品使用时间上,并且很大程度可以归结为直观的用户体验和可能被忽视的UI界面。

如今,UI设计是建立网站或应用程序用户信任的重要组成部分。优秀的UI设计,带有清晰、熟悉的图标,一致的调色板,尺寸大小,可以让用户快速、轻松地浏览页面内容。

修改现有的网站或应用程序设计可能会面临很多障碍,但你完全可以做一些小事情,让UI设计达到一个新的水平。无论是在你的图形、调色板、网站导航工具、图标、字体大小和间距上,你的UI设计总有需要改进的地方。

在本文中,站长之家将跟大家分享7种简单的方法,让你的应用程序和网站UI设计经过简单的调整之后,在视觉上更吸引力。

字体的使用要克制

使用的字体并不是越多越好,最好只使用一种字体。我们建议使用无衬线字体,如Helvetica。因为它更易于阅读,并且在小屏幕和大屏幕上的展示都比较良好。

通常可以在不同位置进行调整。例如,标题(H1)可以是粗体,或者采用比常规文本(p)更粗的字体,而常规文本则采用普通字体,也以尝试用颜色来区分和建立层次。

当然,你还可以在设计中使用两种字体(一种用于标题,一种用于其他文本,比如段落,标题等等)。我们很少在设计中看到两种以上的字体,但出现这种情况时,是有一定原因的。

比如下图中,使用字体过多,导致页面观感混乱。

1.jpg

内容的可读性

如果页面上的文字和背景图片在颜色上过于相似,那就无法突出文字内容。结果就是不利于用户阅读,要么就是快速浏览,要么干脆跳过这部分内容。

2.jpg

而这个问题很容易解决。首先,在图片上添加一个覆盖层,根据字体颜色,调整背景图片的明亮程度,也可以通过调整图像的透明度来达到类似的效果。实现这一点的另一种方法是在文本周围添加阴影。

检查内容的对齐方式

在决定如何阅读内容时,,对齐起着至关重要的作用。大家很少会看到长格式文本居中或向右对齐,博客类或长文本内容更是如此。统一将文本左对齐是一个比较稳妥的做法,而不是选择居中方式。

3.jpg

请注意,在某些情况下,居中文本仍然是合适的。一些例子包括小标题或段落,引用等等。

颜色使用需谨慎

虽然颜色在传递信息方面非常有用,但要谨慎使用,而且只在你试图传达内容中最重要的部分时使用。

例如,对于一篇博客文章,你不会将所有文本都设置为亮绿色。颜色对于定义设计层级是非常重要的,比如可以降低不太重要的文本的饱和度,从而突出想要抓取眼球的内容。

4.jpg

最后,我们建议设计之前,要保持颜色的一致性和定义调色板。颜色的组合有数百万种,你可以花几个小时来测试哪种灰色比较好看,或者哪种紫色比较适合你的设计页面。虽然这可能很耗时,但值得去尝试,如有必要的话,就作出改变。

留白跟内容是一样重要的

留白对于内容的可读性非常重要。过于聚集的文本和图片会让用户感到不适,而过多的空白会导致读者需要过多的滚动,从而在无法快速浏览并产生挫折感。

5.jpg

要给内容足够的呼吸空间。在页面发布之前,请确保在不同的设备上测试留白,以确保可读性。

对于大多数字体来说,1.5到1.625的行高是一个比较稳妥的选择。

设计模式要为品牌标识起补充作用

在界面创建一个全新的点击或滚动模式是不必要的,通常不会给用户留下深刻印象。

6.jpg

应该使用用户熟悉的模式,例如在网站顶部添加导航栏(在大多数网站上都能看到),而不是在底部列出网站的功能,让用户需要滚动才能找到这些功能。

设计保持一致性

应该保证你的设计在所有渠道都保持一致性——包括网页,应用程序,移动端,社交媒体账号等等。

7.jpg

当用户访问你的网站或查看社交媒体资料时,应该给他们一致的熟悉感。尽量保持颜色和字体的一致性,这会让受众更好地联想到你的产品和品牌。也可以确保用户在点击你的网站时不会感到困惑。

总而言之,在UI设计方面,可以经常问自己这些问题:

  • 用了多少种字体?

  • (如果超过一种字体)是否可以简化网站,或者在页面上限制字体效果更好?

  • 图片上的文字是否易于阅读?可以在不同的设备上读取吗?如果答案是否定的,那么给图像添加一个覆盖层。

  • 网站的哪些部分居中?把它移到左边是不是更好看?(要注意的是,要根据设备调整对齐方式。比如在手机端上居中效果可能比较好,但在较大的显示器上左对齐可能比较好。)

  • 用了多少种颜色?一个个尝试使用更多或减少颜色,并尝试限制彩色文本的使用。

  • 段落和图片间隔空间是否合理?尝试增加或减少留白的数量,以改进原有的设计。

  • 所有的页面或帖子都有相同的导航吗?尽量让滚动和单击模式在整个面板上保持一致。

  • 所有的页面设计是一致的吗?如果不是,试着保持所有页面的颜色和布局一致。

以上就是改进UI设计七个要点,希望对你能有所帮助。

注文章由站长之家编译自medium

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



搞懂这7个图标设计原则,你就能像专业图标设计师一样

周周


编者按:设计原则总是看起来简单抽象不言自明的,但是在细分的设计领域,这些原则其实有着各自不同适用情况,有着「特定的条件」。图标设计,就是如此。今天的这篇文章,来自专业的图标设计师 Helena Zhang,她结合自己制作 Phosphor 系列图标的经验,来分享她对于图标设计原则的理解。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

这些设计原则就像一份清晰的设计框架,或者设计自查表单一样,帮你规避设计陷阱,让你的设计成果更加出色。

创建高质量系列图标,你得使用一套周到系统的方法,需要有训练有素的双眼,大量的迭代学习,以及坚持实践,才能做到。下面,我将结合7项设计原则,和大量的实际案例,来为你详细说明,如何创建高质量的图标。

掌握这些设计原则,就是创造出优质图标的关键。

1、清晰

图标存在的目的,是快速传达概念。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

下图是 Prius Prime 仪表板上的图标。

在这一系列符号当中,你能明白其中哪些的含义?对于这款车的驾驶者而言,可能会随着使用时间的积累,逐渐明白其中一部分图标的含义。很大程度上,这是因为这些图标本身并不直观。你可能需要对着说明书,才能明白它们各自的含义。

我们可以从下面看到,图标是怎么一步步变得难以识别的:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

当图标开始使用我们不熟悉的含义和隐喻时候,它就自然变得难以理解。从左往右数第三个图标,是安全带的提示灯图标,当它亮起的时候,意味着你没有系好安全带。这个含义相对直观,你可能能够很快掌握。而最右边的这个「电动助力转向系统警告灯」含义就非常模糊了。

通常,不清晰的图标设计会让你感到沮丧,但是对于开车的人而言,含义模糊的图标意味着误解,而误解的结果可能是生命安全。

下面是我们更为熟悉的图标——喜爱、警告、音乐和向上。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

上图为 Phosphor Carbon 中的图标

向上的箭头在很多场景当中,都是非常清晰、实用的符号。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

纽约地铁中的标识

最成功的图标设计,不仅仅是让图标本身易于理解,而且对于不同的文化背景、不同年龄段、不同知识背景的人都能理解,只有做到这样才行。

如果你想要表达的信息过于抽象,那么单独使用图标,可能不是最清晰的解决方案,应当将图标和文本标签结合起来使用。

2、可读性

有了易于理解的图标之后,你需要确保它的可读性足够强。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Icons in the Amtrak mobile app

由于细节太过精细,很难让 Amtrak 的图标被清晰地感知到。

Transit 应用图标也有相同的问题。它们的剪贴板这个图标中的细节很难看清:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Icons in the Transit mobile app

稍加调整之后,好了很多:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Adjusted clipboard icon

当你在处理图标中多个不同的图形元素的时候,应该确保其中的空间留足。太细小的笔触细节、更多的信息量会让图标显得更加难以阅读。

Google Maps 的公交车图标就非常的出色——它看起来足够小,但是可读性也很强。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Google Map icons

3、对齐

确保每个图标都感觉平衡,尽量进行视觉对齐

不平衡的播放图标

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Unbalanced play icon

在这个播放图标当中,尽管三角形被放置在中间位置,但是它并没有视觉对齐,我们的眼睛看到的时候,会觉得中间的三角形说向左靠的。三角形靠左的这一边在视觉上更重,因此它应该向右移动一点来确保平衡。

就像字体排版设计师,他们也经常会微调文字的布局来确保视觉平衡。比如字母 i 和 j 顶上的小圆点会偏移,而字母 O 的上下部分则为稍微超出边界,来确保字体的平衡。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

设计的时候,适当的微调就能达到平衡的效果。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Balanced play icon

明显更好了。

要点:不要单纯的相信数据,要用你的双眼来进行检查和修正。

4、简洁

用尽可能少的词汇来进行表达和描述,这样会更加优雅高效。

「将你所学的知识分享出去,可以增强你对于这门学科的理解。」

Material Design 在他们的导视系统中,使用的图标大都足够简洁,他们善用图标而是说话:

这是一个复杂的船的图标:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

它还有更为简约的版本:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Succinct boat icon (Source: Material)

简洁是图标设计的精髓之一,因为我们经常需要在很小的屏幕上操作,图标可以传达很多信息,而不同文本或者其他复杂的内容。

在用户界面当中,简约准确的设计风格能够凸显重点,让内容发挥效用。Telegram 的图标设计,就非常的简约有趣:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Telegram icons

有的时候,UI图标会选用更偏向插画风的样式。下面这些关于美食的图标就设计得非常令人愉悦,代表泰国菜的图标中,虾的描绘就非常传神:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Yelp icons by Scott Tusk

图标可以适用于各种不同的硬件平台,手机、 电脑、平板,适当的信息量意意味着设计师可以在色彩、层次纵深上,有更大的操作空间。因为图标本身会应用于特定的APP 或者网站当中,因此图标可以适时地凸显品牌和产品特征。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

iOS 平台上的 Procreate 、火狐和 Netflix 的图标

5、一致性

为了让图标家族显得更加和谐,始终保证相同的样式和设计规则

在 iOS 13 之前,苹果的图标设计有着各种不同的粗细笔触,不同的填充样式,大小也各不相同:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

仔细看看这套图标,是不是有的图标看起来比其他的更重?

任何图标都有着相应的视觉重量。而视觉重量取决于图标笔触的粗细、填充模式、大小和形状这几个属性。而图标设计的难点就在于,如何控制所有的这些参数,做到整体的一致性。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

苹果公司最近引入了 SF Symbols 这个功能,将图标直接制作成为图标字体,在这套字体当中,图标有 9 种不同的「字重」和3种不同的的风格(也许有点复杂,但是绝对充分够用)。从图标到符号,在填充模式、笔触轮廓等多个不同的属性上,确保你能挑出感觉更加和谐的图标。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Icons from Apple’s SF Symbols

对于一个大型的成套图标而言,保持一致性并不是一件容易的事情,尤其当这套图标涉及到多个制作者的时候。遵循清晰的原则和规范在此时上至关重要的。

这套 Phosphor 图标是由我和另一位朋友共同制作并严格测试的,我们使用一套准则确保这 700 个图标保持一致性。尽管每个形状都不尽相同,但是它们给人的整体视觉重量是完全相同的,并且很好地相互组合到一起:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Subset of the Phosphor Carbon icon family

6、个性化

每套图标都应当尤其独有的风格和气质。是什么让它们与众不同?它们对于品牌是否有所助益?它们会给人什么样的情绪?

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Waze icons

Waze 大受欢迎的用户界面,很大程度上是它本身所使用的图标设计所造就的。这些用色跳脱斑斓的图标,仿佛在说「我们就是特立独行!」

Twitter 的图标是柔和、清晰明亮的:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Sketch 的图标则是精致而通透的:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Freemojis 的图标是可可爱爱的:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

而这些 Android 的图标则风格各异,抽象风、像素风、霓虹风,不一而足:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

7、易用性

完美地绘制了整套图标之后,你的工作并没有完成。接下来,你需要继续做测试和其他的准备工作,比如让参与图标制作的志愿者可以更好地参与后续的制作和完善,让设计师在日常设计工作当中使用和测试,在数字屏幕和印刷品上应用确保效果,让开发者将它们集成到其他的服务当中,确保能够应用。

一套高质量的图标,需要经过良好的组织、记录,并且在不同的应用场景中进行测试,并且最好能够得到个性化图标制作工具的支持。

7.1、组织性

你需要确保图标集的整齐规范,有合理的命名,便于查找,并且想清楚以什么样的方式来进行分类。按照字母顺序?按照大小,还是类型?

搞懂这7个图标设计原则,你就能像专业图标设计师一样

这套 Nucleo Sketch 图标,是按照也没类型来进行组织分类的

7.2、有据可查

你需要阐明整套图标的核心原则:

我以我所制作的 Phosphor 系列图标为例(和以上原则内容有重复)来进行说明:

  • 清晰:首先要清晰,确保图标可被识别,具有可读性,不能牺牲图标的意义和清晰度。
  • 简洁:尽可能少地使用细节。Phosphor 系列图标的原则是还原。每个笔触都要简洁明了,传达准确地信息。
  • 个性:可以特立独行一点。谨慎的添加独特的细节,让原本可能非常冷硬的图标设计变得温暖。

下面是技术规则。我还是以 Phosphor 图标作为返利:

  • 使用 48×48 px 的画布
  • 使用 1.5 px 居中笔触
  • 笔触末端使用圆角
  • 使用连续的笔触,除非断开的线条有助于理解
  • 尽可能使用直线、完美的弧线,角度以15度为增量
  • 必要时调整曲线以符合设计原则
  • 尽可能使用整数、使用偶数作为度量,必要时可以减少 1px 或者 0.5px
  • 尽可能使用下面的元素来进行设计:28×28 px 的圆圈,25×25 px 的正方形,28×22 px 的矩形
  • 保留6 px 的裁切区域

按照这这样的步骤来进行设计,并根据需求来公开相应的文档,就像下面这样:

7.3、进行测试

检查一致性。确保图标在不同场合可以使用,并且尺寸合理。确保它们和大型是视觉系统能够协调存在。

将图标排列在一起,并且按照以上的 7 个原则来进行检测。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Phosphor 的品质控制流程中所用到的测试表。

7.4、定制化工具

最后,如果你有足够的资源,可以开发相应的工具来方便用户使用图标。

Material Design 让用户可以通过自定义库来访问图标,搜索文件,选择喜欢的格式、配色、大小和主题。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Font Awesome 的图标设计并没有完全遵循上面所提到的全部原则,但是它依然是目前来说最易用的图标集。它提供的功能甚至超出了以上提到的范畴:它支持前端框架、CDN、图标字体以及 SVG。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Font Awesome 的图标排行榜

下面是一些额外的图标素材资源。

7.5、资源

  • Feather:这是一款精美的简约线性图标合集,包含有 200+ 图标,可以轻松缩放
  • Material system icons:包含 1000+ 实用的 UI 图标,有5 种不同样式
  • Nucleo:这套图标非常全,有3万多个,有三种不同样式,线性、多彩扁平和符号式
  • Streamline:这是一组精美的、包含三万多个线性图标的图标合集图标合集

这个图标合集项目虽然在质量上参差不齐,但却是非常适合拿来搜集灵感、作为参考好地方。

Icon Managers

这是一款来自 Nucleo 的应用程序,你可以导入图标集,查看,修改,导出,非常实用。




文章来源:优设网    作者:Helena Zhang



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




日历

链接

个人资料

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

存档