首页

交互长篇|B端UI设计师的交互文档应该怎么写?

资深UI设计者

1.1 交互文档是什么

交互文档,是一份用来解释项目交互方式、内容、规则的说明文档,也叫 DRD ( Design Requirement Document )。

在过去的分享中,我们有解释过,B 端项目会包含大量的交互内容,需要前期绘制交互原型来展示和确认交互方案。

如果是比较简单的小型项目,或成熟产品的小迭代,那么这样的连线图确实就足以表达交互的意图和方案了,写太多注释文字反而会画蛇添足提高观看者的认知成本。

但是,如果项目和展示的流程内容,逻辑非常复杂,包含非常多的选项和状态,那么单靠原型和连线是绝对不够的,添加更多的图文说明就变得非常有必要了。

同时在团队协作场景中,就需要将这些内容制作成一份规范的 “文档”,用来进行统一的展示、备份、归档。

所以做交互光靠画交互原型是不够的,“文档” 就成为必要的输出成果。

1.2 它和产品文档的区别

在产品侧(非开发),文档就有好几类:

- 商业需求文档:BRD,Business Requirement Document

- 市场需求文档:MRD,Market Requirement Document

- 产品需求文档:PRD,Product Requirement Document

- 交互说明文档:DRD,Design Requirement Document

- 设计规范文档:DGD,Design Guidline Document

BRD 和 MRD 是一个产品经理行业内部也在反复科普讨论的东西,和我们没多大关系可以暂时忽略。设计规范文档 DGD 大家应该也有概念,比较容易辨识,也不需要在这里强调。

而产品需求文档 PRD,是和交互文档最撞脸的文档类型。它们的文档规格、样式几乎一致,还包含大量界限模糊、相互交叉的内容范畴,会对新手的理解造成很大的不便。

要理解产品文档和交互文档的核心差异,就得从他们各自的工作职能说起,产品经理的主要产出是解释产品要做的功能和逻辑,所有的原型和连线的目标都是为了解释功能本身。

部分产品经理会 “顺带” 在这个基础上增加交互的元素,以及相关的说明。这恰恰是问题的关键所在,因为产品经理制作产品原型的过程是可以覆盖一部分交互信息的,所以很多设计师也天真的认为交互内容是应该由产品来出的。

这当中一定要关注里面的 “顺带”,因为一份有效的 PRD 主旨一定不是以交互为核心的,在面对需要大量图例、连线、方案、解释的交互问题下面,产品经理往往选择直接跳过,只把功能描述清楚,剩下的就交给交互设计师还是 UI 设计师来完成具体的交互方案。

所以,交互文档就是在产品文档的基础上,进行交互内容的补充,专注于解释项目的交互内容,让设计师和前端开发可以更直观得理解后续的工作内容。

来自 UEDART 的付费文档,案例地址:http://vip.uedart.com/interactive.html

交互文档和产品文档是相互独立和补充的,当产品文档无法完成对产品交互的有效解释时,我们就应该选择输出独立的交互文档,来提升项目协作的效率。

2.1 主流的交互文档工具说明

主流的交互文档输出有三种方式:

1. Axure/墨刀 导出

2. 一般文档制作

3. 线上 Wiki 记录

Axure 和墨刀是用来制作产品原型的软件工具,也是目前在产品经理、交互设计行业中应用最广泛的原型工具。

它的主要优势,在于可以比较方便的制作可交互的组件、连线、导出。

当然,光制作原型图并不能叫交互文档,它们还提供了比较全面的内容标注、文本记录、图形绘制的功能。

这就可以让我们完成原型绘制以后,结合页面结构的管理,添加交互文档所需的其它信息,并最终输出文件。

而在一些比较传统的行业或外包领域,使用的记录文档往往要使用 Word 或 PPT(方便开会演示或要打印)。这就要在原型完成以后,导出原型图例,并使用这些文档软件进行文字的记录和连线。

受限于 Word、PPT 的布局限制(强行分页),使用它们做交互文档是非常难受的,并且这些文档需要保存到本地,存在各种文档版本管理的问题。

所以还有另一部分也希望使用普通文档格式记录,并满足云端同步、备份、版本管理的团队,就会使用 Wiki 类的工具来制作交互文档。如语雀、飞书、Confluence、Notion 等工具。

如果只是一些比较小的项目迭代、一次性使用的交互文档,使用前两种方法都可以胜任。而真正大型、系统性的交互文档,往往都使用团队内部的 Wiki 进行创建和管理。和设计稿不同,这些使用了内部账号或需要内网访问的文档资料,是不会没事发到网上来分享的,这也是在网上找不到完整交互文档的主要原因。

2.2 B端设计师的交互文档工具建议

和你们网上可以找到的大多数交互设计干货不同,我即不推荐你们使用 Axure/墨刀 来画原型,也不推荐用它们或普通文档、Wiki 的形式来输出交互文档。因为:

—— 太低效了!

产品经理和交互设计师的主要产出物就是文档,自然可以耗费比较多的精力和时间去制作原型和编写内容。而 UI 设计师的主要工作肯定是最终的视觉界面和交付,所以用最复杂的方法去制作交互文档,显然是不合理的。

同时还要提一句,Axure/墨刀 等软件用来制作一般的线框图原型,效率实在是太低了。且绝大多数情况下的页面跳转、交互都是可以忽略不做的。而且随页面增加,它的左侧导航层级、数量会非常庞大,导致查找和浏览的效率进一步降低。

在我自己的所有课程和分享中,我始终都建议直接使用你们正在用的云端 UI 设计软件直接绘制产品、交互原型并输出文档,如即时设计或 Figma。

原因包含:

- 速度快:能用 Axure 五分之一的时间完成所有原型绘制

- 可复用:做好的原型方便复用,而且可以直接在原型上完成后续设计

- 交互性:对于表达交互流程所需的基础跳转和动效都能满足

- 更自由:一些需要复杂图文结合的说明方式不再受到普通文档布局限制

比如下面这样的原型案例,就可以通过一个简单的链接快速分享出去,或者添加团队成员自由查看。

在我过去长期的实践体会中,这种方式是优势最明显,效率最高,最易懂,也符合 UI 设计师工作需要的。如果项目中有其它因素要求,你们也可以选择前面的方式输出。

任何文档的目标都是为了书面记录和让看的人更容易理解我们要表达的信息,不要被固定的方法局限住,要努力去探索适合团队当前场景的方式。

3.1 文档框架结构制定

前面把基本的信息聊完了,这里就来具体讲讲交互文档应该如何进行输出。

当然,输出交互文档前需要先理解交互是什么,交互设计的具体设计内容和步骤。交互文档是对你已经设计出来的方案的书面记录,你不能在对交互一无所知的情况下强行编写文档。

交互文档制作首先要确认文档的记录内容和文档结构。

记录内容指的是你在该文档准备放哪些交互内容进去,并不是每次项目设计都要把项目所有页面和流程交互都重做一遍。

比如一次中等规模的迭代,新增几个通用的列表页面,调整了一些细节字段,增加了一个功能流程。那么文档重点记录内容肯定就是流程而不是所有页面。毕竟通用的列表页和细节更改,在产品需求评审阶段就可以完整的解释,而功能流程则不行。

如果是全新的项目,包含数十上百个页面。把所有流程、页面的交互内容全部表现出来的工作量是顶不住的,在绘制原型的过程中,你就会发现有大量的重复页面、流程和交互。所以制作文档就要有目的性的对重复的内容进行合并,以及只保留重要的页面和流程。

具体该放什么要考虑项目的实际情况,需要设计师自己评估。除此以外,标准的交互文档里面会包含背景介绍、编辑日志、文字图例、业务流程、名词解释、页面结构等等。

这些 “文绉绉” 的细节,并不是必备的,你可以根据当前场景自己决定需要加哪些。比如项目、业务背景前面的产品需求已经讲清楚了,业务流程、名词解释团队成员也都了如指掌的时候,那么这些页面模块就完全没有放的必要。

并且,基于前面对放置内容的考虑,结构的顺序并不一定要类似下方案例,完全按照产品的导航目录来走。

所以,根据一个中等规模的迭代项目,我会制定一个这样的一级文档结构。

- 基本信息:项目的简单信息,快速目录,参与人信息等

- 基本组件:涉及的相关组件展示和交互规则说明

- 原型一览:本次迭代涉及的所有页面原型和连线一览

- 流程介绍1:流程1的所有页面、状态、说明展示

- 流程介绍2:流程2的所有页面、状态、说明展示

- 流程介绍3:流程3的所有页面、状态、说明展示

每个1级文档结构对应 UI 软件中的 Page 目录,力求所需的 Page 数量越少越好,而不是像 Axure 的做法一样密密麻麻的。

结构可以根据复杂程度做进一步的细分,它像写文章的大纲一样,帮助我们提前规划好后续完成文档所需的内容和工作量。

3.2 关于连线和标注信息

有了结构,就要在对应的 Page 中填充内容了。其中一般的文字介绍、流程图、思维导图,只要正常输入或将导出的图例黏贴进来就可以。

而针对具体的交互内容,流程解释上,则重点处理连线和标注说明。比如下面是我自己在课程演示中的一个简单的交互流程演示案例。

在 UI 软件中,制作连线其实是很简单的事情,只要画出一个直线,再设置箭头和尾部图形、描边色彩和粗细即可。

然后,将该线段的图层放置在画布之外,起点放置在触发交互的区域之中,终点尖头则紧贴目标画布的边缘(不用特意延伸进画布内)。如果使用水平、垂直的方式连接两个画布,那就可以双击进去添加锚点制作 90 度的折角。

连线的应用是非常简单的操作,不要舍近求远通过插件或是其它的一些功能来实现。而除此之外,我在文档中添加的解释性文本主要有两种,交互事件和交互规则。

交互事件代表了连线的两个页面是如何被触发跳转的,所以我会在线段中帖一个文字卡片,解释触发的条件和交互操作是什么。

然后,就是页面或流程中的交互细则,包含两个部分,数字标签和对应文字注释。它们都是用 Auto layout 可以快速制作出来的组件,每次要做备注的时候,只要复制标签到页面上,设置对应的数值,再将右侧的文字卡片复制到页面旁边,再加上对应的数字、内容信息即可。

在设计软件中,画布的自由度极高,你想要怎么备注和添加内容都没关系,只要在内容翔实的基础上保证 —— 团队成员能看懂,就是一份优秀的交互文档。多在绘制过程中和同事沟通,优化展示的做法,可以避免很多会出现的问题,进一步加速我们的制作效率。

3.3 文档的团队协作应用

将文档全部做完以后,最终就是关于交付和协作的问题了。

既然我们使用线上的 UI 软件来完成交互文档的制作,那么文件设置公开访问权限,再分享链接自然是最简单的办法。

但每次项目分享个网页链接,或者并行有好几个项目,需要其它成员自己去收藏网址,也是挺麻烦的。所以尽量充分应用软件中的团队协作功能,通过创建一个团队,添加成员,让他们自行查看当前文件目录中的交互文档。


查看过程中,团队其它成员可以通过评论的功能对交互内容进行纠错、提问、建议,方便我们进行优化改进。


通过这种简单高效的文档协作模式,我们可以非常快得完成整体交互内容的定稿,并开始后续的工作。

再回到前面的话题,我们是 UI 设计师,不是全职交互设计。原型文档输出完了,下一步可是要做视觉界面的,所以交互文档就可以不用管了嘛?

交互文档的最佳状态是 —— 应用最终界面图例解释交互内容。

也就是当我们把所有页面内容设计完成后,强烈建议将界面的展示和交互文档进行整合。除了前端和产品可以看到最终的交互落地效果外(有时候最终设计和前面的交互不一致),还可以直接通过这个文档查看界面数值标注,而不用往返于交互和设计文档来回切换,这才能让文档作用最大化。

以上就是关于交互文档的相关解释。

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

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


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

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

APP常见的8种导航模式

资深UI设计者

优秀的APP导航设计,能够合理地完美展示产品的功能,并快速引导用户使用,增强用户的识别度。合理的导航设计,会让用户轻松达到目的而又不会干扰和困扰用户的选择。

网上对介绍导航文章已经有很多,有部分已过时,今天自己再重新整理一遍,方便自己也方便更多人理解。


为什么需要导航?
-
1、我可以去哪?
导航为了清晰指引用户完成任务。建立合理的导航系统,设计顺畅的任务路径,让用户不再像无头苍蝇一样,在各模块之间迷失。一个好的导航,能够扁平化用户的任务路径,减少用户操作成本,从而提高用户体验。

2、我现在在哪?
用户当前位置要有清晰的标记,从哪里来,到哪里去。



常见的8种导航形式
-

标签式导航可分为 底部标签式 、舵式导航、Tab标签式导航

一、底部标签式导航
-
底部标签导航是目前最常见的导航形式。底部导航 一般采用3-4个标签,最多不会超过5个。
优点:
1、入口直接清晰,操作路径短,便于在不同功能模块进行跳转
2、直接展示入口内容,内容曝光度高
缺点:
1、功能之间无主次
2、扩展性差,不利于后期的功能扩展


二、舵式导航
-
舵式导航是 底部导航的一种扩展形式,像轮船上用来指挥的船舵,两侧是其他操作按钮。
普通标签导航难以满足导航的需求,就需要一些扩展形式,和标签导航相比,舵式导航 把核心功能放在中间,标签更加突出醒目,同时对主功能标签做了扩展功能。
使用场景:
如1、产品需要特殊的引导,如58同城,引导用户发布任务。

如2、社区产品引导用户发帖子

如3、凸显核心功能,如百度地图、高德等

优点:
1、在默认加载的页面之外,又能够突出强调中间的入口
2、入口直接清晰,操作路径短,便于不同功能模块进行跳转
3、直接展示入口内容,内容曝光率高
缺点:(与标签导航存在同样的弊端)
1、功能之间无主次
2、扩展性差,不利于后期的功能扩展



三、Tab标签式导航
-
一般 用于二级导航,当内容分类较多的时,一般采用 顶部标签导航设计模式


使用场景:
如:为当前界面内不同模块的切换,或者查看不同的分类内容
优点:
标签数量可以随意根据需求变化,可以左右滑动,衍生更多标签。
缺点:
操作热区较小,有APP设计的交互前与后的样式差异不大,容易造成误操作的困惑。(不知道当前在哪个标签下)


四、抽屉式导航
-
抽屉式导航的核心思路是“隐藏”。 隐藏非核心的操作与功能,让用户更专注于核心的功能操作上去, 一般用于二级菜单。 

优点:
1、节省页面展示空间
2、注意力聚焦在当前页面
缺点:
1、左上角的按钮存在于单手操作热区难以触达;
2、降低了用户对产品部分功能的参与度。


五、宫格式导航
-
主要将入口全部集中在主页面中,各个 入口相互独立,没有太多的交集,无法跳转互通。
采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。


优点:
1、将入口进行聚合,入口也清晰直接
2、操作路径较短,用户可以便捷的在不同的功能模块之间进行跳转
3、扩展性好,方便增加多个入口
缺点:
1、用户无法第一时间看到内容或者执行操作,选择的压力会比较大。
2、返回路径较长,容易产生用户不良情绪。


六、轮播式导航
-
采用Banner轮播导航,当应用信息足够扁平, 内容比较单薄时使用。特别是在产品初期,缺乏用户和内容,这种导航目前已经很少用。
该方式就可以 凸显产品核心功能给予用户使用。(如:较早时腾讯极光APP、应用市场等)

优点:

1、展示清晰直观,美观度高
2、内容曝光度高,突出强调了展示内容
3、交互动画可多样化
缺点:
1、展示内容数量有限


七、列表式导航
-
现有APP中一种主要的信息承载模式,列表导航和宫格导航类似,属于二级导航。
列表式导航分为3类: 标题式列表、内容式列表、嵌入式列表
标题式列表:一般只显示一行文字,有的显示一行文字加一张图片等等。
内容式列表:主要以内容为主,所以在列表中就会体现出部分内容信息,点击进去就是详情。
嵌入式列表:嵌入式其实就是由多个列表层级组合而成的导航。

优点:
1、结构清晰,易于理解;
2、使用高效,能够帮助用户快速的定位去到对应的页面
3、能够在列表上直接给出关于活动、更新的提示
缺点:
1、排版方式单一
2、多个入口之间不分级,没优先级之分


八、组合式导航
-
多用于产品本身 功能较为复杂,既需要用户能 聚焦于内容,又需要给出用户不同页面之间的入口,以便用户进行直接跳转,那就采用组合式导航,利用不同导航的特性来满足产品需求。
组合式导航目前最常见的导航方式。
如: 标签式导航+列表式  ;标签式+宫格式  ; 舵式+列表式+标签式  等等;

优点:
1、组合式多样化
2、能给出用户不同页面之间的入口,方便跳转


总结
根据自己的产品功能和特性,采用不同导航模式。
每个产品迭代发展和变化,也会导致产品导航在过程中不停的产生变化,就必须依据用户属性和使用场景进行调整。不拘泥任何模式,解决问题才是根本。




 蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:UX设计笔记    来源:站酷





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



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

排版法则

资深UI设计者

制作作品集、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设计者

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

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

作者:陈亚    来源:站酷


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

蓝蓝设计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元素的尺寸到底该怎么定?

资深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咨询、用户体验公司、软件界面设计公司



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

资深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 风格、元素开始越来越盛行了。


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


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


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


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


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


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


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


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


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


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


只是,这些图标开始在脱离运营活动的状态下,也开始使用非扁平模式,那就不再是运营设计师的工作职责,而是 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咨询、用户体验公司、软件界面设计公司


日历

链接

个人资料

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

存档