最佳 PWA 設計的主要 UI 考慮因素

如果您還沒有聽說過 PWA，那麼您應該先深入了解這一點： “什麼是 PWA？ 所有你需要知道的關於漸進式 Web 應用程序” 。 簡而言之，它們是 Web 應用程序，旨在提供遠遠優於傳統用戶界面和體驗的用戶界面和體驗。

在本文中，我們將提出設計 PWA 時最關心的 UI（用戶界面）問題。 繼續閱讀以了解如何為漸進式 Web 應用程序提供最佳用戶界面。

系統字體

如果您希望用戶在使用漸進式 Web 應用 (PWA) 時感到舒適，則應稍微改進其樣式以匹配他們的操作系統 (OS)。 在為每個平台實現不同的菜單和按鈕之前，您可以從系統的首選字體開始，分別適用於 iOS、Android、Windows。

換句話說，讓微軟 (Segoe)、谷歌 (Roboto)、蘋果 (舊金山) 甚至 Mozilla (Fira Sans) 的辛勤工作，通過提升用戶體驗，讓您的工作更輕鬆。 因此，系統字體是您永遠不應該離開列表的一項。

 /* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* 安卓 */
字體系列：'RobotoRegular'，'Droid Sans'，無襯線；

/* 視窗電話 */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

應用程序圖標

確實，移動應用程序設計師特別關注圖標設計。 而且由於您的 PWA（通過將其添加到主屏幕）將位於其他本機應用程序旁邊，因此也應該考慮其圖標設計。

這是有充分理由的。 第一印象總是極其重要的，一個應用程序的圖標是它給用戶的第一印象。 解釋一下，用戶可能會猶豫在手機上的本地應用程序圖標中點擊具有不同外觀的圖標。

為了讓你的 PWA 圖標與設備中的其他應用程序融為一體，它必須靈活地適應不同的平台——例如 Android、iOS 和 Windows——並適應風格元素（它的形狀、有/沒有背景的外觀或不同的顏色等）。 做到這一點的一個好方法是讓 PWA 的圖標設計匹配——或者至少接近——原生應用程序圖標的視覺標準。 靈感來源之一是 Google 的 Material Design 指南 Google 的 Material Icons。

 推薦閱讀：PWA vs Native App：哪個更適合你？

觸摸交互

觸摸交互應該很好地實現，或者根本不實現。

儘管這並非真的不可能，但很難融入高級觸摸交互，例如“滑動關閉”或“拉動刷新”。 雖然您認為這樣的交互會讓用戶讚歎不已，但只有當它們按預期工作時才會出現這種情況。 如果沒有，那麼你就有麻煩了。

如果您的 PWA 需要高級觸摸交互，請確保它們在真實設備上運行良好。 通常，這意味著您已經找到了由其他人努力開發的此功能的實現，例如出色的 react-swappable-views。

同時，您可以通過修改設計完全避免這個問題，這樣它就不會建議高級觸摸交互，例如，您可以使用底部導航選項卡代替選項卡。

可分享的內容

在 Progressive Web Apps 的情況下，當前的 URL 通常不容易訪問； 因此，您必須確保用戶能夠輕鬆地分享他們正在查看的內容。 可以集成一個共享按鈕，該按鈕允許用戶將 URL 複製到剪貼板，以便可以在著名的社交網站上共享它。

針對這種情況的一個小提示：如果您正在實施社交分享按鈕，請務必將第 3 方 JavaScript 的加載延遲到頁面中的主要內容加載之後。

觸控反饋

首先，可點擊區域應該提供觸摸反饋。 當點擊按鈕或可點擊區域時，用戶不應該懷疑點擊是否被識別。

旨在立即明確水龍頭已被識別。 例如，這可以通過以（淺）灰色突出顯示點擊區域、顯示材料波紋或立即開始頁面轉換來完成。

觸摸反饋做得很好的例子：

Google I/O 2016 網絡應用程序在點擊談話時會立即提供灰色突出顯示，並且禁用默認的藍色點擊顏色（默認情況下，某些瀏覽器會在點擊元素時顯示自己的突出顯示。這種默認樣式沒有吸引力並且可能與您的品牌視覺質量）。

其次，滾動時觸摸元素不應觸發觸摸反饋。

每當您實現觸摸反饋時，重要的是不要在用戶僅觸摸元素以滾動頁面時錯誤地觸發它。

在錯誤時間給出的觸摸反饋示例：

流行的 Material-UI 庫的早期版本在滾動期間觸摸可觸摸元素時會觸發漣漪。

如果用戶的觸摸位置在前幾百毫秒內沿任何方向移動超過 6 個像素，則通過中止波紋動畫來解決此問題。

保留上一個列表頁面的滾動位置

從詳細信息頁面按回應該保留上一個列表頁面上的滾動位置

當用戶從詳細信息返回時，頁面必須保留上一個列表頁面上的滾動位置。 當用戶從列表中選擇項目並查看其詳細信息時，點擊返回不能將它們帶到列表頂部。 主要目的是當用戶點擊時，他/她應該被帶回列表頁面，“滾動位置與他們在按下項目之前相同”。

畢竟，當按下返回時，瀏覽產品、文章或其他項目的列表會變得很困難，這會將用戶再次帶到列表的頂部。

顯然，當您讓用戶更難導航時，他們往往不會再回來。

避免過度“類似網絡”的設計

“經典”網頁設計在很大程度上依賴於文本中的鏈接，以及每個頁面上可用的靜態元素，例如頁眉和頁腳。 事實上，這些設計元素在原生應用程序中很少見，因此為了匹配用戶的心智模型，建議避免使用這些設計元素，而是使用更多類似應用程序的設計。

例如，應謹慎使用鏈接。 您應該小心放置按鈕或可點擊區域。

此外，應避免使用包含導航鏈接和版權信息的靜態頁腳。 從原生應用程序設計中汲取靈感，了解如何將類似信息移至菜單中，或以其他方式不包含在每個頁面中。

深色主題

黑暗主題將繼續存在，它們只會變得更好。

根據 Android 開發者的說法，深色主題有很多好處： 可以顯著降低功耗（取決於設備的屏幕技術）。 提高低視力用戶和對強光敏感的用戶的能見度。 使任何人都可以更輕鬆地在光線不足的環境中使用設備。

那些能夠在深色 UI 的可訪問性和耀眼色彩的情感反應之間找到平衡點的人將在明年名列前茅。 Google Material 提供的指南可以為您提供幫助。

綜上所述

漸進式 Web 應用程序是當下的需要，因為它們允許開發人員在手機上為用戶提供直觀的 Web 體驗。 通過簡單地實施這些建議，您可以在用戶使用您的 PWA 時輕鬆地為他們提供類似於應用程序的出色界面和體驗。

SimiCart 在這裡回答您每個與 PWA 相關的問題和需求。 特別是對於為您的電子商務網店尋找全方位完美Magento PWA解決方案的在線商家，我們為您和您的商店提供完整且具有成本效益的解決方案。