论形式与内容关系：App 的视觉美成因分析

2017-06-28 10:10:00

一切UI设计本质上是为了更好的展现信息。

互联网时间来到了2017年，手机空间越来越大，相信大家的手机中装了越来越多的app，很多时候，当我拿起一个朋友的手机，看他手机里都有哪些应用、这些应用的优先级是如何排布的，经常会从中得出关于这个人的另一层线索。

比如一个人手机里优先位置上有脉脉、知乎、豆瓣、一个ONE、单读这几个app，那我可以推测这个人一定是具备文艺属性的互联网从业者。

比如一个人手机封面是吴亦凡或者鹿晗，手机里优先位置上有优酷、爱奇艺、腾讯视频、芒果TV、天猫、京东、蘑菇街这样的一堆app，可以看出这是一位爱综艺爱追星爱剁手的小姑娘。

……

PART 1 – 意识是主观形式与客观内容的内在统一

如果说13-15年的时候app UI设计上充斥了很多同质化的产品的话，到了17年，UI设计师们在dribbble和behance的风格影响下，有了更多的发展空间，我们不得不说的是，现在的app比之前越来越好看和越来越好用了。

如下图所示我随意截取了九个（其实这样的app我手机里有远不止九个）我自己觉得UI很nice的产品和大家分享，他们分别是Enjoy、单读、Artand、Airbnb、一个ONE、Gilt、良仓、Zeen、和氧气：

那这里有一个关键的问题就出现了，为什么有些app，普通用户一打开就自然而然的觉得它很美？用户这种“觉得他很美”的意识到底是从哪儿来的？

在此之前，我先来说两组哲学概念：

意识是主观形式与客观内容的内在统一。（马克思主义哲学）
内容决定形式，形式反作用于内容。（黑泽尔唯心主义哲学体系）

（看不懂也没关系，反正我就是写来装逼的。(:зゝ∠)）

为了阐述用户这种“觉得他很美”的意识到底是从哪儿来的，就必须要了解app中“内容”和“形式”之间的关系。那我们不妨来看一下什么叫内容，什么叫形式：

PART 2 – 内容

如果我自己斗胆给app设计工作中的“内容”下一个定义的话，我大概会说：内容是集成在app中，所有可被感知图片、文字、声音合集。（这里之所以说是可被感知，主要是从用户层面上看，忽略了用户不可感知的“代码”层面。）

那么我们必要搞要清楚的是，一个app的内容到底是如何产生的？也就是一个app到底是如何产生的？

那这里我不妨展开一下，假设我是一个产品设计师，有一天CEO告诉我最近想做一个电商app（这里我假设我们公司很有实力，忽略了市场和运营、渠道和资金上的问题，只考虑产品设计方面。）

那这个时候我问老板：老板你做电商类app，是想做平台类的呢还是做垂直的呢？你可想好了啊，你做平台类的想要从淘宝京东分份额的话那你必须要有自己的特色。（比如国内app“xx”、“xx”和“xx”、他们都有自己的特色）或者说你是想做垂直一些的么？（比如“xx”是专门做化妆品领域的，比如“xx”是专门做美食的，比如“xx”和“xx”是专门打擦边球做情趣的）然后老板被我一番“驯化”之后得出的结论是我们来做一个美食电商吧，但是这个美食电商不会对标“enjoy”那样的高档人群，其实想做成类似于“什么值得吃”这样的大众场景。

好，故事讲完了，现在我化身为这个产品设计师，简短片面的阐述我的思考过程：首先我拿到的目标是“做一款什么值得吃app”，他的目标人群是更加广泛的全中国吃货，且要满足吃货推荐，评价和在线下单支付（前期无法做渠道的话需要跳转淘宝京东链接）功能。

那这个时候我开始思考这款app的MVP状态应该需要什么功能：

这里简单说一下MVP是啥意思，MVP=Minimum Viable product（最小可行产品）是《精益创业》的作者埃里克·莱斯提出提出的一个概念，字面意思就是可保证产品正常使用（主逻辑闭环）的最小产品单元。MVP又分为Validating MVP和Invalidating MVP在这里就不展开了，《精益创业》是一本特别赞的书，推荐大家阅读。

我设计的这个其实是Invalidating MVP，大概需要四个部分：

“推荐”是核心，以帖子形式或者别的什么形式出现一些推荐的东西附上链接，“专题”方面做一些可供运营和推广的专题，比如“情人节送什么巧克力”、“最适合食辣族的几款辣酱”之类。“商城”里面会丢一些自营的物品。“我的”里面会有我的推荐，我的收藏，我的订单之类的一堆东西。

你们发现了么，其实这个时候，产品设计师就已经在定义产品的信息架构了。

那第一个问题我就在思考，因为这个app叫什么值得吃，那我们是不是还需要推荐一些线下值得吃的店的？如果做了是不是就和enjoy同质化太严重了？那最好就是先不做。

第二个问题那在推荐这一页里面我大概需要什么功能，因为面向的对象不太像enjoy那种偏一线城市的人群，那我应该用户群体同类对标到今日头条这种level的感觉。

第三那么这个首页我是按照各种食品属性的分类来建立推荐列表呢？还是说我按照人的属性来建立推荐列表呢？如果是按照食物的分类的话，给别人的感觉可能和淘宝很像，比如我在列表里面看到“巧克力”再点进去看巧克力的推荐，和我在“甜品族”这个人群tag里看到某巧克力好吃，这两种行为逻辑给用户的感觉完全不同。大家体会一下，作为“什么值得吃”这款app来说，肯定是后者更适合，所以得出结论是以人的属性建立推荐列表。（我甚至考虑到了以后迭代未来功能版本的可能性，比如时候每个人可以有多种身份tag，再去做匹配社交之类的。）

好，那假设我现在关于产品首页大概得出了三点感觉：

首页推荐按照人的属性tag去区分推荐列表
产品风格不宜太大洋（尤其是一定不能像enjoy那样使用黑白配色），最好是产品对标今日头条那种和微博的感觉，受众偏向二三四线城市。
每一个推荐应该有收藏，购买链接，这样的东西，在首页上应该有专门为运营活动或者市场换量设置的入口（可能是banner形式）。
为了不使推荐属性具有倾向性，应该每一个推荐都尽量层级平行。（比如“吃辣党”和“甜品族”就应该入口平行。）
一定要保证一个完整的支付逻辑和用户推荐逻辑通顺，这是最基本的两个功能。中间可能涉及到推荐里面要有商城链接（如果商城没有的要跳淘宝），自己的商城支付要支持支付宝微信，要有订单状态和退单等一系列功能，余额功能或退款自动退回功能二选一（看公司需不需要资金池）。
…（此处省略N条）

大家明白了么，所谓app“内容”的产生，就是我上述这些奇怪东西的综合（当然其实并没有上述这么简单，这个以后有机会细讲），比如我们从上面的论述当中，我可以归纳出这款“什么值得吃”app的首页“推荐”应该具有的信息如下：

我写这么多字其实就是想告诉大家一个app的“内容”是如何产生的，当然我这里说得十分十分简单，真实情况可能比这个复杂百倍，大家意会就是了。

好了说完了内容，我们来看所谓app中的“形式”又是什么鬼。

PART 3 – 形式

如果说我们把所有集成在app中，可感知的图文声的集合都可以称作app的内容的话，那么app的形式就是“承载这些内容，使内容更好被感知的方式”。

人有五感，视觉、听觉、嗅觉、味觉、触觉。

而人去和一款手机应用进行交互的时候只会从视觉，听觉，触觉（反馈）三个方面去感知，而触觉涉及到交互层面，以后我写到app的交互架构的时候会详细说；关于听觉其实也不是本文重点，我举个例子一笔带过就好了，比如大家都用过滴滴，滴滴有一个“内容（功能）”是司机送一个乘客的过程中，当判断距离目的地很近的时候会默认进行一个“下一单的匹配”的功能。我们用滴滴的这个功能来对比手机游戏里面的“匹配下一局”，我们会发现这是几乎相同的“内容”，但是承载形式不一样，手游是视觉展现，你必须点击手机上的“匹配”按钮，而滴滴因为考虑到司机在开车很难解放双手去点击匹配，所以从产品逻辑上设计的是“语音提示+主动匹配+手动接单”的方式，所以我们总能在快下出租车的时候听到司机手机上传出响亮的“开始接单啦”语音提示。

今天文章的重点是视觉。

因为UI中国和站酷里面是UI和视觉设计师聚集地，可能在大家以往的工作当中并不会care一款app原型是怎么样设计出来的，大家可能只会关心我拿到原型以后应该如何转化为惊艳的高保真页面。

把一个内容整理，排列成一个app页面，就是大家更关心的“形式”的部分。还是回到上文“什么值得吃”这款虚构的app上，综合上面的观点，我大致能画出原型如下图所示两种：

当然这个是最粗糙的原型（如果各位UI设计师在工作中接到了类似于这样的原型那只能说心疼你们一秒。）那么问题来了，大家在生活中一定见到过这两种原型的app，左边这个很常见，比如斗鱼tv这些直播平台、早期咸鱼和网易严选、今日头条等等都是用的这种感觉；右边这个就更常见了，不论是点餐平台（美团百度饿了吗）、大型电商（京东淘宝）你都可以看到它。

那么问题来了，尝试分析一下，上面这两种形式到底有什么优劣呢？

第一件事应该想到的是如果需要采用右边的排列形式就必须要控制tag的字数，你懂我是什么意思吧？比如今天有个运营跳出来说我们做一个新的tag把名字叫“酸酸甜甜就是我”。产品一定哭晕在厕所，因为：

你们懂不懂这种感觉233333，简直想死。但是左边那张那种就不存在这种问题。

第二，由于右边的tag占据了推荐贴的位置，导致推荐贴可能没有左边的那种展现形式更加醒目。但是相对的，图右的优势在于，由于竖向排列tag可以让一个屏幕显示更多的tag，这一点就需要取舍，比如一个产品的初期没准备放这么多切换tag的话，还是建议用左边那种。

更深层次的，外卖产品之所以用右边这种形式是因为力求一屏展示更多的菜，而且外卖产品的左侧tag一般是一家店铺的菜的品类，用户下滑菜品配合点击品类，点完即走，很方便（京东和淘宝电商类平台也是类似的）。但是比如早期的今日头条只能采用左边的这种形式，因为头条是需要用户长时间沉浸的，比如用户选中一个“体育”的tag一般要看好久好久，用户需要沉浸在这个tag下的内容中，那这个时候显然用右边这种设计方式让tag常驻屏幕左侧是不合适的。

基于以上分析，作为内容+电商平台的“什么值得吃”应该选用左边这种设计形式。

好，“什么值得吃”这个虚拟的例子就说到这里，主要是让大家明白内容和形式之间的关系，只有你们明白了这个，才可以正式进入今天的主题：app的视觉美成因分析。

PART 4 – app的视觉美成因分析

（在这里我们先别管好不好用，只管好不好看，关于好不好用以后文章慢慢说。）首先先来看结论：一款app让你感觉到长得美，一定是团队在两个方面下功夫了：第一是内容视觉优化，第二是形式的视觉优化。

我先来给你们看两张图你们感受一下啥叫内容的视觉优化：

你们可以看到左右两张图，左边是enjoy的精选页，右边是我随手糟蹋的，大家会发现其实信息内容一模一样，但是左边的level和右边的level大家一眼就能看出来区别吧，如果出现右边这样的UI稿那只能说明这个团队在内容的视觉优化上面不！用！心！（我是没用力糟蹋不然我可以辣得你们半天睁不开眼睛哈哈哈）

以上就是内容的视觉优化的作用，关于内容当中的图片，其实大家都有直观感受：一款app允许用户自定义的图片越多，这款app视觉就一定越难把控。原因很简单，因为用户自定义的信息里面，文字信息我们是可以通过限制字段和select去控制的，但是对于图片来说，哪怕控制了用户自定义图片的尺寸，我们也无法控制这些图片的质量，大家去看一下秒拍这款app，它的框架设计做得很棒，包括一些empty status的小图标绘制都很棒，但是我们打开的时候首页的内容总是参差不齐，差强人意。同理还有咸鱼这款app， UI框架做得很漂亮，但是内容页面总会显得没那么“高大上”。

这也就是为什么比如enjoy，自如、氧气、想去以及毒物、Gilt、美团这些轻量电商或者租房app，都选择花一大笔成本自己养一批或全职或兼职的摄影师的原因，就是为了得到符合自己规范的优质内容图片（比如你们去看自如的房源信息照片基本就是那种样子，氧气的内衣样片背景永远是白色）。

我之前做过一款旅行游学类app，在立项之初我们的图库里面就已经有了几万张高质量有版权的摄影师作品，然后在设计的过程中大胆采用（类似于今天开眼app的）流式布局，大量展示优质图片，才使得在15年初那个时期我们的UI风格比较具有鲜明的特色。

其实这也是一个产品团队需要深思熟虑的点：

比如是一个旅行app，那就一定要有大量优质的图片作为依托才可能app美。
比如一个淘宝这种体量的大型电商，那除了尽可能控制图片质量以外，更多的应该在优化专题和banner上，并且告诉入驻商家（用户）上传优质的图片更容易获取用户流量从而转化为成单。
比如知乎、贴吧之类这样的问答和社区，用户上传的图片五花八门千奇百怪，那我们可以考虑在首页列表展示的时候就压根不要展示图片……

那是不是内容的视觉优化只包含图片的优化呢？其实不是的，除了图片的视觉优化以外，icon的优化、包括文字的视觉优化这些都是很重要的。

关于icon的优化大家应该已经看过足够多的文章在这里我就不赘述了，比如线性icon里面不能参入块状icon，负空间icon里面突然出现一个奇怪的渐变icon会感觉很奇怪，在这里因为写这个的人太多了我就不赘述了。有一点心得可以分享，比如大家画了一个2px的线性图标用于@2x，那在plus上面应该要手动调整一下图标变成3px而不是用png自动生成，必然会有虚边（除非你们的工程师使用的是svg的iconfont）。

关于文字的视觉优化，其实在今天这个时间点去谈论已经没什么好说的了，因为几乎市面上的所有app，只要涉及文字内容的排版，毫无例外都做得很好。从根源上出发，为什么一个设计师需要去不厌其烦像个工匠一样折磨开发调整字体大小间距粗细什么乱七八糟的东西？其实，字体视觉优化去达到的目的主要有两点：

辅助视觉对焦
减轻视觉压力

第二点没啥好说的，大家应该都明白，主要说第一点，视觉对焦这个事情是这样的，我们在一个界面中，如果不出现特别突兀的信息，正常人眼一般是从左到右，从上到下的顺序阅读：

比如上图是一个阅读界面，所有问题都没有特别突兀的地方，所以我们把界面做一个高斯模糊去分析视觉焦点，会发现整个页面呈现很平和，所以，这个页面的阅读顺序应该是一行一行的阅读文字，也就是从上到下，从左到右。

但是，这只是页面形式很平的情况，举个没那么平的例子：

如上图所示是一个知乎页面，我们把它去色并且高斯模糊去分析它的视觉焦点，大家会发现其实视觉焦点是加粗加大的title字体和上面的小头像去构成的：

这就是通过文字优化去辅助视觉对焦，我不妨再举一例，大家来看16年5月左右的氧气app截图:

左边是氧气的原UI，右边是我做的对比图。显然，关于文字优化辅助视觉对焦这一点，氧气的设计师显然深谙此道，它们没有按照右边那种传统办法设计这个页面，而是把每一个深夜话题的题目都变成了一张图，变成一张图还不算，还在这张图上面用浅绿色“划了重点”，这样虽然加大了设计师的工作量（其实也还好就是给到话题title换个字出张图而已），但是这个页面正是因为这样的处理，能让用户第一眼聚焦到标题title上：