@董弈 ：列表算是一个非常基础的设计元素，无非是一排一排的数据内容，加上一些基本的操作。最近连续设计了一个礼拜的列表后，最直观的感受是：再简单的东西，也有很多的细节需要思考。尤其对于很多数据产品和工具型产品，列表是非常重要的一部分，例如电子邮箱，文件系统（Google drive, dropbox)。一个信息结构合理，操作明确表格、列表设计，能够帮助用户减轻很多的阅读负担。这篇文章会分享一些列表设计中的基本思路。

随着信息和技术的发展，手机屏幕越来越大，界面开始承载越来越多的信息，繁复的界面装饰细节，让界面显得越发臃肿，人们开始更多的关注界面的内容和功能，信息框架呈现出扁平化的趋势，在设计风格上，设计师们也不再追求3d、拟物化的设计，而是越来越崇尚扁平、简约的设计理念。

版面的构成是信息传播的桥梁，发挥版面元素中各自的特点和功能，会使整个版面完成从视觉到内容的完善性和美观性，从而更快、更准确的传递信息，所以版式设计一直以来广泛应用在广告、招贴、杂志等平面设计中。虽然在移动应用中是以用户的操作和使用体验为主，但随着扁平化潮流袭来，我们不再通过细腻的质感和光影提升界面的品质，拉开界面的层次，那我们靠什么来吸引我们的用户，为用户创造良好的阅读和使用体验呢？

缺省页面，是出现在用户没有提交任何资料或者网络连接不通畅的情况下所展现的页面。通常设计师们习惯用丰富的数据内容把页面设计得美观实用，考虑的都是界面展现的“理想状态”，往往会忽视没有内容的“缺省状态”。未经过精心设计的缺省页面降低了用户的使用体验，并可能给用户带来困扰，如下图iOS系统邮件App，无邮件时界面上没有任何有效反馈信息，用户不能明确得知到底是网络问题还是账号同步出错亦或者是收件箱内确实一封邮件都没有。同样的情况也出现在Pinterest和出发吧的界面里。

鸿影：与商业创新、技术创新、组织创新等相比，设计创新大概是很多人心目中「最没有门槛」的一个，新颖有趣的交互模式与视觉风格，固然可以在刚推出时让人眼前一亮，但却非常容易被竞争对手复制，难以长期维持独特的优势。

设计创新就没有壁垒可言吗？怎样才能做出让竞争对手更难以复制的设计创新方案？这段时间我一直在思考这个问题，在阅读基利等人著的《创新十型》时，从中获得了一些启发，在此记录下来。

流程

流程创新涉及企业生产主要产品或服务的活动和运营，采用精益生产系统来减少浪费、降低成本的方式，是流程创新的典型案例。

在设计的时候，要记住核心内容和路径的元素：核心内容是什么，用户如何得到它，以及业务如何转换？

“规划道路的方法，是先在自然景点中设置目标点，再将这些点彼此相连形成路径。” ——Christopher Alexander

原则上，亚历山大的做法是以目标——即人们最终想要的东西为导向，然后将它们以最有用的方法连接在一起。

但在网页设计中，遵循的方法通常是相反的：设计师从主页开始设计。然后他们根据网站结构层次制定出一个导航方案，不管合适与否。但是目标（用户正在找的主要内容，或是他们想要做的事）却成了设计过程中被考虑的最后一件事情。

受到“交通需求线”的启发，我们可以改善这种设计网页的方法。使用核心-路径这种方法，可以指导你在网站中创造最直接的路径，以便用户直达核心内容。

我们几乎每天都会接触形形色色的表单，登录账号、填写信息以获取服务、发布内容等。然而填写表单的过程往往不是特别愉悦的，我们需要消耗时间输入信息，点击提交，可能还需要等待审核；尤其是碰到较为复杂、流程长的表单，如果用户体验较差，很容易让人产生挫败感，在中途选择放弃。

那么，如何提高用户填写表单的效率，防止他们出错或中途流失，提升愉悦度及转化率呢？本文就web表单设计，总结了以下的一些方法

先忽略动效，提出几个问题，大家可以尝试以前面学习的经验来思考一下。

1. List 不用图片来代替，怎么实现？
2. 所有List内容都不一样，怎么实现？
3.   所有List 都能保持一个统一的操作，怎么实现？
4. …… 

OK，如果仅前2个问题来说，用“笨”方法都是很简单，到第3之后，就有点坑了，是要复制N个重复Patchs？简直要疯掉有木有～ 当然Origami 没这么傻，是有专门的Patch 解决这样的情况的，这就是今天学习的重点，Loop 系列的Patch，效果类似 Craft 的 Duplicete

JavaScript 字符串用于存储和处理文本。因此在编写 JS 代码之时她总如影随形，在你处理用户的输入数据的时候，在读取或设置 DOM 对象的属性时，在操作 Cookie 时，在转换各种不同 Date 时，诸此等等，繁不能数；而她那满多的 API 呵，总有些让人不愿去记忆的冲动，既然用时常搜，倒不如烂笔头一翻，顺道也体现下博客存在的价值，由此就有了这篇纪要。

字符串截取

1. substring()

xString.substring(start,end)

substring()是最常用到的字符串截取方法，它可以接收两个参数(参数不能为负值)，分别是要截取的开始位置和结束位置，它将返回一个新的字符串，其内容是从start处到end-1处的所有字符。若结束参数(end)省略，则表示从start位置一直截取到最后。

什么是费兹定律

要探索费兹定律的运用方式，我们首先需要了解这条定律是什么，它是怎样诞生的。

费兹定律由俄亥俄州立大学的心理学家Paul Fitts于1954年提出，旨在为人类在电脑屏幕上点击目标对象的行为建立模型，同时涉及到了肢体移动及鼠标行为方面的问题。

举个栗子，设想你的注意力和鼠标指针正停留在某个网站的logo上，而你被告知要去点击页面中的某个按钮，于是你需要将注意力焦点及鼠标指针都移动到那个按钮上。这个移动过程当中的效率问题就是费兹定律所关注的。

费兹定律的原始公式是这样的：

MT=a + b * log2(D/W + 1)

其中MT代表位移所需花费的时间，这是我们最需关注和解决的问题。a与b两个变量代表系统方面的耗时及效率，属于经验参数。D代表初始位置与目标位置之间的距离，W代表目标对象的尺寸。

在理想的情况下，一个完美的产品不需要任何用户帮助。但在现实中，由于产品功能的复杂多样，用户需要在不同阶段获取不同的指导信息，才能顺利完成任务和解决问题。

传统的软件开发模式中，用户指导信息主要体现在联机帮助中，但这样的设计方案往往会降低用户使用产品的体验。因为从用户的角度来说，获取帮助应该是软件应用程序的一部分，而不是脱离它。通过调研发现，如果用户在使用软件的过程中，需要中断操作，并花费时间在联机帮助或电子手册中查找指导信息，用户往往会觉得低效，并引发沮丧的情绪。因此，需要考虑在界面提供合适的帮助信息，指导用户进行操作，而不能将指导信息隐藏在厚重的联机帮助中。