博客

设计：导航 - 移动端

在《 网站 》这个系列里面，我们会一起设计与制作一些页面上常用的界面元素，导航是页面上必备的元素之一。主导航的功能就是展示网站的内容结构， 它是用户访问网站不同区域的一个入口。这一集会先使用设计工具，设计导航在桌面设备与移动设备上的样子。课程后半部分介绍了使用 sass 创建的样式。

导航栏在桌面尺寸的设备上会显示在页面的顶部，导航栏上一般会有标志，菜单，还有一些工具，比如搜索或登录。我们设计的导航栏有两个状态，一个是正常状态，还有一个是搜索状态，就是点击导航栏上的搜索图标以后，会把导航栏上的标志与菜单隐藏起来，显示一个搜索框。

导航栏在小尺寸移动设备上有不同的样式，导航栏上的菜单会被隐藏起来，导航栏左边会显示一个菜单图标（汉堡包），点击这个菜单图标会在页面左侧显示一个边栏，边栏上的内容就是导航栏上的菜单。在下一集，我们会介绍使用代码的形式表示这个导航栏的方法。

商业网站

线框图（Wireframe）就是抽象化以后的具体的页面。页面的线框图一般没有具体的设计元素，都是用一些图形来表示页面上即将要出现的元素。制作页面的线框图，一般是在确定了想法之后，在具体设计之前。用最简单的东西把你的网站或应用的界面表示出来，主要就是把页面的布局，或者框架先定下来。然后再去设计具体的元素。

《 网站 》第二集，我们用 Sketch 设计工具，为即将要设计与制作的网站首页先做了一张线框图，让你对页面的结构有个大概的印象。在做线框图的时候，你应该已经先确定了想法，就是要做的页面的功能是什么。比如一张产品介绍页面，它的主要功能就是介绍产品本身，你的设计要配合页面的功能来完成目的。

我们要先做一张网站的首页，假设网站属于一家生产汽车的公司。首页是最常用的登陆页（Landing Page）， 你的用户很可能是通过首页认识你的。首页也就经常是用户对你的第一印象。我们可以通过一些常见的元素来传达一些信息，我是谁，我能为你做什么，我提供了什么样的产品与服务，我的用户如何使用我们的产品，我需要你做些什么，比如下载试用版的应用，报名参加体验活动。

本地服务器

工欲善其事，必先利其器。

做什么都需要一套工具，你使用这套工具完成任务，这个过程就是工作流（Workflow）。我们要开始学习 Web 设计与开发，同样需要一套工具，也要有自己的一套工作流。在《 网站与应用：商业 》第一集里，介绍了 Web 页面设计与开发的一套工作流。了解自己要使用的工具可以更有效地工作。

这么多年一直不太了解会员的情况，比如他们在宁皓学到了什么，去了哪里，做了什么。这让我有点惭愧。今天收到一位会员的微信，说要聊点事情。我们用语音聊了将近一个小时，感觉非常地亲切。我也非常开心，得知他去了一家上海挺有名气的 Drupal 公司。更让我兴奋的是，他是远程办公（Remote）。我跟他说，如果我决定做强，也想实施远程办公。

他人在广西，平时除了正常的工作，周末还会在一所职业学院里教书。一开始，教一些前端的东西，后来得知学校要开 CMS 开发课程，就申请了，后来他把 Drupal 引入了这所高校。我说这所学校的学生有福气啊。

两年前他成为宁皓网的会员，学习了 Drupal，他把 Drupal 引入学校，又入职一家专做 Drupal 的公司，而且是远程办公。这让我感到很幸福。其实他跟我联系的主要目的是合作开发一套系统化的课程给他们的学生，因为这家上海的公司想在全国推广 Drupal 。他们非常重视对 Drupal 人才的培养，最近也在公司内部开了对外的培训班。

我们一起学了很多，有时又会感觉什么也没学到，有天我听了一个广播受到点启发，这种迷惘地感觉其实是因为没有目标，没有终点，因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标，然后完成，这样感觉会好一些，可以验证所学，也可以接受一些挑战。

先从一个商业网站开始吧，功能不会太难，需求又很大，又可以很好地展示网站从设计到开发再到部署的整个过程。我觉得商业网站的主要任务就是去讲故事给目标客户听，让他们了解，接受，使用网站提供的产品与服务，这其实也是任何网站与应用都需要有的功能。

模仿

为了更真实一点，开始我想假装某国际公司找到我们，要求设计与开发一个网站。我还我问过一位在上海某家 Web 开发机构工作的大哥，咨询他想要做的这个网站的报价，如果是机构做的话，大概 30 万左右，个人做大概是 8 万左右。我给这家公司发了邮件，请求使用他们网站的图片与文字。对方非常客气地拒绝了。所以，我们得低调点，偷偷地用一小部分。

我尽量让网站的设计与开发更普遍化，因为大部分商业网站或者说任何网站都有一些共用的东西：导航，幻灯片，图文列表，产品页面 ...   所以不管你以后是不是要做商业网站，也可以学到一些你需要的东西。

我们一起学了很多，有时又会感觉什么也没学到，有天我听了一个广播受到点启发，这种迷惘地感觉其实是因为没有目标，没有终点，因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标，然后完成，这样感觉会好一些，可以验证所学，也可以接受一些挑战。

组织 CSS 样式的方法挺多的，这些方法可以让你更好的去创建与管理 CSS 样式。这些方法都有自己的名字，BEM 就是一种组织 CSS 样式的方法。B（Block）E（Element）M（Modifier），区块__元素--修饰符。

比如你想为下面这块代码添加 CSS 样式：

 <ul>
   <li>item 1</li>
   <li>item 2</li>
 </ul>

CSS 样式看起来可能像这样：

ul {
  list-style: none;
}

ul li {
  margin-bottom: 16px;
}

在上面的样式里，我用了后代选择器（Descendant selectors），ul li 表示的是，找到所有的 li 标签，这个标签在 ul 标签里面。

如果用 BEM 的方式去创建这块样式，应该像这样：

.list {
  list-style: none;
}

.list__item {
  margin-bottom: 16px;
}

50 人左右的小组已满员，不能再申请加入了。

小组任务：从头开始完成一个网站。少扯淡，多学习。有任务，必须完成。不答疑，只交流特定主题。凭宁皓网用户名 + 订单号验证加入 QQ 群：177757910（验证信息填写您在宁皓网的用户名 + 订单号，比如 zhangsan-2610）。

要做的是一个商业网站，这种网站的主要功能就是展示内容，给用户讲故事，让潜在用户成为网站提供的产品与服务的真实用户。这种网站的需求量很大，任何个人，组织，公司都有可能要展示产品与服务并且销售出去，这里说的销售不一定非得是钱的交易，销售的可以是一个点子，一种思想。

如果你是宁皓网的付费会员，并且对这种商业网站有兴趣，加入这个学习小组。

Redux 应用里的数据流是单向的。数据的生命周期有四个阶段：

1. 调用 store.dispatch(action).

   一个动作就是一个纯对象，描述了发生的事情，比如：

    { type: 'LIKE_ARTICLE', articleId: 42 }
    { type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
    { type: 'ADD_TODO', text: 'Read the Redux docs.' }
   

   把动作想成是一些简要的新闻： “Mary liked article 42.” ， “‘Read the Redux docs.' was added to the list of todos.”。在应用的任何地方你可以调用 store.dispatch(action)，包括组件，XHR 回调等等。

Redux 应用里的 Actions 表示在应用里发生的事情，Reducers 会根据发生的事情去更新应用的状态。再来了解一下 Store。

Store 的主要任务是：

1. 持有应用的状态。
2. 允许访问状态：getState()。
3. 允许更新状态：dispatch(action)。
4. 注册监听器：subscribe(listener)。
5. 用 subscribe(listener) 返回的东西，可以注销监听器。

注意在 Redux 应用里只有一个 Store。如果想分离数据处理逻辑，可以使用组合 Reducer 的方式。

有了 Reducer ，很容易用它去创建一个 Store 。之前我们用 combineReducers() 把几个 Reducer 组合成了一个，现在我们可以去导入它，然后把它交给 createStore()。