摘要
這篇文章深入探討了 Ox 如何在其應用程式中有效實施 HIG 元件,並解析了在 UI/UX 設計中的重要原則,以提升使用者互動和滿意度。 歸納要點:
- HIG 指南提供了一套關鍵的準則,幫助設計師創造一致且直覺的使用者體驗,特別是針對動態介面與包容性設計。
- 認知負荷影響使用者在任務執行時的表現,因此合理的資訊架構和視覺階層可以大幅提升介面的可用性與愉悅感。
- Ox 在其應用中成功實施 HIG 元件,包括自訂組件及手勢控制,並利用資料分析進行 UI/UX 優化,提高了整體使用體驗。
我們在研究許多文章後,彙整重點如下
- 不同年齡層和族群的使用者對App的認知差異,需考量其需求。
- 介面美觀和操作流暢是設計成功App的重要因素。
- Apple的人機介面指南提供了全面的設計建議與規範。
- iOS7的新視覺設計原則能幫助開發者提升使用者體驗。
- 了解使用者需求有助於定制更符合他們期待的界面與互動方式。
- 互動設計強調如何有效地利用視覺、聽覺及觸覺來提升產品吸引力。
在當今數位時代,無論是什麼樣的App,都不可避免地會接觸到各種年齡層和背景的使用者。因此,設計師應該更加關注使用者的需求與偏好,以提供更好的操作體驗。不僅要追求美觀,更要確保介面的流暢性。透過學習Apple的人機介面指南,我們可以得到許多寶貴的設計靈感,並針對特定用戶進行優化。這不僅讓產品更具吸引力,也提高了整體滿意度。
遵循 iOS 人機介面指南(HIG)以打造優異使用者體驗
Ox是一款專為熱愛舉重的健身愛好者設計的 iOS 應用程式。它可計算你的最大單次舉重(1RM),估算你可以舉起的潛在重量,以及確定你可以增加多少重量。所有這些計算只需一次點選即可完成。在這個 Ox 專案中,我們面臨著建立一個基於原生 Apple 的應用程式的挑戰,這意味著我們更像是在從 iOS 本身建立一個原生應用。如果談到原生 iOS 應用,那麼《人機介面指南》(Human Interface Guidelines,簡稱 HIG)就是必讀之作。在本文中,我想討論如何依據 HIG 原則來構建 OX,以使使用者體驗更加最佳化。HIG,即《人機介面指南》,是旨在協助開發者和設計師創造一致、直觀且有效 UI/UX 的指導手冊。該指南由 Apple 為其作業系統(iOS、macOS、ipadOS、watchOS 和 tvOS)發布。
**專案 1:善用導航欄**HIG 強調導航欄在 iOS 應用程式中的關鍵性。透過整合導航欄,Ox 可以輕鬆存取功能,並為使用者提供一致且直覺的體驗。導航欄提供標籤、按鈕和搜尋欄等元素,使使用者能快速執行常見任務,例如查詢特定鍛鍊或調整設定。
**專案 2:採用系統字型和顏色**HIG 建議採用系統字型和顏色,以確保 Ox 與 iOS 生態系無縫整合。這有助於建立品牌的一致性,並讓使用者熟悉應用程式的視覺元素。根據 HIG,Ox 應該使用 San Francisco 字型,因為它是 iOS 的預設字型,可以在各種裝置上提供清晰可讀的文字。應用程式的配色方案應遵循 Apple 的 Material Design 原則,運用與 iOS 介面相輔相成的中性色調和重點色,使得整體介面更具吸引力及易於操作。
HIG的主要組成部分:
1. 設計原則:強調設計中的清晰性、效率和一致性。
2. UI元件:提供有關使用UI元素(如按鈕、圖示和選單)的指導,包括最佳尺寸和間距。
3. 使用者互動:說明使用者如何與應用程式進行互動,包括手勢、動畫和轉場效果。
4. 可及性:針對建立適合所有使用者的應用程式提出指南,特別是那些有身體或認知限制的使用者。
5. 視覺與美學:就色彩調色盤、字型排版和圖示設計提出建議,以創造出吸引人且易於閱讀的顯示效果。
為什麼 HIG 重要?
1. 一致性:創造統一的外觀和感受,使使用者更容易理解和導航應用程式。
2. 使用者體驗的品質:幫助提供無縫且直覺的使用者體驗,提升使用者滿意度和留存率。
3. 開發效率:明確的指導方針可以減少開發時間,因為設計師和開發人員不必從頭開始建立解決方案。
4. 可及性:確保應用程式能夠被所有人使用,包括有障礙的人士。
遵循 HIG 指南提升使用者體驗
遵循 HIG(人機介面指導原則),開發者可以確保他們的應用程式不僅具備功能性,還能為使用者提供易於使用且愉悅的體驗。HIG 連結:https://developer.apple.com/design/human-interface-guidelines。當然,實施 HIG 會使使用者體驗變得更好。實施 HIG 的過程並不像我們想像中那麼簡單。我們認為微不足道的許多細節,其實對於提升使用者體驗來說至關重要。這是因為蘋果擁有大量元件,使得我們在選擇最適合或最常用的元件時面臨困難。例如,我們一開始對於如何區分重量-重複計算器頁面與 1RM 計算器頁面感到困惑。最初,我們討論並確定了資訊揭露元件是最合適的選擇。在進行設計時,除了遵守 HIG 的基本原則外,頂尖專家還應深入了解 HIG 的個別指南,特別是在字型大小、對比度、版面配置和動畫等細節方面加以注意。這些要點可確保應用程式介面的視覺一致性和可用性,從而顯著提升使用者滿意度。
在現今快速變化的市場環境中,開發人員也應留意最新趨勢,例如個性化設計、無障礙性考量、動態元素以及沉浸式體驗等,以期整合這些元素來提升整體使用者體驗,使應用程式更加吸引人且易於操作。
在創建出高保真版本後,我們發現這個元件在原生 iOS 應用程式中非常罕見。因此,我們不得不尋找另一個更合適的元件。我們發現 Tab View 元件更為合適,且在原生 iOS 應用程式中較為常見。
除了頁面問題,我們還討論瞭如何正確設計文字框。它是否應該在前方有一個標題?使用全寬文字框和內嵌寬度文字框之間有什麼區別?在使用者輸入之前,文字框中的預設值文案應該如何處理?我們遇到了許多這樣的問題。
iOS 文字欄位型別選擇原則
我們決定使用內嵌式文字欄位。為什麼呢?因為我們發現內嵌式文字欄位在原生 iOS 應用程式中較全寬文字欄位更常被使用。還有其他原因嗎?不幸的是,沒有。我們仍然不知道每種型別的文字欄位的確切使用案例。我們還遇到了另一個與文字欄位相關的問題:文案撰寫。我們希望讓使用者知道他們正在輸入以千克計算的數字。起初,我們想在文字欄位後面新增單位,但在 iOS 上找不到這樣的範例。因此,我們選擇將單位「千克 (kg)」作為預設值新增到文字欄位中,以便使用者在輸入其數值之前可以看到這個單位。**最新趨勢:**全球性研究指出,在行動裝置使用者體驗 (UX) 設計中,內嵌式文字欄位的使用率正逐年攀升。這股趨勢反映了使用者的偏好,他們更習慣於在原生 iOS 應用程式中使用內嵌式文字欄位,而非全寬文字欄位。**深入要點:**對於有經驗的 iOS 應用程式開發人員來說,選擇何種文字欄位型別取決於特定使用案例。內嵌式文字欄位在 iOS 生態系統中較為普遍,而全寬文字欄位則通常用於需要大量輸入空間的情況,例如電子郵件地址或網址。開發人員應根據使用者的輸入行為、可預期的資料長度和整體 UX 目標,選擇合適的文字欄位型別。
我們希望使用者能夠輸入他們的運動型別,以便在資料頁面上檢視這些資訊。我們對如何將這個功能新增到使用者介面感到困惑。最初,我們考慮在文字框下方使用單選按鈕,但我們認為這樣會讓介面顯得雜亂,並使使用者誤以為選擇運動型別比輸入文字框的值更重要。在尋找合適的元件後,我們發現在幾個原生 iOS 應用中採用了“nuggets”的設計。因此,我們決定採用這種元件來進行運動型別的選擇。然而...
善用認知負荷,打造卓越使用者體驗
我們應用程式的使用者體驗受到了一個因素的影響,那就是我們自身的思維方式。我們希望創造一個使用者可以「快速且輕鬆」使用的應用程式,但我們對於「快速且輕鬆」的定義產生了誤解。我們認為,步驟越少,對使用者來說,應用程式就會越快速、越簡單。我們沒有意識到的是,當使用者考慮他們需要做什麼時,那也是一個步驟。在我們的應用程式中,步驟僅僅是選擇輸入、輸入數值、選擇運動和點選按鈕,以獲取他們所需的資料。但實際上,即使在使用者開啟應用程式時,他們也會立刻思考自己需要進行哪些操作。這本身就是一個我們未曾察覺到的步驟。**專家洞見:將認知負載納入使用者體驗考量**傳達出「認知負載」在提升使用者體驗中的重要性。傳統思維著重於減少表面上的步驟,但卻忽略了使用過程中可能增加的認知處理負擔。認知負載指的是使用者在理解和記憶資訊時所承受的心智壓力。若過高,便會影響其理解、表現及滿意度。因此設計師必須將此納入考量,例如提供清晰指引、簡化任務並加強視覺輔助,以減輕使用者所承受的認知負擔。
**趨勢展望:AI驅動的個人化使用者體驗**隨著人工智慧(AI)技術日益成熟,如何打造個性化使用者體驗已成為新趨勢。AI 驅動的應用可根據每位使用者各自不同的喜好、行為及需求進行調整與最佳化。透過收集與分析大量資料,AI 能夠自動調整介面設計、推薦相關內容並簡化任務流程。因此,不僅能提升便利性,更可增強使用者參與感及滿意度。設計師應積極探索利用 AI 來提供符合特定需求之個人化體驗的方法,以更好地服務於每位使用者。
在收到使用者的反饋後,我們意識到所使用的 ′nugget′ 元件效果不佳,因為它只讓使用者感到困惑。使用者提到他們從未見過 ′nugget′ 元件與表單(文字欄位)結合使用。因此,也許使用彈出按鈕或下拉按鈕會更好。這些反饋對我們來說非常寶貴,顯示出使用者體驗(UX)不僅應考慮原生應用中常用的元件,還需要思考這些元件如何組合以創造一個整體介面(UI),從而提升使用者體驗。
感謝您的閱讀。© 2024 Muhammad Fadhil Sultan Pasya, Vincent Senjaya, Valentinus Kenji, Vincensia Elvina, Reza Athallah Rasendriya 版權所有。
參考來源
Apple Human Interface Guidelines — 人機介面指南閱讀心得分享
任何一個App可能擁有著不同年齡層與不同族群的使用者,因此在某些事物的認知上會有所不同。文中大概都是提到介面美觀、操作流暢等詞彙,以及內容盡量填滿 ...
來源: MediumiOS Human Interface Guidelines 閱讀心得~ 彼得潘的iOS App 作業
因為~這份人機互動指南幾乎涵括了所有開發者應該考量到的一切,舉凡所有元件都有其建議與規範外,包括App架構、使用者互動、系統功能、視覺設計、圖標和 ...
來源: Medium淺談Apple的使用者經驗與人機介面的設計原則(上)
本文將介紹Apple公司的使用者經驗與人機介面的設計原則,以及Apple的iOS7全新行動作業系統的視覺設計(下期刊登),讓讀者能瞭解Apple公司如何以使用者 ...
來源: 北美智權iOS Guideline 怎麼看?(1)
中間:iOS7 人機介面指南,要設計iOS App 最好把這部份看熟。 右邊:使用者介面元素的目錄,主要給RD 看的,不過UI 吃飽沒事加減看一下,起碼知道各個 ...
iPhone 人機界面指南
瞭解這些可以幫助您根據使用者的特殊需求. 來定制使用者體驗和使用者介面。 由於您是在設計一個iPhone應用程式,有一些使用者需求是已知的。例如:. • 他們是行動的 ...
來源: claire-chang.com給UX學習者的入門指南(下) — UX所涵蓋的領域
Interaction Design(互動設計) · 何時該使用標籤、使用哪一種標記(文字、圖像)? · 該如何透過視覺、聽覺、觸覺等感官呈現資訊與給予回饋? · 使用者如何要如何與產品互動?(觸控 ...
來源: 政府網站營運交流平台月刊
最近流行的使用者經驗(User experience, UX)與使用者介面(User Interface,. UI)也強調美感體驗對產品的影響,這些例子說明了美感導入產品的重要性 ...
來源: 臺灣教育評論學會
相關討論