Overview
Project Background
In the past, Huawei's photo gallery applications were adapted on different terminals through individual customization, thus resulting in extremely high development costs . With the release of the HarmonyOS, Huawei will launch a more diverse range of consumer terminals. As the lead designer of the gallery application, I led the team to work with engineers to optimize and transform the gallery application. Realizing a single development using a set of design rules, the gallery app can be adapted to multiple terminals to create a consistent and excellent base experience.
Info.
Group Project
My Role
Design Lead, directed the operation of the entire program.
Duration
March ~ August 2021
Result
1. Reorganized all components of the gallery application.
2. Designed response rules and formulas for each component.
3. Successfully reported the design solution. The new design is being implemented step by step.
4. Contributed to Harmony eco-community as an excellent case.
Background &
Goal
The gallery applications were adapted on different terminals through individual customization.
Pain points:
1. High cost of customization and maintenance.
2.The design experience is inconsistent from devices to devices.
Goal:
One Rule One Dev - Design one set of responsive rules suitable for each device and develop them only one time to meet the experience of different terminals.
Research & Analysis
By investigating the open source information, we got the breakpoint rules for android and windows. Through analysis, we found that the breakpoint values and rules are not applicable to Huawei's products. Therefore, we needed to redesign the breakpoint and responsive rules.
Harmony(PC only)
Currently, HarmonyOS's application response rule only considers the stretching change of the window on the computer side. The number of breakpoints of this rule is too small and the dependent variable is column, which cannot meet the complex component design requirements of the photo gallery.
Android
Android breakpoints have more values, but the difference between the defined values and those of Harmony OS platform is large, which is easy to form conflicts with the platform specification and cannot be fully reused.
Android uses Columns as the basis, and then classifies windows (Desktop/labtop), view(portrait and landscape), and then further classifies size.
Windows
Windows system has fewer breakpoint values, which is close to the HarmonyOS. Cannot meet the adaptation needs of photo gallery applications.
Normalized Screen Width and Units
We realized that among the complex data information of each product, the logic point of the screen is the most critical data for responsive design. Therefore, we collected data information (publicly available) for all mainstream Huawei products and normalized the logic point for each type of product through iterative attempts.
The normalized screen width is used as the basis for type differentiation to construct a device screen size progression relationship
Application Analysis
Screen size does not equal application size. Using a computer-based application as an example can help us fully understand this fact.
We split the application into navigation and content areas. Our responsive design project will be designed for navigation and content separately.
Design
Based on the analysis results, we designed separate breakpoint rules for the navigation and content areas.
Breakpoint-based Navigation for Responsive Changes
The process of navigation design is omitted here due to space issues.
We designed a total of three types of navigation for the gallery software, bottom navigation, side tabs and side bars, mainly taking into account the user's gesture experience needs and the product navigation needs for different screen sizes.
Screen under 400vp: This kind of screen is mainly the small size cell phone under portrait view. The user's main operating gesture is single-handed, and the screen space is small. Therefore, the most suitable navigation is the bottom navigation.
400vp to 1000vp screens: These screens include phones in landscape orientation, folding screens in unfolded state, and cockpits. Considering the user's spatial relationship, screen size, and product requirements for this type of device, we believe that the most appropriate navigation is side tabs.
Screens above 1000vp: These screens include tablets, computers and TVs. The user's interaction is more diverse, such as touch, remote operation using a pen and remote control. Considering the size of the screen and the product requirements of this type of device, we believe the most appropriate navigation is the side bar.
These are the results of the experiments and analysis of the gallery application. We finally eliminated the changes to the TV architecture for now after talking with HarmonyOS' platform design team. The overall navigation solution serves as a long-term plan for the gallery and other applications.
Two examples of breakpoint rules in practice demonstrate the relationship between navigation and application width.
Breakpoint-based Content for Responsive Changes
The content of the application is actually made up of various components.
The most special, typical and complex component for photo gallery applications is undoubtedly the photo grid component. Hence, I will explain how we designed responsive rules for photo grid component.
From Original Image to Thumbnails
In the Gallery app, users see resampled thumbnails.
Downloading thumbnails from the cloud is faster than downloading the original image, and displays better locally.
However, the thumbnail does not support infinite scale, so we have to set breakpoints to control the scaling limit by adding grid.
Calculate and verify the breakpoints
According to Huawei's Thumbnails generation algorithm, the standard thumbnail size is x px.
Through experimental verification of a large number of images, we have found a generally suitable scaling ratio M%.
Therefore, we can get the maximum size of each thumbnail is (1+M)%x px.
Theoretically, we then get the breakpoints of the day view photo grid component.
Photo grid component on smartphone remains unchanged at 4 grids each row. Other devices' photo grid needs to be adjusted to some extent.
Using the current photo day view component on the cell phone as a test example, the width of 4 grid is within the breakpoint interval as follows.
The current logic resolution widths of cell phones are all within that range, validating the rationality of the breakpoint.It also ensures that the user experience of the cell phone, a terminal with a large user base, remains unchanged.
Then, we successfully get the breakpoints of the day view photo grid component.
Simplify to Formula
To facilitate development, we worked with the development team to simplify the rules of the day view photo grid component into a formula.
Thus, when any of the parameters change in the future, the development team can make optimal adjustments with minimal cost.
Design breakpoint rules and formulas for each component independently
We have reorganized the components of the gallery application into two types: platform standard components and application independent components. It was a huge project to redesign the components. My colleagues will continue this work even after my departure.
Final Result
This project is based on the current version of the application and looks to the future. We wanted to build a unified responsive application that can adapt to the diverse devices of the future. This desire was fully supported by the leadership and development team after our initial presentation.
It needed to go through multiple versions to be fully realized. Although I will not have the opportunity to contribute to this project until that time, I am still proud to have participated in and directed this project. It was neither an "innovative" or"creative" project, but it was certainly a milestone of great experience and development value. Sincere thanks to all my colleagues who supported me in this project, and especially to my mentee Yucheng.