首页

排版法则

涛涛

制作作品集、UI界面设计、网页设计、运营设计,设计师都要注重设计排版,通过版式设计法则,让设计作品有精品感和品质感。


视觉设计排版:

第一步,先把文字内容做好排版;

第二步,思考场景设计与信息层级处理;

第三步,进行排版设计的布局;

第四步,最后做好色彩和细节的优化,从整体出发到细节处理再回归整体性的原则,做好包装的设计展示。






一 格式塔原理在排版中的应用



格式塔原理是 20 世纪早期的德国心理学家研究小组发现的人类视觉工作原理。人类视觉是整体性的,我们会对看到的事物自建结构,并且在神经系统层面上感知形状,图形和物体。「形状、区域」在德语中是 Gestalt,所以这些理论也就叫做视觉感知的格式塔原理。



格式塔原理的设计原则如下:


1. 邻近性原则

物体之间的相对距离会影响我们认知它们的关系。相互靠近的元素被认为是一组,那些距离较远的则自动划分为组外。整体看来,距离近的关联性更紧密。

下面左图中的圆相互之间在水平方向比垂直距离近,那样我们看到了4排圆点,而右图看成2列。



如何应用于UI设计:

邻近性原则,在网页端或移动端的排版布局中有非常广泛的应用。设计师应用此原则,调整距离或者用分割线等来分开不同设计模式的构建。此原理应用在设计中,界面层级好,视觉清晰。


按照原理,我们会将内容相似的元素位置放置得更接近,在 UI 设计中的卡片化设计,列表组合等信息整合设计都会应用到此原理。并且不同内容之间我们使用分割线,留白,卡片区分等方式来使不同的内容区分更为明显。




2. 相似性原则

格式塔原理中的相似性通常和邻近性原则一起运用在产品设计中。它指出了影响我们感知分组的另外一个原则:有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式,并且将它们与特定含义或者功能联系在一起。


如何应用于UI设计:

利用颜色,形状,大小,方向,以及纹理等视觉元素,组成相近的样式。UI 设计规范中的控件组合成的组件,大部分都会使用到相似性原则,统一视觉样式,来表达统一的功能性。




3. 封闭性

人的眼睛在观看时,大脑并不是在一开始就区分各个单一的组成部分,而是将各个部分组合起来,使之成为一个更容易理解的统一体。这个统一体是我们日常生活中常见的形象,如正方形、圆形、三角形等,让用户容易理解。



如何应用于UI设计:

这个原则也非常适用于图形用户界面的图标设计或界面设计中




4. 连续性原则

人的视觉具备一种运动的惯性,会追随一个方向的延伸,以便把元素连接在一起成为一个整体。下图是两个交叉的圆弧轨迹,人们往往倾向于使视觉流跟随着相同颜色的轨迹,而不会被干扰,我们能够感知这是两条弧线。


如何应用于UI设计:

连续性目前在 app 产品中应用非常广泛。比如在电商产品中 banner 区域的左右滑动交互模块,滑动组件和进度条展示。

主要应用范围如下:

1 导航栏中的连续性设计

2 卡片模块中的连续性设计

3 模块的连续性设计




5. 主体/背景

我们的大脑将视觉区域分为主体和背景 2 个部分。这个特征有利于我们对重要信息和次要信息的感知。

主体和背景的区别可以从以下两个方面来控制:

1 场景大小:我们倾向于将处于大场景中的中间小区域部分视为主体,而大场景视为背景;

2 层级关系:如果在同一个平面中,我们倾向于将处于视觉第一层级的物体视为主体。


如何应用于UI设计:

此原则可以帮助设计师在设计界面的过程中抓住用户注意力,并且让用户优先看到我们想让他们看到的事物。比如重要信息的弹窗提示,以及弱化背景从而突出内容等界面中都有运用到此原则。






二 移动端版式设计原则:



版式设计,在有限的版面空间中,将版面构成元素,如:文字、图片、线条和颜色等,根据特定的内容,进行组合排列,并运用造型要素及形式原则,把构思与计划以视觉的形式美感,表达出来。


一个优秀的排版要考虑到用户的阅读习惯和设计美感,帮助用户区分重点、提升可读性。遵循平面设计原理,排版中的对齐、对比、重复、亲密性 4 大原则。



对齐原则

对齐是版式设计的最重要的原则之一,对齐可以建立一种整齐的外观,带给用户舒服的一致性的浏览体验。基于从上到下,从左到右的阅读习惯,应用在界面设计中,一般是左对齐、居中对齐和右对齐,同时同一竖线上的元素,要保持居中对齐。




对比原则

做排版设计时,重点的元素通过尺寸、色彩、造型等引起用户关注,这样重点内容,才会突出出来。设计要有轻重缓急之分,不要让用户去找重点,Don't let users think,让用户顺利的接受重要信息。

例如:图片大小的对比,让用户感受到最重要的信息。




亲密性原则

根据亲密的原则来组织复杂的信息,将彼此相关的同一类的元素靠近,同时把远离不相关的元素,这样就可以大大提高界面设计的可读性。






三 作品集排版法则



设计排版法则:


1 左对齐

在页面排版时,将你的文字设置为左对齐。为什么?在西方文化中,人们的阅读习惯是从上到下,从左到右的。通过左对齐文字,眼睛能够更容易地找到边缘,更易于阅读。避免因为这个原因缩进段落的第一行。


2 使用一种字体

优秀的设计师在排版设计中能够完美使用两种字体,是因为他们能够把握和了解所选的字体的类型,并保证他们是互补的。

但是一般情况下,避免使用两种相同类型的字体。例如,不要使用两种以上的非衬线体、粗衬体或手写体。

使用一种字体,直到你能够很好的运用和掌握它。如:苹方字体或Dinner字体。


3 跳过一个字重

在改变字体权重时,从细体到粗体,或者从中粗体到超粗体。大师级的设计关键就是对比。

粗体和细体对比的标题字体组合,获得最大的对比。


4 双倍字号尺寸

当改变字号大小时,一个好的经验法则是,你使用的字号大小是现有字号的两倍或一半。


5 对齐到一个轴线

沿着一个主坐标构建你的字体排版,并将字体元素对齐到网络线。无论文字类型或大小如何,在垂直轴上,字体对齐轴线的左边缘。在水平轴上,寻找最佳水平元素,或对齐文字的大写字母字高,或对齐文字基线即可。


6 使用条框分类

使用形状/线条将相关的内容信息块进行分类编组。这样会使不同的元素排列很有顺序。


7 注意间距

段落排版中到处都是间距。如果文字左对齐。右侧会出现文字的参差不齐、起伏留白等。避免在段落的最后一行出现单字成行的情况,切勿使用强制对齐设置。

注意段落右侧的起伏形状,在一个句子中标点符号之间使用单个空格,以避免形状和角度不美观。

间距的重要性。越是间距接近的元素,读者就会假设在不同的信息块之间存在这一种关系。




最后推荐 优秀设计师的作品排版 :

如下图:来自国际化设计师 MIKE 的设计作品



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

作者:峻溪POINTVISION    来源:站酷


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

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

设计灵感与素材的极限管理

纯纯


这些年里,这款工具进行了快速的迭代和更新,响应设计师们的需求,不断完善功能,成为设计行业推荐率(NPS)最高的软件之一。

尤其是作为一款优秀的买断制软件,不仅定价合理,甚至 5 年来 ¥199 的售价分文未涨。 

而我同期开始用的 Ulysses(用它写了两本书,写过的公众号内容超100W字)、MindNode、Notability 等,全都在这期间从买断制改成订阅制,甚至订阅价格还逐年上涨??







我从来不吝啬于赞美优秀的软件工具,尤其是保持初心以纯粹的产品功能来服务用户的那种更甚。五年前我作为最早就推荐它的人之一,五年后我不介意再夸它一次。 

它就是 —— Eagle。 

Eagle官网:https://cn.eagle.cool/











前面说过,Eagle 是一个设计资源管理器,它可以做的事情非常多,但我不是要在这里写功能介绍的,而是来分享一下,我都用它做了什么。







2.1 图片采集 

图片采集是我使用 Eagle 的核心目的,他包含丰富的采集形式完美覆盖我的实际使用需要。 

第一类采集形式就是通过浏览器插件或截图工具,将网页中看见的图片下载到本地。 





第二类采集形式,则是通过粘贴花瓣或 Pinterest 的画板地址,批量采集该画板的所有图片。这是我最喜欢的功能,没有之一。







花瓣和 Pinterest 这类网站,真正的精华是优质用户自己收录的图库,而不是直接搜索出来的结果。批量采集,就是让我在找到优质图库后,用最简单的方式下载这些被精挑细选出来的图集。 

2.2 筛选排序 

因为批量下载很方便,我可以很快的针对同一类目收集出成千上万的内容。但同一个类目下载那么多图片或素材有意义吗? 

数量从来不是我追求的目标,我会将任何类目的内容数量进行精简,只保留其中最精华的一小部分,即使它们是由一批最优秀的设计师收藏的图库,我也只取精华中的精华。 

但是,光靠一张张图看过去打星再筛选,会把我累死。于是,我就会利用 Eagle 的筛选与排序功能,快速剔除劣质内容,缩小选择范围。 







比如之前我分享过的 UI 配图的素材,包含十几个颜色的分类和上千张精选图片。原始图片超过五万张,是我从上百个摄影画板里批量采集下来的。







应用到大小、尺寸排序,色彩筛选,星级筛选等多种手段配合,帮助我快速筛选出各自质量最好的 100 张图片。而这前后大概只用了两小时的时间。

2.3 资源管理 

通过前面两个功能,我收集和筛选了海量的灵感元素。但这么多元素我们不可能无序放置,需要根据一定的规律进行编组和管理。所以这里就要分享 Eagle 的资源管理功能了。 

Eagle 的资源管理包含三个方向: 

1. 普通文件夹:类似电脑文件夹的逻辑,可以进行排序和上下级设置,收纳 

2. 智能文件夹:通过一定条件设置,筛选出对应图片和素材的动态文件夹 

3. 分类标签:即可以作为分类来使用的标签系统,可以为一张图片或素材打上多个分类标签

我的资源管理方法论一直崇尚的是极简主义,能用普通文件夹管理的情况我就一定不用智能和标签。不是说这些功能不好,而是因为它们需要对素材进行二次的处理和维护,只有在必要条件下才会使用。 

我的素材资源管理是首先构思我会用到的几个大类,每个大类下会包含几个二级分类,即 Eagle 中的1级文件夹,然后再创建对应的文件夹并命名和添加色彩,比如下面示例。





不要奢望一开始规划分类能做到尽善尽美,只要大的方向上确定了,然后再根据日常收集的需要慢慢去添加下级文件夹,而这一级就没有那么严格的限定,用到哪加到哪。







只有在一些非常特殊类目下,我才会去为图片和素材增加标签,而不是为了打标签而打标签。比如我收集的学员作业也存在 Eagle 中,会包含课程期数、作业类型两个维度,我就需要用标签进行管理,方便我后续进行跨文件夹的查看与筛选。 

2.4 素材预览

除了基础的灵感图片外,我还往里面存了很多其它文件素材,包括但不限于下面这些种类。 







Eagle 能作为一个设计资源管理工具,并不是因为可以添加文件夹和标签,再实现一遍 MacOS 的资源管理功能。而是因为它支持多种文件格式的快速预览。 

它比 Mac 自身的快速预览更高效(后面会解释),同时作为双系统用户,我得以在 Windows 系统下如下图快速查看素材预览,而不是安装格式支持零碎的插件(或流氓软件)来实现。







尤其是 Sketch、XD、Mindnode 文件,有了缩略图,就不用通过打开源文件来查看内容。并且字体文件支持在目录中直接启用和停用,可以非常方便的实时管理本地字库,保证我在设计软件中只会出现必要的字体,而不会全部显示出来。

2.5 网址记录 

Eagle 还有个特别的功能 —— 网址记录,这也是我最常用的功能之一。 

早前有先用 Pocket 然后转移 InstaPaper 和 Cubox 来收录网上看到的优质设计文章,方便我需要引用原文和整理思绪的时候回看。







虽然最后采用的 Cubox 也是一个优秀的稍后阅读工具,但长期使用下来我还是想尽量打开少的软件来完成我的工作。所以,自然而然的,我还是把网址全部迁移回 Eagle 中。 

只要安装 Eagle 浏览器插件,我就可以快速收集网址到 Eagle 目录中,之后随时进行查看。 

可能有的同学喜欢用网页整页截图来收集文章,只是我不太喜欢用图片格式查看文本,所以这个根据个人喜好即可。

2.6 项目管理 

同时,我不止拿 Eagle 管理灵感和素材,也直接拿来做项目管理。 

在 Eagle 库文件进行团队同步以后,针对每个项目创建独立的项目文件夹,用来收录相关的文档、灵感图、情绪版、配图和设计文件。





尤其是项目前期收集灵感图和情绪板的阶段,多人共同收集和编辑的结果可以最方便的查看和进行评价,非常好的优化我们的协作流程和效率。 

2.7 作业评审 

作为一个设计讲师,要观察学生的作业和进行点评。自然而然,我也会优先将所有作业添加到 Eagle 中去。 

通过对每份作业前期的打分,标注,来进行后面点评课程的分享和讲解。





同时,这些收集的作业,需要在后续其它场景中作为正、反面的案例。所以对作业的评级和标签就变得必要起来,在相关场景下通过创建智能文件夹快速筛选出范围内的图例。 

以上就是我使用 Eagle 最重要的 7 个场景,虽然实际应用还远远不止它们,但因为篇幅关系就先介绍到这里。













Eagle 作为一款被我长期使用和推荐的工具,不仅仅是因为上面的使用场景,它们是结果。所以,我要从更底层的角度,来解释它的不同之处和特点。

3.1 独立的 Eagle 库文件 

从上线以来,Eagle 有一个饱受误解和诟病的底层设计,就是它的 “素材包” 文件 .eaglepack 。用户需要先创建一个 “库“,之后添加的所有素材、文件,都会被保存到这个库文件中去。







换句话说,相当于 Eagle 在你的电脑中创建了一个特殊的文件夹,用来保存你置入的文件。即使你添加的素材是已经下载到本地,它也会再 “复制” 一份到这个库中。 

很多设计师对这个逻辑感到很费解,为什么本地存的好好的,Eagle 要再复制一份,完全就是浪费系统资源和时间的做法。如果无法理解这个逻辑,就是不具备 ”产品思维“ 的特征之一。 

我们先从和多人举例的 Bridge 和 Lightroom Classic 讲起。







它们的运作机制,是通过运行该软件,来读取你的硬盘目录和对应文件。使用它们并不会额外复制文件出来,即使你在软件中置入素材,它们也只是帮助你正常保存到硬盘的对应位置。 

为什么这类工具会被我们放弃,有下面这些原因: 

第一,它们的核心一直都不是全领域的设计资产管理,而是围绕在 Adobe 体系下的照片、视频、矢量图等多媒体项目素材管理,尤其是摄影相关项目。 

第二,就像对比 Photoshop 相较与 XD 一样,庞大的软件体积和功能,对启动速度和硬件资源消耗带来没办法忽视的负面影响,降低操作的效率。 

第三,就是比较值得深入思考的地方,那就是管理范围太广。直接读取硬盘就是让所有文件夹被暴露在管理器中,多出大量非必要的目录和文件,严重增加我们的决策成本和管理成本。 

范围太大或自由度太高并不是什么好事,就像 iOS 的相册一样,它是个封闭的图片库,不像安卓一样读取其它硬盘文件夹,从而让相片的管理更简单明了。 

自由虽然可以做更多事,但这些没有必要的可能性增加就只会变成决策和行为中的负担。简洁明了,才是高效的前提条件。 

第四,就是设计文件的 ”预览效率“ 问题。不管电脑的性能怎么提升,大型位图的渲染都是非常消耗资源的工作。不管是动辄几 G 的 PSD 素材文件,还是高达几亿像素的超清图片,加载都是需要等待的。 

比如下方目录中的作业文件,因为很多同学导出画布不考虑图片质量尺寸,所以往往会出很多 1W*1W 像素以上超过 30M 的位图。





当这么多大型位图聚集在一起,Bridge 完全加载出它们的缩略用了整整 2 分钟的时间……虽然 Bridge 会让你觉得久第一次打开慢以后就好了,这个功能的代价是生成了大量的 ”缓存”,即这些缩略图会暂时保存到缓存文件夹中。







缓存文件都只是过客,在你格式化系统,换另一台电脑打开,或者缓存超过了上面设置的 50G,那么旧的文件就会被删除,你还是要重新加载该文件的缩略图。相信我,超出缓存容量是非常容易的事,即使你加到 100G 也一样。 

Eagle 的库特性,是在添加素材进库之前,会生成一个对应的缩略图文件,之后 Eagle 读取素材列表的时候就是加载这个只有几十 KB 不到的小文件,而不是解析原图。 

这种策略带来的帮助除了在文件夹之间切换高效自如,也对本地内存的压力有非常大的缓解。 

在一般资源管理中,一个文件夹内有几千张高清图片时,持续滚动到目录底部就会发现越来越卡,因为占用的内存越来越多,直至达到临界点释放掉上方列表加载的内容(上滚会重新加载)。相信有用相机的同学一定很了解这种感受。 

综合各种问题和影响,自建库,并为每个素材生成不会被删除的缩略图就是最好的选择。 

这不仅仅是 Eagle 一个工具的做法,即使 Adobe 也在 Lightroom 应用了相同的策略,新 LR 导入图片素材到它的自建库中进行管理,同时生成缩略图用于列表加载(降低高像素调节延迟)。而老版的 LR 虽然还没下架,但为它增加 Classic(古典) 的后缀,所以它们认为哪种做法更有潜力,你们自己也能判断了对吧?







3.2 为什么不能联网 

今天我们使用的绝大数软件都是 SaaS(微软:基于web的软件服务),自带联网备份和同步,但是 Eagle 只能保存本地却不符合我们的 “习惯”,这是为什么? 

因为成本是没办法控制的,重度用户成百上千 G 的硬盘占用,是不可能轻易使用云服务来实现同步的。这些动辄几 G 的 PSD 文件或其它大型设计文件,会让整个同步过程充满不确定性和冲突。 

同时,云同步是一种成本特别高的服务类型,和一般的云存储空间不是一种概念,想要大容量又要免费,是不可能的。Adobe 同步盘 1T 容量港区售价 68 港币,苹果 iCloud 同步盘是 2TB 68 元/月。 





算起来他们的价格并不贵,但一定要清楚 Adobe 和苹果云都是为了自家生态服务的,而且作为软件业巨头有自己的大型数据中心,降低云服务成本。类似 Eagle 这样的初创团队是不具备这种条件的,即使推出了,价格也不会便宜。 

可能还有人会对比花瓣 Pro,它就支持云同步。但是,花瓣 Pro 只是官方网站的本地客户端,更方便的访问自己的官网个人中心,无法收集和整理图片以外的其它素材,所以同步起来容易。





Eagle 的数据就只能保存本地,或者保存在笨拙的移动硬盘内,随身带着嘛?肯定也不是。 

库文件的另一个管理好处,就是方便做备份。在今天同步盘服务逐渐成熟的环境下,你可以选择购买类似 Dropbox、坚果云这类同步网盘,通过它们实现备份和多设备同步。



或者,可以购买群晖、威联通、极空间为主导的个人云盘硬件,实现空间更大、更灵活的使用体验。





如果有同学不知道怎么同步的,我会在后面分享。 

3.3 ARM 硬件的适配 

最后一点,就是对苹果 ARM 架构的适配了。在 Eagle 2.0 版本中,快速适配了 Mac 的新硬件架构,从而让软件的运行、读取效率远远高于上一个版本,做到了丝般顺滑的地步。





对软件本身的优化也是速度的保障之一,相信 Bridge 用的多的同学一定忽略不了它无处不在的延迟与卡顿。













4.1 Eagle 库的同步方法 

Eagle 如果要进行网络的备份和同步,那么一定要分清楚同步盘、网盘、移动硬盘的区别。 

其中,网盘和移动硬盘基本上是一样的,它们的使用特点就是我们要主动把要保存的东西,拖拽进硬盘目录内。移动硬盘备份速度还好点,网盘的备份就要非常久的时间。 

如果你有两台电脑,使用移动硬盘的方案就得一直随身带着,用哪台插哪台上。非常容易在第二天忘记拔掉,然后回公司的时候没库可用。使用网盘的方案,那就更不可能的频繁的备份和在另一台电脑中下载。 

类似 Dropbox 或 同步盘工具,就是用来解决这类问题的。简单点说,同步盘的原理就是本地安装一个同步软件和云端的服务器进行通信,这个同步软件会绑定相关的本地文件夹。于是,这个文件夹内有任何文件的变更,同步软件就会自动把变更的软件传输到服务器上。 

而同步盘的特点并不是只能客户端和服务器一对一传输,而是可以多对一同步。如果服务器内容更新,它就会把更新的数据实时推送给其它客户端,更新它们本地的文件。







通过这种模式,就能实现自己多台设备,或者团队多个成员设备的文件夹实时同步,无需你手动进行操作。 

当然,同步盘对服务器的资源占用与消耗远远大于一般网盘,所以基本只有付费的工具,而这种带给我们生产力的提升和数据安全的预算是有绝对必要的。 

如果使用苹果的同学,可以通过将 .eaglepack 保存到关联 iCloud 的文件夹即可(最好“文稿”里)。苹果系统就会自动开始同步,其它 Mac 电脑就能实时接收。 默认的空间肯定不够用,建议开通 200G 容量的服务。





如果用专业同步云软件,以坚果云举例,下载完客户端,只要完成关联包含 .eaglepack 的文件夹,那么该文件夹就会启动同步。再在别的电脑中安装坚果云,就可以把该文件夹下载下来并自动同步。







4.2 灵活使用网页采集

我收集灵感素材是非常有目的性的,比如一个项目需要的配图素材,我会一口气去收集几十张觉得合适的图。

Eagle 有一个浏览器的采集插件,这个插件非常好用。只要拖动浏览器的图片,就会出现对应的采集弹窗,把鼠标移动到对应目录上就可以完成采集。





如果你觉得整个页面的图片都想保存,也可以在插件图标中使用批量收藏按钮(或快捷键),就可以采集整个页面中的所有图片,以及通过尺寸筛选对应尺寸。





应对日常看到的优质作品、灵感图,也可以非常快速的实现采集。可以最方便的收纳我们自己的采集资料。

4.3 UI 灵感库的搭建模式 

作为移动端 UI 设计师来讲,收集日常见过的优秀 APP 界面,是必要的职业素养。而使用 iPhone + MacOS 再结合 Eagle 的话,这个过程就会变得非常的简单。 

首先以完整页面收集为例,之前看过不少人推荐使用 iOS 的跨设备复制图片到 Mac 中黏贴的操作,是完全没有必要的,因为一次只能复制一张截图。 

你要做的就是开启相册的云同步,日常使用 iPhone 时把想要收集的页面进行截屏即可。每过一段时间,在电脑的相册中打开 ”截屏“ 相册,就有你这段时间收集的所有截屏。框选相关内容,拖进 Eagle 对应文件夹中就完成收集,然后再删除原图。 





而且因为相册特殊的机制,直接拖拽出的图片是压缩后的版本,让截图的文件的体积大幅度缩小,从3M 变成 300K(完全够看),非常好的降低硬盘占用量。 

除了收集页面,更重要的 UI 灵感是页面中的 ”组件“,我们需要根据组件为目标去收集相关的案例。直接拖进整页截图的方式就不太合适,比如下面的瓷片区案例区。







所以,我们要开启 Eagle 的自带截图功能,并设置好你觉得顺手的快捷键。





记得打开第一个选项 ”弹出分类“,就可以每次截图后选择指定的文件夹。不管是你的截图,还是网上的其它案例,你都可以用最高效的方式收集这些组件样式,轻易搭建自己的组件灵感系统。





4.4 文件的自动导入

前面讲过,我会用 Eagle 来放 Mindnode 这类思维导图文件。但是,Mindnode 先创建保存,再拖进 Eagle 的步骤太麻烦了。 

所以,我正常新建并保存 Mindnode 思维导图会到它默认文件夹中,然后使用 Eagle 的文件夹检测功能关联它,之后所有保存的文件就会出现在 Eagle 的目录中。



之后,我编辑和查看老的 Mindnode 文件就在 Eagle 中进行了。这么做的好处,还可以让我使用 Windows 系统的时候能够正常预览思维导图。 

4.5 高效的字体的管理

Eagle 是可以管理字体的,我把所有正在用或收集的字体都放进了 Eagle 的字体文件夹中。



可能你们会有疑问字体丢进字库就行了,还管理它们干什么?或者说有字由之类的字体软件,用 Eagle 干什么。 

一方面是我会尽量精简使用工具的数量,另一方面,就是使用团队同步盘的时候,我们的团队字库是统一的,随时可以找到启用的,最快解决其他人的设计文件字体缺失问题。 

同时,当我在使用 UI 软件设置字体觉得选择起来太困难时,就会去关闭掉大多数最近不会用的字体。实现这个操作非常的简单,只要新建 ”智能文件夹“,并添加选项 ”字形文件“ 和 ”已安装“,那么启用的字体就会全部出现在这个列表中。







用一两分钟的时间就可以批量选择你想要停用的字体,右键停用即可,它们就会自动从智能文件夹中消失。你可以一直保留这个智能文件夹,每次清理只需要一两分钟时间。 













目前上方截图中的很多案例还不是最终的完整版,最近上海疫情居家隔离,大多数工作暂停中,我在闲暇时就开始重新整理 Eagle 库。因为以前堆积了很多冗余的东西,所以这次我把整体素材都导出后重新进行整理中,也是为什么会写这篇内容的原因。





Eagle 带给我最大的价值,就是为我和团队节省了海量的时间,让我有可以更快的找到参考素材,更快的整理分类,更好的同步项目文件。 

上面分享的很多体验和总结,都是在 5 年来长期使用中一点点摸索,适应,并形成习惯的。任何工具的使用与自己工作学习的结合,都是渐进磨合的,每个人都可以在这个工具中挖掘出适合自己的用法。 

但依旧要给大家一个建议,不要为了收集而收集,也不要沉迷与堆积素材的数量,让它为我们服务,恰到好处的出现在我们的实践过程中。

作者:酸梅干超人   来源:站酷

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

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

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

ui投影原理分析及常用投影制作方法

涛涛

通过分析投影制作原理,让我们更全面的了解投影及常用投影制作方法

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

作者:陈亚    来源:站酷


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

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

如何让我们的设计变得更精致

涛涛




什么是形式呢,就是组件在相同的功能和元素下,排版、视觉的呈现方式。形式的对比,就是在一个页面中,不同组件的呈现方式上是否能形成差异化,让页面看起来更丰富多元。


分析上方的案例,组件之间并没有拉开差异性,尤其在详情页中,剧情简介和观众影评,影人和剧照,设计形式接近一致,这就是一个不好的开端。


再看看一些拥有相同问题的设计案例:


仔细点观察就会发现,作为飞机稿,不是图片、颜色用得花哨就够了的,组件缺少差异性,设计感就完全无法体现。如果还没法理解,就再看看下面几个案例,是不是就没有形式强行重复的尴尬,表现得更合理:


所以针对作业中的问题,我们在这个基础上进行完善,第一步要做的就是在形式上做出区分。所以我们可以通过以下几个思路来调整第一页:

    - 头部分页器和下方的上映/即将上映过于近似,控件形式上需要作出区分

    - 图片太多,模块左右边缘都是图片,导致看上去呆板,要减少图片出现的面积

    - 底部新闻部分不能继续使用大图模式要作出调整


第二页的调整上,主要在下半部分

    - 演员和剧照应该有更加明显的差异

    - 评论和上方的简介这两个不同的组件,形式上却看起来完全一致


通过原型上的调整,就可以得到一个初步改版的样式,各个组件之间保证足够的差异化和识别性,可以观察看看是不是比原来的页面更合理了。


色彩对比是很关键的对比,色彩决定作品给人的第一印象。那么如何为色彩做出对比呢?无非就是鲜艳对比浅色、暗色对比亮色、暖色对比冷色,不用特意套用配色的理论,用比较直观的感受判断就可以。

开始配色的过程中,我们首先需要确定主色和背景色,原图中的主色棕色和背景色白色,搭配起来的效果给我们的感受并不强烈,所以我对原色的棕色做一定范围的调整。


然后把主色添加到原型中,并为相关的一些元素添加合适的辅助色。先看第一页添加后的效果。


然后我们再为原型增加配图,这里要重点关注,以 “作品” 角度切入的话,配图也是整个界面元素的一部分,包括它使用的色彩。如果一个界面中出现了多处需要应用配图的地方的话,那么不同的模块所使用配图的风格和色彩,也应该有一定的对比,而不是一种风格撸到底的。比如还是之前的这个错误的案例:

所以根据这个原则,我们加入配图后再看看效果:


如果头部我们用了色彩主体比较强烈的配图,那么在下方就应该用比较平淡简约的,做出明确的对比。


在第二页中也应用一样的方法,那么思路如下:

    - 头部作为权重最高的组件颜色要更突出

    - 头部背景和封面的颜色应该具有更大的对比,并能让文字更容易识别

    - 头部、剧照图片较丰富,所以在影人和用户头像中应该使用更简单的配图


整体增加配图后的效果:


到这里已经有了大致的设计效果,已经可以明显感觉到比之前的设计有更好的提升,但是,对比不是到这里就结束了,我们接着往下做。


文字对比是最容易被忽视的细节,很多设计师都认为文字只要看得清就行,样式变化越少越好,这是非常错误的思路。


文字样式的多少主要取决于文字段的类型和需要重点体现的内容数量,而不是没有理由的精简到最少。例如看一篇排版成熟的期刊或是论文,其中标题、副标题、正文、引用、标注等作用不同的文字段,都会有不同的样式来帮助我们去区分,如果从头到尾出现的所有文字都应用一样的格式,那么就毫无可读性。


文字的对比,主要通过以下几个属性表现:

    - 字号

    - 字重

    - 色彩


即:越重要的文字字号越大、字重越高、色彩越深,权重越低的则反之。


回到我们的案例,在原型阶段,其实我已经对文字做出了简单的对比处理,下面我们要进一步细化这个步骤。


修改的分析大致如下:

    - 分页器作为权重最高的文字段,所以模块标题不应该比它更显眼

    - 多段文本比标题类文字权重低一级,可以统一它们的样式并比标题稍弱

    - 注释类文字比多段文本再弱一级,用较低的灰度

    - 为评分、点赞数、展开等有“特殊性质”的文本增加色相


然后我们可以看看下面修改前后的对比:


通过正确细化文字的对比以后,就能真正让页面精致起来,具备丰富的细节。当然,对于文字权重的安排和思考会根据不同的思路和产品需求得到不同的样式结果,但绝对不能忽略这个过程。




通过正确细化文字的对比以后,就能真正让页面精致起来,具备丰富的细节。当然,对于文字权重的安排和思考会根据不同的思路和产品需求得到不同的样式结果,但绝对不能忽略这个过程。


投影的使用既是视觉样式,也是一个用来制造景深的技巧。只要在一个扁平的界面中,为任何一个元素添加了投影,那么这个界面就存在了上下的空间关系,处于上方的元素就会得到凸显,例如苹果官方应用中的案例:


既然是空间关系,就要有前后的落差对比,我们要为最重要的元素增加投影,而不是把它当成设计风格进行统一的添加。所有元素都带上了投影,就没有了对比,可看性也会大打折扣。


所以,在这些页面中,需要突出的元素分析如下:


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

作者:酸梅干超人    来源:站酷


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

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



UI元素的尺寸到底该怎么定?

涛涛



一、官方规范


对于刚开始思考 UI 元素尺寸的新人,通常第一反应都是去看官方规范,新人都以为官方设计规范的作用就是告诉你们元素的大小和怎么设置,只要看完了就能懂得如何设计 iOS 或 Android 应用。而实际上,这些规范并不能帮助你们解决这个问题,因为设计规范涵盖的内容远远比这些复杂,比如我们之前翻译过的 iOS 规范。



我们想要搞清楚 iOS 和 Android 官方元素的具体尺寸,最好的方法就是去下载它们的官方 UI-Kits,如下图的安卓组件库所示。



官方并不会提供一个列表,逐一罗列每个元素的长宽和其它参数,所以想要弄明白参数的问题,要自己在这两套素材库中选中元素才能查看其尺寸。如下图左侧这个按钮,我们就能看见它的各项属性:宽 359pt、高 57pt、圆角 14pt;右侧的 Alert 提示框则宽 270pt、高 230pt、圆角 14pt。



因为 iOS 组件库下载下来的都是 dmg 格式的文件,很多 windows 用户不知道该怎么打开它,这里只需要百度搜索「DMG 提取器/查看器」就能下载到专门的解压工具了。


在初期,我们想要设计出符合官方规范的界面,就可以严格照搬官方的元素设置。但是,即使官方的源文件所包含的元素及字体已经非常多了,在实际设计过程中,还是会出现它们无法覆盖的元素类型,需要依靠我们自己去给出尺寸。


还有如字体的应用,官方源文件使用的语言是英文,光是官方应用的两种 SF 字体,就包含了十几种字重,所以我们可以看见文字应用面板中密密麻麻的字体类型。在真实的中文设计场景下,我们是不可能照搬这种规范的!



所以每一个学习UI设计的新手,都必须要明白,官方的规范终究只是一种建议,我们可以选择遵守也可以选择不遵守。如果一味的照搬这些内容,我们是无法设计出有趣个性化的界面的,比如下面这几款已经看不到 “ iOS 设计 ”的应用。


官方的参数决定我们设计的下限,当你不知道该怎么做,或者设计的目标就是以系统原生的体验和视觉为准,那么照搬就行了!后面文章要说的,就是脱离开这些束缚之后,该怎么自定义 UI 元素的尺寸。



二、尺寸设置原则


UI 和平面不一样的地方,就是极其关注元素属性的具体数值。平面的排版无论是海报或画册,使用百分比、目测的形式就足以让我们做出很多优秀的作品,无需紧盯着其中出现的每个元素的长宽高的数值。而 UI 的设计中,无论字体、图标还是按钮,都需要我们严谨地定义它们的长宽高,如下图设计一个按钮的操作:拖拉出矩形之后,我们依然需要到属性设置的对话框中去输入精确到1pt的数值。


这么做是因为在电子屏幕中,图像的呈现是由屏幕中的像素点来完成的,像素点是最小的显示单位,一个像素只能显示一个颜色,所以如果设置了带有小数点的数值,那么这个元素的边缘就会虚化。所以为了避免这种情况的出现,我们就得用整数来定义元素的长和宽。


这当中还涉及到不少比较复杂的屏幕显示原理问题,尤其是和像素倍率相关的基础知识,我会在另外的文章里分享。


需要注意的是,文章中出现的所有尺寸数值的单位,默认以 iOS 官方规定的逻辑像素单位「pt」为准,即 XD 和 Sketch 默认画布的单位,若在 PS 中设计需要在这个基础上乘以 2。


只有分隔线,是唯一可以不使用整数的特例。因为 1pt 的分隔线看起来会非常粗,一点也不精致,感兴趣的同学可以自己在 Sketch 或 XD 中画个列表然后用 1pt 的线条做分隔,再导出到手机里观看效果。即使是官方应用,也主要使用 0.5pt 的线条做分隔。


无论是在 iOS 还是在 Android 的规范中,都提到过使用 8 x 8 的网格做辅助,这导致网上有很多片面的文章会反复强调对元素的尺寸使用 8 的倍数。


  • iOS: 使用 8px 网格系统:网格系统可以让线条和图像内容在所有尺寸上保持清晰,无需太多的修饰和锐化。将图形边界对齐到网格上,减少按比例缩小图像时出现的半像素和内容模糊的情况。

  • Android:所有组件都与间隔为 8dp 的基准网格对齐。排版/文字与间隔为 4dp 的基准网格对齐。在工具中的图标同样与间隔为 4dp 的基准网格对齐。


实际上,我们在真实的设计环境中,建议大家使用 4 的倍数作为一般元素的尺寸倍率即可,如 8、12、16、20、24……等,它的好处我会在后面的文章中做说明。如果发现 4 的倍数无法满足某些特定的需要,如:多 4pt 太大,少 4pt 太小,那么我们就可以使用一般的偶数如18、22、26 等。


以上就是我们一开始要建立的元素尺寸原则,精简完即:


使用整数,只有分隔线可以使用 0.5 的小数 

使用 4 的倍数,根据实际情况可以切换成一般偶数。


有了这样的原则,并养成习惯,我们就能在每次设计前对元素尺寸有个大致判断,然后再根据需要按 4 的倍数调整


开始我使用 280pt 宽,44pt 高的尺寸,但是觉得有点僵硬,太正式了!这时候反思认为应该是输入框太矮导致的,所以高度上改成 44+(4x2)=52pt 。这时候又觉得太高了,实际输入内容也没那么宽,于是再对高减 4,宽减 40,获取最终结果。


所以,因为这样的操作原则,决定了 UI 元素的尺寸不是凭感觉用鼠标拖拽出来的(拖动效率太低),而是在元素的属性栏中填入它们的数值。UI 的设计过程就是一个不停键入参数和调整参数的过程。



这里要声明,在我的描述体系中,控件指的是:界面中最基本的交互单位,如按钮、滑块、开关、分页控件等,更复杂的如动态卡片,功能快速入口等,就归入组件中,便于我们理解。


下面,我会根据前面定义的基础原则,分别讲解控件应该使用的尺寸范围。



一、按钮 ( Buttons )



按钮是界面交互操作中使用最频繁的控件了,当然按钮呈现的形式也多种多样,比如可以是文字、图片、图标、卡通形象等等。在这里,我们只聚焦于矩形的基础按钮。


在进入具体参数的讲解前,要先理解一点,按钮实际上是所有控件中最复杂的一个。并不是因为在设计样式上复杂,而是因为按钮承载了最多的产品诉求,权重差异极大,例如看下面的案例。



在上图里,可以点击的东西不少,我们只说外观是标准样式的按钮,就有 9 个。而这里面,权重最高的必然是 “加入购物车”。权重最低的,则是前往新品页。


要定义按钮尺寸,我们首先需要整理清楚不同的按钮在界面或整个应用中的权重。尺寸和权重是成正比关系的。当然,颜色也是对重要性表现的关键因素,不过不在这里展开。



按钮高度


当我们设计按钮时,优先从高度入手,再去定义宽。为了便于新手理解,我首先从高度上来匹配权重,分成高、中、低三类:


    - 高权重:40-56pt

    - 中权重:24-40pt

    - 底权重:12-24pt


高权重的按钮,类似登录页的注册、登录,购物详情页的购买,流程页中的下一步,它们的最小高度应该从 40pt 开始递增。低于这个数值,那么按钮就很难在页面中起到视觉支撑的作用,因为会感觉到它太细了。



中权重的按钮,类似个人主页的关注、点赞、评论按钮等。这个层级的按钮依旧有比较高的交互频次,所以我们必须得保证它易于点击。24pt 是在我经验中便于点击得最小尺寸了。这种按钮通常是组件中的一部分,不像层级最高的按钮常常是处于一个孤立的空间,所以高度如果超出 40pt,就会对当前模块产生直观的破坏。



低权重的按钮,就类似查看更多、标签、详情等类型,相对于交互属性,这类按钮具备更多的提示属性,只要让用户能看见,又不需要太显眼。尺寸不大于 24pt,能容纳内部文字或图形元素即可。




按钮宽度


主流的按钮都是横向的长方形,正方形的也有,但就是不能变成纵向的矩形。



按钮的宽度主要和内容挂钩,内容数量越多,按钮自然也就越宽。唯一的例外,只有高权重的按钮,可以无视内容的长度。因为它们需要更多的区域,往往都是撑满屏幕内容区域或横跨屏幕的,可以特殊处理。


普通按钮,左右边界与内容的距离过大,就会让按钮看起来非常的不协调。所以我们要根据内容的长度来设置按钮的宽。左右间距的大小,应该小于或等于上下间距的 2 倍。




按钮圆角


最后,按钮尺寸还有一个属性,就是按钮的圆角。矩形的四角有三种类型,即直角、圆角和半圆。



为矩形设置圆角,是为了让按钮看起来有一定的圆润感不会显得太尖锐锋利,这种圆角的数值要给得更加谨慎,只要超出了一定的范畴,就会对视觉的和谐产生影响,我习惯称呼为——半圆不圆,如下图右侧的错误案例。



所以,我们在设计圆角的过程中,一定要仔细感受圆角在画面中的和谐性。而圆角的设置范围,小于等于高度的 1/4。例如,一个 24pt 的圆角矩形,圆角的尺寸就应该不大于 6pt。


以上就是按钮相关尺寸定义的说明,当然,在真实的设计需求中可能遇到很多无法满足的情况,这就需要大家多做尝试了。



二、输入框 ( Text Fields )



输入框也是比较常用的控件之一,它和按钮有非常接近的外形。最常见的就是登录页账号密码输入框,以及首页上方的搜索栏了。


输入框的高度,常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤,比如我用下面学生的案例做个演示。




三、步进器 ( Steppers )



常见的步进器,就是输入框和按钮的结合。左右有两个用来增加数量的按钮,中间是允许我们直接键入数字的输入框。在尺寸上,它也介于两者之间,高度在 28-40pt 之间。下面我再用学员的作业做次演示,当低于 28pt 以后,就会发现在屏幕中的占比实在太小了。



步进器中常见的错误,是在我们在绘制左右两个按钮,设置外框的圆角时,并没有合理的去掉内侧的圆角,这是绝对不应该忽略的细节。




四、下拉菜单 ( Dropdown Menus ) 



下拉菜单要注意它具有多种状态,默认、展开和选中。默认状态与输入框类似,主流的高度也使用 36-56pt。但是,当菜单展开后,下方多出来的选项菜单,就值得注意了。


菜单的宽度正常情况下与默认状态相同,而高度根据里面包含的选项数量决定。单行选项的高度,不大于默认的选项框。但也不能过小,新手很容易在弹出菜单中设定过小的高度,使个控件看起来会非常的别扭。




五、开关 ( Switches )



开关也是按钮的一种形式,通常出现在设置页的列表中,上方就是它主流的几种样式。在设计开关的时候,要先确定一个矩形区域,高度使用 24-32pt,宽度则用 1:2 的比例。如高度使用 28pt,那么宽大致可以使用 56pt,之后再将其他细节填入。




六、滑块 ( Sliders )



滑块形式接近开关,通常在中间有一个操作节点,下面有一个用来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。


节点如果做的太小,不仅会显得难看,而且会让人觉得很难操作。它的直径应该在 16-28pt 之间。而下方的横线,宽度由所在内容区域的宽决定,高度一般在1-4pt 之间。



七、页面指示器 ( Page Controls )



指示器用来展示元素序列,虽然在 APP 中没有太重要的作用,但既然我们加进去,就要让它看起来和谐。大多数人在定义指示器时,不是太大,就是太小。可以只从后面提供的尺寸中选择,就能保证指示器的尺寸不会出错。


指示器主要是圆形和矩形两种形式:


    - 圆形:8、10、12pt ( 直径 )

    - 矩形:14×2 pt、16×2 pt、20×3 pt



八、提示红点 ( Badges )



提示红点也是大多数应用会使用的一个控件,它的大小应该在 24-32 pt 之间。作为一个圆形,这个控件设计起来很容易,但设计师往往忽略一件事,那就是如果中间的数值超过 10 变成 2 位以后,要怎么处理。


在设计这样的元素时,我们要用一个矩形元素来表现,即画一个正方形,然后将圆角设成最大,那它看上去就是一个圆形。那么每增加一位字符,我们就需要为这个矩形增加该字符的宽度,可以用左右间距判断。


因为相同字号下,不同英文、数字的宽度都是不一样的,所以我们要根据实际输入的字段长度去决定圆角矩形的宽度。




九、分页控件 ( Tabs )



后一个控件,就是分页控件了,安卓中的 Tabs。这个元素在设计时也受到排版空间的影响。较为宽松的排版风格,高度就比较大,若拥挤则反之。下面是高度的取值:


    - 高权重:40-48pt

    - 低权重:28-36pt


分页控件主要应用在头部和页面中部的组件中,如下方的案例:



虽然很多时候分页器没有背景色,但是背景的矩形框是必须画出来的,即隐藏填充和描边,这样我们就可以通过垂直居中的方式,来确定中间文字的位置。



一个完整的分页控件,里面会包含两个或以上的选项,所以定义每个选项的宽是必要的。通常,我们有两种定义方法,一种是选项少时,直接进行均分显示,另一种是选项较多,采取定宽模式,宽度最小建议在 64pt以上,才不会显得过度拥挤。



分页控件选项处于选中状态时,有的设计是修改背景色,有的是修改文字属性,但今天最常见的就是加入下划线。这个元素如果定义得不好,会让整个控件看起来非常粗糙,它需要在样式中能起到画龙点睛的作用。



下划线分为两种,一种是贴在控件底部的,另一种是在文字下方悬浮的。两种方式线条应该使用的高度都不应该大于 2pt。宽度的话,前者和每个选项背景区域相等,后者则可以在 8-16pt 间(小于文字总宽)。下面是正确设计效果:




十、尾声


前面说到了不少控件的尺寸,那么真实应用的效果会如何呢?下面我就用原型的方式,不考虑样式与色彩将它们组合到完整的页面中去。


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

作者:酸梅干超人    来源:站酷


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

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



设计师如何提高自己审美?

涛涛

关于比较


审美是一个宏大的话题,无论是文学、影视、视觉、时尚等我们都可以审视它们的 “美”。不同领域的 “美” 有不同的形式,不同的立场,不同的角度,不同的原则。


在这里,我们不谈具体某个领域审美的规则和方式,我们来讲讲提升审美的具体做法。


讲一个例子,在国内,我们普遍觉得女生在对穿衣打扮的审美上比男生更优,对于其它经过设计的事物所展现的审美也比男生更好。这种差别在高中时期便逐渐放大,在大学中就能明显得感觉出来这一点。


这是由于基因天赋论导致的吗?


是也不是。女生爱美这点是一个既成的事实,有比较大的先天因素,而因为对美好事物的追求比男生更强烈,所以在审美上整体大于男性。


但大家要注意,这个因果关系的模型太过简陋,我们要进一步来分析为什么对美好事物的追求就能导致审美上的差异,这就是我们提升审美的关键,先从衣品讲起。



原因1:


基于对美的追求,女生往往会花更多的时间在穿衣打扮上,也就意味着要购物。无论是在商场还是淘宝,女生逛起来的热情与时长都远远大于男生,这造成了女生在查看数量上也远远大于男生。



这就和很多设计前辈告诉你要 “多看” 的做法是一样的,通过量变引起质变,只要你看的够多,审美自然就可以提升了。


这话说的颇有道理,但依旧在推理上站不住脚。因为,量变为什么一定就能产生质变?这个变化的逻辑依据是什么?在青铜段位里打了一万盘,也不代表一定能打进最强王者不是。


所以,这就是要引入第二个原因,关于对比。



原因2:


女生逛街能逛这么久,往往在除了看以外,还会做一件事,就是大量的试衣服(此处被我言中的女性同学可以点个赞让我看见你们的双手),经常抱了一整箩筐的衣服进试衣间,在里面对着镜子鼓捣摆 Pose 大半个小时,然后才能挑选一两件自己喜欢的出来,或者干脆一件也不要。


嗯,不要问我是怎么知道的……


在这个过程里,就发生了提升审美中最重要的一环 —— 对比。通过大量的对比,来找出好看的、高级的、适合自己的衣服。也因为对比,女生们就通过实践来了解到,什么样的衣服是好看的,什么样的是丑的不适合自己的。


这个过程实际上收窄了选择的范围,比如一个个子比较高挑五官比较立体的女生,是很难在比较过后还会选择那些可爱、少女、小鸟依人的设计。很可能会偏向运动、男友、中性等风格。


而在有了具体的偏向以后,她们依旧会深入到这个范围,继续观察、尝试、对比,然后再次提升对这些东西的理解和审美。


所以,看吧,审美的提升第一步就是这么简单,通过大量的观察,然后对比和筛选,就能非常直接的提升我们的审美,这个提升的过程完全依靠的是人的主观能动性。


日常生活中我们遇到的绝大多数某些人审美比自己更好的人,都是因为他们在某些方面看过的,比较的比我们更多,而不是依靠天赋的加持,这个思路落实到创作中也一样。


当然,我丝毫不怀疑人类的历史长河里,有极少数人打娘胎里就因为染色体中某些基因片段神秘的律动,而获得了独特的审美与创作天赋,但那始终是一个可以忽略的概率。审美的提升是个人主动的行为,不要祈祷上帝在你身上投的骰子能得到你要的结果。



即使抛开这群有 “天赋” 的神仙,也依旧还有很多第二梯队、第三梯队的老法师们通过奋斗逼的经历功成名就不是。


所以别这么自恋总要搬达芬奇、毕加索、梵高等人举例,每次忍不住想要把锅甩给天赋前,就问问自己钥匙配嘛?


什么?您配?


您配几把……



具体案例


不正经到此为止,正经脸……


既然说了那么多关于比较的问题,空口白话难以令人信服,所谓没图我说个……锤子。因为很多新人都会说,你觉得大多数设计案例看起来都挺好,觉得挑不出什么毛病啊。


所以,下面我挑了几个与设计有关的方向,并找了一些案例出来,你们来看看同类型中,哪一张图是最优的。


而没被选上的那些,对于你选出来的图而言,它们当然都是有 “问题的”。



人像摄影




美食摄影



室内设计



产品设计




海报设计





管理界面





UI APP 界面





小结


审美提升的第一步,就是从对比开始,因为这个世界对所有事物的评判,都有不同方向的两个极端。善恶、美丑、高矮、胖瘦,是对立而相互依存。


就像左拉的《陪衬人》中所讲的:


“……另一个却总是奇丑无比,丑得刺眼,使路人不禁要看她几眼,并且拿她和她的同伴作个比较。要知道,你上了圈套。那个丑女子要是独自走在街上,会吓你一跳;那个相貌平常的,会被你毫不在意地忽略过去。但当她们结伴而行时,一个人的丑就提高了另一个人的美。”








之前我们讲了关于审美提升的第一步对比,但是我们留了一个疑问,为什么依靠对比我们可以提升,或者只靠对比我们就一定可以提升审美嘛?审美提升起来就如此容易?


当然不是!


对比的过程只是表象,我们还要追究深层次的原因,那就是“推理”。


在系统性提升审美的道路上,最大的敌人就是——主观感受。因为无论我怎么解释和审美提升相关的方法,总有人会觉得它就是依靠个人审美,不同人审美不一样,总能找出有的人就喜欢网红脸但看不上汤唯或者高圆圆的案例。


没错,每个人都有自己的审美,无论喜欢什么稀奇古怪的东西都可以,存在即合理。但是,设计师该拥有的审美是不能这么随意的,因为作为专业人士,我们的审美就要符合 “专业” 的要求,即通过客观标准来评价事物的内在价值。


比如茶、酒、咖啡这类饮品,都已经拥有非常成熟的市场,会根据产品的价值形成对应的价格。而有趣的是,这些饮品都不是甜的,都不符合我们本能的喜好。所以,还有很多人不接受它们,只喜欢带有甜味的饮料。这种个人的选择上,任何人都可以偏爱一杯 1 元不到的雀巢的速溶拿铁,厌弃红标瑰夏冰滴,但无论你怎么想,也无法改变它们价值不对等的事实,瑰夏手冲有远远超出速溶的口感和品质。



但超出的部分在哪里?答不答得上来,就是内行和外行的区别。


内行经过专业的训练可以品尝出其中蕴含的风味、口感,解释它们与产地气候的联系,储藏运输的条件,以及冲制过程的步骤。但外行往往只能给出好喝、甘甜、顺滑、难喝、太苦之类零碎、没有体系的评价。


如果设计师对设计相关的作品只能做到和外行一样的水平,那么他也只能是设计师中的外行,并且缺乏成为优秀设计师的必要基础。


所以,接下来我们来探究一下,作品的评价为什么重要!


丹尼尔·卡尼曼的畅销书《思考快与慢》中,将我们的思考方式简单的划分成了两个部分,用了非常简单粗暴的 “系统1”、“系统2” 命名。简单概括它们的含义,就是系统 1 是联想式思维,系统2是规则式思维,也可以看成是直觉与慎思的区别。


先说系统1,直觉是我们大脑对日常接受信息简化处理的产物,我们的大脑就像处理器一样,每天都要面对海量的信息通过视觉、味觉等五感导入,如果它没有任何区别的对这些内容进行深度、缜密的分析,那么它一定会超负荷运转并最终自我毁灭。



所以生物的演化,让我们的大脑进化出了一套可以对信息进行过滤和简化的系统,格式塔心理学中关于视觉对物体简化、完形的理论,也是由其产生,这就是我们对很多事物下意识反应的来源。比如在走路的过程中,看见一辆自行车直挺挺的从远处像你冲过来,那么你会马上感觉到危险并往某个方向规避,整个过程会在不到1秒的时间内完成。


而系统2,就是对事物进行逻辑推导的深入思考,如果用它来处理危险的事件,那么结果可能是我们先判断这辆自行车行驶的轨迹并得出它前进的方向与我站立的位置相交,并且它的时速约为 40km, 在撞到我的时间还有3S,如果以这种速度撞在我们身上,大概率会发生……



“BONG~”


那就不用想可能会发生什么事情,你已经被撞飞了,可以直接得到结果。类似的事情还有很多,无论是对与危险的,还是日常事务的作用,系统1都发挥出了极其重要的作用。也因为它的有效,而导致我们对它依赖过度。所以,很多人在对于美丑的审视上只依靠系统 1 来完成,而不会深入去思考各中原由。


系统 1 对美丑的判断,是个人的,但它并没有 “审” 的过程,专业的分析也就无从谈起。斯洛曼和费恩巴赫所著的 《知识的错觉》 里提到:


"直觉给予我们一个简化的、粗略的,而且通常足够好的分析,这让我们产生错觉,自以为所知甚广。但是当我们慎思时,我们才意识到事物实际上何其复杂,我们真的只是略知皮毛。"


审美和品尝美酒、咖啡一样,需要通过了解专业的知识,培养系统的分析方式进行刻意练习,逐渐摆脱依靠我们直觉做出的不可靠的判断。


因为任何优秀的设计作品,在创作过程中都不可能是随性而为的,都是经过创作者深思熟虑后的产物,我们对优秀作品的评价,就是通过专业的知识对其创作逻辑进行推导,哪里有亮点,哪些是败笔,都是清晰可见的。


它不仅帮助我们判断别人作品的优劣,也可以分析我们自己作品的不足,从而得到改进的思路。所以为什么说审美要先于实践,如果连什么是好的都不了解,自己设计出来的东西都不知道如何评价,又谈何进步?


在我自己的教学经验中,这个问题所表现出来的差异就很有意思。如有一些审美能力较差的学生第一次设计 Banner ,花了非常多精力和时间,自我感觉不错,但是作品质量极差,会在得到否定的评价以后表示诧异和茫然,因为他们已经预感应该得到赞美与肯定。而审美较好的学生则是在完成作业以后充分的发现自己设计的东西和较好的作品之间的差距,那么他希望在我这里获取的,就是如何缩小这种差距的具体方式,而不是对其作品做出评价,因为他们自己也会觉得作品质量差的没评价的必要。


但不幸的是,在商业视觉设计的领域中,提升我们的专业评价的能力,并不如其它行业一般有固定的流程和教学,按笔者自己长期的经验来看,如果我们盲目的从艺术、设计、心理多个学科的基础理论开始学起,那提升的速度太缓慢,需要的周期太长,而且有非常强烈的挫败感,如果没有好老师的引导,还容易钻牛角尖误入歧途。


所以,第一部分的对比,重要性才能体现出来。我们要通过实践作为基础,来系统性的提升我们的专业审美能力,通过应用推理的能力,抑制我们无所不在的直觉。


前面扯了这么一大堆,都是在纸面上的探讨,不太接地气,只分析一通原因,和你该如何提升审美没太多关系,这是最气人的。所以,最后一部分,我们来讲讲具体实施的做法。

先声明,审美提升是要通过刻意练习的步骤的,谁也不可能只通过区区几篇文章就以为自己已经明白了,所以需要执行下面这个循环步骤:


    • 采集:大量观察和收集作品

    • 对比:留下它们中最好的

    • 分析:寻找优劣差异的原因


开始前,还要解释一件事,就是我们提升审美都要先从某个点开始突破,从你最感兴趣的,或是工作关联度最高的设计类型开始,而不是无差别的乱看。与美术学相关的所有设计中,底层的原则都是近似的,精通一种,就能更容易理解其它种类的作品。



1.采集


观察的来源多种多样,强烈建议初期只使用花瓣即可,不要分心到太多的平台上,选择太多往往不是好事,会增加干扰,让我们疲于奔命,模糊一开始的目标。


例如首先要提升在 APP 方面的审美,我们先在花瓣中创建一个 APP 的画板,然后搜索 APP 相关的关键字,但不需要关注第一页弹出的采集结果,直接查看 “画板” 选项。



画板是别的用户自己整理的采集合集,我们可以通过封面简单筛选出你喜欢的,然后打开它们,浏览里面收集的作品。



然后尽量按自己最高的要求来找到能让自己觉得满意的作品,再将它们 “采集” 到自己创建的画板中,并设定一个数量,比如采集到500张为止。



2.对比:


达到目标的数量就停下来,因为再采集下去能带来的作用已经非常有限了。虽然采集中已经包含了选择和对比的过程,但我们要更进一步,在自己的选出来的作品里进行比较。相信在完成这个步骤以后,你们已经可以明显感觉到最后 100 张收集的质量是远远高于前 100 张的。在罗子雄 TEDX 的演讲中就说过:你回头看三个月前收集的作品,会发现它们都是垃圾……



更极端一点,那就是我们只在挑选的作品中留下最好的十分之一,听起来是不是很刺激。


也就是我们要开始在自己选出来的作品中,你要删掉其中的 450 张作品 (最好有留底),即使当中有一些你非常喜欢,而且它们都是你的劳动果实。但就因为这样,你才会更慎重的进行比较。因为多数人的采集只是走马观花,后面根本就不会看这些东西。


当然,这个过程推荐用 Eagle 或者 花瓣 PRO 客户端,操作起来会更顺手一点。



3.分析:


在上一步操作里,我们会动用我们脑海里所有关于理性的分析方法来解释它们的优劣,并得出结论,虽然这些想法可能很幼稚或漏洞百出,但不要担心,最后一步就是用来解决这个问题的。


我们捉对挑选一些作品出来,在剩下的作品中和已经被你否决掉的作品各选一张,然后将它们排列到一起,对比它们的优缺点,比如下图是我从我自己画板中找出的近期和早期的采集作品。


专业的分析是怎么得出的?当然不像朱熹提出的 “格物致知” 一般盯着它们思考,就能把设计的理论给格出来,这条路是走不通的,所以才有王阳明 “知行合一” 的教诲。


我们要把对比的内容进行细化,把一套作品看成若干细节的合集,明确比较的目标,这样才能得到理想的结果,比如:


    • 字体

    • 配色

    • 布局

    • 配图

    • ……


比如我们挑文字出来分析,这时候局势已经比较明朗了,上侧的设计中文字是能被清晰识别的,在不同的字段类型中字重有对应的调整,主次有序。而下侧的文字应用则缺乏对比,部分文字甚至和背景都无法做出区分,且字重几乎没有变化,使用了多种字体没有整体性,导致最后的阅读感受极差。


同理,你可以再试试分析其它几个细节,是不是简单多了。如果这时候你再觉得手足无措,完全分析不出什么具体的东西怎么办?


学啊!


如对比到配色,我们解释不出为什么右图的配色不行,那就针对配色去了解相关的配色技巧、理论,网上可以搜索的分享就一大堆了,比如关于色彩对比、用色比例等等,将你学到的知识现学现用套进这两张作品中,也就可以很快的得到验证。


后面每出现这样的问题,就现学现卖,不仅可以直接提升我们对作品的理解能力,还能巩固我们学过的理论知识。多分析几组对比,你就会发现对于这类作品的审美和理解已经得到了质的飞跃,这时候,你就可以以留下的这几十张作品作为你接受的下限,去收集新的作品,完成下一次循环。


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

作者:酸梅干超人    来源:站酷


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

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



脉脉产品拆解丨1.1亿职场人士为什么使用脉脉?

seo达人


脉脉,作为职场社交行业的独角兽,在他们的产品更新日志里,这段话已经使用快2年。相信大家都使用过或听过脉脉。在脉脉,你可以通过人脉探索去认识众多互联网大厂的高端人才,也可以认识很多创业公司的CEO。它的「职言版块」甚至被人比喻为互联网大厂的茶水间、纪检委,你可以在那里获取到很多互联网大厂的八卦信息。本期「设计大侦探」的职场产品专题,让我们一起拆解脉脉,看看这个产品到底是如何设计的。

图片

 

一、导读

1.、内容结构

全文10396字,分为六个部分,分别是导读、产品画像、内容服务、求职服务、会员服务和结束语。

「导读」可以帮助你快速了解这篇文章是否适合你阅读;「产品画像」从商业模式、用户角色到迭代记录,让你对脉脉有一个全面的了解;「内容服务」是实现用户留存的关键,主要拆解了社区、人脉和消息三个版块的内容;「求职服务」是商业变现的重要方式,主要拆解了求职端、招聘端和企业空间等内容;「会员服务」主要拆解了用户中心和脉脉的会员VIP体系。

图片

 

2、适合人群

产品拆解是一个知识点比较密集的分析形式,主要适合三类人群。第一类,UI/交互设计师,可以跳出执行层,去思考脉脉的产品设计策略,提升产品分析能力;第二类,产品经理/运营,通过全面的产品设计拆解、策略推导,获取产品设计参考;第三类,网络招聘及社交行业从业者,通过对脉脉的全面拆解,获取竞品设计参考。

图片

 

3.、分析模型

我们主要运用三种模型对产品的功能、设计进行拆解,由于没有权威的官方数据,所以我们更多以推导的形式去思考脉脉为什么这样设计。

第一个,增长模型。由戴夫·麦克卢尔提出,包含用户获取、用户激活、用户留存、获取收入、用户推荐,分别对应用户生命周期中的5个重要环节,主要用于分析产品的功能价值。

第二个,上瘾模型。由尼尔·法埃尔提出,通过对上千种习惯类产品的调研,总结出一款产品如果要让用户习惯、上瘾,可以按照触发、行动、多变的酬赏和投入四个步骤去设计,主要用于分析产品的功能价值和推导产品的策略设计。

第三个,社会心理学。主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺,去推导产品设计的用户心理设计,主要用于推导产品的策略设计。

图片

 

二、产品画像

1.、产品介绍

脉脉是一款职场社交的APP,首个版本于2013年10月上线,在国内首次提出了“真实职业形象”与“人脉共享”概念,致力于利用科学算法打通“同事、同学、同乡、同校、共同的朋友”五同关系,助力中国职场人塑造个人职业形象,拓展人脉机遇;助力企业打造雇主品牌,通过脉脉平台的人才银行长期获取并储备中高端人才。

图片

 

2.、商业模式

脉脉以“成就职业梦想”为价值主张,深耕职场社交行业,目前稳居行业第一。用户群体主要分为C端职场人士和B端企业。脉脉打造了社区、求职招聘、脉课堂等核心业务,吸引了3000万+互联网中高端人才;脉脉的盈利模式主要依靠会员服务、求职招聘业务以及广告服务。

图片

 

3、用户角色

脉脉作为一个社交平台,用户角色主要分为C端用户和B端企业用户。

C端用户根据需求可以分为两类,第一类是普通用户群体,这类职场人士主要包含基层职员、中层职员、高管、总监和CEO等,他们的需求很简单,了解行业氛围、获取分享经验以及拓展人脉;第二类是特殊用户群体,包含猎头、HR以及各类销售,他们的需求是通过脉脉认识更多的职场人士,建立好友关系后,尝试销售公司的产品或服务。

B端企业用户主要通过脉脉建立企业脉脉主页,提高企业知名度和形象,其次也可以通过脉脉招募人才。

图片

 

4、用户画像

脉脉的核心用户人数以男性为主,占比77.36%;24-35岁年龄段的用户居多,占比55.6%;用户的消费力很强,中等和中高消费者加起来占比67.97%;用户主要分布在一线、新一线和二线城市,其中以广东和北京最多。

图片

 

5、信息结构

「脉脉」主要分为社区、人脉、职位/招人、消息和用户中心五大版块。「社区」是脉脉最核心的内容,包含了「推荐」、「热榜」和「同事圈」三块内容;「人脉」提供好友管理,人脉探索,还有查看朋友动态;「职位」是求职服务,用户可以上传简历找工作;如果是一个招聘者,可以在职位切换到招人状态,发布岗位后就可以招募人才;「用户中心」就是用户的管理中心,储存了用户在产品使用的各种数据,比如影响力、好友数等。

图片

 

6、重要迭代记录

根据官方数据,脉脉首个版本发布于2013年10月。截止到9月1日,脉脉APP已经更新到V6.2.22版本,近一年版本更新次数达到39次(来自七麦数据)。

版本迭代重要记录

2013年10月,发布V1.0版本,正式推出脉脉,包含人脉管理、职场交流、求职招聘等功能;

2015年10月,发布V4.0.0版本,界面全新升级,推出「人脉办事」等功能;

2019年2月,发布V5.0.4版本,主界面全新改版,升级企业Logo形象;

2021年2月,发布V6.0.10版本,产品全新升级;

图片

 

7、产品生命周期

目前脉脉官方公布用户数已经超过1.1亿,从易观千帆2022年5月份平台数据显示,脉脉的活跃用户人数547.53万,行业独占率31.68%,是职场社交细分行业的老大,目前产品已经进入产品生命周期的成熟期。

图片

 

三、内容服务

作为一款社区类产品,「内容服务」是实现用户留存和传播拉新的关键。脉脉作为一款职场社交产品,为用户提供了一个内容丰富的社区,包含了「职言」、「职业圈」、「行业」等热门分类,而且采用UGC的模式实现内容由用户共创,其次为用户提供了丰富的人脉探索和管理工具,甚至像微信一样,提供群聊、发送文件、加入黑名单等功能。最终帮助用户在社区找到自己感兴趣的话题,和有兴趣的朋友建立关系,成为产品的忠实粉丝。

图片

 

1、社区

脉脉「社区」的设计,采用了信息流的推荐方式,千人千面,根据每个用户的兴趣进行推荐内容。在内容设计方面,根据话题热度设计了「推荐」和「热榜」;根据人际关系设计了「同事圈」、「职业圈」和「好友圈」;根据发布类型,设计了「动态」、「职言」、「提问」、「创作模版」、「视频」和「文章」六个类型。

1.1 推荐

1.1.1 全部

「全部」就是脉脉的首页,采用千人千面的信息流方式设计,用户进入脉脉后,可以从这个栏目看到平台根据你的兴趣、职业标签推送的最热门和最新发布的内容。

图片

1.1.2 职言

「职言」主要是和职场相关的内容,这个栏目被喻为互联网大厂的茶水间、纪检委,你可以在那里获取到很多互联网大厂的八卦信息。为了鼓励用户大胆发言,脉脉设计了社区匿名身份发帖的形式,这样无论你写什么内容,其他人也不知道你的真实身份,有效提升了用户参与度和活跃度。但外界对这个栏目的评价其实褒贬不一,甚至也为脉脉惹了不少大厂的官司,追赔名誉损失。

图片

1.1.3 门道

「门道」的内容主要来自KOL、知名媒体和社区优质创作者,质量高,以商业、互联网和职场内容为主。这个栏目的设计,主要提升社区的内容质量,提升用户使用产品的时间。其次通过对优质内容的精选,也可以鼓励用户尝试高质量的创作,进一步丰富社区的内容。

图片

1.1.4 职业圈

「职业圈」是根据用户的职业标签来进行分类,目的是为用户提供更专业的话题,提高用户活跃度。目前脉脉的「职业圈」只有后端研发、设计、运营等6个小圈子,其他的暂未开放。

图片

1.1.5 行业

「行业」的内容非常垂直,主要聚合了某个行业的话题动态,从而了解这个行业就职的基本情况,同时也支持用户切换其他行业。

图片

1.2 热榜

「热榜」分为热帖、话题和行业,「热帖」每天精选社区30篇帖子,「话题」每天精选10个话题,「行业」每天精选15篇帖子。这个栏目的设计不仅可以精选出社区优质和热门的话题,还可以给用户带来社交酬赏,吸引用户创作优质的话题内容。

图片

1.2.1 话题广场

「话题广场」目前入口很深,在用户中心的社区服务才能进入,这个栏目主要聚合了社区的热门话题,引导用户参与创作,最终提高用户的创作参与度。

图片

1.3 同事圈

「同事圈」主要为公司的员工提供一个私密交流的版块,用户需要实名认证,公司也同步开通同事圈以后才能使用这个功能,目前显示有字节跳动、百度、腾讯等互联网大厂都开通了同事圈。不过,这个版块的设计从用户真实的角度去思考,有点鸡肋,谁都不愿意在下班以后还要去谈论工作。

图片

1.4 搜索

「搜索」是社交平台一个非常重要的功能,它可以帮助用户快速检索到用户想查找的公司、朋友信息。

1.4.1 引导页

「引导页」包含了搜索历史、搜索推荐、热门搜索、公司榜和找人榜。不仅为用户提供丰富的内容,还为社区的热门话题进行引流,比如热门搜索,可以告诉用户今日热点,吸引用户访问。

图片

1.4.2 结果页

「搜索结果页」分为综合、找人、社区、职位、实时、问员工和话题,颗粒度非常细。这样的设计,可以帮助用户检索到比较精准的内容。

图片

1.5 发布

脉脉作为一个UGC社区,内容由用户生产。用户发布的内容又分为动态(实名身份发布)、职言(社区身份发布)、提问(可以邀请大厂大佬回答)、创作类型(提供Offer比较和面试经历分享模版)、视频和文章。

1.5.1 发布功能

用户在内容发布页面,可以选择参与各种热门话题,用户还可以创建投票,分享微博、头条、公众号等热点资讯链接。

图片

1.5.2 职言话题

「职言」是脉脉社区最核心的一个内容版块,当用户点击发布职言后,系统会提醒用户采用社区身份进行发帖。脉脉的「职言话题」设计得很丰富,这主要是引导用户,提高用户参与度。话题分为热议话题、找工作、能力进阶、职场关系、趣味现象、生活交友、解压互助和节假日8大类型,每个类型下面还包含了数十种话题类型,这些话题组成了脉脉社区的核心内容。

图片

 

2、人脉

当用户之间相互关注、添加好友以后,就建立了关系,形成了人脉。「人脉」是实现用户留存的关键,只有用户认识了他想认识的朋友,才能形成强关系链接的社区。

2.1 好友管理

在人脉页面,用户可查看已添加的好友、最近的申请、对我感兴趣的人和待处理的请求。其次平台还会根据你的标签、职业、学校、地区等维度进行深入的人脉挖掘。

图片

2.1.1 用户主页

①头部展示用户的详细信息,包含头像、姓名、公司、职位、家乡等信息,其次会统计用户之间的共同好友,有效拉近用户之间的距离,吸引用户建立关系;

图片

②从第二屏开始,依次展示用户动态、工作、项目和教育经历;在底部,设计了一个「看了他的人还看了」的好友列表,吸引用户继续深挖关系链接;

图片

③添加好友的方式有两种,第一种是「极速联系」,用户开通VIP以后可获取好友的电话等联系方式,快速联系;第二种是普通的好友申请,需要好友审核通过后才能成为好友,其次普通用户每个月只有5个免费的添加好友名额,超出5个以后,需要开通VIP会员才能添加。

图片

2.2 人脉探索

「人脉探索」有七个维度,分别是根据职业标签推荐、人脉发现、平台推荐、同事、校友、同乡和同行。用户可以根据这七个维度进行人脉探索,找到你想认识的职场人士。

图片

2.3 动态

「动态」类似于朋友圈,用户可以参与社区的热门话题,也可以发心情、问好友和发动态。其次用户还可以把好友加入到「好友圈」,第一时间阅读他们的动态和职位变动等信息。

图片

3、消息

「消息」主要为用户提供对话交流。「消息类型」主要分为动态提醒(邀请参与、评论和点赞)、主动沟通、好友消息和未读消息。其次脉脉也提供建立群聊、加入黑名单等功能。

图片

3.1 聊天对话框

①当用户处于离线状态,脉脉会提供一个短信通知对方的功能。用户需要购买商务会员VIP,才能使用。

图片

②当用户开始聊天后,会员可向好友申请「交换手机」号码,而普通用户也可以对广告用户设置「加入黑名单」,直接屏蔽用户消息;

图片

③脉脉还支持发起群聊,可以邀请多个好友建立群聊沟通。

图片

 

4、小结

从社区内容观察,脉脉的内容其实主要分为两种类型,一种是「个人动态」,另一种则是「职场话题」。「个人动态」满足了一个社区用户最基本的社交需求,而「职场话题」才是脉脉实现用户留存的关键。

从脉脉的「话题广场」内容设计可以看出,脉脉对职场人士关注的焦点都挖掘得十分精准。从找工作、能力进阶、职场关系到解压互助,脉脉都设计了开放、可传播的话题,引导用户参与社区的创建。

最后,为了提高社区的内容质量,增强用户黏性,脉脉还设计了「门道」栏目,邀请头部的KOL和知名媒体参与社区内容建设,满足各类用户的需求,形成内容闭环。

从人脉拓展形式看,脉脉提倡的「五同关系」,是整个社区用户形成关系链的核心。通过同事、同校、同乡和同行这四个维度的链接,充分挖掘二度、三度人脉,最后成为共同的朋友。

 

四、求职服务

脉脉拥有1.2亿职场社交实名用户,吸引了众多互联网大厂企业加入。作为一个链接双端用户的平台型产品,「求职服务」是脉脉的核心服务,是商业变现的一个重要方式,它为求职者提供工作推荐,为招聘者提供人才推荐。

图片

 

1、求职者

脉脉为求职者提供了「在线简历」、「职位收藏」、「求职偏好」等功能。「在线简历」支持附件简历上传,有效节省用户创建简历的时间成本。

图片

1.1 求职机会

「求职机会」是平台根据用户的求职偏好进行系统推荐,帮助用户和招聘方建立更高效的沟通。

图片

1.2 职位详情页

①头部展示岗位的基础信息和HR的联系方式,用户如果要想和HR沟通需要开通VIP会员;如果所在公司有好友,则会显示拥有好友内推机会。

图片

②在展示完「职位详情」以后,加入了「公司介绍」,目的是提升岗位的信任度,让用户进入企业的主页进行更全面的了解;

图片

③在底部,脉脉还提供了「职位真相」、「薪资揭秘」和「职场晋升路径」的VIP服务,用户可以购买该岗位的晋升空间和发展评估。

图片

 

2、招聘者

脉脉没有单独为招聘者设计「招聘端」,在「求职」的右上角可以直接切换成招聘者的身份。脉脉为招聘者提供了「简历查收」、「职位互动」、「人才库」等功能,略显单薄,比较基础。脉脉的招聘服务目前看上去更侧重于定制化的人才解决方案为主,企业没有免费发布职位的次数,如果需要发布,就需要开通招聘会员VIP,798一个季度,相对其他求职产品来说,定价略高。

图片

 

3、企业空间

脉脉的「企业空间」吸引了众多行业的大厂入驻,比如像新媒体行业的字节跳动、社交行业的腾讯、电商行业的阿里巴巴等等,在企业空间,几乎可以查询到你所关注的互联网大厂,从而获取精准的信息。

图片

3.1 企业空间主页

①头部介绍了企业的基础信息,包括员工数量、职位数量和公司简介等;其次还提供了公司的评分,用户可以给公司打标签,评分;

图片

②脉脉为用户提供了查询「职级薪资」的功能,可以通过这个功能查看像字节、腾讯等公司的薪资体系;

图片

③「企业号」由企业自己运营,主要向用户对外展示企业的信息,包含了主页、动态、职位、产品和相册等信息,其次还可以查看该公司在脉脉的员工总数;

图片

④「求职揭秘」关联了和公司相关的话题,而且像字节这样的大公司,还会分部门展示内容,满足求职者的好奇心,也支持用户直接发帖提问;「岗位招聘」则是展示企业对外招聘的所有岗位,用户可根据自己的求职意向进行投递简历。

图片

3.2 职得去榜单

「职得去榜单」设计得非常有创意,这个榜单不仅可以作为企业空间的标签之一,而且还增加了产品的乐趣,比如「脉有最爱投排行榜」,这样的设计可以利用攀比心理,相互倒逼,提高用户活跃度。

「职得去榜单」主要包含「脉友入职热榜」、「脉友最爱投」、「薪资福利榜」、「大厂员工新去处」、「名校生最爱去」、「业务前景榜」、「最无年龄焦虑公司」、「团队氛围榜」、「个人发展榜」、「投递极速响应榜」和「应届生最爱去公司榜」11种榜单,另外还设计了「女性友好公司」、「创投机构推荐企业」和「2021年度多维度优质雇主」。不过遗憾的是,这些榜单的权重比较低,入口很深,而且内容略显单薄,做得不够深。

图片

 

4、脉课堂

「脉课堂」是一个知识付费栏目,内容主要包含同行精选、副业投资、技能提升等内容,以录播的系统课程为主,价格较低。这个栏目主要帮助求职者通过知识学习提升职场、技能方面的能力,增加商业变现手段。不过目前入口较深,权重较低。

图片

 

5、职场福利

「职场福利」是一个充满创意力和趣味性的栏目,虽然活动的数量少,活动频率低,不过可以看出脉脉的用户运营创新能力非常强。

图片

5.1 健康加油站

「健康加油站」是脉脉联合「中国职工发展基金会」为关爱职场人群身体健康策划的一个栏目,用户可以在这个栏目发布关于身体健康的话题,有健康专家专门为用户解答,另外还为用户提供健康科普、课堂讲座等内容。这个栏目以关爱用户身心健康为主,有效提升了品牌服务的温度。

图片

5.2 最热脉

「最热脉」是一个特别有趣的栏目。它的内容是以产品测评为主,比如OPPO的新款Find N折叠屏,通过和脉脉的合作,招募了一批不同职业的评测官,有产品经理、开发、运营、设计师,他们从不同的角度去体验产品,然后发表真实客观的评测分享,最终有机会赢取企业赞助的大奖。这个栏目,增加脉脉运营的趣味性,比如还有一个评测是体验面膜,这对女性用户来说,实在是太受欢迎了。

图片

5.3 职场关爱联盟

「职场关爱联盟」是由脉脉联合企业一起打造的线上线下活动沙龙,主题多以关注职场人士健康为主,比如脉脉联合了京东打造「职场健康关爱季」,还有联合神州租车打造「出行旅游的解压活动」。脉脉用户均可以一键报名,无需任何门槛,这样的运营设计有效提升企业服务的温度,拉近和用户的距离,提升品牌忠诚度。

图片

 

6、职趣实验室

「职趣实验室」和「职场福利」的定位很相似,不过这个栏目更侧重娱乐和解压,通过设计一些创新的职场游戏,缓解职场人士工作压力,提升用户活跃度。

图片

6.1 员工面对面

「员工面对面」是一个问答话题集合,以“找工作前,先问员工”的设计理念,脉脉会把求职者最关心的薪资、Offer等热门问题搜集整合,为职场人士提供一份职场问答宝典。

图片

6.2 人脉升迁名单

「人脉升迁名单」主要指离职好友的升迁名单,通过好友的人脉二度挖掘,用户可以拓展更多的新人脉资源,结成好友。

图片

6.3 好友印象墙

「好友印象墙」有两种玩法,第一种,发送自己的印象给指定的好友,增强互动,比如朋友心中我最擅长的事情;第二种,回答好友的印象,比如“你觉得我是什么性格”等。这个内容版块的目的是提升好友之间的互动频率,加强关系链接,最终提升用户活跃度。

图片

6.4 职场竞争力计算器

「职场竞争力计算器」的玩法比较简单,用户输入自己的职级、地区、就业方向、工作年限、学历和月薪后,系统会通过数据分析,为用户生成一份职场竞争力报告,包含同行的流动情况、岗位竞争力对比、平均在职时长年限、同龄人职级晋升百分比和平均薪资数据。用户还可以隐藏薪资,下载长图分享到朋友圈。通过这种游戏化的设计,不仅可以全面帮助求职者获取目前的职场状态,还可以增强产品的权威性和用户活跃度。

图片

6.5 硬核职场攻略

「硬核职场攻略」通过职场中最常见的12个场景,比如遇到暴力裁员怎么办、如何在线获取新客户等,再结合脉脉的核心内容,为求职者提供一份全面的职场难题解决攻略。这个内容的设计,就像一份脉脉的用户使用手册,不仅可以帮助用户解决实际的难题,还能提升用户忠诚度。

图片

6.6 被推荐数据分析

这个栏目目前正在公测中,每周统计发布一次,主要向用户展示当周个人名片通过哪些场景、功能、标签推荐给其他人。对于以职场服务、营销为主的职场人士,这个数据统计价值很高,可以通过数据去针对性设计优化,提升自己的曝光度。

图片

6.7 蓝月职场生存测试

「蓝月职场生存测试」是一个基于脉脉职场发展模型(决策、感知、控制、协作、自取和信念)设计开发的H5游戏,主要对用户进行情景式压力评估,帮助测试者更清晰的理解自己的职场生存能力。这种结合职场设计的游戏,沉浸感非常强,再加上充满了悬疑的剧情,可以极大提升用户活跃度。

图片

6.8 1024程序员鉴别挑战赛

这个游戏的设计非常创新,为了致敬伟大的1024程序员,设计了一个程序员鉴别的挑战赛。当用户发起挑战以后,需要根据照片和提示找出对应数量的程序员,当你提交答案,还会关联到用户的脉脉主页,提升曝光度。这个游戏还设计了游戏难度,根据脸型、发型、衣服、背包、鞋子和眼神不断提升游戏难度,让用户越玩越上瘾,提高用户活跃度。最后还设计了「我的战绩」这个内容,统计用户在这个游戏中的最佳战绩,找到的程序员,进一步吸引用户添加好友,建立关系链。

图片

 

7、小结

从求职端和招聘端的拆解可以看出,虽然网络招聘已经成为脉脉商业变现的核心手段,但「求职服务」还非常单薄。特别是招聘端,相比网络招聘的头部企业如前程无忧、智联招聘和BOSS直聘,脉脉还有很长的路要走。

不过脉脉的产品运营创新力非常强。比如「最热脉」,脉脉通过平台高端的用户资源,联合其他品牌设计了非常创新的产品评测活动,不仅提升了用户活跃度,还实现了商业变现。还有「蓝月职场生存测试」这个国内首部职场沉浸式互动测试游戏,不仅成为现象级互联网行业营销案例,也把脉脉的创新能力体现得淋漓尽致。

 

五、会员服务

「会员服务」主要包含了「用户中心」和「会员VIP服务」,其中「会员VIP服务」是脉脉实现商业变现的重要手段,不仅包含了B端的招聘服务,还有C端各种权益服务,是脉脉的核心收入来源之一。

图片

 

1、用户中心

1.1 影响力

「影响力」就像积分,它是一种社交酬赏,用户可以通过提问、评论、发布文章等行为获取社区影响力。其次,通过每日做任务提升「影响力」的形式,进一步提升用户活跃度,增强用户黏性。最后,脉脉还设计了一个「影响力排行榜」,根据全国、地区、同行和好友的维度进行排名,进一步利用用户的攀比心理,刺激用户完成更多任务提升「影响力」。

图片

1.2 创作者中心

作为一个UGC为内容生产模式的社区平台,为了鼓励用户创作,脉脉为用户设计了「创作者中心」。用户可以在创作者中心可以查看自己的创作等级,完成平台每日设计的任务,参与社区热门的话题。

图片

1.2.1 内容分析

「内容分析」包含了「最近7天被阅读总量」、「同行同工种的阅读量」、「昨日获得互动次数」等内容,主要帮助职场创作者获取全面的创作数据分析,提供一个强大智能的数据助手,从而提高用户参与度。

图片

1.3 勋章墙

「勋章墙」分为三类,第一类是「活跃成就」,分别是「社区主R」、「评论区区长」和「划水的鱼」;第二类是「达人认证」,分别是「行业老师傅」、「脉警长」、「反向背调者」和「offer收割机」;第三类是「创作勋章」,分别是「社区人气王」、「顶峰见」、「神评王」和「评论区楼长」。通过如此多变性的勋章设计,可以利用社交酬赏提高用户的社区活跃度。

图片

1.4 人气周报

「人气周报」和「职趣实验室」的「被推荐数据分析」很相似,未来不知道会不会合并。目前主要是根据用户每周的曝光数据生成当周的数据报告,比如曝光次数、人脉推荐、机遇推荐等。

图片

 

2、会员VIP

脉脉拥有众多用户角色,他们设计了5种会员VIP,满足了不同用户群体的需求,丰富了产品的变现形式,而且定价均不便宜,吸金能力很强。

2.1 商务会员

「商务会员」主要帮助用户开拓精准人脉,购买后可享受12项特权,包含影响力加速、5次极速联系、30个添加好友机会、尊贵标识等服务,售价68元每月,属于脉脉最基础的会员服务。

图片

2.2 VIP会员

「VIP会员」相比「商务会员」,价格翻了近3倍,售价198元每月,核心卖点是高端人脉的拓展,比如互联网大厂的高管等。用户购买后可以享受13项特权和更多权益,比如15次极速联系、90个添加好友机会、联系高端人脉等。

图片

2.3 招聘个人会员

「招聘个人会员」主要面向企业招聘者,购买后可享受17项特权,包含可发布5个职位、提供每月30次的及时沟通、批量职位职能邀约和解锁招聘人才库扩大搜索范围等服务。目前这个服务以7天试用的形式吸引用户开通,到期后价格定价798元一个季度,相比其他网络招聘产品,价格略高。

图片

2.4 销售会员

「销售会员」主要帮助有职场销售场景的用户挖掘商机拓客,购买后可享受18项特权,包含动向智能追踪潜在客户、获取平台的精准线索推荐、专享定制化的线索高级搜索等服务。这个服务定价198元每月。

图片

2.5 职业发展会员

「职业发展会员」主要是面向个人求职者,购买后可享受15项特权,包含简历置顶、数据洞察、双倍曝光、求职立即沟通等服务。这个服务定价58元每月,相比「商务会员」,更侧重于求职的服务,帮助求职者提升求职效率。

图片

 

3、小结

从会员体系看,脉脉的付费会员体系拆分成了「商务会员」、「VIP会员」、「招聘个人会员」、「销售会员」和「职业发展会员」。这主要是因为脉脉有多种用户群体,需求都不相同,这样的设计可以满足不同的用户需求。比如对于一个普通的职场人士,他可能就只有求职的需求;而对于一个有HR、销售人员,他们则需要添加更多的好友、更丰富的功能。

从商业变现能力看,脉脉以手握中高端职场人士资源为卖点,会员定价相比其他网络招聘或社交产品都贵。比如智联招聘,企业会员注册后可以免费发布5个岗位,BOSS直聘甚至只需要开通一个每月50元的会员就能开始发起招聘,而脉脉的门槛则比较高。从用户画像也能看出,脉脉的用户以中高等消费群体居多。

 

六、结束语

距离产品2013年首个版本上线时间已经快九年,在拆解完脉脉后,我特意梳理了一下脉脉过去九年的价值主张的升级(数据以七麦数据为主)。

2013年10月,脉脉首个版本推出,价值主张打造“真实职业形象”。

2016年3月,脉脉的价值主张是打通职场人脉;

2017年5月,脉脉的价值主张升级到——职场人都在用的社交APP;

2018年4月,脉脉把自己定位成一个——职场社交神器;

2019年2月,脉脉全新升级,致力于打造一个职场社交平台,成为职场人追捧的社交神器;

2020年8月,脉脉用户数突破1亿用户,成为1亿职场人士人脉拓展、求职招聘的平台;

2021年9月,脉脉再次升级,以“成就职业梦想”为价值主张,并沿用至今。

可以看出,脉脉作为职场社交行业的后起之秀(Linkedin成立于2003年,天际网和若领网成立于2004年,Glassdoor成立于2007年),设计了一套适合中国职场人士的社交产品,经过多年的努力,成为了中国职场社交的独角兽。虽然很多人还会嘲笑脉脉其实只是互联网的一个茶水间,以看八卦、嗑瓜子为主。但脉脉的产品团队以“成就职业梦想”为企业愿景和产品目标,在这条路上不断努力着。

就像脉脉创始人林凡对职业梦想的定义——中国正经历熟人社会向生人社会的转型,脉脉正在坚持努力的,就是跟随众多有梦想的职场人士和优秀企业一起探索出一条科学、高效并且紧跟时代步伐的职业成长之路,成就全球十亿白领的职业梦想。

这个梦想,也许就是脉脉能吸引1.1亿职场人士使用的动力之一。

 

参考文献:

易观千帆-脉脉APP数据分析

七麦数据-脉脉APP数据分析

脉脉官网


作者:廖庆

转载请注明:学UI网》脉脉产品拆解丨1.1亿职场人士为什么使用脉脉?

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


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


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


轻拟物设计解析 & 案例演示

涛涛


在今天的 UI 设计领域,由扁平化设计风格占据主导地位,已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外,对设计师而言就是设计的难度大大降低了。


一个界面的 UI 视觉元素,仅仅只需要图片素材、矢量图标、几何、文字,UI 设计师的工作仅仅是对内容进行组织和排版,涉及到原创的也仅仅只有少量的图标(大多数人还画不好)。


这种状态持续了很多年,看起来岁月一片静好。


但是,这两年市场发出了一些不同的声音,那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。


比如新拟态风格在年初炒了一波热度,各大平台和公众号都铺天盖地的发文和介绍,介绍它的设计理念和设计方法。


还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标,引起设计圈的热议。


首先讲讲新拟态设计,之所以之前只字不提,是因为我对这个风格实在没什么好感,有种对纯拟物借尸还魂的味道,且它的样式对于信息密度高的应用是完全不适用的,只能活在飞机稿里。


而国内大型应用开始在实际项目中上线拟物图标,意义就不一样了,证明这样的设计是经过几个大厂团队认可,且有共识的。


当然,这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。


今天的互联网和过去不一样,用户的增长留存不再是过去一样通过裂变和口碑完成,一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的,而互联网产品又层出不穷,佛系的等待用户临幸是没有出路,这种现状也被称为互联网的下半场。


佛系不行,当舔狗更不行(成本太高),所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高,运营活动越来越密集,广告和强提示也越来越多。比如刚打开了三个应用,进入的首页大家自己意会……


有点扯远了,回到话题上。在这种掠夺用户注意力的思路指引下,再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后,那么进一步在一些细节处应用拟物就成为必然的选择。


而拟物的应用并不可能铺设到整个应用中去,因为完全拟物化的设计降低信息浏览效率是必然的,所以它只适合做局部的视觉强化,来加强用户对特定区域的感知。


最常见的需要被凸出的要素,就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配,相信大家已经很习惯了。


只是,这些图标开始在脱离运营活动的状态下,也开始使用非扁平模式,那就不再是运营设计师的工作职责,而是 UI 设计师们绕不过去的槛了(知识盲区)!


且除了 APP 外,其它领域对于拟物设计的需求也会开始逐渐提升,尤其是目前越来越复(fu)杂(kua)的大屏数据展示、车载界面、定制系统等等。


作为新世代的 UI 设计师,多数人对拟物的设计可以说是完全空白的状态,所以是时候要重拾拟物设计这个传统艺能了。







前面我有提到,拟物主要应用在关键的图标上,但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物,而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。


首先我们看看,过去优秀的拟物图标和设计案例,它不仅表现元素本身的光影、透视、构造,甚至会非常完整的表现物体表面的材质和肌理。


这种图标单看起来确实很好看、细致。但是,把它丢进我们当前的页面中是非常违和的,因为它们细节实在太多了,而且画起来非常耗时间,不利于项目整体的推进。


所以为了符合画面的质感,又要考虑项目效率,轻拟物这个概念开始被提出和应用,作为一个折中的解决方案。


它和纯拟物设计的共同点在于,也表现光影、结构、透视,但它尽可能精简了轮廓的复杂度、肌理和层级,呈现出更概念化、理想化、易于辨识的拟物图形。


所以,我们主要去学习的内容是轻拟物的设计方法,而不是徒手画照片(这个可以缓缓)!


而轻拟物虽然 “轻”,但它依旧也还具备拟物的基本特征,是有实体质感的。但是扁平从插画到图标设计经过多年的改版,有各种叹(hua)为(li)观(hu)止(shao)的设计,应用大量的渐变、投影、模糊的效果,比如下图案例。


这在我们之前图标的系列干货中有提过,这类设计是面性图标的进阶版,它们依旧属于扁平风格的范畴之内,不能和轻拟物划上等号。


对于这几年才开始学习 UI 设计的新手来讲,拟物已经变成一个很陌生的事物,这对行业来说是比较悲哀的一件事。


因为拟物的设计不仅仅是画图标而已,对它的学习可以全方位的提升设计师的基础素养,不仅包括对传统美术(结构、光影、色彩、透视)知识点的剖析,还包含对 PS 使用的深入探索。


可以说,自从拟物不成为必修题材以后,九成以上的UI设计师是不会用 PS 的,这极大的限制了他们自身的可能性和作品的多样性。








轻拟物本身也是拟物,所以它的核心基础和拟物设计师一致的,只是省略了更多复杂的细节。而对于整个拟物的体系来讲,最重要的东西实际上只有2个,形体、光影。



形体表现


形体的表现,就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中,有写过面性图标进阶的设计中,可以包含更多的细节、内部元素,而不是仅仅只有外轮廓。


轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上,即你要把这个图形的内容有明确的示意并画出来,而不是用抽象的图形做填充而已。


比如大众点评的快速入口图标,虽然看起来很复杂,但是那是配色上的复杂,而不是形体轮廓上的具象化。


换句话说,拟物插画的图形基底,类似扁平插画风格图标,不能表现得太抽象,也不能增加过多的细节,需要一种恰到好处的平衡(玄学),这就非常考验设计师的判断和经验了。


并且,在描绘轮廓的时候,新手尽可能的采取正视图来进行绘制,而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面,这样难度会大幅度上升,比如下面这种情况。



光影表现


除了形体外,光影就是整个拟物的灵魂了。


当一个完整的图形完成填充色时,它是扁平图案,如果完成光影呈现的时候,它就是三维空间的立体图形,比如下面这个圆的案例:


在拟物的设计中,我们对光影的定义是至关重要的,所以首先就是针对该图形确定光源的方向,是上方、前方、左上还右上,这对后续的设计有一连串的影响。


如果对光影没有正确的解释,那么在制作细节的渐变角度、投影的使用上,就会产生错误的设计,造成光影视觉冲突和矛盾。


在创建了光源以后,物体受到光线的影响就会产生明暗面和投影,可以简单划分成4个部分,高光、亮部、暗部、投影。


这和我们学习的素描有一定的差异,美术中对光影的表现害会包含明暗交界、反光面,这对于轻拟物的来说负担太重,所以我们要去掉它们,接下来重点讲讲高光和暗部。


高光是物体作为受光物对光源的直接反映,比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现,再或者一拳超人中男主光头上长期存在的高光配饰(多数动画的光头角色都有)……

高光可以非常有效的增加画面的层次和对比性,让物体看上去更有冲击力和观赏性。


而暗部,则完全是为了正常表现物体结构和弧度增加的示意,因为不在受光面,所以颜色会变暗。在实际操作过程中,我们可以通过渐变的方式开控制明暗的表达,但尽量不要直接手动设置一个渐变色出来,而是为它叠加暗部或亮部的黑白透明度渐变。

了解这几个特性以后,下面,我们就通过一个实例来讲解一下轻拟物设计的过程吧。








作为轻拟物的演示,直接画个图标讲一遍怎么操作是没什么用的,我们要从实际场景出发,用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页:


总结它的问题,不难发现首页顶部业务功能太多了,顶部图标就包含30个(加滑动的),虽然每个模块图标单看都没有硬伤,但堆积到一起,就使得顶部缺乏足够的信息层级和对比性。


我们要做的,就是通过轻拟物的方式,调整快速入口最大的三个图标,凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始,讲解一下如何完成轻拟物化设计的升级。


第一步:确认轮廓造型


第一个操作,即确定图标本身的轮廓。根据原有图标的样式我做了一些改动,包括加粗车头,减少高度,增加车灯等。并对每一个模块进行纯色的填充,定义它们的色彩和做出区分。


形体的重要性在于要对图形本身有比较合理的呈现,不要让比例失调和图不达意。



第二步:完善图形细节


这一步,就要在原有基础上,进行下一步的深入。包括对一些细节交代得更清楚一点,增加一些有趣的小元素等等,完善它的具体样式。



第三步:增加基础的暗部表现


在这里,我们就要开始为图标增加高光了,高光从右上角打下来,那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现,让整体的立体感稍强。


这一步在软件中主要使用蒙版功能,通过蒙版在背景上方创建一个图层,然后添加深色的透明度渐变,就可以表现出对暗部和投影的效果。



第四步:增加高光效果


接着,就是最后一步,将高光添加到画面中来,讲整个图标的质感进行拉升,

undefined


通过上面的演示,我们可以将整个拟物设计流程精简成:


1.确定图形基本轮廓、外形比例、模块色彩

2.丰富细节样式增加趣味性和适当的拟真感

3.通过蒙版添加暗部来完善表现的明暗和层级关系

4.添加高光元素作为图形的亮点,拉升层次感


然后,通过这样的步骤,再来完成后续的两个图形,拆解完的效果如下。



然后,再用这三个修改后图标套用进原来的页面,并做出对应的修改,再来看看前后对比:



通过这个对比,我们就可以看出在这个复杂的首页头部中,轻拟物风格可以从一众平面中被凸显出来,且不会显得太突兀和复杂。


而这就是轻拟物在项目设计中的实际作用,当画面元素已经开始超负荷,且容易导致同质化的审美疲劳和主次不清时,就是轻拟物登场的时候了。







最后的总结,学习轻拟物就是增加我们完成界面视觉输出的可能性,为视觉创意增加一些储备弹药,以应对越来越复杂的互联网产品和职业要求。


我们只在这篇罗列了制作的顺序和思路,并没有把软件的操作完全放出来,一方面是因为时间上来不及(偷懒),另一方面是希望大家不会被软件的使用框柱。只要概念清楚了,那么使用 PS、AI、Skecth、Figma 还是 Affinity 等软件都可以做出来。


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

作者:酸梅干超人    来源:站酷


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

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


10年经验总结的高效 UI 配色策略

涛涛

从平面到屏幕,CMYK 到 RGB,墨点到像素,色彩越来越丰富,形式越来越复杂。而 UI 的发展从拟物的繁琐细节中挣脱出来,却在色彩的展现中放飞了自我。


零售业有个有趣的研究成果 —— “七秒钟定律”:人们在挑选商品和服务时 ,只需要 7 秒钟就可以确定是否感兴趣,而在这短暂的 7 秒钟内,色彩的作用占到了 67%。


要在小小的手机屏幕中加入这么多颜色,并保持其中的联系和逻辑,着实不易。如果你还对配色一无所知,完全不知道配色应该怎么入手,那么你需要了解一下,我几年经验总结的配色思路。






无论我们用 PS、AI,还是 Sketch、XD、Figma,和色彩打交道最多的地方就是拾色器窗口,我们来看看这些案例:


虽然是不同的应用,但是这个拾色器的用法大同小异,但是,很多新人并没有搞懂拾色器的正确应用逻辑。


很多人知道,UI 的色彩使用 RGB 模式,但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑,也就是色相(H)、饱和度(S)、明度(B)。


HSB 是色彩科学中对所有颜色属性的理论划分,是种概念上的定义,可以用来解释任何色彩,也就是说可以和 RGB 和 CMYK 相互转化,且 HSB 的选色逻辑更清晰、简洁、干练。


因为一个正确的选色过程,是先确定出色相,然后再在这个色相维度下选出明度和饱和度,所以我们首先要关注色相选择条。


细心的同学应该已经发现了,它们的首尾都是红色,那是因为色相的序列是一个首尾相接的环形模式,所以它实际上就是色环的柱状展示图,应用起来和色环没有实际区别。


接下来就要说到重点,饱和度和明度选择区,我自己使用的习惯,是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域,然后明确它们在 UI 中的对应情绪和应用场景。


在过去的大量分析中,互联网产品的主色和重要辅助色都会往右上角聚集,一些次要、不可点的色彩聚集在中上方,而文字背景色则聚集在左侧,无人区则是我们重点避开的对象。


下面我们分析几个案例,看看它们在这个选择区中的色彩分布情况:

undefined


大家也可以自己拿一些主流的应用做截图,然后把它们的 UI 元素色彩排列到拾色面板中,就会得到基本一致的结果。牢记这 9 个区域的场景划分,可以帮助我们非常高效、安全地完成 UI 配色。






在众多的 UI 设计规范中,色彩部分的介绍,都必然包含三种类型,分别是:


  • 主色:应用的核心色彩,品牌色

  • 辅色:丰富页面视觉和传达效果的次要颜色

  • 中性:没有色相的文字、背景用色



2.1 主色的选择


主色是一个应用的最核心的色彩,品牌的象征色,比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。


确定主色,并没有大家想象的那么复杂,它的要点在于 —— 你想让用户感受到哪种情绪,然后通过情绪关联一个大致的色彩范围,再进行微调。


在今天的互联网产品中,主色的应用选择范围在拾色器区域的右上角,前面已经有解释了。这和平面设计中的用色有非常大的不同。


移动端产品要在一个方寸大的空间中争夺用户的注意力,引起用户的兴趣,那么低饱和清淡的色调是无法实现这个目标的,所以今天主色饱和度越来越极致,比如我们之前整理的,发在站酷的一篇总结:


支付宝主色变更分析


再加上屏幕的 RGB 显示特性,高对比度,高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法,就是在确定色相类型后,在右上方区域选出合适的色值。



2.2 辅助色的选择


辅助色是丰富应用中的次要色彩,它会包含一到若干个和主色不同的色彩,除了品牌传达外,具有更强的实用性。


前面我们提到过色环,这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型,它蕴含一个最朴素的原则,即两个颜色在这个环形中角度越大,那么视觉差异性越大,对比越强,比如下图的展示:

undefined

这些配色的模式是不能闭着眼随便挑的,它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择,是根据实际场景的功能决定的。


比如通知、提醒、取消用大红色,确认、同意用绿色或者蓝色,收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型,跟着常规方法来做,是没有其它思路的情况下最简单、最安全的辅助色选择方式。


没有标准元素用色的情况下,再考虑应用色环的 “角度原则”,越需要被突出的颜色,可以在色环中离主色越远,越不需要被突出的则越近。


比如下方携程的案例,主色在蓝色的情况下,支付、保险金标签这些需要被重点突出的色彩,使用了主色的互补色, 让我们一眼就能看见并产生强烈的操作欲望。



2.3 中性色的选择


中性色,是页面中文字、背景用到的颜色,它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要,实际情况恰恰相反。


主色辅助色决定了界面视觉是否出彩,而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例,就应该明白,即使只有黑白灰的状态下,我们理解这些页面和进行使用也不会有丝毫的障碍。


中性色的配置,就是制定一个由深到浅的灰度阶梯,应用在对应权重的元素上,色彩轻重的主要判断依据是 HSB 中的 B(明度) 值。

undefined

中性色虽然指的是无个性,但并不是只能用纯灰色,常见的一种做法,就是为中性色添加适量的蓝色饱和度,提升观看体验(满足 RGB 的某种特性)。


这种做法,颜色越浅的时候饱和度应用色值就越低,将这个规律在拾色器中进行表现,那么我们就可以得到一个 L 型曲线,我称它为 “中性曲线”。


掌握对于主色、辅助色、中性色的选择方法,那么对于 UI 配色的奥义来说,你已经掌握了一半,接下来就要了解更具体的实践思路了。






配色并不是只有色彩的色值本身,大家一直在研究各种色彩心理学和理论,却很少关心它们应用如何应用,如何配置。


所以,我根据主色和辅助色应用总结了一个配色的四象限表格,在分别看看它们对应的案例:

undefined


3.1 主色占比大,色彩丰富度高


主色会作为顶部标题栏或其它重要模块中的背景色,进行大面积应用,加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务,需要用丰富的色彩来进行暗示,吸引用户关注。


undefined



3.2 主色占比大,色彩丰富度低 


这类配色中,主色的应用占比也大,出现频率高,鲜有其它颜色出现。比较适用于图片内容丰富的题材中,或者是相对正式、品牌感强的应用。


undefined



3.3 主色占比小,色彩丰富度高


这是多数主流应用的趋势,降低主色占比,留出更多的空间给内容模块的展示上,突出自身带有的服务和功能。


undefined



3.4 主色占比小,色彩丰富度低


通常,会应用这种方式是因为产品的服务是相对单一,但也需要用户投入注意力的应用,设计师就会尽力避免给予用户过多的干扰。


undefined

每次在进行配色的时候,我们都需要对自己要应用哪种配色应用方式做出规划,然后再动手执行。有了这个目标,后面在整个项目的设计中的配色步骤就是水到渠成的事情了。






在实践前,我们要简单讲讲一个应用或者界面的标准配色的流程了,流程顺序如下:



undefined



具体应该怎么使用这套流程,我们用一个图虫 APP 改版的案例来做演示,首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。



4.1 配色流程演示


原型是 UI 设计的基本艺能了,在开始具体设计、配色前,搭建页面的框架原型是一个必备的条件,下面,是我们已经准备好的原型案例。


然后,我们确定以橙色作为应用主色,并在拾色器中进行确认。


有了主色,就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的,那么首先可以用到的就是顶部标题栏的背景色了,以及底部 Tabbar 中的选中色,大按钮色等。


接着,我们开始整理中性色的使用,选择新的颜色来填充文字和背景,清晰的表现模块层级,文字信息的权重。


最后,就是添加辅助色和其它色彩的元素了,这个步骤建议都是放在最后一步操作。因为色彩越丰富,越难控制,容易让整个画面显得杂乱无序,所以先完成基础搭建,可以更好的帮助我们判断彩色的使用是否合理。


下面,我们使用彩色的金刚区图标,然后将用户关注、认证用户、标签等元素使用其它色彩,来丰富页面的色彩内容。

undefined



4.2 其他配色类型应用


根据第一个方案,我们可以再用这个原型来实现其余的三个方案的配色。


比如下面的主色占比大,但是色彩丰富度低的。因为已经不太应用其它辅助色,所以主色填充上我们不再填充顶部导航栏的背景,而是将更多元素应用主色,减少辅助色数量。

undefined

然后是主色占比小,色彩丰富度高的方案,进一步降低主色应用的比例,然后在金刚区、标签等处使用较为丰富的配色。

undefined

最后,就是主色占比小,色彩丰富性也低的方案,那么使用中性色的元素就开始增多,只保留最核心的一些元素使用主色,和极少的辅助色。

undefined

根据四种不同的配色方案,我们就可以得到四种不同的配色结果和风格,在每次设计开始实施前,我们都可以根据这种做法来做尝试,并选出自己满意的方案。


要再次强调,UI 配色是极其强调形式的应用科学,最后做的往往会和一开始想的效果有极大出入,所以需要我们有几个备选方案,可以随时进行调整,并选出合理的那个。






以上是我们关于配色有关知识点的分享,希望可以帮助大家提升对 UI 配色的认识。




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

作者:酸梅干超人    来源:站酷


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

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


B端设计|B端图标不会做?一文讲清B端图标如何设计和应用

涛涛


在开始讲解 B 端的图标设计前,我们先来复习一遍图标设计的基础知识。相信不少同学看过我们之前更新的图标系列干货,没看过的可以先收藏起来,等等看完本篇分享后再去阅读……

史上最全的图标设计教学.1 —— 图标设计详解

史上最全的图标设计教学.2 —— 工具图标的设计

史上最全的图标设计教学.3 —— 其他图标及应用


1.1 图标的主要类型


理解图标,首先关注的是图标本身的类型,在整个 UI 体系中,图标基本就分成3个大类:



工具图标:包含一定产品功能隐喻的简化抽象图形,代替文字节省界面空间,方便用户理解

装饰图标:主要目的是用来装饰界面的视觉元素,样式大于功能,常用于节日活动中

启动图标:产品的启动图标,即用来在系统中打开该产品的图形按钮,基本以自身 LOGO 为主


在 B 端项目中,应用最广泛的必然是工具图标,而装饰、启动图标却鲜有露面机会。但出现的少,不代表没有,解释工具图标前,我们先优先讲解下装饰和启动图标在什么情况下会出现。


其中,SAAS 类服务就有很多会重点强调品牌、情感化设计的案例,例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。



启动图标则会应用在一些比较大型的项目里,当项目出现了很多下级功能模块或类似插件的体系时,就会采取使用应用图标的方式作为入口。


比如 Figma 也是一个 B 端工具,它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品,一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求,就自然而然会用到启动图标了。



最后,就是我们熟知的工具图标了,前两种图标,在前期画不好不要紧,毕竟这类规格的产品会有经验更丰富的设计或总监坐镇,新手当个切图仔即可……


但是工具图标,重要性就不言而喻了,B 端项目对工具图标的需求非常大,几乎每个组件中都会包含图标。



虽然今天网上有非常丰富的图标素材库,但在形式各异的 B 端项目里依旧是供不应求的,各种行业特有的功能、实物、隐喻,只能设计师自己完成。


B 端设计师在图标设计领域的主要工作,就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。


1.2 B端工具图标的风格


工具图标的应用主要包含两个部分,线性图标和面性图标。



这里再提图标风格,不是把以前的知识点重新讲一遍,而是要强调 B 端图标的特殊性。和 C 端相比,B 端图标的实用属性更高,并不需要过多凸显本身的视觉风格。


所以,工具图标中,使用大量渐变、插画、投影的类型都要排除掉,它们对 99.9% 的项目都只会造成体验的负影响,不要被网上的追波风飞机稿给带偏。



适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可,一定要划分出差异,应该只包含圆润、纤细、尖锐这几种。



很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢?答案是没有差异。


线性和面形的使用,纯粹看设计师在当前场景判断哪个合适用哪个,只要保证对应图标风格统一即可。


不过如果遇到一些比较特殊的情况,比如要表现各类设备的复杂图标,那用线性的做法还是相对合适和简单一点。



1.3 图标的统一性规范


对 B 端设计来讲,独立设计图标的步骤是必不可少的,应该掌握的图标规范还是必须要懂的。


我们虽然没有 C 端那么多风格和技法的拖累,但想画好 B 端图标却多出了其它难点,那就是一个页面中出现的图标实在是太多了。



这就引发了我们要讲的第一个规范要点 —— “统一性”,所有同规格类型图标具有一致性的特征,这些特征包含了:

  • 粗细一致:首先使用统一的描边、线段粗细参数
  • 圆角一致:使用一致的圆角数值,不要一下尖角一下圆角
  • 透视一致:使用接近的透视角度,不要有的侧视有的正视图
  • 大小一致:视觉的大小保持一致,有均衡的大小感受


如果不能保证统一性的基本要求,那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标,它们的细节完全不一样,统一性当然无从谈起。


而让整套图标保持统一性,是相当有难度的,其中最难的一点,就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸,但不代表图标实际图形的长宽数值是完全一致的。


几何图形对视觉有一定的欺骗性,有不同的大小体验,比如下方案例(鱿鱼游戏乱入?):



所以,基于这样的特性,每个图标本身都包含了两层属性,图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小,是透明白的,排版的时候以这个尺寸作为实际的边缘来测量。



而视觉尺寸,则是在占位尺寸下图标图形的实际大小,这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的,我们用占位尺寸包裹它们来方便我们进行统一的应用。



所以,使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然,不同的素材,这个留白也是有区别的,下一个小节就会解释。


最后要声明一点,一套项目中可以包含多个规格(2-5个)的工具图标,比如导航用的图标比普通工具图标更复杂一点,设计师只要保证每种规格保持的统一性即可。


1.4 图标的栅格系统


图标越多,大小的控制越困难,所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。


在 Ant 的体系中,一个基于栅格的图标实际包含3层,背景层、格线层、图形层。



背景层,即图标展位尺寸,需要先确定出这个元素的大小,然后才是里面的绘制区域。通常,栅格系统会为边缘预留 1-4 像素的内边距(出血位),正所谓四周留一线,日后好相见。


格线层,则是使用的栅格线段,也是最重要的部分。格线层通常由 4 个基本图形构成,包含正方形、圆形、水平长方形、垂直长方形。


这四个图形的长宽大小不一,原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列,就可以发现它们的视觉大小非常接近。



这些格线的作用,就是提前帮我们确定好视觉比例,帮助我们快速绘制相同图形类型的图标。



但是,不是完美符合这四个图形要求的图标该怎么办,总不能格线把所有轮廓都给你实现出来吧?


格线的另一层作用,也就是最重要的作用,其实是一个用来做测量的工具,而不是轮廓依据。在几何视觉差中,最基础的大小原理是占用面积越大的图形,尺寸感受越大。所以,长宽一致的正方形大于圆形,圆大于三角形。


所以当我们绘制的非常规图形,和类似格线进行对比时,长宽缺少的一侧,就要由另一侧增加数值来填补它的面积。


比如下图 Ant 官方的电脑图标,它的宽是横向矩形,但是中间区域面积较小,所以增加了高度进行平衡。



再看一些其它的案例



这一步没有固定的参数使用技巧,设计师需要将完成的图标置入到其它图标旁边进行调试,确保尺寸是合适的。

格线只是一个图标大小设置的参考工具,一切以最终效果为标准。





理解完图标的基本规范,就到图标的使用逻辑了,解决一些常见的设置误区。


2.1 图标应该做多大

图标该做多大的,这是目前被问到最多的问题。本来应该是非常简单的一件事,但很多工作多年的设计师也搞不清楚。


仔细捋了捋,罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。



要重点强调,Ant 设计图标的意图,和一般项目的是完全不同的。Ant 作为一套庞大的开源项目,它的图标核心特征之一就是 —— 适应性


这些图标要被应用到各种不同的设备、显示器、系统中,图标尺寸会用多大,在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成,后续实际应用中的缩放、匹配也就越容易,适应性越高。


但是,在我们自己的项目中,这种做法是完全没有必要的,1024 图标的负面影响包含:

  • 像素数过多使得数值的制定难度大大提升,不管是元素尺寸还是描边粗细
  • 矢量图形源文件进行缩放很容易发生错位,提前轮廓化会破坏源文件
  • 缩放图标后描边的数值往往会出现非整数和 0.5 的状态,虚边问题严重


在常规项目里,一套项目是可以包含不同尺寸和规格的图标的,而不是我们做一套相同风格的图标在整个应用中无差别使用。


这也意味着,每个图标在产品中的使用场景通常只有一个尺寸,不需要去面临缩放的情况。即使需要缩放,也只是这套图标中的少数几个需要,或者相对特殊的项目。


所以,图标尺寸设定,就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适,然后创建同样的数值即可(尽量以4的倍数为标准)。



2.2 素材的正确使用方法


我们知道图标的素材非常丰富,不管是 Iconfont、IconPark 还是 Iconsearch 等网站,都提供了海量的素材。但是只要稍微专业点的项目,往往素材库都满足不了,部分规格的图标还是需要我们自己重新绘制。


所以说图标素材就完全没用了吗?当然不是。


图标的正确用法是作为一种快速试错的参照物,它可以帮助我们实现:

  • 参考图标的具体尺寸在哪个数值最合理
  • 参考当前场景使用面性还是线性的风格更合理
  • 参考图标的设计风格是圆还是尖锐更合理
  • 参考相关隐喻的图形样式哪种更合理


在项目的界面设计阶段,我们一向建议优先使用外部的素材,尤其是 IconPark 这种比较统一,还可以快速调节图标样式的工具网站。



这个过程即使素材找不到和寓意一致的也没关系,用相近的图标替代就可以。等到页面布局基本完成以后,最后再集中精力对需要绘制的图标重画一遍(甚至是在开发阶段绘制)。


通过别人的图标来快速匹配尺寸、风格、样式,会帮助我们节省非常多的时间,也有助于我们设计出更专业、美观的图标。


另外,就是针对项目一些偏小尺寸的通用图标,就可以比较放心的应用素材,例如翻页的左右、更多、下拉、搜索等等。



2.3 图标的色彩和状态


图标的尺寸、样式都确定了,最后就是关于图标的色彩和不同状态的制定了。


前面讲过,B 端项目对图标的装饰属性没有那么迫切,所以正常情况下,太花哨的图标是要尽量避免的。彩色、渐变色、投影,都不应该在这个情况下胡乱使用。


常规的图标只要使用中性色即可,而需要特别对待的图标,色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。


当然,如果项目涉及到一些特殊的工具图标,类似工厂、工业领域表达实体设备的拟物图标,可以打破这个原则。但是,同样避免这套拟物图标的每个图标用色不同,尽量只使用 3 种以内的颜色完成拟物的填色。



同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现,部分图标会承担按钮的功能,包含默认、选中两个基本状态。


普通权重的图标,未选中状态可以在默认色彩基础上使用透明度来实现。



高权重的图标,则可以在选中的状态替换色彩,或者更改图标的类型,将原本的线性更改成面形并填充色彩制造反差。





完成所有图标的设计以后,最后一步就是切图和导出了,这决定你的图标能不能被正确运用到线上项目中。

3.1 图标的收纳和命名


在一套专业的 B 端项目中,已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里,而是在规范页面中有统一的整理和收纳。



这种做法的流程是,先在软件的规范库中创建对应的图标组件( Symbol / Compoent ),然后再在具体页面中应用,方便后续的统一管理和修改。


而在这个过程中,我们也需要对图标有正确的命名方法,来确保团队调用、检索图标的效率。通常,我的图标命名规范如下:

尺寸 / 类型 / 图标名-状态


示例:

48px/导航图标/表盘页-默认

24px/一般图标/搜索-默认


“/” 号的引用主要是方便软件中对组件层级进行划分,而我调用图标的规则势必是先从尺寸开始,再选择对应规格,最后类型和状态。


提前命名也是方便后续我们切图和导出,但要提及一点,图标的命名不要追求英文化,因为我们的词汇量不可能实现正式的英文命名规则,只会写一堆大家都看不懂的单词。


而开发在使用我们的图标切图时,也不会用我们之前取的命名,会根据自己的命名习惯重新命一遍,写个让他能看懂的名字远比用乱七八糟的英文强


3.2 图标的切图格式


接下来,就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片,然后上传蓝湖发给开发自生自灭了,这是一个非常不合理的操作。


再或者,强行使用 Fonticon 格式,而不管实际情况如何,造成最后实现效果完全不同步或实现不了。


切图是通过前端调用并在浏览器中进行显示的图形,而要被浏览器正常显示,就有必要了解适合使用的切图格式。


图片的格式包含位图和矢量两种,位图是通过记录像素色值的图形格式,假设一张图是 100*100 像素,那么记录 1W 个像素点的色彩,所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式,可以支持自由缩放。


理论上,矢量格式是最佳的图标切图格式,但是它的限制同样有很多,例如:

  • 无法记录渐变色
  • 导出轮廓容易有错误
  • 无法记录拟物图形
  • 无法记录投影元素


前面说过,普通项目中同一图标是很少出现一会儿大一会儿小的需求,所以矢量最大的特征无损缩放,往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题,而不是网页端的基本使用。



当一套项目中出现了矢量格式无法覆盖的图标时,那么即用矢量切图,又用位图,就会显得非常的混乱。只有类似 LOGO 等图形元素,才需要考虑 SVG 格式,而不是一看到图标就上。


所以,最适合切图的格式就是位图的 PNG 格式,一方面它是无损的,另一方面它支持透明背景,在切图应用上可以完美和设计稿结合,而这是其它大多数位图格式不具备的特征。


当每次项目完成以后,并不需要通过蓝湖来实现切图的导出,如果切图文件分散在各个项目页面里,那么一定会有很多图标被遗漏,尤其是图标的不同状态切图。


所以,最理想的切图形式,就是将所有图标完成整理和命名以后,一起框选,然后导出成 PNG 格式,再同步给程序员即可。






以上就是关于 B 端图标应用的所有知识点了。

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

作者:酸梅干超人    来源:站酷


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

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

日历

链接

个人资料

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

存档