弹窗设计常见的四种交互情况

第一篇：弹窗设计常见的四种交互情况

http://www.xiexiebang.com/

弹窗设计常见的四种交互情况

弹窗经常在哪些情况下使用？设计上需要注意什么？

弹窗，顾名思义，是指弹出的窗口，强调一个弹字。无论是在web端还是在移动端，弹窗都是一种十分常见的一种交互方式，经常被用于以下四种情况：

1、广告投放

2、用于系统提示、通知、警告类的消息弹窗。

3、用户引导

4、显示加载

接下来我们来逐个分析一下这四种情况：

1、广告投放

作为网站的最重要的盈利方式，广告弹窗被广泛使用，但恐怕也是大家最讨厌的一种广告形式了。相信大家都有过类似经历，在家里打开一个网页，你还没反应过来，里面就传出了奇怪的呻吟声或者是打斗的声音，如果父母正好也在，简直超级心虚好嘛，但明明我就是看篇小说而已！而且这些弹窗的暗黑模式要不要那么心机啊，我急急忙点击了关闭，为什么直接进入了，而且声音更大了，这个时候已经是尴尬癌晚期了„

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

这样的弹窗广告无疑是有悖于用户体验的，那为什么在如此重视用户体验的互联网氛围内，弹窗广告依旧坚挺呢？这就要看网站所属公司的盈利模式了，比如我大学时候很喜欢看小说，但学生嘛没钱，总会去看一些盗版小说，这些小说都是免费的，那网站靠什么盈利呢？就是广告投放，而且这些网站一般也没什么优秀设计师，所以广告们奔放外露，粗暴野蛮，毫不含蓄。这也是特定的环境造成的。

当然作为一个设计师，我们站在公司盈利的角度下，如何设计优雅的弹窗广告，在降低用户厌恶感的同时，提升广告效果，又为公司赚取利益，是我们应该思考的。

比如：

1、绝对不要声音。这点说一个弹窗之外的视频体验，相信大家都发现了，现在点开手机上的腾讯新闻，视频播放默认是关闭声音的。终于可以在上班时间偷看视频新闻不被发现啦！

2、关闭按钮位置明显，能迅速关闭。对广告里的产品有兴趣的用户自然会点开，没有兴趣的用户你强制进入只会增加用户的反感。

3、精准投放广告，让用户看到他想看到的。

如果你想要一种更有设计感的方式，那你可以参考一下知乎上了脚喵说的回答： 我觉得可以用“反向弹窗”，就是刚打开页面的半秒钟之内存在广告，且画面吸引人，在人看清楚之前就收缩到页面边缘变成类似书签的很薄的东西（收缩时最好有动感，比如加速运动等），感觉是被“吓跑”一样，留下干干净净的页面，并让人出于好奇主动用鼠标去点击（不是悬停）那些被收缩的小广告。虽然也是广告，但实际广告效果肯定比弹窗要好。

小结：广告弹窗作为网站盈利的重要模式，是无法杜绝的。设计师需要在商业利益和用户体验上寻找平衡。

2、用于系统提示、通知、警告类的消息弹窗（也称弹框）

提示确认弹框

提示确认弹框是在用户需要的时候呼出，也用来防止用户误操作。看似简单的提示弹框又有哪些需要注意的点呢？

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

上图是淘宝购物车中删除商品时的确认弹窗，元素很简单，文字+确认、取消button+关闭icon，文字部分主观性较强，就不做探讨了。我们主要针对确认、取消button和关闭icon来做三个方面的探讨：

1、确定button放在左边还是右边？

2、确认需要给出指示态hover吗？（将“确认”改变或填充颜色，突出“确认”这个操作来引导用户点击）

3、关闭icon是否必须

为了解开这三个问题，我们先来对比一下Mac和windoes的系统弹框

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

上图是UI中国删除评论时的提示确认弹框，一般这种情况纯属开发人员偷懒，直接调用了系统弹框。而对比Mac和windows的弹框，会发现有两个不同点，一是Mac的确认button在右，而Windows的确认button在左，关于这一点，从用户习惯看来，设计师应该遵从用户比例高达95%的Windows系统习惯来设计，即将确认button放在左边。二是Mac提示框右上角没有关闭icon，这就不是不同平台上用户习惯不同的问题了，更关系到是否强制让用户做出选择。如果没有关闭icon，新手用户必须阅读文字之后再作出一个选择，但如果用户只是无意点开了呢，也必须让用户阅读后再做出选择吗？显然是违背用户体验的。

因此在PC端关于上面三个问题的探讨，答案是： 1.确定button放在左边还是右边？左边 2.确认需要给出指示态吗？（hove态）需要

3.关闭icon是否必须。通常要有，但如果必须要让用户阅读后做出选择，则可以没有。当然，PC端的一些体验，到了移动端就有所不同了，由于界面以及手指触摸面积的限制，手指移动去点击关闭icon显然不如直接选择来的简单便捷。

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

确认和取消的位置在移动端如果确认呢？看上图的例子，IOS系统中朋友圈中的删除是删除后不可恢复的，因此删除放在单手操作不那么容易触达的左边比较合适，而淘宝网删除订单是可以恢复的，因此确认放在右边比较合适。在我看来，虽然移动端普遍遵从IOS规范，但其实确认放在左边或者右边区别并不大，但每个设计师都可以有自己的规范。

而至于是否要有指示hover态，要根据情况来定了，如果是希望引导用户进入下一步操作的，比如希望用户点击确认，那么就将“确认”两个字改变颜色突出出来，以方便用户点击。但如果是希望用户自己选择，则不用给出指示hover态。

因此在移动端的答案是：

1、确定button放在左边还是右边？区别不大，但在我看来，需要根据操作是否谨慎来定，比较谨慎的操作放在左侧来防止误操作，相对随意的操纵则放在右侧比较符合用户的心理模型

2、确认需要给出指示hover态吗？需要用户自己决定的操作，不需要给出指示。

3、关闭icon是否必须。不需要关闭icon

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

好评提示

有的APP进去之后就会弹出提示让你好评，可是我浏览页面正high呢，一下子弹出来这个来打扰我，如果我当时心情不错，我可能会选择下次再说或者不再提示，但如果心情不好，我就好想进去给他个差评啊，但是进入APP Store又要连要一会儿，干脆就放弃了。

上图是豆果美食的评价弹框，在我注册的关键时刻给我一个评价弹框，就好像我去你家做客，我还没进门呢，你就问我这次招待的怎么样？这个时间点把握的是非常不合理的。

关于提示评价的弹框，我觉设计师要注意两点：

1、在合适的时候给出提示评价的弹框、至少也要是用户使用了一段时间之后，避免在用户刚刚使用，或者正在注册的时候提示评价。

2、要给出下次再说或者不再提示的选项，如果强制性的让用户评价，即使用户想给好评，AppStore也不给力呀，要等那么久才能连接上，挑战用户耐心的结果可能是：用户本来对APP还是有好感的，结果把对AppStore连接慢的差评一起给你。

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

通知类弹框

最常见的就是新闻推送了，例如腾讯新闻的通知弹框会把一些热点事件通知给你，你可以选择现在就看，也可以选择暂时不看，这类通知弹窗最重要的也是需要根据用户浏览新闻的习惯和爱好进行通知，有一句话特别形象，你爱的人吻你，那是爱情；你不爱的人吻你，那就是流氓。还有插一句我对体育新闻真的没有兴趣，腾讯下次不要给我推了。

2、警告类的弹窗

网站杀毒软件检测到威胁的消息弹窗，一般都是被用户喜欢的，因为这些给用户提供了很多消息，帮助用户全面了解更多信息做正确的决策。但是如果频繁出现威胁消息，也容易引发用户内心恐慌与不安。度要把握好，同时形式也很重要。

3、引导性的弹窗

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

用户经常需要一些引导，比如在玩游戏的过程中，弹窗告诉你该怎么玩，这种引导在用户需要的时候适时出现，不但不会引起用户反感，还会帮助用户，提升用户好感度

引导性弹窗也常见于产品业务需要而出现，比如游戏中的注册，领取礼物、购买道具等，这是良性的运营推广和商业利益的获取，但是在什么环节，弹出什么功能，哪个时间点上适度出现是设计师需要考虑的。用户并非都忽略弹窗或者看见付费就关闭，点开后能否继续吸引用户、帮助用户才是最重要的。

4、显示加载进程的弹窗

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

缓解了用户在等待过程中的焦虑感。如果能加上生动有趣的动画，还能在加载的过程中提升用户好感度。

总结：弹窗作为在页面中弹出来的框，自带打扰用户的属性，这个属性是一把双刃剑，如果设计师运用得当，在合适的时机弹出用户需要的弹窗，将会给产品带来良好的用户体验，即使是暗黑模式，也能降低用户的反感。

相信我们通过不断的深度思考，能在商业利益和用户体验上找到平衡点。

北京千锋互联科技有限公司 版权所有

第二篇：常见家谱四种格式

常见家谱四种格式

四种格式家谱

欧式、苏式、宝塔式和牒记式

欧式

：又称横行体，是北宋文学家欧阳修创立的。欧式 的特点是：世代分格，由右向左横行，五世一表，用起 来很方便。欧式中，每个世代人名左侧都有一段生平记 述，介绍该人的字、号、功名、官爵、生辰年月日、配 偶、藏地、功绩等。

苏式

：又称垂珠体，是北宋文学家苏洵创立的。苏式世

系表的特点是：世代直行下垂，世代间无横线连接，全 部用竖线串连，图表格式也是由右向左排列的，主要是 强调宗法关系。

宝塔式 ：

顾名思义，就是将世代人名象宝塔一样，由上

向下排列。宝塔式采用横竖线连接法，竖线永远处在横 线的中间，这对人多的大家族来说，因人名不可能排在 同一页纸上，兄弟之间长幼关系不清，会为写谱、看谱 带来很多不便。此种图谱最迟在南宋时期出现，其特点 是将始祖置于上方正中位置，后世子孙按辈分依次排列，每一父辈必置于字辈的上方正中，这样家庭成员的亲疏、血缘关系表现的非常明了。但宝塔式的缺点是，当家族 发展到一定程度，就无法将世系在一张纸上画出，而且

由于各支系子嗣多寡不一，难以保持图谱整体上的均衡，容易给人一种不整理的感觉，另外宝塔式图谱在附记履 历时由于篇幅有限也受到较大的限制。

牒记式

：不用横竖线连接世代人名间的关系，而

是纯用文字来表述这种关系。每个人名下都有一个相关 的简介，如：字、号、功名、官爵、生辰年月日、藏地、功绩等。牒记式的世系形式固定，次序分明，比较节约 纸张。牒记式家谱类似于每位家庭成员的简历汇编，其 起源大约是源于欧式图谱，大致相当于欧式图谱后面的 传记部分。其优点是世系固定，依次分明，因此有不少 家谱采用这一图谱。

以上四种家谱形式都各有特色，这是一般族谱中比 较常见的，但也有其它的变化，我们在记述家族世系表 时，可根据掌握材料的多少、家族成员的多少等灵活运 用，总之，家谱要易看易懂、内容真实、层序分明，这 才是最为重要的。

关于家谱编辑格式的诸多内容供大家参考：

一、谱名一般均称为家谱、宗谱、族谱、家乘、世谱、统谱、支

谱、祖谱、合谱、联宗谱、大成谱、房谱等，也有的称为谱传、真谱、渊源录、源流考、清芬录、世典、世牒、世恩录、故谱、族谱图、族

系、族讲、石谱、世家、私谱、本书、大同谱、乡贤录、传芳集、家

传簿、先德传、系谱、谱志略、家谱汇编、家模汇编等，可谓名目繁 多。

二、谱序稍具规模的家谱，卷首一定会有一篇至几十篇不等的序

文，它是每部家谱不可缺少的内容之一。谱序包括新序、旧序、族外

人的客序、跋语、目录和刻印人名以及其它关于本族的记述。

三、谱例又称凡例，主要是阐述家谱的纂修原则和体例。一般而 言，一些家谱在每一次续修时都会订出若干条适合社会潮流与需要的 规则，以作为修谱时所要遵循的原则。

四、谱论许多家谱都专门辟有谱论一章，专收先贤的谱说、谱论、谱议的篇章和古代经典中的有关论述，对修谱的作用、功能、意义、历史、原理、方法等加以发明和阐述，是研究谱学的宝贵资料。

五、恩荣录主要内容为历代皇帝对家族中的官员及其家谱的敕书、诏命、赐字、赐匾、赐诗、赐联、御谥文、御制碑文以及地方官府的 赠谕文字等，以显示和炫耀朝廷对该家庭及其成员的奖励和表彰，同

时反映高家族的地位和身份。

六、像赞

祖先及家族中历代英贤、重要人物的图像资料，一般为 正面是遗像，背面是像赞。

七、姓氏源流中国家谱素来有 “

叙本系，述始封 ” 的传统，明清以

来各家谱也大多有记姓氏源流的一章，或称姓氏源流，或称宗族源流。

它主要是用来记述本姓来源、本族的历史渊源、始祖、世派、迁徙、各支派间关系甚至改姓的原委等。

八、族规家法是宗族家族成员共同制定的、用以约束和教化族人 的宗族法规，是家谱中的重要组成部分。其名称各异，种类很多，诸

如家规、家约、家戒、家法、家礼、家典、家仪、家条、族规、族约、祠规、祠约、规范、规条、规矩、条规、戒谕等。

九、祠堂记载宗族、家族祠堂修建的历史，介绍祠堂的建筑规模、地理位置，收录有关祠堂的碑文、诗文、祠联、祠匾、祠堂图，建祠

捐资人名，记录祠堂内神位世次、配享、附享、祭祀情况等。

十、五服图又称服制图。所谓五服，就是指古代丧服制度中的五

种服色，即斩衰、齐衰、大功、小功、缌麻。丧服是根据生者与死者的远近亲疏关系而穿着的一种服饰。因五服本身就表明生者与死者的 亲疏远近关系，同时又表明与死者同有关系的生者与生者之间的远近亲疏关系，所以不仅在执行丧礼时要涉及到，而且在执行宗族、家族

事务及执行法律时也必须涉及，所以家谱中一般都载有五服图。

敦宗睦族

忠诚为人做实事

弘扬祖德

和谐网络兴家园

第三篇：大神UI弹窗设计经验总结

创想设计学院

官网：http://www.xiexiebang.com/ 大神UI弹窗设计经验总结

当你将弹窗设计及使用得恰到好处时，它们就会是非常有效的用户界面元素。它们能帮助用户快速且便捷地达成目标。然而当错误使用时，弹窗却会困扰你的用户。学会如何设计弹窗，会帮助你在使用时避免那些可能对用户造成的困扰。

加上这篇《腾讯设计师做了100个弹框后总结的设计经验》 学会弹窗设计就没问题了！1，什么是弹窗？

弹窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层。它可以告知用户关键的信息，要求用户去做决定，抑或是涉及到多个操作。弹窗越来越广泛地被应用于软件、网页、以及移动设备中，它可以在不把用户从当前页面带走的情况下，指引用户去完成一个特定的操作。

UI设计

图1，会话过期弹窗

现在让我们来看看有哪些优秀的弹窗设计和使用方法。

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/ 原则1，减少干扰

由于弹窗会中断操作，要尽可能地少使用弹窗。突然出现的弹窗会强迫用户去停止他们当下正在进行的任务，并转而专注于弹窗中的内容。在继续之前，用户必须要面对这个弹窗，否则将无法对弹窗之下的页面进行操作。当这个用户必须要确认一个关键的操作时，这就是好的，但是在大部分情况下弹窗是不太有必要的，甚至会引起用户反感。需要确认

在你需要用户去互动才可继续时，或当犯一个错误的成本会很高时，使用弹窗是最合适且最合理的。

UI设计

图2，这里告知了用户一个情况，需要用户确认 不要突然打开弹窗

在用户没有做任何操作时突然打开弹窗，是非常糟糕的设计。许多网站用订阅框来轰炸它们的用户，就如下面的例子：

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/

UI设计

图3，诸如此类的弹窗给没有键盘的用户造成了数不清的麻烦

弹窗的出现应该永远基于用户的某个操作。这个操作也许是点击了一个按钮，也许是进入了一个链接，也可能是选择了某个选项。小结

不是每个选择、设置、或细节都有必要中断用户当前的操作。

弹窗的备选方案有菜单以及同框内的扩展，这两种控件都可以保持当前页面的延续。可不要突然跳出弹窗，应该让用户对弹窗的每次出现都有心理预期。原则2，弹窗应与现实世界相关连

弹窗应该使用用户的语言（用户熟悉的文字，短语和概念），而不是一些系统特有的专有名词。表述清晰的问题和选项   

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/ 在弹窗的内容区域，应该使用一个表述清晰的问题或陈述，例如“清除您的存档？”或“删除您的账户？”总之，应该避免使用含有歉意的、模凌两可的、或者是反问式的语气，如“警告！”“你确定吗？”

UI设计

图4，左边的弹窗提出了一个很模凌两可的问题，并且这个操作可能影响的范围并不明确；右边的弹窗提出的问题相当明确，它解释了此次操作对用户的影响，并且提供了指向清晰的选项。尽可能不要给用户提供可能产生混淆的选项，而应该使用那些文意清晰的选项。大部分情况下，用户应该能够只通过弹窗的标题和按钮，就了解他们有哪些选项。

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/ 反例：这个按钮的文字“不”的确回答了弹窗内的问题，但是并没有直接告诉用户点击后会发生什么。

UI设计

图5，安卓的系统弹窗

改成这样：肯定的操作文字“放弃” 很明确地指示了选择这个选项的后果。

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/

图6，安卓的系统弹窗 提供重要的信息

一个弹窗不应该把对用户有用的信息说得含糊不清。举个例子，如果一个弹窗要让用户确认删除某些条目，就应该把这些条目都列出来。

UI设计

图7，这个弹窗很简要地指明了这个操作的结果

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/ 另外，避免使用“了解更多”按钮去连接到帮助文档；在弹窗同一页面展开则是更好的选择。如果还需要显示更多的信息，则将其放在进入弹窗之前的页面。提出有（关键）信息的反馈

当一个流程结束时，记得显示一条提示信息（或视觉反馈），让用户知道自己已经完成了所有必要的步骤。

UI设计

图8，在完成一个操作后成功的例子 小结

在弹窗中使用语意清晰的问题和选项。设计促进操作完成的弹窗。

在操作完成后，提示用户操作已经完成了。原则3，讲求极简   

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/ 别试着把太多东西挤在一个弹窗内。要保持干净和简约（遵从KISS原则）。然而极简主义并不意味着被局限住，你提供的所有信息都该是有价值并且与之相关的。元素与选项的数量

弹窗绝不应该只是部分显示在屏幕上。因此不要使用有滚动控件的弹窗。

反例：巴克莱银行的付款处理弹窗包括了许多的选项和元素，部分的选项只有滚动后才能看到（特别是对于屏幕通常较小的移动设备）

好的例子：Stripe使用了一个简单并且聪明的弹窗，只显示了最基本的信息，这样不管在桌面端上还是移动屏幕上看起来都会很不错。

创想设计学院

官网：http://www.xiexiebang.com/

官网：http://www.xiexiebang.com/

UI设计

操作的数量

弹窗不该提供超过两种选项。第三个选项，例如下图的“了解更多”，有可能会将用户带离此弹窗，如此用户将没有办法完成当前的任务。

图11，“LEARN MORE”操作将用户从这个弹窗指引到其它页面，进而把当前的弹窗置入一个不确定的状态

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/ 勿将多个步骤放置在一个弹窗内

把一个复杂的任务分解成多个步骤是一个极好的想法。然而这也会给用户传达一个信号，这个任务太复杂了，以至于根本没法再一个弹窗界面中完成。

如果一个交互行为复杂到需要多个步骤才能完成（如下图的UI设计例子），那么它就有必要单独使用一个页面（而不是作为弹窗存在）。

创想设计学院

官网：http://www.xiexiebang.com/

官网：http://www.xiexiebang.com/

UI设计

图13，有多个步骤的弹窗 小结

如果你发现你在很努力地把许多元素挤进一个弹窗，这通常代表弹窗已经不是最优的设计方案了。

  

将那些不必要的、不能够帮助用户完成任务的元素或内容从弹窗中去除，以达到简化的目的。尽量避免在弹窗内安置多个步骤。原则4，选择适当的弹窗种类

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/ 弹窗大致分两个大类。第一大类为吸引用户关注的模态弹窗，强制用户与之交互后才能继续。模式弹窗通常被用在独立、强制的流程中： 当不需要上下文就可以决定怎么做的时候。

需要明确的“接受”或“取消”动作才能关闭。在点击这种弹窗的外部时，它并不会关闭。当我们不允许此用户的进程处于部分完成状态（即用户必须完成此进程才可做其他任何的操作）。

第二大类则是非模态弹窗，它允许用户通过点击或轻触周围就可关闭。

第一种模式弹窗只在特别重要的交互操作时才须使用，（比如：删除帐户，同意协议）。  

UI设计

图14，模态弹窗：用户必须输入“DELETE”才能确认删除

另外移动系统的弹窗通常是模态的，并且含有如下的基本元素：内容，操作，和标题。

创想设计学院

官网：http://www.xiexiebang.com/ 创想设计学院

官网：http://www.xiexiebang.com/

图15，安卓模态弹窗 原则5，视觉一致性 弹窗下的背景

当打开一个弹窗时，后面的页面一定要稍微地变暗。它有两个功能，第一它把用户的注意力转移到了浮层上，第二它让用户知道后面的这个页面是不再可用的。

创想设计学院

官网：http://www.xiexiebang.com/

官网：http://www.xiexiebang.com/

图16，安卓的模态弹窗

在调节背景深度时要注意了。如果你把它变得太暗，用户就没法看清背景的内容。如果你调得太浅，用户可能会认为这个页面仍然可操作，并且甚至不会注意到弹窗的存在。清晰的关闭选项

在弹窗的右上角应该有一个关闭的选项。许多弹窗会在右上角有一个“x”的按钮，方便用户关闭窗口。然而，这个“x”按钮对于一般的用户而言并不是一个显而易见的退出通道。这是由于“x”按钮通常较小，它需要用户准确地定位到该处，才能够成功的退出，而这一过程通常很费事。

创想设计学院

官网：http://www.xiexiebang.com/

官网：http://www.xiexiebang.com/ 因而让用户通过点击非模态弹窗的背景区域去退出，就是一个更好的方法。

图17，TWITTER同时使用了点击X按钮和点击背景区域的退出方式 避免在弹窗内启动弹窗

应该避免在弹窗内再启动附加的小弹窗，这是因为此举会加深用户所感知到的网站或app的层级深度，从而增大了视觉的复杂性。

图18，反例：弹窗中的弹窗

创想设计学院

官网：http://www.xiexiebang.com/

官网：http://www.xiexiebang.com/ 小结

在大部分情景下，都允许用户通过点击或轻触来关闭弹窗（除了模态弹窗）。应该避免在弹窗内再启动附加的小弹窗（即弹窗中的弹窗）。总结

希望这些有关弹窗的使用案例和使用方法还算有趣，并能在你们设计原型时派上用场。要记住，用户体验是为用户而做的设计，而非为技术。要想知道什么样的设计最适合你的用户、最适合他们将进行的任务，其实不是一件难事：你只需要模仿那些领先产品的弹窗，然后找到你的用户做一些相关的测试  

创想设计学院

官网：http://www.xiexiebang.com/

第四篇：交互设计心得整理

交互设计心得整理

长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行，主要是交互设计师和视觉设计师对于交互设计的困惑，以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座；现在把它整理成文，希望与同行切磋，共同进步。

这篇文章是我几年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心（User-Centered-Design, 简称UCD）的设计原则，每一个项目都是不折不扣的按所有UCD的步骤进行。下面总结的交互设计的方法，是从UCD的过程中提炼出来，也就是说，同样适用于任何非UCD的设计过程。交互设计的流程

如果一提到交互设计，你就想到画线框图或原型图，那你只对了五分之一。交互设计是一个过程，从开始到结束有一套系统的流程。原型图只是其中的一个环节。

当接到一个设计项目，怎么开始？都应该做哪些工作？怎样尽可能的保证交付物满足既定的功能以及用户体验层面的易用性？

第一步，是任务分析，列出界面所要完成的所有任务。第二步按各任务确定页面流程，建立信息架构。接下来是创建统一的页面布局包括分区等。然后在页面布局的基础上进行原型设计，可以是低保真和高保真的原型图。最后编写设计说明。下面以设计一款动感相册界面为例，逐步讲解各个环节。1.任务分析

第一步任务分析。这里要做的是对于将要设计的这个新界面的所有任务的分析，也就是用户在界面上能进行的所有操作。这个分析在功能需求的基础上进行，需求方一般提供一个功能点的列表。

任务分析最常见的是任务列表，另外有任务流程和任务场景等。下面以任务列表为例。列出所有主要任务，以及每个主要任务的子任务。再把子任务细分到各个步骤。形成下面这个列表。主要任务1 子任务1 步骤1 步骤2 子任务2 步骤1 步骤2 主要任务2 …

以动感相册为例，任务分析列表如下：

1.浏览相册 1)浏览相册列表 2)选择相册 3)浏览照片 2.创建新相册 1)添加照片 a)选择已有相册 b)选择照片 c)排列顺序 d)添加字幕文字 e)选择动画效果 2)添加模板 a)浏览模板 b)选择模板 3)添加音乐 a)浏览音乐列表 I.试听音乐 II.选择音乐 b)增加新音乐 I.打开本地文件 II.选择音乐 4)预览（略）… 5)命名（略）… 6)保存（略）… 3.修改相册（略）…

任务列表包括所有功能点，并对每一个功能点的逻辑关系进行整合。必要时会对各任务的使用频率和其它影响设计的重要因素进行分析，这里不做解释了。2.页面流程

任务分析完成后，进入设计的第一步，即设计页面流程。页面流程是设计的开始，也是重要的一环。它决定整个界面的信息架构和操作逻辑。页面流程是上一步任务分析的自然转化。一般来说，一个主要任务就是一个页面，其它子任务也可以转化为页面。

以动感相册为例，页面流程如下：

页面几乎是把任务分析照搬过来了。所以上一步做好了，这一步很轻松，而且越往后越轻松。注意这个流程图应该包括所有将要设计的新页面，一个不少，一个不多。它不仅确定页面内容，页面数量，还确定各页面之间的关系。如果在后来设计具体页面原型时，发现这个流程图多了或少了页面，或者页面关系发生了变化，说明你的功夫不到家（这个比较难，我一般不苛求我们的设计师）。根据原型图来创建或者修改页面流程图，不是在做设计，而是在写设计说明。3.页面布局

第三步页面布局是具体页面设计的开始，在上一步知道有哪些页面需要进行设计后，这里对页面进行划分，对内容进行组织。最重要的一点是确定页面分区。以动感相册为例，页面布局如下： 总布局，即通用布局，适合所有页面。

具体页面布局，在不与总布局冲突的情况下，有更细节的布局。

页面布局赋予零碎的内容以逻辑性，以分区的形式把页面各区域所对应的功能区确定下来，减少具体设计时的随意性。这是设计严谨与否的表现所在。把类似的操作放在一起，对于用户来说是可以预见的，用户能够判断哪个操作在哪个区域，减少盲目寻找带来的困难和疑惑。4.原型设计 这一步是大家熟知的，即具体页面的设计。这一步设计把所有的界面元素表现出来。可以有低保真和高保真原型图。低保真即是线框图，高保真多是接近最终效果图。下面是动感相册的低保真原型图。

5.设计说明

最后一步需要做的是对所有页面进行详细的描述，包括对页面上所有元素进行说明，比如默认状态，跳转页面，字号字体，尺寸等。这里就不解释了。这是交给开发人员的文档，以及测试人员进行测试的依据。小结

交互设计是一个过程，它不仅仅是画线框图。交互设计最关键的两个环节是页面流程和页面布局，前者建立清晰的架构和严密的逻辑，后者整合零散的信息并确定分明的主次关系。这一切都是为了我们的终极目标——让我们的界面符合用户的预期，不带给他们任何的意外。一切都在用户的意料之中。

第五篇：交互设计档案

交互设计师的基本素质

首先，谈谈我个人对交互设计师基本素质的看法。从我个人的理解来看，可以简单归纳为九字诀：“听、看、想、说、磨、做、验、写、讲”（如图1.1）。

图1.1 1）听：做一个交互设计师，最重要的一点就是要懂得倾听（这里蕴藏了一个隐晦的性格属性：谦虚！）。通常情况下，我们不是用户，所以很难 100%代表用户，更左右不了老板，所以我们首先要有听的本事，把来自用户的、老板的、PD的、视觉的、前端的、开发的、测试的、市场的、业界的等各方面的声音都听过来，听进去。

2）看：99%的情况下，交互不是一蹴而就的创造工作，它是站在前人肩膀上不断迭代更新的行为过程。我这里指的“看”是要求设计师能博览、能泛猎，看到好的，见过差的，什么都略懂，交互才能变得很美„„

3）想：交互是思考的输出产物和表现形式。当设计师将之前听到的和看到的内容在头脑中加以整理、分析，经过发散的创造性碰撞和严谨的逻辑论证后，逐渐得到了相对靠谱的交互产物。这个思索分析的过程贯穿于交互设计工作流程的每个环节。

4）说：一个能说会道的人不一定是一个优秀的交互设计师，但一个优秀的交互设计师必然是一个善于准确表达自己想法和观点的人。在这一点上，我坚持交互是一门分享的学科，需要的是开放的性格和良好的沟通技巧。

5）磨：耐心、技巧、热情的综合表现。在一个项目的进程中，不可避免的会面临很多的挑战，优秀的交互设计师善于发挥“磨”的精神，他们怀揣对交互专业的无比热情，以无所不用其极的技巧，耐心的缠死一个又一个质疑方，最终让大家认同并帮助推动设计的实现。通常来说，一个优秀的交互设计师会是一个优秀的Idea推销员。

6）做：交互设计师专业度的核心表现。俗语说得好，是骡子是马，牵出来遛遛。对于交互设计师来说，之前的环节做得再好、再完美，也只是停留在设计师自己的脑子里，游荡于听众们的耳膜间。如果理论落实不到实际，那所有的想法都只是空中楼阁，你之前所有的努力都只是在佐证你的空泛和不切实际。所以我们不仅要能 “做”，更要“做”得漂亮，“做”得完美！我一直都是这样认为：“做”决定了一个交互设计师是不是靠谱，决定了一个交互设计师的高度，是一个交互设计师最根本的专业素质。

7）验：用户体验设计，最终是要落实到用户的身上的。客观中立的验证、分析、评估能力是一个优秀交互设计师的重要素质。无论个人还是团队，设计的成果都需要通过精准的测试才能算得上合乎标准，此时，一颗平常心和一双敏锐的眼睛是设计师最需要的。

8）写：分析、归纳和总结能力的综合表现。一个项目，无论成功还是失败，总是有很多地方值得设计师本人或后来人借鉴。交互设计之路不是一座苛求零失误的独木桥，但绝对是一条要求零“重复”失误的单行线。评价一个设计师的专业度，很重要的一环就是看他能不能多犯前人从来没有犯过的错误，并能有效总结给后来人。于是，他就成了大家，路就这样被趟了出来„„

9）讲：演讲能力。这里所指的是在项目后期进行的交流分享。一个专业的交互设计师会站在宏观的高度上，以平和的心态同他人沟通，验证自己先前设计的合理性、全面性和科学性，更好的提高自己的专业能力，为今后的交互设计做好准备。

·交互专业度的具象化表现

刚才讲了很多，但总体来说还是偏理论，还是让人摸不着头脑，虚幻的概念最大的优势在于它的颠簸不破和四平八稳，谁也揪不住它的小辫子。但这不是我的风格，更不是我写这篇文章的初衷，我希望的是抛砖引玉，给大家带来一些真正意义上能直接使用的东西。所以，接下来，我们来些“干货”，玩点简单粗暴的„„

图1.2

根据阿里巴巴目前的产品开发流程（如图1.2），交互设计是大环节中的一个小点，抛开杂乱的干扰信息，单纯考量交互设计师在过程中的参与度，我们就能得到一个理想化的交互设计行为流（如图1.3）：

图1.3 流程没什么好讲的，更没什么好争辩的，无非也就是增加一个、减少一个、偷换概念、细分归纳之类的忽悠。我这里想和大家分享的是流程中每个环节的专业输出物，我有一个激进的想法：如果某人能精准的完成某些公认的标准化输出物，那他99%可以被称为是一个“专业”的75分交互设计师了，剩下的 1%，也许是拼RP„„

这里，我先简单交代一下即将涉及到的流程节点、对应输出物的图形色块的代表含义。

1）流程环节说明（如图1.4）：

图1.4 2）流程环节各输出物说明（如图1.5）：

图1.5 在我看来，一个专业的交互设计师，在一个理想化产品设计的过程中，有一些是属于必须的输出物，有一些属于最好有（推荐）的输出物，还有一些属于可有可无的输出物。同时，根据项目的实际情况和参与角色的分工情况，存在一些交互设计师可能需要负责的输出物，具体细节我将在下面逐一介绍。1）需求获取阶段：

此阶段通常来说会由PD等外部资源发起，输出物主要是FRD文档和时间计划文档，用以描述问题、提出初步目标，假想可能的解决方案、预估资源并梳理时间计划等。当然，对于从UED内部发起的项目，这两部分的输出也可以由交互设计师完成，属于可能责任输出物； 2）需求分析阶段：

历史数据的关注和分析阶段，基于项目本身，要针对竞争对手、行业现状等做详尽的收集和分析，其中的关键考核点是要做必要的头脑风暴，获取发散而全面的信息集合。在此阶段，竞争分析报告和头脑风暴输出物是交互设计师专业度的重要表现。

3）用户访谈阶段：

对于一些条件允许的项目，我们建议能在项目初期寻求一些用户的信息，定义一些用户的属性，这些对于之后的交互设计都会是坚实的基础。一个高专业度的交互设计师甚至会主动介入访谈问卷的设定工作，客观的参与调研报告输出的全过程。

4）需求修正阶段：

专业的交互设计师通常不甘于沦为一个纯粹的资源，抗拒被动的接受命令。我们之前经历的需求分析和用户访谈都是为掌控主动权而做的准备。如今，我们有理有据，应该主动出击，和需求方讨论研究需求的合理性、可行性，明确最终的修正目标，并对达成目标所涉及的重点突破点有理性的分析判断，筛选出各设计点的优先级。5）设计草稿阶段

项目目标和设计方向确定下来后，我们将进入核心的设计环节。作为交互设计师的“杀手锏”，交互流程和线框草图当然一个都不能少，但此时我更想强调一项辅助性质的调研分析工作。从交互的角度来看，在大流程大框架敲定的情况下，交互设计师通常会投入更多的精力在一些核心的设计点，也就是我们在需求修正阶段确认的设计重点。此时，专业的设计师绝对不会拍脑袋设计，更不会想当然出方案，而是会针对这些核心点做业界调研和分析，为自己即将进行的设计寻求一个足够宽广厚实的肩膀。6）设计细化阶段

第一阶段的设计工作将在此阶段性输出。我们回顾一下，截止此时的设计产物有：用户调研报告、FRD确认文档、交互流程、线框草图、核心设计调研分析、核心设计详细说明、交互流程整体说明等。基本上，一个交互设计师的专业度，已经可以根据此时的输出物数量、质量看出个大概齐了 7）专家评审阶段

一个专业的交互设计师，要谦虚。此刻，我们进入小范围专家评审的阶段了，三个臭皮匠还顶一个诸葛亮呢，更何况是参与评审的专家呢。此时设计师的专业度就体现在 “听”、“说”和“想”这三诀上，耐心的做好评审记录，有理有据的同专家们进行专业沟通，并确认最终的结论和方向。8）设计优化阶段

经历了专家团的考验，又该抖擞精神重新上路了，没什么好说的，把过程做好了，你的专业度也就到位了。设计优化阶段的投入度和产出将直接影响到后续Demo及测试的效果，和最终设计也息息相关，各位交互设计师们，千万别打瞌睡了！

9）仿真Demo开发阶段

终于到了仿真Demo的模型化阶段啦，这时尽管并没有直接的交互输出物，但还是需要交互设计师用百分百的挑刺精神，协助视觉和前端精准的达成我们之前的设计，严格保证最佳的输出效果。10）测试验证阶段

仿真Demo出来之后，将进入最后的测试验证阶段，根据项目的实际情况，可能是QA测试，也可能是用户测试，总之，这个环节能帮助设计师最后把关设计的合理性，专业如你，一定要亲自跟进测试并给出最终的评估报告，哪些点是前期没有考虑周全的？那些点是成功的？哪些点是必须立即改进的？哪些点能以后再说？哪些„„ 11）完成设计阶段

最后的设计阶段，根据之前的测试验证评估报告，交互设计师要对所有之前的输出做一次严格的检查和修正，完成最后的输出。

12）开发上线阶段

盯紧视觉设计师和前端工程师吧，最关键的时候终于到了，经历了那么多纷繁复杂的环节，我们等的就是上线的这一瞬间。当然，千万别忘了后续的跟踪和分析，这能为你的专业度加分不少哦 ·总结和展望

综上所述，我们已经整理出来了体现交互设计师专业度的过程输出物了，总结一下：以75分交互设计师的标准来看，我们的专业度能通过以下的关键输出物衡量：FRD目标确认文档、竞争分析报告、头脑风暴产出物、项目初期用户调研报告、核心设计点调研及分析报告、专家评审报告和评估报告、原型测试报告、交互流程图及详细说明文档、页面线框图、核心设计点说明文档和最后的跟踪分析报告。

基本上，所有的输出物都是反复易稿的结果，都是细碎过程的迭代输出，都饱含了设计师辛勤的工作投入。所有有梦想的交互设计师们，请正确的审视这些输出物，珍惜自己的付出，它们不光是单板的形式教条，它们更是证明自己专业度最有利的武器！

被很多同学都质疑过：那么多的输出物，平时做需求怎么可能全部做出来？每当此时，我的回答都是一样的：“是的，找借口总是很容易的。大家的确都很忙碌，按季度来说，基本上每个人都会经手大大小小几十个需求，但我们真的忙碌到输出一个高质量设计的精力都没有了吗？还是我们打心里就本着做交互、混日子的想法呢？”

不是不能，是不愿！那才是交互设计这个职业最可悲之处„„

作者信息：本文http://