Webim V5 's thing.

Source: Internet
Author: User

Why do you want to be revised?

With the development of technology, the progress of the Times, Weibo users of the Internet equipment is also rapidly updated.

This is a group of micro-blogging user's screen resolution using data.

As the screen resolution is getting higher, the accompanying value, that is, the blank area outside the Display page is also getting bigger and larger, how to make good use of this part of space is a worthy research topic.

Look at some of the previous similar products





5.Tencent Weibo


7.Baidu hi

Experience research on the web chat product and designers and products after discussion, to absorb its essence, to its dross, I have the idea of this design.

I have defined two modes, mode one and mode two.

Mode two is only a few conservative attempts at the existing Webim experience: improve the permanent state of visual perception, the previous online state has been added to shape, improve its visual sense of existence; increase the original contact list height to take advantage of more free space on the screen.

Mode one is to change the original base resident state to the permanent form of the side strip, in order to use the screen space without affecting the user's feeling, the chat object is presented to the user according to some logic recommendation, aiming at increasing the usage scene, making the user more convenient to use and making the user more likely to use; The expanded contact panel is displayed in a banner way, this is a bolder attempt, but since expanding the contact list is a user's active behavior, and the actions of the collection are more convenient to distribute in the blank area and the Close button, I think it is acceptable.

Pattern one on the left of the diagram above, and mode two on the right.

With regard to mode one or two switching, I went 1000px around for a watershed.

I think the screen resolution is higher than 1000px, so the user's screen has more space to show our Webim, so we will mode one and mode two let him in the bottom area of the settings to switch, but the default display to its bolder mode two.

and the screen resolution of less than 1000px I think is a lower resolution of the user, the user's screen space is relatively limited, most of the 800*600 users, they still implement a more conservative mode one, with a small footprint of the bottom resident mode.

Let me say mode two.

This pattern is designed to make reasonable use of the free area on the right side of the high-resolution user to increase the user's use of the web. The default state of mode two is the 50px wide fine strip that resides on the right, and the user from top to bottom is arranged according to the online and usual precedence logic, where you can quickly find the person you want to contact. Second, with the mouse in the avatar across, it will show the current mouse stop in the last one of the contacts issued by the original microblog. In this way, users can more easily understand the latest trends of these users, we want to use the latest developments of others to stimulate some chat desire and add some scenes.

Floating layer support pictures, music, video and other multimedia analysis, you can easily share these content with the friends of the joy and communication.

The default is a smaller preview mode, and clicking on the thumbnail media in preview mode allows for a more complete browsing mode, which is designed to control the flow and gradual feeling of the entire experience.

About the new product two models have been said, the following is said the revision of the user interface optimization.

We compare the following revisions before and after the interface.

Changed the operation area of the contact list and added the height of the list.

Put the search from the top of the previous placement to place at the bottom, so that the head of the operating area to appear lighter, the search status slightly lowered, so that the overall layout of the interface is more to follow.

The previous online status of the icon to increase the shape, improve the following overall product temperament.

The interface of the Chat window also made a temperament adjustment: Optimize the height of the top; In order to be consistent with the style of the new Web page, change the visual style of expression, picture, attachment, chat record and send button; All this to improve and improve the user experience during chat.

The above is the WEBIM revision of some cases. The following name to thank the students who have been struggling in the forefront of the components: @ Young monkey Wild @ice wood and professional advice: @ AH Bingben @eason_shao

We look forward to the arrival of the new product:

Article Source: Weibo UDC

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.