头脑风暴是一种常用的设计方法，能够帮助设计师开阔思维，快速获取大量灵感与方案，当然，这是在理想的情况下。实际上，很多头脑风暴是漫无目的，效率低下，毫无收获的。而头脑风暴需要很多人参与，如果浪费了大家的时间而一无所获，那发起者简直尴尬到能抠出两室一厅。

那么，设计师如何才能地组织一场头脑风暴呢？下面我将按“开始前”，“进行中”，“结束后”的顺序，介绍整个头脑风暴流程中提率的一些心得体会。

开始前

明确想要解决的问题

我们一定是为了解决某个问题，而不是为了闲聊组织头脑风暴的。所以我们要先明确问题是什么，才能引导大家帮助我们。

我们可以试着用一句话去概述它，注意必须要具体，不能太含糊。“如何设计一张海报”就是一个很糟糕的描述。试着把目标用户、业务目标、场景加进这句话，比如“如何设计一张能够吸引应届毕业生加入XX设计中心的朋友圈海报”。

拆解问题

明确具体问题后，我们还需要将它进行拆解成一个个关键问题，这样才能有序展开讨论，而不是漫无目标地侃大山。比如刚刚提到的那个问题，就可以拆成“应届生的关键词是什么”、“应届生找工作时最关心什么”、“XX设计中心的关键词是什么”、“什么样的元素能够代表设计师”、“什么样的朋友圈海报形式比较吸引人”等等。

制定流程

有了明确的问题和关键问题后，我们要做的就是将它们在头脑风暴按步骤上提出来，让大家跟着我们的节奏去展开脑洞，这也就是头脑风暴的流程。一场头脑风暴往往包含背景介绍、多轮脑暴、阐述想法、投票等环节，作为组织者需要详细规划每个环节的顺序、时间，特别是需要控制总时长（尽量别超过一个半小时），预留中场休息的时间，毕竟大家很难长时间集中注意力。

确定分工

一般来说头脑风暴里有三种角色，主持人、记录员和参与者。参与者的职责不用介绍了。主持人的职责是带着大家按节奏讨论，记录员的职责是记录大家的想法和拍照，缺一不可。

确定参与人员

参与人员的数量一般在5-10之间，人数太少收集不到足够的想法，人数太多讨论效率低，耗时长。参与人员的身份需要根据你想解决的问题确定，如果是比较大型的项目，参与的人员需要多元化，把产品经理、程序员都拉进来，方便获得不同视角的观点，也能够提高合作方的参与感。在我们上面举的海报例子中，如果能拉应届设计师加入脑暴，将非常有帮助。

准备工具

除了笔、便利贴、A4纸，我们还需要准备一份写了每个步骤需要完成任务的PPT，帮大家明确任务。

提前通知

大家的工作都比较忙碌，所以请至少提前一天邀请大家参与头脑风暴，并且简单交代背景，提供一些资料，方便大家提前消化。

进行中

介绍背景

首先要简单跟大家介绍一下背景信息，以及接下来的大概流程，活跃一下气氛，带大家进入状态，讲段子也算是新世纪设计师的必备技能了。

重量不重质

头脑风暴的目的并不是要获得考虑得非常周全、详细，能够直接落地的方案，而是大量的想法和灵感。所以我们需要鼓励大家在短时间（5-10分钟）内输出尽可能多的想法（四五十个不算多），不要太纠结可行性、成本等细枝末节的问题。

延迟评论

作为主持人，切记不要当场对参与者的想法做出负面评论，或者谈论执行细节的事情，以免打击参与者的积极性。如果有领导参与，要注意避免领导的威压影响其他参与者打开脑洞。

控制节奏与讨论主题

互联网从业者大多是思维活跃的可爱人儿，开一个头他们就能唠上一天，所以主持人一定要留意时间，按照既定计划，当大家偏题时引导大家回归到对主题的讨论上。

中场休息

如果整场头脑风暴的时间超过半个小时，就需要给大家安排中场休息的时间，可以提前准备一些零食和饮料，帮助大家放松，以便接下来能够集中注意力接着讨论。

记录与拍照

记录员应该将大家的想法和每轮讨论、投票的结果记录下来，方便后面回溯和汲取灵感。拍照也是很重要的工作，这将为最后的设计提案提供宝贵的图片资料，让整个设计流程展现在决策方面前，提高说服力。

结束后

总结成果

主持人应该将简单总结一下大家讨论、投票的结果，表达对大家百忙之中参与头脑风暴的感谢，为下次拉人做情感铺垫（开玩笑）。

整理材料，同步结论

会后需要及时对头脑风暴的结果进行整理和分析，并将结论以邮件的形式同步给参与者（表达对参与者的尊重）和领导（同步工作结果）。整理时可以按可行性和效果两个维度划分idea，找出比较平衡的方向。

写在最后

头脑风暴是很有效但也很容易浪费时间的一种设计方法，开始前详细规划，进行中稳稳把控，结束后及时总结与同步，能够帮助我们提率。

另外，头脑风暴只是为我们提供了灵感和方向，并不一定要选择获得票数最多的方案执行，还是需要根据实际做判断，不要过于机械。

文章来源：站酷    作者：失灵 

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

盒子模型

看透网页布局的本质

首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。

概念

盒子模型由元素的内容边框border内边距padding和外边距margin组成
盒子里面的文字和图片等元素是内容区域，盒子的厚度我们称为盒子的边框
盒子内容与边框的距离是内边距，盒子与盒子之间的距离是外边距

盒子边框

语法

border:border-width粗细|border-style样式|border-color颜色 

边框综合设置
border: 1px solid red; 没有顺序

表格的细线边框
cellspacing=“0” ,将单元格与单元格之间的距离设置为0
border-collapse:collapse; 表示相邻边框合并在一起

内边距

padding属性用于设置内边距，是指边框与内容之间的距离

属性
padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距

简写
2个值 padding: 上下内边距 左右内边距 ；
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ；

内盒尺寸计算（元素实际大小）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

外边距

margin属性用于设置外边距。margin控制盒子和盒子之间的距离，属性和简写与padding相同

块级盒子水平居中

盒子必须指定宽度（width）然后就给左右的外边距都设置为auto

文字居中和盒子居中区别

盒子内的文字水平居中是text-align:center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中 左右margin 改为 auto

清除元素的默认内外边距

代码

* {
padding:0;     /* 清除内边距 */
margin:0;      /* 清除外边距 */
} 

注意
行内元素为了兼容性， 尽量只设置左右内外边距， 不设置上下内外边距

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案
尽量给只给一个盒子添加margin值

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

解决方案
可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

盒子模型布局稳定性

按照优先使用宽度（width）内边距（padding）外边距（margin）

原因
margin有外边距合并还有ie6下面margin加倍的bug所以最后使用
padding会影响盒子大小，需要进行加减计算，其次使用
width没有问题，经常使用宽度剩余法高度剩余法来做

浮动

CSS 布局的三种机制

普通流（标准流）

块级元素会独占一行，从上向下顺序排列
行内元素会按照从左到右顺序排列，碰到父元素边缘则自动换行

浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示

定位

将盒子定在浏览器的某一个位置

为什么需要浮动

因为行内块元素可以实现多个元素一行显示但中间会有空白缝隙
因为行内块元素不能实现盒子左右对齐

什么是浮动

概念

元素的浮动是指设置了浮动属性的元素
会脱离标准普通流的控制并可以移动到指定位置

作用

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段
浮动最早是用来控制图片，实现文字环绕图片的效果
可以实现盒子的左右对齐等等

语法

选择器 { float: 属性值; } 


    

        1
    

属性值
none（元素不浮动（默认））left（元素左浮动）right（右浮动）

特点

浮
加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面
漏
加了浮动的盒子不占位置，它原来的位置漏给了标准流的盒子
特
浮动元素改变display属性， 类似转换成行内块元素，但是元素之间没有空白缝隙

浮动的应用

浮动和标准流的父盒子搭配

实际的导航栏中不直接用链接a而是用li包含链接(li+a)
li+a语义更清晰
直接用a搜索引擎容易辨别为有堆砌关键字嫌疑而影响网站排名

浮动的扩展

浮动元素与父盒子的关系
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

浮动元素与兄弟盒子的关系
在一个同一个父级盒子中，如果前一个兄弟盒子是浮动的，那么当前盒子会与前一个盒子的顶部对齐
在一个同一个父级盒子中，如果前一个兄弟盒子是普通流的，那么当前盒子会显示在前一个兄弟盒子的下方

清除浮动

为什么要清除浮动

浮动元素不占用原文档流的位置，会对后面的元素排版产生影响

清除浮动本质

父级元素因为子级浮动导致内部高度为0，清除浮动后，父级会根据浮动的子盒子检测高度，父级有高度就不会影响下面的标准流

清除浮动的方法

语法

选择器{clear:属性值;}  clear 清除 


    

        1
    

属性值
left清除左浮动right清除右浮动both同时清除左右浮动

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>，或则其他标签br等亦可 


    

        1
    

优缺点
通俗易懂，书写方便，但是添加许多无意义的标签，结构化较差

父级添加overflow属性方法

可以给父级添加：overflow为hidden|auto|scroll都可以实现

优缺点
代码简洁，但是内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，.clearfix:after {  content: ""; display: block; height: 0; clear: both;visibility: hidden; } 
.clearfix {*zoom: 1;}  /* IE6、7 专有 */ 


    

        1
    

    

        2
    

优缺点
符合闭合浮动思想结构语义化正确，但是由于IE6-7不支持:after，使用zoom:1触发hasLayout

使用双伪元素清除浮动

方法

.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
} 

优缺点
代码更简洁，但由于IE6-7不支持:after使用zoom:1触发hasLayout

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。

--精美时尚的天气☁️手机app--

--精美时尚的天气☁️手机app--

--精美时尚的天气☁️手机app--

--手机appUI设计--

 （以上图片均来源于网络）

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

  更多精彩文章：

       手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）

       手机appUI界面设计赏析（八）

      手机appUI界面设计赏析（九）

       手机appUI界面设计赏析（十）

     手机appUI界面设计赏析（十一）

网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，

接下来为大家分享一下我收集到的案例：

（以上图片均来源于网络）

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

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

       超赞的创意页面排版设计，打造“视”不可挡的网页设计

文章来源：站酷

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

“个人主页”是一个听起来很熟悉，但又跟“个人中心”傻傻分不清楚的一个模块，一般情况下处于APP底Tab的最右边，通常喊它为“我的”。

这个界面看似没什么挑战可言，给设计师一种“不就是排排版的事儿嘛”的膨胀误解，认为完全在自己射程范围内，整个人都有点飘。

但最近发现，它并不像表面所呈现出的那么简单，其实里面有很多小揪揪需要深挖和思考，所以千万不能小瞧它。

好，废话不多说，上才艺。

 个人主页和个人中心的区别是？ 

讲“个人主页”前，先跟大家捋一下它俩的区别，避免混淆。首先，并没有官方定义它们的名字，只是喊的人多了也就成了它们的名字了。

所以“个人主页”也好、“个人中心”也罢，只是大家习惯性称呼，为了合作过程中大家在同一个话语体系，提效而已。

要说它们俩的区别，其实还是有的。

 什么是个人中心？

个人中心，承载着自己账号信息、设置管理、福利信息等功能的聚合地，主要用于个人信息的管理。

它常见于“工具类”产品中，如下：

对于“个人中心”，设计师要考虑的最核心是：如何解决“效率”问题。因此信息布局合理，视觉尽可能减少干扰，变得格外重要。

什么是个人主页？

个人主页，一般承载着用户个人信息、个人影响力、生产的内容等等，以此突显自己魅力或定位。

常出现在内容、社交、社区类产品中，比如以下产品：

当然，还有一些产品，它既包含“个人中心”，也包含“个人主页”，如下：

整体来看，“个人中心”偏向于个人信息的管理，更关注于“效率”；而“个人主页”偏向于展示自我，关注点更“多元”，会复杂一些，下面会细讲。搞明白了它们的区别之后，大家会发现“个人中心”相对更简单一些。

所以，这次我们先聚焦聊聊“个人主页”。

 设计“个人主页”前思考什么？

在工作中，做任何需求都应该有其目的或目标，不然所有的忙碌都容易沦为资源的浪费。“个人主页”也应有其价值和使命。

像上一趴所说，“个人主页”是为了让用户突显或塑造自己的魅力，很像是一个人的“个人名片”。那么，用户塑造个人魅力对产品有什么价值和收益呢？目标是什么呢？

拿短视频产品举例：如果用户能够在“个人主页”充分展现自己的才华和魅力，从而带来了更多浏览者的“关注”，那他们就更有动力分享或生产优质内容，进而使产品内容更加丰富；从而吸引更多新用户的浏览、留存。

更多新用户的加入、浏览、留存，让内容生产者有更多的涨粉空间，粉丝规模做起来之后再进行商业化。

这样对消费型用户、内容生产者、平台方都有利，进而处于良性循环。

这就是“个人主页”背后的大概逻辑和目的。

 如何进行“个人主页”的设计？

了解完“个人主页”存在的价值和目标之后，那么，作为产品或设计师们需要帮助用户解决几个问题：1.树立人设；2.辅助吸粉; 3.助力变现。

 1.树立人设 

人为什么需要树立人设？

树立人设，本质上是两种目的：获得认可（提升关注/约X），获得收入（提升变现能力）。

如何帮助用户快速建立人设？

个人主页里有几个区域，影响着用户建立人设：a.头图区；b.个人信息区；c.作品区；

a.头图区

头图，指的是“个人主页”顶部的图片区域。

为了让浏览者进入“个人主页”快速了解作者，头图这种处理手法，是很多社交/社区/内容类产品，“树立人设”的标配。

比如：社交类产品的头图，用户要么放自己照片，要么放风景；

大V、商家等角色的用户，会把头图打造成自己品牌的招牌，辅助浏览者快速了解自己定位。

不过，头图尺寸占比要把控好。

尺寸大小会影响界面的“屏效比”和用户“上传门槛儿”，对产品核心数据也有着千丝万缕的关系。

b.个人信息区

个人信息区，也是作者的基础资料。

一般包含着：用户的昵称、账号、简介、标签、粉丝关注量、关系链等信息。这个区域设计时需要重点考虑“信息亲密度”和“信息优先级”。

信息亲密度：指的是如何将更亲近的信息，以信息组的形式传递，减少用户认知成本。

比如下图，常见的社区或内容类产品针对“个人信息区”的处理方式（同一颜色的色块代表亲密度更强的信息。）

同时，“信息组”与“信息组”之间也需要处理好亲密度，比如“小红书”和“instagram”的“好友关系链”与“关注按钮”是放一起的，方便用户快速作出“关注”决策。

c.作品区

作品区的重要性不用多说了，它是作者“树立人设”的重要组成部分，也直接影响着浏览者是否愿意关注的关键因素。

“作品区”设计时，有2个重要因素需要考虑：“作品尺寸占比”、“作品信息外显”。

1）作品尺寸占比:

比如下图，同样是短视频产品，Before作品区一排仅1个作品，剪映2个作品，而抖音3个作品。

单从排版美丑来评价是不负责的，那么如何决策哪种处理手法“对”的呢？

这需要通过自己产品定位分析，以及通过不同布局方式进行上线测试，重点观测核心数据（用户消费时长/作品消费个数/关注率等）的影响情况来决策。

2）作品信息外显:

除了作品本身，它的“辅助信息”也是帮助用户做决策的重要因素。

比如：“Before”除了对作品热度信息（浏览量、评论量等）外显以外，更强调和引导用户进行互动，如：收藏、分享、评论、充电；“剪映”根据产品属性，更强调“使用数”和“作品的描述文案”；“抖音”作品仅外显“点赞数‘，同时通过“置顶”和“刚刚看过”提升用户决策效率。

以上可以看出，头图区、个人信息区、作品区，是让浏览者快速且准确的了解或关注内容创作者重要组成部分，也是内容创作者“树立人设”的主要手段。

 2.辅助吸粉 

辅助吸粉，换句话说也是辅助用户提升“关注率”。

不可否认，清晰的编辑个人信息，产出优质的内容，是用户吸粉的根本，我们能做的只是“助攻”。

所以，在做此类“个人主页”时，我们需要通过设计手段做个靠谱“奶妈”，有几个维度可以尝试：a.强化关注；b.沉淀粉丝。

a.强化关注

衡量粉丝多少，是通过用户是否点击“关注”了内容创作者。

因此身为产品工作人员，在个人主页设计时，除了其它信息呈现以外，在不影响页面信息合理性的情况下，尽可能强化“关注”按钮，引导用户操作。

b.沉淀粉丝

有了粉丝之后，提升粉丝忠诚度和粘性，是每一个内容生产者面临的问题，也是工作人员们需要帮内容创作者解决的。

左边是“快手”，在个人主页内有粉丝群入口；右边是“火山”，打造自己的“圈子”，粉丝们可以在里面发自己的动态，或进行互动。

这么做是为了提升内容创作者的粉丝粘性，给他们更大的空间去运营粉丝，培养感情，打造更忠诚的私域流量。

 3.助力变现 

除了树立人设、辅助吸粉以外，助力他们变现，才能使他们长期扎根于此（留在自己平台）。不然大V们会带着自己圈到的粉丝，去别的地儿赚钱，给你的产品带绿帽子。

拿知乎举例，内容创作者可以在个人主页挂自己的商品橱窗，给符合自己人设的商品带货。

也可以开通付费咨询模块，通过帮助用户解答问题实现变现。

除此之外，还可以做付费Live课程。

再来看下像哔哩哔哩、抖音、火山、QQ音乐等平台，在个人主页都有辅助用户变现的入口。

下面是“声撩”，利用用户声音的优势去变现，比如：陪打游戏（软妹子声音让王者峡谷的汉子们兴奋）、睡前陪聊、睡前连麦等等。

如果你真的很富有，且不想让妹子陪聊陪打游戏，就是单纯的想砸礼物引起注意，右图可以看出，有个入口是直接“送礼”。

这么做满足土豪诉求（博取主播注意），满足主播诉求（变现），满足平台诉求（抽成），何乐而不为。

同时，也越来越多了产品不仅解决C端用户的变现诉求，同时解决B端用户变现诉求。比如，抖音赋能商家，商家号的“个人主页”可以自定义tab，默认展示“商品”tab。

用户不仅能在这里消费作品，还能通过作品建立的信任促进购买行为。

再比如，instagram也提供B端用户开店铺功能。

以上，是关于“个人主页”如何助力用户变现的案例，其实玩法还有很多，这里仅提供一些思路，大家平常玩APP时可以多关注下。

   总结   

总的来说，“个人中心”与“个人主页”最大的区别在于：“个人中心”主要是“给自己看的”，更注重使用效率。

“个人主页”主要是“给他人看的”，更注重突显自己魅力。在满足使用效率的基础上，需要通过产品设计手段帮助用户“树立人设”、“辅助吸粉”、“助力变现”，从而使用户和平台实现双赢，打造一个更完善的生态。

以上，是“个人主页”设计相关思考，希望对你们有所帮助。

文章来源：UI中国    作者：大牙

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

网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，

接下来为大家分享一下我收集到的案例：

（以上图片均来源于网络）

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

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

本文将研究 ES6 的 for ... of 循环。

旧方法

在过去，有两种方法可以遍历 javascript。

首先是经典的 for i 循环，它使你可以遍历数组或可索引的且有 length 属性的任何对象。

for(i=0;i<things.length;i++) { var thing = things[i] /* ... */ }

其次是 for ... in 循环，用于循环一个对象的键/值对。

for(key in things) { if(!thing.hasOwnProperty(key)) { continue; } var thing = things[key] /* ... */ }

for ... in 循环通常被视作旁白，因为它循环了对象的每一个可枚举属性。这包括原型链中父对象的属性，以及被分配为方法的所以属性。换句话说，它遍历了一些人们可能想不到的东西。使用 for ... in 通常意味着循环块中有很多保护子句，以避免出现不需要的属性。

早期的 javascript 通过库解决了这个问题。许多 JavaScript库（例如：Prototype.js，jQuery，lodash 等）都有类似 each 或 foreach 这样的工具方法或函数，可让你无需 for i 或 for ... in 循环去遍历对象和数组。

for ... of 循环是 ES6 试图不用第三方库去解决其中一些问题的方式。

for … of

for ... of 循环

for(const thing of things) { /* ... */ }

它将遍历一个可迭代（iterable）对象。

可迭代对象是定义了 @@ iterator 方法的对象，而且 @@iterator 方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。

在这句话中你需要理解很多东西：

• 可迭代的对象
• @@iterator方法（ @@是什么意思？）
• 迭代器协议（这里的协议是什么意思？）
• 等等，迭代（iterable）和迭代器（iterator）不是一回事？
• 另外，生成器函数又是什么鬼？

下面逐个解决这些疑问。

内置 Iterable

首先，javascript 对象中的一些内置对象天然的可以迭代，比如最容易想到的就是数组对象。可以像下面的代码中一样在 for ... of 循环中使用数组：

const foo = [ 'apples','oranges','pears' ] for(const thing of foo) { console.log(thing)
}

输出结果是数组中的所有元素。

apples oranges
pears

还有数组的 entries 方法，它返回一个可迭代对象。这个可迭代对象在每次循环中返回键和值。例如下面的代码：

const foo = [ 'apples','oranges','pears' ] for(const thing of foo.entries()) { console.log(thing)
}

将输出以下内容

[ 0, 'apples' ]
[ 1, 'oranges' ]
[ 2, 'pears' ]

当用下面的语法时，entries 方法会更有用

const foo = [ 'apples','oranges','pears' ] for(const [key, value] of foo.entries()) { console.log(key,':',value)
}

在 for 循环中声明了两个变量：一个用于返回数组的第一项（值的键或索引），另一个用于第二项（该索引实际对应的值）。

一个普通的 javascript 对象是不可迭代的。如果你执行下面这段代码：

    // 无法正常执行 const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of foo)  



    { console.log(key,':',value) 

}

会得到一个错误

$ node test.js
/path/to/test.js:6 for(const [key, value] of foo) {
TypeError: foo is not iterable

然而全局 Object 对象的静态 entries 方法接受一个普通对象作为参数，并返回一个可迭代对象。就像这样的程序：

    const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of Object.entries(foo))  



    { console.log(key,':',value) 

}

能够得到你期望的输出：

$ node test.js
apples : oranges
pears : prunes

创建自己的 Iterable

如果你想创建自己的可迭代对象，则需要花费更多的时间。你会记得前面说过：

可迭代对象是定义了 @@ iterator 方法的对象，而且 @@iterator 方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。

搞懂这些内容的最简单方法就是一步一步的去创建可迭代对象。首先，我们需要一个实现 @@iterator 方法的对象。 @@ 表示法有点误导性，我们真正要做的是用预定义的 Symbol.iterator 符号定义方法。

如果用迭代器方法定义对象并尝试遍历：

const foo = {
  [Symbol.iterator]: function() {
  }
} for(const [key, value] of foo) { console.log(key, value)
}

得到一个新错误：

for(const [key, value] of foo) {
                          ^
TypeError: Result of the Symbol.iterator method is not an object

这是 javascript 告诉我们它在试图调用 Symbol.iterator 方法，但是调用的结果不是对象。

为了消除这个错误，需要用迭代器方法来返回实现了迭代器协议的对象。这意味着迭代器方法需要返回一个有 next 键的对象，而 next 键是一个函数。

const foo = {
  [Symbol.iterator]: function() { return { next: function() {
      }
    }
  }
} for(const [key, value] of foo) { console.log(key, value)
}

如果运行上面的代码，则会出现新错误。

for(const [key, value] of foo) {
                     ^
TypeError: Iterator result undefined is not an object

这次 javascript 告诉我们它试图调用 Symbol.iterator 方法，而该对象的确是一个对象，并且实现了 next 方法，但是 next 的返回值不是 javascript 预期的对象。

next 函数需要返回有特定格式的对象——有 value 和 done 这两个键。

next: function() { //... return { done: false, value: 'next value' }
}

done 键是可选的。如果值为 true（表示迭代器已完成迭代），则说明迭代已结束。

如果 done 为 false 或不存在，则需要 value 键。 value 键是通过循环此应该返回的值。

所以在代码中放入另一个程序，它带有一个简单的迭代器，该迭代器返回前十个偶数。

class First20Evens { constructor() { this.currentValue = 0 }

  [Symbol.iterator]() { return { next: (function() { this.currentValue+=2 if(this.currentValue > 20) { return {done:true}
        } return { value:this.currentValue
        }
      }).bind(this)
    }
  }
} const foo = new First20Evens; for(const value of foo) { console.log(value)
}

生成器

手动去构建实现迭代器协议的对象不是唯一的选择。生成器对象（由生成器函数返回）也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样：

class First20Evens { constructor() { this.currentValue = 0 }

  [Symbol.iterator]() { return function*() { for(let i=1;i<=10;i++) { if(i % 2 === 0) { yield i
        }
      }
    }()
  }
} const foo = new First20Evens; for(const item of foo) { console.log(item)
}

本文不会过多地介绍生成器，如果你需要入门的话可以看这篇文章。今天的重要收获是，我们可以使自己的 Symbol.iterator 方法返回一个生成器对象，并且该生成器对象能够在 for ... of 循环中“正常工作”。 “正常工作”是指循环能够持续的在生成器上调用 next，直到生成器停止 yield 值为止。

$ node sample-program.js
2
4
6
8 

    10



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

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。

--手机appUI设计--

 （以上图片均来源于网络）

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

  更多精彩文章：

       手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）

       手机appUI界面设计赏析（八）

      手机appUI界面设计赏析（九）

       手机appUI界面设计赏析（十）

先来了解一下项目的背景。Conduira online是一个线上的教育平台，为准备考试的用户提供有用的工具和资源。这个平台目前有一个侧边导航栏，上面有11个选项。后来由于平台的变化，将主导航的选项缩减到3个——主页、实习和课程。

导航的数量变少了，团队又迎来了新的问题：是应该继续保留侧边导航的设计样式还是切换成顶部导航的样式呢？

为了做出最合理的选择，我们需要回答三个基本的问题。

主导航中有几个选项？

在选择导航时回答这个问题很重要。这里介绍一个有趣的的交互概念叫做视觉固定（Visual Fixation）：注意力一直保持在同一个地方。

在顶部导航中，一个视觉固定点通常只适合一个选项。然而，侧边导航上的单一视觉固定点可以同时容纳两个选项。

结果很明确。与顶部导航相比，用户在一次视觉观察中可以在侧边导航上查看和感知更多菜单选项。当然顶部导航也有自己的优势，为每个菜单项赋予各自的权重，而不是让它们的重要性被其他选项分散。

对于具有过滤选项或带有二级菜单的电商网站，视觉固定的概念起到了非常重要的作用。因为在这些情况下，我们希望用户能够在单一的视觉点上尽可能多的选择。

Tips：这里的选择仅仅取决于界面上有多少选项。如果主导航的菜单项不多于5个，只需使用顶部导航，这样能够更好地控制用户在整个平台上的体验旅程。

主导航与选项优先级的关系？

用户在浏览网页或App时会有各种各样的浏览顺序，其中一种就是「F型模式」。

看起来像这样：

F型布局的特点是将注视力集中在页面的顶部和左侧:

• 用户首先以水平移动的方式浏览内容区域，这个动线构成了F型布局的顶栏；
• 接下来用户扫描页面左侧的垂直线，进行第二次水平移动浏览。随着路径越来越长，阅读覆盖的区域一次比一次短，构成了F型布局下面的部分；
• 最后用户以垂直移动的方式浏览整个页面的内容。

这种模式的含义是同一页面上的第一行文本比后几行文本受到更多的关注；每行文本左边的几个字比后面的文字接受度更多。

因此，在顶部导航中最左边的选项比其他选项具有更多的视觉权重，因为它位于主要视觉区域，优先级更高。

侧边导航采用了垂直移动，这是用户浏览网页的一个自然方向，但是选项优先级的排序是个限制。当选项的优先级相同时，可以使用侧边导航，这样用户就可以完整浏览列表并确定对他们重要的内容。

是否考虑使用二级导航？

如果是的话，可以考虑利用以下两种设计样式：

水平导航——在页面顶部设置一个主导航，在主导航下面设置二级导航进一步来区分内容。

侧边栏——在顶部设置一个主导航，然后在侧边设置一个侧边栏菜单来处理其他内容。

总结

顶部导航和侧边导航之间的选择实际上取决于以上三个基本的问题。

另外由于现在的设备有了更大的屏幕尺寸，如今许多设计趋势已转向侧边导航，因为它看起来更干净并优化了更多的屏幕空间。

最后将导航的选择归结为两点：

• 主导航包含的选项数量;
• 是希望用户根据优先级浏览项目，还是希望用户可视化地浏览并根据其偏好选择项目。

文章来源：优设    作者：Clip设计夹

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