Dongfang
Welcome! This is a craftsman living in Beijing. He used to work for Tsinghua University High School, DiDi Chuxing, and Tencent.
Translation
Jianjin-zengqiang: Kuapingtai Yonghu Tiyan Sheji
2017, POST & TELECOM PRESS
TRANSLATED FROM: GUSTAFSON, A. (2016). ADAPTIVE WEB DESIGN (SECOND EDITION).
The concept of Progressive Enhancement conveys in this book has provided an approach of thinking. It's about the best practice of communication between designers and developers. This approach has enabled them to go beyond the limits of their own perspective and achieve business goals together.
— Comments by Hongyu XING, CTO of 58.com Inc.
Well translated and easy to understand. It lets you know what progressive enhancement is.
— A user from douban.com
JavaScript Shuju Keshihua Biancheng
2017, POST & TELECOM PRESS
TRANSLATED FROM: THOMAS, S. A. (2015). DATA VISUALIZATION WITH JAVASCRIPT.
In the data age, two professional skills become very important: the ability to analyze data and the ability to express data. Whether refining information from data or using information for the most effective communication, it places high demands on practitioners. Therefore, data visualization becomes the most effective means of communication in the realities of information explosion and time fragmentation. This book does not stop at the obscure theory, but introduces the display and interaction methods of different images with a vivid example system. In addition, the translator has a good technical background and truly reflects the essence of the original.
— Comments by Ting LI, CEO of Yunfeng Capital
Interaction Design
Promotion Webpages of DiDi Hitch
As a marketing-oriented group, there are 4 roles within the design center of DiDi: Brand Designer, Interaction Designer, UI Designer, and Graphic Designer. Since the middle of 2015, with a 9-member design team, I was responsible for the interaction design and effects implementation of more than 20 promotion webpages.
SPRING FESTIVAL TRANSPORTATION CALENDAR: This is a promotion webpage which cooperates with One-Way Street Bookstore. It can be accessed via a link in DiDi's Mobile Client. In order to attract users, we added a traditional Chinese Couplet game into this page.
Product Flow of DiDi Hitch
Together with the design team, as an interaction designer, I was responsible for the entire product flow of DiDi Hitch. For fast-paced iterations, 70% of DiDi client's UI was implemented by webserver way, no exception this page was.
The Survey Page After A Hitch Journey: After the trip, we will collect passengers' evaluation data on his or her driver to help us continuously improve the quality of our services. The survey page is divided into a real-name part and an anonymous part. The driver client will see a positive evaluation written by the passenger, and the negative evaluation written by the passenger will be submitted directly to the backend system anonymously as evidence, we will use that data to analyze whether a driver is good enough.
Motion Design
DiDi Hitch
Promotion Pages of DiDi Hitch Mobile:
We believe in Sharing because it is of rock and sexy. Therefore, we should keep harmony between background music and the motion rhythm if a web page contains those elements. The value of animation-duration in the source code should be strictly tuned to be equal to an integer multiple of one beat.Tap or drag the content on the PHONE area to preview more if you are using a desktop browser.
Transport During The Spring Festival
Trip Data on The 1st Anniversary Show
Design System
DiDi Hitch
Since 2015, The design system replaced the guideline, gradually became a more efficient design practice. Some organizations, such as Salesforce, have done best practices in that way. The design system incorporates elements such as content strategy and accessibility into the design requirements and unifies the design guideline and component library. Rely on my previous experience of Tencent Weibo's Web design guideline, and Brad Frost's Atomic Design philosophy, we created this design system of DiDi Hitch.
Firstly, this design system serves Web products of DiDi Hitch, including the built-in webserver and the promotion pages. Secondly, this design system serves UX designer and front-end developer. It is both a front-end guideline and a UI component library.
Make Websites
The International Official Website
From June to November 2015, I was responsible for interaction design and front-end development in the redesign project of the International Official Website of Peking University. 3-member team, 3 editions, delivered after the 6-month design & development cycle and passed the final assessment.
The International Official Portal Website of Peking University has made its debut on November 20th 2015. This new responsive site is designed with "Future-Friendly Design" thinking, applied bootstrap grid system, and support IE7+ browser.
UI Development
Tencent Weibo, Weishi
Responsible for creating user interfaces by frontend coding, PSD to HTML/CSS/JavaScript. Apply BEM methodology to improve coding quality, Web design guideline management. Responsive Web design, and bandwidth-oriented optimization work.
Build Tools
UFO Animate
PERSONAL PROJECT
UFO Animate is a CSS animation system that can quickly build CSS animation effects visually. Depends on your system language settings, English and Simplify Chinese are supported.
