長城上的貓

小編:iOS13來了,您更新了嗎?除了十分期待的暗模式外,這次是否有其他使人耳目一新的亮點呢?本期給大家分享下iOS13更新內容,作者主要從視覺和交互的角度以及對比以往版本介紹,同時也總結了新的UI趨勢,一起來看看吧!

工作之余對ios的操作系統人機交互與界面設計的趨勢及思考分析;

最新版本更新的官方設計指南中,依然遵循了ios的三大基本設計主題。

1、暗模式

尤其這次更新中深色模式非常重頭,“從 iOS 13.0 開始,人們可以將系統全局的外觀樣式設置為深色視覺風格,即“深色模式”。在深色模式中,系統會為所有界面、視圖、菜單、控件等等調用一套更深的背景色方案,同時通過更多的半透明虛化效果使前景內容更有效地從深色背景當中突顯而出。深色模式同樣支持所有的可訪問性設計標準。人們可以將深色模式設置為系統的默認外觀模式,也可以讓設備在光照條件較弱的環境中自動切換至深色模式?!?/p>

? ? ? 聚焦于內容:深色模式可以將焦點集中于界面當中的內容區域,使內容本身得以突顯,而周圍的界面元素則會隱退于背景之中。更高效地給用戶呈現內容。

這樣就需要在app界面設計時充分考慮在深色與淺色兩種模式下的內容依然清晰可讀性。在某一種模式當中表現良好的設計方案,在另一種模式當中很可能出現問題。(如微信改版后的暗色微信版本視覺效果不是很理想)檢視界面在兩種模式下的表現,進行必要的調整,使其能夠良好適配于每一種模式。

?

2.1、更醒目的導航

運用大標題(注意標題文案要簡潔而通俗)

優點

  • · 提升可用性
  • · 有助于精簡內容
  • 常見的使用場景
  • · 導航
  • · 標題

設置?面 — 標題使??字號; 導航欄增高。讓用戶隨時都知道?己現在什么位置。但是當用戶滾動頁面時則縮小導航整體比例,因為此時用戶更關注中間的內容。

? App store – 信息層級的改變

  • ·原來的整個App Store變成了現在的“App”標簽欄,為了突出其他更能盈利、用戶更關注的信息。
  • ·把用戶評論數以及星級去掉,因為蘋果的排名本身就已經說明了App的優秀程度。
  • ·加粗了關鍵信息-價錢、標題。

?

2.2 更清晰的圖標

?·解鎖頁面?–?以實心按鈕取代線形按鈕,這樣可以增強點擊感。

?·鍵盤 –?用更寬的間距、淺淺的按鈕陰影來加強可點擊感。

· 以面性圖標取代線性圖標(因為面性圖標更像實物實體是實心的為主,圖標也更顯穩重。

· 涉及(線)的圖標,加粗線條,使之看起來更像面性圖標。

· phone、App store、photos的信息層級被重新設計。(例如App Store的標簽欄為了突出其他更能盈利、?戶更關注的信息, 如游戲,現在就單獨成為了?個標簽頁。然后將“Upates”盈利能力一般的信息入口移至右上角的個人中心)

 

3、字體的優化

計算器

· 新的加粗字體的設計讓重要的信息更加突出,整個iOS 13減少了細線字體的出現。

· 增強了字和背景的對比,讓文字更容易識別,特別注重無障礙設計。

日歷

· 月份和日期都用了更粗的字體,但仍然保持了清晰度。

·?更加突出重要的信息,從iOS 11開始日歷中的“年”和“月”是最突出的。而iOS 10卻只突出了日期。

 

4、消息通知的類型

消息通知的目的是為了提升產品活躍度,激活休眠用戶使用產品。

 

出現消息通知的場景有鎖屏、使用中、通知中心。其中交互類型分為“顯式推送”、“隱式推送”。視覺樣式分為“普通消息”、“詳情樣式”。

iOS 消息通知的設計原則為“不打擾,不錯過”

· 并且提供有用的、有意義的通知(通知不是為了引導用戶打開“你的應用”在推送消息時要注意通知個性化。尤其是注重場景化,運用智能算法推算出用戶使用app的契機,提供合適的推送)

· 即使用戶沒有作出回應,也不要為了同一件事情發送多個通知(推薦按應用分組,也可以定制化分組)

Domain 做到了不打擾,并且提供有用的、有意義的通知(明確告知用戶開啟通知權限的價值)

而豆瓣在一打開應用就請求權限,但是用戶尚未意識到應用推送消息的價值。

所以最好的請求權限應在恰當的時候提出。如當用戶完成新手引導后或登陸后。

開通權限后app提供描述性文字和聲音,以便在隱藏通知預覽時顯示。

· 考慮提供一個詳情視圖(包含圖片、視頻以及其它可動態更新的內容,允許用戶可執行快速的操作)

· 提供直觀、有用的操作(最多包含四個操作按鈕,用來執行常用任務)盡可能的提供少操作按鈕,運用席克定律幫助用戶作出選擇,減少用戶的思考避免焦慮。

· 避免展示破壞性的操作(確保用戶有上下問,并用紅色字體顯示)。

畫出用戶旅程圖,找出消息推送切入點,幫助并提醒用戶重要信息,避免用戶在狀態變更后錯過重要信息,及時告知用戶。

 

5、UI 設計趨勢

使用橫向滑動的卡片設計時,需要注意的事項:

· 讓用戶一眼就知道可以滑動

· 一個組件的滑動卡片內容需要一致統一

· 不要隱藏重要內容

使用彌散投影時的注意事項

· 內容要精簡

· 使用要克制

 

6、結語

總體來說,如今的界面設計無論是暗模式還是正常模式下的趨勢都更加注重內容、輕UI。把用戶的注意力更多的引導在重要內容和功能上。

· 如今在顯示屏越來越細膩的前提下,在色彩的運用上,多用漸變,高飽和的配色方案,增加圖標和按鈕的對比度。

· 在交互上將會越來越少的使用按鈕,更多的基于手勢的導航。例如,Android 的一個主要導航按鈕「返回」,將會在 Android 10 中正式消失。

· 內容上產品將更加關注功能性。每一個元素的設計都是基于它的目的和功能。很多人認為在設計過程中,對于視覺和功能只能二選一,但是隨著技術的發展,兩者可以很好的兼顧到。設計是為了讓網站或應用引起用戶的注意,而功能是為了讓體驗變得容易,目的是為了讓用戶更快的找到自己想要的信息。

 

原文地址:站酷

作者:HEBBEN軒

 

轉載請注明:學UI網 » iOS13 的設計趨勢及思考分享

登錄收藏
 
你可能喜歡的:
設計沉思錄 | 如何構建用戶決策模型推動頁面結構型改版設計沉思錄 | 如何構建用戶決策模型推動頁面結構型改版
如何把按鈕設計做到最好?看完這一篇就夠了!如何把按鈕設計做到最好?看完這一篇就夠了!
視覺設計在產品中的價值視覺設計在產品中的價值
UI模塊-移動端應用級的6種導航選擇方法UI模塊-移動端應用級的6種導航選擇方法
如何做好一套設計系統?比設計規范更進一步如何做好一套設計系統?比設計規范更進一步
這個方法,搞定了我大部分產品體驗分析這個方法,搞定了我大部分產品體驗分析
插畫風格圖鑒(上篇):知道插畫風格是如何演化的嗎插畫風格圖鑒(上篇):知道插畫風格是如何演化的嗎
Material Design Offline States 離線狀態Material Design Offline States 離線狀態
Material Design Writing 書寫Material Design Writing 書寫
真正優秀的圖標,少不了這7個底層設計原則真正優秀的圖標,少不了這7個底層設計原則
?
网球比分雷速 一波中特一肖中马 股票涨跌的原理 安徽快3遗漏号码数据查询 佛山期货配资公司 正规网上股票配资平台 河南22选5每天开奖结果 象泰配资 幸运赛车中奖诀窍 云南快乐10分最大遗漏 最好最安全的理财平台