我们一起学了很多,有时又会感觉什么也没学到,有天我听了一个广播受到点启发,这种迷惘地感觉其实是因为没有目标,没有终点,因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标,然后完成,这样感觉会好一些,可以验证所学,也可以接受一些挑战。
先从一个商业网站开始吧,功能不会太难,需求又很大,又可以很好地展示网站从设计到开发再到部署的整个过程。我觉得商业网站的主要任务就是去讲故事给目标客户听,让他们了解,接受,使用网站提供的产品与服务,这其实也是任何网站与应用都需要有的功能。
模仿
为了更真实一点,开始我想假装某国际公司找到我们,要求设计与开发一个网站。我还我问过一位在上海某家 Web 开发机构工作的大哥,咨询他想要做的这个网站的报价,如果是机构做的话,大概 30 万左右,个人做大概是 8 万左右。我给这家公司发了邮件,请求使用他们网站的图片与文字。对方非常客气地拒绝了。所以,我们得低调点,偷偷地用一小部分。
我尽量让网站的设计与开发更普遍化,因为大部分商业网站或者说任何网站都有一些共用的东西:导航,幻灯片,图文列表,产品页面 ... 所以不管你以后是不是要做商业网站,也可以学到一些你需要的东西。
设计
我喜欢简洁有效的设计,所以你不会看到我去做多么复杂,多么炫酷的视觉效果。我认为设计要为目的服务,如果一个页面的目的是讲个产品故事,那我们的设计就应该流畅自然地讲完这个故事。如果一种效果或一个设计元素可以帮助我们更好地讲这个故事,那就用一下。如果没有帮助,那就很可能是一种干扰,应该考虑去掉它。
我们真的会拿起设计工具,甚至有个视频我专门去买了一个设计应用(Sketch)。先把最终要展示出来的页面用设计图的形式表示出来。这个设计图是你跟客户或团队的其他成员之间的很好的交流工具。
流程应该像这样:草图 - 线框图 - 设计 - 原型 - 开发。草图是你最初的想法,很可能是在一张白纸或脑子里完成。线框图可以展示页面大体的样子,线框图不会包含具体的内容,用一些形状表示页面上出现的元素。然后去设计具体的元素。完成以后做出原型,原型会带交互,比如点了哪里链接到哪里,页面切换的效果等等,原型非常接近网站与应用最终的样子。最后一步是去开发。我跳过了草图与原型。
我用的这个设计应用(Sketch)目前只能在 macOS 上运行。如果你正好用的也是这种操作系统,并且愿意花 99 美金买一个这样的应用,可以跟着做一下。如果您不愿意花钱去买这个应用,或者用的是 Windows 平台,或者您已经有了自己已经习惯的设计工具,那可以跳过这部分内容。
开发
有了设计,我们会先一点一点把它用 HTML + CSS + JavaScript 的形式表示出来,做出静态的页面,也就是用浏览器能懂的方式把页面表示出来。这部分内容会用到一些样式框架,一些 JavaScript 库,我们也会自定义一部分样式,也会写几行 JavaScript 。这一步还会用到一套完整的工作流程,这个工作流程又会用到一些工具,所以在第一集里我就介绍了这套工作流程,还有它里面包含的工具。了解一下这些工具,非常有必要,这样再遇到它们的时候你就不会怕了。
网站与应用还得有个后台,可以管理内容,可以动态地生成用户请求的页面。后台框架可以选择的就非常多了,WordPress,Drupal,Laravel,Rails,Express ... 任何能让你完成目的的框架都可以。我会先选择其中的Drupal。首先 Drupal 是有品牌的,有数不尽的大型组织为他背书,所以你很容易说服你的客户使用 Drupal 。还有,Drupal 拥有非常好的社区,不管到哪儿,你都不会感到孤单。另外,他也非常适合我们要做的东西。
部署
我们会一起亲手搭建服务器,把做好的网站部署到服务器上。
工具
我会尽量减少使用的工具。称得上工具的东西,它就是给我们提供帮助地,不是来吓唬我们地。我不算勤快,所以,你得相信有懒病的人(我),他不会喜欢去做不必要的工作。如果由于我得愚蠢,把事情弄复杂了,请你一定要救救我。
慢慢说
我会慢慢说,尽量让大伙都能看懂我在干什么,所以非常适合新手看。虽然如此,如果你是完全的新手,将会听到大量的陌生词汇,这会让你非常头痛,我还没有太好的方法解救你。不过,如果你能坚持跟着做,我保证过了一段时间,等你慢慢熟悉了这些陌生的东西,一定会豁然开朗。这很可能没有快捷方式,一定是要等一段时间才会这样。或许我们的脑袋就是这么工作地。
附注
- 《 网站与应用:商业》1:https://ninghao.net/course/4688
如果您之前看过宁皓的课程,并且认同我们的风格,不用想太多,应该马上订阅我们。遇到合适的太难了,真的。



