How to design a sweep function to be more elegant

Writing in the front

As shown in the picture above, two-dimensional code can be seen everywhere in our daily life. Its functions need no further words. It has completely changed consumers’ usage habits, improved users’ operating experience, and narrowed the distance between people, people and things and even things.

There are many usage scenarios of TWO-DIMENSIONAL code, such as adding friends, following public accounts, mobile payment, and many certain activity entrances. Users do not need to remember too much information, take out their mobile phones, and gently scan each other’s information to complete the operation; In the era of mobile payment, it is also because of the convenience of this function that it can develop more widely and chop hands for a moment. In many activities held by businesses, you only need to provide a QR code picture, and then through the crazy forwarding of social media such as moments of friends, hundreds of millions of users can participate in activities with businesses at zero distance, and then share them twice, thus bringing traffic to businesses.

However, all of the above conveniences are inseparable from the function of scanning. Below, I stand on the basis of a just contact with this industry, with everyone to talk about my head sweep sweep is how to design (such as criticism, please ai te me).

Is the body of the

What does the dominant app do in the market

Surely the products and developers in contact with this industry all know that, no matter what application, the function of this piece should be very different, all roads lead to Rome, but the rules should be unified.

Then I will teach you how to suck eggs here, and experience the scan function of wechat.

1. Take a look at the wechat scan result first

Here because it is my TWO-DIMENSIONAL code, so the operation shown below is to send messages, if it is a stranger’s two-dimensional code, it is to add to the address book. Here you can know that the operation of scanning this TWO-DIMENSIONAL code is to view the user’s personal information. So what information is hidden in this QR code? We can scan the results with other tools.

2. Check the forage scan results

Obviously, this is an HTTP URL link

http://weixin.qq.com/r/35zcxLnE_uSFrf2n98nN
Copy the code

Let’s analyze the general parameters of this URL first, using a table to illustrate:

It is worth mentioning that this URL is really accessible, through the computer to open will directly jump to the official website. Many people (including our QA staff) may ask why such a simple function of scanning code to view data should be made into a complex logical URL hyperlink.

3. UC code scanning result

The above is the result of scanning code in UC browser, which also redirects to wechat official website. However, the difference is that the wechat APP is directly opened immediately afterwards (if it is installed), or the APP market is jumped to inform users to download the wechat APP. That we can explain very well here, and why the qr code scans using url hyperlinks, because it can better guide the user experience, so as to improve the flow rate of the product that is to say, no matter you through what way, what the application code, for the user, you can very quickly very intuitive to know that what you scan, It is no longer a section of characters in the practical sense of two-dimensional code. From the point of view of the product, it can also ensure that the loss of user traffic is reduced and the operation experience is greatly improved.

How should we design our application

That this has much to do with the demand of the product itself, but the development train of thought and logic are unified, super APP, such as the WeChat brainstorming, cool people have all kinds of projects should be will all kinds of modular, modular design, with a simple scan function, as a module, in his function and the coupling between and other modules, Of course, I didn’t find any relevant information. Now I can only talk about how I dealt with it according to recent projects.

1. The result of qr code scanning must be an accessible hyperlink

I don’t think anyone can argue with that.

There are two advantages to this definition. First, user experience and diversion can be better, which is mentioned in the above analysis. Second, in terms of research and development, it is very convenient to integrate functions into our routing module through hyperlinks. Of course, there are other methods here, but they are also defined to deal with scan results.

In the figure above, the scan function can be directly integrated into the routing module in the form of hyperlink. In scheme mode, the domain name is first replaced with a self-defined Scheme. If the routing module can handle it, it will be discarded for processing. Other logical operations are left to the Web page, such as directing the user to the official website, reminding the user to download the application, and other errors.

2. Make some optimizations for better compatibility with the scan function

Here, we add some general processing operations to the routing module by function, either by category or by proxy protocol. This optimization not only optimizes the scan function, but also optimizes the logic of other modules using the routing module.

So we can get started

Apply to the environment

XXX application-specific functions invoked by Web or other applications can also be used for intra-application function hopping

Support system

IOS, Android, H5

If there are inconsistencies caused by system features, list them in details in the protocol

Call way

Web side

appwebv2.xxx.cn//?parms (AppWebv2test.xxx. cn)

The App end

xxxapp:///? params

The Web calling end needs to check whether the XXX application is installed. If yes, invoke xxxapp://. If not, invoke the Web or prompt the user to download the application according to the actual definition and function

The App side needs to route through xxxapp:// first

If the local directory has been registered, continue

Open the Web page directly from the in-app browser without registration (need to match the template to fill the necessary parameters)

The sample

Appwebv2. XXX. Cn/action/bind… ? appversion={version}&platform={platform}&xxxkey={xxxkey}

The first half of the link is generated by the server, and the parameters in red need to be concatenated in the URL when the client cannot open the function through the route.

The parameters in red are matched and filled according to the template link of the server, and then the TWO-DIMENSIONAL code is generated for display.

Necessary parameters

Functionality has been implemented

According to the above definition and logic, the sweep function can already be defined accordingly bricklaying implementation. The routing function can be implemented locally or, like Mogujie, the processing operation can be changed at any time through background configuration.

So, a page is prepared on the Web side and the hyperlink is

http://appwebv2.xxx.cn/action/bind/bike
Copy the code

Before generating the QR code, the server gives you a string that says

http://appwebv2.xxx.cn/action/bind/bike/11234/? appversion={version}&platform={platform}&xxxkey={xxxkey}Copy the code

The client generates a TWO-DIMENSIONAL code according to the string through matching and filling

The practical result of qr codes is this

http://appwebv2.xxx.cn/action/bind/bike/11234/? Appversion = V1.0 & a10362d077 platform = iOS&xxxkey = 3cd27b5f2c537e1ff2fc48
Copy the code

At this point, the add vehicle function will be invoked by XXX application scanning. Sweep through a third party APP code, will open a browser and the web page will again try to call XXX application through the system, if you can’t tune up, remind the user to the store to download, if we can adjust the application of XXX application after the start, through the routing module, the first to jump to scan interface, and then call to add the function of the vehicle, If the route cannot handle the HTTP hyperlink, the browser is called to reload the Web page.