视觉设计一个设计师如何有效的将设计点落实在内容上呢？

最近还有众多设计伙伴和同学向我讨论，关于一个设计师必须怎样去推动产品，提高设计价值呢？

虽然说到设计的价值，它是十分大的，可以从这些不同的维度去出发，每一个小点都可以成为闪耀的发光点去推动产品获取价值，并且目前互联网时代，多元化思维越发重要，我们虽然必须在本职范围内去发光，还必须拓展更多的能力。

虽然我也看到至今普遍存在一个很严重的问题，有众多女孩伴设计一个红包也能扯出一堆增长模型，这只是由于随着全链路、全栈设计的噱头出现，以及一系列的模板化思维模式所影响。

设计思维本没有对错，但是必须合理的利用，并且将设计点必须落在实际的内容上，像我们常见的用户画像、体验地图、情绪版等等，那么我们必须怎样有效的将设计点推进在内容上呢？

01

视觉层

众所周知，在整个产品设计中，视觉体验是最直观的，也是我们成为一名UI设计师能直接去妨碍的，而视觉层面的内容基本可以界定为六个点，也就是我们经常所说的-形色字构质动。

在这些的设计采用情景中，这六点都是成为非常基础的内容，像一些视觉语言制定上，而产品设计的过程中，纵使有再多的方式论和认知表现，最终都必须借助视觉的体现，所以我准备借助这几点去深入挖掘，也许可以找到更多的设计布局点。

02

图形

形也就是设计中最基础的图形元素，在平面和品牌设计中常常可以看到，像一些点线面、图形组成等等，而回到产品设计中呢，最典型的形就是我们一直看到的图标，那除此此外，形也有这些表现形式呢？

1.插画

图形的设计体现中，我第一个联想到的就是插画，但是插画的类别和使用方法也分为这些种。

1）功能插画

首先我们先假设一个画面，当我们接触到一个新鲜的事物时，我们首先必须迅速的知道他，我们可以借助产品说明书、产品结构图，场景使用模拟等不同的方法来体现。

此外在一些服务页面或新用途介绍中，都会适当的融入功能插画，而这些表现方式可以促使界面展示更直观，快速的让用户理解所展现的功能意义，减少客户学习成本。

2）场景插画

像一些页面中还可以运用场景插画去体现，不仅可以成为内容的变化性，还可以迅速让用户融入到场景中，进一步提高用户的情感感受。

2.品牌强化

品牌设计的目的就是为了运用图形化的元素，去推动用户的记忆，而随着产品发展成熟，为了可以比较有效的去加强品牌，形成产品间的差别性，设计在体现层可以运用不同的方式去提升品牌。

1）风格延展

设计体现上可以带给产品比较明确的设计样式，例如抖音的故障风格，在界面、插画、活动页面都有很高的延展，这也带给了很深的产品印象，甚至有巨大一个别客户发现故障风格经常联想到抖音。

2）品牌应用

除此之外也可以运用品牌元素进行一定的延伸设计，像Logo图形可以用到这些的界面和默认图上，或者也可以使用品牌形象，在一些界面的提醒信息、内容鼓励、以及一些绘画描绘上，都可以进行有效的融入，进一步超过品牌延伸的功能。

3.元素渗透

那么说到延展，其实我们也可以针对一种元素进行适度的延伸，将所必须展现的内容进行强渗透，从而进一步成为内容的专属调性，以及加强用户的心智。

以下的案例来自携程精选榜单，而在整个入口、详情页，均运用钻石元素贯穿到整个页面当中，不仅可以促使画面变得带有视觉冲击力，也可以促使钻石品质的氛围在页面中多次露出，进而加深页面品质感。

4.数据可视化

图形的体现还有一个特别重要的内容表现，那就是数据图表。在一些软件型或B端产品中，都会有着长期数据，而为了让产品使用更高效，我们可以运用这些方式来展现。

但每一个结构不同的图表，所注重的功能都是不一样的，有的倾向于于数据对比，有的倾向于连续变化数据，有的倾向于占比情况等等，因此在使用的过程中必须区别内容的着重以及用户对数据使用的偏好。

03

色彩

在现实中，颜色赋予了这个世界绚丽缤纷，它是我们肉眼最直观的体会。在设计中，颜色是尤为关键的一个别，它赋予了内容不同的体现方式。

色彩的学问也非常广泛，除了我们常说的色调关系、颜色配色等等一系列之外，色彩上到心理学、下到客户体验，涉及的范围非常全面，那接下去我们就来诠释一下颜色的美好吧～

1.色彩体验

生活中有着不同的色彩，例如黄昏与夜晚、深夜与极光，都有着不同的色彩偏好。除此此外，色彩心理学中介绍，不同的色彩给予用户不同的心理体验。

1）色彩心理学

比如我们经常所说的蓝色表示尊贵，这就好比现实生活中的金银铜牌，他们利用不同的色彩去表现内容的质量，我们正好可以借助这些色彩运用到会员、勋章等内容中，去展现会员的尊享感、情感化，进一步加强用户的身份认知。

2）暗黑模式

颜色的体会也可以运用到全局的设计搭配上，我坚信大家显然都十分熟知前段时间相当火爆的暗黑模式，这就是运用不同的色调来构建特殊的方式，而暗黑模式可以促使用户在夜晚也能舒适的使用产品，并且必定程度上节约手机的电耗。

但不是所有的黑色系产品都是暗黑模式，我们也可以运用这些色彩配色成为不同的产品氛围与传统。例如抖音、MOO音乐等等。

3）无障碍设计

以及随着互联网的演进，用户群体逐步庞大，其中还有部分身体有局限的客户，对于它们来说非常迫切通过互联网获得信息，因此愈发越多大公司重视到这一方向，而这只是我们成为一名设计师，更需要去改进的方向。

可以采用无障碍色系，以及色彩的色差处理，针对性的服务于色盲和色弱群体，使得它们可以在信息阅读上更符合人们的习惯，从而进一步成为更人性化的产品体验。

2.沉浸式体验

色彩配色讲究色泽统一、协调，在一些界面中，我们可以运用这些颜色技巧去构建氛围，可以有效的提升界面沉浸感，但是产品中由于内容的差别难以固定形状，而这也会造成色彩统一性较难处理，因此可以运用代码的素养判断封面颜色偏向，从而进行填色，例如豆瓣app。

虽然这么，我们也会经常提到头部背景图和banner图的色调也会统一处理，这是单独配置了一张背景图，从而超过页面头部的协调性。

04

字体

字体在设计中占有很重要的一个别，在UI设计中也有最为关键的信息传递载体之一，而关于字体的内容也有非常广泛的，下面我将从字体排版、字体设计和图标内容三个方向来分享我的技巧。

1.字体排版

字体排版中的图标行高、间距、段落等等，这些都是一名设计师需要去把握的基础，但是有一些看似简单的规则，却一直会被忽略。

1）避首位法则

比如以下实例中的结尾标点符号在首，这个是避首位定律中最关键的内容，那为了解决此类方法，我们可以运用「推出式避头尾」，这只是现在主流的方法之一，利用这些换行的方式减少问题，但是通常会产生句尾参差不齐。

此外我们可以运用「优先推入式」标点挤压的形式，将标点符号进行空间挤压，这样可以在巨大程度上确保文字在合适的版心内整齐一致。

2）空格处理

空格是我们经常接触最多的一种字符了，常使用与内容分割中，但是在排版中有众多场景也会用到空格。

比如英文排版中的点号上面需要加空格，不然会造成语句之间更加拥挤，而中英文结合的之后，之间也有必须空格进行分隔处理，除此此外中文和数字之间也有极其。

2.字体类型

字体的类别分为这些种，而常规的界面信息展示中，一般都运用无衬线字体，但部分产品运用特殊字体去释放产品的个性，例如阅读产品中运用衬线字体。

除此此外，大厂也纷纷设计属于自己的专属字体，通过这种的方法去加强自身的品牌感。

一年前的MIUI11版本升级，最重磅的内容即是打造动态字体，用户可以自由选取字体粗细，同时为了让界面的简洁度及文本辨识性不会被破坏掉。

3.字体内容

如果聊到字体，那我们顺便再来谈谈近期非常火的微文案，虽说内容听出来侧重于文案策划，但是其目的是为了改进客户体验，甚至增加转换率等等，那么作为一名设计师，我们更需要去关注这种的内容。

1）情感文案

而微文案的彰显也分为两个个别，例如图示中所展现的情感文案，百度网盘的会员到期提示，拟用“藏头诗”的方式，渴望留住用户。

2）微文案

比如里面所表述情感文案外，我们还可以运用文案内容来妨碍用户行为，往往是这样越细节的地方越是存在着创造或破坏用户体验和转换率的原因，而这种文案一般发生于，提示文案，引导文案，弹窗文案等等，不仅可以缓解用户的疑惑，还能进一步引导操作。

05

结构

说到结构，我们通常还会联想到客户体验五要素中的构架层，他在产品设计中更多表现于信息布局和内容构架布局，而针对我们设计师来说，更多的觉得就似乎画面中的布局与排版。

结构的内容相对来说还是非常广泛的，我主要是围绕界面布局来进行探讨，讲一些我认为还不错的优秀案例，希望从这几个视角出发，可以带来大家一些启发。

1.场景化体验设计

场景化设计是感受设计中较多的布局点，也是我今天仍然在研究的方向，后续有空我会单独写一篇文章再进行深入探讨。总的来说呢，场景化设计分为多个侧重点，今天分享的内容主要围绕着客户分层，为不同的用户设计。

1）用户需求

像我们常用的一些首页布局中，其实有也简单的分层，我们可以按照客户不同的目的来进行布局拆分。

以下的案例从上到下依次为，目的明确的搜索用户、分类明晰的用户或者只想随意看看的用户视觉设计，这样的话，可以有效的服务与不同客户的目的，也可以迅速推动流量分发的作用。

2）用户行为

而这两个界面都属于功能服务类界面，用户去完成某件事的行为也或许会存在差别，所以我们也可以针对功能进行适合的分层布局。

以下的案例从上倒下依次为，想迅速办理贷款以及快速完成任务获得现金的客户，我们提供了直接操作区域，并且放在头部进行业务属性提升，中间融入了更多的分类与内容鼓励，进一步促使用户的兴趣，最后可以再借助不同的方式适当的降低客户顾虑，例如优惠券的福利（提升申请贷款），为新客户提供发帖示例（保证社区的内容质量）

然而两个界面的内容变化较大，但是结构拆分的方法或者目的都是大同小异的，主要还是为了满足不同行为的客户，进一步辅助人们完成功能服务。

3）用户身份

而关于用户分层的画面设计中，我们还可以区别用户不同的状况/身份来对界面进行变化化布局，下面的实例来自于百度网盘会员界面。

我们都知道会员他分为这些不同的阶段，而不同阶段的客户，对于内容的关注上也存在巨大的差别的，我们可以从这个视角出发，区分客户的会员状态，进一步来进行变化化设计。从而有效的提升不同阶段用户的行为决策。

2.拓展卡片

论最强劲的界面布局结构，那滴滴的xpanel必定让人印象深刻，它是一个将卡片附着于第一信息构架层级上，内容上分为“消息卡片”“主体卡片”“拓展卡片”三个维度，通过这些方法将一屏内引爆的空间借助简易的交互方式补偿回来了，这样既不摆脱用户的核心体验，同时又提高了运营、功能的玩法与拓展。

然而我们会看到在大个别的打车、导航产品中，均会采取这种的结构布局，这只是对特定场景垂直领域的进军和挖掘，寻找“接触点”，帮助获得更多的功能、内容、服务，实现业务的“有效增长”。

而针对一个设计点，在历经了一段时间的发展后，也演变出了一系列的其它内容，我从这个点深入出发，围绕着内容和发力进行延展。

3.内容·信息流

众所周知，产品和运营都期望我们能在有限的空间中去展现更多的信息，并且有效的给其它用途进行导流，因此我们可以按照长尾效应，在无限长的信息流当中，利用不同的卡片布局，给予不同的活动、功能进行导流。

4.布局·半模态卡片

后面所说到的xpanel，是将卡片附着与信息之上，跟着这个想法发展，我们便形成了右图图示中的半模态卡片布局，虽然追波之前出现一大批叠上叠上叠中叠的发力，但借助线上的实际使用最后看到，叠一层才是非常合理的方法，而这些布局有着良好的空间收纳能力与信息拓展能力。

06

质感

质感是设计师在体现的之后最直观的展现，也可以称为设计风格，但风格近几年间也出现了巨大的差异，从原本的拟物到扁平，而今天还有众多不同“流派”的细腻表现，下面我将例子给你们欣赏一番。

1.新拟态风格

前段时间流行了一段时间的新拟态，一度被扣上有望作为将来趋势主流的设计样式，但因为气质表现上细节过多，影响信息内容，并且局限性太大，因此并没有被广泛流传，但是在视觉设计上，是一个不错的设计体现。

2.磨砂玻璃风格

磨砂玻璃的细腻表现虽然很早很早在iOS的界面设计中就早已存在，但后来并没有广泛普及，而今天这些风格又以一种崭新的姿态重返我们的视野中，他给我们最直观的体会就是虚虚实实。

在用户界面中，这种虚实的差异可以有效的构建视觉层次结构，增加自然精心的细节，并且在多复杂内容中能让客户全面认知与处理信息，有效传达信息，让信息可阅读、易阅读。

3.微色彩渐变

随着大屏手机的兴起，单屏显示高度也显著增高，而大部分页面内容并不能抢占一屏空间，因此运用设计技巧去加强页面头部，除了元素装饰外，就是这样淡淡的色调渐变效果，起初只采用于少部分页面中，但逐渐的这些效果起初流行起来，越发广泛。

07

动效

动效设计，顾名思义就是动起来的效果，这种体现方式并且静态的页面可以非常灵活的动起来，不仅可以促使操作体验非常流畅，也可以在某些程度上吸引、引导用户。

1.动效转场

在动效的编排中，转场是相当关键的一部分。

1）入场元素

用户操作开启新页面后，通常会非常关注入场元素，像一些金融产品、数据图表，都会运用短暂的动态效果，强化元素的展现效果，进一步吸引客户关注数据与内容。

2）持续元素

在这些优秀的设计网站上，我们可以看到大多数交互动效都是对大幅元素进行特殊处理，他们除了可以让动效非常特别，还可以减少产品的流畅度。

比如以下的实例，前后页面的内容关系非常大，因此操作后可以采取持续效果，进一步鼓励用户的视野，提高听觉感受视觉设计，强化交互流畅感。

3）停留元素

在整个动效编排中，除了关注入场和大幅元素之外，停留元素也有相当值得关注且可以深入打磨的内容。

比如以下的实例，在整个搜索体验的链路中，我们可以看到搜索框提示文字、输入的词汇等等均在进行了停留处理，确保在页面切换时，减少顾客的视觉跳转，可以有效提供客户的致力度，打造非常轻松的感受。

2.信息折叠

产品设计中都期望在足够的空间内可以展现更多的信息，但这种通常会带来信息过载的弊端，因此我们必须在设计的过程中对信息展示进行区分，利用行动触发结合动效的方式，辅助信息布局更合理。

1）同类信息

下图的实例来自vivo全新的原子随身听，利用现实生活中戏剧播放器的风格，将同类app进行收纳，完美的突显了，在较小的空间发力下怎样展现更多的内容。

2）容器折叠

与此同时也会看到众多产品中运用容器来承载信息，典型的实例就是FAB按钮，用户操作后再运用动效的方式进行反馈，其实和前面的差距不大，只不过他属于不同信息共用同一区域。

3）触发展示

网页端有一个不同于移动端的交互，那就是hover，因此我们可以运用这些交互模式，去处理信息的重要层级，然后按照客户的操作再进行具体露出，很大程度上改进了信息空间展示。

3.交互流程

随着产品规模愈发越大，功能较多的同时，页面结构也更加十分复杂，为了保证用户体验过程中，更明白页面层级，以及操作后的步骤，所以我们可以借助动效合理安排交互流程，助力用户的舒适体验。

1）操作预知

运用动效的方式，提升客户在交互流程中的操作预知，例如图示的分类图表，充分的彰显内容的意义，进一步加强用户操作前的预知性。