首页

如何培养设计美感,这个方法掌握了,想不进步都难!!

lanlanwork


1.从大量阅读开始

为什么我们读小学时候,每天很早去学校晨读,目的通过这样刻意练习加深学习记忆。

长久以往,我们对文字理解,对写作文就会构建起丰富的背景知识。

那么在设计中也是一样的,在前期,一定要每天坚持大量的阅读,培养你的眼界。

阅读什么呢?我觉得可以针对性一些,比如:

 

a.大量看UI设计作品

网上因为作品有好有坏,如果你早期无法判定好的作品,可以去看一些获奖的作品,比如kdesignaward、Adobe设计大奖,IF设计大奖等。

图片
图片
Bomapp(kdesignaward)
图片
DuerOS(百度车联网)kdesignaward

 

b.创意性网页UI作品
图片
图片
图片

 

c.品牌设计作品
图片
图片

 

d.插画设计作品
图片
图片

 

e.版式设计作品
图片
图片
图片
当然不止这些,比如你还可以看看一些装置艺术、科幻艺术、三维作品、摄影作品、文化类作品,总之早期一定要坚持大量阅读。
我们大量阅读是为了建立丰富的背景知识库,积累越多,你的审美自然也会跟随提高,当然做设计的想法就会有更多。

 

2.什么情况下知道,我的审美提高了?

前期大量阅读了很多作品,这时候你需要把牛逼的作品收集起来,等半个月后,再去看看之前搜集的作品,如果发现有部分很丑,那么恭喜你又往前走了一步。

成长是需要一个过程,切忌操之过急,关键是需要自己动手去执行,不能等着被改变。

图片
https://www.pinterest.com/Tonyrosie666/_saved/

我们可以去建立一个图板,虽然很多人有这样做,但是真正做到复盘,然后去删除之前采集的人很少。

如果不去复盘,不去思考,进步当然会缓慢,抱怨也是没用的。

低头赶路,也不要忘了抬头路,我们要随时知道是朝着正确的方向努力。

 

3.学习一些理论

当看了大量的作品,对美有些认知,但是你还是不知道怎么表达美?这时候,你需要学习一些理论的支撑。

我们通过阅读大量作品构建审美认知,通过阅读书籍、文章理论构建审美体系。

比如,德国工业设计师迪特·拉姆斯提出好设计十项原则:

好的设计是创新的
好的设计让产品更加实用
好的设计是美观的
好的设计使产品更易理解
好的设计师谨慎克制的
好的设计是诚实的
好的设计是经典永恒的
好的设计是细致的
好的设计是保护环境的
好的设计要尽可能简单

又或者:

我们可以从形、色、质、字、构、动等6个维度去拆解,又或者可以利用格式塔心理学来进行设计质量的评估,比如我们常说的相似性、亲密性、连续性、焦点归一等。

再比如,当你看到一个吸引你的设计作品,你可以这样思考吸引你的点在哪?

比如:是图形运用很巧妙还是质感表达很新潮?又或者色彩创意很棒,一般一个好的设计都会满足形、色、质、字、构等,至少要3个以上维度。

当然还可以通过看书积累对设计美的表达,总之就是要大量输入,构建丰富的知识库。

 

4.推荐一些网站

提升审美必须每天坚持看,这个是毋庸置疑的事情。这里,推荐一些我常常去看的网站。

a.savee

图片
https://savee.it/

 

b.pinterest

图片

https://www.pinterest.com/

 

c.designweek

图片

https://www.designweek.co.uk/

 

d.designcollector
图片

https://designcollector.xyz/design

 

写在最后

提升设计审美,前期大量阅读只是一个开始,我们还需要做的是不断思考总结。

同时还需要学习设计理论,这些我们可以通过看书或者和别人交流,在讨论过程中,你自然知道他们是怎么评价这个设计的。

路漫漫其修远兮,学习是一个长期的过程,培养审美也是。

积小步,成大步,没有一蹴而就的成功,一切都是量变的积累。

 

原文地址:功夫体验设计(公众号)

作者:Tony

转载请注明:学UI网》如何培养设计美感,这个方法掌握了,想不进步都难!!

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

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

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

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

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



提高用户体验的10个优秀案例

lanlanwork


一、特殊场景下的差异化设计

根据用户使用场景和特殊情况出现时,产品会结合变化呈现不同的功能或者服务,这种差异化的设计更能体现情感化设计的一面,提高用户对于产品的认可度。

腾讯新闻 APP 在东航事故出现时,在底部操作栏新增了祈祷的图标,方便用户表达祈祷的心情。特殊情况下的差异化设计满足了用户的情感需求,也体现出了产品的温度,带给用户更强的粘性。

图片

 

二、优化指引路径提高操作效率

通过提取本机号码一键登录减少了繁琐的注册流程,提高了登录的效率,减少用户的操作路径。在登录时都需要用户同意一些条款协议等内容,当用户未勾选时通常都是提示用户,指引用户选择后操作。这样的设计增加了用户的操作路径,使用体验不是很好。

网易云音乐 APP 在同样问题出现时,提供了一个弹窗进行指引,用户无需重复操作,直接点击“同意并继续”即可完成登录。在用户误操作出现时,无需用户过多的操作路径,给出了更高效的操作解决方案,提高了用户使用体验。

图片

 

三、温馨提示降低用户的过度依赖

随着互联网时代的到来,太多的娱乐产品占据了我们的时间,过度依赖和使用耗费了大量时间。特别是短视频的走热,刷视频容易带来过度依赖,影响用户的视力等健康问题。

抖音 APP 作为用户量庞大的短视频产品,提高用户体验至关重要。为了降低用户的过度依赖,提示用户注意休息,特意设计了温馨提示。用户可以设置提示时间和进行管理,APP 也会定期提示用户。温馨的设计提高了用户对产品的好感度,也能辅助用户做好时间管理,以免过度依赖而影响休息时间。

图片

 

四、隐藏式设计提高版面利用率

对于用户来说希望内容具有较高的可见性,提高内容的曝光度才能被关注。在控制内容的优先级时,通过隐藏式设计可以满足更多内容的呈现,不过需要做好隐藏内容的引导,提高隐藏内容被发现的概率。

网易云音乐 APP 在云贝中心签到设计中使用了隐藏式设计,将签到相关的附属内容隐藏在展开卡片中,为更多主要内容提供了展示空间。为了提高展开的交互设计,在每天初次访问时会默认展开,然后再收起隐藏,这个动态的指引提高了这个交互动作的曝光度。利用隐藏式设计满足了产品需求,通过动作引导提高了用户知晓度,是一个具备较好体验的设计解决方案。

图片

 

五、更人性化的模式设计

随着用户群体的跨度增加,为了带给不同年龄段用户更好的体验,众多产品都针对不同用户提供了定制化模式。特别是针对老年用户而进行适老化设计,还有针对青少年儿童设计的时间管理等,不同模式满足了更多不同年龄段的用户需求。

比如优酷 APP 在个人中心设计了“模式切换”,点击可以设置长辈模式、青少年守护、儿童守护。针对不同年龄段对于产品的使用需求进行定制化,带给用户更加人性化的使用体验。

图片

 

六、定制化的播放页模式设计

不同用户对于产品的使用需求有所差异,固定的模式虽然可以减少产品的开发成本,但是单一的体验不够人性化。针对不同用户提供更多选择,可以带给用户更加人性化的体验。

MOO 音乐 APP 为了满足不同用户对于播放页的体验差异,设计了播放页模式定制化切换,用户可以选择以专辑封面或者背景大图进行展示。为了直观的方便用户做出选择,模式设计以可视化的图形展示,便于用户更快的做出选择。定制化的模式虽然把繁琐的事情留给了产品开发者,却把更好的体验带给了用户。

图片

 

七、缩放预览满足对细节的体验

随着短视频走进更多用户的视野中,短视频的形式也是越来越丰富,满足不同用户的使用体验至关重要。特别是图片形式引入短视频平台,对于细节的体验因人而异,缩放画面满足对于细节的体验才能更加人性化。

抖音 APP 无论是针对视频还是图片形式作品都可以缩放预览,配合缩放的手势交互带给用户放大细节查看的体验,满足了不同用户对于细节的需求。手势交互也是产品设计师需要多多探索的方向,更加便捷的操作有助于提升用户对于产品的使用体验。

图片

 

八、满足用户好奇心的设计

用户从小白到依赖是一个逐步探索的过程,好奇心的用户会点击尝试任何的功能,甚至连一个图标或者 LOGO 都希望获得彩蛋。作为设计师来说设计出来的每一个元素都需要考虑用户体验,给予反馈式的设计才能满足好奇心的驱使。

爱奇艺 APP 首页左上角的 LOGO 展示你有注意到吗?有没有尝试去点击体验,作为好奇心驱使特意尝试了一下。点击之后会跳转到皮肤等设置的页面,为该功能的曝光新增了首页入口,用户也可以通过个人中心“装扮”进行设置。该设计解决方案不仅满足了用户点击的好奇心,也赋予了 LOGO 展示功能化的作用。

图片

 

九、可以标记和叠加的点赞设计

点赞设计在众多产品中均有体现,这是用户表达对于内容的喜欢,以此来增加作者和用户之间的互动性。为了吸引用户点击和带来差异化的体验,点赞设计也被脑洞大开,在表情化、叠加点赞、点赞标记、微动效等方向不断探索。

小宇宙 APP 在播放页中对音频进行点赞时,可以多次叠加点赞,点击之后会针对音频播放进度条进行点赞标记,反复点击也会使得进度条纹增高,以此来强化点赞的程度。该设计解决方案不仅丰富了点赞的设计,也能通过标记和进度条纹的高度让用户记住关键的部分,方便后续回顾的时候知道哪些时间段是重要内容,提高用户对于产品的使用体验。

图片

 

十、差异化的短视频推荐设计

作为新闻资讯类产品来说,大部分用户的习惯还是图文结合的阅读形式,不过随着短视频的出现,改变了一部分用户的阅读习惯。通过短视频获取新闻资讯、搜索指定内容、学习生活技巧或者专业技巧等均可实现,改变了用户的阅读习惯和获取内容的形式。

央视新闻 APP 作为新闻资讯类的专业平台,在满足用户阅读新闻的同时,也跟进了短视频观看新闻的体验。在底部标签栏以舵式导航的形式作为短视频新闻入口,点击之后会有推荐视频展示,差异化的推荐设计不仅提高了内容的曝光度,也吸引了用户的关注度。

图片

 

小结

本期为大家总结了提高用户体验的十个优秀设计解决方案,体验、分析、总结是为了掌握别人的设计经验,积累设计灵感并运用到项目设计中。灵感的积累离不开总结,探索细微之处的差异化对于 UX 设计师而言至关重要。

本期分享到此结束,仅为个人角度的体验总结,希望可以带给大家更多灵感启发。

 

 

原文地址:黑马家族(公众号)
 
作者:黑马青年
 
转载请注明:学UI网》提高用户体验的10个优秀案例

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

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

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

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

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

To B端界面设计要点

博博

To B端界面设计要点精彩分析,希望能帮到在B类产品项目中的你:)

写在前面

 

B端产品和C端产品作为两种很不一样的产品形态一直服务着广大的用户。它们各有各的作用,有很多B端产品还是一个非常庞大的系统工程,甚至有很多的公司就是专注于开发B端产品,我从业以来曾经参与过很多的(两位数)B端产品项目,有的是从0到1的开发,也有的是在原基础上更新优化,下面就从我个人的设计经验整理出一些观点。

 

什么是B端和C端产品


概念:B端面向商家和公司,组织;C端面向普通的大众用户; 

B端是指:business--泛指生意,商业,公司和组织; To B即是面向商家和公司,组织,是给专职专业的用户使用的产品,例如微信公众平台给制定的公众号持有人使用,某公司的指挥调度系统,某停车管理系统,以及相关的后台管理系统等。C端是指:consumer--消费者,顾客,用户,是指被设计为能给普通大众使用的产品;To C即是面向普通的老百姓用户,例如微博,QQ,微信,新闻客户端,淘宝等;

  

几乎男女老少都会使用的微信


面向专职岗位人员使用的后台管理系统


两者的不同点


C端产品追求极致的体验,;B端产品追求简约、高效的完成工作 

C端产品是为了满足用户某一主要的、固定 的核心需求,因此设计的目标是围绕着这个核心需求,简单直接解决用户的需求,追求的是极致的用户体验,因为对C端产品而言,产品不好用,体验不好,用户就流失了,也就没有盈利的可能了。

B端产品的目标是帮助用户把大量的复杂的工作,整理归纳,使得他们能高效便捷的完成工作,追求的是产品的简约实用,提高效率,能很好的处理工作,有时候为了达成业务目标,甚至不惜牺牲部分用户体验。


To B端界面的设计应该要重点注意什么


很多新手设计师在接到新的需求的时候会没有头绪,不知道如何开展工作,在不了解业务的前提下很多时候被产品牵着鼻子走。那么问题来了,是拿到产品给过来的原型之后就开始设计了吗?又或者没有原型只有一些简单的描述,又该如何开展呢。以下是我的几个建议


1,要了解业务

因为B类产品不同于C类产品,并不是大多数人日常都会很普及用到的,所以就需要设计师主动的去了解行业,了解业务需求,不同的行业有不同流程和规则,甚至是一些特殊的需求;启动用户群体调研和用户使用场景调研,有条件的可以开展用户问卷调研甚至面对面访谈,整理出用户的使用流程,调研后要求设计师自己能非常清楚这个产品的作用、用户人群、和在特定的使用场景下的使用目标、和不同情境下的操作流程等。

 

2,交互流程设计

B端产品往往包含了比较复杂的业务,那在复杂的业务背景下如何通过设计来提高用户的工作效率,这就对设计师有比较高的要求。在交互流程上要整理出一些操作路径,要考虑它们的层级关系,先后顺序,行业习惯等。通过操作体验给用户留下明确的印象,可以降低用户的学习成本,提高产品的易用性。

 

To B端界面的视觉设计


①、界面布局,分固定的和自适应的分辨率两种,一般来说自适应的布局比较适合操作和展示内容比较多的系统,固定的宽度的分辨率的布局一般多用1200px以适应适配更多低分辨率的显示器,现在的大屏幕设备非常普及了,很多系统转为以1400px的宽度来设计,至于用哪一种的布局要取决于产品的功能了。

界面布局视觉上的区分;当我们设计一个系统的主页到时候,B端产品通常会分为很多功能模块,即便产品经理会提供原型给UI设计师,他们有时候往往会在原型按照他们的想法来布局,这时候设计师需要主动地去了解业务去弄清楚各个模块的主次之分。通过调研后,整理归类任务模块,按照业务流程和规则来区分模块优先级。(图例)

②、颜色,B端系统的界面颜色也非常考究,按照系统的功能特性来定,一般常规的系统界面都是以白色底色配以一种主色调的颜色来搭配的;第二深色的底色界面,深色界面能起到一种很好的衬托界面内容(如大量文字,数据,图形,视频等)的作用,深色界面再附以一些点线面和光的元素就能营造出一种炫酷的科技感。三是现在流行渐变色,渐变色和纯色会给人一种缤纷,轻松愉悦,有活力的年轻的感觉,所以大家在设计不同的B端系统界面的时候要考虑产品的功能性质来选择用颜色。

③、导航,导航可以解决用户在访问页面时:在哪里,去哪里,怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。一:侧栏导航:可将导航栏固定在左侧,提高导航可见性,方便页面之间切换;顶部可放置常用工具,如搜索条、帮助按钮、通知按钮等。适用于复杂的、功能多的中后台的管理型、工具型网站。二:顶部导航,顺应了从上至下的正常浏览顺序,方便浏览信息;顶部宽度限制了导航的数量和文本长度

④、按钮,通常B端产品分为较多的功能模块,也对应有很多不同的按钮,在设计按钮的时候,我们第一要分清楚哪些按钮对应哪些功能,在设计上要做出区分。

⑤、表格,表格的设计遵循简洁和易读性为主,表里面的文字内容是主要的设计重点,例如信息层次的明确、对齐的原则等。


⑥、弹窗,不仅有操作反馈的作用,同时又是一个承载更多的操作功能的容器,弹窗的设计要有规范性,组件化。


视觉设计方面除了常规的设计流程,我想说的是综合考虑和相关的系统衔接,体验的一致,视觉风格的统一和品牌的建设。

 

设计师还能做些什么


虽然设计师和产品经理以及开发已经沟通过相关的业务需求,但设计师一定要懂得切换角度来看待问题,一方面设计师的视角相对注重视觉上和交互上的设计细节;第二我们也要懂得站在开发和产品的角度考虑,哪些效果能不能实现,也是需要我们和开发同事密切配合的;另一方面要更加注重代入用户的角度来思考,这样才能做出合理适用的设计,甚至能挖掘新的需求,提出一些很好的建议,给产品和项目带来加分和利好。


总结


因为B端产品业务需求,用户目标,使用场景和用户群体都不相同,所以设计师接到B端产品的设计需求时一定要先了解清楚业务,做好前期调研,其次要多站在用户的角度来看待和设计产品。其实C端和B端产品,它们都要求要简单实用和有效准确,都是为了更好的满足用户的需求,解决用户的痛点。做好了以上这些关键点,无论遇到多么复杂的B端产品,我相信所有问题都会迎刃而解。


文章来源:站酷   作者:chrisHCZ


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

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

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

没想到用上圆形后,设计感瞬间强了很多!

lanlanwork


1.圆的线性语言

图片

线性圆形,它的粗细可自由变化,根据当前设计语言的风格调性特征决定的。线性圆形的作用绝大部分都是装饰,丰富画面视觉感官,它们大多情况下都是以单色或者黑白灰出现。

图片

如果我们把上图的圆形线条去掉,设计感自然就弱几分。当然如果非要去掉也不会影响阅读,有了圆形形式感自然增强许多。

图片

LOGO符号应用,变为粗线条

图片

UI界面中应用圆形

 

2.圆形的渐变语言

渐变圆形基本都是以粗块面为主,它可以呈现出丰富细腻的质感、厚度、虚实变化的光影。

图片

Sedigas

 

西班牙天然气协会Sedigas的品牌LOGO更新,通过圆形设计语言提取,在多场景下贯穿圆形的应用。

Sedigas(可点击图片查看视频或 点击Sedigas查看原文中内视频)

 

在品牌视觉语言动态介绍过程中,我们可以看到圆形的应用和丰富的变化,圆形与物理世界万物连接。

来看看其他案例

图片

图片

 

3.圆形面的特征

当圆形以块面的姿态出现时,它更随和,更加温润。块面的圆形和线性的不一样,块面圆形更加厚实,整体性,更聚焦。大部分情况下作为背景或者承载内容的容器。

图片

UI界面中,有时候圆形也可作为功能承载,操作区域更直观可视化。

图片

当以时装饰元素使用, 圆形一般都会用作强调一些重要信息,同时也增加设计形式感,张力,可玩性。

图片

图片

图片

 

4.圆形参数化特征

参数化圆形,它简单纯粹,以一种单一形态不断重复几个甚至几十个上百个的相同的形态,这些重复出现的圆形,大部分都是以装饰视觉效果呈现。

图片

我们可以看到大部分圆形以线性姿态不断重复,而且重复中带有规律可循,比如朝着某个方向拓展开,这个方向可以是斜方向、水平或者垂直。

图片

以同心圆的方式向外计算扩散开。

图片

图片

图片

 

5.圆形的肌理

上面我们讲到了圆的线,块面圆、参数化形态和渐变特征,那么在最后这个模块,我们可以看到圆形还有一种特殊的存在,那就是肌理,这里说的肌理不是贴图的那种材质,而是通过几何演变来实现的,比如通过多条线的组合而形成,下面来看看。

图片

上图的圆形,由多个长条几何形状不断重复形成,这些重复几何条状物就形成了一个大圆形的肌理视觉特征。

图片

右上角圆形线性阵列,通过重复小短线条而形成,在一些特殊场景下,这种阵列圆形图还可以用来打造视觉记忆点或者品牌DNA序列。

图片

图片

圆形应用远远不止这些,比如还有立体、真实物理质感,还有多形态、空间感营造等等。

 

今天列举出来的这5种形态是我们设计中常用,不过在使用时候还是需要依据产品视觉调性合理应用,形式要追随功能。

原文地址:友设青年(公众号)

转载请注明:学UI网》没想到用上圆形后,设计感瞬间强了很多!

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

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

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

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

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


设计效率工具趋势 | 综述篇

lanlanwork


一、日常积累

设计师日常除了应对当下的需求,每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法,也可以让我们潜移默化中得到提升。

Panda|全而美的设计订阅平台

图片

Panda帮助设计师不错过每天的设计灵感和资讯,包括新的设计方法理念、流行潮流、也有一些新产品推出。我们可以把Panda替换Chrome主页,每次打开浏览器页面都可以随时看到最新的设计资讯。一些英文的订阅也可以用chrome浏览器的翻译功能可以粗略查看。

地址:https://app.usepanda.com/#

 

Topys|创意内容平台

图片

全球顶尖创意内容平台,作为中国成立最早、最受欢迎的创意垂直网站,以 “Open Your Mind” 为宗旨,始终专注在全球创意、艺术、灵感、人文领域寻找最有质感的声音。

地址:https://www.topys.cn

 

Voicer|分享生活和设计的美学

图片

我们总在生活中与「一瞬间的感动」相遇。Voicer的理念即是发现这「感动」, 将它传递给更多热爱生活的人们。内容包括创意内容品牌、在线杂志等。致力于分享生活和设计之美。

地址:https://www.voicer.me

 

Design better|优质设计读物网站

 

涵盖设计商业思维、产品设计原则、设计系统等关于推动设计团队前进的实践读物,同时提供PDF和有声格式。

地址:https://www.designbetter.co

 

二、研究分析

设计师在调研过程会研究用户、记录用户的行为和需求,会使用一些高效的记录工具。同时繁多的调研的信息需要汇总整理,协作整理,这里会推荐一些记录和整理的工具给大家。

Noted|录音笔记好工具

图片

Noted 是一款将录音和笔记相机相结合的软件。我们做访谈用户或做会议纪要的时候,经常错过记录的内容,如果通过一些软件录音的话,后期回听需要比较多时间成本。Noted可以在记录笔记的同时记录输入文字的时间点所对应的录音,输入的每个字的时间点都会对应到。当内容没记录下来时可以随时跳到对应时间的录音进行回听,方便在漫长的录音文件中快速检索。

 

Marginnote|文献收集箱

图片

重塑学习方式的阅读笔记工具,更加高效阅读书籍和学习,可以在阅读时摘录笔记,制作学习卡,提取关键词,根据笔记生成思维导图,梳理知识框架。非常适合阅读专业书籍,阅读论文以及复习。

地址:https://www.marginnote.com/chinese/home

 

GoodNotes|手写笔记

图片

一款功能强大的手写笔记软件,拥有多种笔记封面和纸张模板可以选择,支持自定义模板,可以简单处理图片,可以导入pdf、ppt等文稿并做标记,也适合做电子手账。

地址:https://www.goodnotes.com/zh-cn

 

腾讯文档|在线协作

图片

调研阶段方便多人一起搜集资料和汇总,多人同时在线编辑,内容实时同步。随时随地高效协作,轻松创作。

地址:https://docs.qq.com/home

 

Xmind|思维导图

图片

功能强大的思维导图软件,极简设计,流畅体验,多种结构图风格选择,方便资料的汇集和思路的整理。

地址:https://www.xmind.cn

 

三、设计创作

当设计目标确定时,接下来进行具体的创意设计。设计师除了通过脑暴进行发散方案以外,一些高效的设计工具可以让我们事半工倍。

3.1 灵感搜集

Collect UI|界面灵感

图片

UI设计灵感库,基于dribbble平台精心挑选优质内容,提高效率便捷,为设计师提供专项更好的灵感。同时支持邮件订阅推送。

地址:https://collectui.com

 

Adobe Color|配色灵感

图片

Adobe color不仅从各个维度解决了我们的配色需求,同时也提供找图需求。其中包含 9 种智能调色模式可以选择。拾取主题色、拾取图片中的渐变色、协助工具可以合理帮助检查不同颜色的对比、探索behance趋势。

地址:https://color.adobe.com/zh/create

 

Useanimations|图标动效灵感

图片

图标动态效果库,当绘制的图标需要一些巧妙的微动态效果时可以参考。

地址:https://useanimations.com/index.html

 

3.2 设计打磨

FigmaEX|插件可视化

图片

当插件特别多时候,FigmaEX极大的改善了Figma中使用插件的体验,将插件可视化。可以进行展开,同时显示插件的名称与图标。可以通过拖拽调整插件的顺序,调节高度。

 

Autoflow|流程图插件

图片

输出交互设计稿的时候,方便快捷的在不同画板之间连线,提升输出效率。

地址:https://www.figma.com/community/plugin/733902567457592893/Autoflow

 

Skewdat|倾斜插

图片

这是一个非常简单实用的 Figma 插件,它可以帮你将任何形状元素倾斜过来。

地址:https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio

 

Undraw|插画素材

图片

最棒最全的插画库,支持快速搜索,一键调整颜色。

地址:https://undraw.co/illustrations

 

Magic Eraser|轻松移除杂物

图片

一款免费的在线服务,它通过 AI 自动去除图片中不需要的部分,只需要上传图片,等待几秒钟即可。用鼠标把不要的部分划掉,松开鼠标就会闪几下,被划掉的部分就消失了,比如去水印之类的小东西,如果用 PS 的图章,估计要十来分钟,而用 Magic Eraser 就几秒钟,简单易用,推荐使用。

地址:https://www.magiceraser.io

 

3.3 设计验证

Checklist Design|设计清单

图片

设计输出后可以通过这个清单去做最后的检查。网站列举了一些通用场景(页面、元素、流程、主题、品牌)下的基本设计要素。可以检查你的设计在这些场景下是否符合规范。样式、颜色、命名、易用性等是否合适。

地址:https://www.checklist.design/?ref=prototyprio

 

四、测试评估

好的方案不是一蹴而就的,设计方案需要不断的打磨和迭代。方案需要持续和用户进行沟通和测试,才能得到完善的方案。也需要和开发工程师不断沟通,以达到最佳的实现效果。

4.1 用户测试

腾讯文档|在线收集表

图片

用户测试阶段方便高效的收集用户反馈,一般用于定量的用户测试。

地址:https://docs.qq.com/

 

Hawkeye|眼动追踪工具

图片

一般的眼动跟踪设备比较昂贵,使用繁琐。这个名为鹰眼的眼动追踪APP,可以通过手机前置摄像头捕捉用户在使用产品时的视觉动向。

地址:https://www.usehawkeye.com/?ref=prototyprio

 

4.2 评估还原

CoDesign|腾讯自研设计协作平台

图片

覆盖产品经理、设计师、工程师协作需求。设计交付更轻松,有效管理和使用设计资产。

地址:https://codesign.qq.com/

 

Pixel Eye|高效视觉还原

图片

在项目上线前设计师都会对最终的产品实现效果进行走查,以保证设计还原的准确性,体验的流畅性。这是一款视觉还原工具,帮助前端工程师在页面重构阶段就能快速发现开发稿与视觉稿的差异,实时对比、实时修改,减少工程师与设计师的沟通成本,提升整体开发效率。

地址:pixeleye.暂未对外开放敬请期待

 

五、对外宣传

设计完成后汇报展示、产品的宣传包装等,提供更便捷优秀的展示形式。

5.1 效果展示

Mockup World

图片

样机的类型全面而且免费,综合质量很高。

地址:https://www.mockupworld.co

 

ls.graphics

图片

素材非常优质精美,有免费和付费的资源。

地址:https://www.ls.graphics/#UI

 

5.2 在线作品集制作

Adobe Portfolio

图片

主要面向设计师群体,帮助设计师建立个人在线作品集。几分钟就可以建好一个作品集网站,提供精美模板选择。最大的特点是易于操作,无需懂网页程式,都能在建立一个网站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收费。已订阅用户可免费使用。

地址:https://portfolio.adobe.com/start

 

Portfoliobox

图片

针对设计师或者创意人员的作品展示工具,可以直接在网页浏览器中搭建属于你的作品展示平台。

地址:https://www.portfoliobox.net/cn/

 

结语

此综述篇大家有了比较整体的了解,在设计流程中每个环节,介绍了一些比较好用的工具,后续的设计工具系列文章会针对某一环节进行更深入的探索。

图片

感谢阅读,以上文章由腾讯ISUX团队创作,版权归腾讯ISUX所有,转载请注明出处,违者必究,谢谢您的合作。 

 

原文地址:腾讯ISUX

作者:ISUX设计

转载请注明:学UI网》设计效率工具趋势 | 综述篇

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

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

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

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

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



B端产品-StreamLake-RTC

lanlanwork



(本作品所有数据均为Demo演示,非真实数据,知识产权属快手所有,未经许可不得转载)

(本作品所有数据均为Demo演示,非真实数据,知识产权属快手所有,未经许可不得转载)

 

原文地址:站酷
作者:三鱼先生

转载请注明:学UI网》B端产品-StreamLake-RTC

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

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

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

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

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



B端产品-BI分析工具

lanlanwork


(本作品所有数据均已脱敏,非真实数据,知识产权属快手所有,未经许可不得转载)

(本作品所有数据均已脱敏,非真实数据,知识产权属快手所有,未经许可不得转载)

 

原文地址:站酷
作者:三鱼先生

转载请注明:学UI网》B端产品-BI分析工具

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

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

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

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

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


8个AI技能给你的LOGO加BUFF!

lanlanwork


 

图片

像这样的梦幻色彩的 LOGO 是怎么做出来的?其实非常非常简单,它的制作方法,没有任何感情全靠 AI 技能。能够熟练掌握 AI 工具对我们做 LOGO 的效率也会有大步的提升。今天我们就来分析一下如何借助 AI 的工具技能来设计 LOGO。

 

图片

我们都知道 PS 的图层混合模式有使当前图层图像的色彩与下层图像的色彩进行混合的效果。很多同学不知道其实 AI 也有这个功能。在(窗口——透明度)里面就可以找到。

图片

那现在我们就来分析一下这个 LOGO 是如何使用渐变的混合模式完成的。

首先仔细观察这个 LOGO 由哪些元素组成。是由几个小房子形状的几何图形,以不同透明度的渐变色彩叠压组成。其中的重点是色块叠压处的色彩是混合而成。

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析AI技法 

 

第一步:先绘制出一个小房子形状,使用倾斜工具做出透视效果。

图片

第二步:打开效果——扭曲和变换——变换,调整数值。

图片

到这里图形就绘制完了,可以开始上色了。

第三步:先把图形取消编组,给图形填充渐变色后调整透明度为 50%。将混合模式调整为正片叠底。(下图展示的导出的渐变色图片失真了,实际上是很丝滑的颜色)

图片

第四步:因为红色与蓝色叠加的关系,导致图形的中间有些暗,我们可以给图形添加一个高光。绘制一个圆形执行高斯模糊,将混合模式改为滤色,调整透明度让高光更通透。

图片

最后,再加上排版就完成啦。

图片

看到这里是不是就明白了梦幻色彩是怎么做出来的了。其实就是不同颜色的渐变色块的混合叠加。再按照物体的身体结构叠加上高光和阴影就可以了。是不是很简单。

 

 

 

图片

图片

第一步:将图形分成块面。注意需要按照动物的生长结构去划分 ,块面的大小不要相差太大,不然会形成特别空的面。

图片

第二步:将每个块面填充渐变色,渐变色需要设置为混合模式。具体使用哪种混合模式需要按照混合模式的规律进行调整。块面与块面相交处还需要注意衔接自然,可以通过调整渐变的角度和透明度的方式进行过渡。

图片

第三步:给色块添加多彩渐变形成亮面和高光。如果一层不够就多添加几层,一直到色彩多变又整体协调。

图片

第四步:给色块添加阴影和暗面,让图形的色彩更通透。注意色彩混合模式需要调整,具体选择哪个模式由底色和新色块叠加后的效果决定。可以多个尝试模式对比,最终选择一个更合适的模式。

图片

最后,把比较空的面填充一些细节,既填补了的空间又有一种动物毛发的感觉。再画出眼睛就完成啦。

图片

说起来不难,做的时候还是有点麻烦的,几乎每个色块都叠加了五六层渐变。最后看一下渐变叠加的动图,可能会更直观一些。

图片

 

 

图片

有时候做完图形却觉得缺少细节,这时候可以通过渐变效果塑造出 LOGO 的层次感。通过渐变色彩明暗的变化和角度的调整,可以将图形刻画出立体感,也可以通过多层渐变叠加的方式,刻画出图形的高光和阴影。

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法 

 

接下来我们来解析一下这个 LOGO 是怎么做出来的。看上去是一靶心一样,但是其实非常简单,只需要将其中四分之一做出来旋转复制一圈就可以了。

图片

图片

首先绘制出四个圆形和十字交叉线,这样就切出两个圆形的基本形。但是观察图形是有尖角的。所以再延着竖线绘制出几个圆形,特别需要注意的是线与线之间必须相切,这样就可以切出尖角了。

图片

最后再旋转复制一圈就可以了。

图片

接下来我们再看一下这个案例,相对于上面那个会更复杂一点,除了普通渐变还使用渐变刻画出高光和阴影效果。

图片

最后将背景改为黑色效果更突出,再加上排版就完成了。

 

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

首先绘制一个三角形,拉出圆角。再画一个圆形与三角形居中对齐。

图片

打开(窗口—效果—变形—下孤形)这样就得到了一个有弧度的边。然后扩展图形我们将上面半截裁掉,只保留下面的图形。

图片

以中间的圆形为轴心,将得到的图形旋转 120 度复制一圈。调整位置后合并图形,这样就得到了一个带有弧度的三角形。

图片

在得到的三角形上绘制一条曲线,分割出一个图形,将得到的图形旋转 120 度复制三份。再使用形状生成器进行剪切合并。这样基础图形就完成了。

[优化输出图像]

 

接下来为三个图形分别填充不同的渐变色。再绘制出阴影和高光增加层次感。

图片

 

绘制阴影,将阴影填充黑色,调整透明度为 50%。绘制好一个之后旋转复制 2 份就可以了。

[优化输出图像]

 

高光填充白色到透明的渐变,混合模式调整为叠加。同样也只需绘制一份,之后复制即可。

[优化输出图像]

这样就完成了,普通的图形加上渐变色后变得更有层次感了。

图片

 

 

 

图片

AI2022 对 3D 功能进行了升级,可以轻松地将 3D 效果(例如旋转、绕转、凸出、光照和阴影)应用到矢量图稿 ,接下来我们就来解析如何使用 3D 效果设计出更有立体感的 LOGO。

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

这个图形虽然是喷泉的形态,但是拨开多余的线条我们可以清楚的看出基础形其实是一个甜甜圈。甜甜圈的横切面是一个圆形,由此可以得出第一步需要先画一个圆形。再使用 3D 绕转功能即可得到甜甜圈了。

图片

执行 3D 绕转后调整数值 ,注意调整位移的数值来调整厚度。当然位移的数值由基础图形的大小决定。

 

图片

之后需要绘制出一排黑白相间的线条,并新建为符号。PS:把所有线条选中,直接拖入符号面板就可以新建符号了。新建为符号后就可以作为贴图使用了。

图片

继续打开 3D 绕转的面板,点击贴图按钮,在符号处选择刚才新建的符号,为每一个面贴图,选完贴图以后需要勾选(缩放以合适)和(三维模型不可见),这样线条才能完全覆盖圆环。

图片

 

 

这样 3D 绕转加贴图形就完了,然后再将图形扩展。扩展后就可以随意调整线条了。将线条延长并且调整长度,做出参差不齐的效果模仿水流的状态,然后将延长的图形拉出圆角就可以了。

图片

最后调整一下细节,再给图形加上排版就完成了

图片

图片

上一个案例使用了 3D 绕转功能,接下来这个案例就使用了 3D(经典)里面的另一个功能,3D——凸出和斜角。

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析AI技法

首先打出字母,当然做这种类型的 LOGO 时候对字母的选择有一定的限制 。需要选择两个字母可以连接不突兀的才行。比如这两个 E 就可以完全的链接在一起。打好字母后将 E 字母适当变形,再复制一组线条,作为中间的连接线。将三组图形分别新建为符号(前面讲解过怎么新建符号,这里就不重复了)。

图片

接下来绘制路径,作为横切面。然后打开效果——3D(经典)——凸出和斜角。打开预览,调整数值和角度。

图片

图片

再打开贴图,选择刚才新建的符号,把图形的每个面贴上对应的符号。可以先选择缩放以适合,再根据实际预览效果进行调整至最佳效果。

图片

最后将得到的图形进行扩展,取消编组后,为图形填充不同颜色增强图形的立体感。

图片

两个案例看下来,是不是已经掌握了 3D 工具的使用方法了。那么接下来我们举一反三,使用 3D 功能来做一个立体感的 LOGO。

 

 

图片

图片

第一步:肯定是先绘制出横切面,用线条绘制出字母 B 的轮廓,注意线条不需要闭合。

图片

 

第二步绘制黑白相间的条纹线条,拖入符号面板新建为符号备用。

 

第三步选中 B 字母的横切面,打开效果——3D(经典)——凸出和斜角。调整凸出厚度的数值还增加图形的立体厚度。调整角度让图形的视角更舒适。

图片

打开贴图选择刚才新建的条纹符号。在表面那里选择不同的面,都贴上条纹,选择缩放以适合。

图片

最后再在相交处绘制阴影增强立体感。这样就完成啦,新技能 get~

 

 

图片

第一次见这样的立体感 LOGO,还以为是 3D 软件做出来的。后来发现 AI 一样也可以完成。只需要用简单的网格就可以绘制出立体的效果。

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

 

第一步绘制出菱形网格。网格的绘制方法也非常简单,可以用线条建立,先画出一排竖线,然后旋转 120 度并复制,再重复复制就可以了。也可以使用等边三角形连续复制进行搭建。

图片

第二步使用形状生成器延着网格的方向合并图形,形成立体感的造型。两个格子组成一个正方形,再用一个一个的正方形组成想要的几何图形。

源图像

 

 

第三步将生成的图形提取出来。

图片

 

第四步为图形上色。上色的时候需要设定一个光源,根据光打过来的方向,设定每个面的颜色。通过每个方向的块面的深浅变化,强化图形的立体感。

图片

最后再加上排版就完成了,是不是超级简单。

图片

那么举一反三,我们也来尝试用 2.5D 网格绘制做一个 LOGO,第一步还是按照上面的方法绘制出 2.5D 网格

 

图片

图片

 

第二步延着网格的角度绘制出长方形,并拉出圆角。因为将字母几何化后,字母的形态是有两条竖边的,所以绘制出四个长方形为一组,方便后面合并修剪出字母结构。

Source image

 

 

第三步,按照字母的结构,先绘制出分割线条,注意线条与线条之间需要相切。因为之后需要使用形状生成器工具进行修剪。

Source image

 

 

第四步,使用形状生成器工具合并和剪切出字母的结构出来。

图片

第五步,将生成的字母,复制一份进行翻转。然后调整色彩,将字母做出立体感。

源图像

 

是不是很简单。除了这个 LOGO,还有很多种类型的 LOGO,都可以借助这样的菱形网格来完成。快去尝试吧!

图片

图片

AI2022 新增了一个重复功能。尤其是径向重复,简直太好用了。学会这个功能分分钟做出一个 LOGO。接下来我们就尝试使用重复工具做出下面这个 LOGO。

 

 

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

 

先绘制一个圆形一半,将描边模式改为尖角。复制出四个。

图片

打开对象——重复——径向。

图片

拖动按钮即可调整数量和距离。左边的按钮可以调整重复数量,中间的圆形按钮可以调整元素的距离,中间的另一个按钮可以调整重复的范围。另外双击进入隔离模式可以调整单元素的方向和形态,其它的元素也会随着单元素的变化产生实时变化。

源图像

 

 

 

得到想要的图形后,将其扩展,使用形状生成器进行修剪。最后再给图形填充颜色就完成了。

[优化输出图像]

 

 

最后配色再加上简单的排版就可以了!

图片

 

 

重复工具真的太好用了,尤其在做重复构成 LOGO 时会提供很大的便利。下面我们就尝试用这种方法来设计一个 LOGO。单元元素图形直接使用英文字母 O。

 

首先打出一个字母 O,我们将其进行简单变形。

图片

图片

打开对象——重复——径向,调整数量和单元素的角度,调整的过程中会得到很多意料之外的好看的重复图形。

图片

图片

 

 

最后再调整细节加上排版就是一个完整的 LOGO 了!

图片

图片

是不是有很多同学好奇像这样复杂又有规律的线条图形是怎么做出来的,其实也是非常简单。接下来我们就来分析一下如何简单快速地做出复杂的线条渐变图形。

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法

我们先看这个简单一点的线条渐变图形应该如何做。首先还是先分析解构图形,将它旋转 45 度后,将线条折分开,是由细、中、粗三种粗细不同的线条组合而成一个圆形。

图片

 

 

那么我们就先画出三种粗细不等的线条。

图片

再画出三个部分的外轮廓。

图片

将三个部分分别与刚才绘制的条纹进行剪切。使用形状生成器,按住 alt 健减掉不需要的部分即可。

图片

将得到的三个图形拼合在一起后,合并所有图形,再在相交处拉出圆角,增加细节同时也让图形之间更有整体感。

图片

最后将图形倾斜 45 度让图形更有张力,再加上排版就完成了。

图片

 

看完这个案例,是不是对线条在 LOGO 图形中的应用有了一定的认识,我们再来学习下面这种更复杂一些的应该如何做。

 

图片

图片

图形来源于网络,版权归原作者所有,本文借用分析 AI 技法 

 

首先将图形进拆解,可以看出这个图形看似复杂,其实是由两个线条组成的圆形重复构成。重复构成的图形我们只需要做出单元元素即可,那我们就先把单元元素提取出来。

图片

 

从提取的单元元素可以看出图形是由粗到细变化的线条组成的。从线条变化的角度是左右对称的。所以我们先绘制出对称变化的线条。

图片

 

绘制两个长条方形,将下面一根的一端转为尖角。使用混合工具混合出 6 条渐变的线条。再将图形整体复制一份进行垂直翻转。

图片

 

绘制一个圆形与刚才得到的图形进行剪切。使用形状生成器工具,按住 alt 键将不需要的部分修剪掉即可。

图片

 

将线条的右侧全部改为尖角,选中两个点——右击——平均——两者兼有,就可以转成尖角了。

图片

 

 

绘制一个小圆形,居中对齐。将图形与小圆形进行切割,将切割出的线条水平翻转。

图片

 

最后将得到的图形旋转 90 度,向下复制一份就完成了。

图片

 

图片

AI 的混合工具可以将两个形状或者颜色创建平滑的过渡,步数越多过渡也就过平滑。快捷健是 ctrl+alt+b。

 

图片

图片

首先我们来分解一下这个 LOGO 的图形,先抛开色彩,只看图形。

图片

我们可以看出这个图形的基础图形其实由两个三角形的混合而成。还需要注意的是,三角形的顶点需要设置为圆角。

图片

接下来我们将两个三角绘制出来,注意线条的粗细并且选择圆角的形式。

图片

将两个图形进行混合,注意按顺时针方向进行混合,图形会更饱满些。

是不是特别简单,那么快去举一反三,别光让眼睛学会了,也照顾照顾“手”,让它也学学。

最后看一下今天的案例汇总!

图片

好了,今天教程就到这里啦,我们下期见!

 

原文地址:胡晓波工作室(公众号)

作者:yoyo

转载请注明:学UI网》8个AI技能给你的LOGO加BUFF

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

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

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

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

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


10个优秀的UI/UX设计技巧

lanlanwork


一、利用手势辅助实现快捷操作

利用手势交互辅助隐藏式功能操作,可以在不改变当前结构的基础上实现快捷操作,带给用户更加便捷化的体验。

夸克 APP 在访问了多层级页面之后,如果想要快速回到浏览器主页,点击返回按钮一级一级返回过于繁琐。通过底部导航栏向上进行滑动,可以快速激活返回主页的操作,手势辅助实现自动跳转。该设计解决方案通过手势辅助隐藏功能操作,提高了用户对于产品的使用体验。

图片

图片

    

二、点赞设计的情感化探索

点赞在阅读类场景中随处可见,用于表达用户对内容的认可度而产生的情感共鸣,通过点赞给予赞同。点赞设计的创新已逐步在探索,通过更加情感化的设计表达提高用户体验,借助手势的变化呈现出更有趣味性的点赞设计。

今日头条 APP 单击点赞图标会随机性弹出表情化符号,多次点击会持续弹出更为丰富密集的表情符号,长按则会像模拟持续发射的特效,伴随着音效和震动带来“视听触”等多重体验。点赞设计的情感化探索不仅带给用户多重感官体验,也是用户释放阅读压力的一种情感共鸣。

图片 
 

三、情感化的点赞文案设计

除了从点赞视觉感官层面进行设计探索以外,众多产品也在文案提示设计上面进行情感化探索。

AcFun APP 在对话题等内容点赞时,会弹出温馨的文案提示,每次点赞都会出现不同的文案。情感化的文案设计提高了话题互动的活跃度,带给用户更好的社交互动体验。

图片 
 
 

四、突破常规的模式切换设计

设计都在探索差异化的感官表达,如何突破常规至关重要。无论是在布局结构层面还是元素情感化表达层面,设计师都在尝试更有创新的表达,带给用户不一样的使用体验。

Wonder APP 在模式切换上做出了一个新颖的设计解决方案,通过环形卡片设计进行模式切换,可以单击和滑动进行切换。动态的卡通形象增加了感官体验,流畅的卡片切换也带来了不错的操作体验,是一个在布局层、视觉感官层、互动层等方面的不错探索。

图片

[优化输出图像]

 

 

五、特色的签到展示设计

签到设计对于大家来说并不陌生,提高用户签到的参与度是大家都在不断思考和探索的方向。

AcFun APP 将签到设计成日历展示形式,点击签到之后弹出,配合日历运势的概念来设计,提高用户的签到兴趣。内容却不是正式的日历运势相关内容,配合趣味化的文案设计,让用户会心一笑。视觉感和情感化文案设计的融入,提高了签到设计的感官体验,进而提高用户的参与度。

图片 
 

六、自定义字号提高阅读体验

通过公众号等自媒体进行阅读已经成为大家的习惯,不同公众号编辑内容都会有所不同,字体大小和行间距等没有特定的规范。官方虽然会有默认设置,但是无法兼顾不同的内容需求。提高小编的编辑体验和满足用户的阅读体验,自定义的阅读调整至关重要。

在公众号阅读文章时,可以通过右上角的功能入口进入“调整字体”。用户可以根据自己的阅读习惯设置字体大小,在标准和自定义大小之间切换,提高用户的阅读体验。

图片 
 

七、自选色实现更灵活的个性换肤

个性化的皮肤主题在众多产品中已经运用普遍,当用户体量增加之后,个性化的设置才能满足不同用户的体验需求。

酷我音乐 APP 在个性换肤模块中,除了设置多个主题皮肤供选择以外,用户还可以通过自选色设置更加灵活的配色风格。可以选择更多推荐的配色风格,也可以通过色环自己调节任意颜色,满足不同用户对于感官体验的需求。

图片 
 

八、自定义图满足用户的创作欲

对于一些追寻个性化较强的用户,预装的自定义设计已经无法满足他们的体验需求,激发用户创作欲的设计迎面而来。

酷我音乐 APP 在个性换肤模块中,用户可以通过“自定义图”实现更加个性化的皮肤。用户可以选择任意拍摄的照片,然后通过透明度和模糊度来调节照片效果,满足自己对背景效果的要求。针对按钮的颜色也提供了几个配色选择,用户可以根据自己调节后的背景效果进行搭配。基于更加个性化的需求满足用户的创作欲,才能带给用户更加人性化的使用体验。

图片 
 

九、关联功能叠加设计提高使用率

为了提高功能的曝光度,直接展示在用户的视野中是很多设计师的处理形式,但是却增加了感官层面的视觉负担。

幸识 APP 把关联功能进行合并式的叠加设计,不仅对视觉进行降噪,由于属于关联性的操作,用户更容易通过功能联想进行使用。当用户点击观看“时间戳”时,底部功能会被替换为“发起”,发起时间戳和观看本身就是一个流程的体验。当我们遇到关联性功能设计时,不一定选择各自展示,相互叠加或者切换式的交互设计也是不错的解决方案。

图片 
 

十、趣味性爆满的点赞设计

点赞是用户情绪化表达的关键,表示对于内容的认可度和作者的支持度。普通的点赞设计已经无法满足一些情绪爆满的用户,更加趣味夸张的设计在逐步被探索。

微博 APP 针对点赞设计单击时,出现表情化的符号弹出,持续点击或者长按点赞图标则会出现色彩丰富、表情符号四处爆发的视觉效果。一场趣味性爆满的视觉盛宴,满足用户释放情绪的最大化需求。

图片

源图像

 

小结

在用户使用体验和感官体验层面探索了这些优秀的案例,希望可以抛砖引玉,带给大家更多启发。发现设计背后的思路,总结设计表达的经验,运用优秀案例的技巧,提高我们的设计解决能力。

以上总结仅代表个人观点,如有不足欢迎大家留言补充,我们互相进步。

 
原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》10个优秀的UI/UX设计技巧

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

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

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

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

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


如何正确使用字体的重要性

lanlanwork


 

图片

 

 

我们不妨换个手写的文艺字体,通过对比,这时会发现适合的字体可以恰当表达出一张图片的风格。

源图像源图像

 

 

再拍一张照片,夜晚寂静的高架桥,符合氛围的主题、加上好的排版方式本是一件非常浪漫的事情,但如果字体不在一个频道里,就会破坏整个主题的氛围。

 

图片

我们不妨换个字体试试,通过对比,能看出字体在设计场景时的重要性。

源图像

 

 

 

 

一串文字,为什么通过排版设计出来还是不好看了,因为字体是一个非常细致的感受,当改变了字体形态之后,那种暗恋的感觉好像又回到了当初在校园同桌的她。

图片

图片

 

我们用英雄两个字来示例如何分析字形判断。

1、字形内部的空间和边缘体饰都偏版直方正,所以缺少个性,无法给人独特性的氛围表达,适合叙述性场景。

图片

 

2、字形内部宽厚,边缘体饰却带有微微尖角,上下故意的压扁,使着字体底盘很稳,给人一种力量和浑厚的感受。

图片

 

3、毛笔性字体,天生带有自由和挥洒豪气的特点,但是这类字体顿挫的边缘好像在告诉我们,它在克制自己的张力,适合做为主标题使用。

图片

 

 

4、同样的毛笔性字体,跟上一种就截然相反,它将字体的豪迈豪不隐藏的表现出来,能体现出一种情绪的特征化。

图片

 

在实际场景使用时,以下几种字体的使用就更能表达出恰当的字体在设计场景时是多么重要。

图片

 

 

最后再带来一个字体的实际案例

一个建筑放置于画面中间,两只手拖住物体,制造夸张对比的错视感。

图片

 

 

再将主题文案通过穿插的版式手法放置于物体周围,最后添加一些叙述信息填补版式的空缺,看起来排版没有太多问题,但仔细观察主体和场景的气质却没有被烘托起来。

图片

 

当我们改变字体的使用后,整体的气质立马显得庄严和宏伟,再通过对比我们发现,原来与好的设计之间,差距也只是一个字体的使用而已。

源图像

 

图片

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》如何正确使用字体的重要性

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

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

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

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

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


日历

链接

个人资料

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

存档