移动web优先使用内核

Recent media consumption & trends reveal that 90% of their mobile time is spent in apps, and only 10% browsing the rest of the internet. But the user base of a specific product may be reluctant to move for a mobile app, only to get done a specific service. And also the user may think twice before installing a new app because of limited storage and memory. Most hesitated warning at this point is that to free up the space. So web apps may be the newest trend in the upcoming future, with the tagline “no more mobile apps”.

最近的媒体消费和趋势表明，他们90％的移动时间都花在了应用程序上，而只有10％的时间用于浏览互联网的其余部分。 但是，特定产品的用户群可能不愿意迁移到移动应用程序，而只是为了完成特定服务。 而且，由于存储和内存有限，用户在安装新应用之前可能会三思而后行。 此时最犹豫的警告是释放空间。 因此， 网络应用可能会成为未来的最新趋势 ，标语是“不再有移动应用”。

Its worthy to find out the importance of a mobile app during this walk-through.

在本演练中，有必要了解移动应用程序的重要性。

为什么我们需要移动应用程序？ (Why do we need mobile apps?)

High market-share and the usage

高市场占有率和用途 Ease of sending notifications

易于发送通知 Ability to work offline

离线工作能力 Making use of mobile device features

利用移动设备功能 Mobile apps offer better Personalization

移动应用程序提供更好的个性化

具体用例 (Specific use case)

Imagine a situation where the Product owner decides to go for a mobile app based on the following reasons.

设想一下产品所有者基于以下原因决定使用移动应用程序的情况。

Web app takes a considerable amount of time to fulfill a specific operation.

Web应用程序需要花费大量时间才能完成特定操作。 All the features which are available in the current web app is not accessible via mobiles, so that need for a mobile app has been arise with limited functionality.

当前的Web应用程序中可用的所有功能都无法通过移动设备访问，因此对移动应用程序的需求已经出现，而功能却受到限制。

Improving performance is a continuous process. Product needs to be optimized in every aspect in order to achieve it. And at the same time what if we were able to provide an all in one web application with all the services that works perfectly on both mobile and desktop browsers? Since a web browser is available in every mobile its a great option to get away with a mobile app.

提高性能是一个连续的过程。 为了实现它，需要在各个方面对产品进行优化。 同时，如果我们能够在一个移动应用程序和台式机浏览器上完美运行的所有服务中提供一个Web应用程序，那该怎么办？ 由于每个移动设备都可以使用网络浏览器，因此它是摆脱移动应用程序的理想选择。

突然出现需求时可能面临的挑战 (Challenges that are likely to face when a sudden requirement arises)

Lack of well-trained programmers who can deal with mobile technologies

缺乏训练有素的能够处理移动技术的程序员 have to deal with different platforms

必须处理不同的平台 Tight deadline

紧迫的截止日期 Choosing the right front end framework

选择正确的前端框架 Fitting between the front-end and back-end services, technologies

介于前端和后端服务，技术之间

设计方案 (Solution with the design)

How can you redesign your web application to avoid going for a mobile application? It’s the responsiveness of the user interfaces plays a huge role in achieving this. An experienced designer with great ideas can help with an innovative design. Its worthy to wait until the design gets finalized.

您如何重新设计Web应用程序以避免使用移动应用程序？ 用户界面的响应能力在实现这一目标方面发挥着巨大作用。 经验丰富的设计师具有出色的创意可以帮助您进行创新设计。 值得等待设计最终确定。

表格布局的见解 (An insight with table layouts)

One of the major concerns that I had to deal with was, how can we make accessible the table views on a mobile with all the options available? I hope this would be a great starting point when redefining your app for mobile devices.

我要处理的主要问题之一是，如何通过具有所有可用选项的移动设备访问表格视图？ 我希望这将是重新定义移动设备应用程序的一个很好的起点。

Here are some illustrations which will be helpful when understanding this.

以下是一些插图，有助于您理解。

常规表布局 (Conventional table layout)

Typical table view which is harder to maintain the responsiveness 典型的表格视图，难以保持响应性

优点 (Pros)

User can get a summarized view

用户可以获得摘要视图

缺点 (Cons)

Limited scalability

扩展性有限 Less adaptable for changing requirements

适应需求变化的适应性较差 Adding new columns will increase the width of the table and even in desktop browsers horizontal scroller will gets enabled

添加新列将增加表格的宽度，甚至在桌面浏览器中也将启用水平滚动条

如何重新定义布局？ (How to redefine the layout?)

Adhere to mobile-first design and development approach. Always think about how does your custom component going to be displayed on a mobile device. So that all the functionalities that are available within a web app can be made available for a mobile app too. Isn’t that amazing? Note that this is the target of this piece of writing too.

坚持以移动为先的设计和开发方法。 始终考虑如何将自定义组件显示在移动设备上。 这样，Web应用程序中可用的所有功能也可以用于移动应用程序。 那不是很神奇吗？ 请注意，这也是本文的目标。

重新定义的桌面视图 (Redefined desktop view)

The component view with a card layout is a better solution that can be adjusted based on the width of the screen. The combination of the CSS grid for two-dimensional layout and flex-box for layout in one dimension makes a responsive layout for target devices. If more control is needed, CSS media queries provide better control over it.

具有卡布局的组件视图是一种更好的解决方案，可以根据屏幕的宽度进行调整。 用于二维布局CSS网格和用于一维布局的flex-box的组合使目标设备的响应式布局成为可能。 如果需要更多控制，则CSS媒体查询可以更好地控制它。

Instead of rendering the whole array of objects at once, pagination or load more content on scroll techniques makes the app loading faster. The app layout looks different based on the device width and in that way, it’s possible to bring the accessibility to all the features for mobile devices as well.

分页或通过滚动技术加载更多内容而不是一次呈现整个对象数组，而是使应用程序加载更快。 根据设备的宽度，应用程序布局看起来有所不同，通过这种方式，还可以为移动设备带来对所有功能的可访问性。

How the redefined design looks like in a desktop browser 重新定义的设计在桌面浏览器中的外观

重新定义的移动视图 (Redefined mobile view)

Redefined design for mobile first approach 重新设计的移动优先方法

Each record in the table is a new card with all its details. Components are the future with latest front-end technologies. So that i think card view provides them a better layout.

表中的每个记录都是一张包含其所有详细信息的新卡。 组件是最新前端技术的未来。 因此，我认为卡片视图为他们提供了更好的布局。

It ensures:

它确保：

the accessibility (makes all the features available on every device)

可访问性(使每个设备上的所有功能都可用) the scalability (fits well with the future requirements) of the app.

应用的可扩展性(非常适合将来的需求)。

结论 (Conclusion)

This is not to discourage you when there is a significant need for a mobile application at the moment. This is a motivation to design and implement mobile-first web applications which gives a superb user experience and accessibility to your users in both desktop and mobiles.

当当前非常需要移动应用程序时，这并不是要阻止您。 这是设计和实现移动优先的Web应用程序的动机，它为台式机和移动设备中的用户提供了出色的用户体验和可访问性。

Thank you so much for hanging around.

非常感谢您的陪伴。

翻译自: https://uxdesign.cc/a-motivation-to-get-the-most-out-of-web-apps-with-mobile-first-approach-so-as-to-get-rid-of-the-5f106e752321

移动web优先使用内核

相关资源：四史答题软件安装包exe