table of Contents
Foreword
Promotion page and landing page, landing page, details page is very similar to my own understanding is: to promote the page to focus on marketing; namely landing page landing page, is both a meaning, they are more focused on creating an excellent customer experience , simple and clear, guide the customer in order to achieve results; details page is similar to Taobao commodity related presentations, mostly presented in the form of pictures, three in front of it is a code presented website.
First contact, a few days began to see a lot of information and do not know where to start, after communicating, learning by doing will try to find inspiration in the design to the implementation process also encountered many problems, such as colors question, the overall effect of lack of coordination problems, lack of coordination and so on down the title bar. Overall the effect is to be improved, but also accumulated a wealth of experience to the next.
1. preparatory work
1.1 determine the theme
The first is to determine the theme, know about the outline, clear general design direction, there will inevitably be forced to rip off the state at the beginning of the contact, I do not know how go about it this time because there is no much experience, how to do? It must go access to large amounts of data, of course, one hundred which perhaps only a few are valuable, this process and the process of writing an essay of the same, with reference to the hundreds of articles, it is that ten articles valuable.
Figure 1.1-1 reference, we collect the necessary data
1.2 Outline painting, understand the design outline
After a clear topic for a design method of such a page, we can know, you need to how to design the kind of direction, at this time about the need to write their own ideas out of a whole, that is, we often said write outline, the outline of course there will be many changes, not just an outline can overview all. As shown in FIG 1.2-1:
1.2-1 topic outline
1.3 Preparation Software
The software side, I personally use the Adobe XD, WebStorm, PS. XD The whole process is the most used, XD is used for interface design is very good, XD lightweight interactive interface design software,
PS combines the advantages of AI and facilitate rapid export XD, while writing the code is very suitable, in side XD which modify the selection, as shown in FIG 1.3-1:
One advantage of the Figure 1.3-1 XD
2. Interface Design Process
Interface design process is relatively long, but also very necessary, and only designed to cross the border, only need to write code intact "written down", plus some dynamic effects, basically the code can be completed within a week preparation. The design process should pay attention to several issues, first is the title bar of the best style to unify, shown in Figure 2.1:
Figure 2.1 Style To unify
Figure 2.1-1 unified style
The second question is: no matter how rough the previous design, how ugly they should not delete the file, each revision should keep for future reference and their view, had the know went wrong, that he had located state, is also an iterative process, shown in Figure 2.2:
FIG iterative process design draft 2.2
第三个问题是：不管在使用PS、AI又或者是写代码的时候，都应该养成一种良好的习惯——写注释，写好备注，就不会在你设计和写代码过程中出现找不到你想找的东西在哪里，也算提高可读性，提高效率的一种方法，以前我也是不在意这样的细节的，但是当代码量多时，图层多时，就特别难马上找到自己想找的那行代码或图层。
图2.3 注释的作用
3. 代码编写过程
本次的代码编写要考虑到的是手机端和PC端同步，要做好相关响应式问题，确保在PC端看到的同时，手机端也可以不出差错，要满足手机端的要求，在<head>标签中加入如图3.1所示的一行代码：
图3.1 为手机端实现添加代码
加入此段代码之后，就可以实现响应式。当然了，由于手机端相对PC端来说，字体的大小是有一定限制，电脑上一个div可以显示完的一段话在手机端就未必可以显示完，因此我们就有必要控制字体比例大小，用transform:scale(0.9)来控制显示的大小比例。如图3.2和3.3所示：
图3.2js控制字体比例
图3.3 css控制最小字体比例
同时，代码的编写也要注意的两个问题。第一，做好代码注释，不管项目大小，注释是一个良好的代码习惯，主要是为了避免自己写着写着，就不知道写到哪里，也是为了避免当别人接手项目的时候再花费过多时间去理解你的代码，写上注释就可以很方便别人看了，当然真正上线的时候代码注释要去掉，留档自己用的最好写上注释。如图3.4所示：
图3.4代码注释
第二个问题就是，JS放置的位置，一般JS标签放置body里面的最后，因为当运用到一些插件的时候，会因为各种原因，一定需要放置在body最后面，又或者为了方便查看JS代码，引用了JS之后，就接着写他的效果，就很好的关联了起来。当然，写在head头部标签里面也可以，不管写在哪个地方，个人经验是自己写的引用，必须写在引用别的JS插件之后，主要是为了避免出现引用的代码没有效果。如图3.5所示:
图3.5 JS代码放置的位置