布局，源自 Go 术语。 由于中国语言和文化的博大精深，这个词充满了各种形而上学，以至于很多时候，不得不用更精确的英语来解释。

布局翻译成英文如下：

布局侧重于性能水平，甚至是 UI 视觉效果的最终草案。 这个过程也可以称为Layout；

分布注重逻辑分布，逐步划分为多个完全无意识的区域；

隔断注重空间分配，如室内装修设计中的生活隔断；

问题中的“布局”暂且理解为：界面设计中如何划分区域、放置组件。

当谈到布局时，还涉及到另外两个词：网格和图案。

问题中的“布局”应该更准确地翻译为Grids Layout

在谷歌上搜索网格布局会给你很多线索！

为了准确回答这个问题，Hozin 将避免回答两个问题：

1. 如何确定界面应包含哪些内容

2、如何选择交互框架以及各种交互框架的优缺点

下面提供一些布局的具体学习资料

1、Web端布局、标准屏幕、屏幕复杂度

Hozin写了一篇文章《页面线框教程（第2部分）：将地面画成监狱的框架设计》

（页面线框图教程（二）：以地为牢的框架设计 | HoZiN | 产品思维_信息架构_交互设计）

2. 网络中的“领域”

Web界面可以向下无线扩展。 高度不重要，宽度很重要！

因此，Web Grids会根据宽度分为列，通常是两列、三列、四列； 五根及以上的柱子非常罕见。

为了适应公列除法，Grids系统的n值通常选择一些公约数，如12、16、20

2011年，国外有人将892个领域的分配全部列出来。 请参阅回复地图（很快也会发布 PDF）或下面的地址。

链接：（划分 3 x 4 网格的 892 种独特方法）

如果不是 WaterFall，水平列之间的分布通常是有节奏的，例如 342 或 3234。

3. 基于Web的实现

不懂CSS的设计师不是真正的网页设计师。 如果你在Google上搜索CSS Grids，将会有很多线索。

例如下面的代码示例

（网格示例 - CSS 网格布局的使用示例）

4、布局与模式的关系

两者之间没有直接关系，但有很强的相关性。 许多常见的模式本身（尤其是框架）就是一种布局。

5.响应式布局

提供一个专门收集响应式网站的地方。 有很多例子。 请你自己总结一下。

链接：（媒体查询）

6、移动APP几乎不存在布局问题

屏幕空间比较小，各种模式已经成熟并使用，几乎不存在【布局】问题。 左右柱和瀑布流在移动端会非常惨烈。

仅仅因为没有布局问题并不意味着没有使用Grids系统。

例如8pt网格，链接：（了解8pt网格系统，快速统一完成界面布局）

7、学习书籍：以图形构图、版式设计为主

无论你是交互设计师还是视觉设计师，强烈建议阅读有关印刷和排版的书籍。 霍津有很多书，我只拍了他随身携带的那本的照片，供大家看。

一种常见的设计技术是“对角线”。 请看下图。

我推荐Book#14《秩序之美》，里面介绍了Grids Layout的具体用法。

问题9：标签和分类相同吗？ 什么场景应该使用分类，什么场景应该使用标签？

霍津的回答：

关于知乎标签和分类的问题：

链接：分类和标签有什么区别和联系？

链接：知乎提问中的“主题”和“标签”有什么区别？

Hozin 的回答：分类就像姓氏，标签就像衣服。 赠送另一个东西“团体”

分类和姓氏一样，每个人都有一个独特的，如图

标签和衣服一样。 大家可以多戴，每天换，如图

分类是与约束强关联的； 标签是没有约束的弱关联。

分类是一层一层的树形结构； 标签是一种非层次的网络结构。

强相关性和弱相关性可以共存，并不矛盾。

类别几乎没有可扩展性，没有人会单独使用类别。

您可以随时向类别添加标签！ 标签也可以随时添加到类别中！

总而言之，强烈推荐使用标签！ ！ ！ 因为分类能做到的事情，标签也能做到！ ！

标签有一个变体，就是group，是使用【关系表】实现的，也比较常用。

问题10：如何理解网站交互设计模式书中提到的“上下文”？

霍津的回答：

这个答案只在小圈子内交流，因为可能存在一些学术争议。

学者们，在北美硅谷淘金热里读书的孩子，读完这份答卷后可能会懂一些外语，但他们真的不想争论。

《网站交互设计模式》一书中提到的“上下文”，英文称为Context。

以下四个词在交互设计领域很容易混淆，因为它们都可以翻译为【场景】

场景/场景 情况 故事背景

为了相对严谨地回答这个问题，Hozin 搜索了一些有趣的文章片段。

这些英文段落都是UX领域的文章，这四个词在文章中同时出现。

关联：（）

链接：场景|

链接：使用场景| 用户体验思考 (/2)

尤其是文档中的以下段落

在这个场景中，上下文不仅仅是交互场景的舞台。 它是交互本身的一部分（Pederson2006）。 杂志。

好吧，我们来看看Hozin对这四种【场景】的理解

场景/场景来源于戏剧，通过想象来创造或还原。 有些假设（假设），或者现实的想象场景，应该翻译为【情景】更准确。

Situation强调真实存在和客观事实，应译为【真实场景】

故事注重叙述的连贯性，必须有人物； Story相当于开发领域的业务用例，应该翻译为【用户场景】，或者干脆翻译为【用例】

上下文侧重于本地实施。 具体来说，交互设计就是内容与内容之间的关系、界面与界面之间的关系、形式与形式之间的关系。 应该翻译为【使用场景】或者【上下文】

好吧~~~最后，从实际角度来说，只要遇到这四个字，或者遇到【语境】，没必要特别去研究，都理解为中文【场景】即可（除非你在写论文和实践知识）

我想提醒大家的是，大多数用中文“场景”来写交互设计、用户体验、服务体验、产品设计的文章和书籍都是“时尚”的，可以作为娱乐阅读。 别太认真了。

问题11：在设计产品的过程中，要把握哪些关键点，才能让整个产品有一致的交互体验或者交互方式？ 比如iOS和Android，比如网页和移动？

霍津的回答：

一致性在交互设计中非常重要！ 为了保持交互的一致性，有两个武器：原则和标准； 规范有两个层次：指南和规范。

四者之间的关系如【图01】所示，下面是分解的例子。

一、原则

设计中应该遵循一些指导性的东西。 整个产品（无论有多少个终端或子产品）都必须遵循这一点。

例如：一个界面完成一项任务； 超过10项的表格必须分为步骤； 用户必须能够随时返回主界面……这些原则可以以不同的形式实现，但必须遵循。

2.标准

具体是指南和规格的集合，所以请继续参考下面

3.指南

描绘特定的交互模式、颜色组合和设计禁忌。 在这一层面上，一个【结构】可以有多个【形状】，但某个形状只能有一个【结构】，以达到相同的位置、相同的外观、相同的操作。 指南可以让每个终端（IOS和Android）看起来很熟悉，让用户更容易学习和养成习惯。

例如：面包屑必须包含在详细信息界面中，而不需要左侧导航； 面包屑只能出现在 PC 浏览器中，不允许出现在响应式 Web 界面中。

IOS和Android的官方Guidelines是这样的，但是也可以根据情况制定私人的Guidelines，也就是每个公司自己的设计指南。

4.规格

规格非常具体，将每种模式的每种形式的确切尺寸、颜色和响应都计算到数值。

例如：一级标题，字体大小为宋体18pt； 行高为30pt； 该行的顶部和底部边距均为 5pt； 颜色值为#CC9300。

您可能知道 iOS 和 Android 的指南，但这只是外部版本。 你一定相信，在实际设计IOS系统界面和苹果官网时，苹果内部有一个极其严格的Spec，而对外公布的所谓Guidelines只是整个严格Spec的阉割版，是一个供开发者参考。

Spec的含义是保证某个终端的某个版本的内部交互设计在数值层面上是一致的。 事实上，它是精确到代码和材料级别的设计规范。

上面，当你看到一份设计规范时，你要明白，那些精确到数值和代码的都属于Spec范畴； 那些只给出一些框架、搭配建议和禁忌的只是指南。

附资源《如何建立一套UI设计规范？》 》

链接：如何建立一套UI设计规范？

问题12：为什么知乎支付时不允许跨账户支付？ 跨账户支付有哪些风险？

霍津的回答：

为了防止洗钱和金融安全，银监会出台了一系列在线支付规定，因此支付相关功能非常典型的专业产品线：皮肤科医生治不了心脏病！ 支付产品的核心是合规性。 有些功能实现起来很简单，但金融政策却有限制。 这就是为什么支付牌照要花费数亿美元的原因。

作为支付产品的非专业人士，我专门咨询了一大圈专门做支付的朋友。 首先我得出一个结论：【好友支付】功能不涉及支付【合规】问题； 理论上，知乎可以开发相关功能。 的。

为什么知乎暂时不提供【好友付费】？基于以下原因

1.账户操作支持及安全考虑

最早一批知乎用户是使用邮箱注册的，即大量的知乎用户可能不是实名用户； 如果A账户被盗，有人冒充好友邀请B账户帮忙支付，就可能出现这种风险，而且很难追查。 。 具有【好友代付】功能的产品会有一个限制：当用户发起邀请他人代付时，还必须开通支付方式并绑定银行卡（这样可以保证好友代付）发起人也是实名）

2.场景问题，金额太小

好友之间的支付需要一定的场景支持，核心可能就是支付限额。 与购物平台不同，知乎上的支付几乎都是小金额，从几元到几十元不等。 对于这么小的金额，朋友的付款需求很弱； 同样，微信红包上限为200元。 也不会有让朋友代发红包的功能。

3.核心转换阶段

功能的推出必须有运营数据的支持。 参与支付的用户比例和日线上成交额还没有达到一定水平。 这个时候让朋友代付就没有意义了。

问题13：目标阅读用户是开发者。 如何写出一份好的交互文档？

霍津的回答：

《如何写一个简单易懂的交互文档》知乎的几个回答靠谱

链接：如何写一份易懂的交互式文档？

如果前端开发也算开发的话，那么Hozin就曾经是一名开发者。

程序员几乎不看文档、不爱看、懒得看！ 作为用户，您在知乎或微信注册时，会查看《用户注册协议》的内容吗？

既然程序员不喜欢看文档，那么他们如何获取需求呢？

1.他们喜欢看到最终的效果，即UI视觉设计，或者静态HTML（他们也不喜欢看到原型）

2、希望面对面沟通需求，而不是【浪费时间看文档】

开发团队的工作场景如下：

程序员A对需求不太确定，转头问【老大】：这部分文档是需要硬编码还是可以配置？ [老大解答]：可以单独配置。

因此，在一个开发团队中，可能只有一名工程师仔细阅读过文档，其他工程师通过他的听写来审查需求。

既然程序员不读文档，那么文档还有什么意义呢？

1.该文档主要是为测试人员编写的。 他们需要通过文档编写测试用例，以确保实现的功能与文档要求相同。

2.文档是设计者和开发者之间的工作协议。 这是一份责任备忘录。 越详细越好。

3.当然，视觉设计师和动效设计师也会基于文档进行合作。

文档只是需求沟通的一部分。 除了文档之外，亲自理清需求、解答开发者的疑问才是关键核心。 一份文件【三点写，七点解释】； 解释能力是设计师必备的技能。

针对知乎上的回答，如果交互设计文档是专门为开发者编写的，Hozin补充了三点：

1. 不要做任何动画效果、动态面板或类似的东西。

程序员不喜欢探索你的动画。 请拉平链接路径，触发什么动作，然后转到其他界面。

2. 尝试使用表格而不是段落。

比如，如果用文字来描述权限分配、各种状态切换，几百个字是无法解释清楚的； 如果用表格，三五行就可以解决，一目了然。

3.如果你也了解R&D，直接给出术语和数据结构

使用程序员熟悉的语言，他们会更愿意接受！ 如果可能的话，列出表格中每一项（包括隐藏项）的数据字典、格式、限制值、验证规则、错误提示等； 最好能提供一个UML参考。

程序员和产品设计师是幸福的敌人，就像一对需要更多时间相处的情侣，而不仅仅是一份没有法律漏洞的协议。

问题14：如何提高挖掘业务需求的能力？ 如何梳理业务对信息架构的需求？

背景：今天我在美团吃饭时，听到餐厅老板抱怨。 它很有意思！ 老板说，顾客都来我店里买东西，但如果用美团来买东西，我不仅拿的钱少，最后还得给美团佣金。 然后他指导我用微信把我的私人账号转给他！ 有人说，今年的热点是新零售。 便利峰、盒马鲜生、京东等公司也正在实施开设500万家便利店的计划。 由此，他们怀疑这是否真的是一个机会。

霍津的回答：

简单几句，聊聊生意。

经过20年的发展，中国互联网已逐渐从新兴产业转变为传统产业。 这种转变的标志就是行业寡头的出现。

从事互联网行业，目前最经典的职业道路是：211院校毕业，去BAT，从实习生一路晋升为经理、总监。 五年内你就可以找到投资并开始自己的事业。

越来越多的公司在B轮失败，或者发展了规模，却发现商业模式存在巨大漏洞。

BeepBeep说了这么多，都是为了回答“如何提升业务需求能力”的问题。

从他自己的经历来看，Hozin 进入职场的前四年与互联网无关； 一份工作在金融中介行业，一份工作在汽车零售行业，都是“商业策划”职位。

从扫楼求助，到客户主动联系我续约； 从心怀恐惧地拿着支票，到坐公交车回公司用客户的几千万本票结账； 从绕车六个方向跌跌撞撞、被客户鄙视，到去CSI考核年轻专家，独立实施国际车展展台方案……非常感谢这4年的传统行业经历！ 协助策划国际活动，见证百亿项目谈判签约，有机会管理五家4S店的店面布局，每周为报纸撰写软文，编辑内部刊物，帮助老板经营汽车俱乐部，并参与了一家3000平米餐厅的全程开发品牌包装、菜品设计、亲自担任司仪、主持开业……与一大批传统行业的前辈保持着良师益友的关系……这一切似乎都是“懂生意”的理由。

因此，说到“懂业务”，最重要的是“脚踏实地”。 不要试图坐在办公室里沉思业务，也不要指望通过阅读几个公众号和知乎文章来了解业务。 请张开双腿行走。 走进广阔的商业，扮演战士的角色，了解商业的核心。

对于被定义为成功人士用车的豪华车来说，大多数买家都是刚刚把土地卖给开发商的郊区农民。 这就是真实的情况。 如果你不亲自体验，你将不知道如何开始。

什么是商业？ 这是商业、供给和需求。 如果供大于求，买家就是爷爷；如果供大于求，买家就是爷爷。 如果供应超过需求，买家就是孙子。 只要你知道利润是怎么来的，盈亏平衡点是多少，你就懂生意了。

如果非要坚持“不接地气”，还有办法。 科特勒的《营销学》系列专着已经迭代了十多个版本。 看完你就知道，大家热捧的所谓新经济、所谓新商业模式，与此无关。 逃离 20 世纪 70 年代资本主义确立的基本原则，你就不会为让人群兴奋的除夕演讲而感叹。

顺便说一句，当公众已经感受到这种趋势时，这种趋势在资本方面就已经过时了。 一般这个周期是半年。 也就是说，半年前资本追求的模式，就是你今天看到的趋势。 一批生鲜被扔掉了，大家还在尝试、犯错。

问题15：国内外有没有更好的互动APP推荐？

如果你问一般的交互设计师，他们几乎肯定会给你一堆链接和APP产品。 当然这是他们的积累，是他们的财富。 视野确实非常重要。 追逐最新的交互形式、尖端的技术、时尚的设计将愉悦心灵。

然而，接受培训后，面对真正的项目，你可能会无从下手。

研究必须专业、深入。 没有深度，只有广度。 这永远是肤浅的、粗心的，失去了本质。

有一家公司的产品hozin，已经研究了很多年了。 它的每一个版本迭代都让人耳目一新。 没有华丽的动画。 这个产品的交互设计师只是做了他们应该做的事情，以提高这个产品的转化率和增长。 它一度超越了Facebook和Twitter。

这是链接://

Web端、响应式、APP版、iPad版，一气呵成，漂亮又漂亮，简单又惊艳，甚至每一个像素、每一个按钮、每一个变化、每一行前端代码都值得深思。

如果你能系统地跟踪每一个微小的修改和变化，理解其中的原理，并坚持几年，你会学到很多东西。

你可以搜索“2017年UI设计趋势”，再搜索“2007年网页设计趋势”，你会发现这些所谓的专业文章除了收智商税之外对你没有任何帮助。

坚持长期跟踪一两个目标产品是加深技能的唯一途径。

问问自己为什么要这样设计？ 为什么要放弃之前版本的形式呢？ 它如何帮助提高转化率？ 为什么几个月后又变回原来的样子？ UI交互为何能适应功能扩展？ 坚持几年并研究它。

问题16：如果你想做一款在盲人拐杖上增加危险预测功能和专用APP的产品，你应该如何解释这个产品中金字塔原理的运用？ ”

霍津的回答：

提问者提出的问题可以利用金字塔原理进行验证。 这是一个伪命题，因此无法直接回答。

在介绍第 01 本书《金字塔原理》时，Hozin 表示：

“金字塔原理”是思考问题的逻辑；

它是一种组织你的思维的方式；

它是帮助你高效书写、表达想法的利器；

这也是一本关于信息架构的基础书籍。

参考书中提到的纵向关系

参考书里提到的横向关系（演绎推理）

Hozin 花了 20 分钟利用金字塔原理进行推理，参见

盲杖本身就含有危险预测功能，不需要重复添加。

建议您仔细阅读《金字塔原理》，学会准确提问，这样才能得到有效答案。 好了，现在你知道这本书有多重要了吗？ 如果不能严谨地提出问题，就无法得到正确的答案，对双方来说都是浪费时间。

附言。 感谢小泉的匿名提问功能。

问题18：概念设计与信息架构有何关系？

霍津的回答：

一个具体的例子：

图#01概念设计草图【性能】

图#02完整概念设计【性能】

图#03 基于【演出】概念设计的信息架构（属于【票务部分】）

（以上为Hozin于2009年设计并首次呈现）

请先阅读：

《从概念设计到信息架构》2009

链接：从概念设计到信息架构| 霍兹恩 | 产品思维_信息架构_交互设计

从概念设计到信息架构| 霍兹恩 | 产品思维_信息架构_交互设计

那么请阅读：

《如何理解产品设计中的概念设计和功能规划？》2013

链接：如何理解产品设计中的概念设计和功能规划？ | 霍兹恩 | 产品思维_信息架构_交互设计

如何理解产品设计中的概念设计和功能规划？ | 霍兹恩 | 产品思维_信息架构_交互设计

还是不明白？

那么请你自己动手，设计一个概念，然后发出来，Hozin会给你一些更具体的建议。

大家一定要清楚，如果光看资料就能掌握一门技能，那所谓的“工匠精神”确实没有存在的必要。

问题19：我最近想跳槽到金融行业，成为一名金融行业的交互设计师。 我应该注意什么？

怎样才能算是金融行业一名优秀的交互设计师呢？

霍津的回答：

纠正一个错误的概念（抱歉，这里必须用“纠正”这个词）

交互设计是通用技能，不存在【金融行业交互设计】这样的东西。

作为非专业人士，Hozin 分析（抱怨）金融产品并提供设计建议。

1. 金融业的简单性

金融业复杂吗？ 不复杂！ 这是一个【靠钱赚钱】的行业； 农业提供粮食和各种原材料，工业提供原材料和消费品； 金融是服务业。 有了钱，我可以自己繁衍吗？ 不不不，金钱需要加上【时间】才能【产生金钱】。

储蓄、信贷、保险、抵押贷款——所有金融业务都有三个关键点：

A.在某一时刻，资金流入

B、稍等片刻

C.在某个时刻，钱出去

整个产品的核心就是这三件事！

金融可以用一句话来概括：一进一出，时间赚钱

2. 金融业的壁垒

用术语来迷惑普通人，故意制造误解，建立不对等的数学认知，其实是可以不劳而获的！ 于是，公元前2000年，金融业诞生了。

金融业是一个吸血鬼。 让大众误以为10%升值和10%贬值是等价的绝对值（11/10=10/9？）……欢迎大家谷歌“金融幻觉”一词。

金融行业的障碍是理解这些术语，比如现金价值、市盈率、对冲……

3. 交互设计师在金融行业能做什么？

敢于消除幻想吗？ APP里的年化收益你不敢提（实际理财只持续三个月）？ 那些保险条款你敢让人家看懂吗？

我可以输入金额，然后根据条款立即输出当时的福利金额吗？ 用户必须自己计算吗？ 有必要神秘吗？

如果你敢于消除财务幻想，那么你就很伟大。

如果你不敢的话，霍津就收回他之前说的话。 或许真的有一种叫做【金融行业交互设计】的技能，可以帮助基金主维持金融幻想，利用术语障碍不劳而获。

问题20：为什么微信加好友前不能聊天，而QQ加好友前可以聊天？

霍津的回答：

重点关注一下，这是社交产品中的一个【临时会话】问题。

微信上没有临时会话吗？ 其实它是存在的！

场景是这样的：

比如，疯子A拿到某个女孩的微信ID，就可以申请好友。

然而妹子设置了，需要验证才能添加好友！

于是疯子A就输入了验证句：姐姐你好。

此时女孩有一些选择：通过？ 忽视？ 另一种选择是[回复]