首页

UI设计如何提升高级感

seo达人


在互联网产品日趋成熟的今天,APP同质化越来越严重。


而一个设计精致APP不应漏过任何一个细节,美观、可用和高效的界面设计都需要花费大量的时间从细节上去打磨,并从多方面钻研并创造出打动人心的UI/UE设计。


在这里,小易为大家总结了10个简单直观的提升设计感的小细节,一起来看看吧~



1、文本颜色构建层次


文本单纯使用字体大小对比,强调的感觉往往不够浓烈,我们可以尝试结合色彩来营造更好的对比效果。


大图模式


通过使用颜色的深浅,为元素赋予不同的重要性,建立视觉上的层次结构。


大图模式


甚至可以采用两到三种颜色来获得对比效果:


主要内容使用深灰色(诸如标题,但是不要用纯黑);

次要内容使用灰色(比如商品介绍);

辅助性内容采用浅灰色(比如发布日期)


2、统一色调


设计时避免用过多的颜色,选择一种基础色,再调整色调和颜色深浅来增加均衡。


大图模式


如果项目允许,必须使用固定的色板,那么可以通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。


3、干净的阴影


阴影可以增加元素的深度,引起用户的注意力,同时也能增强画面的视觉层次感。


相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,轻柔的阴影会让画面更精致。


大图模式


如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,从而使设计变得不精致。


4、个性的图标设计


大多数App都是默认灰色,选中填充品牌色,这样的设计太普通,太常见了。


大图模式


要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,也会增加用户的体验感。


大图模式



5、Tab的设计感


Tab是App设计中最常见的控件之一,它源自Material Design的设计规范。


Tab的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态。


可正因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。


大图模式


例如虾米音乐的Tab选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的Tabs就被创造出来了。


6、统一设计元素


在App中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。


大图模式


通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。


7、符合产品气质的字体


选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。


虽然默认字体可以满足大多数App 的设计需求,但系统字体并没有什么特色,会丧失App的品类感。


大图模式


例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。


8、第三方图标风格统一


第三方图标也是UI设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计。


大图模式


一个设计精致的App不应漏过任何的细节,我们可以以自家App的图标风格为依据,对第三方图标进行优化设计。


9、图片中寻找色彩


App中优美的图文设计非常重要,能带给用户极佳的视觉享受。


我们经常看到文字叠加在图片背景上的设计样式,为了减少图片背景对文字的干扰,通常会叠加半透明度的黑色蒙版,让白色文字清晰可见,但这种设计过于俗套。


大图模式


我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。


10、卡片式设计


现在的UI界面设计中,卡片式设计已经是一种非常常见的设计形式。


大图模式

它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率。

文章来源:快资讯  作者:衍果设计

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

                                                            微信图片_20210513163802.png

 

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

 

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

ui设计背景元素设计技巧,提升用户停留率

seo达人


无论是设计网页还是海报,背景图片都是最常用、也最能体现当下设计趋势的一种设计元素。在设计APP 的时候同样是如此。过去的10年当中,用户的品味发生了不小的变化,而现在,整个设计趋势上,似乎正处在一个关键的转折点上。


在我们所能观察到的诸多设计当中,浅色的背景是当之无愧的主流。浅色背景本身就不太可能喧宾夺主,让视觉主体更加突出。而如今,我们逐渐发现,背景还具备补充主体的功能,并且这种补充是潜移默化的。背景的功能性其实还可以强化,这种思路可以在如今的APP 界面设计当中应用,让整体设计更加平衡。


如今的UI设计师大都明白在背景中融入元素来吸引用户的眼球,提升产品调性,提高内容的可读性。而这也促使图片、插画、色块等元素在背景当中发挥了更大的作用。



1、为创造戏剧感,使用色彩分割背景


分屏式设计并不新鲜,它是一个存在了很长时间的设计趋势了。在桌面端的屏幕上,分屏式设计一直都很有效,宽广的屏幕让设计师有足够的施展空间,但是在移动端上则是个挑战。

大图模式



在 UI 设计师们找到了解决方案,对比色是增加视觉吸引力的最佳方式。

在 Tubik Studio 的这个设计案例当中,设计师使用不均等分布的色块来分割屏幕,同时使用白色背景区块来承载主体内容,避免被背景色彩干扰。设计师充分利用了对比色的对抗性,以及和白色之间的对比度,功能完善,但是有趣又漂亮。



2、为营造氛围,在背景上叠加辅助性图形元素


虽然在背景图片中叠加各种图形化的元素听起来很奇怪,但是确实是逐渐流行起来的一种背景设计玩法。不过,这存在一种风险,就是如果叠加太多的图形化元素,会让整体看起来过于杂乱。尽量在丰富视觉和制造视觉污染之间找到平衡,最终的设计效果,能够给你带来意料之外的优质效果。


大图模式


虽然手机越来越大,但是屏幕空间依然很宝贵。通过叠加一些特定的图形元素来创造视觉深度,给用户以空间感。


这种背景设计的另外一个好处在于,你可以让整个UI显得更加富有视觉吸引力。在设计的时候,需要注意的是,要保持元素之间的一致性,确保不同的元素在屏幕上呈现的时候,仍然保持协调。



3、为保持整体感,使用整图作为背景


使用整张图片作为背景,一直被UI/UX领域的设计师所争论。对,你没看错,这个事情一直存在争议。有人非常喜欢使用图片背景,有人则完全无法接受这种呈现方式。


但是撇开个人喜好,趋势上,这种背景运用方式还是越来越流行了。在APP的UI界面中,如果你能灵活自由地使用全屏背景的化,对于接下来的设计肯定是有所助益的。


大图模式


图片所呈现的信息量当然是毋庸置疑的,更重要的是如何贴合品牌和氛围,呈现出应有的气场。

当然,最核心的技巧,是在于透明度的控制,和内容框的设计。为了避免信息和背景之间的对比度不足,合理的方法是使用内容框将前景的元素承载起来。而为了避免背景图片喧宾夺主,还可以借助透明度的控制,来确保背景图片更加平滑自然,不会影响到阅读和使用。



4、需要强化感受和情绪,使用渐变色背景


渐变色在几年前回归之后,在设计当中的运用范围越来越广。渐变色不仅赋予设计更加强烈的个性,而且能够和用户之间产生足够的情感共鸣。


你可以使用渐变色来营造调性,创造对比,甚至还可以借助渐变色才来作为视觉线索和引导。比如当你在背景中使用蓝色的时候,可以通过深浅渐变来创造方向性,引导用户向特定的地方浏览。


大图模式


但是,渐变色背景流行起来最重要的原因还是它的情感共鸣的能力。许多 UI 设计师已经意识到心理因素在移动端设备中的巨大影响,能否唤醒用户的情感是关键。


渐变色背景的设计玩法有很多,变化幅度的大小,方向,对比度和亮度的变化差异,都会带来不同的影响。当然,渐变背景同样必须遵循一个原则,那就不能喧宾夺主。在设计的时候,同样可以借助透明度的调整,来降低它和CTA按钮之间的对比度。


5、为了强化故事性,使用插画背景


插画师可以根据需求更加自由地绘制足以满足不同需求的插画,独特,个性,定制化。不过,想要创建足以代表企业、团队、产品或者用户角色的插画,并不能凭空创建,而是需要一个研究过程,通过调研和分析,才能提出需求,再做执行。它是一个机器人,还是一个更加拟真的角色?又或者使用动物拟人化的形象更合适?


大图模式


许多设计师更加倾向于在APP中使用自定义插画,因为这样更加自由轻松地达成各种目标,从新用户引导,到提供教程。



6、基础但通用,使用几何图形来构建背景


几何图形本身是非常基础的元素,它们的含义和感觉非常基础,也具有普世性。虽然它们很简单,但是在UI 设计中非常强大。单一的几何形状是简单的,但是结合不同的效果、不同的组合,即使使用简单的几何形状,也能够发挥出多样的变化。


大图模式


当然,具体怎么运用几何图形,还要看你的UI界面上,有哪些东西,作为背景的几何图形和 UI 中的主体元素之间,空间关系要怎么控制,怎样保持优雅简洁,确保品牌信息的传达。


结语


就像 UI 界面中其他的元素一样,背景同样值得关注和规划。最重要的是,你想表达什么,传达什么样的信息,想借助整个UI 界面来实现什么样的功能,规划好了才能更好地呈现内容。


背景的选取之所以会成为UI设计趋势的关注点,很大程度是因为UI 和UX 设计的关注点开始越来也深入到设计的方方面面,大家考虑问题也需要越来越细致。

文章来源:快资讯 作者:衍果设计

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

                                                            微信图片_20210513163802.png

 

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

 

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

优秀网站设计赏析+美图分享

前端达人

很多网站仍然在使用老旧的页面设计,比如国内一些企业官网,万年不变的相类似的模板,外国的则是hero页面,带CTA按钮,三栏式的布局。这些设计不能说是不好的设计,很实用,用户能够预测展示的内容,也容易找到需要的内容。但是正因为可预测,用户没有新鲜感,没有期待,所以我们找了一些不仅打破常规,也依然有良好用户体验的网页设计。

蓝蓝设计(北京兰亭妙微科技有限公司)是一家专注而深入的UI设计公司,公司对UI设计的追求一向很高,致力于为卓越的国内外企业提供卓越的手机app/安卓ui设计、软件界面设计、网站设计,用户研究、交互设计服务。

接下来是精彩的UI设计赏析


WechatIMG1899.jpegWechatIMG1900.jpegWechatIMG1901.jpegWechatIMG1902.jpegWechatIMG1903.jpegWechatIMG1904.jpegWechatIMG1905.jpegWechatIMG1912.jpegWechatIMG1911.jpegWechatIMG1910.jpegWechatIMG1909.jpegWechatIMG1908.jpegWechatIMG1907.jpegWechatIMG1906.jpegWechatIMG1913.jpeg



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

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



十个UI设计小套路

seo达人

十个UI设计小套路


前两天一个从事UI设计的朋友问了我一个这样的问题:我从事UI设计一年多, UI设计上的一些基本知识差不多已经掌握,但是想更进一步的提升下自己,让自己的作品更加有优秀,但不知道从哪里入手?胡老师有没有什么好的建议。今天给大家分享十个UI设计套路!

1 尽量使用单列而不是多列布局

单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮。



2 放出礼品往往更具诱惑力

给用户一份精美小礼品这样的友好举动再好不过了。具体来讲,送出礼品也是之有效的获得客户忠诚度的战术,这是建立在人们互惠准则上的。而这样做所带来的好处也是显而易见的,会让你在往后的活动进展(不管是推销,产品更新还是再次搞活动)中更加顺利。



3 合并重复的功能而使界面简洁

在整个产品开发期间我们会有意无意地创建很多模块,版面或者元素,而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块,它无用且降低了电脑性能。此外,界面上模块越多,用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。

4 客户的评价好过自吹自擂

在获得项目机会或提高项目转化率时客户的好评是一种极为有效的手段。当潜在客户看到其他人对你的服务给予好评时,项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。



5 频繁展示你的主旨来加深印象

多次重复主旨口号这种方法适用于界面很长或者分页的情况。首先你肯定不想满屏刷出相同的信息,这样会让人生厌。但当页面足够长的时候这些重复就显示自然多了并且也不显得拥挤。所在在页面顶部放一个按钮然后在页面底部再适当放个突出的按钮的做法没有什么不妥。这样当用户到达页面底部在思考接下来该做什么的时候,你提供的按钮就可以获得一个潜在的合同或者即使用户不需要你的服务这个按钮也可以起到过滤的作用。



6 将选项与按钮区分开来

诸如颜色,层次及模块间的对比这些视觉上的设计可以很好地帮助用户使用产品:他时刻知道当前所处的页面以及可以转到哪些页面。要传达这样一个好的界面,你就需要将可点击的元素(比如连接,按钮),可选择的元素(比如单选多选框)以及普通的文字明显区分开来。在下图的例子中,我将点击操作的元素设置为蓝色,选中的当前元素为黑色。这样适当的设计可以让用户很方面地在产品的各模块间切换。但千万不要把这三种元素设计得混乱不堪。



7 给出推荐而不是让用户来选择

当展示许多项服务时,给出一个重磅的推荐项是个不错的做法,尽管推荐的设置无法满足所有用户。这么做是有理论依据的,一些研究已经揭示了这么一种现象:当面临的选择越多时,用户就越难做出决定。所以你可以高亮某个选项来帮助用户做出选择。

8 给出撤销操作来代替确定操作

假设你刚点击了一个连接或者按钮,撤销操作可以让操作流畅自然,这也符合人类的本能。而每次操作都弹一个确定框则好像是在质问用户你明白不明白这个操作会产生什么后果。我还是更习惯假设用户每次操作都是正确的,其实只有极少数情况下才会发生误操作。所以,为了防止误操作而设计的确认窗口其实是不人性化的,用户每次操作都需要进行毫无意义的确定。所以请考虑在你的产品里实现撤销操作来增加用户的操作友好度吧。



9 指出产品适用人群而不是做成全年龄

你是想把产品做成大众化的呢还是有精确的适用人群?在产品定位上你需要更精确些。通过不断了解目标客户的需求及标准,你能把产品做得更好得到更多与客户交流的机会,并且让客户觉得你很专业,在这方面是独家提供的优质服务。把产品定位得精确的风险就是可能缩小了目标潜在客户的范围,也使自身变得不那么全能。但这种做得更专业的精神却反过来会赢得信任,权威。





10 试着直接果断而不要唯唯诺诺

你可以通过不确定而颤抖的声音来表达传递自己的意思,当然也可以通过很自信的方式表达。如果你在界面中的表述用语多以问号结束,比如"也许","可能","感兴趣?" 或者"想要试试么?",那么你完全还可以把语气变得更坚定一些。不过万事无绝对,或许适当放松措词让用户有自行思考的余地也是可以的。








文章来源:知乎


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

                                                            微信图片_20210513163802.png

 

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

 

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








UI设计切图规范

seo达人

UI设计切图规范


移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力。

设计切图的原则

设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求。其次切图输出应该尽可能的降低工程师的开发工作量,避免因切图输出而导致的不必要的工作量。最后输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。

1.切图资源尺寸必须为双数

众所周知智能手机的屏幕大小都是双数值,比如iphone 7的屏幕分辨率是750*1334px。切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位,换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊,进而造成开发出来的APP界面效果与原设计效果差距甚远。



2.图标切图输出应根据标准尺寸输出并且考虑到手机适配

在切图资源输出中图标切图输出是至关重要的部分。因为在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配。为了适配大分辨率手机图标在切图的时候需要输出@2x和@3x的切图,其中@2x的切图可以满足双平台大部分机型的适配要求,@3x是用来适配iphone手机的各种plus版本的手机(后边会有文章专门讲解关于适配的问题)。@3x是@2x尺寸的1.5倍,例如一个图标切图@2x尺寸是44px,那么@3x尺寸是66px。




3.为了提升APP使用速度,尽量降低图片文件大小

在切图资源输出中图标切图输出是很重要的部分,比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大,不利于用户在使用app过程中加载页面。因此图片切图要尽量压缩图片文件的大小。



4.可点击部件应当注意其点击区域不小于88px

44px的点击区域数值是在iphone 3 (320×480px)普通显示屏下制定出来的,在手机分辨率大幅提升的现在,这个数据自然要与时俱进。在iphone11 (750*1334px)的 显示屏下44px点击区域就变为了88px。但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px,换算成物理尺寸后大致是在7mm-9mm之间。早在人机工程学的研究中曾得出结论,认为人类舒适的触击范围需在7-9mm的大小。所以在ios官方的空间尺寸也经常出现88px的数值,比如菜单栏的高度便是88px。



5.可点击部件要把相关状态都切图输出,比如正常状态、点击状态。

在切图过程中不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图。这个也是设计师经常会出现的失误,比如在按钮切图的过程中可能会忽略点击切图的状态。所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来,避免后期切图的时候遗漏状态。



切图输出类型

1.桌面图标切图输出

app的桌面图标会被运用在很多不同的地方展示,比如手机桌面、APP store、手机的设置列表,所以app桌面图标需要很多个不同尺寸的切图输出。两个平台对相应桌面图标设计输出尺寸也不尽相同,在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可,手机系统会自动生成圆角效果。



2.系统图标切图输出

一套图适配双平台:

ios平台和安卓平台公用44*44px切图素材,即可实现一套切图适配两个平台的开发。




适配大屏幕:

为了适配iphone 6plus、iphone 7plus单独切一套比原有44*44px切图大1.5倍的切图,即66*66px大小的切图。(UI设计的适配问题会在后边单独的文章中详细讲解)


3.图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大在切图过程中需要控制切图文件的大小。(后边文章会详细讲解如何压缩切图大小的方法)

全屏切图类



局部切图类



4.可拉伸元素切图输出

可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素。这些元素通过瘦身压缩可以极大地见效图片的大小提升用户在使用app中的加载速度。在ios中这种切图方式叫做平铺切图,在安卓中这种切图方式叫做点九切图法。

横向拉伸切图




竖向拉伸切图





文章来源:知乎


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

                                                            微信图片_20210513163802.png

 

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

 

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






UI设计的10大发展趋势

seo达人





最近,我花了一些时间观察UI设计的发展方向。我偶然发现了一些非常有创意的趋势,我认为这些趋势将在不久的将来将重新塑造UI设计。


以下是根据我的观察得出的10种趋势:


从左到右:Fireart Studio,Ionutzamfir(IG),Dawid Tomczyk,Ui8net(IG)


1.新Neuomorphism


新形态在不断发展,我想它会一直存在(无论你喜欢与否)。它最初的形式并没有持续很长时间,但是它正在朝着更加复杂和易于访问的方向发展。这几乎就像拟物象,但有一种新鲜、现代、更美学的氛围。


从左到右:Dominik Bednarz,Mufidul.design(IG),Haolabteam,Ariuka_dsgn(IG),Sajon007(IG)


2.软渐变


渐变无处不在!实际上,我在背景和UI元素(例如按钮,卡片和图形)上看到了很多。


混合两种以上的颜色以创建一个彩色模糊的背景也是一件事!


从左到右:Victor.niculici(IG),Sun,Ashik,Interfacely.net,Halolabteam


3.几何元素


无论是作为主要的背景或主题,还是只是让设计看起来更有趣的一个细节——几何元素越来越受到关注。通常将它们混合在一起以创建马赛克——结果看起来非常酷!


从左到右:Emy Lascan,Zerotoone.de,DesigningUI.com,jajadesign(IG),Flowstudio。


4.柔和的背景


不得不说我喜欢这种趋势,我见过许多令人惊艳的、轻量级的、美观的设计,其具有非常精致、明亮柔和的配色方案。

它使设计看起来非常现代、没有干扰、清新而令人愉悦,其中内容扮演主要角色,其他一切只是一个微妙的背景。


从左到右:batcz(IG),tranmautitram(IG),Purrweb_design(IG),Izmahsa(IG),tranmautritram(IG)


5.插图和3D


插图仍然很流行,不同的样式、配色方案、或多或少的抽象,所以它们符合产品的特点。不仅是平面的,而且还模仿了3D的外观。我相信这是一个很好的改变,在地球上的每一个数字项目使用了这么多年的库存图片之后,我在这里给出了一些有关如何创建简单插图的提示:


从左到右:弗拉基米尔·格鲁夫(Vladimir Gruev),c.sen_(IG),埃迪·洛比亚诺夫斯基(Eddie Lobianovsky),cmarixtechnolabs(IG)


6.抽象的形状


用于背景和不同的UI元素,它们使界面看起来更“有机”和好玩,我认为这是一件好事。使用钢笔工具编辑最简单的形状(正方形,椭圆形),使用不同的边框半径,尝试使用不同的颜色/渐变,你可能会得到一个非常有趣的结果。在这里吗,我们或许可以尝试一下这个简单却神奇的工具Blobmaker。


从左至右:UXdesignlabs(IG),dragonlee_design(IG),JIANGGM,reyiands(IG),Saepul Rohman


7.暗模式


暗模式是界面的颜色反转版本,以使其在晚上更易于访问。由于我是典型的夜猫子,因此我经常在晚上使用深色模式。创建暗模式时,记住要在不同元素和版式之间保持正确的对比。


从左到右:Hype4.com,nickelfoxstudio,purrweb_design(IG),Vadim Drut,UI8net


8.角度元素


不仅用于Dribbble shots,而且还用作以非标准方式在网站上呈现不同内容的方式。它使内容看起来更有趣和吸引眼球。那么,如何快速实现这一效果呢?首先,对0度的角度拼贴元素。把他们分成一组。然后,更改组角度(从30°到50°),瞧!这样,你就不必手动更改每个元素的角度了。


从左到右:Cuberto,Fireart Studio,Dogstudio,Hype4.com,Prakhar Neel Sharma


9.柔和的阴影


这是另一个我最喜欢的趋势,柔和的阴影使UI看起来更深入。这种效果通常非常微妙,但在美学上令人愉悦。一般来说,阴影使某些UI元素变得“可单击”,并且它们有助于区分内容之间的层次结构。你可以在此处了解如何进行操作:


从左到右:andreisimon.design(IG),Shakib Ali,Felixlesoeuf(IG),Glebich(IG),Tramautritram(IG)


10.简单、thick字体


我从不喜欢比较薄的字体(在iOS7时代),所以我很高兴看到这种趋势消失了。现在,我正在观察使用更粗、更简单的形式(几乎为方形)的可读字体。它们使界面看起来更加现代和优美。如果你要搜索类似的产品,可以试试Poppins、Montserrat(免费)、Gilroy、Sofia Pro、Proxima Nova(付费)。

来源:Diana Malewicz:10 Newest and promising UI design trends




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

                                                            微信图片_20210513163802.png

 

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

 

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






摄影术的诞生和发展

资深UI设计者

对第一回还有印象的朋友应该知道,平面设计的定义简单说来就是:“以某种法则,将文字、图案、摄影图片在平面空间中进行编排设计,以达成信息传达或者行为引导等目的的活动”。

用一篇文章,帮你了解摄影术的诞生和发展

△ 图文结合的平面设计作品

这个定义大致在 1970 年代才成熟,但相信随着科技进一步发展,这个定义还会修正变化,但当前可以肯定的是,平面设计中有三个核心元素,分别是文字、图案跟摄影图片。

文字跟图案都已经历史悠久,其中图案最早,文字次之,而摄影则到了 19 世纪中期才被发明,发明之前有着漫长的酝酿演变过程。

用一篇文章,帮你了解摄影术的诞生和发展

△ 图文结合的平面设计作品

我们本次一起来了解一下摄影术的诞生过程,还有其对平面设计发展产生的一些影响。摄影术的发展其实主要分为几个阶段,史太浓把他们总结为三段,分别是:

  • 探索者的探索。
  • 商用后的进化
  • 与平面设计的结合

从小孔成像出发

根据历史记录看来,欧洲在古希腊时期就有人尝试捕捉真实世界的影像,这个人很知名,就是大哲学家亚里士多德(Aristotle)。

亚里士多德发现的其实就是“小孔成像”原理,物理课大家有学过,因为光是成直线射入的,当人站在小孔前,头部挡住上面的光,成影在下边,脚挡住下面的光,成影在上边,所以成像是倒立的。

用一篇文章,帮你了解摄影术的诞生和发展

△ 小孔成像原理

神奇的是,跟亚里士多德接近同期的中国思想家墨子也同时发现了这个情况,并且比亚里士多德还早一些做了这个实验,记录在「墨子·经说下」书中,这种文明发展不约而同的状态非常多,很难解释,似乎冥冥之中自有主宰。

用一篇文章,帮你了解摄影术的诞生和发展

△ 墨子关于小孔成像原理的研究

随后有艺术家基于这个原理制作一种叫“暗箱”的东西来辅助自己进行绘画创作,这样可以高效的画出相当准确的图形来,好比我们设计师有时候也会使用“透写台”辅助临摹一样。

用一篇文章,帮你了解摄影术的诞生和发展

△ 画家制作的暗箱装置

时间一直去到 19 世纪初,有人基于这个“小孔成像”原理完成突破性探索,他就是来自法国的约瑟夫·尼伯斯(Joseph Niepce)。这个突破性发展跟一些现代材料的发展密切相关,就是他尝试将一些感光材料涂在暗箱的平面上,通过曝光的化学变化尝试将影像捕捉下来。

用一篇文章,帮你了解摄影术的诞生和发展

△ 尼伯斯的摄影探索试验

这种方式被认为是最早有记载的摄影技术,尼伯斯将这种方法命名为“阳光腐蚀法”(sun engraving),通过这个方式尼伯斯在 1822 年制作出世界上最早的人物摄影作品,名为《红衣主教》。(Cardinald Ambroise)

用一篇文章,帮你了解摄影术的诞生和发展

1826 年他再如法炮制,完成世界上第一张风景摄影,拍摄的就是其房间窗外的街道,图像朦胧不清,但是完成了历史的突破。

用一篇文章,帮你了解摄影术的诞生和发展

尼伯斯本身是一名印刷家,他这方面的探索动机其实是为了寻求一种替代手工插图的方法,以提升印刷效率,因为手工插图不但时间长,成本也很高,比如要邀请技术精湛的艺术家创作。

不幸的是,尼伯斯的探索还没去到实用性阶段本人就因为心肌梗塞在 1833 年去世了,幸好此时他已经有了一位合伙人,可以继续他的研究,那就是画家出身同为法国人的路易斯·达贵尔(Louis Jacques Daguerre)。

用一篇文章,帮你了解摄影术的诞生和发展

△ 路易斯·达贵尔

商用之路

达贵尔基于尼伯斯的探索基础进一步深化,首先改善感光材料,比方使用银金属成分的感光版,同时优化制作过程,对感光后的银版再做工艺处理,出来的摄影效果让精确度大幅提高。

1839 年时候,达贵尔采用自己打磨了 7 年的技术对巴黎街景进行拍摄,出来的效果可以说非常好,清晰度很高,让他非常振奋。

用一篇文章,帮你了解摄影术的诞生和发展

获得这样的成果后,在一些经商朋友的建议下,他果断向法国科学院呈报自己与尼伯斯的摄影研究成果,科学院的院士看到作品后大为震惊,一致表示肯定,而且迅速向全世界自豪的宣布法国人发明了摄影术。

与此同时,达贵尔也马上开始努力的推动摄影术商业化,首当其冲的自然就是生产“摄影机“进行销售,因为有法国科学院支持,过程很顺利,第二年就生产并卖出 50 万台,让达贵尔一下子名成利就。

用一篇文章,帮你了解摄影术的诞生和发展

△ 达贵尔相机

用一篇文章,帮你了解摄影术的诞生和发展

△ 达贵尔相机拍摄的作品

这事情让一位叫塔波特(WilliamHenry fox talbot)的英国人气得吐血,因为他早在 1833 年也开始探索摄影技术,并且在 1835 年就设计出一种小型摄影机,可以拍摄到很小的物体。

其原理连暗箱都不需要,属于一种化学反应的直接曝光,产生的图像是黑白负片,但是很精确,他获得这些成就后居然不认为有商业价值,所以丢在一旁好几年。

用一篇文章,帮你了解摄影术的诞生和发展

△ 塔波特相机拍摄的作品

当通过媒介听闻达贵尔的事迹时候,他匆匆将自己的技术向英国皇家学院汇报,英国人也赶忙向世界宣布发明了摄影术,但也只能成为发明者之一,而并非世界第一了。

用一篇文章,帮你了解摄影术的诞生和发展

△ 很不开心的塔波特

但塔波特痛定思痛,发力追赶,1840 年时候更新了感光材料,居然可以将感光之后的底片取出来在暗房冲洗,也发明出负片变成片的方法,虽然多了一道程序,但是得到的效果完胜达贵尔相机,正负片这样的摄影方式一直到 20 世纪 90 年代都还存在着。

用一篇文章,帮你了解摄影术的诞生和发展

△ 塔波特相机完成的作品

正负片的核心竞争力在于可以无限复制,而达贵人尔的银版摄影只有一张图片,所以塔波特相机的商业价值也完胜达贵尔,真正做到后来居上,可见事在人为啊。

上一期说过,当一件事情体现出商业价值,就会吸引到一大堆能人参与,让事情的发展速度快速提升,摄影的发展也不例外。1880 年时候有人发明出干底片,因为之前的感光材料都是湿涂的,很不方便,再后来就是大家感觉相机体积太大,一起去研究怎么变小。1888 年世界第一台小型照相机出现,发明者叫乔治·伊士曼(George Eastman),后来他成立了一间公司,就是大名鼎鼎的“柯达公司“(EastmanKodak Company)。

用一篇文章,帮你了解摄影术的诞生和发展

△ 乔治·伊士曼

用一篇文章,帮你了解摄影术的诞生和发展

△ 柯达公司 EastmanKodak Company

柯达公司同时也主力生产后来风行世界的胶卷,记得小时候我还能在家里找到很多这样的小圆筒包装的胶卷,很后悔没有好好保存一些下来,现今的还能零星找到的卡带在不久的将来也会消失,建议大家可以收藏。

用一篇文章,帮你了解摄影术的诞生和发展

摄影术与平面设计的结合

首先将摄影与平面设计结合的是美国人约翰·莫斯(John Calvin Moss),他在 1871 年时候首先尝试将有影像的底片投射到有敏感感光材料的金属版上,通过腐蚀获得正片样式的画面,这个金属板就可以直接用于印刷,从而获得插图。

这种方式比金属雕刻与木刻插图都快很多倍,而且成本低,制作出来的插图非常真实,还有一种特殊的类似钢笔画一般的艺术效果,广受社会大众的欢迎。

用一篇文章,帮你了解摄影术的诞生和发展

△ 莫斯结合摄影技术制作的印刷品

当摄影技术走向成熟的时候,有一些艺术家也开始尝试基于底片为蓝本,将其再创作为版画,这样就获得了准确与艺术化的平衡,而且效率也很高。

世界上现存最早以摄影底片为蓝本创作的木刻版画作品叫《里什蒙运河边的自由人》(Freemen on the Canal Bankat Richmond),创作时间是 1865 年,主题是一个黑人家庭合照,大家可以看到有很好的艺术韵味。

用一篇文章,帮你了解摄影术的诞生和发展

△ 《里什蒙运河边的自由人》

而大部分印刷厂也在探索怎么直接将摄影图片印刷在纸张上的方法,据闻这种方法其实约翰·莫斯已经掌握,但一直高度保密,没有释放到商业应用中。到了 1880 年时候,美国的《纽约每日图画报》第一次以摄影直接制版方法刊载了一个城镇风景照片,因为地位特殊,这张印刷照片也历史留名,叫《尚地镇的风景》(A scenenin shanty town)。

用一篇文章,帮你了解摄影术的诞生和发展

△ 《尚地镇的风景》

我们从图片细节看来会发现图像好像由一个个小点构成,如果这样就对了,因为这种印刷照片的方法就是大名鼎鼎的“丝网制版”。这种方式是把摄影底片通过丝网照射形成很多细小的格子,格子黑白明暗程度不同,在感光底版上通过曝光就形成金属印刷版,继而就可以将照片印刷出来。

这种方式慢慢被不断优化,越来越多印刷厂都广泛采用。

用一篇文章,帮你了解摄影术的诞生和发展

△ 丝网制版与印刷

当摄影可以顺利变成印刷品后,其媒介地位日益提升,因为采用照片方式做插图有很多好处,其一是节省成本,其二是真实,其三则是效率很高。

所以摄影作品就跟之前任何一种媒介形式的发展路径一样,从追求有到追求好,再由追求好变成追求个性,大家都在努力探索一些新鲜的摄影方法,如今单纯摄影的学问绝对不比平面设计低,而且两者之间的关系非常密切,很多法则也可以相互引用。

世界上第一位探索人造光源摄影的人是来自法国的纳达(F.T.Nadar),他在 1886 年做了世界上第一次摄影采访,对象就是我们在「风格列传」新印象派篇谈到过的化学家谢弗勒尔(Michel Eugene Chevreul)。

用一篇文章,帮你了解摄影术的诞生和发展

△ 纳达采访谢弗勒尔

过程中完成了 21 张由人造灯光配合的现场照片,最后配以文字发表在法国刊物《插图杂志》上,让那一期的刊物销量大增,因为读者可以配合生动的照片更好了解内容,当时而言显得非常有趣。

从此之后,照片与平面设计的关系变得越来越重要,越来越多平面设计师也开始进一步探索照片与排版之间的法则。

文章来源:优设  作者:土拨鼠

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


图形简化+衍生,教你真正的图形创意方法!

周周


大家是不是很好奇别人的图形怎么都这么有创意,而自己想设计图形的时候却无从下手。可能是还没有掌握方法。今天就分享一个图形创意的方法。希望大家了解后,在设计图形的时候有一个清晰的思路。

图形简化+衍生,教你真正的图形创意方法!

△ 插图来自日本插画师 Yu Nagaba

我们先来看这个图形,大家能认出这是谁吗?

图形简化+衍生,教你真正的图形创意方法!

没错,是爱因斯坦。为什么仅仅几条简单的线条,就能把一个真实的人物刻画出来呢?这就是我们今天讲的内容,如何去简化并且衍生成完整的图形。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

简化的图形一直是趋势。它不仅仅利于快速传播、具有非常强的延展性,也经常作为海报的主体。

图形简化+衍生,教你真正的图形创意方法!

标志上也大部分以图形为主。所以作为设计师,简化图形的能力是必不可少的。

图形简化+衍生,教你真正的图形创意方法!

但是很多人对于图形简化还没有一个清晰的理解,更多的只会在图片的基础上进行简单的描摹。

图形简化+衍生,教你真正的图形创意方法!

这样描摹出来的图像很可能缺乏识别度,就像这个例子,描摹出来后它到底是狗呢,还是狼呢?

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

简化的第一步是确定基本元素。总的来说,就是什么元素能够确定这个物体的种类。比如玫瑰是确定它是“花”这一种类。什么元素能让我们辨别它是花而不是其他东西呢?

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

枝茎加上花苞,以及红绿配色就可以让我们辨别它是“花”的种类了。至于叶子就属于补充元素。这都是让我们辨别它的种类的基本元素。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

玫瑰花苞和枝茎的常态关系是:花苞在枝茎的末端。如果随意变换关系,会影响最简形态下的识别度,所以前期简化最好不要做变化。

虽然这两个步骤能确定它的种类是“花”。但是它是什么花呢?我们还分辨不出来。就需要到第三步,找到图形的重要特征。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

这个时候玫瑰花就需要以种类内的事物做参考。也是和其他花做对比。找出玫瑰花区别于其他花卉的重要特征。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

红绿配色是我们对玫瑰的印象。玫瑰的枝茎带刺。玫瑰花的花瓣开得比较紧密,花瓣层层包裹像漩涡一样。这些都是玫瑰比较明显的特征。

图形简化+衍生,教你真正的图形创意方法!

分析完这些特点,我们只需要在原有的元素关系上加上这些特点,就能分辨出它是玫瑰花了。而这些特点可以在保证识别度的情况下任意删减组合。

图形简化+衍生,教你真正的图形创意方法!

比如说去掉刺也能通过其他特征辨别玫瑰。或者保留刺,去掉花瓣的细节,如果对于玫瑰有刺这一点比较熟悉的人来说也可以辨别它是玫瑰。又或者保留所有的图形细节,把颜色变成黑白,都是可以的。

图形简化+衍生,教你真正的图形创意方法!

我们刚刚说的玫瑰是本身自带的特征,其实在现实生活中还存在其他因素影响的特征。

图形简化+衍生,教你真正的图形创意方法!

比如附加特征,这个图形我们都能分辨它是鸟,但是具体是什么鸟却看不出来。

图形简化+衍生,教你真正的图形创意方法!

一旦加入橄榄枝,啊,我们就知道,它是鸽子。鸽子本身是没有橄榄枝的,它代表和平也是人类赋予它的象征。所以这些属于附加特征。

图形简化+衍生,教你真正的图形创意方法!

还有状态特征,比如壁虎,哪种壁虎的状态和角度更容易让你辨别它们的身份呢?我相信应该是能看到壁虎紧紧抓在墙上的状态。所以它的状态是否能体现它的身份,也是很重要的一点。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

现在的示意图它只是随便画出来的,如果用在设计中,这个图形是不合格的,所以需要对它进行改造。

图形简化+衍生,教你真正的图形创意方法!

衍生图形主要从两个角度入手,风格化和陌生化。

图形简化+衍生,教你真正的图形创意方法!

比如花的漩涡状可以用同心圆表现。花苞用半圆形、枝茎和叶子同样用最基本的形状概括。

这个风格的图形非常简单,会显得它的完成度不高。所以这时就需要陌生化的处理,让它在创意想法上有亮点。

图形简化+衍生,教你真正的图形创意方法!

比如我们把同心圆的颜色改变,虽然辨识度少了。但是这种创意图形加上文案与画面氛围,可以判断出它的身份。

那么漩涡一定要圆形的吗?

图形简化+衍生,教你真正的图形创意方法!

带着这种疑问,我们就可以开始第二个衍生。以四变形为基本形,通过旋转不同角度,再加上渐变风格。第二个图形就衍生出来了。可能这两个会偏抽象一点,那也可以选择保留更多的特征。

图形简化+衍生,教你真正的图形创意方法!

就像这个图形的外形和线条刻画上更大地保留了玫瑰形态,所以在颜色上就可以不用完全遵循现实。

图形简化+衍生,教你真正的图形创意方法!

很容易,三个不同的图形就完成了。

因为图形衍生的过程对于想法、造型能力、不同风格的掌握有所要求,没办法通过简单的理论来分析,接下来会通过分析四个不同的案例的衍生方式,给大家提供一些衍生的思路。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

螃蟹它的颜色是橙红色。蟹钳是螃蟹比较明显的特征。蟹的八条腿可以作为辅助元素。它的躯壳偏圆形。这些特点的组合就能呈现一个非常清晰的螃蟹的形象。但是别忘了图形的衍生是需要对特征有所取舍和变化的。

图形简化+衍生,教你真正的图形创意方法!

为了让螃蟹看起来更加的陌生化,我们可以考虑改变印象中螃蟹的常见形态,让它以一种更加有趣的动态呈现,比如让这个多爪动物以一种太阳一样的放射状呈现,变身元气螃蟹。

图形简化+衍生,教你真正的图形创意方法!

第二个方案保留圆形的身体,加上尖锐的蟹钳特征,就完成了一个新的螃蟹图形。虽然颜色的变化和少了八条腿的特征,但是在保留其他特征时作出的变化却也能让我们清晰辨别它是螃蟹。

图形简化+衍生,教你真正的图形创意方法!

那传统的螃蟹都是圆形的身子,我们能不能尝试把螃蟹的身体变方呢?带着这种思考,保留其他特征的同时作相应的风格化处理。又一个新的图形产生。

图形简化+衍生,教你真正的图形创意方法!

这些就是螃蟹部分的衍生图形。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

火龙果的配色是很明显的特点。表皮会带有绿色的鳞片。相对椭圆的身体。火龙果是白色的果肉和黑籽的组合。

图形简化+衍生,教你真正的图形创意方法!

第一个衍生很简单的,就是简化火龙果的外形,最后变化颜色。

图形简化+衍生,教你真正的图形创意方法!

这一次同样保留火龙果的外皮特征,因白色果肉和黑籽的结合让我联想到骰子,我们可以把这个想法和火龙果结合一下,让它变得更加有创意。

图形简化+衍生,教你真正的图形创意方法!

使用不寻常的切块方式,也能产生另一个图形。

图形简化+衍生,教你真正的图形创意方法!

这些就是火龙果部分的衍生图形。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

颜色同样是我们辨别它的一个很重要的特征。除了颜色,我们还可以看到西瓜的表面有条纹的覆盖。像是西瓜这种简单的圆形水果,切块之后的造型,可能会更有辨识性。是一个很好的附加特征。最后,黑色的瓜籽同样是我们辨别西瓜时的一个显著特性。接下来就需要对它们进行风格化的处理。

图形简化+衍生,教你真正的图形创意方法!

西瓜的条纹部分,这一次我们用几何图形来做一些尝试。错位再压缩,让条纹的比例感更强。加入半圆形的西瓜切块之后,感觉有点像是人脸对吧?那我们就顺势添加一个眼睛,让它拟人化。

图形简化+衍生,教你真正的图形创意方法!

符合了这么多特征之后,造型上就不用那么写实了,我们完全可以抽象一些来绘制它。加入之前的眼睛和切块之后,它就完成了。

图形简化+衍生,教你真正的图形创意方法!

西瓜切开后的这个形状特征让我们很容易辨别它的身份,所以就可以保留这个形状特征,做一些大胆的变化。

图形简化+衍生,教你真正的图形创意方法!

比如颜色上可以完全脱离西瓜原有的颜色。用几何色块的方式去填充造型,让风格化的更强烈。到这里,这个图形也就完成了。按照这种思路,能不能保留配色,但是在切块的形状上进行改变呢?

图形简化+衍生,教你真正的图形创意方法!

那就到了第三个衍生,我们把它分成三块去表现西瓜的层次。因为造型已经足够抽象了,所以这里我们用颜色去尽量还原西瓜的印象。组合到一块,是不是就有西瓜切块的感觉了呢?

图形简化+衍生,教你真正的图形创意方法!

我们把这个数量增加一些,就更有辨识度了,再调整里面的一点变化。那么到这里,这个图形也就完成了。

图形简化+衍生,教你真正的图形创意方法!

这是西瓜部分的衍生。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

青蛙是绿色的,由于身体和四肢的对比,会感觉四肢很细长。另外后爪很长,并且有蹼。弯曲的后腿是青蛙比较特别的地方。

图形简化+衍生,教你真正的图形创意方法!

这一次,我们可以从造型上做变化。比如切断连接四肢的关节部分,不过这样的造型在美感上还不是很理想。

图形简化+衍生,教你真正的图形创意方法!

那么尝试到这里,觉得下面的这个脚的直线结构很有趣,是一个很有变化性的特点。所以我们可以按照这个方向再去尝试一下。

图形简化+衍生,教你真正的图形创意方法!

把手臂的部分也修改成直线的样式,那么这里这个图形就完成了。

图形简化+衍生,教你真正的图形创意方法!

这一次,我们把目光聚焦到青蛙细长的四肢上,为了让造型看起来更生动,这个图形我决定打破对称的方式。将四肢和身体的比例做一些夸张的处理,让身体更小,四肢更大。爪尖用来划水的蹼也同样做了夸张的处理。那么在这个过程中,我们会继续摆放四肢的位置,让每个部分的空间看起来更均衡一些。

图形简化+衍生,教你真正的图形创意方法!

强调了四肢之后,我们还可以反着来,尝试强调身体的部分。为了让四肢看上去更细小,这一次我们用线条来绘制。

图形简化+衍生,教你真正的图形创意方法!

这是青蛙部分的效果。

图形简化+衍生,教你真正的图形创意方法!

来回顾一下我们这篇教程所有的图形。

我们从极简化的元素开始,通过不同特征的组合与变化,再为它添加陌生化和风格化的处理,就能能衍生出非常多形态各异、各种风格的图形。




文章来源:优设网       作者:研习社



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



一款软件界面设计的重要性

seo达人

 

这周继续做我们的作品,感觉实现了功能不是很多,而我们把更多的精力投到了界面的修饰上,感觉以前的界面太不好看,和人家正规的浏览器相比简直不堪一击.在这周我感受最深的就是一款软件的成功以否不仅仅在于功能的强大以否上,界面也占了其成功因素的半壁江山. 

  作品开始准备以前就听八期的师哥师姐说,界面的美观,协调,布置合理等是一款软件成功不可或缺的因素.前几次作品展最后获胜的都是界面漂亮,和谐,布置合理,非常吸引人的作品,例如宝宝乐园等,他们运用了Flash等工具,的确非常漂亮吸引人!通过这周的做作品和观察比较流行,受欢迎的软件,我发现一款软件界面的重要性和设计界面需要注意的事项。

  重要性

1,软件的界面相当于我们人的整体外表,相当于我们人的气质等。谁都知道我们希望自己漂亮一些,希望自己有气质一些,这些不仅可以增加我们的人气,更可以帮助我们披荆斩棘,更加顺利走向我们的目标。当然,软件的界面美观与否,直接影响着人们使用此软件时的心情,进而影响人们对此软件的喜欢与否。而那些所谓的强大的功能是在人们喜欢这款软件之后再考虑的问题。

  2,功能菜单的布局,这个布局合理与否,是否符合大众的使用习惯。也直接影响着使用者对此软件的喜欢与否。如果一款软件的各项功能菜单布局不合理,不符合大众化,那么再强大的功能,使用者也找不着,那样也白搭。所以界面的布局也是非常重要的。

总而言之,界面的设计,直接决定着使用者对这款软件的第一印象,直接决定着使用者对其的青睐与否。

在这里我想向大家提出几点注意事项

1,色调的选择,在这里主要以和谐,舒适感为目标。色调的选择要是使用者感到非常舒服,色彩的搭配更要凸显界面的和谐优美。

2,功能菜单简洁明确,主次分明。按钮的功能要简单明了,易于使用掌握,主次要分清,分清使用者使用此软件的主要功能,常用功能和附加功能,处处以使用者的角度去想问题.设计软件.

3,符合常规逻辑思维,给用户以很好的引导作用,良好的界面布局,会给用户操作带来方便和引导,软件使用起来流畅自然。设计不合理的界面,用户往往要费一些时间去找功能块啦、按钮啦、定位文本框啦,甚至根本不明白软件再说什么,还得自己去理解它的意思。

4,我们在制作软件时,要懂得虚心向别人请教,尤其是界面问题,往往我们的缺点我们自己难于发现。如果必要的话,我们可以做问卷调查,向更多的用户调查需求,从而更有助于我们做出符合大众需求的软件产品。

总而言之,界面是软件非常重要的一大项,我们要对他重视起来,不要一味的把心思全投放到功能的实现上。当然我们做软件的每一点都要以使用者的心态,使用者的需求去设计,界面是软件的门户,更是如此。如何让使用者用着更方便,更开心,更简捷,我们就如何设计,完全贯彻“全心全意为人民服务”的理念。

 

文章来源:CNDN   作者:iteyey_45

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

 

2021年版式设计趋势

ui设计分享达人

排版将文字从单纯的文本转换为巧妙的交流方式。字体和类型设计可以说出这么多–从突出的粗体字体到精致的衬线字体。从传统的永恒变化到全新的技术。

字体在现代文化和商业中的突出地位受到包豪斯艺术运动的影响。赫伯特·拜耳(Herbert Bayer)是包豪斯(Bauhaus)的学生,并通过采用还原性极简主义的原则在版式设计上留下了杰出的印记。

数字图形媒体和设计师本身的爆炸式增长催生了各种各样令人惊奇的想法和进化。有些想法只是一时的流行,而另一些则是可以保留的趋势。我们重点介绍了2021年最流行的字体趋势。

1. 衬线字体

衬线字体当然是永恒的–因此,当以新的现代方式使用它们时,它们会重新出现在趋势图上。通过将细长和粗体元素并置,我们看到古典衬线字体作为一种持续的趋势重新回到设计中。尤其是受到美容和DTC品牌的推崇,该款式具有柔和的美感,可以在许多行业中使用。

我们的示例显示了带有泥土色的苗条衬线字体的优雅搭配,从而柔和了整体氛围。

Neubel本身是一家字体铸造厂,使用柔和而优雅的颜色托盘并将文本覆盖在对比鲜明的艺术品上,以大胆地表达自己的观点。

设计公司Autumn展示了视觉层次结构的强大功能以及自信的版式和简单的形状。

2.轮廓字体

轮廓字体在2020年出现了很多的创意,我们希望在2021年会看到更多。透明字体在与粗体,填充字体并排显示时,更加强大。

我们的示例表明,轮廓倾向于在网页设计中占据中心位置。Heetch在相同颜色的纯色衬线字体上方使用蓝紫色轮廓字体,以表现出对比效果。

Aldo在“走进爱情”广告系列中使用了当年Pantone颜色的阴影。广告系列以自信和表达为中心,明亮的黄色将那种感觉放在了中心。轮廓字体是使粗体黄色发光的绝佳选择。日本设计师Ukyo Masuda凭借中性灰色调色板为该群体锦上添花,尽管如此,它还是通过创意的轮廓字体而栩栩如生。

3.进化的野兽派

如果您希望营造视觉张力并摆脱标准网页设计的束缚,那么野兽派字体与现代野兽派元素相结合就可以完成工作。野兽派字体的清晰,原始,略显复古的设计经过了现代化改造,成为我们所谓的“进化的野兽派”。在经过改进的版本中,苛刻的元素被软化并与各种调色板和形状结合在一起。

我们的示例显示了进化的野兽派的不同变体和组合。内森·泰勒(Nathan Taylor)使用了大量实验元素和互动性。整个设计是野兽派的,不仅仅是字体。这是对更加野蛮的野蛮主义的一个很好的展示,但是现代的元素使这种感觉更加精致和进化。

4.文本与其他元素的分层

通过有意地分层排列文本和图像,可以使得整个页面更有空间感。这种组合使焦点很清楚。它允许用户在滚动之前暂停一秒钟并全部接收信息。

这些示例是最有趣的。登录Mammut贝加尔湖页面后,您即会感受到电影般的震撼力。图像的运动和贝加尔湖文字与人类交织在一起,使您感觉自己像是体验的一部分。

德国品牌代理公司MJND的层次结构要简单得多,但是层次感仍然很突出。对于那些使用文本和图像的人来说,这种设计更容易上手。

Owlsome Studio使字体更加突出,并在其后面分层显示较小的正方形图像。这是其他两个示例的替代方案,但是由于它打破了网络的现状,因此可能以自己的方式产生影响。

5.文字图像融合

比文本分层更进一步的是文本与图像相互融合,而两者是密不可分的。这给图像带来真正的优质感,并引起您的注意。它们不再是文本和图像层的组合,而是变成一个整体。

我们喜欢这种格式允许的创意表达,并提供无尽的组合。Satellite414使用透明的轮廓文字,这些文字实际上成为照片的一部分。它是动态,现代和新鲜的。

Kieran Baybutt中文字完全取代了图像。这使得文本部分与典型镜头一样重要。Craig Reynolds中图像和文本滑入和滑出组合,将它们合并在一起,从而使用户注意到它们。

6.新迷幻效果

全新迷幻氛围是对时髦色彩的复古回归,融合了现代感。它借鉴了过去的迷幻设计。

从1960年代到1970年代的剧烈社会动荡带来了新艺术和设计的变革。迷幻的影响在那个时代就很明显了,今天我们看到了一种新的潮流。韦斯·威尔逊(Wes Wilson)是那个时代的重要设计师,他创造了一种新字体,成为该地区的象征-著名的迷幻设计。

Victor Moscoso为他的印刷沉重设计带来了鲜艳的色彩,这些色彩影响了示例中所见的现代霓虹色调色板。

宙斯·琼斯(Zeus Jones)是我们所看到的趋势的完美典范–光谱中各种鲜艳的色彩,以梦幻般的方式与斜体字体结合在一起,并为流动的渐变带来了清晰的通信效果。

查理·勒·麦格南(Charlie Le Maignan)为我们提供了一种有趣的复古字体,可在页面上扩展和折叠。此外,在Showreel部分,我们看到了一段令人迷惑的文字彩虹,让人联想起1970年代的专辑和那些酸酸的歌曲。

圣马丁代理公司在令人眼花scene乱的场景中为我们带来欢乐和情感的熔岩灯。字体与背景配合得很好–简单性与无穷复杂的色彩并置。

7.粗体现代衬线字体

到2021年,这并不是一个全新的概念,现代的衬线字体处理技术随着新外观的发展而不断变化。

一个新的变化是,我们看到粗体衬线字体完全占据了屏幕。在许多情况下,文本是整体设计,而粗体的现代衬线字体则可解决问题。

样条线使用黑底红字表示强烈的陈述,并使用完全大写的文字来增强效果。对于试图唤起技能,信心和权威的公司,这种组合效果很好。

Orto保持简单,但将宏伟提升到另一个层次。超大,明亮的字体只会迫使您注意并进一步深入。

8.赛博朋克风格

也许最分裂的想法之一是计算机朋克和汽具美学。计算机,视频游戏和1980年代流行美学的模糊组合以某种怪异,令人着迷的组合在一起。

80年代是数字游戏和新的计算机浪潮的开始。赛博朋克和汽具设计是80年代复古设计的变体。随着计算机和AI的发展,我们可能会看到印刷术和美学的新融合。

Next Big Thing Academy显然具有对未来的关注。虽然这里的字体选择不是什么极端的选择,但总体上符合复古主义的未来美学。

浮标也不使用任何大胆创新的字体,但是图像与字体的整体配对符合这种趋势。

文章来源:站酷   作者:DuiaDesign

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

日历

链接

个人资料

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

存档