app中的交互手势和意符设计

所以说嘛，app中的意义符号设计直接决定了这个app的易用性。不要乱来。

第七层：这就是bottombar具体没什么好讲的了，也就是五个图形意符，各自表示着自己的意义映射。现在很多app中大家会发现有些底部是只有icon没有文字的，有些是带了icon也带了文字的，带文字的目的也是为了解决图形联想带来的意义映射路径多的情况。这个不多说了。来看第二个角度。

角度二、从视觉上进行分析：

按照视觉强弱来看，『康永来了』、『banner』、『猜你喜欢』是页面最重的视觉部分，其次是频道入口icon和下面的Bottombar，最后是navigationbar上的小溪、搜索、历史和下载。从视觉上看，其实作为内容平台的喜马拉雅设计的很赞，没有任何问题。内容产品本身占有最强视觉强度，功能意符占有较弱视觉强度。这就是为什么猜你喜欢要用图片+文字的宫格列表，不用类似于item之类的原因，因为比如这里的每一个节目都换成是一个item，那视觉只集中左边的图片上，而不像现在三张图片这样聚焦。

最后抛出一个视觉上BottomBar的问题，现在很多app会在实心icon还是线性icon上面纠结，知乎的BottomBar一直采用实心icon，而Airbnb一直采用线性icon，到底为什么？

我会在下一期的交互闲谈里面说这个问题，大家也可以想一想，其实（如果我理解的没错的话）答案就在我上面这段论述中。

PART 4 - 手机app中的意符设计需要辩证的几小点

一个擅长app中意符设计的人，本质就是对appUI设计有十足把握的人，关于这里的几点辩证只是提出来说一下，具体的UI设计过程中这样的问题不胜枚举，大家可以留言交流。

一、BottomBar上的意符到底要不要加文字？

手机中可供点击反馈的意符设计分为很多种，有纯图片的（比如banner），有图形+文字的（比如BpttomBar上的那些），有纯文字的（不如上文中喜马拉雅的切换tab，比如『点击查看更多』、『点击展开』、『滑动加载』之类具有诱导性的文案），还有纯图形的『比如像『一个One』这样的app底部BottomBar是只有图片不带文字的』，还有一些是按钮形式的。

在这些意符的设计中，意义识别是尤其需要被设计的。如果一个图形无法表现他应有的意义，那就一定要在附近加上文字形成一个完整的意符。

举个例子：已下载这个icon已经被所有app用烂了，大家一听就知道应该包含一个向下的箭头，比如历史记录也是，大家都能想到是一个时钟，这就是长期教育用户之后用户产生的意义联想。所以喜马拉雅和腾讯视频中的这两个意符设计，一个是带文字，一个是不带文字，都不影响用户识别体验。

但是比如再举一个例，『我的』图标，现在大家都习惯用一个『人头像』，而一切新奇的产品比如说『氧气app』，才用的是一个圆圈，那么这个时候如果是意义识别为主导的产品（比如电商啊或者用户不是那么年轻的）就会选择在下面加上一行中文。这样的话在图形上发挥得再不易识别，也可以借助文字瞬间映射到。

那比如像『一个One』、『Medium』和『500px』这样的众多app，他们的BottomBar都是一个纯图形：

纯图形带来的其实是一种新奇感和简洁的设计感。相对的，和用户需要花更长时间的视觉判断，比如第一张图是『一个One』，第2，3，4个icon其实很易识别：一本书，一个音符和一个播放三角能够很简洁的代表文章，音乐和视频。第二张图相对就没有那么容易识别了，尤其是第三个图标，意义指向不明确，但是由于Medium是一个国外设计师聚集的网站，所以其实也还好，设计感在一定程度上会优于识别也没问题。图3是500px，这5个icon就更易识别了。

所以，如果你采取无文字的BottomBar，那么请UI设计师用心设计你的icons。

二、设置引导用户点击加载的意符应该如何设计?

有一个app需要设计这样一个功能：文字默认折叠展示3行，但是点击之后需要（非跳页）加载全文，那么请问需要设置怎样的意符引导用户点击？

传统的大概是三种方案：

第一是在文字第三行的前四个字用其他颜色（比如蓝色）标记为『加载更多』，用户一点之后加载全部（早期知乎的做法）。

第二种是在文字第三行结束之后再第四行的位置居中放一个『点击加载更多』，用户点击之后加载全部。

第三种是在文字第三行结束的位置放一个省略号即可，用户阅读之后发现没读完，自己会尝试点击。

显然，第三种方法仅适合社区类app或者贴吧或者问答类app，因为一般用户读都很难读完，更别说给你点击一下了。第一种和第二种也是见仁见智，一般情况下我个人推荐第一种，因为需要文字折叠成三行的页面就说明本身画面排布很紧张，就不要另起一个第四行放『点击加载更多』了。

三、app中的按钮设计，什么时候应该有push色，什么时候应该没有?

这是我的微信公众号后台有一个小伙伴的提问，push色这个东西在网页上有别的更多作用，但是在app中，一般就只用来反馈行为。

有两种情况：

第一种是你点击某个意符，这个意符发生变化（颜色或样式变化）同时跳转。

第二种是你点击某个意符，这个意符完全不发生变化但是页面跳转。

从用户期待每次行为都得到反馈的心理上来说，我们当然希望所有的意符都能呈现及时反馈以证明你的点击行为是有效的（也就是上面的第一种）。但是有时候由于反馈动效我们写得不尽如人意问题，我们看到冗长（哪怕只有半秒）切重复的的反馈内心就会就会很烦。

举个例子比如原生安卓的Material Design点击每个item都会出现一个水波动效反馈，当然原生Material Design的动效是足够优秀的，所以我们会觉得很有新奇感。但是你们如果试试把安卓的这个动效拉长别说一倍，拉长三分之一。你们一定会崩溃的相信我。

PART 4 - 总结

1、app产品设计和UI的设计中，意符的设计是当众最重要的一环，因为每一个意符作为产品的功能入口和行为入口，它们不光光是产品的流量节点。更是app产品信息架构的核心提现。

2、在设计app的意符的时候，要更多的考虑到意符所蕴含的具体交互手势（比如喜马拉雅的tab bar就包含了滑动和点击）以及具体的对用户行为的思辨。

3、app中意符的设计一定是框架层面的设计，他的本身视觉层级不易过高，最好不能超过app主体信息。

4、意符的意义映射要尽可能的单一，最好能让用户一眼就了解这个意符是代表什么功能什么意义。

5、app意符的观察、分析、设计是一个长期的过程，大家可以试着多问自己一些为什么。

最后，为每一个看完这13000字的你点赞。

希望这篇文章能对你对app的设计有一些帮助。

最后别忘了我文章中留的思考题：Airbnb BottomBar的icon一直采用线性的，为什么？

当然我也不是Airbnb的设计师，所以我们就探讨一下这个问题就行了，大家可以留言讨论，只要是能够说服你们自己的答案，都可以被称为正确答案。我会在我下一期我的《交互闲谈》里面谈一下我自己的理解。

这期我用了特别长的笔墨去描述app的意符设计，这一篇配合上两篇一起去看，大概会对app从抽象的形态上有一定的理解。

· 下期预告

下一篇我想说一下app的迭代有关的话题。包含从产品设计的角度如何审视产品MVP，以及未来迭代的预留入口，信息整合之类的话题。

下期也是10000字左右，大概在三到四周后更新。

我写这么多字用了接近一周，而你阅读最多只用2天，没良心的。还不来撩个赞？？？？？？？？？？

FEVTE编注：更多AI教程讨论及AI作品提交请到飞特网AI实例教程栏目:https://www.fevte.com/plan/ai/aisljc/