應用程序開發人員不能跳過的 10 大移動 UI 技巧

已發表: 2015-04-24

雖然許多因素決定了移動應用程序的開發方式，但應用程序用戶界面的概念化是最重要的考慮因素之一。 當涉及到移動應用程序的用戶界面時，需要特別注意的關鍵事項包括：確保點擊特定按鈕或任何其他 UI 元素向用戶呈現反饋、界面的清晰度、移動應用程序多個視圖的一致性等. 作為一個移動應用程序設計師，注意所有這些方面是你會後悔避免的事情。 為了您的利益，我列出了十個很棒的移動 UI 技巧，它們將幫助您為不同種類的移動應用程序設計完美的用戶界面。

為什麼需要為您的移動應用程序設計出色的 UI（用戶界面）？

好吧，在為移動應用程序設計用戶界面時，您需要確保與之相關的過程經過深思熟慮，並且與為網站/網絡應用程序設計用戶界面所遵循的過程沒有任何不同。 換句話說，您必須使用與設計台式計算機應用程序相同的基本原則來設計面向移動/平板電腦的應用程序。

借助出色的移動應用程序用戶界面，了解和理解用戶變得輕而易舉

為移動應用程序設計直觀的用戶界面的過程需要進行大量研究。 您需要確定目標受眾是誰，以及什麼是絕對令人驚嘆的用戶界面的起點。 例如，如果您的移動應用程序的目標受眾包括青少年，那麼您需要考慮的一些關鍵設計元素包括：大膽而鮮豔的色彩、吸引人的佈局、時髦的字體等。

現在，讓我們直接了解 10 大移動 UI 技巧，它們將為移動應用程序設計師帶來最大的好處

  1. 了解您是針對專家用戶還是業餘愛好者

通常，移動應用程序是為具有相似專業知識和意圖的無處不在的用戶設計的。 但是，顯然有可能擁有不同水平的專業知識和意圖的用戶組。 雖然新手用戶可能會選擇在整個應用程序中緩慢移動，但專家用戶將能夠記住所有應用程序元素，從而在多個應用程序頁面中快速移動。 因此，在創建應用程序的用戶界面時，請確保它高效，同時對於新手和專家用戶來說都簡單且信息豐富。

  1. 為理想的按鈕尺寸安頓下來

統計數據顯示，移動應用程序用戶界面的按鈕大小僅限於用戶手指的大小。 大多數用戶表示，通過拇指操作移動設備可以真正方便地訪問應用程序的界面。 因此，在為移動應用程序設計用戶界面時，請確保實現足夠的按鈕尺寸以及屏幕按鈕之間所需的間距，以避免任何與觸摸相關的問題。

  1. 確保文本清晰易讀

在閱讀應用程序中包含的單詞時遇到困難，用戶可能會繼續選擇完全不同的應用程序。 儘管您為美化移動應用程序的排版付出了很多努力，但難以辨認的文本很容易耗盡應用程序的實際本質。 因此，您可以選擇在應用程序中包含動態文本類型。 此類排版包含的其他功能包括：

  • 能夠為不同的文本塊指定各種文本樣式，包括腳註、標題、正文等。
  • 正在對每種字體大小的字母間距和高度進行自動調整
  • 具有響應用戶對不同文本大小設置等所做更改的文本的能力。
  1. 充分利用專為移動應用程序設計的無數圖標

移動應用程序界面開發的世界充滿了一系列成功地給新手和專業應用程序用戶留下深刻印象的圖標。 此類圖標具有易於所有類別用戶理解的功能。 因此，作為應用程序設計師，您可以繼續在應用程序中實現一系列常用圖標，從而設計出絕對出色的用戶界面。 下面是一些在設計應用程序界面時使用的最好的圖標：

  • ||- 這兩條平行線代表暫停一條正在運行的線
  • “？” - 這個三角形表示播放媒體文件
  • x- 這個十字用於關閉文件
  1. 注意移動應用 UI 位置

通常，移動應用程序的 UI 元素要么放置在應用程序的底部，要么放置在頂部。 在這裡，重要的是要知道，大多數智能手機用戶使用拇指作為主要手指來敲擊多個按鈕來握住他們的設備。 對於慣用右手的用戶，拇指可能會到達屏幕右下角的區域。 因此，建議將所有主要應用程序按鈕放置在屏幕底部，然後將所有關鍵和常用按鈕放置在屏幕右下角。

  1. 選擇合適的移動佈局

佈局是每個移動 UI（用戶界面）的重要組成部分。 在為您的應用程序設計 UI 時，請確保選擇正確的移動佈局，它為您提供了一種在應用程序中組織和對齊細節的便捷方式。 所有移動佈局都分為三個主要類別，即：

  • 帶頁腳
  • 帶有菜單欄和頁腳
  • 沒有頁腳或菜單欄
  1. 根據移動平台的期望規劃“返回”按鈕的集成

在設計應用程序的 UI 時，請確保“返回”按鈕始終如一地引導用戶返回。 僅在考慮了您為其設計應用程序的平台之後才需要執行此操作。 例如，如果您正在設計一個 iOS 應用程序，那麼我建議您在左上角集成“返回”按鈕，因為大多數用戶都希望它是這樣的。

  1. 使用高分辨率圖像

建議將低分辨率圖像切換為高分辨率、生動的圖像。 這樣做可以輕鬆地為應用程序用戶界面的視覺外觀添加獨特的優雅感。 作為一個經驗法則，通過集成分辨率為 264 ppi 或更高的圖像，可以輕鬆地將吸引力添加到應用程序的用戶界面中。 因此，對於無法縮放以滿足不同移動屏幕的不同分辨率的圖像，基於矢量的圖像被證明是一種更好的替代方案。

  1. 注意設備的運動

除了考慮 UI 按鈕的位置之外，重要的是要記住應用用戶的拇指具有特定的流動方向。 因此，您需要設計用戶界面來控制用戶的所有不同拇指動作，如滑動、選擇列表等。

  1. 注意應用程序用戶界面中使用的顏色對比

正確使用顏色在增強移動應用程序用戶界面內的通信方面發揮著關鍵作用。 例如，在設計 iOS 應用程序的用戶界面時，顏色有助於賦予活力並呈現視覺連續性。 有幾個移動應用程序使用大量純色，無論是單獨還是組合看起來都令人驚嘆。 這些顏色最好的一點是，它們在淺色和深色背景下看起來都很棒。

最後的想法

出色的 UI 設計是成功的移動應用程序的關鍵。 雖然這聽起來很簡單，但如果您不熟悉繼續進行相同操作的正確技術，它可能會變得非常具有挑戰性。 我敢肯定，牢記上述提示，您肯定能夠為您的應用程序提供出色的用戶界面。

關於作者：

如果您期待將 PSD 轉換為應用程序模板，那麼聯繫 Amanda 可以為您提供幫助。 目前，她正在與著名的 Web 開發公司 Designs2HTML 合作。 她還撰寫了有關定制軟件開發、Web 和移動應用程序開發等方面的有趣且內容豐富的文章。