首页

搜集了50多款产品,发现启动页原来有这么多做法,远比我想象中多呀!

seo达人


图片

后来自己做启动页的时候,也只放了一个图标,客户说看看能不能用别的方式,然后我就去研究了一下,看看到底启动图有多少种做法。

 

1.图标 

第一种就是我们最常见的,也是启动图成本最小的一种方式,图标直接往上面咔咔一放,就像下面这种:

图片

但并不是所有的都是白色底哦,有一些会使用全屏色块的形式,比如这些:

图片

这样的冲击力会比较强,但也需要注意,颜色别整太刺眼了,那样会看着很难受的。

 

2.solan

有一些平台会宣传自己的使命、价值等等,比如最常见:

知乎: 有问题就会有答案

猫眼: 娱乐看猫眼

糗事百科:快乐你就不孤单

效果图如下:

图片

这其中,有些修了字体,有些做了排版等等,当然他们并不是只放solan,页面下方还是会放上图标。

这种突出价值、使命的方式也是非常不错的,也是启动图常用的一种表现形式。

 

3.插画

接下来的方式是突出插画,用自己的形象延展一些好看的插画,比如咸鱼:

图片

再比如躺平:

图片

再比如唱吧:

图片

等等,这种方式会让品牌更加生动、丰富,一张好看的插图会让用户印象深刻。

 

4.图形

图形是在app设计体系内非常重要的一个元素,比如我们图标本身就是一个图形,像qq这种,让其图形外轮廓与一些效果相互结合:

图片

达到一种冲击较强的效果,以此来凸显图形本身。

再比如,我们还可以利用图标来延展图形,就像uc头条鹿角延展出的图形:

图片

或者像moo music延展出两个圆形,表达星球的含义:

图片

用图形延展做启动图,有一个很重要的优势,那就是设计感很强,让用户感觉很高级很舒服!

 

 5.图片 

还有一种方式就是利用图标来做启动图,一般会使用这种方式的,基本都是产品本身比较注重“图片“这个元素,比如像健身啊、交友啊、设计类产品啊等等,希望通过图片(比如异性图片,高质量作品)来吸引用户。

比如ui中国的启动图:

图片

再比如陌陌的启动图:

图片

都是使用图片作为主要元素制作的!

 

6.3D

现在3d这么火,3d的设计表现形式肯定是少不了的,比如下面这些:

图片

都是用了3d的表现手法,而且我觉得以后可能会有越来越多的产品选择这种形式,来增加冲击力和独特性!

 

总结

当然,不论启动图的侧重点是什么形式,插画也好、图片也好,都还是会放上自己的品牌图标,这是铁律,剩下的都还是有一定的发挥空间。
好了,以上就是看了很多产品之后,关于启动图表现形式的小总结,希望能给大家一点启发和灵感,做出适合自己产品的启动图,么么扔!

 

原文地址:心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》搜集了50多款产品,发现启动页原来有这么多做法,远比我想象中多呀!

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

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

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

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


高级设计师最关键的能力是什么?

seo达人


 
   
 
这张海报最终被弃用了,因为它连客户最基本的显性需求都没有满足。 
 
二、客户的隐性需求通常有下面这些:   
 
1.好看。
即要有吸引力,能够吸引别人的注意,甚至是让他对宣传的内容感兴趣,比如一张食品类的海报,首要的功能就是要让看到他的人,产生想吃的欲望。这个需求客户一般不会说出来,因为这是他们默认的,毋庸置疑的。所以无论你的设计多有创意、有多少细节,先扪心自问,它好看吗?能让你产生兴趣吗?

 

  
 
有人可能又会说,好看和是否吸引人这个太主观了吧,每个人的审美都不一样,萝卜白菜各有所爱。我觉得这句话适用于层级比较接近但是风格或表现手法不一样的作品,相差很悬殊的作品不存在这个问题。 
 
 
2.层级分明
即画面要有主次、要有对比、要有合理的阅读逻辑,不能太乱、太拥挤。这算是比较专业一点的设计需求,很多客户提不出来,但是当你把一件看起来很乱、没有重点的设计给到他们时,他们也能感受到,因为他们其实看过很多同类型的作品,他们也能感受到视觉上的不舒适。

 

 

3.时尚
其实并不是非要与娱乐、服装、运动、年轻人相关的设计才需要时尚,我们可以看到现在各行各业的设计都在变得越来越时尚,比如餐饮业、母婴品牌、饮料品牌,甚至是医药和保健品牌。因为互联网已经全民化,大家的生活方式和审美都发生了很大变化,而且几乎各个行业都会有年轻人参与进去。

 

 

 

所以如果做设计还只是停留在把必要的元素放上去,把重点信息清晰的展现出来,把版面排得干净整洁,把颜色搭配得舒适这些层面,那么离成为一个高级设计师还有一些距离。 设计也需要与时俱进,要不断尝试新的构图、新的字体、新的设计风格、新的排版方式、新的配色等等。

 

 

4.精致的细节
同样,大多数客户都不会明确提出这个需求,因为他们最看重的是大方向、大感觉,而且他们不知道细节应该怎么处理才是好的,但是如果你的作品细节很粗糙他们是能感觉到的,他们能看出你的设计品质感不够,特别是在有对比的情况下时。

 

  
 
所以,在字体选择、字体设计、素材质感、文字行距、色彩搭配、图形轮廓、背景的处理、排版的平衡性和灵活性等方面,我们都要尽量做好一点。
下图是开头列举的游戏海报设计方案二,这个方案增加了视觉图形部分,从而加强了海报的游戏属性和视觉冲击力;内文部分进行了归纳整理,使之更清晰、更易阅读,基本上完成了客户的显性需求,但是仍没有得到客户的认可,因为还有很多隐性的需求没有表现出来。

 

 

下图是调整后的方案三:

 

相比方案二,该方案的做了如下优化:  
 
1、层级关系更加分明、视觉更聚焦。
让主视觉和主题占据更大的空间,以提升画面的视觉冲击力、加强主次对比,核心内容虽然也重要,但是并不能让它成为视觉上的核心,保证他有足够高的可读性就好。

 

 

 

方案二的主视觉部分,人物元素分布在左右两侧,标题在中间,视觉很分散,方案三则把人物移到了中间,标题放在人物下方,视觉变得更集中了。

 

 
 
2、细节更加丰富、精致。
比如主视觉部分元素做了精简和美化,看起来比之前更干净、更好看,“招募令”这几个字重新做了设计,使之变得更突出、更有设计感。

 

  
 
内文方面也重新调整了排版的方式,从上下结构变成了左右结构,使其显得没那么单薄,同时也增加了很多细节,使之看起来更美观、逻辑更清晰、更灵活。

 

 

另外,背景的处理也做了优化,重新找了素材使其变得比之前更丰富、更细腻。

 

 

 
3、整体更美观、更能打动人。
因为主视觉部分更突出,让人很快感受到游戏的氛围、以及清楚具体上什么游戏,还增加了更多游戏元素,所以海报的代入感更强了。
另外配色也变得更舒适、更时尚,再加上各种细节的增加、排版版更加有趣、整洁,所以海报也变得美观了不少。
在答谢礼部分还增加了图片,不仅更有打动力,也比单纯的文字更美观、更丰富。

 

 

– 结语 –  
 
当然,不是所有客户的显性需求和隐性需求都是照我这么划分的,这不重要,重要在是, 我们要知道,便不是客户说啥就是啥,你一定要想得比客户多,要走在客户前面,挖掘出他们的隐性需求,你要知道优秀的设计该具备哪些特质。
 
想成为一个高级设计师,你必须具备正确理解设计需求以及准确表现设计需求的能力。 
 
 
原文链接:站酷
 
作者:葱爷  
 

转载请注明:学UI网》高级设计师最关键的能力是什么?

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

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

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

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




仪表盘(Dashboard)设计的6个要点,都帮你总结好了!

seo达人


仪表盘的3种类型

1、操作型Dashboard

操作仪表盘用于显示当前用户在产品中的状态,显示与时间相关的关键信息。

例如后台数据分析中,操作仪表盘包含:网站的活跃用户、热门社交推荐和每分钟浏览量等数据。

图片

▲ 在谷歌分析的实时仪表盘中,用户能一目了然地查看所有用户、新增用户等一系列数据。操作型仪表盘中通常包含一些简单的条形图、折线图等基本图表。

 

2、分析型Dashboard

分析型仪表盘用于向用户展示关键的数据信息,以数据为中心,并尽可能多地显示相关联的数据图表。

分析型仪表盘应该以关键的数据为中心,并尽量减少图形元素。

图片

▲ 在Manson Yarnell的仪表盘中,更注重数据前后的对比和关联性,并将这种关系通过图表的形式展示出来,通过对比,我们能更容易看到产品的数据情况,比如浏览量是比上个月涨了还是降了、涨了多少。

 

3、平台型Dashboard

平台型仪表盘用于让用户访问社交平台上与帐户相关的控件、工具和分析。

图片

▲ 在YouTube的后台页面中,通过简单的初始视图就能显示用户的最新视频以及每个视频的播放量等数据信息。

在侧边栏,用户还可以访问大量的工具和帐户控件,包括视频管理器、频道状态等,YouTube让操作变得简单,用户能完全控制。

 

仪表盘的6个设计要点

1、确定用户需要什么

首先要了解受众。因为只有了解用户,才能够回答一个关键的问题:用户希望从这个仪表盘中得到什么?

要先明确用户希望在仪表盘上想到看到的几个要点,然后应用F型和Z型阅读模式,构建相应的页面。如果仪表盘上的信息太多,有可能会让访问后台的用户不知所措。

通过将所有的信息和数据合理地组合到一个页面上,再使用适当的留白来平衡画面,为数据创造呼吸空间。

 

2、在仪表盘中添加互动

在仪表板上添加响应性互动,可以让用户自己决定去关注哪些数据。让用户能够控制仪表盘,很大程度上更符合用户差异化的需求。

▲ Cuberto将后台仪表盘设计成可以左右滑动的样式,这个设计有点像可以左右滑动的两块黑板,既可以看到两部分不一样的内容,也能通过滑动展开看到更多的细节内容。

 

3、以关键数据作为先导

有的仪表盘设计得很简洁,用大尺寸且加粗的字体来展示数据,让用户更清晰地明确信息。

图片

▲ 这个Dashboard版式时尚,风格上很简洁,有很多留白和加粗的数据。这样呈现数据可以帮助用户快速看到哪些内容是重要的,节省用户时间。

 

图片

▲ 整个页面通过清晰的图表形式呈现信息,我们能明确看到数据的变化情况,虽然没有使用太多的文字信息,但主次分明的数据做到了很好的透视。

 

4、规划仪表盘信息架构

在设计仪表盘时,考虑信息架构和层级结构,来确定需要哪些内容卡片以及这些卡片要放在什么位置。

图片

▲ 深色背景的使用在组件之间形成很酷的对比,关键数据占据中心位置。左侧导航栏和右侧卡片式信息在设计上遵循了标准的格式塔原则。

 

图片

▲ 这个加密货币仪表盘以账户余额为线索,将最重要的信息放在用户第一眼就能看到的地方,其他信息会根据内容重要程度,合理调整在页面的位置。

 

5、使用多样的视图样式

仪表盘设计也需要变化,通过使用不同的视图布局来保持整体的简洁。

图片

▲ 在这个仪表盘中,用户可以按日期筛选数据、在餐厅之间切换,还能看到关于预订、付款、员工轮班和外部供应商等很多种信息,同时整个页面仍然能保持很干净、简洁。

 

6、使用一致的设计方案

通常仪表盘中包含各种数据图表,设计样式上很难做到统一,但这并不意味着仪表盘不需要考虑视觉美观。

图片

▲ 协调的配色和多样的图表样式让整个页面看起来很有设计感,环形图、饼图和地图的搭配让数据呈现更丰富。

 

图片

▲ 这个仪表盘通过明亮、统一的配色,让数据图表更加清晰、整洁,导航更加明确。

 


图片

慢慢来比较快,希望对你有所帮助!

 

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

作者:Clippp

转载请注明:学UI网》仪表盘(Dashboard)设计的6个要点,都帮你总结好了!

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

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

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

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



这个简单的界面我是这样进行修改的

seo达人


图片

下面通过发现问题和案例修改来进行分析(案例来源于黑马家族内部学员的初次作业)。

 

发现问题

好了,看完修改前后的对比之后,我们开始进一步分析,从上到下一起来看一下吧!

 

头部导航栏区域

功能层面来说,发布既然运用高亮的处理,证明该功能是相对比较重要的,放在手势盲区操作体验不是很友好。

图片

右侧的两个功能图标距离太近,点击过程中容易造成误操作,两个图标的视觉不平衡,不能以高度来定标准,要看整体的面积占比。

图片

最后,发布、搜索、功能图标之间的间距没有做规范设计,导致设计不够严谨,视觉协调度和节奏感没有呈现出来。

图片

 

顶部分类导航区域

这个部分问题不是很大,类别之间的间距可以适当增加,如果是可以左右滑动的,末尾最好再新增一个,把可滑动的样式体现出来。

图片

 

Banner 图区域

轮播 Banner 图采用通栏的处理,会将整个界面一分为三(头部区域、Banner 区域、作品区域),如果界面边距较大的时候,这样处理不是很理想,会使得整个界面不够连贯。

图片

轮播点的处理不建议使用灰色来表现,不仅区分不明显,配色上面也显得不够干净整洁。

图片

Banner 图本身的质量也是需要注意的,站在输出作品的角度来说,图片的质量会影响整个作品的气质。而且这个图没有任何主题,设计的真实感无法得到体现。

图片

 

作品(菜谱)区域

整个界面篇幅较大的区域就是推荐的各类菜谱,第一眼看过去,是不是图片显得没有食欲啦!针对美食类作品,只有食物本身的食欲感才能吸引用户去点击学习。

图片

菜谱名称、作者信息、收藏与收藏数的显示亲密关系处理不合适,关联性被分断了。

图片

间距留白没有掌握好数字关系,显得比较拥挤。直角的封面图显得有些生硬,亲和力不是很强。

图片

 

底部标签栏

底部标签栏最主要的就是图标设计,图标设计的规范性需要注重一下。比如针对线性图标来说,描边粗细的统一、圆角值的统一和风格的统一等需要重点对待。

图片

其次就是点击状态和默认状态的区分,图标利用颜色深浅进行区分也是可以的,文字区域的区分也需要进行深浅的对比。

图片

以上便是针对这个界面发现的一些在 UI 层面的问题,接下来我们一起针对这些问题进行修改。

 

案例修改

针对罗列出来的问题,下面进行一些修改,设计属于主观表达,仅代表黑马哥自己的想法。不足的地方欢迎大家留言指正,互相进步。

 

头部导航栏区域

为了方便用户发布内容,我将发布按钮移出导航栏,放置在底部标签栏。将右侧的两个功能图标拆分为左右两侧布局,优化了间距和布局细节。

图片

功能图标绘制上面三条横线做了长短变化,显得更灵动。整体图标的高度要比通知图标的小一点,以此来平衡它们之间的面积差异。

图片

 

顶部分类导航区域

这个部分优化了文字之间的间距,然后通过字体大小和颜色深浅来区分点击和默认状态的差别,将短线装饰改为弧线,弧线作为符号基因运用到底部标签栏的图标设计中,这里是作为视觉符号的延续。

图片

 

Banner 图区域

轮播 Banner 图本身没有做,本期案例只是 UI 层面的修改。优化了 Banner 图的比例,采用 8:3 的比例进行计算,取 4 整除的高度数值。轮播点的设计通常有数字、小圆点、小短线、进度形式等,这里采用进度形式来表达。

图片

 

作品(菜谱)区域

这个部分调整比较大,从内容到布局结构都做了调整。首先将固定尺寸的封面图改为宽度固定高度自定义的瀑布流设计,满足用户的不同拍摄需求,对图片设置了圆角处理,增强亲和力。

图片

将标题、作者信息、收藏数据统计等信息进行整合,集中布局展示,增加内容之间的亲密关系。新增了标签,由于菜谱种类较多,通过标签更容易搜索到同类菜谱。

图片

收藏图标加数字来体现之前的文字表达形式,用户更容易理解,采用爱心图标既能表示喜欢也能带有收藏的作用,点击欲更强。

图片

单行标题适配为最多两行显示,方便用户为自己的菜谱名称增加修饰词。这里需要考虑最大值的情况,设计的时候需要体现出超出最大值的设计样式。

图片

最后就是选择了拍摄质量更好的图片来填充,作为作品输出来说,配图的质量还是至关重要的。来看一下这个部分的最终效果,对比一下就可以感受出前后视觉感的差异。

图片

 

底部标签栏

将发布按钮布局在中间位置,做突出形式,吸引用户发布内容,丰富平台的作品量和提高用户参与度。可以布局在标准的底部标签栏内部,也可以做凸出显示,这里尝试了两个版本。

图片

优化了图标设计,统一了描边值和圆角值,用小弧线作为视觉符号进行点缀。点击状态换成面性图标,区分更加明显,显得也更为成熟稳重。文字需要体现当前状态和默认状态的差异,这里使用品牌色来区分,也可以使用深浅不同的灰色来体现。

图片

 

完成

通过对发现的问题进行调整之后,完成了最终的设计案例优化。这个案例比较简单,通过案例想要说明的点是:无论简单还是复杂,都要考虑好每一个细节的深入,也要对每一个元素的设计有自己的设计想法。每一个界面都要体现出设计规范、设计质量和自己的设计态度,只有作品成熟才能说服别人,获得认可。

图片

本次案例修改的大体流程是:分析问题所在、组织优化思路、调整内容结构、设计高保真原型、填充内容完成最终 UI 稿。

图片

最后,感谢大家的阅读学习,希望对大家能有一定的帮助,后续将会继续带来更多案例的修改分析,我们互相进步。

 

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

作者:黑马青年

转载请注明:学UI网》这个简单的界面我是这样进行修改的

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

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

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

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



配色 | 总监说颜色丑,我调了调确实好看多了!!

seo达人


图片 
我曾经也碰到过这个问题,在动手之前,或许脑海里会有个大致的色彩感觉。但实际上软件一操作,发现怎么配都很难配出特满意的色彩。
其实这种属于正常现象,更多的是经验层面的缺乏,只要多练习,慢慢的这种眼高手低的感觉就会越来越少。
图片 
并且练的多了后,发现配色真的没那么难,只要有一点积累,有一点审美,稍微掌握一点方法,就能让自己在配色的能力上有个很大的改善。
图片 
审美跟积累很早之前的文章里头其实就说了,可以多建几个画板,把不同的色彩归类收集起来,分析这些色彩的饱和度及明度,逐渐感受到色彩的张力。
 
图片
图片 
人有着很强的适应环境及学习能力,比如你在一个地方呆长了,其实口音也会越来越接近当地。
审美也是一样,只要你不断地去收集、积累那些真的很美的图片,那么你的审美也会发生改变,自然也会越来越高。
比如以前你认为这样的配色就很美,视觉冲击力强
图片 
但后面慢慢发现,原来这种平淡的才是惊艳之作,非常的耐看。
图片 
审美提升上来了,其实剩下的就是靠大量的练习以及方法的积累。练习也很简单,无非是多做一些Redesgin,多做一些概念方案。
Dribbble上也有非常多的案例可以参考,比如下面这种
图片
提升审美需要依靠点滴积累。
而方法的积累,其实真的就是三点。只要把这三点掌握好了,配出来的颜色都不会太low,显得较为高级。 
 

第一点:颜色不要花

有些同学总是认为配色嘛,肯定要多配几种颜色,才会美。
但其实错了,颜色配的越多,越显得脏乱,并且对设计师的色彩能力也要求越高,ta必须要把所有的颜色选到一个最大的公约数,搭配起来才能非常时尚。
图片
一般能像上面这样的,能同时hold住三种颜色同时在一个画面上的,大多数也都是王者段位了。
如果自己作为青铜、白银级选手,我建议还是首先要从控制颜色的数量还是入手。 
 
控制的不好,就是下面这个例子:
图片 
总结:控制色相数量,增加色彩明度梯制  
先把颜色的明度系数理解到位了,再理解不同色相带来的情绪。同一个画面色彩越多,越难掌控,而且也会让人视线越不知道放哪,产生一种烦躁焦虑感。
比如看看这些作品,高级都是因为色彩被控制的很好
图片
图片
图片 
再来几组比较花的,是不是就要掉档次的多?
图片
图片 
 

第二点:不要脏。

好看的颜色会让人引起共鸣,不好看的颜色一眼都不想再看。脏脏的颜色会让人觉得这个东西不高级,不够养眼。
那么什么颜色会显得脏?带大家看几个辣眼睛的:
1、饱和度中性的重色 ❌
图片 
2、饱和度过高的中性色 ❌
图片 
3、饱和度过低的浅性色 ❌
图片 
上面这几种辣眼睛的情况,咱们要尽量避免。
 
重色要么为偏灰色,要么带强颜色属性;中性色饱和度尽量需要往下收,收到直到比较温和为止;浅色的色彩尽量明快饱和度高一点,不要过灰,不然也会显得脏。
比如下面这些改好了的。
1、重色系 ✅
图片 
2、中性色 ✅
图片 
3、浅色系 ✅
图片 
再对比一下上面的几个辣眼睛色块,发现是不是差别还挺大。
 总结:根据颜色明度来控制颜色的饱和度  
说到这儿,其实学过美术的同学应该都知道,这个跟画色彩作品差不多,亮部尽量多给一些鲜艳的色彩,中间层尽量灰下去,暗部色彩可以稍微丰富一丢丢。
图片 

第三点:颜色要有主次之分,什么是主色,什么是次色,要分清楚。

在实际业务场景,非纯工具型应用,很难只用到一种色彩,因为不同的功能需要使用不同的色彩来进行区分。
因此大部分实际的界面设计需求当中,我们还是要用到两种到三种的色彩。
图片 
不过在搭配的时候,需要注意的是,颜色的主色跟次色一定要显而易见可以区分得清楚。
其中主色应该占据60%-70%及以上的面积,次色加在一起,不可超过主色的面积区域。
图片
这样做的原因,也是为了防止眼睛失焦,导致审美疲劳。色彩越多,主次越难分清楚,眼睛对于信息的视觉需要越耗精力,所以自然看着不舒服。
总结:让页面的色彩主次显而易见。 
 
这一点在室内的装潢上,也有讲究。
室内设计讲究的主次色搭配,黄金配色比例70% : 25% : 5%;
图片 
70%的基础色,包括墙面、地板和天花板。一般情况下,同一空间的这三者颜色尽量控制在2种,最多不能超过3种(毕竟现在很多人喜欢涂一面有色的墙)
图片 
比如你发现这些很好看的室内设计图,都差不多是这样。从室内设计的装潢里找取配色灵感,也是不错的一些选择。
图片
上面的这些,就是最重要的三个方法。把这三个方法掌握了,其实配色起来就容易多了,而且不容易犯错误。 
 
另外,好的习惯也很重要
另外方法很重要,但习惯也不可忽视,所以还是得养成一些比较好的配色习惯,这样才能最快的成长,巩固自己对于配色的认知以及理解。
比如多收藏美图,提升审美。这点虽然很不起眼,但对于培养自己的审美,是有着绝大的好处的。在收藏了100个不同色彩的图板之后,相信你就能感受到其中的差距了。

图片

 

 

另外在初期阶段,哪怕按照上面的方法去调整了。还是感觉自己配出来的颜色总是缺了点什么。那么不妨去吸一吸别人的颜色,在别人的颜色上借鉴。

图片

图片

 

 

颜色无非就那么几种,多吸一吸也不是啥坏事。
比如你现在要让我设计一个绿色界面的UI,我肯定会先去吸一下微信的绿色,跟360的绿色,然后结合这两个绿色,做一下微调,搭配出一个崭新的绿色。
图片 
毕竟是在巨人的肩膀上前行,自然也不会太差。 
 
还有,理解色彩的情绪
最后一个,就是配色前的思考与判断也很重要,色彩的情绪需要与实际的场景想吻合。不要做出跟场景预期不符合的颜色,高端场景用大紫大绿不合适。

图片

 

原文地址:UX小学(公众号)

作者:小学鸭

转载请注明:学UI网》配色 | 总监说颜色丑,我调了调确实好看多了!!

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

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

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

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



五个案例教会你“西文中用”字体设计

seo达人


图片 
 
作品均来自互联网,侵权删。
大家应该有所发现,有很多英文的影子存在,不管是添加局部的特征,还是直接用英文来拼成一个完整的字,这四组字体都有用到英文来做结合,同样的我们也可以采用这种手法来进行设计,这种处理方式的好处就在于不用我们再去冥思苦想反复横跳去寻找笔画的特征了,英文字库自带的特征就足以,且英文字库的数量和种类都非常庞大,各种姿势应有尽有,就看你怎么去开发。 
 
   
所以我们此次分享的方法就叫做“西文中用”。本文中的案例采用我前段时间的一篇站酷首页作品来作为思路分享与讲解,下面我们直接进入分享环节。 
图片 
 
那么刚刚提到我们主要需要解决的就是结构和笔画特征,结构我们可以采用垫底字的方法来快速解决,笔画特征自然是通过英文字母来处理了,第一个案例我们先来做一个简单一些的黑体类型的字,先放出最终稿看一下效果。 
图片 
 
图片
 
首先,我们可以选择一个思源黑体作为垫底字来解决结构部分的基础问题,其次,我们需要对英文字库大致的观察分析一下,来提取我们所需要的基础笔画,以便于我们后续的拼字过程,那么最常用的就是横、竖、撇、捺、点,以及横竖转折的处理了,其他的部分我们都可以基于这些笔画来进行延展出来。  
 
图片 
 
横的笔画不用想的太复杂,直接提取出它的粗细画条直线即可。 
图片
竖笔的部分可提取的处理就稍多了一些,这里我们先都列举出来,至于最终会用到哪个还要等具体拼字的时候才会确定。 
 
图片 
 
撇捺点的部分可选项不是很多,这里就放到一起来提取了,且这三个笔画的处理都可以更加灵活一些。 
图片 
 
转折处的处理同样需要进行尝试后最终敲定,(这里捺的处理我们把撇笔画直接镜像即可)。 
 
图片  
最后我们把笔画汇总一下,形成自己的一个笔画素材库,就可以开始拼字了。 
 
图片 
 
首先搭建基础的结构,但结构可能离我们想要的效果还有些差距,所以下一步还需要对结构进行一轮微调优化。 
图片 
 
微调结构,使整体的外部撑得更饱满,接近标题字形的处理方式,该对齐的对齐。 
 
图片 
 
进行一些不同笔画处理的尝试,这里就不一一去尝试了,大家在做的时候可以先选择一个字来进行尝试不同的处理方式,这样会节省很多试错的时间。 
图片
最后,选择更为合适的一组,调整一下细节,对齐笔画,统一粗细,统一处理方式等。
图片
图片
图片  
 
虽说有了自带特征的英文,我们可以不用过多去思考笔画的造型,但还是要多去尝试不同的造型和处理方式所带来的整体感觉,下面我们继续。  
 
图片 
 
第二个案例我们再做一款黑体类型的字,相较上一款会稍微复杂一丢丢,但方法都是相通的,我们往下来看一下这组字。 
图片
图片 
依然是寻找一个垫底字,以及分析英文的特点,这种方法一定要把英文自带的最大或者最好看的特征给呈现出来,不然我们选择西文中用就毫无意义了。
这里依然可以选择思源黑体作为垫底字的,根据英文的粗细程度,我们可以选择粗一些的。且可以适当调整垫底字的高矮胖瘦来达到自己想要的效果,这里我稍微压扁了一些。 
 
图片 
 
提取出基本的笔画特征,这里我就不再列举提取来源了,直接以文字的形式描述吧,大家可以一一去对照着看一下。
横笔的部分除了常规的横线,还可以提取出大写字母E的特征,上下是有一个角度上的呼应的。此外就是蜜蜂二字的虫字部分最下边的连笔处理,选择了数字7放倒的形式,算是做了一个特殊的处理。 
 
竖笔的部分除了常规的竖线还可以选择小写字母t的形式,也算是与横笔的特征做一个统一。
撇捺点的形式依然比较灵活,数字7的竖笔,数字1的左上角部分都可以作为撇捺的处理形式。小写字母i上方的点或是短竖线也都可作为点的处理。
转折处的处理会稍微灵活些,可以有一个比较多的尝试。
图片
下面,我们开始搭建基础的结构以及尝试笔画的初步形态。 
图片 
 
大体的感觉出来了,但个别部分的处理还是有些僵硬,如杜字的木字旁,捺的笔画处理,鹃字右侧鸟字右下的横折钩的笔画,都比较呆板,所以针对这两处进行优化。优化的大体思路可以考虑结合更多的英文特征进来。 
图片 
下面我们还需要对结构进行一轮优化,使整体更加饱满,整体的布白也可以进一步优化,说人话就是调整笔画的位置以及粗细,来达到正负空间更均匀的状态。
图片
最后可以进行一些不同的细节小尝试。
图片
尝试过后发现横竖转折处不适合做其他处理,所以还是回到初稿,鸟字上方的一瞥原本是竖线的处理改为圆点,与蜜字顶部的一点可以做一个区分,值得一提的是鹃字左上方的口字部分直接替换为数字2的处理解决掉了比较僵硬呆板的问题。 
图片 
图片 
图片 
 
图片  
 
第三个案例我们来做一宽宋体类型的字,相较前面的两款字会需要更多些思考与调整,照例先看最终稿。
图片 
图片 
先来看一下这次选择结合的英文字形以及垫底字的选择,垫底字肯定是要选一款宋体了,这里我选择的是一款日本的字体,英文选择了一款特征非常强的字形,尤其是连笔的处理效果非常好,所以这也是我们这款字结合的重点,要想方设法的搞里头,搞不里去就自己找原因。
图片 
继续拆解基础笔画,这部分不再多说了,相信大家对这一步已经轻车熟路了。 
图片 
 
乍一看好像英文的最大特征并不能结合多少,这时候就要去思考问题了,像英文中的一些细线的变化非常像连笔的形式,所以我们可以在中文当中去寻找一些可以做连笔的位置,来借鉴英文的特征结合进去。可以结合垫底字大致画一下草图进行尝试。
图片
不需要画的很细致,只需表达出笔画的大致的走向,重点是连笔位置的造型要清晰出来,虫字没画草图这里先不讲。 
 
 
这组字可以做的瘦高一些会更能凸显英文特征的气质,所以我们可以适当调整一下,下面开始搭建基础字形。
图片
绿字左下的连笔不太合适,有点糊掉了,虎字的连笔有些问题,最左侧的竖撇没能体现出来,所以要重新考虑连笔的位置,甲字的造型也不是很美观,虫字的下边在开始观察英文的时候就发现了小写字母g的下边可以替换,所以草图部分就不再做过多考虑了。 
 
图片 
 
下面针对出现的问题我们逐一解决掉,绿字左下的连笔去掉,正常做,虎字的连笔可以考虑一个另类的位置,从最外侧的竖撇最下端开始连,会很大程度上避免糊的问题,甲字上半部分的处理方式从字母P中提取到灵感,从而做出结合。
图片
图片 
 

小结Tips:

不难发现,这种方式其实并无太多难点,我们再来回顾一下重点。
1.英文的选择很重要,要具有鲜明的特征。
2.与中文做结合时要把英文最强的特征结合进来。
3.同一个笔画可能有不同的处理,要多去尝试,择优选择。
4.当中文中无法直接结合英文时,要考虑适当变形中文笔画,或是结合英文特征去进行处理笔画。
5.横着看竖着看,镜像看倒着看英文,会得到不一样的结果。
下面我们再快速的简短的再分享两个案例,因为方法都是类似的,磨叽多了你不烦,我还烦呢。  
 
 
图片 
 
第四个案例我们再来做个特别一点的字形,英文字形越复杂,我们结合起来的困难也就越大,当然困难点是各不相同的,照例看一下最终效果我们再来解析。
图片
图片 
通过上面的最终效果大家应该看得出来了,这一组字主要难在曲线的调整上,我们来具体看一下所选的英文字形以及垫底字的选择。
图片 
可以观察到这一组英文字的特征是极其强烈的,分析其主要特征,整体字形瘦高,非常多的位置都是类似S形的曲线,且带有粗细变化,这是主要难点,也是需要结合的一大特征。垫底字依然选择思源黑即可,YYDS。下面我们拆分笔画,调整垫底字。 
图片 
 
下面进入拼字环节,根据英文的特征,我们把中文的结构也设定为瘦高的,适当调整垫底字。
图片 
 
这一组几乎没有什么尝试的过程了,拆分出的笔画拼出的基础字形特征已经足够强烈,说几个需要注意的点,枯字右下的口字部分的处理,这里为了契合整体,选择把正常的口字设定直接放倒并拉伸至合适的比例,随即调整比例以及笔画的粗细程度,以达到与整体协调的粗细。这里把原字库的锚点情况给大家看一下,你们感受一下。 
 
图片 
 
可以看到右侧我是简化了非常多的,否则无法进行下去…
图片 
 
其余就没有过多的一个调整了,都是类似的方法去简化曲线,使其更好调整,横笔的特征可根据整体的空间来调整大小,如果全是一样大的,则非常难摆放。
图片
图片 
 
最后一组案例我就不再讲解了,因为都比较简单,直接给大家看一下具体使用的哪些字母。 
 
图片 
 
图片
图片
图片 
 
即使只是用了几个基础的笔画来回使用,最终的效果也是很有特点的。 
 
 
图片 
 
虽说看起来没什么难度,因为操作上没啥难点,主要还是在于多去发现,多去观察字母与汉字笔画的关系,甚至这个思路可以延伸至任何地方任何事物,都可以成为你处理笔画的一个思路来源。 
 
图片 
 
知道你们对素材感兴趣,后台回复666可获取字库安装包,不止文中提到的这些,我又收集了一些适合西文中用的英文,都给你,你要的我都给你。
好了,这次的分享就到这里了,如果大家感兴趣,可以去我的站酷看更多案例,站酷id:猴子设计,老铁们我们下次再见,告辞! 
 
 
原文地址:胡晓波工作室(公众号)
 
作者: 猴子
 
 转载请注明:学UI网》五个案例教会你“西文中用”字体设计

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

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

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

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


这几年,一直备受关注的8pt网格设计系统,究竟是怎样的?

seo达人


图片
Photon Design System
比较知名的 Audi Design system
图片
Audi Design system
当然还有一些公司,如airbnb,他们设计体系也是基于8网格为基础来定义的。
图片
Airbnb Design Language
看到这,大家是不是很想了解8pt网格到底如何构建一套强大设计系统?底层逻辑是什么?为何诸多大厂都选择这个数字?下面我们一起来揭晓。
为什么是8pt网格系统?
图片
首先这里给大家介绍下pt 这个单位,pt是“点”的意思,一倍图情况下1pt=1dp=1px,所以8pt(8点)网格系统,我们一般默认情况都是基于1倍图来进行设计的。
图片
大多数屏幕宽高数值几乎都能被8整除
如果用数字8作为设计中最小原子单位,可以很方便的缩小画布的设计尺寸,8/2=4、4/2=2、2/2=1。如果从10、5、6这样的数值开始,你缩小到的网格单位可能存在小数点的像素,一般不推荐这样的数值进行设计。
下面大家看一个图
图片
来源网络
第一排使用基于8pt的网格系统,下面一排是基于 5 为单位的网格系统,当他们分别适配到对应的倍数时候(0.75、1、1.5倍),下面一排就会出现次像素。如果使用基于8pt的网格系统,几乎很少遇到次像素的场景。
如今,屏幕碎片化时代,多终端设计需求层出不穷,为了能确保多终端适配更灵活,基于8pt网格的设计系统已成为诸多设计师的共识。
如何应用8pt网格?
图片
如何将8pt网格贯穿整个设计系统里面?这里首先需要创建一个基于8pt的网格系统。有了这些数值,那么下面就可以根据定义出来的数值去创建分子组件甚至设计最终的页面。
图片
Google Materials Design 基于8pt网格布局设计,下面我们就基于8pt网格系统的规则,给大家演示如何构建基础层设计框架,这部分也是最重要的。

 

#1.排版

图片
来源网络
如何将8pt网格应用在排版中?很简单,只需要将字体行高统一定义基于8pt网格的增量,就是8的倍数,这样文字排版就能对齐到基于8网格的画布中。

 

#2.图标

图片
图标的大小尺寸定义,也是需要基于8网格来定义。就像右侧基于8网格的图标尺寸,在排版布局时候刚好能够对应到网格上的。

 

#3.阴影

图片
如果需要定义阴影数值,那么阴影也是需要基于8网格系统来定义。

#4.圆角

图片

设计系统里面所有涉及到组件圆角值,都要基于8网格来定义。大圆角一般会用在页面级别的组件设计,比如沉浸式浮层或者弹窗等

 

#5.栅格布局

图片

包括整个系统页面级别的布局,都需要基于8pt网格来建立规则。上图是web端和移动端基于8pt的布局系统,需要确保水槽和边距是遵循这个规则的。

图片
最后,在项目开始的前期,一定要基于8网格系统设计,来将原子级和分子级的组件基础打牢。因为后期开始大量页面设计时,涉及到多人协作,甚至多团队。

以上就是一个8pt网格设计系统的大致思路框架,当然除了上面这些,一个设计系统里面需要涉及到8pt网格系统还有响应式布局等,大家先一步步深入了解学习,将这套理念应用在项目中,发挥最大价值。

最后今天既然讲到了设计系统,我正巧也找到了iOS15的figma格式的UIKT,是在线版本的,可直接打开。大家可提前研究下iOS 15的一些新的规则与变化。

图片

图片
领取方式如下:公众号后台发送 iOS15 即可获取当前地址

 

原文地址: 功夫UX (公众号)
作者: 功夫UX
转载请注明:学UI网》这几年,一直备受关注的8pt网格设计系统,究竟是怎样的?

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

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

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

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


完蛋了,这个需求的颜色没选好,结果不能休息了!

seo达人


01 颜色容易用脏

这是一位同学临摹的练习:

图片

整体一看还是比较ok的,不过仔细来看有一个问题,就是冰淇凌的脸有点脏了,我们对比下原作:

图片

脸部我一般会用偏白一点的颜色,如果要白不白,要紫不紫,卡在中间就有点像中毒了一样。
其实很多人都容易把颜色弄脏,尤其是橙色、黄色,比如下面这个练习,颜色也稍微有点脏了:

图片

我们拿出一个颜色来看下,这个渐变颜色的暗部有点靠右下了:

图片

如果我们把暗部颜色往左上调整一下,就会好一点:

图片

当然,我最常用的方式,还是去改变暗部颜色色相,把黄色色相往红色靠,这样颜色不需要加太多黑色,就会更纯更干净:

图片

我们看下三个颜色的对比:

图片

最后一个会通透很多。

 

02 颜色色相选取问题

最近在做标签的时候,设计师选取的颜色不是特别好看,反复优化之后,发现还是走不出原本的感觉:

图片

其实我们很多人都会有这样问题,在选择颜色时候从自己脑内存中调取,但是调取的大部分颜色都是比较正的色彩,正红、正蓝、正紫,最后的效果就会不太理想。
其实我们平时也会接触很多色卡,但很多人一到选色的时候,还是习惯自己想着做,其实随便在网上找一些好看的颜色:

图片

咔咔一吸,然后再根据自己的风格一微调,我觉得效果肯定能比普通的颜色好一些,我们看下对比:

图片

所以,如果自己选不好色相,一定要多找参考,网上的色卡真的太多了,参考起来!

 

03 颜色对比度问题

还是最开始那组临摹练习:

图片

我们看下这两个图标,有没有什么问题:
会不会觉得第一个有点糊?其实就是因为第一个图标两个面对比不够,而第二个铃铛,面与面的颜色对比很强,就会比较清晰。
我当时在做的时候,这个图标也调了很久,我们看下对比效果,原作的明暗对比会相对明显一些:

图片

明暗对比是非常重要的,还有在一些材质上的作用也很明显,比如金属,我们看下我这个火箭优化前后的效果:

图片

之前就是明暗对比不够,导致很糊很平,拉强对比后,立马清晰立体很多!
所以,颜色对比度,相当重要了。

 

总结

以上就是最近对颜色的一点小感悟,希望对大家有一点启发和帮助,我们下期见啦!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》完蛋了,这个需求的颜色没选好,结果不能休息了!

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

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

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

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


B端设计指南 – 栅格的定义

seo达人



为何会有栅格?

早在平面设计开始之初,就有对“栅格”的使用记录。(不过那时不叫栅格,而叫网格)因为印刷机器以及切割工具的限制,导致在页面的板式设计需要一定的出血线用于防止书籍内容的缺失,因此出现了当时非常火爆的《平面设计中的网格系统》一书。

图片

虽然这是一本非常老的书,但是设计本身就是相通,将其核心思想用在图标设计、网页设计、B端设计当中都有着明确的指导意义。

而在设计(网页端、桌面端)产品时,对于空间上的理解,一直以来都是令人头疼的问题。

我们将屏幕当中的设计空间分为 横向 与 纵向 两个维度:

图片

横向:

由于大多数显示器都是宽屏的形式,导致我们大多数页面内容都是通过横向的方式进行列式排布,也就导致纵向导航、二三级内容分布较多;而市面上所要兼容的横向尺寸较多,大致分为:1920、1440、1366、1280,而怎样将如此多的尺寸,摆放不同的元素,这仿佛才是设计的难点。

纵向:

屏幕的纵向的空间同样十分关键,当内容在横向无法满足时,则会增加屏幕纵向的内容量。但是我们可以通过浏览器的特性,纵向的内容通过滚动条进行收折,进而实现兼容。

 

栅格的定义

前面说了这么多,我们来聊聊栅格的定义。

栅格:是对界面当中元素横向排布的一种模式,主要用于大型区块间距的排列,不适用于 图标与文字 间隔的小型元素。

图片

这里有两个重要点:

横向排布:代表着栅格的用法,这也是为什么栅格都是一列一列的原因。

用于大型区块:不是任何内容都可以用栅格,比如在 卡片当中的图标、文字,更多是要分析整个卡片,将其看作一个整体,如上图。

 

栅格的组成形式

在一个常见的栅格当中,一般分为 页边距、水槽、栅格宽度:

图片

页边距:是栅格与外层信息的保护区域

因为在整个栅格系统当中,除了栅格之外,往往还会有其他的内容进行展示(如上上方图,栅格日常的使用页面),而我们正好可以通过页边距的方式,将其进行区分。我们以常见的B端界面为例,通过页边距可以将侧边导航与内容页进行区分,保证页面间的亲密性,常见的页边距尺寸一般为 20px、24px。

 

水槽:是确定栅格宽度间的固定间距,通常是帮助栅格内的元素进行更为合理的排布。

水槽目的就是为了统一元素间的距离。比如现在页面当中有两个卡片的内容,而使用水槽,我就可以将这两个卡片的内容,确定其间距(再次强调栅格用于确定横向内容)方便栅格当中元素的信息排列。

 

栅格宽度:是栅格当中内容所占的基本宽度,一个栅格宽度往往是通过 内容宽度、页边距、水槽 排除过后所剩的宽度平均得出,一般会分为 12栏、24栏 两种方式。

栅格宽度的确定,其实就是一个数学题,先给你一个公式(不建议使):

(A×n) – i = W

A:一个栅格单元的宽度;a:一个栅格的宽度;n:正整数;i:水槽宽度;W:页面的宽度。

虽然公式好像是万能的,但我不喜欢死记硬背,来深入讲一讲这个公式背后的逻辑和使用方法。

 

以1440的页面为例,通常B端产品左侧会有一个导航菜单,假设为 200px,因此整个栅格的内容页则为1440 – 200=1240px。

图片

然后设定页边距宽度为 24px,一个栅格会有两条页边距,剩下宽度则为:1240 – (24*2)=1192px

图片

接着设定整个栅格为12栏,水槽宽度为8px。因为水槽位于 栅格 的左右两侧,也就意味着水槽的数量会比栅格少一列(别问为什么,问就自己去下面图片数一数)也就是1192 – (8*11)=1104px

最后因为在水槽已经确定栅格为12栏,整个栅格的宽度则为:1104/12=92px

图片

如果还不能理解,建议跳到开头,再看一遍。

 

这里有两个关键点

整个栅格的顺序不能乱:页面宽度→页边距→水槽→栅格宽度。因为我们的栅格一定是从大到小,从外到里,不然做出来的内容很容易无效。

将元素摆放在栅格中,还需要注意起始位置与结束位置。这里教你们一个口诀:起始在左,结束在右;换句话说就是元素的起始位置必须放在栅格宽度的左侧(也中的红线);

图片

结束位置必须放在栅格宽度的右侧(图中的蓝线)

图片

这样的方式也是为了避免很多设计师知道画栅格而不会用栅格,出现一些低级错误。

图片

关于栅格的定义就先聊到这,下期来与大家讲一讲关于栅格应用当中的自适应布局、响应式布局,以及其中的断点等内容,我们下期见~

 

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

作者:CE青年

转载请注明:学UI网》B端设计指南 – 栅格的定义

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

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

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

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



如何构建设计语言系统?

资深UI设计者

什么是设计语言?

设计语言是把设计作为一种“沟通的方式”,在特定的场景中进行内容与信息的传达。设计是介于科学与美学之间的一种艺术,是需要理性的去解决感性的问题。它和艺术之间的差别就在于“解决问题”。

设计语言有哪些?

设计语言最底层是项目设计语言,具有典型特征和主题,比如医疗项目凸显专业冷静,节日项目凸显热闹氛围。往上一层是产品设计语言,强调个性品牌,比如小视频的设计深色更沉浸,电商从结构到色彩都凸显热闹。很多产品随着发展,形成一些系列平台服务,平台设计语言确保服务“统一规范”。最顶层是生态设计语言,跨设备跨平台和硬件呈现的设计语言。

百度直播业务,从单一业务形成系列平台服务,囊括的不只是 B 端和 C 端用户产品,还有 8 大垂类蓬勃发展,以及跨业务多宿主的呈现。庞大的平台业务,特别需要建设平台设计语言。

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言?

所有的设计语言,都是服务于业务顶层战略发展。制定设计策略前,需对业务所在的行业背景、品牌战略、用户群体、流行趋势有充足的认知。当返工无数次还是没方向时,说明以下前四点需要再深入明确。

如何构建设计语言系统?来看百度直播平台的实战案例!

建立设计原则时(设计语言的标准),不妨尝试把品牌战略人格化,由所有人解决所有人问题的愿景,得出产品是一个解决问题的行业专家的身份,Ta 传达的气质是简洁大方的仪表,亲和有力的仪态,和专业权威的素养。

如何构建设计语言系统?来看百度直播平台的实战案例!

设计语言以现代轻奢风格为基调,它大简至美、配色和谐、材质考究,以独具特色的现代格调,构筑起一个充满质感又十分舒适的直播间,给用户一致、友好、有品的体验。

如何构建设计语言系统?来看百度直播平台的实战案例!

设计动手前,按照风格基调具象化拆解分析必不可少,每一个元素的表达手法都要定位清晰。

如何构建设计语言系统?来看百度直播平台的实战案例!

1. 至简 光影艺术图标体系

在图标的设计中,我们基于专业亲和的品牌理念延展出 2 个不同的方向。方案一以直线折纸与光影为视觉元素,呈现一个用心专业的态度。方案二以曲线雕刻艺术展现专业亲和的魅力。

如何构建设计语言系统?来看百度直播平台的实战案例!

图标体系化,多场景验证一致性,发现方案一不够极致,造型复杂;方案二具备良好的一致性,但破坏了物体固有的结构,影响识别度。

如何构建设计语言系统?来看百度直播平台的实战案例!

在一致性的前提下,尝试简化、提高识别度。巧妙的将光影和结构交汇,极简到 2 个图层呈现主体;语义清晰识别度高;角度渐变光影带来舒适亲和感,15°x 角度的精准把控传达专业的品牌特性。因此总结出图标绘制要遵循的法则为识别性、品牌性、愉悦性、一致性。

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

2. 和谐 家族感的色彩体系

a)标准色

初期直播品牌色继承百度 App 品牌色,随着业务逐渐中台化,需要专属直播色。运用色彩心理学传递给人不同的情绪及心理感受,寻找直播的专属色相,而活力、温暖的红色色调,更能体现亲和有力的产品气质。

如何构建设计语言系统?来看百度直播平台的实战案例!

红色也有冷暖之分,此时提高色相、饱和度的颗粒度,H 色相以 350°为起点,以 2°递增或递减,S 饱和度以 5°为阶梯,生成更多色阶(保持相同 B 明度 100),在多界面和真机验证,得出直播专属红(H350 S80 B100),冷暖适中符合平台属性。

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

b)协调的辅助色

同时,运用色环建立辅助色彩体系。H 色相以 350°为起点,以 15°递增或递减标准,创建 24 色相色板(保持相同 B 明度 100、S 饱和度 80);选取柔和与协调的类似色和邻近色作为家族色彩主体,调和互补色与对比色,平衡整体色调。因为不同色相的感官明度并不相同,校正每一个辅助色的 HSB,达到色彩感官上一致。

如何构建设计语言系统?来看百度直播平台的实战案例!

C)调色版

一般会有 2 种方法,一种是使用明度差获得统一性佳的调色板,优点是落地成本低,代码可直接实现;另一种则是微调饱和度和色相,获得鲜明的色板,可使用在插图绘制上。

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

3. 考究 新颖独特材质

亚克力,这种具有透明质感、光学品质的材质,在设计领域最早应用在家居设计上,被互联网设计师熟知是在微软的概念视频里,随之逐渐应用到 icon 绘制上,亚克力 1.0 版本背景和主体层次没拉开,2.0 版本更趋向加大不透明度和模糊值,达到清晰舒适又兼具艺术美感。

如何构建设计语言系统?来看百度直播平台的实战案例!

这种量身打造的稀缺材质运用在运营玩法上,如红包雨玩法,既能凸显平台专业用心的态度,又能强化用户消费行为转化,助力变现增长。

如何构建设计语言系统?来看百度直播平台的实战案例!

用户激励体系,采用 3D 玉石润泽质感+动态折射光影,体现有内涵不张扬的泛知识调性,凸显用户独特身份感

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

如何构建设计语言系统?来看百度直播平台的实战案例!

写在最后

在每一个小元素的创作中,我们都时刻谨记,无论是项目的主题语言、还是产品的设计语言、甚至是生态的,终点都是传达企业文化以及价值观。从战略层重构业务的认知体系,再将品牌战略人格化,才能够在茫然期产生真正的笃定感,逐步拆解设计目标和构建符合业务气质的设计语言,达到最愉悦的体验。

文章来源:优设 作者:百度MEUX

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

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

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



日历

链接

个人资料

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

存档