web前端应对4k屏幕_应对复杂的屏幕

web前端应对4k屏幕

In the GOGOX client app, one of the rapidly evolving screens is the delivery package information screen. The complexity grows in the following ways:

在GOGOX客户端应用程序中，快速发展的屏幕之一是交货包裹信息屏幕。 复杂性以下列方式增长：

• Rich experiments. We have done a lot of experiments to improve the UI/UX design. The screen is really dynamic and controlled by feature flags. There are 17 feature flags for this single screen. Some experiments are minor changes such as adding a merchant order number component, and some of them are major changes such as replacing the size and weight component with brand new design and rearrange the components layout of the screen.

  丰富的实验 。 我们已经做了很多实验来改善UI / UX设计。 屏幕实际上是动态的，由功能标志控制。 此单个屏幕有17个功能标志。 一些实验是较小的更改，例如添加了商家订单号组件，而有些则是重大更改，例如以全新的设计替换了尺寸和重量组件，并重新排列了屏幕的组件布局。

• Multiple countries support. The user interface and behavior may be different for each country to cater to country-specific needs.

  多个国家的支持 。 每个国家/地区的用户界面和行为可能有所不同，以满足特定国家/地区的需求。

• Multiple account types support. The user interface and behavior may be different for personal and business users. For example, we present a set of predefined size options for personal users but allow custom sizing for business users.

  多种账户类型支持 。 个人和企业用户的用户界面和行为可能有所不同。 例如，我们为个人用户提供了一组预定义的大小选项，但允许企业用户自定义大小。

Without a proper design, the screen complexity will grow out of control as we have to take into account different combinations of scenarios. It is tempting to embed if-else conditions inline for different scenarios. However, the logic becomes tightly coupled and hard to understand, which makes it easy to break the working code unintentionally. For instance, updating the feature for country A may break the feature for country B. As a result, the developer productivity will be slowed down as part of the time is wasted to fix bugs and puzzle over workarounds. And product manager also has to compromise the pace of feature rollout.

如果没有适当的设计，屏幕的复杂性将失去控制，因为我们必须考虑到场景的不同组合。 可以将if-else条件嵌入到不同的场景中，这很诱人。 但是，逻辑变得紧密耦合且难以理解，这使得容易无意间破坏工作代码。 例如，更新国家(地区)的功能可能会破坏国家(地区)的功能。结果，开发人员的工作效率将降低，这是因为浪费了一部分时间来修复错误并困扰于解决方法。 产品经理还必须牺牲功能推出的速度。

我们的目标是什么？ (What are our goals?)

🎯 Easy to adapt to changing requirements.

🎯易于适应不断变化的要求。

The meaning of the term easy may be different for different people. To define the definition in our case:

对于不同的人，“ 容易 ”一词的含义可能有所不同。 在我们的案例中定义定义：

• Easy to add a feature — We can add a new component in isolation without changing the existing working code.

  易于添加功能 -我们可以单独添加新组件，而无需更改现有工作代码。

• Easy to remove a feature — We can remove a component by just deleting the linkages.

  易于删除的功能 -我们只需删除链接即可删除组件。

• Easy to update a feature — We can update a component in isolation without creating side effects breaking other components.

  易于更新功能 -我们可以隔离更新组件，而不会产生破坏其他组件的副作用。

如何实现我们的目标？ (How to accomplish our goals?)

One of the key techniques to tackle software complexity is the separation of concerns. A concern is the details of a specific building block. For example, in mobile app development, a screen is composed of smaller components. The presentation and behavior of a single component is a concern that we want to separate from other components; the composition of all the components in a screen and interaction between them are other concerns.

解决软件复杂性的关键技术之一是关注点分离 。 一个问题是特定构建基块的详细信息。 例如，在移动应用程序开发中，屏幕由较小的组件组​​成。 单个组件的表示形式和行为是我们要与其他组件分开的关注点； 屏幕中所有组件的组成以及它们之间的交互是其他问题。

When requirements change, you extend the behaviour of such modules by adding new code, not by changing old code that already works. — Robert C. Martin