大家好，我是讯享网，很高兴认识大家。



讯享网

《产品炊事班的小账本》2017年4月刊

何时应该使用模态？模态和阻断有什么区别？

Hozin的回答：

模态对话框(Modal DialogueBox) ，阻断(Blocking），都有明确的解释，欢迎自己搜索，为了理解这两个词儿，大家一起来练习个绕口令。

模态=管制刀具；

阻断=杀人凶器；

模态不一定是阻断的（可以是非阻断的强制提醒）；

杀人凶器可以是管制刀具；

阻断可以由模态来完成；

阻断不一定是模态（非模态、强制跳转也可以）；

如图，看了多数app 这种表单内容文字都是靠右侧，可是为什么我感觉靠左侧更快捷阅读呢？ 

Hozin的回答：

Hozin的回答：

1.理解信息架构，看清楚交互的本质

资深交互设计师与普通交互设计师的差别是什么？ 

从【前端开发岗位】转成【交互设计岗位】难不难？

Hozin的回答：

1.交互设计师的定位尴尬

大量院校设置的交互设计专业本质上都是HCI，而不是Interaction。

2.市场需求量

前端开发人员正确的职业转型是这样的：

1.轻松的把Web端交互技能掌握，在从事前端工作同时，多进行设计实践

2.转型Web端（后端）基础产品职位，学习产品设计工作技能（业务分析为主）

3.面向供应链、进销存、BI等偏后台方向，成为优秀的产品经理

全栈前端工程师也可直接转型技术管理类职位。

我15年本科毕业，最近收到了代尔夫特交互设计研究生的offer，却非常纠结。之前我对工作不满意，于是辞职申了国外的研究生。申请完后马上找了新工作。很喜欢目前的工作，作为交互设计师还能做用研、产品的工作，还有好些厉害的前辈指导。我觉得这个工作能够让我实现「成为产品设计师」的目标。如果放弃它，付出很高的时间、金钱、职业发展成本去留学，收获的知识，不说全部，起码大部分在国内工作也能学到吧？留学是否值得？而出国，我觉得可能会更快地提升思维和视野。而且之前也是花了挺大精力准备，一旦放弃日后就不太可能再去了。想问下交互老法师怎么看，留学还是工作？

Hozin的回答：

1.明确区分IxD和HCI

2.关于代尔夫特

3.IxD学院派

前几天刚看了国内某著名IxD领域教授公布的教学大纲，出现“因特网电子商务”等落伍的字眼；

欧洲的设计专业和北美区别比较大！

4.绕不过去的实践

教育心理学当中，布鲁姆教育目标分为6类：知道、领会、应用、分析、综合、评价；

根据这个理论，设计类专业几乎一定要通过实践赋能，只看书，只听课，木有卵用；

5.出国深造，还是留在国内野生？

5.为什么一定学这个专业？

现在无论是web还是移动端交互组件已经很成熟了，作为交互设计师要怎么证明自己的价值呢，今后要提升的能力是什么呢？

Hozin的回答：

交互设计师的价值

1.让【常识】真的普及

至少跑通流程和易用性

2.梳理和维护私有规范和标准

规范和标准是关乎成本的大事情

3.合理创新

组件成熟不等于无法创新，只是创新难了

交互设计师需要提升的是对信息架构的认知和使用

比如【同形异构】和【同构异形】问题

交互设计中的「同形异构」与「同构异形」

高阶的交互设计人员已经开始转向信息架构师，马上就来到。

之前也听过一些言论说以后UI和交互都会像产品设计师的职位转型，请问产品设计师是什么职位？具体做什么呢？产品经理+设计师么？

Hozin的回答：

很多新人以为刚毕业就可以做【经理】了，高高大上啊，别做梦了！好伐~~

Hozin的回答：

布局，翻译成英文有如下：

Layout偏重表现层面，甚至UI视觉最终的完稿，这个过程也可以叫Layout；

问题当中的“布局”姑且理解为：界面设计中如何划分区域和摆放组件。

为了精确的回答这个问题，Hozin会避免回答两个问题：

1.如何确定一个界面应该有什么内容

2.如何选定交互框架，各种交互框架的利弊

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

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

Hozin写过一篇文章《页面线框图教程（之二）：画地为牢的框架设计》

2.Web当中的“栏位”

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

因此Web Grids会按照宽度分纵栏，通常会有两栏、三栏、四栏；五栏及以上很罕见。

2011年国外已经有人把892种栏位分配都列全了，请看回复贴图（还有个PDF一会贴出来）或者下面的地址

链接：(The 892 unique ways to partition a 3 x 4 grid)

如果不是瀑布流WaterFall,通常横栏之间的分配是有韵律的比如342或者3234

3.基于Web实现

比如下面这些代码例子

(Grid by Example - Usage examples of CSS Grid Layout)

4.布局与模式的关系

5.响应式布局

给出一个专门搜集响应式网站的地方，很多案例，请自己总结

链接： (Media Queries)

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

屏幕空间比较小，各种模式已经成熟惯用，几乎不存在【布局】问题。左右分栏和瀑布流，在移动端都会很悲剧。

比如8pt栅格，链接： (了解8pt栅格系统，快速而统一地完成界面布局)

7.学习书籍：主要是基于平面构成和版式设计

推荐Book#14《秩序之美》这本书，介绍了Grids Layout的具体用法

Hozin的回答：

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

链接：分类和标签有什么区别和关联?

链接：知乎问题的「话题」和「标签」有什么不同？ 

Hozin的答案：分类如姓，标签如衣。再赠送另外一个东西“群组”

标签和衣服一样，每个人可以穿很多，并且天天换，如图

强关联和弱关联可以混搭共存，并不矛盾如

分类几乎没有扩展性，大家都不会单独使用分类。

分类是随时可以添加标签的哦！标签也是可以随时添加分类的哦！

总之，强烈建议使用标签！！！因为分类能做的事情，标签也能做！！

有一种标签的变体，就是群组，用【关系表】实现，也是经常用的。

Hozin的回答：

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

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

链接：（english.stackexchange.com）

链接：Using Scenarios | UX think（uxthink.wordpress.com/2）

特别是下面这句文献当中的段落

In this scenario the context is not only thestage for the interaction scene. it is part of the interaction itself (Pederson2006). JOURNALOFIA.

好，下面来Hozin对这四个【场景】的理解

Scene/Scenario来源于戏剧，是通过想象创造或还原出来的。一些设想（假设)，或者架空现实的场面，应该翻译为【情景】比较准确。

Situation偏重强调真实存在、客观事实，应翻译为【真实场景】

Story偏重叙事连贯性，并且一定有人物的存在；Story在开发领域等同于业务用例，应翻译为【用户场景】，或者干脆翻译成【用例】

Context偏重于局部实现，具体到交互设计就是内容与内容的关系，界面与界面的关系，表单与表单的关系，应翻译为【使用场景】或者【上下文】

好~最后，从实战的角度出发，只要你遇到这四个单词，或者遇到【上下文】，不需要特别的去研究，把它们统统理解成中文的【场景】就好啦（除非你是写论文，做学问）

提醒大家，凡是用中文【场景】写交互设计、用户体验、服务体验、产品设计的文章和书籍，绝大部份都是在【赶时髦】，可以当成读物看个消遣，不要太当真哦。

Hozin的回答：

一致性，在交互设计中非常重要！保持交互一致性，有两个武器：原则Principles和规范Standards；规范又有两个层面：指南Guidelines和规格Specifications

四者的关系如[图01]所示，下面分解举例。

1.原则Principles

2.规范Standards

3.指南Guidelines

圈定具体的交互模式、色彩搭配和设计禁忌。在这个层面，一个[构]可以有多个[形]，但某个形只能有一个[构]，达到相同位置、相同外观、相同操作。通过指南能够让各个端（IOS和安卓）看起来似曾相识，便于用户学习和养成习惯。

举例：在没有左侧导航的详情界面，必须包含面包屑；面包屑只能出现在PC浏览器端，不允许出现在响应式web界面中。

IOS和安卓的官方Guidelines就是这样的东西，但也可视情况制定私有的指南，也就是各个公司自己的设计指南。

4.规格Specifications

举例：一级标题，字号为宋体 18pt；行高30pt；行上下外距为5pt；色值为#CC9300。

你或许知道IOS和安卓的Guidelines，但那只是一个对外的版本。你必须相信，在真正设计IOS系统界面、苹果官方网站的时候，存在一个苹果公司内部的极其严格的Spec，而对外公布的所谓Guidelines只是整个严格Spec的**版本，给予开发者的参考罢了。

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

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

Hozin的回答：

1.账号运营支撑和安全考虑

2.场景问题，金额太小

3.核心转化阶段

Hozin的回答：

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

如果前端开发也算开发，那么Hozin也曾经是一个开发人员。

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

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

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

开发小组工作的场景是这样的：

既然程序员不看文档，那么文档的意义何在呢？

1.文档主要是写给测试人员，他们要通过文档写测试用例，保证实现的功能和文档需求一样

文档只是需求沟通的一部分，文档之外当面澄清需求，解答开发人员的疑问才是关键核心，一份文档【三分写，七分讲】；讲解能力是设计师必备的技能。

针对知乎上的答案，如果交互设计文档是专门写给开发人员的，Hozin补充三点：

1.不要做什么动效啊，动态面板之类的东西

2.尽量用表格描述，别写段落

3.如果你也懂研发，直接给术语和数据结构

码农和产品设计人员，是一对欢喜冤家，好像夫妻之间，需要多磨合，而不仅是一纸没有法律漏洞的协议。

1. 如何提升挖掘商业需求的能力？ 
2. 商业需求到信息架构这一步，如何去梳理？

背景：今天在吃饭用美团付款的时候，听到餐厅老板的抱怨，很有意思！老板说，顾客都来我店里消费了，但顾客用美团消费，我不仅得到的钱少了，最后还得给美团提成。然后引导我用微信转私帐给他！有人说，今年的风口是新零售，像便利峰、盒马鲜生、京东也实施开500万便利店的计划；由此想到这是不是真的是一个机遇。

Hozin的回答：

如果你问普通交互设计师，他们几乎一定会给你一大堆的链接和APP产品。当然这是他们的积累，也是他们是财富。眼界的确非常重要，追逐最新的交互形式，前沿的科技，逼格满满的设计，会让灵魂得到愉悦。

研究一定要有专深，没有深度，只有广度，这样永远是浮皮潦草，不得要义。

有一个公司的产品hozin研究多年，它的每一次版本迭代都让人耳目一新，没有什么浮华的动效，这个产品的交互设计师们只是做了该做的事情，让这个产品的转化率和增长一度超越脸书和推特。

它就是链接：/houzz.com/

web端，响应式，APP，iPad版本，一气呵成的外秀慧中，朴实惊艳，甚至每一个像素每一个按钮，每一种变化，每一行前端代码都值得玩味。

Hozin的回答：

在介绍Book#01《金字塔原理》时，Hozin表达过：

《金字塔原理》是一种思考问题的逻辑；

是一种整理思维的方法；

是一种帮助高效写作和表达思想的武器；

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

参考书中提到的纵向关系

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

Hozin花费了20分钟时间用金字塔原理推理了一下，见

Hozin的回答：

一个具体的例子：

图#01【演出】的概念设计草图

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

（以上这些是Hozin在2009年设计的，第一次拿出来）

请先阅读：

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

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

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

然后请阅读：

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

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

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

依然无法理解？

大家要明确，如果只看看资料就能掌握一门技艺，所谓【工匠精神】就真没必要存在了。

怎样才能算是金融行业交互设计比较厉害的？

Hozin的回答：

1.金融行业的简单本质

A.某一时刻，钱Into

B.等待一段时间

C.某一时刻，钱GoOut

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

2.金融行业的壁垒

金融业是吸血鬼，它让大众误以为升值10%和贬值10%是等效的绝对值（ ¹¹⁄₁₀=¹⁰⁄₉ ？）……欢迎大家Google“金融错觉”这个词儿。

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

敢消灭错觉么？敢不敢在APP不说年化收益（实际理财只有三个月）？敢不敢让老百姓读懂那些保险条款？

如果你不敢，那Hozin收回前面的话，可能真的存在【金融行业交互设计】这个技能，帮助金主维护金融错觉，利用术语壁垒不劳而获。

Hozin的回答：

场景是这样的：

1.来自的经验教训

2.微信的关系短链

微信是一种熟人社交，从关系矩阵来说，熟人之间一定是短链，这就大大减少了被滥用的机会。

盘点一下两个用户建立微信好友关系的渠道吧

A.痴汉A明确的知道妹子的微信ID（微信号）

B.痴汉A知道妹子的手机（妹子绑定手机并自愿匹配通讯录好友）

C.痴汉A是妹子的好友（妹子绑定并自愿匹配好友）

3.微信的OpenID打造极端隐私环境

A.用手机号码注册微信

B.关闭手机通讯录匹配好友功能

所有的外部行为：关注公众号、支付、聊天等功能都是以加密的OpenID实现～～～

系统分析一款APP，请参考Hozin的这篇文章

链接：[逆向工程]信息架构推演<微信消息列表>步骤细节+新手扫盲 | HoZiN | 产品思维_信息架构_交互设计

程序开发有反编译，交互设计有逆向工程。

1.剥皮

2.吃瓤

主要是内容场景、信息架构、功能。内容的种类形式，表单项目有多少，如何设计浏览路径，使用什么样的功能建立了何种对称，通过封闭建立了何种不对称。

3.嚼核

这三个层面所有的【为什么】都搞清楚，然后总结：明显的优点有哪些？明显的缺点有哪些？

如果是产品人员，甚至可以思考：这个APP背后的运营平台是什么样子的？这个APP背后看不见的功能有哪些？原始需求是什么？产品人员妥协了什么？这个APP赚钱么？

PV/UV/DAU/转化率/下载量等数据上去了，怎么证明这些结果不仅仅是产品设计规划和运营的功劳？怎么证明交互在这里面的作用呢？

Hozin的回答：

隐约感到一些尴尬的处境，大家对交互设计的价值存在质疑，或者产品人员的交互水平高于你，或者大家认为界面功劳都属于视觉设计师……那么下面的话就有意思了

1.团队驱动力不应来自leader

2.产品驱动力不是团队，而是数据

3.产品都是妥协的结果

4.设计师的价值是多样性解决方案

如果基因不能变异，物种就不可能进化；如果永远在讨论最优解决方案，产品就总是得不到验证，多组织A/B测试，才是交互设计师应该做的，忘记用户研究吧。

Hozin的回答：

第一个观点：优秀的设计必然消耗更多的时间。

以最快速度完成【60分】的交互设计，工具用纸和笔，或者最熟悉的工具；快速理解需求业务，确定大致有多少典型用例，每个用例大概需要几个界面，界面上大概有什么内容；剩下的就是……下面这些事情：

负责的解释一下：

链接：BP Global（BP Global）从知道它到现在，十几年一直在迭代，但是从未有过颠覆式的改版，换句话，【2006年，这个网站几乎就是这样】。时间已经证明，它最初选用的交互设计框架经得起考验，拿来copy绝对不会低于60分。

自己自学有点枯燥，有没有可能组织线下的活动创造一些练习的客观条件？或者如果自己想组织这种活动的话，应该如何入手？

Hozin的回答：

重申：学习是一件孤独的事儿。要耐得住寂寞，要舍得下时间；别人出去玩，你看书；别人逛淘宝，你画图；别人玩游戏，你思考……

小密圈朋友昨天提供了一组原型界面，是某个商铺卡券产品的界面设计方案。Hozin根据提供的4个界面做了一些交互点评。

可以看出这位交互设计师有功底，需要提高的是【交互形式对应交互本质】的认知。

硬伤01：距离核心转化太远

硬伤02：隐喻设计较少

硬伤03：我的卡券，从属关系混乱

硬伤04：将【分类】【筛选】【排序】混淆了

以上只是蜻蜓点水，单纯从交互层面给予的优化。

以线下店铺为中心的顾客社交产品，感觉挺新颖的。像这类以固定地理环境作为社交的入口点，该如何分析是不是伪需求？对需求的分析好考验综合能力，按照Hozin提供的阅读顺序进行阅读训练，不知道能不能解决现在的困惑？

Hozin的回答：

关于移动web端的导航

1.手机浏览器自带的返回键和页面顶部导航栏里的的返回键是不是有些冲突，如果把页面内的返回键去掉，移动端的导航该如何考虑？

2.移动web导航栏需要和app一样固定在顶部吗，爱奇艺固定导航栏，淘宝携程并没有固定导航栏」

Hozin的回答：

1.请不要用原生APP的思维去设计web！移动Web也是web哦，浏览器是自带返回按钮的，移动端浏览器也自带返回，安卓用户已经很习惯返回的物理键了。设计移动web导航和pc端web大同小异，按照响应式的原则，要藏起来一些东西，请参考链接：Media Queries（Media Queries）里面的各种案例。提示一点，尽量避免在移动端web用面包屑！

2.移动web导航是否固定的问题，建议固定不固定都可以（具体问题具体分析）。高级的做法是：固定，但是隐藏，上下滑动时，出现。

写文章不容易，请呵护原创。未经授权，请勿转载。

---

HoZiN：交互老法师，江湖人士，藏经阁扫地的，不在BAT。个人主页：http://hozin.com。

本文由专栏作者 @HoZIN 原创发布于产品社区（www.aiyingli.com），未经许可，禁止转载。

 近期有不法分子打着爱盈利的旗号，制作“爱盈利”名称的App，并伪造爱盈利证件，骗取用户信任，以抖音点赞赚钱或其他方式赚钱为名义，过程中以升级会员获得高佣金为名让用户充值。</br> 爱盈利公司郑重声明：我司没有研发或运营过任何名为“爱盈利”的APP，我司做任务赚钱类产品从没有让任何普通用户充值升级会员。我公司产品均在本网站可查询，请将网站拉至底部，点击“关于我们”可查看爱盈利相关产品与服务。</br> 

讯享网