国内互联网近几年发展迅速，在很多方面都超过了一些其他国家互联网的发展阶段。随着国内互联网产品竞争日趋激烈，很多企业都把目光投向了用户量庞大的海外市场。而疫情对于全球经济的影响更是加速了海外市场的数字化进程。据 Sensor Tower 数据显示，2020年Q1全球移动互联网应用下载量达336亿次，同比增长了20.3%。

产品出海的第一道屏障就是语言。但若想打造一款能够适应海外市场的产品，只完成不同语种的翻译是远远不够的。在产品设计的过程中，我们需要考虑两个方面：国际化与本土化。

国际化+本地化的策略，也就是“glocal—global+local”，指的是结合国际统一和地区差异。这种策略在统一的前提下，通过灵活配置保障地区的个性化体验，既能满足统一维护提升产品效率，也能保障当地用户的特殊诉求，是一种性价比很高的设计方案。

产品设计的国际化

产品的国际化，即全球化。国际化的通用设计能够为产品打造一个全球统一的形象与内核。

Chrome的不同地区首页功能与样式基本一致

一套通用的设计系统和设计规范，既可以帮助我们在产品的国际化设计中 树立产品调性，又可以保证操作的 一致性，同时提升设计的 高效性。阿里旗下面向东南亚市场的购物平台Lazada在开发之初，通过使用Fusion Design的设计系统，大大节省了设计的时间。在如此复杂的电商业务场景之下，整套产品的设计最终仅3靠个设计师就完成了。

设计系统对产品研发成本的影响

除此之外，一致的内核也能够帮助企业在全球范围内建立起统一的品牌形象，增强 品牌的识别度与知名度。

产品设计的本土化

想要让产品在某一个市场上站稳脚跟，对于本土化的思考是必不可少的。本土化的核心是 因地制宜，根据地区差异相应调整产品策略。

UC浏览器在不同地区的首页布局

为什么说本土化对于产品的出海非常重要？其原因并不难理解。Charles Eames说过，“Recognizing the need is the primary condition for design.” 任何设计的本质都脱离不开对需求和问题本身的理解。好的设计是在对需求、动机、心理、环境等相关因素有了充分了解之后所产出的解决方案。

针对海外设计研究的思维框架

在考虑产品的本土化时，我们需要关注到用户的需求是什么、是否仍然成立，用户的行为模式是什么样的，以及整个外在社会物质、精神环境等方面的状况。蚂蚁金服团队通过海外本土化设计实践，总结出了一套“环境-人-需求“的研究框架，列出了可以去调研的多个方面。

蚂蚁金服-“环境-人-需求”出海产品设计研究框架（做了小部分修改）

需求（价值）

首先，我们要做的第一步判断就是原来的 用户需求是否成立。产品在原市场想要解决的问题，是否在新的市场仍然存在，即我们的产品是否 有用？这个问题的答案决定了原先的产品是否对于该市场的用户是有 价值的。如果有价值，那么就可以深入探索如何让用户用起来；如果没有价值，那么就需要进一步判断是否要继续开拓这个市场，以及如果继续开拓这个市场，在原有的产品形态上，我们能否通过改造的手段让它符合在新市场的用户群中挖掘出来的、不一样的 新价值？达到了“有用”的标准，我们则需要开始考虑“ 好用”的问题。只有满足“好用”这一条件，产品才能够被用户用起来、从而真正在新市场落地。在实现“好用”的过程中，我们可以关注以下几个层面的影响因素：

生活形态、价值观

生活环境与社会环境会塑造当地用户的生活形态与习惯。下图分别是日本和北美地区的新闻资讯类App。同样是推送新闻资讯，两者在表现形式上却大相径庭。可以看出日本的新闻App布局紧凑、信息量大、页面坪效很高；而北美的新闻App则更注重突出重点内容，信息密度相对来说并不高。

日本-新闻资讯类App

北美-新闻资讯类App

这种差异的背后，其实是两地上班族生活形态的差异。日本城市小、人口密度大，上班族通勤大多会选择地铁。而北美地区面积大，大部分人会驾车上班。驾车的人双手需要长时间控制方向盘，同时开车也需要持续注意路况，只能在间隙中查看新闻内容；而乘坐地铁的人双手更加自由，也有较长的通勤时间需要消磨，故可以接受更多的信息，也能够接受更繁琐的操作。

北美（左）和日本（右）各自的生活形态

有时候，某个地区的用户长期习惯的操作模式，会与主流的操作模式有所差异。设计师junu在个人博客中讲述了他为Melon（一个韩国主流音乐播放器）进行体验优化的一段经历。他发现Melon当时的播放操作逻辑比较冗长，用户需要先点选列表中的多首乐曲，再点击底下的播放键，此时Melon会将用户所选歌曲自动生成一个列表并进行播放。这和当时Spotify等音乐播放器“点击即播放”的主流交互逻辑相比，要更复杂和麻烦，尤其是在用户只是想要立即听到某一首歌曲的时候。因此，junu 提议引入“点击=播放”的操作方式。但当他们设计出了这样的优化方案后，却发现在测试过程中老用户们对这样的交互方式感到陌生和沮丧。基于用户反馈，最终，他们采取了一个折中的方案，既保留了原先的复选框作为多选操作的区域，让用户仍然能够选择乐曲生成列表并且播放；同时又引入了点击单曲直接播放的操作。相比第一版优化方案，用户的接受程度有了明显提升。

Melon播放器的点选操作逻辑

设备环境

10年前，高端大屏幕手机在东南亚和非洲市场普及率并不高，因此产品出海时需要考虑当地常见的设备是什么，并作出相应的适配。近几年，随着市场经济的发展以及中国手机的成功出海，即使是东南亚和非州的发展中国家，高端移动设备的普及率也已经很高，这为设计师在考虑通用性的过程中减轻了不少负担。不过，在为每个地区的用户做产品设计时，仍然需要调研清楚当地设备的使用情况，比如什么样设备更流行、普及率更高；如果某一地区的设备不够发达，那么设计的操作也需要考虑到设备不同所造成的差异。

业态/监管

在不同的国家或者地区，各个行业的标准与制度也可能存在很大区别。例如财会软件行业中，在北美和英国占据了重要市场份额的Quickbooks、Xero等公司，却无法成功打入欧洲一些国家的市场。因为财会软件本身的功能、流程设计与当地的财务制度是紧密相关的。在这样的情况下，欧洲本土的企业显然会对当地的政策和制度更加熟悉，也更容易设计出符合当地企业与会计需求的财会产品。

2015年，Airbnb进入中国市场。在最初的市场调研和用户调研之后，针对本土化，他们所迈出的第一步就是根据中国的业态环境对产品的前10%和后10%做了改造。其中，产品的前10%指的是登录这一类用户开始使用产品所需要进行的步骤，而后10%指的则是支付等用户完成一个完整流程所需要进行的操作。因为当用户进入到产品主要链路中时，其功能流程基本相通（搜索地点、挑选房间、浏览信息等），不需要做过多的改变；但产品的前10%和后10%则决定了用户能不能把产品用起来并不遇到障碍。因此，针对登录的部分，爱彼迎将原先的Facebook等第三方登录替换成了微信与微博账号的登录；而在支付的部分，爱彼迎引入了支付宝与微信支付的方式，打破了中国本土用户进入产品和完成订单的壁垒。

Airbnb产品中国本土化的“前10%与后10%”策略

社会经济

社会经济环境的不同代表着社会阶层状况的不同，它会影响人们在消费时的行为方式。蚂蚁金服在调研菲律宾市场时发现，当地拥有银行账户的人口仅占了总人口的34%，同期中国拥有银行账户的人口则占了总人口的85%。而这34%的人基本上都是当地的富人及中产阶层。在贫富分化严重的菲律宾，大部分普通民众是没有银行账户的。这一人口学特征很大程度影响了蚂蚁金服电子钱包业务对菲律宾目标用户的描绘，继而影响了产品各个层面的设计。

文化/宗教

在各个文化/宗教里存在着不同的意象，也会有各自的表达方式与禁忌等等。在某个文化下表示友好的行为，在另一种文化下可能是一种冒犯。这些都是在设计时需要去注意的。除此之外，在不同的文化/宗教语境下，人们会有不同的行为模式与价值取向，这里我们会引入一个模型——霍夫斯泰德文化维度模式，来对这一问题进行更详细的解读。

霍夫斯泰德文化维度模式（Hofstede’s Model of Cultural Dimensions）

霍夫斯泰德文化维度模式是荷兰心理学家吉尔特·霍夫斯泰德提出的用来衡量不同国家文化差异的一个理论框架。它可以帮助我们对于不同文化群体的价值观有一个较为全面的了解，从而更明白该文化群体中人们的行为倾向。此理论总结了衡量各文化价值观的六个维度：

• 权力距离指数（power distance index，缩写为PDI）：指在家庭、公司、社区等组织机构中地位较低的成员对于权力分配不平等的接受程度。权力距离指数高的文化，组织更中心化、有特定的等级秩序、更容易听从领袖的决策；而权力距离指数低的文化，组织更扁平化、主张人人平等、更倾向于自己做判断而不易受控制。
• 个人主义（individualism，缩写为IDV）：与集体主义相对，指个人融入集体的程度。个人主义越高的文化，自我意识更强烈，更看重依靠个人努力获取利益和价值，追求隐私保证和自由；而个人主义程度越低的文化，会期望得到“团体”的照顾，更忠诚地依赖于群体和熟悉的社交关系，更倾向跟随主流价值观做决定。
• 不确定性规避指数（uncertainty avoidance index，缩写为UAI）：指社会能在多大程度上容忍不确定性。不确定性规避指数越高，人们会更遵循规则，恐惧变化、喜欢熟悉，并且习惯通过已知经验推演事物逻辑。而不确定性规避指数越低，人们会更有更强的安全感，对变化的包容性更强，有着更轻松的生活态度，鼓励冒险，对风险的承受度更高。
• 男性化（masculinity，缩写为MAS）：与女性化（femininity）相对，指人们（不论男女）更富有竞争精神，自信与野心，注重财富和社会资源的积累，而女性化社会责注重人们之间的关系和生活的品质。故男性化程度高的社会，人们会更加自信、进去、好胜，追求英雄主义，关注物质成功及权利地位；而男性化程度低的社会，人们会更加注重合作与谦和，信奉中庸共识主义，更享受生活、关爱他人。
• 长期导向（long-term orientation，缩写为LTO）：最初名为“儒家动力”（Confucian dynamism），指社会对未来的重视程度。长期导向的社会，注重坚持不懈和节俭，愿意计划未来生活，也会设定长期目标；而短期导向的社会，会认为活在当下更重要。
• 放任与约束（indulgence vs. restraint，缩写为IVR）：指社会成员在多大程度上意图控制自身的欲望。放纵指数越高的社会，人们会更加乐观、积极、冲动，认同随心所欲的观点，更倾向自我欲望的满足和表达；而克制指数越高的社会，则会在心态上更加严肃、严谨、审慎，会有更严格的社会规范制度，而认为休闲娱乐不重要。

使用他们官方网站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查询到各个国家的文化维度指数，也可以选择不同的国家进行对比。

• 日本与荷兰的文化维度指数对比 - hofstede

在为特定地区的用户设计产品时，我们可以以从这些维度去解读他们的行为倾向，并据此提出相应的解决方案或者设计方案。滴滴团队在开拓墨西哥市场时，根据墨西哥的文化维度指数在产品的本土化上制定了从功能到外观等不同层面上的设计策略。

墨西哥地区的文化特征指数

滴滴墨西哥的本土化设计策略

这类源于文化差异的设计差异并不少见。在淘宝等国内的电商平台上，“按照销量排序”是一个被高频使用的功能，消费者们认为什么产品买的人多，什么产品就更好。这样的观念也催生了一大批店家刷单的行为。但当在北美的电商平台亚马逊上，我们会发现并没有按销量排序这个选项。因为美国的用户相对来说个人主义更强、更相信自己的判断和选择，他们不认为他人推荐的就一定是好的。

• 

国内外电商平台对比

在企业即时通讯工具行业，国内的主流产品，如企业微信、钉钉等，都选择了蓝色这一比较沉稳的颜色作为主色调，在产品功能的形态上也偏向于严肃。而海外的办公产品Slack，视觉色彩更加丰富；整体的产品定位也更加活泼欢乐，常常会有“不严肃”的表达，比如在界面多处都使用了emoji。这样的产品形态差异，其背后是两种文化在放纵（享乐）/克制（严肃）这一维度上的差异。

企业微信与slack的产品风格对比

内容本土化

除了功能框架上的设计需要考虑本土化外，产品中运营内容的本土化也是不可轻视的一环。Spotify Design 团队在《 Designing for Belonging: Why Image Localization Matters 》一文中，记录了他们对于内容本地化的一些经验和思考。同样，内容的翻译仅仅是本土化的第一步。在地区之间区别不大时，完成内容的翻译便能够满足其他地区的需求。如下图中 “浴室歌单（ Songs to sing in the shower）”的播放列表，列表上的文案一经翻译，就能够推送给德国、波兰、以色列、意大利等一众国家的用户。但当内容的阅读群体有着更显著的差异时，仅仅翻译是不够的。在看到这张图片的时候，其他人种比如亚洲人可能就不会产生很强的代入感，也会缺少对产品的一种归属感（这个产品并不是为”我“设计的）。

Spotify "Songs to sing in the shower" 歌单

下图展示的是Spotify另一个歌单—— “快乐时光（ Happy Hits)" 的封面在不同国家的呈现形式。可以看到，面对文化差异更大的群体时，Spotify在保持了统一的样式风格的基础上，针对每一个国家和地区都展示了当地人在他们的生活中“快乐”的样子。这种本地化内容更加贴近当地用户，也能够让用户产生更强的连结感与共感。

Spotify "Happy Hits" 歌单

结语

回到那句话 —— ”Recognizing the need is the primary condition for design.“  产品的出海其实只是我们在设计中会遇到的一种场景，在这个特定场景下我们的设计思考与其他场景下是互通的。如果仅仅完成了翻译这一步，那我们就忽视了在新市场下另一群用户的特征、需求、使用情景、操作习惯等关键信息。无论是不是在为产品的出海而设计，我们始终应该保持对用户的好奇，让最终的设计实现我们期望达成的目标。

文章来源：UI中国  作者：酷家乐用户体验设计

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

为什么要写这片文章？

自己入行交互一年多，最近从梁宁老师的《产品思维30讲》和《增长思维30讲》获得了两套思维框架，并从中铭记了两句话：“世界如此精彩，当然不能置身局外”，“愿你向世界交付你的价值”，于是想通过运用这两套思维框架，重新审视各类产品，把自己训练成一个客观的人，并向世界交付我自己的价值。

微信作为一款从2G时代出现的产品，跨越了十一年的时间，成为了如今国民级的应用，甚至正逐渐成为我们的生活方式，却一直保持着简单和连接的理念。就在今年一月份，微信推出了8.0版本，其中添加了很多新奇有趣的功能，站在用户视角上，能看到评价有褒有贬，有人说微信根本不了解用户而且孤傲，有人说微信正在变得臃肿，有人说微信体验不好但是没有替代品不得不用。看了很多介绍微信8.0的文章，发现都只是在介绍微信8.0更新了什么，但是没有看到有人会更深层次地聊微信为什么要这样更新；上周我在听完张小龙的微信十周年演讲后，感触良多，并从中窥探出了微信更新的些许用意。于是想试着从用户体验的角度去分析微信，所以我想把第二个思维框架分析对象确定在了微信身上。

愿读完这篇文章，你能获得我所希望交付的价值～

上期传送门：《从用户体验的角度分析王者荣耀》

微信是一款什么软件？

先说结论，微信本质上是一款连接的信息流流量平台。

在很多人人眼中，微信就应该是一款社交工具，希望微信能够做好社交的本职工作就够了，不需要再加上其他杂七杂八的功能；有人抱怨说微信变得越来越臃肿，很多功能其实自己并不用得到，还占用手机的内存，已经丢失原来简单的模样。

但是要知道，你眼中所看到的世界，其实是由各种外部和内部的因素所塑造的。就像几年前有一句特别火的话：你的眼睛里，有你走过的路，看过的风景，读过的书和爱过的人。你能成为你今天的样子，其实是由你的人生经历所决定的。所以微信十年来不断改版，从一款通讯工具变成如今的连接信息流的平台，其实是由微信的基因所决定的。张小龙在2021年1月微信十周年公开课中讲到：“微信10年，如果非要用两个词来描述微信，我想一个是连接，一个是简单。从一开始微信从一开始的连接人，到后来的连接企业，微信支付功能后开始连接现金流，到如今8.0的视频号来连接视频，短视频的信息流，微信基于连接的理念从来没有变过。这也是为什么当年微信能够战胜米聊成为当今最火热的社交工具的原因。

在2014年的时候，微信1.0版本的时候，微信只有400万用户，而雷军米聊有2000万用户，两者的差距从微信3.0推出陌生人社交拉开，从推出微信支付功能开始彻底打败了米聊。是因为米聊是只是在社交，而微信却是在做连接；微信把社交看成一种信息流，从而把更多的信息流整合连接自己的体系内；因为要把更多的信息流整合到平台上，于是微信变得越来越大，占用的内存越来越多。看似有意为之，实则情非得已。另外说一句，雷军貌似是在这次大战之后学会了教训，并把这套战略用在了小米身上，于是能看到你OPPO，ViVO把手机作为核心盈利产品，而小米却只是把手机作为流量连接的入口，继而发展出小米智能家居这一庞大的产业链。

所以你以为微信只是一款社交工具，但其实微信是连接信息流的流量平台。

什么是信息流？字节跳动的张一鸣认为世界是由人流、物流、资金流、信息流组成。比如文字，语音，视频，支付、都是信息流的一个分类。你可以把互联网想象成一条大江大河，无数的企业将大江大河中的水引入自己的支流中，使自己变得强大；所以互联网的的竞争，本质上是流量的竞争，流量指的其实就是信息流。

什么是平台？美团副总裁张川的理解是：平台首先是动态不平衡，你不知道你能在这里遇到谁；第二条，用户彼此之间要产生网络效应；第3条，用户之间永远有彼此的需求，无法握手，需要平台从中撮合。

微信里有的那么多陌生的人，陌生的公众号，你不知道你能在这里遇到谁，你在微信中与熟人，陌生人社交，能够产生巨大的网络效应，催生出了微信支付、公众号这样的庞大商业体系；用户与熟人或陌生人之间、用户与公众号之间、用户与商家之间，永远存在需求，而微信在从中充当了连接的作用。

张小龙说过一段特别牛逼的话：让产品自然生长。微信作为超级巨大的流量平台，真正做到了不打扰用户，让微信的流量自然碰撞、发酵，构建出了如今如此庞大的微信帝国。

微信带给了用户什么样的确定性？

微信始终致力于连接于简单，十年来不曾改变。

连接上面已经说过了，下面来说说简单。微信提供了简单的确定性，每一个功能都切中要害，张小龙说微信最骄傲的是，十年的样子和今天的样子并没有什么改变。通过最简单的方式做到最大程度满足用户的需求，这对产品经理对用户情绪把控要求特别高。分析一个产品一般要从三个角度去分析，首先是从宏观视角看这个产品是附着在什么样的经济体上，竞争对手是谁，也就是常说的看大局，看清楚谁是自己的朋友，谁是自己的敌人。然后是从中观视角去分析产品的服务人群，功能流程，信息结构，并由此得出用户画像、用户体验地图、痛点痒点爽点等用户体验相关的结论。最后是从微观视角，从用户内心的底层情绪出发，去探究产品对于用户内心情绪的影响，由此来进一步分析产品带给用户什么样的确定性。

一般来说，用户体验设计师掌握好中观视角，基本上就能在行业内生存下来。中观视角更多靠的是经验和套路，掌握分析产品的方法和路径，多花时间去实践，假以时日，你就能成为行业内合格的用户体验设计师。但更难的，其实是掌握好宏观视角和微观视角。宏观视角是打大仗的能力，需要你站在足够高的视角去俯瞰整个大局，看清楚产业周期，产业的方向，靠的其实是定战略，和找杠杆，入行不久的体验设计师或产品经理通常没经历过大仗，是很难体会到的，我自己也没经历过，所以只是听梁宁老师介绍，学了一些这方面的思维框架而已，感兴趣的读者可以去了解。但其实梁宁老师更希望我们做到的，是掌握分析微视角的能力。

张小龙就是一个对产品的微观视角特别敏感的人，他能从用户底层细微的情绪变化中分析出用户的需求点。想想微信从通讯工具到熟人社交，再到陌生人社交，再到公众号、微信支付，直到今天的视频号，都是精准地把握了用户最底层的情绪需求的结果。比如，微信的朋友圈从完全开放，到仅设置三天可见，再到三个月或半年可见，直到可直接管理是否看朋友圈，到了微信8.0，甚至要求用户验证好友时就首先确定朋友圈权限，这一连串改变，其实都是源于张小龙对用户在当下社交情绪逐渐发生变化的精准把控能力，这也是为什么都称张小龙是产品经理之神的原因。

微信为什么推出视频号？

微信为什么推出视频号呢？在我看来是为了争夺信息流。这是腾讯继2018年微视在短视频大战战败后发起的第二波战争。

上面说到过，互联网的本质其实是信息流，谁拥有的信息流越多，谁就能获得更大的势能。淘宝靠着电商和支付的信息流，就成为了中国第一的电商公司，字节跳动靠着短视频载体的抖音和长视频载体的西瓜视频以及新闻载体的今日头条在几年间迅速成为了互联网巨无霸级别的存在。

我们可以倒回几年前回顾一下那场大战，战场上有抖音、快手、微视、还有就是一些草莽或腰部的小视频软件。当时快手用户数是高于抖音和微视的，甚至放出不屑于花钱买广告做推广的言论。结果就在2018年春节，抖音8天烧了5亿美元，重金做推广，吸引了大批短视频爱好者和流量；随后快手感觉势头不对，也开始疯狂重金砸广告，做补贴，并成了2020年春晚赞助商。而微视的做法是，大量补贴的同时，借助腾讯的杠杆，直接将入口做在了QQ和微信中，全面禁止非腾讯系短视频链接在微信朋友圈中扩散。结果出乎意料的是，微视和一众其他成为了短视频大战的牺牲品，从此短视频市场二分天下，南抖音北快手的阵容确定下来。与此同时，还有一件事值得关注，就是2019年，三家互联网企业对微信发起了挑战，一个是马桶MT,一个是罗永浩的  聊天宝，最后一个是抖音的多闪，最后是以微信的不理会作为收场。

为什么短视频如此重要？因为它很可能是未来信息流主流的载体。

不知道你有没有感受到，微信公众号没以前那么火了，其实很大的原因是因为我们把看微信公众号文章的时间拿去刷抖音、看短视频了 。在2018年之前，微信公众号是微信信息流非常重要的入口。在PC互联网时代，搜索引擎百度是流量的入口，旗下的百度贴吧，百度知道，百度百科组成了中国最大的中文互联网内容创作社区，使得百度成为了BAT三巨头的头部企业。但是在移动互联网时代，各大应用开始自建搜索引擎，自营内容对百度进行了封锁；微信公众号从中崛起成为了新的流量入口，无数的自媒体创业者通过微信公众号上创作内容，成为了移动互联网时代的信息流入口。但是，随着4G技术带来了更高的网络带宽与传输速率，视频内容开始发展，短视频应运而生。

短视频为什么能够取代文章？

回到底层情绪来看，是因为人们比起文字本能地更能理解简单、直接的图像。文字带给人的反馈是延时的：你得先识别文字本身，理解语义，上下文联想，最后你才能得出一段文字的含义。而短视频是带来即时反馈的，它没有阅读成本，能通过视觉和听觉，就能给用户带来更加深刻和即时的情绪上的变化。其次，短视频的创作门槛比写文章低，张小龙在演讲中说到，许多人其实是不擅长写长文章的，但是你让他用手机拍一段视频，这是一件很容易就能做到的事情。最后是因为当代人的心智提上去了，这时代的人们的观念正在逐渐开放，更加乐于表达自己，短视频当然就能使更多人参与进来，自然就能成为下一阶段主流的信息流载体，微信当然不能置身局外。

所以，到这里，你其实就已经能看清一些微信在做的事情了。微信为什么要开设视频号？就是为了争夺下一阶段信息流入口。为什么当年支付宝要推微信？是为了争夺的信息流。

当前阶段，谁是微信的竞争对手？信息流的上游是人，谁掌握了最大的信息流谁就是竞争对手，目前能看到的是抖音，2018年抖音推出多闪，其实就是为了构建自己信息流平台；在之后，可以预见到抖音和微信在短视频流量争夺上必有一战。

微信能不能赢？

我觉得微信这次能赢，因为人性的弱点推动了互联网的流量，但人性的光明构筑了商业的文明。

互联网商业本质是流量*转化率，字节跳动鼓励人们在抖音、西瓜视频上发视频，采用的是补贴的方式，这会使得视频博主在其平台上发布视频的目的变得利益化，是在变相鼓励视频创作者生产更具强吸引力的题材，取夸张的标题名字来吸引更多用户点击，从而获得更多流量，并通过广告商的投资，带来商业的变现。去年甚至还爆发了直播带货的新蓝海，其实本质上都是帮助视频创作者带来商业利益。色欲作为人类的本能，自然是最能吸引用户的手段，所以你能看到与性相关的视频在抖音，快手等平台占比是最多的。

这种利用人性的弱点（贪婪、色欲、虚荣、窥视）构筑的互联网流量，使得抖音快手在短视频草莽时代逐渐成为了短视频中的头部平台，但是在存量竞争市场上这一机制终究不可持续。相比，我更喜欢微信视频号的做法。

微信选择只做内容承载和传递的载体，这就意味着微信不会去生产内容，也不会去买内容，并不会关注具体的内容到底是什么，而是真正做到让用户自发地去生产和分享内容，让产品自然生长。张小龙说视频号的目标是，希望人人都能够很容易地通过视频化的方式去公开表达内容。这使得内容创作者本身很难带有利益目的。视频号的初衷，就不是让一部分内容创作者获得极高的关注度，成为网红，获得商业变现，而是希望人人都能够像在朋友圈发布图文一样，以视频化的形式去表达自己的内容。微信能这么做，是因为其拥有巨大的信息流，有足够的能力去做这件事。

尽管现在打开视频号，里面同样充斥各种基于人性的弱点所创作的内容，微商、网课、低俗，诱惑等内容遍地，但现在你看到的它的样子，绝不是它本该有的样子。我相信随着微信对视频号的迭代，视频号终会成为微信所目标的那个人人都能表达自己的样子。

为什么张小龙说直播新的表达方式？

张小龙在公开课中讲到：未来直播可能变成一种很多人都在用的、个人表达方式。为什么？因为直播能够营造场景。

什么是场景？场就是时间+空间。景呢？是能够触发情绪的交互。直播比起视频，更能够激发用户内心的情感，能够让主播和听众之间产生更深刻的连接。这种感受其实是视频无法比拟的。就像你在现场看演唱会和看录播体验是完全不一样的，周边的环境会影响用户的情绪。令我很深刻的体验是，今年王者荣耀冬季赛决赛第四局DYG对战南京Hero战队，当时的局面是0:3，如果第四局DYG没有赢就意味着比赛的结束。当时直播中所有人的心都很紧张，结果DYG里的清清用一手关羽力挽狂澜，赢得比赛，在场主持人，和屏幕前的观众都被DYG清清的不服输感动，场面一度到达高潮，我的内心也被深深震撼到了。但是之后看录播，就会发现有人在看外星人似的，发弹幕很冷淡地表示都是基本操作，完全不懂我们在激动什么。这才使我意识到，直播真的比视频更能激发用户的情绪。

现在你打开微信直播，内容质量其实并不好，是因为新流量入口会带来新红利，投机者当然不会放过这个机会。但实际上，微信直播应该和会如今刷礼物求关注，公会云集的直播平台不一样，会呈现出一个更加开放、生活化的样子。

微信为什么要在表情包、状态上的创新？

微信8.0更新了动态表情包，动态，把视频放在名片，音乐播放器优化上等一系列新有趣的小功能。这些功能按照张小龙的说法是人们对情绪的表达更强烈了：他觉得人们喜欢表达更加强烈的表情，他觉得设置状态能够帮助用户找到同类，他觉得音乐播放器不该是一个电唱机放在那里转，而应该给用户更直观的视觉表达。你会发现，张小龙描述需求的方式，是极度自我的表现，他会用心里想的美好的用户故事来解释为什么要加这个功能，而没有根据数据来得出结论。甚至他说想做一个功能，让十几亿人都能在同一张画布上画画，然后看最后画出来的是什么样子。这些一些功能，张小龙就是拉一个一二十人的团队，讨论了一下自己的想法，就这么简单的做了，就这么推出了。

这里我想说说自我与自律。成为高手的路径是一万小时定律，但是，想让一个人持续在一件事情上花费一万个小时是很难的，有两种方法可以实现。一个是保持自律，带着对失败的恐惧，坚持下去；另一个是对这件事保持满足和愉悦感，靠着对做这件事的热爱来度过这一万个小时。自我和自律的人都能成为非常成功的人，你从小受学校的灌输自律的理念其实是为了便于管理。但自我的人，是充满创造力的，对不满意的事物是抱有强烈的情绪的，他们不能容忍不完美的事情，并会去努力改变它。苹果大神乔布斯是一个极度自我的人，他能乐此不疲地对着ppt演练上百次，他不能容忍手机附带个键盘笨重的样子，乔布斯让自己追求卓越的精神成为了苹果的设计理念。梁宁老师说，张小龙是一个极度自我的产品经理，正是由于其对用户在社交需求上极其敏感的感受，才催生出了如今简单并且连接世界的微信，张小龙说自己是被上帝选中的，其实是因为持续做出了正确的决定，而这决定，与其对用户情绪的深刻把控有关。所以腾讯出产品经理，阿里出运营人才。

你吸收谁的营养，你就变成谁。你靠什么满足你，你就会成为它的样子。什么东西持续满足你的东西，什么东西永远让你不爽，这就是你的命运。

总结

这次分析微信，我没有严格根据梁宁老师给的中观思维框架来分析（痛点痒点爽点、用户画像、用户故事、用户体验地图、服务蓝图等），而是从微观情绪和宏观大局上分析了微信带给人的确定感，微信视频号的意义所在，聊了些关于自我与自律的事情。因为我觉得微信成为今天这个样子，服务着如此庞大的用户量，它已经成为了我们生活中不可或缺的一部分了，人生百态，微信包容了无数种用户画像，在其上也书写着无数的感动人心的故事，我觉得这时再去聊中观套路其实已经没有什么意义了。微信从1.0，跨越2G到5G的技术革新，从一个简单的通讯工具，不忘简单和连接的理念，十年时间迭代成为了我们离不开的一种生活方式，这放在人身上该是一个多么励志的事情啊！

最后我想交付给你一句，也是梁宁老师交付给我的，一直触动鼓励我坚持下去的话：

今天你在什么样的点位上其实并不重要，重要的是在未来，你会以哪种方式，持续迭代。

文章来源：站酷   作者：努力的橙子

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

前言 

近期改版了小米商城APP的新品板块，改版的过程总结了很多非常实用且有价值的设计方法，所以要尽快分享给大家。 

这次分享的内容会从思维到技术全面讲解，会告诉你如何从设计的角度理解需求，针对性的解决问题，以及交付设计时的沟通技巧，可谓是清清楚楚明明白白的分享设计经验。 

案例解析 

电商产品运营板块改版，很大一部分原因是数据不好或不够美观需要提升视觉，下面是改版前的截图和调研UI设计满意度的结果。 

调研的结果中其实前六项都是在讲一件事，就是头图不够好看，最后一个是运营的需求，查看更多入口点击率过低，希望能提升打开率，这点的改版下面会详细讲解。 

从设计的角度找问题根源

旧版头图第一眼看过去，色调、质感其实说的过去，但如果仔细观察分析，就会发现有很多不恰当的地方。 

比如投影与主光源不符、主光源在左侧没有专属感、背景杂乱、空间感太强商品摆设置后，就像是在远处观看物体，这样会导致商品不突出，视觉上容易疲劳。 

上图这些问题普通用户一般不会准确发现，但其实用户能够感知到不舒服，因为不符合人潜意识认知的物理规律。 

所以问卷中大家会提出不够高大尚、没有高级感、不够简洁，这些就是普通用户说不出哪里出了问题的语言表达。 

作为设计师应该能够从用户的语言中，通过专业的设计角度去挖掘问题的根源。 

比如不够简洁，是因为背景中杂乱的东西太多；容易视觉疲劳是因为商品与空间的关系没有掌握好；主光源在左侧，不容易营造商品专属舞台的感觉，而且使用暖色调还会增加视觉疲劳感。 

找到问题的根源后，首先是改善展示商品的舞台，解决商品空间上展示的问题，渲染出一张干净的背景，不会有杂乱的感受，然后通过灯光和舞台材质质感打造商品的专属感。 

了解商品才能更好的打造舞台

舞台是为商品服务的，所以我们要了解大多数展示 商品的色调、拍摄角度、质感材质等，这样才能够更合理的思考舞台的设计。 

另外，还要结合新品板块的特征去研究设计方案，比如新品产品具有神秘感属性，那就需要打造一个贴合新品特征的环境氛围。 

米家商品 

小米手机 

米家的产品大多是白色，小米手机都是绚丽多彩的屏幕和有质感的外框，加上新品商品的属性较为适合有神秘感的氛围，所以综合来看我们需要一个暗色系且有质感的舞台。 

强调舞台质感是因为能够与有质感的手机产品形成一种呼应，手机是小米的支柱产品，当然会宠他，所以在设计上需要倾向手机的展示。 

什么是舞台？

何为舞台，舞台是为演出者服务，其最终目的是给观众更好的视觉体验。 

回到旧版的案例中，商品放置空间的后方，就等于给用户买的是最便宜的后排座位，后排视角当然不会有好的视觉体检，第一排的C位才应该是我们为用户准备的视角。 

演唱会舞台 

舞台中的主光源一定是对称、居中打在舞台中央的，因为这样观众的视线能更好的聚焦在演员身上，并且能渲染氛围，呈现一种专属感。 

所以我们旧版案例中主光源在左侧，右侧是投影，会导致用户的视觉焦点很分散，从而不能把视线有效的引导在商品本身。 

C4D渲染舞台

通过上面总结分析，我们大概对舞台有了一个清晰的设计思路，背景用暗色系让视觉更好的聚焦在商品身上，有反射高光质感能与手机产品形成呼应，空间上给用户近距离的视觉体验，好了打开C4D干... 

C4D渲染舞台 

非常简单的一个场景，使用一个阶梯的圆柱体，放个背景，正前方放一个主光源，左右两个对称的辅助光，材质球上加轻微的反射与高光，这样渲染出来更有质感，材质颜色使用了蓝色调，原因有三点： 

第一，小米刚刚推出的小米11主打的是靓丽的蓝色调，轻装上阵，暗蓝色的舞台与明亮的小米11放在一起会毫无违和感，同时也会呈现强烈的对比效果。 

第二，小米有太多白色的商品，暗蓝色的背景会让白色商品渲染的更加靓丽。 

第三，小米也有很多黑色的商品，偏蓝色的背景能够避免与黑色调商品撞色。 

最终舞台效果图 

最终的的调色在Ps中完成，舞台的中央是亮的，营造了一种聚光灯打在舞台中央的感觉，这样上面放上商品就会体现一种专属感，这种效果是在C4D中材质球使用渐变色。 

另外，暗蓝色的氛围上有一种神秘的感觉，这非常符合新品的亮相方式，整个舞台没有很强的反射和高光质感，是因为 舞台的质感要弱于商品本身的质感，否则容易喧宾夺主。

新旧对比 

上图中有质感的舞台可以增加手机的写实投影，视觉上融合的非常好，下图中是白色和黑色商品的展示，在暗蓝色的背景下都能够有效的突出商品。 

黑白商品图展示 

优化头图比例

新版与旧版还有一个最大的区别，新版头图的比例缩小至1:1，为什么是这个比例？旧版的长图为什么不合适？ 

旧版长图占据首屏巨大的面积，这种形式一般不适合常态化功能模块，（常态化是指产品中一直存在的功能模块）长图或者整屏适用于非 常态化强运营的活动模块，比如节日活动，节日过后就会下架。 

小米上新板块是首页中常态的功能模块，太大的展示面积其实浪费了首屏空间，之所以用1:1比例，是因为分析了若干个竞品的上新模块都采用的是1:1的比例。 

所以记住这句话， 当市场已经验证过的设计形式，最好的就是采用它，这样大概率能避免出错。

调整文案排版

旧版的文案是3行，看上去会略显啰嗦，中间文字有点多余，还占了面积，改为两行足以，一个产品名称，一个产品卖点。 

旧版走马灯是常规的原点示意，为了能给商品展示留出相对更大的面积，新版把走马灯改为了数字示意，如上图右下角2/5的形式，这样就从4行变为了2行，直观简洁突出。 

敲黑板！“查看更多”入口的处理

上文问卷调查中最后一条，运营同学希望用户能更多的点击列表中的“查看更多”入口，之所以现在点击率不高，是因为设计样式是一种辅助形式，下图所示。 

如果按运营同学的需求只是去强化入口的视觉表现，那未必是一个好的设计方案。 

想要突出哪里就在视觉上强化哪里，这是典型的产品思维，而UI设计师应该结合整体页面结构的交互形式去思考优化设计。 

首先梳理一下用户在此页面的浏览过程，当用户打开此页面时，第一眼看到的是头图，因为他最吸引眼球的，其次就是开始滑动页面浏览商品列表。 

那么这时如果“查看更多”入口，通过强烈的色彩表现，或者动效设计的方式，那一定会有部分用户被吸引点击进入“查看更多”页面，而用户没能继续向下浏览页面，就会看不到平台推荐的商品，这不符合产品的设计逻辑。 

所以，当用户浏览到列表最后的商品了，还没有被某个商品吸引，这时再出现一个“查看更多”按钮入口会较为合理， 这样的交互方式才符合用户浏览的顺序，修改后如下图。 

另外，标题也做了优化，旧版主标题与副标题上下排列的方式会占据更大的面积，而且看起来还是非常拥挤，再加上主标题与副标题大小对比过于大，也直接导致用户视线会忽略掉副标题。 

新版修改后缩小主标题字号，排版方式上主副标题成左右结构，这样视觉上完全不会遮挡副标题的展示，而且最大的好处还释放了页面中的空间，看下图感受一下。 

满足运营需求，增加动态iCON

为了满足运营同学希望用户更多的进入全部新品页面的需求，设计上除了在商品列表下方增加了“更多新品”按钮，同时也在页面的右上角增加了一个进入全部新品页面的动效形式icon。 

当时在构思这个icon时，从一个视觉表现很强的动态形式，一直做减法直至非常恰当合理有效的融入页面当中，下图中最后一个最简洁的设计是确定的方案，简单的动效突出而不突兀，恰到好处。

↓↓

↓↓

  
↓↓

做减法的icon 

动态元素在页面中最为吸引人，哪怕是做了弱化处理，所以有时候在设计上有一种策略是，前期用动态的效果去培养用户的习惯和认知，当对动态效果已经发挥了作用之后，后面就可以改回非动态效果，这样就能避免浏览页面过程中动态元素的干扰。 

总结：

改版设计，不能根据表面需求去设计，一定要找到问题的根源所在，然后针对性的解决这些问题，当交付设计时，一定还要告诉需求方， 这样设计的目的是什么，解决了我们现有的哪些问题。 

说不出来设计目的，编也要编出来，这样至少能锻炼你的思考力，编的多了自然会有明确正确的设计思考了。 

最后 

如果你现在打开小米商城进入小米上新，会发现只改了一张背景图，因为开发还没有排上期，但最终会按此次改版的效果开发上线，所以有时候遇到这种情况时，设计师还需要结合当前产品的开发框架进行适配设计。

 

文章来源：站酷  作者：吴星辰

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

Part 1

————————

信息容器的概念

信息容器是承载信息的载体，位于内容层。要理解信息容器的概念，首先要理解界面中的层级关系。一个界面除了竖直方向和水平方向维度，还有纵深维度。

从底层（远离用户）到顶层（靠近用户），基本上可以分为以下几层：

1. 背景层

2. 信息层

3. 全局操作层（各种常驻于屏幕的bar、悬浮按钮等）

4. 浮出层（模态类型的浮出层还需要有蒙版进行隔断）

   
   

本文要讨论的“信息容器”，指的是信息层上，装载信息的载体。信息的类型多种多样，可以是文字、图片、视频、各种操作控件等。

Part 2

————————

信息容器的常见类型

常见的信息容器主要有2大类：列表和卡片。

在整理案例的时候，我不禁产生了一个疑问，到底什么是列表，什么是卡片？如何界定和区分两者？这个问题乍一听有点无厘头，列表不就是列表吗，多个布局一致的狭长单元组合在一起，就形成了列表。那么什么是卡片呢？和屏幕两侧保持一定间距，带圆角的就是卡片吗？

我们不妨先看看下图案例：

2.1 列表和卡片该如何界定？

为什么类似的布局形式，上图中，图1给人感觉是列表，图2给人感觉是卡片，图3既像列表又像卡片？

从内容层面来说，包含的信息类型有：文字、图标/图片、按钮。几乎没有太大区别。

是什么导致我们观感上的不同呢？

电商案例也许可以给出答案。

从电商产品的商品列表页中可以看到，用户可以自主选择两种不同的商品展示模式：列表模式和卡片模式。

这两种模式几乎可以对应“列表”和“卡片”两种信息容器样式。完全一致的信息量：主图、标题信息、价格信息、辅助信息，相似的展示效率（一屏展示约4.5个商品），不同的信息容器展示形式给人不同的感觉。

单纯从信息层面或者视觉层面都不能界定列表和卡片，如果多维度叠加限定又太繁琐，因此本文给出的列表和卡片直接的区别界定是：可以自主定位关键线索，规划视觉浏览动线。如果视觉浏览大方向是竖直的，那么就归入列表范畴，浏览动线不是竖直而是折线的，都算在卡片范畴。

2.2 常见的信息容器分类：

除了上面说的，最常见的两类信息容器：列表和卡片之外，还有另外两种形式，分别是：无容器和复合容器。

这些容器具体有哪些特点，我们一一来看。

Part 3

————————

列表

列表的定义：将结构一致的信息单元在竖直方向上铺陈下去，形成的信息集合。

不同场景要呈现的信息侧重不同。

举例几种常见的列表形式：

1. 用户/消息列表

2. 图文列表

3. 功能列表

4. “卡片型”列表

3.1 用户/消息列表

用户/消息列表的内容结构很清晰，头像+身份+内容提要+辅助信息。

图片天然地比文字更具有吸引力，视觉上的优先级排序是头像＞身份＞内容提要＞辅助信息。

当然用户可以很方便地选择关注的对象是图片还是文字，这体现了列表的优越性，浏览动线竖直，可以方便用户根据自己想要的索引快速定位。

这里值得讨论的是头像用方形还是圆形的问题，相信大家都想到过这个问题，同样是社交产品，qq是圆头，微信是方头，这里边有什么原因呢？

本文尝试分析一下，仅是个人意见，欢迎讨论。

按照理论，圆头亲切的形状感知更加适合轻松基调的产品，方头严谨的形状感知更加适合严肃基调的产品。这解释了电商类型产品（淘宝、京东）的信息通知一般都是圆头的，匹配轻松愉悦的网购体验，而金融类产品（支付宝）多是方头。对于同是熟人社交类产品的微信和qq来说，qq用户层年龄偏低，属性相对更加活跃，更加轻松的圆头可能更适合此类用户。

以iOS为例，当用户向左滑动列表时，呼出针对该列表单元的操作。具体列表对应具体操作，操作项数量不同。

方案A：

优点：操作底板宽度适应文案，不会出现空间局促的现象。

缺点：当文案字段长时，列表被推出屏幕外的内容较多，当用户操作分心时，可能会忘记正在操作的对象，虽然这种情况极少发生。

方案B：

优点：操作底板固定，文案折行规则明确，既不会造空间拥挤，被挤出屏幕外的列表区域可控。

方案C：

优点：搭配图标，视觉更丰富。

缺点：图标占据了一定高度，导致文案无法折行，列表被推出屏幕外的内容较多，与方案A类似。

综上，个人认为方案B是最合理的，对于文案长度的宽容度高，即便文案较长，也可以保证视觉和谐，并保留较多列表内容。

在用色策略上，使用的是为大众所接受的“语义色”，一些具体的颜色在长期经验积累中形成了固定的语义。

当用户触发了带有一定破坏性的操作时，需要用户进行二次确认。

并不是所有情况都需要二次确认，二次确认的样式也有多种。

同样都是模态视图，要表达的信息也相似，都是要求用户进行选择，为什么有些产品选择将对话框居中，有些产品选择将对话框放在底部？这里涉及到关于模态视图的相关知识点，本篇文章旨在讨论信息层面的内容，模态视图涉及到了浮出层的内容，将在下篇文章中进行详细探讨。本篇文章不做过多延展。

3.2 图文列表

信息流产品一般是由图片+重点文案+标签（可有可无）构成。

不同性质的产品想要突出的重点不同，根据内容的重要性权重来分配视觉占比。

从上方几个例子中我们可以看到：

在图文比例从左到右依次提升；

图文布局案例1-3使用了左文右图的方式，案例4-7使用了左图右文的方式。

搞清楚如何图文布局和设置图文比例，就基本解决了资讯流页面最关键的问题。

资讯列表或称feed流，主要根据用户喜好定向推送内容。除了从用户日常浏览、搜索等行为中提取用户喜好信息，用户主动反馈的信息精度更高，用户不惜花费更多操作成本来提示产品，对内容不感兴趣。

从视觉上说：

1、提交反馈的入口（小而浅的icon）都不明显，有些产品用“更多”来提示用户，有些产品用更加负面的“关闭”来提示用户。当用户对内容产生较为强烈的反感时，才会注意到屏蔽入口。常规浏览时，该图标不会影响用户注意力。

2、反馈形式采用模态对话框，用户需要选择具体操作，是屏蔽内容或作者、还是举报或不感兴趣。

3、对话框是否有指向性：从表意明确的角度上来说，带有箭头的气泡更有利于用户定位对象。

从交互上说：

反馈入口热区较小，容易误触，大多数情况下，用户不会注意和点击该图标，用户是以浏览为主要行为。

3.3 功能列表

列表索引一般还是定位文字为主要形式，不同用户的认知水平不同，图标表意始终是一大难点，多用为辅助记忆或单纯提升视觉美观。图标虽然是体现设计风格的重点，但是在具体情境下，如设置页，用户更加在意快速找到自己要找的内容，多度的图标样式，实际上会折损用户的检索效率。

一般功能页面或放置许多功能，常常会超过十几项，这种情境下，检索效率低下是一个痛点。

如何提高检索效率？—— 分组

分组给用户提供了认知线索，根据格式塔原则，用户总是倾向于把距离近的、样式统一的元素归位同类。

毫无分组显然对于检索是不利的，用户需要逐一浏览，该情况适用于列表项无法分组时，如果有分组条件，务必分组，帮用户节约筛选成本。

UI界面中，列表的分割方式常见的有以下3种：

1. 线条分割

2. 块面分割

3. 间距分割

3.4 “卡片型”列表

在我们的固有观念里，大圆角，不通栏，有投影的形象就是卡片。

这种样式也越来越盛行，许多产品尝试将列表也用“卡片化”进行包装。

虽然是相当细节的点，但是精细化处理之后的结果就立刻会与批量化处理的结果拉开差距。

产品级的风格统一来源于点滴细节。

Part 4

————————

卡片

卡片的类型繁多：单列大卡片、泳道、内容流（两列网格、瀑布流）、宫格

4.1 大卡片

从内容展示效率上来讲，单张大卡片就占据占据屏幕（刘海屏）超出一半的高度，用户需要不断滑动屏幕浏览下方内容，操作成本较高。大卡片形式对内容本身，如图片的质量要求很高。这种模式常见于图片社区或垂类电商产品，图片社区（如躺平）本身较为小众、即便是UGC（用户产生内容）单元，用户上传的图片素材平均水平也较高，垂类电商（如Nike）图片品质由编辑控制，质量高且稳定。以上类型产品不以量吸引用户，用户往往更加在意内容本身是否优质。用户没有带着明确的目标，心智更加类似于浏览杂志。产品提供什么内容，就进行浏览。从上方案例可见，除了微信读书之外的3款产品首页都没有突出搜索功能，而是以信息流呈现为主。

与列表分割一致，卡片也有对应分割方式。

大卡片占据屏幕面积大，理论上大卡片的内容质量是经审查的。部分产品不存在大卡片容器的交互，点击卡片直接进入详情页。部分产品通过比较低调的方式向用户收集对于内容的意见。如微信读书长按卡片，可以选择不再显示该卡片内容，产品收集反馈，对于用户喜好的描述可以进一步具象准确。长按不是一个高频手势，用户触发该手势往往是试探性的，代表用户确实对于内容有意见要传达。躺平使用了简约三小点样式的“更多”图标来收纳不常用的收藏和举报操作。

4.2 泳道

何为泳道？顾名思义，常见的滑动手势是上下方向滑动，但有时也会出现横向滑动的情况。一系列对象在一条横向轨道内左右滑动，该类型的形式组合在一起，就好比泳道赛道一般。

可以横向滑动以查看内容的呈现形式，称为“泳道”。泳道可以有多种形式。

停止位置随机：

内容与手势相关度高，比较自由，但停止位置随机，不能保证停下后用户能完美看到当前卡片的所有信息，需要用户微调卡片位置。

停止位置固定：

根据用户滑动速率，模拟物理惯性和摩擦，判断最终展示哪张卡片，并将卡片呈现在屏幕中部，确保卡片上的信息都可以读取。这种交互更加合理，给滑动设置卡点，类似banner效果。

4.3 双列卡片

双列卡片可以看成是大卡片（单列）的另一种表现形式。这种形式更加提高了空间利用率，对于单一信息展示更加克制。平衡了效率和效果，是电商、图片社区、视频等产品类型的首选表现手法。

双列卡片可以细分为两大类：

卡片流（对齐）、瀑布流

卡片对齐：

优点：规整统一，视觉动线清晰，浏览舒适。

缺点：对主图尺寸要求高，确定的比例会对商品展示有一定局限。

瀑布流：

优点：图片尺寸宽容度高，满足一定比值区间即可。保证商品的展示完整度。错落的布局容易形成节奏。

缺点：不容易进行比较，若要进行图片间的对比，比较困难，视觉动线混乱。

两列式的卡片布局需要注意内容层与背景层的区分。

大多数产品的背景层是浅灰色，内容层是白色，色差可以建立区分。部分产品背景层是白色，或者说取消了背景层的概念，那么要建立卡片之间的区分，就需要通过间距或者卡片加底色的方式。

个性化推荐模块对电商产品尤其重要，准确地将用户可能感兴趣的产品推荐出去，可以减少用户的搜索、筛选步骤，提升购买效率和愉悦感，从而提升用户对产品的评价。因此，不断收集用户的喜好相当重要，尽管各种算法已经让产品显得越来越智能，但依旧要给用户留下提建议的入口。

上文介绍了资讯类产品中，用户如何给出对于具体信息的反馈，电商类产品原理也大同小异。

从功能上来说，淘宝、闲鱼、京东，都是通过用户手势（点击图标或长按卡片或两者皆可）来呼出选项，用户通过选择来表达意见，从而使推送更精准。

从视觉上来说，淘宝和闲鱼的反馈形式类似，都是在卡片上添加一个黑色半透明蒙版，将有限的选项竖直码放在卡片上，类似小型模态的概念（但是这里不同于严格的模态视图，没有限定用户必须要做出选择，用户可以直接划走）。而京东的逻辑不同，使用了传统阻断性模态视图的处理方式，将下方卡片用蒙版遮挡，希望用户专注于选择。

从阻断感上说，京东的阻断干是最强的，将用户从原本的浏览行为中提取出来，请用户严肃地做出对于当前商品的反馈。这样收集信息的效率更高。由于选项是盛放在带有指向性的小气泡之上，针对性足够，且延展性好，气泡的高宽都可以调整，而淘宝和闲鱼的处理方式，在极端情况下，如选项超过5项时，所有内容放在卡片之上，空间就很紧凑。

这类操作比较隐晦，可点击按钮很不明显，长按手势也不常用。同样是当用户有明确反馈需求时，才会寻找反馈入口，一般情况下，用户不会注意到。以用户常态下的浏览行为为最优先。

闲鱼的交互做的很细致，蒙版出现采用了水波的形式，用户抱着要吐槽的心态，这种精致有巧思的小动效在一定程度上可以缓和用户的烦躁的心理。

除了电商类产品，部分视频类产品长按卡片也会呼出对应效果。

案例1和案例2，长按卡片，都是出现视频片段的预览。效果类似iOS的3Dtouch，在相册中按压具体照片即可预览。而案例3，点击“更多”图标，呼出操作。然而选项只有1项，不符合逻辑，单一的选项无法构成“选择”，这会让人有点摸不着头脑。

4.4 宫格/网格

如果把界面看作是一张大网格，不同的内容占据着不同位置、不同面积的页面区域。

除了我们已经熟悉的“有序”布置，如从上到下依次排列内容（大卡片），或者从左往右依次排列内容（泳道），还有更加灵活多变的排布方式可供选择。

布局的本质是分配界面面积，用以盛放内容，同时运用面积对比进行突出。除了面积对比的方式外，还有其他方式可以突出关键内容。

Part 5

————————

无容器 & 复合容器

无内容的呈现形式比较简单：内容直接置于背景层之上。减少视觉负担，内容为主，形式为辅。

复合容器是指超过一种的容器形式的组合，如卡片中包含列表、卡片中包含泳道等。

5.1 无容器

5.2 复合容器

Part 6

————————

组合与强调

不同的信息容器组合在一起，搭建一个分工明确的界面。界面中不同的信息需要套用合适的形式去呈现。有层级就有对比，对比越大，层次拉得越开，重点就越突出。

建立对比的策略：

色彩对比、面积对比、样式对比、Z轴高度对比、静态动态对比

文章来源：站酷  作者：doo_W

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

前言——用户体验五要素

AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书，提出了从5个要素自下而上的建设用户体验；从最早这本书针对web端的设计到现在移动互联的app设计，因为其超强的普适性和实战指导性被广为流传为UX设计中经典的项目创建与研究的方法论。

1.1业务诉求产生app功能

2008年，当你宅在宿舍玩游戏，发现已经很晚了，你打开饿了么APP，点了一个蛋炒饭，半个小时后就有人把饭给你送到宿舍。你禁不住说道“Aha，原来在这个APP中可以足不出户就能吃到身边的美食！”

2015年，当你在学校散步，发现有很多辆小黄车，然后下载一个APP就可以将车子骑走，你会禁不住说道“Aha，原来共享单车可以这么便宜就随便骑呀！”

好的产品一定是企业服务能力的体现，要保证每一个产品功能都能落地实施，否则产品只是镜花水月。没有能力去支撑的产品都是耍流氓。因此要基于企业的发展布点规划，每一个我们做出的核心决定，都应该建立在我们确切了解的基础上。

但一个好的软件之初应该去怎么思考未来设计的方向呢？通过5w1h指导我们更加全面的考虑问题并高效解决问题。

What：产品具体形式是什么？做成什么样？

Who：产品为谁设计？目标用户是谁？谁购买，谁使用？数量有多少？

Why：用户为什么要选择我们的产品？除了我们的产品外，他还有哪些选择？产品被替代的可能性大吗？

When：用户什么时候使用我们的产品，多久用一次，会持续多久？

Where：用户在哪里使用我们的产品？

How：用户是怎么使用它的？

1.2用户需求

弗洛伊德认为，如果将人的整个意识比喻成一座冰山的话，那么浮出睡眠的部分属于意识的范围，淹没在水下的那片深不可测的部分属于意识的范围，而链接意识和无意识的那层面属于前意识的状态，这就是著名的“冰山理论”。

无意识设计是深泽直人提出的理论，是指通过有意识的设计实现无意识的行为。无意识并不是真的没有意识，而是人们知道自己需要某些东西，但还没有意识到到底需要什么。

以商场购物流程为例把握整体环节

用户体验顾名思义就是“用户使用产品时的心理感受”。用户体验可能来自产品给用户留下的第一印象，也可能来自用户长期以来感受到的正面或者负面影响。理想的用户体验是用户感到高兴、满足、骄傲甚至是爱上这款产品。

通过问卷调查等方式对用户进行调研，收集用户对产品的反馈，分析用户认为本产品中最有价值的功能点是什么？做了什么关键动作才认识到产品有这个功能点的？收集汇总产品的一些关键功能点之后进行分析，思考产品想要解决用户最大的痛点是什么？产品是如何解决这一痛点的？竞品是如何解决这一痛点的？我们与他们的解决方式有什么不同？如何让用户认识到产品的价值等。

 通过上面用户超市购物逻辑的分析/发现/了解/反思，可以精确的了解到当前电商软件设计中的分类/购物车/购物卷/配送等功能的设计应用的必要性。

战略层中明确了用户需求和产品目标后，范围层就要确定做哪些功能、提供什么内容来实现产品目标。

上图可看同样的购物app首页功能却有着极大的不同，拼多多与京东还是以传统的电商页面为主，而得物（毒）却以一种展示形式呈现出来。为什么得物要以展示性功能进行首页的展示，而京东和拼多多要以商品为主去展示整体功能呢？

在我看来因为面对用户整体的不同，整体功能和展现内容也有不同的展现，如计划需求型的商品有固定的需求或者确定的购物计划才去进行需求型购买。而对于潮牌的用户群体是因为在购物现场见到某种产品或某些营业推广、广告宣传，提示或激起顾客尚未满足的消 费需求，从而引起消费欲望决定购买，其实这是购物现场刺激的结果，是的一种刺激冲动型消费。

 

好的产品设计是顺势而为，而不是重新定义用户体验，更全面地了解用户画像，可以帮助我们作出更有方向，更符合用户需求。

在设计主要的页面的时候需要问自己几个问题，功能导向是否符合产品目标？核心功能板块是否缺失？页面布局是否一致等问题。

通过观察以上的功能但是却又有很大的不同，在拼多多首页的设计以产品为主，而得物app却以用户分享页面为主；拼多多设计风格为一种较为“接地气”的页面，得物app却以一种“高端时尚”的页面。

 

为什么要以这两种风格去设计这两款软件呢，同样是国内大的电商平台，为什么一个风格高端时尚一个“低端混乱”？

模拟用户的行为，当一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感。在以用户画像进行分析，当一个60岁的叔叔，晚上5点准备为一家人去做晚饭之前，去给家人买菜。他是更喜欢去高端的专卖店去买还是去一个脏乱的菜市场去买菜呢？结果显而易见在会更加倾向于市场，因为市场给人最直观的印象就是价格便宜，能以最便宜的价格去买到自己想要的物品。

再进行一个用户画像进行分析，一个00后的潮男，他要为自己买一款好看的球鞋，他的购买路径是什么呢？首先他需要去了解什么样的什么品牌款式的鞋才是最时尚的，其次他会选着一个最专业的品牌专卖店或者大的电商平台去进行购买，因为这样能给他最大的品牌保障。

通过以上这两点才能更加诠释一个产品的设计方向和最佳的用户体验。

4.1更舒服的阅读效率

根据尼尔森F模型，我们可以得出几个心理暗示：

用户快速扫视时，具体的文字并不重要

多用小标题、短句引起阅读者注意

将重要的内容放在最上边

4.2更舒服的操作位置

其实，拇指操作热图最早是由设计师Steven Hoober于2011年的书《Designing Mobile Interface》中使用，其中的绿色部分被他称为“单手握持时拇指触摸最舒适的区域”。这些区域的测量是通过1333份观测分析总结出来的，这些分析数据还表明，49%的用户习惯于单手握持手机，用拇指操控屏幕，而用另外一只手做其他的事情。同样是基于当年的这些报告，还获取了以下信息：

36%的用户会双手环抱手机，用其中一只手的拇指操控屏幕

15%的用户会用双手握持手机并用两手的拇指操控屏幕，其中90%的用户操作时习惯屏幕竖着，而10%的用户偏向于横屏操作。

结合触屏拇指热区和推导模型，将高频操作放在最容易点击位置，降低用户使用成本，提升用户体验。

4.3更短的操作路径

合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们是否能够在最求大小一致、圆角一致、线宽一致、视觉一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？

心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验，当这种需求得到满足时，人们会产生愉悦、喜爱、幸福的情感。延伸到APP设计中，在产品加入情感化设计可以成为用户之间的感情的传递桥梁，增加用户对产品的好感度。情感化设计不是轰轰烈烈，有的时候仅仅是一个icon，一个图片一句话。情感化设计让产品变得有温度，让用户获得愉悦的使用体验，这些简单的细节设计充满了积极的情绪。它满足产品的功能性和易用性的同事追求更高层次的目标。

 

情感化设计在空白页设计中发挥着巨大的作用，他通过设计手段来减轻用户在看到一个毫无内容的页面时产生的挫败感。

  

Tabs是APP设计中最常见的控件之一，它帮助界面进行快速的信息分类导航。在视觉表现形式上，Tabs和标签栏同样也分为选中状态和未选中状态，一个好的Tabs既要有设计感又符合产品特性。在一个APP中有许多的界面，每一个界面又有许多的元素，那些同类的元素应保持统一的设计样式。通常个人中心的人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延展使用。或者独特的产品外观、logo、ip形象，也可以作为视觉符号的一种，延续到其他的界面中。这样这个界面就被统一的设计元素联系起来了，给用户始终如一的一致感，增加了极强的品牌效应。并将这种情感投射到产品，从而提升用户对产品的认同感和忠诚度。

 

 

我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉符号作为Tab选中状态，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。

 

 

作为中国最大线上购物平台之一的天猫，其品牌最显著的特征就是那只大脑袋小身体的黑猫，而它的“猫头”也成为天猫每一次品牌推广的必要元素。其中最受瞩目的就是“猫头”

联合营销海报的设计，已成为天猫与大品牌一起联合营销的传统项目，通过设计创意淋淋尽职地表达出厂商的品牌精神和各自倡导的生活方式。

从品牌图形中提取具有鲜明特征的形状作为设计语言，也是一种设计风格的最好表现。

 

总结

多年设计一直在视觉层面进行设计，近一年的设计发现并不是“美”的设计就是最好的设计。而是最符合用户场景，用户体验的设计才是最佳的视觉设计。

文章来源：站酷     文章作者：大峰_Design

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

文章来源：站酷     作者：罗耀_系列

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

人类一切创造性活动和造物活动都可以称为设计，这是从广义角度去理解设计的定义。从狭义角度理解设计的定义，设计就是构想和解决问题的过程。应以人为本，通过系统化的方法满足消费者的市场需求，进而产生功能价值与审美价值。

除了广义与狭义的设计定义，处在不同时期不同的人站在的角度和立场均不同，产生的观点是各抒己见，各不相同。在国内考研只用采用其中一种定义就可以了，但知识是要去学习和理解的，这里我研读了近100本书籍，把所有关于设计的定义都整理出来供大家学习与参考。

 

设计的定义1-5

-

 

 

 

设计的定义

彼得·劳伦斯（美国设计学会创始人）：设计是一种手段，通过这种手段可以提高生活质量，并能有效的满足人类的需求

王受之教授：设计是把计划、规划、设想、解决问题的方式，通过视觉化的形式传达出来的过程

《大不列颠百科词典》（1786年 / 工业革命前）：设计指的是立体、色彩、结构、轮廓、线条、形状、比例、动态和审美方面的协调

 

《大不列颠百科词典》（1976年 / 工业革命后）：设计常指拟定计划的过程，又特指记在心中或者制作成草图的具体计划

6:19 STUDIO - slava balbek / Nata Kurylenko

 

《简明不列颠百科全书》（1985年 / 中美编译）：Design包含两个层面，第一个层面指“心理上的计划”，即计划的思考与拟定计划的过程；第二个层面指“艺术计划”，即把计划中的想法制成草图的具体计划。

 

《韦伯斯特大辞典》（名词方面）：针对某一目的在脑中形成的规划；根据对象预先所作出的模型；文学、戏剧作品的轮廓；音乐作品的框架；视觉艺术作品的线条、细节、外观等方面的相互关系

 

《韦伯斯特大辞典》（动词方面）：头脑中的想象与计划；策划；创造功能；为了达到目的而进行的创造、规划和计算；用商标、符号表达；对物象的描绘；零部件的形状与配置

 

《牛津英文词典》（1588年）：设计是由人所设想一种计划，或是为了实现某物而做的纲要

6:19 STUDIO - slava balbek / Nata Kurylenko

《授予博士硕士学位和培养研究生的学科专业简介》（1999年）：设计是一门多学科交叉的、实用性的艺术科学，其内涵是按照文化艺术与科学技术相结合的规律，创造人类生活的物质产品和精神产品的一门科学

 

柳冠中教授《工业设计学概论》：设计应该被认为是一种方法论，应提高‘一切人为事物’的角度来认识

 

李砚祖教授：设计是人类改变原有事物，使其变化、增益、更新、发展的创造性活动，设计是构想和解决问题的过程，它涉及人类一切有目的的价值创造活动

 

尹定邦教授：设计其实就是人类把自己的意志加在自然界之上，用以创造人类文明的一种广泛的活动，设计是一种文明

6:19 STUDIO - slava balbek / Nata Kurylenko

  

我国《高级汉语大词典》：按照任务的目的和要求，预先设定好工作方案和计划，绘制出为解决这个问题而设计的图案

 

我国综合字典《辞海》：设计指“按照任务的目的和要求，预先定出工作方案和计划，绘出图样，为解决这个问题而专门设计的图案”

 

赫伯特·西蒙在《人工科学》书中的一段话：凡是以现存情形改变成向往情形，为目标而构思行动方案的人都是在搞设计

6:19 STUDIO - slava balbek / Nata Kurylenko  

阿切尔：设计是围绕目标的问题求解的活动

 

路甬祥：设计是在一定的约束条件下，最合理的满足社会的需求

佩齐：设计是从客观现实向未来可能富有想象力的跨越

6:19 STUDIO - slava balbek / Nata Kurylenko

 

保克：设计是获得足够把握前，对未来产品尽可能多地模仿

 

乔尼斯：设计是表达一种精粹信念的活动

 

里斯维克：设计是从无到有的创造，创造新的、有用的事物

 

 

考研知识

国内的知识大多数采用国内教育工作者对设计的定义，例如我们在网上查关于设计的定义，一般都会出现相同的搜索结果，也就是《现代汉语词典》对设计的定义，即“在正式做某件工作之前，根据一定目的的要求，预先制定方法、图样等。

6:19 STUDIO - slava balbek / Nata Kurylenko

 

另外考研的知识点还有设计的核心内容知识，包括以下三个阶段；

第一阶段 计划，构思的形成

第二阶段 将计划、构思、设想、解决问题的方式利用视觉化的传达方式表现出来，如图纸、制作效果图、模型等

第三阶段 将设计的方案实施完成    

 

 

 

附加知识

以上指的设计的定义是不包含工程设计的，工程设计主要解决人造物（机械、设备、交通工具、建筑等等）中的物与物之间的关系，包括产品的内部功能、结构、传动原理、组装条件等。

工程设计主要是研究和实施建筑、城市、景观设计与工业产品（建筑属于工业）、造型设计、功能性设计、结构设计、可靠性设计、生产工艺设计、生产系统集成设计等的工程技术领域，工程设计更注重产品的实施与落地。

6:19 STUDIO - slava balbek / Nata Kurylenko

工业设计就是对工业产品的使用方式、人机关系、外观造型等做设计和定义的过程。他将产品的功能通过有型的方式创造性的体现，使得工业产品和人的适当的、的，甚至有情感的交流得以实现。是一种产品与人沟通的语言，是工业产品和人之间的重要纽带，是用户体验的决定性组成部分。

文章中提到的设计是解决物与物关系的同时，更侧重于解决物与人的关系问题，考虑产品对人的生理、心理的作用。因此设计是包含艺术审美同时又有科学技术的人文科学、社会科学相结合的艺术。

文章来源：站酷     作者：罗耀_系列

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