互联网方法论之“视觉设计”篇合集（一）

我们事情中时时时会听到有些云里雾绕的不雅观点，让人有一种“答案在空中飘的觉得”。

为了在别人吹牛皮的时候保持复苏，从2018年开始我整理了100来条互联网方法论。

这些方法论里，我创造有的借鉴的是工业设计，有的是建筑学、生理学的，还有传播学，乃至连语义学都涌现了……

然后就想，怎么这么多互联网设计方法论？每个方法论如何运用？哪些又是瞎说模型？

把这些分享出来希望能帮到更多的人！

我把这些方法论总结成了六大类：视觉设计、交互体验、心行研究、增长模型、产品策略、数据衡量。

本次分享视觉设计篇，包括：版式设计四大原则、功能可见性、五感设计、感情板、二八原则、意元集组、六维剖析法，合集一，共7个。

视觉设计篇 01：版式设计四大原则

版式设计四大原则（比拟、亲密、对齐、重复）是视觉传达中，最根本也是最主要的设计原则，它一贯贯穿于我们的设计事情，但又常常被忽略。

当我们在设计提升阶段中碰着瓶颈的时候，不妨好好回顾一下夯实一下版式根本，根本决定我们走多远。

视觉传达实在质也是表达办法的一种，我们须要通过设计方法手段，通过将元素建立联系有目的得勾引用户视觉流向，将信息在“最短韶光”内“快速”传达给用户。

任何元素都不能在页面上随意摆放，每个元素应该与页面上另一个元素有某种视觉联系，这样才能建立一种清晰且轻巧的阅读逻辑。

以是，我们的设计行为，是否让信息更快速、更直接、更有效得传达给用户了？

比拟：

无比拟，不设计（没有比拟就没有设计可言）。

合理划分好信息层级，来勾引用户视觉流向。

亲密：

在版式设计中，亲密和比拟是相辅相成的。

彼此干系的元素应该靠近，归组在一起，为读者供应清晰的阅读架构。

对齐：

对齐比拟无处不在，对齐是设计的标配。

我们在做设计的过程中，脑海中已经养成习气得提醒自己“对齐对齐对齐对齐！
”

重复：

设计的某些元素或手腕须要在全体作品中重复。
降落了用户的适应本钱，实在质还是让信息通报更快速有效。

1. 比拟

无比拟，不设计（没有比拟就没有设计可言）。

比拟的目的：

使有层级、有主次、有节奏、有设计感使阅读方便突出重点；强化要点；表达核心信息。

做比如较的条件是我们透彻得理解了业务和将要呈现的内容。
有目的得将元素拉开比拟，合理划分好信息层级，来勾引用户视觉流向，第一视觉、第二视觉、第三视觉…之后让用户视线终极又落在哪里。

比拟的手腕：

形态：方vs圆、长vs短、粗vs细、大vs小、高vs矮、胖vs瘦、凹vs凸；状态：动vs静、虚vs实、近vs远；色彩：黑vs白、明vs暗、炫彩vs单色、轻vs重色。

2. 亲密

在版式设计中，亲密和比拟是相辅相成的。

亲密的目的：

使元素间有关系成为一个家族，使有关联合理分组。

彼此干系的元素应该靠近，归组在一起，如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个伶仃的设计单元，这有助于组织信息减少混乱，为读者供应清晰的阅读架构。

亲密的手腕：

亲密即编组，将干系联的信息进行编组区分，关联的元素组织在一起，移动元素，使它们的物理位置相互靠近，使其形成阅读秩序。
使之成为整体的一个组，而不再是一堆彼此无关的片段。
物理位置靠近的，就意味着存在关联（我们可以把它理解为元素间的父子关系）。

笔墨与笔墨、笔墨与图、图与图间通过物理间隔，掌握元素之间的关系。
除了物理间隔划分，也可以用线条色块切割。

3. 对齐

对齐比拟无处不在，对齐是设计的标配。

我们在做设计的过程中，脑海中已经养成习气得提醒自己“对齐对齐对齐对齐！
”如果你还没有养成习气，那就逼着自己有目的得时候提醒自己。

对齐的目的：

对齐让设计变得更有条理对齐让设计变得更有逻辑对齐让阅读变得更轻松。

对齐的手腕：

对齐分为，旁边对齐、高下对齐、居中对齐。

右对齐——最常见的对齐办法左对齐——最装逼的对齐办法居中对齐——最无能的对齐办法右对齐不一定非要放右边。

4. 重复

设计的某些元素或手腕须要在全体作品中重复。
实在质还是让信息通报更快速有效。

重复的目的：

重复的浸染：统一信息、强调信息、强化信息重复便是保持设计的同等性重复缩短了我们二次阅读的韶光（比如在商品详情先容中，如果没有利用重复原则版式不一致的话，用户在阅读过程中，须要韶光适应、习气新的版式）。

重复的手腕：

标题的字体符号图片的主色调版面的留白比例标题与内文的间隔内文大小统一。

视觉设计篇 02：功能可见性 Affordance

通过仿照实体天下来暗示用户，系统是如何运作，如何操作。

常用于界面中的功能设计，将用户利用的物品的履历映射到界面中。
如果产品的功能可见性与人们感官的预期相符合，那么这个设计会有很高的收受接管率和利用率，同时也会被用户认为随意马虎操作。

例如：电影选座、飞机选座，淘票票APP-电影选座，根据现实电影院的座位排列，可以勾引用户明确地购买电影票所处的位置，与用户的感官预期符合，清晰明确的通报自身所表达的含义，用户选择无障碍。

视觉设计篇 03：五感设计 Design for all 5 senses

五感设计由设计师 Jinsop Lee（TED Talent Search获奖人）提出。

据调查研究，视、听、触、嗅、味五感之中，感想熏染最深刻的是视觉(37%)、其次是嗅觉(23%)，听觉(20%)、味觉(15%)，末了是触觉。
人类的感官系统彼此之间能够交互浸染，不同的结合可以创造出独特的感想熏染。

很多设计追求极致的视觉效果，而每每忽略五感中的其他元素。
有时仅仅提升别的一至两个五感元素，就能为产品带来设计上的提升。
五感设计常被运用于建筑设计、室内设计、工业设计等领域，例如我们在电影院体验到的4D、5D电影，通过座椅效果环境殊效，给予不雅观众除视听之外的触感、嗅感等体验。

在互联网设计中，发力点有限，但我们也可以通过背景音音效等手段勾引用户生理，引发用户共鸣，这也是利用了五感设计中的“听觉”。

例如：各平台每年年终报告，多页H5测试、课程环节中的勉励音效、游戏中的实时反馈音效等等。
公司中的音效内容团队通过使音乐和视觉结合，从而影响勾引用户感情感想熏染。
多页H5一样平常在页面右上角放置音乐开关按钮，或者只在最初进入H5时可设置。

视觉设计篇 04：感情板 Mood Board1. 实质

我们只要记住一句：我们探求参考资料的方法取决于我们想要传达的感情。
实在质在于将感情可视化，因此它被称为感情板。

我们在搜索“感情板“的阐明会有一大段貌似很专业话，不用理会它。

2. 扩展

天下存在着各种各样的表达办法，例如音乐、舞蹈、影视、小说、漫画、插画、演讲等等。
在这各个行业中做到顶尖的专家，都是通过自己善于的表达办法，来勾引受众的感情。
所有这些表达办法实在质都是信息的传达和感情的勾引。

如何通过设计来勾引用户感情？如何建立自己的“感情素材库”？

在看到一个感情表达到位的作品时，我们不能让自己沉浸在当下的感想熏染中，而要急速让自己的感情抽离出来，剖析这个作品通过哪些设计手段达到了这个效果。

感情版常日是指一系列图像，笔墨，样品的拼贴，它是设计领域常用的表达设计定义与方向的视觉做法。

无论对付设计师，还是设计专业的学生而言，在设计过程中利用感情板，可以更好地寻求设计方向、打磨设计过程，还可以在团队之间通报设计灵感与设计思路，从而使想法充分领悟，深化设计。

感情板的表达办法，比较简便的便是将图片打印出来贴到书本或墙面上，由于设计不断加深，图面的内容也会不断丰富，从而展现出一个更加完全的感情表达。

还可以通过网络媒介建立感情板，比如通过花瓣、Ins和Pin等常用网站，从大众普遍认知中产生思考，寻求新奇创意与灵感来源。

将感情板真正得运用于设计创作，赞助设计灵感的天生，而不是仅仅作为申报请示事情和口试套路，才是更主要的问题。

视觉设计篇 05：二八法则/帕累托法则 Pareto Principle

1. 定义

二八法则，也被称为帕累托法则、巴莱多定律、80/20 法则、关键少数法则、2/8法则、成分稀疏定律。

约仅有 20% 的变因操纵着 80% 的局势。
也便是说：所有变量中，最主要的仅有 20%。

2. 来源

管理咨询约瑟夫朱兰首先提出该原则。
80/20 的观点是意大利经济学家帕累托 (Vilfredo Pareto) 创造的，例如:意大利约有 80%的地皮由 20%的人口所有、80% 的豌豆产量来自 20% 的 植株等等。

运用：

在商业思维中，属于增长思维之一，例如良品铺子：收入60%是由20%的用户贡献，这20%紧张收入贡献者被视为重点掩护和运营的“忠适用户”。

在交互设计中，常用于勾引用户关注最主要的功能和内容，有详细的用户利用数据反馈，排定产品功能的优先级，可以帮助提升产品设计的易用性和有效性。

在视觉设计中，常用于强化页面中最主要的20%视觉信息层级，其目的是让用户在最短韶光内获取到核心信息。

常日表示 80% 的结果，由 20% 的缘故原由产生；同样也表示一个页面下，主要的信息只占 20%，重点标注提醒，其他 80% 的信息适当弱化，否则导致页面太过繁杂，由于用户想快速的获取那 20% 的主要成分。

例如：

美团外卖APP地点搜索页，根据用户个人利用历史数据与平台用户数据反馈，设计布局上排定优先级，把热门城市突出强调，加快用户搜索定位、订餐流程。

视觉设计篇 06：意元集组 Chunking

为了适应短期影象，一种把不同的信息集结归纳成模块或单位，便于人们对信息尽心解读和影象的技巧。

我们生活中影象很多事物时，也运用到了这个原则方法，比如说电话号码、个人地址等。

例如：

招商银行APP – 银行的卡号的输入四个笔墨成一组 ，随意马虎阅读审查，也更利于短期影象。

招商银行APP – 总资产和数据的突出，利用大面积形状色块突出信息，用户可以在打开该页面时第一韶光感知。

视觉设计篇 07：六维剖析法

很多行业都有自己的五维剖析法。

我们在设计事情中常利用“五维剖析法”，即“形、色、字、质、构”五个维度对设计作品进行剖析。
剖析之后我们再结合“业务角度、用户角度、设计创新”三个角度做结论。

该方法论是最根本的方法论之一！
！
！

记得2020年拿某易公司口试练手，结果对面是一个小孩儿，在跟他讲理性和感性，如何通过设计手段影响用户感情的时候，对方听不懂，不让我说话，自己巴拉巴拉讲了一堆最根本的形色字质勾，当天面了好几个公司也

再后来2022年当我创造还会有很多设计朋友由于知道五维剖析法根本方法论而很愉快的时候，以为确实有必要把自己之前的整理总结分享出来。

形 ：图形元素， icon的风格和刻画符合内容主题，乃至卡片圆角大小等细节，都要与APP的品牌调性同等。
icon刻画过程中，要把稳色彩配比、设计风格、视觉比例等细节。
色 ： 色彩体系，主色、辅色用色、功能色等用色比例，在图标、字体、润色、按钮等颜色利用极为主要，让界面设计信息通报的更快速明确，合理勾引用户视线流向。
字 ： 字系统统，结合产品品牌调性，选用得当的中笔墨体和英笔墨体，形成品牌文化特色，在设计中要把稳字号大小等规范，精良的笔墨排版更利于用户对付信息的识别。
构 ： 页面布局，在透彻理解业务的根本上合理布局，让界面具有呼吸感、通透舒适，个中对用户视线流的理解极为主要，决定了我们如何布局、定义框架。
质 ：质感与风格，不同的行业对界面整体质感、图片质感、色彩质感哀求都不一样，须要针对行业特性和用户角度进行衡量和判断。
动 ： 动画与动效，转场动画、图标动效、跳迁徙改变效、加载动效等方面的微交互动效，可增加用户利用时的意见意义性，安抚等待时的焦虑感情。

六维剖析法可以用来做视觉层面的竞品剖析，为设计改版供应理论支撑。

以2021年支持的一个绘本类改版项目为例，以下是我用五维剖析法做的剖析和结论：

剖析之后我们再结合“业务角度、用户角度、设计创新”三个角度做结论，给出故意义可落地的建议。

本文由 @胡冰茜 原创发布于大家都是产品经理。
未经作者容许，禁止转载。

题图来自Unsplash，基于CC0协议。

该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。